From f16ebf4942764ffc1960b1b44430753d4103c28a Mon Sep 17 00:00:00 2001
From: JianFeeeee <jianf@noreply.localhost>
Date: Mon, 21 Sep 2026 16:23:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=A8=E7=AB=AF:=20=E3=80=8C=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E3=80=8D=E9=A1=B5=E6=AE=B5=E9=A1=BA=E5=BA=8F=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20WebUI=EF=BC=88=E6=8B=86=E6=8E=89=E9=82=A3=E4=B8=A4?=
 =?UTF-8?q?=E4=B8=AA=E7=84=8A=E5=9C=A8=E4=B8=80=E8=B5=B7=E7=9A=84=20sectio?=
 =?UTF-8?q?n=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户「都做啊」的第二件 = 继续逐页对齐 WebUI。这一轮做「我的」页。

## 先比对，再动手（不是凭印象说"八段一一对应"）

文件头注释一直写着「八个 section 与 WebUI 一一对应」，实测逐段列出后
**顺序并不对应**：

    WebUI（AccountPage.tsx，按出现位置）
      基本资料 → 权限范围 → 修改密码 → 多账号 → 客户端连接密钥 → 外观
              → 登录状态 → 管理

    鸿蒙（改前）
      ProfileSection(基本资料+权限范围) → 多账号 → 外观 → 系统通知
              → 密钥 → SecuritySection(修改密码+退出) → 管理

⇒ 三处实质差异：
  ① **「修改密码」与「登录状态」被焊成一个 `SecuritySection`**
     —— WebUI 那边它们是**两个独立 `<section>`**，中间还夹着三段。
     顺序错位的**根因就是这一处**：焊在一起就没法插东西进去。
  ② 「外观」被排到「密钥」**之前**（WebUI 是密钥在前）。
  ③ 「多账号」在「修改密码」之后、而不是之前。

## 改动

· `SecuritySection` → 拆成 `PasswordSection` + `LoginSection`（各带自己的圆角卡）。
· 顺序改成与 WebUI 逐段相同。

## 「系统通知」保留，但**标明它是鸿蒙独有**

`PushSection`（HarmonyOS Push Kit：新邮件由系统弹通知、点通知直达）
在 WebUI 侧**没有对应物** —— 全仓 grep「推送/通知设置」为 0 处。
浏览器里没有等价能力，所以**这不是分叉，是平台差异**。
已就地写明理由，并把它放在外观之后、登录状态之前（与"账号自身"那几段分开）。

★ 这类"我方多一段"的情况，本仓的处理口径是**写清楚它不是漏做的**，
  而不是删掉去凑一致 —— 与 §7.12「有意差异表」同一形状。

## 设备验证（不是只看代码）

    改前:  我的 → 用户名 → … → 修改密码 → 保存 → **多账号 → 外观 → 系统通知 → 密钥 → (改密+退出)**
    改后:  我的 → 用户名 → … → **修改密码 → 多账号 → 客户端连接密钥 → 外观 → 系统通知 → 登录状态 → 管理**

第二屏实测（`uitest dumpLayout` + fling）：
    「多账号 → jianf → 默认 → 删除 → 客户端连接密钥 → 新建 → … → 外观 → 已同步 → 跟随系统」
⇒ 与 WebUI 的 `多账号 → 密钥 → 外观` 逐段一致。进程存活（20970），无新 jscrash。
---
 .../entry/src/main/ets/pages/SettingsPage.ets | 70 +++++++++++++------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/client/harmony/entry/src/main/ets/pages/SettingsPage.ets b/client/harmony/entry/src/main/ets/pages/SettingsPage.ets
