From c66bcf35dad858b4027c53e5c9e2fdc3367e3a0f Mon Sep 17 00:00:00 2001
From: HIsheR <shawn1440982358@163.com>
Date: Mon, 26 Oct 2026 13:58:22 +0800
Subject: [PATCH] =?UTF-8?q?iter(g106):=20=E6=BB=9A=E5=8A=A8=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E6=94=B9=E4=B8=BA=E5=8D=B8=E8=BD=BD=E8=87=AA=E6=B8=85?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .ua/backlog.json                |  8 ++++++++
 packages/skin/ui/src/affix.ts   |  5 ++---
 packages/skin/ui/src/anchor.ts  |  5 ++---
 packages/skin/ui/src/backTop.ts |  5 ++---
 packages/skin/ui/src/tour.ts    |  4 ++--
 packages/skin/ui/src/watch.ts   | 15 +++++++++++++++
 6 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 packages/skin/ui/src/watch.ts

diff --git a/.ua/backlog.json b/.ua/backlog.json
index 993047a..3ae2d93 100644
--- a/.ua/backlog.json
+++ b/.ua/backlog.json
@@ -1204,6 +1204,14 @@
       "acceptance": "TabItem 新增 closable（缺省不可关），渲染 × 关闭按钮（aria-label=关闭 <label>），点击或页签聚焦后按 Delete 触发 onClose(value)；指示条改为量外壳宽度，可关闭页签的高亮能盖住 ×；触摸设备（hover: none）常显 ×；表单化入参不变（closable 在项上），文档参数表/手把手/示例与演示（三张可关订单页签，关完显示空态）同步；npm run check 全绿",
       "notes": "自补：组件可用性；关闭只回调不改数据，符合受控约定",
       "status": "done"
+    },
+    {
+      "id": "g106",
+      "title": "滚动监听改为卸载自清理",
+      "motivation": "affix / backTop / anchor / tour 四个组件都是「挂 window 或容器的 scroll+resize 监听，从不摘」：单页应用里每次进页面重建组件就多一根监听，旧闭包连同旧 DOM 一起被 window 拽住，切十次页面就十份空转的 sync 在滚动时跑",
+      "acceptance": "新增 watch.ts 的 watchViewport(root, host, handler)：滚动 / 缩放时若 root 已脱离文档就一次性摘掉两个监听并停止回调，否则转交 handler 并首帧同步一次；四个组件改用该助手，行为与原来一致（首帧同步保留）；npm run check 全绿",
+      "notes": "自补：一致性与泄漏治理；一处实现四处复用，后续新增长期监听组件照抄",
+      "status": "open"
     }
   ]
 }
diff --git a/packages/skin/ui/src/affix.ts b/packages/skin/ui/src/affix.ts
index af4d08b..5f97684 100644
--- a/packages/skin/ui/src/affix.ts
+++ b/packages/skin/ui/src/affix.ts
@@ -1,5 +1,6 @@
 import { h } from '@ui-arch/frame';
 import type { AffixProps } from './types.js';
+import { watchViewport } from './watch.js';
 
 /*** 固钉：内容滚动越过阈值后转 fixed 贴住视口顶部，外层保留占位高度避免布局跳动 ***/
 export function affix(props: AffixProps, ...children: unknown[]): HTMLElement {
@@ -36,8 +37,6 @@ export function affix(props: AffixProps, ...children: unknown[]): HTMLElement {
     }
   };
 
-  scroller.addEventListener('scroll', sync, { passive: true }); // 被动监听，不阻塞滚动
-  window.addEventListener('resize', sync);                       // 视口变化会改判定与宽度
-  sync(); // 首屏同步一次：刷新时若已滚动到位，直接进入固定态
+  watchViewport(wrap, scroller, sync); // 滚动 / 缩放后重算，节点脱离文档即自摘监听
   return wrap;
 }
diff --git a/packages/skin/ui/src/anchor.ts b/packages/skin/ui/src/anchor.ts
index c485467..0f16bfc 100644
--- a/packages/skin/ui/src/anchor.ts
+++ b/packages/skin/ui/src/anchor.ts
@@ -1,5 +1,6 @@
 import { h } from '@ui-arch/frame';
 import type { AnchorItem, AnchorProps } from './types.js';
