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">
|
||||
import LayFrame from "../lay-frame/index.vue";
|
||||
import LayFooter from "../lay-footer/index.vue";
|
||||
import { useTags } from "@/layout/hooks/useTag";
|
||||
import { useGlobal, isNumber } from "@pureadmin/utils";
|
||||
import BackTopIcon from "@/assets/svg/back_top.svg?component";
|
||||
import { h, computed, Transition, defineComponent } from "vue";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LayFrame from '../lay-frame/index.vue';
|
||||
import LayFooter from '../lay-footer/index.vue';
|
||||
import { useTags } from '@/layout/hooks/useTag';
|
||||
import { useGlobal, isNumber } from '@pureadmin/utils';
|
||||
import BackTopIcon from '@/assets/svg/back_top.svg?component';
|
||||
import { h, computed, Transition, defineComponent } from 'vue';
|
||||
import { usePermissionStoreHook } from '@/store/modules/permission';
|
||||
|
||||
const props = defineProps({
|
||||
fixedHeader: Boolean
|
||||
fixedHeader: Boolean,
|
||||
});
|
||||
|
||||
const { showModel } = useTags();
|
||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const isKeepAlive = computed(() => {
|
||||
return $config?.KeepAlive;
|
||||
return $config?.KeepAlive;
|
||||
});
|
||||
|
||||
const transitions = computed(() => {
|
||||
return route => {
|
||||
return route.meta.transition;
|
||||
};
|
||||
return (route) => {
|
||||
return route.meta.transition;
|
||||
};
|
||||
});
|
||||
|
||||
const hideTabs = computed(() => {
|
||||
return $storage?.configure.hideTabs;
|
||||
return $storage?.configure.hideTabs;
|
||||
});
|
||||
|
||||
const hideFooter = computed(() => {
|
||||
return $storage?.configure.hideFooter;
|
||||
return $storage?.configure.hideFooter;
|
||||
});
|
||||
|
||||
const stretch = computed(() => {
|
||||
return $storage?.configure.stretch;
|
||||
return $storage?.configure.stretch;
|
||||
});
|
||||
|
||||
const layout = computed(() => {
|
||||
return $storage?.layout.layout === "vertical";
|
||||
return $storage?.layout.layout === 'vertical';
|
||||
});
|
||||
|
||||
const getMainWidth = computed(() => {
|
||||
return isNumber(stretch.value)
|
||||
? stretch.value + "px"
|
||||
: stretch.value
|
||||
? "1440px"
|
||||
: "100%";
|
||||
return isNumber(stretch.value) ? stretch.value + 'px' : stretch.value ? '1440px' : '100%';
|
||||
});
|
||||
|
||||
const getSectionStyle = computed(() => {
|
||||
return [
|
||||
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
||||
!hideTabs.value && layout
|
||||
? showModel.value == "chrome"
|
||||
? "padding-top: 85px;"
|
||||
: "padding-top: 81px;"
|
||||
: "",
|
||||
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);"
|
||||
}`
|
||||
];
|
||||
return [
|
||||
hideTabs.value && layout ? 'padding-top: 48px;' : '',
|
||||
!hideTabs.value && layout ? (showModel.value == 'chrome' ? 'padding-top: 85px;' : 'padding-top: 81px;') : '',
|
||||
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({
|
||||
props: {
|
||||
route: {
|
||||
type: undefined,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const transitionName =
|
||||
transitions.value(this.route)?.name || "fade-transform";
|
||||
const enterTransition = transitions.value(this.route)?.enterTransition;
|
||||
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
||||
return h(
|
||||
Transition,
|
||||
{
|
||||
name: enterTransition ? "pure-classes-transition" : transitionName,
|
||||
enterActiveClass: enterTransition
|
||||
? `animate__animated ${enterTransition}`
|
||||
: undefined,
|
||||
leaveActiveClass: leaveTransition
|
||||
? `animate__animated ${leaveTransition}`
|
||||
: undefined,
|
||||
mode: "out-in",
|
||||
appear: true
|
||||
},
|
||||
{
|
||||
default: () => [this.$slots.default()]
|
||||
}
|
||||
);
|
||||
}
|
||||
props: {
|
||||
route: {
|
||||
type: undefined,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const transitionName = transitions.value(this.route)?.name || 'fade-transform';
|
||||
const enterTransition = transitions.value(this.route)?.enterTransition;
|
||||
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
||||
return h(
|
||||
Transition,
|
||||
{
|
||||
name: enterTransition ? 'pure-classes-transition' : transitionName,
|
||||
enterActiveClass: enterTransition ? `animate__animated ${enterTransition}` : undefined,
|
||||
leaveActiveClass: leaveTransition ? `animate__animated ${leaveTransition}` : undefined,
|
||||
mode: 'out-in',
|
||||
appear: true,
|
||||
},
|
||||
{
|
||||
default: () => [this.$slots.default()],
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
||||
:style="getSectionStyle"
|
||||
>
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
<LayFrame :currComp="Component" :currRoute="route">
|
||||
<template #default="{ Comp, fullPath, frameInfo }">
|
||||
<el-scrollbar
|
||||
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"
|
||||
<section
|
||||
:class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
||||
:style="getSectionStyle"
|
||||
>
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
<LayFrame
|
||||
:currComp="Component"
|
||||
:currRoute="route"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</LayFrame>
|
||||
</template>
|
||||
</router-view>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<LayFooter v-if="!hideFooter && !fixedHeader" />
|
||||
</section>
|
||||
<template #default="{ Comp, fullPath, frameInfo }">
|
||||
<el-scrollbar
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
.app-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-main-nofixed-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
</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