[调整] 优化 layout 组件代码结构

src/module/layout/index.less

@@ -0,0 +1,12 @@
+.layui-layout {
+    display: flex;
+    flex: 1;
+    flex-basis: auto;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.layui-layout-vertical {
+    flex-direction: column;
+}

src/module/layout/index.vue

@@ -1,54 +1,41 @@
+<script lang="ts">
+export default {
+  name: "LayLayout",
+};
+</script>
+
+<script setup lang="ts">
+import { Component, computed, useSlots } from "vue";
+import Header from "../header/index.vue";
+import "./index.less";
+
+export interface LayLayoutProps {
+  isVertical?: boolean;
+}
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<LayLayoutProps>(), {
+  isVertical: false,
+});
+
+const isVertical = computed(() => {
+  if (!slots.default) return false;
+  const vNodes = slots.default();
+  return vNodes.some((vNode) => {
+    const componentName = (vNode.type as Component).name;
+    if (!componentName) return false;
+    return [Header.name].includes(componentName);
+  });
+});
+
+const classes = computed(() => {
+  return ["layui-layout", { "layui-layout-vertical": isVertical.value }];
+});
+</script>
+
 <template>
   <section :class="classes">
     <slot />
   </section>
-</template>
-<script lang="ts">
-export default {
-  name: 'LayLayout',
-}
-</script>
-<script setup lang="ts">
-import { Component, computed, useSlots } from 'vue'
-import Header from '../header/index.vue'
-
-const props = withDefaults(
-  defineProps<{
-    isVertical?: boolean
-  }>(),
-  {
-    isVertical: false,
-  }
-)
-
-const slots = useSlots()
-
-const isVertical = computed(() => {
-  if (!slots.default) return false
-  const vNodes = slots.default()
-  return vNodes.some((vNode) => {
-    const componentName = (vNode.type as Component).name
-    if (!componentName) return false
-    return [Header.name].includes(componentName)
-  })
-})
-
-const classes = computed(() => {
-  return ['layui-layout', { 'layui-layout-vertical': isVertical.value }]
-})
-</script>
-
-<style>
-.layui-layout {
-  display: flex;
-  flex: 1;
-  flex-basis: auto;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.layui-layout-vertical {
-  flex-direction: column;
-}
-</style>
+</template>