FileCollect/界面原型提示词.md

# 图片收集小程序界面原型提示词

请根据以下详细要求，生成清晰、直观、符合企业形象的图片收集小程序界面原型。

## 1. 设计目标
使用HTML+Element UI生成清晰、直观、符合企业形象的界面原型，为开发团队提供可直接查看、可交互的视觉参考。

## 2. 整体设计规范

### 2.1 风格要求
请严格遵循以下风格要求：
- **风格定位**：简洁、专业，符合企业形象
- **主色调**：蓝色系（代表专业、信任），使用Element UI的主题色 `primary` (#1989fa)
- **辅助色**：灰色系（用于中性背景和次要元素），使用Element UI的 `--el-bg-color` (#f5f7fa) 和 `--el-text-color-secondary` (#909399)
- **字体**：使用Element UI默认字体，保持良好的可读性
- **图标**：使用Element UI内置图标库 ElIcon，确保风格统一

### 2.2 布局规范
请严格遵循以下布局规范：
- **尺寸**：以iPhone 12/13 (375×812px) 为基准设计，使用Element UI的响应式断点
- **安全区域**：必须遵循小程序顶部和底部安全区域规范，使用 `padding-top` 和 `padding-bottom` 适配安全区域
- **间距**：组件间距保持一致，使用Element UI的间距规范，确保是8px的倍数
- **圆角**：卡片、按钮等元素使用Element UI默认圆角，保持一致性
- **Element UI配置**：在HTML头部引入Element UI的CSS和JavaScript，并可进行主题配置

## 3. 页面原型设计要求

请为以下所有页面创建详细的原型设计：

### 3.1 登录页
**请包含以下核心元素：**
- 应用Logo和名称居中显示
- 手机号输入框（带国家代码选择）
- 验证码输入框和获取按钮
- 登录按钮
- 服务协议和隐私政策链接
- 版权信息

**交互要求：**
- 手机号格式校验
- 获取验证码按钮倒计时功能
- 登录失败提示信息

### 3.2 首页
**请根据不同用户角色设计差异化首页：**

#### 3.2.1 管理员/信息员首页
**请包含以下核心元素：**
- 顶部导航栏（应用名称、用户头像/切换）
- 待处理任务卡片（显示待审核图片数量）
- 统计图表区域（柱状图显示各部门上传数量）
- 任务进度查询入口或统计卡片（重要：必须包含）
- 最新上传图片列表（卡片式展示）
- 底部导航栏（首页、任务、我的）

**交互要求：**
- 点击统计图表可查看详细统计信息
- 点击图片卡片进入图片详情
- 点击任务进度查询入口可查看所有任务的进度情况
- 支持下拉刷新

#### 3.2.2 部门负责人首页
**请包含以下核心元素：**
- 顶部导航栏（应用名称、部门切换器、用户头像）
- 待处理任务卡片（显示该部门待审核图片数量）
- 部门图片统计（饼图显示该部门不同分类的图片占比）
- 待审核图片列表（显示该部门待审核的图片）
- 底部导航栏（首页、审核、我的）

**交互要求：**
- 部门切换器可选择不同管理部门
- 数据随部门切换实时更新

#### 3.2.3 普通用户首页
**请包含以下核心元素：**
- 顶部导航栏（应用名称、用户头像）
- 待完成任务列表（显示分配给用户的任务）
- 我的上传图片列表（显示用户最近上传的图片）
- 快速上传入口（浮动按钮或明显的上传按钮）
- 底部导航栏（首页、上传、我的）

**交互要求：**
- 点击任务进入任务详情
- 点击图片进入图片详情
- 点击上传按钮跳转到上传页面

### 3.3 上传页
**请包含以下核心元素：**
- 顶部导航栏（标题、取消/保存按钮）
- 图片选择区域（支持点击拍照或从相册选择）
- 已选择图片预览区域（支持多图预览和删除）
- 图片信息表单：
  - 标题输入框
  - 描述文本域
  - 分类标签选择器（可多选）
  - 关联任务选择器（可选）
- 所属部门显示（当前用户所在部门）
- 提交按钮

**交互要求：**
- 支持单张/批量上传
- 实时显示上传进度
- 表单验证和错误提示
- 上传失败时支持重试

### 3.4 图片列表页
**请包含以下核心元素：**
- 顶部导航栏（标题、筛选/排序按钮）
- 搜索框（支持关键词搜索）
- 筛选条件栏（部门、分类、状态等）
- 图片卡片列表（网格布局，2-3列）
- 分页或下拉加载更多

**交互要求：**
- 点击筛选按钮弹出筛选面板
- 点击图片卡片进入图片详情
- 长按图片可显示操作菜单（分享、删除等）

### 3.5 图片详情页
**请包含以下核心元素：**
- 顶部导航栏（返回按钮、操作菜单）
- 图片大图展示区域（支持缩放、滑动查看多张）
- 图片信息展示区域：
  - 标题、描述
  - 上传者、上传时间
  - 所属部门、分类标签
  - 审核状态（带状态标识）
  - 关联任务信息
- 操作按钮（根据用户角色和图片状态显示）

**交互要求：**
- 支持图片缩放查看
- 根据用户权限显示不同操作按钮
- 显示审核历史记录

### 3.6 审核页
**请包含以下核心元素：**
- 顶部导航栏（标题、筛选按钮）
- 待审核图片列表（卡片式或列表式）
- 每张图片显示：缩略图、标题、上传者、上传时间
- 快速操作按钮（通过/拒绝）
- 批量审核功能入口

**交互要求：**
- 点击图片可预览大图
- 点击通过/拒绝按钮执行审核操作
- 拒绝时弹出原因输入框
- 支持批量选择多张图片进行审核

### 3.7 任务管理页（信息员专属）
**请包含以下核心元素：**
- 顶部导航栏（标题、创建任务按钮）
- 任务列表（显示所有任务）
- 每项任务显示：任务名称、创建时间、截止时间、参与部门数、完成情况、当前进度（重要：必须包含进度显示）
- 任务状态筛选器
- 任务进度查询功能（重要：必须实现）

**交互要求：**
- 点击任务进入任务详情
- 点击创建任务按钮进入创建任务页面
- 支持任务搜索和筛选
- 提供任务进度查询和数据统计功能

### 3.8 任务详情页
**请包含以下核心元素：**
- 顶部导航栏（返回按钮、编辑/删除按钮）
- 任务基本信息展示：
  - 任务名称、描述
  - 创建人、创建时间
  - 截止时间、目标部门列表
  - 任务状态
- 任务进度统计（饼图显示各部门完成情况）
- 相关图片列表（显示与该任务关联的图片）

**交互要求：**
- 点击编辑按钮进入编辑任务页面
- 点击图片进入图片详情
- 显示各部门提交进度详情

### 3.9 个人中心
**请包含以下核心元素：**
- 用户信息区域（头像、姓名、角色、所属部门）
- 功能菜单列表：
  - 我的上传
  - 消息通知
  - 个人设置
  - 帮助中心
  - 关于我们
  - 退出登录

**交互要求：**
- 点击各菜单项跳转到相应页面
- 点击用户信息区域可编辑个人资料

### 3.10 管理中心（管理员专属）
**请包含以下核心元素：**
- 顶部导航栏（标题）
- 管理功能菜单列表：
  - 用户管理
  - 部门管理
  - 系统设置
  - 数据统计
  - 操作日志

**交互要求：**
- 点击各菜单项跳转到相应管理页面

## 4. 后台管理页面（uni-admin）

### 4.1 整体布局
**请遵循以下布局规范：**
- **左侧菜单**：功能模块导航
- **顶部导航**：面包屑、用户信息、系统通知
- **主内容区**：根据选择的功能显示对应管理界面
- **PC界面适配**：后台管理页面需要完全适配PC端界面，设计应充分利用PC端宽屏优势，提供更丰富的数据展示和操作空间，确保在1024px及以上分辨率下的良好用户体验

### 4.2 关键管理页面
**请为以下关键页面创建详细原型：**

#### 用户管理页面
**请包含以下核心元素：**
- 用户列表（表格形式）
- 搜索、筛选功能
- 批量操作（启用/禁用、删除）
- 新增、编辑用户功能
- 角色分配功能

#### 部门管理页面
**请包含以下核心元素：**
- 部门树形结构展示
- 部门添加、编辑、删除功能
- 部门负责人设置

#### 图片管理页面
**请包含以下核心元素：**
- 图片列表（表格形式，带缩略图）
- 多条件搜索和筛选
- 批量操作（删除、审核）
- 图片详情查看

#### 任务管理页面
**请包含以下核心元素：**
- 任务进度概览区域（重要：必须包含）
- 任务列表（表格形式）
- 任务创建、编辑、删除功能
- 任务进度查询功能（重要：必须实现）
- 进度筛选器
- 关键指标卡片（总任务数、已完成、逾期等）

## 5. 交互与动画要求

### 5.1 通用交互
**请实现以下通用交互效果：**
- **页面切换**：使用JavaScript实现页面导航，结合Element UI的过渡动画实现平滑效果
- **加载状态**：使用Element UI的Loading组件实现加载动画，通过JavaScript控制显示/隐藏
- **操作反馈**：使用Element UI的按钮组件的默认交互效果，通过Message组件显示提示信息
- **下拉刷新**：使用JavaScript监听触摸事件实现下拉刷新功能
- **上拉加载**：使用JavaScript监听滚动事件实现上拉加载更多数据

### 5.2 特殊交互
**请实现以下特殊交互效果：**
- **图片上传**：使用Element UI的Upload组件实现图片上传、预览和进度条显示
- **审核操作**：使用Element UI的Dialog组件实现模态对话框，添加确认功能
- **批量操作**：使用Element UI的Checkbox组件实现多选逻辑，配合Button组件实现批量操作
- **权限提示**：使用JavaScript根据用户角色控制UI元素显示，通过Element UI的Message组件提供友好提示
- **表单验证**：使用Element UI的Form组件实现表单验证逻辑，自动显示错误状态

## 6. 原型交付要求

### 6.1 存放位置要求
**请严格按照以下路径存放文件：**
- 所有界面原型HTML文件必须存放在项目根目录下的 `原型` 子目录中
- 小程序页面存放在 `原型/小程序页面/` 目录下
- 后台管理页面存放在 `原型/后台管理页面/` 目录下
- 每个原型文件需使用语义化的文件名，如 `login.html`、`home.html`

### 6.2 格式要求
**请严格遵循以下格式规范：**
- 使用HTML+Element UI设计原型页面
- 确保所有样式通过Element UI组件和类实现，避免自定义CSS
- 在HTML文件中引入Element UI的CSS和JavaScript CDN
- 提供响应式布局，适配不同设备尺寸
- **强制要求**：所有原型页面必须汇总到 `原型/index.html` 文件中，方便查阅和管理

### 6.3 内容要求
**请遵循以下内容规范：**
- 包含所有主要页面和关键交互
- 为不同用户角色（管理员、信息员、部门负责人、普通用户）设计对应的差异化界面
- 使用Tailwind CSS实现所有布局、颜色、字体和间距要求
- 添加必要的交互逻辑（使用简单的JavaScript实现）
- 确保页面在浏览器中可以直接打开查看

### 6.4 index.html汇总要求
**请创建以下汇总文件：**
- **必须包含**：所有页面原型的链接、页面名称、功能描述
- **必须包含**：页面之间的跳转关系图或说明
- **必须包含**：不同用户角色的界面差异化说明
- **必须包含**：版本信息、更新日志、设计规范链接
- **格式要求**：使用HTML+Tailwind CSS实现，响应式设计，支持不同设备查看
- **交互要求**：点击链接可直接打开对应HTML页面，提供导航菜单快速定位页面
- **嵌入要求**：**使用iframe元素嵌入其他页面的HTML文件**，实现无需跳转即可在当前页面查看所有原型内容，提供页面切换功能

### 6.5 文档要求
**请遵循以下文档规范：**
- 提供原型说明文档，解释设计思路和交互逻辑
- 标注各页面功能点和特殊交互要求
- 说明如何使用Tailwind CSS实现设计规范
- 提供关键组件的HTML结构和Tailwind类示例
- 说明页面跳转关系和交互实现方式

## 7. 参考资源
**请参考以下设计资源：**
- 参考软件需求文档中的用户角色和功能需求
- 遵循uni-app和uView的组件设计规范
- 参考微信小程序设计指南
- 参考Ant Design设计系统的布局和组件规范
- 参考uni-admin的后台管理界面设计风格

---

以上指令基于《软件需求文档》制定，如有任何疑问或需要调整，请及时与需求方沟通确认。