bkui-vue 3.0.2 → 3.0.3

package/lib/index.js

@@ -3,5 +3,5 @@ export * from './hooks';
 export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
-export const version = "3.0.2";
+export const version = "3.0.3";
 window.__bkui_vue_version__ = version;

package/lib/packages/tab/props.d.ts

@@ -1,4 +1,5 @@
-import { ExtractPropTypes, PropType, VNode } from 'vue';
+import { ComputedRef, ExtractPropTypes, InjectionKey, PropType, VNode } from 'vue';
+export declare const tabActiveInjectionKey: InjectionKey<ComputedRef<number | string>>;
 export declare enum TabTypeEnum {
     BORDER_CARD = "border-card",
     CARD = "card",
@@ -69,11 +70,7 @@ export declare const tabPanelProps: {
     name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    label: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    label: import("vue-types").VueTypeDef<any>;
     tips: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
         default: string;
     };
@@ -86,11 +83,7 @@ export declare const tabPanelProps: {
     renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show", import("vue-types/dist/shared/vue-types.d8e57a80").b<"if" | "show">> & {
         default: "if" | "show";
     };
-    panel: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    panel: import("vue-types").VueTypeDef<any>;
     num: import("vue-types").VueTypeValidableDef<number, import("vue-types/dist/shared/vue-types.d8e57a80").b<number>> & {
         default: number;
     } & {

package/lib/packages/tab/tab-panel.d.ts

@@ -1,12 +1,9 @@
+import { ComputedRef } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    label: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    label: import("vue-types").VueTypeDef<any>;
     tips: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
         default: string;
     };
@@ -19,11 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show", import("vue-types/dist/shared/vue-types.d8e57a80").b<"if" | "show">> & {
         default: "if" | "show";
     };
-    panel: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    panel: import("vue-types").VueTypeDef<any>;
     num: import("vue-types").VueTypeValidableDef<number, import("vue-types/dist/shared/vue-types.d8e57a80").b<number>> & {
         default: number;
     } & {
@@ -34,15 +27,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         default: string;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {
+    tabActive: ComputedRef<string | number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    label: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    label: import("vue-types").VueTypeDef<any>;
     tips: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
         default: string;
     };
@@ -55,11 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show", import("vue-types/dist/shared/vue-types.d8e57a80").b<"if" | "show">> & {
         default: "if" | "show";
     };
