qyyfw/qihuaiflow
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
qihuaiflow/docs/frontend-dev-record.md
T
qyyfw 78ff261b5a 初始提交: Qihu-AIFlow v2.0.1 完整项目 
- 前端 React+TypeScript (源码+构建产物)
- 后端 Python FastAPI
- 数据库迁移 001-015
- Docker部署配置
- 微信ClawBot API频道绑定
- 项目文档 README.md
2026-07-02 14:40:46 +08:00

7.8 KiB
Raw Permalink Blame History

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)

  • 品牌展示面板（深色渐变背景 + 特性介绍）
  • 登录/注册Tab切换
  • 邮箱+密码登录表单
  • 一键体验登录（Demo用户/Pro用户/管理员）
  • 登录后自动跳转（用户→前台，管理员→后台）

2. AI聊天 (ChatPage)

  • 左侧对话列表（280px侧边栏），支持搜索过滤
  • 新建对话按钮
  • 对话更多操作：重命名/归档/删除
  • 右侧聊天区域：模型选择器 + 消息列表 + 输入框
  • 消息气泡（用户靠右紫色，AI靠左白色）
  • 简单Markdown渲染（标题/粗体/代码块/列表）
  • 挂载面板：知识库/Agent/技能下拉选择
  • 对话数据从Mock层加载
  • 实际API对接
  • 完整Markdown渲染（表格/图片等）

3. 频道 (ChannelPage)

  • 频道列表页：2列网格卡片布局
  • 频道详情页：频道信息 + 对话模拟
  • 频道绑定Agent/知识库标签展示
  • 成员数展示
  • 创建频道按钮（UI）
  • 实际消息发送与接收
  • 成员邀请功能

4. 知识库 (KnowledgePage)

  • 知识库列表：可展开卡片
  • 文档列表：文件类型标签（PDF/Word/Excel）
  • 文档状态标签：已完成/处理中/失败
  • 简易目录树展示
  • 上传文档按钮（UI）
  • 构建知识图谱按钮 + 处理中动画
  • 实际文件上传
  • 真实向量化处理

5. 应用市场 (MarketPage)

  • 4个筛选Tab（全部/Skills/Agent/MCP）
  • 3列应用卡片网格
  • SVG星级评分展示
  • 官方认证标识
  • 价格/会员免费展示
  • 应用详情Modal（描述/评分/评价/安装）
  • 类型图标区分
  • 真实支付与安装流程

6. Token驾驶舱 (TokenDashboardPage)

  • 3个统计卡片（渐变色背景）
  • 数字千分位格式化
  • 消耗排行榜（TOP模型 + TOP3应用）
  • Token消耗明细表格
  • 余额预警横幅
  • 导出/充值按钮（UI）
  • 真实数据统计
  • CSV/Excel导出

7. 付费中心 (PricingPage)

  • 3个会员等级卡片（月/季/年切换）
  • 当前方案高亮
  • 权益列表展示
  • 增值服务卡片
  • 优惠券展示
  • 支付方式图标
  • 真实支付对接（微信/支付宝）

8. 个人中心 (ProfilePage)

  • 6个Tab导航（账号安全/订单/会员/优惠券/已购/API密钥）
  • 修改密码表单
  • 订单列表 + 状态过滤
  • 会员信息卡片 + 自动续费开关
  • 优惠券列表 + 状态过滤
  • 已购应用列表
  • API密钥管理
  • 真实API密钥生成
  • 绑定手机/邮箱验证

9. 消息通知 (NotificationPage)

  • 通知类型筛选Tab（全部/未读/公告/提醒/续费/订单）
  • 不同类型SVG图标（颜色区分）
  • 未读标记（蓝色圆点）
  • 点击标记已读
  • 全部标为已读按钮
  • 相对时间显示
  • WebSocket实时推送
  • 真实消息通知

后台7大模块功能完成情况

1. 管理概览 (Dashboard)

  • 4个统计卡片
  • 最近操作日志表格
  • 最近审计日志表格
  • 快速入口链接

2. 大模型库管理 (Models)

  • 模型供应商卡片
  • 模型管理表格（名称/供应商/状态/单价/调用量）
  • 添加/编辑模型弹窗表单
  • 启用/停用开关
  • 真实API验证

3. 网站基础设置 (SiteSettings)

  • 品牌设置表单
  • 邮件配置表单
  • 短信配置表单
  • 各区块保存按钮

4. 支付渠道配置 (Payment)

  • 微信支付配置卡片
  • 支付宝配置卡片
  • 订单管理表格（含退款操作）

5. 增值服务管理 (Services)

  • 增值服务列表
  • 上架/编辑服务弹窗
  • 定制服务订单管理

6. 会员订阅体系 (Membership)

  • 3个会员等级编辑
  • 价格配置（月/季/年）
  • 权益管理
  • Token额度配置
  • 自动化规则配置

7. 应用市场审核 (Market)

  • 待审核应用列表
  • 审核通过/拒绝操作
  • 优惠券管理（创建/编辑）
  • 官方应用上下架

8. 日志与风控 (Logs)

  • 3个日志Tab（操作/调用/付费）
  • 用户封禁/解封管理
  • API限流配置
  • 导出按钮（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国际化（如需要）
Reference in new issue View Git Blame Copy Permalink