aquagreen_wechat_app/openspec/changes/archive/2026-06-26-refine-weapp-ui-style/.comet/handoff/design-context.md

Comet Design Handoff

• Change: refine-weapp-ui-style
• Phase: design
• Mode: compact
• Context hash: bbe42d93a97ebb0ffa5302bc664d4661a79296002655beac09f928dae98a735d

Generated-by: comet-handoff.sh

OpenSpec remains the canonical capability spec. This handoff is a deterministic, source-traceable context pack, not an agent-authored summary.

openspec/changes/refine-weapp-ui-style/proposal.md

• Source: openspec/changes/refine-weapp-ui-style/proposal.md
• Lines: 1-33

• SHA256: 8c62125e0b59049e0afc2ed1a0e36d236ea2b8bfee096e987ee01300810510cc

  ## Why
  
  当前清道夫小程序功能已基本跑通，但整体视觉表现偏单调：页面以白底灰字为主，缺少层次感和品牌色运用；卡片、按钮、状态标签的圆角与阴影不统一；部分页面与 V21-SOP 原型在氛围上差距较大。为了让用户在使用时感到更专业、更流畅，需要借鉴原型做一次全站样式与微交互的体验优化，在不动业务逻辑和胶囊安全布局的前提下提升视觉品质。
  
  ## What Changes
  
  - 统一全站卡片风格：统一使用 `bg-white rounded-xl shadow-sm`，与原型保持一致。
  - 优化首页头部视觉：销售/施工端首页顶部改为蓝色渐变背景，强化品牌感。
  - 提升统计卡片表现力：首页统计卡片改用渐变色彩，突出关键数据。
  - 统一状态标签与按钮：状态标签使用原型色值（蓝/绿/橙/红），主按钮使用 `rounded-xl` 大圆角。
  - 任务卡片增强识别：应急任务增加左侧红色边框，已完成/超时等状态增加背景色区分。
  - 排班日历优化：日历容器使用卡片化包裹，日期选中样式与原型对齐。
  - 我的页头部改版：使用深蓝渐变头部，信息层级更清晰。
  - 增加按压/点击反馈：卡片、按钮增加 `active:scale-95` 或背景色变深的交互反馈。
  - 规范字体与间距：统一 section 标题、描述文字、辅助文字的字号与色阶。
  
  ## Capabilities
  
  ### New Capabilities
  - `ui-style-system`: 全站样式系统统一与视觉层级优化。
  - `home-page-styling`: 首页（销售/调度/施工三端）头部、统计卡片、快捷入口样式优化。
  - `task-card-styling`: 任务列表筛选标签与任务卡片样式增强。
  - `schedule-calendar-styling`: 排班页日历与排班卡片样式优化。
  - `profile-page-styling`: 我的页头部与功能列表样式改版。
  
  ### Modified Capabilities
  - （无）
  
  ## Impact
  
  - 影响范围：小程序前端所有页面组件，主要涉及 `src/components/` 下的 home、task、dispatch、my 等组件，以及 `src/components/common/` 中的通用卡片、按钮、状态标签样式。
  - 不涉及后端接口、业务状态机、路由结构和胶囊安全区计算逻辑。
  - 需要确保 `npm run build:mp-weixin` 构建通过，WXSS 无转义选择器错误。
  

openspec/changes/refine-weapp-ui-style/design.md

• Source: openspec/changes/refine-weapp-ui-style/design.md
• Lines: 1-61

