feat: 调整 reload 方法位置，现在调整为在 MenuTag 栏

CHANGELOG.md

@@ -17,6 +17,7 @@
 - 路由切换过渡动画优化，新增两个新过渡动画。默认绑定过渡动画更改为 `fade-slide`
 - `app-config` 暴露 `CONTENT_TRANSITION_OPTIONS` 配置项，用于配置路由切换过渡动画
 - 变更 `regexConfig` 配置项 `validCSSUnit` 为 `cssUnit`
+- 调整 `reload` 方法位置，现在调整为在 `MenuTag` 栏
 
 ## 4.6.0
 

src/icons/reload.svg

@@ -1,7 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-  viewBox="0 0 512 512">
-  <path d="M320 146s24.36-12-64-12a160 160 0 1 0 160 160" fill="none" stroke="currentColor"
-    stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path>
-  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-    stroke-width="32" d="M256 58l80 80l-80 80"></path>
+<svg class="inline-block text-22px" viewBox="0 0 24 24" width="1em" height="1em">
+  <path fill="currentColor"
+    d="M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z"></path>
 </svg>

src/layout/components/MenuTag/index.scss

@@ -83,3 +83,7 @@ $menuTagWrapperWidth: 76px;
     height: 18px;
   }
 }
+
+.menu-tag__right-setting--spinning {
+  animation: elementRotate 0.8s linear infinite;
+}

src/layout/components/MenuTag/index.tsx

@@ -48,6 +48,7 @@ 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 type { ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types'
@@ -150,6 +151,7 @@ export default defineComponent({
       actionDropdownShow: false,
     })
     const MENU_TAG_DATA = 'menu_tag_data' // 注入 tag 前缀
+    const globalMainLayoutLoad = getVariableToRefs('globalMainLayoutLoad')
 
     /**
      *
@@ -412,11 +414,13 @@ export default defineComponent({
       menuTagMouseleave,
       MENU_TAG_DATA,
       iconConfig: {
-        width: 20,
-        height: 28,
+        width: 22,
+        height: 22,
       },
       maximize,
       getRootPath,
+      reload,
+      globalMainLayoutLoad,
     }
   },
   render() {
@@ -426,6 +430,7 @@ export default defineComponent({
       uuidScrollBar,
       getMenuTagOptions,
       MENU_TAG_DATA,
+      globalMainLayoutLoad,
     } = this
     const {
       maximize,
@@ -437,6 +442,7 @@ export default defineComponent({
       menuTagMouseenter,
       menuTagMouseleave,
       actionDropdownSelect,
+      reload,
     } = this
 
     return (
@@ -569,6 +575,19 @@ export default defineComponent({
                   maximize(true)
                 }}
               />
+              <RIcon
+                name="reload"
+                width={iconConfig.width}
+                height={iconConfig.height}
+                customClassName={`menu-tag__right-setting ${
+                  !globalMainLayoutLoad
+                    ? 'menu-tag__right-setting--spinning'
+                    : ''
+                }`}
+                onClick={() => {
+                  reload()
+                }}
+              />
               <RMoreDropdown
                 class="menu-tag__dropdown"
                 options={this.moreOptions}

src/layout/components/SiderBar/index.scss

@@ -6,9 +6,5 @@
 
   > .layout-header__method {
     width: 100%;
-
-    & .ray-icon__reload--loading {
-      animation: elementRotate 0.8s linear infinite;
-    }
   }
 }

src/layout/components/SiderBar/index.tsx

@@ -34,7 +34,7 @@ import {
   createLeftIconOptions,
   createRightIconOptions,
 } from './shared'
-import { useDevice, useSpinning, useI18n } from '@/hooks'
+import { useDevice, useI18n } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useFullscreen } from 'vue-hooks-plus'
 import { useSettingGetters, useSettingActions } from '@/store'
@@ -46,7 +46,6 @@ export default defineComponent({
   setup() {
     const { updateLocale, updateSettingState } = useSettingActions()
     const { t } = useI18n()
-    const { reload } = useSpinning()
 
     const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
       document.getElementsByTagName('html')[0],
@@ -56,7 +55,6 @@ export default defineComponent({
     const globalSearchShown = ref(false) // 是否展示全局搜索
     const { isTabletOrSmaller } = useDevice()
     const globalDrawerValue = getVariableToRefs('globalDrawerValue')
-    const globalMainLayoutLoad = getVariableToRefs('globalMainLayoutLoad')
 
     /**
      *
@@ -66,7 +64,6 @@ export default defineComponent({
       createLeftIconOptions({
         isFullscreen,
         isTabletOrSmaller,
-        globalMainLayoutLoad,
       }),
     )
     /**
@@ -77,14 +74,9 @@ export default defineComponent({
       createRightIconOptions({
         isFullscreen,
         isTabletOrSmaller,
-        globalMainLayoutLoad,
       }),
     )
     const iconEventMap: IconEventMapOptions = {
-      // 刷新组件重新加载，手动设置 800ms loading 时长
-      reload: () => {
-        reload()
-      },
       setting: () => {
         showSettings.value = true
       },

src/layout/components/SiderBar/shared.ts

@@ -76,18 +76,9 @@ export const avatarDropdownClick = (key: string | number) => {
  *   - false: 刷新按钮
  */
 export const createLeftIconOptions = (opts: IconOptionsFC) => {
-  const { isTabletOrSmaller, globalMainLayoutLoad } = opts
-  const { t } = useI18n()
+  const { isTabletOrSmaller } = opts
 
-  const notTableOrSmallerOptions: IconOptions[] = [
-    {
-      name: 'reload',
-      size: 18,
-      tooltip: t('headerTooltip.Reload'),
-      iconClass: !globalMainLayoutLoad.value ? 'ray-icon__reload--loading' : '',
-      eventKey: 'reload',
-    },
-  ]
+  const notTableOrSmallerOptions: IconOptions[] = []
   const tableOrSmallerOptions: IconOptions[] = [
     {
       name: 'menu',

src/layout/components/SiderBar/type.ts

@@ -26,5 +26,4 @@ export interface IconOptions {
 export interface IconOptionsFC {
   isTabletOrSmaller: Ref<boolean>
   isFullscreen: Ref<boolean>
-  globalMainLayoutLoad: Ref<boolean>
 }