# react-web-demo

**Repository Path**: unintentional_walker/react-web-demo

## Basic Information

- **Project Name**: react-web-demo
- **Description**: mix-web-demo对应前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-12-11
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于 RAG 知识问答与 LLM 驱动推荐的 IT 智能文章推荐与知识问答系统

一个功能完整的 React IT 智能文章推荐与知识问答系统，采用 React + Vite 技术栈构建。

后端对应仓库地址如下

- [Github](https://github.com/hongch666/mix-web-demo)
- [Gitee](https://gitee.com/chu-shichao/mix-web-demo)
- [GitLab](https://gitlab.com/hongch6661/mix-web-demo)
- [GitCode](https://gitcode.com/hongch666/mix-web-demo)

## 功能概述

### 核心功能

- **首页展示** - 内容展示和推荐
- **文章管理** - 发布、编辑、删除和浏览文章
- **分类管理** - 按分类组织和筛选文章
- **用户系统** - 用户注册、登录、个人资料管理
- **互动功能** - 评论、点赞、收藏功能
- **用户聊天** - 用户之间的消息沟通
- **数据统计** - 文章数据、用户活跃度统计和分析
- **API 日志** - 记录和查看系统 API 调用日志
- **操作日志** - 跟踪用户操作记录

### 个人中心

- 我的文章 - 查看和管理个人发布的文章
- 我的收藏 - 查看已收藏的文章
- 我的评论 - 查看个人发送的评论
- 我的点赞 - 查看已点赞的内容
- 个人资料 - 编辑个人信息和头像

## 技术栈

- **前端框架**: React 18.2
- **构建工具**: Vite 6.3
- **UI 组件库**: Ant Design 5.26
- **路由**: React Router 7.6
- **HTTP 请求**: Axios 1.9
- **数据可视化**: ECharts 5.6、Ant Design Charts 2.4
- **编辑器**: React MD Editor 4.0
- **Markdown**: React Markdown 10.1、Remark GFM 4.0
- **代码高亮**: React Syntax Highlighter 15.6
- **时间处理**: Day.js 1.11
- **代码质量**: ESLint 9.25

## 快速开始

### 前提条件

- Node.js 14.0 或更高版本
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 开发服务器

```bash
npm run dev
```

访问 `http://localhost:5173` 即可看到应用运行效果。

### 构建项目

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

### 代码检查

```bash
npm run lint
```

## 项目结构

```
src/
├── api/                    # API模块
│   ├── articles.js        # 文章API
│   ├── users.js           # 用户API
│   ├── comments.js        # 评论API
│   ├── chat.js            # 聊天API
│   ├── request.js         # 请求配置
│   └── ...                # 其他API模块
├── components/            # 可复用组件
│   └── ChatMessage.jsx    # 聊天消息组件
├── contexts/              # React Context
│   └── ThemeContext.jsx   # 主题上下文
├── pages/                 # 页面组件
│   ├── Home.jsx          # 首页
│   ├── Articles.jsx      # 文章列表
│   ├── Profile.jsx       # 个人资料
│   ├── Login.jsx         # 登录页
│   └── ...               # 其他页面
├── utils/                # 工具函数
│   ├── auth.js           # 认证工具
│   └── globalErrorHandler.js  # 全局错误处理
├── App.jsx              # 主应用组件
└── main.jsx             # 入口文件
```

## 主要特性

- ✨ 响应式设计，支持多种设备
- 🌙 明暗主题切换
- 📝 富文本编辑器支持
- 📊 数据可视化展示
- 🔐 用户身份认证和授权
- ⚡ Vite HMR 热模块替换加速开发
- 🧹 ESLint 代码规范检查

## 配置文件

- `.env`

```
# 应用标题
VITE_APP_TITLE=IT智能文章推荐与知识问答系统

# 后端接口基础路径
VITE_API_BASE_URL=http://www.hcsy.asia:8080

# 接口超时时间 (毫秒)
VITE_API_TIMEOUT=30000

# 流式响应总超时时间 (毫秒)
VITE_STREAM_TOTAL_TIMEOUT=300000

# 流式响应空闲超时时间 (毫秒)
VITE_STREAM_IDLE_TIMEOUT=30000

# AI服务名称
VITE_AI_SERVICE_NAME=AI服务

```

## 部分实现流程图

- 登录页面流程图

  ![login](./pic/front_login.drawio.png)

- 普通页面流程图

  ![page](./pic/front_page.drawio.png)

- AI 助手页面流程图

  ![ai](./pic/front_ai.drawio.png)

- 流式调用流程图

  ![stream](./pic/front_stream.drawio.png)

## 相关链接

- [React 文档](https://react.dev)
- [Vite 文档](https://vitejs.dev)
- [Ant Design 文档](https://ant.design)
- [React Router 文档](https://reactrouter.com)