Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
文章模块改造实施计划.md 11.4 KB

文章模块改造实施计划

创建日期: 2026-02-27 状态: ✅ 已完成 参考文档: 文章模块改造速记

完成状态

任务 状态 说明
Task #1: 选择并安装第三方富文本组件 ✅ 完成 使用 Taro 原生 rich-text 组件
Task #2: 创建 ArticleCard 组件 ✅ 完成 创建 src/components/cards/ArticleCard.vue
Task #3: 改造资料列表页为文章列表页 ✅ 完成 修改 src/pages/material-list/index.vue
Task #4: 改造热门资料页为热门文章页 ✅ 完成 修改 src/pages/week-hot-material/index.vue
Task #5: 新建文章详情页 ✅ 完成 创建 src/pages/article-detail/ 目录
Task #6: 新建文章收藏列表页 ✅ 完成 创建 src/pages/article-favorites/ 目录
Task #7: 我的页面添加文章收藏入口 ✅ 完成 修改 src/pages/mine/index.vue
Task #8: 添加文章模块 Mock 数据 ✅ 完成 在 src/utils/mockData.js 中添加 4 个 Mock 函数
Task #9: 修复编译错误 ✅ 完成 替换 nut-loading/nut-empty 为自定义组件

一、设计决策确认

决策项 确认方案 说明
资料列表改造 完全替换为文章 不再支持文件类型，彻底切换为文章列表
HTML 渲染 第三方富文本组件 推荐 mp-html 或 towxml
卡片内容 标题+简介+封面图+日期 完整风格，参考 MaterialCard

二、接口对比分析

1. 文档列表 → 文章列表

// 旧接口: file_list (a: file, t: file_list)
{
  list: [{
    id, name, value, extension, size, post_date, is_favorite
  }]
}

// 新接口: article:list (a: article, t: list)
{
  list: [{
    id, post_title, post_excerpt, post_link, post_date, is_favorite
  }]
}

2. 热门资料 → 热门文章

// 旧接口: week_hot (a: file, t: week_hot)
{
  list: [{
    meta_id, name, src, size, read_people_count, read_people_percent, is_favorite
  }]
}

// 新接口: article:week_hot (a: article, t: week_hot)
{
  list: [{
    id, post_title, post_excerpt, post_link, post_date,
    read_people_count, read_people_percent, is_favorite
  }]
}

3. 文章详情（新增）

// article:article_detail (a: article, t: article_detail)
{
  id, post_title, post_content, post_excerpt, post_link,
  post_date, author_name, file_list.icon, is_favorite
}

4. 文章收藏列表（新增）

// article:favorite (a: article, t: favorite)
{
  list: [{
    id, post_title, post_excerpt, post_date, favorite_time
  }],
  total
}

三、任务清单

Task #1: 选择并安装第三方富文本组件

状态: pending

描述: 为文章详情页选择合适的 HTML 渲染组件

步骤:

  1. 调研 mp-html vs towxml
    • mp-html: 功能强大，但体积较大
    • towxml: 轻量级，但功能有限
  2. 选择并安装组件
  3. 配置到项目中

涉及文件:

  • package.json (添加依赖)

Task #2: 创建 ArticleCard 组件

状态: pending

描述: 创建文章卡片组件，替换 MaterialCard

Props 定义:

{
  id: Number,           // 文章ID
  title: String,        // 标题 (post_title)
  excerpt: String,      // 简介 (post_excerpt)
  coverUrl: String,     // 封面图 (file_list.icon.value)
  date: String,         // 发布日期 (post_date)
  collected: Boolean,   // 是否收藏 (is_favorite)
  learners: Number,     // 学习人数 (可选)
  readPeoplePercent: Number // 学习比例 (可选)
}

布局结构:

┌────────────────────────────────────┐
│  ┌──────┐  标题（最多2行）          │
│  │ 封面 │  简介（最多2行）          │
│  │ 图   │  📅 2025-08-19            │
│  └──────┘  [收藏] [查看]           │
└────────────────────────────────────┘

涉及文件:

  • 新建 src/components/cards/ArticleCard.vue

Task #3: 改造资料列表页为文章列表页

状态: pending

描述: 修改 material-list 页面，完全替换为文章列表

