114 lines
3.4 KiB
Plaintext
114 lines
3.4 KiB
Plaintext
========================================
|
|
前端项目探索完成总结
|
|
========================================
|
|
|
|
项目路径: /Users/youziba/goalfyagent/goalfymax-admin-web
|
|
|
|
技术栈:
|
|
- React 18.3.1
|
|
- TypeScript
|
|
- Vite (构建工具)
|
|
- React Router 7.9.4 (路由)
|
|
- Ant Design 5.27.4 (UI组件库)
|
|
- Jotai 2.15.0 (状态管理)
|
|
- Axios 1.12.2 (HTTP客户端)
|
|
|
|
========================================
|
|
关键发现
|
|
========================================
|
|
|
|
1. 项目框架: React + TypeScript + Vite
|
|
- 标准的 React 函数组件范式
|
|
- 完整的 TypeScript 类型支持
|
|
- 使用 Jotai 管理全局认证状态
|
|
|
|
2. 路由设置:
|
|
- 文件: src/App.tsx
|
|
- 使用 React Router v7 的 Routes/Route
|
|
- 支持嵌套路由
|
|
- 所有路由在一个文件中集中管理
|
|
|
|
3. 菜单配置:
|
|
- 文件: src/components/Layout.tsx
|
|
- 静态硬编码方式
|
|
- 支持主菜单和子菜单
|
|
- 菜单项通过权限进行条件渲染
|
|
|
|
4. API 调用:
|
|
- 文件: src/services/api.ts
|
|
- 使用 ApiClient 类包装 Axios
|
|
- 自动处理 Token 认证和刷新 (401 处理)
|
|
- 支持请求/响应拦截
|
|
- 各功能模块创建专门的 API 服务文件
|
|
|
|
5. 表单和表格:
|
|
- 使用 Ant Design Form 进行表单管理
|
|
- 使用 Ant Design Table 展示列表数据
|
|
- Modal 弹窗用于创建和编辑
|
|
- 完整的分页支持
|
|
|
|
6. 权限管理:
|
|
- Hook: usePagePermissions
|
|
- 从认证状态中获取用户权限页面列表
|
|
- 菜单和路由通过权限检查进行显示
|
|
|
|
7. 参考实现:
|
|
- UserLevelConfigs.tsx (用户等级配置) - 283 行
|
|
- 包含: 列表、创建、编辑、删除、状态切换
|
|
|
|
========================================
|
|
已生成的文档
|
|
========================================
|
|
|
|
1. FRONTEND_GUIDE.md (完整指南, 1527 行)
|
|
- 详细的项目结构介绍
|
|
- 每个功能的完整代码示例
|
|
- 权限管理详解
|
|
- 创建新页面的 9 步完整流程
|
|
|
|
位置: /Users/youziba/goalfyagent/goalfymax-admin-web/FRONTEND_GUIDE.md
|
|
|
|
2. QUICK_START.md (快速开始指南)
|
|
- 简化的 5 步创建新页面流程
|
|
- 核心文件速查表
|
|
- 常用开发模式代码示例
|
|
- 快速参考信息
|
|
|
|
位置: /Users/youziba/goalfyagent/goalfymax-admin-web/QUICK_START.md
|
|
|
|
========================================
|
|
创建新的配置管理页面需要 5 个步骤
|
|
========================================
|
|
|
|
1. src/types/xxx.ts - TypeScript 接口定义
|
|
2. src/services/xxxApi.ts - API 服务函数
|
|
3. src/pages/Xxx.tsx - React 页面组件
|
|
4. src/App.tsx - 添加路由
|
|
5. src/components/Layout.tsx - 添加菜单项
|
|
|
|
具体代码示例请查看 QUICK_START.md
|
|
|
|
========================================
|
|
核心文件位置速查
|
|
========================================
|
|
|
|
路由配置: src/App.tsx
|
|
菜单配置: src/components/Layout.tsx
|
|
API 客户端: src/services/api.ts
|
|
权限检查: src/hooks/usePagePermissions.ts
|
|
认证管理: src/hooks/useAuth.ts
|
|
全局状态: src/atoms/auth.ts
|
|
页面列表: src/pages/
|
|
类型定义: src/types/
|
|
|
|
========================================
|
|
可以立即开始的工作
|
|
========================================
|
|
|
|
1. 根据 QUICK_START.md 创建通用配置管理页面
|
|
2. 参考用户等级配置页面的实现方式
|
|
3. 遵循现有的代码风格和架构模式
|
|
4. 充分利用 Ant Design 组件库
|
|
|
|
========================================
|