111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
|
# AI文章审核小程序
|
|||
|
|
|
|||
|
|
根据 index.html 页面原型完成的微信小程序界面。
|
|||
|
|
|
|||
|
|
## 功能页面
|
|||
|
|
|
|||
|
|
### 1. 登录页面 (pages/login)
|
|||
|
|
- 微信一键登录
|
|||
|
|
- 登录成功后自动跳转到文章列表页
|
|||
|
|
|
|||
|
|
### 2. 文章列表页 (pages/articles)
|
|||
|
|
- 状态筛选：全部、待审核、已通过、已驳回、已发布
|
|||
|
|
- 显示文章卡片信息：
|
|||
|
|
- 封面（根据话题类型自动生成颜色和图标）
|
|||
|
|
- 标题
|
|||
|
|
- 作者信息
|
|||
|
|
- 渠道标签（百度/头条/微信）
|
|||
|
|
- 状态标签
|
|||
|
|
- 统计信息（字数、图片数、创建时间）
|
|||
|
|
- 点击文章卡片进入详情页
|
|||
|
|
|
|||
|
|
### 3. 文章详情页 (pages/article-detail)
|
|||
|
|
- 显示完整文章信息：
|
|||
|
|
- 封面
|
|||
|
|
- 标题
|
|||
|
|
- 元信息（批次ID、话题、部门、渠道、标签等）
|
|||
|
|
- 作者信息和状态
|
|||
|
|
- 文章内容
|
|||
|
|
- 统计数据
|
|||
|
|
- 审核功能：
|
|||
|
|
- 待审核状态：可通过或驳回
|
|||
|
|
- 已通过状态：可发布文章
|
|||
|
|
- 已发布状态：显示已发布
|
|||
|
|
- 审核意见输入
|
|||
|
|
|
|||
|
|
### 4. 我的页面 (pages/index)
|
|||
|
|
- 保留原有功能（可后续扩展）
|
|||
|
|
|
|||
|
|
## 技术特点
|
|||
|
|
|
|||
|
|
1. **TypeScript 开发**：完整的类型支持
|
|||
|
|
2. **模拟数据**：内置 6 篇文章数据，包含所有状态
|
|||
|
|
3. **工具函数**：
|
|||
|
|
- formatDate：智能日期格式化
|
|||
|
|
- getStatusInfo：状态信息映射
|
|||
|
|
- getChannelInfo：渠道信息映射
|
|||
|
|
- getCoverColor：封面颜色生成
|
|||
|
|
- getCoverIcon：封面图标生成
|
|||
|
|
|
|||
|
|
4. **UI 设计**：
|
|||
|
|
- 品牌色：#ff2442（小红书红）
|
|||
|
|
- 响应式布局
|
|||
|
|
- 丰富的状态样式
|
|||
|
|
- 优雅的交互动画
|
|||
|
|
|
|||
|
|
5. **状态管理**：
|
|||
|
|
- 11 种文章状态
|
|||
|
|
- 3 种发布渠道
|
|||
|
|
- 完整的审核流程
|
|||
|
|
|
|||
|
|
## 使用说明
|
|||
|
|
|
|||
|
|
1. 首次打开小程序，显示登录页
|
|||
|
|
2. 点击"微信一键登录"进行授权
|
|||
|
|
3. 登录成功后自动跳转到文章列表
|
|||
|
|
4. 在文章列表页：
|
|||
|
|
- 点击顶部标签切换筛选条件
|
|||
|
|
- 点击文章卡片查看详情
|
|||
|
|
5. 在文章详情页：
|
|||
|
|
- 待审核文章可以通过或驳回
|
|||
|
|
- 已通过文章可以发布
|
|||
|
|
- 驳回时必须填写原因
|
|||
|
|
|
|||
|
|
## 数据说明
|
|||
|
|
|
|||
|
|
当前使用模拟数据，包含：
|
|||
|
|
- 2 篇待审核文章
|
|||
|
|
- 1 篇已通过文章
|
|||
|
|
- 1 篇已驳回文章
|
|||
|
|
- 1 篇已发布文章
|
|||
|
|
- 1 篇草稿文章
|
|||
|
|
|
|||
|
|
实际使用时需要：
|
|||
|
|
1. 将模拟数据替换为 API 调用
|
|||
|
|
2. 实现真实的登录认证
|
|||
|
|
3. 添加网络请求处理
|
|||
|
|
4. 实现数据持久化
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
miniprogram/
|
|||
|
|
├── pages/
|
|||
|
|
│ ├── login/ # 登录页
|
|||
|
|
│ ├── articles/ # 文章列表页
|
|||
|
|
│ ├── article-detail/ # 文章详情页
|
|||
|
|
│ └── index/ # 我的页面
|
|||
|
|
├── utils/
|
|||
|
|
│ └── util.ts # 工具函数
|
|||
|
|
├── app.ts # 小程序入口
|
|||
|
|
├── app.json # 小程序配置
|
|||
|
|
└── app.wxss # 全局样式
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. TabBar 图标需要自行准备（images 目录）
|
|||
|
|
2. 登录功能需要配置小程序 AppID
|
|||
|
|
3. 审核操作目前只是模拟，未真实保存数据
|
|||
|
|
4. 建议在真实环境中添加加载状态和错误处理
|