|
|
@@ -0,0 +1,439 @@
|
|
|
+# Comet Design Handoff
|
|
|
+
|
|
|
+- Change: refine-weapp-ui-style
|
|
|
+- Phase: design
|
|
|
+- Mode: compact
|
|
|
+- Context hash: bbe42d93a97ebb0ffa5302bc664d4661a79296002655beac09f928dae98a735d
|
|
|
+
|
|
|
+Generated-by: comet-handoff.sh
|
|
|
+
|
|
|
+OpenSpec remains the canonical capability spec. This handoff is a deterministic, source-traceable context pack, not an agent-authored summary.
|
|
|
+
|
|
|
+## openspec/changes/refine-weapp-ui-style/proposal.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/proposal.md
|
|
|
+- Lines: 1-33
|
|
|
+- SHA256: 8c62125e0b59049e0afc2ed1a0e36d236ea2b8bfee096e987ee01300810510cc
|
|
|
+
|
|
|
+```md
|
|
|
+## Why
|
|
|
+
|
|
|
+当前清道夫小程序功能已基本跑通，但整体视觉表现偏单调：页面以白底灰字为主，缺少层次感和品牌色运用；卡片、按钮、状态标签的圆角与阴影不统一；部分页面与 V21-SOP 原型在氛围上差距较大。为了让用户在使用时感到更专业、更流畅，需要借鉴原型做一次全站样式与微交互的体验优化，在不动业务逻辑和胶囊安全布局的前提下提升视觉品质。
|
|
|
+
|
|
|
+## What Changes
|
|
|
+
|
|
|
+- 统一全站卡片风格：统一使用 `bg-white rounded-xl shadow-sm`，与原型保持一致。
|
|
|
+- 优化首页头部视觉：销售/施工端首页顶部改为蓝色渐变背景，强化品牌感。
|
|
|
+- 提升统计卡片表现力：首页统计卡片改用渐变色彩，突出关键数据。
|
|
|
+- 统一状态标签与按钮：状态标签使用原型色值（蓝/绿/橙/红），主按钮使用 `rounded-xl` 大圆角。
|
|
|
+- 任务卡片增强识别：应急任务增加左侧红色边框，已完成/超时等状态增加背景色区分。
|
|
|
+- 排班日历优化：日历容器使用卡片化包裹，日期选中样式与原型对齐。
|
|
|
+- 我的页头部改版：使用深蓝渐变头部，信息层级更清晰。
|
|
|
+- 增加按压/点击反馈：卡片、按钮增加 `active:scale-95` 或背景色变深的交互反馈。
|
|
|
+- 规范字体与间距：统一 section 标题、描述文字、辅助文字的字号与色阶。
|
|
|
+
|
|
|
+## Capabilities
|
|
|
+
|
|
|
+### New Capabilities
|
|
|
+- `ui-style-system`: 全站样式系统统一与视觉层级优化。
|
|
|
+- `home-page-styling`: 首页（销售/调度/施工三端）头部、统计卡片、快捷入口样式优化。
|
|
|
+- `task-card-styling`: 任务列表筛选标签与任务卡片样式增强。
|
|
|
+- `schedule-calendar-styling`: 排班页日历与排班卡片样式优化。
|
|
|
+- `profile-page-styling`: 我的页头部与功能列表样式改版。
|
|
|
+
|
|
|
+### Modified Capabilities
|
|
|
+- （无）
|
|
|
+
|
|
|
+## Impact
|
|
|
+
|
|
|
+- 影响范围：小程序前端所有页面组件，主要涉及 `src/components/` 下的 home、task、dispatch、my 等组件，以及 `src/components/common/` 中的通用卡片、按钮、状态标签样式。
|
|
|
+- 不涉及后端接口、业务状态机、路由结构和胶囊安全区计算逻辑。
|
|
|
+- 需要确保 `npm run build:mp-weixin` 构建通过，WXSS 无转义选择器错误。
|
|
|
+```
|
|
|
+
|
|
|
+## openspec/changes/refine-weapp-ui-style/design.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/design.md
|
|
|
+- Lines: 1-61
|
|
|
+- SHA256: 93748fff2ce20c74966e9dd98d9c86559fb5a6f021dd87277ae9b843b095acfa
|
|
|
+
|
|
|
+```md
|
|
|
+## Context
|
|
|
+
|
|
|
+清道夫 App 前端基于 uni-app + Vue 3 + TypeScript + Tailwind CSS 构建，当前已按销售/调度/施工三端完成角色化首页、任务列表、任务详情、排班、我的等核心功能。V21-SOP 原型提供了完整的视觉参考：卡片化布局、蓝色渐变头部、渐变统计卡片、统一的状态色与圆角规范。本次 change 是一次纯样式层面的体验打磨，目标是让小程序在视觉上更接近原型质感，同时保持现有业务逻辑和胶囊安全布局不变。
|
|
|
+
|
|
|
+## Goals / Non-Goals
|
|
|
+
|
|
|
+**Goals:**
|
|
|
+- 统一全站卡片、按钮、标签、输入框的圆角、阴影与色阶。
|
|
|
+- 优化首页头部与统计卡片，增强数据可视化表现力。
|
|
|
+- 提升任务卡片状态识别度（紧急、已完成、超时等）。
|
|
|
+- 优化排班日历与我的页视觉层次。
|
|
|
+- 增加合理的点击/按压反馈，让交互更流畅。
|
|
|
+
|
|
|
+**Non-Goals:**
|
|
|
+- 不修改业务逻辑、状态机、API 接口或路由结构。
|
|
|
+- 不调整胶囊安全区计算与相关布局。
|
|
|
+- 不新增页面或功能模块。
|
|
|
+- 不改动后端代码。
|
|
|
+
|
|
|
+## Decisions
|
|
|
+
|
|
|
+1. **颜色系统沿用 Tailwind 语义色 + 项目自定义色**：
|
|
|
+ - 主色保持 `primary`（项目已配置为 blue-500 #3b82f6）。
|
|
|
+ - 渐变统计卡片使用内联 `linear-gradient` 实现，避免扩展 Tailwind 配置。
|
|
|
+ - 状态标签使用 `bg-*-50 text-*-500` 的轻量标签风格，与原型一致。
|
|
|
+
|
|
|
+2. **卡片统一为 `rounded-xl shadow-sm bg-white`**：
|
|
|
+ - 原型中 12px 圆角和微阴影是核心视觉语言，统一替换当前大小不一的 `rounded-lg`/`rounded-2xl` 和缺失阴影的容器。
|
|
|
+
|
|
|
+3. **首页头部渐变背景**:
|
|
|
+ - 销售/施工端首页顶部区域改为 `bg-gradient-to-r from-blue-500 to-blue-600`，文字反白，营造品牌氛围。
|
|
|
+ - 调度端控制台保持简洁专业感，但统一卡片与统计样式。
|
|
|
+
|
|
|
+4. **按钮统一为 `rounded-xl` 大圆角**：
|
|
|
+ - 底部主操作按钮、表单确认按钮使用 `rounded-xl`，与原型一致。
|
|
|
+ - 顶部小操作按钮保持 `rounded-lg` 以节省空间。
|
|
|
+
|
|
|
+5. **点击反馈**:
|
|
|
+ - 卡片和列表项使用 `active:scale-95` 或 `active:bg-gray-50`。
|
|
|
+ - 按钮使用 `active:opacity-80` 或 `active:bg-*-600`。
|
|
|
+ - 使用 Tailwind 的 `transition` 类保证过渡自然。
|
|
|
+
|
|
|
+6. **避免 WXSS 转义问题**:
|
|
|
+ - 不使用 Tailwind 小数类（如 `w-1.5`）、任意值类（如 `max-h-[80vh]`）或 last:/hover: 变体。
|
|
|
+ - 需要特殊尺寸时使用内联 style。
|
|
|
+
|
|
|
+## Risks / Trade-offs
|
|
|
+
|
|
|
+- [Risk] 全站样式改动范围广，可能引入局部视觉回归 → Mitigation: 按页面模块分任务实施，每个任务后构建检查；最终在微信开发者工具中逐页预览。
|
|
|
+- [Risk] 渐变背景与自定义导航栏/状态栏高度配合不当 → Mitigation: 渐变区域仍使用 StatusBar + TopBar 结构，仅在 TopBar 内部使用渐变背景类，不改动高度计算。
|
|
|
+- [Risk] 部分uni-app组件（如 uni-card）自带样式，可能与 Tailwind 类冲突 → Mitigation: 通过组件 props 或外层容器覆盖，必要时改用自定义 view 卡片。
|
|
|
+- [Risk] 状态标签颜色过多导致视觉嘈杂 → Mitigation: 严格限制为蓝/绿/橙/红四色，与原型一致。
|
|
|
+
|
|
|
+## Migration Plan
|
|
|
+
|
|
|
+无需迁移。本次为前端样式优化，构建完成后直接部署小程序即可。
|
|
|
+
|
|
|
+## Open Questions
|
|
|
+
|
|
|
+- 是否需要同步调整登录页/启动页样式以匹配新的视觉系统？（本次不做，待后续确认）
|
|
|
+- 原型中部分图标为 Font Awesome，项目使用 uni-icons，是否需要在关键位置引入 Font Awesome 图标以提升一致性？（本次优先使用现有 uni-icons 映射）
|
|
|
+```
|
|
|
+
|
|
|
+## openspec/changes/refine-weapp-ui-style/tasks.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/tasks.md
|
|
|
+- Lines: 1-45
|
|
|
+- SHA256: f34c373417d2bd726d5811d9133677baac192871b40b45557ff69c2c2b40ddf0
|
|
|
+
|
|
|
+```md
|
|
|
+## 1. 全局样式系统准备
|
|
|
+
|
|
|
+- [ ] 1.1 检查项目 Tailwind 配置，确认 `primary` 色值与 `rounded-xl`、`shadow-sm` 等工具类可用
|
|
|
+- [ ] 1.2 确认 `app-container`、卡片、按钮等全局类名规范，避免 WXSS 转义问题
|
|
|
+
|
|
|
+## 2. 通用组件样式优化
|
|
|
+
|
|
|
+- [ ] 2.1 优化 `StatusBar` + `TopBar` 渐变背景支持（可选渐变/白色模式）
|
|
|
+- [ ] 2.2 统一 `uni-card` 或自定义卡片容器为 `bg-white rounded-xl shadow-sm`
|
|
|
+- [ ] 2.3 优化 `StatusTag` 状态标签配色（蓝/绿/橙/红）
|
|
|
+- [ ] 2.4 为常用按钮添加 `active:` 按压反馈
|
|
|
+- [ ] 2.5 为卡片/列表项添加 `active:scale-95` 或 `active:bg-gray-50` 反馈
|
|
|
+
|
|
|
+## 3. 首页样式优化
|
|
|
+
|
|
|
+- [ ] 3.1 销售端 `SalesHome.vue`：顶部改为渐变背景，统计卡片改为渐变，快捷入口统一图标容器
|
|
|
+- [ ] 3.2 调度端 `DispatchHome.vue`：统计卡片与快捷操作统一卡片/图标样式
|
|
|
+- [ ] 3.3 施工端 `ConstructionHome.vue`：顶部改为渐变背景，统计卡片样式统一
|
|
|
+
|
|
|
+## 4. 任务页样式优化
|
|
|
+
|
|
|
+- [ ] 4.1 `TaskListView.vue`：筛选标签改为 `rounded-full`，选中态使用 `bg-primary text-white`
|
|
|
+- [ ] 4.2 `SalesTaskCard.vue`：增加应急红色左边框、已完成浅绿背景、点击反馈
|
|
|
+- [ ] 4.3 `DispatchTaskCard.vue`：增加应急红色左边框、状态背景区分、点击反馈
|
|
|
+- [ ] 4.4 `ConstructionTaskCard.vue`：增加应急红色左边框、状态背景区分、点击反馈
|
|
|
+
|
|
|
+## 5. 排班页样式优化
|
|
|
+
|
|
|
+- [ ] 5.1 `ScheduleView.vue`：日历区域使用 `bg-white rounded-xl shadow-sm` 卡片包裹
|
|
|
+- [ ] 5.2 `ScheduleView.vue`：日期选中态改为蓝色填充白字，今天改为浅蓝背景蓝字
|
|
|
+- [ ] 5.3 `ScheduleView.vue`：排班列表项增加月计划/应急图标背景色区分与点击反馈
|
|
|
+- [ ] 5.4 `ScheduleView.vue`：新增/编辑弹窗按钮使用 `rounded-xl`，字段间距统一
|
|
|
+
|
|
|
+## 6. 我的页样式优化
|
|
|
+
|
|
|
+- [ ] 6.1 `ProfileView.vue`：顶部改为深蓝渐变头部，头像与用户信息反白显示
|
|
|
+- [ ] 6.2 `ProfileView.vue`：功能入口列表改为统一卡片，列表项增加点击反馈
|
|
|
+- [ ] 6.3 `ProfileView.vue`：退出登录按钮使用 `rounded-xl` 大圆角
|
|
|
+
|
|
|
+## 7. 验证与收尾
|
|
|
+
|
|
|
+- [ ] 7.1 运行 `npm run type-check` 确认无 TypeScript 错误
|
|
|
+- [ ] 7.2 运行 `npm run build:mp-weixin` 确认构建通过且 WXSS 无转义选择器
|
|
|
+- [ ] 7.3 在微信开发者工具中预览主要页面，确认视觉层次与交互反馈正常
|
|
|
+- [ ] 7.4 提交所有改动并合并到 master
|
|
|
+```
|
|
|
+
|
|
|
+## openspec/changes/refine-weapp-ui-style/specs/home-page-styling/spec.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/specs/home-page-styling/spec.md
|
|
|
+- Lines: 1-38
|
|
|
+- SHA256: 831c8c44b0255960dcb28248bbac5767666d6387e980c00a45e4083e17f79c5b
|
|
|
+
|
|
|
+```md
|
|
|
+## ADDED 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/changes/refine-weapp-ui-style/specs/profile-page-styling/spec.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/specs/profile-page-styling/spec.md
|
|
|
+- Lines: 1-30
|
|
|
+- SHA256: 9c91ccc38ffb0128b659d4e74dbe2a56c9deb6bd148d8ac0c987e37d0ba45922
|
|
|
+
|
|
|
+```md
|
|
|
+## ADDED 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/changes/refine-weapp-ui-style/specs/schedule-calendar-styling/spec.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/specs/schedule-calendar-styling/spec.md
|
|
|
+- Lines: 1-34
|
|
|
+- SHA256: b426acbff56b0d9ffbde1fcc99b44f4d0fad58737974b333482f74ab35d32206
|
|
|
+
|
|
|
+```md
|
|
|
+## ADDED 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/changes/refine-weapp-ui-style/specs/task-card-styling/spec.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/specs/task-card-styling/spec.md
|
|
|
+- Lines: 1-31
|
|
|
+- SHA256: 4d0cbfe51e39512b369460ad81588eee403e36c8189dc840cb8eb58b59eb7021
|
|
|
+
|
|
|
+```md
|
|
|
+## ADDED 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/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md
|
|
|
+
|
|
|
+- Source: openspec/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md
|
|
|
+- Lines: 1-85
|
|
|
+- SHA256: 2f27aa46a2b9b1b32827efeca9aa439f35eef22d077558f18429dff031cd6288
|
|
|
+
|
|
|
+[TRUNCATED]
|
|
|
+
|
|
|
+```md
|
|
|
+## ADDED 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** 用户点击卡片或列表项
|
|
|
+```
|
|
|
+
|
|
|
+Full source: openspec/changes/refine-weapp-ui-style/specs/ui-style-system/spec.md
|
|
|
+
|
xuyunhui