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：

const props = withDefaults(
  defineProps<{
    title: string
    showBack?: boolean
    gradient?: boolean
  }>(),
  {
    showBack: false,
    gradient: false
  }
)

Step 2: 模板根节点使用动态背景类

将根节点 <view> 的类名改为：

<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> 改为：

<text
  class="text-base font-semibold truncate"
  :class="props.gradient ? 'text-white' : 'text-gray-800'"
>
  {{ title }}
</text>

将返回按钮内箭头 <text> 改为：

<text
  class="text-lg"
  :class="props.gradient ? 'text-white' : 'text-gray-600'"
>
  ←
</text>

Step 4: 本地验证

运行：

npm run type-check

Expected: 无 TypeScript 错误。

[x] Step 5: 提交

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> 改为：

<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>。

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

Step 3: 本地验证

运行：

npm run type-check

Expected: 无 TypeScript 错误。

[x] Step 4: 提交

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>。

将头部左侧区域整体反白：

<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 改为：

<!-- 本月项目 -->
<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 改为：

<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: 本地验证与构建

运行：

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

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

[x] Step 7: 提交

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 并白色图标。

Step 2: 统计卡片改为统一渐变

将三个统计卡片的容器类统一改为蓝紫渐变：

<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: 本地验证与构建

运行：

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

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

[x] Step 5: 提交

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 一致。

Step 2: 统计卡片改为统一渐变

将三个统计卡片统一改为青蓝渐变：

<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: 本地验证与构建

运行：

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

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

[x] Step 6: 提交

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 可用。

<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: 本地验证与构建

运行：

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

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

[x] Step 4: 提交

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> 改为：

<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: 本地验证与构建

运行：

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

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

[x] Step 4: 提交

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> 改为：

<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: 本地验证与构建

运行：

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

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

[x] Step 3: 提交

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> 改为：

<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: 本地验证与构建

运行：

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

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

[x] Step 3: 提交

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"> 改为：

<view class="mx-4 mt-4 bg-white rounded-xl shadow-sm p-4">

Step 2: 更新日期选中态样式

将日期单元格 :class 改为：

<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> 中复杂的动态颜色类，改为仅根据选中态控制：

<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：

<view
  v-if="date.hasSchedule"
  class="w-2 h-2 rounded-full mt-1"
  :class="isSelected(date) ? 'bg-white' : 'bg-primary'"
></view>

Step 5: 本地验证与构建

运行：

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

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

[x] Step 6: 提交

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 返回图标背景：

function getScheduleIconBgClass(shiftType: string) {
  return shiftType === 'emergency' ? 'bg-red-50' : 'bg-blue-50'
}

修改 getStatusIconClass 函数，改为根据 shiftType 返回图标颜色：

function getScheduleIconClass(shiftType: string) {
  return shiftType === 'emergency' ? 'uniui-calendar-filled text-red-500' : 'uniui-calendar-filled text-blue-500'
}

在模板中调用改为：

<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：

<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: 本地验证与构建

运行：

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

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

[x] Step 6: 提交

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> 改为：

<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 外层替换为单个白色卡片容器：

<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: 退出登录按钮样式

将退出登录按钮改为：

<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: 本地验证与构建

运行：

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

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

[x] Step 5: 提交

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 类型检查
```
npm run type-check
```

Expected: 无 TypeScript 错误。

[x] Step 2: 运行微信小程序构建
```
npm run build:mp-weixin
```

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

Step 3: 检查构建产物中的 WXSS

运行：

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] 改为 - [x]。

[x] Step 5: 提交验证结果

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?

2026-06-25-refine-weapp-ui-style.md 27 KB 히스토리 Raw

status: final

清道夫 App 全站样式体验优化实施计划

Global Constraints

File Structure

Task 1: TopBar 渐变背景支持

Task 2: StatusTag 统一配色

Task 3: SalesHome 首页样式优化

Task 4: DispatchHome 首页样式优化

Task 5: ConstructionHome 首页样式优化

Task 6: TaskListView 筛选标签样式

Task 7: SalesTaskCard 任务卡片样式增强

Task 8: DispatchTaskCard 任务卡片样式增强

Task 9: ConstructionTaskCard 任务卡片样式增强

Task 10: ScheduleView 排班日历卡片化

Task 11: ScheduleView 排班列表与弹窗样式

Task 12: ProfileView 我的页样式改版

Task 13: 全局构建与验证

Self-Review

Execution Handoff

2026-06-25-refine-weapp-ui-style.md 27 KB

히스토리 Raw