article-system-redesign.md 9.5 KB
小程序知识中心（文章系统）重构设计文档
创建日期：2026-07-08 状态：已实现
一、现状分析
1.1 涉及页面一览
| 页面 | 路径 | 当前状态 |
|---|---|---|
| 行主页 | pages/action/index.vue |
✅ 已有 DimensionArticles（无需修改） |
| 身主页 | pages/body/index.vue |
✅ 已有 DimensionArticles |
| 智主页 | pages/wisdom/index.vue |
✅ 已有 DimensionArticles |
| 心主页 | pages/mind/index.vue |
✅ 已有 DimensionArticles |
| 富主页 | pages/wealth/index.vue |
❌ 无文章入口（无需删除） |
| ProfileMenu | pages/profile/components/ProfileMenu.vue |
有"成长文章"入口 → 已删除 |
| 知识中心（改版后） | pages/article-center/index.vue |
✅ 作为统一入口 |
| 文章详情 | pages/article-center/article-detail.vue |
AI quiz版，article-center列表专用 |
| 写成长记录 | pages/article-center/article-edit.vue |
已有完整表单 |
| 我的发布 | pages/article-center/my-posts.vue |
已有 |
| 旧心智成长列表 | pages/mind/articles.vue |
已清理"推荐阅读"，保留基础功能 |
| 旧心智成长详情 | pages/mind/article-detail.vue |
保留，mind/articles列表专用 |
1.2 "更多"按钮原导航目标
| 维度页 | 原"更多"目标 | 新"更多"目标 |
|---|---|---|
| 心（mind/index） | /pages/mind/articles |
/pages/article-center/index?dimension=mind |
| 身（body/index） | /pages/mind-detail/articles |
/pages/article-center/index?dimension=body |
| 智（wisdom/index） | /pages/mind/articles |
/pages/article-center/index?dimension=wisdom |
| 行（action/index） | /pages/mind-detail/articles |
/pages/article-center/index?dimension=action |
1.3 发现的问题
- 行页面无需添加 DimensionArticles — 已有 ✅
- 富页面（wealth/index）无"成长文章"入口，无需删除
- ProfileMenu 的"成长文章"入口已删除
- mind/articles 有自引用的"🔥 推荐阅读"区块（同一页面自己的文章），已删除
- mind/articles 的导航标题原为"心智成长"，已改为"知识中心"
二、设计决策
2.1 统一知识中心
决策：所有"更多"统一跳转到 /pages/article-center/index（知识中心），并通过 ?dimension=X 参数默认选中对应维度 tab。
优点：
- 单一入口，避免用户迷失在多个文章列表之间
- article-center/index 已有完整的 tab 维度筛选
- 统一的内容创作入口（+ 按钮）
- 统一的知识搜索能力
2.2 + 按钮位置
决策：知识中心页（article-center/index）使用自定义导航栏，+ 按钮放在导航栏右侧。
实现方式：
navigationStyle: custom替换原生导航栏- 自定义导航栏包含：←返回 | 搜索框 | +按钮
- 搜索框点击展开，支持关键词搜索
2.3 知识中心导航参数
| 参数 | 说明 | 示例 |
|---|---|---|
dimension |
默认选中的维度 tab code | ?dimension=mind |
示例URL：
- 心维度进入：
/pages/article-center/index?dimension=mind→ 默认选中"心"tab - 身维度进入：
/pages/article-center/index?dimension=body→ 默认选中"身"tab - 无参数：默认显示"全部"
注意：维度代码遵循项目约定 — mind="心"(#FF6B9D), wisdom="智"(#6366F1)
2.4 创作流程
用户点击导航栏 + 按钮：
- 未登录 → 跳转登录页，登录后 redirect 回
/pages/article-center/index - 已登录 → 跳转
/pages/article-center/article-edit（写成长记录页面）
三、文件修改清单
3.1 新增/改动的文件
| 文件 | 改动类型 | 说明 |
|---|---|---|
pages.json:816-819 |
修改 | article-center/index 加 navigationStyle: custom，标题改为"知识中心" |
pages/article-center/index.vue |
重构 | 新增自定义导航栏（含搜索框、+按钮）、支持 ?dimension URL参数、登录检查 |
pages/article-center/index.vue |
修复 | 修正 tabList 维度映射：mind→"心"、wisdom→"智"（与项目约定对齐） |
pages/mind/articles.vue |
重构 | 新增导航栏搜索框（与 article-center 一致）、goDetail 改为 /pages/article-center/article-detail |
pages/mind/index.vue:730-731 |
修改 | goArticles 导航目标改为 /pages/article-center/index?dimension=mind |
pages/body/index.vue:523-524 |
修改 | goMoreArticles 导航目标改为 /pages/article-center/index?dimension=body |
pages/wisdom/index.vue:481-482 |
修改 | goMoreArticles 导航目标改为 /pages/article-center/index?dimension=wisdom |
pages/action/index.vue:464-465 |
修改 | goMoreArticles 导航目标改为 /pages/article-center/index?dimension=action |
pages/profile/components/ProfileMenu.vue:11-14 |
删除 | 删除"成长文章"菜单项及 goToArticleCenter 方法 |
3.2 无需改动的文件（已确认）
| 文件 | 原因 |
|---|---|
pages/wealth/index.vue |
无"成长文章"入口，无需删除 |
pages/action/index.vue |
已有 DimensionArticles，无需添加 |
components/DimensionArticles.vue |
无需修改，DimensionArticles 组件工作正常 |
pages/article-center/article-edit.vue |
已是完整的文章创建表单，无需修改 |
pages/article-center/my-posts.vue |
已是用户文章管理页，无需修改 |
四、知识中心页面结构（article-center/index.vue）
┌─────────────────────────────────┐
│ ← [ 🔍 搜索文章... ] + │ ← 自定义导航栏（橙色渐变背景）
├─────────────────────────────────┤
│ [全部] [身] [智] [心] [行] [富] │ ← Tab维度筛选（sticky）
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 封面图 │ │
│ │ 分类标签 3分钟 │ │
│ │ 文章标题 │ │
│ │ 摘要内容... │ │
│ │ 作者 日期 收藏数 │ │
│ │ ●●●（五维彩点） │ │
│ └─────────────────────────────┘ │
│ ...更多文章... │
│ [+FAB] │ ← 右下角橙色FAB（已存在）
└─────────────────────────────────┘
五、导航流程图
心/身/智/行 Tab页
│
├──[推荐阅读·点击文章卡片]──→ /pages/mind-detail/article-detail?id=X
│
└──[更多›]──→ /pages/article-center/index?dimension=X
或 /pages/mind/articles?dimension=X
│
├──[Tab筛选]──→ 按维度过滤文章
├──[搜索]──→ 按关键词搜索
├──[+按钮]──→ /pages/article-center/article-edit
└──[文章卡片]──→ /pages/article-center/article-detail?id=X (统一详情页)
六、仍需关注的问题
6.1 五维标签显示 undefined
现象：文章卡片的五维标签（彩色圆点）可能显示 undefined。
可能原因：relatedDimensions 字段中的维度代码在 dimMap 中找不到匹配项（如数据库存了 Body 而代码期望 body）。
建议处理：
- 检查
article.relatedDimensions的实际数据格式 - 在
parseDimensions函数中增强对异常值的处理 - 上线后如有 undefined 现象，在控制台打印
relatedDimensions实际值
6.2 mind/articles 与 article-center/index 并存
mind/articles 仍作为独立页面存在（可被直接访问）。当前已清理了自引用的"推荐阅读"区块，保留了基础的维度筛选、文章列表和 + 按钮。
建议后续：如有需要，可将此页面重定向到 article-center/index，或将其作为备用入口保留。
6.3 维度名称对齐（已修复）
article-center/index.vue 的 tabList 和 parseDimensions 中 mind/wisdom 映射曾与项目约定矛盾：
- 旧：
mind→"智"(#6366F1),wisdom→"心"(#FF6B9D) - 新：
mind→"心"(#FF6B9D),wisdom→"智"(#6366F1) - 对齐了 README 五维全景：
pages/mind/index="心"(心理/情感),pages/wisdom/index="智"(心智测评)
mind/articles.vue 的 dimensionConfig 一直正确，无需修改。
七、测试验证清单
- 从心/身/智/行 Tab 点击"更多 ›" → 应进入知识中心，默认选中对应维度
- 知识中心导航栏 + 按钮 → 未登录跳转登录页，已登录跳转写文章页
- 知识中心搜索框 → 输入关键词后回车，应过滤文章列表
- 知识中心 Tab 切换 → 应重新加载对应维度文章，不带搜索关键词
- ProfileMenu → "成长文章"入口已删除（不再显示）
- article-center Tab 名称正确：
mind="心"、wisdom="智" - article-center 文章卡片五维圆点颜色正确（心=粉、智=紫）
- mind/articles → 导航栏有搜索框，搜索可过滤文章
- mind/articles → 点击文章卡片进入
/pages/article-center/article-detail（统一详情页） - 编译无新增错误
本文档为知识中心重构的操作记录和设计依据。