---
archived-with: 2026-06-26-refine-weapp-ui-style
status: final
---
# 清道夫 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 (`- [x]`) 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` 保持原白色背景。

- [x] **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
  }
)
```

- [x] **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'"
>
```

- [x] **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>
```

- [x] **Step 4: 本地验证**

运行：

```bash
npm run type-check
```

Expected: 无 TypeScript 错误。

- [x] **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` 的标签。

- [x] **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>
```

- [x] **Step 2: 移除 scoped 样式块中的重复定义**

删除 `<style scoped>` 中的 `.tag` 规则，保留文件为空样式块或删除整个 `<style scoped>`。

```vue
<style scoped>
/* Tailwind 工具类已覆盖 */
</style>
```

- [x] **Step 3: 本地验证**

运行：

```bash
npm run type-check
```

Expected: 无 TypeScript 错误。

- [x] **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: 销售端首页使用渐变头部、渐变统计卡片、统一快捷入口容器。

- [x] **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>
```

- [x] **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>
```

- [x] **Step 3: 快捷入口图标容器统一**

将快捷入口图标容器统一改为 `bg-primary-light rounded-2xl`，已为 `bg-primary-light` 的保持不变；将禁用项的 `bg-surface` 也改为 `bg-primary-light opacity-60`。每个图标容器添加 `active:scale-95 transition-transform duration-150`。

- [x] **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>
```

- [x] **Step 5: 最新任务与通知公告列表项添加点击反馈**

为 `uni-list-item` 外层或自身添加 `active:scale-95 transition-transform duration-150`（若 `uni-list-item` 已支持 `clickable`，可直接给 `uni-list-item` 添加类）。保持原有结构。

- [x] **Step 6: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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: 调度端首页使用渐变头部、统一统计卡片渐变、快捷入口点击反馈。

- [x] **Step 1: TopBar 启用渐变模式并反白用户信息**

将 `<TopBar title="">` 改为 `<TopBar title="" gradient>`。

将头部左侧区域整体反白，头像容器改为 `bg-white/20`，文字改为白色/白色半透明，通知铃铛按钮改为 `bg-white/20` 并白色图标。

- [x] **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>
```

其余两个统计卡片使用相同渐变样式，仅修改文案与数字。

- [x] **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`。

- [x] **Step 4: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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: 施工端首页使用渐变头部、统一统计卡片渐变、每日任务入口与快捷功能样式。

- [x] **Step 1: TopBar 启用渐变模式并反白用户信息**

将 `<TopBar title="">` 改为 `<TopBar title="" gradient>`。

将头部左侧区域整体反白，与 DispatchHome 一致。

- [x] **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>
```

其余两个统计卡片使用相同渐变样式。

- [x] **Step 3: 每日任务入口卡片样式增强**

将每日任务入口的 `uni-card` 内部容器改为白色卡片，图标容器 `icon-box` 改为 `bg-primary-light rounded-xl`。点击区域添加 `active:scale-95 transition-transform duration-150`。

- [x] **Step 4: 快捷入口与当前任务卡片添加点击反馈**

为快捷入口图标容器添加 `active:scale-95 transition-transform duration-150`。

为当前任务卡片（`class="card p-3 cursor-pointer"`）添加 `active:scale-95 transition-transform duration-150`。

- [x] **Step 5: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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`。

- [x] **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>
```

- [x] **Step 2: 移除外层容器底部边框（可选）**

若设计文档要求筛选栏更轻量，可删除外层 `border-b border-gray-200`。

- [x] **Step 3: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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` 状态显示浅绿背景，并带点击反馈。

- [x] **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)"
>
```

- [x] **Step 2: 保留原有 borderStyle 计算属性**

`borderStyle` 计算属性继续根据状态设置 `borderLeftColor`，但仅在非 emergency 时生效；emergency 时使用 Tailwind `border-red-500`。

- [x] **Step 3: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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` 状态显示浅绿背景，并带点击反馈。

- [x] **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)"
>
```

- [x] **Step 2: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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` 状态显示浅绿背景，并带点击反馈。

- [x] **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)"
>
```

- [x] **Step 2: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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` 卡片包裹，日期选中态为蓝色填充白字，今天为浅蓝背景蓝字。

- [x] **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">
```

- [x] **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)"
>
```

- [x] **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>
```

- [x] **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>
```

- [x] **Step 5: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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`。

- [x] **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>
```

- [x] **Step 2: 为列表项添加点击反馈**

给 `uni-list-item` 添加 `clickable` 与 `active:scale-95 transition-transform duration-150`（若组件支持传递 class，否则在外层包一层 `<view>`）。

- [x] **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>
```

- [x] **Step 4: 弹窗字段间距统一**

确认每个字段外层使用 `mb-4`；当前为 `mb-3`，可保持或统一为 `mb-4`。将 textarea 最小高度通过内联 `style` 设置：`style="min-height: 80px;"`。

- [x] **Step 5: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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: 我的页顶部深蓝渐变头部，功能列表统一白色卡片，退出登录红色大圆角按钮。

- [x] **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>
```

- [x] **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>
```

- [x] **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>
```

- [x] **Step 4: 本地验证与构建**

运行：

```bash
npm run type-check
npm run build:mp-weixin
```

Expected: 无 TypeScript 错误，构建通过。

- [x] **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:**
- 无。

- [x] **Step 1: 运行 TypeScript 类型检查**

```bash
npm run type-check
```

Expected: 无 TypeScript 错误。

- [x] **Step 2: 运行微信小程序构建**

```bash
npm run build:mp-weixin
```

Expected: 构建成功退出，控制台无 WXSS 转义选择器报错（如 `~` 选择器、属性选择器异常）。

- [x] **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` 等）。

- [x] **Step 4: 标记 tasks.md 全部完成**

打开 `openspec/changes/refine-weapp-ui-style/tasks.md`，将所有 `- [x]` 改为 `- [x]`。

- [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?**