docs: 添加开发计划、设计规范和设计稿

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 14:31:46 +08:00
parent c9979da18d
commit 6be7d38e63
4 changed files with 2290 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,28 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git rm:*)",
+      "Bash(git push:*)",
+      "Bash(npx eslint:*)",
+      "Bash(pnpm lint:*)",
+      "Bash(test:*)",
+      "Bash(dir:*)",
+      "Bash(find:*)",
+      "WebSearch",
+      "Bash(pnpm lint:fix:*)",
+      "WebFetch(domain:uviewpro.cn)",
+      "WebFetch(domain:wot-design-uni.cn)",
+      "WebFetch(domain:wot-ui.cn)",
+      "Bash(python3 skills/ui-ux-pro-max/scripts/search.py \"IoT mobile app login WeChat miniprogram modern orange\" --design-system -p \"AIoT Login\")",
+      "Bash(python skills/ui-ux-pro-max/scripts/search.py \"IoT mobile app login orange gradient mobile\" --design-system -p \"AIoT Login\")",
+      "Bash(where python)",
+      "Bash(where python3)",
+      "Bash(py --version)",
+      "Bash(py skills/ui-ux-pro-max/scripts/search.py \"IoT mobile app login orange gradient modern elegant\" --design-system -p \"AIoT Login\")",
+      "Bash(py \"cli/assets/scripts/search.py\" \"IoT mobile app login orange gradient modern elegant\" --design-system -p \"AIoT Login\")",
+      "Bash(findstr /i \"input\\\\|cell\\\\|password\\\\|field\\\\|search\\\\|form\\\\|picker\\\\|code\")"
+    ]
+  }
+}
--- a/PLAN.md
+++ b/PLAN.md
@@ -0,0 +1,231 @@
+# 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 样式检查
+```
--- a/aiot-login-design.pen
+++ b/aiot-login-design.pen
--- a/docs/DESIGN_SPEC.md
+++ b/docs/DESIGN_SPEC.md
@@ -0,0 +1,204 @@
+# AIView 移动端设计规范
+
+> 基于 TDesign Mobile、Material Design 3、微信设计规范，结合项目实际制定。
+> 适用于 UniApp + wot-design-uni 框架，设计基准宽度 750rpx。
+
+---
+
+## 1. 字体排版 (Typography)
+
+### 字号阶梯
+
+| Token | rpx | px | 行高 | 字重 | 用途 |
+|-------|-----|-----|------|------|------|
+| `--font-display` | 60rpx | 30px | 1.2 | 900 | 品牌标题（仅 Logo） |
+| `--font-h1` | 48rpx | 24px | 1.3 | 700 | 大数字、统计数值 |
+| `--font-h2` | 36rpx | 18px | 1.3 | 700 | 页面标题 |
+| `--font-h3` | 32rpx | 16px | 1.4 | 600 | 卡片标题、表单标签 |
+| `--font-body` | 28rpx | 14px | 1.5 | 400 | 正文、列表项 |
+| `--font-caption` | 24rpx | 12px | 1.5 | 400 | 辅助说明、时间戳 |
+| `--font-overline` | 22rpx | 11px | 1.5 | 600 | 标签、Badge、Tab 文字 |
+
+### 字重规则
+
+| 字重 | 值 | 使用场景 |
+|------|-----|----------|
+| Regular | 400 | 正文、描述、占位符 |
+| Semi-bold | 600 | 标签、Badge、次级标题、按钮文字 |
+| Bold | 700 | 卡片标题、页面标题 |
+| Black | 900 | 统计数字、品牌 Logo |
+
+---
+
+## 2. 间距系统 (Spacing)
+
+基于 **8rpx** 网格，所有间距为 8 的倍数。
+
+| Token | rpx | 用途 |
+|-------|-----|------|
+| `--space-xs` | 8rpx | 图标与文字间距、微间距 |
+| `--space-s` | 16rpx | 元素内小间距、列表项内 |
+| `--space-m` | 24rpx | 卡片内间距、组件间距 |
+| `--space-l` | 32rpx | 屏幕边距、卡片间距 |
+| `--space-xl` | 48rpx | 分区间距、大卡片内间距 |
+
+### 应用规则
+
+- **屏幕左右边距**: 32rpx (`mx-32rpx`)
+- **卡片内间距**: 32rpx（标准）/ 48rpx（宽松，如表单）
+- **卡片间距**: 24rpx (`mt-24rpx`)
+- **列表项间距**: 24rpx
+- **图标与文字**: 8rpx ~ 16rpx
+
+---
+
+## 3. 圆角系统 (Border Radius)
+
+| Token | rpx | 用途 |
+|-------|-----|------|
+| `--radius-s` | 16rpx | 进度条、小徽标 |
+| `--radius-m` | 24rpx | 按钮、输入框、小卡片 |
+| `--radius-l` | 48rpx | 标准卡片 (`.ai-card`) |
+| `--radius-xl` | 80rpx | 页面级弧形（Header 底部） |
+| `--radius-full` | 999rpx | 圆形元素、胶囊按钮 |
+
+### 登录页特殊圆角
+
+- 表单容器顶部: `88rpx 88rpx 0 0`（与页面级弧度衔接）
+
+---
+
+## 4. 组件尺寸 (Component Sizing)
+
+### 按钮
+
+| 尺寸 | 高度 | 字号 | 圆角 | 用途 |
+|------|------|------|------|------|
+| Large | 96rpx | 32rpx / 600 | 24rpx | 主操作（登录、提交） |
+| Medium | 72rpx | 28rpx / 600 | 24rpx | 次级操作 |
+| Small | 56rpx | 24rpx / 600 | 999rpx | 胶囊按钮（切换区域等） |
+
+### 输入框
+
+| 属性 | 值 |
+|------|-----|
+| 最小高度 | 96rpx |
+| 内边距 | 24rpx 32rpx |
+| 背景色 | #F9FAFB |
+| 圆角 | 24rpx |
+| 字号 | 32rpx |
+| 图标大小 | 20px |
+| 图标颜色 | #F97316 |
+
+### 头像
+
+| 尺寸 | 大小 | 用途 |
+|------|------|------|
+| XL | 160rpx | 个人中心大头像 |
+| L | 96rpx | 用户头部、列表头像 |
+| M | 72rpx | 工单卡片头像 |
+| S | 40rpx | 头像堆叠、小头像 |
+
+### 图标
+
+| 场景 | 大小 (px) | 大小 (rpx) |
+|------|-----------|-----------|
+| 表单输入前缀 | 20px | — |
+| 导航栏操作 | 22px | — |
+| 第三方登录 | 24px | — |
+| 卡片操作图标 | — | 40rpx |
+| 宫格菜单图标 | — | 40rpx |
+| 扫码页大图标 | — | 48rpx |
+| Logo / 品牌 | — | 64rpx ~ 80rpx |
+
+> wot-design-uni 的 `wd-icon` 使用 px 单位；UnoCSS 图标类使用 rpx。
+
+### 触控区域
+
+所有可点击元素最小触控区域: **88rpx × 88rpx** (44px)，符合 iOS HIG 标准。
+
+---
+
+## 5. 颜色系统 (Colors)
+
+### 品牌色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| `--color-primary` | #F97316 | 主色、按钮、链接 |
+| `--color-secondary` | #FBBF24 | 渐变起始色 |
+| `--color-primary-light` | #FFF7ED | 浅底色、边框 |
+| `--color-primary-bg` | rgba(249,115,22,0.06) | 表单背景、次级按钮底色 |
+
+### 文字色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| `--color-text-primary` | #1F2937 | 标题、正文 |
+| `--color-text-secondary` | #9CA3AF | 说明文字、标签 |
+| `--color-text-tertiary` | #D1D5DB | 箭头、禁用文字 |
+| `--color-text-inverse` | #FFFFFF | 深色背景上的文字 |
+
+### 背景色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| `--color-bg-page` | #FFFDF5 | 页面背景 |
+| `--color-bg-card` | #FFFFFF | 卡片背景 |
+| `--color-bg-input` | #F9FAFB | 输入框背景 |
+
+### 状态色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| `--color-success` | #22C55E | 成功、在线 |
+| `--color-error` | #EF4444 | 错误、紧急 |
+| `--color-warning` | #F97316 | 警告（复用主色） |
+| `--color-info` | #3B82F6 | 信息 |
+
+---
+
+## 6. 全局样式类 (Utility Classes)
+
+| 类名 | 作用 |
+|------|------|
+| `.yd-page-container` | 页面容器：`min-h-screen` + 页面背景色 |
+| `.ai-card` | 卡片：白底 + 48rpx 圆角 + #FFF7ED 边框 + 橙色阴影 |
+| `.ai-gradient-header` | 渐变头部：135° #FBBF24→#F97316 + 80rpx 底部圆角 |
+| `.ai-btn-primary` | 主按钮：渐变 + 24rpx 圆角 + 96rpx 高 + 阴影 |
+| `.ai-badge--orange/red/green` | 状态标签 |
+
+---
+
+## 7. 页面结构模板
+
+### 标准列表页
+
+```
+yd-page-container
+├── wd-navbar (fixed + placeholder + safe-area-inset-top)
+├── 搜索区域 (mx-32rpx mt-24rpx)
+├── 列表区域 (px-32rpx pt-24rpx)
+│   └── ai-card (mb-24rpx p-32rpx) × N
+└── FAB 按钮 (fixed bottom-right)
+```
+
+### 认证页
+
+```
+auth-container (全屏渐变背景)
+├── Header (Logo + 品牌名，透明背景)
+└── form-container (白色卡片，88rpx 顶圆角)
+    ├── input-item × N
+    ├── auth-links (操作链接行)
+    ├── login-btn-wrapper (主按钮)
+    └── 第三方登录区域
+```
+
+---
+
+## 变更记录
+
+| 日期 | 说明 |
+|------|------|
+| 2026-02-07 | 初始创建，基于 TDesign/MD3/微信规范 |