iter(g117): 指示条与滑块跟随尺寸重算

packages/skin/ui/src/segmented.ts

@@ -1,5 +1,6 @@
 import { effect, h } from '@ui-arch/frame';
 import type { SegmentedProps } from './types.js';
+import { trackSize } from './watch.js';
 
 /*** 分段控制器：胶囊分段条 + 滑动滑块，value 信号双向绑定，←→/Home/End 环形导航，整组或单项可禁用 ***/
 export function segmented(props: SegmentedProps): HTMLElement {
@@ -59,5 +60,6 @@ export function segmented(props: SegmentedProps): HTMLElement {
 
   effect(sync);
   requestAnimationFrame(sync); // 挂载后再量一次布局，否则滑块宽度为 0
+  trackSize(root, sync); // 尺寸变化后重算滑块位置与宽度
   return root;
 }

packages/skin/ui/src/tabs.ts

@@ -1,5 +1,6 @@
 import { effect, h } from '@ui-arch/frame';
 import type { TabItem, TabsProps } from './types.js';
+import { trackSize } from './watch.js';
 
 /*** 标签页：active 信号双向绑定 + 滑动指示条 + 方向键环形导航；closable 页签带关闭按钮（聚焦后 Delete 亦可关） ***/
 export function tabs(props: TabsProps): HTMLElement {
@@ -63,7 +64,9 @@ export function tabs(props: TabsProps): HTMLElement {
     next?.click();
   });
 
+  const root = h('div', { class: 'ua-tabs' }, head);
   effect(sync);
   requestAnimationFrame(sync); // 挂载后再量一次布局，否则指示条宽度为 0
-  return h('div', { class: 'ua-tabs' }, head);
+  trackSize(root, sync); // 容器变宽 / 窗口缩放后重算，指示条不会停在旧宽度
+  return root;
 }

packages/skin/ui/src/watch.ts

@@ -13,3 +13,13 @@ export function watchViewport(root: HTMLElement, host: HTMLElement | Window, han
   window.addEventListener('resize', run);                  // 视口变化会改判定线与可滚距离
   handler(); // 首帧同步一次：刷新时停在页面中段也能得到正确状态
 }
+
+/*** 尺寸监听：根节点尺寸变化时重算（视口缩放、侧栏展开、字体变大），脱离文档即自断，不用手动销毁 ***/
+export function trackSize(root: HTMLElement, handler: () => void): void {
+  if (typeof ResizeObserver === 'undefined') { window.addEventListener('resize', handler); return; } // 老环境回落：至少跟上视口变化
+  const ro = new ResizeObserver(() => {
+    if (!root.isConnected) { ro.disconnect(); return; } // 已卸载：断开观察，避免闭包被观察器拽住
+    handler();
+  });
+  ro.observe(root);
+}