proposal.md 2.3 KB
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 无转义选择器错误。