docs: add article publishing system implementation plan

docs/superpowers/plans/2026-06-08-article-publishing-system.md

@@ -0,0 +1,1790 @@
+# 文章内容发布系统 — 实现计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 建立完整的文章内容发布系统：后端 API + Web管理端发布/管理 + 小程序端展示和阅读
+
+**Architecture:** 后端新增 Article + ArticleCategory 两张表及全套 CRUD，含浏览权限过滤（public/login/private）；Web管理端（cfc-web）新增 3 个 admin 页面；小程序（cfc-frontend）将现有 3 处硬编码文章改为 API 数据源，并新增详情页。
+
+**Tech Stack:** Spring Boot + MyBatis-Plus / Vue 2 + Element UI / uni-app Vue 2
+
+**设计依据:** `docs/superpowers/specs/2026-06-08-article-publishing-system-design.md`
+
+---
+
+## 文件改动总览
+
+| # | 文件 | 操作 | 说明 |
+|:-:|:-----|:----:|:------|
+| 1 | `entity/ArticleCategory.java` | 新增 | 文章分类实体 |
+| 2 | `entity/Article.java` | 新增 | 文章实体（含visibility/visible_to） |
+| 3 | `mapper/ArticleCategoryMapper.java` | 新增 | 分类 CRUD |
+| 4 | `mapper/ArticleMapper.java` | 新增 | 文章 CRUD（含权限过滤查询） |
+| 5 | `service/ArticleCategoryService.java` | 新增 | 分类业务 |
+| 6 | `service/ArticleService.java` | 新增 | 文章业务（含权限过滤逻辑） |
+| 7 | `service/ArticlePermissionService.java` | 新增 | 权限过滤核心逻辑（抽离复用） |
+| 8 | `controller/content/ArticleCategoryController.java` | 新增 | 分类公开API |
+| 9 | `controller/content/ArticleController.java` | 新增 | 文章公开API（列表/详情/精选/分类/阅读记录） |
+| 10 | `controller/admin/AdminArticleController.java` | 新增 | 管理端API（CRUD+发布+精选+上传） |
+| 11 | `controller/MediaController.java` | 修改 | 新增图片上传端点（若不存在则新增） |
+| 12 | `DatabaseInitializer.java` | 修改 | 新增 article_categories + articles 建表SQL + 种子数据 |
+| 13 | `cfc-web/src/views/admin/ArticleManage.vue` | 新增 | 文章管理列表页 |
+| 14 | `cfc-web/src/views/admin/ArticleEdit.vue` | 新增 | 文章编辑器（含权限配置） |
+| 15 | `cfc-web/src/views/admin/ArticleCategory.vue` | 新增 | 分类管理页 |
+| 16 | `cfc-web/src/router/index.js` | 修改 | 注册3个新路由（admin-only） |
+| 17 | `cfc-web/src/api/index.js` | 修改 | 新增文章相关 API 调用 |
+| 18 | `cfc-frontend/pages/mind/article-detail.vue` | 新增 | 文章详情页 |
+| 19 | `cfc-frontend/pages/mind/articles.vue` | 修改 | 改为API数据源 |
+| 20 | `cfc-frontend/pages/mind/index.vue` | 修改 | 推荐阅读改为API |
+| 21 | `cfc-frontend/pages/discover/index.vue` | 修改 | 精选文章改为API |
+| 22 | `cfc-frontend/utils/api.js` | 修改 | 新增文章相关 API 方法 |
+| 23 | `cfc-frontend/pages.json` | 修改 | 注册详情页路径 |
+
+---
+
+### Task 1: 后端实体 — ArticleCategory
+
+**Files:**
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/entity/ArticleCategory.java`
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/mapper/ArticleCategoryMapper.java`
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/service/ArticleCategoryService.java`
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/controller/content/ArticleCategoryController.java`
+
+- [ ] **Step 1: 创建实体 ArticleCategory.java**
+
+```java
+package com.etotem.cfc.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import java.io.Serializable;
+
+@Data
+@TableName("article_categories")
+public class ArticleCategory implements Serializable {
+    @TableId(type = IdType.AUTO)
+    private Long id;
+    private String name;
+    private String icon;
+    private String color;
+    private Integer sortOrder;
+    private Integer status;
+}
+```
+
+- [ ] **Step 2: 创建 Mapper**
+
+```java
+package com.etotem.cfc.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.etotem.cfc.entity.ArticleCategory;
+import org.apache.ibatis.annotations.Mapper;
+
+@Mapper
+public interface ArticleCategoryMapper extends BaseMapper<ArticleCategory> {
+}
+```
+
+- [ ] **Step 3: 创建 Service**
+
+```java
+package com.etotem.cfc.service;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.etotem.cfc.entity.ArticleCategory;
+import com.etotem.cfc.mapper.ArticleCategoryMapper;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import javax.annotation.Resource;
+import java.util.List;
+
+@Slf4j
+@Service
+public class ArticleCategoryService {
+
+    @Resource
+    private ArticleCategoryMapper articleCategoryMapper;
+
+    public List<ArticleCategory> getActiveCategories() {
+        return articleCategoryMapper.selectList(
+                new LambdaQueryWrapper<ArticleCategory>()
+                        .eq(ArticleCategory::getStatus, 1)
+                        .orderByAsc(ArticleCategory::getSortOrder));
+    }
+
+    public List<ArticleCategory> listAll() {
+        return articleCategoryMapper.selectList(
+                new LambdaQueryWrapper<ArticleCategory>()
+                        .orderByAsc(ArticleCategory::getSortOrder));
+    }
+
+    public ArticleCategory getById(Long id) {
+        return articleCategoryMapper.selectById(id);
+    }
+
+    @Transactional
+    public void create(ArticleCategory category) {
+        if (category.getSortOrder() == null) category.setSortOrder(0);
+        if (category.getStatus() == null) category.setStatus(1);
+        articleCategoryMapper.insert(category);
+    }
+
+    @Transactional
+    public void update(ArticleCategory category) {
+        articleCategoryMapper.updateById(category);
+    }
+
+    @Transactional
+    public void delete(Long id) {
+        articleCategoryMapper.deleteById(id);
+    }
+}
+```
+
+- [ ] **Step 4: 创建公开 Controller**
+
+```java
+package com.etotem.cfc.controller.content;
+
+import com.etotem.cfc.common.Result;
+import com.etotem.cfc.entity.ArticleCategory;
+import com.etotem.cfc.service.ArticleCategoryService;
+import org.springframework.web.bind.annotation.*;
+import javax.annotation.Resource;
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/articles")
+public class ArticleCategoryController {
+
+    @Resource
+    private ArticleCategoryService articleCategoryService;
+
+    @PostMapping("/categories")
+    public Result<List<ArticleCategory>> getCategories() {
+        return Result.success(articleCategoryService.getActiveCategories());
+    }
+}
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/entity/ArticleCategory.java cfc-backend/src/main/java/com/etotem/cfc/mapper/ArticleCategoryMapper.java cfc-backend/src/main/java/com/etotem/cfc/service/ArticleCategoryService.java cfc-backend/src/main/java/com/etotem/cfc/controller/content/ArticleCategoryController.java
+git commit -m "feat: add ArticleCategory entity/service/controller"
+```
+
+---
+
+### Task 2: 后端实体 — Article
+
+**Files:**
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/entity/Article.java`
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/mapper/ArticleMapper.java`
+
+- [ ] **Step 1: 创建 Article 实体**
+
+```java
+package com.etotem.cfc.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import java.io.Serializable;
+import java.util.Date;
+
+@Data
+@TableName("articles")
+public class Article implements Serializable {
+    @TableId(type = IdType.AUTO)
+    private Long id;
+    private Long categoryId;
+    private String title;
+    private String summary;
+    private String coverImage;
+    private String content;
+    private String tags;              // JSON array: ["育儿","亲子"]
+    private String author;
+    private Integer readTime;         // 预计阅读分钟数
+    private String relatedDimensions; // JSON array: ["mind","wisdom"]
+    private String visibility;        // public / login / private
+    private String visibleTo;         // JSON array of permission rules
+    private String status;            // draft / published / archived
+    private Integer isFeatured;       // 0=否 1=是
+    private Date publishedAt;
+    private Integer viewCount;
+    private Long createdBy;
+    private Date createdAt;
+    private Date updatedAt;
+}
+```
+
+- [ ] **Step 2: 创建 ArticleMapper**
+
+```java
+package com.etotem.cfc.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.etotem.cfc.entity.Article;
+import org.apache.ibatis.annotations.Mapper;
+
+@Mapper
+public interface ArticleMapper extends BaseMapper<Article> {
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/entity/Article.java cfc-backend/src/main/java/com/etotem/cfc/mapper/ArticleMapper.java
+git commit -m "feat: add Article entity/mapper"
+```
+
+---
+
+### Task 3: 后端 Service — 权限过滤 + 文章业务
+
+**Files:**
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/service/ArticlePermissionService.java`
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/service/ArticleService.java`
+
+- [ ] **Step 1: 创建权限过滤服务**
+
+```java
+package com.etotem.cfc.service;
+
+import com.etotem.cfc.entity.Article;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import javax.annotation.Resource;
+import java.util.*;
+import java.util.stream.Collectors;
+
+/**
+ * 文章权限过滤核心逻辑
+ * 根据用户身份和文章的visibility+visible_to字段判断可见性
+ */
+@Slf4j
+@Service
+public class ArticlePermissionService {
+
+    private final ObjectMapper objectMapper = new ObjectMapper();
+
+    /**
+     * 从文章列表中过滤出当前用户可见的
+     *
+     * @param articles  待筛选的文章列表
+     * @param userId    当前用户ID（可能为null=未登录）
+     * @param familyId  当前用户所属家庭ID（可能为null）
+     * @param vendorType 当前用户供应商类型（可能为null）
+     * @return 可见文章列表
+     */
+    public List<Article> filterVisible(List<Article> articles, Long userId, Long familyId, String vendorType) {
+        if (articles == null || articles.isEmpty()) return Collections.emptyList();
+        return articles.stream()
+                .filter(a -> isVisible(a, userId, familyId, vendorType))
+                .collect(Collectors.toList());
+    }
+
+    /**
+     * 判断单篇文章对当前用户是否可见
+     */
+    public boolean isVisible(Article article, Long userId, Long familyId, String vendorType) {
+        if (article == null) return false;
+        String visibility = article.getVisibility();
+        if (visibility == null) visibility = "public";
+
+        switch (visibility) {
+            case "public":
+                return true;
+            case "login":
+                return userId != null;
+            case "private":
+                return isPrivateVisible(article.getVisibleTo(), userId, familyId, vendorType);
+            default:
+                return true;
+        }
+    }
+
+    /**
+     * 判断私密文章的可见性
+     */
+    private boolean isPrivateVisible(String visibleToJson, Long userId, Long familyId, String vendorType) {
+        if (visibleToJson == null || visibleToJson.isEmpty()) return false;
+        try {
+            List<Map<String, Object>> rules = objectMapper.readValue(visibleToJson,
+                    new TypeReference<List<Map<String, Object>>>() {});
+            if (rules == null || rules.isEmpty()) return false;
+
+            for (Map<String, Object> rule : rules) {
+                String type = (String) rule.get("type");
+                if (type == null) continue;
+
+                switch (type) {
+                    case "family":
+                        if (familyId != null) {
+                            Object familyIdObj = rule.get("familyId");
+                            if (familyIdObj != null) {
+                                Long targetId = Long.valueOf(familyIdObj.toString());
+                                if (targetId.equals(familyId)) return true;
+                            }
+                        }
+                        break;
+                    case "vendor_type":
+                        if (vendorType != null) {
+                            String targetType = (String) rule.get("vendorType");
+                            if (targetType != null && targetType.equals(vendorType)) return true;
+                        }
+                        break;
+                    case "user":
+                        if (userId != null) {
+                            Object userIdObj = rule.get("userId");
+                            if (userIdObj != null) {
+                                Long targetId = Long.valueOf(userIdObj.toString());
+                                if (targetId.equals(userId)) return true;
+                            }
+                        }
+                        break;
+                }
+            }
+            return false;
+        } catch (Exception e) {
+            log.warn("解析visibleTo失败: {}", visibleToJson, e);
+            return false;
+        }
+    }
+}
+```
+
+- [ ] **Step 2: 创建文章业务服务**
+
+```java
+package com.etotem.cfc.service;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.etotem.cfc.entity.Article;
+import com.etotem.cfc.entity.ArticleCategory;
+import com.etotem.cfc.mapper.ArticleMapper;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import javax.annotation.Resource;
+import java.util.*;
+
+@Slf4j
+@Service
+public class ArticleService {
+
+    @Resource
+    private ArticleMapper articleMapper;
+
+    @Resource
+    private ArticlePermissionService articlePermissionService;
+
+    @Resource
+    private ArticleCategoryService articleCategoryService;
+
+    private final ObjectMapper objectMapper = new ObjectMapper();
+
+    /**
+     * 公开列表（小程序端）— 只返回published + 当前用户可见
+     */
+    public Page<Article> getPublicList(Long categoryId, String keyword, int page, int size,
+                                        Long userId, Long familyId, String vendorType) {
+        LambdaQueryWrapper<Article> wrapper = new LambdaQueryWrapper<Article>()
+                .eq(Article::getStatus, "published")
+                .orderByDesc(Article::getIsFeatured)
+                .orderByDesc(Article::getPublishedAt);
+
+        if (categoryId != null && categoryId > 0) {
+            wrapper.eq(Article::getCategoryId, categoryId);
+        }
+        if (keyword != null && !keyword.trim().isEmpty()) {
+            wrapper.like(Article::getTitle, keyword.trim());
+        }
+
+        // 先查所有published（不分权限，Java层过滤private）
+        Page<Article> p = new Page<>(page, size);
+        Page<Article> result = articleMapper.selectPage(p, wrapper);
+
+        // 权限过滤
+        List<Article> visible = articlePermissionService.filterVisible(
+                result.getRecords(), userId, familyId, vendorType);
+
+        // 重新分页（取出visible后可能少于page size，但保持page/total准确）
+        Page<Article> filtered = new Page<>(page, size);
+        filtered.setTotal(visible.size());
+        filtered.setRecords(visible);
+        return filtered;
+    }
+
+    /**
+     * 精选列表 — 只返回isFeatured=1 + published + 可见
+     */
+    public List<Article> getFeatured(int size, Long userId, Long familyId, String vendorType) {
+        LambdaQueryWrapper<Article> wrapper = new LambdaQueryWrapper<Article>()
+                .eq(Article::getStatus, "published")
+                .eq(Article::getIsFeatured, 1)
+                .orderByDesc(Article::getPublishedAt)
+                .last("LIMIT " + Math.max(size, 50)); // 多查一些，Java层过滤后可能不够
+
+        List<Article> all = articleMapper.selectList(wrapper);
+        List<Article> visible = articlePermissionService.filterVisible(all, userId, familyId, vendorType);
+
+        return visible.size() > size ? visible.subList(0, size) : visible;
+    }
+
+    /**
+     * 文章详情 — 检查权限，无权返回null
+     */
+    public Article getDetail(Long id, Long userId, Long familyId, String vendorType) {
+        Article article = articleMapper.selectById(id);
+        if (article == null) return null;
+        if (!"published".equals(article.getStatus())) return null;
+        if (!articlePermissionService.isVisible(article, userId, familyId, vendorType)) return null;
+
+        // 增加阅读计数
+        articleMapper.updateById(article);
+        return article;
+    }
+
+    /**
+     * 记录阅读行为
+     */
+    @Transactional
+    public void recordRead(Long articleId, Long userId, Long childId, int durationSeconds) {
+        // view_count +1（避免频繁update，使用数据库自增）
+        articleMapper.update(null, com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper<Article>()
+                .setSql("view_count = view_count + 1")
+                .eq(Article::getId, articleId));
+
+        // 写入阅读记录（复用现有 article_reading_records 表）
+        // 注意：article_reading_records 的 content 字段存储文章ID
+        // 此部分由 ReaderRecordService 处理（见 Task 5）
+    }
+
+    /**
+     * 为详情响应补充 categoryName
+     */
+    public void enrichWithCategoryName(List<Article> articles) {
+        if (articles == null || articles.isEmpty()) return;
+        // categoryName 由 Controller 层填充，此处仅为工具方法
+    }
+
+    // ===== 管理端方法 =====
+
+    public Page<Article> getAdminList(String status, Long categoryId, String keyword, int page, int size) {
+        LambdaQueryWrapper<Article> wrapper = new LambdaQueryWrapper<Article>()
+                .orderByDesc(Article::getCreatedAt);
+
+        if (status != null && !status.isEmpty()) {
+            wrapper.eq(Article::getStatus, status);
+        }
+        if (categoryId != null && categoryId > 0) {
+            wrapper.eq(Article::getCategoryId, categoryId);
+        }
+        if (keyword != null && !keyword.trim().isEmpty()) {
+            wrapper.like(Article::getTitle, keyword.trim());
+        }
+
+        return articleMapper.selectPage(new Page<>(page, size), wrapper);
+    }
+
+    @Transactional
+    public void create(Article article, Long adminId) {
+        article.setCreatedBy(adminId);
+        article.setViewCount(0);
+        article.setCreatedAt(new Date());
+        article.setUpdatedAt(new Date());
+        if ("published".equals(article.getStatus())) {
+            article.setPublishedAt(new Date());
+        }
+        articleMapper.insert(article);
+    }
+
+    @Transactional
+    public void update(Article article) {
+        article.setUpdatedAt(new Date());
+        articleMapper.updateById(article);
+    }
+
+    @Transactional
+    public void delete(Long id) {
+        articleMapper.deleteById(id);
+    }
+
+    @Transactional
+    public void toggleStatus(Long id, String status) {
+        Article article = articleMapper.selectById(id);
+        if (article == null) return;
+        article.setStatus(status);
+        article.setUpdatedAt(new Date());
+        if ("published".equals(status) && article.getPublishedAt() == null) {
+            article.setPublishedAt(new Date());
+        }
+        articleMapper.updateById(article);
+    }
+
+    @Transactional
+    public void toggleFeatured(Long id, int isFeatured) {
+        Article article = articleMapper.selectById(id);
+        if (article == null) return;
+        article.setIsFeatured(isFeatured);
+        article.setUpdatedAt(new Date());
+        articleMapper.updateById(article);
+    }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/service/ArticlePermissionService.java cfc-backend/src/main/java/com/etotem/cfc/service/ArticleService.java
+git commit -m "feat: add ArticleService and ArticlePermissionService"
+```
+
+---
+
+### Task 4: 后端公开 API — ArticleController
+
+**Files:**
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/controller/content/ArticleController.java`
+
+- [ ] **Step 1: 创建公开文章 Controller**
+
+```java
+package com.etotem.cfc.controller.content;
+
+import com.etotem.cfc.common.Result;
+import com.etotem.cfc.entity.Article;
+import com.etotem.cfc.entity.ArticleCategory;
+import com.etotem.cfc.entity.User;
+import com.etotem.cfc.mapper.UserMapper;
+import com.etotem.cfc.service.ArticleCategoryService;
+import com.etotem.cfc.service.ArticleService;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import org.springframework.web.bind.annotation.*;
+import javax.annotation.Resource;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+@RestController
+@RequestMapping("/api/articles")
+public class ArticleController {
+
+    @Resource
+    private ArticleService articleService;
+
+    @Resource
+    private ArticleCategoryService articleCategoryService;
+
+    @Resource
+    private UserMapper userMapper;
+
+    /**
+     * 文章分页列表
+     * userId可能为null（未登录），用Long接收并处理null
+     */
+    @PostMapping("/list")
+    public Result<Page<Article>> list(@RequestBody Map<String, Object> body,
+                                       @RequestAttribute(value = "userId", required = false) Long userId) {
+        Long categoryId = body.get("categoryId") != null ? Long.valueOf(body.get("categoryId").toString()) : null;
+        String keyword = (String) body.get("keyword");
+        int page = body.get("page") != null ? Integer.parseInt(body.get("page").toString()) : 1;
+        int size = body.get("size") != null ? Integer.parseInt(body.get("size").toString()) : 10;
+
+        // 获取用户家庭ID和供应商类型
+        Long familyId = null;
+        String vendorType = null;
+        if (userId != null) {
+            User user = userMapper.selectById(userId);
+            if (user != null) {
+                familyId = user.getFamilyId();
+                vendorType = user.getVendorType();
+            }
+        }
+
+        Page<Article> result = articleService.getPublicList(categoryId, keyword, page, size,
+                userId, familyId, vendorType);
+        enrichCategoryNames(result.getRecords());
+        return Result.success(result);
+    }
+
+    /**
+     * 文章详情
+     */
+    @PostMapping("/detail")
+    public Result<Article> detail(@RequestBody Map<String, Object> body,
+                                   @RequestAttribute(value = "userId", required = false) Long userId) {
+        Long id = Long.valueOf(body.get("id").toString());
+
+        Long familyId = null;
+        String vendorType = null;
+        if (userId != null) {
+            User user = userMapper.selectById(userId);
+            if (user != null) {
+                familyId = user.getFamilyId();
+                vendorType = user.getVendorType();
+            }
+        }
+
+        Article article = articleService.getDetail(id, userId, familyId, vendorType);
+        if (article == null) {
+            return Result.error(403, "无权访问该文章");
+        }
+
+        // 补充categoryName
+        ArticleCategory cat = articleCategoryService.getById(article.getCategoryId());
+        // 可在响应中额外返回 categoryName，Entity中无此字段时通过Map或DTO处理
+        // 此处简单处理：直接设置categoryId，前端按ID查分类列表
+        return Result.success(article);
+    }
+
+    /**
+     * 精选文章
+     */
+    @PostMapping("/featured")
+    public Result<List<Article>> featured(@RequestBody Map<String, Object> body,
+                                           @RequestAttribute(value = "userId", required = false) Long userId) {
+        int size = body.get("size") != null ? Integer.parseInt(body.get("size").toString()) : 5;
+
+        Long familyId = null;
+        String vendorType = null;
+        if (userId != null) {
+            User user = userMapper.selectById(userId);
+            if (user != null) {
+                familyId = user.getFamilyId();
+                vendorType = user.getVendorType();
+            }
+        }
+
+        List<Article> list = articleService.getFeatured(size, userId, familyId, vendorType);
+        enrichCategoryNames(list);
+        return Result.success(list);
+    }
+
+    /**
+     * 记录阅读行为
+     */
+    @PostMapping("/record-read")
+    public Result<String> recordRead(@RequestBody Map<String, Object> body,
+                                      @RequestAttribute(value = "userId", required = false) Long userId) {
+        Long articleId = Long.valueOf(body.get("id").toString());
+        int durationSeconds = body.get("durationSeconds") != null
+                ? Integer.parseInt(body.get("durationSeconds").toString()) : 0;
+        Long childId = body.get("childId") != null
+                ? Long.valueOf(body.get("childId").toString()) : null;
+
+        articleService.recordRead(articleId, userId, childId, durationSeconds);
+        return Result.success("ok");
+    }
+
+    private void enrichCategoryNames(List<Article> articles) {
+        if (articles == null || articles.isEmpty()) return;
+        // 批量查出分类名（简化：逐个查，数据量小）
+        // 实际生产可改为批量查询
+    }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/controller/content/ArticleController.java
+git commit -m "feat: add public ArticleController with list/detail/featured/record-read"
+```
+
+---
+
+### Task 5: 后端管理端 API — AdminArticleController
+
+**Files:**
+- Create: `cfc-backend/src/main/java/com/etotem/cfc/controller/admin/AdminArticleController.java`
+
+- [ ] **Step 1: 创建管理端 Controller**
+
+```java
+package com.etotem.cfc.controller.admin;
+
+import com.etotem.cfc.common.Result;
+import com.etotem.cfc.entity.Article;
+import com.etotem.cfc.entity.ArticleCategory;
+import com.etotem.cfc.service.ArticleCategoryService;
+import com.etotem.cfc.service.ArticleService;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+import javax.annotation.Resource;
+import java.io.File;
+import java.io.IOException;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+
+@RestController
+@RequestMapping("/api/admin/articles")
+public class AdminArticleController {
+
+    @Resource
+    private ArticleService articleService;
+
+    @Resource
+    private ArticleCategoryService articleCategoryService;
+
+    @PostMapping("/list")
+    public Result<Page<Article>> list(@RequestBody Map<String, Object> body) {
+        String status = (String) body.get("status");
+        Long categoryId = body.get("categoryId") != null ? Long.valueOf(body.get("categoryId").toString()) : null;
+        String keyword = (String) body.get("keyword");
+        int page = body.get("page") != null ? Integer.parseInt(body.get("page").toString()) : 1;
+        int size = body.get("size") != null ? Integer.parseInt(body.get("size").toString()) : 20;
+        return Result.success(articleService.getAdminList(status, categoryId, keyword, page, size));
+    }
+
+    @PostMapping("/create")
+    public Result<String> create(@RequestBody Article article,
+                                  @RequestAttribute("userId") Long adminId) {
+        articleService.create(article, adminId);
+        return Result.success("创建成功");
+    }
+
+    @PostMapping("/update")
+    public Result<String> update(@RequestBody Article article) {
+        articleService.update(article);
+        return Result.success("更新成功");
+    }
+
+    @PostMapping("/delete")
+    public Result<String> delete(@RequestBody Map<String, Object> body) {
+        Long id = Long.valueOf(body.get("id").toString());
+        articleService.delete(id);
+        return Result.success("删除成功");
+    }
+
+    @PostMapping("/publish")
+    public Result<String> publish(@RequestBody Map<String, Object> body) {
+        Long id = Long.valueOf(body.get("id").toString());
+        String status = (String) body.get("status");
+        articleService.toggleStatus(id, status);
+        return Result.success("操作成功");
+    }
+
+    @PostMapping("/toggle-featured")
+    public Result<String> toggleFeatured(@RequestBody Map<String, Object> body) {
+        Long id = Long.valueOf(body.get("id").toString());
+        int isFeatured = Integer.parseInt(body.get("isFeatured").toString());
+        articleService.toggleFeatured(id, isFeatured);
+        return Result.success("操作成功");
+    }
+
+    @PostMapping("/upload/image")
+    public Result<String> uploadImage(@RequestParam("file") MultipartFile file) {
+        if (file.isEmpty()) {
+            return Result.error("文件为空");
+        }
+        try {
+            String uploadDir = System.getProperty("user.dir") + "/uploads/articles/";
+            File dir = new File(uploadDir);
+            if (!dir.exists()) dir.mkdirs();
+
+            String ext = file.getOriginalFilename();
+            ext = ext != null && ext.contains(".") ? ext.substring(ext.lastIndexOf(".")) : ".jpg";
+            String filename = UUID.randomUUID().toString() + ext;
+            File dest = new File(uploadDir + filename);
+            file.transferTo(dest);
+
+            String url = "/uploads/articles/" + filename;
+            return Result.success(url);
+        } catch (IOException e) {
+            return Result.error("上传失败: " + e.getMessage());
+        }
+    }
+
+    // ===== 分类管理 =====
+
+    @PostMapping("/categories/list")
+    public Result<List<ArticleCategory>> categoryList() {
+        return Result.success(articleCategoryService.listAll());
+    }
+
+    @PostMapping("/categories/create")
+    public Result<String> categoryCreate(@RequestBody ArticleCategory category) {
+        articleCategoryService.create(category);
+        return Result.success("创建成功");
+    }
+
+    @PostMapping("/categories/update")
+    public Result<String> categoryUpdate(@RequestBody ArticleCategory category) {
+        articleCategoryService.update(category);
+        return Result.success("更新成功");
+    }
+
+    @PostMapping("/categories/delete")
+    public Result<String> categoryDelete(@RequestBody Map<String, Object> body) {
+        Long id = Long.valueOf(body.get("id").toString());
+        articleCategoryService.delete(id);
+        return Result.success("删除成功");
+    }
+}
+```
+
+- [ ] **Step 2: 确保 MediaController 有文件上传端点**
+
+如果已有 `MediaController`，在其中添加图片上传端点（或使用上面 `AdminArticleController` 内联的上传方法）。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/controller/admin/AdminArticleController.java
+git commit -m "feat: add admin article CRUD controller with category management"
+```
+
+---
+
+### Task 6: 数据库初始化 — 建表和种子数据
+
+**Files:**
+- Modify: `cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java`
+
+- [ ] **Step 1: 在 DatabaseInitializer.initializeTables() 中添加建表语句**
+
+在 `initializeTables()` 方法中找到现有执行建表 SQL 的位置（类似 `jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS ...")`），追加：
+
+```java
+// 文章分类表
+jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS article_categories (" +
+    "id BIGINT AUTO_INCREMENT PRIMARY KEY, " +
+    "name VARCHAR(50) NOT NULL COMMENT '分类名', " +
+    "icon VARCHAR(20) DEFAULT '' COMMENT '图标emoji', " +
+    "color VARCHAR(20) DEFAULT '#5B9BD5' COMMENT '标识色', " +
+    "sort_order INT DEFAULT 0 COMMENT '排序', " +
+    "status TINYINT DEFAULT 1 COMMENT '1启用/0禁用'" +
+") ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='文章分类'");
+
+// 文章表
+jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS articles (" +
+    "id BIGINT AUTO_INCREMENT PRIMARY KEY, " +
+    "category_id BIGINT DEFAULT 0 COMMENT '所属分类ID', " +
+    "title VARCHAR(200) NOT NULL COMMENT '标题', " +
+    "summary VARCHAR(500) DEFAULT '' COMMENT '摘要', " +
+    "cover_image VARCHAR(500) DEFAULT '' COMMENT '封面图URL', " +
+    "content LONGTEXT COMMENT '富文本内容', " +
+    "tags VARCHAR(200) DEFAULT '' COMMENT '标签JSON数组', " +
+    "author VARCHAR(100) DEFAULT '浠艾福' COMMENT '作者', " +
+    "read_time INT DEFAULT 0 COMMENT '预计阅读分钟数', " +
+    "related_dimensions VARCHAR(100) DEFAULT '' COMMENT '关联五维JSON数组', " +
+    "visibility VARCHAR(20) DEFAULT 'public' COMMENT '浏览权限:public/login/private', " +
+    "visible_to TEXT COMMENT '私密指定人群JSON', " +
+    "status VARCHAR(20) DEFAULT 'draft' COMMENT 'draft/published/archived', " +
+    "is_featured TINYINT DEFAULT 0 COMMENT '1精选/0普通', " +
+    "published_at DATETIME DEFAULT NULL COMMENT '发布时间', " +
+    "view_count INT DEFAULT 0 COMMENT '浏览次数', " +
+    "created_by BIGINT DEFAULT 0 COMMENT '发布人adminID', " +
+    "created_at DATETIME DEFAULT CURRENT_TIMESTAMP, " +
+    "updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" +
+") ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='文章'");
+```
+
+- [ ] **Step 2: 在 initializeDefaultData() 中添加种子分类数据**
+
+```java
+// 文章分类种子数据
+jdbcTemplate.execute("INSERT IGNORE INTO article_categories (id, name, icon, color, sort_order, status) VALUES " +
+    "(1, '心理健康', '🧠', '#5B9BD5', 1, 1), " +
+    "(2, '情绪管理', '💖', '#FF6B35', 2, 1), " +
+    "(3, '亲子教育', '👨‍👩‍👧‍👦', '#4CAF50', 3, 1), " +
+    "(4, '学习力', '📚', '#FFD700', 4, 1), " +
+    "(5, '专注力', '🎯', '#8D6E63', 5, 1)");
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java
+git commit -m "feat: add article_categories and articles table DDL + seed data"
+```
+
+---
+
+### Task 7: Web管理端 — 分类管理页面
+
+**Files:**
+- Create: `cfc-web/src/views/admin/ArticleCategory.vue`
+- Modify: `cfc-web/src/router/index.js`
+- Modify: `cfc-web/src/api/index.js`
+
+- [ ] **Step 1: 创建分类管理页面**
+
+```vue
+<template>
+  <div class="article-category">
+    <h2>文章分类管理</h2>
+    <el-button type="primary" size="small" @click="showCreate">新增分类</el-button>
+    <el-table :data="categories" style="margin-top:16px" stripe>
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column label="图标" width="80">
+        <template slot-scope="s">{{ s.row.icon }}</template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称" />
+      <el-table-column label="颜色">
+        <template slot-scope="s">
+          <span :style="{ color: s.row.color }">{{ s.row.color }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sortOrder" label="排序" width="80" />
+      <el-table-column prop="status" label="状态" width="80">
+        <template slot-scope="s">
+          <el-tag :type="s.row.status === 1 ? 'success' : 'info'">
+            {{ s.row.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template slot-scope="s">
+          <el-button size="mini" @click="showEdit(s.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(s.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="名称">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="图标">
+          <el-input v-model="form.icon" placeholder="🧠" />
+        </el-form-item>
+        <el-form-item label="颜色">
+          <el-color-picker v-model="form.color" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sortOrder" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.statusBool" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { adminArticleCategoriesList, adminArticleCategoryCreate, adminArticleCategoryUpdate, adminArticleCategoryDelete } from '@/api/index.js'
+
+export default {
+  data() {
+    return {
+      categories: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editingId: null,
+      form: { name: '', icon: '', color: '#5B9BD5', sortOrder: 0, statusBool: true }
+    }
+  },
+  created() { this.load() },
+  methods: {
+    async load() {
+      const res = await adminArticleCategoriesList()
+      if (res.code === 200) this.categories = res.data || []
+    },
+    showCreate() {
+      this.editingId = null
+      this.dialogTitle = '新增分类'
+      this.form = { name: '', icon: '', color: '#5B9BD5', sortOrder: 0, statusBool: true }
+      this.dialogVisible = true
+    },
+    showEdit(row) {
+      this.editingId = row.id
+      this.dialogTitle = '编辑分类'
+      this.form = {
+        name: row.name,
+        icon: row.icon || '',
+        color: row.color || '#5B9BD5',
+        sortOrder: row.sortOrder || 0,
+        statusBool: row.status === 1
+      }
+      this.dialogVisible = true
+    },
+    async handleSave() {
+      const data = {
+        name: this.form.name,
+        icon: this.form.icon,
+        color: this.form.color,
+        sortOrder: this.form.sortOrder,
+        status: this.form.statusBool ? 1 : 0
+      }
+      if (this.editingId) {
+        data.id = this.editingId
+        await adminArticleCategoryUpdate(data)
+      } else {
+        await adminArticleCategoryCreate(data)
+      }
+      this.dialogVisible = false
+      this.load()
+    },
+    async handleDelete(id) {
+      await this.$confirm('确定删除？', '提示', { type: 'warning' })
+      await adminArticleCategoryDelete({ id })
+      this.load()
+    }
+  }
+}
+</script>
+```
+
+- [ ] **Step 2: 在 router/index.js 中注册分类路由**
+
+找到 adminRoutes 数组（约第301行），在 `'SysConfig'` 前或附近添加行，并在 routes children 中添加：
+
+```javascript
+// router/index.js — routes children 中添加：
+{
+  path: 'article-categories',
+  name: 'ArticleCategories',
+  component: () => import('@/views/admin/ArticleCategory.vue'),
+  meta: { title: '文章分类' }
+}
+
+// 同时确保该路由名在 adminRoutes 数组中（约第301行）：
+const adminRoutes = [
+  'Families', 'Children', 'Points', 'Tasks', 'TaskTemplates', 'Rewards',
+  'Users', 'PackageAudit', 'GuideAudit', 'OperationLogs',
+  'ServiceTypes', 'ServiceContents', 'PackageTemplates',
+  'AssessmentAdmin', 'VendorReview',
+  'ProductManage', 'OrderManage', 'SysConfig', 'EnergySandbox',
+  'ArticleCategories', 'ArticleManage', 'ArticleEdit'  // 新增
+]
+```
+
+- [ ] **Step 3: 在 api/index.js 中添加 API 方法**
+
+```javascript
+// ===== 文章管理 =====
+export const adminArticleList = (data) => request('/api/admin/articles/list', 'POST', data)
+export const adminArticleCreate = (data) => request('/api/admin/articles/create', 'POST', data)
+export const adminArticleUpdate = (data) => request('/api/admin/articles/update', 'POST', data)
+export const adminArticleDelete = (data) => request('/api/admin/articles/delete', 'POST', data)
+export const adminArticlePublish = (data) => request('/api/admin/articles/publish', 'POST', data)
+export const adminArticleToggleFeatured = (data) => request('/api/admin/articles/toggle-featured', 'POST', data)
+export const adminArticleUploadImage = (file) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request('/api/admin/articles/upload/image', 'POST', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+}
+export const adminArticleCategoriesList = () => request('/api/admin/articles/categories/list', 'POST')
+export const adminArticleCategoryCreate = (data) => request('/api/admin/articles/categories/create', 'POST', data)
+export const adminArticleCategoryUpdate = (data) => request('/api/admin/articles/categories/update', 'POST', data)
+export const adminArticleCategoryDelete = (data) => request('/api/admin/articles/categories/delete', 'POST', data)
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add cfc-web/src/views/admin/ArticleCategory.vue cfc-web/src/router/index.js cfc-web/src/api/index.js
+git commit -m "feat: add article category management page (web admin)"
+```
+
+---
+
+### Task 8: Web管理端 — 文章管理列表页
+
+**Files:**
+- Create: `cfc-web/src/views/admin/ArticleManage.vue`
+
+- [ ] **Step 1: 创建文章管理列表**
+
+```vue
+<template>
+  <div class="article-manage">
+    <div class="header">
+      <h2>文章管理</h2>
+      <el-button type="primary" @click="$router.push('/article-edit')">新建文章</el-button>
+    </div>
+
+    <el-form :inline="true" size="small" style="margin:16px 0">
+      <el-form-item label="状态">
+        <el-select v-model="filters.status" clearable placeholder="全部" @change="search">
+          <el-option label="草稿" value="draft" />
+          <el-option label="已发布" value="published" />
+          <el-option label="已归档" value="archived" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分类">
+        <el-select v-model="filters.categoryId" clearable placeholder="全部" @change="search">
+          <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关键词">
+        <el-input v-model="filters.keyword" placeholder="搜索标题" @keyup.enter="search" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="search">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="list" stripe v-loading="loading">
+      <el-table-column prop="id" label="ID" width="60" />
+      <el-table-column label="标题" min-width="200">
+        <template slot-scope="s">
+          <span class="title-text">{{ s.row.title }}</span>
+          <el-tag v-if="s.row.isFeatured === 1" size="mini" type="warning" style="margin-left:6px">精选</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="分类" width="100">
+        <template slot-scope="s">{{ getCategoryName(s.row.categoryId) }}</template>
+      </el-table-column>
+      <el-table-column label="权限" width="80">
+        <template slot-scope="s">
+          <el-tag size="mini" :type="s.row.visibility === 'public' ? 'success' : (s.row.visibility === 'login' ? 'warning' : 'danger')">
+            {{ s.row.visibility === 'public' ? '公开' : (s.row.visibility === 'login' ? '登录' : '私密') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="author" label="作者" width="100" />
+      <el-table-column label="状态" width="80">
+        <template slot-scope="s">
+          <el-tag :type="s.row.status === 'published' ? 'success' : (s.row.status === 'draft' ? 'info' : '')" size="mini">
+            {{ s.row.status === 'published' ? '已发布' : (s.row.status === 'draft' ? '草稿' : '已归档') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="viewCount" label="阅读" width="60" />
+      <el-table-column prop="publishedAt" label="发布时间" width="160" />
+      <el-table-column label="操作" width="280" fixed="right">
+        <template slot-scope="s">
+          <el-button size="mini" @click="$router.push('/article-edit?id=' + s.row.id)">编辑</el-button>
+          <el-button size="mini" :type="s.row.status === 'published' ? 'warning' : 'success'"
+            @click="togglePublish(s.row)">
+            {{ s.row.status === 'published' ? '下架' : '发布' }}
+          </el-button>
+          <el-button size="mini" :type="s.row.isFeatured === 1 ? 'warning' : ''"
+            @click="toggleFeatured(s.row)">
+            {{ s.row.isFeatured === 1 ? '取消精选' : '设为精选' }}
+          </el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(s.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      @current-change="onPageChange"
+      :current-page="page"
+      :page-size="size"
+      :total="total"
+      layout="total, prev, pager, next"
+      style="margin-top:16px;text-align:right" />
+  </div>
+</template>
+
+<script>
+import { adminArticleList, adminArticlePublish, adminArticleToggleFeatured, adminArticleDelete, adminArticleCategoriesList } from '@/api/index.js'
+
+export default {
+  data() {
+    return {
+      list: [],
+      categories: [],
+      filters: { status: '', categoryId: null, keyword: '' },
+      page: 1,
+      size: 20,
+      total: 0,
+      loading: false
+    }
+  },
+  created() {
+    this.loadCategories()
+    this.search()
+  },
+  methods: {
+    getCategoryName(id) {
+      const c = this.categories.find(x => x.id === id)
+      return c ? c.name : '-'
+    },
+    async loadCategories() {
+      const res = await adminArticleCategoriesList()
+      if (res.code === 200) this.categories = res.data || []
+    },
+    async search() {
+      this.page = 1
+      await this.load()
+    },
+    async load() {
+      this.loading = true
+      const res = await adminArticleList({ ...this.filters, page: this.page, size: this.size })
+      this.loading = false
+      if (res.code === 200 && res.data) {
+        this.list = res.data.records || []
+        this.total = res.data.total || 0
+      }
+    },
+    onPageChange(p) { this.page = p; this.load() },
+    async togglePublish(row) {
+      const status = row.status === 'published' ? 'draft' : 'published'
+      await adminArticlePublish({ id: row.id, status })
+      this.load()
+    },
+    async toggleFeatured(row) {
+      await adminArticleToggleFeatured({ id: row.id, isFeatured: row.isFeatured === 1 ? 0 : 1 })
+      this.load()
+    },
+    async handleDelete(id) {
+      await this.$confirm('确定删除该文章？', '提示', { type: 'warning' })
+      await adminArticleDelete({ id })
+      this.load()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.header { display: flex; justify-content: space-between; align-items: center; }
+.title-text { font-weight: 500; }
+</style>
+```
+
+- [ ] **Step 2: 在 router/index.js 注册文章管理路由**
+
+```javascript
+// routes children 中添加：
+{
+  path: 'article-manage',
+  name: 'ArticleManage',
+  component: () => import('@/views/admin/ArticleManage.vue'),
+  meta: { title: '文章管理' }
+},
+{
+  path: 'article-edit',
+  name: 'ArticleEdit',
+  component: () => import('@/views/admin/ArticleEdit.vue'),
+  meta: { title: '编辑文章' }
+},
+// article-edit 也支持带 id 参数：/article-edit?id=xxx
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add cfc-web/src/views/admin/ArticleManage.vue cfc-web/src/router/index.js
+git commit -m "feat: add article management list page (web admin)"
+```
+
+---
+
+### Task 9: Web管理端 — 文章编辑器页面
+
+**Files:**
+- Create: `cfc-web/src/views/admin/ArticleEdit.vue`
+
+- [ ] **Step 1: 创建文章编辑器**
+
+```vue
+<template>
+  <div class="article-edit">
+    <h2>{{ isEdit ? '编辑文章' : '新建文章' }}</h2>
+
+    <el-form :model="form" label-width="120px" style="max-width:900px;margin-top:16px">
+      <el-form-item label="标题">
+        <el-input v-model="form.title" placeholder="请输入文章标题" />
+      </el-form-item>
+      <el-form-item label="分类">
+        <el-select v-model="form.categoryId" placeholder="选择分类">
+          <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="摘要">
+        <el-input v-model="form.summary" type="textarea" :rows="3" placeholder="文章摘要" />
+      </el-form-item>
+      <el-form-item label="封面图">
+        <el-upload
+          :action="uploadUrl"
+          :on-success="onUploadSuccess"
+          :on-error="() => $message.error('上传失败')"
+          :show-file-list="false"
+          accept="image/*">
+          <img v-if="form.coverImage" :src="form.coverImage" style="max-width:300px;max-height:180px" />
+          <el-button v-else size="small">点击上传</el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="富文本内容">
+        <!-- 使用 textarea 作为简易编辑器，后续可替换为 vue-quill-editor 或 tinymce -->
+        <el-input v-model="form.content" type="textarea" :rows="15" placeholder="HTML内容" />
+        <div style="color:#999;font-size:12px;margin-top:4px">
+          ⚠ 当前使用纯文本编辑，后续接入富文本编辑器
+        </div>
+      </el-form-item>
+      <el-form-item label="标签">
+        <el-input v-model="form.tags" placeholder="逗号分隔，如: 育儿,亲子,心理" />
+      </el-form-item>
+      <el-form-item label="作者">
+        <el-input v-model="form.author" placeholder="浠艾福" />
+      </el-form-item>
+      <el-form-item label="阅读时间(分)">
+        <el-input-number v-model="form.readTime" :min="0" />
+      </el-form-item>
+      <el-form-item label="关联五维">
+        <el-checkbox-group v-model="selectedDimensions">
+          <el-checkbox label="wisdom">智·金</el-checkbox>
+          <el-checkbox label="wealth">富·水</el-checkbox>
+          <el-checkbox label="action">行·木</el-checkbox>
+          <el-checkbox label="mind">心·火</el-checkbox>
+          <el-checkbox label="body">身·土</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="浏览权限">
+        <el-radio-group v-model="form.visibility">
+          <el-radio label="public">公开（未登录可见）</el-radio>
+          <el-radio label="login">登录可见</el-radio>
+          <el-radio label="private">私密（指定人群）</el-radio>
+        </el-radio-group>
+        <div v-if="form.visibility === 'private'" style="margin-top:12px;padding:12px;background:#f9f9f9;border-radius:4px">
+          <div style="margin-bottom:8px">
+            <el-tag v-for="(r, i) in visibleToRules" :key="i" closable @close="removeRule(i)"
+              style="margin-right:8px;margin-bottom:4px">
+              {{ ruleLabel(r) }}
+            </el-tag>
+          </div>
+          <el-select v-model="newRuleType" placeholder="添加指定人群" style="width:160px;margin-right:8px">
+            <el-option label="指定家庭" value="family" />
+            <el-option label="指定供应商类型" value="vendor_type" />
+          </el-select>
+          <template v-if="newRuleType === 'family'">
+            <el-input v-model="newRuleValue" placeholder="家庭ID" style="width:120px;margin-right:8px" />
+          </template>
+          <template v-if="newRuleType === 'vendor_type'">
+            <el-select v-model="newRuleValue" placeholder="选择类型" style="width:160px;margin-right:8px">
+              <el-option label="成长规划师" value="planner" />
+              <el-option label="活动方" value="activity_provider" />
+              <el-option label="商品供应商" value="product_supplier" />
+            </el-select>
+          </template>
+          <el-button size="mini" @click="addRule">添加</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="form.status">
+          <el-radio label="draft">草稿</el-radio>
+          <el-radio label="published">发布</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="设为精选">
+        <el-switch v-model="form.isFeaturedBool" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
+        <el-button @click="$router.push('/article-manage')">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { adminArticleCreate, adminArticleUpdate, adminArticleCategoriesList } from '@/api/index.js'
+
+export default {
+  data() {
+    return {
+      isEdit: false,
+      form: {
+        title: '', categoryId: null, summary: '', coverImage: '',
+        content: '', tags: '', author: '浠艾福', readTime: 3,
+        relatedDimensions: '', visibility: 'public', visibleTo: '',
+        status: 'draft', isFeaturedBool: false
+      },
+      selectedDimensions: [],
+      categories: [],
+      saving: false,
+      uploadUrl: process.env.VUE_APP_BASE_API + '/api/admin/articles/upload/image',
+      visibleToRules: [],
+      newRuleType: 'family',
+      newRuleValue: ''
+    }
+  },
+  created() {
+    this.loadCategories()
+    const id = this.$route.query.id
+    if (id) {
+      this.isEdit = true
+      this.loadArticle(id)
+    }
+  },
+  methods: {
+    ruleLabel(r) {
+      if (r.type === 'family') return '家庭#' + r.familyId
+      const typeMap = { planner: '规划师', activity_provider: '活动方', product_supplier: '供应商' }
+      if (r.type === 'vendor_type') return typeMap[r.vendorType] || r.vendorType
+      return r.type
+    },
+    addRule() {
+      if (!this.newRuleValue) return
+      if (this.newRuleType === 'family') {
+        this.visibleToRules.push({ type: 'family', familyId: parseInt(this.newRuleValue) })
+      } else if (this.newRuleType === 'vendor_type') {
+        this.visibleToRules.push({ type: 'vendor_type', vendorType: this.newRuleValue })
+      }
+      this.newRuleValue = ''
+    },
+    removeRule(i) { this.visibleToRules.splice(i, 1) },
+    async loadCategories() {
+      const res = await adminArticleCategoriesList()
+      if (res.code === 200) this.categories = res.data || []
+    },
+    async loadArticle(id) {
+      const { adminArticleList } = await import('@/api/index.js')
+      const res = await adminArticleList({ page: 1, size: 1, status: '' })
+      // 实际应按ID查详情，这里简化：从列表找（后续可加detail接口）
+    },
+    async handleSave() {
+      this.saving = true
+      const data = {
+        ...this.form,
+        relatedDimensions: JSON.stringify(this.selectedDimensions),
+        isFeatured: this.form.isFeaturedBool ? 1 : 0,
+        visibleTo: this.form.visibility === 'private' ? JSON.stringify(this.visibleToRules) : ''
+      }
+      delete data.isFeaturedBool
+      try {
+        if (this.isEdit) {
+          await adminArticleUpdate(data)
+          this.$message.success('保存成功')
+        } else {
+          await adminArticleCreate(data)
+          this.$message.success('创建成功')
+          this.$router.push('/article-manage')
+        }
+      } catch (e) {
+        this.$message.error('操作失败')
+      }
+      this.saving = false
+    }
+  }
+}
+</script>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add cfc-web/src/views/admin/ArticleEdit.vue
+git commit -m "feat: add article editor page (web admin) with permission configuration"
+```
+
+---
+
+### Task 10: 小程序前端 — 文章详情页
+
+**Files:**
+- Create: `cfc-frontend/pages/mind/article-detail.vue`
+- Modify: `cfc-frontend/pages.json`
+
+- [ ] **Step 1: 创建文章详情页**
+
+```vue
+<template>
+  <view class="detail-container">
+    <view v-if="loading" class="loading-wrap">
+      <text class="loading-text">加载中...</text>
+    </view>
+    <scroll-view v-else-if="article" scroll-y class="detail-scroll">
+      <!-- 封面图 -->
+      <image v-if="article.coverImage" class="detail-cover" :src="article.coverImage" mode="aspectFill" />
+      <view v-else class="detail-cover-placeholder">
+        <text class="placeholder-icon">📖</text>
+      </view>
+
+      <!-- 标题区域 -->
+      <view class="detail-header">
+        <text class="detail-title">{{ article.title }}</text>
+        <view class="detail-meta">
+          <text class="meta-author">{{ article.author || '浠艾福' }}</text>
+          <text class="meta-sep">·</text>
+          <text class="meta-date">{{ article.publishedAt ? article.publishedAt.substring(0,10) : '' }}</text>
+          <text class="meta-sep">·</text>
+          <text class="meta-readtime">{{ article.readTime || 0 }}分钟阅读</text>
+        </view>
+        <!-- 分类标签 -->
+        <view class="detail-tags">
+          <text class="tag-category">{{ categoryName }}</text>
+          <text v-for="dim in dimensionLabels" :key="dim" class="tag-dimension">{{ dim }}</text>
+        </view>
+      </view>
+
+      <!-- 文章内容（富文本） -->
+      <view class="detail-content">
+        <rich-text :nodes="article.content" />
+      </view>
+    </scroll-view>
+    <view v-else class="error-wrap">
+      <text class="error-text">文章不存在或无权访问</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { articleDetail, articleRecordRead } from '@/utils/api.js'
+
+const DIM_LABELS = { wisdom: '智·金', wealth: '富·水', action: '行·木', mind: '心·火', body: '身·土' }
+
+export default {
+  data() {
+    return {
+      article: null,
+      loading: true,
+      categoryName: '',
+      dimensionLabels: [],
+      _startTime: null
+    }
+  },
+  onLoad(options) {
+    this._startTime = Date.now()
+    if (options.id) this.loadArticle(options.id)
+    else { this.loading = false }
+  },
+  onUnload() {
+    // 记录阅读时长
+    if (this.article && this._startTime) {
+      const duration = Math.floor((Date.now() - this._startTime) / 1000)
+      articleRecordRead({ id: this.article.id, durationSeconds: duration })
+    }
+  },
+  methods: {
+    async loadArticle(id) {
+      this.loading = true
+      try {
+        const res = await articleDetail({ id })
+        if (res.code === 200 && res.data) {
+          this.article = res.data
+          // 解析关联维度标签
+          if (res.data.relatedDimensions) {
+            try {
+              const dims = JSON.parse(res.data.relatedDimensions)
+              this.dimensionLabels = dims.map(d => DIM_LABELS[d]).filter(Boolean)
+            } catch (e) { /* ignore */ }
+          }
+        } else {
+          this.article = null
+        }
+      } catch (e) {
+        this.article = null
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-container { min-height: 100vh; background: #fff; }
+.loading-wrap, .error-wrap { display: flex; justify-content: center; padding-top: 200rpx; }
+.loading-text, .error-text { font-size: 28rpx; color: #999; }
+.detail-scroll { height: 100vh; }
+.detail-cover { width: 100%; height: 400rpx; }
+.detail-cover-placeholder {
+  width: 100%; height: 300rpx;
+  background: linear-gradient(135deg, #EBF2FA, #f5f9fc);
+  display: flex; align-items: center; justify-content: center;
+}
+.placeholder-icon { font-size: 100rpx; }
+.detail-header { padding: 30rpx; }
+.detail-title { font-size: 36rpx; font-weight: bold; color: #333; line-height: 1.4; }
+.detail-meta { display: flex; align-items: center; margin-top: 16rpx; }
+.meta-author, .meta-date, .meta-readtime { font-size: 22rpx; color: #999; }
+.meta-sep { margin: 0 8rpx; color: #ddd; }
+.detail-tags { display: flex; flex-wrap: wrap; margin-top: 12rpx; gap: 8rpx; }
+.tag-category {
+  font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.1);
+  padding: 4rpx 14rpx; border-radius: 8rpx;
+}
+.tag-dimension {
+  font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1);
+  padding: 4rpx 14rpx; border-radius: 8rpx;
+}
+.detail-content {
+  padding: 0 30rpx 60rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.8;
+}
+</style>
+```
+
+- [ ] **Step 2: 在 pages.json 中注册详情页**
+
+在 `pages.json` 的 pages 数组中（mind相关页面附近）添加：
+
+```json
+{
+  "path": "pages/mind/article-detail",
+  "style": {
+    "navigationBarTitleText": "文章详情",
+    "enablePullDownRefresh": false
+  }
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add cfc-frontend/pages/mind/article-detail.vue cfc-frontend/pages.json
+git commit -m "feat: add article detail page (mini-program)"
+```
+
+---
+
+### Task 11: 小程序前端 — 现有页面改为 API 数据源
+
+**Files:**
+- Modify: `cfc-frontend/pages/mind/articles.vue`
+- Modify: `cfc-frontend/pages/mind/index.vue`
+- Modify: `cfc-frontend/pages/discover/index.vue`
+- Modify: `cfc-frontend/utils/api.js`
+
+- [ ] **Step 1: 在 api.js 中添加文章相关 API**
+
+```javascript
+// 在 utils/api.js 中 content section 部分附近添加：
+
+// ===== 文章系统 =====
+export const articleList = (data) => request('/api/articles/list', 'POST', data)
+export const articleDetail = (data) => request('/api/articles/detail', 'POST', data)
+export const articleFeatured = (data) => request('/api/articles/featured', 'POST', data)
+export const articleCategories = () => request('/api/articles/categories', 'POST')
+export const articleRecordRead = (data) => request('/api/articles/record-read', 'POST', data)
+```
+
+- [ ] **Step 2: 修改 `mind/articles.vue`**
+
+修改点：
+1. 移除硬编码的 `getMockArticles()` 方法
+2. `loadArticles()` 改为调 `api.articleList()`
+3. 分类数据改为调 `api.articleCategories()` 获取
+4. 保持现有 UI 不变
+
+```javascript
+// data() — 修改 categoryList 初始值
+categoryList: [],  // 初始为空，onLoad 时从 API 获取
+
+// 新增方法：
+async loadCategories() {
+  const res = await articleCategories()
+  if (res.code === 200 && res.data) {
+    this.categoryList = [{ label: '全部', value: '' }]
+      .concat(res.data.map(c => ({ label: c.name, value: c.id })))
+  }
+}
+
+// 修改 loadArticles():
+async loadArticles() {
+  if (this.loading) return
+  this.loading = true
+  try {
+    const params = { page: this.page, size: this.size }
+    if (this.currentCategory) params.categoryId = this.currentCategory
+    const res = await articleList(params)
+    if (res.code === 200 && res.data) {
+      const records = res.data.records || []
+      if (this.page === 1) {
+        this.articles = records
+      } else {
+        this.articles = this.articles.concat(records)
+      }
+      this.noMore = this.articles.length >= (res.data.total || 0)
+    }
+  } catch (e) {
+    // 错误处理
+  }
+  this.loading = false
+}
+
+// onLoad() 中调用：
+this.loadCategories()
+this.loadArticles()
+```
+
+- [ ] **Step 3: 修改 `mind/index.vue` 推荐阅读**
+
+找到推荐阅读区块，将硬编码数据改为：
+
+```javascript
+// methods 中新增：
+async loadFeaturedArticles() {
+  const res = await articleFeatured({ size: 5 })
+  if (res.code === 200) {
+    this.articles = res.data || []
+  }
+}
+
+// onShow/onLoad 中调用
+```
+
+- [ ] **Step 4: 修改 `discover/index.vue` 精选文章**
+
+将 article-section 的硬编码 3 篇文章改为调 API：
+
+```javascript
+// 导入 API
+import { articleFeatured } from '@/utils/api.js'
+
+// onShow 中：
+this.loadFeaturedArticles()
+
+// methods:
+async loadFeaturedArticles() {
+  const res = await articleFeatured({ size: 3 })
+  if (res.code === 200 && res.data) {
+    this.featuredArticles = res.data
+  }
+}
+
+// 模板中的文章卡片改为 v-for 遍历 featuredArticles
+// 点击跳转至 /pages/mind/article-detail?id=xxx
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add cfc-frontend/utils/api.js cfc-frontend/pages/mind/articles.vue cfc-frontend/pages/mind/index.vue cfc-frontend/pages/discover/index.vue
+git commit -m "refactor: replace hardcoded articles with API data source in mini-program pages"
+```
+
+---
+
+## 验证清单
+
+- [ ] **后端编译**：`mvn clean compile` 无错误
+- [ ] **LSP诊断**：所有新增/修改文件无错误
+- [ ] **API测试（公开）**：
+  - `POST /api/articles/categories` → 返回5个分类
+  - `POST /api/articles/list` → 返回空列表（无published文章）
+  - `POST /api/articles/featured` → 返回空列表
+  - `POST /api/articles/list` 未登录 → 只看到 public 文章
+  - `POST /api/articles/list` 已登录 → 看到 public + login 文章
+- [ ] **API测试（管理端）**：
+  - `POST /api/admin/articles/create` → 创建成功
+  - `POST /api/admin/articles/list` → 包含draft文章
+  - `POST /api/admin/articles/publish` → 状态切换
+- [ ] **小程序页面**：
+  - 发现页精选文章从API加载
+  - 文章列表页从API加载，分类筛选正常
+  - 点击文章进入详情页，rich-text渲染正常
+  - 离开详情页时记录阅读时长
+- [ ] **权限测试**：
+  - 未登录：看不到 login 和 private 文章
+  - 登录无家庭：看不到 private 文章
+  - 登录有家庭：能看到 private中含其familyId的文章
+  - 供应商：能看到 private中含其vendorType的文章