aiot-uniapp/PLAN.md

AIView UI 改造实施计划

概述

将 aiot-uniapp 从通用管理系统 UI 改造为 AIView 物业管理风格。基于已确认需求：

• Tab 栏：5 → 3（工作台/扫码巡检FAB/我的），消息入口移至工作台右上角
• 主题色：全局统一橙色（amber-400 → orange-500）
• 新增 Splash 启动页、扫码巡检模块、工单池模块、员工管理模块
• 改造登录页、工作台、"我的"页面 UI
• 现有 pages-system/pages-infra/pages-bpm 保留不动，后续参考用
• 新模块先用 mock 数据，后续对接接口

---

阶段 1：基础框架改造

Step 1.1 — 全局主题色替换

目标: 将 #1890ff 蓝色主题替换为 #f97316（orange-500）橙色主题

修改文件:

文件	改动
uno.config.ts:89	primary 颜色值从 #0957DE 改为 #f97316
uno.config.ts:74	safelist 新增扫码巡检 Tab 图标 i-carbon-scan
src/style/index.scss	取消注释 CSS 变量，设置 --wot-color-theme: #f97316
src/uni.scss	$uni-color-primary 从 #007aff 改为 #f97316
src/store/theme.ts	themeVars 默认值设置 colorTheme: '#f97316'

约束:

• 不改动 pages-system/pages-infra/pages-bpm 中硬编码的颜色（保留不动）
• wot-design-uni 通过 CSS 变量 --wot-color-theme 全局生效

Step 1.2 — Tab 栏重构（5 → 3）

目标: 工作台 / 扫码巡检（居中 FAB） / 我的

修改文件:

文件	改动
src/tabbar/config.ts	customTabbarList 改为 3 项：工作台(i-carbon-home)、扫码巡检(bulge/FAB)、我的(i-carbon-user)
src/tabbar/store.ts	BULGE_ENABLE 改为 true（启用中间鼓包）
src/tabbar/index.vue	鼓包样式改为 AIView 的橙色圆形凸起扫码按钮（橙色背景+白色 Scan 图标+阴影）
src/tabbar/index.vue:73	activeColor 从 #1890ff 改为 #f97316
pages.config.ts:7	navigationBarTitleText 改为 AIView

新增 Tab 页:

• src/pages/scan/index.vue — 扫码巡检 Tab 页（空壳，阶段 3 实现内容）

处理旧 Tab 页:

• src/pages/bpm/index.vue — 保留文件，仅从 tabbar 移除（仍可通过工作台菜单进入）
• src/pages/contact/index.vue — 同上
• src/pages/message/index.vue — 同上，消息入口移至工作台右上角

关键约束:

• tabbar 使用 CUSTOM_TABBAR_WITH_CACHE 策略不变
• 扫码巡检为中间 bulge 项，isBulge: true
• 修改后需重启开发服务器

---

阶段 2：核心页面改造

Step 2.1 — Splash 启动页

新增文件: src/pages-core/splash/index.vue

功能:

• 全屏橙色渐变背景（from-amber-400 via-orange-400 to-orange-500）
• 中间：毛玻璃圆角方块 + ShieldCheck 图标（用 wd-icon 或 UnoCSS icon）
• 品牌文字：AIView + 副标题 "AIoT驱动的物业新服务"
• 底部加载动画（3个脉冲圆点）
• 2 秒后自动跳转登录页

修改文件:

文件	改动
src/router/interceptor.ts	添加 splash 页面到白名单
src/router/config.ts	新增 SPLASH_PAGE 常量

启动流程: App 启动 → Splash → 检查 Token → 有则进工作台 / 无则进登录

Step 2.2 — 登录页 UI 改造

修改文件: src/pages-core/auth/login.vue + styles/auth.scss + components/header.vue

UI 变更（保留全部业务逻辑不变）:

• 顶部区域：橙色渐变背景 + AIView Logo + 品牌文字
• 底部白色圆角卡片（rounded-t-[44px]）内包含表单
• 输入框：浅灰背景 + 橙色图标 + 大圆角
• 租户选择器：保留，样式适配橙色主题
• 登录按钮：橙色渐变（from-amber-400 to-orange-500）+ 圆角 + 阴影
• 验证码登录/忘记密码链接：橙色文字
• 第三方登录区域：保留，图标颜色不变
• 创建账号链接：保留，橙色主题色

不改动的逻辑:

• formData、handleLogin、verifySuccess 等全部保留
• TenantPicker、Verify 组件保留
• 路由跳转逻辑保留

Step 2.3 — 工作台全面替换

修改文件: src/pages/index/index.vue + 子组件

重写子组件:

