qihuaiflow/docs/frontend-dev-record.md

# 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国际化（如需要）