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 无转义选择器。
微信开发者工具预览三端首页、任务页、排班页、我的页，确认视觉层次与交互反馈。