chore(task-7): confirm WXSS escape selector constraint for active:scale-95

Tailwind active: variant generates .active\:scale-95 which WXSS cannot parse.
Reverting to hover-class=scale-down + scoped CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/superpowers/plans/2026-06-25-refine-weapp-ui-style.md

@@ -0,0 +1,901 @@
+# 清道夫 App 全站样式体验优化实施计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在不动业务逻辑和胶囊安全布局的前提下，统一小程序全站卡片/按钮/标签视觉语言，优化首页/任务/排班/我的页样式与点击反馈。
+
+**Architecture:** 以 Tailwind 工具类与项目既有 SCSS 变量为主，通过新增 `gradient` 模式 props 让 `TopBar` 支持渐变头部；各页面按模块独立调整模板类名，统计卡片使用内联 `style` 设置渐变背景以规避 WXSS 转义；状态标签、任务卡片、排班卡片统一配色与按压反馈。
+
+**Tech Stack:** uni-app Vue 3 + TypeScript + Tailwind CSS + SCSS
+
+## Global Constraints
+
+- 禁止修改任何业务逻辑、数据流、接口调用、状态管理。
+- 禁止改动 `CapsuleSafeArea` 高度计算与小程序胶囊安全区相关样式。
+- 禁止使用 Tailwind 小数类（如 `w-1.5`）或任意值类（如 `max-h-[80vh]`），特殊尺寸改用内联 `style`。
+- 所有渐变背景优先使用 Tailwind 渐变类；统计卡片渐变使用内联 `style="background: linear-gradient(...)"`。
+- 卡片统一使用 `bg-white rounded-xl shadow-sm`；按钮主色使用 `bg-primary text-white rounded-xl`。
+- 状态标签四色规范：蓝色（进行中/已排班）、绿色（已完成）、橙色（待处理/待确认）、红色（紧急/已取消）。
+- 卡片/列表项统一添加 `active:scale-95 transition-transform duration-150` 点击反馈。
+- 每完成一个任务必须提交一次，提交信息需体现任务意图。
+- 最终必须运行 `npm run type-check` 和 `npm run build:mp-weixin`，构建通过且无 WXSS 转义选择器。
+
+---
+
+## File Structure
+
+| 文件 | 职责 | 变更方式 |
+|------|------|----------|
+| `src/components/common/TopBar.vue` | 通用顶部导航栏，新增渐变背景模式 | 修改 |
+| `src/components/common/StatusTag.vue` | 通用状态标签，统一圆角/字号/配色 | 修改 |
+| `src/components/home/SalesHome.vue` | 销售端首页，渐变头部、统计卡片渐变、快捷入口 | 修改 |
+| `src/components/home/DispatchHome.vue` | 调度端首页，渐变头部、统计卡片渐变、快捷入口 | 修改 |
+| `src/components/home/ConstructionHome.vue` | 施工端首页，渐变头部、统计卡片渐变、快捷入口 | 修改 |
+| `src/components/task/TaskListView.vue` | 任务列表容器，筛选标签样式 | 修改 |
+| `src/components/task/SalesTaskCard.vue` | 销售端任务卡片，应急/完成状态增强 | 修改 |
+| `src/components/task/DispatchTaskCard.vue` | 调度端任务卡片，应急/完成状态增强 | 修改 |
+| `src/components/task/ConstructionTaskCard.vue` | 施工端任务卡片，应急/完成状态增强 | 修改 |
+| `src/components/dispatch/ScheduleView.vue` | 排班页，日历卡片化、列表项样式、弹窗按钮 | 修改 |
+| `src/components/my/ProfileView.vue` | 我的页，深蓝渐变头部、功能卡片、退出按钮 | 修改 |
+| `src/styles/global.scss` | 全局样式，补充按钮/卡片按压反馈类 | 可选修改 |
+| `tailwind.config.js` | 确认 `primary` 与圆角/阴影工具类可用 | 读取确认 |
+
+---
+
+### Task 1: TopBar 渐变背景支持
+
+**Files:**
+- Modify: `src/components/common/TopBar.vue`
+
+**Interfaces:**
+- Consumes: 父组件通过 `gradient` prop 控制头部模式。
+- Produces: `TopBar` 新增可选 prop `gradient?: boolean`，默认 `false` 保持原白色背景。
+
+- [ ] **Step 1: 新增 gradient prop 与动态类名**
+
+在 `<script setup>` 的 `props` 中新增 `gradient?: boolean`，默认 `false`：
+
+```ts
+const props = withDefaults(
+  defineProps<{
+    title: string
+    showBack?: boolean
+    gradient?: boolean
+  }>(),
+  {
+    showBack: false,
+    gradient: false
+  }
+)
+```
+
+- [ ] **Step 2: 模板根节点使用动态背景类**
+
+将根节点 `<view>` 的类名改为：
+
+```vue
+<view
+  class="sticky top-0 z-40"
+  :class="props.gradient ? 'bg-gradient-to-r from-blue-500 to-blue-600' : 'bg-white border-b border-gray-100'"
+>
+```
+
+- [ ] **Step 3: 反白渐变模式下的标题与返回按钮**
+
+在渐变模式下，标题与返回箭头使用白色。将标题 `<text>` 改为：
+
+```vue
+<text
+  class="text-base font-semibold truncate"
+  :class="props.gradient ? 'text-white' : 'text-gray-800'"
+>
+  {{ title }}
+</text>
+```
+
+将返回按钮内箭头 `<text>` 改为：
+
+```vue
+<text
+  class="text-lg"
+  :class="props.gradient ? 'text-white' : 'text-gray-600'"
+>
+  ←
+</text>
+```
+
+- [ ] **Step 4: 本地验证**
+
+运行：
+
+```bash
+npm run type-check
+```
+
+Expected: 无 TypeScript 错误。
+
+- [ ] **Step 5: 提交**
+
+```bash
+git add src/components/common/TopBar.vue
+git commit -m "feat(top-bar): add gradient header mode"
+```
+
+---
+
+### Task 2: StatusTag 统一配色
+
+**Files:**
+- Modify: `src/components/common/StatusTag.vue`
+
+**Interfaces:**
+- Consumes: `props.status`、`props.type`（`'task' | 'project'`），通过 `utils/index.ts` 中的 `getStatusColor` / `getStatusBgColor` 计算颜色。
+- Produces: 渲染统一圆角 `rounded`、内边距 `px-2 py-0.5`、字号 `text-xs` 的标签。
+
+- [ ] **Step 1: 替换模板为 Tailwind 工具类**
+
+将 `<template>` 改为：
+
+```vue
+<template>
+  <view class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: bgColor, color: textColor }">
+    {{ label }}
+  </view>
+</template>
+```
+
+- [ ] **Step 2: 移除 scoped 样式块中的重复定义**
+
+删除 `<style scoped>` 中的 `.tag` 规则，保留文件为空样式块或删除整个 `<style scoped>`。
+
+```vue
+<style scoped>
+/* Tailwind 工具类已覆盖 */
+</style>
+```
+
+- [ ] **Step 3: 本地验证**
+
+运行：
+
+```bash
+npm run type-check
+```
+
+Expected: 无 TypeScript 错误。
+
+- [ ] **Step 4: 提交**
+
+```bash
+git add src/components/common/StatusTag.vue
+git commit -m "feat(status-tag): unify tag style with Tailwind classes"
+```
+
+---
+
+### Task 3: SalesHome 首页样式优化
+
+**Files:**
+- Modify: `src/components/home/SalesHome.vue`
+
+**Interfaces:**
+- Consumes: `TopBar` 的 `gradient` prop；`StatusTag` 渲染任务状态。
+- Produces: 销售端首页使用渐变头部、渐变统计卡片、统一快捷入口容器。
+
+- [ ] **Step 1: TopBar 启用渐变模式并反白用户信息**
+
+将 `<TopBar title="">` 改为 `<TopBar title="" gradient>`。
+
+将头部左侧区域整体反白：
+
+```vue
+<template #left>
+  <view class="flex items-center">
+    <view class="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mr-3">
+      <text class="uni-icons uniui-person-filled text-white text-xl"></text>
+    </view>
+    <view>
+      <text class="text-white/80 text-xs block">下午好</text>
+      <text class="text-white text-lg font-bold">{{ userName }}</text>
+    </view>
+    <button class="ml-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center relative" @click="goToNotification">
+      <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
+    </button>
+  </view>
+</template>
+```
+
+- [ ] **Step 2: 统计卡片改为渐变背景**
+
+将三个统计卡片的容器类从 `bg-surface rounded-xl p-4 text-center` 改为：
+
+```vue
+<!-- 本月项目 -->
+<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);" @click="goToProjectList">
+  <text class="stat-number text-white block">{{ projectStore.totalCount }}</text>
+  <text class="text-white/80 mt-1 block text-xs">本月项目</text>
+</view>
+
+<!-- 待确认 -->
+<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #ec4899, #8b5cf6);" @click="goToTaskList">
+  <text class="stat-number text-white block">{{ taskStore.pendingCount }}</text>
+  <text class="text-white/80 mt-1 block text-xs">待确认</text>
+</view>
+
+<!-- 进行中 -->
+<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToTaskList">
+  <text class="stat-number text-white block">{{ taskStore.todayCount }}</text>
+  <text class="text-white/80 mt-1 block text-xs">进行中</text>
+</view>
+```
+
+- [ ] **Step 3: 快捷入口图标容器统一**
+
+将快捷入口图标容器统一改为 `bg-primary-light rounded-2xl`，已为 `bg-primary-light` 的保持不变；将禁用项的 `bg-surface` 也改为 `bg-primary-light opacity-60`。每个图标容器添加 `active:scale-95 transition-transform duration-150`。
+
+- [ ] **Step 4: 任务提醒按钮改为次要按钮风格**
+
+将任务提醒按钮从 `bg-primary-light text-primary` 改为：
+
+```vue
+<button
+  class="w-full py-3 bg-white border border-gray-200 text-gray-600 rounded-xl text-sm font-medium flex items-center justify-center active:bg-gray-50 transition-colors"
+  @click="goToTaskReminder"
+>
+  <text class="uni-icons uniui-notification-filled mr-2 text-gray-500"></text>
+  任务提醒 ({{ taskStore.pendingCount }})
+</button>
+```
+
+- [ ] **Step 5: 最新任务与通知公告列表项添加点击反馈**
+
+为 `uni-list-item` 外层或自身添加 `active:scale-95 transition-transform duration-150`（若 `uni-list-item` 已支持 `clickable`，可直接给 `uni-list-item` 添加类）。保持原有结构。
+
+- [ ] **Step 6: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 7: 提交**
+
+```bash
+git add src/components/home/SalesHome.vue
+git commit -m "feat(home): apply gradient header and stat cards for sales"
+```
+
+---
+
+### Task 4: DispatchHome 首页样式优化
+
+**Files:**
+- Modify: `src/components/home/DispatchHome.vue`
+
+**Interfaces:**
+- Consumes: `TopBar` 的 `gradient` prop；`StatusTag` 渲染任务状态。
+- Produces: 调度端首页使用渐变头部、统一统计卡片渐变、快捷入口点击反馈。
+
+- [ ] **Step 1: TopBar 启用渐变模式并反白用户信息**
+
+将 `<TopBar title="">` 改为 `<TopBar title="" gradient>`。
+
+将头部左侧区域整体反白，头像容器改为 `bg-white/20`，文字改为白色/白色半透明，通知铃铛按钮改为 `bg-white/20` 并白色图标。
+
+- [ ] **Step 2: 统计卡片改为统一渐变**
+
+将三个统计卡片的容器类统一改为蓝紫渐变：
+
+```vue
+<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #6366f1);" @click="goToTaskList">
+  <text class="stat-number text-white block">{{ taskStore.total }}</text>
+  <text class="text-white/80 mt-1 block text-xs">今日任务</text>
+</view>
+```
+
+其余两个统计卡片使用相同渐变样式，仅修改文案与数字。
+
+- [ ] **Step 3: 快捷入口与待审核任务卡片添加点击反馈**
+
+为快捷入口图标容器添加 `active:scale-95 transition-transform duration-150`。
+
+为待审核任务卡片（`class="card p-3 border-l-4 border-warning cursor-pointer"`）添加 `active:scale-95 transition-transform duration-150`，保持 `border-l-4 border-warning`。
+
+- [ ] **Step 4: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 5: 提交**
+
+```bash
+git add src/components/home/DispatchHome.vue
+git commit -m "feat(home): apply gradient header and stat cards for dispatch"
+```
+
+---
+
+### Task 5: ConstructionHome 首页样式优化
+
+**Files:**
+- Modify: `src/components/home/ConstructionHome.vue`
+
+**Interfaces:**
+- Consumes: `TopBar` 的 `gradient` prop；`StatusTag` 渲染任务状态。
+- Produces: 施工端首页使用渐变头部、统一统计卡片渐变、每日任务入口与快捷功能样式。
+
+- [ ] **Step 1: TopBar 启用渐变模式并反白用户信息**
+
+将 `<TopBar title="">` 改为 `<TopBar title="" gradient>`。
+
+将头部左侧区域整体反白，与 DispatchHome 一致。
+
+- [ ] **Step 2: 统计卡片改为统一渐变**
+
+将三个统计卡片统一改为青蓝渐变：
+
+```vue
+<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToHistoryTask">
+  <text class="stat-number text-white block">{{ completedCount }}</text>
+  <text class="text-white/80 mt-1 block text-xs">已完成</text>
+</view>
+```
+
+其余两个统计卡片使用相同渐变样式。
+
+- [ ] **Step 3: 每日任务入口卡片样式增强**
+
+将每日任务入口的 `uni-card` 内部容器改为白色卡片，图标容器 `icon-box` 改为 `bg-primary-light rounded-xl`。点击区域添加 `active:scale-95 transition-transform duration-150`。
+
+- [ ] **Step 4: 快捷入口与当前任务卡片添加点击反馈**
+
+为快捷入口图标容器添加 `active:scale-95 transition-transform duration-150`。
+
+为当前任务卡片（`class="card p-3 cursor-pointer"`）添加 `active:scale-95 transition-transform duration-150`。
+
+- [ ] **Step 5: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 6: 提交**
+
+```bash
+git add src/components/home/ConstructionHome.vue
+git commit -m "feat(home): apply gradient header and stat cards for construction"
+```
+
+---
+
+### Task 6: TaskListView 筛选标签样式
+
+**Files:**
+- Modify: `src/components/task/TaskListView.vue`
+
+**Interfaces:**
+- Consumes: 无（纯样式修改）。
+- Produces: 筛选标签未选中态为 `bg-surface text-gray-500 rounded-full`，选中态为 `bg-primary text-white`。
+
+- [ ] **Step 1: 更新筛选标签类名**
+
+当前模板中已有 `rounded-full` 与 `bg-primary text-white` / `bg-surface text-gray-500`，基本符合要求。需将未选中态的 `transition-colors` 改为 `transition-all duration-150 active:scale-95`，并确认 `bg-surface` 可用。
+
+```vue
+<view
+  v-for="status in filterStatuses"
+  :key="status.value"
+  class="filter-tab px-3 py-2 rounded-full text-sm whitespace-nowrap transition-all duration-150 active:scale-95"
+  :class="currentFilter === status.value ? 'bg-primary text-white' : 'bg-surface text-gray-500'"
+  @click="currentFilter = status.value"
+>
+  {{ status.label }}
+</view>
+```
+
+- [ ] **Step 2: 移除外层容器底部边框（可选）**
+
+若设计文档要求筛选栏更轻量，可删除外层 `border-b border-gray-200`。
+
+- [ ] **Step 3: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 4: 提交**
+
+```bash
+git add src/components/task/TaskListView.vue
+git commit -m "feat(task-list): refine filter tab styles and active feedback"
+```
+
+---
+
+### Task 7: SalesTaskCard 任务卡片样式增强
+
+**Files:**
+- Modify: `src/components/task/SalesTaskCard.vue`
+
+**Interfaces:**
+- Consumes: `props.task`（含 `status`、`type` 字段）。
+- Produces: 卡片根据 `emergency` 类型显示红色左边框，根据 `completed` 状态显示浅绿背景，并带点击反馈。
+
+- [ ] **Step 1: 添加动态卡片背景与左边框**
+
+将根节点 `<view>` 改为：
+
+```vue
+<view
+  class="card p-4 mb-3 clickable active:scale-95 transition-transform duration-150"
+  :class="{
+    'border-l-4 border-red-500': task.type === 'emergency',
+    'bg-green-50': task.status === 'completed'
+  }"
+  :style="borderStyle"
+  @click="$emit('click', task.id)"
+>
+```
+
+- [ ] **Step 2: 保留原有 borderStyle 计算属性**
+
+`borderStyle` 计算属性继续根据状态设置 `borderLeftColor`，但仅在非 emergency 时生效；emergency 时使用 Tailwind `border-red-500`。
+
+- [ ] **Step 3: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 4: 提交**
+
+```bash
+git add src/components/task/SalesTaskCard.vue
+git commit -m "feat(task-card): enhance sales task card status styles"
+```
+
+---
+
+### Task 8: DispatchTaskCard 任务卡片样式增强
+
+**Files:**
+- Modify: `src/components/task/DispatchTaskCard.vue`
+
+**Interfaces:**
+- Consumes: `props.task`（含 `status`、`type` 字段）。
+- Produces: 卡片根据 `emergency` 类型显示红色左边框，根据 `completed` 状态显示浅绿背景，并带点击反馈。
+
+- [ ] **Step 1: 添加动态卡片背景与左边框**
+
+将根节点 `<view>` 改为：
+
+```vue
+<view
+  class="card p-4 mb-3 clickable border-l-4 border-primary active:scale-95 transition-transform duration-150"
+  :class="{
+    'border-red-500': task.type === 'emergency',
+    'bg-green-50': task.status === 'completed'
+  }"
+  :style="borderStyle"
+  @click="$emit('click', task.id)"
+>
+```
+
+- [ ] **Step 2: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add src/components/task/DispatchTaskCard.vue
+git commit -m "feat(task-card): enhance dispatch task card status styles"
+```
+
+---
+
+### Task 9: ConstructionTaskCard 任务卡片样式增强
+
+**Files:**
+- Modify: `src/components/task/ConstructionTaskCard.vue`
+
+**Interfaces:**
+- Consumes: `props.task`（含 `status`、`type` 字段）。
+- Produces: 卡片根据 `emergency` 类型显示红色左边框，根据 `completed` 状态显示浅绿背景，并带点击反馈。
+
+- [ ] **Step 1: 添加动态卡片背景与左边框**
+
+将根节点 `<view>` 改为：
+
+```vue
+<view
+  class="card p-4 mb-3 clickable active:scale-95 transition-transform duration-150"
+  :class="{
+    'border-l-4 border-red-500': task.type === 'emergency',
+    'bg-green-50': task.status === 'completed'
+  }"
+  @click="$emit('click', task.id)"
+>
+```
+
+- [ ] **Step 2: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add src/components/task/ConstructionTaskCard.vue
+git commit -m "feat(task-card): enhance construction task card status styles"
+```
+
+---
+
+### Task 10: ScheduleView 排班日历卡片化
+
+**Files:**
+- Modify: `src/components/dispatch/ScheduleView.vue`
+
+**Interfaces:**
+- Consumes: 无（纯样式修改）。
+- Produces: 日历区域使用 `bg-white rounded-xl shadow-sm p-4` 卡片包裹，日期选中态为蓝色填充白字，今天为浅蓝背景蓝字。
+
+- [ ] **Step 1: 包裹日历为卡片容器**
+
+将当前日历外层 `<view class="bg-white px-4 py-3">` 改为：
+
+```vue
+<view class="mx-4 mt-4 bg-white rounded-xl shadow-sm p-4">
+```
+
+- [ ] **Step 2: 更新日期选中态样式**
+
+将日期单元格 `:class` 改为：
+
+```vue
+<view
+  v-for="(date, dateIndex) in week"
+  :key="dateIndex"
+  class="flex-1 h-14 flex flex-col items-center justify-center relative mx-1 rounded-xl transition-transform duration-150 active:scale-95"
+  :class="{
+    'opacity-30': date.isOtherMonth,
+    'bg-blue-50 text-primary': date.isToday && !isSelected(date),
+    'bg-primary text-white shadow-sm': isSelected(date),
+  }"
+  @click="selectDate(date)"
+>
+```
+
+- [ ] **Step 3: 更新日期数字颜色**
+
+删除 `<text>` 中复杂的动态颜色类，改为仅根据选中态控制：
+
+```vue
+<text
+  class="text-sm font-medium"
+  :class="{
+    'text-primary': date.isToday && !isSelected(date),
+    'text-white': isSelected(date),
+    'text-gray-800': !date.isToday && !isSelected(date)
+  }"
+>
+  {{ date.day }}
+</text>
+```
+
+- [ ] **Step 4: 排班标记点样式**
+
+排班标记点保持 `w-2 h-2 rounded-full mt-1`；若选中日期，使用 `bg-white`，否则使用 `bg-primary`：
+
+```vue
+<view
+  v-if="date.hasSchedule"
+  class="w-2 h-2 rounded-full mt-1"
+  :class="isSelected(date) ? 'bg-white' : 'bg-primary'"
+></view>
+```
+
+- [ ] **Step 5: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 6: 提交**
+
+```bash
+git add src/components/dispatch/ScheduleView.vue
+git commit -m "feat(schedule): card-wrap calendar and refine date selection styles"
+```
+
+---
+
+### Task 11: ScheduleView 排班列表与弹窗样式
+
+**Files:**
+- Modify: `src/components/dispatch/ScheduleView.vue`
+
+**Interfaces:**
+- Consumes: `schedule.shiftType`、`schedule.status`。
+- Produces: 列表项根据 `shiftType` 显示蓝色/红色图标背景，弹窗按钮使用 `rounded-xl`。
+
+- [ ] **Step 1: 列表项图标根据排班类型变色**
+
+修改 `getStatusBgClass` 函数，改为根据 `shiftType` 返回图标背景：
+
+```ts
+function getScheduleIconBgClass(shiftType: string) {
+  return shiftType === 'emergency' ? 'bg-red-50' : 'bg-blue-50'
+}
+```
+
+修改 `getStatusIconClass` 函数，改为根据 `shiftType` 返回图标颜色：
+
+```ts
+function getScheduleIconClass(shiftType: string) {
+  return shiftType === 'emergency' ? 'uniui-calendar-filled text-red-500' : 'uniui-calendar-filled text-blue-500'
+}
+```
+
+在模板中调用改为：
+
+```vue
+<view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getScheduleIconBgClass(schedule.shiftType)">
+  <text class="uni-icons text-lg" :class="getScheduleIconClass(schedule.shiftType)"></text>
+</view>
+```
+
+- [ ] **Step 2: 为列表项添加点击反馈**
+
+给 `uni-list-item` 添加 `clickable` 与 `active:scale-95 transition-transform duration-150`（若组件支持传递 class，否则在外层包一层 `<view>`）。
+
+- [ ] **Step 3: 弹窗按钮改为 rounded-xl**
+
+将弹窗底部取消/确认按钮的 `rounded-lg` 改为 `rounded-xl`：
+
+```vue
+<button class="flex-1 py-3 bg-white text-gray-600 rounded-xl border border-gray-200 text-sm active:bg-gray-50 transition-colors" @click="closeModal">取消</button>
+<button class="flex-1 py-3 bg-primary text-white rounded-xl text-sm active:bg-blue-600 transition-colors" @click="submitSchedule">{{ isDetail ? '保存' : '确认' }}</button>
+```
+
+- [ ] **Step 4: 弹窗字段间距统一**
+
+确认每个字段外层使用 `mb-4`；当前为 `mb-3`，可保持或统一为 `mb-4`。将 textarea 最小高度通过内联 `style` 设置：`style="min-height: 80px;"`。
+
+- [ ] **Step 5: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 6: 提交**
+
+```bash
+git add src/components/dispatch/ScheduleView.vue
+git commit -m "feat(schedule): style schedule list icons and modal buttons"
+```
+
+---
+
+### Task 12: ProfileView 我的页样式改版
+
+**Files:**
+- Modify: `src/components/my/ProfileView.vue`
+
+**Interfaces:**
+- Consumes: `authStore.user` 提供的用户信息。
+- Produces: 我的页顶部深蓝渐变头部，功能列表统一白色卡片，退出登录红色大圆角按钮。
+
+- [ ] **Step 1: 顶部改为深蓝渐变头部**
+
+将顶部外层 `<view>` 改为：
+
+```vue
+<view class="bg-gradient-to-br from-blue-900 to-blue-800 px-4 pb-6 rounded-b-3xl">
+  <StatusBar />
+  <view class="flex items-center pt-3">
+    <view class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
+      <text class="uni-icons uniui-person-filled text-white text-2xl"></text>
+    </view>
+    <view class="flex-1 min-w-0">
+      <text class="text-white text-lg font-semibold block truncate">{{ displayName }}</text>
+      <view class="flex items-center flex-wrap mt-1">
+        <text v-if="primaryMeta" class="text-white/80 text-sm mr-3">{{ primaryMeta }}</text>
+        <text v-if="secondaryMeta" class="text-white/80 text-sm">{{ secondaryMeta }}</text>
+      </view>
+    </view>
+  </view>
+</view>
+```
+
+- [ ] **Step 2: 功能列表改为统一白色卡片**
+
+将两个 `uni-card` 外层替换为单个白色卡片容器：
+
+```vue
+<view class="px-4 py-4 gap-y-4">
+  <view class="bg-white rounded-xl shadow-sm p-4">
+    <text class="text-base font-semibold text-gray-800 block mb-3">账号信息</text>
+    <uni-list :border="false">
+      <!-- 账号信息列表项 -->
+    </uni-list>
+  </view>
+
+  <view class="bg-white rounded-xl shadow-sm p-4">
+    <text class="text-base font-semibold text-gray-800 block mb-3">功能菜单</text>
+    <uni-list :border="false">
+      <uni-list-item
+        title="修改密码"
+        icon="uniui-locked-filled"
+        show-arrow
+        clickable
+        class="active:bg-gray-50 transition-colors"
+        @click="goToChangePassword"
+      />
+      <!-- 其他列表项 -->
+    </uni-list>
+  </view>
+</view>
+```
+
+- [ ] **Step 3: 退出登录按钮样式**
+
+将退出登录按钮改为：
+
+```vue
+<button class="w-full py-3 bg-red-500 text-white rounded-xl font-medium active:bg-red-600 transition-colors" @click="handleLogout">
+  退出登录
+</button>
+```
+
+- [ ] **Step 4: 本地验证与构建**
+
+运行：
+
+```bash
+npm run type-check
+npm run build:mp-weixin
+```
+
+Expected: 无 TypeScript 错误，构建通过。
+
+- [ ] **Step 5: 提交**
+
+```bash
+git add src/components/my/ProfileView.vue
+git commit -m "feat(profile): redesign profile page with gradient header and card list"
+```
+
+---
+
+### Task 13: 全局构建与验证
+
+**Files:**
+- 无新增文件。
+
+**Interfaces:**
+- 无。
+
+- [ ] **Step 1: 运行 TypeScript 类型检查**
+
+```bash
+npm run type-check
+```
+
+Expected: 无 TypeScript 错误。
+
+- [ ] **Step 2: 运行微信小程序构建**
+
+```bash
+npm run build:mp-weixin
+```
+
+Expected: 构建成功退出，控制台无 WXSS 转义选择器报错（如 `~` 选择器、属性选择器异常）。
+
+- [ ] **Step 3: 检查构建产物中的 WXSS**
+
+运行：
+
+```bash
+grep -R "\\[" dist/build/mp-weixin/pages/ dist/build/mp-weixin/components/ 2>/dev/null || true
+```
+
+Expected: 无 Tailwind 任意值类残留（如 `max-h-[80vh]`、`w-1.5` 等）。
+
+- [ ] **Step 4: 标记 tasks.md 全部完成**
+
+打开 `openspec/changes/refine-weapp-ui-style/tasks.md`，将所有 `- [ ]` 改为 `- [x]`。
+
+- [ ] **Step 5: 提交验证结果**
+
+```bash
+git add openspec/changes/refine-weapp-ui-style/tasks.md
+git commit -m "chore: mark all refine-weapp-ui-style tasks complete"
+```
+
+---
+
+## Self-Review
+
+**1. Spec coverage:**
+- 首页头部统一渐变背景 → Task 3/4/5
+- 卡片统一 `rounded-xl shadow-sm` → Task 3/4/5/10/12
+- 统计卡片渐变 → Task 3/4/5
+- 状态标签四色统一 → Task 2
+- 任务卡片状态增强（应急红边框、完成浅绿背景、点击反馈） → Task 7/8/9
+- 排班日历卡片化 → Task 10
+- 我的页深蓝渐变头部 → Task 12
+- 点击/按压反馈 → Task 3/4/5/6/7/8/9/10/11/12
+
+无 spec 需求遗漏。
+
+**2. Placeholder scan:**
+- 无 "TBD"、"TODO"、"implement later"。
+- 无 "Add appropriate error handling" 等模糊描述。
+- 每个任务均提供可直接粘贴的代码片段。
+
+**3. Type consistency:**
+- `TopBar.gradient` prop 为布尔值，与后续使用一致。
+- `StatusTag` 的 `type` prop 保持 `'task' | 'project'` 不变。
+- 所有任务卡片继续使用 `Task` 类型与 `click` 事件，未改变接口。
+
+---
+
+## Execution Handoff
+
+Plan complete and saved to `docs/superpowers/plans/2026-06-25-refine-weapp-ui-style.md`. Two execution options:
+
+**1. Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration
+
+**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints
+
+**Which approach?**