index 81bdd18..c110000 100644
--- a/client/harmony/entry/src/main/ets/pages/SettingsPage.ets
+++ b/client/harmony/entry/src/main/ets/pages/SettingsPage.ets
@@ -636,10 +636,11 @@ export struct SettingsPane {
           /* 基本资料 / 权限范围（对齐 WebUI 的前两个 section） */
           this.ProfileSection()
 
-          /*
-           * ── 多账号（对齐 WebUI 的 AccountList section）──
-           */
-          Column() {
+          /* 修改密码 */
+          this.PasswordSection()
+
+          /* 多账号（对齐 WebUI 的 AccountList section） */
+                    Column() {
             Text('多账号').fontSize(14).fontWeight(FontWeight.Bold).fontColor(Theme.textPrimary)
               .width('100%')
             if (this.accounts.length === 0) {
@@ -676,17 +677,23 @@ export struct SettingsPane {
           .attributeModifier(GlassCardModifier.of(this.bgActive))
           .borderRadius(Theme.radiusCard)
 
-          /* 外观（主题 / 壁纸） */
-          this.AppearanceSection()
-
-          /* 系统通知 */
-          this.PushSection()
-
           /* 客户端连接密钥（对齐 WebUI 的 KeyPanel section） */
           this.KeySection()
 
-          /* 修改密码 + 退出登录（对齐 WebUI 的「修改密码」与「登录状态」两段） */
-          this.SecuritySection()
+          /* 外观（主题 / 壁纸） */
+          this.AppearanceSection()
+
+          /*
+           * 系统通知 —— **鸿蒙独有**（WebUI 侧没有这一段的对应物）。
+           *
+           * 理由：推送是**平台能力**（HarmonyOS Push Kit / 通知直达），
+           * WebUI 跑在浏览器里、没有等价物。这不是分叉，是平台差异。
+           * 位置放在外观之后、登录状态之前 —— 与"账号自身"那几段分开。
+           */
+          this.PushSection()
+
+          /* 登录状态（退出登录） */
+          this.LoginSection()
 
           /* 管理入口（仅管理员） */
           this.AdminSection()
@@ -1110,8 +1117,15 @@ export struct SettingsPane {
    * 这里合并为一片连续区域，因为两者都是「账号自身」且都是低频动作 ——
    * 但**内容与顺序**与 WebUI 一致：先密码、后退出。
    */
+  /**
+   * 修改密码（对齐 WebUI `AccountPage` 的「修改密码」section）。
+   *
+   * ★ 2026-09-21 从 `SecuritySection` 拆出来 —— WebUI 那边「修改密码」与
+   *   「登录状态」是**两个独立的 <section>**，中间还夹着多账号/密钥/外观。
+   *   我们原来把两者焊成一个，于是顺序上就没法对齐了（这是顺序错位的根因）。
+   */
   @Builder
-  SecuritySection() {
+  PasswordSection() {
     Column() {
       Row() {
         AmIcon({ iconName: 'lock', iconSize: 16, iconColor: Theme.textMuted })
@@ -1156,15 +1170,29 @@ export struct SettingsPane {
         .enabled(!this.pwBusy)
         .onClick(() => { this.changePassword(); })
 
-      Divider().color(Theme.border).margin({ top: 16, bottom: 14 })
+    }
+    .width('100%').alignItems(HorizontalAlign.Start)
+    .padding(16).margin({ top: 8 })
+    .attributeModifier(GlassCardModifier.of(this.bgActive))
+    .borderRadius(Theme.radiusCard)
+  }
 
-      /*
-       * 退出登录。
-       *
-       * WebUI 把它放在「我的」页底部（`AccountPage` 的「登录状态」section），
-       * 理由原话：「低频且不可逆的动作，与密码、密钥同属『账号自身』」；
-       * 「窄屏下这也是唯一的退出口」。
-       */
+  /**
+   * 登录状态（退出登录）—— 对齐 WebUI `AccountPage` 的「登录状态」section。
+   *
+   * ★ 2026-09-21 从 `SecuritySection` 拆出来，并**挪到外观之后**：
+   *   WebUI 的段顺序是
+   *     基本资料 → 权限范围 → 修改密码 → 多账号 → 密钥 → 外观 → 登录状态 → 管理
+   *   我们原来是「… 密钥 → (改密+退出) → 管理」—— 既少了多账号/外观的位置，
+   *   又把两个独立 section 焊在一起（见 `PasswordSection` 的注释）。
+   *
+   * WebUI 把它放倒数第二的理由（原文）：「低频且不可逆的动作，与密码、密钥
+   * 同属『账号自身』」；「窄屏下这也是唯一的退出口」——所以必须**能滚到**，
+   * 靠的是外层 Scroll 的 `.align(Alignment.Top)` + `contentEndOffset`。
+   */
+  @Builder
+  LoginSection() {
+    Column() {
       Text('登录状态').fontSize(11).fontColor(Theme.textMuted).width('100%')
       Button() {
         Row() {