feat: 布局问题

src/components/AutoImport/BaseContainer/index.vue

@@ -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>

src/components/AutoImport/BaseFooter/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <section class="base-container">
+        <slot></slot>
+    </section>
+</template>

src/components/AutoImport/BaseHeader/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <section class="base-container">
+        <slot></slot>
+    </section>
+</template>

src/components/AutoImport/BaseMain/index.vue

@@ -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>

src/components/AutoImport/index.ts

@@ -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);
+}

src/layout/components/lay-content/index.vue

@@ -1,14 +1,14 @@
 <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();
@@ -19,7 +19,7 @@ const isKeepAlive = computed(() => {
 });
 
 const transitions = computed(() => {
-  return route => {
+    return (route) => {
         return route.meta.transition;
     };
 });
@@ -37,38 +37,20 @@ const stretch = computed(() => {
 });
 
 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);"
-        }`
+        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);'}`,
     ];
 });
 
@@ -76,32 +58,27 @@ const transitionMain = defineComponent({
     props: {
         route: {
             type: undefined,
-      required: true
-    }
+            required: true,
+        },
     },
     render() {
-    const transitionName =
-      transitions.value(this.route)?.name || "fade-transform";
+        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
+                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()]
+                default: () => [this.$slots.default()],
             }
         );
-  }
+    },
 });
 </script>
 
