# 小程序文章主页设计方案

**日期**：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）
- 底部悬浮：阅读完成按钮

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

---

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

**入口**：右下角浮动按钮

**弹出页面**：`/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 集成
- 现有积分/能量系统