iter(g143): 页签栏支持右侧操作区

packages/skin/ui/src/tabs.ts

@@ -64,7 +64,9 @@ export function tabs(props: TabsProps): HTMLElement {
     next?.click();
   });
 
-  const root = h('div', { class: 'ua-tabs' }, head);
+  const extra = props.extra ? h('div', { class: 'ua-tabs-extra' }, props.extra) : null; // 右侧操作区：与页签同一行
+  const bar = extra ? h('div', { class: 'ua-tabs-bar' }, head, extra) : head; // 有操作区才包一层，无操作区结构不变
+  const root = h('div', { class: 'ua-tabs' }, bar);
   effect(sync);
   requestAnimationFrame(sync); // 挂载后再量一次布局，否则指示条宽度为 0
   trackSize(root, sync); // 容器变宽 / 窗口缩放后重算，指示条不会停在旧宽度

packages/skin/ui/src/types.ts

@@ -347,6 +347,7 @@ export interface TabsProps {
   active?: Signal<string>; // 当前激活页签的 value 信号，双向绑定
   onChange?: (value: string) => void; // 切换回调
   onClose?: (value: string) => void;  // 关闭页签回调：组件不自行移除，凭 value 从数据源里摘掉
+  extra?: unknown;        // 页签栏右侧操作区内容（按钮 / 链接）；缺省不渲染，页签栏结构不变
 }
 
 /*** 弹窗入参 ***/

packages/skin/ui/ua.manifest.json

@@ -1256,6 +1256,11 @@
             "k": 1,
             "d": "关闭页签回调：组件不自行移除，凭 value 从数据源里摘掉后重绘"
           },
+          {
+            "n": "extra",
+            "t": "unknown",
+            "d": "页签栏右侧操作区内容（按钮 / 链接）：与页签同一行、共用一条分隔线；缺省不渲染且页签栏结构不变"
+          },
           {
             "n": "closable",
             "t": "boolean",
@@ -1268,7 +1273,8 @@
           "tabs 只渲染页签头；页签内容用响应式函数按信号切换，如 () => tab() === 'a' ? panelA : panelB",
           "点击或方向键（←→ 环形）、Home/End（直达首/末页签）切换，滑动指示条自动跟随；disabled: true 的页签置灰不可点",
           "需要可关闭页签时给该项加 closable: true，× 或聚焦后按 Delete 触发 onClose(value)；组件不改数据源，调用方从数组里摘掉该项再重绘",
-          "键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签"
+          "键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签",
+          "页签栏右侧要放「新建 / 设置」这类操作就传 extra（按钮或链接）：它与页签同一行共用一条分隔线，不传时 DOM 结构保持不变"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -4419,3 +4419,23 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   font-size: var(--ua-font-size-sm);
   user-select: none;
 }
+
+/* —— 页签栏右侧操作区：与页签同一行，分隔线由整条 bar 承担 —— */
+.ua-tabs-bar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ua-space-3);
+  border-bottom: 1px solid var(--ua-color-border);
+}
+.ua-tabs-bar .ua-tabs-head {
+  flex: 1 1 auto;
+  border-bottom: 0; /* 线移到 bar 上，操作区也和页签栏同一条线 */
+}
+.ua-tabs-extra {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--ua-space-2);
+  padding-bottom: var(--ua-space-1);
+}