@@ -112,7 +89,10 @@ const transitionMain = defineComponent({
     >
         <router-view>
             <template #default="{ Component, route }">
-        <LayFrame :currComp="Component" :currRoute="route">
+                <LayFrame
+                    :currComp="Component"
+                    :currRoute="route"
+                >
                     <template #default="{ Comp, fullPath, frameInfo }">
                         <el-scrollbar
                             v-if="fixedHeader"
@@ -121,13 +101,13 @@ const transitionMain = defineComponent({
                                 'flex-wrap': 'wrap',
                                 'max-width': getMainWidth,
                                 margin: '0 auto',
-                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
+                                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)',
                             }"
                             :view-style="{
                                 display: 'flex',
                                 flex: 'auto',
                                 overflow: 'hidden',
-                'flex-direction': 'column'
+                                'flex-direction': 'column',
                             }"
                         >
                             <el-backtop
@@ -136,7 +116,7 @@ const transitionMain = defineComponent({
                             >
                                 <BackTopIcon />
                             </el-backtop>
-              <div class="grow">
+
                             <transitionMain :route="route">
                                 <keep-alive
                                     v-if="isKeepAlive"
@@ -157,10 +137,10 @@ const transitionMain = defineComponent({
                                     class="main-content"
                                 />
                             </transitionMain>
-              </div>
+
                             <LayFooter v-if="!hideFooter" />
                         </el-scrollbar>
-            <div v-else class="grow">
+                        <template v-else>
                             <transitionMain :route="route">
                                 <keep-alive
                                     v-if="isKeepAlive"
@@ -181,7 +161,7 @@ const transitionMain = defineComponent({
                                     class="main-content"
                                 />
                             </transitionMain>
-            </div>
+                        </template>
                     </template>
                 </LayFrame>
             </template>
@@ -208,6 +188,6 @@ const transitionMain = defineComponent({
 }
 
 .main-content {
-  margin: 24px;
+    margin: 0;
 }
 </style>

src/main.ts

@@ -1,64 +1,61 @@
-import App from "./App.vue";
-import router from "./router";
-import { setupStore } from "@/store";
-import { getPlatformConfig } from "./config";
-import { MotionPlugin } from "@vueuse/motion";
+import App from './App.vue';
+import router from './router';
+import { setupStore } from '@/store';
+import { getPlatformConfig } from './config';
+import { MotionPlugin } from '@vueuse/motion';
 // import { useEcharts } from "@/plugins/echarts";
-import { createApp, type Directive } from "vue";
-import { useElementPlus } from "@/plugins/elementPlus";
-import { injectResponsiveStorage } from "@/utils/responsive";
+import { createApp, type Directive } from 'vue';
+import { useElementPlus } from '@/plugins/elementPlus';
+import { injectResponsiveStorage } from '@/utils/responsive';
+import { useAutoImport } from '@/components/AutoImport';
 
-import Table from "@pureadmin/table";
+import Table from '@pureadmin/table';
 // import PureDescriptions from "@pureadmin/descriptions";
 
 // 引入重置样式
-import "./style/reset.scss";
+import './style/reset.scss';
 // 导入公共样式
-import "./style/index.scss";
+import './style/index.scss';
 // 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
-import "./style/tailwind.css";
-import "element-plus/dist/index.css";
+import './style/tailwind.css';
+import 'element-plus/dist/index.css';
 // 导入字体图标
-import "./assets/iconfont/iconfont.js";
-import "./assets/iconfont/iconfont.css";
+import './assets/iconfont/iconfont.js';
+import './assets/iconfont/iconfont.css';
 
 const app = createApp(App);
 
 // 自定义指令
-import * as directives from "@/directives";
-Object.keys(directives).forEach(key => {
+import * as directives from '@/directives';
+Object.keys(directives).forEach((key) => {
     app.directive(key, (directives as { [key: string]: Directive })[key]);
 });
 
 // 全局注册@iconify/vue图标库
-import {
-  IconifyIconOffline,
-  IconifyIconOnline,
-  FontIcon
-} from "./components/ReIcon";
-app.component("IconifyIconOffline", IconifyIconOffline);
-app.component("IconifyIconOnline", IconifyIconOnline);
-app.component("FontIcon", FontIcon);
+import { IconifyIconOffline, IconifyIconOnline, FontIcon } from './components/ReIcon';
+app.component('IconifyIconOffline', IconifyIconOffline);
+app.component('IconifyIconOnline', IconifyIconOnline);
+app.component('FontIcon', FontIcon);
 
 // 全局注册按钮级别权限组件
-import { Auth } from "@/components/ReAuth";
-import { Perms } from "@/components/RePerms";
-app.component("Auth", Auth);
-app.component("Perms", Perms);
+import { Auth } from '@/components/ReAuth';
+import { Perms } from '@/components/RePerms';
+app.component('Auth', Auth);
+app.component('Perms', Perms);
 
 // 全局注册vue-tippy
-import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
-import VueTippy from "vue-tippy";
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/themes/light.css';
+import VueTippy from 'vue-tippy';
 app.use(VueTippy);
 
-getPlatformConfig(app).then(async config => {
+getPlatformConfig(app).then(async (config) => {
     setupStore(app);
     app.use(router);
     await router.isReady();
     injectResponsiveStorage(app, config);
-  app.use(MotionPlugin).use(useElementPlus).use(Table);
+    app.use(MotionPlugin).use(useElementPlus).use(useAutoImport).use(Table);
     // .use(PureDescriptions)
     // .use(useEcharts);
-  app.mount("#app");
+    app.mount('#app');
 });

src/plugins/elementPlus.ts

@@ -1,5 +1,5 @@
 // 按需引入element-plus（该方法稳定且明确。当然也支持：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5）
-import type { App, Component } from "vue";
+import type { App, Component } from 'vue';
 import {
     /**
      * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
@@ -117,8 +117,8 @@ import {
     ElPopoverDirective, // v-popover 指令
     ElMessage, // $message 全局属性对象globalProperties
     ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
-  ElNotification // $notify 全局属性对象globalProperties
-} from "element-plus";
+    ElNotification, // $notify 全局属性对象globalProperties
+} from 'element-plus';
 
 const components = [
     ElAffix,
@@ -223,17 +223,14 @@ const components = [
     ElWatermark,
     ElTour,
     ElTourStep,
-  ElSegmented
+    ElSegmented,
 ];
 
-const plugins = [
-  ElLoading,
-  ElInfiniteScroll,
-  ElPopoverDirective,
-  ElMessage,
-  ElMessageBox,
-  ElNotification
-];
+const plugins = [ElLoading, ElInfiniteScroll, ElPopoverDirective, ElMessage, ElMessageBox, ElNotification];
+
+/** 设置部分组件的默认属性 */
+ElCard.props.shadow = { type: String, default: 'never' };
+ElButton.props.round = { type: Boolean, default: true };
 
 /** 按需引入`element-plus` */
 export function useElementPlus(app: App) {
@@ -242,7 +239,7 @@ export function useElementPlus(app: App) {
         app.component(component.name, component);
     });
     // 全局注册插件
-  plugins.forEach(plugin => {
+    plugins.forEach((plugin) => {
         app.use(plugin);
     });
 }

src/router/modules/template.ts

@@ -19,5 +19,13 @@ export default {
                 title: '基础模版',
             },
         },
+        {
+            path: '/template/layout',
+            name: 'TemplateLayout',
+            component: () => import('@/views/template/layout/index.vue'),
+            meta: {
+                title: '布局模版',
+            },
+        },
     ],
 } satisfies RouteConfigsTable;

src/style/element-plus.scss

@@ -16,7 +16,7 @@
 }
 
 /* 重置 el-button 中 icon 的 margin */
-.reset-margin [class*="el-icon"] + span {
+.reset-margin [class*='el-icon'] + span {
     margin-left: 2px !important;
 }
 
@@ -186,3 +186,8 @@
         background: rgb(199 201 203); /* 滑块hover颜色 */
     }
 }
+
+/** 默认el-card没有边框 */
+.el-card {
+    border: none !important;
+}

src/views/template/layout/index.vue

@@ -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>