nex_docus/frontend/README.md

NexDocus Frontend

NexDocus 前端项目 - 基于 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. 安装依赖

npm install
# 或
pnpm install

2. 配置环境变量

编辑 .env 文件，配置后端 API 地址：

VITE_API_BASE_URL=http://localhost:8000/api/v1

3. 启动开发服务器

npm run dev

访问：http://localhost:5173

4. 构建生产版本

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