From bb61081dddf9bc736046e8fd8448ecec04fb5e6a Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Mon, 22 Jan 2024 17:56:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=20`reload`=20?= =?UTF-8?q?=E6=96=B9=E6=B3=95=E4=BD=8D=E7=BD=AE=EF=BC=8C=E7=8E=B0=E5=9C=A8?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E5=9C=A8=20`MenuTag`=20=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/icons/reload.svg | 9 +++------ src/layout/components/MenuTag/index.scss | 4 ++++ src/layout/components/MenuTag/index.tsx | 23 +++++++++++++++++++++-- src/layout/components/SiderBar/index.scss | 4 ---- src/layout/components/SiderBar/index.tsx | 10 +--------- src/layout/components/SiderBar/shared.ts | 13 ++----------- src/layout/components/SiderBar/type.ts | 1 - 8 files changed, 32 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d078d38..75493bac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ - 路由切换过渡动画优化，新增两个新过渡动画。默认绑定过渡动画更改为 `fade-slide` - `app-config` 暴露 `CONTENT_TRANSITION_OPTIONS` 配置项，用于配置路由切换过渡动画 - 变更 `regexConfig` 配置项 `validCSSUnit` 为 `cssUnit` +- 调整 `reload` 方法位置，现在调整为在 `MenuTag` 栏 ## 4.6.0 diff --git a/src/icons/reload.svg b/src/icons/reload.svg index 9281c215..fd6ae8e9 100644 --- a/src/icons/reload.svg +++ b/src/icons/reload.svg @@ -1,7 +1,4 @@ - - - + + \ No newline at end of file diff --git a/src/layout/components/MenuTag/index.scss b/src/layout/components/MenuTag/index.scss index 36b7f0b8..942ff9d5 100644 --- a/src/layout/components/MenuTag/index.scss +++ b/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; +} diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 956f57ca..24ca72ae 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/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) }} /> + { + reload() + }} + /> .layout-header__method { width: 100%; - - & .ray-icon__reload--loading { - animation: elementRotate 0.8s linear infinite; - } } } diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index b8406934..1e3d42cd 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/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 }, diff --git a/src/layout/components/SiderBar/shared.ts b/src/layout/components/SiderBar/shared.ts index 0eb9bc9c..2542d3df 100644 --- a/src/layout/components/SiderBar/shared.ts +++ b/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', diff --git a/src/layout/components/SiderBar/type.ts b/src/layout/components/SiderBar/type.ts index cbd26f3f..342418dc 100644 --- a/src/layout/components/SiderBar/type.ts +++ b/src/layout/components/SiderBar/type.ts @@ -26,5 +26,4 @@ export interface IconOptions { export interface IconOptionsFC { isTabletOrSmaller: Ref isFullscreen: Ref - globalMainLayoutLoad: Ref }