ai_wht_wechat/miniprogram

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. 建议在真实环境中添加加载状态和错误处理