iter(g105): 标签页支持可关闭页签

packages/skin/ui/src/tabs.ts

@@ -1,14 +1,14 @@
 import { effect, h } from '@ui-arch/frame';
-import type { TabsProps } from './types.js';
+import type { TabItem, TabsProps } from './types.js';
 
-/*** 标签页：active 信号双向绑定 + 滑动指示条 + 方向键环形导航；内容由调用方按 active 派生 ***/
+/*** 标签页：active 信号双向绑定 + 滑动指示条 + 方向键环形导航；closable 页签带关闭按钮（聚焦后 Delete 亦可关） ***/
 export function tabs(props: TabsProps): HTMLElement {
   // —— 状态集中声明 ——
-  const buttons: HTMLButtonElement[] = []; // 页签按钮，顺序与 tabs 一致
+  const buttons: HTMLButtonElement[] = []; // 页签按钮，顺序与 tabs 一致（键盘导航与激活态都按它走）
   const indicator = h('span', { class: 'ua-tabs-indicator' });
   const head = h('div', { class: 'ua-tabs-head', role: 'tablist', 'aria-label': '标签页' }, indicator);
 
-  /*** 同步激活态与指示条几何位置 ***/
+  /*** 同步激活态与指示条几何位置：量外壳而非按钮，可关闭页签的指示条才会盖住关闭按钮 ***/
   const sync = () => {
     const value = props.active?.();
     for (const btn of buttons) {
@@ -16,13 +16,19 @@ export function tabs(props: TabsProps): HTMLElement {
       btn.classList.toggle('ua-tab-active', on);
       btn.setAttribute('aria-selected', String(on));
       btn.tabIndex = on ? 0 : -1; // 漫游 tabindex：仅激活页签可 Tab 聚焦
-      if (on) {
-        indicator.style.left = `${btn.offsetLeft}px`;
-        indicator.style.width = `${btn.offsetWidth}px`;
-      }
+      if (!on) continue; // 卫语句：只有激活项需要摆指示条
+      const wrap = btn.parentElement ?? btn;
+      indicator.style.left = `${wrap.offsetLeft}px`;
+      indicator.style.width = `${wrap.offsetWidth}px`;
     }
   };
 
+  /*** 关闭页签：只回调，数据由调用方移除后重绘，组件不自己改 tabs 数组 ***/
+  const closeTab = (tab: TabItem, e: Event): void => {
+    e.stopPropagation(); // 关闭按钮是页签按钮的兄弟节点，显式阻断以防外壳级监听误触
+    props.onClose?.(tab.value);
+  };
+
   for (const tab of props.tabs) {
     const btn = h('button', { class: 'ua-tab', role: 'tab', type: 'button' }, tab.label) as HTMLButtonElement;
     btn.dataset.value = tab.value;
@@ -33,8 +39,15 @@ export function tabs(props: TabsProps): HTMLElement {
       if (props.active) props.active(tab.value); // 用户切换写回信号
       props.onChange?.(tab.value);
     });
+    btn.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key !== 'Delete' || !tab.closable) return; // 卫语句：只接管可关闭页签的 Delete
+      e.preventDefault();
+      props.onClose?.(tab.value); // 键盘等价：不必伸手去点 ×
+    });
+    const wrap = h('span', { class: 'ua-tab-item', role: 'presentation' }, btn); // 外壳只做布局，tab 语义仍在按钮上
+    if (tab.closable) wrap.append(h('button', { type: 'button', class: 'ua-tab-close', 'aria-label': `关闭 ${tab.label}`, onClick: (e: Event) => closeTab(tab, e) }, '×'));
     buttons.push(btn);
