@ibiz-template/vue3-components 0.7.24-alpha.1 → 0.7.24

package/es/node_modules/.pnpm/@ibiz-template_core@0.7.18_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs

@@ -0,0 +1,218 @@
+const defaultNamespace = 'ibiz';
+const statePrefix = 'is-';
+/**
+ * css bem 命名规则拼接
+ * _bem('ibiz', 'layout') => ibiz-layout
+ * _bem('ibiz', 'layout', '', 'title') => ibiz-layout__title
+ * _bem('ibiz', 'layout', '', '', 'right') => ibiz-layout--right
+ * _bem('ibiz', 'layout', '', 'title', 'right') => ibiz-layout__title--right
+ * _bem('ibiz', 'layout', 'header', 'title', 'right') => ibiz-layout-header__title--right
+ *
+ * @author chitanda
+ * @date 2022-09-06 11:09:42
+ * @param {string} namespace 命名空间
+ * @param {string} block 块
+ * @param {string} blockSuffix 块后缀
+ * @param {string} element 元素
+ * @param {string} modifier 修饰符
+ * @return {*}  {string}
+ */
+function _bem(namespace, block, blockSuffix, element, modifier) {
+    let cls = `${namespace}-${block}`;
+    if (blockSuffix) {
+        cls += `-${blockSuffix}`;
+    }
+    if (element) {
+        cls += `__${element}`;
+    }
+    if (modifier) {
+        cls += `--${modifier}`;
+    }
+    return cls;
+}
+/**
+ * 全局样式处理命名空间
+ *
+ * @author chitanda
+ * @date 2022-09-06 11:09:50
+ * @export
+ * @class Namespace
+ */
+class Namespace {
+    /**
+     * Creates an instance of Namespace.
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:12
+     * @param {string} block 当前命名空间的根模块,例如组件的名称
+     * @param {string} [namespace] 指定命名空间，未指定使用默认值 ibiz
+     */
+    constructor(block, namespace) {
+        this.block = block;
+        this.namespace = namespace || defaultNamespace;
+    }
+    /**
+     * namespace-block
+     * namespace-block-blockSuffix
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:08
+     * @param {string} [blockSuffix='']
+     * @return {*}  {string}
+     */
+    b(blockSuffix = '') {
+        return _bem(this.namespace, this.block, blockSuffix, '', '');
+    }
+    /**
+     * namespace-block__element
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:48
+     * @param {string} [element]
+     * @return {*}  {string}
+     */
+    e(element) {
+        return element ? _bem(this.namespace, this.block, '', element, '') : '';
+    }
+    /**
+     * namespace-block--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:37
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    m(modifier) {
+        return modifier ? _bem(this.namespace, this.block, '', '', modifier) : '';
+    }
+    /**
+     * namespace-block-blockSuffix__element
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:52
+     * @param {string} [blockSuffix]
+     * @param {string} [element]
+     * @return {*}  {string}
+     */
+    be(blockSuffix, element) {
+        return blockSuffix && element
+            ? _bem(this.namespace, this.block, blockSuffix, element, '')
+            : '';
+    }
+    /**
+     * namespace-block__element--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:19
+     * @param {string} [element]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    em(element, modifier) {
+        return element && modifier
+            ? _bem(this.namespace, this.block, '', element, modifier)
+            : '';
+    }
+    /**
+     * namespace-block-blockSuffix--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:59
+     * @param {string} [blockSuffix]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    bm(blockSuffix, modifier) {
+        return blockSuffix && modifier
+            ? _bem(this.namespace, this.block, blockSuffix, '', modifier)
+            : '';
+    }
+    /**
+     * namespace-block-blockSuffix__element--modifier
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:37
+     * @param {string} [blockSuffix]
+     * @param {string} [element]
+     * @param {string} [modifier]
+     * @return {*}  {string}
+     */
+    bem(blockSuffix, element, modifier) {
+        return blockSuffix && element && modifier
+            ? _bem(this.namespace, this.block, blockSuffix, element, modifier)
+            : '';
+    }
+    /**
+     * 返回状态 class
+     *
+     * is('loading', false) => '';
+     * is('loading', true) => 'is-loading';
+     *
+     * @author chitanda
+     * @date 2022-09-06 12:09:57
+     * @param {string} name
+     * @param {boolean} [state]
+     * @return {*}  {string}
+     */
+    is(name, state) {
+        return name && state ? `${statePrefix}${name}` : '';
+    }
+    /**
+     * 生成使用到的 css 变量 style 对象
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:41
+     * @param {Record<string, string>} object
+     * @return {*}  {Record<string, string>}
+     */
+    cssVar(object) {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[this.cssVarName(key)] = object[key];
+            }
+        }
+        return styles;
+    }
+    /**
+     * 生成使用到的 css block 变量 style 对象
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:03
+     * @param {Record<string, string>} object
+     * @return {*}  {Record<string, string>}
+     */
+    cssVarBlock(object) {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[this.cssVarBlockName(key)] = object[key];
+            }
+        }
+        return styles;
+    }
+    /**
+     * 生成 css var 变量名称
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:21
+     * @param {string} name
+     * @return {*}  {string}
+     */
+    cssVarName(name) {
+        return `--${this.namespace}-${name}`;
+    }
+    /**
+     * 生成块 css var 变量名称
+     *
+     * @author chitanda
+     * @date 2022-09-06 15:09:35
+     * @param {string} name
+     * @return {*}  {string}
+     */
+    cssVarBlockName(name) {
+        return `--${this.namespace}-${this.block}-${name}`;
+    }
+}
+
+export { Namespace, defaultNamespace };