步骤:

  1. 替换 API 导入 javascript // 旧: import { fileListAPI } from '@/api/file' // 新: import { listAPI } from '@/api/article'
  2. 修改数据适配函数 transformDocItem javascript const transformDocItem = (doc) => ({ id: doc.id, title: doc.post_title, // 原 name excerpt: doc.post_excerpt, // 原 post_date coverUrl: doc.file_list?.icon?.value, // 新增封面图 date: doc.post_date, collected: doc.is_favorite === 1 })
  3. 替换卡片组件 vue <!-- 旧: <MaterialCard ... /> --> <!-- 新: <ArticleCard ... /> -->
  4. 移除文件相关显示
    • 移除 extension 图标
    • 移除 size 显示
    • 移除 getDocumentIcon 调用

涉及文件:

  • src/pages/material-list/index.vue
  • src/pages/material-list/index.config.js (可能需要修改页面标题)

Task #4: 改造热门资料页为热门文章页

状态: pending

描述: 修改 week-hot-material 页面，替换为热门文章

步骤:

  1. 替换 API 导入 javascript // 旧: import { weekHotAPI } from '@/api/file' // 新: import { weekHotAPI } from '@/api/article'
  2. 修改数据映射 javascript const listData = res.data.list.map(item => ({ id: item.id, // 原 meta_id title: item.post_title, // 原 name excerpt: item.post_excerpt, coverUrl: item.file_list?.icon?.value, date: item.post_date, collected: item.is_favorite === 1, learners: item.read_people_count, readPeoplePercent: item.read_people_percent }))
  3. 替换卡片组件

涉及文件:

  • src/pages/week-hot-material/index.vue
  • src/pages/week-hot-material/index.config.js (标题改为"本周热门文章")

Task #5: 新建文章详情页

状态: pending

描述: 创建文章详情页，支持 HTML 内容渲染

步骤:

  1. 创建页面结构 bash src/pages/article-detail/ ├── index.vue ├── index.config.js └── index.less
  2. 调用 articleDetailAPI 获取文章详情
  3. 使用富文本组件渲染 post_content
  4. 显示元信息（封面图、标题、日期、作者）
  5. 实现收藏功能

页面结构:

┌────────────────────────────────────┐
│  ← 文章详情                        │
├────────────────────────────────────┤
│  ┌──────────────────────────────┐ │
│  │     封面图（大图）            │ │
│  └──────────────────────────────┘ │
│  标题                              │
│  作者 | 发布日期                   │
│  ─────────────────────────────────│
│  [富文本内容区域]                  │
│    (支持图片、链接、格式化文本)     │
├────────────────────────────────────┤
│        [收藏] 按钮                  │
└────────────────────────────────────┘

涉及文件:

  • 新建 src/pages/article-detail/index.vue
  • 新建 src/pages/article-detail/index.config.js
  • 更新 src/app.config.js (添加路由)

Task #6: 新建文章收藏列表页

状态: pending

描述: 创建文章收藏列表页，复用 favorites 页面结构

步骤:

  1. 创建页面结构 bash src/pages/article-favorites/ ├── index.vue ├── index.config.js └── index.less
  2. 复用 src/pages/favorites/index.vue 的结构
  3. 调用 favoriteAPI 获取收藏列表
  4. 点击跳转到文章详情页

涉及文件:

  • 新建 src/pages/article-favorites/index.vue
  • 新建 src/pages/article-favorites/index.config.js
  • 更新 src/app.config.js (添加路由)

Task #7: 我的页面添加文章收藏入口

状态: pending

描述: 修改 mine 页面菜单，添加文章收藏入口

步骤:

  1. 屏蔽原有"我的收藏"菜单项 javascript const rawMenuItems = [ // { key: 'favorites', title: '我的收藏', ... } // 屏蔽 ]
  2. 新增"我的收藏文章"菜单项 javascript { key: 'article-favorites', title: '我的收藏文章', icon: 'star', path: '/pages/article-favorites/index', iconColor: '#D97706', bgClass: 'bg-amber-50' }

涉及文件:

  • src/pages/mine/index.vue

四、路由配置

需要在 src/app.config.js 中添加新页面路由：

pages: [
  // ... 现有页面
  'pages/article-detail/index',
  'pages/article-favorites/index'
]

五、API 文件结构

已有文件 (无需修改):

  • src/api/article.js - 已包含所有文章相关 API

API 列表: | API | 接口 | 用途 | |-----|------|------| | listAPI | a:article, t:list | 文章列表 | | weekHotAPI | a:article, t:week_hot | 热门文章 | | articleDetailAPI | a:article, t:article_detail | 文章详情 | | favoriteAPI | a:article, t:favorite | 文章收藏列表 |

六、Mock 数据

需要在 src/utils/mockData.js 中添加文章相关的 Mock 数据：

// 文章列表 Mock
export const mockArticleListAPI = async (params) => { ... }

// 热门文章 Mock
export const mockArticleWeekHotAPI = async (params) => { ... }

// 文章详情 Mock
export const mockArticleDetailAPI = async (params) => { ... }

// 文章收藏列表 Mock
export const mockArticleFavoriteAPI = async (params) => { ... }

七、执行顺序

1. Task #1: 安装富文本组件
   ↓
2. Task #2: 创建 ArticleCard 组件
   ↓
3. Task #3: 改造资料列表页
   ↓
4. Task #4: 改造热门资料页
   ↓
5. Task #5: 新建文章详情页
   ↓
6. Task #6: 新建文章收藏列表页
   ↓
7. Task #7: 我的页面添加入口

八、注意事项

  1. post_link 字段暂不使用 - 需求明确说明，因为没有 web-view 功能
  2. 保持收藏功能一致性 - 文章收藏使用与文件收藏相同的交互模式
  3. 复用现有组件 - LoadMoreList、ListItemActions 等组件可直接复用
  4. 图片处理 - 封面图来自 file_list.icon.value，需要处理空值情况
  5. 日期格式 - post_date 格式需要统一处理显示

九、测试清单

  • 文章列表页正常加载
  • 文章卡片显示正确（标题、简介、封面、日期）
  • 点击卡片跳转到文章详情页
  • 文章详情页 HTML 内容正常渲染
  • 文章收藏功能正常
  • 热门文章页正常显示
  • 文章收藏列表页正常显示
  • 我的页面菜单项正确跳转

十、相关文档