-    head.append(btn);
+    head.append(wrap);
   }
 
   head.addEventListener('keydown', (e: KeyboardEvent) => {

packages/skin/ui/src/types.ts

@@ -324,11 +324,17 @@ export interface ProgressProps {
   variant?: 'default' | 'success' | 'warning' | 'danger'; // 填充语义色；缺省 default（满格自动切 success）
 }
 
+/*** 页签项：通用选项 + 可关闭开关 ***/
+export interface TabItem extends OptionItem {
+  closable?: boolean; // 是否显示关闭按钮（聚焦后 Delete 同样可关）；缺省不可关
+}
+
 /*** 标签页入参 ***/
 export interface TabsProps {
-  tabs: OptionItem[];     // 页签列表
+  tabs: TabItem[];        // 页签列表
   active?: Signal<string>; // 当前激活页签的 value 信号，双向绑定
   onChange?: (value: string) => void; // 切换回调
+  onClose?: (value: string) => void;  // 关闭页签回调：组件不自行移除，凭 value 从数据源里摘掉
 }
 
 /*** 弹窗入参 ***/

packages/skin/ui/ua.manifest.json

@@ -38,7 +38,7 @@
       "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，jumpable 时末尾可输入页码直接跳转，键盘可达；pageSizes 可切每页条数",
       "spinner(props)：加载指示器，size 控制直径",
       "progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
-      "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
+      "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签；页签项 closable 时带关闭按钮（聚焦后 Delete 同样可关），关闭只回调 onClose 由调用方摘数据",
       "stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
       "rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
       "empty(props)：空状态占位，title/description 可选，action 放操作区",
@@ -1175,9 +1175,9 @@
         "props": [
           {
             "n": "tabs",
-            "t": "OptionItem[]",
+            "t": "TabItem[]",
             "r": 1,
-            "d": "页签列表，每项 { value, label }"
+            "d": "页签列表，每项 { value, label, disabled?, closable? }"
           },
           {
             "n": "active",
@@ -1189,13 +1189,25 @@
             "t": "(value: string) => void",
             "k": 1,
             "d": "切换回调"
+          },
+          {
+            "n": "onClose",
+            "t": "(value: string) => void",
+            "k": 1,
+            "d": "关闭页签回调：组件不自行移除，凭 value 从数据源里摘掉后重绘"
+          },
+          {
+            "n": "closable",
+            "t": "boolean",
+            "d": "页签项上的开关：true 时渲染关闭按钮（×），关闭按钮不进 Tab 序但可用鼠标点；缺省不可关"
           }
         ],
-        "example": "const tab = signal('a'); tabs({ tabs: [{ value: 'a', label: '概览' }, { value: 'b', label: '明细', disabled: true }], active: tab })",
+        "example": "const tab = signal('a'); tabs({ tabs: [{ value: 'a', label: '概览', closable: true }, { value: 'b', label: '明细', disabled: true }], active: tab, onClose: (v) => toast.info(`关闭 ${v}`) })",
         "steps": [
           "创建信号 tab = signal('a')，初值为默认页签",
           "tabs 只渲染页签头；页签内容用响应式函数按信号切换，如 () => tab() === 'a' ? panelA : panelB",
           "点击或方向键（←→ 环形）、Home/End（直达首/末页签）切换，滑动指示条自动跟随；disabled: true 的页签置灰不可点",
+          "需要可关闭页签时给该项加 closable: true，× 或聚焦后按 Delete 触发 onClose(value)；组件不改数据源，调用方从数组里摘掉该项再重绘",
           "键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签"
         ]
       },

packages/skin/ui/ui.css

@@ -1461,6 +1461,47 @@ button.ua-step-dot:hover {
   color: var(--ua-color-accent);
   font-weight: 500;
 }
+.ua-tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.ua-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: -4px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+}
+.ua-tab-item:hover .ua-tab-close,
+.ua-tab-item:focus-within .ua-tab-close {
+  opacity: 1;
+}
+.ua-tab-close:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--ua-color-accent);
+  outline-offset: 1px;
+}
+.ua-tab-close:hover {
+  color: var(--ua-color-text);
+  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+}
+@media (hover: none) {
+  .ua-tab-close {
+    opacity: 1;
+  }
+}
 .ua-tabs-indicator {
   position: absolute;
   bottom: -1px;