峰云CMS

外观

文章管理系统设计文档 ​

概述 ​

文章管理系统是一个支持付费阅读的内容管理系统，允许管理员创建、编辑和管理文章，支持文章分类、标签、付费内容等功能。

核心功能 ​

1. 文章管理 ​

  • 文章的创建、编辑、删除
  • 文章状态管理（草稿、已发布、已删除）
  • 文章置顶功能
  • 文章浏览量统计

2. 付费阅读 ​

  • 支持免费内容和付费内容分离
  • 文章价格设置（单位：分，0表示免费）
  • 未付费用户仅能查看免费内容
  • 付费用户可查看完整内容（免费内容+付费内容）

3. 分类和标签 ​

  • 文章分类管理（创建、编辑、删除）
  • 文章标签管理（支持多标签）
  • 分类和标签的展示和筛选

4. AI 辅助功能 ​

  • 根据内容生成文章标题
  • 根据内容生成文章摘要
  • 根据内容生成文章大纲
  • 优化免费内容文案
  • 优化付费内容文案
  • 差异对照功能（AI生成内容与原内容对比）

数据库设计 ​

1. article（文章表） ​

存储文章的基本信息和内容。

字段说明：

  • id: 主键，自增
  • title: 文章标题（唯一）
  • name: 文章URL标识（唯一，用于URL路径）
  • abstract: 文章摘要（最大1000字符）
  • thumbnail: 缩略图URL（最大400字符）
  • views: 浏览量（默认0）
  • content: 完整内容（mediumtext，免费内容+付费内容）
  • free_content: 免费内容（mediumtext，未付费用户可见）
  • paid_content: 付费内容（mediumtext，付费用户可见）
  • price: 文章价格（单位：分，默认0表示免费）
  • outline: 文章大纲（text）
  • status: 发布状态（enum: draft-草稿, published-已发布, deleted-已删除）
  • top: 是否置顶（boolean，默认false）
  • category_id: 分类ID（关联article_category表）
  • tags: 标签（text，JSON数组格式，如：["标签1","标签2"]）
  • source_url: 来源URL（转载文章的来源地址）
  • source_name: 来源名称（转载文章的来源名称）
  • publish_date: 发布日期（date，必填）
  • created_at: 创建时间
  • updated_at: 更新时间

索引：

  • title: 唯一索引
  • name: 唯一索引
  • (status, publish_date): 用于查询已发布文章列表
  • (category_id): 用于按分类查询
  • (top, publish_date): 用于查询置顶文章

2. article_category（文章分类表） ​

存储文章分类信息。

字段说明：

  • id: 主键，自增
  • name: 分类名称（唯一）
  • slug: 分类标识（唯一，用于URL）
  • description: 分类描述（最大500字符）
  • sort_order: 排序顺序（默认0）
  • is_active: 是否启用（boolean，默认true）

索引：

  • name: 唯一索引
  • slug: 唯一索引
  • (is_active, sort_order): 用于查询启用的分类列表

业务流程 ​

1. 文章创建流程 ​

1. 管理员在管理后台点击"新增文章"
2. 填写文章基本信息（标题、URL名称、摘要、大纲等）
3. 选择文章分类（可选）
4. 添加文章标签（可选，支持创建新标签）
5. 编辑免费内容（使用富文本编辑器）
6. 编辑付费内容（使用富文本编辑器）
7. 设置文章价格（0表示免费）
8. 设置发布状态（草稿/已发布）
9. 设置是否置顶
10. 保存文章

2. 文章编辑流程 ​

1. 管理员在文章列表点击"编辑"
2. 加载文章现有数据
3. 修改文章信息
4. 使用AI功能优化内容（可选）
5. 保存修改

3. AI 生成内容流程 ​

1. 用户点击AI生成按钮（标题/摘要/大纲/优化内容）
2. 系统获取当前内容（免费内容+付费内容）
3. 调用AI接口生成内容
4. 判断原内容是否为空：
   - 如果为空：直接替换为新内容
   - 如果不为空：显示差异对照弹框