组件	改动
components/user-header.vue	重写为 AIView 风格：橙色渐变头部 + 用户头像/姓名/角色 + 右上角消息铃铛（原消息 Tab 入口）
components/banner.vue	替换为实时统计区域：客流统计 + 工单统计 + 迷你图表（mock 数据）
components/menu-section.vue	改为 AIView 风格：2×3 宫格白色卡片 + 橙色图标，保留现有菜单数据结构和权限过滤逻辑
新增 components/area-warning.vue	区域预警状态列表（mock 数据：区域名/进度条/人员/风险等级）

index.vue 布局:

橙色渐变头部（用户信息 + 消息铃铛 + 统计数据 + 迷你图表）
  ↓ 圆角过渡
常用应用（6宫格：工单池/数据看板/员工管理/考勤打卡/报修管理/培训学习）
  ↓
区域预警状态列表

菜单入口映射:

• 工单池 → /pages/scan/work-order/index（阶段 3 新建）
• 员工管理 → /pages/scan/staff/index（阶段 3 新建）
• 数据看板/考勤打卡/报修管理/培训学习 → 暂用 toast 提示"开发中"

Step 2.4 — "我的"页面 UI 改造

修改文件: src/pages/user/index.vue

UI 变更（保留全部业务逻辑不变）:

• 头部：橙色渐变背景 + 大圆角底部 + 头像/姓名/工号/角色标签
• 统计卡片：白色浮动卡片（负 margin 覆盖头部底部），3 列统计（本月工单/合格率/平均响应，mock）
• 菜单列表：保留现有 6 项（个人资料/账号安全/常见问题/意见反馈/联系客服/应用设置），改为 AIView 圆角白卡片样式 + 橙色图标背景
• 退出按钮：红色底色圆角按钮
• 底部版本号文字

保留不变: getUserProfile、handleLogout、所有跳转函数

---

阶段 3：新增业务模块

Step 3.1 — 扫码巡检模块

新增文件:

src/pages/scan/
  index.vue                      # Tab 页：扫码器界面
  inspection/index.vue           # 巡检录入表单（从扫码跳转）
  work-order/index.vue           # 工单池列表
  work-order/create.vue          # 创建工单
  staff/index.vue                # 员工管理列表

scan/index.vue（Tab 页）:

• 全屏扫码器界面（uni.scanCode API）
• 扫码框 UI：四角橙色边框 + 扫描线动画 + 提示文字
• 扫码成功 → 跳转巡检录入页
• 手动输入按钮 → 跳转巡检录入页（可选区域）

inspection/index.vue（巡检录入）:

• 顶部：当前巡检区域（橙色背景卡片 + 切换区域按钮）
• 检查清单：4 项勾选（地面洁净度/垃圾负荷/物资状态/环境空气）+ 全部合格按钮
• 问题描述：文本域 + 拍照/相册按钮
• 提交按钮：橙色渐变

Step 3.2 — 工单池模块

work-order/index.vue:

• 顶部导航栏 + 右侧新增按钮
• Tab 筛选栏：全部/待派发/进行中
• 工单卡片列表：优先级标签(P0/P1/P2) + 标题 + 位置 + 时间 + 操作按钮/承接人
• mock 4 条工单数据

work-order/create.vue:

• 巡检区域选择（底部弹窗列表）
• 工单详情（文本域 + 拍照）
• 优先级选择（P0/P1/P2 三选一）
• 确认派单按钮

Step 3.3 — 员工管理模块

staff/index.vue:

• 顶部导航栏 + 搜索框
• 统计概览：在岗人数/活跃率
• 员工卡片列表：头像 + 在线状态指示灯 + 姓名/工号 + 位置 + 任务数
• mock 4 条员工数据

---

阶段 4：收尾与验证

Step 4.1 — 导航流整合

验证流程:

1. 启动 → Splash（2s）→ 登录页
2. 登录成功 → 工作台
3. Tab 切换：工作台 ↔ 扫码巡检 ↔ 我的
4. 工作台 → 工单池 / 员工管理
5. 扫码 → 巡检录入
6. 我的 → 个人资料/安全/设置等（现有功能）

Step 4.2 — 样式一致性检查

• 所有新页面使用统一背景色 #FFFDF5（AIView 暖白）
• 卡片统一 rounded-2xl + border border-orange-50 + shadow-sm
• 文字层级：标题 font-bold text-gray-800、副标题 text-gray-400、标签 text-[10px] uppercase tracking-widest

---

文件变更汇总

类型	文件数	说明
修改	~12	tabbar 配置/组件/store、主题文件、登录页、工作台、我的页面、路由配置
新增	~7	scan/index.vue、inspection、work-order(2)、staff、area-warning 组件、splash
不动	150+	pages-system、pages-infra、pages-bpm 全部保留

执行顺序

Step 1.1 主题色 → Step 1.2 Tab栏
  → Step 2.1 Splash → Step 2.2 登录页 → Step 2.3 工作台 → Step 2.4 我的
    → Step 3.1 扫码巡检 → Step 3.2 工单池 → Step 3.3 员工管理
      → Step 4.1 导航验证 → Step 4.2 样式检查