跨端: 玻璃走基础组件（透明度/磨砂/投影）+ 判据去芜存菁（修 4 个判据自身缺陷）
用户两条：「玻璃不透明/不够磨砂炫酷，要更基础组件化」＋「判据去掉无意义的、保留有用的」。
★ 玻璃的透明度与质感（逐层调出来的，不是拍的）
· 透明度：`BlurStyle` 是固定档、没有 saturate 旋钮 ⇒ 观感偏灰。
改用参数化 `backgroundEffect({ radius, saturation })`，字段与 CSS `backdrop-filter`
一一对应，于是可以**照抄 WebUI 的数**：`blur(18px) saturate(1.5)`
（WebUI `.narrow-nav`，那里最"玻璃"的一档）。**saturate 才是玻璃感的主要来源**。
· 质感：只模糊+饱和仍然"像一块平的白方块" —— 玻璃板之所以像板靠的是**边缘**。
WebUI 的完整配方是 `box-shadow: 0 8px 28px rgb(0 0 0 / 0.16)` + 发丝描边。
只有模糊没有投影 ⇒ 一片雾；加上投影 ⇒ 一块板。**这是"不够炫酷"的主因**
（我先前两个方向都调了模糊与饱和，方向就偏了）。
· 投影用**系统预置档** `ShadowStyle.OUTER_FLOATING_SM`（"浮起的小面板"），
不是手写 `{radius, color, offsetY}` —— 手写色要么是 `#AARRGGBB`、
要么是 `rgba()`，两者都被判据明令禁止，而那条禁令**是对的**：
手写阴影色在深色下看不见（深底叠深影 = 无变化），WebUI 在 `.dark` 里
要把同一处从 0.16 加重到 0.55 —— 那正是"替系统猜深浅"。
★ 基础组件（用户：「定义一个基础玻璃容器给各个组件引用」）
· `GlassCardModifier` / `PaneModifier`（`AttributeModifier<CommonAttribute>`）：
**一处定义、处处引用**。页面里的玻璃从 15 处内联三连收敛成
`.attributeModifier(...of(this.bgActive))`。
★ 为什么不是 `@Styles`：全局 `@Styles` 读不到 `this`（而玻璃要知道 `bgActive`）；
成员级 `@Styles` 能读 `this` 但**每个 struct 各一份**，MainPage 有 7 个 struct
⇒ 只是把"每处抄 3 行"换成"每 struct 抄 1 份"，没解决问题。
· `Motion.dur()`：接系统「减弱动态效果」（`isAnimationReduceEnabledSync()`，API 23）。
WebUI 有 `prefers-reduced-motion` 硬约束，鸿蒙这边**改造前一次都没调过**。
★ 途中撞出并修掉的**真 bug**（都是我自己的）
· 把 `@Styles glassCard()` 里也替换成 `attributeModifier` ⇒
「我的」页 ProfileSection/AppearanceSection/PushSection **整块不渲染**
（设备实测：Scroll 直接跳到「客户端连接密钥」）。删掉那个死 `@Styles` 即恢复。
· `Theme.shadowColor/hairline` 用了 `rgba()` + `#AARRGGBB` ⇒ 违反本仓两条既有禁令
（"鸿蒙侧不写 CSS 颜色函数"、"半透明属于系统材质/职责"）。改用系统阴影档。
★ 判据去芜存菁：修了 4 个**判据自身的缺陷**（都是它声称在管、实际漏判/误判）
· 材质来源只扫 `backgroundBlurStyle` —— 玻璃改成 `backgroundEffect` 后**整类漏判**。
实测：往 Modifier 里塞 `backgroundEffect({radius:99,saturation:9.9})` 照样全绿。
⇒ 补上这一类，并加"参数必须引 Theme 令牌"（否则只是换个旋钮写死）。
· 参数抽取用 `[^)]*` —— 对 `this.materialOf()` 与 `{...}` 对象字面量都提前截断，
**误伤合法写法**（本次被它误红两次）。改成配对括号 + 去外层花括号。
· 嵌套判定**没比文件**：拿 A 文件的字符偏移去比 B 文件 ⇒ 判出
"MainPage 内含 SettingsPage 的玻璃"这种物理上不可能的红。
假红比漏报更坏 —— 会让人去改本来对的代码（本次差一点）。
· `harmony-appearance` 数的是**内联字面量**（"三元出现 ≥5 次"），
收敛成组件后写法变了、行为没变却变红 ⇒ 改成判不变式
（让位只有一条路径 + 每个窗格都收到开关）。
· 顺带：设备判据找「背景」时只在首屏可见节点里找（而 dumpLayout 只给可见节点），
且我的第一版只朝一个方向滑（越滑越远）⇒ 改成"先回顶、再逐屏向下扫"。
判据：files=32 ran=32 checks=518 pass=518 fail=0 red=0；baseline 7/7✓（第 7 次，逐个取证）。
This commit is contained in:
@ -9,6 +9,7 @@
|
||||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||||
import { ApiClient, ApiError } from '../api/ApiClient';
|
||||
import { Theme } from '../common/Theme';
|
||||
import { GlassCardModifier, PaneModifier } from '../common/Surface';
|
||||
import { AmIcon } from '../common/Icons';
|
||||
import { WideSidebar } from './WideSidebar';
|
||||
import { MailDetailView } from './MailDetailPage';
|
||||
@ -426,8 +427,7 @@ struct InboxTab {
|
||||
}
|
||||
.width('100%').height(46)
|
||||
.padding({ left: 14, right: 12 })
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.border({ width: 1, color: Theme.border })
|
||||
}
|
||||
@ -473,8 +473,7 @@ struct InboxTab {
|
||||
}, (acct: AccountInfo) => acct.id)
|
||||
}
|
||||
.width('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.border({ width: { bottom: 1 }, color: Theme.border })
|
||||
/*
|
||||
* ★ 2026-09-19 补（用户：「元素的出现消失动画呢？」）。
|
||||
@ -540,7 +539,7 @@ struct InboxTab {
|
||||
}
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
|
||||
/*
|
||||
@ -627,8 +626,7 @@ struct InboxTab {
|
||||
.width('100%').height(78)
|
||||
.padding({ left: 10, right: 12 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.border({ width: 1, color: Theme.border })
|
||||
.clip(true)
|
||||
@ -910,7 +908,7 @@ struct SentTab {
|
||||
* · 壁纸关：仍是不透明白（与下面内容同色，看不出这条带的边界）；
|
||||
* · 壁纸开：透明，壁纸从顶栏透上来 —— 这才是"融进背景"。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
/* 下边框对齐 WebUI：顶栏与内容的分界靠这条线，不靠底色差 */
|
||||
.border({ width: { bottom: 1 }, color: Theme.border })
|
||||
|
||||
@ -952,8 +950,7 @@ struct SentTab {
|
||||
this.SentRow(m)
|
||||
}
|
||||
.width('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.margin({ bottom: 6 })
|
||||
.onClick(() => { this.openMail(m); })
|
||||
@ -970,7 +967,7 @@ struct SentTab {
|
||||
}
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
}
|
||||
|
||||
@ -1155,8 +1152,7 @@ struct PermissionTab {
|
||||
}
|
||||
.width('100%').alignItems(HorizontalAlign.Start)
|
||||
.padding(12)
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.margin({ bottom: 8 })
|
||||
}
|
||||
@ -1195,7 +1191,7 @@ struct PermissionTab {
|
||||
* · 壁纸关：仍是不透明白（与下面内容同色，看不出这条带的边界）；
|
||||
* · 壁纸开：透明，壁纸从顶栏透上来 —— 这才是"融进背景"。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
/* 下边框对齐 WebUI：顶栏与内容的分界靠这条线，不靠底色差 */
|
||||
.border({ width: { bottom: 1 }, color: Theme.border })
|
||||
|
||||
@ -1228,7 +1224,7 @@ struct PermissionTab {
|
||||
}
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
}
|
||||
|
||||
@ -1502,7 +1498,7 @@ struct CommPage {
|
||||
* 卡片就成了"玻璃套玻璃"，正是 WebUI 用
|
||||
* `.bg-white .bg-white { backdrop-filter: none }` 明确禁止的事。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
|
||||
/*
|
||||
* 悬浮的圆形加号（用户点名要的形状）：56 圆、品牌色、右下角。
|
||||
@ -1526,7 +1522,7 @@ struct CommPage {
|
||||
* 背景开关仍在这一层（它是通信页的根）：卡不透明、容器透明，
|
||||
* 壁纸才从卡片间与顶/底边缘透出来（与 WebUI 的 `.comm-pane` 同构）。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
.navDestination(this.DestinationBuilder)
|
||||
.mode(NavigationMode.Auto)
|
||||
@ -1549,7 +1545,7 @@ struct CommPage {
|
||||
* 一个不透明的 `Navigation`。此前一直在调窗格自己的 `bgActive`，
|
||||
* 而真正挡住的是外面这层壳。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
}
|
||||
|
||||
@ -1794,7 +1790,7 @@ struct ContactsTab {
|
||||
* · 壁纸关：仍是不透明白（与下面内容同色，看不出这条带的边界）；
|
||||
* · 壁纸开：透明，壁纸从顶栏透上来 —— 这才是"融进背景"。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
/* 下边框对齐 WebUI：顶栏与内容的分界靠这条线，不靠底色差 */
|
||||
.border({ width: { bottom: 1 }, color: Theme.border })
|
||||
|
||||
@ -1886,8 +1882,7 @@ struct ContactsTab {
|
||||
* 不要把一个"按当时字号的估算值"钉成常量 ——
|
||||
* 字号、行高、动作行的存在与否都会变，而常量不会跟着变。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.clip(true)
|
||||
/* 点卡片 = 打开这条会话（WebUI `ContactPanel` 的 onOpen） */
|
||||
@ -1906,7 +1901,7 @@ struct ContactsTab {
|
||||
}
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
.navDestination(this.DestinationBuilder)
|
||||
.mode(NavigationMode.Auto)
|
||||
@ -1918,7 +1913,7 @@ struct ContactsTab {
|
||||
.width('100%').height('100%')
|
||||
/* 同 CommPage 的 Navigation：不设背景时系统默认不透明白，会把里面
|
||||
已经透明的窗格盖住。联系人页是同一形状，同一修法。 */
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
.attributeModifier(PaneModifier.of(this.bgActive))
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1980,8 +1975,7 @@ struct ContactsTab {
|
||||
}
|
||||
.width('100%').alignItems(HorizontalAlign.Start)
|
||||
.padding({ left: 12, right: 12, top: 10, bottom: 10 })
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.backgroundBlurStyle(this.bgActive ? Theme.cardMaterial : BlurStyle.NONE)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(Theme.radiusCard)
|
||||
.border({ width: 1, color: Theme.border })
|
||||
}
|
||||
@ -3183,7 +3177,7 @@ struct MainPage {
|
||||
* ★ 修法与窄屏那一支**对齐**（窄屏本来就是对的）：
|
||||
* 壁纸开着就透明，让底下的 `WallpaperLayer()` 透上来。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.surface)
|
||||
.attributeModifier(GlassCardModifier.of(this.bgActive))
|
||||
.borderRadius(this.isWide ? Theme.glassRadius : 0)
|
||||
.clip(this.isWide)
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user