• SHA256: 93748fff2ce20c74966e9dd98d9c86559fb5a6f021dd87277ae9b843b095acfa

  ## Context
  
  清道夫 App 前端基于 uni-app + Vue 3 + TypeScript + Tailwind CSS 构建，当前已按销售/调度/施工三端完成角色化首页、任务列表、任务详情、排班、我的等核心功能。V21-SOP 原型提供了完整的视觉参考：卡片化布局、蓝色渐变头部、渐变统计卡片、统一的状态色与圆角规范。本次 change 是一次纯样式层面的体验打磨，目标是让小程序在视觉上更接近原型质感，同时保持现有业务逻辑和胶囊安全布局不变。
  
  ## Goals / Non-Goals
  
  **Goals:**
  - 统一全站卡片、按钮、标签、输入框的圆角、阴影与色阶。
  - 优化首页头部与统计卡片，增强数据可视化表现力。
  - 提升任务卡片状态识别度（紧急、已完成、超时等）。
  - 优化排班日历与我的页视觉层次。
  - 增加合理的点击/按压反馈，让交互更流畅。
  
  **Non-Goals:**
  - 不修改业务逻辑、状态机、API 接口或路由结构。
  - 不调整胶囊安全区计算与相关布局。
  - 不新增页面或功能模块。
  - 不改动后端代码。
  
  ## Decisions
  
  1. **颜色系统沿用 Tailwind 语义色 + 项目自定义色**：
  - 主色保持 `primary`（项目已配置为 blue-500 #3b82f6）。
  - 渐变统计卡片使用内联 `linear-gradient` 实现，避免扩展 Tailwind 配置。
  - 状态标签使用 `bg-*-50 text-*-500` 的轻量标签风格，与原型一致。
  
  2. **卡片统一为 `rounded-xl shadow-sm bg-white`**：
  - 原型中 12px 圆角和微阴影是核心视觉语言，统一替换当前大小不一的 `rounded-lg`/`rounded-2xl` 和缺失阴影的容器。
  
  3. **首页头部渐变背景**:
  - 销售/施工端首页顶部区域改为 `bg-gradient-to-r from-blue-500 to-blue-600`，文字反白，营造品牌氛围。
  - 调度端控制台保持简洁专业感，但统一卡片与统计样式。
  
  4. **按钮统一为 `rounded-xl` 大圆角**：
  - 底部主操作按钮、表单确认按钮使用 `rounded-xl`，与原型一致。
  - 顶部小操作按钮保持 `rounded-lg` 以节省空间。
  
  5. **点击反馈**:
  - 卡片和列表项使用 `active:scale-95` 或 `active:bg-gray-50`。
  - 按钮使用 `active:opacity-80` 或 `active:bg-*-600`。
  - 使用 Tailwind 的 `transition` 类保证过渡自然。
  
  6. **避免 WXSS 转义问题**:
  - 不使用 Tailwind 小数类（如 `w-1.5`）、任意值类（如 `max-h-[80vh]`）或 last:/hover: 变体。
  - 需要特殊尺寸时使用内联 style。
  
  ## Risks / Trade-offs
  
  - [Risk] 全站样式改动范围广，可能引入局部视觉回归 → Mitigation: 按页面模块分任务实施，每个任务后构建检查；最终在微信开发者工具中逐页预览。
  - [Risk] 渐变背景与自定义导航栏/状态栏高度配合不当 → Mitigation: 渐变区域仍使用 StatusBar + TopBar 结构，仅在 TopBar 内部使用渐变背景类，不改动高度计算。
  - [Risk] 部分uni-app组件（如 uni-card）自带样式，可能与 Tailwind 类冲突 → Mitigation: 通过组件 props 或外层容器覆盖，必要时改用自定义 view 卡片。
  - [Risk] 状态标签颜色过多导致视觉嘈杂 → Mitigation: 严格限制为蓝/绿/橙/红四色，与原型一致。
  
  ## Migration Plan
  
  无需迁移。本次为前端样式优化，构建完成后直接部署小程序即可。
  
  ## Open Questions
  
  - 是否需要同步调整登录页/启动页样式以匹配新的视觉系统？（本次不做，待后续确认）
  - 原型中部分图标为 Font Awesome，项目使用 uni-icons，是否需要在关键位置引入 Font Awesome 图标以提升一致性？（本次优先使用现有 uni-icons 映射）
  

openspec/changes/refine-weapp-ui-style/tasks.md

• Source: openspec/changes/refine-weapp-ui-style/tasks.md
• Lines: 1-45

