From 20757214d81963fe5d9c61166f6a35f530123097 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Tue, 1 Aug 2023 16:20:43 +0800 Subject: [PATCH] v4.1.4 --- .npmrc | 2 +- CHANGELOG.md | 14 +++++ src/appConfig/routerConfig.ts | 11 ++-- src/components/RayIcon/index.tsx | 9 +-- src/components/RayIframe/src/index.tsx | 4 +- src/components/RayTable/src/props.ts | 5 +- .../SiderBar/components/GlobalSeach/index.tsx | 5 ++ .../components/SettingDrawer/index.tsx | 10 ++++ .../SiderBar/components/TooltipIcon/index.tsx | 5 +- src/layout/components/SiderBar/index.scss | 6 +- src/layout/components/SiderBar/index.tsx | 34 ++++++++--- src/layout/default/FooterWrapper/index.scss | 2 +- src/layout/index.scss | 31 +++++----- src/layout/index.tsx | 58 ++++++++----------- src/layout/layoutResize.ts | 7 ++- src/router/helper/permission.ts | 7 +-- src/router/helper/routerCopilot.ts | 13 ++--- src/store/modules/setting/index.ts | 1 + src/store/modules/setting/type.ts | 1 + src/styles/root.scss | 11 ++++ .../views/multi-menu-two-one/index.tsx | 6 +- src/views/table/index.tsx | 20 ++++--- 22 files changed, 159 insertions(+), 103 deletions(-) diff --git a/.npmrc b/.npmrc index fcd8a32f..45daf7b5 100644 --- a/.npmrc +++ b/.npmrc @@ -1,4 +1,4 @@ -package-lock=false +package-lock=true prefer-offline=true save-exact=true engine-strict=true diff --git a/CHANGELOG.md b/CHANGELOG.md index c54868d6..6d762633 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ # CHANGE LOG +## 4.1.4 + +该版本后，不会做破坏性更新了。版本功能趋于稳定，后续更新不会那么频繁了。。。。。 + +### Feats + +- 新增版权信息开关 +- 做了一些小小的细节更新 + +### Fixes + +- 修复获取部分元素高度不准确导致布局一些小问题 +- 修复底部版权信息展示问题 + ## 4.1.3 ### Feats diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts index 49b62053..5f85c035 100644 --- a/src/appConfig/routerConfig.ts +++ b/src/appConfig/routerConfig.ts @@ -30,11 +30,12 @@ import type { LayoutInst } from 'naive-ui' */ export const LAYOUT_CONTENT_REF = ref() -/** 是否启用路由切换时顶部加载条 */ -export const SETUP_ROUTER_LOADING_BAR = true - -/** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */ -export const SETUP_ROUTER_GUARD = true +export const SETUP_ROUTER_ACTION = { + /** 是否启用路由切换时顶部加载条 */ + setupRouterLoadingBar: true, + /** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */ + setupRouterGuard: true, +} as const /** * diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx index da437831..6fcd9a46 100644 --- a/src/components/RayIcon/index.tsx +++ b/src/components/RayIcon/index.tsx @@ -12,6 +12,7 @@ import './index.scss' import { call } from '@/utils/vue/index' +import { completeSize } from '@/utils/element' import type { PropType } from 'vue' import type { MaybeArray } from '@/types/modules/utils' @@ -69,11 +70,11 @@ const RayIcon = defineComponent({ const cssVars = computed(() => { const cssVar = { '--ray-icon-width': props.width - ? props.width + 'px' - : props.size + 'px', + ? completeSize(props.width) + : completeSize(props.size), '--ray-icon-height': props.height - ? props.height + 'px' - : props.size + 'px', + ? completeSize(props.height) + : completeSize(props.size), '--ray-icon-depth': props.depth, '--ray-icon-cursor': props.cursor, } diff --git a/src/components/RayIframe/src/index.tsx b/src/components/RayIframe/src/index.tsx index 42fbd6f0..f7834848 100644 --- a/src/components/RayIframe/src/index.tsx +++ b/src/components/RayIframe/src/index.tsx @@ -142,7 +142,9 @@ const RayIframe = defineComponent({ return iframeEl } - expose() + expose({ + iframeInst: iframeRef, + }) onMounted(() => { on(getIframeRef(), 'load', iframeLoadSuccess.bind(this)) diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts index 7de02339..88b16e6a 100644 --- a/src/components/RayTable/src/props.ts +++ b/src/components/RayTable/src/props.ts @@ -36,8 +36,8 @@ const rayTableProps = { * * 可以自定义渲染 */ - type: [String, Object] as PropType, - default: '', + type: [String, Object] as PropType, + default: null, }, action: { /** @@ -208,7 +208,6 @@ const rayTableProps = { default: false, }, } as const - export default rayTableProps /** diff --git a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx index a0043692..ad47961e 100644 --- a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx +++ b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx @@ -61,6 +61,11 @@ const GlobalSeach = defineComponent({ label: '切换', plain: true, }, + { + icon: '↵', + label: '选择', + plain: true, + }, { icon: 'esc', label: '关闭', diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx index ebed3dbf..b10b8c2c 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx @@ -46,6 +46,7 @@ const SettingDrawer = defineComponent({ menuTagSwitch, breadcrumbSwitch, invertSwitch, + footerSwitch, } = storeToRefs(settingStore) const modelShow = computed({ @@ -65,6 +66,7 @@ const SettingDrawer = defineComponent({ changeSwitcher, breadcrumbSwitch, invertSwitch, + footerSwitch, } }, render() { @@ -110,6 +112,14 @@ const SettingDrawer = defineComponent({ } /> + + + this.changeSwitcher(bool, 'footerSwitch') + } + /> + ), diff --git a/src/layout/components/SiderBar/index.scss b/src/layout/components/SiderBar/index.scss index 83c39953..fb64aec0 100644 --- a/src/layout/components/SiderBar/index.scss +++ b/src/layout/components/SiderBar/index.scss @@ -7,10 +7,8 @@ > .layout-header__method { width: 100%; - & .layout-header__method--icon { - cursor: pointer; - outline: none; - border: none; + & .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 0e074e0a..4dbc9d36 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -12,8 +12,9 @@ /** * * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现... - * * 但是我又不想改, 就这样吧 + * + * 如果你希望自己 diy 一些东西，可以自己使用 computed 实现 */ import './index.scss' @@ -33,7 +34,6 @@ import screenfull from 'screenfull' import { useI18n } from '@/locales/useI18n' import type { IconEventMapOptions, IconEventMap } from './type' -import type { SigninCallback } from '@/store/modules/signin/type' const SiderBar = defineComponent({ name: 'SiderBar', @@ -43,12 +43,14 @@ const SiderBar = defineComponent({ const { t } = useI18n() const { updateLocale, changeSwitcher } = settingStore - const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore) + const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } = + storeToRefs(settingStore) const showSettings = ref(false) const spaceItemStyle = { display: 'flex', } const globalSearchShown = ref(false) + const isScreenfull = ref(screenfull.isFullscreen) /** * @@ -59,6 +61,9 @@ const SiderBar = defineComponent({ name: 'reload', size: 18, tooltip: t('headerTooltip.Reload'), + iconClass: computed(() => + !reloadRouteSwitch.value ? 'ray-icon__reload--loading' : '', + ), }, ]) /** @@ -75,7 +80,11 @@ const SiderBar = defineComponent({ { name: 'fullscreen', size: 18, - tooltip: t('headerTooltip.FullScreen'), + tooltip: computed(() => + isScreenfull.value + ? t('headerTooltip.CancelFullScreen') + : t('headerTooltip.FullScreen'), + ), eventKey: 'screen', }, { @@ -92,10 +101,11 @@ const SiderBar = defineComponent({ }, ]) const iconEventMap: IconEventMapOptions = { + // 刷新组件重新加载，手动设置 800ms loading 时长 reload: () => { changeSwitcher(false, 'reloadRouteSwitch') - setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 300) + setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 800) }, setting: () => { showSettings.value = true @@ -111,6 +121,8 @@ const SiderBar = defineComponent({ } else { return (() => { screenfull.toggle() + + isScreenfull.value = !screenfull.isFullscreen })() } }, @@ -158,9 +170,14 @@ const SiderBar = defineComponent({ {{ trigger: () => ( ), @@ -178,7 +195,9 @@ const SiderBar = defineComponent({ {this.rightTooltipIconOptions.map((curr) => ( ))} @@ -193,6 +212,7 @@ const SiderBar = defineComponent({ customClassName="layout-header__method--icon" name="language" size="18" + cursor="pointer" /> .layout-full { - height: 100%; - } + & .n-layout-scroll-container { + & .r-layout-full__viewer .n-layout-scroll-container { + overflow: hidden; - & .layout__view-container__layout .n-layout-scroll-container { - overflow: hidden; - } + & .r-layout-full__viewer-content { + height: var(--layout-content-height); + padding: 16px; - & .layout-content__router-view { - height: var(--layout-content-height); - padding: calc($layoutRouterViewContainer / 2); + & .n-scrollbar-container { + height: 100%; - & .n-scrollbar-container { - height: 100%; - - & .n-scrollbar-content { - height: 100%; + & .n-scrollbar-content { + height: 100%; + } + } } } } diff --git a/src/layout/index.tsx b/src/layout/index.tsx index b3a240b3..61f9ee2a 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -11,7 +11,7 @@ import './index.scss' -import { NLayout, NLayoutContent } from 'naive-ui' +import { NLayout, NLayoutContent, NScrollbar } from 'naive-ui' import Menu from './components/Menu/index' import SiderBar from './components/SiderBar/index' import MenuTag from './components/MenuTag/index' @@ -28,57 +28,49 @@ const Layout = defineComponent({ setup() { const layoutSiderBarRef = ref() const layoutMenuTagRef = ref() + const layoutFooterRef = ref() const settingStore = useSetting() - const { height: windowHeight } = useWindowSize() - const { menuTagSwitch: modelMenuTagSwitch } = storeToRefs(settingStore) + const { menuTagSwitch: modelMenuTagSwitch, footerSwitch } = + storeToRefs(settingStore) const { getLockAppScreen } = useAppLockScreen() const cssVarsRef = layoutHeaderCssVars([ layoutSiderBarRef, layoutMenuTagRef, + layoutFooterRef, ]) return { - windowHeight, modelMenuTagSwitch, cssVarsRef, getLockAppScreen, LAYOUT_CONTENT_REF, layoutSiderBarRef, layoutMenuTagRef, + layoutFooterRef, + footerSwitch, } }, render() { - return ( -
- {!this.getLockAppScreen() ? ( - - - - - {this.modelMenuTagSwitch ? ( - - ) : ( - '' - )} - - - - - - - ) : ( - '' - )} -
+ return !this.getLockAppScreen() ? ( + + + + + {this.modelMenuTagSwitch ? : ''} + + + + {this.footerSwitch ? : ''} + + + ) : ( + '' ) }, }) diff --git a/src/layout/layoutResize.ts b/src/layout/layoutResize.ts index b62f9c93..28f6216d 100644 --- a/src/layout/layoutResize.ts +++ b/src/layout/layoutResize.ts @@ -22,12 +22,13 @@ import type { Ref } from 'vue' export const layoutHeaderCssVars = ( element: Ref[], ) => { - const siderBar = useElementSize(element[0]) - const menuTag = useElementSize(element[1]) + const siderBar = useElementBounding(element[0]) + const menuTag = useElementBounding(element[1]) + const footer = useElementBounding(element[2]) return computed(() => { return { - '--layout-content-height': `calc(100% - ${siderBar.height.value}px - ${menuTag.height.value}px)`, + '--layout-content-height': `calc(100% - ${siderBar.height.value}px - ${menuTag.height.value}px - ${footer.height.value}px)`, '--layout-siderbar-height': `${siderBar.height.value}px`, '--layout-menutag-height': `${menuTag.height.value}px`, } diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts index f608398b..a16469f0 100644 --- a/src/router/helper/permission.ts +++ b/src/router/helper/permission.ts @@ -27,12 +27,7 @@ import { WHITE_ROUTES } from '@/appConfig/routerConfig' import { validRole } from '@/router/helper/routerCopilot' import { isValueType } from '@/utils/hook' -import type { - Router, - NavigationGuardNext, - RouteLocationNormalized, -} from 'vue-router' -import type { AppMenuOption } from '@/types/modules/app' +import type { Router, RouteLocationNormalized } from 'vue-router' import type { AppRouteMeta } from '@/router/type' /** 路由守卫 */ diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 8e43b62d..03b6a851 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -10,11 +10,7 @@ */ import { permissionRouter } from './permission' -import { - SETUP_ROUTER_LOADING_BAR, - SETUP_ROUTER_GUARD, - SUPER_ADMIN, -} from '@/appConfig/routerConfig' +import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/appConfig/routerConfig' import { useSignin } from '@/store' import { useVueRouter } from '@/router/helper/useVueRouter' import { ROOT_ROUTE } from '@/appConfig/appConfig' @@ -112,11 +108,14 @@ export const setupRouterLoadingBar = (router: Router) => { * @remark 统一的路由相关功能配置, 虽然该方法有点蠢... */ export const vueRouterRegister = (router: Router) => { - if (SETUP_ROUTER_LOADING_BAR) { + const { setupRouterLoadingBar: cfgSetupRouterLoadingBar, setupRouterGuard } = + SETUP_ROUTER_ACTION + + if (cfgSetupRouterLoadingBar) { setupRouterLoadingBar(router) } - if (SETUP_ROUTER_GUARD) { + if (setupRouterGuard) { permissionRouter(router) } } diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 9b362438..a364dbaf 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -37,6 +37,7 @@ export const useSetting = defineStore( localeLanguage: getAppDefaultLanguage(), lockScreenSwitch: false, // 锁屏开关 lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法) + footerSwitch: true, // 底部区域开关 }) /** 修改当前语言 */ diff --git a/src/store/modules/setting/type.ts b/src/store/modules/setting/type.ts index c6130880..d3313685 100644 --- a/src/store/modules/setting/type.ts +++ b/src/store/modules/setting/type.ts @@ -13,4 +13,5 @@ export interface SettingState { invertSwitch: boolean lockScreenSwitch: boolean lockScreenInputSwitch: boolean + footerSwitch: boolean } diff --git a/src/styles/root.scss b/src/styles/root.scss index 9a93bae0..554b8b56 100644 --- a/src/styles/root.scss +++ b/src/styles/root.scss @@ -1,3 +1,14 @@ +// css vars root :root { --r-bezier: cubic-bezier(0.4, 0, 0.2, 1); } + +// animation root +@keyframes elementRotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx b/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx index d41f17ea..9fdef39c 100644 --- a/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx +++ b/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx @@ -22,7 +22,11 @@ const MultiMenuTwoOne = defineComponent({ }, render() { return ( -
+
多级菜单2-2-1
diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx index 31a9bf20..de5345a7 100644 --- a/src/views/table/index.tsx +++ b/src/views/table/index.tsx @@ -22,6 +22,7 @@ import { NH2, NUl, NLi, + NSpace, } from 'naive-ui' import RayTable from '@/components/RayTable/index' import RayCollapseGrid from '@/components/RayCollapseGrid/index' @@ -163,7 +164,7 @@ const TableView = defineComponent({ }, render() { return ( - +
RayTable 组件使用 @@ -231,13 +232,14 @@ const TableView = defineComponent({ style="margin-top: 18px" ref="tableRef" scrollX={2000} - title={h( - NSwitch, - { - onUpdateValue: (value: boolean) => (this.tableLoading = value), - }, - {}, - )} + title={ + + 标题插槽: + (this.tableLoading = value)} + > + + } data={this.tableData} v-model:columns={this.actionColumns} pagination={{ @@ -251,7 +253,7 @@ const TableView = defineComponent({ tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上', }} - +
) }, })