From 80d05792e82c7756ca12d9bd076f868f9f26814b Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Sun, 4 Jun 2023 14:48:50 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TableScreenfull/index.scss | 20 ------- .../src/components/TableSetting/index.tsx | 2 +- src/components/RayTable/src/index.scss | 21 ++++++++ src/components/RayTable/src/index.tsx | 4 -- src/layout/components/MenuTag/index.scss | 2 + src/layout/components/MenuTag/index.tsx | 52 +++++++++++++++++-- src/layout/components/SiderBar/index.tsx | 8 +-- src/layout/index.scss | 4 ++ src/layout/index.tsx | 44 +++++++++------- src/layout/layoutResize.ts | 35 +++++++++++++ src/store/modules/menu/index.ts | 4 +- src/types/store.d.ts | 4 +- src/utils/element.ts | 16 ++++++ 13 files changed, 159 insertions(+), 57 deletions(-) create mode 100644 src/layout/layoutResize.ts diff --git a/src/components/RayTable/src/components/TableScreenfull/index.scss b/src/components/RayTable/src/components/TableScreenfull/index.scss index 140e4402..e69de29b 100644 --- a/src/components/RayTable/src/components/TableScreenfull/index.scss +++ b/src/components/RayTable/src/components/TableScreenfull/index.scss @@ -1,20 +0,0 @@ -@keyframes scaleScreenfull { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.3); - } - 100% { - transform: scale(1); - } -} - -.tay-table-icon__screenfull { - transition: transform 0.3s var(--r-bezier); - - &:hover { - animation: scaleScreenfull 0.3s linear; - animation-direction: alternate; - } -} diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx index 1aeadbce..891e08d0 100644 --- a/src/components/RayTable/src/components/TableSetting/index.tsx +++ b/src/components/RayTable/src/components/TableSetting/index.tsx @@ -61,7 +61,7 @@ const TableSetting = defineComponent({ {{ trigger: () => ( menuTagOptions.value) + const modelMenuTagOptions = computed(() => + menuTagOptions.value.map((curr, _idx, currentArray) => { + if (curr.key === menuKey.value && curr.key !== path) { + curr.closeable = true + } else { + curr.closeable = false + } + + if (curr.key === path) { + curr.closeable = false + } + + if (currentArray.length <= 1) { + curr.closeable = false + } + + return curr + }), + ) const moreOptions = ref([ { label: '重新加载', @@ -309,6 +330,20 @@ const MenuTag = defineComponent({ setDisabledAccordionToIndex() } + /** 仅有 modelMenuTagOptions 长度大于 1 并且非 root path 时, 才激活关闭按钮 */ + const menuTagMouseenter = (option: MenuTagOptions) => { + if (modelMenuTagOptions.value.length > 1 && option.key !== path) { + option.closeable = true + } + } + + /** 移出 MenuTag 时, 判断是否为当前已激活 key */ + const menuTagMouseleave = (option: MenuTagOptions) => { + if (option.key !== menuKey.value) { + option.closeable = false + } + } + /** 如果有且只有一个标签页时, 禁止全部关闭操作 */ watch( () => modelMenuTagOptions.value, @@ -350,6 +385,8 @@ const MenuTag = defineComponent({ actionState, handleContextMenu, setCurrentContentmenuIndex, + menuTagMouseenter, + menuTagMouseleave, } }, render() { @@ -389,6 +426,10 @@ const MenuTag = defineComponent({ {...{ id: this.scrollBarUUID, }} + themeOverrides={{ + color: 'rgba(0, 0, 0, 0)', + colorHover: 'rgba(0, 0, 0, 0)', + }} > {this.modelMenuTagOptions.map((curr, idx) => ( 1 - } + size="large" + strong + closable={curr.closeable} onClose={this.closeCurrentMenuTag.bind(this, idx)} type={curr.key === this.menuKey ? 'primary' : 'default'} bordered={false} {...{ onClick: this.handleTagClick.bind(this, curr), onContextmenu: this.handleContextMenu.bind(this, idx), + onMouseenter: this.menuTagMouseenter.bind(this, curr), + onMouseleave: this.menuTagMouseleave.bind(this, curr), }} > {typeof curr.label === 'function' diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 11071010..114eb5a6 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -19,7 +19,7 @@ import Breadcrumb from './components/Breadcrumb/index' import GlobalSeach from './components/GlobalSeach/index' import AppAvatar from '@/components/AppComponents/AppAvatar/index' -import { useSetting, useSignin } from '@/store' +import { useSetting } from '@/store' import { LOCAL_OPTIONS } from '@/appConfig/localConfig' import { useAvatarOptions, avatarDropdownClick } from './hook' import { getCache } from '@/utils/cache' @@ -38,13 +38,11 @@ import type { IconEventMapOptions, IconEventMap } from './type' const SiderBar = defineComponent({ name: 'SiderBar', - setup() { + setup(_, { expose }) { const settingStore = useSetting() - const signinStore = useSignin() const { t } = useI18n() const { updateLocale, changeSwitcher } = settingStore - const { logout } = signinStore const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore) const showSettings = ref(false) @@ -126,6 +124,8 @@ const SiderBar = defineComponent({ iconEventMap[key]?.() } + // expose({}) + return { leftIconOptions, rightTooltipIconOptions, diff --git a/src/layout/index.scss b/src/layout/index.scss index a21db6d5..c8ffebc4 100644 --- a/src/layout/index.scss +++ b/src/layout/index.scss @@ -5,6 +5,10 @@ height: 100%; } + & .layout__view-container__layout .n-layout-scroll-container { + overflow: hidden; + } + & .layout-content__router-view { height: var(--layout-content-height); padding: calc($layoutRouterViewContainer / 2); diff --git a/src/layout/index.tsx b/src/layout/index.tsx index c47ad5dd..5e25f0d8 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -3,7 +3,10 @@ * 页面布局入口文件 * * 说明: - * - rayLayoutContentWrapperScopeSelector: 页面切换时重置滚动条注入 id + * - rayLayoutContentWrapperScopeSelector: 页面切换时重置滚动条注入 id(弃用) + * + * 该组件入口不做逻辑相关的处理, 仅做功能、组件、方法注入 + * 提供页面内 Layout 的一些注入(css vars 为主) */ import './index.scss' @@ -20,36 +23,31 @@ import { viewScrollContainerId, LAYOUT_CONTENT_REF, } from '@/appConfig/routerConfig' +import { layoutHeaderCssVars } from '@/layout/layoutResize' const Layout = defineComponent({ name: 'RLayout', setup() { + const layoutSiderBarRef = ref() + const layoutMenuTagRef = ref() + const settingStore = useSetting() const menuStore = useMenu() const { height: windowHeight } = useWindowSize() const { menuTagSwitch: modelMenuTagSwitch } = storeToRefs(settingStore) const { setupAppRoutes } = menuStore - const cssVarsRef = computed(() => { - let cssVar = {} - - if (settingStore.menuTagSwitch) { - cssVar = { - '--layout-content-height': 'calc(100% - 111px)', - } - } else { - cssVar = { - '--layout-content-height': 'calc(100% - 64px)', - } - } - - return cssVar - }) const isLock = useStorage('isLockScreen', false, sessionStorage, { mergeDefaults: true, }) + const cssVarsRef = layoutHeaderCssVars([ + layoutSiderBarRef, + layoutMenuTagRef, + ]) - setupAppRoutes() + nextTick().then(() => { + setupAppRoutes() + }) return { windowHeight, @@ -57,6 +55,8 @@ const Layout = defineComponent({ cssVarsRef, isLock, LAYOUT_CONTENT_REF, + layoutSiderBarRef, + layoutMenuTagRef, } }, render() { @@ -68,9 +68,13 @@ const Layout = defineComponent({ {!this.isLock ? ( - - - {this.modelMenuTagSwitch ? : ''} + + + {this.modelMenuTagSwitch ? ( + + ) : ( + '' + )} + * + * @date 2023-06-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { Ref } from 'vue' + +/** + * + * 动态获取 SiderBar 和 MenuTag 高度, 用于 LayoutConetent 高度实时获取与渲染 + * 可以动态更改 MenuTag 样式后, 使得 LayoutConetent 也可以准确的获取高度 + * + * 基于 vueuse useElementSize 方法实现 + * 不建议滥用该方法, 对页面渲染有一定的影响 + */ +export const layoutHeaderCssVars = ( + element: Ref[], +) => { + const siderBar = useElementSize(element[0]) + const menuTag = useElementSize(element[1]) + + return computed(() => { + return { + '--layout-content-height': `calc(100% - ${siderBar.height.value}px - ${menuTag.height.value}px)`, + '--layout-siderbar-height': `${siderBar.height.value}px`, + '--layout-menutag-height': `${menuTag.height.value}px`, + } + }) +} diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index 09ca5544..b8edf100 100644 --- a/src/store/modules/menu/index.ts +++ b/src/store/modules/menu/index.ts @@ -45,10 +45,10 @@ export const useMenu = defineStore( const { t } = useI18n() const { setKeepAliveInclude } = useKeepAlive() - const { path } = ROOT_ROUTE + const { path: rootPath } = ROOT_ROUTE const cacheMenuKey = - getCache('menuKey') === 'no' ? path : getCache('menuKey') + getCache('menuKey') === 'no' ? rootPath : getCache('menuKey') const menuState = reactive({ menuKey: cacheMenuKey as MenuKey, // 当前菜单 `key` diff --git a/src/types/store.d.ts b/src/types/store.d.ts index 044509db..771f57fa 100644 --- a/src/types/store.d.ts +++ b/src/types/store.d.ts @@ -18,7 +18,9 @@ declare global { noLocalTitle?: string | number } - declare interface MenuTagOptions extends IMenuOptions {} + declare interface MenuTagOptions extends IMenuOptions { + closeable?: boolean + } declare type MenuKey = null | string | number } diff --git a/src/utils/element.ts b/src/utils/element.ts index c489e6e4..3ae2461d 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -109,6 +109,22 @@ export const hasClass = (element: HTMLElement, className: string) => { * * @param el Target element dom * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述) + * + * style of string + * ``` + * const styles = 'width: 100px; height: 100px; background: red;' + * + * addStyle(styles) + * ``` + * style of object + * ``` + * const styles = { + * width: '100px', + * height: '100px', + * } + * + * addStyle(styles) + * ``` */ export const addStyle = ( el: HTMLElement,