mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	feat: 优化菜单,添加 menuArrowIconNoTransition 全局配置
				
					
				
			This commit is contained in:
		
							parent
							
								
									3984ab19c9
								
							
						
					
					
						commit
						6e48ad79a7
					
				@ -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",
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										24
									
								
								pnpm-lock.yaml
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										24
									
								
								pnpm-lock.yaml
									
									
									
										generated
									
									
									
								
							@ -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: "*"
 | 
			
		||||
 | 
			
		||||
@ -16,6 +16,7 @@
 | 
			
		||||
  "EpThemeColor": "#409EFF",
 | 
			
		||||
  "ShowLogo": true,
 | 
			
		||||
  "ShowModel": "smart",
 | 
			
		||||
  "menuArrowIconNoTransition": false,
 | 
			
		||||
  "MapConfigure": {
 | 
			
		||||
    "amapKey": "97b3248d1553172e81f168cf94ea667e",
 | 
			
		||||
    "options": {
 | 
			
		||||
 | 
			
		||||
@ -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";
 | 
			
		||||
 | 
			
		||||
@ -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
 | 
			
		||||
 | 
			
		||||
@ -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
									
								
								types/global.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										1
									
								
								types/global.d.ts
									
									
									
									
										vendored
									
									
								
							@ -110,6 +110,7 @@ declare global {
 | 
			
		||||
    EpThemeColor?: string;
 | 
			
		||||
    ShowLogo?: boolean;
 | 
			
		||||
    ShowModel?: string;
 | 
			
		||||
    menuArrowIconNoTransition?: boolean;
 | 
			
		||||
    MapConfigure?: {
 | 
			
		||||
      amapKey?: string;
 | 
			
		||||
      options: {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user