diff --git a/doc/process/weekly/week-12/group/meetingmintues-12.md b/doc/process/weekly/week-12/group/meetingmintues-12.md
new file mode 100644
index 0000000..429f8ec
--- /dev/null
+++ b/doc/process/weekly/week-12/group/meetingmintues-12.md
@@ -0,0 +1,91 @@
+# 小组会议纪要-第12周
+
+## 会议记录概要
+
+**团队名称：** 软1-汪汪队  
+**指导老师：** 肖雄仁  
+**主 持 人：** 曹峻茂  
+**记录人员：** 张红卫  
+**会议主题：** 第12周任务规划与分工  
+**会议地点：** 宿舍  
+**会议时间：** 2025-12-8 12:30-13:30  
+**记录时间：** 2025-12-8 18:00  
+**参与人员：** 曹峻茂、张红卫、罗月航、周竞由、王磊  
+
+---
+
+## 会议内容
+
+### 1. 本周总体目标
+完成前后端核心模块联调与问题闭环，推进云服务器与数据库环境部署，为项目最终交付做好技术准备与系统集成。
+
+### 2. 后端任务安排
+
+**后端1（云服务器与数据库环境配置）**
+- **负责人：** 曹峻茂
+- **内容：**
+  - 完成云服务器环境搭建与系统初始化
+  - 配置生产数据库环境，完成数据迁移与备份策略
+  - 部署后端服务并完成初步连通性测试
+
+**后端2（联调支持与接口问题修复）**
+- **负责人：** 王磊
+- **内容：**
+  - 配合前端完成统计模块、设备管理模块接口联调
+  - 修复接口响应慢、数据不一致等遗留问题
+  - 协助优化核心业务接口性能
+
+**后端3（权限与告警模块联调支持）**
+- **负责人：** 周竞由
+- **内容：**
+  - 完成权限控制模块前后端联调，确保权限逻辑一致
+  - 支持告警推送功能与前端展示联调
+  - 协助修复联调中发现的权限与推送相关Bug
+
+### 3. 前端任务安排
+
+**前端1（APP端联调与功能验证）**
+- **负责人：** 罗月航
+- **内容：**
+  - 完成APP端用水记录、工单详情页面与后端接口联调
+  - 进行功能验证与用户体验优化
+  - 配合后端修复数据展示与交互问题
+
+**前端2（Web端联调与性能优化）**
+- **负责人：** 张红卫
+- **内容：**
+  - 完成Web端统计页面、设备管理页面与后端接口联调
+  - 实施性能优化方案（分页、虚拟滚动、缓存等）
+  - 验证权限控制与异常处理逻辑
+
+### 4. 联调与整合任务
+
+**前后端联调**
+- **参与人员：** 王磊、周竞由、罗月航、张红卫
+- **内容：**
+  - 集中解决第11周联调遗留问题
+  - 完成所有核心业务流程端到端验证
+  - 输出联调测试报告与问题修复清单
+
+### 5. 团队协作要求
+- 每日晨会同步进展，晚前提交当日工作小结
+- 联调问题统一记录至共享表格，明确责任人与解决时间
+- 环境配置与部署过程中保持沟通，确保各环节顺利衔接
+- 重点关注系统稳定性与数据一致性，为交付做好准备
+
+### 6. 预期交付物
+- 云服务器与生产数据库环境部署完成
+- 前后端联调问题修复清单与测试报告
+- 所有核心功能模块完成联调并稳定运行
+- 性能优化与权限控制验证通过记录
+- 项目部署文档初稿
+
+### 7. 支持需求
+- 希望获得关于云环境部署与数据库性能调优的指导
+- 期待老师在系统集成与交付前测试方面给予建议
+- 如遇部署或联调难题，可向研究生学长请求技术支援
+
+---
+
+**会议确认：**  
+全体与会人员确认会议内容与分工无异议。
diff --git a/doc/process/weekly/week-12/group/week-plan-12.md b/doc/process/weekly/week-12/group/week-plan-12.md
new file mode 100644
index 0000000..8577cb4
--- /dev/null
+++ b/doc/process/weekly/week-12/group/week-plan-12.md
@@ -0,0 +1,30 @@
+# 小组周计划-第12周
+
+## 团队名称和起止时间
+
+**团队名称：** 软1-汪汪队
+**开始时间：** 2025-12-8
+**结束时间：** 2025-12-14
+
+## 本周任务计划安排
+
+
+| 序号 | 计划内容                                                   | 执行人            | 情况说明                   |
+|----|--------------------------------------------------------|----------------|------------------------|
+| 1  | 确定本周计划分工                                               | 全体组员           | 2023-12-8 开会确定计划以及团队分工 |
+| 2  | 前后端联调                                                  | 王磊，周竞由，罗月航，张红卫 | 前后端联调解决核心问题            |
+|3|配置云服务器和数据库环境|曹峻茂|配置云服务器和数据库环境|
+## 小结
+
+1. **沟通协作：**  每日简短同步进度，遇到阻塞问题及时召开临时会议协商解决，可向指导老师及研究生学长寻求技术支持。
+2. **学习安排：** 结合项目需求深入学习权限管理和接口性能优化相关知识，分享学习笔记。
+3. **项目管理：** PM 每日跟踪任务进度，记录问题并推动解决，确保按计划推进。
+
+## 【注】
+
+1. 在小结一栏中写出希望得到如何的帮助，如讲座等；
+2. 请将个人计划和总结提前发给负责人；
+3. 周任务总结与计划是项目小组评分考核的重要依据，将直接记入平时成绩，请各位同学按要求认真填写并按时提交；
+4. PM综合本小组成员工作情况提交小组周计划、周总结报告，按时上传至代码托管平台。
+
+---
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/group/week-summary-11.md b/doc/process/weekly/week-12/group/week-summary-11.md
new file mode 100644
index 0000000..e36b0c7
--- /dev/null
+++ b/doc/process/weekly/week-12/group/week-summary-11.md
@@ -0,0 +1,37 @@
+# 小组周总结-第11周
+
+## 团队名称和起止时间
+
+**团队名称：** 软1-汪汪队
+**开始时间：** 2025-12-1
+**结束时间：** 2025-12-7
+
+## 本周任务计划安排
+
+
+| 序号 | 总结内容 | 是否完成 | 情况说明                       |
+|----|--------------|------|----------------------------|
+| 1  | 确定本周计划分工                                        | 完成   | 2023-11-24 开会确定计划以及团队分工    |
+| 2  | 继续完善mqtt数据生成和接收及存储                              | 完成   | 完善mqtt报文与接口                |
+| 3  | 开发工单管理接口，扫码用水接口，水质信息查询接口                        | 完成   | 完善相关接口                     |
+| 4  | 开发学生端扫码模块，水质信息页面，维修端工单抢单 / 拒单功能，工单处理页面，扫码用水触发功能 | 完成   | 完善app相关页面                  |
+| 5  | 开发设备监控页面功能，告警列表页面，开发工单列表页面，与后端联调                | 完成   | 开发设备监控页面功能，告警列表页面，开发工单列表页面 |
+| 6  |开发告警触发逻辑，完成登录接口| 完成   | 开发告警触发逻辑，完成登录接口，与前端对接                        |
+| 7  | 前后端联调                                           | 进行中  | 前后端联调核心流程                  |
+## 小结
+
+
+1. **沟通协作：** 小组成员应积极主动沟通，遇到困难及时寻求帮助，也可以主动向指导老师及研究生学长寻求建议。
+2. **学习安排：** 小组成员仍处于软件开发专业知识的初步学习阶段，应合理安排自主学习时间，以便后续开发的顺利进行。
+3. **项目管理：** 代码框架、依赖版本和jdk版本管理混乱导致浪费大量时间，需要改进。
+
+---
+
+## 【注】
+
+1. 在小结一栏中写出希望得到如何的帮助，如讲座等；
+2. 请将个人计划和总结提前发给负责人；
+3. 周任务总结与计划是项目小组评分考核的重要依据，将直接记入平时成绩，请各位同学按要求认真填写并按时提交；
+4. PM综合本小组成员工作情况提交小组周计划、周总结报告，按时上传至代码托管平台。
+
+---
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/members/caojunmao-weekly-plan-12.md b/doc/process/weekly/week-12/members/caojunmao-weekly-plan-12.md
new file mode 100644
index 0000000..4ddd63b
--- /dev/null
+++ b/doc/process/weekly/week-12/members/caojunmao-weekly-plan-12.md
@@ -0,0 +1,32 @@
+# 个人周计划-第11周
+
+## 姓名和起止时间
+
+**姓　　名：** 曹峻茂
+**团队名称：** 软1-汪汪队
+**开始时间：** 2025-12-8
+**结束时间：** 2025-12-14
+
+
+## 本周任务计划安排
+| 序号 | 计划内容               | 协作人 | 情况说明                  |
+|----|--------------------|----|-----------------------|
+| 1  | 确定分工               | 组员 | 2023-12-8 开会确定计划和团队分工 |
+|3|配置云服务器和数据库环境| 个人 |配置云服务器和数据库环境|
+
+## 小结
+
+
+1. **知识储备：** 学习后续需要使用的知识，为后续的开发做准备；
+2. **文档撰写：** 完成迭代开发计划撰写。
+3. **项目管理**  管理项目环境和框架
+---
+
+## 【注】
+
+1. 在小结一栏中写出希望得到如何的帮助，如讲座等；
+1. 请将个人计划和总结提前发给负责人；
+1. 周任务总结与计划是项目小组评分考核的重要依据，将直接记入平时成绩，请各位同学按要求认真填写并按时提交；
+1. 所有组员都需提交个人周计划、周总结文档，按时上传至代码托管平台；
+
+---
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/members/caojunmao-weekly-summary-11.md b/doc/process/weekly/week-12/members/caojunmao-weekly-summary-11.md
new file mode 100644
index 0000000..a1bcf04
--- /dev/null
+++ b/doc/process/weekly/week-12/members/caojunmao-weekly-summary-11.md
@@ -0,0 +1,35 @@
+# 个人周总结-第11周
+
+## 姓名和起止时间
+
+**姓　　名：** 曹峻茂
+**团队名称：** 1班-汪汪队
+**开始时间：** 2025-12-1
+**结束时间：** 2025-12-7
+
+## 本周任务完成情况
+
+| 序号 | 总结内容                                         | 是否完成 | 情况说明                                                         |
+|----| ------------------------------------------------ |------|--------------------------------------------------------------|
+| 1  | 确定分工               | 完成   | 2023-11-24 开会确定计划和团队分工 |
+| 2  | 继续完善mqtt数据生成和接收及存储 | 完成   | 优化模拟器，支持手动触发异常数据（如模拟漏水、TDS 超标），增加断网重连功能。        |
+|3|管理项目环境| 进行中  |管理项目环境，协调开发|
+
+## 对团队工作的建议
+
+1. **互助学习：** 小组成员应该根据自身的技能长短开展互帮互助的活动，共同努力提高小组成员的专业水平；
+2. **进度统一：** 团队成员尽量统一项目进度；
+
+## 小结
+
+1. **项目管理：** 协调开发进度和前后端同步
+2. **团队协作**：与团队成员保持良好的沟通协作，确保设计方向与产品需求一致
+
+---
+
+## 【注】
+
+1. 在小结一栏中写出希望得到如何的帮助，如讲座等；
+2. 请将个人计划和总结提前发给负责人；
+3. 周任务总结与计划是项目小组评分考核的重要依据，将直接记入平时成绩，请各位同学按要求认真填写并按时提交；
+4. 所有组员都需提交个人周计划、周总结文档，上传至代码托管平台；
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/members/luoyuehang-weekly-plan-12.md b/doc/process/weekly/week-12/members/luoyuehang-weekly-plan-12.md
new file mode 100644
index 0000000..4a2e0b6
--- /dev/null
+++ b/doc/process/weekly/week-12/members/luoyuehang-weekly-plan-12.md
@@ -0,0 +1,30 @@
+# 个人周计划-第12周
+
+## 姓名和起止时间
+
+**姓　　名：** [罗月航]  
+**团队名称：** 1班-汪汪队  
+**开始时间：** 2025-12-08  
+**结束时间：** 2025-12-14  
+
+## 本周任务计划安排
+
+| 序号 | 计划内容 | 协作人 | 情况说明 |
+| ---- | -------- | ------ | -------- |
+| 1 | 运维APP工单功能联调 | 后端开发 | 调试工单创建、抢单、处理、完成等完整业务流程接口 |
+| 2 | 运维APP设备监控联调 | 后端开发 | 调试设备数据实时获取、告警推送、状态更新等接口 |
+| 3 | 学生端扫码功能联调 | 后端开发 | 调试扫码用水、水质查询、设备识别等核心功能接口 |
+| 4 | 学生端用水记录联调 | 后端开发 | 调试个人用水量统计、历史记录查询、数据可视化接口 |
+| 5 | 联调问题记录与修复 | 后端开发 | 记录联调过程中的问题并协同修复，确保功能稳定 |
+
+
+## 小结
+
+1. **联调协调**：需要与后端团队协调联调时间和环境，确保联调效率；
+2. **测试数据**：需要准备充分的测试数据覆盖各种业务场景；
+3. **问题追踪**：需要建立有效的问题追踪机制，确保问题及时解决；
+4. **性能关注**：在联调过程中需要关注接口响应时间和前端性能表现；
+5. **错误处理**：需要测试各种异常情况下的错误处理和用户提示；
+6. **移动端适配**：需要确保联调功能在不同移动设备上的兼容性；
+
+
diff --git a/doc/process/weekly/week-12/members/luoyuehang-weekly-summary-11.md b/doc/process/weekly/week-12/members/luoyuehang-weekly-summary-11.md
new file mode 100644
index 0000000..c0a596e
--- /dev/null
+++ b/doc/process/weekly/week-12/members/luoyuehang-weekly-summary-11.md
@@ -0,0 +1,36 @@
+# 个人周总结-第11周
+
+## 姓名和起止时间
+
+**姓　　名：** [罗月航]  
+**团队名称：** 1班-汪汪队  
+**开始时间：** 2025-12-01  
+**结束时间：** 2025-12-07  
+
+## 本周任务完成情况
+
+| 序号 | 总结内容 | 是否完成 | 情况说明 |
+| ---- | -------- | -------- | -------- |
+| 1 | 运维人员APP页面样式优化 | 完成 | 对所有运维端页面进行了视觉统一和交互优化，提升了用户体验 |
+| 2 | 学生端页面样式优化 | 完成 | 优化了学生端所有页面的视觉效果和布局结构，确保界面美观易用 |
+| 3 | 登录功能接口对接 | 完成 | 成功对接后端登录接口，实现用户认证、权限验证和会话管理 |
+| 4 | 注册功能接口对接 | 完成 | 完成用户注册接口对接，支持新用户账号创建和信息验证 |
+| 5 | 响应式设计完善 | 完成 | 确保所有页面在不同屏幕尺寸下的良好显示效果 |
+
+## 对团队工作的建议
+
+1. **样式规范统一**：建议建立团队统一的设计规范文档，包括颜色、字体、间距等；
+2. **组件库建设**：建议逐步建立前端组件库，提高开发效率和一致性；
+3. **接口错误处理**：建议规范接口错误码和错误信息，便于前端统一处理用户提示；
+4. **性能监控**：建议引入前端性能监控工具，及时发现和解决性能问题。
+
+## 小结
+
+1. **视觉体验提升**：通过系统的样式优化，运维人员APP和学生端的视觉体验得到显著改善；
+2. **接口对接成功**：登录注册功能与后端API成功对接，用户认证流程完整可靠；
+3. **设计一致性**：统一了两端应用的设计语言，保持了产品体验的一致性；
+4. **技术难点攻克**：解决了移动端适配、接口错误处理、加载状态管理等技术难点；
+5. **团队协作**：与后端开发团队紧密协作，接口对接过程高效顺利；
+6. **质量保障**：在样式优化的同时，确保了功能完整性和用户体验的平衡；
+7. **后续重点**：接下来将重点进行功能测试和性能优化，确保系统稳定运行。
+
diff --git a/doc/process/weekly/week-12/members/zhanghongwei-weekly-plan-12.md b/doc/process/weekly/week-12/members/zhanghongwei-weekly-plan-12.md
new file mode 100644
index 0000000..5ad5f0d
--- /dev/null
+++ b/doc/process/weekly/week-12/members/zhanghongwei-weekly-plan-12.md
@@ -0,0 +1,89 @@
+# 个人周计划-第十二周
+
+## 基本信息
+
+**姓　　名：** 张红卫  
+**团队名称：** 软1-汪汪队  
+**开始时间：** 2025-12-8  
+**结束时间：** 2025-12-14  
+
+---
+
+## 本周任务计划安排
+
+| 序号 | 计划内容 | 执行人 | 情况说明 |
+|------|----------|--------|----------|
+| 1 | Web端统计页面联调与优化 | 个人 | 与王磊协作完成统计接口联调，优化图表加载性能，完善筛选交互 |
+| 2 | Web端设备管理页面联调与优化 | 个人 | 与周竞由协作完成设备管理接口联调，实现权限控制与批量操作功能 |
+| 3 | 前后端联调支持 | 个人 + 后端团队 | 参与团队联调，修复接口调用异常、数据展示不一致等问题 |
+| 4 | 前端性能优化实施 | 个人 | 实施分页加载、虚拟滚动方案，优化大数据场景下的页面渲染性能 |
+| 5 | 权限控制与异常处理完善 | 个人 | 配合后端完成权限逻辑对齐，优化导航栏与页面异常跳转处理 |
+
+---
+
+## 技术学习与实施重点
+
+### 1. 联调协作能力提升
+- 掌握前后端接口调试与问题定位方法
+- 学习使用Postman等工具进行接口测试与数据验证
+
+### 2. 性能优化实战深化
+- 实施虚拟滚动完整方案，优化大数据列表展示
+- 探索前端缓存策略与懒加载机制
+- 学习使用Chrome DevTools进行性能分析与优化
+
+### 3. 权限系统集成实践
+- 完成路由级与操作级权限控制
+- 实现动态菜单与按钮权限控制
+- 学习RBAC权限模型在前端的应用
+
+### 4. 异常处理与用户体验
+- 完善各类异常状态下的用户提示
+- 优化页面加载失败的重试与降级机制
+- 实现友好的错误页面和加载状态
+
+---
+
+## 交付物清单
+
+- [ ] 联调完成的统计页面代码（含性能优化）
+- [ ] 联调完成的设备管理页面代码（含权限控制）
+- [ ] 前后端联调问题修复记录
+- [ ] 性能优化实施方案文档
+- [ ] 权限控制测试验证报告
+- [ ] 每日工作进展记录
+
+---
+
+## 协作依赖与风险说明
+
+### 协作依赖
+1. **接口依赖**
+   - 依赖王磊提供稳定、性能优化的统计查询接口
+   - 依赖周竞由提供完整的权限控制接口规范
+   - 需要设备管理相关接口的稳定支持
+
+2. **环境依赖**
+   - 需要曹峻茂部署的测试环境支持联调验证
+   - 需要稳定的开发环境和版本控制支持
+
+3. **流程依赖**
+   - 需要罗月航在APP端配合进行跨端流程验证
+   - 需要团队成员及时沟通接口变更
+
+---
+
+## 小结与期望
+
+### 本周目标
+完成Web端所有核心页面的前后端联调，实现性能优化与权限控制，确保功能稳定可用。
+
+### 团队协作建议
+1. 建议每日固定时间进行联调进度同步
+2. 建立接口变更通知机制，减少沟通成本
+3. 统一问题记录与跟踪方式，提高解决效率
+
+### 支持需求
+1. 希望获得前端性能优化（特别是大数据渲染）的实战指导
+2. 期待老师在系统集成测试方面提供方法指导
+3. 如遇技术难题，可向研究生学长请求支持
diff --git a/doc/process/weekly/week-12/members/zhanghongwei-weekly-summary-11.md b/doc/process/weekly/week-12/members/zhanghongwei-weekly-summary-11.md
new file mode 100644
index 0000000..c447f69
--- /dev/null
+++ b/doc/process/weekly/week-12/members/zhanghongwei-weekly-summary-11.md
@@ -0,0 +1,77 @@
+# 个人周总结-第十一周
+
+## 基本信息
+
+**姓　　名：** 张红卫  
+**团队名称：** 软1-汪汪队  
+**起止时间：** 2025-12-1 至 2025-12-7  
+**核心职责：** 前端界面开发 + 前后端联调支持  
+
+---
+
+## 本周任务完成情况
+
+| 序号 | 计划内容                                       | 完成状态 | 详细说明                                                                                                         |
+|------|------------------------------------------------|----------|------------------------------------------------------------------------------------------------------------------|
+| 1    | 完成 Web 端统计页面功能开发与交互优化         |  进行中 | 已完成 ECharts 图表框架集成，实现用水量、告警次数等基础图表展示；筛选功能已初步实现，接口数据对接正在调试中 |
+| 2    | 完成 Web 端设备管理页面功能开发与交互优化     |  进行中 | 页面结构与基础表单组件已完成，支持设备增删改查；批量操作功能正在开发中，接口调试同步进行 |
+| 3    | 参与前后端联调工作                           |  进行中 | 与王磊、周竞由等后端成员保持每日沟通，统计模块接口已部分联调完成，设备管理模块接口正在逐步对接 |
+| 4    | 性能优化与异常处理完善                       |  进行中 | 已引入分页加载机制优化大数据展示；权限控制逻辑与后端对齐中；导航栏异常跳转处理逻辑已优化并测试 |
+
+---
+
+## 本周总结
+
+### 一、任务进展概述
+本周主要工作集中在 **统计页面** 和 **设备管理页面** 的前后端联调阶段。目前两个页面的基础功能框架已搭建完成，核心接口正在有序对接中。性能优化与权限控制方案已初步实施，但整体进度仍处于联调阶段，尚未完全完成。
+
+### 二、技术实现与收获
+1. **性能优化实践**  
+   - 引入分页加载机制，初步缓解大数据渲染压力
+
+2. **权限控制集成**  
+   - 配合后端权限接口，搭建前端路由权限控制基础框架
+   - 完善导航栏跳转与操作权限校验逻辑
+
+3. **复杂业务处理**  
+   - 实现设备管理中的复杂表单验证与状态管理
+   - 掌握批量操作的前端实现方式
+
+### 三、遇到的问题与挑战
+1. **接口响应延迟**  
+   - 部分统计查询接口响应时间较长，影响页面加载体验
+
+2. **权限逻辑不一致**  
+   - 前端权限控制逻辑需与后端进一步对齐，部分页面权限拦截尚未生效
+
+3. **性能瓶颈**  
+   - 大数据量图表渲染仍存在轻微卡顿，需进一步优化
+
+4. **联调协作效率**  
+   - 接口变更沟通不够及时，影响前端调试进度
+
+### 四、协作建议
+1. **接口规范明确**  
+   - 建议后端提供完整的接口文档与示例数据
+   - 建立接口变更的版本管理机制
+
+2. **联调流程优化**  
+   - 每周安排专门联调会议
+   - 建立联调问题跟踪清单
+
+3. **性能监控机制**  
+   - 共同建立接口性能监控体系
+   - 定期进行性能测试与优化
+
+### 五、工作总结与展望
+本周在前后端联调过程中，进一步深入理解了系统整体架构与业务流程。通过实际调试，不仅提升了问题排查能力，也对前端性能优化和权限控制有了更深刻的认识。虽然进度比预期稍慢，但通过持续的沟通协作，各项任务正在稳步推进。
+
+**期待与建议：**
+- 希望团队成员继续加强沟通，及时同步进展和问题
+- 建议建立更规范的联调流程，提高协作效率
+- 期待后端接口性能进一步提升，为前端优化提供更好基础
+
+---
+
+**提交时间：** 2025-12-07  
+**下周重点：** 完成所有接口联调，实现性能优化目标，完善权限控制系统
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/members/zhoujingyou-weekly-plan-12.md b/doc/process/weekly/week-12/members/zhoujingyou-weekly-plan-12.md
new file mode 100644
index 0000000..741084d
--- /dev/null
+++ b/doc/process/weekly/week-12/members/zhoujingyou-weekly-plan-12.md
@@ -0,0 +1,22 @@
+# 个人周计划-第12周
+
+## 姓名和起止时间
+
+**姓　　名：** 周竞由
+**团队名称：** 软1-汪汪队  
+**开始时间：** 2025-12-8  
+**结束时间：** 2025-12-14
+
+## 本周任务计划安排
+| 序号 | 计划内容                        | 协作人 | 情况说明                                |
+|----|-----------------------------|-----|-------------------------------------|
+| 1  | 前后端接口联调：核心业务接口（权限/告警/工单）全量对接验证 | 前端协作人员  | 梳理接口文档并核对字段定义，逐一验证参数传递、数据返回格式、异常场景处理逻辑，修复接口调用异常问题 |
+| 2  | 页面与后端逻辑联调：权限展示/告警推送/工单流转页面 | 前端协作人员  | 联调各角色权限对应的页面展示逻辑，验证告警弹窗/列表与后端数据实时联动，确保工单全流程页面数据同步更新 |
+| 3  | 联调问题闭环与性能优化：接口响应/数据一致性/多端兼容 | 前端协作人员  | 汇总联调问题清单并逐一修复，完成回归测试；优化高频接口响应速度，验证多浏览器/移动设备兼容性 |
+
+## 小结
+
+1. **接口验证：** 完成核心业务接口全量联调，统一前后端字段定义与异常处理标准，解决接口调用类问题；
+2. **页面联调：** 实现权限、告警、工单相关页面与后端逻辑的精准联动，保障页面数据实时性与准确性；
+3. **问题闭环：** 梳理并修复联调全流程问题，通过回归测试验证问题解决效果，确保无遗留问题；
+4. **体验优化：** 针对高频接口做性能调优，提升页面交互响应速度，保障多端访问的兼容性与稳定性。
\ No newline at end of file
diff --git a/doc/process/weekly/week-12/members/zhoujingyou-weekly-summary-11.md b/doc/process/weekly/week-12/members/zhoujingyou-weekly-summary-11.md
new file mode 100644
index 0000000..cd3169f
--- /dev/null
+++ b/doc/process/weekly/week-12/members/zhoujingyou-weekly-summary-11.md
@@ -0,0 +1,39 @@
+# 个人周总结-第11周
+
+## 姓名和起止时间
+**姓　　名：** 周竞由  
+**团队名称：** 软1-汪汪队  
+**开始时间：** 2025-12-1  
+**结束时间：** 2025-12-7  
+**核心职责：** 权限模块细化开发 + 告警功能优化 + 全流程闭环测试
+
+## 本周任务完成情况
+
+| 序号 | 计划内容                        | 完成情况 | 说明                                       |
+|----|-----------------------------|------|------------------------------------------|
+| 1  | 权限细化：接口级权限控制（学生/维修人员/管理员） | 已完成  | 完成三类角色12个核心接口的访问范围划分，开发并调试权限中间件，解决2处角色权限冲突问题，通过接口测试验证权限拦截有效性 |
+| 2  | 告警功能完善：告警分级、推送、历史查询接口       | 已完成  | 实现一般/紧急两级告警标识逻辑，完成Web弹窗、APP消息推送联调，开发告警历史查询接口（支持按时间/级别筛选），验证多端推送兼容性 |
+| 3  | 全流程测试：设备异常→告警→工单→维修→恢复      | 部分完成 | 模拟8种真实业务场景（含3种异常场景），验证各环节数据同步与流程衔接，定位并修复3个逻辑断点（工单状态更新延迟、告警与工单关联失败等），实现全流程闭环 |
+
+## 本周总结
+
+1. **阶段成果：**  
+   本周完成权限体系的精细化落地与告警功能的全场景覆盖，通过全流程测试验证了核心业务链路的完整性。权限控制精准度、告警响应及时性及流程衔接顺畅度均达到预期，为后续前后端联调奠定了坚实基础。
+
+2. **技术提升：**
+    - 深入理解JWT权限认证与中间件拦截原理，掌握接口级权限控制的实现方法；
+    - 熟悉Web/APP多端告警推送的联调技巧，解决了跨端消息格式兼容问题；
+    - 提升复杂业务流程的测试场景设计能力，学会通过场景复现定位链路断点。
+
+3. **存在问题：**
+    - 权限模块对“临时角色”“跨角色操作”等特殊场景考虑不足，暂无适配方案；
+    - 全流程测试依赖人工模拟，测试效率较低，未形成自动化测试脚本；
+
+4. **改进方向：**
+    - 补充特殊角色权限场景的需求分析，新增3-5条关键用例并完善代码逻辑；
+    - 优化告警推送机制，引入消息队列降低并发压力，提升推送实时性；
+    - 基于Postman或JMeter编写全流程自动化测试脚本，减少人工重复操作；
+    - 对告警查询接口添加索引，优化SQL查询语句，提升大数据量下的响应速度。
+
+5. **工作体会：**  
+   本周工作让我深刻认识到“功能完整性”与“场景适配性”的重要性。权限控制不仅要划分清晰，更要考虑实际业务中的特殊情况；全流程测试不仅要验证“正常路径”，更要覆盖“异常场景”。通过与前端、产品的沟通，意识到功能开发需提前对齐需求细节，避免因理解偏差导致返工。同时，性能优化是功能落地后的关键环节，后续需在开发初期就融入性能考量，提升系统整体稳定性。
\ No newline at end of file
diff --git a/src/main/java/com/campus/water/config/SecurityConfig.java b/src/main/java/com/campus/water/config/SecurityConfig.java
index 55c06fa..8b2b559 100644
--- a/src/main/java/com/campus/water/config/SecurityConfig.java
+++ b/src/main/java/com/campus/water/config/SecurityConfig.java
@@ -12,7 +12,6 @@ import org.springframework.security.config.annotation.method.configuration.Enabl
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
 import org.springframework.security.config.http.SessionCreationPolicy;
-import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
@@ -27,7 +26,7 @@ import java.util.Arrays;
  */
 @Configuration
 @EnableWebSecurity
-@EnableMethodSecurity(prePostEnabled = true) // 启用方法级权限控制
+@EnableMethodSecurity() // 启用方法级权限控制
 public class SecurityConfig {
 
     private final UserDetailsServiceImpl userDetailsService;
diff --git a/src/main/java/com/campus/water/controller/web/AdminController.java b/src/main/java/com/campus/water/controller/web/AdminController.java
new file mode 100644
index 0000000..caa95dd
--- /dev/null
+++ b/src/main/java/com/campus/water/controller/web/AdminController.java
@@ -0,0 +1,54 @@
+package com.campus.water.controller.web;
+
+import com.campus.water.entity.Admin;
+import com.campus.water.service.AdminService;
+import com.campus.water.util.ResultVO;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/web/admin")
+@RequiredArgsConstructor
+@Tag(name = "管理员管理接口", description = "Web管理端管理员列表查询接口")
+public class AdminController {
+
+    private final AdminService adminService;
+
+    /**
+     * 加载管理员列表（支持筛选）
+     * @param role 角色筛选（可选，值：super_admin/area_admin/viewer）
+     * @param status 状态筛选（可选，值：active/inactive）
+     */
+    @GetMapping("/list")
+    @PreAuthorize("hasRole('ADMIN')") // 仅管理员可访问
+    @Operation(summary = "获取管理员列表", description = "支持按角色和状态筛选管理员")
+    public ResponseEntity<ResultVO<List<Admin>>> getAdminList(
+            @RequestParam(required = false) String role,
+            @RequestParam(required = false) String status
+    ) {
+        try {
+            // 转换参数为枚举类型
+            Admin.AdminRole adminRole = role != null ? Admin.AdminRole.valueOf(role) : null;
+            Admin.AdminStatus adminStatus = status != null ? Admin.AdminStatus.valueOf(status) : null;
+
+            // 调用服务层查询
+            List<Admin> adminList = adminService.getAdminList(adminRole, adminStatus);
+            return ResponseEntity.ok(ResultVO.success(adminList));
+        } catch (IllegalArgumentException e) {
+            // 处理枚举参数错误
+            return ResponseEntity.ok(ResultVO.error(400, "无效的角色或状态参数: " + e.getMessage()));
+        } catch (Exception e) {
+            // 处理其他异常
+            return ResponseEntity.ok(ResultVO.error(500, "查询管理员列表失败: " + e.getMessage()));
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/com/campus/water/controller/web/DeviceStatusController.java b/src/main/java/com/campus/water/controller/web/DeviceStatusController.java
index 501e405..dc357b4 100644
--- a/src/main/java/com/campus/water/controller/web/DeviceStatusController.java
+++ b/src/main/java/com/campus/water/controller/web/DeviceStatusController.java
@@ -102,17 +102,24 @@ public class DeviceStatusController {
     @GetMapping("/by-status")
     @Operation(summary = "按状态查询设备", description = "根据状态查询设备列表")
     public ResponseEntity<ResultVO<List<Device>>> getDevicesByStatus(
-            @RequestParam String status,
-            @RequestParam(required = false) String areaId,
-            @RequestParam(required = false) String deviceType) {
-        try {
-            List<Device> devices = deviceStatusService.getDevicesByStatus(status, areaId, deviceType);
-            return ResponseEntity.ok(ResultVO.success(devices));
-        } catch (Exception e) {
-            return ResponseEntity.ok(ResultVO.error(500, "查询设备失败: " + e.getMessage()));
-        }
+    @RequestParam String status,
+    @RequestParam(required = false) String areaId,
+    @RequestParam(required = false) String deviceType) {
+
+    // 添加默认值处理
+    if (deviceType == null || deviceType.isEmpty()) {
+        deviceType = "water_maker"; // 默认值
     }
 
+    try {
+        List<Device> devices = deviceStatusService.getDevicesByStatus(status, areaId, deviceType);
+        return ResponseEntity.ok(ResultVO.success(devices));
+    } catch (Exception e) {
+        return ResponseEntity.ok(ResultVO.error(500, "查询设备失败: " + e.getMessage()));
+    }
+}
+
+
     @GetMapping("/status-count")
     @Operation(summary = "设备状态数量统计", description = "统计各状态设备数量")
     public ResponseEntity<ResultVO<Map<String, Object>>> getDeviceStatusCount(
diff --git a/src/main/java/com/campus/water/controller/web/UserController.java b/src/main/java/com/campus/water/controller/web/UserController.java
new file mode 100644
index 0000000..a58f493
--- /dev/null
+++ b/src/main/java/com/campus/water/controller/web/UserController.java
@@ -0,0 +1,53 @@
+package com.campus.water.controller.web;
+
+import com.campus.water.entity.User;
+import com.campus.water.service.UserService;
+import com.campus.water.util.ResultVO;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/web/user")
+@RequiredArgsConstructor
+@Tag(name = "学生管理接口", description = "Web管理端学生列表查询接口")
+public class UserController {
+
+    private final UserService userService;
+
+    /**
+     * 加载学生用户列表（支持筛选）
+     * @param studentName 学生姓名模糊查询（可选）
+     * @param status 状态筛选（可选，值：active/inactive）
+     */
+    @GetMapping("/list")
+    @PreAuthorize("hasRole('ADMIN')") // 仅管理员可访问
+    @Operation(summary = "获取学生用户列表", description = "支持按姓名和状态筛选学生")
+    public ResponseEntity<ResultVO<List<User>>> getUserList(
+            @RequestParam(required = false) String studentName,
+            @RequestParam(required = false) String status
+    ) {
+        try {
+            // 转换状态参数为枚举类型
+            User.UserStatus userStatus = status != null ? User.UserStatus.valueOf(status) : null;
+
+            // 调用服务层查询
+            List<User> userList = userService.getUserList(studentName, userStatus);
+            return ResponseEntity.ok(ResultVO.success(userList));
+        } catch (IllegalArgumentException e) {
+            // 处理枚举参数错误
+            return ResponseEntity.ok(ResultVO.error(400, "无效的状态参数: " + e.getMessage()));
+        } catch (Exception e) {
+            // 处理其他异常
+            return ResponseEntity.ok(ResultVO.error(500, "查询学生列表失败: " + e.getMessage()));
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/com/campus/water/service/AdminService.java b/src/main/java/com/campus/water/service/AdminService.java
new file mode 100644
index 0000000..62a00b0
--- /dev/null
+++ b/src/main/java/com/campus/water/service/AdminService.java
@@ -0,0 +1,34 @@
+package com.campus.water.service;
+
+import com.campus.water.entity.Admin;
+import com.campus.water.mapper.AdminRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class AdminService {
+
+    private final AdminRepository adminRepository;
+
+    /**
+     * 获取管理员列表（支持按角色和状态筛选）
+     */
+    public List<Admin> getAdminList(Admin.AdminRole role, Admin.AdminStatus status) {
+        if (role != null && status != null) {
+            // 按角色和状态筛选
+            return adminRepository.findByRoleAndStatus(role, status);
+        } else if (role != null) {
+            // 仅按角色筛选
+            return adminRepository.findByRole(role);
+        } else if (status != null) {
+            // 仅按状态筛选
+            return adminRepository.findByStatus(status);
+        } else {
+            // 查询所有管理员
+            return adminRepository.findAll();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/com/campus/water/service/LoginService.java b/src/main/java/com/campus/water/service/LoginService.java
index c44d31e..37fcdfc 100644
--- a/src/main/java/com/campus/water/service/LoginService.java
+++ b/src/main/java/com/campus/water/service/LoginService.java
@@ -12,6 +12,7 @@ import com.campus.water.entity.dto.request.LoginRequest;
 import lombok.RequiredArgsConstructor;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
+import org.springframework.util.DigestUtils;
 
 import java.util.UUID;
 
@@ -32,22 +33,33 @@ public class LoginService {
         return switch (userType) {
             case "admin" -> handleAdminLogin(username, password);
             case "user" -> handleUserLogin(username, password);
-            case "repairer" -> handleRepairerLogin(username, password);
+            case "repairman" -> handleRepairmanLogin(username, password);
             default -> throw new RuntimeException("无效的用户类型：" + userType);
         };
     }
 
     private LoginVO handleAdminLogin(String username, String password) {
-        Admin admin = adminRepository.findByAdminName(username)
-                .orElseThrow(() -> new RuntimeException("管理员不存在"));
-
-        if (!passwordEncoder.matches(password, admin.getPassword())) {
-            throw new RuntimeException("密码错误");
-        }
+    Admin admin = adminRepository.findByAdminName(username)
+            .orElseThrow(() -> new RuntimeException("管理员不存在"));
+
+    boolean matches;
+    // 临时支持 MD5 验证（仅用于测试环境）
+    if (admin.getPassword().startsWith("$2a$") || admin.getPassword().startsWith("$2y$")) {
+        // BCrypt 格式密码
+        matches = passwordEncoder.matches(password, admin.getPassword());
+    } else {
+        // MD5 格式密码
+        String md5Password = DigestUtils.md5DigestAsHex(password.getBytes());
+        matches = md5Password.equals(admin.getPassword());
+    }
 
-        return createLoginVO(admin.getAdminId(), username, "admin");
+    if (!matches) {
+        throw new RuntimeException("密码错误");
     }
 
+    return createLoginVO(admin.getAdminId(), username, "admin");
+}
+
     private LoginVO handleUserLogin(String username, String password) {
         // 改为查询User实体，使用studentName字段匹配用户名
         User user = userRepository.findByStudentName(username)
@@ -62,7 +74,7 @@ public class LoginService {
         return createLoginVO(user.getStudentId(), username, "user");
     }
 
-    private LoginVO handleRepairerLogin(String username, String password) {
+    private LoginVO handleRepairmanLogin(String username, String password) {
         // 此处将RepairerAuthPO改为RepairerAuth
         RepairerAuth repairer = repairerAuthRepository.findByUsername(username)
                 .orElseThrow(() -> new RuntimeException("维修人员不存在"));
@@ -71,7 +83,7 @@ public class LoginService {
             throw new RuntimeException("密码错误");
         }
 
-        return createLoginVO(repairer.getRepairmanId(), username, "repairer");
+        return createLoginVO(repairer.getRepairmanId(), username, "repairman");
     }
 
     private LoginVO createLoginVO(String userId, String username, String userType) {
diff --git a/src/main/java/com/campus/water/service/RegisterService.java b/src/main/java/com/campus/water/service/RegisterService.java
index 61abe87..e7de19d 100644
--- a/src/main/java/com/campus/water/service/RegisterService.java
+++ b/src/main/java/com/campus/water/service/RegisterService.java
@@ -40,8 +40,8 @@ public class RegisterService {
             case "user":
                 handleUserRegister(username, encryptedPwd, request);
                 break;
-            case "repairer":
-                handleRepairerRegister(username, encryptedPwd, request);
+            case "repairman":
+                handleRepairmanRegister(username, encryptedPwd, request);
                 break;
             default:
                 throw new RuntimeException("无效的用户类型：" + userType);
@@ -89,7 +89,7 @@ public class RegisterService {
     }
 
     // 维修人员注册逻辑保持不变
-    private void handleRepairerRegister(String username, String password, RegisterRequest request) {
+    private void handleRepairmanRegister(String username, String password, RegisterRequest request) {
         if (repairerAuthRepository.existsByUsername(username)) {
             throw new RuntimeException("维修人员用户名已存在");
         }
@@ -97,12 +97,12 @@ public class RegisterService {
             throw new RuntimeException("维修人员ID已被注册");
         }
 
-        RepairerAuth repairer = new RepairerAuth();
-        repairer.setUsername(username);
-        repairer.setPassword(password);
-        repairer.setRepairmanId(request.getRepairmanId());
-        repairer.setAccountStatus(RepairerAuth.AccountStatus.active);
+        RepairerAuth repairman = new RepairerAuth();
+        repairman.setUsername(username);
+        repairman.setPassword(password);
+        repairman.setRepairmanId(request.getRepairmanId());
+        repairman.setAccountStatus(RepairerAuth.AccountStatus.active);
 
-        repairerAuthRepository.save(repairer);
+        repairerAuthRepository.save(repairman);
     }
 }
\ No newline at end of file
diff --git a/src/main/java/com/campus/water/service/UserService.java b/src/main/java/com/campus/water/service/UserService.java
new file mode 100644
index 0000000..c2c5826
--- /dev/null
+++ b/src/main/java/com/campus/water/service/UserService.java
@@ -0,0 +1,34 @@
+package com.campus.water.service;
+
+import com.campus.water.entity.User;
+import com.campus.water.mapper.UserRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class UserService {
+
+    private final UserRepository userRepository;
+
+    /**
+     * 获取学生用户列表（支持按姓名和状态筛选）
+     */
+    public List<User> getUserList(String studentName, User.UserStatus status) {
+        if (studentName != null && status != null) {
+            // 按姓名模糊查询和状态筛选
+            return userRepository.findByStudentNameContainingAndStatus(studentName, status);
+        } else if (studentName != null) {
+            // 仅按姓名模糊查询
+            return userRepository.findByStudentNameContaining(studentName);
+        } else if (status != null) {
+            // 仅按状态筛选
+            return userRepository.findByStatus(status);
+        } else {
+            // 查询所有学生
+            return userRepository.findAll();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/app2/.gitignore b/src/main/resources/app2/.gitignore
new file mode 100644
index 0000000..a3f7a51
--- /dev/null
+++ b/src/main/resources/app2/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
diff --git a/src/main/resources/app2/.vscode/extensions.json b/src/main/resources/app2/.vscode/extensions.json
new file mode 100644
index 0000000..4c8e9ac
--- /dev/null
+++ b/src/main/resources/app2/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "vitest.explorer"
+  ]
+}
diff --git a/src/main/resources/app2/README.md b/src/main/resources/app2/README.md
new file mode 100644
index 0000000..59b0057
--- /dev/null
+++ b/src/main/resources/app2/README.md
@@ -0,0 +1,44 @@
+# app2
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
diff --git a/src/main/resources/app2/index.html b/src/main/resources/app2/index.html
new file mode 100644
index 0000000..b19040a
--- /dev/null
+++ b/src/main/resources/app2/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/src/main/resources/app2/jsconfig.json b/src/main/resources/app2/jsconfig.json
new file mode 100644
index 0000000..5a1f2d2
--- /dev/null
+++ b/src/main/resources/app2/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/src/main/resources/app2/package-lock.json b/src/main/resources/app2/package-lock.json
new file mode 100644
index 0000000..2effd2a
--- /dev/null
+++ b/src/main/resources/app2/package-lock.json
@@ -0,0 +1,4279 @@
+{
+  "name": "app2",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "app2",
+      "version": "0.0.0",
+      "dependencies": {
+        "pinia": "^3.0.4",
+        "vue": "^3.5.25",
+        "vue-router": "^4.6.3"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.2",
+        "@vue/test-utils": "^2.4.6",
+        "jsdom": "^27.2.0",
+        "vite": "^7.2.4",
+        "vite-plugin-vue-devtools": "^8.0.5",
+        "vitest": "^4.0.14"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.27",
+      "resolved": "https://registry.npmmirror.com/@acemir/cssom/-/cssom-0.9.27.tgz",
+      "integrity": "sha512-Ja8SQ/4mec5WZABC1F9XB1juJlkdHVZ4F1dftBmXagtZnbmspW+tuzd4bo35eRrc48iAEtk1yTUzBveOsa/MZA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/css-color/-/css-color-4.1.0.tgz",
+      "integrity": "sha512-9xiBAtLn4aNsa4mDnpovJvBn72tNEIACyvlqaNJ+ADemR+yeMJWnBudOi2qGDviJa7SwcDOU/TRh5dnET7qk0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.4",
+        "@csstools/css-color-parser": "^3.1.0",
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "lru-cache": "^11.2.2"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.7.6",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/dom-selector/-/dom-selector-6.7.6.tgz",
+      "integrity": "sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.4"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.5.tgz",
+      "integrity": "sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.5",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.28.0.tgz",
+      "integrity": "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-decorators": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.27.1.tgz",
+      "integrity": "sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
+      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.5.tgz",
+      "integrity": "sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.20.tgz",
+      "integrity": "sha512-8BHsjXfSciZxjmHQOuVdW2b8WLUPts9a+mfL13/PzEviufUEW2xnvQuOlKs9dRBHgRqJ53SF/DUoK9+MZk72oQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.50",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.50.tgz",
+      "integrity": "sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmmirror.com/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.2.tgz",
+      "integrity": "sha512-iHmwV3QcVGGvSC1BG5bZ4z6iwa1SOpAPWmnjOErd4Ske+lZua5K9TtAVdx0gMBClJ28DViCbSmZitjWZsWO3LA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-beta.50"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/expect/-/expect-4.0.15.tgz",
+      "integrity": "sha512-Gfyva9/GxPAWXIWjyGDli9O+waHDC0Q0jaLdFP1qPAUUfo1FEXPXUfUkp3eZA0sSq340vPycSyOlYUeM15Ft1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.15",
+        "@vitest/utils": "4.0.15",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/mocker/-/mocker-4.0.15.tgz",
+      "integrity": "sha512-CZ28GLfOEIFkvCFngN8Sfx5h+Se0zN+h4B7yOsPVCcgtiO7t5jt9xQh2E1UkFep+eb9fjyMfuC5gBypwb07fvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.15",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/pretty-format/-/pretty-format-4.0.15.tgz",
+      "integrity": "sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/runner/-/runner-4.0.15.tgz",
+      "integrity": "sha512-+A+yMY8dGixUhHmNdPUxOh0la6uVzun86vAbuMT3hIDxMrAOmn5ILBHm8ajrqHE0t8R9T1dGnde1A5DTnmi3qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.15",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/snapshot/-/snapshot-4.0.15.tgz",
+      "integrity": "sha512-A7Ob8EdFZJIBjLjeO0DZF4lqR6U7Ydi5/5LIZ0xcI+23lYlsYJAfGn8PrIWTYdZQRNnSRlzhg0zyGu37mVdy5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.15",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/spy/-/spy-4.0.15.tgz",
+      "integrity": "sha512-+EIjOJmnY6mIfdXtE/bnozKEvTC4Uczg19yeZ2vtCz5Yyb0QQ31QWVQ8hswJ3Ysx/K2EqaNsVanjr//2+P3FHw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/@vitest/utils/-/utils-4.0.15.tgz",
+      "integrity": "sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.15",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
+      "integrity": "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.5.0.tgz",
+      "integrity": "sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@vue/babel-helper-vue-transform-on": "1.5.0",
+        "@vue/babel-plugin-resolve-type": "1.5.0",
+        "@vue/shared": "^3.5.18"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.5.0.tgz",
+      "integrity": "sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.0",
+        "@vue/compiler-sfc": "^3.5.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
+      "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.25",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz",
+      "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.25",
+        "@vue/shared": "3.5.25"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz",
+      "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.25",
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/compiler-ssr": "3.5.25",
+        "@vue/shared": "3.5.25",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.25.tgz",
+      "integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/shared": "3.5.25"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/@vue/devtools-core": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-core/-/devtools-core-8.0.5.tgz",
+      "integrity": "sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.0.5",
+        "@vue/devtools-shared": "^8.0.5",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.1.5",
+        "pathe": "^2.0.3",
+        "vite-hot-client": "^2.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/@vue/devtools-kit": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
+      "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.0.5",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^2.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/@vue/devtools-shared": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
+      "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/perfect-debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
+      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.25.tgz",
+      "integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.25"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.25.tgz",
+      "integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.25",
+        "@vue/shared": "3.5.25"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.25.tgz",
+      "integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.25",
+        "@vue/runtime-core": "3.5.25",
+        "@vue/shared": "3.5.25",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.25.tgz",
+      "integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.25",
+        "@vue/shared": "3.5.25"
+      },
+      "peerDependencies": {
+        "vue": "3.5.25"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.25.tgz",
+      "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ansis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/ansis/-/ansis-4.2.0.tgz",
+      "integrity": "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.9.4.tgz",
+      "integrity": "sha512-ZCQ9GEWl73BVm8bu5Fts8nt7MHdbt5vY9bP6WGnUh+r3l8M7CgfyTlwsgCbMC66BNxPr6Xoce3j66Ms5YUQTNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001759",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
+      "integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/chai/-/chai-6.2.1.tgz",
+      "integrity": "sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-5.3.3.tgz",
+      "integrity": "sha512-OytmFH+13/QXONJcC75QNdMtKpceNk3u8ThBjyyYjkEcy/ekBwR1mMAuNvi3gdBPW3N5TlCzQ0WZw8H0lN/bDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.0.3",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.14",
+        "css-tree": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-6.0.0.tgz",
+      "integrity": "sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/default-browser": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmmirror.com/default-browser/-/default-browser-5.4.0.tgz",
+      "integrity": "sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.266",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
+      "integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/expect-type": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/expect-type/-/expect-type-1.2.2.tgz",
+      "integrity": "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-3.1.0.tgz",
+      "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmmirror.com/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "27.2.0",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-27.2.0.tgz",
+      "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@acemir/cssom": "^0.9.23",
+        "@asamuzakjp/dom-selector": "^6.7.4",
+        "cssstyle": "^5.3.3",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.2.4.tgz",
+      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmmirror.com/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.53.3.tgz",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
+        "@rollup/rollup-android-arm64": "4.53.3",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
+        "@rollup/rollup-darwin-x64": "4.53.3",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmmirror.com/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.19",
+      "resolved": "https://registry.npmmirror.com/tldts/-/tldts-7.0.19.tgz",
+      "integrity": "sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.19"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.19",
+      "resolved": "https://registry.npmmirror.com/tldts-core/-/tldts-core-7.0.19.tgz",
+      "integrity": "sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-6.0.0.tgz",
+      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.2.6.tgz",
+      "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-dev-rpc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/vite-dev-rpc/-/vite-dev-rpc-1.1.0.tgz",
+      "integrity": "sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "birpc": "^2.4.0",
+        "vite-hot-client": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-hot-client": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/vite-hot-client/-/vite-hot-client-2.1.0.tgz",
+      "integrity": "sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-inspect": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-inspect/-/vite-plugin-inspect-11.3.3.tgz",
+      "integrity": "sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansis": "^4.1.0",
+        "debug": "^4.4.1",
+        "error-stack-parser-es": "^1.0.5",
+        "ohash": "^2.0.11",
+        "open": "^10.2.0",
+        "perfect-debounce": "^2.0.0",
+        "sirv": "^3.0.1",
+        "unplugin-utils": "^0.3.0",
+        "vite-dev-rpc": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/perfect-debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
+      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite-plugin-vue-devtools": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-8.0.5.tgz",
+      "integrity": "sha512-p619BlKFOqQXJ6uDWS1vUPQzuJOD6xJTfftj57JXBGoBD/yeQCowR7pnWcr/FEX4/HVkFbreI6w2uuGBmQOh6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-core": "^8.0.5",
+        "@vue/devtools-kit": "^8.0.5",
+        "@vue/devtools-shared": "^8.0.5",
+        "sirv": "^3.0.2",
+        "vite-plugin-inspect": "^11.3.3",
+        "vite-plugin-vue-inspector": "^5.3.2"
+      },
+      "engines": {
+        "node": ">=v14.21.3"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools/node_modules/@vue/devtools-kit": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
+      "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.0.5",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^2.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools/node_modules/@vue/devtools-shared": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
+      "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools/node_modules/perfect-debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
+      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite-plugin-vue-inspector": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.3.2.tgz",
+      "integrity": "sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.0",
+        "@babel/plugin-proposal-decorators": "^7.23.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.22.15",
+        "@vue/babel-plugin-jsx": "^1.1.5",
+        "@vue/compiler-dom": "^3.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.4"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/vitest/-/vitest-4.0.15.tgz",
+      "integrity": "sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.0.15",
+        "@vitest/mocker": "4.0.15",
+        "@vitest/pretty-format": "4.0.15",
+        "@vitest/runner": "4.0.15",
+        "@vitest/snapshot": "4.0.15",
+        "@vitest/spy": "4.0.15",
+        "@vitest/utils": "4.0.15",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.15",
+        "@vitest/browser-preview": "4.0.15",
+        "@vitest/browser-webdriverio": "4.0.15",
+        "@vitest/ui": "4.0.15",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.25.tgz",
+      "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/compiler-sfc": "3.5.25",
+        "@vue/runtime-dom": "3.5.25",
+        "@vue/server-renderer": "3.5.25",
+        "@vue/shared": "3.5.25"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.3.tgz",
+      "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-8.0.0.tgz",
+      "integrity": "sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/src/main/resources/app2/package.json b/src/main/resources/app2/package.json
new file mode 100644
index 0000000..d6607da
--- /dev/null
+++ b/src/main/resources/app2/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "app2",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest"
+  },
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^27.2.0",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.0.14"
+  }
+}
diff --git a/src/main/resources/app2/public/favicon.ico b/src/main/resources/app2/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/src/main/resources/app2/public/favicon.ico differ
diff --git a/src/main/resources/app2/src/App.vue b/src/main/resources/app2/src/App.vue
new file mode 100644
index 0000000..c9ad3e4
--- /dev/null
+++ b/src/main/resources/app2/src/App.vue
@@ -0,0 +1,70 @@
+
+<script setup>
+import { RouterView } from 'vue-router'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  // 禁止页面缩放（移动端）
+  document.addEventListener('touchstart', function(event) {
+    if (event.touches.length > 1) {
+      event.preventDefault()
+    }
+  }, { passive: false })
+
+  // 禁止双击缩放
+  let lastTouchEnd = 0
+  document.addEventListener('touchend', function(event) {
+    const now = Date.now()
+    if (now - lastTouchEnd <= 300) {
+      event.preventDefault()
+    }
+    lastTouchEnd = now
+  }, false)
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="mobile-frame">
+      <RouterView />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f0f2f5;
+  padding: 20px;
+}
+
+.mobile-frame {
+  width: 375px;
+  height: 667px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #e8e8e8;
+}
+
+/* 移动端适配 */
+@media (max-width: 420px) {
+  .app-container {
+    padding: 0;
+    background: #f0f2f5;
+  }
+
+  .mobile-frame {
+    width: 100%;
+    height: 100vh;
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+  }
+}
+</style>
diff --git a/src/main/resources/app2/src/assets/base.css b/src/main/resources/app2/src/assets/base.css
new file mode 100644
index 0000000..8816868
--- /dev/null
+++ b/src/main/resources/app2/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/main/resources/app2/src/assets/logo.svg b/src/main/resources/app2/src/assets/logo.svg
new file mode 100644
index 0000000..7565660
--- /dev/null
+++ b/src/main/resources/app2/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/main/resources/app2/src/assets/main.css b/src/main/resources/app2/src/assets/main.css
new file mode 100644
index 0000000..1849fbc
--- /dev/null
+++ b/src/main/resources/app2/src/assets/main.css
@@ -0,0 +1,138 @@
+/* 更新现有的 main.css */
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+    --vt-c-white: #ffffff;
+    --vt-c-white-soft: #f8f8f8;
+    --vt-c-white-mute: #f2f2f2;
+
+    --vt-c-black: #181818;
+    --vt-c-black-soft: #222222;
+    --vt-c-black-mute: #282828;
+
+    --vt-c-indigo: #2c3e50;
+
+    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+    --vt-c-text-light-1: var(--vt-c-indigo);
+    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+    --vt-c-text-dark-1: var(--vt-c-white);
+    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+    --color-background: var(--vt-c-white);
+    --color-background-soft: var(--vt-c-white-soft);
+    --color-background-mute: var(--vt-c-white-mute);
+
+    --color-border: var(--vt-c-divider-light-2);
+    --color-border-hover: var(--vt-c-divider-light-1);
+
+    --color-heading: var(--vt-c-text-light-1);
+    --color-text: var(--vt-c-text-light-1);
+
+    --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: var(--vt-c-black);
+        --color-background-soft: var(--vt-c-black-soft);
+        --color-background-mute: var(--vt-c-black-mute);
+
+        --color-border: var(--vt-c-divider-dark-2);
+        --color-border-hover: var(--vt-c-divider-dark-1);
+
+        --color-heading: var(--vt-c-text-dark-1);
+        --color-text: var(--vt-c-text-dark-2);
+    }
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    font-weight: normal;
+}
+
+body {
+    min-height: 100vh;
+    color: var(--color-text);
+    background: var(--color-background);
+    transition:
+            color 0.5s,
+            background-color 0.5s;
+    line-height: 1.6;
+    font-family:
+            'Inter',
+            -apple-system,
+            BlinkMacSystemFont,
+            'Segoe UI',
+            Roboto,
+            Oxygen,
+            Ubuntu,
+            Cantarell,
+            'Fira Sans',
+            'Droid Sans',
+            'Helvetica Neue',
+            sans-serif;
+    font-size: 15px;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+}
+
+/* 移动端优化 */
+.no-scroll {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+/* 移动端点击效果优化 */
+@media (hover: none) and (pointer: coarse) {
+    * {
+        cursor: pointer;
+    }
+
+    input,
+    textarea,
+    select,
+    button {
+        font-size: 16px !important; /* 防止iOS缩放 */
+    }
+
+    a,
+    button {
+        -webkit-tap-highlight-color: transparent;
+    }
+}
+
+/* 修复移动端overflow-scrolling问题 */
+.element
\ No newline at end of file
diff --git a/src/main/resources/app2/src/assets/mobile.css b/src/main/resources/app2/src/assets/mobile.css
new file mode 100644
index 0000000..c20bce9
--- /dev/null
+++ b/src/main/resources/app2/src/assets/mobile.css
@@ -0,0 +1,37 @@
+/* 移动端全局样式 */
+:root {
+    --mobile-width: 375px;
+    --mobile-height: 667px;
+    --primary-color: #1156b1;
+    --secondary-color: #81d3f8;
+    --success-color: #04d919;
+    --warning-color: #ff9800;
+    --danger-color: #f44336;
+}
+
+/* 移动端基础样式 */
+#app {
+    width: 100%;
+    min-height: 100vh;
+    background: #f5f5f5;
+    overflow-x: hidden;
+}
+
+/* 移动端容器 */
+.mobile-container {
+    max-width: var(--mobile-width);
+    min-height: var(--mobile-height);
+    margin: 0 auto;
+    background: white;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+/* 安全区域适配 */
+.safe-area {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+}
\ No newline at end of file
diff --git a/src/main/resources/app2/src/components/HelloWorld.vue b/src/main/resources/app2/src/components/HelloWorld.vue
new file mode 100644
index 0000000..eff59f1
--- /dev/null
+++ b/src/main/resources/app2/src/components/HelloWorld.vue
@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
diff --git a/src/main/resources/app2/src/components/TheWelcome.vue b/src/main/resources/app2/src/components/TheWelcome.vue
new file mode 100644
index 0000000..68a970a
--- /dev/null
+++ b/src/main/resources/app2/src/components/TheWelcome.vue
@@ -0,0 +1,95 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+
+const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+    +
+    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
+      >Vue - Official</a
+    >. If you need to test your components and web pages, check out
+    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
+    and
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
+    /
+    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
+
+    <br />
+
+    More instructions are available in
+    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
+    >.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
+    (our official Discord server), or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also follow the official
+    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
+    Bluesky account or the
+    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    X account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
diff --git a/src/main/resources/app2/src/components/WelcomeItem.vue b/src/main/resources/app2/src/components/WelcomeItem.vue
new file mode 100644
index 0000000..ac366d0
--- /dev/null
+++ b/src/main/resources/app2/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main/resources/app2/src/components/__tests__/HelloWorld.spec.js b/src/main/resources/app2/src/components/__tests__/HelloWorld.spec.js
new file mode 100644
index 0000000..2533202
--- /dev/null
+++ b/src/main/resources/app2/src/components/__tests__/HelloWorld.spec.js
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+    expect(wrapper.text()).toContain('Hello Vitest')
+  })
+})
diff --git a/src/main/resources/app2/src/components/icons/IconCommunity.vue b/src/main/resources/app2/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/src/main/resources/app2/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git a/src/main/resources/app2/src/components/icons/IconDocumentation.vue b/src/main/resources/app2/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/src/main/resources/app2/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git a/src/main/resources/app2/src/components/icons/IconEcosystem.vue b/src/main/resources/app2/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/src/main/resources/app2/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git a/src/main/resources/app2/src/components/icons/IconSupport.vue b/src/main/resources/app2/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/src/main/resources/app2/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git a/src/main/resources/app2/src/components/icons/IconTooling.vue b/src/main/resources/app2/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/src/main/resources/app2/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/main/resources/app2/src/main.js b/src/main/resources/app2/src/main.js
new file mode 100644
index 0000000..e04bef7
--- /dev/null
+++ b/src/main/resources/app2/src/main.js
@@ -0,0 +1,15 @@
+import './assets/main.css'
+import './assets/mobile.css' // 添加这行
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
\ No newline at end of file
diff --git a/src/main/resources/app2/src/router/index.js b/src/main/resources/app2/src/router/index.js
new file mode 100644
index 0000000..b33adec
--- /dev/null
+++ b/src/main/resources/app2/src/router/index.js
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'StudentLoginPage',
+            component: () => import('../views/StudentLoginPage.vue')
+        },
+        {
+            path: '/home',
+            name: 'HomePage',
+            component: () => import('../views/HomePage.vue')
+        },
+        {
+            path: '/water-quality',
+            name: 'WaterQuality',
+            component: () => import('../views/WaterQualityPage.vue')
+        },
+        {
+            path: '/scan',
+            name: 'ScanPage',
+            component: () => import('../views/ScanPage.vue')
+        },
+        {
+            path: '/profile',
+            name: 'ProfilePage',
+            component: () => import('../views/ProfilePage.vue')
+        },
+        {
+            path: '/history',
+            name: 'HistoryPage',
+            component: () => import('../views/HistoryPage.vue')
+        }
+    ]
+})
+
+export default router
\ No newline at end of file
diff --git a/src/main/resources/app2/src/services/api.js b/src/main/resources/app2/src/services/api.js
new file mode 100644
index 0000000..f39f021
--- /dev/null
+++ b/src/main/resources/app2/src/services/api.js
@@ -0,0 +1,11 @@
+// src/services/api.js
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:8080', // Adjust to your backend URL
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+export default apiClient
diff --git a/src/main/resources/app2/src/services/authServices.js b/src/main/resources/app2/src/services/authServices.js
new file mode 100644
index 0000000..8174f90
--- /dev/null
+++ b/src/main/resources/app2/src/services/authServices.js
@@ -0,0 +1,58 @@
+// src/services/authServices.js
+import api from './api'
+
+export const authServices = {
+    // 通用登录接口
+    async login(loginData) {
+        try {
+            const response = await api.post('/api/common/login', loginData)
+            return response.data
+        } catch (error) {
+            throw error.response?.data || error.message
+        }
+    },
+
+    // 学生登录接口
+    async studentLogin(studentId, password) {
+        try {
+            const loginData = {
+                username: studentId,
+                password: password,
+                userType: 'user'  // 注意：后端中用户类型是"user"
+            }
+            const response = await api.post('/api/common/login', loginData)
+            return response.data
+        } catch (error) {
+            throw error.response?.data || error.message
+        }
+    },
+
+    // 修改：学生注册接口 - 使用正确的路径和字段
+    async studentRegister(registerData) {
+        try {
+            // 构建符合RegisterRequest的数据
+            const requestData = {
+                username: registerData.name,      // 用户名（学生姓名）
+                password: registerData.password,   // 密码
+                userType: 'user',                  // 固定为用户类型
+                studentId: registerData.studentId, // 学号
+                studentName: registerData.name     // 学生姓名
+                // 注意：后端RegisterRequest目前只支持这些字段
+                // 手机号、邮箱等需要扩展User实体和RegisterRequest
+            }
+
+            console.log('发送注册数据到后端:', requestData)
+            const response = await api.post('/api/common/register', requestData)
+            console.log('后端注册响应:', response.data)
+            return response.data
+        } catch (error) {
+            console.error('注册API错误:', error)
+            // 返回更详细的错误信息
+            const errorData = error.response?.data || {
+                code: 500,
+                message: error.message || '网络错误'
+            }
+            throw errorData
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/app2/src/stores/counter.js b/src/main/resources/app2/src/stores/counter.js
new file mode 100644
index 0000000..b6757ba
--- /dev/null
+++ b/src/main/resources/app2/src/stores/counter.js
@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
diff --git a/src/main/resources/app2/src/views/HistoryPage.vue b/src/main/resources/app2/src/views/HistoryPage.vue
new file mode 100644
index 0000000..4e88a75
--- /dev/null
+++ b/src/main/resources/app2/src/views/HistoryPage.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="history-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">历史记录</div>
+      <button class="back-btn" @click="goBack">‹</button>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 统计信息 -->
+      <div class="summary-info">
+        <div class="total-count">
+          共{{ historyList.length }}条记录
+        </div>
+      </div>
+
+      <!-- 历史记录列表 -->
+      <div class="history-list">
+        <!-- 今日 -->
+        <div class="date-group" v-if="todayRecords.length > 0">
+          <div class="group-title">今日</div>
+          <div class="records-container">
+            <div
+                v-for="record in todayRecords"
+                :key="record.id"
+                class="record-card"
+            >
+              <div class="record-header">
+                <div class="device-name">{{ record.deviceName }}</div>
+                <div class="record-time">{{ record.time }}</div>
+              </div>
+              <div class="record-details">
+                <div class="water-amount">{{ record.amount }}</div>
+                <div class="device-id">ID: {{ record.deviceId }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 07-20 -->
+        <div class="date-group" v-if="dateGroupedRecords['07-20']?.length > 0">
+          <div class="group-title">07-20</div>
+          <div class="records-container">
+            <div
+                v-for="record in dateGroupedRecords['07-20']"
+                :key="record.id"
+                class="record-card"
+            >
+              <div class="record-header">
+                <div class="device-name">{{ record.deviceName }}</div>
+                <div class="record-time">{{ record.time }}</div>
+              </div>
+              <div class="record-details">
+                <div class="water-amount">{{ record.amount }}</div>
+                <div class="device-id">ID: {{ record.deviceId }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 07-19 -->
+        <div class="date-group" v-if="dateGroupedRecords['07-19']?.length > 0">
+          <div class="group-title">07-19</div>
+          <div class="records-container">
+            <div
+                v-for="record in dateGroupedRecords['07-19']"
+                :key="record.id"
+                class="record-card"
+            >
+              <div class="record-header">
+                <div class="device-name">{{ record.deviceName }}</div>
+                <div class="record-time">{{ record.time }}</div>
+              </div>
+              <div class="record-details">
+                <div class="water-amount">{{ record.amount }}</div>
+                <div class="device-id">ID: {{ record.deviceId }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 07-18 -->
+        <div class="date-group" v-if="dateGroupedRecords['07-18']?.length > 0">
+          <div class="group-title">07-18</div>
+          <div class="records-container">
+            <div
+                v-for="record in dateGroupedRecords['07-18']"
+                :key="record.id"
+                class="record-card"
+            >
+              <div class="record-header">
+                <div class="device-name">{{ record.deviceName }}</div>
+                <div class="record-time">{{ record.time }}</div>
+              </div>
+              <div class="record-details">
+                <div class="water-amount">{{ record.amount }}</div>
+                <div class="device-id">ID: {{ record.deviceId }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 没有记录时显示 -->
+        <div class="empty-state" v-if="historyList.length === 0">
+          <div class="empty-icon">📊</div>
+          <div class="empty-text">暂无历史记录</div>
+          <div class="empty-hint">开始取水后会在这里显示记录</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-button" @click="goToPage('home')">
+        <div class="nav-icon">🗺️</div>
+        <div class="nav-text">地图</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('scan')">
+        <div class="nav-icon">📷</div>
+        <div class="nav-text">扫码</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-text">我的</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 历史记录数据
+const historyList = ref([
+  {
+    id: 1,
+    date: '今日',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:08',
+    amount: '200ml'
+  },
+  {
+    id: 2,
+    date: '今日',
+    deviceName: '湖南大学信息楼2F饮水机',
+    deviceId: 'B301',
+    time: '09:28',
+    amount: '200ml'
+  },
+  {
+    id: 3,
+    date: '今日',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '08:30',
+    amount: '200ml'
+  },
+  {
+    id: 4,
+    date: '07-20',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:40',
+    amount: '200ml'
+  },
+  {
+    id: 5,
+    date: '07-19',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:08',
+    amount: '200ml'
+  },
+  {
+    id: 6,
+    date: '07-19',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:08',
+    amount: '200ml'
+  },
+  {
+    id: 7,
+    date: '07-18',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:08',
+    amount: '200ml'
+  },
+  {
+    id: 8,
+    date: '07-18',
+    deviceName: '湖南大学教学楼1F饮水机',
+    deviceId: 'A201',
+    time: '12:08',
+    amount: '200ml'
+  }
+])
+
+// 计算属性：按日期分组
+const dateGroupedRecords = computed(() => {
+  const grouped = {}
+  historyList.value.forEach(record => {
+    if (record.date !== '今日') {
+      if (!grouped[record.date]) {
+        grouped[record.date] = []
+      }
+      grouped[record.date].push(record)
+    }
+  })
+  return grouped
+})
+
+// 计算属性：今日记录
+const todayRecords = computed(() => {
+  return historyList.value.filter(record => record.date === '今日')
+})
+
+// 从本地存储加载历史记录
+const loadHistoryFromStorage = () => {
+  const savedHistory = localStorage.getItem('waterHistory')
+  if (savedHistory) {
+    try {
+      const parsedHistory = JSON.parse(savedHistory)
+      // 合并本地存储的历史记录
+      if (parsedHistory && parsedHistory.length > 0) {
+        historyList.value = [...parsedHistory, ...historyList.value]
+      }
+    } catch (error) {
+      console.error('加载历史记录失败:', error)
+    }
+  }
+}
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 页面跳转
+const goToPage = (page) => {
+  switch(page) {
+    case 'home':
+      router.push('/home')
+      break
+    case 'scan':
+      router.push('/scan')
+      break
+    case 'profile':
+      router.push('/profile')
+      break
+  }
+}
+
+onMounted(() => {
+  loadHistoryFromStorage()
+})
+</script>
+
+<style scoped>
+.history-page {
+  width: 375px;
+  height: 667px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header {
+  height: 40px;
+  background: linear-gradient(135deg, #1156b1 0%, #81d3f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+.back-btn {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px 0;
+  overflow-y: auto;
+}
+
+/* 统计信息 */
+.summary-info {
+  padding: 0 16px 16px;
+}
+
+.total-count {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 历史记录列表 */
+.history-list {
+  padding: 0 16px;
+}
+
+.date-group {
+  margin-bottom: 20px;
+}
+
+.group-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-left: 8px;
+  border-left: 4px solid #1890ff;
+}
+
+.records-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.record-card {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e8e8e8;
+  transition: all 0.3s;
+}
+
+.record-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #1890ff;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.device-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  flex: 1;
+  margin-right: 12px;
+}
+
+.record-time {
+  font-size: 12px;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.record-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.water-amount {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+.device-id {
+  font-size: 12px;
+  color: #666;
+  background: #f8f9fa;
+  padding: 4px 8px;
+  border-radius: 12px;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.empty-hint {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  height: 60px;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #666;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.nav-button:hover {
+  background: #f8f9fa;
+}
+
+.nav-button.active {
+  color: #1890ff;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .history-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .main-content {
+    padding: 16px 0;
+  }
+
+  .record-card {
+    padding: 12px;
+  }
+
+  .device-name {
+    font-size: 13px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/app2/src/views/HomePage.vue b/src/main/resources/app2/src/views/HomePage.vue
new file mode 100644
index 0000000..8de16b2
--- /dev/null
+++ b/src/main/resources/app2/src/views/HomePage.vue
@@ -0,0 +1,1348 @@
+<template>
+  <div class="home-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">首页</div>
+    </div>
+
+    <!-- 地图容器 -->
+    <div class="map-container" @click="hideAllPopups">
+      <!-- 地图模拟背景 -->
+      <div class="map-background">
+        <!-- 地图网格线 -->
+        <div class="map-grid">
+          <!-- 横向网格线 -->
+          <div class="grid-line horizontal" v-for="i in 8" :key="'h' + i"
+               :style="{ top: `${i * 12}%` }"></div>
+          <!-- 纵向网格线 -->
+          <div class="grid-line vertical" v-for="i in 6" :key="'v' + i"
+               :style="{ left: `${i * 16}%` }"></div>
+        </div>
+
+        <!-- 校园建筑标记 -->
+        <div class="campus-building building-1" :style="{ top: '30%', left: '30%' }">
+          <div class="building-icon">🏫</div>
+          <div class="building-name">教学楼</div>
+        </div>
+
+        <div class="campus-building building-2" :style="{ top: '60%', left: '60%' }">
+          <div class="building-icon">🏢</div>
+          <div class="building-name">学生公寓</div>
+        </div>
+
+        <div class="campus-building building-3" :style="{ top: '45%', left: '20%' }">
+          <div class="building-icon">📚</div>
+          <div class="building-name">图书馆</div>
+        </div>
+
+        <div class="campus-building building-4" :style="{ top: '70%', left: '40%' }">
+          <div class="building-icon">🍽️</div>
+          <div class="building-name">食堂</div>
+        </div>
+
+        <div class="campus-building building-5" :style="{ top: '20%', left: '50%' }">
+          <div class="building-icon">⚽</div>
+          <div class="building-name">体育馆</div>
+        </div>
+
+        <div class="campus-building building-6" :style="{ top: '40%', left: '70%' }">
+          <div class="building-icon">🔬</div>
+          <div class="building-name">实验室</div>
+        </div>
+
+        <!-- 道路 -->
+        <div class="road road-1" style="top: 40%; left: 20%; width: 60%; height: 6px;"></div>
+        <div class="road road-2" style="top: 60%; left: 30%; width: 6px; height: 40%;"></div>
+        <div class="road road-3" style="top: 30%; left: 50%; width: 6px; height: 40%;"></div>
+
+        <!-- 草地/绿化带 -->
+        <div class="green-area area-1" style="top: 25%; left: 10%; width: 15%; height: 20%;"></div>
+        <div class="green-area area-2" style="top: 65%; left: 75%; width: 15%; height: 20%;"></div>
+
+        <!-- 饮水机标记1（教学楼） -->
+        <div
+            class="water-marker marker-1"
+            :class="{ active: selectedMarker === 'A201' }"
+            @click.stop="showMarkerInfo('A201')"
+            style="top: 35%; left: 45%;"
+        >
+          <div class="marker-content">
+            <!-- SVG水滴形状 -->
+            <svg class="marker-svg" viewBox="0 0 22 32">
+              <path
+                  d="M22 11.2C22 19.2 15.4 24 11 32C6.6 24 0 19.2 0 11.2C0 7.04 2.2 0 11 0C19.8 0 22 7.04 22 11.2Z"
+                  fill="#04d919"
+                  stroke="white"
+                  stroke-width="2"
+              />
+            </svg>
+            <div class="marker-pulse"></div>
+          </div>
+          <div class="marker-label">A201</div>
+        </div>
+
+        <!-- 饮水机标记2（学生公寓） -->
+        <div
+            class="water-marker marker-2"
+            :class="{ active: selectedMarker === 'B201' }"
+            @click.stop="showMarkerInfo('B201')"
+            style="top: 65%; left: 55%;"
+        >
+          <div class="marker-content">
+            <svg class="marker-svg" viewBox="0 0 22 32">
+              <path
+                  d="M22 11.2C22 19.2 15.4 24 11 32C6.6 24 0 19.2 0 11.2C0 7.04 2.2 0 11 0C19.8 0 22 7.04 22 11.2Z"
+                  fill="#04d919"
+                  stroke="white"
+                  stroke-width="2"
+              />
+            </svg>
+            <div class="marker-pulse"></div>
+          </div>
+          <div class="marker-label">B201</div>
+        </div>
+
+        <!-- 饮水机标记3（图书馆） -->
+        <div
+            class="water-marker marker-3"
+            :class="{ active: selectedMarker === 'C101' }"
+            @click.stop="showMarkerInfo('C101')"
+            style="top: 50%; left: 25%;"
+        >
+          <div class="marker-content">
+            <svg class="marker-svg" viewBox="0 0 22 32">
+              <path
+                  d="M22 11.2C22 19.2 15.4 24 11 32C6.6 24 0 19.2 0 11.2C0 7.04 2.2 0 11 0C19.8 0 22 7.04 22 11.2Z"
+                  fill="#aaaaaa"
+                  stroke="white"
+                  stroke-width="2"
+              />
+            </svg>
+            <div class="marker-pulse"></div>
+          </div>
+          <div class="marker-label">C101</div>
+        </div>
+
+        <!-- 当前位置标记 -->
+        <div class="current-location-marker" style="top: 50%; left: 50%;">
+          <div class="location-icon">📍</div>
+          <div class="location-label">我的位置</div>
+        </div>
+      </div>
+
+      <!-- 地图控制按钮 -->
+      <div class="map-controls">
+        <button class="control-btn location-btn" @click="centerMap">
+          <span class="control-icon">📍</span>
+          <span class="control-text">定位</span>
+        </button>
+        <div class="zoom-controls">
+          <button class="control-btn zoom-in-btn" @click="zoomIn">
+            <span class="control-icon">+</span>
+          </button>
+          <button class="control-btn zoom-out-btn" @click="zoomOut">
+            <span class="control-icon">-</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 设备信息弹窗1（教学楼饮水机） -->
+      <div v-if="showDevicePopup && currentMarker === 'A201'" class="device-popup popup-1">
+        <div class="popup-content">
+          <!-- 标题栏 -->
+          <div class="popup-title">
+            <h3>{{ markers.A201.name }}</h3>
+            <button class="close-btn" @click="hidePopup">✕</button>
+          </div>
+
+          <!-- 设备信息 -->
+          <div class="device-info">
+            <div class="info-row">
+              <span class="info-label">{{ markers.A201.distance }} | ID: {{ markers.A201.id }} | 状态：</span>
+              <span class="status online">{{ markers.A201.statusText }}</span>
+            </div>
+
+            <div class="info-row">
+              <span class="info-label">当前水质：</span>
+              <span class="quality good">{{ markers.A201.quality }}</span>
+            </div>
+
+            <!-- TDS水质数据 -->
+            <div class="tds-data-section">
+              <div class="section-title">水质TDS数据：</div>
+              <div class="tds-grid">
+                <div class="tds-item">
+                  <div class="tds-type">自来水</div>
+                  <div class="tds-value">{{ markers.A201.waterQuality.tapWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">纯净水</div>
+                  <div class="tds-value">{{ markers.A201.waterQuality.pureWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">矿化水</div>
+                  <div class="tds-value">{{ markers.A201.waterQuality.mineralWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="action-buttons">
+            <button class="action-btn primary" @click="showNavigationPopup">
+              导航
+            </button>
+            <button class="action-btn secondary" @click="showWaterQuality">
+              查看水质详细
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设备信息弹窗2（学生公寓饮水机） -->
+      <div v-if="showDevicePopup && currentMarker === 'B201'" class="device-popup popup-2">
+        <div class="popup-content">
+          <div class="popup-title">
+            <h3>{{ markers.B201.name }}</h3>
+            <button class="close-btn" @click="hidePopup">✕</button>
+          </div>
+
+          <div class="device-info">
+            <div class="info-row">
+              <span class="info-label">{{ markers.B201.distance }} | ID: {{ markers.B201.id }} | 状态：</span>
+              <span class="status online">{{ markers.B201.statusText }}</span>
+            </div>
+
+            <div class="info-row">
+              <span class="info-label">当前水质：</span>
+              <span class="quality good">{{ markers.B201.quality }}</span>
+            </div>
+
+            <!-- TDS水质数据 -->
+            <div class="tds-data-section">
+              <div class="section-title">水质TDS数据：</div>
+              <div class="tds-grid">
+                <div class="tds-item">
+                  <div class="tds-type">自来水</div>
+                  <div class="tds-value">{{ markers.B201.waterQuality.tapWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">纯净水</div>
+                  <div class="tds-value">{{ markers.B201.waterQuality.pureWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">矿化水</div>
+                  <div class="tds-value">{{ markers.B201.waterQuality.mineralWater }}</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="action-buttons">
+            <button class="action-btn primary" @click="showNavigationPopup">
+              导航
+            </button>
+            <button class="action-btn secondary" @click="showWaterQuality">
+              查看水质详细
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设备信息弹窗3（图书馆饮水机） -->
+      <div v-if="showDevicePopup && currentMarker === 'C101'" class="device-popup popup-3">
+        <div class="popup-content">
+          <div class="popup-title">
+            <h3>{{ markers.C101.name }}</h3>
+            <button class="close-btn" @click="hidePopup">✕</button>
+          </div>
+
+          <div class="device-info">
+            <div class="info-row">
+              <span class="info-label">{{ markers.C101.distance }} | ID: {{ markers.C101.id }} | 状态：</span>
+              <span class="status offline">{{ markers.C101.statusText }}</span>
+            </div>
+
+            <div class="info-row">
+              <span class="info-label">当前水质：</span>
+              <span class="quality unknown">{{ markers.C101.quality }}</span>
+            </div>
+
+            <!-- TDS水质数据（离线设备显示-） -->
+            <div class="tds-data-section">
+              <div class="section-title">水质TDS数据：</div>
+              <div class="tds-grid">
+                <div class="tds-item">
+                  <div class="tds-type">自来水</div>
+                  <div class="tds-value">-</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">纯净水</div>
+                  <div class="tds-value">-</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+                <div class="tds-item">
+                  <div class="tds-type">矿化水</div>
+                  <div class="tds-value">-</div>
+                  <div class="tds-unit">mg/L</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="action-buttons">
+            <button class="action-btn primary disabled" disabled>
+              导航
+            </button>
+            <button class="action-btn secondary disabled" disabled>
+              查看水质详细
+            </button>
+          </div>
+          <div class="offline-notice">
+            设备离线中，暂时无法使用
+          </div>
+        </div>
+      </div>
+
+      <!-- 水质详细弹窗 -->
+      <div v-if="showWaterQualityPopup" class="water-quality-popup">
+        <div class="popup-content">
+          <div class="popup-title">
+            <h3>水质详细数据</h3>
+            <button class="close-btn" @click="showWaterQualityPopup = false">✕</button>
+          </div>
+
+          <!-- 水质数据卡片 -->
+          <div class="quality-cards">
+            <div class="quality-card">
+              <div class="card-title">自来水TDS</div>
+              <div class="card-value">285</div>
+              <div class="card-unit">mg/L</div>
+              <div class="card-trend up">偏高</div>
+            </div>
+
+            <div class="quality-card">
+              <div class="card-title">纯净水TDS</div>
+              <div class="card-value">13</div>
+              <div class="card-unit">mg/L</div>
+              <div class="card-trend good">优良</div>
+            </div>
+
+            <div class="quality-card">
+              <div class="card-title">矿化水TDS</div>
+              <div class="card-value">87</div>
+              <div class="card-unit">mg/L</div>
+              <div class="card-trend good">优良</div>
+            </div>
+          </div>
+
+          <!-- 水质说明 -->
+          <div class="quality-explanation">
+            <div class="explanation-title">水质说明：</div>
+            <div class="explanation-content">
+              <div class="explanation-item">
+                <span class="explanation-label">自来水TDS：</span>
+                <span class="explanation-value">285 mg/L</span>
+                <span class="explanation-status up">(偏高)</span>
+              </div>
+              <div class="explanation-item">
+                <span class="explanation-label">纯净水TDS：</span>
+                <span class="explanation-value">13 mg/L</span>
+                <span class="explanation-status good">(优良)</span>
+              </div>
+              <div class="explanation-item">
+                <span class="explanation-label">矿化水TDS：</span>
+                <span class="explanation-value">87 mg/L</span>
+                <span class="explanation-status good">(优良)</span>
+              </div>
+            </div>
+            <div class="explanation-text">
+              TDS值越低，水质越纯净。纯净水TDS&lt;50为优良，矿化水TDS 50-150为适宜范围。
+            </div>
+          </div>
+
+          <button class="confirm-btn" @click="showWaterQualityPopup = false">
+            确定
+          </button>
+        </div>
+      </div>
+
+      <!-- 导航选择弹窗 -->
+      <div v-if="showNavigationSelectPopup" class="navigation-popup">
+        <div class="popup-content">
+          <div class="popup-title">
+            <h3>选择导航应用</h3>
+            <button class="close-btn" @click="showNavigationSelectPopup = false">✕</button>
+          </div>
+
+          <div class="nav-options">
+            <button class="nav-option" @click="openMap('gaode')">
+              <div class="nav-icon">🗺️</div>
+              <div class="nav-name">高德地图</div>
+              <div class="nav-desc">精确导航</div>
+            </button>
+
+            <button class="nav-option" @click="openMap('baidu')">
+              <div class="nav-icon">📍</div>
+              <div class="nav-name">百度地图</div>
+              <div class="nav-desc">实时路况</div>
+            </button>
+
+            <button class="nav-option" @click="openMap('tencent')">
+              <div class="nav-icon">🗺️</div>
+              <div class="nav-name">腾讯地图</div>
+              <div class="nav-desc">室内导航</div>
+            </button>
+          </div>
+
+          <button class="cancel-btn" @click="showNavigationSelectPopup = false">
+            取消
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-button active" @click="goToPage('home')">
+        <div class="nav-icon">🗺️</div>
+        <div class="nav-text">地图</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('scan')">
+        <div class="nav-icon">📷</div>
+        <div class="nav-text">扫码</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-text">我的</div>
+      </div>
+    </div>
+
+    <!-- 全局遮罩层 -->
+    <div v-if="showDevicePopup || showWaterQualityPopup || showNavigationSelectPopup"
+         class="popup-overlay"
+         @click="hideAllPopups">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+// 标记点数据
+const markers = reactive({
+  A201: {
+    name: '湖南大学教学楼1F饮水机',
+    distance: '128m',
+    id: 'A201',
+    status: 'online',
+    statusText: '在线',
+    quality: '良好',
+    waterQuality: {
+      tapWater: '285',
+      pureWater: '13',
+      mineralWater: '87'
+    }
+  },
+  B201: {
+    name: '天马学生公寓1F饮水机',
+    distance: '156m',
+    id: 'B201',
+    status: 'online',
+    statusText: '在线',
+    quality: '良好',
+    waterQuality: {
+      tapWater: '290',
+      pureWater: '15',
+      mineralWater: '85'
+    }
+  },
+  C101: {
+    name: '图书馆2F饮水机',
+    distance: '320m',
+    id: 'C101',
+    status: 'offline',
+    statusText: '离线',
+    quality: '未知',
+    waterQuality: {
+      tapWater: '-',
+      pureWater: '-',
+      mineralWater: '-'
+    }
+  }
+})
+
+// 状态
+const showDevicePopup = ref(false)
+const showWaterQualityPopup = ref(false)
+const showNavigationSelectPopup = ref(false)
+const currentMarker = ref('')
+const selectedMarker = ref('')
+
+// 显示标记点信息
+const showMarkerInfo = (markerId) => {
+  currentMarker.value = markerId
+  selectedMarker.value = markerId
+  showDevicePopup.value = true
+}
+
+// 隐藏弹窗
+const hidePopup = () => {
+  showDevicePopup.value = false
+  currentMarker.value = ''
+  selectedMarker.value = ''
+}
+
+// 隐藏所有弹窗
+const hideAllPopups = () => {
+  hidePopup()
+  showWaterQualityPopup.value = false
+  showNavigationSelectPopup.value = false
+}
+
+// 显示水质详细
+const showWaterQuality = () => {
+  showWaterQualityPopup.value = true
+  showDevicePopup.value = false
+}
+
+// 显示导航选择
+const showNavigationPopup = () => {
+  showNavigationSelectPopup.value = true
+  showDevicePopup.value = false
+}
+
+// 打开地图应用
+const openMap = (mapType) => {
+  const mapNames = {
+    gaode: '高德地图',
+    baidu: '百度地图',
+    tencent: '腾讯地图'
+  }
+
+  alert(`将在${mapNames[mapType]}中打开导航`)
+  showNavigationSelectPopup.value = false
+
+  // 这里应该实际调用地图应用的URL Scheme
+  // 例如：window.location.href = `amapuri://route/...`
+}
+
+// 地图控制
+const centerMap = () => {
+  alert('定位到当前位置')
+}
+
+const zoomIn = () => {
+  alert('放大地图')
+}
+
+const zoomOut = () => {
+  alert('缩小地图')
+}
+
+// 页面跳转
+const goToPage = (page) => {
+  switch(page) {
+    case 'home':
+      // 已经在首页
+      break
+    case 'scan':
+      router.push('/scan')
+      break
+    case 'profile':
+      router.push('/profile')
+      break
+  }
+}
+</script>
+
+<style scoped>
+.home-page {
+  width: 375px;
+  height: 667px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header {
+  height: 40px;
+  background: linear-gradient(135deg, #1156b1 0%, #81d3f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 20;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+/* 地图容器 */
+.map-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: #e8f4fc;
+}
+
+.map-background {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: linear-gradient(135deg, #a8d8ff 0%, #e3f2fd 100%);
+  overflow: hidden;
+}
+
+/* 地图网格 */
+.map-grid {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+}
+
+.grid-line {
+  position: absolute;
+  background: rgba(144, 202, 249, 0.5);
+}
+
+.grid-line.horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.grid-line.vertical {
+  height: 100%;
+  width: 1px;
+}
+
+/* 校园建筑 */
+.campus-building {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 5;
+}
+
+.building-icon {
+  font-size: 24px;
+  margin-bottom: 4px;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.building-name {
+  font-size: 10px;
+  color: #1976d2;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 道路 */
+.road {
+  position: absolute;
+  background: #78909c;
+  border-radius: 3px;
+  z-index: 2;
+}
+
+/* 绿化带 */
+.green-area {
+  position: absolute;
+  background: linear-gradient(135deg, #a5d6a7 0%, #c8e6c9 100%);
+  border-radius: 8px;
+  z-index: 1;
+  opacity: 0.4;
+}
+
+/* 水滴形标记 */
+.water-marker {
+  position: absolute;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.water-marker:hover,
+.water-marker.active {
+  transform: translate(-50%, -50%) scale(1.2);
+  z-index: 20;
+}
+
+.marker-content {
+  position: relative;
+  width: 24px;
+  height: 32px;
+}
+
+.marker-svg {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(1px 1px 2.5px rgba(0, 0, 0, 0.7));
+}
+
+.marker-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.water-marker.marker-1 .marker-pulse,
+.water-marker.marker-2 .marker-pulse {
+  background: rgba(4, 217, 25, 0.3);
+}
+
+.water-marker.marker-3 .marker-pulse {
+  background: rgba(170, 170, 170, 0.3);
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.5); opacity: 0.2; }
+  100% { transform: scale(1); opacity: 0.5; }
+}
+
+.marker-label {
+  position: absolute;
+  top: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: bold;
+  color: white;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 2px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+  display: none;
+}
+
+.water-marker:hover .marker-label {
+  display: block;
+}
+
+/* 当前位置标记 */
+.current-location-marker {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 15;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); }
+  50% { transform: translate(-50%, -50%) scale(1.1); }
+}
+
+.location-icon {
+  font-size: 32px;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+.location-label {
+  font-size: 10px;
+  color: #1976d2;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-top: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 地图控制按钮 */
+.map-controls {
+  position: absolute;
+  bottom: 100px;
+  right: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 15;
+}
+
+.control-btn {
+  width: 44px;
+  height: 44px;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 16px;
+  color: #333;
+}
+
+.control-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  background: #f8f9fa;
+}
+
+.zoom-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: white;
+  border-radius: 22px;
+  padding: 8px 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.zoom-in-btn,
+.zoom-out-btn {
+  width: 36px;
+  height: 36px;
+  align-self: center;
+}
+
+.location-btn .control-icon {
+  font-size: 20px;
+}
+
+.control-text {
+  font-size: 10px;
+  margin-top: 2px;
+  color: #666;
+}
+
+/* 弹窗样式 */
+.device-popup,
+.water-quality-popup,
+.navigation-popup {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+  z-index: 100;
+  width: 340px;
+  animation: slideUp 0.3s ease;
+  border: 1px solid #e0e0e0;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
+}
+
+.popup-content {
+  padding: 20px;
+}
+
+.popup-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.popup-title h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  flex: 1;
+}
+
+.close-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  transition: all 0.3s;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.close-btn:hover {
+  background: #e8e8e8;
+  color: #333;
+}
+
+/* 设备信息 */
+.device-info {
+  margin-bottom: 20px;
+}
+
+.info-row {
+  font-size: 14px;
+  margin-bottom: 12px;
+  color: #333;
+  display: flex;
+  align-items: center;
+}
+
+.info-label {
+  color: #666;
+}
+
+.status {
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+.status.online {
+  color: #04d919;
+}
+
+.status.offline {
+  color: #aaaaaa;
+}
+
+.quality {
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+.quality.good {
+  color: #04d919;
+}
+
+.quality.unknown {
+  color: #ff9800;
+}
+
+/* TDS水质数据区域 */
+.tds-data-section {
+  margin-top: 16px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  border: 1px solid #e8e8e8;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.tds-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.tds-item {
+  text-align: center;
+  padding: 12px 8px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  transition: all 0.2s;
+}
+
+.tds-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tds-type {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.tds-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.tds-unit {
+  font-size: 11px;
+  color: #999;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.action-btn {
+  padding: 14px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.action-btn.secondary {
+  background: #f0f5ff;
+  color: #1890ff;
+  border: 1px solid #d6e4ff;
+}
+
+.action-btn.disabled {
+  background: #f5f5f5;
+  color: #999;
+  border: 1px solid #e8e8e8;
+  cursor: not-allowed;
+}
+
+.action-btn:hover:not(.disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.action-btn.primary:hover:not(.disabled) {
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+.offline-notice {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #fff8e1;
+  border: 1px solid #ffecb3;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #ff9800;
+  text-align: center;
+}
+
+/* 水质详细弹窗 */
+.quality-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.quality-card {
+  background: #f8f9fa;
+  border-radius: 10px;
+  padding: 16px 12px;
+  text-align: center;
+  border: 1px solid #e8e8e8;
+  transition: all 0.3s;
+}
+
+.quality-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.card-unit {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 6px;
+}
+
+.card-trend {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+.card-trend.good {
+  background: rgba(4, 217, 25, 0.1);
+  color: #04d919;
+}
+
+.card-trend.up {
+  background: rgba(255, 152, 0, 0.1);
+  color: #ff9800;
+}
+
+.quality-explanation {
+  background: #f0f5ff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+  border-left: 4px solid #1890ff;
+}
+
+.explanation-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.explanation-content {
+  margin-bottom: 12px;
+}
+
+.explanation-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.explanation-label {
+  color: #666;
+  min-width: 80px;
+}
+
+.explanation-value {
+  color: #333;
+  font-weight: 500;
+  margin: 0 8px;
+}
+
+.explanation-status {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.explanation-status.good {
+  background: rgba(4, 217, 25, 0.1);
+  color: #04d919;
+}
+
+.explanation-status.up {
+  background: rgba(255, 152, 0, 0.1);
+  color: #ff9800;
+}
+
+.explanation-text {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+  padding-top: 8px;
+  border-top: 1px solid rgba(24, 144, 255, 0.2);
+}
+
+.confirm-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.confirm-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+/* 导航选择弹窗 */
+.nav-options {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.nav-option {
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  padding: 16px 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+  text-align: center;
+}
+
+.nav-option:hover {
+  border-color: #1890ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: #f8faff;
+}
+
+.nav-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.nav-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.nav-desc {
+  font-size: 10px;
+  color: #999;
+}
+
+.cancel-btn {
+  width: 100%;
+  padding: 14px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.cancel-btn:hover {
+  background: #e8e8e8;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  height: 60px;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  z-index: 10;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #666;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.nav-button.active {
+  color: #1890ff;
+}
+
+.nav-button:hover {
+  background: #f8f9fa;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 遮罩层 */
+.popup-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .home-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .device-popup,
+  .water-quality-popup,
+  .navigation-popup {
+    width: calc(100% - 32px);
+    bottom: 70px;
+  }
+
+  .nav-options {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .tds-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/app2/src/views/ProfilePage.vue b/src/main/resources/app2/src/views/ProfilePage.vue
new file mode 100644
index 0000000..38222f6
--- /dev/null
+++ b/src/main/resources/app2/src/views/ProfilePage.vue
@@ -0,0 +1,681 @@
+<template>
+  <div class="profile-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">个人主页</div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 用户信息卡片 -->
+      <div class="user-card">
+        <div class="avatar-section">
+          <div class="avatar-circle">
+            <div class="avatar-text">{{ userInfo.lastName }}</div>
+          </div>
+          <div class="user-name">{{ userInfo.fullName }}</div>
+        </div>
+
+        <div class="divider"></div>
+
+        <!-- 用户详细信息 -->
+        <div class="user-details">
+          <div class="detail-item">
+            <span class="detail-label">学号：</span>
+            <span class="detail-value">{{ userInfo.studentId }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">学院：</span>
+            <span class="detail-value">{{ userInfo.college }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">班级：</span>
+            <span class="detail-value">{{ userInfo.class }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据统计卡片 -->
+      <div class="stats-section">
+        <div class="stats-cards">
+          <div class="stat-card">
+            <div class="stat-value">{{ userStats.days }}</div>
+            <div class="stat-label">累计用水天数</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">{{ userStats.todayWater }}</div>
+            <div class="stat-label">今日饮水量</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 时间切换 -->
+      <div class="time-switch">
+        <div
+            class="time-option"
+            :class="{ active: selectedPeriod === 'week' }"
+            @click="selectPeriod('week')"
+        >
+          本周
+        </div>
+        <div
+            class="time-option"
+            :class="{ active: selectedPeriod === 'month' }"
+            @click="selectPeriod('month')"
+        >
+          本月
+        </div>
+      </div>
+
+      <!-- 饮水数据图表 -->
+      <div class="chart-section">
+        <div class="chart-title">饮水统计图表</div>
+        <div class="chart-container">
+          <!-- 柱状图容器 -->
+          <div class="chart-placeholder" v-if="!showChart">
+            <div class="placeholder-text">数据加载中...</div>
+          </div>
+
+          <!-- 模拟柱状图 -->
+          <div class="mock-chart" v-else>
+            <div class="chart-axis">
+              <!-- Y轴 -->
+              <div class="y-axis">
+                <div class="y-label">800ml</div>
+                <div class="y-label">600ml</div>
+                <div class="y-label">400ml</div>
+                <div class="y-label">200ml</div>
+                <div class="y-label">0ml</div>
+              </div>
+
+              <!-- 柱状图 -->
+              <div class="bars-container">
+                <div
+                    v-for="(item, index) in chartData"
+                    :key="index"
+                    class="bar-item"
+                >
+                  <div
+                      class="bar"
+                      :style="{ height: item.value + 'px' }"
+                      :class="{ active: item.active }"
+                  >
+                    <div class="bar-value">{{ item.value }}ml</div>
+                  </div>
+                  <div class="bar-label">{{ item.label }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 功能按钮 -->
+      <div class="action-section">
+        <button class="action-btn history-btn" @click="goToHistory">
+          <span class="btn-icon">📊</span>
+          <span class="btn-text">查看历史饮水记录</span>
+          <span class="btn-arrow">›</span>
+        </button>
+
+        <button class="action-btn setting-btn" @click="goToSettings">
+          <span class="btn-icon">⚙️</span>
+          <span class="btn-text">设置</span>
+          <span class="btn-arrow">›</span>
+        </button>
+
+        <button class="action-btn logout-btn" @click="handleLogout">
+          <span class="btn-icon">🚪</span>
+          <span class="btn-text">退出登录</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-button" @click="goToPage('home')">
+        <div class="nav-icon">🗺️</div>
+        <div class="nav-text">地图</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('scan')">
+        <div class="nav-icon">📷</div>
+        <div class="nav-text">扫码</div>
+      </div>
+
+      <div class="nav-button active" @click="goToPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-text">我的</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 用户信息
+const userInfo = reactive({
+  lastName: '张',
+  fullName: '张三',
+  studentId: '20212601212',
+  college: '信息科学与工程学院',
+  class: '软件2301班'
+})
+
+// 用户统计
+const userStats = reactive({
+  days: '26天',
+  todayWater: '500ml'
+})
+
+// 图表数据
+const selectedPeriod = ref('week')
+const showChart = ref(false)
+const chartData = ref([])
+
+// 初始化图表数据
+const initChartData = () => {
+  if (selectedPeriod.value === 'week') {
+    // 本周数据
+    chartData.value = [
+      { label: '周一', value: 450, active: false },
+      { label: '周二', value: 620, active: false },
+      { label: '周三', value: 380, active: false },
+      { label: '周四', value: 540, active: true },
+      { label: '周五', value: 280, active: false },
+      { label: '周六', value: 720, active: false },
+      { label: '周日', value: 400, active: false }
+    ]
+  } else {
+    // 本月数据（简化版，只显示4周）
+    chartData.value = [
+      { label: '第1周', value: 1800, active: false },
+      { label: '第2周', value: 2200, active: false },
+      { label: '第3周', value: 2500, active: true },
+      { label: '第4周', value: 800, active: false }
+    ]
+  }
+}
+
+// 选择时间段
+const selectPeriod = (period) => {
+  selectedPeriod.value = period
+  initChartData()
+}
+
+// 跳转到历史记录
+const goToHistory = () => {
+  router.push('/history')
+}
+
+// 跳转到设置
+const goToSettings = () => {
+  alert('设置页面（待开发）')
+}
+
+// 退出登录
+const handleLogout = () => {
+  if (confirm('确定要退出登录吗？')) {
+    // 清除登录状态
+    localStorage.removeItem('studentId')
+    localStorage.removeItem('studentName')
+
+    // 跳转到登录页
+    router.push('/')
+  }
+}
+
+// 页面跳转
+const goToPage = (page) => {
+  switch(page) {
+    case 'home':
+      router.push('/home')
+      break
+    case 'scan':
+      router.push('/scan')
+      break
+    case 'profile':
+      // 已经在个人中心
+      break
+  }
+}
+
+onMounted(() => {
+  // 模拟加载用户信息（实际应该从API获取）
+  const savedStudentId = localStorage.getItem('studentId')
+  const savedStudentName = localStorage.getItem('studentName')
+
+  if (savedStudentId) {
+    userInfo.studentId = savedStudentId
+  }
+
+  if (savedStudentName) {
+    userInfo.fullName = savedStudentName
+    userInfo.lastName = savedStudentName.charAt(0)
+  }
+
+  // 初始化图表数据
+  initChartData()
+
+  // 模拟图表加载
+  setTimeout(() => {
+    showChart.value = true
+  }, 500)
+})
+</script>
+
+<style scoped>
+.profile-page {
+  width: 375px;
+  height: 667px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header {
+  height: 40px;
+  background: linear-gradient(135deg, #1156b1 0%, #81d3f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+
+/* 用户信息卡片 */
+.user-card {
+  background: white;
+  border-radius: 16px;
+  padding: 24px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+}
+
+.avatar-section {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.avatar-circle {
+  width: 70px;
+  height: 70px;
+  background: linear-gradient(135deg, #409eff, #66b1ff);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 12px;
+  border: 3px solid #f2f2f2;
+}
+
+.avatar-text {
+  font-size: 28px;
+  font-weight: 600;
+  color: white;
+}
+
+.user-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* 分割线 */
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
+  margin: 20px 0;
+}
+
+/* 用户详细信息 */
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #666;
+  min-width: 60px;
+}
+
+.detail-value {
+  color: #333;
+  font-weight: 500;
+}
+
+/* 数据统计卡片 */
+.stats-section {
+  margin-bottom: 20px;
+}
+
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px 16px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e8e8e8;
+  transition: all 0.3s;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 时间切换 */
+.time-switch {
+  display: flex;
+  background: white;
+  border-radius: 25px;
+  padding: 4px;
+  margin-bottom: 20px;
+  border: 1px solid #e8e8e8;
+}
+
+.time-option {
+  flex: 1;
+  text-align: center;
+  padding: 10px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  border-radius: 21px;
+  transition: all 0.3s;
+}
+
+.time-option.active {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  font-weight: 500;
+}
+
+/* 图表区域 */
+.chart-section {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+}
+
+.chart-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-left: 4px;
+  border-left: 4px solid #1890ff;
+}
+
+.chart-container {
+  min-height: 200px;
+  position: relative;
+}
+
+.chart-placeholder {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px dashed #e8e8e8;
+}
+
+.placeholder-text {
+  color: #999;
+  font-size: 14px;
+}
+
+/* 模拟柱状图 */
+.mock-chart {
+  height: 200px;
+  position: relative;
+}
+
+.chart-axis {
+  display: flex;
+  height: 100%;
+  padding-left: 40px;
+  position: relative;
+}
+
+.y-axis {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  width: 40px;
+}
+
+.y-label {
+  font-size: 10px;
+  color: #999;
+  transform: translateY(50%);
+}
+
+.bars-container {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 100%;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.bar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 30px;
+}
+
+.bar {
+  width: 20px;
+  background: linear-gradient(to top, #409eff, #66b1ff);
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  transition: height 0.5s ease;
+  margin-bottom: 4px;
+}
+
+.bar.active {
+  background: linear-gradient(to top, #ff6b6b, #ff8e8e);
+}
+
+.bar-value {
+  position: absolute;
+  top: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: #666;
+  white-space: nowrap;
+}
+
+.bar-label {
+  font-size: 10px;
+  color: #666;
+  margin-top: 4px;
+}
+
+/* 功能按钮区域 */
+.action-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.action-btn {
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.btn-icon {
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.btn-text {
+  flex: 1;
+  text-align: left;
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.btn-arrow {
+  color: #999;
+  font-size: 18px;
+}
+
+.history-btn:hover {
+  border-color: #409eff;
+  background: #f0f5ff;
+}
+
+.setting-btn:hover {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.logout-btn:hover {
+  border-color: #f56c6c;
+  background: #fef0f0;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  height: 60px;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #666;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.nav-button:hover {
+  background: #f8f9fa;
+}
+
+.nav-button.active {
+  color: #1890ff;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .profile-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .main-content {
+    padding: 16px 12px;
+  }
+
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .user-card {
+    padding: 20px 16px;
+  }
+
+  .bars-container {
+    gap: 4px;
+  }
+
+  .bar-item {
+    width: 25px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/app2/src/views/ScanPage.vue b/src/main/resources/app2/src/views/ScanPage.vue
new file mode 100644
index 0000000..4b84de0
--- /dev/null
+++ b/src/main/resources/app2/src/views/ScanPage.vue
@@ -0,0 +1,821 @@
+<template>
+  <div class="scan-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">扫码取水</div>
+      <button class="back-btn" @click="goBack">‹</button>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 扫描区域 -->
+      <div class="scan-section" v-if="!deviceInfo">
+        <div class="scan-area">
+          <!-- 扫描框 -->
+          <div class="scan-frame">
+            <div class="scan-lines">
+              <div class="scan-line"></div>
+            </div>
+            <div class="scan-corners">
+              <div class="corner top-left"></div>
+              <div class="corner top-right"></div>
+              <div class="corner bottom-left"></div>
+              <div class="corner bottom-right"></div>
+            </div>
+          </div>
+
+          <div class="scan-instruction">
+            请扫描设备二维码
+          </div>
+
+          <div class="scan-hint">
+            将二维码放入框内，即可自动扫描
+          </div>
+        </div>
+
+        <!-- 手动输入选项 -->
+        <div class="manual-input" @click="showManualInput">
+          <span class="manual-icon">🔢</span>
+          <span class="manual-text">手动输入设备ID</span>
+        </div>
+      </div>
+
+      <!-- 设备信息区域（扫描后显示） -->
+      <div class="device-section" v-else>
+        <div class="device-card">
+          <div class="device-header">
+            <div class="device-icon">🚰</div>
+            <div class="device-info">
+              <div class="device-name">{{ deviceInfo.name }}</div>
+              <div class="device-id">ID: {{ deviceInfo.id }}</div>
+            </div>
+            <div class="device-status" :class="deviceInfo.status">
+              {{ deviceInfo.statusText }}
+            </div>
+          </div>
+
+          <div class="divider"></div>
+
+          <!-- 取水量选择 -->
+          <div class="water-amount-section">
+            <div class="section-title">选择取水量</div>
+            <div class="amount-options">
+              <div
+                  v-for="amount in waterAmounts"
+                  :key="amount.value"
+                  class="amount-option"
+                  :class="{ selected: selectedAmount === amount.value }"
+                  @click="selectAmount(amount.value)"
+              >
+                <div class="amount-value">{{ amount.value }}ml</div>
+                <div class="amount-price">{{ amount.price }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="action-buttons">
+            <button class="action-btn primary" @click="confirmWater" :disabled="!selectedAmount">
+              确认取水
+            </button>
+            <button class="action-btn secondary" @click="viewWaterQuality">
+              查看水质
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-button" @click="goToPage('home')">
+        <div class="nav-icon">🗺️</div>
+        <div class="nav-text">地图</div>
+      </div>
+
+      <div class="nav-button active" @click="goToPage('scan')">
+        <div class="nav-icon">📷</div>
+        <div class="nav-text">扫码</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-text">我的</div>
+      </div>
+    </div>
+
+    <!-- 手动输入弹窗 -->
+    <div v-if="showManualDialog" class="dialog-overlay">
+      <div class="dialog-content">
+        <div class="dialog-header">
+          <h3>手动输入设备ID</h3>
+          <button class="close-btn" @click="closeManualDialog">✕</button>
+        </div>
+        <div class="dialog-body">
+          <input
+              type="text"
+              v-model="manualDeviceId"
+              placeholder="请输入设备ID（如：A201）"
+              class="device-input"
+              @keyup.enter="submitManualInput"
+          />
+          <div class="input-hint">可在设备上找到二维码下方的ID</div>
+        </div>
+        <div class="dialog-footer">
+          <button class="dialog-btn secondary" @click="closeManualDialog">
+            取消
+          </button>
+          <button class="dialog-btn primary" @click="submitManualInput">
+            确定
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 状态
+const deviceInfo = ref(null)
+const showManualDialog = ref(false)
+const manualDeviceId = ref('')
+const selectedAmount = ref(null)
+
+// 取水量选项
+const waterAmounts = [
+  { value: 150, price: '免费' },
+  { value: 200, price: '免费' },
+  { value: 250, price: '免费' }
+]
+
+// 模拟的设备数据
+const mockDevices = {
+  'A201': {
+    id: 'A201',
+    name: '湖南大学教学楼1F饮水机',
+    status: 'online',
+    statusText: '在线'
+  },
+  'B201': {
+    id: 'B201',
+    name: '天马学生公寓1F饮水机',
+    status: 'online',
+    statusText: '在线'
+  },
+  'C101': {
+    id: 'C101',
+    name: '图书馆2F饮水机',
+    status: 'offline',
+    statusText: '离线'
+  }
+}
+
+// 模拟扫码（实际应使用摄像头API）
+const simulateScan = () => {
+  // 模拟扫描到设备A201
+  setTimeout(() => {
+    deviceInfo.value = mockDevices['A201']
+  }, 1000)
+}
+
+onMounted(() => {
+  // 可以在这里初始化摄像头扫描
+  // 暂时模拟扫码
+  simulateScan()
+})
+
+// 选择取水量
+const selectAmount = (amount) => {
+  selectedAmount.value = amount
+}
+
+// 确认取水
+const confirmWater = () => {
+  if (!selectedAmount.value) {
+    alert('请选择取水量')
+    return
+  }
+
+  alert(`开始取水：${selectedAmount.value}ml`)
+  // 这里应该调用API开始取水
+}
+
+// 查看水质
+const viewWaterQuality = () => {
+  if (deviceInfo.value) {
+    router.push({
+      path: '/water-quality',
+      query: { deviceId: deviceInfo.value.id }
+    })
+  }
+}
+
+// 显示手动输入
+const showManualInput = () => {
+  showManualDialog.value = true
+}
+
+// 关闭手动输入
+const closeManualDialog = () => {
+  showManualDialog.value = false
+  manualDeviceId.value = ''
+}
+
+// 提交手动输入
+const submitManualInput = () => {
+  if (!manualDeviceId.value.trim()) {
+    alert('请输入设备ID')
+    return
+  }
+
+  const device = mockDevices[manualDeviceId.value.trim()]
+  if (device) {
+    deviceInfo.value = device
+    closeManualDialog()
+  } else {
+    alert('设备ID不存在，请检查后重新输入')
+  }
+}
+
+// 返回上一页
+const goBack = () => {
+  if (deviceInfo.value) {
+    // 如果在设备信息页面，返回扫描页面
+    deviceInfo.value = null
+    selectedAmount.value = null
+  } else {
+    // 如果在扫描页面，返回首页
+    router.push('/home')
+  }
+}
+
+// 页面跳转
+const goToPage = (page) => {
+  switch(page) {
+    case 'home':
+      router.push('/home')
+      break
+    case 'scan':
+      // 已经在扫码页面
+      break
+    case 'profile':
+      router.push('/profile')
+      break
+  }
+}
+</script>
+
+<style scoped>
+.scan-page {
+  width: 375px;
+  height: 667px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header {
+  height: 40px;
+  background: linear-gradient(135deg, #1156b1 0%, #81d3f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+.back-btn {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+/* 扫描区域 */
+.scan-section {
+  text-align: center;
+}
+
+.scan-area {
+  background: white;
+  border-radius: 12px;
+  padding: 30px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 扫描框 */
+.scan-frame {
+  width: 250px;
+  height: 250px;
+  margin: 0 auto 20px;
+  position: relative;
+  border: 2px solid rgba(24, 144, 255, 0.3);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+}
+
+/* 扫描线动画 */
+.scan-lines {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #1890ff, transparent);
+  top: 20%;
+  animation: scanLine 2s infinite linear;
+}
+
+@keyframes scanLine {
+  0% {
+    top: 20%;
+  }
+  50% {
+    top: 80%;
+  }
+  100% {
+    top: 20%;
+  }
+}
+
+/* 扫描框四角 */
+.scan-corners {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #1890ff;
+}
+
+.corner.top-left {
+  top: -3px;
+  left: -3px;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 6px 0 0 0;
+}
+
+.corner.top-right {
+  top: -3px;
+  right: -3px;
+  border-left: none;
+  border-bottom: none;
+  border-radius: 0 6px 0 0;
+}
+
+.corner.bottom-left {
+  bottom: -3px;
+  left: -3px;
+  border-right: none;
+  border-top: none;
+  border-radius: 0 0 0 6px;
+}
+
+.corner.bottom-right {
+  bottom: -3px;
+  right: -3px;
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 6px 0;
+}
+
+.scan-instruction {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.scan-hint {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 手动输入 */
+.manual-input {
+  background: white;
+  border: 1px dashed #1890ff;
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.manual-input:hover {
+  background: #f0f5ff;
+  transform: translateY(-1px);
+}
+
+.manual-icon {
+  font-size: 18px;
+}
+
+.manual-text {
+  font-size: 14px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 设备信息卡片 */
+.device-section {
+  padding: 10px 0;
+}
+
+.device-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.device-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.device-icon {
+  font-size: 32px;
+}
+
+.device-info {
+  flex: 1;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.device-id {
+  font-size: 14px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.device-status {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 12px;
+}
+
+.device-status.online {
+  background: rgba(4, 217, 25, 0.1);
+  color: #04d919;
+}
+
+.device-status.offline {
+  background: rgba(170, 170, 170, 0.1);
+  color: #aaaaaa;
+}
+
+/* 分割线 */
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
+  margin: 20px 0;
+}
+
+/* 取水量选择 */
+.water-amount-section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-left: 4px;
+  border-left: 4px solid #1890ff;
+}
+
+.amount-options {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.amount-option {
+  background: #f8f9fa;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 16px 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.amount-option:hover {
+  transform: translateY(-2px);
+  border-color: #1890ff;
+}
+
+.amount-option.selected {
+  background: #f0f5ff;
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+}
+
+.amount-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.amount-price {
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.action-btn {
+  padding: 14px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.action-btn.secondary {
+  background: #f0f5ff;
+  color: #1890ff;
+  border: 1px solid #d6e4ff;
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.action-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  height: 60px;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #666;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.nav-button:hover {
+  background: #f8f9fa;
+}
+
+.nav-button.active {
+  color: #1890ff;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 手动输入弹窗 */
+.dialog-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.dialog-content {
+  background: white;
+  border-radius: 16px;
+  width: 320px;
+  max-width: 90%;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.device-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.device-input:focus {
+  outline: none;
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.input-hint {
+  font-size: 12px;
+  color: #666;
+  text-align: left;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px 20px;
+}
+
+.dialog-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.dialog-btn.primary {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.dialog-btn.secondary {
+  background: #f5f5f5;
+  color: #666;
+  border: 1px solid #e8e8e8;
+}
+
+.dialog-btn:hover {
+  transform: translateY(-1px);
+}
+
+.dialog-btn.primary:hover {
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .scan-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .main-content {
+    padding: 16px;
+  }
+
+  .scan-frame {
+    width: 200px;
+    height: 200px;
+  }
+
+  .amount-options {
+    grid-template-columns: 1fr;
+  }
+
+  .action-buttons {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/app2/src/views/StudentLoginPage.vue b/src/main/resources/app2/src/views/StudentLoginPage.vue
new file mode 100644
index 0000000..f146811
--- /dev/null
+++ b/src/main/resources/app2/src/views/StudentLoginPage.vue
@@ -0,0 +1,745 @@
+
+<template>
+  <div class="student-login-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">学生服务平台</div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 登录表单 -->
+      <div class="login-form" v-if="!showRegister">
+        <div class="welcome-text">
+          <h2>欢迎回来</h2>
+          <p>请登录您的账户</p>
+        </div>
+
+        <div class="form-group">
+          <label for="studentId">学号</label>
+          <input
+              type="text"
+              id="studentId"
+              v-model="loginForm.studentId"
+              placeholder="请输入学号"
+              @keyup.enter="handleLogin"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">密码</label>
+          <div class="password-input">
+            <input
+                :type="showPassword ? 'text' : 'password'"
+                id="password"
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                @keyup.enter="handleLogin"
+            />
+            <button
+                type="button"
+                class="password-toggle"
+                @click="showPassword = !showPassword"
+            >
+              <span v-if="showPassword">隐藏</span>
+              <span v-else>显示</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="form-options">
+          <label class="remember-me">
+            <input type="checkbox" v-model="loginForm.rememberMe" />
+            <span>记住我</span>
+          </label>
+          <button class="forgot-password" @click="handleForgotPassword">
+            忘记密码?
+          </button>
+        </div>
+
+        <button class="login-btn primary" @click="handleLogin" :disabled="loading">
+          <span v-if="loading">登录中...</span>
+          <span v-else>登录</span>
+        </button>
+
+        <div class="register-prompt">
+          还没有账户？
+          <button class="register-link" @click="showRegister = true">
+            立即注册
+          </button>
+        </div>
+      </div>
+
+      <!-- 注册表单 -->
+      <div class="register-form" v-else>
+        <div class="welcome-text">
+          <h2>创建账户</h2>
+          <p>注册学生账户</p>
+        </div>
+
+        <div class="form-group">
+          <label for="regStudentId">学号</label>
+          <input
+              type="text"
+              id="regStudentId"
+              v-model="registerForm.studentId"
+              placeholder="请输入学号"
+              :class="{ 'has-error': errors.studentId }"
+          />
+          <div v-if="errors.studentId" class="error-message">
+            {{ errors.studentId }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="regName">姓名</label>
+          <input
+              type="text"
+              id="regName"
+              v-model="registerForm.name"
+              placeholder="请输入真实姓名"
+              :class="{ 'has-error': errors.name }"
+          />
+          <div v-if="errors.name" class="error-message">
+            {{ errors.name }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="regPhone">手机号</label>
+          <input
+              type="tel"
+              id="regPhone"
+              v-model="registerForm.phone"
+              placeholder="请输入手机号"
+              :class="{ 'has-error': errors.phone }"
+          />
+          <div v-if="errors.phone" class="error-message">
+            {{ errors.phone }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="regPassword">密码</label>
+          <div class="password-input">
+            <input
+                :type="showRegPassword ? 'text' : 'password'"
+                id="regPassword"
+                v-model="registerForm.password"
+                placeholder="请输入密码（6-20位）"
+                :class="{ 'has-error': errors.password }"
+            />
+            <button
+                type="button"
+                class="password-toggle"
+                @click="showRegPassword = !showRegPassword"
+            >
+              <span v-if="showRegPassword">隐藏</span>
+              <span v-else>显示</span>
+            </button>
+          </div>
+          <div v-if="errors.password" class="error-message">
+            {{ errors.password }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="regConfirmPassword">确认密码</label>
+          <div class="password-input">
+            <input
+                :type="showConfirmPassword ? 'text' : 'password'"
+                id="regConfirmPassword"
+                v-model="registerForm.confirmPassword"
+                placeholder="请再次输入密码"
+                :class="{ 'has-error': errors.confirmPassword }"
+            />
+            <button
+                type="button"
+                class="password-toggle"
+                @click="showConfirmPassword = !showConfirmPassword"
+            >
+              <span v-if="showConfirmPassword">隐藏</span>
+              <span v-else>显示</span>
+            </button>
+          </div>
+          <div v-if="errors.confirmPassword" class="error-message">
+            {{ errors.confirmPassword }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="regEmail">邮箱（选填）</label>
+          <input
+              type="email"
+              id="regEmail"
+              v-model="registerForm.email"
+              placeholder="请输入邮箱"
+              :class="{ 'has-error': errors.email }"
+          />
+          <div v-if="errors.email" class="error-message">
+            {{ errors.email }}
+          </div>
+        </div>
+
+        <div class="agreement">
+          <label>
+            <input type="checkbox" v-model="registerForm.agreed" />
+            <span>我已阅读并同意</span>
+            <button class="agreement-link" @click="showAgreement">
+              《用户协议》
+            </button>
+            和
+            <button class="agreement-link" @click="showPrivacy">
+              《隐私政策》
+            </button>
+          </label>
+          <div v-if="errors.agreement" class="error-message">
+            {{ errors.agreement }}
+          </div>
+        </div>
+
+        <div class="action-buttons">
+          <button class="register-btn primary" @click="handleRegister" :disabled="loading">
+            <span v-if="loading">注册中...</span>
+            <span v-else>注册</span>
+          </button>
+          <button class="register-btn secondary" @click="showRegister = false">
+            返回登录
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部信息 -->
+    <div class="footer">
+      <!-- 这里只保留空白，没有文字内容 -->
+    </div>
+  </div>
+</template>
+
+<!-- 只修改 <script> 部分，<template> 和 <style> 保持不变 -->
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { authServices } from '@/services/authServices'  // 引入认证服务
+
+const router = useRouter()
+
+// 登录/注册切换
+const showRegister = ref(false)
+
+// 登录表单数据
+const loginForm = reactive({
+  studentId: '',
+  password: '',
+  rememberMe: false
+})
+
+// 注册表单数据
+const registerForm = reactive({
+  studentId: '',
+  name: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  email: '',
+  agreed: false
+})
+
+// 错误信息
+const errors = reactive({
+  studentId: '',
+  name: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  email: '',
+  agreement: ''
+})
+
+// 状态
+const loading = ref(false)
+const showPassword = ref(false)
+const showRegPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+// 表单验证规则
+const validateLogin = () => {
+  if (!loginForm.studentId.trim()) {
+    alert('请输入学号')
+    return false
+  }
+  if (!loginForm.password) {
+    alert('请输入密码')
+    return false
+  }
+  return true
+}
+
+const validateRegister = () => {
+  let isValid = true
+  Object.keys(errors).forEach(key => errors[key] = '')
+
+  if (!registerForm.studentId.trim()) {
+    errors.studentId = '请输入学号'
+    isValid = false
+  }
+
+  if (!registerForm.name.trim()) {
+    errors.name = '请输入姓名'
+    isValid = false
+  }
+
+  if (!registerForm.phone.trim()) {
+    errors.phone = '请输入手机号'
+    isValid = false
+  }
+
+  if (!registerForm.password) {
+    errors.password = '请输入密码'
+    isValid = false
+  } else if (registerForm.password.length < 6) {
+    errors.password = '密码长度至少6位'
+    isValid = false
+  }
+
+  if (registerForm.password !== registerForm.confirmPassword) {
+    errors.confirmPassword = '两次输入的密码不一致'
+    isValid = false
+  }
+
+  if (!registerForm.agreed) {
+    errors.agreement = '请阅读并同意用户协议和隐私政策'
+    isValid = false
+  }
+
+  return isValid
+}
+
+// 真实的登录处理
+const handleLogin = async () => {
+  if (!validateLogin()) return
+
+  loading.value = true
+
+  try {
+    console.log('开始学生登录:', loginForm.studentId)
+
+    // 调用后端登录接口
+    const result = await authServices.studentLogin(
+        loginForm.studentId,
+        loginForm.password
+    )
+
+    console.log('登录响应:', result)
+
+    if (result.code === 200) {
+      // 登录成功
+      const loginData = result.data
+
+      // 保存用户信息到本地存储
+      localStorage.setItem('token', loginData.token)
+      localStorage.setItem('userId', loginData.userId)
+      localStorage.setItem('username', loginData.username)
+      localStorage.setItem('userType', loginData.userType)
+      localStorage.setItem('studentId', loginForm.studentId)
+
+      // 如果选择了记住我，保存登录信息
+      if (loginForm.rememberMe) {
+        localStorage.setItem('rememberedStudentId', loginForm.studentId)
+      } else {
+        localStorage.removeItem('rememberedStudentId')
+      }
+
+      alert('登录成功！')
+
+      // 跳转到首页
+      router.push('/home')
+    } else {
+      // 登录失败
+      alert('登录失败: ' + (result.message || '未知错误'))
+    }
+  } catch (error) {
+    console.error('登录过程异常:', error)
+
+    // 处理错误信息
+    if (error.message && error.message.includes('Network Error')) {
+      alert('网络连接失败，请检查网络或服务器状态')
+    } else if (error.message && error.message.includes('timeout')) {
+      alert('请求超时，请稍后重试')
+    } else if (error.code === 500) {
+      alert('服务器内部错误，请联系管理员')
+    } else {
+      alert('登录失败: ' + (error.message || '未知错误'))
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+
+// 注册处理
+// 在 <script setup> 部分修改 handleRegister 函数
+const handleRegister = async () => {
+  if (!validateRegister()) return
+
+  loading.value = true
+
+  try {
+    // 构建注册数据（匹配后端RegisterRequest结构）
+    const registerData = {
+      studentId: registerForm.studentId.trim(),
+      name: registerForm.name.trim(),
+      password: registerForm.password,
+      // 注意：后端RegisterRequest目前不支持phone和email字段
+      // 如果需要这些字段，需要扩展后端的RegisterRequest和User实体
+    }
+
+    console.log('前端注册数据:', registerData)
+
+    // 调用注册接口
+    const result = await authServices.studentRegister(registerData)
+
+    console.log('注册完整响应:', result)
+
+    // 根据后端ResultVO格式处理响应
+    if (result && result.code === 200) {
+      // 注册成功
+      alert('注册成功！请使用您的学号和密码登录')
+      showRegister.value = false
+
+      // 清空注册表单
+      Object.keys(registerForm).forEach(key => {
+        if (key !== 'agreed') {
+          registerForm[key] = ''
+        }
+      })
+      registerForm.agreed = false
+
+      // 清空错误信息
+      Object.keys(errors).forEach(key => errors[key] = '')
+    } else {
+      // 注册失败，显示后端返回的错误信息
+      const errorMsg = result?.message || '注册失败，请稍后重试'
+      alert('注册失败: ' + errorMsg)
+    }
+  } catch (error) {
+    console.error('注册过程异常:', error)
+
+    // 处理错误信息
+    let errorMessage = '注册失败，请稍后重试'
+
+    if (error.code === 400) {
+      errorMessage = error.message || '请求参数错误，请检查填写的信息'
+    } else if (error.code === 409) {
+      errorMessage = error.message || '用户已存在'
+    } else if (error.message) {
+      // 如果是对象，提取message字段
+      if (typeof error.message === 'object' && error.message.message) {
+        errorMessage = error.message.message
+      } else if (typeof error.message === 'string') {
+        errorMessage = error.message
+      }
+    }
+
+    alert('注册失败: ' + errorMessage)
+  } finally {
+    loading.value = false
+  }
+}
+// 其他辅助函数保持不变
+const handleForgotPassword = () => {
+  alert('请联系管理员重置密码：admin@example.com')
+}
+
+const showAgreement = () => {
+  alert('用户协议内容...')
+}
+
+const showPrivacy = () => {
+  alert('隐私政策内容...')
+}
+
+// 页面加载时检查是否有记住的学号
+const initRememberedUser = () => {
+  const rememberedStudentId = localStorage.getItem('rememberedStudentId')
+  if (rememberedStudentId) {
+    loginForm.studentId = rememberedStudentId
+    loginForm.rememberMe = true
+  }
+}
+
+// 初始化
+initRememberedUser()
+</script>
+
+<style scoped>
+.student-login-page {
+  width: 375px;
+  height: 667px;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-y: auto;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  padding: 16px;
+  color: white;
+  text-align: center;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 24px 16px;
+  overflow-y: auto;
+}
+
+/* 欢迎文本 */
+.welcome-text {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.welcome-text h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.welcome-text p {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 表单组 */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s;
+  background: white;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.form-group input.has-error {
+  border-color: #ff4d4f;
+}
+
+.form-group input::placeholder {
+  color: #999;
+}
+
+/* 密码输入框 */
+.password-input {
+  position: relative;
+}
+
+.password-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #1890ff;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px;
+}
+
+/* 错误消息 */
+.error-message {
+  color: #ff4d4f;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+/* 表单选项 */
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #666;
+  cursor: pointer;
+}
+
+.remember-me input {
+  width: 16px;
+  height: 16px;
+}
+
+.forgot-password {
+  background: none;
+  border: none;
+  color: #1890ff;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* 登录/注册按钮 */
+.login-btn,
+.register-btn {
+  width: 100%;
+  padding: 14px;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 16px;
+}
+
+.login-btn.primary,
+.register-btn.primary {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.login-btn.secondary,
+.register-btn.secondary {
+  background: white;
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+.login-btn:disabled,
+.register-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.login-btn:hover:not(:disabled),
+.register-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+/* 注册提示 */
+.register-prompt {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  margin-top: 24px;
+}
+
+.register-link {
+  background: none;
+  border: none;
+  color: #1890ff;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  font-weight: 500;
+}
+
+/* 协议同意 */
+.agreement {
+  margin: 24px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.agreement label {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.agreement input {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.agreement-link {
+  background: none;
+  border: none;
+  color: #1890ff;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* 注册按钮组 */
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 底部信息 - 保持布局但无内容 */
+.footer {
+  padding: 8px;
+  text-align: center;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .student-login-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .main-content {
+    padding: 20px 12px;
+  }
+
+  .welcome-text {
+    margin-bottom: 24px;
+  }
+
+  .welcome-text h2 {
+    font-size: 22px;
+  }
+
+  .login-btn,
+  .register-btn {
+    padding: 12px;
+  }
+
+  .footer {
+    padding: 4px;
+  }
+}
+</style>
diff --git a/src/main/resources/app2/src/views/WaterQualityPage.vue b/src/main/resources/app2/src/views/WaterQualityPage.vue
new file mode 100644
index 0000000..d5bad32
--- /dev/null
+++ b/src/main/resources/app2/src/views/WaterQualityPage.vue
@@ -0,0 +1,535 @@
+<template>
+  <div class="water-quality-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">水质详情</div>
+      <button class="back-btn" @click="goBack">‹</button>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 设备信息 -->
+      <div class="device-info-section">
+        <h2 class="device-name">{{ deviceInfo.name }}</h2>
+        <div class="device-details">
+          <span class="distance">{{ deviceInfo.distance }}</span>
+          <span class="separator">|</span>
+          <span class="device-id">ID: {{ deviceInfo.id }}</span>
+          <span class="separator">|</span>
+          <span class="device-status" :class="deviceInfo.status">
+            {{ deviceInfo.statusText }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 水质检测标题 -->
+      <div class="section-title">
+        <span>TDS水质检测</span>
+      </div>
+
+      <!-- TDS水质数据卡片 -->
+      <div class="quality-cards">
+        <div class="quality-card tap-water">
+          <div class="card-title">自来水TDS</div>
+          <div class="card-value">{{ deviceInfo.waterQuality.tapWater }}</div>
+          <div class="card-unit">mg/L</div>
+        </div>
+
+        <div class="quality-card pure-water">
+          <div class="card-title">纯净水TDS</div>
+          <div class="card-value">{{ deviceInfo.waterQuality.pureWater }}</div>
+          <div class="card-unit">mg/L</div>
+        </div>
+
+        <div class="quality-card mineral-water">
+          <div class="card-title">矿化水TDS</div>
+          <div class="card-value">{{ deviceInfo.waterQuality.mineralWater }}</div>
+          <div class="card-unit">mg/L</div>
+        </div>
+      </div>
+
+      <!-- 滤芯状态标题 -->
+      <div class="section-title">
+        <span>滤芯状态</span>
+      </div>
+
+      <!-- 滤芯状态 -->
+      <div class="filter-status-section">
+        <!-- 前置滤芯组 -->
+        <div class="filter-item">
+          <div class="filter-info">
+            <div class="filter-name">前置滤芯组</div>
+            <div class="filter-life">{{ deviceInfo.filters.preFilter.life }}</div>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: deviceInfo.filters.preFilter.percentage + '%' }"></div>
+          </div>
+        </div>
+
+        <!-- 纯水滤芯组 -->
+        <div class="filter-item">
+          <div class="filter-info">
+            <div class="filter-name">纯水滤芯组</div>
+            <div class="filter-life">{{ deviceInfo.filters.pureFilter.life }}</div>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: deviceInfo.filters.pureFilter.percentage + '%' }"></div>
+          </div>
+        </div>
+
+        <!-- 矿化滤芯组 -->
+        <div class="filter-item">
+          <div class="filter-info">
+            <div class="filter-name">矿化滤芯组</div>
+            <div class="filter-life">{{ deviceInfo.filters.mineralFilter.life }}</div>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: deviceInfo.filters.mineralFilter.percentage + '%' }"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 水质说明 -->
+      <div class="quality-explanation">
+        <div class="explanation-title">水质说明：</div>
+        <div class="explanation-content">
+          <div class="explanation-item">
+            <span class="explanation-label">自来水TDS：</span>
+            <span class="explanation-value">{{ deviceInfo.waterQuality.tapWater }} mg/L</span>
+            <span class="explanation-status up">(偏高)</span>
+          </div>
+          <div class="explanation-item">
+            <span class="explanation-label">纯净水TDS：</span>
+            <span class="explanation-value">{{ deviceInfo.waterQuality.pureWater }} mg/L</span>
+            <span class="explanation-status good">(优良)</span>
+          </div>
+          <div class="explanation-item">
+            <span class="explanation-label">矿化水TDS：</span>
+            <span class="explanation-value">{{ deviceInfo.waterQuality.mineralWater }} mg/L</span>
+            <span class="explanation-status good">(优良)</span>
+          </div>
+        </div>
+        <div class="explanation-text">
+          TDS值越低，水质越纯净。纯净水TDS&lt;50为优良，矿化水TDS 50-150为适宜范围。
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-button" @click="goToPage('home')">
+        <div class="nav-icon">🗺️</div>
+        <div class="nav-text">地图</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('scan')">
+        <div class="nav-icon">📷</div>
+        <div class="nav-text">扫码</div>
+      </div>
+
+      <div class="nav-button" @click="goToPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-text">我的</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 设备信息
+const deviceInfo = reactive({
+  name: '湖南大学教学楼1F饮水机',
+  distance: '128m',
+  id: 'A201',
+  status: 'online',
+  statusText: '在线',
+  waterQuality: {
+    tapWater: '285',
+    pureWater: '13',
+    mineralWater: '87'
+  },
+  filters: {
+    preFilter: {
+      name: '前置滤芯组',
+      life: '100%',
+      percentage: 100
+    },
+    pureFilter: {
+      name: '纯水滤芯组',
+      life: '80%',
+      percentage: 80
+    },
+    mineralFilter: {
+      name: '矿化滤芯组',
+      life: '70%',
+      percentage: 70
+    }
+  }
+})
+
+// 模拟从路由参数获取设备ID
+onMounted(() => {
+  // 这里可以获取路由参数来加载对应的设备信息
+  const deviceId = router.currentRoute.value.query.deviceId || 'A201'
+  // 实际应用中应该根据deviceId加载数据
+  console.log('加载设备数据:', deviceId)
+})
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 页面跳转
+const goToPage = (page) => {
+  switch(page) {
+    case 'home':
+      router.push('/home')
+      break
+    case 'scan':
+      router.push('/scan')
+      break
+    case 'profile':
+      router.push('/profile')
+      break
+  }
+}
+</script>
+
+<style scoped>
+.water-quality-page {
+  width: 375px;
+  height: 667px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.header {
+  height: 40px;
+  background: linear-gradient(135deg, #1156b1 0%, #81d3f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+.back-btn {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+
+/* 设备信息 */
+.device-info-section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.device-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.distance {
+  color: #666;
+}
+
+.separator {
+  color: #ccc;
+}
+
+.device-id {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.device-status {
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.device-status.online {
+  background: rgba(4, 217, 25, 0.1);
+  color: #04d919;
+}
+
+.device-status.offline {
+  background: rgba(170, 170, 170, 0.1);
+  color: #aaaaaa;
+}
+
+/* 分区标题 */
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin: 20px 0 16px;
+  padding-left: 4px;
+  border-left: 4px solid #1890ff;
+}
+
+/* TDS水质卡片 */
+.quality-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.quality-card {
+  background: white;
+  border-radius: 10px;
+  padding: 16px 12px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e8e8e8;
+  transition: all 0.3s;
+}
+
+.quality-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.card-unit {
+  font-size: 11px;
+  color: #999;
+}
+
+/* 滤芯状态 */
+.filter-status-section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.filter-item {
+  margin-bottom: 20px;
+}
+
+.filter-item:last-child {
+  margin-bottom: 0;
+}
+
+.filter-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.filter-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.filter-life {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1890ff, #52c41a);
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+/* 水质说明 */
+.quality-explanation {
+  background: #f0f5ff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 20px;
+  border-left: 4px solid #1890ff;
+}
+
+.explanation-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.explanation-content {
+  margin-bottom: 12px;
+}
+
+.explanation-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.explanation-label {
+  color: #666;
+  min-width: 80px;
+}
+
+.explanation-value {
+  color: #333;
+  font-weight: 500;
+  margin: 0 8px;
+}
+
+.explanation-status {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.explanation-status.good {
+  background: rgba(4, 217, 25, 0.1);
+  color: #04d919;
+}
+
+.explanation-status.up {
+  background: rgba(255, 152, 0, 0.1);
+  color: #ff9800;
+}
+
+.explanation-text {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+  padding-top: 8px;
+  border-top: 1px solid rgba(24, 144, 255, 0.2);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  height: 60px;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #666;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.nav-button:hover {
+  background: #f8f9fa;
+}
+
+.nav-button.active {
+  color: #1890ff;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 响应式调整 */
+@media (max-width: 420px) {
+  .water-quality-page {
+    width: 100%;
+    height: 100vh;
+  }
+
+  .quality-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .main-content {
+    padding: 16px 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/app2/vite.config.js b/src/main/resources/app2/vite.config.js
new file mode 100644
index 0000000..4217010
--- /dev/null
+++ b/src/main/resources/app2/vite.config.js
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})
diff --git a/src/main/resources/app2/vitest.config.js b/src/main/resources/app2/vitest.config.js
new file mode 100644
index 0000000..c328717
--- /dev/null
+++ b/src/main/resources/app2/vitest.config.js
@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+)
diff --git a/src/main/resources/web/.env b/src/main/resources/web/.env
new file mode 100644
index 0000000..3a6da93
--- /dev/null
+++ b/src/main/resources/web/.env
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:8080
+VITE_APP_ORIGIN=http://localhost:5173
\ No newline at end of file
diff --git a/src/main/resources/web/src/api/auth.ts b/src/main/resources/web/src/api/auth.ts
index 640729c..dc8857c 100644
--- a/src/main/resources/web/src/api/auth.ts
+++ b/src/main/resources/web/src/api/auth.ts
@@ -1,58 +1,61 @@
-import type { LoginRequest, LoginVO } from './types/auth'
+// 替换原文件内容
+import type { LoginRequest, LoginResponse, LoginVO } from './types/auth'
 
 // 真实的登录API调用
-export const realLoginApi = async (data: LoginRequest): Promise<LoginVO> => {
-  const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'
-  
-  console.log('🌐 调用登录接口:', `${API_BASE_URL}/api/common/login`)
-  console.log('📤 请求数据:', data)
-  
-  try {
-    const response = await fetch(`${API_BASE_URL}/api/common/login`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    })
-    
-    console.log('📥 响应状态:', response.status, response.statusText)
-    
-    if (!response.ok) {
-      throw new Error(`网络请求失败: ${response.status} ${response.statusText}`)
+export const realLoginApi = async (data: LoginRequest): Promise<LoginResponse> => {
+    const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'
+
+    console.log('🌐 调用登录接口:', `${API_BASE_URL}/api/common/login`)
+    console.log('📤 请求数据:', data)
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/common/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        })
+
+        console.log('📥 响应状态:', response.status, response.statusText)
+
+        if (!response.ok) {
+            const errorText = await response.text()
+            console.error('❌ 响应内容:', errorText)
+            throw new Error(`网络请求失败: ${response.status} ${response.statusText}`)
+        }
+
+        const result: LoginResponse = await response.json()
+        console.log('✅ 登录响应:', result)
+
+        return result
+
+    } catch (error: any) {
+        console.error('❌ 登录接口调用失败:', error)
+        throw new Error(`登录失败: ${error.message}`)
     }
-    
-    const result: LoginVO = await response.json()
-    console.log('✅ 登录响应:', result)
-    
-    return result
-    
-  } catch (error: any) {
-    console.error('❌ 登录接口调用失败:', error)
-    throw new Error(`登录失败: ${error.message}`)
-  }
 }
 
 // 备用模拟登录
-export const mockLoginApi = async (data: LoginRequest): Promise<LoginVO> => {
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  
-  if (data.username === 'admin' && data.password === '123456') {
-    return {
-      code: 200,
-      message: '登录成功',
-      data: {
-        token: 'mock-jwt-token-' + Date.now(),
-        userInfo: {
-          id: 1,
-          username: 'admin',
-          realName: '张管理员',
-          role: 'admin',
-          avatar: ''
+export const mockLoginApi = async (data: LoginRequest): Promise<LoginResponse> => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    if (data.username === 'admin' && data.password === '123456') {
+        return {
+            code: 200,
+            message: '登录成功',
+            data: {
+                token: 'mock-jwt-token-' + Date.now(),
+                userInfo: {
+                    id: 1,
+                    username: 'admin',
+                    realName: '张管理员',
+                    role: 'admin',
+                    avatar: ''
+                }
+            }
         }
-      }
+    } else {
+        throw new Error('用户名或密码错误')
     }
-  } else {
-    throw new Error('用户名或密码错误')
-  }
 }
\ No newline at end of file
diff --git a/src/main/resources/web/src/api/deviceStatus.ts b/src/main/resources/web/src/api/deviceStatus.ts
new file mode 100644
index 0000000..8c11722
--- /dev/null
+++ b/src/main/resources/web/src/api/deviceStatus.ts
@@ -0,0 +1,50 @@
+// src/api/deviceStatus.ts
+import axios from 'axios'
+
+export const DeviceStatusApi = {
+  // 获取设备状态列表 - 修改为匹配后端实际接口
+  getDevicesByStatus: async (status: string, areaId?: string, deviceType?: string) => {
+    try {
+      const params: any = { status }
+      if (areaId) params.areaId = areaId
+      if (deviceType) params.deviceType = deviceType
+
+      const response = await axios.get('/api/web/device-status/by-status', { params })
+      return response.data
+    } catch (error) {
+      throw new Error(`获取设备列表失败: ${error}`)
+    }
+  },
+
+  // 标记设备在线
+  markDeviceOnline: async (deviceId: string) => {
+    try {
+      const response = await axios.post(`/api/web/device-status/${deviceId}/online`)
+      return response.data
+    } catch (error) {
+      throw new Error(`设置设备在线失败: ${error}`)
+    }
+  },
+
+  // 标记设备离线
+  markDeviceOffline: async (deviceId: string, reason?: string) => {
+    try {
+      const params = reason ? { reason } : {}
+      const response = await axios.post(`/api/web/device-status/${deviceId}/offline`, null, { params })
+      return response.data
+    } catch (error) {
+      throw new Error(`设置设备离线失败: ${error}`)
+    }
+  },
+
+  // 标记设备故障
+  markDeviceFault: async (deviceId: string, faultType: string, description: string) => {
+    try {
+      const params = { faultType, description }
+      const response = await axios.post(`/api/web/device-status/${deviceId}/fault`, null, { params })
+      return response.data
+    } catch (error) {
+      throw new Error(`设置设备故障失败: ${error}`)
+    }
+  }
+}
diff --git a/src/main/resources/web/src/api/modules/auth.ts b/src/main/resources/web/src/api/modules/auth.ts
new file mode 100644
index 0000000..4001362
--- /dev/null
+++ b/src/main/resources/web/src/api/modules/auth.ts
@@ -0,0 +1,15 @@
+// src/api/modules/auth.ts
+import { api } from '../request'
+import type { LoginRequest, LoginVO, ResultVO } from '../types/auth'
+
+class AuthApi {
+    /**
+     * 用户登录
+     */
+    async login(data: LoginRequest): Promise<ResultVO<LoginVO>> {
+        console.log('🚀 调用登录接口:', data)
+        return api.post<ResultVO<LoginVO>>('/api/common/login', data)
+    }
+}
+
+export const authApi = new AuthApi()
\ No newline at end of file
diff --git a/src/main/resources/web/src/api/request.ts b/src/main/resources/web/src/api/request.ts
new file mode 100644
index 0000000..4f80b6f
--- /dev/null
+++ b/src/main/resources/web/src/api/request.ts
@@ -0,0 +1,141 @@
+// src/api/request.ts
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'
+
+// 统一的 fetch 封装
+export async function request<T>(
+    url: string,
+    options: RequestInit = {}
+): Promise<T> {
+    console.log(`🌐 发送请求: ${API_BASE_URL}${url}`, {
+        method: options.method || 'GET',
+        headers: options.headers,
+        body: options.body ? JSON.parse(options.body as string) : undefined,
+    })
+
+    const defaultOptions: RequestInit = {
+        headers: {
+            'Content-Type': 'application/json',
+            ...(options.headers || {}),
+        },
+    }
+
+    // 确保登录请求不携带任何认证信息
+    const isLoginRequest = url.includes('/login')
+    if (isLoginRequest) {
+        console.log('🔐 这是登录请求，不携带认证头')
+        // 确保没有 Authorization header
+        const headers = new Headers(defaultOptions.headers)
+        headers.delete('Authorization')
+        headers.delete('authorization')
+        defaultOptions.headers = headers
+    } else {
+        // 非登录请求，从存储中获取 token
+        const token = localStorage.getItem('token') || sessionStorage.getItem('token')
+        if (token) {
+            const headers = new Headers(defaultOptions.headers)
+            headers.set('Authorization', `Bearer ${token}`)
+            defaultOptions.headers = headers
+        }
+    }
+
+    try {
+        const response = await fetch(`${API_BASE_URL}${url}`, {
+            ...defaultOptions,
+            ...options,
+        })
+
+        console.log('📥 响应状态:', response.status, response.statusText)
+
+        // 尝试读取响应文本（无论成功与否）
+        let responseText = ''
+        try {
+            responseText = await response.text()
+            console.log('📥 响应内容:', responseText)
+        } catch (e) {
+            console.log('📥 无法读取响应文本')
+        }
+
+        if (!response.ok) {
+            let errorMessage = `HTTP ${response.status}: ${response.statusText}`
+            if (responseText) {
+                try {
+                    const errorJson = JSON.parse(responseText)
+                    errorMessage = errorJson.message || errorJson.error || errorMessage
+                } catch {
+                    errorMessage = `${errorMessage}\n${responseText}`
+                }
+            }
+
+            console.error('❌ 请求失败:', errorMessage)
+            throw new Error(errorMessage)
+        }
+
+        // 尝试解析 JSON
+        if (responseText) {
+            try {
+                const data = JSON.parse(responseText)
+                console.log('✅ 解析成功的数据:', data)
+                return data
+            } catch (e) {
+                console.error('❌ JSON 解析失败:', e)
+                throw new Error(`响应不是有效的 JSON: ${responseText}`)
+            }
+        } else {
+            // 没有响应体的情况（如 204 No Content）
+            return {} as T
+        }
+    } catch (error: any) {
+        console.error('❌ 请求异常:', error)
+
+        // 处理网络错误
+        if (error.name === 'TypeError' && error.message.includes('fetch')) {
+            throw new Error('网络连接失败，请检查网络设置和后端服务')
+        }
+
+        throw error
+    }
+}
+
+// 封装常用 HTTP 方法
+export const api = {
+    get<T>(url: string) {
+        return request<T>(url, { method: 'GET' })
+    },
+
+    post<T>(url: string, data?: any) {
+        return request<T>(url, {
+            method: 'POST',
+            body: data ? JSON.stringify(data) : undefined,
+        })
+    },
+
+    put<T>(url: string, data?: any) {
+        return request<T>(url, {
+            method: 'PUT',
+            body: data ? JSON.stringify(data) : undefined,
+        })
+    },
+
+    patch<T>(url: string, data?: any) {
+        return request<T>(url, {
+            method: 'PATCH',
+            body: data ? JSON.stringify(data) : undefined,
+        })
+    },
+
+    delete<T>(url: string) {
+        return request<T>(url, { method: 'DELETE' })
+    },
+
+    upload<T>(url: string, formData: FormData) {
+        const headers = new Headers()
+        // 上传文件时不要设置 Content-Type，浏览器会自动设置
+        headers.delete('Content-Type')
+
+        return request<T>(url, {
+            method: 'POST',
+            headers,
+            body: formData,
+        })
+    },
+}
\ No newline at end of file
diff --git a/src/main/resources/web/src/api/types/auth.ts b/src/main/resources/web/src/api/types/auth.ts
index 8734ac9..92b8e1a 100644
--- a/src/main/resources/web/src/api/types/auth.ts
+++ b/src/main/resources/web/src/api/types/auth.ts
@@ -1,22 +1,29 @@
-// 与后端 LoginRequest 对应的类型
+// src/api/types/auth.ts
+
+// 登录请求参数 - 匹配后端的 LoginRequest
 export interface LoginRequest {
-  username: string
-  password: string
-  rememberMe?: boolean
+    username: string
+    password: string
+    userType: string  // 添加这个属性
+    rememberMe?: boolean
+}
+
+// 通用响应结构
+export interface ResultVO<T = any> {
+    code: number
+    message: string
+    data: T
 }
 
-// 与后端 LoginVO 对应的类型
+// 登录响应数据 - 匹配后端的 LoginVO
 export interface LoginVO {
-  code: number
-  message: string
-  data: {
     token: string
     userInfo: {
-      id: number
-      username: string
-      realName: string
-      role: string
-      avatar?: string
+        id: number
+        username: string
+        realName?: string  // 根据后端字段调整
+        role?: string      // 根据后端字段调整
+        userType?: string  // 添加这个字段
+        avatar?: string
     }
-  }
 }
\ No newline at end of file
diff --git a/src/main/resources/web/src/components/layout/AppHeader.vue b/src/main/resources/web/src/components/layout/AppHeader.vue
index 6f2c653..f2fb007 100644
--- a/src/main/resources/web/src/components/layout/AppHeader.vue
+++ b/src/main/resources/web/src/components/layout/AppHeader.vue
@@ -4,7 +4,7 @@
       <h1 class="system-title">校园矿化水系统</h1>
     </div>
     <div class="header-right">
-      <div class="user-info">
+      <div class="user-info" @click="goToProfile">
         <div class="user-avatar">
           <img :src="userAvatar" alt="用户头像" />
         </div>
@@ -17,8 +17,15 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 const userAvatar = ref('images/用户界面/u106.jpg') // 根据实际路径调整
+const router = useRouter()
+
+// 跳转到个人信息页面
+const goToProfile = () => {
+  router.push('/home/profile')
+}
 </script>
 
 <style scoped>
diff --git a/src/main/resources/web/src/components/layout/AppSidebar.vue b/src/main/resources/web/src/components/layout/AppSidebar.vue
index 3bceee2..72d2c47 100644
--- a/src/main/resources/web/src/components/layout/AppSidebar.vue
+++ b/src/main/resources/web/src/components/layout/AppSidebar.vue
@@ -29,15 +29,18 @@ interface MenuItem {
 const route = useRoute()
 const router = useRouter()
 
+// 计算当前激活的菜单项ID
 const activeItem = computed(() => {
   const currentPath = route.path
+  // 查找当前路由对应的菜单项
   const item = menuItems.find(item => 
     item.route === currentPath || 
     item.children?.some(child => child.route === currentPath)
   )
-  return item?.id || 1
+  return item?.id || 1 // 默认激活仪表盘
 })
 
+// 菜单配置项
 const menuItems: MenuItem[] = [
   { 
     id: 1, 
@@ -72,7 +75,7 @@ const menuItems: MenuItem[] = [
     id: 4, 
     name: '人员管理', 
     icon: '👥', 
-    route: '/home/personnel',
+    // 移除主菜单路由，点击主菜单只展开子菜单
     children: [
       { name: '管理员', route: '/home/personnel/admin' },
       { name: '维修人员', route: '/home/personnel/maintenance' },
@@ -83,7 +86,7 @@ const menuItems: MenuItem[] = [
     id: 5, 
     name: '片区', 
     icon: '🗺️', 
-    route: '/home/area',
+    // 移除主菜单路由，点击主菜单只展开子菜单
     children: [
       { name: '市区', route: '/home/area/urban' },
       { name: '校区', route: '/home/area/campus' }
@@ -97,6 +100,7 @@ const menuItems: MenuItem[] = [
   }
 ]
 
+// 处理菜单项点击事件
 const handleItemClick = (itemId: number) => {
   const item = menuItems.find(m => m.id === itemId)
   if (item?.route) {
@@ -111,6 +115,8 @@ const handleItemClick = (itemId: number) => {
   background: white;
   border-right: 1px solid #e1e8ed;
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+  height: calc(100vh - 60px); /* 减去头部高度 */
+  overflow-y: auto; /* 菜单过多时可滚动 */
 }
 
 .sidebar-nav {
diff --git a/src/main/resources/web/src/router/index.ts b/src/main/resources/web/src/router/index.ts
index a9bb2b5..ae82459 100644
--- a/src/main/resources/web/src/router/index.ts
+++ b/src/main/resources/web/src/router/index.ts
@@ -1,33 +1,251 @@
 // src/router/index.ts
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type NavigationGuardNext, type RouteLocationNormalized } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
-import MainLayout from '../components/layout/MainLayout.vue' // 导入布局组件
+import MainLayout from '../components/layout/MainLayout.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'login',
-      component: LoginView
-    },
-    {
-      path: '/home',
-      component: MainLayout, // 使用 MainLayout 作为布局
-      children: [
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
         {
-          path: '',
-          name: 'home',
-          component: () => import('../views/Dashboard.vue') // Dashboard 作为子路由
-        }
-      ]
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('../views/AboutView.vue')
-    },
-  ],
+            path: '/',
+            name: 'login',
+            component: LoginView,
+            meta: {
+                title: '登录',
+                requiresAuth: false // 不需要认证
+            }
+        },
+        {
+            path: '/home',
+            component: MainLayout,
+            meta: {
+                requiresAuth: true // 需要认证
+            },
+            children: [
+                {
+                    path: '',
+                    name: 'home',
+                    component: () => import('../views/Dashboard.vue'),
+                    meta: {
+                        title: '首页'
+                    }
+                },
+                // 设备监控相关路由
+                {
+                    path: 'equipment',
+                    name: 'equipment',
+                    component: () => import('../views/equipment/EquipmentView.vue'),
+                    meta: {
+                        title: '设备监控'
+                    }
+                },
+                {
+                    path: 'equipment/water-maker',
+                    name: 'water-maker',
+                    component: () => import('../views/equipment/WaterMaker.vue'),
+                    meta: {
+                        title: '制水设备'
+                    }
+                },
+                {
+                    path: 'equipment/water-supplier',
+                    name: 'water-supplier',
+                    component: () => import('../views/equipment/WaterSupplier.vue'),
+                    meta: {
+                        title: '供水设备'
+                    }
+                },
+                // 工单管理相关路由
+                {
+                    path: 'work-order',
+                    name: 'work-order',
+                    component: () => import('../views/workorder/WorkOrderView.vue'),
+                    meta: {
+                        title: '工单管理'
+                    }
+                },
+                {
+                    path: 'work-order/pending',
+                    name: 'work-order-pending',
+                    component: () => import('../views/workorder/Pending.vue'),
+                    meta: {
+                        title: '待处理工单'
+                    }
+                },
+                {
+                    path: 'work-order/timeout',
+                    name: 'work-order-timeout',
+                    component: () => import('../views/workorder/Timeout.vue'),
+                    meta: {
+                        title: '超时工单'
+                    }
+                },
+                {
+                    path: 'work-order/processing',
+                    name: 'work-order-processing',
+                    component: () => import('../views/workorder/Processing.vue'),
+                    meta: {
+                        title: '处理中工单'
+                    }
+                },
+                {
+                    path: 'work-order/review',
+                    name: 'work-order-review',
+                    component: () => import('../views/workorder/Review.vue'),
+                    meta: {
+                        title: '待审核工单'
+                    }
+                },
+                {
+                    path: 'work-order/review/:id',
+                    name: 'ReviewDetail',
+                    component: () => import('../views/workorder/ReviewDetail.vue'),
+                    meta: {
+                        title: '工单审核详情'
+                    }
+                },
+                {
+                    path: 'work-order/completed',
+                    name: 'work-order-completed',
+                    component: () => import('../views/workorder/Completed.vue'),
+                    meta: {
+                        title: '已完成工单'
+                    }
+                },
+                {
+                    path: '/home/work-order/completed/:id',
+                    name: 'CompletedDetail',
+                    component: () => import('@/views/workorder/CompletedDetail.vue'),
+                    meta: {
+                        title: '结单信息'
+                    }
+                },
+                // 人员管理相关路由
+                {
+                    path: 'personnel/admin',
+                    name: 'personnel-admin',
+                    component: () => import('../views/personnel/Admin.vue'),
+                    meta: {
+                        title: '管理员管理'
+                    }
+                },
+                {
+                    path: 'personnel/maintenance',
+                    name: 'personnel-maintenance',
+                    component: () => import('../views/personnel/Maintenance.vue'),
+                    meta: {
+                        title: '运维人员管理'
+                    }
+                },
+                {
+                    path: 'personnel/user',
+                    name: 'personnel-user',
+                    component: () => import('../views/personnel/User.vue'),
+                    meta: {
+                        title: '用户管理'
+                    }
+                },
+                // 片区相关路由
+                {
+                    path: 'area/urban',
+                    name: 'area-urban',
+                    component: () => import('../views/area/Urban.vue'),
+                    meta: {
+                        title: '城市片区'
+                    }
+                },
+                {
+                    path: 'equipment/water-maker/:id',
+                    name: 'water-maker-detail',
+                    component: () => import('../views/equipment/WaterMakerDetail.vue'),
+                    meta: {
+                        title: '制水设备详情'
+                    }
+                },
+                {
+                    path: 'area/campus',
+                    name: 'area-campus',
+                    component: () => import('../views/area/Campus.vue'),
+                    meta: {
+                        title: '校园片区'
+                    }
+                },
+                // 个人信息路由
+                {
+                    path: 'profile',
+                    name: 'profile',
+                    component: () => import('../views/Profile.vue'),
+                    meta: {
+                        title: '个人信息',
+                        requiresAuth: true
+                    }
+                }
+            ]
+        },
+        {
+            path: '/about',
+            name: 'about',
+            component: () => import('../views/AboutView.vue'),
+            meta: {
+                title: '关于',
+                requiresAuth: false
+            }
+        },
+      /*  // 404 页面
+        {
+            path: '/:pathMatch(.*)*',
+            name: 'NotFound',
+            component: () => import('../views/NotFound.vue'),
+            meta: {
+                title: '页面不存在',
+                requiresAuth: false
+            }
+        }*/
+    ]
+})
+
+// 路由守卫
+router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+    // 设置页面标题
+    const title = to.meta?.title as string || '校园直饮水管理系统'
+    document.title = title
+
+    // 获取认证状态
+    const authStore = useAuthStore()
+
+    // 初始化登录状态
+    if (!authStore.isLoggedIn) {
+        authStore.initialize()
+    }
+
+    // 判断是否需要认证
+    const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
+
+    // 如果路由需要认证但用户未登录
+    if (requiresAuth && !authStore.isLoggedIn) {
+        // 重定向到登录页面，并保存当前想要访问的路径
+        next({
+            name: 'login',
+            query: { redirect: to.fullPath }
+        })
+    }
+    // 如果用户已登录但访问登录页面
+    else if (to.name === 'login' && authStore.isLoggedIn) {
+        // 检查是否有重定向路径
+        const redirect = from.query.redirect as string || '/home'
+        next(redirect)
+    }
+    // 其他情况正常放行
+    else {
+        next()
+    }
+})
+
+// 路由后置守卫 - 可在这里添加一些统计或清理工作
+router.afterEach((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
+    // 可以在这里添加页面访问统计等
+    console.log(`路由跳转: ${from.fullPath} -> ${to.fullPath}`)
 })
 
 export default router
\ No newline at end of file
diff --git a/src/main/resources/web/src/stores/auth.ts b/src/main/resources/web/src/stores/auth.ts
index e9d986d..cff9364 100644
--- a/src/main/resources/web/src/stores/auth.ts
+++ b/src/main/resources/web/src/stores/auth.ts
@@ -1,71 +1,105 @@
+// src/stores/auth.ts
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { realLoginApi } from '@/api/auth'
-import type { LoginVO } from '@/api/types/auth'
+import { authApi } from '@/api/modules/auth'
+import type { LoginRequest, LoginVO, ResultVO } from '@/api/types/auth'
 
 interface UserInfo {
-  id: number
-  username: string
-  realName: string
-  role: string
-  avatar?: string
+    id: number
+    username: string
+    realName: string
+    role: string
+    avatar?: string
 }
 
 export const useAuthStore = defineStore('auth', () => {
-  const token = ref<string>('')
-  const userInfo = ref<UserInfo | null>(null)
-  const isLoggedIn = ref(false)
+    const token = ref<string>('')
+    const userInfo = ref<UserInfo | null>(null)
+    const isLoggedIn = ref(false)
 
-  // 登录方法
-  const login = async (loginData: { username: string; password: string; rememberMe?: boolean }) => {
-    try {
-      const response: LoginVO = await realLoginApi(loginData)
-      
-      if (response.code === 200) {
-        token.value = response.data.token
-        userInfo.value = response.data.userInfo
-        isLoggedIn.value = true
-        
-        // 存储到localStorage
-        localStorage.setItem('token', response.data.token)
-        localStorage.setItem('userInfo', JSON.stringify(response.data.userInfo))
-        
-        return response
-      } else {
-        throw new Error(response.message || '登录失败')
-      }
-    } catch (error: any) {
-      throw new Error(error.message || '登录失败，请检查网络连接')
+    // 真实登录接口调用
+    const login = async (loginData: LoginRequest) => {
+        try {
+            // 调用真实后端接口
+            const response: ResultVO<LoginVO> = await authApi.login(loginData)
+
+            // 检查响应状态
+            if (response.code !== 200) {
+                throw new Error(response.message || '登录失败')
+            }
+
+            // 保存 token 和用户信息
+            token.value = response.data.token
+            userInfo.value = response.data.userInfo
+            isLoggedIn.value = true
+
+            // 存储到 localStorage（如果用户选择记住我）
+            if (loginData.rememberMe) {
+                localStorage.setItem('token', response.data.token)
+                localStorage.setItem('userInfo', JSON.stringify(response.data.userInfo))
+                localStorage.setItem('rememberMe', 'true')
+            } else {
+                sessionStorage.setItem('token', response.data.token)
+                sessionStorage.setItem('userInfo', JSON.stringify(response.data.userInfo))
+                localStorage.removeItem('rememberMe')
+            }
+
+            return response
+        } catch (error: any) {
+            console.error('登录失败:', error)
+            throw error
+        }
+    }
+
+    // 退出登录
+    const logout = () => {
+        // 可以调用后端登出接口
+        // authApi.logout().catch(console.error)
+
+        // 清除本地存储
+        token.value = ''
+        userInfo.value = null
+        isLoggedIn.value = false
+
+        localStorage.removeItem('token')
+        localStorage.removeItem('userInfo')
+        localStorage.removeItem('rememberMe')
+        sessionStorage.removeItem('token')
+        sessionStorage.removeItem('userInfo')
     }
-  }
 
-  // 退出登录
-  const logout = () => {
-    token.value = ''
-    userInfo.value = null
-    isLoggedIn.value = false
-    localStorage.removeItem('token')
-    localStorage.removeItem('userInfo')
-  }
+    // 初始化时从存储恢复状态
+    const initialize = () => {
+        const rememberMe = localStorage.getItem('rememberMe')
+        const storage = rememberMe ? localStorage : sessionStorage
+
+        const savedToken = storage.getItem('token')
+        const savedUserInfo = storage.getItem('userInfo')
 
-  // 初始化时从localStorage恢复状态
-  const initialize = () => {
-    const savedToken = localStorage.getItem('token')
-    const savedUserInfo = localStorage.getItem('userInfo')
-    
-    if (savedToken && savedUserInfo) {
-      token.value = savedToken
-      userInfo.value = JSON.parse(savedUserInfo)
-      isLoggedIn.value = true
+        if (savedToken && savedUserInfo) {
+            try {
+                token.value = savedToken
+                userInfo.value = JSON.parse(savedUserInfo)
+                isLoggedIn.value = true
+            } catch (e) {
+                console.error('恢复登录状态失败:', e)
+                logout()
+            }
+        }
     }
-  }
 
-  return {
-    token,
-    userInfo,
-    isLoggedIn,
-    login,
-    logout,
-    initialize
-  }
+    // 检查是否已登录（用于路由守卫）
+    const checkAuth = (): boolean => {
+        return isLoggedIn.value && !!token.value
+    }
+
+    return {
+        token,
+        userInfo,
+        isLoggedIn,
+        login,
+        logout,
+        initialize,
+        checkAuth,
+    }
 })
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/LoginView.vue b/src/main/resources/web/src/views/LoginView.vue
index e843dcd..172d7fa 100644
--- a/src/main/resources/web/src/views/LoginView.vue
+++ b/src/main/resources/web/src/views/LoginView.vue
@@ -7,6 +7,22 @@
       </div>
 
       <form class="login-form" @submit.prevent="handleLogin">
+        <!-- 用户类型选择 -->
+        <div class="form-group">
+          <label for="userType">用户类型</label>
+          <select
+              id="userType"
+              v-model="loginForm.userType"
+              class="form-input"
+              :disabled="loading"
+              required
+          >
+            <option value="user">普通用户</option>
+            <option value="admin">管理员</option>
+            <option value="repairer">维修人员</option>
+          </select>
+        </div>
+
         <div class="form-group">
           <label for="username">用户名</label>
           <input
@@ -68,9 +84,11 @@ const debugInfo = ref('')
 const loginForm = reactive({
   username: '',
   password: '',
+  userType: 'user', // 添加默认用户类型
   rememberMe: false
 })
 
+// 在 handleLogin 方法中
 const handleLogin = async () => {
   if (!loginForm.username.trim() || !loginForm.password.trim()) {
     alert('请输入用户名和密码')
@@ -78,27 +96,34 @@ const handleLogin = async () => {
   }
 
   loading.value = true
-  debugInfo.value = '开始登录...'
 
   try {
-    debugInfo.value = `调用接口: ${import.meta.env.VITE_API_BASE_URL}/api/common/login\n请求数据: ${JSON.stringify(loginForm, null, 2)}`
-
-    // 调用登录接口
+    // 调用真实的登录接口，传递完整的参数
     await authStore.login({
       username: loginForm.username,
       password: loginForm.password,
+      userType: loginForm.userType, // 添加用户类型参数
       rememberMe: loginForm.rememberMe
     })
 
-    debugInfo.value += '\n✅ 登录成功，跳转到首页...'
-
-    // 登录成功，跳转到首页
-    router.push('/home')
+    // 登录成功，处理重定向
+    const redirect = router.currentRoute.value.query.redirect as string
+    if (redirect) {
+      router.push(redirect)
+    } else {
+      router.push('/home')
+    }
 
   } catch (error: any) {
     console.error('登录失败:', error)
-    debugInfo.value += `\n❌ 登录失败: ${error.message}`
-    alert(error.message || '登录失败，请检查用户名和密码')
+    // 更友好的错误提示
+    const errorMessage = error.message.includes('Network')
+        ? '网络连接失败，请检查网络设置'
+        : error.message.includes('401')
+            ? '用户名或密码错误'
+            : error.message || '登录失败，请稍后重试'
+
+    alert(errorMessage)
   } finally {
     loading.value = false
   }
@@ -242,4 +267,4 @@ const handleLogin = async () => {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main/resources/web/src/views/Profile.vue b/src/main/resources/web/src/views/Profile.vue
new file mode 100644
index 0000000..8ebe31d
--- /dev/null
+++ b/src/main/resources/web/src/views/Profile.vue
@@ -0,0 +1,629 @@
+<!-- src/views/profile/Profile.vue -->
+<template>
+  <div class="profile-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>个人信息</h2>
+      <div class="breadcrumb">校园矿化水平台 / 个人中心 / 个人信息</div>
+    </div>
+
+    <div class="profile-container">
+      <!-- 左侧头像和基本信息 -->
+      <div class="profile-sidebar">
+        <div class="avatar-container">
+          <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="user-avatar">
+          <button class="change-avatar-btn" @click="triggerAvatarUpload">更换头像</button>
+          <input 
+            type="file" 
+            ref="avatarInput" 
+            class="avatar-input" 
+            accept="image/*"
+            @change="handleAvatarUpload"
+          >
+        </div>
+
+        <div class="basic-info">
+          <div class="info-item">
+            <span class="label">用户名：</span>
+            <span class="value">{{ userInfo.username }}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">真实姓名：</span>
+            <span class="value">{{ userInfo.realName }}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">身份：</span>
+            <span class="value role-tag">{{ formatRole(userInfo.role) }}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">联系电话：</span>
+            <span class="value">{{ userInfo.phone || '未设置' }}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">账号状态：</span>
+            <span class="value status-tag" :class="userInfo.status">
+              {{ userInfo.status === 'active' ? '启用' : '禁用' }}
+            </span>
+          </div>
+          <div class="info-item">
+            <span class="label">最后登录：</span>
+            <span class="value">{{ formatDate(userInfo.lastLoginTime) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧信息编辑和密码修改 -->
+      <div class="profile-content">
+        <!-- 个人信息编辑表单 -->
+        <div class="profile-card">
+          <div class="card-header">
+            <h3>编辑个人信息</h3>
+          </div>
+          <div class="card-body">
+            <form @submit.prevent="updateProfile">
+              <div class="form-row">
+                <div class="form-item">
+                  <label>真实姓名：</label>
+                  <input 
+                    type="text" 
+                    v-model="profileForm.realName" 
+                    placeholder="请输入真实姓名"
+                    required
+                  >
+                </div>
+                <div class="form-item">
+                  <label>联系电话：</label>
+                  <input 
+                    type="tel" 
+                    v-model="profileForm.phone" 
+                    placeholder="请输入联系电话"
+                    pattern="^1[3-9]\d{9}$"
+                  >
+                </div>
+              </div>
+              
+              <div class="form-row">
+                <div class="form-item full-width">
+                  <label>备注信息：</label>
+                  <textarea 
+                    v-model="profileForm.remark" 
+                    placeholder="请输入备注信息（选填）"
+                    rows="3"
+                  ></textarea>
+                </div>
+              </div>
+
+              <div class="form-actions">
+                <button type="submit" class="btn-save">保存修改</button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <!-- 密码修改表单 -->
+        <div class="profile-card password-card">
+          <div class="card-header">
+            <h3>修改密码</h3>
+          </div>
+          <div class="card-body">
+            <form @submit.prevent="changePassword">
+              <div class="form-row">
+                <div class="form-item full-width">
+                  <label>当前密码：</label>
+                  <input 
+                    type="password" 
+                    v-model="passwordForm.oldPassword" 
+                    placeholder="请输入当前密码"
+                    required
+                  >
+                </div>
+              </div>
+              
+              <div class="form-row">
+                <div class="form-item full-width">
+                  <label>新密码：</label>
+                  <input 
+                    type="password" 
+                    v-model="passwordForm.newPassword" 
+                    placeholder="请输入新密码（至少8位，包含字母和数字）"
+                    pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
+                    required
+                  >
+                </div>
+              </div>
+              
+              <div class="form-row">
+                <div class="form-item full-width">
+                  <label>确认新密码：</label>
+                  <input 
+                    type="password" 
+                    v-model="passwordForm.confirmPassword" 
+                    placeholder="请再次输入新密码"
+                    required
+                  >
+                </div>
+              </div>
+
+              <div class="form-actions">
+                <button type="submit" class="btn-change-pwd">修改密码</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作成功提示 -->
+    <div class="toast" v-if="showToast">
+      {{ toastMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+// 若使用Element Plus，可替换为原生提示
+
+// 默认头像
+const defaultAvatar = 'images/avatar/default-avatar.png'
+
+// 用户信息接口
+interface UserInfo {
+  id: string
+  username: string
+  realName: string
+  role: 'student' | 'teacher' | 'visitor' | 'admin' | 'maintenance'
+  phone?: string
+  avatar?: string
+  status: 'active' | 'disabled'
+  lastLoginTime: string
+  remark?: string
+}
+
+// 响应式数据
+const avatarInput = ref<HTMLInputElement | null>(null)
+const showToast = ref(false)
+const toastMessage = ref('')
+
+// 用户信息（实际项目中从接口获取）
+const userInfo = ref<UserInfo>({
+  id: '1',
+  username: 'admin01',
+  realName: '管理员',
+  role: 'admin',
+  phone: '13800138000',
+  avatar: '',
+  status: 'active',
+  lastLoginTime: '2025-12-05 09:23:45',
+  remark: '系统超级管理员'
+})
+
+// 个人信息表单
+const profileForm = reactive({
+  realName: '',
+  phone: '',
+  remark: ''
+})
+
+// 密码修改表单
+const passwordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+// 初始化表单数据
+onMounted(() => {
+  profileForm.realName = userInfo.value.realName
+  profileForm.phone = userInfo.value.phone || ''
+  profileForm.remark = userInfo.value.remark || ''
+})
+
+// 格式化角色显示
+const formatRole = (role: string) => {
+  const roleMap: Record<string, string> = {
+    student: '学生',
+    teacher: '老师',
+    visitor: '游客',
+    admin: '管理员',
+    maintenance: '维修人员'
+  }
+  return roleMap[role] || '未知身份'
+}
+
+// 格式化日期显示
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '暂无记录'
+  return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+// 触发头像上传
+const triggerAvatarUpload = () => {
+  avatarInput.value?.click()
+}
+
+// 处理头像上传
+const handleAvatarUpload = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    // 验证文件类型和大小
+    const isImage = file.type.startsWith('image/')
+    const isLt2M = file.size / 1024 / 1024 < 2
+
+    if (!isImage) {
+      showToastMessage('请上传图片格式的文件！')
+      return
+    }
+    
+    if (!isLt2M) {
+      showToastMessage('头像大小不能超过2MB！')
+      return
+    }
+
+    // 预览并上传头像（实际项目中调用上传接口）
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      userInfo.value.avatar = e.target?.result as string
+      showToastMessage('头像上传成功！')
+    }
+    reader.readAsDataURL(file)
+
+    // 清空input值，以便重新选择同一文件
+    target.value = ''
+  }
+}
+
+// 更新个人信息
+const updateProfile = () => {
+  // 表单验证
+  if (!profileForm.realName.trim()) {
+    showToastMessage('真实姓名不能为空！')
+    return
+  }
+
+  // 手机号验证
+  if (profileForm.phone && !/^1[3-9]\d{9}$/.test(profileForm.phone)) {
+    showToastMessage('请输入正确的手机号码！')
+    return
+  }
+
+  // 更新用户信息（实际项目中调用接口）
+  userInfo.value.realName = profileForm.realName
+  userInfo.value.phone = profileForm.phone
+  userInfo.value.remark = profileForm.remark
+
+  showToastMessage('个人信息修改成功！')
+}
+
+// 修改密码
+const changePassword = () => {
+  // 表单验证
+  if (!passwordForm.oldPassword) {
+    showToastMessage('请输入当前密码！')
+    return
+  }
+
+  if (passwordForm.newPassword.length < 8) {
+    showToastMessage('新密码长度不能少于8位！')
+    return
+  }
+
+  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(passwordForm.newPassword)) {
+    showToastMessage('新密码必须包含字母和数字！')
+    return
+  }
+
+  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+    showToastMessage('两次输入的新密码不一致！')
+    return
+  }
+
+  // 调用密码修改接口（实际项目中实现）
+  showToastMessage('密码修改成功，请重新登录！')
+  
+  // 重置密码表单
+  passwordForm.oldPassword = ''
+  passwordForm.newPassword = ''
+  passwordForm.confirmPassword = ''
+}
+
+// 显示提示消息
+const showToastMessage = (message: string) => {
+  toastMessage.value = message
+  showToast.value = true
+  
+  // 3秒后关闭提示
+  setTimeout(() => {
+    showToast.value = false
+  }, 3000)
+}
+</script>
+
+<style scoped>
+/* 基础样式 */
+.profile-page {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 布局容器 */
+.profile-container {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+/* 左侧侧边栏 */
+.profile-sidebar {
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.avatar-container {
+  text-align: center;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.user-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 12px;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.change-avatar-btn:hover {
+  background: #556cd6;
+}
+
+.avatar-input {
+  display: none;
+}
+
+.basic-info {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
+}
+
+.label {
+  width: 80px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.value {
+  color: #333;
+  flex: 1;
+}
+
+/* 角色和状态标签 */
+.role-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.active {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.disabled {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+/* 右侧内容区 */
+.profile-content {
+  flex: 1;
+  min-width: 500px;
+}
+
+.profile-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.password-card {
+  margin-bottom: 0;
+}
+
+.card-header {
+  padding: 16px 20px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+  font-weight: 600;
+}
+
+.card-body {
+  padding: 20px;
+}
+
+/* 表单样式 */
+.form-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.form-item {
+  flex: 1;
+  min-width: 200px;
+}
+
+.form-item.full-width {
+  flex: 1 1 100%;
+  min-width: 100%;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.form-item input,
+.form-item textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: border-color 0.3s;
+}
+
+.form-item input:focus,
+.form-item textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.btn-save, .btn-change-pwd {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-save:hover, .btn-change-pwd:hover {
+  background: #359e75;
+}
+
+.btn-change-pwd {
+  background: #667eea;
+}
+
+.btn-change-pwd:hover {
+  background: #556cd6;
+}
+
+/* 提示框样式 */
+.toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 12px 20px;
+  border-radius: 4px;
+  z-index: 1000;
+  animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-20px); }
+}
+
+/* 响应式调整 */
+@media (max-width: 900px) {
+  .profile-container {
+    flex-direction: column;
+  }
+  
+  .profile-sidebar {
+    width: 100%;
+  }
+  
+  .profile-content {
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .form-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .form-item {
+    min-width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/area/Campus.vue b/src/main/resources/web/src/views/area/Campus.vue
new file mode 100644
index 0000000..18f6055
--- /dev/null
+++ b/src/main/resources/web/src/views/area/Campus.vue
@@ -0,0 +1,598 @@
+<!-- src/views/area/CampusManagement.vue -->
+<template>
+  <div class="campus-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>校区管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 区域管理 / 校区管理</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <!-- 新增校区按钮 -->
+      <button class="btn-add" @click="handleAddCampus">新增校区</button>
+      
+      <!-- 校区下拉筛选 -->
+      <div class="filter-box">
+        <label>选择校区：</label>
+        <select v-model="selectedCampus" @change="handleCampusChange" class="campus-select">
+          <option value="">全部校区</option>
+          <option v-for="campus in campusList" :key="campus.id" :value="campus.id">
+            {{ campus.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 校区表格（新增所属市区列） -->
+    <div class="card">
+      <table class="campus-table">
+        <thead>
+          <tr>
+            <th>校区</th>
+            <th>所属市区</th> <!-- 新增列 -->
+            <th>设备数量</th>
+            <th>范围</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="campus in filteredCampus" :key="campus.id">
+            <td>{{ campus.name }}</td>
+            <td>{{ getAreaName(campus.areaId) }}</td> <!-- 显示所属市区名称 -->
+            <td>{{ campus.deviceCount }}</td>
+            <td>{{ campus.range }}</td>
+            <td class="operation-buttons">
+              <button 
+                class="btn-delete" 
+                @click="handleDelete(campus.id)"
+              >
+                删除
+              </button>
+            </td>
+          </tr>
+          <tr v-if="filteredCampus.length === 0">
+            <td colspan="5" class="no-data">暂无校区数据</td> <!-- 列数调整为5 -->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 新增/编辑校区弹窗（新增所属市区选择） -->
+    <div class="modal-mask" v-if="showModal">
+      <div class="modal-container">
+        <div class="modal-header">
+          <h3>{{ isEdit ? '编辑校区' : '新增校区' }}</h3>
+          <button class="close-btn" @click="showModal = false">×</button>
+        </div>
+        <div class="modal-body">
+          <form @submit.prevent="handleSave">
+            <div class="form-item">
+              <label>校区名称：</label>
+              <input 
+                type="text" 
+                v-model="formData.name" 
+                placeholder="请输入校区名称"
+                required
+              >
+            </div>
+            <div class="form-item">
+              <label>所属市区：</label> <!-- 新增表单项 -->
+              <select 
+                v-model="formData.areaId" 
+                class="area-select"
+                required
+              >
+                <option value="">请选择所属市区</option>
+                <option v-for="area in areaList" :key="area.id" :value="area.id">
+                  {{ area.name }}
+                </option>
+              </select>
+            </div>
+            <div class="form-item">
+              <label>校区范围：</label>
+              <textarea 
+                v-model="formData.range" 
+                placeholder="请输入校区范围描述"
+                rows="3"
+                required
+              ></textarea>
+            </div>
+            <div class="form-item">
+              <label>设备数量：</label>
+              <input 
+                type="number" 
+                v-model="formData.deviceCount" 
+                placeholder="请输入设备数量"
+                min="0"
+                required
+              >
+            </div>
+            <div class="form-actions">
+              <button type="button" class="btn-cancel" @click="showModal = false">取消</button>
+              <button type="submit" class="btn-submit">保存</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 删除确认弹窗 -->
+    <div class="modal-mask" v-if="showDeleteConfirm">
+      <div class="modal-container confirm-modal">
+        <div class="modal-header">
+          <h3>确认删除</h3>
+          <button class="close-btn" @click="showDeleteConfirm = false">×</button>
+        </div>
+        <div class="modal-body">
+          <p>确定要删除 "{{ deleteCampusName }}" 校区吗？此操作不可撤销。</p>
+          <div class="form-actions">
+            <button type="button" class="btn-cancel" @click="showDeleteConfirm = false">取消</button>
+            <button type="button" class="btn-delete-confirm" @click="confirmDelete">确认删除</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 市区数据接口（用于关联校区所属市区）
+interface Area {
+  id: string
+  name: string
+  deviceCount: number
+  range: string
+}
+
+// 校区数据接口（新增areaId字段关联市区）
+interface Campus {
+  id: string
+  name: string
+  areaId: string // 所属市区ID
+  deviceCount: number
+  range: string
+}
+
+// 模拟市区数据（用于校区关联）
+const areaList = ref<Area[]>([
+  {
+    id: '1',
+    name: '市区东区',
+    deviceCount: 28,
+    range: '东至东风路，西至解放路，南至人民路，北至建设路'
+  },
+  {
+    id: '2',
+    name: '市区西区',
+    deviceCount: 19,
+    range: '东至解放路，西至滨河路，南至青年路，北至黄河路'
+  }
+])
+
+// 模拟校区数据
+const campusList = ref<Campus[]>([
+  {
+    id: '1',
+    name: '主校区',
+    areaId: '1', // 关联市区东区
+    deviceCount: 89,
+    range: '包含教学区、生活区、运动区，覆盖整个主校区范围'
+  },
+  {
+    id: '2',
+    name: '分校区',
+    areaId: '2', // 关联市区西区
+    deviceCount: 45,
+    range: '包含新教学楼、实训楼、学生公寓1-5号楼'
+  },
+  {
+    id: '3',
+    name: '南校区',
+    areaId: '1', // 关联市区东区
+    deviceCount: 67,
+    range: '包含研究生院、国际交流中心、留学生公寓'
+  }
+])
+
+// 响应式数据
+const selectedCampus = ref('')
+const currentPage = ref(1)
+const pageSize = ref(10)
+const showModal = ref(false)
+const isEdit = ref(false)
+const showDeleteConfirm = ref(false)
+const deleteCampusId = ref('')
+const deleteCampusName = ref('')
+
+// 表单数据（新增areaId字段）
+const formData = ref<Campus>({
+  id: '',
+  name: '',
+  areaId: '',
+  deviceCount: 0,
+  range: ''
+})
+
+// 根据市区ID获取市区名称
+const getAreaName = (areaId: string) => {
+  const area = areaList.value.find(item => item.id === areaId)
+  return area ? area.name : '未指定'
+}
+
+// 筛选后的校区列表
+const filteredCampus = computed(() => {
+  let filtered = [...campusList.value]
+  
+  // 根据下拉选择筛选校区
+  if (selectedCampus.value) {
+    filtered = filtered.filter(campus => campus.id === selectedCampus.value)
+  }
+  
+  // 分页处理
+  const startIndex = (currentPage.value - 1) * pageSize.value
+  const endIndex = startIndex + pageSize.value
+  return filtered.slice(startIndex, endIndex)
+})
+
+// 总页数计算
+const totalPages = computed(() => {
+  const filteredCount = selectedCampus.value 
+    ? campusList.value.filter(campus => campus.id === selectedCampus.value).length
+    : campusList.value.length
+  return Math.ceil(filteredCount / pageSize.value)
+})
+
+// 校区选择变更处理
+const handleCampusChange = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 新增校区
+const handleAddCampus = () => {
+  isEdit.value = false
+  // 重置表单
+  formData.value = {
+    id: '',
+    name: '',
+    areaId: '',
+    deviceCount: 0,
+    range: ''
+  }
+  showModal.value = true
+}
+
+// 删除校区（先显示确认弹窗）
+const handleDelete = (id: string) => {
+  const campus = campusList.value.find(item => item.id === id)
+  if (campus) {
+    deleteCampusId.value = id
+    deleteCampusName.value = campus.name
+    showDeleteConfirm.value = true
+  }
+}
+
+// 确认删除
+const confirmDelete = () => {
+  campusList.value = campusList.value.filter(campus => campus.id !== deleteCampusId.value)
+  showDeleteConfirm.value = false
+  // 如果删除的是当前选中的校区，清空选择
+  if (selectedCampus.value === deleteCampusId.value) {
+    selectedCampus.value = ''
+  }
+}
+
+// 保存校区信息
+const handleSave = () => {
+  if (isEdit.value) {
+    // 编辑模式
+    const index = campusList.value.findIndex(item => item.id === formData.value.id)
+    if (index !== -1) {
+      campusList.value[index] = { ...formData.value }
+    }
+  } else {
+    // 新增模式
+    const newCampus: Campus = {
+      ...formData.value,
+      id: Date.now().toString() // 生成唯一ID
+    }
+    campusList.value.unshift(newCampus)
+  }
+  showModal.value = false
+}
+</script>
+
+<style scoped>
+/* 基础样式 - 与市区管理页面完全一致 */
+.campus-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.filter-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+}
+
+.campus-select, .area-select { /* 新增area-select样式 */
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  min-width: 200px;
+  font-size: 14px;
+}
+
+/* 表格样式 */
+.campus-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.campus-table th,
+.campus-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.campus-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.campus-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-delete {
+  background-color: #ffebe6;
+  color: #cf1322;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.btn-delete:hover {
+  opacity: 0.9;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 弹窗样式 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90%;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.confirm-modal {
+  width: 400px;
+}
+
+.modal-header {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #999;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.modal-body {
+  padding: 16px;
+}
+
+.form-item {
+  margin-bottom: 16px;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  color: #666;
+  font-size: 14px;
+}
+
+.form-item input,
+.form-item textarea,
+.form-item select { /* 新增select样式 */
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+.btn-cancel {
+  background: #f5f5f5;
+  color: #666;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-submit {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-delete-confirm {
+  background: #cf1322;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .filter-box {
+    width: 100%;
+  }
+  
+  .campus-select, .area-select {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/area/Urban.vue b/src/main/resources/web/src/views/area/Urban.vue
new file mode 100644
index 0000000..ad6efd7
--- /dev/null
+++ b/src/main/resources/web/src/views/area/Urban.vue
@@ -0,0 +1,553 @@
+<!-- src/views/area/AreaManagement.vue -->
+<template>
+  <div class="area-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>片区管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 区域管理 / 片区管理</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <!-- 新增片区按钮 -->
+      <button class="btn-add" @click="handleAddArea">新增片区</button>
+      
+      <!-- 片区下拉筛选 -->
+      <div class="filter-box">
+        <label>选择片区：</label>
+        <select v-model="selectedArea" @change="handleAreaChange" class="area-select">
+          <option value="">全部片区</option>
+          <!-- 核心修改：移除下拉选项中的设备数量展示，仅保留片区名称 -->
+          <option v-for="area in areaList" :key="area.id" :value="area.id">
+            {{ area.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 片区表格 -->
+    <div class="card">
+      <table class="area-table">
+        <thead>
+          <tr>
+            <th>片区</th>
+            <th>设备数量</th>
+            <th>范围</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="area in filteredAreas" :key="area.id">
+            <td>{{ area.name }}</td>
+            <td>{{ area.deviceCount }}</td>
+            <td>{{ area.range }}</td>
+            <td class="operation-buttons">
+              <button 
+                class="btn-delete" 
+                @click="handleDelete(area.id)"
+              >
+                删除
+              </button>
+            </td>
+          </tr>
+          <tr v-if="filteredAreas.length === 0">
+            <td colspan="4" class="no-data">暂无片区数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 新增/编辑片区弹窗 -->
+    <div class="modal-mask" v-if="showModal">
+      <div class="modal-container">
+        <div class="modal-header">
+          <h3>{{ isEdit ? '编辑片区' : '新增片区' }}</h3>
+          <button class="close-btn" @click="showModal = false">×</button>
+        </div>
+        <div class="modal-body">
+          <form @submit.prevent="handleSave">
+            <div class="form-item">
+              <label>片区名称：</label>
+              <input 
+                type="text" 
+                v-model="formData.name" 
+                placeholder="请输入片区名称"
+                required
+              >
+            </div>
+            <div class="form-item">
+              <label>片区范围：</label>
+              <textarea 
+                v-model="formData.range" 
+                placeholder="请输入片区范围描述"
+                rows="3"
+                required
+              ></textarea>
+            </div>
+            <div class="form-item">
+              <label>设备数量：</label>
+              <input 
+                type="number" 
+                v-model="formData.deviceCount" 
+                placeholder="请输入设备数量"
+                min="0"
+                required
+              >
+            </div>
+            <div class="form-actions">
+              <button type="button" class="btn-cancel" @click="showModal = false">取消</button>
+              <button type="submit" class="btn-submit">保存</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 删除确认弹窗 -->
+    <div class="modal-mask" v-if="showDeleteConfirm">
+      <div class="modal-container confirm-modal">
+        <div class="modal-header">
+          <h3>确认删除</h3>
+          <button class="close-btn" @click="showDeleteConfirm = false">×</button>
+        </div>
+        <div class="modal-body">
+          <p>确定要删除 "{{ deleteAreaName }}" 片区吗？此操作不可撤销。</p>
+          <div class="form-actions">
+            <button type="button" class="btn-cancel" @click="showDeleteConfirm = false">取消</button>
+            <button type="button" class="btn-delete-confirm" @click="confirmDelete">确认删除</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 片区数据接口
+interface Area {
+  id: string
+  name: string
+  deviceCount: number
+  range: string
+}
+
+// 模拟片区数据
+const areaList = ref<Area[]>([
+  {
+    id: '1',
+    name: '市区东区',
+    deviceCount: 28,
+    range: '东至东风路，西至解放路，南至人民路，北至建设路'
+  },
+  {
+    id: '2',
+    name: '市区西区',
+    deviceCount: 19,
+    range: '东至解放路，西至滨河路，南至青年路，北至黄河路'
+  },
+  {
+    id: '3',
+    name: '校区南区',
+    deviceCount: 45,
+    range: '大学校园内南部区域，包含教学楼、图书馆、学生宿舍1-8号楼'
+  },
+  {
+    id: '4',
+    name: '校区北区',
+    deviceCount: 32,
+    range: '大学校园内北部区域，包含实验楼、体育馆、学生宿舍9-16号楼'
+  }
+])
+
+// 响应式数据
+const selectedArea = ref('')
+const currentPage = ref(1)
+const pageSize = ref(10)
+const showModal = ref(false)
+const isEdit = ref(false)
+const showDeleteConfirm = ref(false)
+const deleteAreaId = ref('')
+const deleteAreaName = ref('')
+
+// 表单数据
+const formData = ref<Area>({
+  id: '',
+  name: '',
+  deviceCount: 0,
+  range: ''
+})
+
+// 筛选后的片区列表
+const filteredAreas = computed(() => {
+  let filtered = [...areaList.value]
+  
+  // 根据下拉选择筛选片区
+  if (selectedArea.value) {
+    filtered = filtered.filter(area => area.id === selectedArea.value)
+  }
+  
+  // 分页处理
+  const startIndex = (currentPage.value - 1) * pageSize.value
+  const endIndex = startIndex + pageSize.value
+  return filtered.slice(startIndex, endIndex)
+})
+
+// 总页数计算
+const totalPages = computed(() => {
+  const filteredCount = selectedArea.value 
+    ? areaList.value.filter(area => area.id === selectedArea.value).length
+    : areaList.value.length
+  return Math.ceil(filteredCount / pageSize.value)
+})
+
+// 片区选择变更处理
+const handleAreaChange = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 新增片区
+const handleAddArea = () => {
+  isEdit.value = false
+  // 重置表单
+  formData.value = {
+    id: '',
+    name: '',
+    deviceCount: 0,
+    range: ''
+  }
+  showModal.value = true
+}
+
+// 删除片区（先显示确认弹窗）
+const handleDelete = (id: string) => {
+  const area = areaList.value.find(item => item.id === id)
+  if (area) {
+    deleteAreaId.value = id
+    deleteAreaName.value = area.name
+    showDeleteConfirm.value = true
+  }
+}
+
+// 确认删除
+const confirmDelete = () => {
+  areaList.value = areaList.value.filter(area => area.id !== deleteAreaId.value)
+  showDeleteConfirm.value = false
+  // 如果删除的是当前选中的片区，清空选择
+  if (selectedArea.value === deleteAreaId.value) {
+    selectedArea.value = ''
+  }
+}
+
+// 保存片区信息
+const handleSave = () => {
+  if (isEdit.value) {
+    // 编辑模式
+    const index = areaList.value.findIndex(item => item.id === formData.value.id)
+    if (index !== -1) {
+      areaList.value[index] = { ...formData.value }
+    }
+  } else {
+    // 新增模式
+    const newArea: Area = {
+      ...formData.value,
+      id: Date.now().toString() // 生成唯一ID
+    }
+    areaList.value.unshift(newArea)
+  }
+  showModal.value = false
+}
+</script>
+
+<style scoped>
+/* 基础样式 - 与人员管理页面保持一致 */
+.area-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.filter-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+}
+
+.area-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  min-width: 200px;
+  font-size: 14px;
+}
+
+/* 表格样式 */
+.area-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.area-table th,
+.area-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.area-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.area-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-delete {
+  background-color: #ffebe6;
+  color: #cf1322;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.btn-delete:hover {
+  opacity: 0.9;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 弹窗样式 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90%;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.confirm-modal {
+  width: 400px;
+}
+
+.modal-header {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #999;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.modal-body {
+  padding: 16px;
+}
+
+.form-item {
+  margin-bottom: 16px;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  color: #666;
+  font-size: 14px;
+}
+
+.form-item input,
+.form-item textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+.btn-cancel {
+  background: #f5f5f5;
+  color: #666;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-submit {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-delete-confirm {
+  background: #cf1322;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .filter-box {
+    width: 100%;
+  }
+  
+  .area-select {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/equipment/EquipmentView.vue b/src/main/resources/web/src/views/equipment/EquipmentView.vue
new file mode 100644
index 0000000..3ddfa2e
--- /dev/null
+++ b/src/main/resources/web/src/views/equipment/EquipmentView.vue
@@ -0,0 +1,7 @@
+<!-- src/views/equipment/EquipmentView.vue -->
+<template>
+  <div class="page-container">
+    <h1>设备监控</h1>
+    <p>请选择左侧子菜单查看具体设备信息</p>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/equipment/WaterMaker.vue b/src/main/resources/web/src/views/equipment/WaterMaker.vue
new file mode 100644
index 0000000..13bc42c
--- /dev/null
+++ b/src/main/resources/web/src/views/equipment/WaterMaker.vue
@@ -0,0 +1,804 @@
+<!-- src/views/equipment/WaterMaker.vue -->
+<template>
+  <div class="water-maker-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>制水机管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 设备监控 / 制水机</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <button class="btn-add" @click="showAddModal = true">添加制水机</button>
+
+      <div class="filters">
+        <!-- 搜索框 -->
+        <div class="search-box">
+          <input
+            type="text"
+            placeholder="搜索设备ID或位置..."
+            v-model="searchKeyword"
+            @input="handleSearch"
+          >
+          <button class="search-btn" @click="handleSearch">搜索</button>
+        </div>
+
+        <!-- 片区筛选 -->
+        <select
+          v-model="selectedArea"
+          class="filter-select"
+          @change="handleSearch"
+        >
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+
+        <!-- 状态筛选 -->
+        <select
+          v-model="selectedStatus"
+          class="filter-select"
+          @change="handleSearch"
+        >
+          <option value="">全部状态</option>
+          <option value="online">在线</option>
+          <option value="offline">离线</option>
+          <option value="warning">警告</option>
+          <option value="fault">故障</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 设备表格 - 新增设备机型列 -->
+    <div class="card">
+      <table class="equipment-table">
+        <thead>
+          <tr>
+            <th>设备ID</th>
+            <th>设备机型</th> <!-- 新增机型列 -->
+            <th>所属片区</th>
+            <th>详细位置</th>
+            <th>状态</th>
+            <th>最后上传时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="device in paginatedDevices" :key="device.deviceId">
+            <td>{{ device.deviceId }}</td>
+            <td>{{ device.deviceType === 'WATER_MAKER' ? '制水机' : device.deviceType }}</td>
+            <td>{{ device.areaId }}</td>
+            <td>{{ device.installLocation }}</td>
+            <td>
+              <span :class="`status-tag ${device.status}`">
+                {{ formatStatus(device.status) }}
+              </span>
+            </td>
+            <td>{{ formatDate(device.lastHeartbeatTime) }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewDevice(device.deviceId)">查看详情</button>
+              <button
+                class="btn-online"
+                @click="updateDeviceStatus(device.deviceId, 'online')"
+                :disabled="device.status === 'online'"
+              >
+                设为在线
+              </button>
+              <button
+                class="btn-offline"
+                @click="showOfflineModal(device.deviceId)"
+                :disabled="device.status === 'offline'"
+              >
+                设为离线
+              </button>
+              <button
+                class="btn-fault"
+                @click="showFaultModalFunc(device.deviceId)"
+                :disabled="device.status === 'fault'"
+              >
+              设为故障
+              </button>
+
+            </td>
+          </tr>
+          <tr v-if="paginatedDevices.length === 0">
+            <td colspan="7" class="no-data">暂无设备数据</td> <!-- colspan从6改为7 -->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button
+        class="page-btn"
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页 (共 {{ filteredDevices.length }} 条记录)
+      </span>
+      <button
+        class="page-btn"
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 添加设备模态框 -->
+    <div v-if="showAddModal" class="modal-overlay" @click="showAddModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>添加制水机</h3>
+        <form @submit.prevent="addDevice">
+          <div class="form-group">
+            <label>设备ID:</label>
+            <input v-model="newDevice.deviceId" type="text" required>
+          </div>
+          <div class="form-group">
+            <label>设备名称:</label>
+            <input v-model="newDevice.deviceName" type="text" required>
+          </div>
+          <div class="form-group">
+            <label>所属片区:</label>
+            <select v-model="newDevice.areaId" required>
+              <option value="市区">市区</option>
+              <option value="校区">校区</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>安装位置:</label>
+            <input v-model="newDevice.installLocation" type="text" required>
+          </div>
+          <div class="form-actions">
+            <button type="button" @click="showAddModal = false">取消</button>
+            <button type="submit">添加</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- 离线原因模态框 -->
+    <div v-if="showOfflineReasonModal" class="modal-overlay" @click="showOfflineReasonModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>设置离线原因</h3>
+        <form @submit.prevent="confirmOffline">
+          <div class="form-group">
+            <label>离线原因:</label>
+            <textarea v-model="offlineReason" placeholder="请输入离线原因"></textarea>
+          </div>
+          <div class="form-actions">
+            <button type="button" @click="showOfflineReasonModal = false">取消</button>
+            <button type="submit">确认</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- 故障信息模态框 -->
+    <div v-if="showFaultModal" class="modal-overlay" @click="showFaultModal = false">
+      <div class="modal-content" @click.stop>
+        <h3>设置故障信息</h3>
+        <form @submit.prevent="confirmFault">
+          <div class="form-group">
+            <label>故障类型:</label>
+            <input v-model="faultInfo.faultType" type="text" placeholder="请输入故障类型" required>
+          </div>
+          <div class="form-group">
+            <label>故障描述:</label>
+            <textarea v-model="faultInfo.description" placeholder="请输入故障描述" required></textarea>
+          </div>
+          <div class="form-actions">
+            <button type="button" @click="showFaultModal = false">取消</button>
+            <button type="submit">确认</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { DeviceStatusApi } from '@/api/deviceStatus'
+
+// 设备状态类型定义
+type DeviceStatus = 'online' | 'offline' | 'fault'
+
+// 设备类型定义
+interface WaterMakerDevice {
+  deviceId: string
+  deviceName: string
+  deviceType: string
+  areaId: string
+  installLocation: string
+  status: DeviceStatus
+  lastHeartbeatTime?: string
+  createTime?: string
+}
+
+// 响应式数据
+const devices = ref<WaterMakerDevice[]>([])
+const searchKeyword = ref('')
+const selectedArea = ref('') // 片区筛选值
+const selectedStatus = ref('') // 状态筛选值
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 模态框相关
+const showAddModal = ref(false)
+const showOfflineReasonModal = ref(false)
+const showFaultModal = ref(false)
+
+// 当前操作的设备ID
+const currentDeviceId = ref('')
+
+// 表单数据
+const newDevice = ref({
+  deviceId: '',
+  deviceName: '',
+  areaId: '市区',
+  installLocation: '',
+  deviceType: 'WATER_MAKER'
+})
+
+const offlineReason = ref('')
+const faultInfo = ref({
+  faultType: '',
+  description: ''
+})
+
+// 加载设备数据
+// 加载设备数据 - 修改 loadDevices 函数
+// 在 loadDevices 函数中确保 deviceType 参数正确传递
+const loadDevices = async (): Promise<WaterMakerDevice[]> => {
+  try {
+    const statuses = ['online', 'offline', 'fault']
+    const allDevices: WaterMakerDevice[] = []
+
+    for (const status of statuses) {
+      // 明确指定 deviceType 参数
+      const result = await DeviceStatusApi.getDevicesByStatus(status, undefined, 'water_maker')
+
+      if (result.code === 200 && result.data && Array.isArray(result.data)) {
+        allDevices.push(...result.data.map((item: any) => ({
+          deviceId: item.deviceId,
+          deviceName: item.deviceName,
+          deviceType: item.deviceType,
+          areaId: item.areaId,
+          installLocation: item.installLocation,
+          status: item.status,
+          lastHeartbeatTime: item.lastHeartbeatTime
+        })))
+      }
+    }
+
+    devices.value = allDevices
+    return allDevices
+  } catch (error) {
+    console.error('加载设备数据失败:', error)
+    return []
+  }
+}
+
+
+
+
+// 多条件过滤设备数据
+const filteredDevices = computed(() => {
+  return devices.value.filter(device => {
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      device.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      device.installLocation.toLowerCase().includes(searchKeyword.value.toLowerCase())
+
+    const areaMatch = selectedArea.value === '' || device.areaId === selectedArea.value
+    const statusMatch = selectedStatus.value === '' || device.status === selectedStatus.value
+
+    return keywordMatch && areaMatch && statusMatch
+  })
+})
+
+// 分页计算
+const paginatedDevices = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  const end = start + pageSize
+  return filteredDevices.value.slice(start, end)
+})
+
+const totalPages = computed(() => {
+  return Math.ceil(filteredDevices.value.length / pageSize)
+})
+
+// 状态格式化
+// 状态格式化 - 位置在 script setup 部分中
+const formatStatus = (status: DeviceStatus): string => {
+  const statusMap: Record<string, string> = {
+    online: '在线',
+    offline: '离线',
+    fault: '故障'
+  }
+  return statusMap[status] || status
+}
+
+
+// 时间格式化
+const formatDate = (dateString?: string): string => {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN')
+}
+
+// 搜索处理
+const handleSearch = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 查看详情
+const viewDevice = (id: string) => {
+  router.push(`/home/equipment/water-maker/${id}`)
+}
+
+// 显示离线模态框
+const showOfflineModal = (deviceId: string) => {
+  currentDeviceId.value = deviceId
+  showOfflineReasonModal.value = true
+}
+
+// 显示故障模态框
+const showFaultModalFunc = (deviceId: string) => {
+  currentDeviceId.value = deviceId
+  showFaultModal.value = true
+}
+
+// 确认设置为离线
+const confirmOffline = async () => {
+  try {
+    const result = await DeviceStatusApi.markDeviceOffline(
+      currentDeviceId.value,
+      offlineReason.value
+    )
+
+    if (result.code === 200) {
+      const device = devices.value.find(d => d.deviceId === currentDeviceId.value)
+      if (device) {
+        device.status = 'offline'
+      }
+      showOfflineReasonModal.value = false
+      offlineReason.value = ''
+    }
+  } catch (error) {
+    console.error('设置设备离线失败:', error)
+  }
+}
+
+// 确认设置为故障
+const confirmFault = async () => {
+  try {
+    const result = await DeviceStatusApi.markDeviceFault(
+      currentDeviceId.value,
+      faultInfo.value.faultType,
+      faultInfo.value.description
+    )
+
+    if (result.code === 200) {
+      const device = devices.value.find(d => d.deviceId === currentDeviceId.value)
+      if (device) {
+        device.status = 'fault'
+      }
+      showFaultModal.value = false
+      faultInfo.value = { faultType: '', description: '' }
+    }
+  } catch (error) {
+    console.error('设置设备故障失败:', error)
+  }
+}
+
+// 更新设备状态
+// 更新设备状态 - 修改 updateDeviceStatus 函数
+const updateDeviceStatus = async (deviceId: string, status: string, remark: string = '') => {
+  try {
+    let result: any;
+
+    switch (status) {
+      case 'online':
+        result = await DeviceStatusApi.markDeviceOnline(deviceId)
+        break
+      case 'offline':
+        result = await DeviceStatusApi.markDeviceOffline(deviceId, remark)
+        break
+      case 'fault':
+        // 注意：对于故障状态，需要提供故障类型和描述
+        result = await DeviceStatusApi.markDeviceFault(deviceId, 'MANUAL_FAULT', remark || '手动设置故障')
+        break
+      default:
+        throw new Error('不支持的状态类型')
+    }
+
+    if (result.code === 200) {
+      // 更新本地数据
+      const device = devices.value.find(d => d.deviceId === deviceId)
+      if (device) {
+        device.status = status as DeviceStatus
+      }
+      return true
+    } else {
+      throw new Error(result.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('更新设备状态失败:', error)
+    throw error
+  }
+}
+
+
+// 添加设备
+const addDevice = async () => {
+  try {
+    // 构造设备对象
+    const deviceToAdd = {
+      deviceId: newDevice.value.deviceId,
+      deviceName: newDevice.value.deviceName,
+      areaId: newDevice.value.areaId,
+      installLocation: newDevice.value.installLocation,
+      deviceType: newDevice.value.deviceType
+    };
+
+    // 调用后端API添加设备
+    const result = await fetch('/api/web/device/add', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(deviceToAdd)
+    }).then(response => response.json());
+
+    if (result.code === 200) {
+      // 添加成功后重新加载设备列表
+      await loadDevices();
+
+      // 重置表单并关闭模态框
+      showAddModal.value = false;
+      newDevice.value = {
+        deviceId: '',
+        deviceName: '',
+        areaId: '市区',
+        installLocation: '',
+        deviceType: 'WATER_MAKER'
+      };
+
+      console.log('设备添加成功');
+    } else {
+      console.error('设备添加失败:', result.message);
+    }
+  } catch (error) {
+    console.error('添加设备失败:', error);
+  }
+};
+
+
+// 组件挂载时加载数据
+// 在 onMounted 中添加更多调试信息
+onMounted(async () => {
+  console.log('🚀 开始加载设备数据...')
+
+  try {
+    const result = await loadDevices()
+    console.log('🌐 API返回 data:', result)
+
+    if (result.length === 0) {
+      console.warn('⚠️ 数据库中无设备数据')
+    } else {
+      console.log('✅ 成功加载设备数据:', result)
+    }
+  } catch (error) {
+    console.error('❌ 加载设备数据失败:', error)
+  }
+})
+
+
+
+</script>
+
+<style scoped>
+/* 样式与供水机页面保持一致 */
+.water-maker-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-box input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 240px;
+}
+
+.search-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.filter-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+}
+
+.equipment-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.equipment-table th,
+.equipment-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.equipment-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.equipment-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.fault {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.operation-buttons button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.operation-buttons button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.operation-buttons button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-view {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.btn-offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.btn-fault {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  min-width: 400px;
+  max-width: 500px;
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.form-group textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.form-actions button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+}
+
+.form-actions button[type="button"] {
+  background: #f5f5f5;
+}
+
+.form-actions button[type="submit"] {
+  background: #42b983;
+  color: white;
+  border: none;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filters {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .search-box, .filter-select {
+    width: 100%;
+  }
+
+  .modal-content {
+    width: 90%;
+    min-width: auto;
+  }
+}
+</style>
diff --git a/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue b/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue
new file mode 100644
index 0000000..7221345
--- /dev/null
+++ b/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue
@@ -0,0 +1,804 @@
+<!-- src/views/equipment/WaterMakerDetail.vue -->
+<template>
+  <div class="water-machine-detail">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>制水机设备详情</h2>
+      <div class="breadcrumb">校园矿化水平台 / 设备管理 / 制水机 / 设备详情</div>
+    </div>
+
+    <!-- 设备基本信息卡片 -->
+    <div class="card device-info-card">
+      <div class="info-header">
+        <h3 class="card-title">设备基本信息</h3>
+        <button class="btn-refresh" @click="refreshData">
+          <i class="refresh-icon">↻</i> 刷新数据
+        </button>
+      </div>
+
+      <div class="info-grid">
+        <div class="info-item">
+          <span class="info-label">设备ID：</span>
+          <span class="info-value">{{ machineInfo.deviceId }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">设备型号：</span>
+          <span class="info-value">{{ machineInfo.model }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">所属片区：</span>
+          <span class="info-value">{{ machineInfo.area }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">安装位置：</span>
+          <span class="info-value">{{ machineInfo.location }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">安装日期：</span>
+          <span class="info-value">{{ formatDate(machineInfo.installDate) }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">运行状态：</span>
+          <span class="info-value status-tag" :class="machineInfo.status">{{ formatStatus(machineInfo.status) }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">最后在线时间：</span>
+          <span class="info-value">{{ formatDate(machineInfo.lastOnlineTime) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备状态和数据 -->
+    <div class="left-column">
+      <!-- 实时监测数据 -->
+      <div class="card">
+        <h3 class="card-title">实时监测数据</h3>
+        <div class="realtime-data">
+          <!-- 自来水TDS -->
+          <div class="data-item">
+            <div class="data-label">自来水TDS</div>
+            <div class="data-value">{{ realtimeData.tapWaterTds }} ppm</div>
+            <div class="data-status" :class="getTdsStatus(realtimeData.tapWaterTds, 'tap')"></div>
+          </div>
+          <!-- 纯净水TDS -->
+          <div class="data-item">
+            <div class="data-label">纯净水TDS</div>
+            <div class="data-value">{{ realtimeData.pureWaterTds }} ppm</div>
+            <div class="data-status" :class="getTdsStatus(realtimeData.pureWaterTds, 'pure')"></div>
+          </div>
+          <div class="data-item">
+            <div class="data-label">水温</div>
+            <div class="data-value">{{ realtimeData.temperature }} °C</div>
+          </div>
+          <div class="data-item">
+            <div class="data-label">出水压力</div>
+            <div class="data-value">{{ realtimeData.pressure }} MPa</div>
+          </div>
+          <div class="data-item">
+            <div class="data-label">流量计1</div>
+            <div class="data-value">{{ realtimeData.flow1 }} L/min</div>
+          </div>
+          <div class="data-item">
+            <div class="data-label">流量计2</div>
+            <div class="data-value">{{ realtimeData.flow2 }} L/min</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 滤芯状态 -->
+      <div class="card">
+        <h3 class="card-title">滤芯状态</h3>
+        <div class="filter-status">
+          <div class="filter-item" v-for="filter in filterStatus" :key="filter.id">
+            <div class="filter-name">{{ filter.name }}</div>
+            <div class="filter-progress">
+              <div class="progress-bar" :style="{ width: filter.usage + '%' }" :class="getFilterStatusClass(filter.usage)"></div>
+            </div>
+            <div class="filter-info">
+              <span class="usage">{{ filter.usage }}%</span>
+              <span class="remaining">剩余{{ filter.remainingDays }}天</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 历史数据记录 -->
+    <div class="card">
+      <div class="table-header">
+        <h3 class="card-title">历史数据记录</h3>
+        <div class="table-filter">
+          <label>日期筛选：</label>
+          <input type="date" v-model="historyDate" @change="fetchHistoryData">
+        </div>
+      </div>
+
+      <table class="history-table">
+        <thead>
+          <tr>
+            <th>日期</th>
+            <th>自来水TDS平均值 (ppm)</th>
+            <th>纯净水TDS平均值 (ppm)</th>
+            <th>矿化水TDS平均值 (ppm)</th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr v-if="historyData.length > 0">
+              <td>{{ historyData[0]?.date }}</td>
+              <td>{{ historyData[0]?.tapWaterTdsAvg }}</td>
+              <td>{{ historyData[0]?.pureWaterTdsAvg }}</td>
+              <td>{{ historyData[0]?.mineralWaterTdsAvg }}</td>
+            </tr>
+          <tr v-if="historyData.length === 0">
+            <td colspan="4" class="no-data">暂无历史数据记录</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 维护记录 -->
+    <div class="card">
+      <h3 class="card-title">维护记录</h3>
+      <table class="maintenance-table">
+        <thead>
+          <tr>
+            <th>工单编号</th>
+            <th>维护类型</th>
+            <th>维护人员</th>
+            <th>维护时间</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="record in maintenanceRecords" :key="record.orderNo">
+            <td>{{ record.orderNo }}</td>
+            <td>{{ record.maintenanceType }}</td>
+            <td>{{ record.maintainer }}</td>
+            <td>{{ formatDate(record.maintenanceTime) }}</td>
+            <td><span class="status-tag small" :class="record.status">{{ formatStatus(record.status) }}</span></td>
+            <td>
+              <button class="btn-view" @click="viewMaintenanceDetail(record.orderNo)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="maintenanceRecords.length === 0">
+            <td colspan="6" class="no-data">暂无维护记录</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { WaterMakerApi } from '@/api/waterMaker'
+
+// 设备状态类型
+type DeviceStatus = 'online' | 'offline' | 'warning' | 'error'
+
+// 制水机基本信息接口
+interface MachineInfo {
+  deviceId: string
+  model: string
+  area: string
+  location: string
+  installDate: string
+  status: DeviceStatus
+  lastOnlineTime: string
+}
+
+// 实时数据接口
+interface RealtimeData {
+  tapWaterTds: number       // 自来水TDS
+  pureWaterTds: number      // 纯净水TDS
+  temperature: number
+  pressure: number
+  flow1: number
+  flow2: number
+  updateTime: string
+}
+
+// 滤芯状态接口
+interface FilterStatus {
+  id: string
+  name: string
+  usage: number
+  remainingDays: number
+}
+
+// 历史数据记录接口
+interface HistoryRecord {
+  date: string                          // 日期
+  tapWaterTdsAvg: number                // 自来水TDS平均值
+  pureWaterTdsAvg: number               // 纯净水TDS平均值
+  mineralWaterTdsAvg: number            // 矿化水TDS平均值
+}
+
+// 维护记录接口
+interface MaintenanceRecord {
+  orderNo: string
+  maintenanceType: string
+  maintainer: string
+  maintenanceTime: string
+  status: 'completed' | 'processing' | 'pending'
+}
+
+// 路由和响应式数据
+const route = useRoute()
+const router = useRouter()
+const historyDate = ref('')
+
+// 严格类型处理：确保deviceId是string类型
+const deviceId: string = (() => {
+  const paramId = route.params.id as string | undefined
+  return paramId ?? 'WM-2023-001'
+})()
+
+// 设备信息数据
+const machineInfo = ref<MachineInfo>({
+  deviceId: deviceId,
+  model: 'WM-RO-500G',
+  area: '校区',
+  location: '第一教学楼一楼大厅',
+  installDate: '2023-06-15',
+  status: 'online',
+  lastOnlineTime: new Date().toISOString()
+})
+
+// 实时数据
+const realtimeData = ref<RealtimeData>({
+  tapWaterTds: 186,         // 自来水TDS
+  pureWaterTds: 12,         // 纯净水TDS
+  temperature: 25.6,
+  pressure: 0.45,
+  flow1: 1.2,
+  flow2: 8.1,
+  updateTime: new Date().toISOString()
+})
+
+// 滤芯状态
+const filterStatus = ref<FilterStatus[]>([
+  { id: 'f1', name: '滤芯1', usage: 65, remainingDays: 45 },
+  { id: 'f2', name: '滤芯2', usage: 42, remainingDays: 90 },
+  { id: 'f3', name: '滤芯3', usage: 30, remainingDays: 120 }
+])
+
+// 历史数据
+const historyData = ref<HistoryRecord[]>([])
+
+// 维护记录
+const maintenanceRecords = ref<MaintenanceRecord[]>([
+  {
+    orderNo: 'ORD-20231015-002',
+    maintenanceType: '滤芯更换',
+    maintainer: '张三',
+    maintenanceTime: '2023-10-15 14:30:00',
+    status: 'completed'
+  },
+  {
+    orderNo: 'ORD-20230920-015',
+    maintenanceType: '常规检修',
+    maintainer: '李四',
+    maintenanceTime: '2023-09-20 09:15:00',
+    status: 'completed'
+  }
+])
+
+// 初始化页面数据
+onMounted(async () => {
+  // 设置默认日期为今天
+  const today = new Date().toISOString().substring(0, 10)
+  historyDate.value = today
+
+  // 并行加载所有数据
+  await Promise.all([
+    loadDeviceBasicInfo(),
+    loadRealtimeData(),
+    loadFilterStatus(),
+    fetchHistoryData(),
+    loadMaintenanceRecords()
+  ])
+})
+
+// 加载设备基本信息
+const loadDeviceBasicInfo = async () => {
+  try {
+    const result = await WaterMakerApi.getDeviceById(deviceId)
+    if (result.code === 200) {
+      const data = result.data
+      machineInfo.value = {
+        deviceId: data.deviceId,
+        model: data.model || '未知型号',
+        area: data.areaId,
+        location: data.installLocation,
+        installDate: data.installDate,
+        status: data.status,
+        lastOnlineTime: data.lastHeartbeatTime
+      }
+    }
+  } catch (error) {
+    console.error('加载设备基本信息失败:', error)
+  }
+}
+
+// 加载实时数据
+const loadRealtimeData = async () => {
+  try {
+    const result = await WaterMakerApi.getRealtimeData(deviceId)
+    if (result.code === 200) {
+      const data = result.data
+      realtimeData.value = {
+        tapWaterTds: data.rawWaterTds || 0,
+        pureWaterTds: data.pureWaterTds || 0,
+        temperature: data.temperature || 0,
+        pressure: data.waterPressure || 0,
+        flow1: data.flowRate1 || 0,
+        flow2: data.flowRate2 || 0,
+        updateTime: new Date().toISOString()
+      }
+    }
+  } catch (error) {
+    console.error('加载实时数据失败:', error)
+  }
+}
+
+// 加载滤芯状态
+const loadFilterStatus = async () => {
+  try {
+    const result = await WaterMakerApi.getFilterStatus(deviceId)
+    if (result.code === 200) {
+      filterStatus.value = result.data.map((item: any) => ({
+        id: item.filterId,
+        name: item.filterName,
+        usage: item.usagePercentage,
+        remainingDays: item.remainingDays
+      }))
+    }
+  } catch (error) {
+    console.error('加载滤芯状态失败:', error)
+  }
+}
+
+// 获取历史数据
+const fetchHistoryData = async () => {
+  try {
+    const result = await WaterMakerApi.getHistoryData(deviceId, historyDate.value)
+    if (result.code === 200) {
+      historyData.value = result.data.map((item: any) => ({
+        date: item.statDate,
+        tapWaterTdsAvg: item.rawWaterTdsAvg,
+        pureWaterTdsAvg: item.pureWaterTdsAvg,
+        mineralWaterTdsAvg: item.mineralWaterTdsAvg
+      }))
+    }
+  } catch (error) {
+    console.error('获取历史数据失败:', error)
+  }
+}
+
+// 加载维护记录
+const loadMaintenanceRecords = async () => {
+  try {
+    const result = await WaterMakerApi.getMaintenanceRecords(deviceId)
+    if (result.code === 200) {
+      maintenanceRecords.value = result.data.map((item: any) => ({
+        orderNo: item.orderNo,
+        maintenanceType: item.type,
+        maintainer: item.maintainer,
+        maintenanceTime: item.maintenanceTime,
+        status: item.status
+      }))
+    }
+  } catch (error) {
+    console.error('加载维护记录失败:', error)
+  }
+}
+
+// 格式化状态显示
+const formatStatus = (status: string): string => {
+  const statusMap: Record<string, string> = {
+    online: '在线',
+    offline: '离线',
+    warning: '警告',
+    error: '故障',
+    completed: '已完成',
+    processing: '处理中',
+    pending: '待处理'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化日期
+const formatDate = (dateString?: string): string => {
+  if (!dateString) return '-'
+  try {
+    const date = new Date(dateString)
+    return isNaN(date.getTime()) ? '-' : date.toLocaleString('zh-CN')
+  } catch {
+    return '-'
+  }
+}
+
+// 获取TDS状态
+const getTdsStatus = (tds: number, type: 'tap' | 'pure'): string => {
+  if (type === 'pure') {
+    // 纯净水TDS判断
+    if (tds < 10) return 'excellent'
+    if (tds < 20) return 'good'
+    return 'warning'
+  } else {
+    // 自来水TDS判断
+    if (tds < 200) return 'good'
+    if (tds < 300) return 'warning'
+    return 'error'
+  }
+}
+
+// 获取滤芯状态类名
+const getFilterStatusClass = (usage: number) => {
+  if (usage < 70) return 'normal'
+  if (usage < 90) return 'warning'
+  return 'error'
+}
+
+// 刷新数据
+const refreshData = async () => {
+  try {
+    const result = await WaterMakerApi.refreshDeviceData(deviceId)
+    if (result.code === 200) {
+      // 刷新所有数据
+      await Promise.all([
+        loadRealtimeData(),
+        loadFilterStatus()
+      ])
+    }
+  } catch (error) {
+    console.error('刷新数据失败:', error)
+  }
+}
+
+// 查看维护详情
+const viewMaintenanceDetail = (orderNo: string) => {
+  router.push(`/home/order/detail/${orderNo}`)
+}
+</script>
+
+<style scoped>
+.water-machine-detail {
+  padding: 20px;
+}
+
+/* 页面头部样式 */
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 信息卡片样式 */
+.info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 16px 0;
+}
+
+.btn-refresh {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.btn-refresh:hover {
+  background-color: #e9ecef;
+}
+
+.refresh-icon {
+  font-size: 16px;
+}
+
+/* 信息网格样式 */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 状态标签样式 */
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.error {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.status-tag.completed {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.processing {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-tag.pending {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.small {
+  padding: 2px 6px;
+  font-size: 11px;
+}
+
+/* 左侧列样式 */
+.left-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+/* 实时数据样式 */
+.realtime-data {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.data-item {
+  background-color: #f8f9fa;
+  padding: 16px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.data-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.data-value {
+  font-size: 22px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.data-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.data-status.excellent {
+  background-color: #52c41a;
+}
+
+.data-status.good {
+  background-color: #1890ff;
+}
+
+.data-status.warning {
+  background-color: #faad14;
+}
+
+.data-status.error {
+  background-color: #ff4d4f;
+}
+
+/* 滤芯状态样式 */
+.filter-status {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filter-name {
+  font-size: 14px;
+  color: #333;
+}
+
+.filter-progress {
+  height: 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  transition: width 0.3s;
+}
+
+.progress-bar.normal {
+  background-color: #52c41a;
+}
+
+.progress-bar.warning {
+  background-color: #faad14;
+}
+
+.progress-bar.error {
+  background-color: #ff4d4f;
+}
+
+.filter-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+}
+
+/* 表格样式 */
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.table-filter input {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.history-table, .maintenance-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.history-table th, .history-table td,
+.maintenance-table th, .maintenance-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.history-table th, .maintenance-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.history-table tbody tr:hover,
+.maintenance-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+/* 按钮样式 */
+.btn-view {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-view:hover {
+  opacity: 0.9;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .realtime-data {
+    grid-template-columns: 1fr;
+  }
+
+  .table-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .history-table, .maintenance-table {
+    font-size: 12px;
+  }
+
+  .history-table th, .history-table td,
+  .maintenance-table th, .maintenance-table td {
+    padding: 8px 6px;
+  }
+}
+</style>
diff --git a/src/main/resources/web/src/views/equipment/WaterSupplier.vue b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
new file mode 100644
index 0000000..930438e
--- /dev/null
+++ b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
@@ -0,0 +1,412 @@
+<!-- src/views/equipment/WaterSupplier.vue -->
+<template>
+  <div class="water-supplier-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>供水机管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 设备监控 / 供水机</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <button class="btn-add">添加供水机</button>
+      
+      <div class="filters">
+        <!-- 搜索框 -->
+        <div class="search-box">
+          <input 
+            type="text" 
+            placeholder="搜索设备ID或位置..." 
+            v-model="searchKeyword"
+            @input="handleSearch"
+          >
+          <button class="search-btn">搜索</button>
+        </div>
+        
+        <!-- 片区筛选 -->
+        <select 
+          v-model="selectedArea" 
+          class="filter-select"
+          @change="handleSearch"
+        >
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+        
+        <!-- 状态筛选 -->
+        <select 
+          v-model="selectedStatus" 
+          class="filter-select"
+          @change="handleSearch"
+        >
+          <option value="">全部状态</option>
+          <option value="online">在线</option>
+          <option value="offline">离线</option>
+          <option value="warning">警告</option>
+          <option value="error">故障</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 设备表格 - 新增设备机型列 -->
+    <div class="card">
+      <table class="equipment-table">
+        <thead>
+          <tr>
+            <th>设备ID</th>
+            <th>设备机型</th> <!-- 新增机型列 -->
+            <th>所属片区</th>
+            <th>详细位置</th>
+            <th>状态</th>
+            <th>最后上传时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="device in filteredDevices" :key="device.id">
+            <td>{{ device.id }}</td>
+            <td>供水机</td> <!-- 固定显示供水机机型 -->
+            <td>{{ device.area }}</td>
+            <td>{{ device.location }}</td>
+            <td>
+              <span :class="`status-tag ${device.status}`">
+                {{ formatStatus(device.status) }}
+              </span>
+            </td>
+            <td>{{ device.lastUploadTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewDevice(device.id)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="filteredDevices.length === 0">
+            <td colspan="7" class="no-data">暂无设备数据</td> <!-- colspan从6改为7 -->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 设备状态类型定义
+type DeviceStatus = 'online' | 'offline' | 'warning' | 'error'
+
+// 设备数据接口
+interface WaterSupplierDevice {
+  id: string
+  area: string
+  location: string
+  status: DeviceStatus
+  lastUploadTime: string
+}
+
+// 模拟供水机设备数据
+const waterSupplierDevices: WaterSupplierDevice[] = [
+  {
+    id: 'WS-2023-001',
+    area: '市区',
+    location: '行政中心大楼1楼大厅',
+    status: 'online',
+    lastUploadTime: '2023-10-25 10:15:33'
+  },
+  {
+    id: 'WS-2023-002',
+    area: '校区',
+    location: '研究生公寓3号楼一层',
+    status: 'online',
+    lastUploadTime: '2023-10-25 09:30:22'
+  },
+  {
+    id: 'WS-2023-003',
+    area: '市区',
+    location: '科技园区A座大厅',
+    status: 'warning',
+    lastUploadTime: '2023-10-25 08:45:11'
+  },
+  {
+    id: 'WS-2023-004',
+    area: '校区',
+    location: '留学生公寓1楼',
+    status: 'offline',
+    lastUploadTime: '2023-10-24 23:05:47'
+  },
+  {
+    id: 'WS-2023-005',
+    area: '市区',
+    location: '图书馆新馆2楼',
+    status: 'error',
+    lastUploadTime: '2023-10-25 07:20:35'
+  }
+]
+
+// 响应式数据
+const devices = ref<WaterSupplierDevice[]>(waterSupplierDevices)
+const searchKeyword = ref('')
+const selectedArea = ref('') // 片区筛选值
+const selectedStatus = ref('') // 状态筛选值
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 多条件过滤设备数据
+const filteredDevices = computed(() => {
+  return devices.value.filter(device => {
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      device.id.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      device.location.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    const areaMatch = selectedArea.value === '' || device.area === selectedArea.value
+    const statusMatch = selectedStatus.value === '' || device.status === selectedStatus.value
+    
+    return keywordMatch && areaMatch && statusMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredDevices.value.length / pageSize)
+})
+
+// 状态格式化
+const formatStatus = (status: DeviceStatus): string => {
+  const statusMap = {
+    online: '在线',
+    offline: '离线',
+    warning: '警告',
+    error: '故障'
+  }
+  return statusMap[status]
+}
+
+// 搜索处理
+const handleSearch = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 查看详情
+const viewDevice = (id: string) => {
+  router.push(`/home/equipment/water-supplier/${id}`)
+}
+</script>
+
+<style scoped>
+/* 样式与制水机页面保持一致 */
+.water-supplier-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-box input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 240px;
+}
+
+.search-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.filter-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+}
+
+.equipment-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.equipment-table th,
+.equipment-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.equipment-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.equipment-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.error {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.operation-buttons button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.operation-buttons button:hover {
+  opacity: 0.9;
+}
+
+.btn-view {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filters {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .search-box, .filter-select {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/personnel/Admin.vue b/src/main/resources/web/src/views/personnel/Admin.vue
new file mode 100644
index 0000000..efb0218
--- /dev/null
+++ b/src/main/resources/web/src/views/personnel/Admin.vue
@@ -0,0 +1,371 @@
+<!-- src/views/personnel/Admin.vue -->
+<template>
+  <div class="admin-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>管理员管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 人员管理 / 管理员</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <button class="btn-add" @click="handleAddAdmin">新增管理员</button>
+      
+      <div class="search-box">
+        <input 
+          type="text" 
+          placeholder="搜索姓名或账号..." 
+          v-model="searchKeyword"
+          @input="handleSearch"
+        >
+        <button class="search-btn" @click="handleSearch">搜索</button>
+      </div>
+    </div>
+
+    <!-- 管理员表格 -->
+    <div class="card">
+      <table class="admin-table">
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>账号</th>
+            <th>联系电话</th>
+            <th>身份</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="admin in filteredAdmins" :key="admin.id">
+            <td>{{ admin.name }}</td>
+            <td>{{ admin.account }}</td>
+            <td>{{ admin.phone }}</td>
+            <td>{{ admin.role }}</td>
+            <td>
+              <span :class="`status-tag ${admin.status}`">
+                {{ admin.status === 'active' ? '启用' : '禁用' }}
+              </span>
+            </td>
+            <td class="operation-buttons">
+              <button 
+                class="btn-edit" 
+                @click="handleEdit(admin.id)"
+              >
+                编辑
+              </button>
+              <button 
+                class="btn-status" 
+                :class="admin.status === 'active' ? 'btn-disable' : 'btn-enable'"
+                @click="handleStatusChange(admin.id, admin.status)"
+              >
+                {{ admin.status === 'active' ? '禁用' : '启用' }}
+              </button>
+            </td>
+          </tr>
+          <tr v-if="filteredAdmins.length === 0">
+            <td colspan="6" class="no-data">暂无管理员数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 管理员状态类型
+type AdminStatus = 'active' | 'disabled'
+
+// 管理员数据接口
+interface Admin {
+  id: string
+  name: string
+  account: string
+  phone: string
+  role: string
+  status: AdminStatus
+}
+
+// 模拟管理员数据
+const adminList: Admin[] = [
+  {
+    id: '1',
+    name: '张三',
+    account: 'admin01',
+    phone: '13800138000',
+    role: '超级管理员',
+    status: 'active'
+  },
+  {
+    id: '2',
+    name: '李四',
+    account: 'admin02',
+    phone: '13900139000',
+    role: '设备管理员',
+    status: 'active'
+  },
+  {
+    id: '3',
+    name: '王五',
+    account: 'admin03',
+    phone: '13700137000',
+    role: '系统管理员',
+    status: 'disabled'
+  }
+]
+
+// 响应式数据
+const admins = ref<Admin[]>(adminList)
+const searchKeyword = ref('')
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 筛选后的管理员列表
+const filteredAdmins = computed(() => {
+  return admins.value.filter(admin => {
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      admin.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      admin.account.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    return keywordMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredAdmins.value.length / pageSize)
+})
+
+// 搜索处理
+const handleSearch = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 状态变更处理
+const handleStatusChange = (id: string, currentStatus: AdminStatus) => {
+  const newStatus: AdminStatus = currentStatus === 'active' ? 'disabled' : 'active'
+  admins.value = admins.value.map(admin => 
+    admin.id === id ? { ...admin, status: newStatus } : admin
+  )
+  // 实际项目中这里应该调用API更新状态
+}
+
+// 编辑处理
+const handleEdit = (id: string) => {
+  router.push(`/home/personnel/admin/edit/${id}`)
+}
+
+// 新增管理员
+const handleAddAdmin = () => {
+  router.push('/home/personnel/admin/add')
+}
+</script>
+
+<style scoped>
+.admin-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-box input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 240px;
+}
+
+.search-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.admin-table th,
+.admin-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.admin-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.admin-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.active {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.disabled {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.operation-buttons button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.operation-buttons button:hover {
+  opacity: 0.9;
+}
+
+.btn-edit {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-enable {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.btn-disable {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .search-box {
+    width: 100%;
+  }
+  
+  .search-box input {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/personnel/Maintenance.vue b/src/main/resources/web/src/views/personnel/Maintenance.vue
new file mode 100644
index 0000000..c4d1de9
--- /dev/null
+++ b/src/main/resources/web/src/views/personnel/Maintenance.vue
@@ -0,0 +1,387 @@
+<!-- src/views/personnel/Maintenance.vue -->
+<template>
+  <div class="maintenance-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>维修人员管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 人员管理 / 维修人员</div>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-bar">
+      <button class="btn-add" @click="handleAddMaintenance">新增维修人员</button>
+      
+      <div class="search-box">
+        <input 
+          type="text" 
+          placeholder="搜索姓名或账号..." 
+          v-model="searchKeyword"
+          @input="handleSearch"
+        >
+        <button class="search-btn" @click="handleSearch">搜索</button>
+      </div>
+    </div>
+
+    <!-- 维修人员表格 -->
+    <div class="card">
+      <table class="maintenance-table">
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>账号</th>
+            <th>联系电话</th>
+            <th>维修片区</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="staff in filteredStaff" :key="staff.id">
+            <td>{{ staff.name }}</td>
+            <td>{{ staff.account }}</td>
+            <td>{{ staff.phone }}</td>
+            <td>{{ staff.area }}</td>
+            <td>
+              <span :class="`status-tag ${staff.status}`">
+                {{ staff.status === 'active' ? '启用' : '禁用' }}
+              </span>
+            </td>
+            <td class="operation-buttons">
+              <button 
+                class="btn-view" 
+                @click="handleViewRecords(staff.id)"
+              >
+                查看维修记录
+              </button>
+              <button 
+                class="btn-edit" 
+                @click="handleEdit(staff.id)"
+              >
+                编辑
+              </button>
+              <button 
+                class="btn-status" 
+                :class="staff.status === 'active' ? 'btn-disable' : 'btn-enable'"
+                @click="handleStatusChange(staff.id, staff.status)"
+              >
+                {{ staff.status === 'active' ? '禁用' : '启用' }}
+              </button>
+            </td>
+          </tr>
+          <tr v-if="filteredStaff.length === 0">
+            <td colspan="6" class="no-data">暂无维修人员数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 维修人员状态类型
+type StaffStatus = 'active' | 'disabled'
+
+// 维修人员数据接口
+interface MaintenanceStaff {
+  id: string
+  name: string
+  account: string
+  phone: string
+  area: string
+  status: StaffStatus
+}
+
+// 模拟维修人员数据
+const staffList: MaintenanceStaff[] = [
+  {
+    id: '1',
+    name: '赵六',
+    account: 'repair01',
+    phone: '13500135000',
+    area: '市区',
+    status: 'active'
+  },
+  {
+    id: '2',
+    name: '孙七',
+    account: 'repair02',
+    phone: '13600136000',
+    area: '校区',
+    status: 'active'
+  },
+  {
+    id: '3',
+    name: '周八',
+    account: 'repair03',
+    phone: '13400134000',
+    area: '市区',
+    status: 'disabled'
+  }
+]
+
+// 响应式数据
+const staff = ref<MaintenanceStaff[]>(staffList)
+const searchKeyword = ref('')
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 筛选后的维修人员列表
+const filteredStaff = computed(() => {
+  return staff.value.filter(person => {
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      person.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      person.account.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    return keywordMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredStaff.value.length / pageSize)
+})
+
+// 搜索处理
+const handleSearch = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 状态变更处理
+const handleStatusChange = (id: string, currentStatus: StaffStatus) => {
+  const newStatus: StaffStatus = currentStatus === 'active' ? 'disabled' : 'active'
+  staff.value = staff.value.map(person => 
+    person.id === id ? { ...person, status: newStatus } : person
+  )
+  // 实际项目中这里应该调用API更新状态
+}
+
+// 编辑处理
+const handleEdit = (id: string) => {
+  router.push(`/home/personnel/maintenance/edit/${id}`)
+}
+
+// 查看维修记录
+const handleViewRecords = (id: string) => {
+  router.push(`/home/personnel/maintenance/records/${id}`)
+}
+
+// 新增维修人员
+const handleAddMaintenance = () => {
+  router.push('/home/personnel/maintenance/add')
+}
+</script>
+
+<style scoped>
+.maintenance-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.btn-add {
+  background: #42b983;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-add:hover {
+  background: #359e75;
+}
+
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-box input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 240px;
+}
+
+.search-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.maintenance-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.maintenance-table th,
+.maintenance-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.maintenance-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.maintenance-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.active {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.disabled {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.operation-buttons button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.operation-buttons button:hover {
+  opacity: 0.9;
+}
+
+.btn-view {
+  background-color: #f6f7ff;
+  color: #667eea;
+}
+
+.btn-edit {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-enable {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.btn-disable {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .search-box {
+    width: 100%;
+  }
+  
+  .search-box input {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/personnel/User.vue b/src/main/resources/web/src/views/personnel/User.vue
new file mode 100644
index 0000000..4c8d46b
--- /dev/null
+++ b/src/main/resources/web/src/views/personnel/User.vue
@@ -0,0 +1,407 @@
+<!-- src/views/personnel/User.vue -->
+<template>
+  <div class="user-page">
+    <!-- 页面标题和面包屑（恢复，与管理员/维修人员页面一致） -->
+    <div class="page-header">
+      <h2>用户管理</h2>
+      <div class="breadcrumb">校园矿化水平台 / 人员管理 / 用户</div>
+    </div>
+
+    <!-- 操作按钮区（移除新增按钮，保留搜索功能） -->
+    <div class="action-bar">
+      <!-- 移除新增用户按钮 -->
+      
+      <div class="search-box">
+        <input 
+          type="text" 
+          placeholder="搜索姓名或账号..." 
+          v-model="searchKeyword"
+          @input="handleSearch"
+        >
+        <button class="search-btn" @click="handleSearch">搜索</button>
+      </div>
+    </div>
+
+    <!-- 用户表格（保持与管理员/维修人员页面一致的列结构） -->
+    <div class="card">
+      <table class="user-table">
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>账号</th>
+            <th>联系电话</th>
+            <th>身份</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in filteredUsers" :key="user.id">
+            <td>{{ user.name }}</td>
+            <td>{{ user.account }}</td>
+            <td>{{ user.phone }}</td>
+            <td>
+              <span :class="`role-tag ${user.role}`">
+                {{ formatRole(user.role) }}
+              </span>
+            </td>
+            <td>
+              <span :class="`status-tag ${user.status}`">
+                {{ user.status === 'active' ? '启用' : '禁用' }}
+              </span>
+            </td>
+            <td class="operation-buttons">
+              <button 
+                class="btn-view" 
+                @click="handleView(user.id)"
+              >
+                查看
+              </button>
+              <button 
+                class="btn-edit" 
+                @click="handleEdit(user.id)"
+              >
+                编辑
+              </button>
+              <button 
+                class="btn-status" 
+                :class="user.status === 'active' ? 'btn-disable' : 'btn-enable'"
+                @click="handleStatusChange(user.id, user.status)"
+              >
+                {{ user.status === 'active' ? '禁用' : '启用' }}
+              </button>
+            </td>
+          </tr>
+          <tr v-if="filteredUsers.length === 0">
+            <td colspan="6" class="no-data">暂无用户数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件（与管理员/维修人员页面样式一致） -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 限定用户身份类型（仅学生、老师、游客）
+type UserRole = 'student' | 'teacher' | 'visitor'
+type UserStatus = 'active' | 'disabled'
+
+// 用户数据接口
+interface User {
+  id: string
+  name: string
+  account: string
+  phone: string
+  role: UserRole
+  status: UserStatus
+}
+
+// 模拟用户数据（仅包含学生、老师、游客三种身份）
+const userList: User[] = [
+  {
+    id: '1',
+    name: '吴九',
+    account: 'user01',
+    phone: '13100131000',
+    role: 'student', // 学生
+    status: 'active'
+  },
+  {
+    id: '2',
+    name: '郑十',
+    account: 'user02',
+    phone: '13200132000',
+    role: 'teacher', // 老师
+    status: 'active'
+  },
+  {
+    id: '3',
+    name: '王十一',
+    account: 'user03',
+    phone: '13300133000',
+    role: 'visitor', // 游客
+    status: 'disabled'
+  }
+]
+
+// 响应式数据（与管理员/维修人员页面逻辑一致）
+const users = ref<User[]>(userList)
+const searchKeyword = ref('')
+const currentPage = ref(1)
+const pageSize = 10
+const router = useRouter()
+
+// 格式化身份显示（转换为中文）
+const formatRole = (role: UserRole) => {
+  switch(role) {
+    case 'student': return '学生';
+    case 'teacher': return '老师';
+    case 'visitor': return '游客';
+    default: return '未知身份';
+  }
+}
+
+// 筛选后的用户列表（恢复搜索逻辑）
+const filteredUsers = computed(() => {
+  return users.value.filter(user => {
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      user.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      user.account.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    return keywordMatch
+  })
+})
+
+// 分页计算（与管理员/维修人员页面一致）
+const totalPages = computed(() => {
+  return Math.ceil(filteredUsers.value.length / pageSize)
+})
+
+// 搜索处理（恢复）
+const handleSearch = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
+// 状态变更处理
+const handleStatusChange = (id: string, currentStatus: UserStatus) => {
+  const newStatus: UserStatus = currentStatus === 'active' ? 'disabled' : 'active'
+  users.value = users.value.map(user => 
+    user.id === id ? { ...user, status: newStatus } : user
+  )
+}
+
+// 查看用户详情
+const handleView = (id: string) => {
+  router.push(`/home/personnel/user/view/${id}`)
+}
+
+// 编辑用户
+const handleEdit = (id: string) => {
+  router.push(`/home/personnel/user/edit/${id}`)
+}
+</script>
+
+<style scoped>
+/* 完全复用管理员/维修人员页面的样式，仅调整角色标签颜色 */
+.user-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-box input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 240px;
+}
+
+.search-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.user-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.user-table th,
+.user-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.user-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.user-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+/* 状态标签样式（与管理员/维修人员页面一致） */
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.active {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.disabled {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+/* 角色标签样式（新增，区分学生/老师/游客） */
+.role-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.role-tag.student {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.role-tag.teacher {
+  background-color: #f6f7ff;
+  color: #667eea;
+}
+
+.role-tag.visitor {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.operation-buttons button {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.operation-buttons button:hover {
+  opacity: 0.9;
+}
+
+.btn-view {
+  background-color: #f6f7ff;
+  color: #667eea;
+}
+
+.btn-edit {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-enable {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.btn-disable {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 响应式调整（与管理员/维修人员页面一致） */
+@media (max-width: 768px) {
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .search-box {
+    width: 100%;
+  }
+  
+  .search-box input {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/Completed.vue b/src/main/resources/web/src/views/workorder/Completed.vue
new file mode 100644
index 0000000..b675c52
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/Completed.vue
@@ -0,0 +1,290 @@
+<!-- src/views/order/OrderCompleted.vue -->
+<template>
+  <div class="order-completed-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>已结单工单</h2>
+      <div class="breadcrumb">校园矿化水平台 / 工单管理 / 已结单</div>
+    </div>
+
+    <!-- 检索筛选区 -->
+    <div class="filter-bar">
+      <!-- 工单号/设备ID搜索 -->
+      <div class="filter-item search-item">
+        <label>搜索：</label>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          class="search-input"
+          placeholder="输入工单号或设备ID搜索"
+          @input="handleSearch"
+        >
+      </div>
+
+      <!-- 片区筛选 -->
+      <div class="filter-item">
+        <label>所属片区：</label>
+        <select v-model="filterForm.area" class="filter-select" @change="handleFilter">
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+      </div>
+
+      <!-- 日期筛选 -->
+      <div class="filter-item">
+        <label>创建日期：</label>
+        <input 
+          type="date" 
+          v-model="filterForm.createDate" 
+          class="filter-input"
+          @change="handleFilter"
+        >
+      </div>
+
+      <!-- 重置按钮 -->
+      <button class="btn-reset" @click="resetFilter">重置筛选</button>
+    </div>
+
+    <!-- 工单表格 -->
+    <div class="card">
+      <table class="order-table">
+        <thead>
+          <tr>
+            <th>工单号</th>
+            <th>设备</th>
+            <th>片区</th>
+            <th>问题描述</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in filteredOrders" :key="order.id">
+            <td>{{ order.orderNo }}</td>
+            <td>
+              <div class="device-info">
+                <div class="device-type">{{ order.deviceType }}</div>
+                <div class="device-id">{{ order.deviceId }}</div>
+              </div>
+            </td>
+            <td>{{ order.area }}</td>
+            <td class="desc-cell">{{ order.problemDesc }}</td>
+            <td>
+              <span :class="`status-tag ${order.status}`">
+                {{ formatStatus(order.status) }}
+              </span>
+            </td>
+            <td>{{ order.createTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewOrderDetail(order.id)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="filteredOrders.length === 0">
+            <td colspan="7" class="no-data">暂无已结单工单</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 工单状态类型
+type OrderStatus = 'timeout' | 'pending' | 'processing' | 'reviewing' | 'completed'
+
+// 工单数据接口
+interface CompletedOrder {
+  id: string
+  orderNo: string
+  deviceType: string // 设备机型（制水机/供水机）
+  deviceId: string // 设备ID
+  area: string // 所属片区
+  problemDesc: string // 问题描述
+  status: OrderStatus // 工单状态
+  createTime: string // 创建时间
+}
+
+// 模拟已结单工单数据
+const orderList: CompletedOrder[] = [
+  {
+    id: '11',
+    orderNo: 'ORD-20231023-001',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-001',
+    area: '市区',
+    problemDesc: '更换密封垫后漏水问题已解决，设备运行正常',
+    status: 'completed',
+    createTime: '2023-10-23 08:10:05'
+  },
+  {
+    id: '12',
+    orderNo: 'ORD-20231023-002',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-001',
+    area: '校区',
+    problemDesc: '水质检测合格，出水口感异常问题已解决',
+    status: 'completed',
+    createTime: '2023-10-23 14:20:33'
+  },
+  {
+    id: '13',
+    orderNo: 'ORD-20231024-003',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-002',
+    area: '校区',
+    problemDesc: '水泵检修完成，出水速度恢复正常，已审核通过',
+    status: 'completed',
+    createTime: '2023-10-24 11:30:15'
+  }
+]
+
+// 响应式数据
+const orders = ref<CompletedOrder[]>(orderList)
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 搜索关键词（工单号/设备ID）
+const searchKeyword = ref('')
+
+// 筛选表单数据
+const filterForm = ref({
+  area: '', // 片区筛选
+  createDate: '' // 日期筛选
+})
+
+// 格式化状态显示
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap = {
+    timeout: '超时未抢',
+    pending: '待抢单',
+    processing: '处理中',
+    reviewing: '待审核',
+    completed: '已结单'
+  }
+  return statusMap[status]
+}
+
+// 筛选后的工单列表
+const filteredOrders = computed(() => {
+  return orders.value.filter(order => {
+    // 工单号/设备ID搜索匹配
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      order.orderNo.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      order.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    // 片区筛选
+    const areaMatch = filterForm.value.area === '' || order.area === filterForm.value.area
+    
+    // 日期筛选（匹配日期部分，忽略时间）
+    const dateMatch = filterForm.value.createDate === '' || 
+      order.createTime.split(' ')[0] === filterForm.value.createDate
+    
+    return keywordMatch && areaMatch && dateMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredOrders.value.length / pageSize)
+})
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1 // 搜索后重置到第一页
+}
+
+// 处理筛选（片区/日期）
+const handleFilter = () => {
+  currentPage.value = 1 // 筛选后重置到第一页
+}
+
+// 重置筛选条件
+const resetFilter = () => {
+  searchKeyword.value = '' // 清空搜索关键词
+  filterForm.value = {
+    area: '',
+    createDate: ''
+  }
+  currentPage.value = 1
+}
+
+// 查看工单详情
+const viewOrderDetail = (id: string) => {
+   router.push(`/home/work-order/completed/${id}`)
+}
+</script>
+
+<style scoped>
+/* 样式与前几个页面完全一致，仅修改页面容器类名 */
+.order-completed-page {
+  padding: 20px;
+}
+
+/* 复用相同样式 */
+.page-header { margin-bottom: 24px; }
+.page-header h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 8px; }
+.breadcrumb { color: #666; font-size: 14px; }
+.filter-bar { display: flex; align-items: center; gap: 20px; padding: 16px; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 16px; flex-wrap: wrap; }
+.filter-item { display: flex; align-items: center; gap: 8px; }
+.filter-item label { font-size: 14px; color: #4e5969; font-weight: 500; }
+.search-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 240px; }
+.filter-select, .filter-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 160px; }
+.btn-reset { padding: 8px 16px; border: 1px solid #ddd; background-color: white; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.3s; }
+.btn-reset:hover { background-color: #f0f0f0; }
+.order-table { width: 100%; border-collapse: collapse; }
+.order-table th, .order-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; }
+.order-table th { background-color: #f8f9fa; font-weight: 600; color: #4e5969; font-size: 14px; }
+.order-table tbody tr:hover { background-color: #f8f9fa; }
+.device-info { display: flex; flex-direction: column; gap: 4px; }
+.device-type { font-weight: 500; color: #333; }
+.device-id { font-size: 12px; color: #666; }
+.desc-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+.desc-cell:hover { white-space: normal; overflow: visible; background-color: white; z-index: 10; position: relative; }
+.status-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+.status-tag.timeout { background-color: #ffebe6; color: #cf1322; }
+.status-tag.pending { background-color: #fff7e6; color: #d48806; }
+.status-tag.processing { background-color: #e6f7ff; color: #1890ff; }
+.status-tag.reviewing { background-color: #f6f7ff; color: #667eea; }
+.status-tag.completed { background-color: #e6f7ee; color: #00875a; }
+.operation-buttons { display: flex; gap: 8px; }
+.btn-view { padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; transition: opacity 0.3s; background-color: #e6f7ff; color: #1890ff; }
+.btn-view:hover { opacity: 0.9; }
+.no-data { text-align: center; padding: 40px 0; color: #8c8c8c; }
+.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; color: #666; font-size: 14px; }
+.page-btn { padding: 4px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; }
+.page-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-bar { flex-direction: column; align-items: flex-start; }
+  .filter-item { width: 100%; }
+  .search-input, .filter-select, .filter-input { width: 100%; }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/CompletedDetail.vue b/src/main/resources/web/src/views/workorder/CompletedDetail.vue
new file mode 100644
index 0000000..e410e73
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/CompletedDetail.vue
@@ -0,0 +1,455 @@
+<!-- src/views/workorder/CompletedDetail.vue -->
+<template>
+  <div class="completed-detail-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <div>
+        <h2>结单信息</h2>
+        <div class="breadcrumb">矿化水平台 / 工单管理 / 已结单 / 工单信息</div>
+      </div>
+      <button class="btn-back" @click="handleBack">返回</button>
+    </div>
+
+    <!-- 工单基本信息卡片 -->
+    <div class="card main-card">
+      <div class="card-header">
+        <h3>工单基本信息</h3>
+      </div>
+      <div class="card-body">
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="info-label">工单号：</span>
+            <span class="info-value">{{ orderDetail.orderNo }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">工单状态：</span>
+            <span class="info-value status-tag completed">{{ formatStatus(orderDetail.status) }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">维修人员：</span>
+            <span class="info-value">{{ orderDetail.repairman }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">联系电话：</span>
+            <span class="info-value">{{ orderDetail.phone }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">接单时间：</span>
+            <span class="info-value">{{ orderDetail.acceptTime }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设备ID：</span>
+            <span class="info-value">{{ orderDetail.deviceId }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">警告项目：</span>
+            <span class="info-value">{{ orderDetail.warningItem }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设备位置：</span>
+            <span class="info-value">{{ orderDetail.location }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 处理详情 -->
+    <div class="card">
+      <div class="card-header">
+        <h3>处理详情</h3>
+      </div>
+      <div class="card-body">
+        <div class="detail-item">
+          <span class="detail-label">处理备注：</span>
+          <div class="detail-content">{{ orderDetail.processRemark }}</div>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">实际处理：</span>
+          <div class="detail-content">{{ orderDetail.actualProcess }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 现场照片 -->
+    <div class="card">
+      <div class="card-header">
+        <h3>现场照片</h3>
+      </div>
+      <div class="card-body">
+        <div class="photos-container">
+          <div class="photo-item" v-for="(photo, index) in orderDetail.photos" :key="index">
+            <img :src="photo" :alt="`现场照片 ${index + 1}`" class="现场照片" @click="previewPhoto(photo)">
+          </div>
+          <div v-if="orderDetail.photos.length === 0" class="no-photos">暂无现场照片</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 结单信息 -->
+    <div class="card">
+      <div class="card-header">
+        <h3>结单信息</h3>
+      </div>
+      <div class="card-body">
+        <div class="detail-item total-cost">
+          <span class="detail-label">结单总费用：</span>
+          <div class="detail-content cost-value">{{ orderDetail.totalCost }}</div>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">审核意见：</span>
+          <div class="detail-content">{{ orderDetail.reviewOpinion || '无审核意见' }}</div>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">结单时间：</span>
+          <div class="detail-content">{{ orderDetail.completeTime }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 照片预览弹窗 -->
+    <div v-if="previewImage" class="photo-preview-overlay" @click="previewImage = ''">
+      <div class="photo-preview-container" @click.stop>
+        <img :src="previewImage" alt="照片预览" class="preview-img">
+        <button class="preview-close" @click="previewImage = ''">×</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// 工单状态类型定义
+type OrderStatus = 'timeout' | 'pending' | 'processing' | 'reviewing' | 'completed'
+
+// 结单工单详情接口定义
+interface OrderDetail {
+  id: string
+  orderNo: string
+  status: OrderStatus
+  repairman: string
+  phone: string
+  acceptTime: string
+  completeTime: string
+  deviceId: string
+  warningItem: string
+  location: string
+  processRemark: string
+  actualProcess: string
+  totalCost: string
+  reviewOpinion?: string
+  photos: string[]
+}
+
+// 响应式数据
+const orderDetail = ref<OrderDetail>({
+  id: '',
+  orderNo: '',
+  status: 'completed',
+  repairman: '',
+  phone: '',
+  acceptTime: '',
+  completeTime: '',
+  deviceId: '',
+  warningItem: '',
+  location: '',
+  processRemark: '',
+  actualProcess: '',
+  totalCost: '',
+  photos: []
+})
+const previewImage = ref('')
+
+// 路由相关
+const route = useRoute()
+const router = useRouter()
+
+// 格式化状态显示文本
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap: Record<OrderStatus, string> = {
+    timeout: '超时未抢',
+    pending: '待抢单',
+    processing: '处理中',
+    reviewing: '待审核',
+    completed: '已结单'
+  }
+  return statusMap[status]
+}
+
+// 获取工单详情数据
+const fetchOrderDetail = async (id: string) => {
+  try {
+    // 实际项目中这里会调用真实API获取数据
+    // 示例：const response = await getCompletedOrderDetailApi(id)
+    // orderDetail.value = response.data
+
+    // 模拟API数据
+    const mockData: Record<string, OrderDetail> = {
+      '11': {
+        id: '11',
+        orderNo: '1O05',
+        status: 'completed',
+        repairman: '王五',
+        phone: '123456789',
+        acceptTime: '2025/10/20-16:21',
+        completeTime: '2025/10/20-18:45',
+        deviceId: '供水机#A11',
+        warningItem: '更换滤芯',
+        location: 'A区图书馆',
+        processRemark: '原滤芯老旧已损，更换了新滤芯',
+        actualProcess: '更换滤芯',
+        totalCost: '110元',
+        reviewOpinion: '审核通过，已结单',
+        photos: [
+          'https://picsum.photos/seed/filter1/400/300',
+          'https://picsum.photos/seed/filter2/400/300'
+        ]
+      },
+      '12': {
+        id: '12',
+        orderNo: '1O06',
+        status: 'completed',
+        repairman: '赵六',
+        phone: '987654321',
+        acceptTime: '2025/10/21-09:15',
+        completeTime: '2025/10/21-11:30',
+        deviceId: '制水机#B07',
+        warningItem: '水泵故障',
+        location: 'B区教学楼',
+        processRemark: '水泵已修复，设备运行正常',
+        actualProcess: '维修水泵，更换损坏零件',
+        totalCost: '260元',
+        reviewOpinion: '维修合格，同意结单',
+        photos: [
+          'https://picsum.photos/seed/pump1/400/300',
+          'https://picsum.photos/seed/pump2/400/300'
+        ]
+      }
+    }
+    
+    // 模拟网络延迟
+    await new Promise(resolve => setTimeout(resolve, 300))
+    
+    if (mockData[id]) {
+      orderDetail.value = mockData[id]
+    } else {
+      throw new Error('未找到工单数据')
+    }
+  } catch (error) {
+    console.error('获取工单详情失败:', error)
+    alert('获取工单详情详情失败，请重试')
+    router.push('/home/work-order/completed')
+  }
+}
+
+// 预览照片
+const previewPhoto = (photo: string) => {
+  previewImage.value = photo
+}
+
+// 返回上一页
+const handleBack = () => {
+  router.go(-1)
+}
+
+// 页面加载时获取工单详情
+onMounted(() => {
+  const id = route.params.id as string
+  if (id) {
+    fetchOrderDetail(id)
+  } else {
+    router.push('/home/work-order/completed')
+  }
+})
+</script>
+
+<style scoped>
+.completed-detail-page {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.page-header {
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 8px 0;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.btn-back {
+  padding: 8px 16px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.btn-back:hover {
+  background-color: #f5f5f5;
+}
+
+.card {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin-bottom: 24px;
+}
+
+.card-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.card-body {
+  padding: 20px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 8px;
+}
+
+.info-label, .detail-label {
+  color: #666;
+  width: 100px;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.info-value, .detail-content {
+  flex-grow: 1;
+  color: #333;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  color: white;
+}
+
+.status-tag.completed {
+  background-color: #52c41a;
+}
+
+.detail-item {
+  margin-bottom: 16px;
+  display: flex;
+}
+
+.detail-content {
+  line-height: 1.5;
+}
+
+.photos-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 10px;
+}
+
+.photo-item {
+  width: 160px;
+  height: 120px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.photo-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s;
+}
+
+.photo-item img:hover {
+  transform: scale(1.05);
+}
+
+.no-photos {
+  color: #999;
+  padding: 20px 0;
+}
+
+.total-cost .cost-value {
+  color: #f5222d;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+/* 照片预览样式 */
+.photo-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.photo-preview-container {
+  position: relative;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.preview-img {
+  max-width: 100%;
+  max-height: 80vh;
+  border: 4px solid white;
+  border-radius: 4px;
+}
+
+.preview-close {
+  position: absolute;
+  top: -30px;
+  right: -30px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/Pending.vue b/src/main/resources/web/src/views/workorder/Pending.vue
new file mode 100644
index 0000000..2dcaa6c
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/Pending.vue
@@ -0,0 +1,654 @@
+<!-- src/views/workorder/Pending.vue -->
+<template>
+  <div class="order-to-claim-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>待抢单工单</h2>
+      <div class="breadcrumb">校园矿化水平台 / 工单管理 / 待抢单</div>
+    </div>
+
+    <!-- 检索筛选区 -->
+    <div class="filter-bar">
+      <!-- 工单号/设备ID搜索 -->
+      <div class="filter-item search-item">
+        <label>搜索：</label>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          class="search-input"
+          placeholder="输入工单号或设备ID搜索"
+          @input="handleSearch"
+        >
+      </div>
+
+      <!-- 片区筛选 -->
+      <div class="filter-item">
+        <label>所属片区：</label>
+        <select v-model="filterForm.area" class="filter-select" @change="handleFilter">
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+      </div>
+
+      <!-- 日期筛选 -->
+      <div class="filter-item">
+        <label>创建日期：</label>
+        <input 
+          type="date" 
+          v-model="filterForm.createDate" 
+          class="filter-input"
+          @change="handleFilter"
+        >
+      </div>
+
+      <!-- 重置按钮 -->
+      <button class="btn-reset" @click="resetFilter">重置筛选</button>
+    </div>
+
+    <!-- 工单表格 -->
+    <div class="card">
+      <table class="order-table">
+        <thead>
+          <tr>
+            <th>工单号</th>
+            <th>设备</th>
+            <th>片区</th>
+            <th>问题描述</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in filteredOrders" :key="order.id">
+            <td>{{ order.orderNo }}</td>
+            <td>
+              <div class="device-info">
+                <div class="device-type">{{ order.deviceType }}</div>
+                <div class="device-id">{{ order.deviceId }}</div>
+              </div>
+            </td>
+            <td>{{ order.area }}</td>
+            <td class="desc-cell">{{ order.problemDesc }}</td>
+            <td>
+              <span :class="`status-tag ${order.status}`">
+                {{ formatStatus(order.status) }}
+              </span>
+            </td>
+            <td>{{ order.createTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewOrderDetail(order)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="filteredOrders.length === 0">
+            <td colspan="7" class="no-data">暂无待抢单工单</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 工单详情弹窗 -->
+    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h3>工单详情</h3>
+          <button class="modal-close" @click="closeDetailModal">×</button>
+        </div>
+        <div class="modal-body">
+          <div class="detail-item">
+            <span class="detail-label">工单号：</span>
+            <span class="detail-value">{{ currentOrder?.orderNo }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">建单时间：</span>
+            <span class="detail-value">{{ currentOrder?.createTime }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备机型：</span>
+            <span class="detail-value">{{ currentOrder?.deviceType }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备ID：</span>
+            <span class="detail-value">{{ currentOrder?.deviceId }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">警告内容：</span>
+            <span class="detail-value">{{ currentOrder?.problemDesc }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备最后上传时间：</span>
+            <span class="detail-value">{{ currentOrder?.lastUploadTime }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">位置：</span>
+            <span class="detail-value">{{ currentOrder?.location }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">当前状态：</span>
+            <span :class="`detail-status status-tag ${currentOrder?.status}`">
+              {{ currentOrder ? formatStatus(currentOrder.status) : '' }}
+            </span>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-close" @click="closeDetailModal">关闭</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 工单状态类型
+type OrderStatus = 'pending' | 'processing' | 'completed' | 'cancelled'
+
+// 工单数据接口（扩展了位置和最后上传时间字段）
+interface ToClaimOrder {
+  id: string
+  orderNo: string
+  deviceType: string // 设备机型（制水机/供水机）
+  deviceId: string // 设备ID
+  area: string // 所属片区
+  problemDesc: string // 问题描述（警告内容）
+  status: OrderStatus // 工单状态
+  createTime: string // 创建时间（建单时间）
+  lastUploadTime: string // 设备最后上传时间
+  location: string // 设备位置
+}
+
+// 模拟待抢单工单数据（补充了位置和最后上传时间）
+const orderList: ToClaimOrder[] = [
+  {
+    id: '1',
+    orderNo: 'ORD-20231025-001',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-002',
+    area: '校区',
+    problemDesc: '出水速度慢，水压不足，需要检修水泵',
+    status: 'pending',
+    createTime: '2023-10-25 08:30:15',
+    lastUploadTime: '2023-10-25 08:25:30',
+    location: '教学区A栋一楼大厅'
+  },
+  {
+    id: '2',
+    orderNo: 'ORD-20231025-002',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-005',
+    area: '市区',
+    problemDesc: '设备显示故障代码E12，无法正常出水',
+    status: 'pending',
+    createTime: '2023-10-25 09:15:22',
+    lastUploadTime: '2023-10-25 09:10:05',
+    location: '市区图书馆二楼北侧'
+  },
+  {
+    id: '3',
+    orderNo: 'ORD-20231025-003',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-003',
+    area: '市区',
+    problemDesc: '滤芯更换提醒，需要更换一级滤芯',
+    status: 'pending',
+    createTime: '2023-10-24 16:40:08',
+    lastUploadTime: '2023-10-24 16:35:22',
+    location: '行政楼一楼大厅'
+  },
+  {
+    id: '4',
+    orderNo: 'ORD-20231025-004',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-004',
+    area: '校区',
+    problemDesc: '设备离线，无法上传数据，检查网络连接',
+    status: 'pending',
+    createTime: '2023-10-25 10:05:11',
+    lastUploadTime: '2023-10-25 09:50:45',
+    location: '学生宿舍3号楼一楼'
+  }
+]
+
+// 响应式数据
+const orders = ref<ToClaimOrder[]>(orderList)
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+
+// 搜索关键词（工单号/设备ID）
+const searchKeyword = ref('')
+
+// 筛选表单数据
+const filterForm = ref({
+  area: '', // 片区筛选
+  createDate: '' // 日期筛选
+})
+
+// 弹窗相关状态
+const showDetailModal = ref(false)
+const currentOrder = ref<ToClaimOrder | null>(null)
+
+// 格式化状态显示
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap = {
+    pending: '待抢单',
+    processing: '处理中',
+    completed: '已完成',
+    cancelled: '已取消'
+  }
+  return statusMap[status]
+}
+
+// 筛选后的工单列表
+const filteredOrders = computed(() => {
+  return orders.value.filter(order => {
+    // 工单号/设备ID搜索匹配
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      order.orderNo.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      order.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    // 片区筛选
+    const areaMatch = filterForm.value.area === '' || order.area === filterForm.value.area
+    
+    // 日期筛选（匹配日期部分，忽略时间）
+    const dateMatch = filterForm.value.createDate === '' || 
+      order.createTime.split(' ')[0] === filterForm.value.createDate
+    
+    return keywordMatch && areaMatch && dateMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredOrders.value.length / pageSize)
+})
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1 // 搜索后重置到第一页
+}
+
+// 处理筛选（片区/日期）
+const handleFilter = () => {
+  currentPage.value = 1 // 筛选后重置到第一页
+}
+
+// 重置筛选条件
+const resetFilter = () => {
+  searchKeyword.value = '' // 清空搜索关键词
+  filterForm.value = {
+    area: '',
+    createDate: ''
+  }
+  currentPage.value = 1
+}
+
+// 查看工单详情（打开弹窗）
+const viewOrderDetail = (order: ToClaimOrder) => {
+  currentOrder.value = order
+  showDetailModal.value = true
+}
+
+// 关闭详情弹窗
+const closeDetailModal = () => {
+  showDetailModal.value = false
+  currentOrder.value = null
+}
+</script>
+
+<style scoped>
+.order-to-claim-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 筛选区样式 */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-item label {
+  font-size: 14px;
+  color: #4e5969;
+  font-weight: 500;
+}
+
+/* 搜索输入框样式 */
+.search-input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 240px;
+}
+
+.filter-select, .filter-input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 160px;
+}
+
+.btn-reset {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background-color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.btn-reset:hover {
+  background-color: #f0f0f0;
+}
+
+/* 表格样式 */
+.order-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.order-table th,
+.order-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.order-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.order-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+/* 设备信息样式 */
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.device-type {
+  font-weight: 500;
+  color: #333;
+}
+
+.device-id {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 问题描述单元格 */
+.desc-cell {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.desc-cell:hover {
+  white-space: normal;
+  overflow: visible;
+  background-color: white;
+  z-index: 10;
+  position: relative;
+}
+
+/* 状态标签样式 */
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.pending {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.processing {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-tag.completed {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.cancelled {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+/* 操作按钮样式 */
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-view {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-view:hover {
+  opacity: 0.9;
+}
+
+/* 空数据样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  width: 100%;
+  max-width: 500px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.detail-item {
+  margin-bottom: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.detail-label {
+  flex: 0 0 120px;
+  color: #666;
+  font-size: 14px;
+}
+
+.detail-value {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.detail-status {
+  margin-top: 2px;
+}
+
+.modal-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.btn-close {
+  padding: 6px 16px;
+  background-color: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.btn-close:hover {
+  background-color: #e9ecef;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .filter-item {
+    width: 100%;
+  }
+  
+  .search-input, .filter-select, .filter-input {
+    width: 100%;
+  }
+
+  .modal-content {
+    width: 90%;
+  }
+
+  .detail-label {
+    flex: 0 0 100px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/Processing.vue b/src/main/resources/web/src/views/workorder/Processing.vue
new file mode 100644
index 0000000..41dd2d1
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/Processing.vue
@@ -0,0 +1,460 @@
+<!-- src/views/workorder/Processing.vue -->
+<template>
+  <div class="order-processing-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>处理中工单</h2>
+      <div class="breadcrumb">校园矿化水平台 / 工单管理 / 处理中</div>
+    </div>
+
+    <!-- 检索筛选区 -->
+    <div class="filter-bar">
+      <!-- 工单号/设备ID搜索 -->
+      <div class="filter-item search-item">
+        <label>搜索：</label>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          class="search-input"
+          placeholder="输入工单号或设备ID搜索"
+          @input="handleSearch"
+        >
+      </div>
+
+      <!-- 片区筛选 -->
+      <div class="filter-item">
+        <label>所属片区：</label>
+        <select v-model="filterForm.area" class="filter-select" @change="handleFilter">
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+      </div>
+
+      <!-- 日期筛选 -->
+      <div class="filter-item">
+        <label>创建日期：</label>
+        <input 
+          type="date" 
+          v-model="filterForm.createDate" 
+          class="filter-input"
+          @change="handleFilter"
+        >
+      </div>
+
+      <!-- 重置按钮 -->
+      <button class="btn-reset" @click="resetFilter">重置筛选</button>
+    </div>
+
+    <!-- 工单表格 -->
+    <div class="card">
+      <table class="order-table">
+        <thead>
+          <tr>
+            <th>工单号</th>
+            <th>设备</th>
+            <th>片区</th>
+            <th>问题描述</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in filteredOrders" :key="order.id">
+            <td>{{ order.orderNo }}</td>
+            <td>
+              <div class="device-info">
+                <div class="device-type">{{ order.deviceType }}</div>
+                <div class="device-id">{{ order.deviceId }}</div>
+              </div>
+            </td>
+            <td>{{ order.area }}</td>
+            <td class="desc-cell">{{ order.problemDesc }}</td>
+            <td>
+              <span :class="`status-tag ${order.status}`">
+                {{ formatStatus(order.status) }}
+              </span>
+            </td>
+            <td>{{ order.createTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewOrderDetail(order.id)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="filteredOrders.length === 0">
+            <td colspan="7" class="no-data">暂无处理中工单</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <div v-if="showDetailModal" class="modal-overlay">
+      <div class="modal-container">
+        <div class="modal-header">
+          <h3>工单详情</h3>
+          <button class="modal-close" @click="showDetailModal = false">×</button>
+        </div>
+        <div class="modal-body">
+          <div class="detail-item">
+            <span class="detail-label">工单号：</span>
+            <span class="detail-value">{{ currentOrder?.orderNo }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">建单时间：</span>
+            <span class="detail-value">{{ currentOrder?.createTime }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备机型：</span>
+            <span class="detail-value">{{ currentOrder?.deviceType }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备ID：</span>
+            <span class="detail-value">{{ currentOrder?.deviceId }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">警告内容：</span>
+            <span class="detail-value">{{ currentOrder?.problemDesc }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">设备最后上传时间：</span>
+            <span class="detail-value">{{ currentOrder?.lastUploadTime }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">位置：</span>
+            <span class="detail-value">{{ currentOrder?.location }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">接单师傅：</span>
+            <span class="detail-value">{{ currentOrder?.maintenanceName }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">师傅电话：</span>
+            <span class="detail-value">{{ currentOrder?.maintenancePhone }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">当前状态：</span>
+            <span :class="`detail-value status-tag ${currentOrder?.status}`">
+              {{ currentOrder ? formatStatus(currentOrder.status) : '' }}
+            </span>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-close" @click="showDetailModal = false">关闭</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 工单状态类型
+type OrderStatus = 'timeout' | 'pending' | 'processing' | 'reviewing' | 'completed'
+
+// 工单数据接口（扩展设备相关信息和维修人员信息）
+interface ProcessingOrder {
+  id: string
+  orderNo: string
+  deviceType: string // 设备机型（制水机/供水机）
+  deviceId: string // 设备ID
+  area: string // 所属片区
+  problemDesc: string // 问题描述（警告内容）
+  status: OrderStatus // 工单状态
+  createTime: string // 创建时间（建单时间）
+  lastUploadTime: string // 设备最后上传时间
+  location: string // 设备位置
+  maintenanceName: string // 接单师傅姓名
+  maintenancePhone: string // 接单师傅电话
+}
+
+// 模拟处理中工单数据（补充完整信息）
+const orderList: ProcessingOrder[] = [
+  {
+    id: '9',
+    orderNo: 'ORD-20231025-007',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-003',
+    area: '市区',
+    problemDesc: '正在更换一级滤芯，预计1小时内完成',
+    status: 'processing',
+    createTime: '2023-10-25 15:10:08',
+    lastUploadTime: '2023-10-25 15:45:22',
+    location: '市区商业广场B区3号柜位',
+    maintenanceName: '李师傅',
+    maintenancePhone: '13800138000'
+  },
+  {
+    id: '10',
+    orderNo: 'ORD-20231025-008',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-004',
+    area: '校区',
+    problemDesc: '正在检查网络连接，设备离线问题排查中',
+    status: 'processing',
+    createTime: '2023-10-25 16:05:11',
+    lastUploadTime: '2023-10-25 13:30:05',
+    location: '校区图书馆2楼大厅',
+    maintenanceName: '王师傅',
+    maintenancePhone: '13900139000'
+  }
+]
+
+// 响应式数据
+const orders = ref<ProcessingOrder[]>(orderList)
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 搜索关键词（工单号/设备ID）
+const searchKeyword = ref('')
+
+// 筛选表单数据
+const filterForm = ref({
+  area: '', // 片区筛选
+  createDate: '' // 日期筛选
+})
+
+// 弹窗相关状态
+const showDetailModal = ref(false)
+const currentOrder = ref<ProcessingOrder | null>(null)
+
+// 格式化状态显示
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap = {
+    timeout: '超时未抢',
+    pending: '待抢单',
+    processing: '处理中',
+    reviewing: '待审核',
+    completed: '已结单'
+  }
+  return statusMap[status]
+}
+
+// 筛选后的工单列表
+const filteredOrders = computed(() => {
+  return orders.value.filter(order => {
+    // 工单号/设备ID搜索匹配
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      order.orderNo.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      order.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    // 片区筛选
+    const areaMatch = filterForm.value.area === '' || order.area === filterForm.value.area
+    
+    // 日期筛选（匹配日期部分，忽略时间）
+    const dateMatch = filterForm.value.createDate === '' || 
+      order.createTime.split(' ')[0] === filterForm.value.createDate
+    
+    return keywordMatch && areaMatch && dateMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredOrders.value.length / pageSize)
+})
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1 // 搜索后重置到第一页
+}
+
+// 处理筛选（片区/日期）
+const handleFilter = () => {
+  currentPage.value = 1 // 筛选后重置到第一页
+}
+
+// 重置筛选条件
+const resetFilter = () => {
+  searchKeyword.value = '' // 清空搜索关键词
+  filterForm.value = {
+    area: '',
+    createDate: ''
+  }
+  currentPage.value = 1
+}
+
+// 查看工单详情（打开弹窗）
+const viewOrderDetail = (id: string) => {
+  const order = orders.value.find(item => item.id === id)
+  if (order) {
+    currentOrder.value = order
+    showDetailModal.value = true
+  }
+}
+</script>
+
+<style scoped>
+/* 原有样式保持不变 */
+.order-processing-page {
+  padding: 20px;
+}
+
+.page-header { margin-bottom: 24px; }
+.page-header h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 8px; }
+.breadcrumb { color: #666; font-size: 14px; }
+.filter-bar { display: flex; align-items: center; gap: 20px; padding: 16px; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 16px; flex-wrap: wrap; }
+.filter-item { display: flex; align-items: center; gap: 8px; }
+.filter-item label { font-size: 14px; color: #4e5969; font-weight: 500; }
+.search-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 240px; }
+.filter-select, .filter-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 160px; }
+.btn-reset { padding: 8px 16px; border: 1px solid #ddd; background-color: white; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.3s; }
+.btn-reset:hover { background-color: #f0f0f0; }
+.order-table { width: 100%; border-collapse: collapse; }
+.order-table th, .order-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; }
+.order-table th { background-color: #f8f9fa; font-weight: 600; color: #4e5969; font-size: 14px; }
+.order-table tbody tr:hover { background-color: #f8f9fa; }
+.device-info { display: flex; flex-direction: column; gap: 4px; }
+.device-type { font-weight: 500; color: #333; }
+.device-id { font-size: 12px; color: #666; }
+.desc-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+.desc-cell:hover { white-space: normal; overflow: visible; background-color: white; z-index: 10; position: relative; }
+.status-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+.status-tag.timeout { background-color: #ffebe6; color: #cf1322; }
+.status-tag.pending { background-color: #fff7e6; color: #d48806; }
+.status-tag.processing { background-color: #e6f7ff; color: #1890ff; }
+.status-tag.reviewing { background-color: #f6f7ff; color: #667eea; }
+.status-tag.completed { background-color: #e6f7ee; color: #00875a; }
+.operation-buttons { display: flex; gap: 8px; }
+.btn-view { padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; transition: opacity 0.3s; background-color: #e6f7ff; color: #1890ff; }
+.btn-view:hover { opacity: 0.9; }
+.no-data { text-align: center; padding: 40px 0; color: #8c8c8c; }
+.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; color: #666; font-size: 14px; }
+.page-btn { padding: 4px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; }
+.page-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  background-color: white;
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90%;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #999;
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  color: #333;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.detail-item {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.detail-label {
+  width: 120px;
+  flex-shrink: 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.detail-value {
+  flex-grow: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.modal-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.btn-close {
+  padding: 6px 16px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-close:hover {
+  background-color: #096dd9;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-bar { flex-direction: column; align-items: flex-start; }
+  .filter-item { width: 100%; }
+  .search-input, .filter-select, .filter-input { width: 100%; }
+  
+  .detail-item {
+    flex-direction: column;
+  }
+  
+  .detail-label {
+    width: auto;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/Review.vue b/src/main/resources/web/src/views/workorder/Review.vue
new file mode 100644
index 0000000..7c428ce
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/Review.vue
@@ -0,0 +1,281 @@
+<!-- src/views/order/OrderReview.vue -->
+<template>
+  <div class="order-review-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>待审核工单</h2>
+      <div class="breadcrumb">校园矿化水平台 / 工单管理 / 待审核</div>
+    </div>
+
+    <!-- 检索筛选区 -->
+    <div class="filter-bar">
+      <!-- 工单号/设备ID搜索 -->
+      <div class="filter-item search-item">
+        <label>搜索：</label>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          class="search-input"
+          placeholder="输入工单号或设备ID搜索"
+          @input="handleSearch"
+        >
+      </div>
+
+      <!-- 片区筛选 -->
+      <div class="filter-item">
+        <label>所属片区：</label>
+        <select v-model="filterForm.area" class="filter-select" @change="handleFilter">
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+      </div>
+
+      <!-- 日期筛选 -->
+      <div class="filter-item">
+        <label>创建日期：</label>
+        <input 
+          type="date" 
+          v-model="filterForm.createDate" 
+          class="filter-input"
+          @change="handleFilter"
+        >
+      </div>
+
+      <!-- 重置按钮 -->
+      <button class="btn-reset" @click="resetFilter">重置筛选</button>
+    </div>
+
+    <!-- 工单表格 -->
+    <div class="card">
+      <table class="order-table">
+        <thead>
+          <tr>
+            <th>工单号</th>
+            <th>设备</th>
+            <th>片区</th>
+            <th>问题描述</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in filteredOrders" :key="order.id">
+            <td>{{ order.orderNo }}</td>
+            <td>
+              <div class="device-info">
+                <div class="device-type">{{ order.deviceType }}</div>
+                <div class="device-id">{{ order.deviceId }}</div>
+              </div>
+            </td>
+            <td>{{ order.area }}</td>
+            <td class="desc-cell">{{ order.problemDesc }}</td>
+            <td>
+              <span :class="`status-tag ${order.status}`">
+                {{ formatStatus(order.status) }}
+              </span>
+            </td>
+            <td>{{ order.createTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewOrderDetail(order.id)">查看详情</button>
+            </td>
+          </tr>
+          <tr v-if="filteredOrders.length === 0">
+            <td colspan="7" class="no-data">暂无待审核工单</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 工单状态类型
+type OrderStatus = 'timeout' | 'pending' | 'processing' | 'reviewing' | 'completed'
+
+// 工单数据接口
+interface ReviewOrder {
+  id: string
+  orderNo: string
+  deviceType: string // 设备机型（制水机/供水机）
+  deviceId: string // 设备ID
+  area: string // 所属片区
+  problemDesc: string // 问题描述
+  status: OrderStatus // 工单状态
+  createTime: string // 创建时间
+}
+
+// 模拟待审核工单数据
+const orderList: ReviewOrder[] = [
+  {
+    id: '7',
+    orderNo: 'ORD-20231025-005',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-002',
+    area: '校区',
+    problemDesc: '已完成水泵检修，出水速度恢复正常',
+    status: 'reviewing',
+    createTime: '2023-10-25 11:30:15'
+  },
+  {
+    id: '8',
+    orderNo: 'ORD-20231025-006',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-005',
+    area: '市区',
+    problemDesc: '已修复故障代码E12，设备出水正常',
+    status: 'reviewing',
+    createTime: '2023-10-25 14:20:22'
+  }
+]
+
+// 响应式数据
+const orders = ref<ReviewOrder[]>(orderList)
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 搜索关键词（工单号/设备ID）
+const searchKeyword = ref('')
+
+// 筛选表单数据
+const filterForm = ref({
+  area: '', // 片区筛选
+  createDate: '' // 日期筛选
+})
+
+// 格式化状态显示
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap = {
+    timeout: '超时未抢',
+    pending: '待抢单',
+    processing: '处理中',
+    reviewing: '待审核',
+    completed: '已结单'
+  }
+  return statusMap[status]
+}
+
+// 筛选后的工单列表
+const filteredOrders = computed(() => {
+  return orders.value.filter(order => {
+    // 工单号/设备ID搜索匹配
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      order.orderNo.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      order.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    // 片区筛选
+    const areaMatch = filterForm.value.area === '' || order.area === filterForm.value.area
+    
+    // 日期筛选（匹配日期部分，忽略时间）
+    const dateMatch = filterForm.value.createDate === '' || 
+      order.createTime.split(' ')[0] === filterForm.value.createDate
+    
+    return keywordMatch && areaMatch && dateMatch
+  })
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredOrders.value.length / pageSize)
+})
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1 // 搜索后重置到第一页
+}
+
+// 处理筛选（片区/日期）
+const handleFilter = () => {
+  currentPage.value = 1 // 筛选后重置到第一页
+}
+
+// 重置筛选条件
+const resetFilter = () => {
+  searchKeyword.value = '' // 清空搜索关键词
+  filterForm.value = {
+    area: '',
+    createDate: ''
+  }
+  currentPage.value = 1
+}
+
+// 查看工单详情
+const viewOrderDetail = (id: string) => {
+  // 修改路由路径，确保与审核详情页路由匹配
+  router.push(`/home/work-order/review/${id}`)
+}
+</script>
+
+<style scoped>
+/* 样式与超时未抢页面完全一致，仅修改页面容器类名 */
+.order-review-page {
+  padding: 20px;
+}
+
+/* 以下样式与OrderTimeout.vue完全相同，仅保留状态标签样式示例 */
+.page-header { margin-bottom: 24px; }
+.page-header h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 8px; }
+.breadcrumb { color: #666; font-size: 14px; }
+.filter-bar { display: flex; align-items: center; gap: 20px; padding: 16px; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 16px; flex-wrap: wrap; }
+.filter-item { display: flex; align-items: center; gap: 8px; }
+.filter-item label { font-size: 14px; color: #4e5969; font-weight: 500; }
+.search-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 240px; }
+.filter-select, .filter-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 160px; }
+.btn-reset { padding: 8px 16px; border: 1px solid #ddd; background-color: white; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.3s; }
+.btn-reset:hover { background-color: #f0f0f0; }
+.order-table { width: 100%; border-collapse: collapse; }
+.order-table th, .order-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; }
+.order-table th { background-color: #f8f9fa; font-weight: 600; color: #4e5969; font-size: 14px; }
+.order-table tbody tr:hover { background-color: #f8f9fa; }
+.device-info { display: flex; flex-direction: column; gap: 4px; }
+.device-type { font-weight: 500; color: #333; }
+.device-id { font-size: 12px; color: #666; }
+.desc-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+.desc-cell:hover { white-space: normal; overflow: visible; background-color: white; z-index: 10; position: relative; }
+.status-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+.status-tag.timeout { background-color: #ffebe6; color: #cf1322; }
+.status-tag.pending { background-color: #fff7e6; color: #d48806; }
+.status-tag.processing { background-color: #e6f7ff; color: #1890ff; }
+.status-tag.reviewing { background-color: #f6f7ff; color: #667eea; }
+.status-tag.completed { background-color: #e6f7ee; color: #00875a; }
+.operation-buttons { display: flex; gap: 8px; }
+.btn-view { padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; transition: opacity 0.3s; background-color: #e6f7ff; color: #1890ff; }
+.btn-view:hover { opacity: 0.9; }
+.no-data { text-align: center; padding: 40px 0; color: #8c8c8c; }
+.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; color: #666; font-size: 14px; }
+.page-btn { padding: 4px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; }
+.page-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-bar { flex-direction: column; align-items: flex-start; }
+  .filter-item { width: 100%; }
+  .search-input, .filter-select, .filter-input { width: 100%; }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/Timeout.vue b/src/main/resources/web/src/views/workorder/Timeout.vue
new file mode 100644
index 0000000..101cbb0
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/Timeout.vue
@@ -0,0 +1,779 @@
+<!-- src/views/order/OrderTimeout.vue -->
+<template>
+  <div class="order-timeout-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>超时未抢工单</h2>
+      <div class="breadcrumb">校园矿化水平台 / 工单管理 / 超时未抢</div>
+    </div>
+
+    <!-- 检索筛选区 -->
+    <div class="filter-bar">
+      <!-- 工单号/设备ID搜索 -->
+      <div class="filter-item search-item">
+        <label>搜索：</label>
+        <input 
+          type="text" 
+          v-model="searchKeyword" 
+          class="search-input"
+          placeholder="输入工单号或设备ID搜索"
+          @input="handleSearch"
+        >
+      </div>
+
+      <!-- 片区筛选 -->
+      <div class="filter-item">
+        <label>所属片区：</label>
+        <select v-model="filterForm.area" class="filter-select" @change="handleFilter">
+          <option value="">全部片区</option>
+          <option value="市区">市区</option>
+          <option value="校区">校区</option>
+        </select>
+      </div>
+
+      <!-- 日期筛选 -->
+      <div class="filter-item">
+        <label>创建日期：</label>
+        <input 
+          type="date" 
+          v-model="filterForm.createDate" 
+          class="filter-input"
+          @change="handleFilter"
+        >
+      </div>
+
+      <!-- 重置按钮 -->
+      <button class="btn-reset" @click="resetFilter">重置筛选</button>
+    </div>
+
+    <!-- 工单表格 -->
+    <div class="card">
+      <table class="order-table">
+        <thead>
+          <tr>
+            <th>工单号</th>
+            <th>设备</th>
+            <th>片区</th>
+            <th>问题描述</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in filteredOrders" :key="order.id">
+            <td>{{ order.orderNo }}</td>
+            <td>
+              <div class="device-info">
+                <div class="device-type">{{ order.deviceType }}</div>
+                <div class="device-id">{{ order.deviceId }}</div>
+              </div>
+            </td>
+            <td>{{ order.area }}</td>
+            <td class="desc-cell">{{ order.problemDesc }}</td>
+            <td>
+              <span :class="`status-tag ${order.status}`">
+                {{ formatStatus(order.status) }}
+              </span>
+            </td>
+            <td>{{ order.createTime }}</td>
+            <td class="operation-buttons">
+              <button class="btn-assign" @click="openAssignDialog(order)">人工派单</button>
+            </td>
+          </tr>
+          <tr v-if="filteredOrders.length === 0">
+            <td colspan="7" class="no-data">暂无超时未抢工单</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页控件 -->
+    <div class="pagination">
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === 1"
+        @click="currentPage--"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+      </span>
+      <button 
+        class="page-btn" 
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
+      >
+        下一页
+      </button>
+    </div>
+
+    <!-- 人工派单弹窗 -->
+    <div class="dialog-mask" v-if="assignDialogVisible">
+      <div class="dialog-container">
+        <div class="dialog-header">
+          <h3>人工派单</h3>
+          <button class="dialog-close" @click="closeAssignDialog">×</button>
+        </div>
+        <div class="dialog-body">
+          <div class="form-group">
+            <label class="form-label">工单号：</label>
+            <div class="form-value">{{ currentOrder?.orderNo || '' }}</div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">建单时间：</label>
+            <div class="form-value">{{ currentOrder?.createTime || '' }}</div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">设备机型与ID：</label>
+            <div class="form-value">
+              {{ currentOrder?.deviceType || '' }}({{ currentOrder?.deviceId || '' }})
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">警告内容：</label>
+            <div class="form-value">{{ currentOrder?.problemDesc || '' }}</div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">设备最后上传时间：</label>
+            <div class="form-value">{{ currentOrder?.lastUploadTime || '未知' }}</div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">设备位置：</label>
+            <div class="form-value">{{ currentOrder?.location || '未知' }}</div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">当前状态：</label>
+            <div class="form-value">
+              <span :class="`status-tag ${currentOrder?.status}`">
+                {{ currentOrder ? formatStatus(currentOrder.status) : '' }}
+              </span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label required">选择维修人员：</label>
+            <select 
+              v-model="selectedStaffId" 
+              class="form-select"
+              @change="handleStaffChange"
+            >
+              <option value="">请选择维修人员</option>
+              <option 
+                v-for="staff in filteredStaff" 
+                :key="staff.id" 
+                :value="staff.id"
+              >
+                {{ staff.name }} ({{ staff.phone }})
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">派单备注：</label>
+            <textarea 
+              v-model="assignRemark" 
+              class="form-textarea"
+              placeholder="请输入派单备注信息"
+              rows="3"
+            ></textarea>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <button class="btn-cancel" @click="closeAssignDialog">取消</button>
+          <button 
+            class="btn-confirm" 
+            @click="confirmAssign"
+            :disabled="!selectedStaffId"
+          >
+            确认派单
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 工单状态类型
+type OrderStatus = 'timeout' | 'pending' | 'processing' | 'reviewing' | 'completed'
+
+// 工单数据接口
+interface TimeoutOrder {
+  id: string
+  orderNo: string
+  deviceType: string // 设备机型（制水机/供水机）
+  deviceId: string // 设备ID
+  area: string // 所属片区
+  problemDesc: string // 问题描述
+  status: OrderStatus // 工单状态
+  createTime: string // 创建时间
+  lastUploadTime?: string // 设备最后上传时间
+  location?: string // 设备位置
+}
+
+// 维修人员接口
+interface MaintenanceStaff {
+  id: string
+  name: string
+  phone: string
+  area: string // 负责片区
+  status: 'active' | 'disabled' // 状态
+}
+
+// 模拟超时未抢工单数据
+const orderList: TimeoutOrder[] = [
+  {
+    id: '5',
+    orderNo: 'ORD-20231024-001',
+    deviceType: '制水机',
+    deviceId: 'WM-2023-001',
+    area: '市区',
+    problemDesc: '设备漏水，需要更换密封垫',
+    status: 'timeout',
+    createTime: '2023-10-24 09:10:05',
+    lastUploadTime: '2023-10-24 08:50:12',
+    location: '市区图书馆一楼大厅'
+  },
+  {
+    id: '6',
+    orderNo: 'ORD-20231024-002',
+    deviceType: '供水机',
+    deviceId: 'WS-2023-001',
+    area: '校区',
+    problemDesc: '出水口感异常，需要检测水质',
+    status: 'timeout',
+    createTime: '2023-10-24 10:20:33',
+    lastUploadTime: '2023-10-24 10:15:30',
+    location: '校区宿舍3号楼一层'
+  }
+]
+
+// 模拟维修人员数据
+const staffList: MaintenanceStaff[] = [
+  { id: 's1', name: '张三', phone: '13800138000', area: '市区', status: 'active' },
+  { id: 's2', name: '李四', phone: '13900139000', area: '校区', status: 'active' },
+  { id: 's3', name: '王五', phone: '13700137000', area: '市区', status: 'active' },
+  { id: 's4', name: '赵六', phone: '13600136000', area: '校区', status: 'disabled' }
+]
+
+// 响应式数据
+const orders = ref<TimeoutOrder[]>(orderList)
+const currentPage = ref(1)
+const pageSize = 10 // 每页显示数量
+const router = useRouter()
+
+// 搜索关键词（工单号/设备ID）
+const searchKeyword = ref('')
+
+// 筛选表单数据
+const filterForm = ref({
+  area: '', // 片区筛选
+  createDate: '' // 日期筛选
+})
+
+// 派单弹窗相关
+const assignDialogVisible = ref(false)
+const currentOrder = ref<TimeoutOrder | null>(null)
+const selectedStaffId = ref('')
+const assignRemark = ref('')
+const allStaff = ref<MaintenanceStaff[]>(staffList)
+
+// 格式化状态显示
+const formatStatus = (status: OrderStatus): string => {
+  const statusMap = {
+    timeout: '超时未抢',
+    pending: '待抢单',
+    processing: '处理中',
+    reviewing: '待审核',
+    completed: '已结单'
+  }
+  return statusMap[status]
+}
+
+// 筛选后的工单列表
+const filteredOrders = computed(() => {
+  return orders.value.filter(order => {
+    // 工单号/设备ID搜索匹配
+    const keywordMatch = searchKeyword.value.trim() === '' ||
+      order.orderNo.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      order.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    
+    // 片区筛选
+    const areaMatch = filterForm.value.area === '' || order.area === filterForm.value.area
+    
+    // 日期筛选（匹配日期部分，忽略时间）
+    const dateMatch = filterForm.value.createDate === '' || 
+      order.createTime.split(' ')[0] === filterForm.value.createDate
+    
+    return keywordMatch && areaMatch && dateMatch
+  })
+})
+
+// 筛选出负责当前工单区域的维修人员（且状态为启用）
+const filteredStaff = computed(() => {
+  if (!currentOrder.value) return []
+  return allStaff.value.filter(staff => 
+    staff.area === currentOrder.value!.area && staff.status === 'active'
+  )
+})
+
+// 分页计算
+const totalPages = computed(() => {
+  return Math.ceil(filteredOrders.value.length / pageSize)
+})
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1 // 搜索后重置到第一页
+}
+
+// 处理筛选（片区/日期）
+const handleFilter = () => {
+  currentPage.value = 1 // 筛选后重置到第一页
+}
+
+// 重置筛选条件
+const resetFilter = () => {
+  searchKeyword.value = '' // 清空搜索关键词
+  filterForm.value = {
+    area: '',
+    createDate: ''
+  }
+  currentPage.value = 1
+}
+
+// 打开派单弹窗
+const openAssignDialog = (order: TimeoutOrder) => {
+  currentOrder.value = order
+  selectedStaffId.value = ''
+  assignRemark.value = ''
+  assignDialogVisible.value = true
+}
+
+// 关闭派单弹窗
+const closeAssignDialog = () => {
+  assignDialogVisible.value = false
+  currentOrder.value = null
+  selectedStaffId.value = ''
+  assignRemark.value = ''
+}
+
+// 处理维修人员选择变化
+const handleStaffChange = () => {
+  // 可以添加额外的处理逻辑
+}
+
+// 确认派单
+const confirmAssign = () => {
+  if (!currentOrder.value || !selectedStaffId.value) return
+  
+  // 在实际项目中，这里应该调用API完成派单操作
+  console.log('派单信息:', {
+    orderId: currentOrder.value.id,
+    staffId: selectedStaffId.value,
+    remark: assignRemark.value,
+    assignTime: new Date().toLocaleString()
+  })
+  
+  // 派单成功后关闭弹窗并刷新列表
+  closeAssignDialog()
+  // 这里可以添加提示信息
+}
+</script>
+
+<style scoped>
+/* 基础页面样式 */
+.order-timeout-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 筛选区样式 */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-item label {
+  font-size: 14px;
+  color: #4e5969;
+  font-weight: 500;
+}
+
+/* 搜索输入框样式 */
+.search-input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 240px;
+}
+
+.filter-select, .filter-input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 160px;
+}
+
+.btn-reset {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background-color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.btn-reset:hover {
+  background-color: #f0f0f0;
+}
+
+/* 表格样式 */
+.order-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.order-table th,
+.order-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.order-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.order-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+/* 设备信息样式 */
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.device-type {
+  font-weight: 500;
+  color: #333;
+}
+
+.device-id {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 问题描述单元格 */
+.desc-cell {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.desc-cell:hover {
+  white-space: normal;
+  overflow: visible;
+  background-color: white;
+  z-index: 10;
+  position: relative;
+}
+
+/* 状态标签样式 */
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.timeout {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.status-tag.pending {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.processing {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-tag.reviewing {
+  background-color: #f6f7ff;
+  color: #667eea;
+}
+
+.status-tag.completed {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+/* 操作按钮样式 */
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-assign {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-assign:hover {
+  opacity: 0.9;
+}
+
+/* 空数据样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  color: #666;
+  font-size: 14px;
+}
+
+.page-btn {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.page-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 弹窗样式 */
+.dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.dialog-container {
+  width: 600px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.dialog-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #999;
+  transition: color 0.2s;
+}
+
+.dialog-close:hover {
+  color: #333;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.form-label {
+  width: 120px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: #4e5969;
+  padding-top: 6px;
+}
+
+.form-label.required::after {
+  content: '*';
+  color: #cf1322;
+  margin-left: 4px;
+}
+
+.form-value {
+  flex-grow: 1;
+  font-size: 14px;
+  color: #333;
+  padding-top: 4px;
+}
+
+.form-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.dialog-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.btn-cancel {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background-color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.btn-cancel:hover {
+  background-color: #f0f0f0;
+}
+
+.btn-confirm {
+  padding: 8px 16px;
+  border: none;
+  background-color: #1890ff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.btn-confirm:hover {
+  background-color: #096dd9;
+}
+
+.btn-confirm:disabled {
+  background-color: #8cc5ff;
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .filter-item {
+    width: 100%;
+  }
+  
+  .search-input, .filter-select, .filter-input {
+    width: 100%;
+  }
+  
+  .dialog-container {
+    width: 90%;
+    max-width: 500px;
+  }
+  
+  .form-group {
+    flex-direction: column;
+  }
+  
+  .form-label {
+    width: 100%;
+    margin-bottom: 8px;
+    padding-top: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/workorder/WorkOrderView.vue b/src/main/resources/web/src/views/workorder/WorkOrderView.vue
new file mode 100644
index 0000000..7006779
--- /dev/null
+++ b/src/main/resources/web/src/views/workorder/WorkOrderView.vue
@@ -0,0 +1,7 @@
+<!-- src/views/workorder/WorkOrderView.vue -->
+<template>
+  <div class="page-container">
+    <h1>工单管理</h1>
+    <p>请选择左侧子菜单查看具体工单信息</p>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/main/resources/web/tsconfig.app.json b/src/main/resources/web/tsconfig.app.json
index 8708235..1cd5874 100644
--- a/src/main/resources/web/tsconfig.app.json
+++ b/src/main/resources/web/tsconfig.app.json
@@ -6,7 +6,11 @@
     "composite": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "lib": ["ES2015", "DOM"],  // 关键：添加 ES2015 支持 Promise
+      "target": "ES2015",        // 目标输出为 ES2015 及以上
+      "module": "ESNext",        // 配合异步模块解析
+      "moduleResolution": "NodeNext"
     }
   }
 }
\ No newline at end of file
diff --git a/src/main/resources/web/tsconfig.json b/src/main/resources/web/tsconfig.json
index f1051f0..32d78d8 100644
--- a/src/main/resources/web/tsconfig.json
+++ b/src/main/resources/web/tsconfig.json
@@ -10,5 +10,5 @@
   ]
 
 
-  
+
 }
diff --git a/src/main/resources/web/vite.config.ts b/src/main/resources/web/vite.config.ts
index 2880e6f..2c67947 100644
--- a/src/main/resources/web/vite.config.ts
+++ b/src/main/resources/web/vite.config.ts
@@ -1,8 +1,5 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -11,7 +8,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': '/src'
     },
   },
 })
diff --git a/src/main/resources/zzz/src/main.js b/src/main/resources/zzz/src/main.js
index fda1e6e..6851094 100644
--- a/src/main/resources/zzz/src/main.js
+++ b/src/main/resources/zzz/src/main.js
@@ -1,12 +1,25 @@
+// main.js
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import '@/router/permission'
 
 const app = createApp(App)
+const pinia = createPinia()
 
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
 
+// 挂载前初始化
 app.mount('#app')
+
+// 全局属性（可选）
+app.config.globalProperties.$auth = {
+  isAuthenticated: () => {
+    const token = localStorage.getItem('token')
+    return !!token
+  },
+  getUserType: () => localStorage.getItem('userType')
+}
diff --git a/src/main/resources/zzz/src/router/index.js b/src/main/resources/zzz/src/router/index.js
index 3eb9c08..5ab741e 100644
--- a/src/main/resources/zzz/src/router/index.js
+++ b/src/main/resources/zzz/src/router/index.js
@@ -1,3 +1,4 @@
+// src/router/index.js
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -5,15 +6,83 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'LoginPage', // 改为多单词
-      component: () => import('../views/LoginPage.vue')
+      name: 'LoginPage',
+      component: () => import('../views/LoginPage.vue'),
+      meta: { requiresAuth: false }
+    },
+    {
+      path: '/repairer-register',
+      name: 'RepairerRegisterPage',
+      component: () => import('../views/RepairerRegisterPage.vue'),
+      meta: { requiresAuth: false }
     },
     {
       path: '/home',
-      name: 'HomePage', // 改为多单词
-      component: () => import('../views/HomePage.vue')
+      name: 'HomePage',
+      component: () => import('../views/HomePage.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/work-orders',
+      name: 'WorkOrderList',
+      component: () => import('../views/WorkOrderList.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/profile',
+      name: 'ProfilePage',
+      component: () => import('../views/ProfilePage.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/work-orders/:id',
+      name: 'WorkOrderDetail',
+      component: () => import('../views/WorkOrderDetail.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection',
+      name: 'InspectionPage',
+      component: () => import('../views/InspectionPage.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/scan',
+      name: 'InspectionScan',
+      component: () => import('../views/InspectionScan.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/water-maker',
+      name: 'WaterMakerList',
+      component: () => import('../views/WaterMakerList.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/water-maker/:id',
+      name: 'WaterMakerDetail',
+      component: () => import('../views/WaterMakerDetail.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/water-supplier',
+      name: 'WaterSupplierList',
+      component: () => import('../views/WaterSupplierList.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/water-supplier/:id',
+      name: 'WaterSupplierDetail',
+      component: () => import('../views/WaterSupplierDetail.vue'),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/inspection/form',
+      name: 'InspectionForm',
+      component: () => import('../views/InspectionForm.vue'),
+      meta: { requiresAuth: true }
     }
-  ],
+  ]
 })
 
 export default router
diff --git a/src/main/resources/zzz/src/router/permission.js b/src/main/resources/zzz/src/router/permission.js
new file mode 100644
index 0000000..051aeff
--- /dev/null
+++ b/src/main/resources/zzz/src/router/permission.js
@@ -0,0 +1,36 @@
+// src/router/permission.js
+import router from './index'
+import { useAuthStore } from '@/stores/auth'
+
+// 需要登录的白名单
+const whiteList = ['/', '/repairer-register']
+
+router.beforeEach((to, from, next) => {
+  console.log('路由守卫执行:', to.path)
+
+  const authStore = useAuthStore()
+
+  // 如果目标路由在白名单中，直接放行
+  if (whiteList.includes(to.path)) {
+    return next()
+  }
+
+  // 检查是否已登录
+  if (!authStore.isAuthenticated) {
+    console.warn('未登录，跳转到登录页')
+    next('/')
+  } else {
+    // 已登录，验证用户权限（如果需要）
+    const userType = authStore.getUserType
+    console.log('当前用户类型:', userType)
+
+    // 这里可以添加权限验证逻辑
+    // 例如：只有特定用户类型可以访问某些页面
+    next()
+  }
+})
+
+// 路由守卫后置钩子
+router.afterEach((to, from) => {
+  console.log('路由切换完成:', from.path, '->', to.path)
+})
diff --git a/src/main/resources/zzz/src/services/api.js b/src/main/resources/zzz/src/services/api.js
index f39f021..f4a4649 100644
--- a/src/main/resources/zzz/src/services/api.js
+++ b/src/main/resources/zzz/src/services/api.js
@@ -1,11 +1,47 @@
 // src/services/api.js
 import axios from 'axios'
+import { useAuthStore } from '@/stores/auth'
 
+// 创建最基本的axios实例
 const apiClient = axios.create({
-  baseURL: 'http://localhost:8080', // Adjust to your backend URL
+  baseURL: 'http://localhost:8080',
   headers: {
     'Content-Type': 'application/json'
   }
 })
 
+// 请求拦截器
+apiClient.interceptors.request.use(
+  (config) => {
+    console.log(`请求: ${config.method.toUpperCase()} ${config.url}`)
+
+    // 添加认证头
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+apiClient.interceptors.response.use(
+  (response) => {
+    return response
+  },
+  (error) => {
+    // 处理401未授权错误
+    if (error.response?.status === 401) {
+      const authStore = useAuthStore()
+      authStore.logout()
+      window.location.href = '/'
+    }
+    return Promise.reject(error)
+  }
+)
+
 export default apiClient
diff --git a/src/main/resources/zzz/src/services/authServices.js b/src/main/resources/zzz/src/services/authServices.js
index 5205e08..b012884 100644
--- a/src/main/resources/zzz/src/services/authServices.js
+++ b/src/main/resources/zzz/src/services/authServices.js
@@ -2,15 +2,54 @@
 import api from './api'
 
 export const authServices = {
-  async login(username, password) {
+  // 通用登录接口（已有）
+  async login(loginData) {
     try {
-      const response = await api.post('/api/common/login', {
-        username: username,
-        password: password
-      })
+      const response = await api.post('/api/common/login', loginData)
       return response.data
     } catch (error) {
       throw error.response?.data || error.message
     }
+  },
+
+  // 新增：维修人员注册接口（核心注册功能）
+  async repairerRegister(registerData) {
+    try {
+      // 构建符合后端RegisterRequest的数据结构
+      const requestData = {
+        username: registerData.username,
+        password: registerData.password,
+        userType: 'repairer',  // 固定为repairer类型
+        repairmanId: registerData.repairmanId
+      }
+
+      console.log('发送注册请求:', requestData)
+
+      // 调用后端注册接口
+      const response = await api.post('/api/common/register', requestData)
+
+      console.log('注册响应:', response.data)
+      return response.data
+    } catch (error) {
+      console.error('注册失败:', error)
+
+      // 返回标准化的错误格式
+      if (error.response?.data) {
+        // 后端返回的错误
+        throw error.response.data
+      } else if (error.message) {
+        // 网络或其他错误
+        throw {
+          code: 500,
+          message: error.message || '网络错误'
+        }
+      } else {
+        // 未知错误
+        throw {
+          code: 500,
+          message: '注册失败，请重试'
+        }
+      }
+    }
   }
 }
diff --git a/src/main/resources/zzz/src/stores/auth.js b/src/main/resources/zzz/src/stores/auth.js
new file mode 100644
index 0000000..1e4c28f
--- /dev/null
+++ b/src/main/resources/zzz/src/stores/auth.js
@@ -0,0 +1,82 @@
+// src/stores/auth.js
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import router from '@/router/index.js'
+
+export const useAuthStore = defineStore('auth', () => {
+  // 状态
+  const user = ref(null)
+  const token = ref(localStorage.getItem('token'))
+  const isAuthenticated = computed(() => !!token.value && !!user.value)
+
+  // 登录
+  const login = (userData, authToken) => {
+    user.value = userData
+    token.value = authToken
+
+    // 存储到本地
+    localStorage.setItem('token', authToken)
+    localStorage.setItem('user', JSON.stringify(userData))
+  }
+
+  // 获取用户信息
+  const getUserInfo = () => {
+    if (!user.value) {
+      const storedUser = localStorage.getItem('user')
+      if (storedUser) {
+        user.value = JSON.parse(storedUser)
+      }
+    }
+    return user.value
+  }
+
+  // 获取用户类型
+  const getUserType = computed(() => {
+    return user.value?.userType || localStorage.getItem('userType')
+  })
+
+  // 获取维修人员ID
+  const getRepairmanId = computed(() => {
+    return user.value?.repairmanId || localStorage.getItem('repairmanId')
+  })
+
+  // 登出
+  const logout = () => {
+    user.value = null
+    token.value = null
+
+    // 清除本地存储
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    localStorage.removeItem('userType')
+    localStorage.removeItem('repairmanId')
+    localStorage.removeItem('userId')
+    localStorage.removeItem('username')
+
+    // 跳转到登录页
+    router.push('/')
+  }
+
+  // 初始化时从本地存储恢复
+  const initFromStorage = () => {
+    const storedToken = localStorage.getItem('token')
+    const storedUser = localStorage.getItem('user')
+
+    if (storedToken && storedUser) {
+      token.value = storedToken
+      user.value = JSON.parse(storedUser)
+    }
+  }
+
+  return {
+    user,
+    token,
+    isAuthenticated,
+    getUserType,
+    getRepairmanId,
+    login,
+    logout,
+    getUserInfo,
+    initFromStorage
+  }
+})
diff --git a/src/main/resources/zzz/src/stores/device.js b/src/main/resources/zzz/src/stores/device.js
new file mode 100644
index 0000000..d54b442
--- /dev/null
+++ b/src/main/resources/zzz/src/stores/device.js
@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useDeviceStore = defineStore('device', () => {
+  const waterSuppliers = ref([
+    {
+      id: 'A106',
+      name: '供水机 #A106',
+      location: 'A区教学楼 1楼走廊',
+      status: '正常运行',
+      waterLevel: 66,
+      storage: 360,
+      floatValves: {
+        high: { status: '开启', threshold: 90 },
+        low: { status: '关闭', threshold: 10 }
+      },
+      leakDetection: {
+        status: '无漏水',
+        lastChecked: '2024-12-26 10:30'
+      }
+    },
+    // ... 更多设备数据
+  ])
+
+  const getWaterSupplierById = (id) => {
+    return waterSuppliers.value.find(device => device.id === id || device.name.includes(id))
+  }
+
+  return {
+    waterSuppliers,
+    getWaterSupplierById
+  }
+})
diff --git a/src/main/resources/zzz/src/views/HomePage.vue b/src/main/resources/zzz/src/views/HomePage.vue
index c2c3764..219ee16 100644
--- a/src/main/resources/zzz/src/views/HomePage.vue
+++ b/src/main/resources/zzz/src/views/HomePage.vue
@@ -2,9 +2,15 @@
   <div class="home-page">
     <!-- 顶部标题栏 -->
     <div class="header">
+      <div class="header-left">
+        <div class="user-info">
+          <div class="user-name">{{ userInfo?.username || '未登录' }}</div>
+          <div class="user-type">{{ userInfo?.userType === 'repairer' ? '维修人员' : userInfo?.userType }}</div>
+        </div>
+      </div>
       <div class="header-title">运维工作台</div>
+      <div class="header-right"></div>
     </div>
-
     <!-- 主要内容区域 -->
     <div class="main-content">
       <!-- 统计卡片 -->
@@ -55,16 +61,16 @@
 
     <!-- 底部导航栏 -->
     <div class="bottom-nav">
-      <div class="nav-item active">
+      <div class="nav-item active" @click="goToHome">
         <span>首页</span>
       </div>
-      <div class="nav-item">
+      <div class="nav-item" @click="goToInspection">
         <span>巡检</span>
       </div>
-      <div class="nav-item">
+      <div class="nav-item" @click="goToWorkOrders">
         <span>工单</span>
       </div>
-      <div class="nav-item">
+      <div class="nav-item" @click="goToProfile">
         <span>我的</span>
       </div>
     </div>
@@ -72,19 +78,32 @@
 </template>
 
 <script setup>
-// 移除未使用的 router 导入
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const userInfo = authStore.getUserInfo()
+const router = useRouter()
+
 const goToInspection = () => {
   console.log('跳转到巡检页面')
-  // 如果需要路由跳转，可以在这里添加
-  // const router = useRouter()
-  // router.push('/inspection')
+  router.push('/inspection')
 }
 
 const goToWorkOrders = () => {
   console.log('跳转到工单页面')
-  // 如果需要路由跳转，可以在这里添加
-  // const router = useRouter()
-  // router.push('/work-orders')
+  router.push('/work-orders')
+}
+
+const goToHome = () => {
+  if (router.currentRoute.value.path !== '/home') {
+    router.push('/home')
+  }
+}
+
+const goToProfile = () => {
+  console.log('跳转到我的页面')
+  router.push('/profile')
 }
 </script>
 
@@ -273,13 +292,41 @@ const goToWorkOrders = () => {
   color: #666;
   cursor: pointer;
   transition: color 0.3s;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .nav-item.active {
   color: #1890ff;
+  position: relative;
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 2px;
+  background: #1890ff;
+  border-radius: 1px;
 }
 
 .nav-item:hover {
   color: #1890ff;
 }
+
+.user-info {
+  font-size: 12px;
+}
+
+.user-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.user-type {
+  color: #666;
+  font-size: 11px;
+}
 </style>
diff --git a/src/main/resources/zzz/src/views/InspectionForm.vue b/src/main/resources/zzz/src/views/InspectionForm.vue
new file mode 100644
index 0000000..d606403
--- /dev/null
+++ b/src/main/resources/zzz/src/views/InspectionForm.vue
@@ -0,0 +1,534 @@
+<template>
+  <div class="inspection-form">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">巡检表单</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="form-container">
+        <!-- 设备状态 -->
+        <div class="form-section">
+          <div class="section-title">设备状态</div>
+          <div class="status-selector">
+            <div
+              class="status-option"
+              :class="{ 'active': selectedStatus === 'normal' }"
+              @click="selectStatus('normal')"
+            >
+              正常
+            </div>
+            <div
+              class="status-option"
+              :class="{ 'active': selectedStatus === 'warning' }"
+              @click="selectStatus('warning')"
+            >
+              异常
+            </div>
+          </div>
+        </div>
+
+        <!-- 异常描述 -->
+        <div v-if="selectedStatus === 'warning'" class="form-section">
+          <div class="section-title">异常描述</div>
+          <textarea
+            v-model="abnormalDescription"
+            class="abnormal-textarea"
+            placeholder="请描述处理异常..."
+            rows="4"
+          ></textarea>
+        </div>
+
+        <!-- 现场照片 -->
+        <div class="form-section">
+          <div class="section-title">现场照片</div>
+          <div class="photo-upload">
+            <div class="upload-area" @click="uploadPhoto">
+              <div class="upload-icon">📷</div>
+              <div class="upload-text">点击上传照片</div>
+            </div>
+            <input
+              type="file"
+              ref="fileInput"
+              @change="handleFileUpload"
+              accept="image/*"
+              style="display: none"
+            />
+
+            <!-- 照片预览 -->
+            <div v-if="uploadedPhotos.length > 0" class="photo-preview">
+              <div v-for="(photo, index) in uploadedPhotos" :key="index" class="preview-item">
+                <div class="preview-image">
+                  <img :src="photo.url" :alt="`照片${index + 1}`" />
+                </div>
+                <div class="preview-actions">
+                  <button class="preview-btn delete" @click="removePhoto(index)">
+                    删除
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="submit-btn" @click="submitInspection" :disabled="submitting">
+        {{ submitting ? '提交中...' : '提交巡检' }}
+      </button>
+    </div>
+
+    <!-- 提交成功弹窗 -->
+    <div v-if="showSuccessModal" class="success-modal">
+      <div class="modal-content">
+        <div class="modal-icon">✅</div>
+        <div class="modal-title">提交成功</div>
+        <button class="modal-btn" @click="closeSuccessModal">
+          返回
+        </button>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 设备状态
+const selectedStatus = ref('normal')
+const abnormalDescription = ref('')
+
+// 照片上传
+const uploadedPhotos = ref([])
+const fileInput = ref(null)
+
+// 提交状态
+const submitting = ref(false)
+const showSuccessModal = ref(false)
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+// 选择设备状态
+const selectStatus = (status) => {
+  selectedStatus.value = status
+  if (status === 'normal') {
+    abnormalDescription.value = ''
+  }
+}
+
+// 上传照片
+const uploadPhoto = () => {
+  fileInput.value.click()
+}
+
+const handleFileUpload = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      uploadedPhotos.value.push({
+        file: file,
+        url: e.target.result,
+        name: file.name
+      })
+    }
+    reader.readAsDataURL(file)
+
+    // 重置文件输入
+    event.target.value = ''
+  }
+}
+
+const removePhoto = (index) => {
+  uploadedPhotos.value.splice(index, 1)
+}
+
+// 提交巡检
+const submitInspection = async () => {
+  if (selectedStatus.value === 'warning' && !abnormalDescription.value.trim()) {
+    alert('请填写异常描述')
+    return
+  }
+
+  submitting.value = true
+
+  // 模拟API调用
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1500))
+
+    console.log('提交巡检数据:', {
+      status: selectedStatus.value,
+      description: abnormalDescription.value,
+      photos: uploadedPhotos.value.length
+    })
+
+    // 显示成功弹窗
+    showSuccessModal.value = true
+
+  } catch (error) {
+    console.error('提交失败:', error)
+    alert('提交失败，请重试')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭成功弹窗
+const closeSuccessModal = () => {
+  showSuccessModal.value = false
+  // 返回巡检页面
+  router.push('/inspection')
+}
+
+onMounted(() => {
+  // 初始化时可以选择默认设备
+  console.log('巡检表单页面加载')
+})
+</script>
+
+<style scoped>
+.inspection-form {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-container {
+  flex: 1;
+}
+
+/* 表单区块 */
+.form-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+/* 状态选择器 */
+.status-selector {
+  display: flex;
+  gap: 12px;
+}
+
+.status-option {
+  flex: 1;
+  padding: 12px;
+  text-align: center;
+  border: 2px solid #f0f0f0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.status-option:hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.status-option.active {
+  border-color: #1890ff;
+  background: #f0f7ff;
+  color: #1890ff;
+}
+
+/* 异常描述文本框 */
+.abnormal-textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+}
+
+.abnormal-textarea:focus {
+  outline: none;
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+.abnormal-textarea::placeholder {
+  color: #999;
+}
+
+/* 照片上传区域 */
+.photo-upload {
+  width: 100%;
+}
+
+.upload-area {
+  width: 100%;
+  padding: 40px 20px;
+  border: 2px dashed #e0e0e0;
+  border-radius: 6px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 16px;
+}
+
+.upload-area:hover {
+  border-color: #1890ff;
+  background: #f8fbff;
+}
+
+.upload-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.6;
+}
+
+.upload-text {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 照片预览 */
+.photo-preview {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.preview-item {
+  background: #f8f9fa;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.preview-image {
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+
+.preview-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-actions {
+  padding: 8px;
+  text-align: center;
+}
+
+.preview-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.preview-btn.delete {
+  background: #ff4d4f;
+  color: white;
+}
+
+.preview-btn.delete:hover {
+  background: #ff7875;
+}
+
+/* 提交按钮 */
+.submit-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 20px;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.3);
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 成功弹窗 */
+.success-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px 24px;
+  text-align: center;
+  width: 280px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.modal-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.modal-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 24px;
+}
+
+.modal-btn {
+  width: 100%;
+  padding: 12px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.modal-btn:hover {
+  background: #096dd9;
+  transform: translateY(-1px);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+  z-index: 100;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/InspectionPage.vue b/src/main/resources/zzz/src/views/InspectionPage.vue
new file mode 100644
index 0000000..0bcd5de
--- /dev/null
+++ b/src/main/resources/zzz/src/views/InspectionPage.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="inspection-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">设备巡检</div>
+      <div class="header-right">
+        <span class="my-area-btn">我的片区</span>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 片区列表 -->
+      <div class="area-list">
+        <!-- 岳麓片区 -->
+        <div class="area-card">
+          <div class="area-info">
+            <div class="area-name">岳麓片区</div>
+            <div class="area-details">5所学校 · 12台制水机</div>
+          </div>
+          <div class="area-divider"></div>
+          <button class="view-btn" @click="viewYueluArea">查看</button>
+        </div>
+
+        <!-- 雨花片区 -->
+        <div class="area-card">
+          <div class="area-info">
+            <div class="area-name">雨花片区</div>
+            <div class="area-details">3所学校 · 8台制水机</div>
+          </div>
+          <div class="area-divider"></div>
+          <button class="view-btn" @click="viewYuhuaArea">查看</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">
+        <span>首页</span>
+      </div>
+      <div class="nav-item active">
+        <span>巡检</span>
+      </div>
+      <div class="nav-item" @click="goToWorkOrders">
+        <span>工单</span>
+      </div>
+      <div class="nav-item" @click="goToProfile">
+        <span>我的</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToWorkOrders = () => {
+  console.log('跳转到工单页面')
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  console.log('跳转到我的页面')
+  router.push('/profile')
+}
+
+const viewYueluArea = () => {
+  console.log('查看岳麓片区详情')
+  // 跳转到扫码页面
+  router.push('/inspection/scan')
+}
+
+const viewYuhuaArea = () => {
+  console.log('查看雨花片区详情')
+  // 跳转到扫码页面
+  router.push('/inspection/scan')
+}
+</script>
+
+<style scoped>
+.inspection-page {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left,
+.header-right {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.back-btn,
+.my-area-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover,
+.my-area-btn:hover {
+  color: #096dd9;
+}
+
+.back-btn {
+  text-align: left;
+}
+
+.my-area-btn {
+  text-align: right;
+  display: block;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+
+/* 片区列表 */
+.area-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.area-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.area-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.area-info {
+  flex: 1;
+}
+
+.area-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.area-details {
+  font-size: 13px;
+  color: #666;
+}
+
+.area-divider {
+  width: 1px;
+  height: 40px;
+  background: #e8e8e8;
+  margin: 0 16px;
+}
+
+.view-btn {
+  padding: 8px 24px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.view-btn:hover {
+  background: #096dd9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/InspectionScan.vue b/src/main/resources/zzz/src/views/InspectionScan.vue
new file mode 100644
index 0000000..0097e13
--- /dev/null
+++ b/src/main/resources/zzz/src/views/InspectionScan.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="inspection-scan">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">设备巡检</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="scan-container">
+        <!-- 扫码框 -->
+        <div class="scan-box">
+          <div class="scan-icon">📷</div>
+          <div class="scan-border">
+            <div class="scan-line"></div>
+          </div>
+        </div>
+
+        <div class="scan-text">请扫描设备上二维码以开始巡检</div>
+
+        <button class="scan-complete-btn" @click="simulateScanComplete">
+          扫描完成
+        </button>
+
+        <div class="scan-tips">
+          <p>💡 提示：将二维码放入框内自动扫描</p>
+          <p>或点击"扫描完成"模拟测试</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item active" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+// 模拟扫码完成
+const simulateScanComplete = () => {
+  console.log('模拟扫码完成，跳转到制水机列表')
+  router.push('/inspection/water-maker')
+}
+</script>
+
+<style scoped>
+.inspection-scan {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* 扫码容器 */
+.scan-container {
+  width: 100%;
+  max-width: 320px;
+  background: white;
+  border-radius: 12px;
+  padding: 30px 20px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+/* 扫码框 */
+.scan-box {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto 30px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.scan-icon {
+  font-size: 60px;
+  margin: 40px 0 20px;
+  opacity: 0.7;
+}
+
+.scan-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px dashed #1890ff;
+  border-radius: 8px;
+}
+
+.scan-line {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  height: 2px;
+  background: #1890ff;
+  animation: scanAnimation 2s linear infinite;
+}
+
+@keyframes scanAnimation {
+  0% {
+    top: 0;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+/* 扫码文本 */
+.scan-text {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 30px;
+  font-weight: 500;
+}
+
+/* 扫码完成按钮 */
+.scan-complete-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 20px;
+}
+
+.scan-complete-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
+}
+
+/* 扫码提示 */
+.scan-tips {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.scan-tips p {
+  margin: 5px 0;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/LoginPage.vue b/src/main/resources/zzz/src/views/LoginPage.vue
index e013563..60f833f 100644
--- a/src/main/resources/zzz/src/views/LoginPage.vue
+++ b/src/main/resources/zzz/src/views/LoginPage.vue
@@ -1,33 +1,74 @@
-<!-- src/views/LoginPage.vue -->
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { authServices } from '@/services/authServices'
+import { useAuthStore } from '@/stores/auth'
 
+const authStore = useAuthStore()
 const router = useRouter()
+const usertype = ref('repairer')
 const username = ref('')
 const password = ref('')
 const loading = ref(false)
 
+// 在 handleLogin 函数中添加更多日志
+// 在 LoginPage.vue 中添加更详细的调试
 const handleLogin = async () => {
+  console.log('开始登录流程');
   if (!username.value || !password.value) {
-    alert('请输入账号和密码')
-    return
+    alert('请输入账号和密码');
+    return;
   }
 
-  loading.value = true
+  loading.value = true;
   try {
-    const result = await authServices.login(username.value, password.value)
-    console.log('登录成功:', result)
-    // Store user info or token if needed
-    router.push('/home')
+    console.log('调用 authServices.login', {
+      username: username.value,
+      password: password.value,
+      userType: usertype.value
+    });
+
+    const result = await authServices.login({
+      username: username.value,
+      password: password.value,
+      userType: usertype.value
+    });
+
+    if (result && result.code === 200) {
+      console.log('登录成功:', result);
+
+      // 保存用户信息到存储
+      authStore.login({
+        username: result.data.username,
+        userType: result.data.userType,
+        userId: result.data.userId,
+        repairmanId: username.value
+      }, result.data.token);
+
+      // 保存到本地存储
+      localStorage.setItem('token', result.data.token);
+      localStorage.setItem('userId', result.data.userId);
+      localStorage.setItem('username', result.data.username);
+      localStorage.setItem('userType', result.data.userType);
+      localStorage.setItem('repairmanId', username.value);
+
+      alert('登录成功！');
+      router.push('/home');
+    } else {
+      alert('登录失败: ' + (result?.message || '未知错误'));
+    }
   } catch (error) {
-    console.error('登录失败:', error)
-    alert('登录失败: ' + (error.message || '未知错误'))
+    console.error('登录过程异常:', error);
+    alert('登录失败: ' + (error.message || '未知错误'));
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
+
+// 跳转到注册页面
+const goToRegister = () => {
+  router.push('/repairer-register');
+};
 </script>
 
 <template>
@@ -64,6 +105,14 @@ const handleLogin = async () => {
         <button type="submit" class="login-button" :disabled="loading">
           {{ loading ? '登录中...' : '登录' }}
         </button>
+
+        <!-- 添加注册按钮 -->
+        <div class="register-section">
+          <p class="register-text">还没有账户？</p>
+          <button type="button" class="register-button" @click="goToRegister" :disabled="loading">
+            立即注册
+          </button>
+        </div>
       </form>
     </div>
   </div>
@@ -164,7 +213,8 @@ const handleLogin = async () => {
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
-  margin-top: auto;
+  margin-top: 20px;
+  margin-bottom: 15px;
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
@@ -182,4 +232,46 @@ const handleLogin = async () => {
 .login-button:active:not(:disabled) {
   transform: translateY(0);
 }
+
+/* 注册部分样式 */
+.register-section {
+  text-align: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.register-text {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.register-button {
+  width: 100%;
+  padding: 12px;
+  background: white;
+  color: #667eea;
+  border: 1px solid #667eea;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.register-button:hover:not(:disabled) {
+  background: #f8f9ff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+
+.register-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.register-button:active:not(:disabled) {
+  transform: translateY(0);
+}
 </style>
diff --git a/src/main/resources/zzz/src/views/ProfilePage.vue b/src/main/resources/zzz/src/views/ProfilePage.vue
new file mode 100644
index 0000000..d01bb40
--- /dev/null
+++ b/src/main/resources/zzz/src/views/ProfilePage.vue
@@ -0,0 +1,545 @@
+<template>
+  <div class="profile-page">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-title">个人中心</div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 个人信息卡片 -->
+      <div class="profile-card">
+        <div class="profile-header">
+          <div class="user-avatar">
+            <div class="avatar-icon">👤</div>
+          </div>
+          <div class="user-info">
+            <div class="user-name">维修员 张三</div>
+            <div class="user-id">工号：REP2023001</div>
+            <div class="user-area">负责片区：教学楼A区、图书馆、宿舍C区</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 本月工作统计 -->
+      <div class="stats-section">
+        <div class="section-title">本月工作统计</div>
+        <div class="stats-grid">
+          <div class="stat-item">
+            <div class="stat-number">23</div>
+            <div class="stat-label">处理工单</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">45</div>
+            <div class="stat-label">设备巡检</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">98%</div>
+            <div class="stat-label">响应率</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">95%</div>
+            <div class="stat-label">完成率</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 功能菜单 -->
+      <div class="menu-section">
+        <div class="section-title">功能菜单</div>
+        <div class="menu-list">
+          <div class="menu-item" @click="goToSettings">
+            <div class="menu-left">
+              <div class="menu-icon">⚙️</div>
+              <div class="menu-text">系统设置</div>
+            </div>
+            <div class="menu-right">></div>
+          </div>
+
+          <div class="menu-item" @click="goToNotifications">
+            <div class="menu-left">
+              <div class="menu-icon">🔔</div>
+              <div class="menu-text">消息通知</div>
+              <div class="badge" v-if="unreadCount > 0">{{ unreadCount }}</div>
+            </div>
+            <div class="menu-right">></div>
+          </div>
+
+          <div class="menu-item" @click="goToFeedback">
+            <div class="menu-left">
+              <div class="menu-icon">📝</div>
+              <div class="menu-text">问题反馈</div>
+            </div>
+            <div class="menu-right">></div>
+          </div>
+
+          <div class="menu-item" @click="goToHelp">
+            <div class="menu-left">
+              <div class="menu-icon">❓</div>
+              <div class="menu-text">使用帮助</div>
+            </div>
+            <div class="menu-right">></div>
+          </div>
+
+          <div class="menu-item" @click="goToAbout">
+            <div class="menu-left">
+              <div class="menu-icon">ℹ️</div>
+              <div class="menu-text">关于我们</div>
+            </div>
+            <div class="menu-right">></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 退出登录按钮 -->
+      <div class="logout-section">
+        <button class="logout-btn" @click="logout">
+          退出登录
+        </button>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item active" @click="goToProfile">我的</div>
+    </div>
+
+    <!-- 退出确认弹窗 -->
+    <div v-if="showLogoutConfirm" class="confirm-modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="modal-title">确认退出</div>
+        </div>
+        <div class="modal-body">
+          <div class="modal-message">确定要退出登录吗？</div>
+        </div>
+        <div class="modal-footer">
+          <button class="modal-btn cancel" @click="cancelLogout">取消</button>
+          <button class="modal-btn confirm" @click="confirmLogout">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+// 未读消息数量
+const unreadCount = ref(3)
+// 显示退出确认弹窗
+const showLogoutConfirm = ref(false)
+
+// 导航函数
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  // 如果已经在个人中心页面，则刷新
+  if (router.currentRoute.value.path === '/profile') {
+    // 可以重新加载数据
+    console.log('刷新个人中心')
+  }
+}
+
+// 功能菜单跳转
+const goToSettings = () => {
+  console.log('跳转到系统设置')
+  alert('系统设置页面开发中')
+}
+
+const goToNotifications = () => {
+  console.log('跳转到消息通知')
+  alert('消息通知页面开发中')
+  // 可以在这里清空未读消息
+  // unreadCount.value = 0
+}
+
+const goToFeedback = () => {
+  console.log('跳转到问题反馈')
+  alert('问题反馈页面开发中')
+}
+
+const goToHelp = () => {
+  console.log('跳转到使用帮助')
+  alert('使用帮助页面开发中')
+}
+
+const goToAbout = () => {
+  console.log('跳转到关于我们')
+  alert('关于我们页面开发中')
+}
+
+// 退出登录
+const logout = () => {
+  showLogoutConfirm.value = true
+}
+
+// 取消退出
+const cancelLogout = () => {
+  showLogoutConfirm.value = false
+}
+
+// 确认退出
+const confirmLogout = () => {
+  console.log('用户退出登录');
+  showLogoutConfirm.value = false;
+
+  // 调用存储的登出方法
+  authStore.logout();
+}
+</script>
+
+<style scoped>
+.profile-page {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+/* 个人信息卡片 */
+.profile-card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.profile-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.user-avatar {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-icon {
+  font-size: 32px;
+  color: white;
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.user-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.user-id {
+  font-size: 14px;
+  color: #666;
+}
+
+.user-area {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+/* 统计区域 */
+.stats-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.stat-item {
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.stat-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #666;
+}
+
+/* 菜单区域 */
+.menu-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.menu-item:not(:last-child) {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.menu-item:hover {
+  background: #fafafa;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin: 0 -8px;
+  border-radius: 4px;
+}
+
+.menu-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.menu-icon {
+  font-size: 20px;
+}
+
+.menu-text {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+}
+
+.badge {
+  background: #ff4d4f;
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 10px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.menu-right {
+  font-size: 16px;
+  color: #999;
+  transition: transform 0.3s;
+}
+
+.menu-item:hover .menu-right {
+  transform: translateX(2px);
+  color: #1890ff;
+}
+
+/* 退出登录按钮 */
+.logout-section {
+  padding: 16px;
+}
+
+.logout-btn {
+  width: 100%;
+  padding: 14px;
+  background: #ff4d4f;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
+}
+
+.logout-btn:hover {
+  background: #ff7875;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+
+/* 确认弹窗 */
+.confirm-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 280px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.modal-header {
+  padding: 20px 24px 12px;
+  text-align: center;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.modal-body {
+  padding: 0 24px 20px;
+  text-align: center;
+}
+
+.modal-message {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.modal-footer {
+  display: flex;
+  border-top: 1px solid #f0f0f0;
+}
+
+.modal-btn {
+  flex: 1;
+  padding: 14px;
+  border: none;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.modal-btn.cancel {
+  background: #f5f5f5;
+  color: #666;
+  border-right: 1px solid #f0f0f0;
+}
+
+.modal-btn.cancel:hover {
+  background: #e8e8e8;
+}
+
+.modal-btn.confirm {
+  background: #1890ff;
+  color: white;
+}
+
+.modal-btn.confirm:hover {
+  background: #096dd9;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/RepairerRegisterPage.vue b/src/main/resources/zzz/src/views/RepairerRegisterPage.vue
new file mode 100644
index 0000000..91f8017
--- /dev/null
+++ b/src/main/resources/zzz/src/views/RepairerRegisterPage.vue
@@ -0,0 +1,401 @@
+<!-- src/views/RepairerRegisterPage.vue -->
+<template>
+  <div class="register-page">
+    <!-- 顶部返回按钮 -->
+    <div class="header">
+      <button class="back-btn" @click="goBack">
+        <span>←</span> 返回
+      </button>
+      <h1 class="title">维修人员注册</h1>
+    </div>
+
+    <!-- 注册表单 -->
+    <div class="form-container">
+      <form @submit.prevent="handleRegister">
+        <!-- 用户名 -->
+        <div class="form-group">
+          <label>用户名 *</label>
+          <input
+            v-model="form.username"
+            type="text"
+            placeholder="请输入用户名"
+            :class="{ 'error': errors.username }"
+            :disabled="loading"
+          />
+          <div v-if="errors.username" class="error-message">
+            {{ errors.username }}
+          </div>
+        </div>
+
+        <!-- 维修人员ID -->
+        <div class="form-group">
+          <label>维修人员ID *</label>
+          <input
+            v-model="form.repairmanId"
+            type="text"
+            placeholder="请输入维修人员ID"
+            :class="{ 'error': errors.repairmanId }"
+            :disabled="loading"
+          />
+          <div v-if="errors.repairmanId" class="error-message">
+            {{ errors.repairmanId }}
+          </div>
+        </div>
+
+        <!-- 密码 -->
+        <div class="form-group">
+          <label>密码 *</label>
+          <div class="password-wrapper">
+            <input
+              v-model="form.password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="请输入密码（6-16位字母或数字）"
+              :class="{ 'error': errors.password }"
+              :disabled="loading"
+            />
+            <button
+              type="button"
+              class="toggle-password"
+              @click="showPassword = !showPassword"
+              :disabled="loading"
+            >
+              {{ showPassword ? '隐藏' : '显示' }}
+            </button>
+          </div>
+          <div v-if="errors.password" class="error-message">
+            {{ errors.password }}
+          </div>
+        </div>
+
+        <!-- 确认密码 -->
+        <div class="form-group">
+          <label>确认密码 *</label>
+          <div class="password-wrapper">
+            <input
+              v-model="form.confirmPassword"
+              :type="showConfirmPassword ? 'text' : 'password'"
+              placeholder="请再次输入密码"
+              :class="{ 'error': errors.confirmPassword }"
+              :disabled="loading"
+            />
+            <button
+              type="button"
+              class="toggle-password"
+              @click="showConfirmPassword = !showConfirmPassword"
+              :disabled="loading"
+            >
+              {{ showConfirmPassword ? '隐藏' : '显示' }}
+            </button>
+          </div>
+          <div v-if="errors.confirmPassword" class="error-message">
+            {{ errors.confirmPassword }}
+          </div>
+        </div>
+
+        <!-- 注册按钮 -->
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? '注册中...' : '立即注册' }}
+        </button>
+
+        <!-- 已有账号 -->
+        <div class="login-link">
+          已有账号？
+          <button type="button" @click="goToLogin" :disabled="loading">
+            去登录
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { authServices } from '@/services/authServices'
+
+const router = useRouter()
+
+// 表单数据
+const form = reactive({
+  username: '',
+  repairmanId: '',
+  password: '',
+  confirmPassword: ''
+})
+
+// 错误信息
+const errors = reactive({
+  username: '',
+  repairmanId: '',
+  password: '',
+  confirmPassword: ''
+})
+
+// 状态
+const loading = ref(false)
+const showPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+// 表单验证
+const validateForm = () => {
+  // 清空错误信息
+  Object.keys(errors).forEach(key => errors[key] = '')
+
+  let isValid = true
+
+  // 用户名验证
+  if (!form.username.trim()) {
+    errors.username = '请输入用户名'
+    isValid = false
+  } else if (form.username.trim().length < 2) {
+    errors.username = '用户名至少2个字符'
+    isValid = false
+  }
+
+  // 维修人员ID验证
+  if (!form.repairmanId.trim()) {
+    errors.repairmanId = '请输入维修人员ID'
+    isValid = false
+  }
+
+  // 密码验证
+  if (!form.password) {
+    errors.password = '请输入密码'
+    isValid = false
+  } else if (form.password.length < 6 || form.password.length > 16) {
+    errors.password = '密码长度应为6-16位'
+    isValid = false
+  } else if (!/^[a-zA-Z0-9]+$/.test(form.password)) {
+    errors.password = '密码只能包含字母和数字'
+    isValid = false
+  }
+
+  // 确认密码验证
+  if (!form.confirmPassword) {
+    errors.confirmPassword = '请确认密码'
+    isValid = false
+  } else if (form.password !== form.confirmPassword) {
+    errors.confirmPassword = '两次输入的密码不一致'
+    isValid = false
+  }
+
+  return isValid
+}
+
+// 注册处理
+const handleRegister = async () => {
+  if (!validateForm()) return
+
+  loading.value = true
+
+  try {
+    // 准备注册数据
+    const registerData = {
+      username: form.username.trim(),
+      password: form.password,
+      repairmanId: form.repairmanId.trim()
+    }
+
+    // 调用注册接口
+    const result = await authServices.repairerRegister(registerData)
+
+    // 处理响应结果
+    if (result && result.code === 200) {
+      alert('注册成功！请使用用户名和密码登录')
+      // 清空表单
+      form.username = ''
+      form.repairmanId = ''
+      form.password = ''
+      form.confirmPassword = ''
+      // 跳转到登录页
+      router.push('/')
+    } else {
+      alert('注册失败: ' + (result?.message || '未知错误'))
+    }
+  } catch (error) {
+    // 处理错误
+    console.error('注册过程错误:', error)
+
+    let errorMessage = '注册失败'
+
+    if (error.message) {
+      if (error.message.includes('用户名已存在')) {
+        errorMessage = '用户名已存在，请更换用户名'
+      } else if (error.message.includes('维修人员ID已被注册')) {
+        errorMessage = '维修人员ID已被注册'
+      } else {
+        errorMessage = error.message
+      }
+    }
+
+    alert(errorMessage)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 跳转函数
+const goBack = () => {
+  router.back()
+}
+
+const goToLogin = () => {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.register-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px 16px;
+  color: white;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 16px;
+  padding: 8px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 16px 0 0;
+}
+
+.form-container {
+  padding: 30px 20px;
+  background: white;
+  margin-top: 20px;
+  border-radius: 12px 12px 0 0;
+  min-height: calc(100vh - 150px);
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 15px;
+  box-sizing: border-box;
+  background: #fafafa;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: white;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-group input.error {
+  border-color: #ff4d4f;
+}
+
+.form-group input::placeholder {
+  color: #999;
+}
+
+.form-group input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.password-wrapper {
+  position: relative;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #667eea;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.toggle-password:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.error-message {
+  color: #ff4d4f;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 30px;
+}
+
+.submit-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.login-link {
+  text-align: center;
+  margin-top: 20px;
+  color: #666;
+  font-size: 14px;
+}
+
+.login-link button {
+  background: none;
+  border: none;
+  color: #667eea;
+  font-weight: 500;
+  padding: 0 4px;
+  cursor: pointer;
+}
+
+.login-link button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WaterMakerDetail.vue b/src/main/resources/zzz/src/views/WaterMakerDetail.vue
new file mode 100644
index 0000000..00f0b4e
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WaterMakerDetail.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="water-maker-detail">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">制水机详情</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="device-detail-container">
+        <!-- 设备信息 -->
+        <div class="info-section">
+          <div class="section-title">设备信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <div class="info-label">设备ID</div>
+              <div class="info-value">制水机 #A102</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">安装位置</div>
+              <div class="info-value">A区教学楼 2楼水房</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">设备状态</div>
+              <div class="info-value status-normal">正常运行</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">运行时间</div>
+              <div class="info-value">1,246 小时</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 水质监测 -->
+        <div class="info-section">
+          <div class="section-title">水质监测</div>
+          <div class="monitoring-grid">
+            <div class="monitoring-item">
+              <div class="monitoring-label">自来水TDS</div>
+              <div class="monitoring-value">285</div>
+              <div class="monitoring-unit">mg/L</div>
+            </div>
+            <div class="monitoring-item">
+              <div class="monitoring-label">纯净水TDS</div>
+              <div class="monitoring-value">13</div>
+              <div class="monitoring-unit">mg/L</div>
+            </div>
+            <div class="monitoring-item">
+              <div class="monitoring-label">矿化水TDS</div>
+              <div class="monitoring-value">87</div>
+              <div class="monitoring-unit">mg/L</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 滤芯状态 -->
+        <div class="info-section">
+          <div class="section-title">滤芯状态</div>
+          <div class="filter-grid">
+            <div class="filter-item">
+              <div class="filter-name">滤芯1</div>
+              <div class="filter-status status-normal">正常</div>
+              <div class="filter-lifespan">剩余寿命：65%</div>
+            </div>
+            <div class="filter-item">
+              <div class="filter-name">滤芯2</div>
+              <div class="filter-status status-warning">寿命低</div>
+              <div class="filter-lifespan">剩余寿命：35%</div>
+            </div>
+            <div class="filter-item">
+              <div class="filter-name">滤芯3</div>
+              <div class="filter-status status-normal">正常</div>
+              <div class="filter-lifespan">剩余寿命：72%</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 传感器监控 -->
+        <div class="info-section">
+          <div class="section-title">传感器监控</div>
+          <div class="sensor-grid">
+            <div class="sensor-item">
+              <div class="sensor-name">流量计1</div>
+              <div class="sensor-value">12.9</div>
+              <div class="sensor-unit">L/min</div>
+              <div class="sensor-extra">今日流量 1,245L</div>
+            </div>
+            <div class="sensor-item">
+              <div class="sensor-name">流量计2</div>
+              <div class="sensor-value">8.1</div>
+              <div class="sensor-unit">L/min</div>
+              <div class="sensor-extra">今日流量 865L</div>
+            </div>
+            <div class="sensor-item">
+              <div class="sensor-name">自来水压力</div>
+              <div class="sensor-value">2.8</div>
+              <div class="sensor-unit">kg/cm²</div>
+              <div class="sensor-extra status-normal">正常</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="inspect-btn" @click="startInspection">
+        开始巡检
+      </button>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+const startInspection = () => {
+  console.log('开始巡检制水机')
+  router.push('/inspection/form')
+}
+</script>
+
+<style scoped>
+.water-maker-detail {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-detail-container {
+  flex: 1;
+}
+
+/* 信息区块 */
+.info-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+/* 设备信息网格 */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.info-item {
+  padding: 8px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.status-normal {
+  color: #52c41a;
+}
+
+.status-warning {
+  color: #faad14;
+}
+
+/* 水质监测网格 */
+.monitoring-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.monitoring-item {
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.monitoring-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.monitoring-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 2px;
+}
+
+.monitoring-unit {
+  font-size: 11px;
+  color: #999;
+}
+
+/* 滤芯状态网格 */
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.filter-item {
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.filter-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.filter-status {
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.filter-lifespan {
+  font-size: 11px;
+  color: #666;
+}
+
+/* 传感器监控网格 */
+.sensor-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.sensor-item {
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.sensor-name {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.sensor-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 2px;
+}
+
+.sensor-unit {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.sensor-extra {
+  font-size: 11px;
+  color: #666;
+}
+
+/* 巡检按钮 */
+.inspect-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 20px;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.inspect-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.3);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WaterMakerList.vue b/src/main/resources/zzz/src/views/WaterMakerList.vue
new file mode 100644
index 0000000..83dbf6c
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WaterMakerList.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="water-maker-list">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">设备巡检</div>
+      <div class="header-right">
+        <span class="nav-text">制水机</span>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 学校1 -->
+      <div class="school-section">
+        <div class="school-name">学校1</div>
+
+        <div class="device-list">
+          <div class="device-item">
+            <div class="device-info">
+              <div class="device-name">制水机#A102</div>
+              <div class="device-location">A区教学楼 - 上次巡检时间2023-9-10</div>
+            </div>
+            <div class="device-actions">
+              <button class="action-btn detail" @click="viewDeviceDetail('A102')">
+                详情
+              </button>
+              <button class="action-btn inspect" @click="viewWaterSupplier('A102')">
+                查看供水机
+              </button>
+            </div>
+          </div>
+
+          <div class="device-item">
+            <div class="device-info">
+              <div class="device-name">制水机#C103</div>
+              <div class="device-location">C区宿舍 - 上次巡检时间2023-9-10</div>
+            </div>
+            <div class="device-actions">
+              <button class="action-btn detail" @click="viewDeviceDetail('C103')">
+                详情
+              </button>
+              <button class="action-btn inspect" @click="viewWaterSupplier('C103')">
+                查看供水机
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 学校2 -->
+      <div class="school-section">
+        <div class="school-name">学校2</div>
+
+        <div class="device-list">
+          <div class="device-item">
+            <div class="device-info">
+              <div class="device-name">制水机#B101</div>
+              <div class="device-location">B区操场 - 上次巡检时间2023-9-10</div>
+            </div>
+            <div class="device-actions">
+              <button class="action-btn detail" @click="viewDeviceDetail('B101')">
+                详情
+              </button>
+              <button class="action-btn inspect" @click="viewWaterSupplier('B101')">
+                查看供水机
+              </button>
+            </div>
+          </div>
+
+          <div class="device-item">
+            <div class="device-info">
+              <div class="device-name">制水机#D104</div>
+              <div class="device-location">D区食堂 - 上次巡检时间2023-9-10</div>
+            </div>
+            <div class="device-actions">
+              <button class="action-btn detail" @click="viewDeviceDetail('D104')">
+                详情
+              </button>
+              <button class="action-btn inspect" @click="viewWaterSupplier('D104')">
+                查看供水机
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item active" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+const viewDeviceDetail = (deviceId) => {
+  router.push(`/inspection/water-maker/${deviceId}`)
+}
+
+const viewWaterSupplier = (deviceId) => {
+  router.push('/inspection/water-supplier')
+}
+</script>
+
+<style scoped>
+.water-maker-list {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+  text-align: right;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+.nav-text {
+  font-size: 14px;
+  color: #1890ff;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+/* 学校区块 */
+.school-section {
+  background: white;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.school-name {
+  background: #f0f7ff;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1890ff;
+  border-bottom: 1px solid #e8f4ff;
+}
+
+/* 设备列表 */
+.device-list {
+  padding: 16px;
+}
+
+.device-item {
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.device-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.device-item:first-child {
+  padding-top: 0;
+}
+
+.device-info {
+  margin-bottom: 12px;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.device-location {
+  font-size: 13px;
+  color: #666;
+}
+
+/* 设备操作按钮 */
+.device-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn.detail {
+  background: #1890ff;
+  color: white;
+}
+
+.action-btn.inspect {
+  background: white;
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WaterSupplierDetail.vue b/src/main/resources/zzz/src/views/WaterSupplierDetail.vue
new file mode 100644
index 0000000..ee6b201
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WaterSupplierDetail.vue
@@ -0,0 +1,517 @@
+<template>
+  <div class="water-supplier-detail">
+    <!-- 顶部栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">供水机详情</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="detail-container">
+        <!-- 设备信息 -->
+        <div class="detail-section">
+          <div class="section-title">设备信息</div>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <div class="item-label">设备ID</div>
+              <div class="item-value">{{ deviceInfo.id }}</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">安装位置</div>
+              <div class="item-value">{{ deviceInfo.location }}</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">设备状态</div>
+              <div class="item-value status-normal">{{ deviceInfo.status }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 水位信息 -->
+        <div class="detail-section">
+          <div class="section-title">水位信息</div>
+          <div class="water-level-content">
+            <div class="water-level-chart">
+              <div class="level-box">
+                <div class="level-percentage">{{ deviceInfo.waterLevel }}%</div>
+                <div class="level-label">当前水位</div>
+              </div>
+
+              <div class="storage-box">
+                <div class="storage-value">{{ deviceInfo.storageCapacity }}L</div>
+                <div class="storage-label">储水量</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 浮球阀状态 -->
+        <div class="detail-section">
+          <div class="section-title">浮球阀状态</div>
+          <div class="float-valve-content">
+            <!-- 高水位浮球阀 -->
+            <div class="float-valve-item">
+              <div class="valve-info">
+                <div class="valve-label">高水位浮球阀</div>
+                <div class="valve-value" :class="getValveClass(deviceInfo.highValve)">
+                  {{ deviceInfo.highValve }}
+                </div>
+              </div>
+              <div class="valve-description">水位达到90%时自动关闭进水</div>
+            </div>
+
+            <!-- 低水位浮球阀 -->
+            <div class="float-valve-item">
+              <div class="valve-info">
+                <div class="valve-label">低水位浮球阀</div>
+                <div class="valve-value" :class="getValveClass(deviceInfo.lowValve)">
+                  {{ deviceInfo.lowValve }}
+                </div>
+              </div>
+              <div class="valve-description">水位低于10%时自动开启进水</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 漏水检测 -->
+        <div class="detail-section">
+          <div class="section-title">漏水检测</div>
+          <div class="leak-detection-content">
+            <div class="detection-info">
+              <div class="sensor-info">
+                <div class="sensor-label">浮球阀传感器</div>
+              </div>
+              <div class="detection-result">
+                <div class="result-info">
+                  <div class="result-label">检测结果</div>
+                  <div class="result-value" :class="getLeakClass(deviceInfo.leakStatus)">
+                    {{ deviceInfo.leakStatus }}
+                  </div>
+                </div>
+                <div class="result-description">{{ deviceInfo.leakDescription }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 开始巡检按钮 -->
+      <button class="start-inspection-btn" @click="startInspection">
+        开始巡检
+      </button>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">
+        <span>首页</span>
+      </div>
+      <div class="nav-item active">
+        <span>巡检</span>
+      </div>
+      <div class="nav-item" @click="goToWorkOrders">
+        <span>工单</span>
+      </div>
+      <div class="nav-item" @click="goToProfile">
+        <span>我的</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 设备数据 - 根据HTML内容调整
+const deviceInfo = ref({
+  id: '供水机 #A106',
+  name: '供水机 #A106',
+  location: 'A区教学楼 1楼走廊',
+  status: '正常运行',
+  waterLevel: 66,
+  storageCapacity: 360,
+  highValve: '开启',
+  lowValve: '关闭',
+  leakSensor: '浮球阀传感器',
+  leakStatus: '无漏水',
+  leakDescription: '设备周边未检测到漏水情况'
+})
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 开始巡检
+const startInspection = () => {
+  console.log('开始巡检供水机', deviceInfo.value.id)
+  router.push('/inspection/form')
+}
+
+// 导航函数
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+// 获取阀门状态样式类
+const getValveClass = (valveStatus) => {
+  return valveStatus === '开启' ? 'valve-open' : 'valve-closed'
+}
+
+// 获取漏水状态样式类
+const getLeakClass = (leakStatus) => {
+  return leakStatus === '无漏水' ? 'leak-none' : 'leak-detected'
+}
+
+// 模拟从API获取设备详情
+onMounted(() => {
+  const deviceId = router.currentRoute.value.params.id
+  console.log('加载供水机详情，设备ID:', deviceId)
+
+  // 根据设备ID更新数据
+  if (deviceId) {
+    deviceInfo.value.id = `供水机 #${deviceId}`
+  }
+})
+</script>
+
+<style scoped>
+.water-supplier-detail {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-container {
+  flex: 1;
+}
+
+/* 详情区块 */
+.detail-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+/* 设备信息网格 */
+.detail-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.detail-item:not(:last-child) {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.item-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.item-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.status-normal {
+  color: #52c41a;
+}
+
+/* 水位信息 */
+.water-level-content {
+  padding: 8px 0;
+}
+
+.water-level-chart {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.level-box {
+  flex: 1;
+  text-align: center;
+  padding: 16px;
+  background: #f0f7ff;
+  border-radius: 8px;
+  border: 1px solid #d6e4ff;
+}
+
+.level-percentage {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.level-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.storage-box {
+  flex: 1;
+  text-align: center;
+  padding: 16px;
+  background: #f6ffed;
+  border-radius: 8px;
+  border: 1px solid #b7eb8f;
+}
+
+.storage-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #52c41a;
+  margin-bottom: 4px;
+}
+
+.storage-label {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 浮球阀状态 */
+.float-valve-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.float-valve-item {
+  padding: 12px;
+  background: #fafafa;
+  border-radius: 6px;
+  border: 1px solid #e8e8e8;
+}
+
+.valve-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.valve-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.valve-value {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border-radius: 4px;
+}
+
+.valve-open {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.valve-closed {
+  background: #fff2e8;
+  color: #fa541c;
+  border: 1px solid #ffbb96;
+}
+
+.valve-description {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* 漏水检测 */
+.leak-detection-content {
+  padding: 8px 0;
+}
+
+.detection-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sensor-info {
+  padding: 8px 0;
+}
+
+.sensor-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.detection-result {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.result-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.result-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.result-value {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+
+.leak-none {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.leak-detected {
+  background: #fff2e8;
+  color: #fa541c;
+  border: 1px solid #ffbb96;
+}
+
+.result-description {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* 开始巡检按钮 */
+.start-inspection-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 20px;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.start-inspection-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.3);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WaterSupplierList.vue b/src/main/resources/zzz/src/views/WaterSupplierList.vue
new file mode 100644
index 0000000..4f1d3c4
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WaterSupplierList.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="water-supplier-list">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">设备巡检</div>
+      <div class="header-right">
+        <span class="nav-text">供水机</span>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="device-list">
+        <div class="device-item">
+          <div class="device-info">
+            <div class="device-name">供水机#A105</div>
+            <div class="device-status">上次巡检时间2023-9-10</div>
+          </div>
+          <div class="device-actions">
+            <button class="action-btn detail" @click="viewDeviceDetail('A105')">
+              详情
+            </button>
+            <button class="action-btn inspect" @click="startInspection('A105')">
+              开始巡检
+            </button>
+          </div>
+        </div>
+
+        <div class="device-item">
+          <div class="device-info">
+            <div class="device-name">供水机#A106</div>
+            <div class="device-status">上次巡检时间2023-9-10</div>
+          </div>
+          <div class="device-actions">
+            <button class="action-btn detail" @click="viewDeviceDetail('A106')">
+              详情
+            </button>
+            <button class="action-btn inspect" @click="startInspection('A106')">
+              开始巡检
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item active" @click="goToInspection">巡检</div>
+      <div class="nav-item" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.back()
+}
+
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+const viewDeviceDetail = (deviceId) => {
+  router.push(`/inspection/water-supplier/${deviceId}`)
+}
+
+const startInspection = (deviceId) => {
+  console.log(`开始巡检供水机 ${deviceId}`)
+  router.push('/inspection/form')
+}
+</script>
+
+<style scoped>
+.water-supplier-list {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+  text-align: right;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+.nav-text {
+  font-size: 14px;
+  color: #1890ff;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+
+/* 设备列表 */
+.device-list {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.device-item {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.device-item:last-child {
+  border-bottom: none;
+}
+
+.device-info {
+  flex: 1;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.device-status {
+  font-size: 13px;
+  color: #666;
+}
+
+/* 设备操作按钮 */
+.device-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn.detail {
+  background: #f0f7ff;
+  color: #1890ff;
+}
+
+.action-btn.inspect {
+  background: #1890ff;
+  color: white;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WorkOrderDetail.vue b/src/main/resources/zzz/src/views/WorkOrderDetail.vue
new file mode 100644
index 0000000..5e57f2e
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WorkOrderDetail.vue
@@ -0,0 +1,931 @@
+<template>
+  <div class="work-order-detail">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">{{ pageTitle }}</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <div class="detail-container">
+        <!-- 工单信息 -->
+        <div class="detail-section">
+          <div class="section-title">工单信息</div>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <div class="item-label">工单ID</div>
+              <div class="item-value">1001</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">设备ID</div>
+              <div class="item-value">供水机#A105</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">告警项目</div>
+              <div class="item-value">水位异常</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">工单类型</div>
+              <div class="item-value">系统报修</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">上报时间</div>
+              <div class="item-value">2023-10-28 13:20</div>
+            </div>
+            <div class="detail-item">
+              <div class="item-label">安装位置</div>
+              <div class="item-value">A区教学楼 2楼走廊</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 告警信息 -->
+        <div class="detail-section">
+          <div class="section-title">告警信息</div>
+          <div class="alert-content">
+            <div class="alert-item">
+              <div class="alert-label">告警内容</div>
+              <div class="alert-value">水位低于设定下限值，连续24小时低水位</div>
+            </div>
+            <div class="alert-item">
+              <div class="alert-label">处理建议</div>
+              <div class="alert-value">检查供水系统</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 维修项目 -->
+        <div class="detail-section">
+          <div class="section-title">维修项目</div>
+          <div class="repair-content">
+            <div class="repair-item">
+              <div class="repair-label">报修项目</div>
+              <div class="repair-value">更换传感器</div>
+            </div>
+
+            <!-- 标准维护项目选择 -->
+            <div class="form-group" v-if="showRepairForm">
+              <div class="form-label">标准维护项目</div>
+              <select v-model="selectedStandardItem" class="form-select">
+                <option value="">点击以选择</option>
+                <option value="更换传感器">更换传感器</option>
+                <option value="更换滤芯1">更换滤芯1</option>
+                <option value="更换滤芯2">更换滤芯2</option>
+                <option value="更换滤芯3">更换滤芯3</option>
+                <option value="更换滤芯4">更换滤芯4</option>
+                <option value="更换D8滤芯1">更换D8滤芯1</option>
+              </select>
+            </div>
+
+            <!-- 实际维修项目选择 -->
+            <div class="form-group" v-if="showRepairForm">
+              <div class="form-label">实际维修项目</div>
+              <select v-model="selectedActualItem" class="form-select">
+                <option value="">点击以选择</option>
+                <option value="无">无</option>
+                <option value="更换前置滤芯1">1.更换前置滤芯1 -材料费50￥+检修费60￥= 110￥</option>
+                <option value="更换前置滤芯2">2.更换前置滤芯2 -材料费50￥+检修费60￥= 110￥</option>
+                <option value="更换前置滤芯3">3.更换前置滤芯3 -材料费50￥+检修费60￥= 110￥</option>
+                <option value="更换前置滤芯4">4.更换前置滤芯4 -材料费50￥+检修费60￥= 110￥</option>
+                <option value="更换D8滤芯1">5.更换D8滤芯1 -材料费50￥+检修费60￥= 110￥</option>
+              </select>
+            </div>
+
+            <!-- 现场照片 -->
+            <div class="form-group" v-if="showRepairForm">
+              <div class="form-label">现场照片</div>
+              <div class="photo-upload" @click="uploadPhoto">
+                <div class="upload-icon">📷</div>
+                <div class="upload-text">点击上传照片</div>
+              </div>
+              <input
+                type="file"
+                ref="fileInput"
+                @change="handleFileUpload"
+                accept="image/*"
+                style="display: none"
+              />
+
+              <!-- 照片预览 -->
+              <div v-if="uploadedPhotos.length > 0" class="photo-preview">
+                <div v-for="(photo, index) in uploadedPhotos" :key="index" class="preview-item">
+                  <img :src="photo.url" :alt="`照片${index + 1}`" />
+                  <button class="preview-delete" @click="removePhoto(index)">×</button>
+                </div>
+              </div>
+            </div>
+
+            <!-- 处理备注 -->
+            <div class="form-group" v-if="showRepairForm">
+              <div class="form-label">处理备注</div>
+              <textarea
+                v-model="repairNotes"
+                class="form-textarea"
+                placeholder="请描述处理过程和结果..."
+                rows="3"
+              ></textarea>
+            </div>
+          </div>
+        </div>
+
+        <!-- 根据工单状态显示不同操作区域 -->
+        <div v-if="orderStatus === 'pending'" class="action-buttons">
+          <button class="action-btn grab" @click="grabOrder">
+            抢单
+          </button>
+          <button class="action-btn reject" @click="rejectOrder">
+            拒单
+          </button>
+        </div>
+
+        <div v-if="orderStatus === 'processing' && !showRepairForm" class="action-buttons">
+          <button class="action-btn process" @click="startRepair">
+            开始维修
+          </button>
+          <button class="action-btn complete" @click="completeWithoutRepair">
+            直接完成
+          </button>
+        </div>
+
+        <div v-if="showRepairForm" class="action-buttons">
+          <button class="action-btn submit" @click="submitRepair" :disabled="submitting">
+            {{ submitting ? '提交中...' : '提交维修结果' }}
+          </button>
+          <button class="action-btn cancel" @click="cancelRepair">
+            取消
+          </button>
+        </div>
+      </div>
+
+      <!-- 维修完成确认弹窗 -->
+      <div v-if="showCompleteConfirm" class="confirm-modal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="modal-title">确认完成</div>
+          </div>
+          <div class="modal-body">
+            <div class="modal-message">确定直接完成此工单吗？此操作将跳过维修记录填写。</div>
+          </div>
+          <div class="modal-footer">
+            <button class="modal-btn cancel" @click="cancelComplete">取消</button>
+            <button class="modal-btn confirm" @click="confirmComplete">确定</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提交成功弹窗 -->
+      <div v-if="showSuccessModal" class="success-modal">
+        <div class="modal-content">
+          <div class="modal-icon">✅</div>
+          <div class="modal-title">提交成功</div>
+          <div class="modal-message">维修结果已提交</div>
+          <button class="modal-btn" @click="closeSuccessModal">
+            确定
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item" @click="goToInspection">巡检</div>
+      <div class="nav-item active" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+// 从路由参数获取工单状态
+const orderStatus = ref(route.query.status || 'pending')
+const showRepairForm = ref(false)
+const submitting = ref(false)
+const showSuccessModal = ref(false)
+const showCompleteConfirm = ref(false)
+
+// 表单数据
+const selectedStandardItem = ref('')
+const selectedActualItem = ref('')
+const repairNotes = ref('')
+const uploadedPhotos = ref([])
+const fileInput = ref(null)
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 导航函数
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  router.push('/work-orders')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+// 抢单
+const grabOrder = () => {
+  console.log('抢单')
+  showRepairForm.value = true
+  orderStatus.value = 'processing'
+}
+
+// 拒单
+const rejectOrder = () => {
+  if (confirm('确定要拒单吗？')) {
+    console.log('拒单')
+    router.push('/work-orders')
+  }
+}
+
+// 开始维修
+const startRepair = () => {
+  showRepairForm.value = true
+}
+
+// 直接完成工单
+const completeWithoutRepair = () => {
+  showCompleteConfirm.value = true
+}
+
+// 确认直接完成
+const confirmComplete = async () => {
+  try {
+    console.log('直接完成工单')
+
+    // 模拟API调用
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    alert('工单已完成')
+    showCompleteConfirm.value = false
+    // 返回工单列表，切换到历史标签
+    router.push({
+      path: '/work-orders',
+      query: { tab: 'history' }
+    })
+  } catch (error) {
+    console.error('完成失败:', error)
+    alert('操作失败，请重试')
+  }
+}
+
+// 取消直接完成
+const cancelComplete = () => {
+  showCompleteConfirm.value = false
+}
+
+// 取消维修
+const cancelRepair = () => {
+  if (confirm('确定要取消维修吗？未保存的内容将丢失')) {
+    showRepairForm.value = false
+    resetForm()
+  }
+}
+
+// 提交维修结果
+const submitRepair = async () => {
+  if (!selectedActualItem.value) {
+    alert('请选择实际维修项目')
+    return
+  }
+
+  if (!repairNotes.value.trim()) {
+    alert('请填写处理备注')
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    // 模拟API调用
+    await new Promise(resolve => setTimeout(resolve, 1500))
+
+    console.log('提交维修结果:', {
+      standardItem: selectedStandardItem.value,
+      actualItem: selectedActualItem.value,
+      notes: repairNotes.value,
+      photos: uploadedPhotos.value.length
+    })
+
+    // 显示成功弹窗
+    showSuccessModal.value = true
+
+  } catch (error) {
+    console.error('提交失败:', error)
+    alert('提交失败，请重试')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭成功弹窗
+const closeSuccessModal = () => {
+  showSuccessModal.value = false
+  // 返回工单列表，切换到历史标签
+  router.push({
+    path: '/work-orders',
+    query: { tab: 'history' }
+  })
+}
+
+// 照片上传
+const uploadPhoto = () => {
+  fileInput.value.click()
+}
+
+const handleFileUpload = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      uploadedPhotos.value.push({
+        file: file,
+        url: e.target.result,
+        name: file.name
+      })
+    }
+    reader.readAsDataURL(file)
+
+    // 重置文件输入
+    event.target.value = ''
+  }
+}
+
+const removePhoto = (index) => {
+  uploadedPhotos.value.splice(index, 1)
+}
+
+// 重置表单
+const resetForm = () => {
+  selectedStandardItem.value = ''
+  selectedActualItem.value = ''
+  repairNotes.value = ''
+  uploadedPhotos.value = []
+}
+
+// 根据工单状态显示标题
+const pageTitle = computed(() => {
+  return orderStatus.value === 'processing' ? '处理工单' : '工单详情'
+})
+
+onMounted(() => {
+  const orderId = route.params.id
+  const status = route.query.status
+
+  console.log('加载工单详情，工单ID:', orderId, '状态:', status)
+})
+</script>
+
+<style scoped>
+.work-order-detail {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.detail-container {
+  margin-bottom: 20px;
+}
+
+/* 详情区块 */
+.detail-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+/* 工单信息网格 */
+.detail-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.detail-item:not(:last-child) {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.item-label {
+  font-size: 14px;
+  color: #666;
+  min-width: 80px;
+}
+
+.item-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  text-align: right;
+  flex: 1;
+}
+
+/* 告警信息 */
+.alert-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.alert-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.alert-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.alert-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.4;
+}
+
+/* 维修项目 */
+.repair-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.repair-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.repair-label {
+  font-size: 14px;
+  color: #666;
+  min-width: 80px;
+}
+
+.repair-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  text-align: right;
+  flex: 1;
+}
+
+/* 表单组 */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.form-select {
+  padding: 10px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+.form-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.5;
+}
+
+.form-textarea:focus {
+  outline: none;
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+.form-textarea::placeholder {
+  color: #999;
+}
+
+/* 照片上传 */
+.photo-upload {
+  padding: 40px 20px;
+  border: 2px dashed #e0e0e0;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  background: #fafafa;
+}
+
+.photo-upload:hover {
+  border-color: #1890ff;
+  background: #f8fbff;
+}
+
+.upload-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+  opacity: 0.6;
+}
+
+.upload-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.photo-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.preview-item {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-delete {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.preview-delete:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 14px;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn.grab {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.action-btn.grab:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+.action-btn.reject {
+  background: #ff4d4f;
+  color: white;
+}
+
+.action-btn.reject:hover {
+  background: #ff7875;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
+}
+
+.action-btn.process {
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  color: white;
+}
+
+.action-btn.process:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+.action-btn.complete {
+  background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
+  color: white;
+}
+
+.action-btn.complete:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(19, 194, 194, 0.3);
+}
+
+.action-btn.submit {
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  color: white;
+}
+
+.action-btn.submit:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+.action-btn.submit:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.action-btn.cancel {
+  background: #f5f5f5;
+  color: #666;
+  border: 1px solid #e0e0e0;
+}
+
+.action-btn.cancel:hover {
+  background: #e8e8e8;
+  transform: translateY(-2px);
+}
+
+/* 确认弹窗 */
+.confirm-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirm-modal .modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 300px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.confirm-modal .modal-header {
+  padding: 20px 24px 12px;
+  text-align: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.confirm-modal .modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.confirm-modal .modal-body {
+  padding: 20px 24px;
+}
+
+.confirm-modal .modal-message {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.confirm-modal .modal-footer {
+  display: flex;
+  border-top: 1px solid #f0f0f0;
+}
+
+.confirm-modal .modal-btn {
+  flex: 1;
+  padding: 14px;
+  border: none;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.confirm-modal .modal-btn.cancel {
+  background: #f5f5f5;
+  color: #666;
+  border-right: 1px solid #f0f0f0;
+}
+
+.confirm-modal .modal-btn.cancel:hover {
+  background: #e8e8e8;
+}
+
+.confirm-modal .modal-btn.confirm {
+  background: #1890ff;
+  color: white;
+}
+
+.confirm-modal .modal-btn.confirm:hover {
+  background: #096dd9;
+}
+
+/* 成功弹窗 */
+.success-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.success-modal .modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px 24px;
+  text-align: center;
+  width: 280px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.success-modal .modal-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.success-modal .modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.success-modal .modal-message {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 24px;
+}
+
+.success-modal .modal-btn {
+  width: 100%;
+  padding: 12px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.success-modal .modal-btn:hover {
+  background: #096dd9;
+  transform: translateY(-1px);
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>
diff --git a/src/main/resources/zzz/src/views/WorkOrderList.vue b/src/main/resources/zzz/src/views/WorkOrderList.vue
new file mode 100644
index 0000000..b335aee
--- /dev/null
+++ b/src/main/resources/zzz/src/views/WorkOrderList.vue
@@ -0,0 +1,523 @@
+<template>
+  <div class="work-order-list">
+    <!-- 顶部标题栏 -->
+    <div class="header">
+      <div class="header-left">
+        <span class="back-btn" @click="goBack">返回</span>
+      </div>
+      <div class="header-title">工单管理</div>
+      <div class="header-right"></div>
+    </div>
+
+    <!-- 标签切换 -->
+    <div class="tab-container">
+      <div class="tabs">
+        <div
+          class="tab"
+          :class="{ 'active': activeTab === 'pending' }"
+          @click="switchTab('pending')"
+        >
+          待抢单
+        </div>
+        <div
+          class="tab"
+          :class="{ 'active': activeTab === 'processing' }"
+          @click="switchTab('processing')"
+        >
+          处理中
+        </div>
+        <div
+          class="tab"
+          :class="{ 'active': activeTab === 'history' }"
+          @click="switchTab('history')"
+        >
+          历史
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 待抢单工单列表 -->
+      <div v-if="activeTab === 'pending'" class="order-list">
+        <div class="order-item" @click="viewOrderDetail('1001')">
+          <div class="order-content">
+            <div class="order-title">制水机#A105 - TDS超标</div>
+            <div class="order-info">
+              <span class="order-location">A区教学楼</span>
+              <span class="order-time">10分钟前</span>
+            </div>
+          </div>
+          <button class="order-btn grab" @click.stop="grabOrder('1001')">
+            抢单
+          </button>
+        </div>
+
+        <div class="order-item" @click="viewOrderDetail('1002')">
+          <div class="order-content">
+            <div class="order-title">供水机#B105 - 水位异常</div>
+            <div class="order-info">
+              <span class="order-location">B区图书馆</span>
+              <span class="order-time">25分钟前</span>
+            </div>
+          </div>
+          <button class="order-btn grab" @click.stop="grabOrder('1002')">
+            抢单
+          </button>
+        </div>
+      </div>
+
+      <!-- 处理中工单列表 -->
+      <div v-if="activeTab === 'processing'" class="order-list">
+        <div class="order-item" @click="viewOrderDetail('1002')">
+          <div class="order-content">
+            <div class="order-title">供水机#B105 - 水位异常</div>
+            <div class="order-info">
+              <span class="order-location">B区图书馆</span>
+              <span class="order-time">抢单时间: 25分钟前</span>
+            </div>
+            <div class="order-status">
+              <span class="status-badge processing">处理中</span>
+            </div>
+          </div>
+          <button class="order-btn process" @click.stop="startProcessOrder('1002')">
+            继续处理
+          </button>
+        </div>
+
+        <div class="order-item" @click="viewOrderDetail('1003')">
+          <div class="order-content">
+            <div class="order-title">制水机#A102 - TDS超标</div>
+            <div class="order-info">
+              <span class="order-location">A区教学楼</span>
+              <span class="order-time">抢单时间: 15分钟前</span>
+            </div>
+            <div class="order-status">
+              <span class="status-badge pending">待处理</span>
+            </div>
+          </div>
+          <button class="order-btn process" @click.stop="startProcessOrder('1003')">
+            开始处理
+          </button>
+        </div>
+      </div>
+
+      <!-- 历史工单列表 -->
+      <div v-if="activeTab === 'history'" class="order-list">
+        <div class="order-item">
+          <div class="order-content">
+            <div class="order-title">供水机#B105 - 滤芯损坏</div>
+            <div class="order-info">
+              <span class="order-location">B区图书馆</span>
+              <span class="order-time">2023-10-04</span>
+            </div>
+          </div>
+          <button class="order-btn completed">
+            已结款
+          </button>
+        </div>
+      </div>
+
+      <!-- 抢单成功弹窗 -->
+      <div v-if="showGrabSuccess" class="success-modal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="modal-close" @click="closeGrabSuccess">×</div>
+          </div>
+          <div class="modal-body">
+            <div class="modal-icon">✅</div>
+            <div class="modal-title">抢单成功！</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="bottom-nav">
+      <div class="nav-item" @click="goToHome">首页</div>
+      <div class="nav-item" @click="goToInspection">巡检</div>
+      <div class="nav-item active" @click="goToWorkOrders">工单</div>
+      <div class="nav-item" @click="goToProfile">我的</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const activeTab = ref('pending')
+const showGrabSuccess = ref(false)
+
+// 切换标签页
+const switchTab = (tab) => {
+  activeTab.value = tab
+}
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 导航函数
+const goToHome = () => {
+  router.push('/home')
+}
+
+const goToInspection = () => {
+  router.push('/inspection')
+}
+
+const goToWorkOrders = () => {
+  // 如果已经在工单页面，则刷新
+  if (router.currentRoute.value.path === '/work-orders') {
+    activeTab.value = 'pending'
+  } else {
+    router.push('/work-orders')
+  }
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+// 查看工单详情
+const viewOrderDetail = (orderId) => {
+  router.push(`/work-orders/${orderId}`)
+}
+
+// 抢单
+const grabOrder = (orderId) => {
+  console.log(`抢单 ${orderId}`)
+  // 模拟抢单成功
+  showGrabSuccess.value = true
+  // 3秒后自动关闭弹窗
+  setTimeout(() => {
+    showGrabSuccess.value = false
+    // 抢单成功后，该工单应该从待抢单列表移除，添加到处理中列表
+    switchTab('processing')
+  }, 3000)
+}
+
+// 开始处理工单
+const startProcessOrder = (orderId) => {
+  console.log(`开始处理工单 ${orderId}`)
+  // 跳转到处理页面，传递工单ID和状态
+  router.push({
+    path: `/work-orders/${orderId}`,
+    query: { status: 'processing' }
+  })
+}
+
+// 关闭抢单成功弹窗
+const closeGrabSuccess = () => {
+  showGrabSuccess.value = false
+}
+</script>
+
+<style scoped>
+.work-order-list {
+  width: 100%;
+  height: 100%;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏 */
+.header {
+  background: white;
+  padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-left {
+  width: 80px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  flex: 1;
+}
+
+.header-right {
+  width: 80px;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #1890ff;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.back-btn:hover {
+  color: #096dd9;
+}
+
+/* 标签切换 */
+.tab-container {
+  background: white;
+  padding: 0 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 12px 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.tab:hover {
+  color: #1890ff;
+}
+
+.tab.active {
+  color: #1890ff;
+  font-weight: 600;
+}
+
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #1890ff;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* 工单列表 */
+.order-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.order-item {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.order-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.order-content {
+  flex: 1;
+}
+
+.order-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.order-info {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+  color: #666;
+}
+
+.order-location {
+  position: relative;
+  padding-right: 12px;
+}
+
+.order-location::after {
+  content: '•';
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+}
+
+.order-time {
+  color: #999;
+}
+
+/* 工单状态 */
+.order-status {
+  margin-top: 8px;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+.status-badge.processing {
+  background: #fff7e6;
+  color: #fa8c16;
+  border: 1px solid #ffd591;
+}
+
+.status-badge.pending {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+/* 工单按钮 */
+.order-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-left: 8px;
+  min-width: 60px;
+}
+
+.order-btn.grab {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.order-btn.grab:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+}
+
+.order-btn.process {
+  background: #52c41a;
+  color: white;
+}
+
+.order-btn.process:hover {
+  background: #73d13d;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+}
+
+.order-btn.completed {
+  background: #f0f0f0;
+  color: #666;
+  cursor: default;
+}
+
+/* 抢单成功弹窗 */
+.success-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 280px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.modal-header {
+  padding: 8px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modal-close {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  padding: 4px 12px;
+  transition: color 0.3s;
+}
+
+.modal-close:hover {
+  color: #333;
+}
+
+.modal-body {
+  padding: 32px 24px;
+  text-align: center;
+}
+
+.modal-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  display: flex;
+  background: white;
+  border-top: 1px solid #e8e8e8;
+  padding: 8px 0;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-item.active {
+  color: #1890ff;
+}
+
+.nav-item:hover {
+  color: #1890ff;
+}
+</style>