+import { watchViewport } from './watch.js';
 
 /*** 锚点导航：竖排区块链接，滚动时高亮当前区块，点击平滑跳转（尊重减少动效偏好） ***/
 export function anchor(props: AnchorProps): HTMLElement {
@@ -70,8 +71,6 @@ export function anchor(props: AnchorProps): HTMLElement {
   }
 
   const host: HTMLElement | Window = scroller ?? window;
-  host.addEventListener('scroll', sync, { passive: true }); // 被动监听：不阻塞滚动
-  window.addEventListener('resize', sync);                  // 视口变化会改变判定线
-  sync(); // 首屏同步一次，刷新后停在中间位置也能高亮正确项
+  watchViewport(root, host, sync); // 滚动 / 缩放后同步高亮，节点脱离文档即自摘监听
   return root;
 }
diff --git a/packages/skin/ui/src/backTop.ts b/packages/skin/ui/src/backTop.ts
index a862708..fba1b41 100644
--- a/packages/skin/ui/src/backTop.ts
+++ b/packages/skin/ui/src/backTop.ts
@@ -1,5 +1,6 @@
 import { h } from '@ui-arch/frame';
 import type { BackTopProps } from './types.js';
+import { watchViewport } from './watch.js';
 
 /*** 返回顶部：滚动越过阈值浮现，环形进度显示已滚比例，点击平滑回顶（尊重减少动效偏好） ***/
 export function backTop(props: BackTopProps = {}): HTMLElement {
@@ -39,8 +40,6 @@ export function backTop(props: BackTopProps = {}): HTMLElement {
     props.onClick?.();
   };
 
-  scroller.addEventListener('scroll', sync, { passive: true }); // 被动监听：不阻塞滚动
-  window.addEventListener('resize', sync);                      // 视口变化会改可滚距离
-  sync(); // 首屏同步一次，避免刷新后停在中间位置却未浮现
+  watchViewport(btn, scroller, sync); // 滚动 / 缩放后同步浮现态，节点脱离文档即自摘监听
   return btn;
 }
diff --git a/packages/skin/ui/src/tour.ts b/packages/skin/ui/src/tour.ts
index f09c4ff..ca4702e 100644
--- a/packages/skin/ui/src/tour.ts
+++ b/packages/skin/ui/src/tour.ts
@@ -3,6 +3,7 @@ import type { Signal } from '@ui-arch/frame';
 import { pushOverlay } from './overlay.js';
 import { button } from './button.js';
 import type { TourHandle, TourProps } from './types.js';
+import { watchViewport } from './watch.js';
 
 /*** 引导漫游：聚光框 + 说明卡逐步指引，聚光用超大 box-shadow 挖洞省掉遮罩层，Esc / 跳过可退出 ***/
 export function tour(props: TourProps): TourHandle {
@@ -84,8 +85,7 @@ export function tour(props: TourProps): TourHandle {
   };
 
   const onViewport = (): void => { if (idx() >= 0) place(); }; // 滚动/缩放后重算位置
-  window.addEventListener('resize', onViewport);
-  window.addEventListener('scroll', onViewport, { passive: true });
+  watchViewport(root, window, onViewport); // 节点脱离文档即自摘监听：引导层反复挂载也不累积
 
   return {
     el: root,
diff --git a/packages/skin/ui/src/watch.ts b/packages/skin/ui/src/watch.ts
new file mode 100644
index 0000000..7cbff24
--- /dev/null
+++ b/packages/skin/ui/src/watch.ts
@@ -0,0 +1,15 @@
+/*** 滚动 / 视口监听：根节点被移出文档后自动摘净监听，避免单页应用里反复挂载累积监听 ***/
+export function watchViewport(root: HTMLElement, host: HTMLElement | Window, handler: () => void): void {
+  // —— 状态集中声明 ——
+  const run = (): void => {
+    if (!root.isConnected) { // 已卸载：一次性摘掉 scroll 与 resize，后续不再进 handler
+      host.removeEventListener('scroll', run);
+      window.removeEventListener('resize', run);
+      return;
+    }
+    handler();
+  };
+  host.addEventListener('scroll', run, { passive: true }); // 被动监听：不阻塞滚动
+  window.addEventListener('resize', run);                  // 视口变化会改判定线与可滚距离
+  handler(); // 首帧同步一次：刷新时停在页面中段也能得到正确状态
+}