小程序文章主页设计方案

日期：2026-07-03 状态：已确认

一、页面入口与导航

路径：/pages/article-center/index（子包新建）

入口：

发现页"更多 ›" → /pages/article-center/index（修复现有 bug）
个人中心 ProfileMenu → 新增"成长文章"菜单入口

Tab 导航（顶部横向滚动）：

全部推荐 | 身 | 智 | 心 | 行 | 富

全部推荐 = 个性化流，按当前访问用户的综合画像（年龄、发育阶段、兴趣等）排序
五维 Tab = 该维度的文章分类列表

浮动按钮：右下角 📝 写成长记录

二、文章列表

卡片结构：

封面图 16:9
分类标签 + 阅读时长
标题（最多2行）
摘要（最多2行）
作者 + 日期 + 收藏数
底部：五维能量彩条（颜色对应维度）

列表交互：

下拉刷新、上拉加载（分页）
点击 → 进入文章详情

列表状态：骨架屏 / 空状态插画 / 加载失败重试

三、文章详情

路径：/pages/article-center/article-detail（子包新建）

页面结构：

封面图（widthFix）
分类 · 阅读时长
标题
作者 · 日期
五维权重彩条
正文（rich-text）
底部悬浮：阅读完成按钮

阅读完成流程：

用户点击/滚动到底部 → 显示 loading "AI 正在根据你的情况出题..."
后端根据文章内容 + 用户综合画像生成 2 道题
展示题目 → 用户提交答案
计分成功 → toast "获得 N 积分"
生成阅读记录，推送至家长/孩子报告

四、轻量发布 — 写成长记录

入口：右下角浮动按钮

弹出页面：/pages/article-center/article-edit（新页面）

字段： | 字段 | 必填 | 说明 | |------|------|------| | 标题 | 是 | 最多 50 字 | | 封面图 | 否 | 上传或拍照 | | 正文 | 是 | 富文本，最多 2000 字 | | 可见范围 | 否 | 默认"仅家庭"；可选"公开" | | 孩子标签 | 否 | 家长写孩子动态时绑定 |

维度补充：关联维度可选；不选则后端自动分析内容补充

草稿：自动本地缓存草稿，退出页面提示"是否保存草稿"

发布状态：

仅家庭：直接发布，无需审核，立即对家庭可见
公开：提交后进审核队列，通过后全量展示

五、发布记录

路径：/pages/article-center/my-posts（新页面）

列表展示：标题 + 封面图 + 发布时间 + 状态标签

状态：

草稿（未发布）
审核中（公开文章）
已发布
已拒绝（含拒绝原因）

右上角入口：发表页"历史"按钮

六、积分与能量激励

发布积分： | 类型 | 积分 | |------|------| | 家庭内部可见发布并通过 | 10 分 | | 公开文章发布并通过审核 | 30 分 | | 被点赞/评论 | +2 分/次 |

阅读积分：

AI 出题回答完成：+5 分

能量分配：

按文章关联维度的能量比计算（非均分）
假设文章维度权重为 [身:20%, 智:30%, 富:10%, 行:15%, 心:25%]，总能量 +10
各维度能量 = 10 × 各维度百分比

七、消息通知

管理员审核通过 → 消息通知作者
被点赞/评论 → 消息通知
AI 出题完成 → 静默

八、孩子端 vs 家长端

孩子访问：内容按年龄过滤 + 行/富维度内容隐藏
家长访问：全量内容 + 商业内容
孩子读完后 → 家长可在报告里看到阅读记录和 AI 答题情况

九、需要后端新增接口

接口	方法	说明
`/api/articles/ai-questions`	POST	根据文章内容+用户画像生成2道题
`/api/articles/submit-answers`	POST	提交阅读答题，更新积分
`/api/articles/publish`	POST	发布成长记录（家庭/公开）
`/api/articles/my-posts`	POST	我的发布列表
`/api/articles/approve`	POST	管理员审核（web端）

十、文件清单

文件	说明
`pages/article-center/index.vue`	文章主页（列表+Tab）
`pages/article-center/article-detail.vue`	文章详情
`pages/article-center/article-edit.vue`	写成长记录
`pages/article-center/my-posts.vue`	我的发布
`pages.json`	注册以上页面

十一、依赖现有能力

现有 pages/mind-detail/articles.vue 的列表 UI 模式
现有 DimensionWeightPicker.vue 组件
现有五维能量 API
现有 Dify AI 集成
现有积分/能量系统

2026-07-03-article-center-design.md 4.5 KB Permalink Riwayat Mentahan