Home Explore Help
Register Sign In
xuyunhui
/
aquagreen_wechat_app
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
aquagreen_wecha...
/
docs
/
style-redesign.md

style-redesign.md 6.9 KB
Permalink History Raw

清道夫 App 全局样式重设计调整文档

一、调整目标

让小程序整体视觉更符合微信小程序原生风格：

  1. 统一页面背景色、卡片、文字、图标配色
  2. 大量减少渐变色和花俏装饰
  3. 简化首页头部，去掉毛玻璃、渐变背景
  4. 统一卡片、列表、按钮、标签样式
  5. 保持各角色首页信息结构清晰

二、色彩规范

主色板

名称 色值 Tailwind 类 用途
主色 #2563eb bg-primary / text-primary 按钮、激活态、主图标
主色浅 #eff6ff bg-primary-light 图标底色、选中背景
成功 #10b981 text-success 完成/通过状态
成功浅 #ecfdf5 bg-success-light 成功状态背景
警告 #f59e0b text-warning 待处理/提醒
警告浅 #fff7ed bg-warning-light 警告状态背景
危险 #ef4444 bg-danger / text-danger 取消/拒绝/重要
危险浅 #fef2f2 bg-danger-light 危险状态背景

中性色

名称 色值 Tailwind 类 用途
页面背景 #f5f5f5 bg-background 全局页面底色
浅灰背景 #f3f4f6 bg-surface hover、筛选标签默认态
主要文字 #1f2937 text-gray-800 标题、正文
次要文字 #6b7280 text-gray-500 备注、说明
辅助文字 #9ca3af text-gray-400 时间、占位
分割线 #e5e7eb border-gray-200 边框、分隔线

说明：text-primary、text-secondary 等语义化文字类因 Tailwind 生成规则与命名冲突，统一改用 text-gray-800/500/400。

三、核心样式文件变更

1. src/styles/variables.scss

  • 背景色改为 #f5f5f5
  • 主色改为 #2563eb
  • 删除渐变按钮、渐变标签相关变量
  • 文字色改为 #1f2937 / #6b7280 / #9ca3af
  • 卡片阴影更柔和

2. src/styles/global.scss

  • 去掉所有渐变按钮、渐变标签、渐变进度条
  • .card 改为白底 + 1px 浅灰边框 + 柔和阴影
  • .btn-primary 等改为纯色
  • .tag-* 改为纯色小圆角标签
  • 新增 .icon-box 图标容器
  • 新增 .page-header 页面头部样式

3. tailwind.config.js

  • 扩展颜色：primary、success、warning、danger 及其浅色
  • 扩展：background、surface、card-bg
  • 保持 preflight: false

四、页面/组件具体调整

首页（SalesHome / DispatchHome / ConstructionHome）

调整项 改前 改后
顶部背景 bg-gradient-to-br 渐变 + 毛玻璃 白色背景 + 下边框
用户头像区 半透明毛玻璃 bg-primary-light + text-primary
通知按钮 半透明毛玻璃 bg-surface + text-gray-500
统计卡片 彩色背景 bg-blue-50/bg-orange-50 白色卡片内 bg-surface 统计块
统计数字 彩色 text-blue-500 语义色 text-primary/text-warning/text-success
快捷入口图标 各功能彩色底 统一 bg-primary-light + text-primary
卡片阴影 is-shadow="true" is-shadow="false"，统一边框

任务列表（TaskListView）

  • 筛选标签默认态：bg-surface text-gray-500
  • 选中态：bg-primary text-white
  • 状态图标：统一语义化颜色
  • 加载/空态文字改为 text-gray-400

我的页面（ProfileView）

  • 顶部：白底 + 下边框，头像 bg-primary-light
  • 卡片统一 is-shadow="false"
  • 退出登录按钮：白底红字 + 灰边框

登录页（login.vue）

  • 背景：bg-background
  • Logo：纯色 bg-primary
  • 表单卡片：白底 + 灰边框 + 柔和阴影
  • 按钮：bg-primary 纯色
  • 输入框：bg-surface + 灰边框

知识库（knowledgeList / knowledgeDetail）

  • 列表封面：去掉渐变，改为 bg-primary-light + text-primary
  • 详情封面：去掉渐变，改为 bg-primary-light
  • 摘要/内容/分类块：使用 bg-primary-light、bg-success-light、bg-surface

通用组件

组件 调整
uni-card 默认有 1px 灰边框，阴影默认关闭，标题 #1f2937，extra #2563eb
uni-list 边框颜色 #e5e7eb
uni-list-item 图标背景 #f3f4f6，图标颜色 #6b7280，hover 背景 #f5f5f5，文字色更新
FilterTabs 默认 bg-surface text-gray-500，选中 bg-primary text-white
StatusTag 通过 utils/index.ts 统一状态色

五、状态色统一

src/utils/index.ts 中状态颜色已统一：

pending/inspecting    -> 警告色 #f59e0b / #fff7ed
confirmed/scheduled/constructing -> 主色 #2563eb / #eff6ff
departed              -> 紫色 #8b5cf6 / #f3e8ff
arrived/completed     -> 成功色 #10b981 / #ecfdf5
cancelled/rejected    -> 危险色 #ef4444 / #fef2f2

六、注意事项

  1. 语义化颜色类使用规则

    • 可用：bg-primary、bg-primary-light、bg-success-light、bg-warning-light、bg-danger-light、bg-surface、bg-background、text-primary、text-success、text-warning、text-danger
    • 避免：text-text-*、bg-text-*、border-border-color 等带连词的自定义类，Tailwind 可能无法正确解析

  2. 卡片阴影

    • 改造后默认使用 is-shadow="false"，依赖 uni-card 自带的 1px 边框分隔内容
    • 如需强调可用 shadow-card

  3. 渐变保留

    • 本次改造后，除 global.scss 中原有少量样式外，业务页面不再使用渐变背景
    • 后续如需品牌氛围，可在启动页或空状态插画中使用

  4. 图标

    • 快捷入口、列表项、状态标签统一使用 uni-icons
    • 图标底色统一 bg-primary-light，图标颜色统一 text-primary

七、已修改文件清单

  • src/styles/variables.scss
  • src/styles/global.scss
  • tailwind.config.js
  • src/pages.json
  • src/utils/index.ts
  • src/pages/login/login.vue
  • src/components/home/SalesHome.vue
  • src/components/home/DispatchHome.vue
  • src/components/home/ConstructionHome.vue
  • src/components/my/ProfileView.vue
  • src/components/task/TaskListView.vue
  • src/components/common/FilterTabs.vue
  • src/components/uni-card/uni-card.vue
  • src/components/uni-list/uni-list.vue
  • src/components/uni-list/uni-list-item.vue
  • src/subPackages/pages-common/knowledgeList.vue
  • src/subPackages/pages-common/knowledgeDetail.vue

八、验证结果

  • npm run build:mp-weixin 编译通过
  • 主包体积 923K，各分包 62K–152K，均小于 2MB
  • 生成 WXSS 中无无效类名

九、后续建议

  1. 逐步将剩余页面中的硬编码 #3b82f6 / #f59e0b 等替换为语义化类
  2. 检查分包页面中的表单、详情页是否还有未统一的彩色背景块
  3. 如果 UI 提供正式 tabBar 图标，替换 src/static/tabbar/ 下占位图标
  4. 继续验证各角色首页、任务页、我的页在微信开发者工具中的实际效果