# 小程序知识中心（文章系统）重构设计文档 > 创建日期：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 创作流程 用户点击导航栏 + 按钮： 1. 未登录 → 跳转登录页，登录后 redirect 回 `/pages/article-center/index` 2. 已登录 → 跳转 `/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`（统一详情页） - [ ] 编译无新增错误 --- *本文档为知识中心重构的操作记录和设计依据。*