From dfaeab0e4df855a2b6e420f6ca1af63bd5ab9b47 Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Mon, 14 Sep 2026 13:45:34 +0800 Subject: [PATCH] =?UTF-8?q?docs(harmony):=20=E8=AE=B0=E5=85=A5"=E5=BF=85?= =?UTF-8?q?=E9=A1=BB=E7=94=A8=E7=B3=BB=E7=BB=9F=E6=96=B9=E6=A1=88"?= =?UTF-8?q?=E7=9A=84=E8=A6=81=E6=B1=82=E4=B8=8E=20WebUI=E2=86=92=E9=B8=BF?= =?UTF-8?q?=E8=92=99=E7=9A=84=E5=81=9A=E6=B3=95=E5=AF=B9=E5=BA=94=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「鸿蒙也同步，但是鸿蒙要求用系统方案」。 已转给 dsh（线索 harmony-ui-alignment），并写进计划文档： - **含义**：能交给系统的就交给系统 —— 用 ArkUI 的组件/材质/语义资源， 而不是把 WebUI 那套"手写 rgba + 自定义模糊 + 自制卡片"照搬。 系统材质会跟随深色模式、动效曲线与无障碍设置，手写的不会。 - **对应表**：`backgroundBlurStyle(BlurStyle.*)` 取代手写模糊；系统 `Tabs`/`TabBar` 取代自制导航条；`List`/`ListItem` 取代 `Scroll`+`Column`；组件自身的 `borderRadius`/`shadow` 取代 `.glass-card`；`$r('sys.color.*')` 语义色取代自切变量 （**顺带解决 WebUI 那个"半深不浅"的病根**）；`animateTo`/`transition` 取代自定义动画。 - **对既有判据的影响（重要）**：`cross-client-theme.test.mjs` 钉的是三个**取值**。 改用系统资源后它应当变红 —— 那是预期的，届时要把它从"取值相同"改成"意图相同" （品牌蓝仍须一致，材质与圆角允许各自跟随系统）。**必须两侧一起改**， 避免一边改了一半。 同时提醒 dsh 两条已同步的语义：列表项与顶部都是"每项一张卡/气泡"（不是通栏）； 玻璃只出现在一层。 --- docs/HARMONY-ALIGN-PLAN.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/HARMONY-ALIGN-PLAN.md b/docs/HARMONY-ALIGN-PLAN.md index 9f91a67..1096f36 100644 --- a/docs/HARMONY-ALIGN-PLAN.md +++ b/docs/HARMONY-ALIGN-PLAN.md @@ -36,6 +36,28 @@ 与 WebUI 不同的写死色值，全部换成令牌（203 处）。 - **修掉只剩第一个 tab 高亮的 bug**（`currentIndex === 0` 写死）。 +## 二·五、做法上的一条硬要求：**用系统方案** + +用户（2026-09-14）：「鸿蒙也同步，但是**鸿蒙要求用系统方案**」。 + +含义：能交给系统的就交给系统 —— 用 ArkUI 的组件、材质与语义资源， +而不是把 WebUI 那套"手写 rgba + 自定义模糊 + 自制卡片"照搬过来。 +系统材质会跟随深色模式、动效曲线与无障碍设置，手写的那套不会。 + +| WebUI 做法 | 鸿蒙应该用 | +|---|---| +| 手写 `rgba(...)` + `backdrop-filter` | `backgroundBlurStyle(BlurStyle.*)`（系统材质） | +| 自制圆角导航条 | 系统 `Tabs` + `TabBar`（`barBackgroundBlurStyle`） | +| 自制 `Scroll` + `Column` | 系统 `List` / `ListItem`（`divider` / `swipeAction`） | +| `.glass-card` 手写边框阴影 | `.borderRadius()` + `.backgroundBlurStyle()` + `.shadow()` | +| 自己切 CSS 变量做深色 | 系统语义色 `$r('sys.color.*')` 自动跟随 | +| 自定义 transition | `animateTo` / `transition` / `geometryTransition` | + +⚠ **影响既有判据**：`cross-client-theme.test.mjs` 目前钉的是三个**取值** +（品牌蓝 / 圆角 14 / 导航玻璃 0.72）。改用系统资源后它应当变红 —— +那是预期的，届时要把它从"取值相同"改成"**意图相同**"（品牌蓝仍须一致； +材质与圆角允许各自跟随系统）。改判据需 WebUI 侧（pi）一起改。 + ## 三、分期（按"能独立验收"切） **P1 设计语言（pi 已完成）** —— 令牌 + 颜色替换 + 编译通过。以下 P2–P6 归 dsh。