docs/superpowers/specs/2026-06-25-refine-weapp-ui-style-design.md

@@ -0,0 +1,90 @@
+---
+comet_change: refine-weapp-ui-style
+role: technical-design
+canonical_spec: openspec
+---
+
+# 清道夫 App 全站样式体验优化设计文档
+
+## 设计目标
+
+在不动业务逻辑和胶囊安全布局的前提下，借鉴 V21-SOP 原型提升小程序视觉品质与交互流畅度。核心方向：统一卡片/按钮/标签视觉语言、增强首页头部品牌感、强化任务状态识别、增加点击反馈。
+
+## 关键设计决策
+
+### 1. 首页头部统一渐变背景
+- 销售/调度/施工三端首页顶部均使用 `bg-gradient-to-r from-blue-500 to-blue-600`。
+- 顶部文字（欢迎语、用户名、标题）反白显示。
+- 通知铃铛按钮使用半透明白色背景 `bg-white/20`，与渐变头部融合。
+- 状态栏高度仍由 `StatusBar` 组件计算，渐变背景从状态栏下方开始或覆盖整个顶部区域（视组件结构而定）。
+
+### 2. 卡片统一为 rounded-xl + shadow-sm
+- 所有内容卡片、列表容器统一使用 `bg-white rounded-xl shadow-sm`。
+- 页面section间距保持 `gap-y-4`（16px）。
+- 卡片内边距保持 `p-4`（16px）。
+
+### 3. 统计卡片使用渐变
+- 销售端三个统计卡片分别使用蓝紫、粉紫、青蓝渐变。
+- 调度端/施工端统计卡片使用统一渐变或品牌色渐变，数字反白显示。
+- 渐变使用内联 `style="background: linear-gradient(...)"`，避免 Tailwind 配置扩展。
+
+### 4. 状态标签与按钮统一
+- 状态标签：`bg-*-50 text-*-500 rounded px-2 py-0.5 text-xs`。
+  - 蓝色：进行中/已排班
+  - 绿色：已完成
+  - 橙色：待处理/待确认
+  - 红色：紧急/已取消
+- 主按钮：`bg-primary text-white rounded-xl py-3`。
+- 次要按钮：`bg-white border border-gray-200 text-gray-600 rounded-xl`。
+
+### 5. 任务卡片状态增强
+- 应急任务：`border-l-4 border-red-500`。
+- 已完成：`bg-green-50`。
+- 进行中：保持白色背景 + 蓝色状态标签。
+- 卡片整体增加 `active:scale-95 transition-transform`。
+
+### 6. 排班日历卡片化
+- 日历整体容器使用 `bg-white rounded-xl shadow-sm p-4`。
+- 选中日期：`bg-primary text-white rounded-lg`。
+- 今天未选中：`bg-blue-50 text-primary rounded-lg`。
+- 有排班标记点：`w-1.5 h-1.5 rounded-full bg-primary`（不使用 Tailwind 小数类时改用 `w-2 h-2`）。
+
+### 7. 我的页深蓝渐变头部
+- 顶部使用 `bg-gradient-to-br from-blue-900 to-blue-800`。
+- 头像容器：`bg-white/20 rounded-full`。
+- 功能列表：`bg-white rounded-xl shadow-sm`，列表项带右侧箭头。
+- 退出登录：`bg-red-500 text-white rounded-xl`。
+
+### 8. 点击/按压反馈
+- 卡片、列表项：`active:scale-95 transition-transform duration-150`。
+- 按钮：`active:opacity-80 transition-opacity` 或 `active:bg-*-600`。
+- 快捷入口图标：`active:scale-95`。
+
+##  affected files
+
+- `src/components/common/TopBar.vue` — 支持渐变背景模式
+- `src/components/common/StatusTag.vue` — 统一配色
+- `src/components/home/SalesHome.vue`
+- `src/components/home/DispatchHome.vue`
+- `src/components/home/ConstructionHome.vue`
+- `src/components/task/TaskListView.vue`
+- `src/components/task/SalesTaskCard.vue`
+- `src/components/task/DispatchTaskCard.vue`
+- `src/components/task/ConstructionTaskCard.vue`
+- `src/components/dispatch/ScheduleView.vue`
+- `src/components/my/ProfileView.vue`
+
+## 风险与缓解
+
+| 风险 | 缓解 |
+|---|---|
+| 渐变背景与自定义导航栏高度配合不当 | 仅替换 TopBar 背景类，不改动高度计算逻辑 |
+| Tailwind 任意值/小数类导致 WXSS 编译失败 | 特殊尺寸使用内联 style，禁用 `w-1.5`、`max-h-[80vh]` 等类 |
+| uni-card 组件自带样式冲突 | 优先通过外层容器覆盖，必要时改用自定义 view |
+| 全站改动范围广导致视觉回归 | 按页面模块分任务，每个任务后运行 build 检查 |
+
+## 测试策略
+
+- `npm run type-check` 无 TS 错误。
+- `npm run build:mp-weixin` 构建通过，WXSS 无转义选择器。
+- 微信开发者工具预览三端首页、任务页、排班页、我的页，确认视觉层次与交互反馈。

openspec/changes/refine-weapp-ui-style/.comet.yaml

@@ -1,17 +1,17 @@
 workflow: full
-phase: design
+phase: build
 context_compression: off
-build_mode: null
+build_mode: subagent-driven-development
 build_pause: null
-subagent_dispatch: null
-tdd_mode: null
-review_mode: null
-isolation: null
+subagent_dispatch: confirmed
+tdd_mode: direct
+review_mode: standard
+isolation: branch
 verify_mode: null
 auto_transition: true
-base_ref: 9f0c81bea988aef091f5bf7e33f97dac2b41f22f
-design_doc: null
-plan: null
+base_ref: 5844ef0cab776011ca091c6a961614d0f69ffb44
+design_doc: docs/superpowers/specs/2026-06-25-refine-weapp-ui-style-design.md
+plan: docs/superpowers/plans/2026-06-25-refine-weapp-ui-style.md
 verify_result: pending
 verification_report: null
 branch_status: pending