@deppon/deppon-template 2.3.0 → 2.3.1

package/es/pro-layout/ProLayout.vue_vue_type_script_setup_true_lang.vue.js

@@ -1,9 +1,9 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, openBlock, createBlock, unref, normalizeClass, withCtx, createCommentVNode, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createTextVNode, toDisplayString, createVNode, Fragment, renderList, resolveDynamicComponent, withDirectives, mergeProps, withModifiers, vShow } from 'vue';
+import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, withCtx, createCommentVNode, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createTextVNode, toDisplayString, createVNode, Fragment, renderList, resolveDynamicComponent, withDirectives, mergeProps, withModifiers, vShow } from 'vue';
 import { useRouter, useRoute } from '@deppon/deppon-router';
-import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElBadge, ElSubMenu, ElInput, ElIcon, ElButton, ElAside, ElScrollbar, ElMain, ElFooter } from '@deppon/deppon-ui';
+import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElBadge, ElSubMenu, ElInput, ElIcon, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } from '@deppon/deppon-ui';
 import { Search, Service, Bell, Close, Refresh, Expand, Fold, ArrowRight, ArrowLeft } from '@deppon/deppon-ui/icons-vue';
 import { isMobile as _isMobile } from '../utils/other.js';
 
@@ -81,23 +81,17 @@ var _hoisted_20 = {
   "class": "pro-layout__menu-item-char"
 };
 var _hoisted_21 = {
-  "class": "pro-layout__menu-item-title"
-};
-var _hoisted_22 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_23 = {
-  key: 2
-};
-var _hoisted_24 = {
+var _hoisted_22 = {
   key: 1,
   "class": "pro-layout__menu-item-char"
 };
-var _hoisted_25 = {
+var _hoisted_23 = {
   "class": "pro-layout__tag-label"
 };
-var _hoisted_26 = {
+var _hoisted_24 = {
   "class": "pro-layout__tag-actions"
 };
 var script = {
@@ -298,6 +292,8 @@ var script = {
     var windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920);
     var menuSearchText = ref('');
     var headerSearchText = ref('');
+    var menuTitleRefs = new Map();
+    var menuTitleOverflowMap = ref(new Map());
 
     // TagsView 相关
     var visitedTags = ref([]);
@@ -309,6 +305,43 @@ var script = {
         return t.path;
       }).join('-'));
     });
+    var getMenuTitleKey = function getMenuTitleKey(item) {
+      var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      return "".concat(prefix).concat((item === null || item === void 0 ? void 0 : item.path) || (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.label) || '');
+    };
+    var checkMenuTitleOverflow = function checkMenuTitleOverflow(key) {
+      var titleEl = menuTitleRefs.get(key);
+      var isOverflow = Boolean(titleEl && titleEl.scrollWidth > titleEl.clientWidth);
+      if (menuTitleOverflowMap.value.get(key) !== isOverflow) {
+        var nextMap = new Map(menuTitleOverflowMap.value);
+        nextMap.set(key, isOverflow);
+        menuTitleOverflowMap.value = nextMap;
+      }
+    };
+    var setMenuTitleRef = function setMenuTitleRef(el, key) {
+      if (!key) return;
+      if (el) {
+        menuTitleRefs.set(key, el);
+        nextTick(function () {
+          return checkMenuTitleOverflow(key);
+        });
+        return;
+      }
+      menuTitleRefs["delete"](key);
+      if (menuTitleOverflowMap.value.has(key)) {
+        var nextMap = new Map(menuTitleOverflowMap.value);
+        nextMap["delete"](key);
+        menuTitleOverflowMap.value = nextMap;
+      }
+    };
+    var checkAllMenuTitleOverflow = function checkAllMenuTitleOverflow() {
+      menuTitleRefs.forEach(function (_, key) {
+        return checkMenuTitleOverflow(key);
+      });
+    };
+    var isMenuTitleOverflow = function isMenuTitleOverflow(key) {
+      return menuTitleOverflowMap.value.get(key) === true;
+    };
 
     // 从 menuItems 中查找标题
     var _findMenuTitle = function findMenuTitle(path) {
@@ -499,13 +532,19 @@ var script = {
         collapsed.value = true;
       }
     };
