## 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 无转义选择器错误。