JianFeeeee
8267102cd6
跨端: 修「我的」页显得非常挤（三处真因）+ 顺手清掉 3 条已修的自有 ArkTS 告警
用户：「「我的」页面显得非常挤」
先量再改。取了宽屏（3184px）与窄屏（1008px）两态，用 `dumpLayout` 拿真实 bounds，
反推 density=2.875。三个真因，**宽度是主因**。
## ① 内容列没有宽度上限（主因）
WebUI `AccountPage.tsx:104`：
<div className="w-full max-w-3xl mx-auto px-4 md:px-6 lg:px-10 py-6 space-y-6">
`max-w-3xl` = **48rem = 768px** + `mx-auto` 居中。
鸿蒙这边原来只有 `.width('100%')` —— **没有任何上限**。
后果（实测）：宽屏下卡片铺满 **2923px（1376vp）**，而里面全是
"标签 + 短值"的两列行，文字只占左边一小块 ⇒ 右边一大片留白，
整页读起来像一条被拉长的表格。这正是"挤"的观感来源 ——
不是行距小（实测行距 30vp / 字 14vp，其实偏松），是**横向没有收拢**。
修后实测：内容列 **2208px = 768.0vp**（与目标逐位吻合），
中心 1692.0 vs 父容器 1692.5 ⇒ 居中生效。
★ 形状：`Scroll > Row（居中容器）> Column（带上限）`。
**不能把居中挂在 `Scroll` 上** —— 官方 `ScrollAttribute` 没有
`.justifyContent()`。我第一版就是直接给 Scroll 挂，那是个编出来的属性。
ArkUI 没有 `mx-auto` 的直接对应物，"居中"必须靠一个容器节点。
★ 窄屏（1008px = 350vp < 768）下约束**自动不生效**，逐像素确认窄屏形态未变。
## ② 段间距只有 WebUI 的 1/3
WebUI `space-y-6` = **24px**；我们每张卡各写 `margin({ top: 8 })`（7 处）
与 `margin({ top: 10 })`（1 处）—— 既不统一，也贴得太近，
卡片挨在一起时"段"的边界看不出来，整页就是一大块密集表单。
⇒ 收成一个 `SECTION_GAP = 24` 常量，8 处全部改用它。
实测卡片间实测 **69px = 24.0vp** ✓
## ③ `SectionTitle()` 定义了却只调用一次
WebUI `AccountPage` 有 **5 个 `<h3>`** 段标题（基本资料 / 权限范围 /
修改密码 / 登录状态 / 管理），鸿蒙这边只有 **1 个**（'权限范围'）——
基本资料那六行是裸放在卡片里的，与下面的权限范围只靠一条 `Divider` 硬分。
⇒ 补「基本资料」标题。没有标题就没有"这是另一段"的语义，只能靠线。
## ④ 顺手清掉 3 条自有 ArkTS 告警（37 → 34）
上一条提交我说"`fill` 那 2 处留给下一轮"—— 不该推，这轮做完：
- **2× `fill` API 是 SDK 26.0.0**（`Circle().fill()`，在 WideSidebar 连接点
与 InboxPage/MainPage 未读点）。查 SDK 头文件确认不是误报：
`circle.d.ts` 的 `CircleAttribute.fill()` 标 **@since 26.0.0**，
而基类 `CommonShapeMethod.fill()` 才是 @since 11 —— 子类重载**遮蔽**了它。
设备实测点**确实渲染**（那是碰巧兼容），但契约上它比编译目标(23)新。
⇒ 换成与 `CalendarPage` 小圆点同一形状（普通容器 + width/height + borderRadius），
只用 API 11 起的通用属性。
- **1× `'packing' has been deprecated`** → `packToData`（SDK 明确给了
`@useinstead image.ImagePacker#packToData`；两者签名逐字相同：
`(PixelMap, PackingOption) => Promise<ArrayBuffer>`，只改名字）。
- **1× `This API is unavailable to 2in1`** → 加 `deviceInfo.deviceType !== '2in1'`
守卫。SDK 原文：「From API version 12, this API does not take effect on
2-in-1 devices.」告警仍在（静态检查不看运行时分支），但行为已正确分流 ——
留着这条注释说明为什么不断言消失。
★ 这条告警的噪声价值：同一批里就藏着 `fill` 那个真隐患。
逐条筛之前，它只是"每次重编都出现的一行字"。
## 验证
✓ 宽屏：内容列 768.0vp、居中、段间距 24.0vp（`dumpLayout` 实测 bounds）
✓ 窄屏：约束不生效、形态与改前一致（像素对照）
✓ 自有 ArkTS 告警 37 → 34（`fill`×2 与 `packing` 消失）
✓ 编译通过、设备安装后进程存活
2026-09-22 08:58:56 +08:00
..
2026-09-22 08:58:56 +08:00
2026-09-08 19:16:35 +08:00
2026-09-08 19:16:35 +08:00
2026-09-08 19:16:35 +08:00
2026-09-08 19:16:35 +08:00
2026-09-16 07:46:52 +08:00
2026-09-16 07:46:52 +08:00