• SHA256: f34c373417d2bd726d5811d9133677baac192871b40b45557ff69c2c2b40ddf0

  ## 1. 全局样式系统准备
  
  - [ ] 1.1 检查项目 Tailwind 配置，确认 `primary` 色值与 `rounded-xl`、`shadow-sm` 等工具类可用
  - [ ] 1.2 确认 `app-container`、卡片、按钮等全局类名规范，避免 WXSS 转义问题
  
  ## 2. 通用组件样式优化
  
  - [ ] 2.1 优化 `StatusBar` + `TopBar` 渐变背景支持（可选渐变/白色模式）
  - [ ] 2.2 统一 `uni-card` 或自定义卡片容器为 `bg-white rounded-xl shadow-sm`
  - [ ] 2.3 优化 `StatusTag` 状态标签配色（蓝/绿/橙/红）
  - [ ] 2.4 为常用按钮添加 `active:` 按压反馈
  - [ ] 2.5 为卡片/列表项添加 `active:scale-95` 或 `active:bg-gray-50` 反馈
  
  ## 3. 首页样式优化
  
  - [ ] 3.1 销售端 `SalesHome.vue`：顶部改为渐变背景，统计卡片改为渐变，快捷入口统一图标容器
  - [ ] 3.2 调度端 `DispatchHome.vue`：统计卡片与快捷操作统一卡片/图标样式
  - [ ] 3.3 施工端 `ConstructionHome.vue`：顶部改为渐变背景，统计卡片样式统一
  
  ## 4. 任务页样式优化
  
  - [ ] 4.1 `TaskListView.vue`：筛选标签改为 `rounded-full`，选中态使用 `bg-primary text-white`
  - [ ] 4.2 `SalesTaskCard.vue`：增加应急红色左边框、已完成浅绿背景、点击反馈
  - [ ] 4.3 `DispatchTaskCard.vue`：增加应急红色左边框、状态背景区分、点击反馈
  - [ ] 4.4 `ConstructionTaskCard.vue`：增加应急红色左边框、状态背景区分、点击反馈
  
  ## 5. 排班页样式优化
  
  - [ ] 5.1 `ScheduleView.vue`：日历区域使用 `bg-white rounded-xl shadow-sm` 卡片包裹
  - [ ] 5.2 `ScheduleView.vue`：日期选中态改为蓝色填充白字，今天改为浅蓝背景蓝字
  - [ ] 5.3 `ScheduleView.vue`：排班列表项增加月计划/应急图标背景色区分与点击反馈
  - [ ] 5.4 `ScheduleView.vue`：新增/编辑弹窗按钮使用 `rounded-xl`，字段间距统一
  
  ## 6. 我的页样式优化
  
  - [ ] 6.1 `ProfileView.vue`：顶部改为深蓝渐变头部，头像与用户信息反白显示
  - [ ] 6.2 `ProfileView.vue`：功能入口列表改为统一卡片，列表项增加点击反馈
  - [ ] 6.3 `ProfileView.vue`：退出登录按钮使用 `rounded-xl` 大圆角
  
  ## 7. 验证与收尾
  
  - [ ] 7.1 运行 `npm run type-check` 确认无 TypeScript 错误
  - [ ] 7.2 运行 `npm run build:mp-weixin` 确认构建通过且 WXSS 无转义选择器
  - [ ] 7.3 在微信开发者工具中预览主要页面，确认视觉层次与交互反馈正常
  - [ ] 7.4 提交所有改动并合并到 master
  

openspec/changes/refine-weapp-ui-style/specs/home-page-styling/spec.md

• Source: openspec/changes/refine-weapp-ui-style/specs/home-page-styling/spec.md
• Lines: 1-38

• SHA256: 831c8c44b0255960dcb28248bbac5767666d6387e980c00a45e4083e17f79c5b

  ## ADDED Requirements
  
  ### Requirement: 销售端首页样式优化
  系统 SHALL 优化销售端首页的头部、统计卡片、快捷入口与通知列表样式。
  
  #### Scenario: 渐变头部
  - **WHEN** 用户打开销售端首页
  - **THEN** 顶部导航区域使用蓝色渐变背景，欢迎语与用户名白色显示
  
  #### Scenario: 渐变统计卡片
  - **WHEN** 用户查看本月项目、待确认、进行中统计
  - **THEN** 三个统计卡片使用渐变背景，数字突出显示
  
  #### Scenario: 快捷入口统一
  - **WHEN** 用户查看快捷功能区域
  - **THEN** 快捷入口图标容器统一为圆形浅色背景，文字大小一致
  
  ### Requirement: 调度端首页样式优化
  系统 SHALL 优化调度端首页的统计卡片与快捷操作区域样式。
  
  #### Scenario: 今日任务统计卡片
  - **WHEN** 用户查看调度端首页统计
  - **THEN** 统计卡片使用统一卡片风格，图标与数值对齐
  
  #### Scenario: 快捷操作入口
  - **WHEN** 用户查看排班管理、任务列表、车辆管理、可视化入口
  - **THEN** 四个快捷入口使用统一圆形图标与标签文字
  
  ### Requirement: 施工端首页样式优化
  系统 SHALL 优化施工端首页的头部、任务统计与快捷操作样式。
  
  #### Scenario: 渐变头部
  - **WHEN** 用户打开施工端首页
  - **THEN** 顶部区域使用与销售端一致的蓝色渐变头部
  
  #### Scenario: 工作统计卡片
  - **WHEN** 用户查看已完成、进行中、明日任务统计
  - **THEN** 统计卡片视觉清晰，数据突出
  

openspec/changes/refine-weapp-ui-style/specs/profile-page-styling/spec.md