5. 用户选择是否采纳AI生成的内容
6. 如果采纳，更新对应字段

4. 文章查看流程（前端） ​

1. 用户访问文章详情页
2. 系统检查用户是否已付费：
   - 如果已付费：显示完整内容（免费内容+付费内容）
   - 如果未付费：仅显示免费内容，付费内容区域显示付费提示
3. 如果文章需要付费且用户未付费：
   - 显示付费按钮
   - 用户点击付费后，扣除余额并显示完整内容

4. 分类管理流程 ​

1. 管理员创建分类（名称、标识、描述等）
2. 系统验证分类名称和标识的唯一性
3. 保存分类
4. 文章编辑时可选择分类
5. 删除分类前检查是否有文章使用该分类

主要涉及文件 ​

后端文件 ​

控制器层 ​

  • src/controllers/article.mts：文章相关控制器

    • cGetArticlesListPage：获取文章列表（分页）
    • cGetArticleDetail：获取文章详情
    • cAddArticle：添加文章
    • cUpdateArticle：更新文章
    • cDeleteArticle：删除文章（软删除，更新状态为deleted）
    • cGenerateSummary：生成文章摘要（AI功能）

  • src/controllers/articleCategory.mts：文章分类相关控制器

    • cGetArticleCategories：获取所有分类列表
    • cAddArticleCategory：添加分类
    • cUpdateArticleCategory：更新分类
    • cDeleteArticleCategory：删除分类

路由层 ​

  • src/routes/articles.mts：文章相关路由
  • src/routes/articleCategory.mts：分类相关路由

模型层 ​

  • src/models/Article.mts：文章表模型定义
  • src/models/ArticleCategory.mts：分类表模型定义

服务层 ​

  • src/services/articles.mts：文章相关业务逻辑
    • getRandomPostList：获取随机文章列表
    • getLatestPostList：获取最新文章列表
    • getPostListByPage：分页查询文章列表
    • getPostDetailByName：根据name查询文章详情
    • getTotalPostCount：查询文章总数
    • getMostViewedPostList：获取访问量最大的文章列表
    • getTopPostList：查询置顶文章列表

前端文件 ​

管理后台（apps/admin/） ​

  • apps/admin/src/views/ArticlesView/ArticlesView.vue：文章列表页面

    • 文章列表展示
    • 搜索和筛选（标题、状态、置顶）
    • 分页功能
    • 编辑和删除操作

  • apps/admin/src/views/ArticleView/ArticleView.vue：文章编辑页面

    • 文章基本信息编辑
    • 分类和标签选择
    • 免费内容和付费内容编辑器
    • AI功能集成
    • 表单验证和提交

  • apps/admin/src/components/AIDiffDialog/AIDiffDialog.vue：AI差异对照弹框组件

    • 显示原内容和AI生成内容的对比
    • 用户选择是否采纳

  • apps/admin/src/api/articles.ts：文章相关API

    • apiGetArticleList：查询文章列表
    • apiGetArticleInfo：查询文章详情
    • apiAddArticle：添加文章
    • apiUpdateArticle：更新文章
    • apiDeleteArticle：删除文章
    • apiGenerateSummary：生成文章摘要
    • apiGetArticleCategories：获取分类列表
    • apiAddArticleCategory：添加分类
    • apiUpdateArticleCategory：更新分类
    • apiDeleteArticleCategory：删除分类

路由配置 ​

  • apps/admin/src/router/index.ts：管理后台路由配置
    • /articles：文章列表路由
    • /articles/edit：文章编辑路由

类型定义 ​

  • typings/article.d.ts：文章相关类型定义
    • Article：文章类型
    • ArticleCategory：分类类型
    • ArticleStatus：文章状态类型
    • API相关类型定义

API 接口 ​

文章相关接口 ​

