Sfoglia il codice sorgente

feat: 优化菜单,添加 `menuArrowIconNoTransition` 全局配置

xiaoxian521 2 anni fa
parent
commit
6e48ad79a7

+ 1 - 1
package.json

@@ -35,7 +35,7 @@
     "@pureadmin/components": "^1.1.0",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.2.0",
-    "@pureadmin/utils": "^1.2.1",
+    "@pureadmin/utils": "^1.6.5",
     "@vueuse/core": "^9.5.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

+ 12 - 12
pnpm-lock.yaml

@@ -22,7 +22,7 @@ specifiers:
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.2.0
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.2.1
+  "@pureadmin/utils": ^1.6.5
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
   "@types/lodash": ^4.14.180
@@ -133,7 +133,7 @@ dependencies:
   "@pureadmin/components": 1.1.0_vue@3.2.45
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
   "@pureadmin/table": 1.2.0_element-plus@2.2.21
-  "@pureadmin/utils": 1.2.1_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/utils": 1.6.5_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.5.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.22
@@ -1138,8 +1138,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      "@intlify/message-compiler": 9.3.0-beta.6
-      "@intlify/shared": 9.3.0-beta.6
+      "@intlify/message-compiler": 9.3.0-beta.7
+      "@intlify/shared": 9.3.0-beta.7
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.2.2_vue@3.2.45
@@ -1177,14 +1177,14 @@ packages:
       "@intlify/shared": 9.2.2
       source-map: 0.6.1
 
-  /@intlify/message-compiler/9.3.0-beta.6:
+  /@intlify/message-compiler/9.3.0-beta.7:
     resolution:
       {
-        integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==
+        integrity: sha512-70r2UNp6DyKtIM4FgYCwdSuBK7xqCx2rVSXLMFiDRQi8pwooBklmOuzA0j7Q8ffbwKlFUJEEr2xPHZz2TJ6NAw==
       }
     engines: { node: ">= 14" }
     dependencies:
-      "@intlify/shared": 9.3.0-beta.6
+      "@intlify/shared": 9.3.0-beta.7
       source-map: 0.6.1
     dev: true
 
@@ -1195,10 +1195,10 @@ packages:
       }
     engines: { node: ">= 14" }
 
-  /@intlify/shared/9.3.0-beta.6:
+  /@intlify/shared/9.3.0-beta.7:
     resolution:
       {
-        integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==
+        integrity: sha512-weWqKXyv94rdPXbSFYvA4yIwLYDhzgIWfgrVQ6UYARobPFE3BN+woWmjlGmASTyXMzZtTsq21b0LCN9SHN8pxQ==
       }
     engines: { node: ">= 14" }
     dev: true
@@ -1222,7 +1222,7 @@ packages:
         optional: true
     dependencies:
       "@intlify/bundle-utils": 3.2.1_vue-i18n@9.2.2
-      "@intlify/shared": 9.3.0-beta.6
+      "@intlify/shared": 9.3.0-beta.7
       "@rollup/pluginutils": 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.12
@@ -1410,10 +1410,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.6.5_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
+        integrity: sha512-FxMRtKFWxkAcWBqjiI9uxo/3EnObFwAegSXEim5VFrEHogG177skpRj+Z51jfCAdCdwimDrZUdkuEn5c2yqIOA==
       }
     peerDependencies:
       dayjs: "*"

+ 1 - 0
public/serverConfig.json

@@ -16,6 +16,7 @@
   "EpThemeColor": "#409EFF",
   "ShowLogo": true,
   "ShowModel": "smart",
+  "menuArrowIconNoTransition": false,
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "options": {

+ 8 - 0
src/components/ReIcon/src/iconifyIconOffline.ts

@@ -29,6 +29,10 @@ import Refresh from "@iconify-icons/ep/refresh";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Delete from "@iconify-icons/ep/delete";
 import More from "@iconify-icons/ep/more-filled";
+import EpArrowDown from "@iconify-icons/ep/arrow-down";
+import ArrowUp from "@iconify-icons/ep/arrow-up";
+import ArrowRight from "@iconify-icons/ep/arrow-right";
+import ArrowLeft from "@iconify-icons/ep/arrow-left";
 addIcon("check", Check);
 addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
@@ -56,6 +60,10 @@ addIcon("refresh", Refresh);
 addIcon("edits", EditPen);
 addIcon("delete", Delete);
 addIcon("more", More);
+addIcon("ep-arrow-down", EpArrowDown);
+addIcon("ep-arrow-up", ArrowUp);
+addIcon("ep-arrow-right", ArrowRight);
+addIcon("ep-arrow-left", ArrowLeft);
 
 // remixicon
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";

+ 14 - 1
src/layout/components/sidebar/sidebarItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import path from "path";
+import { getConfig } from "@/config";
 import { childrenType } from "../../types";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
@@ -76,6 +77,10 @@ const getSpanStyle = computed(() => {
   };
 });
 
+const expandCloseIcon = computed(() => {
+  return getConfig()?.menuArrowIconNoTransition ? "expand-close-icon" : "";
+});
+
 const onlyOneChild: childrenType = ref(null);
 // 存放菜单是否存在showTooltip属性标识
 const hoverMenuMap = new WeakMap();
@@ -212,7 +217,15 @@ function resolvePath(routePath) {
     </el-menu-item>
   </template>
 
-  <el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)">
+  <el-sub-menu
+    v-else
+    ref="subMenu"
+    :index="resolvePath(props.item.path)"
+    v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
+    :expand-open-icon="useRenderIcon('ep-arrow-up')"
+    :collapse-close-icon="useRenderIcon('ep-arrow-right')"
+    :collapse-open-icon="useRenderIcon('ep-arrow-left')"
+  >
     <template #title>
       <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
         <component

+ 0 - 13
src/style/transition.scss

@@ -40,16 +40,3 @@
 .breadcrumb-leave-active {
   position: absolute;
 }
-
-/**
- * @description 重置el-menu的展开收起动画时长
- * @see {@link https://github.com/element-plus/element-plus/issues/4509#issuecomment-980165001}
- */
-.outer-most .el-collapse-transition-leave-active,
-.outer-most .el-collapse-transition-enter-active {
-  transition: 0.12s all ease-in-out !important;
-}
-
-.horizontal-collapse-transition {
-  transition: var(--pure-transition-duration) all !important;
-}

+ 1 - 0
types/global.d.ts

@@ -110,6 +110,7 @@ declare global {
     EpThemeColor?: string;
     ShowLogo?: boolean;
     ShowModel?: string;
+    menuArrowIconNoTransition?: boolean;
     MapConfigure?: {
       amapKey?: string;
       options: {