# 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