From 439291746fe237410140575be2a634a74e8ef382 Mon Sep 17 00:00:00 2001 From: vben Date: Tue, 10 Nov 2020 23:50:47 +0800 Subject: [PATCH] perf: layout code adjustment --- src/layouts/default/LayoutContent.tsx | 24 +- src/layouts/default/LayoutSideBar.tsx | 20 +- .../default/{ => header}/LayoutBreadcrumb.tsx | 0 .../default/{ => header}/LayoutHeader.tsx | 12 +- .../{actions => header}/LockActionItem.less | 0 .../{actions => header}/LockActionItem.tsx | 0 .../default/{ => header}/UserDropdown.tsx | 3 +- src/layouts/default/header/index.less | 214 +++++++++++ .../notice/NoticeActionItem.vue | 0 .../{actions => header}/notice/NoticeList.vue | 0 .../{actions => header}/notice/data.ts | 0 src/layouts/default/index.less | 331 ------------------ src/layouts/default/index.tsx | 30 +- src/layouts/default/{ => menu}/LayoutMenu.tsx | 6 +- src/layouts/default/menu/index.less | 25 ++ src/layouts/default/multitabs/TabContent.tsx | 6 +- src/layouts/default/multitabs/index.less | 9 +- src/layouts/default/multitabs/index.tsx | 27 +- src/layouts/default/setting/SettingDrawer.tsx | 16 +- src/layouts/default/setting/index.less | 72 ++++ src/layouts/default/setting/index.vue | 3 +- src/layouts/{Logo.vue => logo/index.vue} | 8 +- 22 files changed, 386 insertions(+), 420 deletions(-) rename src/layouts/default/{ => header}/LayoutBreadcrumb.tsx (100%) rename src/layouts/default/{ => header}/LayoutHeader.tsx (96%) rename src/layouts/default/{actions => header}/LockActionItem.less (100%) rename src/layouts/default/{actions => header}/LockActionItem.tsx (100%) rename src/layouts/default/{ => header}/UserDropdown.tsx (98%) create mode 100644 src/layouts/default/header/index.less rename src/layouts/default/{actions => header}/notice/NoticeActionItem.vue (100%) rename src/layouts/default/{actions => header}/notice/NoticeList.vue (100%) rename src/layouts/default/{actions => header}/notice/data.ts (100%) rename src/layouts/default/{ => menu}/LayoutMenu.tsx (97%) create mode 100644 src/layouts/default/menu/index.less create mode 100644 src/layouts/default/setting/index.less rename src/layouts/{Logo.vue => logo/index.vue} (91%) diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx index 320f0731..0ab53f95 100644 --- a/src/layouts/default/LayoutContent.tsx +++ b/src/layouts/default/LayoutContent.tsx @@ -1,5 +1,7 @@ -import { defineComponent } from 'vue'; +import { computed, defineComponent, unref } from 'vue'; import { Layout } from 'ant-design-vue'; +import { FullLoading } from '/@/components/Loading/index'; + import { RouterView } from 'vue-router'; import { ContentEnum } from '/@/enums/appEnum'; @@ -7,14 +9,24 @@ import { appStore } from '/@/store/modules/app'; export default defineComponent({ name: 'DefaultLayoutContent', setup() { + const getProjectConfigRef = computed(() => { + return appStore.getProjectConfig; + }); + return () => { - const { getProjectConfig } = appStore; - const { contentMode } = getProjectConfig; + const { contentMode, openPageLoading } = unref(getProjectConfigRef); + const { getPageLoading } = appStore; + const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed'; return ( - - {() => } - +
+ {openPageLoading && ( + + )} + + {() => } + +
); }; }, diff --git a/src/layouts/default/LayoutSideBar.tsx b/src/layouts/default/LayoutSideBar.tsx index 9cbfe894..2ac63721 100644 --- a/src/layouts/default/LayoutSideBar.tsx +++ b/src/layouts/default/LayoutSideBar.tsx @@ -2,13 +2,15 @@ import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue' import { Layout } from 'ant-design-vue'; import LayoutTrigger from './LayoutTrigger'; -import { menuStore } from '/@/store/modules/menu'; +import LayoutMenu from '/@/layouts/default/menu/LayoutMenu'; +import { menuStore } from '/@/store/modules/menu'; import { appStore } from '/@/store/modules/app'; + import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum'; import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum'; + import { useDebounce } from '/@/hooks/core/useDebounce'; -import LayoutMenu from './LayoutMenu'; export default defineComponent({ name: 'DefaultLayoutSideBar', @@ -111,13 +113,6 @@ export default defineComponent({ brokenRef.value = broken; } - onMounted(() => { - nextTick(() => { - const [exec] = useDebounce(changeWrapWidth, 20); - exec(); - }); - }); - const getDragBarStyle = computed(() => { if (menuStore.getCollapsedState) { return { left: `${unref(getMiniWidth)}px` }; @@ -136,6 +131,13 @@ export default defineComponent({ return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER; }); + onMounted(() => { + nextTick(() => { + const [exec] = useDebounce(changeWrapWidth, 20); + exec(); + }); + }); + function handleSiderClick(e: ChangeEvent) { if (!e || !e.target || e.target.className !== 'basic-menu__content') return; diff --git a/src/layouts/default/LayoutBreadcrumb.tsx b/src/layouts/default/header/LayoutBreadcrumb.tsx similarity index 100% rename from src/layouts/default/LayoutBreadcrumb.tsx rename to src/layouts/default/header/LayoutBreadcrumb.tsx diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/header/LayoutHeader.tsx similarity index 96% rename from src/layouts/default/LayoutHeader.tsx rename to src/layouts/default/header/LayoutHeader.tsx index 98bf8e04..830070f8 100644 --- a/src/layouts/default/LayoutHeader.tsx +++ b/src/layouts/default/header/LayoutHeader.tsx @@ -1,13 +1,13 @@ import { defineComponent, unref, computed, ref } from 'vue'; import { Layout, Tooltip, Badge } from 'ant-design-vue'; -import Logo from '/@/layouts/Logo.vue'; +import Logo from '/@/layouts/logo/index.vue'; import UserDropdown from './UserDropdown'; -import LayoutMenu from './LayoutMenu'; +import LayoutMenu from '/@/layouts/default/menu/LayoutMenu'; import LayoutBreadcrumb from './LayoutBreadcrumb'; -import LockAction from './actions/LockActionItem'; -import LayoutTrigger from './LayoutTrigger'; -import NoticeAction from './actions/notice/NoticeActionItem.vue'; +import LockAction from './LockActionItem'; +import LayoutTrigger from '../LayoutTrigger'; +import NoticeAction from './notice/NoticeActionItem.vue'; import { RedoOutlined, FullscreenExitOutlined, @@ -28,6 +28,8 @@ import { errorStore } from '/@/store/modules/error'; import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum'; import { GITHUB_URL } from '/@/settings/siteSetting'; + +import './index.less'; export default defineComponent({ name: 'DefaultLayoutHeader', setup() { diff --git a/src/layouts/default/actions/LockActionItem.less b/src/layouts/default/header/LockActionItem.less similarity index 100% rename from src/layouts/default/actions/LockActionItem.less rename to src/layouts/default/header/LockActionItem.less diff --git a/src/layouts/default/actions/LockActionItem.tsx b/src/layouts/default/header/LockActionItem.tsx similarity index 100% rename from src/layouts/default/actions/LockActionItem.tsx rename to src/layouts/default/header/LockActionItem.tsx diff --git a/src/layouts/default/UserDropdown.tsx b/src/layouts/default/header/UserDropdown.tsx similarity index 98% rename from src/layouts/default/UserDropdown.tsx rename to src/layouts/default/header/UserDropdown.tsx index 22977aa9..05a00f65 100644 --- a/src/layouts/default/UserDropdown.tsx +++ b/src/layouts/default/header/UserDropdown.tsx @@ -39,8 +39,7 @@ export default defineComponent({ function handleMenuClick(e: any) { if (e.key === 'loginOut') { handleLoginOut(); - } - if (e.key === 'doc') { + } else if (e.key === 'doc') { openDoc(); } } diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less new file mode 100644 index 00000000..c5005954 --- /dev/null +++ b/src/layouts/default/header/index.less @@ -0,0 +1,214 @@ +@import (reference) '../../../design/index.less'; + +.layout-header { + display: flex; + height: @header-height; + padding: 0 20px 0 0; + line-height: @header-height; + color: @white; + background: @white; + align-items: center; + justify-content: space-between; + + &__left { + display: flex; + flex-grow: 1; + align-items: center; + + .layout-trigger { + padding: 4px 10px 0 16px; + cursor: pointer; + + .anticon { + font-size: 17px; + } + + &.light { + &:hover { + background: @header-light-bg-hover-color; + } + + svg { + fill: #000; + } + } + + &.dark { + &:hover { + background: @header-dark-bg-hover-color; + } + } + } + + .layout-breadcrumb { + padding: 0 8px; + } + } + + &__content { + display: flex; + flex-grow: 1; + align-items: center; + } + + &__header--light { + background: @white; + border-bottom: 1px solid @header-light-bottom-border-color; + + .layout-header__menu { + height: calc(@header-height - 1px); + + .ant-menu-submenu { + height: @header-height; + line-height: @header-height; + } + } + + .layout-header__logo { + height: @header-height; + color: @text-color-base; + + img { + width: @logo-width; + height: @logo-width; + margin-right: 6px; + } + + &:hover { + background: @header-light-bg-hover-color; + } + } + + .layout-header__action { + &-item { + &:hover { + background: @header-light-bg-hover-color; + } + } + + &-icon { + color: @text-color-base; + } + } + + .layout-header__user-dropdown { + &:hover { + background: @header-light-bg-hover-color; + } + } + + .user-dropdown { + &__name { + color: @text-color-base; + } + + &__desc { + color: @header-light-desc-color; + } + } + } + + &__header--dark { + background: @header-dark-bg-color; + + .layout-header__action { + &-item { + &:hover { + background: @header-dark-bg-hover-color; + } + } + } + + .layout-header__logo { + height: @header-height; + + img { + width: @logo-width; + height: @logo-width; + margin-right: 10px; + } + + &:hover { + background: @header-dark-bg-hover-color; + } + } + + .layout-header__user-dropdown { + &:hover { + background: @header-dark-bg-hover-color; + } + } + + .breadcrumb { + &__item:last-child .breadcrumb__inner, + &__item:last-child &__inner a, + &__item:last-child &__inner a:hover, + &__item:last-child &__inner:hover { + font-weight: 400; + color: rgba(255, 255, 255, 0.6); + cursor: text; + } + + &__inner, + &__separator { + color: @white; + } + } + } + + &__logo { + padding: 0 10px; + } + + &__bread { + display: none; + flex: 1; + } + + &__action { + display: flex; + align-items: center; + + &-item { + display: flex; + height: @header-height; + padding: 0 2px; + font-size: 1.2em; + cursor: pointer; + align-items: center; + } + + &-icon { + padding: 0 8px; + } + } + + &__menu { + margin-left: 20px; + overflow: hidden; + align-items: center; + } + + &__user-dropdown { + height: @header-height; + padding: 0 0 0 10px; + } + + .user-dropdown { + display: flex; + padding-right: 10px; + font-size: 12px; + cursor: pointer; + align-items: center; + + img { + width: 26px; + height: 26px; + margin-right: 12px; + } + + &__header { + border-radius: 50%; + } + } +} diff --git a/src/layouts/default/actions/notice/NoticeActionItem.vue b/src/layouts/default/header/notice/NoticeActionItem.vue similarity index 100% rename from src/layouts/default/actions/notice/NoticeActionItem.vue rename to src/layouts/default/header/notice/NoticeActionItem.vue diff --git a/src/layouts/default/actions/notice/NoticeList.vue b/src/layouts/default/header/notice/NoticeList.vue similarity index 100% rename from src/layouts/default/actions/notice/NoticeList.vue rename to src/layouts/default/header/notice/NoticeList.vue diff --git a/src/layouts/default/actions/notice/data.ts b/src/layouts/default/header/notice/data.ts similarity index 100% rename from src/layouts/default/actions/notice/data.ts rename to src/layouts/default/header/notice/data.ts diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less index e8da7437..ea2a70cf 100644 --- a/src/layouts/default/index.less +++ b/src/layouts/default/index.less @@ -30,7 +30,6 @@ .layout-content { position: relative; - // height: 100%; &.fixed { width: 1200px; @@ -38,30 +37,6 @@ } } - .layout-menu { - &__logo { - height: @header-height; - padding: 10px 4px 10px 10px; - - img { - width: @logo-width; - height: @logo-width; - } - - &.light { - .logo-title { - color: @text-color-base; - } - } - - &.dark { - .logo-title { - color: @white; - } - } - } - } - .layout-sidebar { background-size: 100% 100%; @@ -99,312 +74,6 @@ } } } - - &__tabs { - z-index: 10; - height: @multiple-height; - padding: 0; - line-height: @multiple-height; - background: @border-color-shallow-light; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); - } -} - -.setting-drawer { - .ant-drawer-body { - padding-top: 0; - background: @white; - } - - &__footer { - display: flex; - flex-direction: column; - align-items: center; - } - - &__cell-item { - display: flex; - justify-content: space-between; - margin: 16px 0; - } - - &__theme-item { - display: flex; - flex-wrap: wrap; - margin: 16px 0; - - span { - display: inline-block; - width: 20px; - height: 20px; - margin-top: 10px; - margin-right: 10px; - cursor: pointer; - border-radius: 4px; - - svg { - display: none; - } - - &.active { - svg { - display: inline-block; - margin-left: 4px; - font-size: 0.8em; - fill: @white; - } - } - } - } - - &__siderbar { - display: flex; - - > div { - position: relative; - - .check-icon { - position: absolute; - top: 40%; - left: 40%; - display: none; - color: @primary-color; - - &.active { - display: inline-block; - } - } - } - - img { - margin-right: 10px; - cursor: pointer; - } - } -} - -.ant-layout-header:not(.default-layout__tabs) { - height: @header-height; - line-height: @header-height; -} - -.ant-layout-header.default-layout__tabs { - height: @multiple-height + 2; - line-height: @multiple-height + 2; - background: @white; -} - -.layout-header { - display: flex; - height: @header-height; - padding: 0 20px 0 0; - color: @white; - background: @white; - align-items: center; - justify-content: space-between; - - &__content { - flex-grow: 1; - display: flex; - // justify-content: center; - align-items: center; - } - - &__header--light { - background: @white; - border-bottom: 1px solid @header-light-bottom-border-color; - - .layout-header__menu { - height: calc(@header-height - 1px); - - .ant-menu-submenu { - height: @header-height; - line-height: @header-height; - } - } - - .layout-header__logo { - height: @header-height; - color: @text-color-base; - - img { - width: @logo-width; - height: @logo-width; - margin-right: 6px; - } - - &:hover { - background: @header-light-bg-hover-color; - } - } - - .layout-header__action { - &-item { - &:hover { - background: @header-light-bg-hover-color; - } - } - - &-icon { - color: @text-color-base; - } - } - - .layout-header__user-dropdown { - &:hover { - background: @header-light-bg-hover-color; - } - } - - .user-dropdown { - &__name { - color: @text-color-base; - } - - &__desc { - color: @header-light-desc-color; - } - } - } - - &__header--dark { - background: @header-dark-bg-color; - - .layout-header__action { - &-item { - &:hover { - background: @header-dark-bg-hover-color; - } - } - } - - .layout-header__logo { - height: @header-height; - - img { - width: @logo-width; - height: @logo-width; - margin-right: 10px; - } - - &:hover { - background: @header-dark-bg-hover-color; - } - } - - .layout-header__user-dropdown { - &:hover { - background: @header-dark-bg-hover-color; - } - } - - .breadcrumb { - &__item:last-child .breadcrumb__inner, - &__item:last-child &__inner a, - &__item:last-child &__inner a:hover, - &__item:last-child &__inner:hover { - font-weight: 400; - color: rgba(255, 255, 255, 0.6); - cursor: text; - } - - &__inner, - &__separator { - color: @white; - } - } - } - - &__logo { - padding: 0 10px; - } - - &__bread { - flex: 1; - display: none; - } - - &__action { - display: flex; - align-items: center; - - &-item { - display: flex; - align-items: center; - height: @header-height; - padding: 0 2px; - font-size: 1.2em; - cursor: pointer; - } - - &-icon { - padding: 0 8px; - } - } - - &__menu { - margin-left: 20px; - overflow: hidden; - align-items: center; - } - - &__user-dropdown { - height: @header-height; - padding: 0 0 0 10px; - } -} - -.user-dropdown { - display: flex; - padding-right: 10px; - font-size: 12px; - cursor: pointer; - align-items: center; - - img { - width: 26px; - height: 26px; - margin-right: 12px; - } - - &__header { - border-radius: 50%; - } -} - -.layout-header__left { - flex-grow: 1; - display: flex; - align-items: center; - - .layout-trigger { - padding: 4px 10px 0 16px; - cursor: pointer; - - .anticon { - font-size: 17px; - } - - &.light { - &:hover { - background: @header-light-bg-hover-color; - } - - svg { - fill: #000; - } - } - - &.dark { - &:hover { - background: @header-dark-bg-hover-color; - } - } - } - - .layout-breadcrumb { - padding: 0 8px; - } } .ant-layout-sider-trigger { diff --git a/src/layouts/default/index.tsx b/src/layouts/default/index.tsx index 6ea8c0b8..f765b8d3 100644 --- a/src/layouts/default/index.tsx +++ b/src/layouts/default/index.tsx @@ -1,13 +1,12 @@ import { defineComponent, unref, computed } from 'vue'; import { Layout, BackTop } from 'ant-design-vue'; -import LayoutHeader from './LayoutHeader'; +import LayoutHeader from './header/LayoutHeader'; import { appStore } from '/@/store/modules/app'; import LayoutContent from './LayoutContent'; import LayoutSideBar from './LayoutSideBar'; import SettingBtn from './setting/index.vue'; import MultipleTabs from './multitabs/index'; -import { FullLoading } from '/@/components/Loading/index'; import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'; import { useFullContent } from '/@/hooks/web/useFullContent'; @@ -63,9 +62,8 @@ export default defineComponent({ } return () => { - const { getPageLoading, getLockInfo } = appStore; + const { getLockInfo } = appStore; const { - openPageLoading, useOpenBackTop, showSettingButton, multiTabsSetting: { show: showTabs }, @@ -84,14 +82,17 @@ export default defineComponent({ {() => ( <> + {/* lock page */} {isLock && } + {/* back top */} + {useOpenBackTop && } + {/* open setting drawer */} + {showSettingButton && } {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && ( )} - {showSettingButton && } - {() => ( <> @@ -103,22 +104,9 @@ export default defineComponent({ !unref(isShowMixHeaderRef) && unref(showHeaderRef) && } - {showTabs && !unref(getFullContent) && ( - - {() => } - - )} + {showTabs && !unref(getFullContent) && } - {useOpenBackTop && } - -
- {openPageLoading && ( - - )} - -
+ )} diff --git a/src/layouts/default/LayoutMenu.tsx b/src/layouts/default/menu/LayoutMenu.tsx similarity index 97% rename from src/layouts/default/LayoutMenu.tsx rename to src/layouts/default/menu/LayoutMenu.tsx index 96932139..14b818a5 100644 --- a/src/layouts/default/LayoutMenu.tsx +++ b/src/layouts/default/menu/LayoutMenu.tsx @@ -3,7 +3,7 @@ import type { Menu } from '/@/router/types'; import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue'; import { BasicMenu } from '/@/components/Menu/index'; -import Logo from '/@/layouts/Logo.vue'; +import Logo from '/@/layouts/logo/index.vue'; import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum'; @@ -22,10 +22,8 @@ import { import { useRouter } from 'vue-router'; import { useThrottle } from '/@/hooks/core/useThrottle'; import { permissionStore } from '/@/store/modules/permission'; -// import { useTabs } from '/@/hooks/web/useTabs'; -// import { PageEnum } from '/@/enums/pageEnum'; -// import +import './index.less'; export default defineComponent({ name: 'DefaultLayoutMenu', props: { diff --git a/src/layouts/default/menu/index.less b/src/layouts/default/menu/index.less new file mode 100644 index 00000000..181398f3 --- /dev/null +++ b/src/layouts/default/menu/index.less @@ -0,0 +1,25 @@ +@import (reference) '../../../design/index.less'; + +.layout-menu { + &__logo { + height: @header-height; + padding: 10px 4px 10px 10px; + + img { + width: @logo-width; + height: @logo-width; + } + + &.light { + .logo-title { + color: @text-color-base; + } + } + + &.dark { + .logo-title { + color: @white; + } + } + } +} diff --git a/src/layouts/default/multitabs/TabContent.tsx b/src/layouts/default/multitabs/TabContent.tsx index 1a15e5f7..cd2b684b 100644 --- a/src/layouts/default/multitabs/TabContent.tsx +++ b/src/layouts/default/multitabs/TabContent.tsx @@ -1,8 +1,10 @@ -import { TabItem, tabStore } from '/@/store/modules/tab'; +import { defineComponent, unref, computed } from 'vue'; + import type { PropType } from 'vue'; + +import { TabItem, tabStore } from '/@/store/modules/tab'; import { getScaleAction, TabContentProps } from './tab.data'; -import { defineComponent, unref, computed } from 'vue'; import { Dropdown } from '/@/components/Dropdown/index'; import Icon from '/@/components/Icon/index'; import { RightOutlined } from '@ant-design/icons-vue'; diff --git a/src/layouts/default/multitabs/index.less b/src/layouts/default/multitabs/index.less index 48834259..ff636b0e 100644 --- a/src/layouts/default/multitabs/index.less +++ b/src/layouts/default/multitabs/index.less @@ -1,6 +1,13 @@ @import (reference) '../../../design/index.less'; .multiple-tabs { + z-index: 10; + height: @multiple-height+2; + padding: 0 0 2px 0; + line-height: @multiple-height+2; + background: @white; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08); + .ant-tabs-small { height: @multiple-height; } @@ -63,8 +70,8 @@ } svg { - fill: @white; width: 0.7em; + fill: @white; } } } diff --git a/src/layouts/default/multitabs/index.tsx b/src/layouts/default/multitabs/index.tsx index 4154fa40..c280afba 100644 --- a/src/layouts/default/multitabs/index.tsx +++ b/src/layouts/default/multitabs/index.tsx @@ -34,20 +34,7 @@ export default defineComponent({ let isAddAffix = false; const go = useGo(); const { currentRoute } = useRouter(); - const { - // addTab, - activeKeyRef, - } = useTabs(); - // onMounted(() => { - // const route = unref(currentRoute); - // addTab(unref(currentRoute).path as PageEnum, false, { - // query: route.query, - // params: route.params, - // }); - // }); - - // 当前激活tab - // const activeKeyRef = ref(''); + const { activeKeyRef } = useTabs(); // 当前tab列表 const getTabsState = computed(() => { @@ -67,21 +54,9 @@ export default defineComponent({ if (activeKeyRef.value !== (fullPath || rPath)) { activeKeyRef.value = fullPath || rPath; } - // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？ - // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw); - - // const { affix } = currentRoute.value.meta || {}; - // if (affix) return; - // const hasInTab = tabStore.getTabsState.some( - // (item) => item.fullPath === currentRoute.value.fullPath - // ); - // if (!hasInTab) { - // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw); - // } }, { - // flush: 'post', immediate: true, } ); diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx index d807c1cb..0d67d3c9 100644 --- a/src/layouts/default/setting/SettingDrawer.tsx +++ b/src/layouts/default/setting/SettingDrawer.tsx @@ -226,7 +226,13 @@ export default defineComponent({ def: collapsedShowTitle, disabled: !unref(getShowMenuRef) || !collapsed, }), - + renderSwitchItem('固定header', { + handler: (e) => { + baseHandler(HandlerEnum.HEADER_FIXED, e); + }, + def: fixed, + disabled: !unref(getShowHeaderRef), + }), renderSelectItem('顶部菜单布局', { handler: (e) => { baseHandler(HandlerEnum.MENU_TOP_ALIGN, e); @@ -242,13 +248,7 @@ export default defineComponent({ def: trigger, options: menuTriggerOptions, }), - renderSwitchItem('固定header', { - handler: (e) => { - baseHandler(HandlerEnum.HEADER_FIXED, e); - }, - def: fixed, - disabled: !unref(getShowHeaderRef), - }), + renderSelectItem('内容区域宽度', { handler: (e) => { baseHandler(HandlerEnum.CONTENT_MODE, e); diff --git a/src/layouts/default/setting/index.less b/src/layouts/default/setting/index.less new file mode 100644 index 00000000..fd8a5a58 --- /dev/null +++ b/src/layouts/default/setting/index.less @@ -0,0 +1,72 @@ +.setting-drawer { + .ant-drawer-body { + padding-top: 0; + background: @white; + } + + &__footer { + display: flex; + flex-direction: column; + align-items: center; + } + + &__cell-item { + display: flex; + justify-content: space-between; + margin: 16px 0; + } + + &__theme-item { + display: flex; + flex-wrap: wrap; + margin: 16px 0; + + span { + display: inline-block; + width: 20px; + height: 20px; + margin-top: 10px; + margin-right: 10px; + cursor: pointer; + border-radius: 4px; + + svg { + display: none; + } + + &.active { + svg { + display: inline-block; + margin-left: 4px; + font-size: 0.8em; + fill: @white; + } + } + } + } + + &__siderbar { + display: flex; + + > div { + position: relative; + + .check-icon { + position: absolute; + top: 40%; + left: 40%; + display: none; + color: @primary-color; + + &.active { + display: inline-block; + } + } + } + + img { + margin-right: 10px; + cursor: pointer; + } + } +} diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue index 0a1e3311..c7c9e75d 100644 --- a/src/layouts/default/setting/index.vue +++ b/src/layouts/default/setting/index.vue @@ -23,8 +23,9 @@ }, }); -