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

src/module/body/index.less

@@ -0,0 +1,8 @@
+.layui-body {
+    display: block;
+    flex: 1;
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
+    min-height: 300px;
+}

src/module/body/index.vue

@@ -1,24 +1,15 @@
-<template>
-  <div class="layui-body">
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: 'LayBody',
 }
 </script>
 
-<script setup name="LayBody" lang="ts"></script>
+<script setup name="LayBody" lang="ts">
+import "./index.less"
+</script>
 
-<style>
+<template>
-.layui-body {
+  <div class="layui-body">
-  display: block;
+    <slot />
-  flex: 1;
+  </div>
-  overflow: auto;
+</template>
-  height: 100%;
-  box-sizing: border-box;
-  min-height: 300px;
-}
-</style>

src/module/button/index.vue

@@ -6,17 +6,17 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { computed } from 'vue';
+import { computed } from "vue";
 
 export interface LayButtonProps {
-    type?: 'primary' | 'normal' | 'warm' | 'danger'
+  type?: "primary" | "normal" | "warm" | "danger";
-    size?: 'lg' | 'sm' | 'xs'
+  size?: "lg" | "sm" | "xs";
-    fluid?: boolean
+  fluid?: boolean;
-    radius?: boolean
+  radius?: boolean;
-    border?: 'green' | 'blue' | 'orange' | 'red' | 'black'
+  border?: "green" | "blue" | "orange" | "red" | "black";
-    disabled?: boolean
+  disabled?: boolean;
-    loading?: boolean
+  loading?: boolean;
-    nativeType?: 'button' | 'submit' | 'reset'
+  nativeType?: "button" | "submit" | "reset";
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
@@ -29,11 +29,11 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
 
 const classes = computed(() => {
   return [
-      props.type ? 'layui-btn-' + props.type : '',
+    props.type ? `layui-btn-${props.type}` : "",
-      props.size ? 'layui-btn-' + props.size : '',
+    props.size ? `layui-btn-${props.size}` : "",
-      props.border ? 'layui-border-' + props.border : '',
+    props.border ? `layui-border-${props.border}` : "",
-  ]
+  ];
-})
+});
 </script>
 
 <template>
@@ -41,11 +41,11 @@ const classes = computed(() => {
     class="layui-btn"
     :class="[
       {
-       'layui-btn-fluid' : fluid,
+        'layui-btn-fluid': fluid,
-       'layui-btn-radius' : radius,
+        'layui-btn-radius': radius,
-       'layui-btn-disabled' : disabled
+        'layui-btn-disabled': disabled
       },
-      classes
+      classes,
     ]"
     :type="nativeType"
   >

src/module/col/index.vue

@@ -20,14 +20,14 @@ const props = defineProps<{
 
 const classes = computed(() => {
   return [
-    props.md ? "layui-col-md" + props.md : "",
+    props.md ? `layui-col-md${props.md}` : "",
-    props.xs ? "layui-col-xs" + props.xs : "",
+    props.xs ? `layui-col-xs${props.xs}` : "",
-    props.sm ? "layui-col-sm" + props.sm : "",
+    props.sm ? `layui-col-sm${props.sm}` : "", 
-    props.lg ? "layui-col-lg" + props.lg : "",
+    props.lg ? `layui-col-lg${props.lg}` : "",
-    props.mdOffset ? "layui-col-md-offset" + props.mdOffset : "",
+    props.mdOffset ? `layui-col-md-offset${props.mdOffset}` : "",
-    props.xsOffset ? "layui-col-xs-offset" + props.xsOffset : "",
+    props.xsOffset ? `layui-col-xs-offset${props.xsOffset}` : "",
-    props.smOffset ? "layui-col-sm-offset" + props.smOffset : "",
+    props.smOffset ? `layui-col-sm-offset${props.smOffset}` : "",
-    props.lgOffset ? "layui-col-lg-offset" + props.lgOffset : "",
+    props.lgOffset ? `layui-col-lg-offset${props.lgOffset}` : "",
   ];
 });
 </script>

src/module/footer/index.less

@@ -0,0 +1,3 @@
+.layui-footer {
+    box-sizing: border-box;
+}

src/module/footer/index.vue

@@ -1,19 +1,15 @@
-<template>
-  <div class="layui-footer">
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: 'LayFooter',
 }
 </script>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import "./index.less"
+</script>
 
-<style>
+<template>
-.layui-footer {
+  <div class="layui-footer">
-  box-sizing: border-box;
+    <slot />
-}
+  </div>
-</style>
+</template>

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>

src/module/row/index.vue

@@ -8,12 +8,14 @@ export default {
 import { computed, defineProps } from "vue";
 import "./index.less";
 
-const props = defineProps<{
+export interface LayRowProps {
   space?: string;
-}>();
+}
+
+const props = defineProps<LayRowProps>();
 
 const classes = computed(() => {
-  return [props.space ? "layui-col-space" + props.space : ""];
+  return [props.space ? `layui-col-space${props.space}` : ""];
 });
 </script>
 

src/module/side/index.less

@@ -0,0 +1,5 @@
+.layui-side {
+    overflow: auto;
+    box-sizing: border-box;
+    min-height: 300px;
+}

src/module/side/index.vue

@@ -1,38 +1,30 @@
-<template>
-  <div class="layui-side" :style="style">
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 export default {
-  name: 'LaySide',
+  name: "LaySide",
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, CSSProperties, defineProps } from 'vue'
+import { computed, defineProps, CSSProperties } from "vue";
+import "./index.less";
 
-const props = withDefaults(
+export interface LaySideProps {
-  defineProps<{
+  width?: string | number;
-    width?: string | number
+}
-  }>(),
-  {
-    width: '200',
-  }
-)
 
-const style = computed<CSSProperties>(() => {
+const props = withDefaults(defineProps<LaySideProps>(), {
+  width: "200",
+});
+
+const styles = computed<CSSProperties>(() => {
   return {
     width: `${props.width}px`,
-  }
+  };
-})
+});
 </script>
 
-<style>
+<template>
-.layui-side {
+  <div class="layui-side" :style="styles">
-  overflow: auto;
+    <slot />
-  box-sizing: border-box;
+  </div>
-  min-height: 300px;
+</template>
-}
-</style>