From 781405de1e905012cb558ff3fe59b2fd573ecd2e Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Fri, 24 Oct 2025 11:16:57 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(tab):=20=E4=BF=AE=E5=A4=8Dprefix?=
 =?UTF-8?q?=E6=88=96suffix=E6=8F=92=E6=A7=BD=E5=A2=9E=E5=8A=A0=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=97=B6=EF=BC=8Ctab-navs=E6=BA=A2=E5=87=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9B=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E8=AE=A1=E7=AE=97=E7=9B=91=E5=90=AC=E5=B9=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tab/OTab.vue              |  4 ++--
 .../opendesign/src/tab/__demo__/TabScroll.vue     | 15 +++++++++++++--
 packages/opendesign/src/tab/style/style.scss      |  4 +++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/opendesign/src/tab/OTab.vue b/packages/opendesign/src/tab/OTab.vue
index f782e893..c19655b7 100644
--- a/packages/opendesign/src/tab/OTab.vue
+++ b/packages/opendesign/src/tab/OTab.vue
@@ -178,7 +178,7 @@ const navScroll = (to: 'prev' | 'next') => {
         props.headerClass,
       ]"
     >
-      <div v-if="$slots.prefix" class="o-tab-head-prefix" v-on-resize="onHeadResize">
+      <div v-if="$slots.prefix" class="o-tab-head-prefix">
         <slot name="prefix"></slot>
       </div>
       <div class="o-tab-navs">