package/es/node_modules/.pnpm/{element-plus@2.7.5_vue@3.3.8 → element-plus@2.4.4_vue@3.3.8}/node_modules/element-plus/dist/locale/zh-cn.mjs

@@ -1,11 +1,8 @@
-/*! Element Plus v2.7.5 */
+/*! Element Plus v2.4.4 */
 
 var zhCn = {
   name: "zh-cn",
   el: {
-    breadcrumb: {
-      label: "\u9762\u5305\u5C51"
-    },
     colorpicker: {
       confirm: "\u786E\u5B9A",
       clear: "\u6E05\u7A7A"
@@ -107,11 +104,6 @@ var zhCn = {
       clearFilter: "\u5168\u90E8",
       sumText: "\u5408\u8BA1"
     },
-    tour: {
-      next: "\u4E0B\u4E00\u6B65",
-      previous: "\u4E0A\u4E00\u6B65",
-      finish: "\u7ED3\u675F\u5BFC\u89C8"
-    },
     tree: {
       emptyText: "\u6682\u65E0\u6570\u636E"
     },
@@ -132,11 +124,6 @@ var zhCn = {
     popconfirm: {
       confirmButtonText: "\u786E\u5B9A",
       cancelButtonText: "\u53D6\u6D88"
-    },
-    carousel: {
-      leftArrow: "\u4E0A\u4E00\u5F20\u5E7B\u706F\u7247",
-      rightArrow: "\u4E0B\u4E00\u5F20\u5E7B\u706F\u7247",
-      indicator: "\u5E7B\u706F\u7247\u5207\u6362\u81F3\u7D22\u5F15 {index}"
     }
   }
 };

package/es/web-app/create-vue-app.mjs

@@ -1,6 +1,6 @@
 import { createApp, KeepAlive } from 'vue';
 import ElementPlus from 'element-plus';
-import zhCn from '../node_modules/.pnpm/element-plus@2.7.5_vue@3.3.8/node_modules/element-plus/dist/locale/zh-cn.mjs';
+import zhCn from '../node_modules/.pnpm/element-plus@2.4.4_vue@3.3.8/node_modules/element-plus/dist/locale/zh-cn.mjs';
 import { AppHooks, piniaInstance } from '@ibiz-template/vue3-util';
 import IBizVue3 from '../ibiz-vue3.mjs';
 import { i18n } from '../locale/index.mjs';

package/lib/control/data-view/data-view.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
+var qxUtil = require('qx-util');
 require('./data-view.css');
 require('../../util/index.cjs');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
@@ -60,8 +61,24 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       if (c.model.enablePagingBar === true) {
         return true;
       }
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const infiniteScroll = vue.ref();
+    const infiniteScrollKey = vue.ref(qxUtil.createUUID());
+    vue.watch(() => c.state.curPage, () => {
+      var _a, _b;
+      if (c.state.curPage === 1 && (c.model.pagingMode === 2 || c.model.pagingMode === 3)) {
+        infiniteScrollKey.value = qxUtil.createUUID();
+        const containerEl = (_b = (_a = infiniteScroll.value) == null ? void 0 : _a.ElInfiniteScroll) == null ? void 0 : _b.containerEl;
+        if (containerEl) {
+          containerEl.lastScrollTop = 0;
+          containerEl.scrollTop = 0;
+        }
+      }
+    });
     const {
       onPageChange,
       onPageRefresh,
@@ -232,11 +249,21 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const renderHasData = () => {
+      let _slot4;
       return vue.withDirectives(vue.createVNode("div", {
         "class": [ns.b("scroll"), ns.e("content")],
         "infinite-scroll-distance": 10,
-        "infinite-scroll-disabled": isLodeMoreDisabled.value
-      }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+        "infinite-scroll-disabled": isLodeMoreDisabled.value,
+        "ref": "infiniteScroll",
+        "key": infiniteScrollKey.value
+      }, [renderDataViewContent(), c.model.pagingMode === 3 && !(c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size) && vue.createVNode("div", {
+        "class": ns.e("load-more-button")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "text": true,
+        "onClick": () => c.loadMore()
+      }, _isSlot(_slot4 = ibiz.i18n.t("control.common.loadMore")) ? _slot4 : {
+        default: () => [_slot4]
+      })])]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
     const renderNoData = () => {
       const {
@@ -256,6 +283,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       c,
       ns,
       classNames,
+      infiniteScroll,
       renderHasData,
       renderNoData,
       onPageChange,
@@ -273,10 +301,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       content = [this.c.state.noSort ? null : vue.createVNode(vue.resolveComponent("iBizSortBar"), {
         "onSortChange": (item, order) => {
           this.c.setSort(item.key, order);
-          this.c.load();
+          this.c.load({
+            isInitialLoad: this.c.model.pagingMode === 2 || this.c.model.pagingMode === 3
+          });
         },
         "sortItems": this.c.state.sortItems
-      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), this.c.state.enablePagingBar ? vue.createVNode(vue.resolveComponent("iBizPagination"), {
+      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? vue.createVNode(vue.resolveComponent("iBizPagination"), {
         "class": this.ns.e("pagination"),
         "total": this.c.state.total,
         "curPage": this.c.state.curPage,

package/lib/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}
+.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more-button{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}

package/lib/control/drtab/drtab-control.util.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+var vue = require('vue');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.18_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
+
+"use strict";
+function useAppDRTab(c, controlRef, counterData) {
+  let resizeObserver = null;
+  let lastDrTabWidth = 0;
+  const visibleItems = vue.ref([]);
+  const moreItems = vue.ref([]);
+  const calcDomWidth = (text, style = {}) => {
+    let domWidth = 0;
+    const dom = document.createElement("span");
+    const sonDom = document.createElement("span");
+    sonDom.innerHTML = text;
+    Object.assign(sonDom.style, style);
+    Object.assign(dom.style, {
+      width: "auto",
+      position: "absolute",
+      left: "-9999px"
+    });
+    dom.appendChild(sonDom);
+    document.body.appendChild(dom);
+    domWidth = dom.offsetWidth;
+    document.body.removeChild(dom);
+    return domWidth;
+  };
+  function updateVisibleItems() {
+    const { drTabPages, showMore } = c.state;
+    if (!controlRef.value || !showMore || drTabPages.length === 0) {
+      visibleItems.value = drTabPages;
+      moreItems.value = [];
+      return;
+    }
+    const totalDom = controlRef.value.$el;
+    const totalWidth = totalDom.offsetWidth;
+    let accumulatedWidth = 0;
+    let splitIndex = -1;
+    drTabPages.forEach((tab, index) => {
+      if (splitIndex === -1) {
+        const caption = tab.caption || "";
+        const counterNum = tab.counterId ? counterData[tab.counterId] : void 0;
+        const fontSize = "var(--".concat(namespace.defaultNamespace, "-font-size-regular)");
+        if (counterNum != null && !(!counterNum && counterNum !== 0) && !(tab.counterMode === 1 && counterNum <= 0)) {
+          const counterStyle = {
+            marginLeft: "var(--".concat(namespace.defaultNamespace, "-spacing-tight)"),
+            minWidth: "20px",
+            fontSize
+          };
+          const counterWidth = calcDomWidth(String(counterNum), counterStyle);
+          accumulatedWidth += counterWidth;
+        }
+        const tabStyle = {
+          padding: index === 0 ? "0 var(--".concat(namespace.defaultNamespace, "-spacing-base) 0 0") : "0 var(--".concat(namespace.defaultNamespace, "-spacing-base)"),
+          fontSize
+        };
+        const tabWidth = calcDomWidth(caption, tabStyle);
+        accumulatedWidth += tabWidth;
+        const moreStyle = {
+          padding: "0 0 0 var(--".concat(namespace.defaultNamespace, "-spacing-base)"),
+          fontSize
+        };
+        const moreWidth = calcDomWidth(
+          "".concat(ibiz.i18n.t("app.more"), " ^"),
+          moreStyle
+        );
+        if (accumulatedWidth + moreWidth > totalWidth) {
+          splitIndex = index;
+        }
+      }
+    });
+    if (splitIndex !== -1) {
+      visibleItems.value = drTabPages.slice(0, splitIndex);
+      moreItems.value = drTabPages.slice(splitIndex);
+    } else {
+      visibleItems.value = drTabPages;
+      moreItems.value = [];
+    }
+  }
+  const calcDrTabWidth = () => {
+    if (window.ResizeObserver) {
+      const drTabDom = controlRef.value.$el;
+      if (drTabDom) {
+        resizeObserver = new ResizeObserver((entries) => {
+          const width = entries[0].contentRect.width;
+          if (width !== lastDrTabWidth) {
+            updateVisibleItems();
+            lastDrTabWidth = width;
+          }
+        });
+        resizeObserver.observe(drTabDom);
+      }
+    }
+  };
+  vue.watch(
+    () => c.state.drTabPages,
+    () => {
+      updateVisibleItems();
+    },
+    { deep: true }
+  );
+  const stop = vue.watchEffect(() => {
+    if (controlRef.value) {
+      calcDrTabWidth();
+    }
+  });
+  vue.onUnmounted(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+    stop();
+  });
+  return { visibleItems, moreItems };
+}
+
+exports.useAppDRTab = useAppDRTab;

package/lib/control/drtab/drtab.cjs

@@ -7,11 +7,9 @@ var runtime = require('@ibiz-template/runtime');
 var ramda = require('ramda');
 var drtab_controller = require('./drtab.controller.cjs');
 require('./drtab.css');
+var drtabControl_util = require('./drtab-control.util.cjs');
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-}
 const DRTabControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDrTabControl",
   props: {
@@ -35,7 +33,12 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new drtab_controller.DRTabController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = vueRouter.useRouter();
+    const controlRef = vue.ref();
     const counterData = vue.reactive({});
+    const {
+      visibleItems,
+      moreItems
+    } = drtabControl_util.useAppDRTab(c, controlRef, counterData);
     const fn = (counter) => {
       Object.assign(counterData, counter);
     };
@@ -52,6 +55,10 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const handleTabChange = () => {
       c.handleTabChange();
     };
+    const handleMoreChange = (key) => {
+      c.state.activeName = key;
+      c.handleTabChange();
+    };
     const route = vueRouter.useRoute();
     let expViewRoutePath = "";
     if (c.routeDepth) {
@@ -88,50 +95,104 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      controlRef,
       counterData,
-      handleTabChange
+      visibleItems,
+      moreItems,
+      handleTabChange,
+      handleMoreChange
     };
   },
   render() {
-    let _slot;
     const {
       isCreated,
-      drTabPages,
       isCalculatedPermission
     } = this.c.state;
+    const moreTab = this.moreItems.find((tab) => tab.tag === this.c.state.activeName) || {};
+    const more = vue.createVNode(vue.resolveComponent("el-dropdown"), {
+      "trigger": "click",
+      "class": this.ns.b("more-dropdown"),
+      "popper-class": this.ns.b("more-dropdown-popper")
+    }, {
+      default: () => {
+        return vue.createVNode("div", {
+          "class": this.ns.be("more-dropdown", "link"),
+          "onClick": (e) => e.stopPropagation()
+        }, [vue.createVNode("span", null, [ibiz.i18n.t("app.more"), vue.createTextVNode(" ")]), vue.createVNode("svg", {
+          "viewBox": "0 0 16 16",
+          "xmlns": "http://www.w3.org/2000/svg",
+          "height": "1em",
+          "width": "1em"
+        }, [vue.createVNode("g", {
+          "stroke-width": "1",
+          "fill-rule": "evenodd"
+        }, [vue.createVNode("path", {
+          "d": "M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z"
+        }, null)])])]);
+      },
+      dropdown: () => {
+        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+          default: () => {
+            return this.moreItems.map((item) => {
+              return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+                "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : ""],
+                "onClick": () => this.handleMoreChange(item.tag)
+              }, {
+                default: () => [vue.createVNode("span", {
+                  "class": [this.ns.be("more-dropdown-popper", "label")]
+                }, [vue.createVNode("span", {
+                  "class": this.ns.bem("more-dropdown-popper", "label", "text"),
+                  "title": item.caption || ""
+                }, [item.caption || ""]), item.counterId && this.counterData[item.counterId] != null && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": this.ns.bem("more-dropdown-popper", "label", "counter"),
+                  "value": this.counterData[item.counterId],
+                  "counterMode": item.counterMode
+                }, null)])]
+              });
+            });
+          }
+        });
+      }
+    });
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "ref": "controlRef",
       "controller": this.c,
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.moreItems.length > 0 ? this.ns.b("more") : ""]
     }, {
       default: () => [isCreated && isCalculatedPermission && vue.createVNode(vue.resolveComponent("el-tabs"), {
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
         "onTabChange": this.handleTabChange
-      }, _isSlot(_slot = drTabPages.map((tab) => {
-        const counterNum = tab.counterId ? this.counterData[tab.counterId] : void 0;
-        if (!tab.hidden) {
-          return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
-            "class": this.ns.e("tab-item"),
-            "label": tab.caption + counterNum,
-            "disabled": tab.disabled,
-            "name": tab.tag
-          }, {
-            label: () => {
-              return vue.createVNode("span", {
-                "class": this.ns.b("label")
-              }, [vue.createVNode("span", {
-                "class": this.ns.be("label", "text")
-              }, [tab.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                "class": this.ns.e("counter"),
-                "value": counterNum,
-                "counterMode": tab.counterMode
-              }, null)]);
-            }
-          });
-        }
-        return null;
-      })) ? _slot : {
-        default: () => [_slot]
+      }, {
+        default: () => [this.visibleItems.map((tab) => {
+          const counterNum = tab.counterId ? this.counterData[tab.counterId] : void 0;
+          if (!tab.hidden) {
+            return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
+              "class": this.ns.e("tab-item"),
+              "label": tab.caption + counterNum,
+              "disabled": tab.disabled,
+              "name": tab.tag
+            }, {
+              label: () => {
+                return vue.createVNode("span", {
+                  "class": this.ns.b("label")
+                }, [vue.createVNode("span", {
+                  "class": this.ns.be("label", "text")
+                }, [tab.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "class": this.ns.e("counter"),
+                  "value": counterNum,
+                  "counterMode": tab.counterMode
+                }, null)]);
+              }
+            });
+          }
+          return null;
+        }), this.moreItems.length > 0 && vue.createVNode(vue.resolveComponent("el-tab-pane"), {
+          "label": "",
+          "name": moreTab.tag
+        }, {
+          label: () => more
+        })]
       })]
     });
   }

package/lib/control/drtab/drtab.controller.cjs

@@ -86,6 +86,7 @@ class DRTabController extends runtime.ControlController {
   initState() {
     super.initState();
     this.state.drTabPages = [];
+    this.state.showMore = false;
   }
   /**
    * 创建完成
@@ -97,6 +98,18 @@ class DRTabController extends runtime.ControlController {
     await super.onCreated();
     await this.initCounter();
   }
+  /**
+   * 部件参数解析
+   *
+   * @protected
+   * @memberof ControlController
+   */
+  handleControlParams() {
+    super.handleControlParams();
+    if (this.controlParams.showmore) {
+      this.state.showMore = this.controlParams.showmore === "true";
+    }
+  }
   /**
    * 通过计数器数据，计算项状态
    *