feat(harmony): 系统方案第一批 —— 表面/文字/圆角交给系统、删手写玻璃、每项一张卡;跨端判据改"意图相同"
jianf:「鸿蒙也同步,但是鸿蒙要求用系统方案」。按 pi 对齐的形状(A/B/C + 品牌色防线)落地。
## 鸿蒙侧改了什么
- `Theme.ets` 的表面/文字/分隔/遮罩/圆角**来源换成系统**:
`pageBg→sys.color.ohos_id_color_background`、`surface→…_list_card_bg`、
`surfaceMuted→…_sub_background`、`border→…_list_separator`、三级文字 `→…_text_primary/secondary/tertiary`、
`overlay→…_mask_regular`、`radiusCard/Control→sys.float.ohos_id_corner_radius_card/button`。
于是这些维度自动跟随深色模式与无障碍设置 —— 这正是"手抄 WebUI 色值"做不到的事。
- **删掉手写玻璃** `#B8FFFFFF`/`#B80F172A`:那两个值等于"我们替系统猜了深色该怎么做"。
换成一个**档次**声明 `navMaterial: BlurStyle = BlurStyle.COMPONENT_THICK` + 导航条上的
`.backgroundBlurStyle(...)`;深浅两套颜色与模糊半径由系统按主题给。
遮罩的两段式(色 + 透明度)同样删掉:拆两段本就是为了"随主题换向",而这件事系统已经做了。
- **每项一张卡/气泡**:收件箱行、会话组头、联系人列表行改成卡片(圆角 + 卡片底色 + 行间距),
联系人列表那条贯通分隔线删除。
- 仍然自己写的只有两类:**品牌色**(`accent = #2563EB`,跨客户端身份)与**业务语义色**
(权限三档、预算三档 —— 系统只有 warning/alert 两个情绪色,凑不出三档,硬套会丢语义)。
## 判据:从"取值相同"改"意图相同"(两侧一起改)
- 品牌蓝**唯一保留取值钉**,并新增防线:不得退化成 `$r('sys.color.*')`
(系统强调色随主题/厂商皮肤变,"两个客户端是同一个产品"就靠不住了)。
- 圆角/材质/遮罩:改成"WebUI 自声明令牌 + 鸿蒙来自系统 + 差异被记录"(§7.12 有意差异表)。
- 新增 A(系统拥有的维度唯一来源是 `$r('sys.*')`,且不得退回 string/number)、
B(旧机制不得回来:`navBg*`、8 位半透明色、`rgb(`/`rgba(`、写死的 14/8)、
C(玻璃位置必须调 `backgroundBlurStyle` 且**只许一层**)。
- pi 指出的洞已补:裸色值判据原来只扫 `#RRGGBB(AA)`,抓不到 `rgba(`/`0xRRGGBBAA` ——
而这几种恰是"改用系统材质"时最容易混进来的形态。现在四种一起扫,且**先剥注释**
(注释里正当地引用旧写法不该被judged红)。
- pi 的 §5 建议也已落地:新增"版本库不得跟踪缓存/构建产物"判据(`.tmp/` 那次 554 个文件的事故判据化),
并放行 `server/internal/static/static/placeholder.html`(go:embed 落点的有意占位,删了 Go 侧编不过)。
## 变异验证(能红,且红在对的地方)
| 变异 | 结果 |
|---|---|
| 品牌蓝 → 系统强调色 | 红 3 条 |
| 手写玻璃 `navBgLight` 回来 | 红 2 条 |
| 导航改用写死半透明色、不调 `backgroundBlurStyle` | 红 2 条 |
| 卡片上再开一层模糊 | 红 1 条("玻璃应只出现在一处,实际 2 处") |
## 验证 / 未验
`hvigorw assembleHap` BUILD SUCCESSFUL;`npm test` 退出码 0
(10 个判据文件全绿:跨端 13 条、系统资源名 4 条、harmony-logic 19 条… + vitest 258/258)。
**未验**:观感(卡片间距、系统材质在导航条上的实际效果、深色模式)—— 需真机/模拟器;
模拟器要人在命令行跑一次 `harmony-emu start`。`sys.*` 名字全部对着 SDK 名表核过,且判据持续盯着。
This commit is contained in:
@ -483,3 +483,63 @@ deb 也不必从 targets 里摘。已写进 `client/electron/BUILD.md`(含排
|
||||
两条纪律写进判据本身:SDK 名表找不到时**判红并说明**(会静默跳过的判据等于没有),
|
||||
以及变异验证(拼错色名 `list_cad_bg` → 报"查无此名";写错 `BlurStyle.COMPONENT_不存在` → 报可用取值;
|
||||
名字解析精确到 `,`/`=` 分隔符 —— 早先的宽松写法把文档里的 `T`、`R` 也算成了枚举成员)。
|
||||
|
||||
### 7.12 「有意差异」表(跨端判据从"取值相同"改"意图相同"的依据)
|
||||
|
||||
按 pi 的要求单列一张表:这些维度**允许两边不同**,因为它们各自跟随自己的平台。
|
||||
判据(`cross-client-theme.test.mjs`)只钉"来源正确 + 差异被记录",不再钉取值相等 ——
|
||||
但**品牌色不在表内**:它是跨客户端身份,必须逐字一致(`#2563EB`,单独一条判据钉住)。
|
||||
|
||||
| 维度 | WebUI | 鸿蒙 | 为什么允许不同 |
|
||||
|---|---|---|---|
|
||||
| 圆角 | 自声明 `--radius-card: 0.875rem` | 系统 `sys.float.ohos_id_corner_radius_card/button` | 系统圆角会随设备/主题/无障碍设置变;跟着系统才是"系统方案" |
|
||||
| 材质(玻璃) | 自声明 `--nav-bg: 255 255 255 / 0.72` + `backdrop-filter` | 系统 `backgroundBlurStyle(BlurStyle.COMPONENT_THICK)` | 系统材质自带深浅两套颜色与模糊半径,手写 alpha 跟不了深色 |
|
||||
| 动效 | 自定义 transition/时长 | `animateTo` + 系统 `curves` | 动效曲线应跟随系统设置(含"减弱动效") |
|
||||
| 遮罩 | 自声明 `--bg-scrim` + `--bg-dim` 两段式 | 系统 `sys.color.ohos_id_color_mask_regular` | 遮罩要随主题换向(浅色洗白/深色压黑),这件事系统已经做了 |
|
||||
| **品牌色** | `--c-blue-600: 37 99 235` | `Theme.accent = '#2563EB'` | **不允许差异** —— 两个客户端是同一个产品 |
|
||||
|
||||
### 7.13 系统方案替换(第一批)+ 跨端判据从"取值"改"意图"
|
||||
|
||||
**改了什么**(鸿蒙侧):
|
||||
|
||||
- `Theme.ets` 的表面/文字/分隔/遮罩/圆角**来源换成系统**:
|
||||
`pageBg→ohos_id_color_background`、`surface→ohos_id_color_list_card_bg`、
|
||||
`surfaceMuted→ohos_id_color_sub_background`、`border→ohos_id_color_list_separator`、
|
||||
三级文字 `→text_primary/secondary/tertiary`、
|
||||
`overlay→ohos_id_color_mask_regular`、`radiusCard/Control→sys.float.ohos_id_corner_radius_card/button`。
|
||||
- **删掉手写玻璃**:`navBgLight='#B8FFFFFF'` / `navBgDark='#B80F172A'` 两个常量去掉,
|
||||
换成 `navMaterial: BlurStyle = BlurStyle.COMPONENT_THICK`,导航条上
|
||||
`.backgroundBlurStyle(Theme.navMaterial)` —— 深浅两套颜色与模糊半径由系统按主题给。
|
||||
顺带把**遮罩**的那套"色 + 透明度"两段式也删了(`overlayColor`/`overlayAlpha`/`overlay()`):
|
||||
当初拆两段就是为了"遮罩要能随主题换向",而这件事系统已经做了。
|
||||
- **每项一张卡/气泡**:收件箱行、会话组头、联系人列表行都改成卡片
|
||||
(圆角 + 卡片底色 + 行间距),联系人列表那条贯通分隔线删掉。
|
||||
- 保留自己写的只有两类:**品牌色**(`accent = #2563EB`,跨客户端身份)与
|
||||
**业务语义色**(权限三档、预算三档 —— 系统只有 warning/alert 两个情绪色,凑不出三档)。
|
||||
|
||||
**判据怎么改的**(与 pi 对齐后,两侧一起改;他要的 A/B/C 形状 + 品牌色防线):
|
||||
|
||||
| 判据 | 旧口径 | 新口径 |
|
||||
|---|---|---|
|
||||
| 品牌蓝 | 取值相同 | **不变**(唯一必须逐字一致的东西),另加"不得退化成 `$r('sys.color.*')`"的防线 |
|
||||
| 圆角 | 两边都是 14px | 意图相同:WebUI 自声明令牌 + 鸿蒙来自 `sys.float.*` + 差异记录在 §7.12 |
|
||||
| 导航玻璃 | 两边都是 0.72 | 意图相同:WebUI 自声明 alpha + 鸿蒙用 `BlurStyle` + 差异记录 |
|
||||
| 遮罩 | 鸿蒙照 WebUI 拆"色 + 透明度" | 鸿蒙用系统遮罩色(换向由系统做),WebUI 仍两段式 |
|
||||
| 裸色值 | 只扫 `#RRGGBB(AA)` | **四种形态一起扫**:`#RRGGBB(AA)` / `rgba(` / `0xRRGGBBAA`(pi 指出的洞) |
|
||||
| 新增 A | —— | 系统拥有的维度**唯一来源**是 `$r('sys.*')`(且不得退回 string/number) |
|
||||
| 新增 B | —— | 旧机制不得回来:`navBg*`、8 位半透明色、`rgb(`/`rgba(`、写死的 14/8 |
|
||||
| 新增 C | —— | 玻璃位置必须调 `backgroundBlurStyle`,且**只许一层**(嵌套各加模糊是 pi 点名要避免的) |
|
||||
|
||||
**变异验证**(判据必须能红,红在哪也要对):
|
||||
|
||||
| 变异 | 结果 |
|
||||
|---|---|
|
||||
| 品牌蓝 → `$r('sys.color.ohos_id_color_emphasize')` | 红 3 条(含品牌色防线) |
|
||||
| 手写玻璃 `navBgLight='#B8FFFFFF'` 回来 | 红 2 条 |
|
||||
| 导航改用写死的半透明色、不调 `backgroundBlurStyle` | 红 2 条 |
|
||||
| 卡片上再开一层模糊(嵌套玻璃) | 红 1 条:`玻璃应只出现在一处,实际 2 处` |
|
||||
|
||||
**未验**:这次替换的**观感**仍然没验 —— 卡片间距是否合适、系统材质在导航条上的实际效果、
|
||||
深色模式下的观感,都只有真机才看得到(模拟器需人在命令行启动)。已验证的是:
|
||||
`hvigorw assembleHap` BUILD SUCCESSFUL、13 条跨端判据 + 4 条系统资源名判据全绿、
|
||||
四种变异都能判红;`sys.*` 名字全部对着 SDK 名表核过(判据持续盯着)。
|
||||
|
||||
Reference in New Issue
Block a user