Skip to content

B
basic-vue-admin
提交 43929174 作者: vben
操作

perf: layout code adjustment

上级 4ff6b73c
正在显示 包含 387 行增加 和 421 行删除
src/layouts/default/LayoutContent.tsx
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 (
<Layout.Content class={`layout-content ${wrapClass} `}>
{() => <RouterView />}
</Layout.Content>
<div class={[`default-layout__main`]}>
{openPageLoading && (
<FullLoading class={[`default-layout__loading`, !getPageLoading && 'hidden']} />
)}
<Layout.Content class={`layout-content ${wrapClass} `}>
{() => <RouterView />}
</Layout.Content>
</div>
);
};
},
......
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;
......
src/layouts/default/LayoutHeader.tsx → src/layouts/default/header/LayoutHeader.tsx
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() {
......
src/layouts/default/UserDropdown.tsx → 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();
}
}
......
src/layouts/default/header/index.less 0 → 100644
@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%;
}
}
}
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 {
......
src/layouts/default/index.tsx
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({
<Layout class="default-layout relative">
{() => (
<>
{/* lock page */}
{isLock && <LockPage />}
{/* back top */}
{useOpenBackTop && <BackTop target={getTarget} />}
{/* open setting drawer */}
{showSettingButton && <SettingBtn />}
{!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && (
<LayoutHeader />
)}
{showSettingButton && <SettingBtn />}
<Layout>
{() => (
<>
......@@ -103,22 +104,9 @@ export default defineComponent({
!unref(isShowMixHeaderRef) &&
unref(showHeaderRef) && <LayoutHeader />}
{showTabs && !unref(getFullContent) && (
<Layout.Header class={`default-layout__tabs`}>
{() => <MultipleTabs />}
</Layout.Header>
)}
{useOpenBackTop && <BackTop target={getTarget} />}
<div class={[`default-layout__main`, fixedHeaderCls]}>
{openPageLoading && (
<FullLoading
class={[`default-layout__loading`, !getPageLoading && 'hidden']}
/>
)}
<LayoutContent />
</div>
{showTabs && !unref(getFullContent) && <MultipleTabs />}
<LayoutContent class={fixedHeaderCls} />
</>
)}
</Layout>
......
src/layouts/default/LayoutMenu.tsx → 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: {
......
src/layouts/default/menu/index.less 0 → 100644
@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;
}
}
}
}
src/layouts/default/multitabs/TabContent.tsx
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';
......
src/layouts/default/multitabs/index.less
@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;
}
}
}
......
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<string>('');
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,
}
);
......
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);
......
src/layouts/default/setting/index.less 0 → 100644
.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;
}
}
}
src/layouts/default/setting/index.vue
......@@ -23,8 +23,9 @@
},
});
</script>
<style lang="less" scoped>
<style lang="less">
@import (reference) '../../../design/index.less';
@import './index.less';
.setting-button {
position: absolute;
......
src/layouts/Logo.vue → src/layouts/logo/index.vue
......@@ -12,10 +12,10 @@
import { useGo } from '/@/hooks/web/usePage';
import { PageEnum } from '/@/enums/pageEnum';
import { MenuTypeEnum } from '../enums/menuEnum';
import { MenuTypeEnum } from '/@/enums/menuEnum';
import { menuStore } from '../store/modules/menu';
import { appStore } from '../store/modules/app';
import { menuStore } from '/@/store/modules/menu';
import { appStore } from '/@/store/modules/app';
export default defineComponent({
name: 'Logo',
......@@ -72,7 +72,7 @@
});
</script>
<style lang="less" scoped>
@import (reference) '../design/index.less';
@import (reference) '../../design/index.less';
.app-logo {
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论