吾心AI 站点改造 - 需求确认稿（v1.1）
日期：2026-06-06 状态：✅ 用户已确认 范围：首期最小可演示版本 更新：v1.1 新增角色「所属动漫」字段
1. 背景
当前项目是一个 VitePress 1.5.0 + Vue 3.5.13 构建的静态站点， 原定位是"洪涛的个人主页"，承载 AI 作品、Web 作品、文章等内容。
随着用户在抖音等平台使用"吾心AI"作为个人品牌名， 需要将站点主体从"个人主页"升级为"吾心AI"品牌站， 并新增"角色库"模块，用于展示自己设计的 AI 角色。
2. 目标
- 品牌升级：将站点主体从"洪涛的个人主页"改为"吾心AI"
- 新增模块：在导航栏新增"角色库"，含列表 + 详情页
- 保持兼容：不破坏现有的作品展示、文章系统
- 最小可演示：首期以静态数据跑通核心链路
3. 用户角色
| 角色 | 说明 |
|---|---|
| 访客（游客） | 任何访问站点的用户，无需登录 |
| 站长（你） | 内容生产者，首期通过修改源码/JSON 维护角色 |
4. 使用场景
- 访客通过导航栏进入"角色库"
- 在角色库看到角色卡片（名称、描述、缩略图）
- 点击角色名称跳转到角色详情页
- 在详情页查看角色的详细介绍和三视图
- 通过首页 Hero 区进入"吾心AI"品牌首区，了解各模块
5. 核心流程
5.1 品牌升级流程
- 全站标题/Logo/页脚替换为"吾心AI"
- 移除"洪涛"相关个人信息（about 暂留）
- 重做首页 Hero 区，加入"吾心AI"标语 + 模块入口
5.2 角色浏览流程
- 访客点击导航"角色库"
- 列表页展示角色卡片（网格布局）
- 点击卡片/角色名称 → 跳转
/characters/[id] - 详情页展示名称、描述、三视图（正/侧/背 横向并排，4:3 比例）
6. 功能需求
6.1 全站品牌替换
- [ ] 站点名称、页脚、Meta 信息替换为"吾心AI"
- [ ] 移除"洪涛个人主页"相关文案
- [ ] about.md 暂留，首期不动
6.2 首页改版（Hero 区 + 模块入口）
- [ ] 首区（Hero）："吾心AI" 主标题 + 副标题 + CTA
- [ ] 模块入口卡片：
- 作品（AI 作品）
- 作品（Web 作品）
- 角色库
- 文章 共 4 个入口（作品保持两个子分类）
- [ ] 保留首页原有其他区域（如有）作为下方内容
6.3 角色库 - 列表页 /characters
- [ ] 页面布局：网格卡片
- [ ] 卡片信息：角色名称、所属动漫、角色描述（1-2 句）、角色图片
- [ ] 点击卡片/名称 → 跳转详情页
- [ ] 数据源：
src/data/characters.json（前端静态） - [ ] 占位图：先用占位图，资源后期替换
6.4 角色库 - 详情页 /characters/[id]
- [ ] 页面信息：角色名称、所属动漫、角色长描述、角色三视图、元信息
- [ ] 所属动漫：在头部和元信息区都展示（如：📖 所属：斗破苍穹）
- [ ] 描述字段：长描述（首期做一版尝试），支持较长的介绍文字
- [ ] 三视图：横向并排展示 正面 / 侧面 / 背面
- [ ] 三视图比例：统一 4:3
- [ ] 返回链接：返回角色列表
- [ ] 404 处理：访问不存在的 id 时跳回列表
7. 业务规则
- 数据来源：所有角色数据写在
src/data/characters.json（首期） - 数据字段：
id / name / anime / shortDesc / cover / threeView / longDesc / meta - 图片资源：首期使用占位图，路径规划需考虑后期替换
- 三视图比例：4:3（统一）
- 路由：使用 VitePress 自定义 Layout + 动态路由
- 响应式：列表/详情页需在桌面端和移动端都可用
- 品牌一致性：所有页面统一"吾心AI"品牌
- 作品分类：保留 AI 作品 / Web 作品 两个子分类
8. 边界情况
| 场景 | 处理 |
|---|---|
| 角色列表为空 | 显示"暂无角色"占位 |
| 角色 id 不存在 | 跳回列表页 |
| 角色图片加载失败 | 显示默认占位图 |
| 移动端三视图 | 三图横向并排 + 横向滚动（不堆叠），保持 4:3 |
| 移动端导航 | 保持 VitePress 默认移动端导航 |
9. 非目标范围（首期不做）
- ❌ 用户登录 / 鉴权
- ❌ 角色管理后台
- ❌ 角色搜索 / 分类 / 标签筛选
- ❌ 角色互动（点赞 / 评论 / 收藏）
- ❌ 多语言
- ❌ 后端 API
- ❌ 从 VitePress 迁出
- ❌ about.md 内容改造（暂留）
- ❌ 作品管理后台 / 上传功能
10. 已确认决策
| # | 问题 | 决定 |
|---|---|---|
| 1 | 作品模块整合方式 | 保持两个子分类（AI 作品 / Web 作品） |
| 2 | 三视图图片比例 | 统一 4:3 |
| 3 | 角色描述长度 | 详情页先做一版长描述试试效果 |
| 4 | 首期是否同步改造 about.md | 只做角色库 + 首页，about 暂留 |
附录：技术决策
- 技术栈：保持 VitePress 1.5.0 + Vue 3.5.13
- 数据格式：JSON 静态文件 + Vue 组件
- 路由方案：VitePress 自定义 Layout + 动态路由
- 后续扩展：若需要 App 化能力（用户系统、AI 对话）再评估 Nuxt 升级