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 样式检查
```