获取文章列表 ​

  • 路径：GET /api/articles/articles
  • 参数：
    • pageNo：页码（可选，默认1）
    • pageSize：每页数量（可选，默认10）
    • keyword：关键词（可选，搜索标题）
    • status：状态（可选，draft/published/deleted）
    • top：是否置顶（可选，0/1）
  • 返回：文章列表和总数

获取文章详情 ​

  • 路径：GET /api/articles/article-info
  • 参数：
    • id：文章ID
  • 返回：文章详细信息（包含分类、标签等）

添加文章 ​

  • 路径：POST /api/articles/add-article
  • 参数：文章完整信息（标题、内容、分类、标签等）
  • 返回：成功或失败信息

更新文章 ​

  • 路径：POST /api/articles/update-article
  • 参数：文章ID和更新后的信息
  • 返回：成功或失败信息

删除文章 ​

  • 路径：POST /api/articles/delete-article
  • 参数：
    • id：文章ID
  • 返回：成功或失败信息

生成文章摘要 ​

  • 路径：POST /api/articles/generate-summary
  • 参数：
    • content：文章内容
  • 返回：生成的摘要

分类相关接口 ​

获取所有分类 ​

  • 路径：GET /api/articles/categories
  • 返回：分类列表

添加分类 ​

  • 路径：POST /api/articles/add-category
  • 参数：
    • name：分类名称（必填）
    • slug：分类标识（必填）
    • description：分类描述（可选）
    • sort_order：排序顺序（可选，默认0）
    • is_active：是否启用（可选，默认true）
  • 返回：成功或失败信息

更新分类 ​

  • 路径：POST /api/articles/update-category
  • 参数：分类ID和更新后的信息
  • 返回：成功或失败信息

删除分类 ​

  • 路径：POST /api/articles/delete-category
  • 参数：
    • id：分类ID
  • 返回：成功或失败信息（如果分类下有文章，会返回错误）

技术实现细节 ​

1. 付费内容处理 ​

  • 前端编辑时，免费内容和付费内容分别使用独立的富文本编辑器
  • 后端存储时，将免费内容和付费内容分别存储，同时合并存储到 content 字段
  • 前端展示时，根据用户付费状态决定显示内容

2. 标签存储 ​

  • 标签以 JSON 数组格式存储在 tags 字段中
  • 前端使用多选下拉框，支持创建新标签
  • 后端接收标签数组，转换为 JSON 字符串存储
  • 查询时自动解析 JSON 字符串为数组

3. AI 功能 ​

  • AI生成的内容如果与原内容不同，会显示差异对照弹框
  • 用户可以选择采纳或拒绝AI生成的内容

4. 分类关联 ​

  • 使用外键关联 article_category 表
  • 查询文章列表时使用 LEFT JOIN 获取分类名称
  • 删除分类前检查是否有文章使用该分类

5. 富文本编辑器 ​

  • 支持图片、链接、表格等常用功能
  • 免费内容和付费内容使用独立的编辑器实例

注意事项 ​

  1. 文章价格：价格以分为单位存储，前端显示时需要转换为元（除以100）
  2. 内容合并：content 字段是免费内容和付费内容的合并，用于全文搜索等场景
  3. 标签格式：标签必须为有效的 JSON 数组格式
  4. 分类删除：删除分类前必须确保没有文章使用该分类
  5. AI功能：需要接入真实的AI服务接口

后续优化方向 ​

  1. AI功能完善：接入真实的AI服务，实现真正的智能生成和优化
  2. 全文搜索：基于 content 字段实现全文搜索功能
  3. 文章统计：添加文章阅读量、付费转化率等统计功能
  4. 评论系统：为文章添加评论功能
  5. 文章推荐：基于分类、标签实现文章推荐功能
  6. SEO优化：添加文章SEO相关字段和功能

中小微企业级建站程序。十年Web开发经验提炼而成，基于Vue3+Node.js，功能强大，支持多种业务场景。

Copyright © 2023-2025 峰云CMS 版权所有。保留一切权利。