+    var handleMenuTitleResize = function handleMenuTitleResize() {
+      nextTick(checkAllMenuTitleOverflow);
+    };
     onMounted(function () {
       checkMobile();
+      handleMenuTitleResize();
+      window.addEventListener('resize', handleMenuTitleResize);
       if (props.responsive) {
         window.addEventListener('resize', checkMobile);
       }
     });
     onUnmounted(function () {
+      window.removeEventListener('resize', handleMenuTitleResize);
       if (props.responsive) {
         window.removeEventListener('resize', checkMobile);
       }
@@ -659,10 +698,16 @@ var script = {
     // 监听 menuGroups 变化，初始化展开状态
     watch(menuGroups, function () {
       initMenuGroupExpanded();
+      nextTick(checkAllMenuTitleOverflow);
     }, {
       immediate: true,
       deep: true
     });
+    watch(function () {
+      return collapsed.value;
+    }, function () {
+      nextTick(checkAllMenuTitleOverflow);
+    });
 
     // 编辑模式状态
     var isEditMode = ref(false);
@@ -1013,7 +1058,22 @@ var script = {
                                 })
                               }, {
                                 title: withCtx(function () {
-                                  return [createElementVNode("span", _hoisted_21, toDisplayString(item.title || item.label), 1 /* TEXT */), group.type === 'common' && !collapsed.value && isEditMode.value ? (openBlock(), createBlock(unref(ElIcon), {
+                                  return [createVNode(unref(ElTooltip), {
+                                    content: item.title || item.label,
+                                    placement: "right",
+                                    disabled: collapsed.value || !isMenuTitleOverflow(getMenuTitleKey(item, "group-".concat(groupIndex, "-")))
+                                  }, {
+                                    "default": withCtx(function () {
+                                      return [createElementVNode("span", {
+                                        ref_for: true,
+                                        ref: function ref(el) {
+                                          return setMenuTitleRef(el, getMenuTitleKey(item, "group-".concat(groupIndex, "-")));
+                                        },
+                                        "class": "pro-layout__menu-item-title"
+                                      }, toDisplayString(item.title || item.label), 513 /* TEXT, NEED_PATCH */)];
+                                    }),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["content", "disabled"]), group.type === 'common' && !collapsed.value && isEditMode.value ? (openBlock(), createBlock(unref(ElIcon), {
                                     key: 0,
                                     "class": "pro-layout__menu-item-delete",
                                     onClick: withModifiers(function ($event) {
@@ -1050,7 +1110,23 @@ var script = {
                                       return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
                                     }),
                                     _: 2 /* DYNAMIC */
-                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(item.title || item.label), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                  }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createBlock(unref(ElTooltip), {
+                                    key: 2,
+                                    content: item.title || item.label,
+                                    placement: "right",
+                                    disabled: !isMenuTitleOverflow(getMenuTitleKey(item, "group-".concat(groupIndex, "-submenu-title-")))
+                                  }, {
+                                    "default": withCtx(function () {
+                                      return [createElementVNode("span", {
+                                        ref_for: true,
+                                        ref: function ref(el) {
+                                          return setMenuTitleRef(el, getMenuTitleKey(item, "group-".concat(groupIndex, "-submenu-title-")));
+                                        },
+                                        "class": "pro-layout__menu-item-title"
+                                      }, toDisplayString(item.title || item.label), 513 /* TEXT, NEED_PATCH */)];
+                                    }),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["content", "disabled"])) : createCommentVNode("v-if", true)];
                                 }),
                                 "default": withCtx(function () {
                                   return [(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, function (child) {
@@ -1060,7 +1136,22 @@ var script = {
                                       disabled: child.disabled
                                     }, {
                                       title: withCtx(function () {
-                                        return [createTextVNode(toDisplayString(child.title || child.label), 1 /* TEXT */)];
+                                        return [createVNode(unref(ElTooltip), {
+                                          content: child.title || child.label,
+                                          placement: "right",
+                                          disabled: collapsed.value || !isMenuTitleOverflow(getMenuTitleKey(child, getMenuTitleKey(item, "group-".concat(groupIndex, "-child-"))))
+                                        }, {
+                                          "default": withCtx(function () {
+                                            return [createElementVNode("span", {
+                                              ref_for: true,
+                                              ref: function ref(el) {
+                                                return setMenuTitleRef(el, getMenuTitleKey(child, getMenuTitleKey(item, "group-".concat(groupIndex, "-child-"))));
+                                              },
+                                              "class": "pro-layout__menu-item-title"
+                                            }, toDisplayString(child.title || child.label), 513 /* TEXT, NEED_PATCH */)];
+                                          }),
+                                          _: 2 /* DYNAMIC */
+                                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["content", "disabled"])];
                                       }),
                                       "default": withCtx(function () {
                                         return [child.icon ? (openBlock(), createBlock(unref(ElIcon), {
@@ -1070,7 +1161,7 @@ var script = {
                                             return [(openBlock(), createBlock(resolveDynamicComponent(child.icon)))];
                                           }),
                                           _: 2 /* DYNAMIC */
-                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_24, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
+                                        }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
                                       }),
                                       _: 2 /* DYNAMIC */
                                     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled"]);
@@ -1124,7 +1215,7 @@ var script = {
                           "class": "pro-layout__tag-item"
                         }, {
                           title: withCtx(function () {
-                            return [createElementVNode("span", _hoisted_25, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_26, [createVNode(unref(ElIcon), {
+                            return [createElementVNode("span", _hoisted_23, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_24, [createVNode(unref(ElIcon), {
                               "class": "pro-layout__tag-icon",
                               onClick: withModifiers(function ($event) {
                                 return handleTagRefresh(tag);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.3.0",
+    "version": "2.3.1",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.3.0",
-        "@deppon/deppon-request": "2.3.0",
-        "@deppon/deppon-router": "2.3.0",
-        "@deppon/deppon-ui": "2.3.0",
-        "@deppon/deppon-utils": "2.3.0",
+        "@deppon/deppon-assets": "2.3.1",
+        "@deppon/deppon-request": "2.3.1",
+        "@deppon/deppon-router": "2.3.1",
+        "@deppon/deppon-ui": "2.3.1",
+        "@deppon/deppon-utils": "2.3.1",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"