initHeader

frontend/src/layouts/index.vue

@@ -1,34 +1,32 @@
+<!-- 💥 这里是一次性加载 LayoutComponents -->
 <template>
-  <div class='common-layout'>
-    <el-container>
-      <el-header  :style="{'--el-header-height':headerHeight+'px',backgroundColor:'var(--el-color-primary)'}">
-       <cn-header :headerHeight='headerHeight' />
-      </el-header>
-      <el-main :style='{height:containerHeight}'>
-        <router-view />
-      </el-main>
-    </el-container>
-  </div>
+  <component :is="LayoutComponents[layout]" />
+  <ThemeDrawer />
 </template>
-<script setup lang='ts'>
-defineOptions({
-  name: 'home',
-})
-import { ref, computed } from 'vue'
-import CnHeader from '@/layouts/CnHeader/index.vue'
-let headerHeight = ref(70)
-
-let containerHeight = computed(() => {
-  const viewportHeight = window.innerHeight // 获取视口高度
-  const heightInPx = viewportHeight - headerHeight.value
-  return `${heightInPx}px`
-})
 
+<script setup lang="ts" name="layout">
+import { computed, type Component } from "vue";
+import { LayoutType } from "@/stores/interface";
+import { useGlobalStore } from "@/stores/modules/global";
+import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+import LayoutVertical from "./LayoutVertical/index.vue";
+import LayoutClassic from "./LayoutClassic/index.vue";
+import LayoutTransverse from "./LayoutTransverse/index.vue";
+import LayoutColumns from "./LayoutColumns/index.vue";
 
+const LayoutComponents: Record<LayoutType, Component> = {
+  vertical: LayoutVertical,
+  classic: LayoutClassic,
+  transverse: LayoutTransverse,
+  columns: LayoutColumns
+};
 
+const globalStore = useGlobalStore();
+const layout = computed(() => globalStore.layout);
 </script>
-<style scoped lang='scss'>
- .el-main{
-   padding: 10px;
- }
+
+<style scoped lang="scss">
+.layout {
+  min-width: 600px;
+}
 </style>