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