140 lines
4.0 KiB
Markdown
140 lines
4.0 KiB
Markdown
---
|
||
name: content-management
|
||
description: 内容管理（CMS）模块的业务规则，包含文章发布流程、富文本编辑规范与 SEO 要求。当涉及文章、资讯、公告等内容管理功能时必须参考此 Skill。
|
||
---
|
||
|
||
# 内容管理 (CMS) 业务 Skill
|
||
|
||
## 适用范围
|
||
|
||
当任务涉及以下场景时，必须加载并遵循此 Skill：
|
||
|
||
- 文章/资讯列表、编辑、发布
|
||
- 内容分类与标签管理
|
||
- 富文本/Markdown 编辑器集成
|
||
- SEO 字段管理
|
||
|
||
## 业务规则
|
||
|
||
### 1. 文章发布流程
|
||
|
||
```
|
||
草稿 (draft) → 待审核 (pending_review) → 已发布 (published) → 已归档 (archived)
|
||
↓
|
||
驳回 (rejected) → 草稿 (draft) [修改后重新提交]
|
||
```
|
||
|
||
**关键约束**:
|
||
|
||
- 普通编辑: 只能提交审核，不能直接发布
|
||
- 管理员/主编: 可以跳过审核直接发布
|
||
- 已发布文章: 编辑后生成新版本，需重新审核
|
||
- 定时发布: 支持设置 `publishAt` 时间，到达时间后系统自动从「待发布」改为「已发布」
|
||
|
||
### 2. 内容模型
|
||
|
||
- **标题** (title): 必填，2-100 字符
|
||
- **摘要** (summary): 选填，≤ 200 字符。若未填写，自动截取正文前 200 字
|
||
- **正文** (content): 必填，支持 Markdown 格式
|
||
- **封面图** (coverImage): 推荐尺寸 16:9（如 1200×675），支持裁剪
|
||
- **分类** (categoryId): 必填，单选
|
||
- **标签** (tags): 选填，多选，最多 5 个
|
||
- **SEO 字段**:
|
||
- `seoTitle`: 选填，≤ 60 字符
|
||
- `seoDescription`: 选填，≤ 160 字符
|
||
- `seoKeywords`: 选填，逗号分隔
|
||
|
||
### 3. 排序规则
|
||
|
||
- 默认按发布时间倒序
|
||
- 支持「置顶」功能（`isTop: boolean`），置顶文章优先展示
|
||
- 置顶文章之间按置顶时间倒序
|
||
|
||
## 数据模型
|
||
|
||
### 核心接口
|
||
|
||
```typescript
|
||
// src/services/article.ts
|
||
export async function getArticleList(
|
||
params: ArticleQueryParams,
|
||
): Promise<API.PageResult<ArticleItem>> {}
|
||
export async function getArticleDetail(id: string): Promise<ArticleDetail> {}
|
||
export async function createArticle(
|
||
data: ArticleFormData,
|
||
): Promise<ArticleItem> {}
|
||
export async function updateArticle(
|
||
id: string,
|
||
data: Partial<ArticleFormData>,
|
||
): Promise<ArticleItem> {}
|
||
export async function updateArticleStatus(
|
||
id: string,
|
||
status: ArticleStatus,
|
||
): Promise<void> {}
|
||
export async function deleteArticle(id: string): Promise<void> {}
|
||
export async function toggleTop(id: string, isTop: boolean): Promise<void> {}
|
||
```
|
||
|
||
### 关键类型
|
||
|
||
```typescript
|
||
// src/pages/Article/data.d.ts
|
||
type ArticleStatus =
|
||
| 'draft'
|
||
| 'pending_review'
|
||
| 'published'
|
||
| 'archived'
|
||
| 'rejected';
|
||
|
||
interface ArticleItem {
|
||
id: string;
|
||
title: string;
|
||
summary?: string;
|
||
content: string;
|
||
coverImage?: string;
|
||
categoryId: string;
|
||
categoryName: string;
|
||
tags: string[];
|
||
status: ArticleStatus;
|
||
author: string;
|
||
isTop: boolean;
|
||
viewCount: number;
|
||
publishAt?: string;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
seoTitle?: string;
|
||
seoDescription?: string;
|
||
seoKeywords?: string;
|
||
}
|
||
```
|
||
|
||
## UI 交互规范
|
||
|
||
### 1. 文章列表页
|
||
|
||
- **组件**: `ProTable`（搜索字段 < 4，使用内置 search）
|
||
- **必须包含列**: 标题（可点击预览）、分类、状态、作者、发布时间、阅读量、操作
|
||
- **操作逻辑**: 根据状态动态展示按钮
|
||
- 草稿: 编辑 / 提交审核 / 删除
|
||
- 已发布: 编辑 / 下架（归档）/ 置顶/取消置顶
|
||
- **置顶标识**: 在标题前显示 📌 图标
|
||
|
||
### 2. 文章编辑页
|
||
|
||
- **组件**: `ProForm`（非分步）
|
||
- **编辑器**: 使用项目中已有的 `MarkdownEditor` 组件（`src/components/MarkdownEditor`）
|
||
- **布局**: 左侧大区域放编辑器，右侧抽屉或区域放 SEO/分类/标签
|
||
- **自动保存**: 每 30 秒自动保存草稿（使用 `useRequest` 配合 `debounce`）
|
||
|
||
### 3. 预览
|
||
|
||
- 支持在弹窗中预览 Markdown 渲染结果
|
||
- 预览模式使用 `Modal` + Markdown 渲染组件
|
||
|
||
## i18n Key 规范
|
||
|
||
- 菜单: `menu.content.*` 或 `menu.article.*`
|
||
- 页面: `pages.article.*`
|
||
- 表单: `article.form.*`
|
||
- 状态: `article.status.*`
|