@@ -203,7 +203,7 @@ const navScroll = (to: 'prev' | 'next') => {
           <IconAdd />
         </div>
       </div>
-      <div v-if="$slots.suffix" class="o-tab-head-suffix" v-on-resize="onHeadResize">
+      <div v-if="$slots.suffix" class="o-tab-head-suffix">
         <slot name="suffix"></slot>
       </div>
     </div>
diff --git a/packages/opendesign/src/tab/__demo__/TabScroll.vue b/packages/opendesign/src/tab/__demo__/TabScroll.vue
index 76e44f95..ca84d164 100644
--- a/packages/opendesign/src/tab/__demo__/TabScroll.vue
+++ b/packages/opendesign/src/tab/__demo__/TabScroll.vue
@@ -35,7 +35,7 @@ const changeLength = () => {
   if (cnt % 2) {
     tabList[tabList.length - 1].label = 'This is a very very very very very very very very long Text';
     tabList.push({
-      id: 9,
+      id: 9..toString(),
       label: 'item 9',
       content: 'content 9',
     });
@@ -43,12 +43,23 @@ const changeLength = () => {
     tabList[tabList.length - 1].label = 'Text';
   }
 };
+const prefix = ref('');
+const suffix = ref('');
+const addPrefixOrSuffix = () => {
+  prefix.value += 'prefix ';
+  suffix.value += 'suffix ';
+};
 </script>
 <template>
   <h4>scroll</h4>
-  <div><button @click="changeLength">change name length</button></div>
+  <div class="col">
+    <button @click="changeLength">change name length</button>
+    <button @click="addPrefixOrSuffix">change prefix and suffix</button>
+  </div>
   <div class="sec">
     <OTab v-model="activeTab3" addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
+      <template #prefix>{{ prefix }}</template>
+      <template #suffix>{{ suffix }}</template>
       <OTabPane v-for="(item, idx) in tabList" :key="item.id" :value="item.id" class="pane" :label="item.label" :closable="idx > 1">
         content {{ item.content }}
       </OTabPane>
diff --git a/packages/opendesign/src/tab/style/style.scss b/packages/opendesign/src/tab/style/style.scss
index d8bac9f1..59b0f814 100644
--- a/packages/opendesign/src/tab/style/style.scss
+++ b/packages/opendesign/src/tab/style/style.scss
@@ -4,7 +4,9 @@
   display: flex;
   align-items: center;
   position: relative;
-  width: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0px;
   justify-content: var(--tab-nav-justify, center);
 }
 .o-tab-head {
-- 
Gitee


From cfe7c26e4831e45e92081c1551a9b04a415d0d3f Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Sat, 25 Oct 2025 08:50:08 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix(tab):=20=E4=BF=AE=E5=A4=8Dtab-nav?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E4=B8=8D=E5=90=8C=E6=97=B6=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E5=AF=B9=E9=BD=90=E6=A8=AA=E5=90=91=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E7=BA=BF=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tab/style/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/tab/style/style.scss b/packages/opendesign/src/tab/style/style.scss
index 59b0f814..5a7cffc5 100644
--- a/packages/opendesign/src/tab/style/style.scss
+++ b/packages/opendesign/src/tab/style/style.scss
@@ -66,11 +66,11 @@
 }
 
 .o-tab-nav-list {
-  display: inline-block;
+  display: inline-flex;
   white-space: nowrap;
 }
 .o-tab-nav {
-  display: inline-flex;
+  display: flex;
   flex-shrink: 0;
   align-items: center;
   cursor: pointer;
-- 
Gitee


From 2281b547e71b7af9eac9caf9b3c28f234c6a63af Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Sat, 25 Oct 2025 09:52:48 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(tab):=20=E4=BC=98=E5=8C=96headerClass?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=B1=BB=E5=9E=8B=E5=A3=B0=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/tab/types.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/opendesign/src/tab/types.ts b/packages/opendesign/src/tab/types.ts
index 205f929d..fd9a21f4 100644
--- a/packages/opendesign/src/tab/types.ts
+++ b/packages/opendesign/src/tab/types.ts
@@ -4,6 +4,7 @@ import type { SizeT } from '../_utils/types';
 export const TabVariantTypes = ['solid', 'text'] as const;
 export type TabVariantT = (typeof TabVariantTypes)[number];
 
+type ClassT = string | Record<string, boolean> | ClassT[];
 export const tabProps = {
   /**
    * tab选中的nav值
@@ -55,7 +56,7 @@ export const tabProps = {
    * 头部是否固定
    */
   headerClass: {
-    type: [String, Array] as PropType<string | any[]>,
+    type: [String, Array, Object] as PropType<ClassT>,
     default: undefined,
   },
 };
-- 
Gitee


From b91891c3729bd96fa3023eb497505e6473033306 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Sat, 25 Oct 2025 10:06:27 +0800
Subject: [PATCH 4/4] =?UTF-8?q?doc(tab):=20=E6=96=B0=E5=A2=9E=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/tab/__docs__/__case__/AddDel.vue      | 44 +++++++++++++++
 .../src/tab/__docs__/__case__/CustomHead.vue  | 25 +++++++++
 .../src/tab/__docs__/__case__/TabUsage.vue    | 40 ++++++++++++++
 .../src/tab/__docs__/index.en-US.md           | 17 ++++++
 .../src/tab/__docs__/index.zh-CN.md           | 17 ++++++
 packages/opendesign/src/tab/types.ts          | 53 +++++++++++++------
 6 files changed, 180 insertions(+), 16 deletions(-)
 create mode 100644 packages/opendesign/src/tab/__docs__/__case__/AddDel.vue
 create mode 100644 packages/opendesign/src/tab/__docs__/__case__/CustomHead.vue
 create mode 100644 packages/opendesign/src/tab/__docs__/__case__/TabUsage.vue
 create mode 100644 packages/opendesign/src/tab/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/tab/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/tab/__docs__/__case__/AddDel.vue b/packages/opendesign/src/tab/__docs__/__case__/AddDel.vue
new file mode 100644
index 00000000..54a2032b
--- /dev/null
+++ b/packages/opendesign/src/tab/__docs__/__case__/AddDel.vue
@@ -0,0 +1,44 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 增加删除
+
+通过 `addable` 或 `closable` 属性分别开启增加或关闭功能，并通过 `add` 及 `delete` 事件实现增删逻辑。
+
+<!-- en-US -->
+
+### Adding and Deleting
+
+Enable the adding or closing functionality via the `addable` or `closable` properties respectively,
+and implement the addition and deletion logic through the `add` and `delete` events.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { OTab, OTabPane } from '@opensig/opendesign';
+
+const tabs = reactive([
+  { label: 'Tab 1', value: '1', content: 'Tab 1 Content' },
+  { label: 'Tab 2', value: '2', content: 'Tab 2 Content' },
+  { label: 'Tab 3', value: '3', content: 'Tab 3 Content' },
+]);
+
+let count = tabs.length;
+const addTab = () => {
+  count += 1;
+  tabs.push({
+    label: `Tab ${count}`,
+    value: `${count}`,
+    content: `Tab ${count} Content`,
+  });
+};
+
+const delTab = (val: string | number) => {
+  const index = tabs.findIndex((item) => item.value === val);
+  tabs.splice(index, 1);
+};
+</script>
+<template>
+  <OTab addable @add="addTab" @delTab="delTab">
+    <OTabPane v-for="tab in tabs" :key="tab.value" :label="tab.label" :value="tab.value" closable>{{ tab.content }}</OTabPane>
+  </OTab>
+</template>
diff --git a/packages/opendesign/src/tab/__docs__/__case__/CustomHead.vue b/packages/opendesign/src/tab/__docs__/__case__/CustomHead.vue
new file mode 100644
index 00000000..3cb46fdc
--- /dev/null
+++ b/packages/opendesign/src/tab/__docs__/__case__/CustomHead.vue
@@ -0,0 +1,25 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 自定义页签头
+
+<!-- en-US -->
+
+### Custom Tab Header
+</docs>
+<script setup lang="ts">
+import { OTab, OTabPane, OIcon, OIconSearch } from '@opensig/opendesign';
+</script>
+<template>
+  <OTab>
+    <template #prefix>Prefix</template>
+    <template #suffix>Suffix</template>
+    <OTabPane>
+      <template #nav><OIcon :icon="OIconSearch" />Search</template>
+      <div>Search Content</div>
+    </OTabPane>
+    <OTabPane label="Tab 2">
+      <div>Tab 2 Content</div>
+    </OTabPane>
+  </OTab>
+</template>
diff --git a/packages/opendesign/src/tab/__docs__/__case__/TabUsage.vue b/packages/opendesign/src/tab/__docs__/__case__/TabUsage.vue
new file mode 100644
index 00000000..13014ea3
--- /dev/null
+++ b/packages/opendesign/src/tab/__docs__/__case__/TabUsage.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+<!-- en-US -->
+
+## Usage
+</docs>
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  variant: {
+    type: 'list',
+    list: ['text', 'solid'],
+    default: 'text',
+  },
+  size: {
+    type: 'list',
+    list: ['small', 'medium', 'large'],
+    default: 'medium',
+  },
+  line: {
+    type: 'boolean',
+    default: true,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => `
+<OTab ${propsToAttrStr(props)}>
+  <OTabPane label="Tab 1">Tab content 1</OTabPane>
+  <OTabPane label="Tab 2">Tab content 2</OTabPane>
+  <OTabPane label="Tab 3">Tab content 3</OTabPane>
+</OTab>
+`;
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/tab/__docs__/index.en-US.md b/packages/opendesign/src/tab/__docs__/index.en-US.md
new file mode 100644
index 00000000..b854677d
--- /dev/null
+++ b/packages/opendesign/src/tab/__docs__/index.en-US.md
@@ -0,0 +1,17 @@
+---
+sidebar: OTab
+kind: nav
+---
+
+# OTab
+
+## Demo
+
+<!-- @usage TabUsage -->
+<!-- @case AddDel -->
+<!-- @case CustomHead -->
+
+## API
+
+<!-- @api OTab -->
+<!-- @api OTabPane -->
diff --git a/packages/opendesign/src/tab/__docs__/index.zh-CN.md b/packages/opendesign/src/tab/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..9fb3927f
--- /dev/null
+++ b/packages/opendesign/src/tab/__docs__/index.zh-CN.md
@@ -0,0 +1,17 @@
+---
+sidebar: OTab 页签
+kind: nav
+---
+
+# OTab 页签
+
+## 示例
+
+<!-- @usage TabUsage -->
+<!-- @case AddDel -->
+<!-- @case CustomHead -->
+
+## API
+
+<!-- @api OTab -->
+<!-- @api OTabPane -->
diff --git a/packages/opendesign/src/tab/types.ts b/packages/opendesign/src/tab/types.ts
index fd9a21f4..acd3f088 100644
--- a/packages/opendesign/src/tab/types.ts
+++ b/packages/opendesign/src/tab/types.ts
@@ -7,53 +7,62 @@ export type TabVariantT = (typeof TabVariantTypes)[number];
 type ClassT = string | Record<string, boolean> | ClassT[];
 export const tabProps = {
   /**
-   * tab选中的nav值
-   * v-model
+   * @zh-CN 选中页签值 v-model
+   * @en-US Selected tab value v-model
    */
   modelValue: {
     type: [String, Number],
     default: undefined,
   },
   /**
-   * 类型 TabVariantT
+   * @zh-CN 页签类型
+   * @en-US Tab variant
+   * @default 'text'
    */
   variant: {
     type: String as PropType<TabVariantT>,
     default: 'text',
   },
   /**
-   * 大小 SizeT
+   * @zh-CN 页签尺寸
+   * @en-US Tab size
    */
   size: {
     type: String as PropType<SizeT>,
   },
   /**
-   * 是否激活时再加载
+   * @zh-CN 是否首次激活后再渲染
+   * @en-US Whether to render the tab content after the first activation
    */
   lazy: {
     type: Boolean,
   },
   /**
-   * 是否可以添加页签
+   * @zh-CN 是否可添加页签
+   * @en-US Whether tabs can be added
    */
   addable: {
     type: Boolean,
   },
   /**
-   * 不激活新添加页签
+   * @zh-CN 是否激活新添加的页签
+   * @en-US Whether to activate the newly added tab
    */
   addInactive: {
     type: Boolean,
   },
   /**
-   * 是否展示nav线
+   * @zh-CN 是否展示nav线
+   * @en-US Whether to show the nav line
+   * @default true
    */
   line: {
     type: Boolean,
     default: true,
   },
   /**
-   * 头部是否固定
+   * @zh-CN 头部自定义样式类名
+   * @en-US Header custom style class name
    */
   headerClass: {
     type: [String, Array, Object] as PropType<ClassT>,
@@ -65,49 +74,61 @@ export type TabPropsT = ExtractPropTypes<typeof tabProps>;
 
 export const tabPaneProps = {
   /**
-   * 页签项的key
+   * @zh-CN 页签值
+   * @en-US Tab value
    */
   value: {
     type: [String, Number],
     default: undefined,
   },
   /**
-   * 页签项的文本，如果不传，使用nav插槽或者value
+   * @zh-CN 页签标题
+   * @en-US Tab title
    */
   label: {
     type: String,
     default: undefined,
   },
   /**
-   * 页签切换时过渡动画
+   * @zh-CN 页签切换时过渡动画
+   * @en-US Transition animation for tab switching
+   * @default 'o-fade-in'
    */
   transition: {
     type: String,
     default: 'o-fade-in',
   },
   /**
-   * 是否禁用选中该页签
+   * @zh-CN 是否禁用选中该页签
+   * @en-US Whether to disable selecting this tab
+   * @default false
    */
   disabled: {
     type: Boolean,
     default: false,
   },
   /**
-   * 是否可以删除该页签
+   * @zh-CN 是否可以删除该页签
+   * @en-US Whether the tab can be deleted
+   * @default false
    */
   closable: {
     type: Boolean,
     default: false,
   },
   /**
-   * 是否页签首次激活前不渲染页签内容
+   * @zh-CN 是否在首次激活时才渲染页签内容
+   * @en-US Whether to render the tab content only when the tab is first activated
+   * @default false
    */
   lazy: {
     type: Boolean,
     default: false,
   },
   /**
-   * 是否在隐藏时卸载页签内容
+   * @zh-CN 是否在隐藏时卸载页签内容
+   * @en-US Whether to unmount the tab content when hidden
+   * @default false
    */
   unmountOnHide: {
     type: Boolean,
-- 
Gitee