• Source: openspec/changes/refine-weapp-ui-style/specs/profile-page-styling/spec.md
• Lines: 1-30

• SHA256: 9c91ccc38ffb0128b659d4e74dbe2a56c9deb6bd148d8ac0c987e37d0ba45922

  ## ADDED Requirements
  
  ### Requirement: 我的页头部样式改版
  系统 SHALL 将我的页顶部改为深蓝渐变背景，突出用户信息。
  
  #### Scenario: 渐变头部
  - **WHEN** 用户进入我的页
  - **THEN** 顶部显示 `bg-gradient-to-br from-blue-900 to-blue-800` 渐变
  
  #### Scenario: 用户信息展示
  - **WHEN** 用户查看我的页头部
  - **THEN** 头像、姓名、角色/部门信息反白显示，层级清晰
  
  ### Requirement: 我的页功能列表样式优化
  系统 SHALL 优化我的页功能入口列表的卡片与列表项样式。
  
  #### Scenario: 功能入口卡片
  - **WHEN** 用户查看设置、帮助、关于等功能入口
  - **THEN** 列表项统一为 `bg-white rounded-xl shadow-sm` 卡片，带右侧箭头
  
  #### Scenario: 列表项点击反馈
  - **WHEN** 用户点击某个功能入口
  - **THEN** 列表项在按压时有背景色变化反馈
  
  ### Requirement: 退出登录按钮样式
  系统 SHALL 保持退出登录按钮醒目且与原型一致。
  
  #### Scenario: 退出按钮
  - **WHEN** 用户查看退出登录按钮
  - **THEN** 按钮使用红色背景、白色文字、`rounded-xl` 大圆角
  

openspec/changes/refine-weapp-ui-style/specs/schedule-calendar-styling/spec.md

• Source: openspec/changes/refine-weapp-ui-style/specs/schedule-calendar-styling/spec.md
• Lines: 1-34

• SHA256: b426acbff56b0d9ffbde1fcc99b44f4d0fad58737974b333482f74ab35d32206

  ## ADDED Requirements
  
  ### Requirement: 排班日历卡片化
  系统 SHALL 将排班页日历区域包裹在统一卡片容器内。
  
  #### Scenario: 日历容器
  - **WHEN** 用户进入排班页
  - **THEN** 星期标题与日期网格被 `bg-white rounded-xl shadow-sm` 卡片包裹
  
  ### Requirement: 排班日期选中样式
  系统 SHALL 优化日期选中状态下的视觉表现。
  
  #### Scenario: 选中日期
  - **WHEN** 用户点击某个日期
  - **THEN** 选中日期使用蓝色填充背景，数字为白色
  
  #### Scenario: 今天日期
  - **WHEN** 日期为今天且未被选中
  - **THEN** 日期显示浅蓝背景与蓝色文字
  
  ### Requirement: 排班卡片样式优化
  系统 SHALL 优化排班列表中卡片的视觉表现。
  
  #### Scenario: 月计划排班卡片
  - **WHEN** 排班类型为 month_plan
  - **THEN** 卡片左侧图标使用蓝色背景与图标
  
  #### Scenario: 应急排班卡片
  - **WHEN** 排班类型为 emergency
  - **THEN** 卡片左侧图标使用红色背景与图标
  
  #### Scenario: 排班卡片点击反馈
  - **WHEN** 用户点击排班卡片
  - **THEN** 卡片打开详情弹窗，并在按压时有视觉反馈
  

openspec/changes/refine-weapp-ui-style/specs/task-card-styling/spec.md

• Source: openspec/changes/refine-weapp-ui-style/specs/task-card-styling/spec.md
• Lines: 1-31

• SHA256: 4d0cbfe51e39512b369460ad81588eee403e36c8189dc840cb8eb58b59eb7021

  ## ADDED Requirements
  
  ### Requirement: 任务筛选标签样式优化
  系统 SHALL 统一任务页顶部筛选标签的样式。
  
  #### Scenario: 筛选标签常态
  - **WHEN** 用户查看任务页筛选标签
  - **THEN** 未选中标签使用浅灰背景与深灰文字，`rounded-full` 圆角
  
  #### Scenario: 筛选标签选中
  - **WHEN** 用户选中某个筛选标签
  - **THEN** 选中标签使用 `bg-primary text-white`，与未选中状态形成对比
  
  ### Requirement: 任务卡片样式增强
  系统 SHALL 增强任务卡片的视觉识别与层次感。
  
  #### Scenario: 应急任务标识
  - **WHEN** 任务类型为 emergency
  - **THEN** 卡片左侧显示红色边框，标题或状态标签突出紧急感
  
  #### Scenario: 已完成任务背景
  - **WHEN** 任务状态为 completed
  - **THEN** 卡片背景使用浅绿色，状态标签使用绿色
  
  #### Scenario: 进行中任务背景
  - **WHEN** 任务状态为 scheduled/departed/arrived/constructing
  - **THEN** 卡片保持白色背景，状态标签使用蓝色
  
  #### Scenario: 卡片点击反馈
  - **WHEN** 用户点击任务卡片
  - **THEN** 卡片在按压时有轻微缩小或背景变化反馈
  

