src/components.d.ts

@@ -14,21 +14,12 @@ declare module 'vue' {
     Cropper: typeof import('./components/avatar/cropper.vue')['default']
     Dict: typeof import('./components/form/Dict.vue')['default']
     Editor: typeof import('./components/form/Editor.vue')['default']
-    ElArea: typeof import('./components/form/ElArea.vue')['default']
-    ElDict: typeof import('./components/form/ElDict.vue')['default']
-    ElEditor: typeof import('./components/form/ElEditor.vue')['default']
-    ElEmployees: typeof import('./components/form/ElEmployees.vue')['default']
     Employees: typeof import('./components/form/Employees.vue')['default']
     Exception: typeof import('./components/Exception.vue')['default']
+    FormTitle: typeof import('./components/form/FormTitle.vue')['default']
     FsCheckCard: typeof import('./components/FsCheckCard/index.vue')['default']
-    FsCity: (typeof import('./components/FsCity/index.vue'))['default']
-    FsCitySelect: typeof import('./components/FsCitySelect/index.vue')['default']
-    FsImageUpload: (typeof import('./components/FsImageUpload/index.vue'))['default']
-    FsMap: (typeof import('./components/FsMap/index.vue'))['default']
     FsMapPicker: typeof import('./components/FsMapPicker/index.vue')['default']
     FsPrinter: typeof import('./components/FsPrinter/index.vue')['default']
-    FsTableSelect: typeof import('./components/FsTableSelect/index.vue')['default']
-    FsText: (typeof import('./components/FsText/index.vue'))['default']
     FsTour: typeof import('./components/FsTour/index.vue')['default']
     GlobalAside: typeof import('./components/core/GlobalAside.vue')['default']
     GlobalFooter: typeof import('./components/core/GlobalFooter.vue')['default']

src/components/form/FormTitle.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+// 颜色  插槽
+import colorUtil from '@/utils/color'
+
+const props: any = withDefaults(
+  defineProps<{
+    title: string
+    type?: string
+    color?: string
+  }>(),
+  {
+    title: '标题',
+    type: 'primary'
+  }
+)
+
+const bgColor = computed(() => {
+  return props.color ? colorUtil.lighten(props.color, 0.6) : `var(--el-color-${props.type}-light-9)`
+})
+
+const titleColor = computed(() => {
+  return props.color ?? `var(--el-color-${props.type})`
+})
+</script>
+
+<template>
+  <div
+    class="w-full rounded-md py-[2px] px-[10px] font-bold"
+    :style="{
+      backgroundColor: bgColor,
+      color: titleColor
+    }"
+  >
+    <slot>
+      <span class="title pl-25px relative">{{ title }}</span>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translate(0, -50%);
+    width: 10px;
+    height: 10px;
+    background-color: v-bind(titleColor);
+    border-radius: 50%;
+  }
+}
+</style>

src/views/form/Basic.vue

@@ -27,6 +27,21 @@ const formConfig = reactive<BasicForm>({
     labelPosition: 'right'
   },
   formItems: [
+    {
+      label: '',
+      value: '',
+      name: '',
+      type: 'form-title',
+      span: 24,
+      notFormItem: true,
+      props: {
+        title: '基础表单',
+        type: 'success'
+      },
+      formItemProps: {
+        labelWidth: '0px'
+      }
+    },
     {
       label: '用户名',
       value: '',
@@ -386,6 +401,9 @@ const handleInputConfirm = () => {
 
 <template>
   <div class="h-full bg-white p-16px pt-20px overflow-auto">
+    <form-title type="primary" class="py-10px mb-4 w-50%">
+      <template #default>基础表单</template>
+    </form-title>
     <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
       <template #prepend1> test1 </template>
       <template #append1> test1 </template>