fix(wxss): replace Tailwind opacity/fraction classes to avoid WXSS escape errors

- Replace bg-white/20 and text-white/80 with inline styles in home pages and profile page
- Update check-wxss-escapes.js to detect \/ escaped selectors

These Tailwind classes generate .bg-white\/20 and .text-white\/80 selectors
that WeChat's WXSS parser rejects.

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

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

@@ -1,3 +1,7 @@
+---
+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.

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

@@ -2,6 +2,8 @@
 comet_change: refine-weapp-ui-style
 role: technical-design
 canonical_spec: openspec
+archived-with: 2026-06-26-refine-weapp-ui-style
+status: final
 ---
 
 # 清道夫 App 全站样式体验优化设计文档

openspec/changes/refine-weapp-ui-style/.comet.yaml → openspec/changes/archive/2026-06-26-refine-weapp-ui-style/.comet.yaml

@@ -1,5 +1,5 @@
 workflow: full
-phase: verify
+phase: archive
 context_compression: off
 build_mode: subagent-driven-development
 build_pause: null
@@ -12,12 +12,12 @@ auto_transition: true
 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
+verify_result: pass
 verification_report: docs/superpowers/reports/2026-06-25-refine-weapp-ui-style-verify.md
 branch_status: handled
 created_at: 2026-06-25
-verified_at: null
-archived: false
+verified_at: 2026-06-26
+archived: true
 handoff_context: openspec/changes/refine-weapp-ui-style/.comet/handoff/design-context.json
 handoff_hash: bbe42d93a97ebb0ffa5302bc664d4661a79296002655beac09f928dae98a735d
 build_command: npm run build:mp-weixin

openspec/specs/home-page-styling/spec.md

@@ -0,0 +1,42 @@
+# home-page-styling Specification
+
+## Purpose
+TBD - created by archiving change refine-weapp-ui-style. Update Purpose after archive.
+## 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/specs/profile-page-styling/spec.md

@@ -0,0 +1,34 @@
+# profile-page-styling Specification
+
+## Purpose
+TBD - created by archiving change refine-weapp-ui-style. Update Purpose after archive.
+## 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/specs/schedule-calendar-styling/spec.md

@@ -0,0 +1,38 @@
+# schedule-calendar-styling Specification
+
+## Purpose
+TBD - created by archiving change refine-weapp-ui-style. Update Purpose after archive.
+## 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/specs/task-card-styling/spec.md

@@ -0,0 +1,35 @@
+# task-card-styling Specification
+
+## Purpose
+TBD - created by archiving change refine-weapp-ui-style. Update Purpose after archive.
+## 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/specs/ui-style-system/spec.md

@@ -0,0 +1,89 @@
+# ui-style-system Specification
+
+## Purpose
+TBD - created by archiving change refine-weapp-ui-style. Update Purpose after archive.
+## 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** 用户点击卡片或列表项
+- **THEN** 元素在按压时缩小至 0.98 倍或背景色变深，释放后恢复
+
+#### Scenario: 按钮按压反馈
+- **WHEN** 用户点击主按钮
+- **THEN** 按钮在按压时透明度降低或背景色变深，提供即时反馈
+

scripts/check-wxss-escapes.js

@@ -16,8 +16,8 @@ if (!fs.existsSync(wxssPath)) {
 const content = fs.readFileSync(wxssPath, 'utf-8')
 
 // 匹配以 . 开头、类名中包含反斜杠转义的选择器
-// 例如 .h-1\.5、.w-1\/2、.last\:border-b-0
-const escapedClassSelector = /\.[a-zA-Z0-9_-]*\\[.:]/g
+// 例如 .h-1\.5、.w-1\/2、.last\:border-b-0、.bg-white\/20
+const escapedClassSelector = /\.[a-zA-Z0-9_-]*\\[.:/]/g
 const matches = content.match(escapedClassSelector) || []
 
 // 排除常见的 base64/inline 数据中的反斜杠（它们通常不在选择器位置）

src/components/home/ConstructionHome.vue

@@ -3,14 +3,14 @@
     <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">
+          <view class="w-12 h-12 rounded-2xl flex items-center justify-center mr-3" style="background-color: rgba(255, 255, 255, 0.2);">
             <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-xs block" style="opacity: 0.8;">工程一班</text>
             <text class="text-white text-lg font-bold">张师傅</text>
           </view>
-          <button class="ml-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center relative" @click="goToNotification">
+          <button class="ml-4 w-10 h-10 rounded-full flex items-center justify-center relative" style="background-color: rgba(255, 255, 255, 0.2);" @click="goToNotification">
             <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
           </button>
         </view>
@@ -24,15 +24,15 @@
         <view class="grid grid-cols-3 gap-3">
           <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>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">已完成</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">{{ currentTaskCount }}</text>
-            <text class="text-white/80 mt-1 block text-xs">进行中</text>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">进行中</text>
           </view>
           <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToTomorrowTask">
             <text class="stat-number text-white block">{{ tomorrowCount }}</text>
-            <text class="text-white/80 mt-1 block text-xs">明日任务</text>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">明日任务</text>
           </view>
         </view>
       </uni-card>

src/components/home/DispatchHome.vue

@@ -3,14 +3,14 @@
     <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">
+          <view class="w-12 h-12 rounded-2xl flex items-center justify-center mr-3" style="background-color: rgba(255, 255, 255, 0.2);">
             <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-xs block" style="opacity: 0.8;">调度中心</text>
             <text class="text-white text-lg font-bold">控制台</text>
           </view>
-          <button class="ml-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center relative" @click="goToNotification">
+          <button class="ml-4 w-10 h-10 rounded-full flex items-center justify-center relative" style="background-color: rgba(255, 255, 255, 0.2);" @click="goToNotification">
             <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
           </button>
         </view>
@@ -24,15 +24,15 @@
         <view class="grid grid-cols-3 gap-3">
           <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>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">今日任务</text>
           </view>
           <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.pendingCount }}</text>
-            <text class="text-white/80 mt-1 block text-xs">待排班</text>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">待排班</text>
           </view>
           <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #6366f1);" @click="goToEmergencyTeam">
             <text class="stat-number text-white block">{{ emergencyCount }}</text>
-            <text class="text-white/80 mt-1 block text-xs">应急中</text>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">应急中</text>
           </view>
         </view>
       </uni-card>

src/components/home/SalesHome.vue

@@ -4,14 +4,14 @@
     <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">
+          <view class="w-12 h-12 rounded-2xl flex items-center justify-center mr-3" style="background-color: rgba(255, 255, 255, 0.2);">
             <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-xs block" style="opacity: 0.8;">下午好</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">
+          <button class="ml-4 w-10 h-10 rounded-full flex items-center justify-center relative" style="background-color: rgba(255, 255, 255, 0.2);" @click="goToNotification">
             <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
           </button>
         </view>
@@ -26,19 +26,19 @@
           <!-- 本月项目 -->
           <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>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">本月项目</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>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">待确认</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>
+            <text class="text-white mt-1 block text-xs" style="opacity: 0.8;">进行中</text>
           </view>
         </view>
       </uni-card>

src/components/my/ProfileView.vue

@@ -4,14 +4,14 @@
     <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">
+        <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4" style="background-color: rgba(255, 255, 255, 0.2);">
           <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>
+            <text v-if="primaryMeta" class="text-white text-sm mr-3" style="opacity: 0.8;">{{ primaryMeta }}</text>
+            <text v-if="secondaryMeta" class="text-white text-sm" style="opacity: 0.8;">{{ secondaryMeta }}</text>
           </view>
         </view>
       </view>