174 lines
4.3 KiB
Markdown
174 lines
4.3 KiB
Markdown
# 移动端原型说明
|
||
|
||
## 技术框架
|
||
- UniApp
|
||
- Ant Design Mobile Vue（使用在线CDN）
|
||
|
||
## 页面列表（共17个页面）
|
||
|
||
### 核心功能页面
|
||
|
||
#### 1. login.html - 登录页面
|
||
- 用户名密码登录
|
||
- 记住密码功能
|
||
- 忘记密码链接
|
||
- 登录验证
|
||
|
||
#### 2. todo.html - 待办事项页面
|
||
- 待审核事项列表
|
||
- 快速审核操作（通过/驳回）
|
||
- 分类筛选（全部/待审核/我的）
|
||
- 审核详情查看
|
||
|
||
#### 3. approval-detail.html - 审核详情页面
|
||
- 项目信息展示
|
||
- 附件查看和下载
|
||
- 审核历史记录
|
||
- 审核意见填写
|
||
- 审核操作（通过/驳回）
|
||
|
||
#### 4. message.html - 消息通知页面
|
||
- 消息列表（全部/未读/系统）
|
||
- 消息类型标识（审核提醒、系统通知、警告提醒等）
|
||
- 消息已读/未读状态
|
||
- 全部标记已读功能
|
||
|
||
#### 5. project.html - 项目查询页面
|
||
- 项目搜索功能
|
||
- 项目状态筛选（已立项/投标中/已签合同/已启动）
|
||
- 项目列表展示
|
||
- 项目详情查看
|
||
|
||
#### 6. project-detail.html - 项目详情页面
|
||
- 项目基本信息展示
|
||
- 项目描述
|
||
- 项目进度时间线
|
||
- 项目附件下载
|
||
- 编辑和查看进度操作
|
||
|
||
#### 7. output.html - 成果提交页面
|
||
- 我的项目列表
|
||
- 成果提交表单
|
||
- 成果类型选择（初稿/对账/最终成果）
|
||
- 成果金额录入
|
||
- 附件上传（限制10MB）
|
||
- 完成情况说明
|
||
|
||
#### 8. report.html - 报表查询页面
|
||
- 产值汇总查询
|
||
- 时间段选择
|
||
- 产值统计展示
|
||
- 项目明细列表
|
||
- 回款情况统计
|
||
|
||
### 个人中心相关页面
|
||
|
||
#### 9. profile.html - 个人中心页面
|
||
- 用户信息展示
|
||
- 我的项目/成果/审核入口
|
||
- 个人信息设置入口
|
||
- 修改密码入口
|
||
- 系统设置入口
|
||
- 帮助中心入口
|
||
- 退出登录
|
||
|
||
#### 10. my-projects.html - 我的项目列表
|
||
- 项目列表展示
|
||
- 状态筛选
|
||
- 项目详情查看
|
||
|
||
#### 11. my-outputs.html - 我的成果列表
|
||
- 成果列表展示
|
||
- 状态筛选（全部/待审核/已通过/已驳回）
|
||
- 成果详情查看
|
||
|
||
#### 12. my-approvals.html - 我的审核列表
|
||
- 审核记录列表
|
||
- 状态筛选（全部/已通过/已驳回）
|
||
- 审核详情查看
|
||
|
||
#### 13. user-info.html - 个人信息编辑
|
||
- 头像更换
|
||
- 姓名、手机号、邮箱编辑
|
||
- 信息保存
|
||
|
||
#### 14. change-password.html - 修改密码
|
||
- 原密码验证
|
||
- 新密码设置（含复杂度验证）
|
||
- 确认密码
|
||
- 密码修改
|
||
|
||
#### 15. settings.html - 系统设置
|
||
- 消息推送开关
|
||
- 声音提醒开关
|
||
- 震动提醒开关
|
||
- 清除缓存
|
||
- 检查更新
|
||
- 隐私政策
|
||
- 用户协议
|
||
|
||
#### 16. about.html - 关于系统
|
||
- 系统简介
|
||
- 版本信息
|
||
- 主要功能说明
|
||
- 更新日期
|
||
- 版权信息
|
||
|
||
#### 17. help.html - 帮助中心
|
||
- 常见问题解答
|
||
- 操作指南
|
||
- 问题搜索功能
|
||
- 联系方式
|
||
|
||
## 页面导航
|
||
|
||
所有页面底部都有统一的导航栏，包含5个Tab：
|
||
- 📋 待办
|
||
- 🔔 消息
|
||
- 📁 项目
|
||
- 📝 成果
|
||
- 👤 我的
|
||
|
||
## 使用方法
|
||
|
||
1. 在浏览器中打开任意HTML文件即可查看
|
||
2. 建议使用浏览器开发者工具切换到移动设备视图
|
||
3. 所有页面都是静态HTML，可以直接在浏览器中查看
|
||
4. 部分交互功能（如登录、提交等）会显示alert提示
|
||
|
||
## 设计特点
|
||
|
||
- 移动端适配（最大宽度414px）
|
||
- 内容区域独立白色背景（与body的#f5f5f5区分）
|
||
- 卡片式布局
|
||
- 统一的底部导航栏（5个Tab）
|
||
- 简洁的操作流程
|
||
- 清晰的视觉层次
|
||
- 完整的页面跳转链接（非alert提示）
|
||
|
||
## 页面导航结构
|
||
|
||
所有功能页面底部都有统一的导航栏，包含5个Tab：
|
||
- 📋 待办 - 跳转到 todo.html
|
||
- 🔔 消息 - 跳转到 message.html
|
||
- 📁 项目 - 跳转到 project.html
|
||
- 📝 成果 - 跳转到 output.html
|
||
- 👤 我的 - 跳转到 profile.html
|
||
|
||
## 页面跳转关系
|
||
|
||
- 登录页 → 待办事项页
|
||
- 个人中心 → 我的项目/成果/审核/个人信息/修改密码/系统设置/关于系统/帮助中心
|
||
- 项目查询 → 项目详情
|
||
- 待办事项 → 审核详情
|
||
- 消息通知 → 待办事项或项目查询
|
||
- 成果提交 → 成果列表
|
||
|
||
## 注意事项
|
||
|
||
- 本原型使用在线CDN引入样式框架
|
||
- 实际开发时需使用UniApp框架和Ant Design Mobile Vue组件
|
||
- 所有交互功能为演示效果，实际开发需对接后端API
|
||
- 文件上传功能需要在实际开发中实现
|
||
- 所有页面内容区域都有独立的白色背景，与body的灰色背景区分
|