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 按钮在按压时透明度降低或背景色变深，提供即时反馈