qyyfw
78ff261b5a
- 前端 React+TypeScript (源码+构建产物) - 后端 Python FastAPI - 数据库迁移 001-015 - Docker部署配置 - 微信ClawBot API频道绑定 - 项目文档 README.md
234 lines
7.8 KiB
Markdown
234 lines
7.8 KiB
Markdown
# AIFlow 前端开发记录文档
|
||
|
||
## 项目概述
|
||
|
||
AIFlow 智能自动化PaaS平台，面向个人用户与小微企业，提供AI对话、知识库、应用市场、Token计费等一站式服务。前端包含前台8大板块 + 后台7大模块。
|
||
|
||
## 技术栈
|
||
|
||
- TypeScript + React 18 + Vite 5
|
||
- React Router v6 (HashRouter)
|
||
- 纯CSS（CSS Variables设计系统）
|
||
- 内联SVG图标（无第三方图标库）
|
||
|
||
## 设计系统
|
||
|
||
- **色彩**：暖灰蓝基调（#F8F9FB背景），品牌色#5B5FED（紫蓝），暗色侧边栏
|
||
- **字体**：Inter（正文）+ JetBrains Mono（代码/数字）
|
||
- **圆角系统**：6/8/12/16/20/9999px
|
||
- **阴影系统**：xs/sm/md/lg/xl五档
|
||
- **间距系统**：4px倍率（4/8/12/16/20/24/32/40/48）
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
src/
|
||
├── App.tsx # 路由配置 + AuthContext
|
||
├── main.tsx # 入口
|
||
├── vite-env.d.ts
|
||
├── types/index.ts # 完整类型定义
|
||
├── mock/data.ts # Mock数据层（独立，方便后续替换）
|
||
├── styles/global.css # 设计令牌 + 全局样式 + 工具类
|
||
├── components/layout/
|
||
│ ├── FrontLayout.tsx/css # 前台侧边栏布局
|
||
│ └── AdminLayout.tsx/css # 后台深色侧边栏布局
|
||
└── pages/
|
||
├── front/
|
||
│ ├── LoginPage.tsx/css # 登录页
|
||
│ ├── ChatPage.tsx/css # AI聊天
|
||
│ ├── ChannelPage.tsx/css # 频道
|
||
│ ├── KnowledgePage.tsx/css # 知识库
|
||
│ ├── MarketPage.tsx/css # 应用市场
|
||
│ ├── TokenDashboardPage.tsx/css # Token驾驶舱
|
||
│ ├── PricingPage.tsx/css # 付费中心
|
||
│ ├── ProfilePage.tsx/css # 个人中心
|
||
│ └── NotificationPage.tsx/css # 消息通知
|
||
└── admin/
|
||
├── Dashboard.tsx # 管理概览
|
||
├── Models.tsx # 大模型库管理
|
||
├── SiteSettings.tsx # 网站基础设置
|
||
├── Payment.tsx # 支付渠道配置
|
||
├── Services.tsx # 增值服务管理
|
||
├── Membership.tsx # 会员订阅体系
|
||
├── Market.tsx # 应用市场审核
|
||
└── Logs.tsx # 日志与风控
|
||
```
|
||
|
||
## 前台8大板块功能完成情况
|
||
|
||
### 1. 登录页 (LoginPage)
|
||
- [x] 品牌展示面板（深色渐变背景 + 特性介绍）
|
||
- [x] 登录/注册Tab切换
|
||
- [x] 邮箱+密码登录表单
|
||
- [x] 一键体验登录（Demo用户/Pro用户/管理员）
|
||
- [x] 登录后自动跳转（用户→前台，管理员→后台）
|
||
|
||
### 2. AI聊天 (ChatPage)
|
||
- [x] 左侧对话列表（280px侧边栏），支持搜索过滤
|
||
- [x] 新建对话按钮
|
||
- [x] 对话更多操作：重命名/归档/删除
|
||
- [x] 右侧聊天区域：模型选择器 + 消息列表 + 输入框
|
||
- [x] 消息气泡（用户靠右紫色，AI靠左白色）
|
||
- [x] 简单Markdown渲染（标题/粗体/代码块/列表）
|
||
- [x] 挂载面板：知识库/Agent/技能下拉选择
|
||
- [x] 对话数据从Mock层加载
|
||
- [ ] 实际API对接
|
||
- [ ] 完整Markdown渲染（表格/图片等）
|
||
|
||
### 3. 频道 (ChannelPage)
|
||
- [x] 频道列表页：2列网格卡片布局
|
||
- [x] 频道详情页：频道信息 + 对话模拟
|
||
- [x] 频道绑定Agent/知识库标签展示
|
||
- [x] 成员数展示
|
||
- [x] 创建频道按钮（UI）
|
||
- [ ] 实际消息发送与接收
|
||
- [ ] 成员邀请功能
|
||
|
||
### 4. 知识库 (KnowledgePage)
|
||
- [x] 知识库列表：可展开卡片
|
||
- [x] 文档列表：文件类型标签（PDF/Word/Excel）
|
||
- [x] 文档状态标签：已完成/处理中/失败
|
||
- [x] 简易目录树展示
|
||
- [x] 上传文档按钮（UI）
|
||
- [x] 构建知识图谱按钮 + 处理中动画
|
||
- [ ] 实际文件上传
|
||
- [ ] 真实向量化处理
|
||
|
||
### 5. 应用市场 (MarketPage)
|
||
- [x] 4个筛选Tab（全部/Skills/Agent/MCP）
|
||
- [x] 3列应用卡片网格
|
||
- [x] SVG星级评分展示
|
||
- [x] 官方认证标识
|
||
- [x] 价格/会员免费展示
|
||
- [x] 应用详情Modal（描述/评分/评价/安装）
|
||
- [x] 类型图标区分
|
||
- [ ] 真实支付与安装流程
|
||
|
||
### 6. Token驾驶舱 (TokenDashboardPage)
|
||
- [x] 3个统计卡片（渐变色背景）
|
||
- [x] 数字千分位格式化
|
||
- [x] 消耗排行榜（TOP模型 + TOP3应用）
|
||
- [x] Token消耗明细表格
|
||
- [x] 余额预警横幅
|
||
- [x] 导出/充值按钮（UI）
|
||
- [ ] 真实数据统计
|
||
- [ ] CSV/Excel导出
|
||
|
||
### 7. 付费中心 (PricingPage)
|
||
- [x] 3个会员等级卡片（月/季/年切换）
|
||
- [x] 当前方案高亮
|
||
- [x] 权益列表展示
|
||
- [x] 增值服务卡片
|
||
- [x] 优惠券展示
|
||
- [x] 支付方式图标
|
||
- [ ] 真实支付对接（微信/支付宝）
|
||
|
||
### 8. 个人中心 (ProfilePage)
|
||
- [x] 6个Tab导航（账号安全/订单/会员/优惠券/已购/API密钥）
|
||
- [x] 修改密码表单
|
||
- [x] 订单列表 + 状态过滤
|
||
- [x] 会员信息卡片 + 自动续费开关
|
||
- [x] 优惠券列表 + 状态过滤
|
||
- [x] 已购应用列表
|
||
- [x] API密钥管理
|
||
- [ ] 真实API密钥生成
|
||
- [ ] 绑定手机/邮箱验证
|
||
|
||
### 9. 消息通知 (NotificationPage)
|
||
- [x] 通知类型筛选Tab（全部/未读/公告/提醒/续费/订单）
|
||
- [x] 不同类型SVG图标（颜色区分）
|
||
- [x] 未读标记（蓝色圆点）
|
||
- [x] 点击标记已读
|
||
- [x] 全部标为已读按钮
|
||
- [x] 相对时间显示
|
||
- [ ] WebSocket实时推送
|
||
- [ ] 真实消息通知
|
||
|
||
## 后台7大模块功能完成情况
|
||
|
||
### 1. 管理概览 (Dashboard)
|
||
- [x] 4个统计卡片
|
||
- [x] 最近操作日志表格
|
||
- [x] 最近审计日志表格
|
||
- [x] 快速入口链接
|
||
|
||
### 2. 大模型库管理 (Models)
|
||
- [x] 模型供应商卡片
|
||
- [x] 模型管理表格（名称/供应商/状态/单价/调用量）
|
||
- [x] 添加/编辑模型弹窗表单
|
||
- [x] 启用/停用开关
|
||
- [ ] 真实API验证
|
||
|
||
### 3. 网站基础设置 (SiteSettings)
|
||
- [x] 品牌设置表单
|
||
- [x] 邮件配置表单
|
||
- [x] 短信配置表单
|
||
- [x] 各区块保存按钮
|
||
|
||
### 4. 支付渠道配置 (Payment)
|
||
- [x] 微信支付配置卡片
|
||
- [x] 支付宝配置卡片
|
||
- [x] 订单管理表格（含退款操作）
|
||
|
||
### 5. 增值服务管理 (Services)
|
||
- [x] 增值服务列表
|
||
- [x] 上架/编辑服务弹窗
|
||
- [x] 定制服务订单管理
|
||
|
||
### 6. 会员订阅体系 (Membership)
|
||
- [x] 3个会员等级编辑
|
||
- [x] 价格配置（月/季/年）
|
||
- [x] 权益管理
|
||
- [x] Token额度配置
|
||
- [x] 自动化规则配置
|
||
|
||
### 7. 应用市场审核 (Market)
|
||
- [x] 待审核应用列表
|
||
- [x] 审核通过/拒绝操作
|
||
- [x] 优惠券管理（创建/编辑）
|
||
- [x] 官方应用上下架
|
||
|
||
### 8. 日志与风控 (Logs)
|
||
- [x] 3个日志Tab（操作/调用/付费）
|
||
- [x] 用户封禁/解封管理
|
||
- [x] API限流配置
|
||
- [x] 导出按钮（UI）
|
||
|
||
## 数据Mock层
|
||
|
||
所有Mock数据集中管理在 `src/mock/data.ts`，与业务代码分离。后续接入后端时：
|
||
1. 创建 `src/api/` 目录
|
||
2. 实现对应API调用函数
|
||
3. 替换页面中的 `import from '@/mock/data'` 为API调用
|
||
4. 删除 `src/mock/` 目录即可
|
||
|
||
## 部署信息
|
||
|
||
- **构建产物路径**：`/data/share/project/frontend/dist/`
|
||
- **前端访问地址**：`http://s-3686137677310083075-773.team-coding:8080`
|
||
- **访问方式**：浏览器打开上述地址，自动跳转到 `/#/login` 登录页
|
||
- **Nginx**：已配置8080端口指向 `dist/` 目录
|
||
- **后端接口前缀**：`/app`（接口需在18080端口）
|
||
|
||
## 登录账号
|
||
|
||
| 账号 | 角色 | 密码 |
|
||
|------|------|------|
|
||
| demo_user | 普通用户（专业版会员） | 任意 |
|
||
| pro_user | 普通用户（企业版会员） | 任意 |
|
||
| admin | 管理员 | 任意 |
|
||
|
||
> 登录页提供一键登录按钮，无需输入密码。
|
||
|
||
## 后续待办
|
||
|
||
1. [ ] 替换Mock数据为真实API调用
|
||
2. [ ] 实现完整的Markdown渲染（react-markdown）
|
||
3. [ ] 接入WebSocket实现实时消息推送
|
||
4. [ ] 实现文件真实上传功能
|
||
5. [ ] 对接微信支付/支付宝支付SDK
|
||
6. [ ] 添加表单验证逻辑
|
||
7. [ ] 完善错误处理和加载状态
|
||
8. [ ] 添加单元测试和E2E测试
|
||
9. [ ] 实现i18n国际化（如需要）
|