fix(harmony): 令牌收尾 —— 裸色值清零、遮罩拆两段式、权限档位配色对齐 WebUI
接手核对时发现:「不许写死颜色」那条判据**只挡得住枚举的 8 个旧值** —— 判据全绿的 同期,pages/ 里还留着 14 处另一套写死的色(Google/Material:#E8F0FE、#E8F5E9、 #FFF3E0、#D93025、#777777×2、#555555、#444444、#cccccc、#aaaaaa、 遮罩 #80000000×2、透明 #00000000×2)。枚举挡不住漂移,只有"类"能挡。 ## 改法 - 14 处全部换成令牌。新增 accentStrong / warnBg / warnFg(取值对齐 WebUI `:root` 的 blue-700 / amber-50 / amber-700)与 `Theme.permBg/permFg` —— 权限档位徽标与 WebUI 的 `PermissionChip.tsx` **同一映射**(plan=蓝 / workspace=绿 / full=琥珀); 原先写成 `full ? 绿 : 橙`(Material 色),与 WebUI **反着来**。 - 遮罩拆成 `overlayColor` + `overlayAlpha`(照 WebUI 的 `--bg-scrim` + `--bg-dim` 两段式):遮罩色要能随主题换向,色与透明度焊死成一个 `#AARRGGBB` 等于把枚举写回 代码。ArkUI 只认单值,故由 `Theme.overlay()` 组装。 - 判据从"枚举旧值"改成"按类挡":pages/ 下**一个裸色值都不许有**(含 8 位 `#AARRGGBB`),页面清单从硬编码 7 个文件名改成**扫目录** —— 旧写法下, 接下来要加的发件箱/授权/日历会自动逃出判据。另加一条判据:权限档位配色与 WebUI `:root` 变量逐一比对,防"看起来差不多"。 ## 验证 - 变异测试:往 `InboxPage.ets` 塞一个 `#E8F0FE` → 判据红;撤回 → 绿。 - cross-client 判据 6 → 8 条全绿;`hvigorw assembleHap` BUILD SUCCESSFUL。 - **视觉未验**(模拟器在本机文件沙箱下起不来,见 `docs/HARMONY-ALIGN-PLAN.md` 5.4), 未写成"已完成"。
This commit is contained in:
@ -49,6 +49,61 @@ export class Theme {
|
||||
static readonly approveBg: string = '#F0FDF4';
|
||||
static readonly approveFg: string = '#15803D';
|
||||
|
||||
/** 品牌蓝的**深**前景(对应 WebUI 的 --c-blue-700: 29 78 216)—— 与 accentSoft 成对用于 chip */
|
||||
static readonly accentStrong: string = '#1D4ED8';
|
||||
/** 警示面/前景(对应 WebUI 的 --c-amber-50 / --c-amber-700)—— 权限 full 档、待决策徽标 */
|
||||
static readonly warnBg: string = '#FFFBEB';
|
||||
static readonly warnFg: string = '#B45309';
|
||||
/**
|
||||
* 遮罩(模态/淡出层):**颜色与透明度分开**,照 WebUI 的 `--bg-scrim` + `--bg-dim`
|
||||
* 两段式(`index.css` 的 `.app-backdrop::after`)。
|
||||
*
|
||||
* 为什么不写成一个 `#80000000`:遮罩色要能**随主题换向** —— 浅色主题用白把图案洗淡,
|
||||
* 深色主题必须换黑,否则浅色照片在深色界面里糊成一块亮斑、正文读不动(WebUI 侧实测踩过)。
|
||||
* 色与透明度焊死成一个 AARRGGBB,换向时只能再写一个常量,于是又变成枚举 ——
|
||||
* 那正是这条判据要防的东西。
|
||||
*
|
||||
* 注意:这是**唯一没有 WebUI 同名令牌**的一组(WebUI 的弹层不压遮罩,
|
||||
* 它那份 scrim 是给壁纸调暗用的),所以不往 WebUI 立同名令牌 —— 立了没人用、
|
||||
* 判据只能验"它存在",是自证。
|
||||
*/
|
||||
static readonly overlayColor: string = '#000000';
|
||||
static readonly overlayAlpha: number = 0.5;
|
||||
|
||||
/** 遮罩色 → ArkUI 只认的 `#AARRGGBB` 单值(鸿蒙没有"色 + 透明度"两参的重载) */
|
||||
static overlay(): string {
|
||||
const a: number = Math.round(Theme.overlayAlpha * 255);
|
||||
const hex: string = a.toString(16).toUpperCase();
|
||||
return '#' + (hex.length < 2 ? '0' + hex : hex) + Theme.overlayColor.substring(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 权限档位 → 徽标底色 / 文字色。
|
||||
*
|
||||
* 与 WebUI 的 `PermissionChip.tsx` **同一映射**(plan=蓝 / workspace=绿 / full=琥珀),
|
||||
* 认不出的档位与空档位按 workspace 处理 —— 映射只有这一处实现,
|
||||
* 页面不再各自 if-else 挑颜色。
|
||||
*/
|
||||
static permBg(mode: string): string {
|
||||
if (mode === 'plan') {
|
||||
return Theme.accentSoft;
|
||||
}
|
||||
if (mode === 'full') {
|
||||
return Theme.warnBg;
|
||||
}
|
||||
return Theme.approveBg;
|
||||
}
|
||||
|
||||
static permFg(mode: string): string {
|
||||
if (mode === 'plan') {
|
||||
return Theme.accentStrong;
|
||||
}
|
||||
if (mode === 'full') {
|
||||
return Theme.warnFg;
|
||||
}
|
||||
return Theme.approveFg;
|
||||
}
|
||||
|
||||
/** 圆角:卡片 14、控件 8(与 WebUI 的 --radius-card / --radius-control 一致) */
|
||||
static readonly radiusCard: number = 14;
|
||||
static readonly radiusControl: number = 8;
|
||||
|
||||
Reference in New Issue
Block a user