# techhero-project-uniapp-ui **Repository Path**: defaultjs2105/techhero-project-uniapp-ui ## Basic Information - **Project Name**: techhero-project-uniapp-ui - **Description**: 湖北综合管理平台移动端的工作人员管理系统前端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-26 - **Last Updated**: 2026-07-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # techhero-uniapp-ui 考试教育综合管理平台 — 移动端小程序（湖北省教育考试院） 基于 uni-app (Vue 3 + Vite) 构建，支持微信小程序、支付宝小程序、iOS、Android、鸿蒙等多端运行。 --- ## 技术栈 | 类别 | 技术 | 说明 | |------|------|------| | 框架 | uni-app 3.x (Vue 3 + Vite) | 跨端开发框架 | | 状态管理 | Pinia | Vue3 推荐，手动持久化到 uni.storage | | 样式 | SCSS（sass 1.70+） | `uni.scss` 全局注入变量，复刻网页端品牌色 | | 图表 | ECharts 5 | ec-canvas（小程序）/ renderjs（H5/App） | | 后端 API | 现有 Spring Cloud 微服务 | 纯 API 消费者，不修改后端 | | 构建工具 | Vite 5 + @dcloudio/vite-plugin-uni | uni-app 3.x 官方 Vite 插件 | --- ## 目录结构 ``` src/ ├── pages/ # 主包页面（TabBar） │ ├── index/ # Tab: 考试 │ ├── my/ # Tab: 我的 │ ├── login/ # 登录页 │ └── change-password/# 修改密码 ├── subpkg-exam/ # 分包: 考试核心（考试计划详情、工作项详情） ├── subpkg-stats/ # 分包: 统计详情（7 个统计详情页） ├── subpkg-tasks/ # 分包: 待办/通知/消息（5 个页面） ├── subpkg-misc/ # 分包: 其他功能（天气、准考证、进度、设备、视频监控） ├── subpkg-monitor/ # 分包: 监控中心（监控中心、视频列表、播放器、试卷跟踪） ├── api/ # API 接口模块（按后端服务命名空间组织） ├── store/ # Pinia 状态管理（user、app、todo） ├── utils/ # 工具函数（auth、request、mask、constants） ├── composables/ # 组合式函数（useExamPlan、usePagination） ├── components/ # 公共组件（12 个） ├── theme/ # 主题样式（variables、common） ├── static/tab/ # TabBar 图标 ├── uni.scss # 全局注入样式变量 ├── App.vue # 应用入口 ├── main.js # Vue 初始化 ├── pages.json # 路由 + TabBar + subPackages └── manifest.json # 多平台配置 ``` --- ## 开发 ```bash # 安装依赖（node >= 18, npm >= 9） npm install --legacy-peer-deps # H5 开发（浏览器调试，端口默认 5173） npm run dev:h5 # 微信小程序开发（需配合微信开发者工具） npm run dev:mp-weixin # 支付宝小程序开发（需配合支付宝小程序开发者工具） npm run dev:mp-alipay # 构建生产版本 npm run build:h5 # H5 → dist/build/h5/ npm run build:mp-weixin # 微信小程序 → dist/build/mp-weixin/ npm run build:mp-alipay # 支付宝小程序 → dist/build/mp-alipay/ npm run build:app # App → dist/build/app/ npm run build:app-harmony # 鸿蒙 → dist/build/app-harmony/ ``` ### 构建验证 | 平台 | 状态 | 输出 | |------|------|------| | H5 | ✅ | `dist/build/h5/` (~426KB) | | 微信小程序 | ✅ | `dist/build/mp-weixin/` | | 支付宝小程序 | ✅ | `dist/build/mp-alipay/` | --- ## 测试环境 - **网页端**：https://test.hbjytest.cn/ - **测试账号**：15171422073 / yang1234# - **后端 API 网关**：通过 test.hbjytest.cn 转发 --- ## 实施计划 ### Phase 1：基础框架搭建 ✅ uni-app 工程骨架、认证登录、TabBar 框架。 **已完成文件：** - `pages.json` — 路由注册 + TabBar（考试/我的）+ 5 个 subPackages 声明 + preloadRule - `manifest.json` — 多平台配置（微信/支付宝/鸿蒙/iOS/Android） - `uni.scss`（含 `theme/variables.scss`、`theme/common.scss`）— 全局变量 + 通用样式，通过 Vite `additionalData` 注入所有 scoped SCSS - `utils/request.js` — uni.request 拦截器（Token 注入、RestResponse 解包、060004 自动登出） - `utils/auth.js` — token 读写（uni.getStorageSync/setStorageSync）+ 过期检查 - `utils/mask.js` — 脱敏工具函数（手机号、身份证、姓名） - `utils/constants.js` — 状态枚举、错误码常量 - `api/auth.js` — 登录（mobileLogin → POST /auth/mobile/token，**密码 MD5 哈希后发送**，因后端直接比对存储的 MD5 值）、登出、修改密码 - `store/user.js` (Pinia) — token、userInfo、ksjhbm，手动持久化 - `store/app.js` (Pinia) — currentExamPlan、examPlans、noReadCount - `store/todo.js` (Pinia) — 待办缓存状态 - `pages/login/index.vue` — 登录页：手机号+密码（`api/auth.js` 层自动 MD5 哈希），可选考试计划，微信/支付宝登录入口 - `App.vue` — onLaunch 检查 token，无 token 跳登录 - `pages/index/index.vue`、`pages/my/index.vue`、`pages/change-password/index.vue` - 5 个 subPackage 全部 22 个页面（含占位页） - 12 个公共组件 --- ### Phase 2：考试首页 — 时间日历 + 工作项列表 + 工作台 **核心设计理念：** - 以**时间日历**为唯一轴线，废除"考前/考中/考后"抽象阶段划分 - 考试计划日期前 → 准备期工作项；期间 → 执行期工作项；之后 → 收尾期工作项 - 工作项以**从上到下的时间线列表**呈现，每项标注计划日期、进度 - **监控**作为核心功能独立突出展示 **页面布局（`pages/index/index.vue`）：** ``` ┌─────────────────────────────┐ │ 考试计划时间轴（水平滑动） │ ← 自动定位最近考试 ├─────────────────────────────┤ │ 当前考试计划摘要卡片 │ ├─────────────────────────────┤ │ 📹 实时监控 → │ ← 醒目蓝底入口 ├─────────────────────────────┤ │ 工作项（按时间从上到下排列） │ ← 时间线列表 ├─────────────────────────────┤ │ 工作台（固定板块） │ ← 统计数据汇聚 ├─────────────────────────────┤ │ 最近通知 & 待办 │ └─────────────────────────────┘ ``` **文件清单：** - `api/exam.js` — 考试计划、首页统计、考前/中/后统计 API - `components/stat-card.vue` — 统计数字卡片 - `components/stat-grid.vue` — 统计网格容器 - `components/exam-plan-card.vue` — 考试计划摘要卡片 - `components/exam-timeline.vue` — 考试计划选择器（水平滑动，自动定位最近考试） - `components/work-item-list.vue` — 工作项时间线列表（垂直时间轴） - `components/monitor-entry.vue` — 醒目监控入口组件 - `components/page-header.vue` — 统一页面标题栏 - `components/empty-state.vue` — 空状态占位 - `components/notice-badge.vue` — 通知角标 - `composables/useExamPlan.js` — 考试计划逻辑（状态判定、最近考试、工作项生成） - `composables/usePagination.js` — 分页加载逻辑 - `pages/index/index.vue` — 考试首页（完整实现） - `subpkg-exam/pages/exam-plan-detail/index.vue` — 考试计划详情 --- ### Phase 3：工作项详情 + 监控中心 **工作项交互：** 点击工作项 → 详情页（名称、描述、负责人、进度、子任务、关联数据） **监控中心（核心功能，`subpkg-monitor` 分包）：** - `subpkg-monitor/pages/monitor-center/index.vue` — 监控中心主页（保密室/考场/试卷/巡查分类卡片） - `subpkg-monitor/pages/video-list/index.vue` — 监控点位列表（在线/离线状态灯） - `subpkg-monitor/pages/video-player/index.vue` — `