feat: Add form demo

src/components/Form/index.ts

@@ -1,8 +1,14 @@
 import Form from './src/Form.vue'
+import { ElForm } from 'element-plus'
 
 export interface FormExpose {
-  setValues: (data: FormSetValuesType[]) => void
+  setValues: (data: Recordable) => void
+  setProps: (props: Recordable) => void
+  delSchema: (field: string) => void
+  addSchema: (formSchema: FormSchema, index?: number) => void
+  setSchema: (schemaProps: FormSetPropsType[]) => void
   formModel: Recordable
+  getElFormRef: () => ComponentRef<typeof ElForm>
 }
 
 export { Form }

src/components/Form/src/Form.vue

@@ -16,6 +16,8 @@ import { useRenderSelect } from './components/useRenderSelect'
 import { useRenderRadio } from './components/useRenderRadio'
 import { useRenderChcekbox } from './components/useRenderChcekbox'
 import { useDesign } from '@/hooks/web/useDesign'
+import { findIndex } from '@/utils'
+import { set } from 'lodash-es'
 
 const { getPrefixCls } = useDesign()
 
@@ -27,7 +29,6 @@ export default defineComponent({
     // 生成Form的布局结构数组
     schema: {
       type: Array as PropType<FormSchema[]>,
-      required: true,
       default: () => []
     },
     // 是否需要栅格布局
@@ -42,43 +43,73 @@ export default defineComponent({
     // 是否自定义内容
     isCustom: propTypes.bool.def(false),
     // 表单label宽度
-    labelWidth: propTypes.oneOfType([String, Number]).def(130)
+    labelWidth: propTypes.oneOfType([String, Number]).def('auto')
   },
   emits: ['register'],
   setup(props, { slots, expose, emit }) {
     // element form 实例
     const elFormRef = ref<ComponentRef<typeof ElForm>>()
-    const getProps = computed(() => props)
+
+    // useForm传入的props
+    const outsideProps = ref<Recordable>({})
+
+    const getProps = computed(() => Object.assign({ ...props }, unref(outsideProps)))
+
     const { schema, isCol, isCustom, autoSetPlaceholder } = unref(getProps)
+
     // 表单数据
     const formModel = ref<Recordable>({})
-    watch(
-      () => formModel.value,
-      (formModel: Recordable) => {
-        console.log(formModel)
-      },
-      {
-        deep: true
-      }
-    )
 
     onMounted(() => {
       emit('register', elFormRef.value?.$parent, elFormRef.value)
     })
 
     // 对表单赋值
-    const setValues = (data: FormSetValuesType[]) => {
-      if (!data.length) return
-      const formData: Recordable = {}
-      for (const v of data) {
-        formData[v.field] = v.value
+    const setValues = (data: Recordable = {}) => {
+      formModel.value = Object.assign(unref(formModel), data)
+    }
+
+    const setProps = (props: Recordable) => {
+      outsideProps.value = props
+    }
+
+    const delSchema = (field: string) => {
+      const index = findIndex(schema, (v: FormSchema) => v.field === field)
+      if (index > -1) {
+        schema.splice(index, 1)
+      }
+    }
+
+    const addSchema = (formSchema: FormSchema, index?: number) => {
+      if (index !== void 0) {
+        schema.splice(index, 0, formSchema)
+        return
       }
-      formModel.value = Object.assign(unref(formModel), formData)
+      schema.push(formSchema)
+    }
+
+    const setSchema = (schemaProps: FormSetPropsType[]) => {
+      for (const v of schema) {
+        for (const item of schemaProps) {
+          if (v.field === item.field) {
+            set(v, item.path, item.value)
+          }
+        }
+      }
+    }
+
+    const getElFormRef = (): ComponentRef<typeof ElForm> => {
+      return unref(elFormRef) as ComponentRef<typeof ElForm>
     }
 
     expose({
       setValues,
-      formModel
+      formModel,
+      setProps,
+      delSchema,
+      addSchema,
+      setSchema,
+      getElFormRef
     })
 
     // 监听表单结构化数组，重新生成formModel

src/hooks/web/useForm.ts

@@ -29,17 +29,19 @@ export const useForm = () => {
 
   // 一些内置的方法
   const methods: {
-    setValues: (data: FormSetValuesType[]) => void
-    getFormData: () => Promise<Recordable | undefined>
-    setSchema: (schemaProps: FormSetValuesType[]) => void
+    setProps: (props: Recordable) => void
+    setValues: (data: Recordable) => void
+    getFormData: <T = Recordable | undefined>() => Promise<T>
+    setSchema: (schemaProps: FormSetPropsType[]) => void
     addSchema: (formSchema: FormSchema, index?: number) => void
-    delSchema: (index: number) => void
+    delSchema: (field: string) => void
   } = {
-    /**
-     * @param field 字段
-     * @param value 值
-     */
-    setValues: async (data: FormSetValuesType[]) => {
+    setProps: async (props: Recordable = {}) => {
+      const form = await getForm()
+      form?.setProps(props)
+    },
+
+    setValues: async (data: Recordable) => {
       const form = await getForm()
       form?.setValues(data)
     },
@@ -62,19 +64,19 @@ export const useForm = () => {
     },
 
     /**
-     * @param index 删除哪个数据
+     * @param field 删除哪个数据
      */
-    delSchema: async (index: number) => {
+    delSchema: async (field: string) => {
       const form = await getForm()
-      form?.delSchema(index)
+      form?.delSchema(field)
     },
 
     /**
      * @returns form data
      */
-    getFormData: async (): Promise<Recordable | undefined> => {
+    getFormData: async <T = Recordable>(): Promise<T> => {
       const form = await getForm()
-      return form?.formModel || undefined
+      return form?.formModel as T
     }
   }
 

src/locales/en.ts

@@ -93,7 +93,9 @@ export default {
     watermark: 'Watermark',
     qrcode: 'Qrcode',
     highlight: 'Highlight',
-    infotip: 'Infotip'
+    infotip: 'Infotip',
+    form: 'Form',
+    defaultForm: 'All examples'
   },
   analysis: {
     newUser: 'New user',
@@ -193,7 +195,24 @@ export default {
     timePicker: 'Time Picker',
     timeSelect: 'Time Select',
     inputPassword: 'input Password',
-    passwordStrength: 'Password Strength'
+    passwordStrength: 'Password Strength',
+    defaultForm: 'All examples',
+    formDes:
+      'The secondary encapsulation of form components based on ElementPlus realizes data-driven and supports all Form parameters',
+    example: 'example',
+    operate: 'Operate',
+    change: 'Change',
+    restore: 'Restore',
+    disabled: 'Disabled',
+    disablement: 'Disablement',
+    delete: 'Delete',
+    add: 'Add',
+    setValue: 'Set value',
+    resetValue: 'Reset value',
+    set: 'Set',
+    subitem: 'Subitem',
+    formValidation: 'Form validation',
+    verifyReset: 'Verify reset'
   },
   guideDemo: {
     guide: 'Guide',

src/locales/zh-CN.ts

@@ -93,7 +93,9 @@ export default {
     watermark: '水印',
     qrcode: '二维码',
     highlight: '高亮',
-    infotip: '信息提示'
+    infotip: '信息提示',
+    form: '表单',
+    defaultForm: '全部示例'
   },
   analysis: {
     newUser: '新增用户',
@@ -193,7 +195,23 @@ export default {
     timePicker: '时间选择器',
     timeSelect: '时间选择',
     inputPassword: '密码输入框',
-    passwordStrength: '密码强度'
+    passwordStrength: '密码强度',
+    defaultForm: '全部示例',
+    formDes: '基于 ElementPlus 的 Form 组件二次封装，实现数据驱动，支持所有 Form 参数',
+    example: '示例',
+    operate: '操作',
+    change: '更改',
+    restore: '还原',
+    disabled: '禁用',
+    disablement: '解除禁用',
+    delete: '删除',
+    add: '添加',
+    setValue: '设置值',
+    resetValue: '重置值',
+    set: '设置',
+    subitem: '子项',
+    formValidation: '表单验证',
+    verifyReset: '验证重置'
   },
   guideDemo: {
     guide: '引导页',

src/router/index.ts

@@ -96,6 +96,41 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       alwaysShow: true
     },
     children: [
+      {
+        path: 'form',
+        component: getParentLayout(),
+        name: 'Form',
+        meta: {
+          title: t('router.form'),
+          alwaysShow: true
+        },
+        children: [
+          {
+            path: 'default-form',
+            component: () => import('@/views/Components/Form/DefaultForm.vue'),
+            name: 'DefaultForm',
+            meta: {
+              title: t('router.defaultForm')
+            }
+          },
+          {
+            path: 'use-form',
+            component: () => import('@/views/Components/Form/UseFormDemo.vue'),
+            name: 'UseForm',
+            meta: {
+              title: 'useForm'
+            }
+          },
+          {
+            path: 'ref-form',
+            component: () => import('@/views/Components/Form/RefForm.vue'),
+            name: 'RefForm',
+            meta: {
+              title: 'refForm'
+            }
+          }
+        ]
+      },
       {
         path: 'icon',
         component: () => import('@/views/Components/Icon.vue'),

src/views/Components/Form/DefaultForm.vue

@@ -0,0 +1,1127 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { reactive, ref, onMounted, computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useIcon } from '@/hooks/web/useIcon'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const { t } = useI18n()
+
+const isMobile = computed(() => appStore.getMobile)
+
+const restaurants = ref<Recordable[]>([])
+const querySearch = (queryString: string, cb: Fn) => {
+  const results = queryString
+    ? restaurants.value.filter(createFilter(queryString))
+    : restaurants.value
+  // call callback function to return suggestions
+  cb(results)
+}
+const createFilter = (queryString: string) => {
+  return (restaurant: Recordable) => {
+    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+  }
+}
+const loadAll = () => {
+  return [
+    { value: 'vue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' }
+  ]
+}
+const handleSelect = (item: Recordable) => {
+  console.log(item)
+}
+onMounted(() => {
+  restaurants.value = loadAll()
+})
+
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+const options = ref<ComponentOptions[]>(
+  Array.from({ length: 1000 }).map((_, idx) => ({
+    value: `Option ${idx + 1}`,
+    label: `${initials[idx % 10]}${idx}`
+  }))
+)
+const options2 = ref<ComponentOptions[]>(
+  Array.from({ length: 10 }).map((_, idx) => {
+    const label = idx + 1
+    return {
+      value: `Group ${label}`,
+      label: `Group ${label}`,
+      options: Array.from({ length: 10 }).map((_, idx) => ({
+        value: `Option ${idx + 1 + 10 * label}`,
+        label: `${initials[idx % 10]}${idx + 1 + 10 * label}`
+      }))
+    }
+  })
+)
+
+const options3: ComponentOptions[] = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency'
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback'
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency'
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation'
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'component',
+    label: 'Component',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout'
+          },
+          {
+            value: 'color',
+            label: 'Color'
+          },
+          {
+            value: 'typography',
+            label: 'Typography'
+          },
+          {
+            value: 'icon',
+            label: 'Icon'
+          },
+          {
+            value: 'button',
+            label: 'Button'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox'
+          },
+          {
+            value: 'input',
+            label: 'Input'
+          },
+          {
+            value: 'input-number',
+            label: 'InputNumber'
+          },
+          {
+            value: 'select',
+            label: 'Select'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader'
+          },
+          {
+            value: 'switch',
+            label: 'Switch'
+          },
+          {
+            value: 'slider',
+            label: 'Slider'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker'
+          },
+          {
+            value: 'datetime-picker',
+            label: 'DateTimePicker'
+          },
+          {
+            value: 'upload',
+            label: 'Upload'
+          },
+          {
+            value: 'rate',
+            label: 'Rate'
+          },
+          {
+            value: 'form',
+            label: 'Form'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: 'Data',
+        children: [
+          {
+            value: 'table',
+            label: 'Table'
+          },
+          {
+            value: 'tag',
+            label: 'Tag'
+          },
+          {
+            value: 'progress',
+            label: 'Progress'
+          },
+          {
+            value: 'tree',
+            label: 'Tree'
+          },
+          {
+            value: 'pagination',
+            label: 'Pagination'
+          },
+          {
+            value: 'badge',
+            label: 'Badge'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: 'Notice',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert'
+          },
+          {
+            value: 'loading',
+            label: 'Loading'
+          },
+          {
+            value: 'message',
+            label: 'Message'
+          },
+          {
+            value: 'message-box',
+            label: 'MessageBox'
+          },
+          {
+            value: 'notification',
+            label: 'Notification'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'menu',
+            label: 'Menu'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb'
+          },
+          {
+            value: 'dropdown',
+            label: 'Dropdown'
+          },
+          {
+            value: 'steps',
+            label: 'Steps'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: 'Others',
+        children: [
+          {
+            value: 'dialog',
+            label: 'Dialog'
+          },
+          {
+            value: 'tooltip',
+            label: 'Tooltip'
+          },
+          {
+            value: 'popover',
+            label: 'Popover'
+          },
+          {
+            value: 'card',
+            label: 'Card'
+          },
+          {
+            value: 'carousel',
+            label: 'Carousel'
+          },
+          {
+            value: 'collapse',
+            label: 'Collapse'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+const generateData = () => {
+  const data: {
+    value: number
+    desc: string
+    disabled: boolean
+  }[] = []
+  for (let i = 1; i <= 15; i++) {
+    data.push({
+      value: i,
+      desc: `Option ${i}`,
+      disabled: i % 4 === 0
+    })
+  }
+  return data
+}
+
+const holidays = [
+  '2021-10-01',
+  '2021-10-02',
+  '2021-10-03',
+  '2021-10-04',
+  '2021-10-05',
+  '2021-10-06',
+  '2021-10-07'
+]
+
+const isHoliday = ({ dayjs }) => {
+  return holidays.includes(dayjs.format('YYYY-MM-DD'))
+}
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'field1',
+    label: t('formDemo.input'),
+    component: 'Divider'
+  },
+  {
+    field: 'field2',
+    label: t('formDemo.default'),
+    component: 'Input'
+  },
+  {
+    field: 'field3',
+    label: `${t('formDemo.icon')}1`,
+    component: 'Input',
+    componentProps: {
+      suffixIcon: useIcon({ icon: 'ep:calendar' }),
+      prefixIcon: useIcon({ icon: 'ep:calendar' })
+    }
+  },
+  {
+    field: 'field4',
+    label: `${t('formDemo.icon')}2`,
+    component: 'Input',
+    componentProps: {
+      slots: {
+        suffix: true,
+        prefix: true
+      }
+    }
+  },
+  {
+    field: 'field5',
+    label: t('formDemo.mixed'),
+    component: 'Input',
+    componentProps: {
+      slots: {
+        prepend: true,
+        append: true
+      }
+    }
+  },
+  {
+    field: 'field6',
+    label: t('formDemo.textarea'),
+    component: 'Input',
+    componentProps: {
+      type: 'textarea',
+      rows: 1
+    }
+  },
+  {
+    field: 'field7',
+    label: t('formDemo.autocomplete'),
+    component: 'Divider'
+  },
+  {
+    field: 'field8',
+    label: t('formDemo.default'),
+    component: 'Autocomplete',
+    componentProps: {
+      fetchSuggestions: querySearch,
+      onSelect: handleSelect
+    }
+  },
+  {
+    field: 'field9',
+    label: t('formDemo.slot'),
+    component: 'Autocomplete',
+    componentProps: {
+      fetchSuggestions: querySearch,
+      onSelect: handleSelect,
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field10',
+    component: 'Divider',
+    label: t('formDemo.inputNumber')
+  },
+  {
+    field: 'field11',
+    label: t('formDemo.default'),
+    component: 'InputNumber',
+    value: 0
+  },
+  {
+    field: 'field12',
+    label: t('formDemo.position'),
+    component: 'InputNumber',
+    componentProps: {
+      controlsPosition: 'right'
+    },
+    value: 0
+  },
+  {
+    field: 'field13',
+    label: t('formDemo.select'),
+    component: 'Divider'
+  },
+  {
+    field: 'field14',
+    label: t('formDemo.default'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          value: '1'
+        },
+        {
+          label: 'option2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field15',
+    label: t('formDemo.slot'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          value: '1'
+        },
+        {
+          label: 'option2',
+          value: '2'
+        }
+      ],
+      optionsSlot: true
+    }
+  },
+  {
+    field: 'field16',
+    label: t('formDemo.selectGroup'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          options: [
+            {
+              label: 'option1-1',
+              value: '1-1'
+            },
+            {
+              label: 'option1-2',
+              value: '1-2'
+            }
+          ]
+        },
+        {
+          label: 'option2',
+          options: [
+            {
+              label: 'option2-1',
+              value: '2-1'
+            },
+            {
+              label: 'option2-2',
+              value: '2-2'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    field: 'field17',
+    label: `${t('formDemo.selectGroup')}${t('formDemo.slot')}`,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          options: [
+            {
+              label: 'option1-1',
+              value: '1-1'
+            },
+            {
+              label: 'option1-2',
+              value: '1-2'
+            }
+          ]
+        },
+        {
+          label: 'option2',
+          options: [
+            {
+              label: 'option2-1',
+              value: '2-1'
+            },
+            {
+              label: 'option2-2',
+              value: '2-2'
+            }
+          ]
+        }
+      ],
+      optionsSlot: true
+    }
+  },
+  {
+    field: 'field18',
+    label: `${t('formDemo.selectV2')}`,
+    component: 'Divider'
+  },
+  {
+    field: 'field19',
+    label: t('formDemo.default'),
+    component: 'SelectV2',
+    componentProps: {
+      options: options.value
+    }
+  },
+  {
+    field: 'field20',
+    label: t('formDemo.slot'),
+    component: 'SelectV2',
+    componentProps: {
+      options: options.value,
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field21',
+    label: t('formDemo.selectGroup'),
+    component: 'SelectV2',
+    componentProps: {
+      options: options2.value
+    }
+  },
+  {
+    field: 'field22',
+    label: `${t('formDemo.selectGroup')}${t('formDemo.slot')}`,
+    component: 'SelectV2',
+    componentProps: {
+      options: options2.value,
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field23',
+    label: t('formDemo.cascader'),
+    component: 'Divider'
+  },
+  {
+    field: 'field24',
+    label: t('formDemo.default'),
+    component: 'Cascader',
+    componentProps: {
+      options: options3
+    }
+  },
+  {
+    field: 'field25',
+    label: t('formDemo.slot'),
+    component: 'Cascader',
+    componentProps: {
+      options: options3,
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field26',
+    label: t('formDemo.switch'),
+    component: 'Divider'
+  },
+  {
+    field: 'field27',
+    label: t('formDemo.default'),
+    component: 'Switch',
+    value: false
+  },
+  {
+    field: 'field28',
+    label: t('formDemo.icon'),
+    component: 'Switch',
+    value: false,
+    componentProps: {
+      activeIcon: useIcon({ icon: 'ep:check' }),
+      inactiveIcon: useIcon({ icon: 'ep:close' })
+    }
+  },
+  {
+    field: 'field29',
+    label: t('formDemo.rate'),
+    component: 'Divider'
+  },
+  {
+    field: 'field30',
+    label: t('formDemo.default'),
+    component: 'Rate',
+    value: null
+  },
+  {
+    field: 'field31',
+    label: t('formDemo.icon'),
+    component: 'Rate',
+    value: null,
+    componentProps: {
+      voidIcon: useIcon({ icon: 'ep:chat-round' }),
+      icons: [
+        useIcon({ icon: 'ep:chat-round' }),
+        useIcon({ icon: 'ep:chat-line-round' }),
+        useIcon({ icon: 'ep:chat-dot-round' })
+      ]
+    }
+  },
+  {
+    field: 'field32',
+    label: t('formDemo.colorPicker'),
+    component: 'Divider'
+  },
+  {
+    field: 'field33',
+    label: t('formDemo.default'),
+    component: 'ColorPicker'
+  },
+  {
+    field: 'field34',
+    label: t('formDemo.transfer'),
+    component: 'Divider'
+  },
+  {
+    field: 'field35',
+    label: t('formDemo.default'),
+    component: 'Transfer',
+    componentProps: {
+      props: {
+        key: 'value',
+        label: 'desc',
+        disabled: 'disabled'
+      },
+      data: generateData()
+    },
+    value: [],
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'field36',
+    label: t('formDemo.slot'),
+    component: 'Transfer',
+    componentProps: {
+      props: {
+        key: 'value',
+        label: 'desc',
+        disabled: 'disabled'
+      },
+      leftDefaultChecked: [2, 3],
+      rightDefaultChecked: [1],
+      data: generateData(),
+      slots: {
+        default: true
+      }
+    },
+    value: [1],
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'field37',
+    label: `${t('formDemo.render')}`,
+    component: 'Transfer',
+    componentProps: {
+      props: {
+        key: 'value',
+        label: 'desc',
+        disabled: 'disabled'
+      },
+      leftDefaultChecked: [2, 3],
+      rightDefaultChecked: [1],
+      data: generateData(),
+      renderContent: (h: Fn, option: Recordable) => {
+        return h('span', null, `${option.value} - ${option.desc}`)
+      }
+    },
+    value: [1],
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'field38',
+    label: t('formDemo.radio'),
+    component: 'Divider'
+  },
+  {
+    field: 'field39',
+    label: t('formDemo.default'),
+    component: 'Radio',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field40',
+    label: t('formDemo.button'),
+    component: 'RadioButton',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field41',
+    label: t('formDemo.checkbox'),
+    component: 'Divider'
+  },
+  {
+    field: 'field42',
+    label: t('formDemo.default'),
+    component: 'Checkbox',
+    value: [],
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '23'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field43',
+    label: t('formDemo.button'),
+    component: 'CheckboxButton',
+    value: [],
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '23'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field44',
+    component: 'Divider',
+    label: t('formDemo.slider')
+  },
+  {
+    field: 'field45',
+    component: 'Slider',
+    label: t('formDemo.default'),
+    value: 0
+  },
+  {
+    field: 'field46',
+    component: 'Divider',
+    label: t('formDemo.datePicker')
+  },
+  {
+    field: 'field47',
+    component: 'DatePicker',
+    label: t('formDemo.default'),
+    componentProps: {
+      type: 'date'
+    }
+  },
+  {
+    field: 'field48',
+    component: 'DatePicker',
+    label: t('formDemo.shortcuts'),
+    componentProps: {
+      type: 'date',
+      disabledDate: (time: Date) => {
+        return time.getTime() > Date.now()
+      },
+      shortcuts: [
+        {
+          text: t('formDemo.today'),
+          value: new Date()
+        },
+        {
+          text: t('formDemo.yesterday'),
+          value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            return date
+          }
+        },
+        {
+          text: t('formDemo.aWeekAgo'),
+          value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+            return date
+          }
+        }
+      ]
+    }
+  },
+  {
+    field: 'field49',
+    component: 'DatePicker',
+    label: t('formDemo.week'),
+    componentProps: {
+      type: 'week',
+      format: `[${t('formDemo.week')}] ww`
+    }
+  },
+  {
+    field: 'field50',
+    component: 'DatePicker',
+    label: t('formDemo.year'),
+    componentProps: {
+      type: 'year'
+    }
+  },
+  {
+    field: 'field51',
+    component: 'DatePicker',
+    label: t('formDemo.month'),
+    componentProps: {
+      type: 'month'
+    }
+  },
+  {
+    field: 'field52',
+    component: 'DatePicker',
+    label: t('formDemo.dates'),
+    componentProps: {
+      type: 'dates'
+    }
+  },
+  {
+    field: 'field53',
+    component: 'DatePicker',
+    label: t('formDemo.daterange'),
+    componentProps: {
+      type: 'daterange'
+    }
+  },
+  {
+    field: 'field54',
+    component: 'DatePicker',
+    label: t('formDemo.monthrange'),
+    componentProps: {
+      type: 'monthrange'
+    }
+  },
+  {
+    field: 'field55',
+    component: 'DatePicker',
+    label: t('formDemo.slot'),
+    componentProps: {
+      type: 'date',
+      format: 'YYYY/MM/DD',
+      valueFormat: 'YYYY-MM-DD',
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field56',
+    component: 'Divider',
+    label: t('formDemo.dateTimePicker')
+  },
+  {
+    field: 'field57',
+    component: 'DatePicker',
+    label: t('formDemo.default'),
+    componentProps: {
+      type: 'datetime'
+    }
+  },
+  {
+    field: 'field58',
+    component: 'DatePicker',
+    label: t('formDemo.shortcuts'),
+    componentProps: {
+      type: 'datetime',
+      shortcuts: [
+        {
+          text: t('formDemo.today'),
+          value: new Date()
+        },
+        {
+          text: t('formDemo.yesterday'),
+          value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            return date
+          }
+        },
+        {
+          text: t('formDemo.aWeekAgo'),
+          value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+            return date
+          }
+        }
+      ]
+    }
+  },
+  {
+    field: 'field59',
+    component: 'DatePicker',
+    label: t('formDemo.dateTimerange'),
+    componentProps: {
+      type: 'datetimerange'
+    }
+  },
+  {
+    field: 'field60',
+    component: 'Divider',
+    label: t('formDemo.timePicker')
+  },
+  {
+    field: 'field61',
+    component: 'TimePicker',
+    label: t('formDemo.default')
+  },
+  {
+    field: 'field62',
+    component: 'Divider',
+    label: t('formDemo.timeSelect')
+  },
+  {
+    field: 'field63',
+    component: 'TimeSelect',
+    label: t('formDemo.default')
+  }
+])
+</script>
+
+<template>
+  <ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
+    <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
+      <template #field4-prefix>
+        <Icon icon="ep:calendar" class="el-input__icon" />
+      </template>
+      <template #field4-suffix>
+        <Icon icon="ep:calendar" class="el-input__icon" />
+      </template>
+
+      <template #field5-prepend> Http:// </template>
+      <template #field5-append> .com </template>
+
+      <template #field9-default="{ item }">
+        <div class="value">{{ item.value }}</div>
+        <span class="link">{{ item.link }}</span>
+      </template>
+
+      <template #field15-option="{ item }">
+        <span style="float: left">{{ item.label }}</span>
+        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
+          {{ item.value }}
+        </span>
+      </template>
+
+      <template #field17-option="{ item }">
+        <span style="float: left">{{ item.label }}</span>
+        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
+          {{ item.value }}
+        </span>
+      </template>
+
+      <template #field20-default="{ item }">
+        <span style="float: left">{{ item.label }}</span>
+        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
+          {{ item.value }}
+        </span>
+      </template>
+
+      <template #field22-default="{ item }">
+        <span style="float: left">{{ item.label }}</span>
+        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
+          {{ item.value }}
+        </span>
+      </template>
+
+      <template #field25-default="{ node, data }">
+        <span>{{ data.label }}</span>
+        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+      </template>
+
+      <template #field36-default="{ option }">
+        <span>{{ option.value }} - {{ option.desc }}</span>
+      </template>
+
+      <template #field55-default="cell">
+        <div class="cell" :class="{ current: cell.isCurrent }">
+          <span class="text">{{ cell.text }}</span>
+          <span v-if="isHoliday(cell)" class="holiday"></span>
+        </div>
+      </template>
+    </Form>
+  </ContentWrap>
+</template>
+
+<style lang="less" scoped>
+.cell {
+  height: 30px;
+  padding: 3px 0;
+  box-sizing: border-box;
+
+  .text {
+    position: absolute;
+    left: 50%;
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: 0 auto;
+    line-height: 24px;
+    border-radius: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.current {
+    .text {
+      color: #fff;
+      background: purple;
+    }
+  }
+
+  .holiday {
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    background: red;
+    border-radius: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/Components/Form/RefForm.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { Form, FormExpose } from '@/components/Form'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { reactive, unref, ref } from 'vue'
+import { ElButton } from 'element-plus'
+import { required } from '@/utils/formRules'
+
+const { t } = useI18n()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'field1',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field2',
+    label: t('formDemo.select'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          value: '1'
+        },
+        {
+          label: 'option2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field3',
+    label: t('formDemo.radio'),
+    component: 'Radio',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field4',
+    label: t('formDemo.checkbox'),
+    component: 'Checkbox',
+    value: [],
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field5',
+    component: 'DatePicker',
+    label: t('formDemo.datePicker'),
+    componentProps: {
+      type: 'date'
+    }
+  },
+  {
+    field: 'field6',
+    component: 'TimeSelect',
+    label: t('formDemo.timeSelect')
+  }
+])
+
+const formRef = ref<FormExpose>()
+
+const changeLabelWidth = (width: number | string) => {
+  unref(formRef)?.setProps({
+    labelWidth: width
+  })
+}
+
+const changeSize = (size: string) => {
+  unref(formRef)?.setProps({
+    size
+  })
+}
+
+const changeDisabled = (bool: boolean) => {
+  unref(formRef)?.setProps({
+    disabled: bool
+  })
+}
+
+const changeSchema = (del: boolean) => {
+  if (del) {
+    unref(formRef)?.delSchema('field2')
+  } else if (!del && schema[1].field !== 'field2') {
+    unref(formRef)?.addSchema(
+      {
+        field: 'field2',
+        label: t('formDemo.select'),
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: 'option1',
+              value: '1'
+            },
+            {
+              label: 'option2',
+              value: '2'
+            }
+          ]
+        }
+      },
+      1
+    )
+  }
+}
+
+const setValue = (reset: boolean) => {
+  const elFormRef = unref(formRef)?.getElFormRef()
+  if (reset) {
+    elFormRef?.resetFields()
+  } else {
+    unref(formRef)?.setValues({
+      field1: 'field1',
+      field2: '2',
+      field3: '2',
+      field4: ['1', '3'],
+      field5: '2022-01-27',
+      field6: '17:00'
+    })
+  }
+}
+
+const index = ref(7)
+
+const setLabel = () => {
+  unref(formRef)?.setSchema([
+    {
+      field: 'field2',
+      path: 'label',
+      value: `${t('formDemo.select')} ${index.value}`
+    },
+    {
+      field: 'field2',
+      path: 'componentProps.options',
+      value: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
+        }
+      ]
+    }
+  ])
+  index.value++
+}
+
+const addItem = () => {
+  if (unref(index) % 2 === 0) {
+    unref(formRef)?.addSchema({
+      field: `field${unref(index)}`,
+      label: `${t('formDemo.input')}${unref(index)}`,
+      component: 'Input'
+    })
+  } else {
+    unref(formRef)?.addSchema(
+      {
+        field: `field${unref(index)}`,
+        label: `${t('formDemo.input')}${unref(index)}`,
+        component: 'Input'
+      },
+      unref(index)
+    )
+  }
+  index.value++
+}
+
+const formValidation = () => {
+  const elFormRef = unref(formRef)?.getElFormRef()
+  elFormRef?.validate()?.catch(() => {})
+}
+
+const verifyReset = () => {
+  const elFormRef = unref(formRef)?.getElFormRef()
+  elFormRef?.resetFields()
+}
+</script>
+
+<template>
+  <ContentWrap :title="`refForm${t('formDemo.operate')}`">
+    <ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
+    <ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
+
+    <ElButton @click="changeSize('large')">{{ t('formDemo.change') }} size</ElButton>
+    <ElButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</ElButton>
+
+    <ElButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</ElButton>
+    <ElButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</ElButton>
+
+    <ElButton @click="changeSchema(true)">
+      {{ t('formDemo.delete') }} {{ t('formDemo.select') }}
+    </ElButton>
+    <ElButton @click="changeSchema(false)">
+      {{ t('formDemo.add') }} {{ t('formDemo.select') }}
+    </ElButton>
+
+    <ElButton @click="setValue(false)">{{ t('formDemo.setValue') }}</ElButton>
+    <ElButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</ElButton>
+
+    <ElButton @click="setLabel">
+      {{ t('formDemo.set') }} {{ t('formDemo.select') }} label
+    </ElButton>
+
+    <ElButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </ElButton>
+
+    <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
+    <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+  </ContentWrap>
+  <ContentWrap :title="`useForm${t('formDemo.example')}`">
+    <Form :schema="schema" ref="formRef" />
+  </ContentWrap>
+</template>

src/views/Components/Form/UseFormDemo.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useForm } from '@/hooks/web/useForm'
+import { reactive, unref, ref } from 'vue'
+import { ElButton } from 'element-plus'
+import { required } from '@/utils/formRules'
+
+const { t } = useI18n()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'field1',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field2',
+    label: t('formDemo.select'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: 'option1',
+          value: '1'
+        },
+        {
+          label: 'option2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field3',
+    label: t('formDemo.radio'),
+    component: 'Radio',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field4',
+    label: t('formDemo.checkbox'),
+    component: 'Checkbox',
+    value: [],
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field5',
+    component: 'DatePicker',
+    label: t('formDemo.datePicker'),
+    componentProps: {
+      type: 'date'
+    }
+  },
+  {
+    field: 'field6',
+    component: 'TimeSelect',
+    label: t('formDemo.timeSelect')
+  }
+])
+
+const { register, methods, elFormRef } = useForm()
+
+const changeLabelWidth = (width: number | string) => {
+  const { setProps } = methods
+  setProps({
+    labelWidth: width
+  })
+}
+
+const changeSize = (size: string) => {
+  const { setProps } = methods
+  setProps({
+    size
+  })
+}
+
+const changeDisabled = (bool: boolean) => {
+  const { setProps } = methods
+  setProps({
+    disabled: bool
+  })
+}
+
+const changeSchema = (del: boolean) => {
+  const { delSchema, addSchema } = methods
+  if (del) {
+    delSchema('field2')
+  } else if (!del && schema[1].field !== 'field2') {
+    addSchema(
+      {
+        field: 'field2',
+        label: t('formDemo.select'),
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: 'option1',
+              value: '1'
+            },
+            {
+              label: 'option2',
+              value: '2'
+            }
+          ]
+        }
+      },
+      1
+    )
+  }
+}
+
+const setValue = (reset: boolean) => {
+  const { setValues } = methods
+  if (reset) {
+    unref(elFormRef)?.resetFields()
+  } else {
+    setValues({
+      field1: 'field1',
+      field2: '2',
+      field3: '2',
+      field4: ['1', '3'],
+      field5: '2022-01-27',
+      field6: '17:00'
+    })
+  }
+}
+
+const index = ref(7)
+
+const setLabel = () => {
+  const { setSchema } = methods
+  setSchema([
+    {
+      field: 'field2',
+      path: 'label',
+      value: `${t('formDemo.select')} ${index.value}`
+    },
+    {
+      field: 'field2',
+      path: 'componentProps.options',
+      value: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
+        }
+      ]
+    }
+  ])
+  index.value++
+}
+
+const addItem = () => {
+  const { addSchema } = methods
+  if (unref(index) % 2 === 0) {
+    addSchema({
+      field: `field${unref(index)}`,
+      label: `${t('formDemo.input')}${unref(index)}`,
+      component: 'Input'
+    })
+  } else {
+    addSchema(
+      {
+        field: `field${unref(index)}`,
+        label: `${t('formDemo.input')}${unref(index)}`,
+        component: 'Input'
+      },
+      unref(index)
+    )
+  }
+  index.value++
+}
+
+const formValidation = () => {
+  unref(elFormRef)
+    ?.validate()
+    ?.catch(() => {})
+}
+
+const verifyReset = () => {
+  unref(elFormRef)?.resetFields()
+}
+</script>
+
+<template>
+  <ContentWrap :title="`useForm${t('formDemo.operate')}`">
+    <ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
+    <ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
+
+    <ElButton @click="changeSize('large')">{{ t('formDemo.change') }} size</ElButton>
+    <ElButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</ElButton>
+
+    <ElButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</ElButton>
+    <ElButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</ElButton>
+
+    <ElButton @click="changeSchema(true)">
+      {{ t('formDemo.delete') }} {{ t('formDemo.select') }}
+    </ElButton>
+    <ElButton @click="changeSchema(false)">
+      {{ t('formDemo.add') }} {{ t('formDemo.select') }}
+    </ElButton>
+
+    <ElButton @click="setValue(false)">{{ t('formDemo.setValue') }}</ElButton>
+    <ElButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</ElButton>
+
+    <ElButton @click="setLabel">
+      {{ t('formDemo.set') }} {{ t('formDemo.select') }} label
+    </ElButton>
+
+    <ElButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </ElButton>
+
+    <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
+    <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+  </ContentWrap>
+  <ContentWrap :title="`useForm${t('formDemo.example')}`">
+    <Form :schema="schema" @register="register" />
+  </ContentWrap>
+</template>

src/views/Dashboard/Workplace.vue

@@ -172,14 +172,14 @@ const { t } = useI18n()
 
   <ElRow class="mt-20px" :gutter="20" justify="space-between">
     <ElCol :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-20px">
-      <ElSkeleton :loading="loading" animated>
-        <ElCard shadow="never">
-          <template #header>
-            <div class="flex justify-between">
-              <span>{{ t('workplace.project') }}</span>
-              <ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
-            </div>
-          </template>
+      <ElCard shadow="never">
+        <template #header>
+          <div class="flex justify-between">
+            <span>{{ t('workplace.project') }}</span>
+            <ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
+          </div>
+        </template>
+        <ElSkeleton :loading="loading" animated>
           <ElRow>
             <ElCol
               v-for="(item, index) in projects"
@@ -203,17 +203,17 @@ const { t } = useI18n()
               </ElCard>
             </ElCol>
           </ElRow>
-        </ElCard>
-      </ElSkeleton>
+        </ElSkeleton>
+      </ElCard>
 
-      <ElSkeleton :loading="loading" animated>
-        <ElCard shadow="never" class="mt-20px">
-          <template #header>
-            <div class="flex justify-between">
-              <span>{{ t('workplace.dynamic') }}</span>
-              <ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
-            </div>
-          </template>
+      <ElCard shadow="never" class="mt-20px">
+        <template #header>
+          <div class="flex justify-between">
+            <span>{{ t('workplace.dynamic') }}</span>
+            <ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
+          </div>
+        </template>
+        <ElSkeleton :loading="loading" animated>
           <div v-for="(item, index) in dynamics" :key="`dynamics-${index}`">
             <div class="flex items-center">
               <img
@@ -234,15 +234,15 @@ const { t } = useI18n()
             </div>
             <ElDivider />
           </div>
-        </ElCard>
-      </ElSkeleton>
+        </ElSkeleton>
+      </ElCard>
     </ElCol>
     <ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-20px">
-      <ElSkeleton :loading="loading" animated>
-        <ElCard shadow="never">
-          <template #header>
-            <span>{{ t('workplace.shortcutOperation') }}</span>
-          </template>
+      <ElCard shadow="never">
+        <template #header>
+          <span>{{ t('workplace.shortcutOperation') }}</span>
+        </template>
+        <ElSkeleton :loading="loading" animated>
           <ElCol
             v-for="item in 9"
             :key="`card-${item}`"
@@ -257,23 +257,23 @@ const { t } = useI18n()
               {{ t('workplace.operation') }}{{ item }}
             </ElLink>
           </ElCol>
-        </ElCard>
-      </ElSkeleton>
+        </ElSkeleton>
+      </ElCard>
 
-      <ElSkeleton :loading="loading" animated>
-        <ElCard shadow="never" class="mt-20px">
-          <template #header>
-            <span>xx{{ t('workplace.index') }}</span>
-          </template>
+      <ElCard shadow="never" class="mt-20px">
+        <template #header>
+          <span>xx{{ t('workplace.index') }}</span>
+        </template>
+        <ElSkeleton :loading="loading" animated>
           <Echart :options="radarOptionData" :height="400" />
-        </ElCard>
-      </ElSkeleton>
+        </ElSkeleton>
+      </ElCard>
 
-      <ElSkeleton :loading="loading" animated>
-        <ElCard shadow="never" class="mt-20px">
-          <template #header>
-            <span>{{ t('workplace.team') }}</span>
-          </template>
+      <ElCard shadow="never" class="mt-20px">
+        <template #header>
+          <span>{{ t('workplace.team') }}</span>
+        </template>
+        <ElSkeleton :loading="loading" animated>
           <ElRow>
             <ElCol v-for="item in team" :key="`team-${item.name}`" :span="12" class="mb-20px">
               <div class="flex items-center">
@@ -284,8 +284,8 @@ const { t } = useI18n()
               </div>
             </ElCol>
           </ElRow>
-        </ElCard>
-      </ElSkeleton>
+        </ElSkeleton>
+      </ElCard>
     </ElCol>
   </ElRow>
 </template>

src/views/Login/components/LoginForm.vue

@@ -117,7 +117,7 @@ const signIn = async () => {
   if (validate) {
     loading.value = true
     const { getFormData } = methods
-    const formData = (await getFormData()) as UserLoginType
+    const formData = await getFormData<UserLoginType>()
 
     const res = await loginApi(formData)
       .catch(() => {})

types/componentType/form.d.ts

@@ -84,11 +84,6 @@ declare global {
     hidden?: boolean
   }
 
-  declare type FormSetValuesType = {
-    field: string
-    value: FormValueType
-  }
-
   declare type FormSetPropsType = {
     field: string
     path: string