feat: 布局问题
parent
1af036dfad
commit
5d0d614637
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<section class="base-container">
|
||||||
|
<slot></slot>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// import { computed } from 'vue';
|
||||||
|
// import { useGlobal } from '@pureadmin/utils';
|
||||||
|
// const { $storage } = useGlobal();
|
||||||
|
|
||||||
|
// const hideTabs = computed(() => {
|
||||||
|
// return $storage?.configure.hideTabs;
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.base-container {
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 81px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<section class="base-container">
|
||||||
|
<slot></slot>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<section class="base-container">
|
||||||
|
<slot></slot>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<main class="base-main">
|
||||||
|
<slot></slot>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.base-main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
height: calc(100vh - 81px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { App, Component } from 'vue';
|
||||||
|
import BaseContainer from '@/components/AutoImport/BaseContainer/index.vue';
|
||||||
|
import BaseMain from '@/components/AutoImport/BaseMain/index.vue';
|
||||||
|
import BaseHeader from '@/components/AutoImport/BaseHeader/index.vue';
|
||||||
|
import BaseFooter from '@/components/AutoImport/BaseFooter/index.vue';
|
||||||
|
|
||||||
|
/** 注入全局组件 */
|
||||||
|
export function useAutoImport(app: App) {
|
||||||
|
// 全局注册组件
|
||||||
|
app.component('BaseContainer', BaseContainer);
|
||||||
|
app.component('BaseMain', BaseMain);
|
||||||
|
app.component('BaseHeader', BaseHeader);
|
||||||
|
app.component('BaseFooter', BaseFooter);
|
||||||
|
}
|
||||||
@ -1,213 +1,193 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import LayFrame from "../lay-frame/index.vue";
|
import LayFrame from '../lay-frame/index.vue';
|
||||||
import LayFooter from "../lay-footer/index.vue";
|
import LayFooter from '../lay-footer/index.vue';
|
||||||
import { useTags } from "@/layout/hooks/useTag";
|
import { useTags } from '@/layout/hooks/useTag';
|
||||||
import { useGlobal, isNumber } from "@pureadmin/utils";
|
import { useGlobal, isNumber } from '@pureadmin/utils';
|
||||||
import BackTopIcon from "@/assets/svg/back_top.svg?component";
|
import BackTopIcon from '@/assets/svg/back_top.svg?component';
|
||||||
import { h, computed, Transition, defineComponent } from "vue";
|
import { h, computed, Transition, defineComponent } from 'vue';
|
||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from '@/store/modules/permission';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
fixedHeader: Boolean
|
fixedHeader: Boolean,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { showModel } = useTags();
|
const { showModel } = useTags();
|
||||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||||
|
|
||||||
const isKeepAlive = computed(() => {
|
const isKeepAlive = computed(() => {
|
||||||
return $config?.KeepAlive;
|
return $config?.KeepAlive;
|
||||||
});
|
});
|
||||||
|
|
||||||
const transitions = computed(() => {
|
const transitions = computed(() => {
|
||||||
return route => {
|
return (route) => {
|
||||||
return route.meta.transition;
|
return route.meta.transition;
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const hideTabs = computed(() => {
|
const hideTabs = computed(() => {
|
||||||
return $storage?.configure.hideTabs;
|
return $storage?.configure.hideTabs;
|
||||||
});
|
});
|
||||||
|
|
||||||
const hideFooter = computed(() => {
|
const hideFooter = computed(() => {
|
||||||
return $storage?.configure.hideFooter;
|
return $storage?.configure.hideFooter;
|
||||||
});
|
});
|
||||||
|
|
||||||
const stretch = computed(() => {
|
const stretch = computed(() => {
|
||||||
return $storage?.configure.stretch;
|
return $storage?.configure.stretch;
|
||||||
});
|
});
|
||||||
|
|
||||||
const layout = computed(() => {
|
const layout = computed(() => {
|
||||||
return $storage?.layout.layout === "vertical";
|
return $storage?.layout.layout === 'vertical';
|
||||||
});
|
});
|
||||||
|
|
||||||
const getMainWidth = computed(() => {
|
const getMainWidth = computed(() => {
|
||||||
return isNumber(stretch.value)
|
return isNumber(stretch.value) ? stretch.value + 'px' : stretch.value ? '1440px' : '100%';
|
||||||
? stretch.value + "px"
|
|
||||||
: stretch.value
|
|
||||||
? "1440px"
|
|
||||||
: "100%";
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const getSectionStyle = computed(() => {
|
const getSectionStyle = computed(() => {
|
||||||
return [
|
return [
|
||||||
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
hideTabs.value && layout ? 'padding-top: 48px;' : '',
|
||||||
!hideTabs.value && layout
|
!hideTabs.value && layout ? (showModel.value == 'chrome' ? 'padding-top: 85px;' : 'padding-top: 81px;') : '',
|
||||||
? showModel.value == "chrome"
|
hideTabs.value && !layout.value ? 'padding-top: 48px;' : '',
|
||||||
? "padding-top: 85px;"
|
!hideTabs.value && !layout.value ? (showModel.value == 'chrome' ? 'padding-top: 85px;' : 'padding-top: 81px;') : '',
|
||||||
: "padding-top: 81px;"
|
props.fixedHeader ? '' : `padding-top: 0;${hideTabs.value ? 'min-height: calc(100vh - 48px);' : 'min-height: calc(100vh - 86px);'}`,
|
||||||
: "",
|
];
|
||||||
hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
|
|
||||||
!hideTabs.value && !layout.value
|
|
||||||
? showModel.value == "chrome"
|
|
||||||
? "padding-top: 85px;"
|
|
||||||
: "padding-top: 81px;"
|
|
||||||
: "",
|
|
||||||
props.fixedHeader
|
|
||||||
? ""
|
|
||||||
: `padding-top: 0;${
|
|
||||||
hideTabs.value
|
|
||||||
? "min-height: calc(100vh - 48px);"
|
|
||||||
: "min-height: calc(100vh - 86px);"
|
|
||||||
}`
|
|
||||||
];
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const transitionMain = defineComponent({
|
const transitionMain = defineComponent({
|
||||||
props: {
|
props: {
|
||||||
route: {
|
route: {
|
||||||
type: undefined,
|
type: undefined,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
const transitionName =
|
const transitionName = transitions.value(this.route)?.name || 'fade-transform';
|
||||||
transitions.value(this.route)?.name || "fade-transform";
|
const enterTransition = transitions.value(this.route)?.enterTransition;
|
||||||
const enterTransition = transitions.value(this.route)?.enterTransition;
|
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
||||||
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
return h(
|
||||||
return h(
|
Transition,
|
||||||
Transition,
|
{
|
||||||
{
|
name: enterTransition ? 'pure-classes-transition' : transitionName,
|
||||||
name: enterTransition ? "pure-classes-transition" : transitionName,
|
enterActiveClass: enterTransition ? `animate__animated ${enterTransition}` : undefined,
|
||||||
enterActiveClass: enterTransition
|
leaveActiveClass: leaveTransition ? `animate__animated ${leaveTransition}` : undefined,
|
||||||
? `animate__animated ${enterTransition}`
|
mode: 'out-in',
|
||||||
: undefined,
|
appear: true,
|
||||||
leaveActiveClass: leaveTransition
|
},
|
||||||
? `animate__animated ${leaveTransition}`
|
{
|
||||||
: undefined,
|
default: () => [this.$slots.default()],
|
||||||
mode: "out-in",
|
}
|
||||||
appear: true
|
);
|
||||||
},
|
},
|
||||||
{
|
|
||||||
default: () => [this.$slots.default()]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section
|
<section
|
||||||
:class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
:class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
||||||
:style="getSectionStyle"
|
:style="getSectionStyle"
|
||||||
>
|
>
|
||||||
<router-view>
|
<router-view>
|
||||||
<template #default="{ Component, route }">
|
<template #default="{ Component, route }">
|
||||||
<LayFrame :currComp="Component" :currRoute="route">
|
<LayFrame
|
||||||
<template #default="{ Comp, fullPath, frameInfo }">
|
:currComp="Component"
|
||||||
<el-scrollbar
|
:currRoute="route"
|
||||||
v-if="fixedHeader"
|
|
||||||
:wrap-style="{
|
|
||||||
display: 'flex',
|
|
||||||
'flex-wrap': 'wrap',
|
|
||||||
'max-width': getMainWidth,
|
|
||||||
margin: '0 auto',
|
|
||||||
transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
|
|
||||||
}"
|
|
||||||
:view-style="{
|
|
||||||
display: 'flex',
|
|
||||||
flex: 'auto',
|
|
||||||
overflow: 'hidden',
|
|
||||||
'flex-direction': 'column'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<el-backtop
|
|
||||||
title="回到顶部"
|
|
||||||
target=".app-main .el-scrollbar__wrap"
|
|
||||||
>
|
|
||||||
<BackTopIcon />
|
|
||||||
</el-backtop>
|
|
||||||
<div class="grow">
|
|
||||||
<transitionMain :route="route">
|
|
||||||
<keep-alive
|
|
||||||
v-if="isKeepAlive"
|
|
||||||
:include="usePermissionStoreHook().cachePageList"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="Comp"
|
|
||||||
:key="fullPath"
|
|
||||||
:frameInfo="frameInfo"
|
|
||||||
class="main-content"
|
|
||||||
/>
|
|
||||||
</keep-alive>
|
|
||||||
<component
|
|
||||||
:is="Comp"
|
|
||||||
v-else
|
|
||||||
:key="fullPath"
|
|
||||||
:frameInfo="frameInfo"
|
|
||||||
class="main-content"
|
|
||||||
/>
|
|
||||||
</transitionMain>
|
|
||||||
</div>
|
|
||||||
<LayFooter v-if="!hideFooter" />
|
|
||||||
</el-scrollbar>
|
|
||||||
<div v-else class="grow">
|
|
||||||
<transitionMain :route="route">
|
|
||||||
<keep-alive
|
|
||||||
v-if="isKeepAlive"
|
|
||||||
:include="usePermissionStoreHook().cachePageList"
|
|
||||||
>
|
>
|
||||||
<component
|
<template #default="{ Comp, fullPath, frameInfo }">
|
||||||
:is="Comp"
|
<el-scrollbar
|
||||||
:key="fullPath"
|
v-if="fixedHeader"
|
||||||
:frameInfo="frameInfo"
|
:wrap-style="{
|
||||||
class="main-content"
|
display: 'flex',
|
||||||
/>
|
'flex-wrap': 'wrap',
|
||||||
</keep-alive>
|
'max-width': getMainWidth,
|
||||||
<component
|
margin: '0 auto',
|
||||||
:is="Comp"
|
transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
v-else
|
}"
|
||||||
:key="fullPath"
|
:view-style="{
|
||||||
:frameInfo="frameInfo"
|
display: 'flex',
|
||||||
class="main-content"
|
flex: 'auto',
|
||||||
/>
|
overflow: 'hidden',
|
||||||
</transitionMain>
|
'flex-direction': 'column',
|
||||||
</div>
|
}"
|
||||||
</template>
|
>
|
||||||
</LayFrame>
|
<el-backtop
|
||||||
</template>
|
title="回到顶部"
|
||||||
</router-view>
|
target=".app-main .el-scrollbar__wrap"
|
||||||
|
>
|
||||||
<!-- 页脚 -->
|
<BackTopIcon />
|
||||||
<LayFooter v-if="!hideFooter && !fixedHeader" />
|
</el-backtop>
|
||||||
</section>
|
|
||||||
|
<transitionMain :route="route">
|
||||||
|
<keep-alive
|
||||||
|
v-if="isKeepAlive"
|
||||||
|
:include="usePermissionStoreHook().cachePageList"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="Comp"
|
||||||
|
:key="fullPath"
|
||||||
|
:frameInfo="frameInfo"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</keep-alive>
|
||||||
|
<component
|
||||||
|
:is="Comp"
|
||||||
|
v-else
|
||||||
|
:key="fullPath"
|
||||||
|
:frameInfo="frameInfo"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</transitionMain>
|
||||||
|
|
||||||
|
<LayFooter v-if="!hideFooter" />
|
||||||
|
</el-scrollbar>
|
||||||
|
<template v-else>
|
||||||
|
<transitionMain :route="route">
|
||||||
|
<keep-alive
|
||||||
|
v-if="isKeepAlive"
|
||||||
|
:include="usePermissionStoreHook().cachePageList"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="Comp"
|
||||||
|
:key="fullPath"
|
||||||
|
:frameInfo="frameInfo"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</keep-alive>
|
||||||
|
<component
|
||||||
|
:is="Comp"
|
||||||
|
v-else
|
||||||
|
:key="fullPath"
|
||||||
|
:frameInfo="frameInfo"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</transitionMain>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</LayFrame>
|
||||||
|
</template>
|
||||||
|
</router-view>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<LayFooter v-if="!hideFooter && !fixedHeader" />
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app-main {
|
.app-main {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-main-nofixed-header {
|
.app-main-nofixed-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
margin: 24px;
|
margin: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<Base-Container>
|
||||||
|
<pure-table
|
||||||
|
class="base-main"
|
||||||
|
:data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
|
</Base-Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
defineOptions({
|
||||||
|
name: 'TemplateLayout',
|
||||||
|
});
|
||||||
|
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'John',
|
||||||
|
age: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jane',
|
||||||
|
age: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bob',
|
||||||
|
age: 28,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
label: '姓名',
|
||||||
|
prop: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '年龄',
|
||||||
|
prop: 'age',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
Loading…
Reference in New Issue