openspec/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md

• Source: openspec/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md
• Lines: 1-85
• SHA256: 2f27aa46a2b9b1b32827efeca9aa439f35eef22d077558f18429dff031cd6288

[TRUNCATED]

## ADDED Requirements

### Requirement: 全站卡片风格统一
系统 SHALL 统一使用 `bg-white rounded-xl shadow-sm` 作为内容卡片基础样式。

#### Scenario: 首页卡片视觉一致
- **WHEN** 用户打开销售/调度/施工任意角色首页
- **THEN** 统计卡片、快捷入口卡片、通知卡片等均使用统一圆角与微阴影

#### Scenario: 列表容器卡片化
- **WHEN** 页面包含任务列表、排班列表或通知列表
- **THEN** 列表外层容器使用统一卡片样式，列表项保持清晰分隔

### Requirement: 首页头部视觉优化
系统 SHALL 在销售端与施工端首页顶部使用蓝色渐变背景，并反白显示欢迎语与用户名。

#### Scenario: 销售端首页头部
- **WHEN** 用户进入销售端首页
- **THEN** 顶部区域显示 `bg-gradient-to-r from-blue-500 to-blue-600` 渐变背景，文字为白色

#### Scenario: 施工端首页头部
- **WHEN** 用户进入施工端首页
- **THEN** 顶部区域显示与销售端一致的蓝色渐变头部

### Requirement: 统计卡片增强表现力
系统 SHALL 在首页关键统计区域使用渐变色彩卡片，突出数据指标。

#### Scenario: 销售端统计卡片
- **WHEN** 用户查看销售端首页统计数据
- **THEN** 三个统计卡片分别使用蓝紫、粉紫、青蓝渐变背景，数字反白显示

#### Scenario: 调度端统计卡片
- **WHEN** 用户查看调度端首页统计数据
- **THEN** 统计卡片使用统一视觉风格，数据清晰可辨

### Requirement: 状态标签与按钮风格统一
系统 SHALL 统一状态标签和主按钮的圆角、颜色与字号。

#### Scenario: 状态标签识别
- **WHEN** 任务列表或详情中展示状态标签
- **THEN** 标签使用 `rounded` 小圆角，`bg-*-50 text-*-500` 配色，文字清晰

#### Scenario: 主按钮圆角
- **WHEN** 页面底部或弹窗中出现主操作按钮
- **THEN** 按钮使用 `rounded-xl` 大圆角，`bg-primary text-white` 样式

### Requirement: 任务卡片增强状态识别
系统 SHALL 在任务卡片中通过左侧边框或背景色增强不同状态的视觉识别。

#### Scenario: 应急任务卡片
- **WHEN** 任务为应急类型
- **THEN** 卡片左侧显示红色边框 `border-l-4 border-red-500`

#### Scenario: 已完成任务卡片
- **WHEN** 任务状态为已完成
- **THEN** 卡片背景使用浅绿色 `bg-green-50`

### Requirement: 排班日历样式优化
系统 SHALL 将排班日历容器卡片化，并优化日期选中样式。

#### Scenario: 日历容器
- **WHEN** 用户进入排班页
- **THEN** 日历整体被 `bg-white rounded-xl shadow-sm` 卡片包裹

#### Scenario: 日期选中
- **WHEN** 用户点击某个日期
- **THEN** 选中日期使用蓝色填充背景，白色数字，未选中日期保持灰色或黑色

### Requirement: 我的页头部改版
系统 SHALL 将我的页顶部改为深蓝渐变背景，并清晰展示用户信息。

#### Scenario: 我的页头部
- **WHEN** 用户进入我的页
- **THEN** 顶部显示 `bg-gradient-to-br from-blue-900 to-blue-800` 渐变，头像、姓名、部门信息反白显示

### Requirement: 增加点击与按压反馈
系统 SHALL 在可点击的卡片、按钮、列表项上增加视觉反馈。

#### Scenario: 卡片点击反馈
- **WHEN** 用户点击卡片或列表项

Full source: openspec/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md