version: v5.0.2

CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGE LOG
 
+## 5.0.2
+
+## Feats
+
+- 暴露 `setupAppMenu` 方法，提供自定义菜单渲染时机能力
+
+## Fixes
+
+- 修复 `MenuTag` 右键菜单不能被选中的问题
+- 修复 `Menu` 设置 `iconSize`, `iconCollapseSize` 等属性，不能及时刷新渲染的问题，现在新增手动刷新操作按钮
+
+> 菜单渲染是很复杂、很耗时的操作，所以在权衡以后还是考虑使用手动刷新操作方式更新菜单状态。
+
 ## 5.0.1
 
 本次更新灵感来自于 `vben admin 5` 项目。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.0.1",
+  "version": "5.0.2",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",

src/layout/components/Menu/index.tsx

@@ -21,7 +21,6 @@ export default defineComponent({
       useMenuActions()
     const { getMenuConfig } = useSettingGetters()
     const { getMenuOptions, getCollapsed, getMenuKey } = useMenuGetters()
-
     const modelMenuKey = computed({
       get: () => {
         // eslint-disable-next-line vue/no-async-in-computed-properties

src/layout/components/MenuTag/index.tsx

@@ -16,7 +16,7 @@
  * 该模板中引入了 Root Path 概念，在 MenuTag 中除了关闭左右侧标签操作能主动移除 Root Tag 之外其余的操作都不允许。
  *
  * outsideClick 方法优先级不如 contextmenu 事件高，所以可能会出现重复右键菜单时，闪烁问题；
- * 虽然使用 throttle 方法进行优化，但是该问题本质并没有解决（v5.0.1 版本修复了该问题）。
+ * 虽然使用 throttle 方法进行优化，但是该问题本质并没有解决（v5.0.2 版本修复了该问题）。
  */
 
 import './index.scss'
@@ -34,7 +34,6 @@ import { RIcon, RMoreDropdown } from '@/components'
 import { useMenuGetters, useMenuActions } from '@/store'
 import { hasClass, uuid, queryElements } from '@/utils'
 import { useMaximize, useSpinning, useAppRoot, useSiderBar } from '@/hooks'
-import { throttle } from 'lodash-es'
 import { getVariableToRefs } from '@/global-variable'
 import { useTemplateRef } from 'vue'
 
@@ -65,7 +64,6 @@ export default defineComponent({
       'closeRight',
       'closeLeft',
       'closeOther',
-      'closeCurrentPage',
     ]
     // 当前右键标签页索引位置
     let currentContextmenuIndex = Infinity
@@ -179,6 +177,8 @@ export default defineComponent({
     const naiveScrollbarContainerClass = 'n-scrollbar-container'
     // 缓存上一次的菜单 key
     let catchMenuKey = getMenuKey.value
+    // 当前鼠标是否划入 menu tag
+    const isMouseInMenuTag = ref(false)
 
     // 关闭当前菜单标签，如果只有一个标签，则不允许关闭
     const closeCurrentMenuTag = (idx: number) => {
@@ -260,21 +260,14 @@ export default defineComponent({
       actionState.actionDropdownShow = false
 
       nextTick(() => {
-        actionState.actionDropdownShow = true
         actionState.x = e.clientX
         actionState.y = e.clientY
+        actionState.actionDropdownShow = true
       })
     }
 
     // 动态设置某些项禁用
     const setDisabledAccordionToIndex = () => {
-      const { closeable } =
-        getMenuTagOptions.value[currentContextmenuIndex] ??
-        ({} as MenuTagOptions)
-
-      // 是否需要禁用关闭当前标签页
-      setMoreOptionsDisabled('closeCurrentPage', !closeable ?? false)
-
       // 是否需要禁用关闭右侧标签页
       checkCloseRight(currentContextmenuIndex)
         ? setMoreOptionsDisabled('closeRight', false)
@@ -306,13 +299,17 @@ export default defineComponent({
       ) {
         option.closeable = true
       }
+
+      isMouseInMenuTag.value = true
     }
 
     // 移出 MenuTag 时，判断是否为当前已激活 key
     const menuTagMouseleave = (option: MenuTagOptions) => {
       if (option.fullPath !== getMenuKey.value) {
         option.closeable = false
       }
+
+      isMouseInMenuTag.value = false
     }
 
     // 每当新的页面打开后，将滚动条横向滚到至底部，使用 nextTick 避免元素未渲染挂载至页面
@@ -359,7 +356,7 @@ export default defineComponent({
       (ndata, odata) => {
         // 当 menuTagOptions 长度为 1时，禁用所有 canDisabledOptions 匹配的项
         moreOptions.value.forEach((curr) => {
-          if (canDisabledOptions.includes(curr.key)) {
+          if (canDisabledOptions.includes(curr.key as string)) {
             ndata.length > 1 ? (curr.disabled = false) : (curr.disabled = true)
           }
         })
@@ -384,8 +381,7 @@ export default defineComponent({
     )
     watchEffect(() => {
       if (actionState.actionDropdownShow) {
-        // 使用节流函数，避免右键菜单闪烁问题
-        throttle(setDisabledAccordionToIndex, 300)?.()
+        setDisabledAccordionToIndex()
       }
 
       if (catchMenuKey !== getMenuKey.value) {
@@ -418,6 +414,7 @@ export default defineComponent({
       reload,
       globalMainLayoutLoad,
       maximizeBtnClick,
+      isMouseInMenuTag,
     }
   },
   render() {
@@ -427,6 +424,7 @@ export default defineComponent({
       getMenuTagOptions,
       MENU_TAG_DATA,
       globalMainLayoutLoad,
+      isMouseInMenuTag,
     } = this
     const {
       maximizeBtnClick,
@@ -454,6 +452,11 @@ export default defineComponent({
             trigger="manual"
             placement="bottom-start"
             onSelect={actionDropdownSelect.bind(this)}
+            onClickoutside={() => {
+              if (!isMouseInMenuTag) {
+                this.actionState.actionDropdownShow = false
+              }
+            }}
           />
           <NFlex
             class="menu-tag-space"
@@ -510,12 +513,10 @@ export default defineComponent({
                       onContextmenu: menuTagContextMenu.bind(this, idx),
                       onMouseenter: menuTagMouseenter.bind(this, curr),
                       onMouseleave: menuTagMouseleave.bind(this, curr),
-                      onBlur: () => {
-                        this.actionState.actionDropdownShow = false
-                      },
                       [MENU_TAG_DATA]: curr.fullPath,
                     }}
                     size="small"
+                    focusable={false}
                   >
                     {{
                       default: () => (

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -21,9 +21,9 @@ import ThemeSegment from './components/ThemeSegment'
 import { RIcon } from '@/components'
 
 import { APP_THEME, CONTENT_TRANSITION_OPTIONS } from '@/app-config'
-import { useSettingGetters, useSettingActions } from '@/store'
+import { useSettingGetters, useSettingActions, useMenuActions } from '@/store'
 import { defaultSettingConfig } from './constant'
-import { forIn } from 'lodash-es'
+import { forIn, throttle } from 'lodash-es'
 
 import type { PropType } from 'vue'
 import type { Placement } from '@/types'
@@ -60,6 +60,7 @@ export default defineComponent({
       getMenuConfig,
       getDrawerPlacement,
     } = useSettingGetters()
+    const { setupAppMenu } = useMenuActions()
 
     const modelShow = computed({
       get: () => props.show,
@@ -84,10 +85,14 @@ export default defineComponent({
       set: (value) => {},
     })
 
+    const throttleSetupAppMenu = throttle(setupAppMenu, 300)
+
     const defaultSettingBtnClick = () => {
       forIn(defaultSettingConfig, (value, key) => {
         updateSettingState(key as keyof SettingState, value)
       })
+
+      throttleSetupAppMenu()
     }
 
     return {
@@ -98,6 +103,7 @@ export default defineComponent({
       updateSettingState,
       modelReactive,
       defaultSettingBtnClick,
+      throttleSetupAppMenu,
     }
   },
   render() {
@@ -106,6 +112,7 @@ export default defineComponent({
       changePrimaryColor,
       updateSettingState,
       defaultSettingBtnClick,
+      throttleSetupAppMenu,
     } = this
 
     return (
@@ -226,7 +233,17 @@ export default defineComponent({
                 />
               </NDescriptionsItem>
             </NDescriptions>
-            <NDivider titlePlacement="center">菜单样式</NDivider>
+            <NDivider titlePlacement="center">
+              <NFlex wrap={false} align="center" size={[4, 0]}>
+                <NTooltip placement="top" showArrow={false}>
+                  {{
+                    trigger: () => <RIcon name="question" size="16" />,
+                    default: () => '菜单渲染是一个复杂、耗时的操作，请手动更新',
+                  }}
+                </NTooltip>
+                <NText>菜单样式</NText>
+              </NFlex>
+            </NDivider>
             <NForm showFeedback={true} showRequireMark={false}>
               <NFormItem label="每级菜单缩进">
                 <NInputNumber
@@ -274,7 +291,7 @@ export default defineComponent({
                   }}
                 />
               </NFormItem>
-              <NFormItem label="折叠菜单宽度" showFeedback={false}>
+              <NFormItem label="折叠菜单宽度">
                 <NInputNumber
                   v-model:value={
                     this.modelReactive.getMenuConfig.collapsedWidth
@@ -290,6 +307,19 @@ export default defineComponent({
                   }}
                 />
               </NFormItem>
+              <NFormItem showFeedback={false} showLabel={false}>
+                <NButton
+                  onClick={throttleSetupAppMenu}
+                  block
+                  type="info"
+                  secondary
+                >
+                  {{
+                    icon: () => <RIcon name="question" size="16" />,
+                    default: () => '点击刷新',
+                  }}
+                </NButton>
+              </NFormItem>
             </NForm>
             <NDivider titlePlacement="center">
               <NFlex wrap={false} align="center" size={[4, 0]}>

src/store/hooks/useMenuStore.ts

@@ -73,6 +73,7 @@ export const useMenuActions = () => {
     setMenuTagOptions,
     resolveOption,
     updateMenuState,
+    setupAppMenu,
   } = piniaMenuStore()
 
   return {
@@ -82,5 +83,6 @@ export const useMenuActions = () => {
     setMenuTagOptions,
     resolveOption,
     updateMenuState,
+    setupAppMenu,
   }
 }

src/store/modules/menu/index.ts

@@ -436,6 +436,7 @@ export const piniaMenuStore = defineStore(
       setMenuTagOptions,
       resolveOption,
       updateMenuState,
+      setupAppMenu,
     }
   },
   {