5.2 KiB
5.2 KiB
数字分身管理系统 · 今日工作总结
日期:2026-07-08
负责人:Senior Developer(高级开发工程师)
项目目录:digital-avatar-app
技术栈:Vue3 + Vite + TypeScript + Pinia + Vue Router / FastAPI + SQLAlchemy + SQLite
一、项目背景与目标
- 产品线:「会会」(HuiHui)AI 个人数字分身(云 SaaS 版)
- 需求来源:《AI 个人数字分身系统研发需求文档(PRD)》+ Ardot 设计稿(9 个页面)
- 部署形态:uni-app 封装为 App / 微信小程序 / H5(当前阶段先实现 Web 版,验证业务闭环)
- 核心目标:打通「创建分身 → 管理分身 → 工具/授权/充值」的完整用户路径,并完成前后端真实数据贯通
二、今日完成的工作
1. 修复页面空白 & 首页改造
- 定位并修复页面空白三大根因:Pinia store 文件缺失、4 个视图文件为空(0 字节)、
main.ts导入了不存在的 store - 将首页(
/)改为「创建分身」引导页(渐变区 + 功能亮点卡片 + CTA) - 首页「开始创建」CTA 接入 4 步向导(原为死
alert)
2. 创建分身 4 步向导
- 步骤:① 基础信息 → ② 形象风格(emoji + 回复风格)→ ③ 灵魂配置(创造力/严谨度/幽默感滑块 + 回复长度 + 系统提示词)→ ④ 确认创建
- 数据流打通:向导提交 →
avatarStore.addAvatar()→router.push('/avatar/manage')→ 管理页展示刚创建的分身(头像用所选 emoji) - 管理页右上角新增「+创建」入口,可随时再建
3. 分身工具 4 个子页面
- 新增:分身名片 / 分身人脉 / 我的项目 / 创建组织 四个页面
- 管理页「分身工具」区 4 个入口从
console.log改为真实router.push跳转 - 底部导航栏 3 入口(我的分身 / 授权管理 / Token),并在首页与编辑页自动隐藏,避免遮挡内容
4. FastAPI 后端搭建(核心交付)
- 统一响应包装
{code, message, data}(responses.py提供ok/fail),与前端拦截器解包对齐 - 数据模型:
Avatar / Authorization / Organization / TokenAccount / TokenPlan,to_dict()输出 camelCase 字段(displayName / photoUrl / createdAt …)匹配前端类型 - 接口清单(均挂
/api前缀):GET/POST /avatar、GET/PUT/DELETE /avatar/:idGET /token/balance、GET /token/plans、POST /token/chargeGET/PUT /avatar/:id/authorizationsGET/POST /organizations
- 种子数据:默认余额 1250、4 个充值套餐、1 个分身、3 条授权、2 个组织
- 依赖装在隔离 venv:
/Users/yqq/.workbuddy/binaries/python/envs/default
5. 前后端接通(端到端跑通)
src/api/index.ts:响应拦截器解包{code,message,data}(code===200 返回 data);新增chargeToken、createOrganizationsrc/store/avatar.ts:改为异步loadAvatars() / loadTokenBalance() / addAvatar()调真实接口AvatarManage:Token 余额 / 分身卡片来自后端AvatarCreate:submit改 async 调addAvatar(含 submitting 态)AuthorizationManage:拉取 + 切换授权状态写后端TokenCharge:loadData()拉余额/套餐,doCharge真实充值(余额回写)CreateOrg:submit调createOrganization(含 submitting 态)
三、验证结果
| 验证项 | 结果 |
|---|---|
| 后端接口 curl(含写操作) | 全部通过;充值 1250 → 2250 正确回写 |
Vite 代理 /api/* → 8000 |
正常 |
| 前端改动模块 Vite 转译 | 0 报错 |
| DB 状态 | 已重置为干净种子态(balance 1250,1 分身) |
生产构建(vite build) |
打包成功(主包 gzip 39KB / 1.43s) |
⚠️ 注:
npm run build中的vue-tsc因旧版本与 Node 22 不兼容(patch TS 内部字符串失败)报错,属工具链问题,非代码错误;已用vite build跳过类型检查确认打包无误。
四、当前架构(见附图)
端到端链路:会会多端(App/小程序/H5)→ Vue3 SPA → Vite 代理 /api → FastAPI → SQLite
五、遗留 & 下一步
- 分身名片 / 人脉 / 项目 3 个子页仍用前端 mock,待接真实接口(如
getOrganizationList等) - 编辑分身 / 删除分身 接口待补全并接入
- uni-app 封装(App / 微信小程序 / H5)待启动,复用当前 Web 版组件
- 生产级类型检查:升级
vue-tsc或调整构建脚本,消除 Node 22 兼容告警 - 鉴权与多租户:当前后端为单用户种子态,需补充用户登录与数据隔离
六、可复用模式(建议沉淀为 Skill)
「Vue3 + Vite 前端 / FastAPI 后端」脚手架约定:
- Vite
server.proxy['/api'] → localhost:8000 - 后端统一
{code, message, data}响应 - 前端响应拦截器解包(code===200 返回 data)
- SQLAlchemy 模型
to_dict()输出 camelCase 字段,对齐前端 TS 类型
说明:本轮附带的
ardot-design-core/ardot-design-router为 Ardot 画布操作型技能,依赖 Ardot MCP(当前环境未连接),故其设计规范以「橙色主题 / 卡片层次 / 渐进式向导路由」形式落地为 Vue 代码,未在画布上直接设计。