tmp6

2026-10-03 22:32:50 +08:00
parent a954b78908
commit c412964ab6
9 changed files with 1197 additions and 665 deletions
@@ -0,0 +1,166 @@
+# 陪诊小程序 配色规范
+
+本文件只规定**颜色**，不涉及布局、间距、圆角、触控尺寸。那些属于界面规范，另行处理。
+
+适用范围：`ui/wxapp_escort/` 下全部小程序页面。
+
+---
+
+## 一、总原则
+
+**全站只有一个色相。**
+
+- 第一色是暖橙，承载品牌、交互、强调。
+- 第二色不是另一个色相，是**暖墨文字层**（暖偏棕的深灰）。它的作用是把层级拉开，不与暖橙争彩。
+- 浅橙三档（描边、浅底、深字）都是主色的同色阶，不是新颜色。
+- 状态色只允许在**表达状态**时出现，不做装饰。
+
+判断一个颜色是否该用：如果它既不是暖橙的同色阶、也不是暖墨、也不是明确的状态色，就不该出现在页面里。历史遗留的灰金 `#D4A853`、亮橙 `#FF8500`、青灰、翠绿都是这条原则的违反项。
+
+---
+
+## 二、核心色板
+
+令牌按项目惯例定义在各页面的 `page {}` 选择器内。技术上 `app.wxss` 的 `page {}` 也能全局定义变量，但各页自带可以让页面样式自包含、互不牵连，这是本项目的约定。
+
+### 2.1 第一色：暖橙色阶
+
+| 令牌 | 色值 | 用途 | 对比度 |
+|---|---|---|---|
+| `--brand-strong` | `#C2410C` | 主按钮、价格数字、选中态、实心强调块 | 纸面 4.89:1，白卡 5.18:1 |
+| `--brand-ink` | `#9A3412` | 标签文字、文字链、暖色小标题、图标 | 浅橙底 6.74:1，纸面 6.89:1 |
+| `--brand-line` | `#FFE0C2` | 浅橙块描边、浅橙档的状态描边 | 仅做描边 |
+| `--brand-soft` | `#FFF4E8` | 浅橙底：说明砖、图标衬底、按钮按下态 | 仅做底 |
+
+用法边界：
+
+- `--brand-strong` 是唯一可以当"实心大色块"用的值。全页同类实心块建议不超过一处，避免主色泛滥。
+- `--brand-soft` 只能当底，不能当文字色，也不能当描边色（它做描边时等于没有描边）。
+- `--brand-ink` 是浅橙底上的首选强调字色。`--brand-strong` 落在 `--brand-soft` 上实测 4.77:1，过 AA 但余量小，浅橙底上的文字一律走 `--brand-ink`。
+
+### 2.2 第二色：暖墨文字层
+
+| 令牌 | 色值 | 用途 | 对比度 |
+|---|---|---|---|
+| `--ink` | `#2B2521` | 标题、需要最重的正文 | 纸面 14.26:1 |
+| `--ink-2` | `#4A4038` | 正文 | 纸面 9.52:1 |
+| `--muted` | `#6F655C` | 次要文字、元信息、说明、未选中态 | 纸面 5.37:1，白卡 5.69:1，浅橙底 5.24:1 |
+
+用法边界：
+
+- 三档只表示文字层级，不表示状态，不表示可点击性。
+- `--muted` 是最浅的一档，不得再浅。它是全站文字对比度的底线，任何比它更浅的文字色都视为不合格。
+- `--muted` 是三元色里的关键值：它在暖白纸面、白卡、浅橙底上都能过 4.5:1。历史值 `#7A7068` 压线达标但无余量（纸面 4.56:1），已废弃，所有硬编码 `#7A7068` 都要替换。
+- 注意 `t-icon` 组件的 `color` 属性读不到 CSS 变量，只能用硬编码色值。这类硬编码必须与令牌同步（当前应为 `#9A3412`、`#6F655C`、`#C2410C` 三者之一）。
+
+### 2.3 底与线
+
+| 令牌 | 色值 | 用途 |
+|---|---|---|
+| `--white` | `#FFFFFF` | 卡片、面板 |
+| `--paper` | `#FAF8F5` | 页面底色（暖白纸面） |
+| `--line` | `#ECE3D6` | 发丝线：卡片内部分隔、区块切分 |
+| `--sep` | `#E5DACC` | 分隔线：竖线、浅橙底上的线 |
+
+用法边界：
+
+- 这两组线不是装饰，是**切分工具**，本身不表意。不要给它们上主色或状态色。
+- `--line` 与 `--sep` 的分工是固定的：浅橙底上必须用 `--sep`，因为 `--brand-line` 落在 `--brand-soft` 上只有约 1.16:1，肉眼看不见；`--sep` 比 `--line` 深一档，专门负责在彩色底上还能被看到。
+- `--paper` 与 `--brand-soft` 的明度差只有约 1.03:1。所以浅橙块落在纸面上时，形状必须靠**暖色紧阴影**托出来，不能用更大的色差去解决。
+
+浅橙块托形阴影（唯一允许的彩色阴影）：
+
+```css
+box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08);
+```
+
+---
+
+## 三、状态色
+
+状态色只在订单、记录这类**有明确状态字段**的地方使用，且同一个页面里同类状态只能有一种颜色。
+
+| 状态 | 底色 | 描边 | 字色 | 对比度 |
+|---|---|---|---|---|
+| 待服务 | `#ECF7F4` | `#C7E5DF` | `#0F766E` | 5.00:1 |
+| 服务中 | `#FFF4E8` | `#FFE0C2` | `#C2410C` | 4.77:1 |
+| 已完成 | `#EAF6EE` | `#CDE9D7` | `#1F7A4D` | 4.79:1 |
+| 已取消 | `#FCF0EE` | `#F2D6D1` | `#B4231A` | 5.89:1 |
+
+用法边界：
+
+- **不得仅用颜色传达状态。** 状态胶囊必须带文字，颜色只做强化。这条是 WCAG 1.4.1（Use of Color，Severity: High）的要求——将来任何"纯色圆点表示状态"的写法都视为违规。
+- **青绿（待服务）是全站唯一的冷色**，也是唯一"反暖色"的特权。它只给"等你去处理"这一个语义。其他任何状态都不许用冷色，否则这个信号就废了。
+- **服务中直接复用主色浅档**，不另立色相。服务中是一个正常中间态，不需要报警感。
+- 已取消的红是状态色里唯一脱离暖色体系的。若后续想让全站色相更少，可把已取消收成 `--muted` 字 + 中性底（`#EFEFF2`），代价是列表里不易扫到。当前按上表执行。
+- 状态色不得用在：区块标题、图标衬底、按钮、装饰条。它只包住状态文字本身。
+- 表单错误提示复用已取消档（`#B4231A` 字 + `#FCF0EE` 底），不新增令牌；错误必须带文字，不能只把输入框描红。
+- 禁用态不使用暖橙（可点性由暖橙表达，禁用即收回）：`--muted` 字 + `--sep` 描边 + 透明底。
+
+---
+
+## 四、硬约束（可验证）
+
+1. 所有文字对底色的对比度必须达到 WCAG AA 4.5:1；中文最小字号不低于 24rpx（12px）。
+2. 图标对衬底的对比度必须达到 WCAG 非文本 3:1。反例：`#22A45D` 落在 `#EBF8F0` 上只有 2.94:1，不达标；同位置的合格值是 `#19814A`（4.49:1）。
+3. 不得新增色相。需要区分时先改结构（分组、加留白、换线），不要加颜色。
+4. 不得使用渐变色。历史遗留的 `#FF9B33 → #FF7A33`、`#4CAF50 → #45A049` 属于违反项。
+5. 卡片、面板、说明砖的**填充色必须中性**（`--white` / `--paper` / `--brand-soft`）。不得用 `--brand-strong` 或状态色做面填充，它们只做描边、图标、文字、mark。
+6. 暖橙以外的暖色（灰金、亮橙）不得出现。金色 `#D4A853` 属于旧体系，已废弃。
+7. 每个页面内，同一种含义只能对应一个色值。同一页出现两种"次要文字灰"即为不合格。
+8. 不得仅用颜色传达信息（WCAG 1.4.1）。状态、错误、选中态都必须有文字或图标伴随，颜色只做强化。
+
+---
+
+## 五、历史遗留收口清单
+
+以下为当前与规范冲突的位置，**本文档阶段不执行**，仅登记，供后续代码阶段按表替换。
+
+### 5.1 页面级
+
+| 范围 | 现状色值 | 替换为 |
+|---|---|---|
+| `mine/mine.wxss`、`mine/about.wxss` | `#D4A853`、`#FF8500` | `--brand-strong` / `--brand-ink` |
+| `mine/about.wxss`、`mine/mine.wxss` | `#22A45D` | `--brand-strong` |
+| `mine/comp_address.wxml`（`switch` 属性） | 旧金色 | `#C2410C`（属性值需硬编码） |
+| `health/profilelist.js`（`confirmColor`） | 旧金色 | `#C2410C` |
+| `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
+| `escort/recordlist.wxss` | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
+| `escort/recorddetail.wxss`（12 处） | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
+| `escort/agreement.wxss` | 底 `#FAF6F1`、`#D4A853` 系 | `--paper` / `--brand-soft` / 暖橙令牌 |
+| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`，字 `#1F2937`，绿 `#6B8E7B` `#2D6A4F`，灰 `#6B7280` `#9CA3AF` `#F3F4F6` `#E5E7EB` | 整体并入暖橙体系 |
+| `pages/ai/aichat.wxss` | 金 `#D4A853`，橙渐变 `#FF9B33→#FF7A33`，绿渐变 `#4CAF50→#45A049`，中性 `#F5F5F5` `#EEEEEE` `#999999` `#333333` `#E5E5E5` | 去渐变，气泡改单色 + 浅底，中性色归入纸面与线 |
+
+### 5.2 系统级（不在任何页面里，最容易漏）
+
+| 位置 | 现状 | 应改为 |
+|---|---|---|
+| `app.json` tabBar 选中图标 | `images/home-green.png`、`ai-green.png`、`mine-green.png`（绿色图片） | 暖橙 `#C2410C` 版本，与 `selectedColor` 一致 |
+| `app.json` tabBar `color` | `#999999` | `--muted` 等价色 `#6F655C` |
+| `app.wxss` 全局变量 | `--td-brand-color-1..10` 整套翠绿（基准 `#22A45D`）、`--c-ink #1c1917` | 已确认业务页面零引用（页面只用了 `t-icon`），是死代码，可整体重写或删除 |
+| `custom-tab-bar/index.wxss`、`index.js` | 未选中色硬编码 `#7A7068` | `#6F655C` |
+
+### 5.3 通用色值映射表
+
+| 旧值 | 新值 | 说明 |
+|---|---|---|
+| `#D4A853` | `#9A3412` 或 `#C2410C` | 灰金转暖橙，按"文字/图标"或"实心"分 |
+| `#FF8500` | `#C2410C` | 亮橙转主色 |
+| `#FF9B33` / `#FF7A33` | `#C2410C` + `#FFF4E8` | 去渐变，拆成字色与底色 |
+| `#22A45D` / `#6B8E7B` / `#2D6A4F` / `#4CAF50` / `#45A049` | `#C2410C`；若语义是"已完成"则 `#1F7A4D` | 绿系全部转暖橙；仅状态语义保留绿 |
+| `#FAF6F1` / `#F5F7F6` / `#F5F5F5` | `#FAF8F5` 或 `#FFFFFF` | 旧底转纸面或卡片 |
+| `#F3F4F6` / `#EEEEEE` / `#E5E5E5` | `#ECE3D6` 或 `#E5DACC` | 冷灰线转暖线 |
+| `#E5E7EB` | `#ECE3D6`；浅橙底上用 `#E5DACC` | 同上 |
+| `#1F2937` | `#2B2521` | 冷黑转暖墨 |
+| `#333333` | `#2B2521` | 同上 |
+| `#6B7280` / `#9CA3AF` / `#999999` / `#7A7068` | `#6F655C` | 各版"次要灰"统一 |
+
+---
+
+## 六、一句话检验
+
+改完任何页面后，用这三条自检：
+
+1. 把页面截图去色（灰度化），层级还清楚吗？如果去掉颜色就散架，说明是在用颜色凑层级。
+2. 数一下页面上有几个色相。超过"暖橙 + 暖墨 + 至多一个状态色"，就有问题。
+3. 页面里最浅的那行字，是 `--muted` 或更深吗？比它更浅的，都要拉回来。
@@ -0,0 +1,95 @@
+# 值班助手小程序 - 使用说明
+
+## 项目介绍
+值班助手是一个基于微信小程序的值班管理应用，使用 TDesign 组件库构建。
+
+## 技术栈
+- 微信小程序原生框架
+- TDesign 微信小程序组件库
+
+## 安装步骤
+
+### 1. 安装依赖
+```bash
+npm install
+```
+
+### 2. 在微信开发者工具中配置
+1. 打开微信开发者工具
+2. 导入项目（选择本项目目录）
+3. 在工具栏点击 `工具` -> `构建 npm`
+4. 构建成功后，勾选 `将 JS 编译成 ES5`
+
+### 3. 添加底部导航图标
+需要在 `images` 目录下添加以下图标文件（PNG格式）：
+- `home.png` - 首页图标（未选中）
+- `home-active.png` - 首页图标（选中）
+- `mine.png` - 我的图标（未选中）
+- `mine-active.png` - 我的图标（选中）
+
+### 4. 添加默认头像
+在 `images` 目录下添加 `default-avatar.png` 作为默认头像图片
+
+## 项目结构
+
+```
+attendant-wechat/
+├── app.js                 # 小程序主入口
+├── app.json              # 小程序全局配置
+├── app.wxss              # 小程序全局样式
+├── sitemap.json          # 站点地图配置
+├── package.json          # 项目依赖配置
+├── project.config.json   # 项目配置文件
+├── pages/                # 页面目录
+│   ├── index/           # 首页
+│   │   ├── index.wxml   # 页面结构
+│   │   ├── index.wxss   # 页面样式
+│   │   ├── index.js     # 页面逻辑
+│   │   └── index.json   # 页面配置
+│   └── mine/            # 我的页面
+│       ├── mine.wxml    # 页面结构
+│       ├── mine.wxss    # 页面样式
+│       ├── mine.js      # 页面逻辑
+│       └── mine.json    # 页面配置
+└── images/              # 图片资源目录
+    ├── home.png         # 首页图标
+    ├── home-active.png  # 首页图标（选中）
+    ├── mine.png         # 我的图标
+    ├── mine-active.png  # 我的图标（选中）
+    └── default-avatar.png # 默认头像
+```
+
+## 页面说明
+
+### 首页 (pages/index)
+- 欢迎卡片：显示应用名称和欢迎语
+- 快捷功能：今日值班、值班表、值班记录
+- 统计信息：显示值班相关统计数据
+
+### 我的 (pages/mine)
+- 用户信息卡片：显示用户头像和昵称
+- 功能菜单：个人信息、我的值班、值班统计、设置、帮助与反馈、关于
+- 退出登录：退出当前账号
+
+## 使用的 TDesign 组件
+- `t-button`: 按钮组件
+- `t-cell`: 单元格组件
+- `t-cell-group`: 单元格组组件
+- `t-icon`: 图标组件
+- `t-avatar`: 头像组件
+- `t-card`: 卡片组件
+- `t-divider`: 分割线组件
+- `t-badge`: 徽标组件
+
+## 注意事项
+1. 确保微信开发者工具的基础库版本 >= 2.12.0
+2. 安装依赖后必须执行"构建 npm"操作
+3. 建议在真机上测试，部分功能可能与模拟器有差异
+4. 图标文件尺寸建议：未选中状态 81x81px，选中状态 81x81px
+
+## 下一步开发建议
+1. 实现用户登录功能
+2. 对接后端 API，获取真实的值班数据
+3. 添加数据缓存机制，提升用户体验
+4. 实现消息通知功能
+5. 添加数据导出功能