perf(field): 根据 slot 内容决定 块状 线条 状态

src/module/checkboxGroup/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayCheckboxGroup', Component)
+}
+
+export default Component as IDefineComponent

src/module/checkboxGroup/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <span @click="handleClick">
+    <input type="checkbox" :name="name" title="写作" :value="label" />
+    <div
+      class="layui-unselect"
+      :class="[
+        {
+          'layui-checkbox-disbaled layui-disabled': disabled,
+        },
+        'layui-form-checkbox',
+        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot /></span>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
+      <i v-if="!skin" class="layui-icon layui-icon-ok" />
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string[]
+  label: string
+  disabled?: boolean
+  name?: string
+  skin?: string
+}>()
+
+const hasValue = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function () {
+  if (!props.disabled) {
+    if (!props.modelValue.includes(props.label)) {
+      props.modelValue.push(props.label)
+    } else {
+      let index = props.modelValue.indexOf(props.label)
+      props.modelValue.splice(index, 1)
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

src/module/field/index.vue

@@ -1,14 +1,25 @@
 <template>
-  <fieldset class="layui-elem-field">
+
+  <fieldset v-if="slot.default" class="layui-elem-field">
     <legend>{{ title }}</legend>
     <div class="layui-field-box">
       <slot />
     </div>
   </fieldset>
+
+  <fieldset v-else class="layui-elem-field layui-field-title">
+    <legend><a name="docend">结语</a></legend>
+  </fieldset>
+
 </template>
 
 <script setup name="LayField" lang="ts">
-const props = defineProps<{
-  title?: string
-}>()
+import { defineProps, useSlots } from 'vue'
+
+const slot = useSlots()
+
+const props =
+  defineProps<{
+    title?: string
+  }>()
 </script>

src/module/header/index.vue

@@ -3,5 +3,5 @@
     <slot />
   </div>
 </template>
-
-<script setup name="LayHeader" lang="ts"></script>
+<script setup name="LayHeader"></script>
+<script setup lang="ts"></script>