232 lines
8.8 KiB
Markdown
232 lines
8.8 KiB
Markdown
# 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 样式检查
|
||
```
|