128 lines
2.7 KiB
Markdown
128 lines
2.7 KiB
Markdown
|
# NEX Docus Frontend
|
|||
|
|
|
|||
|
|
NEX Docus 前端项目 - 基于 React + Vite + Ant Design 构建。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **框架**: React 18+
|
|||
|
|
- **构建工具**: Vite 5+
|
|||
|
|
- **UI 组件**: Ant Design 5+
|
|||
|
|
- **路由**: React Router v6
|
|||
|
|
- **HTTP 客户端**: Axios
|
|||
|
|
- **状态管理**: Zustand
|
|||
|
|
- **Markdown 编辑器**: @uiw/react-md-editor
|
|||
|
|
- **样式**: Tailwind CSS + CSS Modules
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
frontend/
|
|||
|
|
├── public/ # 静态资源
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API 请求封装
|
|||
|
|
│ │ ├── auth.js # 用户认证
|
|||
|
|
│ │ ├── project.js # 项目管理
|
|||
|
|
│ │ └── file.js # 文件系统
|
|||
|
|
│ ├── components/ # 通用组件
|
|||
|
|
│ │ ├── MainLayout/ # 主布局
|
|||
|
|
│ │ └── ProtectedRoute.jsx # 路由守卫
|
|||
|
|
│ ├── pages/ # 页面组件
|
|||
|
|
│ │ ├── Login/ # 登录页
|
|||
|
|
│ │ ├── ProjectList/ # 项目列表页
|
|||
|
|
│ │ └── DocumentEditor/ # 文档编辑页
|
|||
|
|
│ ├── stores/ # 状态管理
|
|||
|
|
│ │ └── userStore.js # 用户状态
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ │ └── request.js # HTTP 请求封装
|
|||
|
|
│ ├── App.jsx # 应用入口
|
|||
|
|
│ ├── main.jsx # 渲染入口
|
|||
|
|
│ └── index.css # 全局样式
|
|||
|
|
├── index.html # HTML 模板
|
|||
|
|
├── package.json # 项目配置
|
|||
|
|
├── vite.config.js # Vite 配置
|
|||
|
|
└── tailwind.config.js # Tailwind 配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
# 或
|
|||
|
|
pnpm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 配置环境变量
|
|||
|
|
|
|||
|
|
编辑 `.env` 文件，配置后端 API 地址：
|
|||
|
|
|
|||
|
|
```env
|
|||
|
|
VITE_API_BASE_URL=http://localhost:8000/api/v1
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
访问：http://localhost:5173
|
|||
|
|
|
|||
|
|
### 4. 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
构建产物在 `dist/` 目录。
|
|||
|
|
|
|||
|
|
## 主要功能
|
|||
|
|
|
|||
|
|
### 用户认证
|
|||
|
|
- 用户注册
|
|||
|
|
- 用户登录
|
|||
|
|
- 自动Token刷新
|
|||
|
|
- 退出登录
|
|||
|
|
|
|||
|
|
### 项目管理
|
|||
|
|
- 创建项目
|
|||
|
|
- 项目列表
|
|||
|
|
- 项目详情
|
|||
|
|
- 删除项目（归档）
|
|||
|
|
|
|||
|
|
### 文档编辑
|
|||
|
|
- 目录树浏览
|
|||
|
|
- Markdown 实时预览
|
|||
|
|
- 文件保存
|
|||
|
|
- 创建文件/文件夹
|
|||
|
|
- 删除文件
|
|||
|
|
- 图片上传
|
|||
|
|
|
|||
|
|
## 默认账号
|
|||
|
|
|
|||
|
|
- 用户名: `admin`
|
|||
|
|
- 密码: `admin123`
|
|||
|
|
|
|||
|
|
## 开发指南
|
|||
|
|
|
|||
|
|
### 添加新页面
|
|||
|
|
|
|||
|
|
1. 在 `src/pages/` 下创建页面组件
|
|||
|
|
2. 在 `src/App.jsx` 中添加路由
|
|||
|
|
3. 如果需要认证，使用 `<ProtectedRoute>` 包裹
|
|||
|
|
|
|||
|
|
### 添加新 API
|
|||
|
|
|
|||
|
|
1. 在 `src/api/` 下创建对应的 API 文件
|
|||
|
|
2. 使用 `request` 工具发起请求
|
|||
|
|
3. 在组件中调用 API
|
|||
|
|
|
|||
|
|
### 状态管理
|
|||
|
|
|
|||
|
|
使用 Zustand 进行状态管理，参考 `src/stores/userStore.js`
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
Copyright © 2023 Mula.liu
|