diff --git a/packages/opendesign/src/_utils/is.ts b/packages/opendesign/src/_utils/is.ts
index 305b6ca7efc60d32b1dae4b94ce39c149569dd0f..bb94071d72ff1126dd893864954d040d7954ace0 100644
--- a/packages/opendesign/src/_utils/is.ts
+++ b/packages/opendesign/src/_utils/is.ts
@@ -32,7 +32,7 @@ export function isEmptyArray(val: unknown): val is Array<any> {
   return isArray(val) && val.length === 0;
 }
 
-export function isArrayEqual(arr1: Array<any>, arr2: Array<any>): boolean {
+export function isArrayEqual(arr1: Array<any>, arr2: Array<any>, order = false): boolean {
   if (!isArray(arr1) || !isArray(arr2)) {
     return false;
   }
@@ -41,9 +41,18 @@ export function isArrayEqual(arr1: Array<any>, arr2: Array<any>): boolean {
     return false;
   }
 
-  for (let i = 0; i < len; i++) {
-    if (!arr2.includes(arr1[i])) {
-      return false;
+  if (order) {
+    for (let i = 0; i < len; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+  } else {
+    const arr2Set = new Set(arr2);
+    for (let i = 0; i < len; i++) {
+      if (!arr2Set.has(arr1[i])) {
+        return false;
+      }
     }
   }
 
diff --git a/packages/opendesign/src/_utils/vue-utils.ts b/packages/opendesign/src/_utils/vue-utils.ts
index f1e33db4482a2827726a5373dfecfeb98fcdb616..0f082373d1eec58e0354817a21fe49ada3c9bef2 100644
--- a/packages/opendesign/src/_utils/vue-utils.ts
+++ b/packages/opendesign/src/_utils/vue-utils.ts
@@ -1,5 +1,25 @@
-import { Component, onMounted, ref, Slots, Slot, VNode, VNodeTypes, Comment, ComponentPublicInstance, watchEffect, Ref, isRef, watch } from 'vue';
-import { isArray } from './is';
+import {
+  type Component,
+  onMounted,
+  ref,
+  Slots,
+  type Slot,
+  VNode,
+  VNodeTypes,
+  Comment,
+  ComponentPublicInstance,
+  Ref,
+  isRef,
+  watch,
+  isVNode,
+  type VNodeNormalizedChildren,
+  type ComponentInternalInstance,
+  shallowRef,
+  nextTick,
+  getCurrentInstance,
+  onBeforeUnmount,
+} from 'vue';
+import { isArray, isArrayEqual, isString } from './is';
 import { isHtmlElement } from './dom';
 import { log } from './log.ts';
 
@@ -36,7 +56,7 @@ export const isTextElement = (vnode: VNode) => {
  * @param vnode vnode节点
  * @param type 组件信息
  */
-export function isComponent(vnode: VNode, _type?: VNodeTypes): _type is Component {
+export function isComponent(vnode: VNode, _type?: VNodeTypes): _type is Component & { __name?: string; name?: string } {
   return Boolean(vnode && vnode.shapeFlag & ShapeFlags.COMPONENT);
 }
 /**
@@ -170,9 +190,7 @@ const queryElement = (el: string | HTMLElement | null | undefined): HTMLElement
   }
   return null;
 };
-export const resolveHtmlElement = (
-  elRef: Ref<ElementQuery> | ElementQuery
-): Promise<HTMLElement | null> => {
+export const resolveHtmlElement = (elRef: Ref<ElementQuery> | ElementQuery): Promise<HTMLElement | null> => {
   return new Promise((resolve) => {
     const resolveElement = (el: ElementQuery) => {
       if (isComponentPublicInstance(el)) {
@@ -190,7 +208,9 @@ export const resolveHtmlElement = (
             resolveElement(el);
             closeWatch();
           } else {
-            log.warn(`resolveHtmlElement: elRef value is falsy, this might be a bug and could cause the promise to remain pending. Please check elRef.value: ${oldEl} -> ${el}`);
+            log.warn(
+              `resolveHtmlElement: elRef value is falsy, this might be a bug and could cause the promise to remain pending. Please check elRef.value: ${oldEl} -> ${el}`
+            );
           }
         });
       }
@@ -229,3 +249,122 @@ export function filterSlots(slots: Slots, slotNames: { [key: string]: string })
   const r = keys.filter((item) => names.includes(item));
   return r || [];
 }
+
+/** 判断该 VNode 是否由该 type 创建的 */
+export const isTheTypeVNode = (vn: VNode, type: Component | string) => {
+  if (isComponent(vn, vn.type) && isString(type)) {
+    return (vn.type.name || vn.type.__name) === type;
+  }
+  return vn.type === type;
+};
+/** 从虚拟节点树中获取指定组件生成的虚拟节点 */
+export const flatComponentVNode = (vn: VNodeNormalizedChildren | VNode[] | VNode, type: Component | string) => {
+  const res: VNode[] = [];
+  const _vn = isArray(vn) ? vn : [vn];
+
+  _vn.forEach((child) => {
+    if (isArray(child)) {
+      res.push(...flatComponentVNode(child, type));
+      return;
+    }
+    if (!isVNode(child)) {
+      return;
+    }
+    if (isTheTypeVNode(child, type)) {
+      res.push(child);
+    }
+    if (child.component?.subTree) {
+      res.push(...flatComponentVNode(child.component.subTree, type));
+    } else if (child.children) {
+      res.push(...flatComponentVNode(child.children, type));
+    }
+  });
+
+  return res;
+};
+
+const tickJobs = new Set<() => any>();
+/** 对同一个函数只会执行一次 */
+export const runOnceNextTick = (fn: () => any) => {
+  if (tickJobs.size === 0) {
+    nextTick(() => {
+      tickJobs.forEach((item) => item());
+      tickJobs.clear();
+    });
+  }
+  tickJobs.add(fn);
+};
+
+export type PublicChildT<T = {}> = {
+  uid: number;
+  getVNode: () => VNode;
+} & T;
+type ComponentInternalInstanceWithRender = ComponentInternalInstance & {
+  // render 函数可能来源于sfc模板编译，
+  // 也可能 `template` 属性的运行时编译，
+  // 还可能来源于 setup 返回的函数
+  render: () => any;
+};
+
+/**
+ * 按模板顺序维护指定类型后代组件的排序
+ *
+ * @description
+ * 在 Vue 中，当使用 Teleport 或动态注册组件时，子组件的渲染顺序可能与模板书写顺序不一致。
+ * 该 Hook 通过监听 DOM 节点变化，确保子组件始终按模板中的书写顺序排列。
+ *
+ * @param vm - 父组件实例
+ * @param childType - 需要排序的后代组件类型
+ *
+ * @note
+ * - 排序操作会在下一帧执行
+ * - SSR 环境下无法工作（依赖响应式变量触发重渲染）
+ * - 适用于需要严格保持子组件顺序的场景
+ */
+export const useSortedChildren = <T extends PublicChildT>(vm: ComponentInternalInstance, childType: Component | string) => {
+  const children: Record<string, T> = {};
+  const sortedChildren = shallowRef<T[]>([]);
+  const parentVms = new WeakSet<ComponentInternalInstanceWithRender>();
+
+  const sortChildren = () => {
+    const newSortedChildren: T[] = [];
+    flatComponentVNode(vm.subTree, childType).forEach((child) => {
+      if (child.component?.uid && children[child.component.uid]) {
+        newSortedChildren.push(children[child.component.uid]);
+      }
+    });
+    if (!isArrayEqual(sortedChildren.value, newSortedChildren, true)) {
+      sortedChildren.value = newSortedChildren;
+    }
+  };
+
+  const removeChild = (uid: number) => {
+    const child = children[uid];
+    if (child) {
+      runOnceNextTick(sortChildren);
+      delete children[uid];
+    }
+  };
+
+  const addChild = (child: T) => {
+    const childVm = getCurrentInstance()!;
+    const parentVm = childVm.parent as ComponentInternalInstanceWithRender;
+    if (!parentVms.has(parentVm)) {
+      const originRender = parentVm.render;
+      if (originRender) {
+        parentVm.render = function (...args) {
+          runOnceNextTick(sortChildren);
+          return originRender.apply(this, args);
+        };
+      }
+      parentVms.add(parentVm);
+    }
+    onBeforeUnmount(() => {
+      removeChild(child.uid);
+    });
+    children[child.uid] = child;
+    runOnceNextTick(sortChildren);
+  };
+
+  return { children: sortedChildren, childMap: children, addChild };
+};
diff --git a/packages/opendesign/src/tab/OTab.vue b/packages/opendesign/src/tab/OTab.vue
index c19655b7b448625f90b86634ef01df2cd4458bd2..122aa7df935543a7fb5a3635cff339cbe37efbe2 100644
--- a/packages/opendesign/src/tab/OTab.vue
+++ b/packages/opendesign/src/tab/OTab.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { provide, ref, nextTick, watch, computed, Ref } from 'vue';
-import { tabInjectKey } from './provide';
+import { provide, ref, nextTick, watch, computed, Ref, h, getCurrentInstance } from 'vue';
+import { tabInjectKey, type NavT } from './provide';
 import { IconAdd, IconChevronLeft, IconChevronRight } from '../_utils/icons';
 import { tabProps } from './types';
 import { vOnResize } from '../directives';
 import { debounceRAF } from '../_utils/helper';
 import { defaultSize } from '../_utils/global';
 import { useScreen } from '../hooks';
+import { useSortedChildren } from '../_utils/vue-utils';
+import OTabPane from './OTabPane.vue';
+import OTabNav from './OTabNav.vue';
 
 const props = defineProps(tabProps);
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void;
-  (e: 'change', value: string | number, oldValue?: string | number): void;
+  (e: 'update:modelValue', value: string | number | undefined): void;
+  (e: 'change', value: string | number | undefined, oldValue?: string | number): void;
   (e: 'delete', value: string | number): void;
   (e: 'add', evt: MouseEvent): void;
 }>();
@@ -26,9 +29,7 @@ const navWrapRef: Ref<HTMLElement | null> = ref(null);
 const navsRef: Ref<HTMLElement | null> = ref(null);
 const bodyRef: Ref<HTMLElement | null> = ref(null);
 
-const valueSet: Array<string | number> = [];
-
-let activeNavEl: HTMLElement | null = null;
+let activeNavEl: HTMLElement | undefined | null = null;
 
 const isScroll = ref(false);
 const prevDisabled = ref(true);
@@ -78,7 +79,8 @@ watch(
     activeKey.value = v;
   }
 );
-const updateAnchor = () => {
+const updateAnchor = (el?: HTMLElement) => {
+  activeNavEl = el || activeNavEl;
   if (!activeNavEl) {
     return;
   }
@@ -88,21 +90,22 @@ const updateAnchor = () => {
     width: `${clientWidth}px`,
   };
 };
-watch(() => isScroll.value, updateAnchor);
+watch(
+  () => isScroll.value,
+  () => updateAnchor()
+);
 
 // 更新tab当前选中值
 const updateValue = (value: string | number, navEl: HTMLElement | null) => {
-  emits('update:modelValue', value);
   activeNavEl = navEl;
   if (activeKey.value !== value) {
+    emits('update:modelValue', value);
     emits('change', value, activeKey.value);
     activeKey.value = value;
   }
 
   if (navEl) {
-    activeNavEl = navEl;
-    updateAnchor();
-
+    updateAnchor(navEl);
     scrollActiveNavIntoView();
   }
 };
@@ -110,30 +113,25 @@ const isAdding = ref(false);
 
 // 初始化tab，如果没有选中项，默认第一个
 const initValue = (value: string | number, navEl: HTMLElement | null) => {
-  if (!valueSet.includes(value)) {
-    valueSet.push(value);
-  }
-
   if (activeKey.value === undefined || isAdding.value) {
     updateValue(value, navEl);
     isAdding.value = false;
   }
-
-  if (activeKey.value === value && navEl) {
-    activeNavEl = navEl;
-    updateAnchor();
-  }
 };
-// 删除页签
-const onDeletePane = (value: string | number) => {
-  emits('delete', value);
-  const idx = valueSet.indexOf(value);
+const { children, addChild } = useSortedChildren<NavT>(getCurrentInstance()!, OTabPane);
 
-  if (activeKey.value === value) {
-    activeKey.value = valueSet[idx > 0 ? idx - 1 : 0];
-    emits('change', activeKey.value, value);
+// 删除页签
+const onDeletePane = (paneKey: number | string) => {
+  if (activeKey.value === paneKey) {
+    const existChildren = children.value.filter((child) => !child.isClosed || child.paneKey === paneKey);
+    const idx = existChildren.findIndex((child) => child.paneKey === paneKey);
+    if (existChildren.length <= 1) {
+      activeKey.value = undefined;
+    } else {
+      activeKey.value = existChildren[idx > 0 ? idx - 1 : 1].paneKey;
+    }
+    emits('change', activeKey.value, paneKey);
   }
-  valueSet.splice(idx, 1);
 };
 // 添加页签
 const onAddNav = (e: MouseEvent) => {
@@ -142,14 +140,45 @@ const onAddNav = (e: MouseEvent) => {
     isAdding.value = true;
   }
 };
+
+const navRender = () => {
+  return children.value.map((child) =>
+    h(
+      OTabNav,
+      {
+        key: child.uid,
+        activeKey: activeKey.value,
+        disabled: child.disabled,
+        closable: child.closable,
+        label: child.label,
+        value: child.value,
+        uid: child.uid,
+        paneKey: child.paneKey,
+        isClosed: child.isClosed,
+        closeNav: () => {
+          child.closeNav();
+          emits('delete', child.paneKey);
+        },
+        updateValue,
+        updateAnchor,
+        initValue,
+      },
+      { default: child.slots.nav }
+    )
+  );
+};
+watch(
+  children,
+  () => {
+    updateAnchor();
+  },
+  { deep: false, flush: 'post' }
+);
 provide(tabInjectKey, {
   lazy: props.lazy,
-  navsRef,
-  bodyRef,
   activeValue: activeKey,
-  updateValue,
+  addChild,
   onDeletePane,
-  initValue,
 });
 const onHeadResize = debounceRAF(() => {
   updateAnchor();
@@ -187,7 +216,7 @@ const navScroll = (to: 'prev' | 'next') => {
             <IconChevronLeft />
           </div>
           <div ref="navWrapRef" v-on-resize="onHeadResize" class="o-tab-navs-wrap o-hide-scrollbar" @scroll.passive="onWrapScroll">
-            <div class="o-tab-nav-list" ref="navsRef" v-on-resize="onHeadResize"></div>
+            <div class="o-tab-nav-list" ref="navsRef" v-on-resize="onHeadResize"><Component :is="navRender" /></div>
             <div v-if="props.variant === 'text'" class="o-tab-nav-anchor" :style="anchorStyle">
               <slot name="anchor">
                 <div class="o-tab-nav-anchor-line"></div>
diff --git a/packages/opendesign/src/tab/OTabNav.vue b/packages/opendesign/src/tab/OTabNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce612d85b7fc0a3cbd3329d1fdc22b1257a8f8b8
--- /dev/null
+++ b/packages/opendesign/src/tab/OTabNav.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { IconClose } from '../_utils/icons';
+import { vOnResize } from '../directives';
+
+const props = defineProps<{
+  activeKey?: string | number;
+  disabled: boolean;
+  closable: boolean;
+  label?: string;
+  value?: string | number;
+  uid: number;
+  paneKey: string | number;
+  isClosed: boolean;
+  closeNav: () => void;
+  updateValue: (val: string | number, el: HTMLElement | null) => void;
+  updateAnchor: (el: HTMLElement) => void;
+  initValue: (val: string | number, el: HTMLElement | null) => void;
+}>();
+
+const navRef = ref<HTMLDivElement | null>(null);
+
+const isActive = computed(() => props.activeKey === props.paneKey);
+const navClick = () => {
+  if (!props.disabled) {
+    props.updateValue(props.paneKey, navRef.value);
+  }
+};
+const navCloseClick = (e: MouseEvent) => {
+  e.stopPropagation();
+  if (!props.disabled) {
+    props.closeNav();
+  }
+};
+const _updateAnchor = () => {
+  if (navRef.value && isActive.value) {
+    props.updateAnchor(navRef.value);
+  }
+};
+watch(isActive, _updateAnchor, { flush: 'post' });
+onMounted(() => {
+  props.initValue(props.paneKey, navRef.value);
+});
+</script>
+<template>
+  <div
+    v-if="!isClosed"
+    ref="navRef"
+    v-on-resize="_updateAnchor"
+    :class="[
+      'o-tab-nav',
+      {
+        'o-tab-nav-active': isActive,
+        'o-tab-nav-disabled': props.disabled,
+        'o-tab-nav-closable': props.closable,
+      },
+    ]"
+    @click="navClick"
+  >
+    <slot>{{ props.label || props.value }}</slot>
+    <div v-if="props.closable" class="o-tab-nav-close" @click="navCloseClick"><IconClose /></div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/tab/OTabPane.vue b/packages/opendesign/src/tab/OTabPane.vue
index 840c6dd46e6f268cf7b2f66592f6f81975755856..b30e8bdce878dab95567ace1f1d510c045a5ac54 100644
--- a/packages/opendesign/src/tab/OTabPane.vue
+++ b/packages/opendesign/src/tab/OTabPane.vue
@@ -1,33 +1,29 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch, Ref } from 'vue';
+import { computed, getCurrentInstance, inject, ref, reactive, onBeforeUnmount, toRefs, type Slot } from 'vue';
 import { tabInjectKey } from './provide';
 import { tabPaneProps } from './types';
-import { IconClose } from '../_utils/icons';
-import ClientOnly from '../_components/client-only';
 import { isUndefined } from '../_utils/is';
 import { log } from '../_utils/log';
 
 const props = defineProps(tabPaneProps);
 
+/**
+ * @deprecated 不应该通过 v-if="isClosed" 关闭 tab，这种关闭方式只是隐藏了 dom，但并未销毁实例。
+ * 某些情况下会导致异常（见 TabSortedChild.vue 最后一个测试用例）。应该通过事件让父组件卸载该组件
+ */
 const isClosed = ref(false);
-
-const navRef: Ref<HTMLElement | null> = ref(null);
+const { disabled, closable, label, value } = toRefs(props);
 
 const tabInjection = inject(tabInjectKey, null);
 
-const { navsRef, activeValue, lazy } = tabInjection || {};
+const { activeValue, lazy, addChild, onDeletePane } = tabInjection || {};
 
-const instance = getCurrentInstance();
+const instance = getCurrentInstance()!;
 if (isUndefined(props.value) && isUndefined(props.label)) {
   log.warn('OTabPane is missing prop: value or lable');
 }
 const paneKey = computed(() => {
-  return props.value ?? props.label ?? instance?.uid ?? Math.random();
+  return props.value ?? instance.uid ?? Math.random();
 });
 
 const isActive = computed(() => paneKey.value === activeValue?.value);
@@ -44,58 +40,33 @@ const toMount = computed(() => {
   }
   return true;
 });
-
-watch(
-  () => isActive.value,
-  (v: boolean) => {
-    if (v) {
-      hasActived.value = true;
-      tabInjection?.updateValue(paneKey.value, navRef.value);
-    }
-  }
-);
-
-const navClick = () => {
-  if (!props.disabled) {
-    tabInjection?.updateValue(paneKey.value, navRef.value);
-  }
-};
-const navCloseClick = (e: MouseEvent) => {
-  e.stopImmediatePropagation();
+const closeNav = () => {
   isClosed.value = true;
-
-  tabInjection?.onDeletePane(paneKey.value, e);
+  onDeletePane?.(paneKey.value);
 };
 
-onMounted(() => {
-  nextTick(() => {
-    tabInjection?.initValue(paneKey.value, navRef.value);
-  });
+const slots = defineSlots<{
+  default: Slot;
+  nav: Slot;
+}>();
+const nav = reactive({
+  uid: instance.uid,
+  paneKey,
+  disabled,
+  closable,
+  label,
+  value,
+  slots,
+  isClosed,
+  closeNav,
+  getVNode: () => instance.vnode,
+});
+addChild?.(nav);
+onBeforeUnmount(() => {
+  onDeletePane?.(paneKey.value);
 });
 </script>
 <template>
-  <ClientOnly>
-    <teleport v-if="navsRef && !isClosed" :to="navsRef" :disabled="!navsRef">
-      <div
-        ref="navRef"
-        :class="[
-          'o-tab-nav',
-          {
-            'o-tab-nav-active': isActive,
-            'o-tab-nav-disabled': props.disabled,
-            'o-tab-nav-closable': props.closable,
-          },
-        ]"
-        @click="navClick"
-      >
-        <slot name="nav">
-          {{ props.label || props.value }}
-        </slot>
-        <div v-if="props.closable" class="o-tab-nav-close" @click="navCloseClick"><IconClose /></div>
-      </div>
-    </teleport>
-  </ClientOnly>
-
   <transition :name="props.transition">
     <div
       v-if="!isClosed && toMount"
@@ -108,7 +79,6 @@ onMounted(() => {
           'o-tab-pane-closable': props.closable,
         },
       ]"
-      v-bind="$attrs"
     >
       <slot></slot>
     </div>
diff --git a/packages/opendesign/src/tab/__demo__/IndexTab.vue b/packages/opendesign/src/tab/__demo__/IndexTab.vue
index c062b5e30cf3265e16a4c484631f86915e809f5a..d575bc22f000fc45609896be181d25e05ab65e09 100644
--- a/packages/opendesign/src/tab/__demo__/IndexTab.vue
+++ b/packages/opendesign/src/tab/__demo__/IndexTab.vue
@@ -3,10 +3,12 @@ import '../style';
 
 import TabBasic from './TabBasic.vue';
 import TabScroll from './TabScroll.vue';
+import TabSortedChild from './TabSortedChild.vue';
 </script>
 <template>
   <div class="page-demo">
     <TabBasic />
+    <TabSortedChild />
     <TabScroll />
   </div>
 </template>
diff --git a/packages/opendesign/src/tab/__demo__/TabSortedChild.vue b/packages/opendesign/src/tab/__demo__/TabSortedChild.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3825f24a2e9897ea417299eec7192a85646ab350
--- /dev/null
+++ b/packages/opendesign/src/tab/__demo__/TabSortedChild.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { defineComponent, reactive, ref } from 'vue';
+import { OTab, OTabPane } from '../index';
+import { OIcon } from '../../icon';
+import { OIconSearch } from '../../icon-components';
+
+const isShow = ref(true);
+const isShow2 = ref(false);
+const value = ref('1');
+const EmptyWrapper = defineComponent({
+  name: 'EmptyWrapper',
+  setup(_, { slots }) {
+    return () => slots.default?.();
+  },
+});
+const tabList = reactive([
+  { label: 'Tab 1', value: '1' },
+  { label: 'Tab 2', value: '2' },
+  { label: 'Tab 3', value: '3' },
+]);
+const handleTab1Remove = (paneKey: number | string) => {
+  if (paneKey === '2') {
+    isShow.value = false;
+  } else if (paneKey === '3') {
+    isShow2.value = false;
+  }
+};
+const handleTab2Remove = (paneKey: number | string) => {
+  const idx = tabList.findIndex((item) => item.value === paneKey);
+  if (idx > -1) {
+    tabList.splice(idx, 1);
+  }
+};
+</script>
+<template>
+  <h4>useSortedChildren 测试</h4>
+  <div class="col">
+    <button @click="isShow = !isShow">switch 3</button>
+    <button @click="isShow2 = !isShow2">switch 5</button>
+  </div>
+  <OTab v-model="value" @delete="handleTab1Remove">
+    <OTabPane class="pane" label="Tab 1" value="1">pane 1</OTabPane>
+    <OTabPane class="pane" label="Tab 2" value="2">pane 2</OTabPane>
+    <EmptyWrapper>
+      <OTabPane v-if="isShow" class="pane" label="Tab 3" value="3" closable lazy><div style="height: 50px">pane 3</div></OTabPane>
+      <OTabPane class="pane" label="Tab 4" value="4">pane 4</OTabPane>
+    </EmptyWrapper>
+    <OTabPane v-if="isShow2" class="pane" label="Tab 5" value="5" closable unmount-on-hide>
+      <template #nav><OIcon :icon="OIconSearch" /> Nav 5</template>pane 5
+    </OTabPane>
+    <OTabPane class="pane" label="Tab 6" value="6">pane 6</OTabPane>
+  </OTab>
+  <button @click="tabList.reverse()">reverse</button>
+  <div>
+    {{ tabList }}
+  </div>
+  <OTab @delete="handleTab2Remove">
+    <OTabPane v-for="tab in tabList" :label="tab.label" :value="tab.value" :key="tab.value" closable class="pane">{{ tab.value }}</OTabPane>
+  </OTab>
+  <h6>测试 OTabPane 并非 OTab 的直接子元素</h6>
+  <OTab @delete="handleTab2Remove">
+    <EmptyWrapper>
+      <OTabPane v-for="tab in tabList" :label="tab.label" :value="tab.value" :key="tab.value" closable class="pane">{{ tab.value }}</OTabPane>
+    </EmptyWrapper>
+  </OTab>
+  <h6>
+    测试 OTabPane 的 key 使用 index；关闭 tab1 和 tab2 时会多关闭一个，该问题非组件问题而是用户传入错误的 key，导致 vue 的 diff patch 算法未卸载正确的组件
+  </h6>
+  <OTab @delete="handleTab2Remove">
+    <EmptyWrapper>
+      <OTabPane v-for="(tab, index) in tabList" :label="tab.label" :value="tab.value" :key="index" closable class="pane">{{ tab.value }}</OTabPane>
+    </EmptyWrapper>
+  </OTab>
+</template>
diff --git a/packages/opendesign/src/tab/provide.ts b/packages/opendesign/src/tab/provide.ts
index 8ff324bdd1ac9dde3facc915ce61b342ce7fc5f6..eba4157a5f005483bc96fdb84b473bf03b412309 100644
--- a/packages/opendesign/src/tab/provide.ts
+++ b/packages/opendesign/src/tab/provide.ts
@@ -1,11 +1,19 @@
-import { InjectionKey, Ref } from 'vue';
+import { InjectionKey, Ref, type Slots } from 'vue';
+import { type PublicChildT } from '../_utils/vue-utils';
 
+export type NavT = PublicChildT<{
+  paneKey: string | number;
+  disabled: boolean;
+  closable: boolean;
+  label?: string;
+  value?: string | number;
+  slots: Slots;
+  isClosed: boolean;
+  closeNav: () => void;
+}>;
 export const tabInjectKey: InjectionKey<{
   lazy: boolean;
-  navsRef: Ref<HTMLElement | null>;
-  bodyRef: Ref<HTMLElement | null>;
   activeValue: Ref<string | number | undefined>;
-  initValue: (value: string | number, navEl: HTMLElement | null) => void;
-  updateValue: (value: string | number, navEl: HTMLElement | null) => void;
-  onDeletePane: (value: string | number, evt: MouseEvent) => void;
+  addChild: (child: NavT) => void;
+  onDeletePane: (paneKey: number | string) => void;
 }> = Symbol('provide-tab');