diff --git a/packages/opendesign/src/tab/OTab.vue b/packages/opendesign/src/tab/OTab.vue
index f782e8933e23a6be6a4112ded7d161bd8715a922..c19655b7b448625f90b86634ef01df2cd4458bd2 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 76e44f95f9af941a0669c1cb0922d8318ac5b470..ca84d16491f5607f38f18206aa8b686002f4d29b 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/__docs__/__case__/AddDel.vue b/packages/opendesign/src/tab/__docs__/__case__/AddDel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54a2032becefe6533e0cc462b91939ed9a61f570
--- /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 0000000000000000000000000000000000000000..3cb46fdc86fa41eddbd5f754c7a4e8f02a5df354
--- /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 0000000000000000000000000000000000000000..13014ea30e1a2388666d0d7c209c2006823defc6
--- /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 0000000000000000000000000000000000000000..b854677d8e91b64da7484163131d5d53dd25d6c4
--- /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 0000000000000000000000000000000000000000..9fb3927f0a6201fd57f1d00d57e82858548c10ad
--- /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/style/style.scss b/packages/opendesign/src/tab/style/style.scss
index d8bac9f1ffef07407df1047dec5452be1f05e01d..5a7cffc5bbafa5a9166a8af31185b741edda086e 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 {
@@ -64,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;
diff --git a/packages/opendesign/src/tab/types.ts b/packages/opendesign/src/tab/types.ts
index 205f929d401086d6064903fd3c9e9481e07f6400..acd3f088813e58a411a61da02c11010fe2e1b746 100644
--- a/packages/opendesign/src/tab/types.ts
+++ b/packages/opendesign/src/tab/types.ts
@@ -4,58 +4,68 @@ 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值
-   * 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] as PropType<string | any[]>,
+    type: [String, Array, Object] as PropType<ClassT>,
     default: undefined,
   },
 };
@@ -64,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,