12 KiB
12 KiB
图片收集小程序界面原型提示词
请根据以下详细要求，生成清晰、直观、符合企业形象的图片收集小程序界面原型。
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的后台管理界面设计风格
以上指令基于《软件需求文档》制定，如有任何疑问或需要调整，请及时与需求方沟通确认。