perf(layout): 重构 layout 组件, 增强 carouel 轮播组件

src/css/layui.css

@@ -19,7 +19,6 @@ body {
 }
 
 .layui-edge,
-.layui-header,
 .layui-inline,
 .layui-main {
   position: relative;
@@ -1020,86 +1019,17 @@ a cite {
   margin: 0 auto;
 }
 
-.layui-header {
-  z-index: 1000;
-  height: 60px;
-}
-
-.layui-header a:hover {
-  transition: all 0.5s;
-  -webkit-transition: all 0.5s;
-}
-
-.layui-side {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 999;
-  width: 200px;
-}
-
 .layui-side-scroll {
   position: relative;
   width: 220px;
   height: 100%;
 }
 
-.layui-body {
-  position: relative;
-  left: 200px;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 900;
-  width: auto;
-  box-sizing: border-box;
-}
-
-.layui-layout-admin .layui-header {
-  top: 0;
-  left: 0;
-  right: 0;
-  position: fixed;
-  background-color: #23262e;
-}
-
-.layui-layout-admin .layui-side {
-  top: 60px;
-  width: 200px;
-  overflow-x: hidden;
-}
-
-.layui-layout-admin .layui-body {
-  position: absolute;
-  top: 60px;
-  padding-bottom: 44px;
-}
-
-.layui-layout-admin .layui-main {
-  width: auto;
-  margin: 0 15px;
-}
-
-.layui-layout-admin .layui-footer {
-  position: fixed;
-  left: 200px;
-  right: 0;
-  bottom: 0;
-  z-index: 990;
-  height: 44px;
-  line-height: 44px;
-  padding: 0 15px;
-  box-shadow: -1px 0 4px rgb(0 0 0 / 12%);
-  background-color: #fafafa;
-}
-
-.layui-layout-admin .layui-logo {
-  position: absolute;
+.layui-logo {
   left: 0;
   top: 0;
   width: 200px;
-  height: 100%;
+  height: 60px;
   line-height: 60px;
   text-align: center;
   color: #009688;
@@ -1107,10 +1037,6 @@ a cite {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
 }
 
-.layui-layout-admin .layui-header .layui-nav {
-  background: 0 0;
-}
-
 .layui-layout-left {
   position: absolute !important;
   left: 200px;
@@ -4826,10 +4752,6 @@ body .layui-table-tips .layui-layer-content {
   background-color: #009688;
 }
 
-.layui-side .layui-nav-tree .layui-nav-bar {
-  width: 2px;
-}
-
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this a,
 .layui-nav-tree .layui-this,
@@ -4927,7 +4849,7 @@ body .layui-table-tips .layui-layer-content {
   color: #5fb878 !important;
 }
 
-.layui-breadcrumb a:nth-last-child(2)  {
+.layui-breadcrumb a:nth-last-child(2) {
   color: #666;
   font-style: normal;
 }

src/module/body/index.vue

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

src/module/carousel/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="layui-carousel"
-    lay-anim
-    lay-indicator="inside"
-    lay-arrow="always"
+    :lay-anim="anim"
+    :lay-indicator="indicator"
+    :lay-arrow="arrow"
     :style="{ width: width, height: height }"
   >
     <div carousel-item>
@@ -24,18 +24,18 @@
       lay-type="sub"
       @click="prev"
     >
-      </button
+      {{ anim === 'updown' ? '' : '' }}</button
     ><button
       class="layui-icon layui-carousel-arrow"
       lay-type="add"
       @click="next"
     >
-      
+      {{ anim === 'updown' ? '' : '' }}
     </button>
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
-import { withDefaults, defineProps, provide, useSlots, ref } from 'vue'
+import { withDefaults, defineProps, provide, useSlots, ref, computed } from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && (slot.default() as any[])
@@ -45,19 +45,31 @@ const props = withDefaults(
     width?: string
     height?: string
     modelValue: string
+    anim: string
+    arrow: string
+    indicator: string
   }>(),
   {
     width: '100%',
     height: '280px',
+    anim: 'default',
+    arrow: 'hover',
+    indicator: 'inside'
   }
 )
 
-const active = ref(props.modelValue)
+const active = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
 
-const emit = defineEmits(['update:modelValue', 'change', 'close'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const change = function (id: any) {
-  emit('update:modelValue', id)
   emit('change', id)
   active.value = id
 }
@@ -65,25 +77,25 @@ const change = function (id: any) {
 provide('active', active)
 
 const prev = function () {
-  for(var i = 0; i< slots.length; i++) {
-    if(slots[i].props.id === active.value) {
-      if(i === 0) {
-        return false;
+  for (var i = 0; i < slots.length; i++) {
+    if (slots[i].props.id === active.value) {
+      if (i === 0) {
+        return false
       }
       active.value = slots[i - 1].props.id
-      break;
+      break
     }
   }
 }
 
 const next = function () {
-  for(var i = 0; i< slots.length; i++) {
-    if(slots[i].props.id === active.value) {
-      if(i === slots.length - 1) {
-        return false;
+  for (var i = 0; i < slots.length; i++) {
+    if (slots[i].props.id === active.value) {
+      if (i === slots.length - 1) {
+        return false
       }
       active.value = slots[i + 1].props.id
-      break;
+      break
     }
   }
 }

src/module/footer/index.vue

@@ -4,4 +4,16 @@
   </div>
 </template>
 
-<script setup name="LayFooter" lang="ts"></script>
+<script lang="ts">
+export default {
+  name: 'LayFooter',
+}
+</script>
+
+<script setup lang="ts"></script>
+
+<style>
+.layui-footer {
+  box-sizing: border-box;
+}
+</style>

src/module/header/index.vue

@@ -3,5 +3,15 @@
     <slot />
   </div>
 </template>
-<script setup name="LayHeader"></script>
+<script lang="ts">
+export default {
+  name: 'LayHeader',
+}
+</script>
 <script setup lang="ts"></script>
+<style>
+.layui-header {
+  box-sizing: border-box;
+  height: 60px;
+}
+</style>

src/module/layout/index.vue

@@ -1,7 +1,54 @@
 <template>
-  <div class="layui-layout layui-layout-admin">
+  <section :class="classes">
     <slot />
-  </div>
+  </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'
 
-<script setup name="LayLayout" lang="ts"></script>
+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/rate/index.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
   defineProps<{
     length?: number
     modelValue?: number
+    character?: string
   }>(),
   {
     length: 5,
@@ -45,7 +46,6 @@ const mouseenter = function (index: number) {
   }
 
   // select update 时, 通知 change 事件
-
   emit('update:modelValue', index + 1)
 }
 </script>

src/module/scroll/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="layui-side-scroll" />
+  <div class="layui-side-scroll">
+    <slot></slot>
+  </div>
 </template>
 
 <script setup name="LayScroll" lang="ts"></script>

src/module/side/index.vue

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