-    panel: (import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
-        default: string;
-    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/shared/vue-types.d8e57a80").b<(...args: any[]) => any>> & {
-        default: (...args: any[]) => any;
-    });
+    panel: import("vue-types").VueTypeDef<any>;
     num: import("vue-types").VueTypeValidableDef<number, import("vue-types/dist/shared/vue-types.d8e57a80").b<number>> & {
         default: number;
     } & {
@@ -72,11 +59,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     name: string | number;
-    label: string | ((...args: any[]) => any);
     visible: boolean;
     renderDirective: "if" | "show";
     tips: string;
-    panel: string | ((...args: any[]) => any);
     num: number;
     numDisplayType: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/tab/index.js

@@ -2,7 +2,7 @@ import "../styles/reset.css";
 import "./tab.less";
 import { PropTypes as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__, bkZIndexManager as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_bkZIndexManager__, renderDirectiveType as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_renderDirectiveType__, resolveClassName as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_resolveClassName__, withInstallProps as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_withInstallProps__ } from "../shared";
 import { toType as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a_toType__ } from "vue-types";
-import { Fragment as __WEBPACK_EXTERNAL_MODULE_vue_Fragment__, computed as __WEBPACK_EXTERNAL_MODULE_vue_computed__, createVNode as __WEBPACK_EXTERNAL_MODULE_vue_createVNode__, defineComponent as __WEBPACK_EXTERNAL_MODULE_vue_defineComponent__, getCurrentInstance as __WEBPACK_EXTERNAL_MODULE_vue_getCurrentInstance__, h as __WEBPACK_EXTERNAL_MODULE_vue_h__, nextTick as __WEBPACK_EXTERNAL_MODULE_vue_nextTick__, onMounted as __WEBPACK_EXTERNAL_MODULE_vue_onMounted__, onUpdated as __WEBPACK_EXTERNAL_MODULE_vue_onUpdated__, ref as __WEBPACK_EXTERNAL_MODULE_vue_ref__, render as __WEBPACK_EXTERNAL_MODULE_vue_render__, resolveDirective as __WEBPACK_EXTERNAL_MODULE_vue_resolveDirective__, vShow as __WEBPACK_EXTERNAL_MODULE_vue_vShow__, withDirectives as __WEBPACK_EXTERNAL_MODULE_vue_withDirectives__ } from "vue";
+import { Fragment as __WEBPACK_EXTERNAL_MODULE_vue_Fragment__, computed as __WEBPACK_EXTERNAL_MODULE_vue_computed__, createVNode as __WEBPACK_EXTERNAL_MODULE_vue_createVNode__, defineComponent as __WEBPACK_EXTERNAL_MODULE_vue_defineComponent__, getCurrentInstance as __WEBPACK_EXTERNAL_MODULE_vue_getCurrentInstance__, h as __WEBPACK_EXTERNAL_MODULE_vue_h__, inject as __WEBPACK_EXTERNAL_MODULE_vue_inject__, nextTick as __WEBPACK_EXTERNAL_MODULE_vue_nextTick__, onBeforeUnmount as __WEBPACK_EXTERNAL_MODULE_vue_onBeforeUnmount__, onMounted as __WEBPACK_EXTERNAL_MODULE_vue_onMounted__, onUpdated as __WEBPACK_EXTERNAL_MODULE_vue_onUpdated__, provide as __WEBPACK_EXTERNAL_MODULE_vue_provide__, ref as __WEBPACK_EXTERNAL_MODULE_vue_ref__, render as __WEBPACK_EXTERNAL_MODULE_vue_render__, resolveDirective as __WEBPACK_EXTERNAL_MODULE_vue_resolveDirective__, vShow as __WEBPACK_EXTERNAL_MODULE_vue_vShow__, watch as __WEBPACK_EXTERNAL_MODULE_vue_watch__, withDirectives as __WEBPACK_EXTERNAL_MODULE_vue_withDirectives__ } from "vue";
 import { usePrefix as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3_usePrefix__ } from "../config-provider";
 import "../popover";
 import { createPopper as __WEBPACK_EXTERNAL_MODULE__popperjs_core_a5c7319c_createPopper__ } from "@popperjs/core";
@@ -714,7 +714,9 @@ function _defineProperty(e, r, t) {
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
-
+ // Tab 通过 provide 向下注入当前激活面板的 name，TabPanel 通过 inject 获取，
+// 避免依赖 this.$parent 这种与组件层级强耦合的写法。
+var tabActiveInjectionKey = Symbol('tabActive');
 var TabTypeEnum;
 (function (TabTypeEnum) {
   TabTypeEnum["BORDER_CARD"] = "border-card";
@@ -805,14 +807,14 @@ var tabEventProps = (/* unused pure expression or super */ null && ({
 }));
 var tabPanelProps = {
   name: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.oneOfType([__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.number, __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string]).def(''),
-  label: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string || __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.func,
+  label: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.oneOfType([__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string, __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.func]),
   tips: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string,
   closable: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.bool,
   visible: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.bool.def(true),
   disabled: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.bool,
   sortable: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.bool,
   renderDirective: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_renderDirectiveType__(),
-  panel: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string || __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.func,
+  panel: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.oneOfType([__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string, __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.func]),
   num: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.number.def(undefined),
   numDisplayType: __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03_PropTypes__.string.def('default')
 };
@@ -1557,15 +1559,19 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
   props: tabNavProps,
   setup: function setup(props) {
     var activeRef = __WEBPACK_EXTERNAL_MODULE_vue_ref__(null);
-    var activeBarStyle = __WEBPACK_EXTERNAL_MODULE_vue_computed__(function () {
-      var initStyle = {
-        width: 0,
-        height: 0,
-        bottom: 0,
-        left: 0
-      };
+    // 激活条位置依赖 DOM 的 clientWidth/offsetLeft 等非响应式量，computed 无法在
+    // label 内容（宽度）变化但激活项不变时重算。改为 ref + 主动测量，并在 DOM
+    // 更新后/激活项尺寸变化时刷新。
+    var initBarStyle = {
+      width: 0,
+      height: 0,
+      bottom: 0,
+      left: 0
+    };
+    var activeBarStyle = __WEBPACK_EXTERNAL_MODULE_vue_ref__(tab_nav_objectSpread({}, initBarStyle));
+    var calcActiveBarStyle = function calcActiveBarStyle() {
       if (!activeRef.value) {
-        return initStyle;
+        return tab_nav_objectSpread({}, initBarStyle);
       }
       var positionArr = [PositionEnum.LEFT, PositionEnum.RIGHT];
       if (positionArr.includes(props.tabPosition)) {
@@ -1597,18 +1603,45 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
           background: props.activeBarColor
         };
       }
-      return initStyle;
+      return tab_nav_objectSpread({}, initBarStyle);
+    };
+    var updateActiveBarStyle = function updateActiveBarStyle() {
+      var next = calcActiveBarStyle();
+      // 仅在确有变化时赋值，避免无意义的重渲染
+      if (JSON.stringify(next) !== JSON.stringify(activeBarStyle.value)) {
+        activeBarStyle.value = next;
+      }
+    };
+    // 观察激活项自身尺寸变化（label 长度变化、字体异步加载、容器缩放等）
+    var barResizeObserver = null;
+    var observeActiveBar = function observeActiveBar() {
+      var _barResizeObserver;
+      (_barResizeObserver = barResizeObserver) === null || _barResizeObserver === void 0 || _barResizeObserver.disconnect();
+      if (typeof ResizeObserver !== 'undefined' && activeRef.value) {
+        barResizeObserver = new ResizeObserver(function () {
+          return updateActiveBarStyle();
+        });
+        barResizeObserver.observe(activeRef.value);
+      }
+    };
+    __WEBPACK_EXTERNAL_MODULE_vue_onMounted__(function () {
+      observeActiveBar();
+      updateActiveBarStyle();
+    });
+    __WEBPACK_EXTERNAL_MODULE_vue_onBeforeUnmount__(function () {
+      var _barResizeObserver2;
+      (_barResizeObserver2 = barResizeObserver) === null || _barResizeObserver2 === void 0 || _barResizeObserver2.disconnect();
+      barResizeObserver = null;
     });
     var tableNavList = __WEBPACK_EXTERNAL_MODULE_vue_computed__(function () {
       if (!Array.isArray(props.panels) || !props.panels.length) {
         return [];
       }
       var list = [];
-      var hasFindActive = false;
       var panels = props.panels;
-      panels.filter(function (item, index) {
+      panels.forEach(function (item, index) {
         if (!item.props) {
-          return null;
+          return;
         }
         var _item$props = item.props,
           name = _item$props.name,
@@ -1621,10 +1654,7 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
           tips = _item$props.tips,
           numDisplayType = _item$props.numDisplayType;
         if (!visible) {
-          return false;
-        }
-        if (props.active === name) {
-          hasFindActive = true;
+          return;
         }
         var renderLabel = function renderLabel(label) {
           if (item.slots.label) {
@@ -1652,17 +1682,50 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
           tabLabel: renderLabel(label),
           tabNum: num
         });
-        return true;
       });
-      if (!hasFindActive && props.validateActive) {
-        props.panels[0].props && props.tabChange(props.panels[0].props.name);
-      }
       return list;
     });
+    // 激活项、页签内容（label/数量）、位置或激活条尺寸/颜色变化后，等 DOM 更新完成再重新测量；
+    // 同时把 ResizeObserver 重新挂到新的激活元素上。
+    __WEBPACK_EXTERNAL_MODULE_vue_watch__([function () {
+      return props.active;
+    }, function () {
+      return props.tabPosition;
+    }, function () {
+      return props.type;
+    }, function () {
+      return props.activeBarSize;
+    }, function () {
+      return props.activeBarColor;
+    }, tableNavList], function () {
+      __WEBPACK_EXTERNAL_MODULE_vue_nextTick__(function () {
+        observeActiveBar();
+        updateActiveBarStyle();
+      });
+    });
+    // 当没有匹配到激活项且开启校验时，默认激活第一个面板。
+    // 该逻辑必须放在副作用（watch）中，computed 需保持纯函数。
+    __WEBPACK_EXTERNAL_MODULE_vue_watch__([tableNavList, function () {
+      return props.active;
+    }], function () {
+      var _props$panels;
+      if (!props.validateActive) {
+        return;
+      }
+      var hasFindActive = tableNavList.value.some(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.name) === props.active;
+      });
+      var firstPanel = (_props$panels = props.panels) === null || _props$panels === void 0 ? void 0 : _props$panels[0];
+      if (!hasFindActive && firstPanel !== null && firstPanel !== void 0 && firstPanel.props) {
+        props.tabChange(firstPanel.props.name);
+      }
+    }, {
+      immediate: true
+    });
     var dragenterIndex = __WEBPACK_EXTERNAL_MODULE_vue_ref__(-1);
     var dragStartIndex = __WEBPACK_EXTERNAL_MODULE_vue_ref__(-1);
     var draggingEle = __WEBPACK_EXTERNAL_MODULE_vue_ref__('');
-    var distinctRoots = function distinctRoots(el1, el2) {
+    var isSameRoot = function isSameRoot(el1, el2) {
       return el1 === el2;
     };
     var methods = {
@@ -1687,18 +1750,18 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
       },
       dragenter: function dragenter(index) {
         // 缓存目标元素索引，方便添加样式
-        if (distinctRoots(draggingEle.value, props.guid)) {
+        if (isSameRoot(draggingEle.value, props.guid)) {
           dragenterIndex.value = index;
         }
       },
       dragend: function dragend() {
         dragenterIndex.value = -1;
         dragStartIndex.value = -1;
-        draggingEle.value = null;
+        draggingEle.value = '';
       },
       drop: function drop(index, sortType) {
         // 不是同一个tab，返回——暂时不支持跨tab拖动
-        if (!distinctRoots(draggingEle.value, props.guid)) {
+        if (!isSameRoot(draggingEle.value, props.guid)) {
           return false;
         }
         props.tabSort(dragStartIndex.value, index, sortType);
@@ -1719,7 +1782,7 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
       dragenterIndex: dragenterIndex,
       dragStartIndex: dragStartIndex,
       draggingEle: draggingEle,
-      guid: Math.random().toString(16).substr(4) + Math.random().toString(16).substr(4),
+      guid: "".concat(Date.now().toString(16), "-").concat(Math.random().toString(16).slice(2, 10)),
       resolveClassName: resolveClassName
     });
   },
@@ -1772,11 +1835,21 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
         return __WEBPACK_EXTERNAL_MODULE_vue_withDirectives__(__WEBPACK_EXTERNAL_MODULE_vue_createVNode__("div", {
           "key": name,
           "ref": active === name ? 'activeRef' : 'tabLabelRef',
+          "role": "tab",
+          "aria-selected": active === name,
+          "aria-disabled": disabled || undefined,
+          "tabindex": disabled ? -1 : 0,
           "class": getNavItemClass(),
           "draggable": getValue(item.sortable, sortable),
           "onClick": function onClick() {
             return !disabled && _this.handleTabChange(name);
           },
+          "onKeydown": function onKeydown(e) {
+            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+              e.preventDefault();
+              _this.handleTabChange(name);
+            }
+          },
           "onDragend": function onDragend(e) {
             e.preventDefault();
             dragend();
@@ -1857,6 +1930,7 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
       },
       "class": this.resolveClassName('tab-header')
     }, [__WEBPACK_EXTERNAL_MODULE_vue_createVNode__("div", {
+      "role": "tablist",
       "class": [this.resolveClassName('tab-header-nav'), operations || setting ? 'tab-header-auto' : '']
     }, [renderActiveBar(), renderNavs()]), operations, setting]);
   }
@@ -1865,6 +1939,7 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
 
 
 
+
 function tab_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function tab_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? tab_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : tab_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -1913,31 +1988,41 @@ function tab_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
     var isMounted = __WEBPACK_EXTERNAL_MODULE_vue_ref__(false);
     var panels = __WEBPACK_EXTERNAL_MODULE_vue_ref__([]);
     var instance = __WEBPACK_EXTERNAL_MODULE_vue_getCurrentInstance__();
-    // 动态插入tabPanel
+    // 向下注入当前激活面板，供 TabPanel 通过 inject 读取，替代 this.$parent.active。
+    __WEBPACK_EXTERNAL_MODULE_vue_provide__(tabActiveInjectionKey, __WEBPACK_EXTERNAL_MODULE_vue_computed__(function () {
+      return _props.active;
+    }));
+    // 递归收集已挂载的 TabPanel 实例。
+    // 仅向下穿透 Tab 自身的包裹元素（原生标签、Fragment、template），
+    // 不进入用户自定义组件，避免误收集嵌套 Tab 的面板。
     var _getPaneInstanceFromSlot = function getPaneInstanceFromSlot(vnode) {
       var panelInstanceList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var children = vnode.children;
-      (children || []).forEach(function (node) {
-        var type = node.type;
-        type = type.name || type;
+      var children = vnode === null || vnode === void 0 ? void 0 : vnode.children;
+      if (!Array.isArray(children)) {
+        return panelInstanceList;
+      }
+      children.forEach(function (node) {
+        if (!node || _typeof(node) !== 'object') {
+          return;
+        }
+        var rawType = node.type;
+        var type = (rawType === null || rawType === void 0 ? void 0 : rawType.name) || rawType;
         if (type === 'TabPanel' && node.component) {
           panelInstanceList.push(node.component);
-        } else if (type === __WEBPACK_EXTERNAL_MODULE_vue_Fragment__ || type === 'template') {
+        } else if (rawType === __WEBPACK_EXTERNAL_MODULE_vue_Fragment__ || rawType === 'template' || typeof rawType === 'string') {
           _getPaneInstanceFromSlot(node, panelInstanceList);
         }
       });
       return panelInstanceList;
     };
     var setPanelInstances = function setPanelInstances() {
-      if (slots["default"]) {
-        var children = instance.subTree.children[1].children;
-        if (!children) return;
-        var content = children[0];
-        var panelInstanceList = _getPaneInstanceFromSlot(content);
-        var isChanged = panelInstanceList.length !== panels.value.length;
-        if (isChanged) {
-          panels.value = panelInstanceList;
-        }
+      if (!slots["default"] || !(instance !== null && instance !== void 0 && instance.subTree)) {
+        return;
+      }
+      var panelInstanceList = _getPaneInstanceFromSlot(instance.subTree);
+      var isChanged = panelInstanceList.length !== panels.value.length;
+      if (isChanged) {
+        panels.value = panelInstanceList;
       }
     };
     __WEBPACK_EXTERNAL_MODULE_vue_onMounted__(function () {
@@ -1949,9 +2034,9 @@ function tab_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
       */
       setPanelInstances();
       isMounted.value = true;
-      __WEBPACK_EXTERNAL_MODULE_vue_onUpdated__(function () {
-        setPanelInstances();
-      });
+    });
+    __WEBPACK_EXTERNAL_MODULE_vue_onUpdated__(function () {
+      setPanelInstances();
     });
     var methods = {
       tabAdd: function tabAdd(e) {
@@ -1981,10 +2066,10 @@ function tab_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
         // 如果是插队模式
         if (sortType === SortTypeEnum.INSERT) {
           if (dragTabIndex < dropTabIndex) {
-            list.splice(dropTabIndex + 1, 0, panels[dragTabIndex]);
+            list.splice(dropTabIndex + 1, 0, list[dragTabIndex]);
             list.splice(dragTabIndex, 1);
           } else if (dragTabIndex > dropTabIndex) {
-            list.splice(dropTabIndex, 0, panels[dragTabIndex]);
+            list.splice(dropTabIndex, 0, list[dragTabIndex]);
             list.splice(dragTabIndex + 1, 1);
           } else {
             return false;
@@ -2111,9 +2196,19 @@ function tab_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
 /* harmony default export */ const tab_panel = (__WEBPACK_EXTERNAL_MODULE_vue_defineComponent__({
   name: 'TabPanel',
   props: tabPanelProps,
+  setup: function setup() {
+    // 优先通过 inject 获取激活态；单独使用 TabPanel（无父级 Tab）时回退到 $parent。
+    var tabActive = __WEBPACK_EXTERNAL_MODULE_vue_inject__(tabActiveInjectionKey, null);
+    return {
+      tabActive: tabActive
+    };
+  },
   render: function render() {
-    var _this = this;
-    var active = this.name === this.$parent.active;
+    var _this$tabActive,
+      _this$$parent,
+      _this = this;
+    var parentActive = (_this$tabActive = this.tabActive) !== null && _this$tabActive !== void 0 ? _this$tabActive : (_this$$parent = this.$parent) === null || _this$$parent === void 0 ? void 0 : _this$$parent.active;
+    var active = this.name === parentActive;
     var getContent = function getContent() {
       // 不渲染
       if (!_this.visible || _this.renderDirective === 'if' && !active) {

package/lib/volar.components.d.ts

@@ -100,6 +100,7 @@ declare module '@vue/runtime-core' {
     BkSearchSelect: typeof import('./search-select/search-select').default;
     BkConfigProvider: typeof import('./config-provider/config-provider').default;
     BkPopConfirm: typeof import('./pop-confirm/pop-confirm').default;
+    BkCollapsePanel: typeof import('./collapse/collapse-panel').default;
   }
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "workspaces": [
     "packages/**",
     "scripts/cli",