types: 迁移types

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -7,7 +7,6 @@ import { useWindowSize } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
 import { setCssVar } from '@/utils'
 import { useDesign } from '@/hooks/web/useDesign'
-import { ElementPlusSize } from '@/types/elementPlus'
 
 const { variables } = useDesign()
 

src/types/configGlobal.d.ts → src/components/ConfigGlobal/src/types.ts

@@ -1,4 +1,3 @@
-import { ElementPlusSize } from './elementPlus'
 export interface ConfigGlobalTypes {
   size?: ElementPlusSize
 }

src/components/ContextMenu/src/ContextMenu.vue

@@ -4,7 +4,7 @@ import { PropType, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { contextMenuSchema } from '../../../types/contextMenu'
+import { contextMenuSchema } from './types'
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('context-menu')

src/components/Descriptions/src/Descriptions.vue

@@ -4,7 +4,7 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { ref, unref, PropType, computed, useAttrs, useSlots } from 'vue'
 import { useAppStore } from '@/store/modules/app'
-import { DescriptionsSchema } from '@/types/descriptions'
+import { DescriptionsSchema } from './types'
 
 const appStore = useAppStore()
 

src/components/Form/index.ts

@@ -1,6 +1,6 @@
 import Form from './src/Form.vue'
 import { ElForm } from 'element-plus'
-import { FormSchema, FormSetPropsType } from '@/types/form'
+import { FormSchema, FormSetPropsType } from './src/types'
 
 export interface FormExpose {
   setValues: (data: Recordable) => void

src/components/Form/src/Form copy.vue

@@ -1,302 +0,0 @@
-<script lang="tsx">
-import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
-import { componentMap } from './componentMap'
-import { propTypes } from '@/utils/propTypes'
-import { getSlot } from '@/utils/tsxHelper'
-import {
-  setTextPlaceholder,
-  setGridProp,
-  setComponentProps,
-  setItemComponentSlots,
-  initModel,
-  setFormItemSlots
-} from './helper'
-import { useRenderSelect } from './components/useRenderSelect'
-import { useRenderRadio } from './components/useRenderRadio'
-import { useRenderCheckbox } from './components/useRenderCheckbox'
-import { useDesign } from '@/hooks/web/useDesign'
-import { findIndex } from '@/utils'
-import { set } from 'lodash-es'
-import { FormProps } from './types'
-import { Icon } from '@/components/Icon'
-import { FormSchema, FormSetPropsType } from '@/types/form'
-
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('form')
-
-export default defineComponent({
-  name: 'Form',
-  props: {
-    // 生成Form的布局结构数组
-    schema: {
-      type: Array as PropType<FormSchema[]>,
-      default: () => []
-    },
-    // 是否需要栅格布局
-    isCol: propTypes.bool.def(true),
-    // 表单数据对象
-    model: {
-      type: Object as PropType<Recordable>,
-      default: () => ({})
-    },
-    // 是否自动设置placeholder
-    autoSetPlaceholder: propTypes.bool.def(true),
-    // 是否自定义内容
-    isCustom: propTypes.bool.def(false),
-    // 表单label宽度
-    labelWidth: propTypes.oneOfType([String, Number]).def('auto')
-  },
-  emits: ['register'],
-  setup(props, { slots, expose, emit }) {
-    // element form 实例
-    const elFormRef = ref<ComponentRef<typeof ElForm>>()
-
-    // useForm传入的props
-    const outsideProps = ref<FormProps>({})
-
-    const mergeProps = ref<FormProps>({})
-
-    const getProps = computed(() => {
-      const propsObj = { ...props }
-      Object.assign(propsObj, unref(mergeProps))
-      return propsObj
-    })
-
-    // 表单数据
-    const formModel = ref<Recordable>({})
-
-    onMounted(() => {
-      emit('register', unref(elFormRef)?.$parent, unref(elFormRef))
-    })
-
-    // 对表单赋值
-    const setValues = (data: Recordable = {}) => {
-      formModel.value = Object.assign(unref(formModel), data)
-    }
-
-    const setProps = (props: FormProps = {}) => {
-      mergeProps.value = Object.assign(unref(mergeProps), props)
-      outsideProps.value = props
-    }
-
-    const delSchema = (field: string) => {
-      const { schema } = unref(getProps)
-
-      const index = findIndex(schema, (v: FormSchema) => v.field === field)
-      if (index > -1) {
-        schema.splice(index, 1)
-      }
-    }
-
-    const addSchema = (formSchema: FormSchema, index?: number) => {
-      const { schema } = unref(getProps)
-      if (index !== void 0) {
-        schema.splice(index, 0, formSchema)
-        return
-      }
-      schema.push(formSchema)
-    }
-
-    const setSchema = (schemaProps: FormSetPropsType[]) => {
-      const { schema } = unref(getProps)
-      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,
-      setProps,
-      delSchema,
-      addSchema,
-      setSchema,
-      getElFormRef
-    })
-
-    // 监听表单结构化数组，重新生成formModel
-    watch(
-      () => unref(getProps).schema,
-      (schema = []) => {
-        formModel.value = initModel(schema, unref(formModel))
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
-
-    // 渲染包裹标签，是否使用栅格布局
-    const renderWrap = () => {
-      const { isCol } = unref(getProps)
-      const content = isCol ? (
-        <ElRow gutter={20}>{renderFormItemWrap()}</ElRow>
-      ) : (
-        renderFormItemWrap()
-      )
-      return content
-    }
-
-    // 是否要渲染el-col
-    const renderFormItemWrap = () => {
-      // hidden属性表示隐藏，不做渲染
-      const { schema = [], isCol } = unref(getProps)
-
-      return schema
-        .filter((v) => !v.hidden)
-        .map((item) => {
-          // 如果是 Divider 组件，需要自己占用一行
-          const isDivider = item.component === 'Divider'
-          const Com = componentMap['Divider'] as ReturnType<typeof defineComponent>
-          return isDivider ? (
-            <Com {...{ contentPosition: 'left', ...item.componentProps }}>{item?.label}</Com>
-          ) : isCol ? (
-            // 如果需要栅格，需要包裹 ElCol
-            <ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol>
-          ) : (
-            renderFormItem(item)
-          )
-        })
-    }
-
-    // 渲染formItem
-    const renderFormItem = (item: FormSchema) => {
-      // 单独给只有options属性的组件做判断
-      const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
-      const componentSlots = (item?.componentProps as any)?.slots || {}
-      const slotsMap: Recordable = {
-        ...setItemComponentSlots(unref(formModel), componentSlots)
-      }
-      if (
-        item?.component !== 'SelectV2' &&
-        item?.component !== 'Cascader' &&
-        item?.componentProps?.options
-      ) {
-        slotsMap.default = () => renderOptions(item)
-      }
-
-      const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
-      // 如果有 labelMessage，自动使用插槽渲染
-      if (item?.labelMessage) {
-        formItemSlots.label = () => {
-          return (
-            <>
-              <span>{item.label}</span>
-              <ElTooltip placement="right" raw-content>
-                {{
-                  content: () => <span v-html={item.labelMessage}></span>,
-                  default: () => (
-                    <Icon
-                      icon="ep:warning"
-                      size={16}
-                      color="var(--el-color-primary)"
-                      class="ml-2px relative top-1px"
-                    ></Icon>
-                  )
-                }}
-              </ElTooltip>
-            </>
-          )
-        }
-      }
-      return (
-        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
-          {{
-            ...formItemSlots,
-            default: () => {
-              const Com = componentMap[item.component as string] as ReturnType<
-                typeof defineComponent
-              >
-
-              const { autoSetPlaceholder } = unref(getProps)
-
-              return slots[item.field] ? (
-                getSlot(slots, item.field, formModel.value)
-              ) : (
-                <Com
-                  vModel={formModel.value[item.field]}
-                  {...(autoSetPlaceholder && setTextPlaceholder(item))}
-                  {...setComponentProps(item)}
-                  style={item.componentProps?.style}
-                  {...(notRenderOptions.includes(item?.component as string) &&
-                  item?.componentProps?.options
-                    ? { options: item?.componentProps?.options || [] }
-                    : {})}
-                >
-                  {{ ...slotsMap }}
-                </Com>
-              )
-            }
-          }}
-        </ElFormItem>
-      )
-    }
-
-    // 渲染options
-    const renderOptions = (item: FormSchema) => {
-      switch (item.component) {
-        case 'Select':
-          const { renderSelectOptions } = useRenderSelect(slots)
-          return renderSelectOptions(item)
-        case 'Radio':
-        case 'RadioButton':
-          const { renderRadioOptions } = useRenderRadio()
-          return renderRadioOptions(item)
-        case 'Checkbox':
-        case 'CheckboxButton':
-          const { renderCheckboxOptions } = useRenderCheckbox()
-          return renderCheckboxOptions(item)
-        default:
-          break
-      }
-    }
-
-    // 过滤传入Form组件的属性
-    const getFormBindValue = () => {
-      // 避免在标签上出现多余的属性
-      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
-      const props = { ...unref(getProps) }
-      for (const key in props) {
-        if (delKeys.indexOf(key) !== -1) {
-          delete props[key]
-        }
-      }
-      return props
-    }
-
-    return () => (
-      <ElForm
-        ref={elFormRef}
-        {...getFormBindValue()}
-        model={props.isCustom ? props.model : formModel}
-        class={prefixCls}
-      >
-        {{
-          // 如果需要自定义，就什么都不渲染，而是提供默认插槽
-          default: () => {
-            const { isCustom } = unref(getProps)
-            return isCustom ? getSlot(slots, 'default') : renderWrap()
-          }
-        }}
-      </ElForm>
-    )
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
-  margin-right: 0 !important;
-  margin-left: 0 !important;
-}
-</style>

src/components/Form/src/Form.vue

@@ -20,14 +20,14 @@ import { findIndex } from '@/utils'
 import { set } from 'lodash-es'
 import { FormProps } from './types'
 import { Icon } from '@/components/Icon'
-import { FormSchema, FormSetPropsType } from '@/types/form'
 import {
+  FormSchema,
+  FormSetPropsType,
   ComponentNameEnum,
   SelectComponentProps,
-  SelectOption,
-  RadioComponentProps,
-  CheckboxComponentProps
-} from '@/types/components.d'
+  RadioGroupComponentProps,
+  CheckboxGroupComponentProps
+} from './types'
 
 const { renderSelectOptions } = useRenderSelect()
 const { renderRadioOptions } = useRenderRadio()
@@ -230,36 +230,6 @@ export default defineComponent({
 
                 const { autoSetPlaceholder } = unref(getProps)
 
-                // 需要特殊处理的组件
-                const specialComponents = [ComponentNameEnum.RADIO, ComponentNameEnum.CHECKBOX]
-
-                if (specialComponents.findIndex((v) => v === item.component) !== -1) {
-                  const componentProps =
-                    item.component === ComponentNameEnum.RADIO
-                      ? (item.componentProps as RadioComponentProps)
-                      : (item.componentProps as CheckboxComponentProps)
-
-                  const valueAlias = componentProps?.props?.value || 'value'
-                  const labelAlias = componentProps?.props?.label || 'label'
-                  const disabledAlias = componentProps?.props?.disabled || 'disabled'
-                  return componentProps?.options?.map((v) => {
-                    return (
-                      <Com
-                        vModel={formModel.value[item.field]}
-                        {...setComponentProps(item)}
-                        label={v[valueAlias]}
-                        disabled={v[disabledAlias]}
-                      >
-                        {() =>
-                          componentProps?.slots?.default
-                            ? componentProps?.slots?.default({ option: v })
-                            : v[labelAlias]
-                        }
-                      </Com>
-                    )
-                  })
-                }
-
                 const componentSlots = (item?.componentProps as any)?.slots || {}
                 const slotsMap: Recordable = {
                   ...setItemComponentSlots(componentSlots)
@@ -291,7 +261,21 @@ export default defineComponent({
                     ? () => renderRadioOptions(item)
                     : () => {
                         return componentSlots.default(
-                          unref((item?.componentProps as RadioComponentProps)?.options)
+                          unref((item?.componentProps as CheckboxGroupComponentProps)?.options)
+                        )
+                      }
+                }
+
+                // 多选框组和按钮样式
+                if (
+                  item.component === ComponentNameEnum.CHECKBOX_GROUP ||
+                  item.component === ComponentNameEnum.CHECKBOX_BUTTON
+                ) {
+                  slotsMap.default = !componentSlots.default
+                    ? () => renderCheckboxOptions(item)
+                    : () => {
+                        return componentSlots.default(
+                          unref((item?.componentProps as RadioGroupComponentProps)?.options)
                         )
                       }
                 }

src/components/Form/src/componentMap.ts

@@ -16,19 +16,15 @@ import {
   ElTimeSelect,
   ElTransfer,
   ElAutocomplete,
-  ElDivider,
-  ElRadio,
-  ElCheckbox
+  ElDivider
 } from 'element-plus'
 import { InputPassword } from '@/components/InputPassword'
 import { Editor } from '@/components/Editor'
-import { ComponentName } from '@/types/components'
+import { ComponentName } from './types'
 
 const componentMap: Recordable<Component, ComponentName> = {
-  Radio: ElRadio,
   RadioGroup: ElRadioGroup,
   RadioButton: ElRadioGroup,
-  Checkbox: ElCheckbox,
   CheckboxGroup: ElCheckboxGroup,
   CheckboxButton: ElCheckboxGroup,
   Input: ElInput,

src/components/Form/src/components/useRenderCheckbox.tsx

@@ -1,19 +1,25 @@
-import { FormSchema } from '@/types/form'
+import { FormSchema, ComponentNameEnum, CheckboxGroupComponentProps } from '../types'
 import { ElCheckbox, ElCheckboxButton } from 'element-plus'
 import { defineComponent } from 'vue'
 
 export const useRenderCheckbox = () => {
   const renderCheckboxOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
-    const labelAlias = item?.componentProps?.optionsAlias?.labelField
-    const valueAlias = item?.componentProps?.optionsAlias?.valueField
-    const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
-      typeof defineComponent
-    >
-    return item?.componentProps?.options?.map((option) => {
+    const componentProps = item.componentProps as CheckboxGroupComponentProps
+    const valueAlias = componentProps?.props?.value || 'value'
+    const labelAlias = componentProps?.props?.label || 'label'
+    const disabledAlias = componentProps?.props?.disabled || 'disabled'
+    const Com = (
+      item.component === ComponentNameEnum.CHECKBOX_GROUP ? ElCheckbox : ElCheckboxButton
+    ) as ReturnType<typeof defineComponent>
+    return componentProps?.options?.map((option) => {
       const { value, ...other } = option
       return (
-        <Com {...other} label={option[valueAlias || 'value']}>
+        <Com
+          {...other}
+          disabled={option[disabledAlias || 'disabled']}
+          label={option[valueAlias || 'value']}
+        >
           {option[labelAlias || 'label']}
         </Com>
       )

src/components/Form/src/components/useRenderRadio.tsx

@@ -1,7 +1,6 @@
-import { FormSchema } from '@/types/form'
+import { FormSchema, ComponentNameEnum, RadioGroupComponentProps } from '../types'
 import { ElRadio, ElRadioButton } from 'element-plus'
 import { defineComponent } from 'vue'
-import { ComponentNameEnum, RadioGroupComponentProps } from '@/types/components.d'
 
 export const useRenderRadio = () => {
   const renderRadioOptions = (item: FormSchema) => {

src/components/Form/src/components/useRenderSelect.tsx

@@ -1,6 +1,5 @@
 import { ElOption, ElOptionGroup } from 'element-plus'
-import { FormSchema } from '@/types/form'
-import { SelectComponentProps, SelectOption } from '@/types/components'
+import { FormSchema, SelectComponentProps, SelectOption } from '../types'
 
 export const useRenderSelect = () => {
   // 渲染 select options

src/components/Form/src/helper.ts

@@ -1,9 +1,7 @@
 import { useI18n } from '@/hooks/web/useI18n'
 import { unref, type Slots } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
-import { PlaceholderMoel } from './types'
-import { FormSchema } from '@/types/form.d'
-import { ColProps, ComponentNameEnum } from '@/types/components.d'
+import { PlaceholderMoel, FormSchema, ComponentNameEnum, ColProps } from './types'
 import { isFunction } from '@/utils/is'
 import { firstUpperCase, humpToDash } from '@/utils'
 
@@ -39,7 +37,8 @@ export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => {
     const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
     if (
       twoTextMap.includes(
-        (schema?.componentProps?.type || schema?.componentProps?.isRange) as string
+        ((schema?.componentProps as any)?.type ||
+          (schema?.componentProps as any)?.isRange) as string
       )
     ) {
       return {

src/components/Form/src/types.ts

@@ -1,4 +1,13 @@
 import { FormSchema } from '@/types/form'
+import { CSSProperties, VNodeProps, VNode } from 'vue'
+import {
+  InputProps,
+  AutocompleteProps,
+  InputNumberProps,
+  CascaderProps,
+  CascaderNode,
+  CascaderValue
+} from 'element-plus'
 
 export interface PlaceholderMoel {
   placeholder?: string
@@ -15,3 +24,816 @@ export type FormProps = {
   isCustom?: boolean
   labelWidth?: string | number
 } & Recordable
+
+export enum ComponentNameEnum {
+  RADIO_GROUP = 'RadioGroup',
+  RADIO_BUTTON = 'RadioButton',
+  CHECKBOX_GROUP = 'CheckboxGroup',
+  CHECKBOX_BUTTON = 'CheckboxButton',
+  INPUT = 'Input',
+  AUTOCOMPLETE = 'Autocomplete',
+  INPUT_NUMBER = 'InputNumber',
+  SELECT = 'Select',
+  CASCADER = 'Cascader',
+  SWITCH = 'Switch',
+  SLIDER = 'Slider',
+  TIME_PICKER = 'TimePicker',
+  DATE_PICKER = 'DatePicker',
+  RATE = 'Rate',
+  COLOR_PICKER = 'ColorPicker',
+  TRANSFER = 'Transfer',
+  DIVIDER = 'Divider',
+  TIME_SELECT = 'TimeSelect',
+  SELECT_V2 = 'SelectV2',
+  INPUT_PASSWORD = 'InputPassword',
+  EDITOR = 'Editor'
+}
+
+type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
+  ? K extends string
+    ? K extends `${infer A}_${infer B}`
+      ? `${Capitalize<Lowercase<A>>}${Capitalize<Lowercase<B>>}`
+      : Capitalize<Lowercase<K>>
+    : never
+  : never
+
+export type ComponentName = CamelCaseComponentName
+
+export interface InputComponentProps {
+  value?: string | number
+  maxlength?: number | string
+  minlength?: number | string
+  showWordLimit?: boolean
+  placeholder?: string
+  clearable?: boolean
+  formatter?: (value: string | number) => string
+  parser?: (value: string) => string
+  showPassword?: boolean
+  disabled?: boolean
+  size?: ElementPlusSize
+  prefixIcon?: string | JSX.Element
+  suffixIcon?: string | JSX.Element
+  type?: InputProps['type']
+  rows?: number
+  autosize?: boolean | { Pows?: numer; maxRows?: number }
+  autocomplete?: string
+  name?: string
+  readonly?: boolean
+  max?: number | string
+  min?: number | string
+  step?: number | string
+  resize?: InputProps['resize']
+  autofocus?: boolean
+  form?: string
+  label?: string
+  tabindex?: string | number
+  validateEvent?: boolean
+  inputStyle?: string | CSSProperties | CSSProperties[] | string[]
+  on?: {
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    change?: (value: string | number) => void
+    clear?: () => void
+    input?: (value: string | number) => void
+  }
+  slots?: {
+    prefix?: (...args: any[]) => JSX.Element | null
+    suffix?: (...args: any[]) => JSX.Element | null
+    prepend?: (...args: any[]) => JSX.Element | null
+    append?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface AutocompleteComponentProps {
+  value?: string
+  placeholder?: string
+  clearable?: boolean
+  disabled?: boolean
+  valueKey?: string
+  debounce?: number
+  placement?: AutocompleteProps['placement']
+  fetchSuggestions?: (queryString: string, callback: (data: string[]) => void) => void
+  triggerOnFocus?: boolean
+  selectWhenUnmatched?: boolean
+  name?: string
+  label?: string
+  hideLoading?: boolean
+  popperClass?: string
+  popperAppendToBody?: boolean
+  teleported?: boolean
+  highlightFirstItem?: boolean
+  fitInputWidth?: boolean
+  on?: {
+    select?: (item: any) => void
+    change?: (value: string | number) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    prefix?: (...args: any[]) => JSX.Element | null
+    suffix?: (...args: any[]) => JSX.Element | null
+    prepend?: (...args: any[]) => JSX.Element | null
+    append?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface InputNumberComponentProps {
+  value?: number
+  min?: number
+  max?: number
+  step?: number
+  stepStrictly?: boolean
+  precision?: number
+  size?: ElementPlusSize
+  readonly?: boolean
+  disabled?: boolean
+  controls?: boolean
+  controlsPosition?: InputNumberProps['controlsPosition']
+  name?: string
+  label?: string
+  placeholder?: string
+  id?: string
+  valueOnClear?: number | null | 'min' | 'max'
+  validateEvent?: boolean
+  on?: {
+    change?: (currentValue: number | undefined, oldValue: number | undefined) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+  }
+  style?: CSSProperties
+}
+
+export interface SelectOption {
+  label?: string
+  disabled?: boolean
+  value?: any
+  key?: string | number
+  options?: SelectOption[]
+  [key: string]: any
+}
+
+export interface SelectComponentProps {
+  value?: string | number | boolean | Object
+  multiple?: boolean
+  disabled?: boolean
+  valueKey?: string
+  size?: ElementPlusSize
+  clearable?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: number
+  multipleLimit?: number
+  name?: string
+  effect?: string
+  autocomplete?: string
+  placeholder?: string
+  filterable?: boolean
+  allowCreate?: boolean
+  filterMethod?: (query: string, item: any) => boolean
+  remote?: boolean
+  remoteMethod?: (query: string) => void
+  remoteShowSuffix?: boolean
+  loading?: boolean
+  loadingText?: string
+  noMatchText?: string
+  noDataText?: string
+  popperClass?: string
+  reserveKeyword?: boolean
+  defaultFirstOption?: boolean
+  popperAppendToBody?: boolean
+  teleported?: boolean
+  persistent?: boolean
+  automaticDropdown?: boolean
+  clearIcon?: string | JSX.Element | null
+  fitInputWidth?: boolean
+  suffixIcon?: string | JSX.Element | null
+  tagType?: 'success' | 'info' | 'warning' | 'danger'
+  validateEvent?: boolean
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+  maxCollapseTags?: number
+  /**
+   * 数据源的字段别名
+   */
+  props?: {
+    key?: string
+    value?: string
+    label?: string
+    children?: string
+  }
+  on?: {
+    change?: (value: string | number | boolean | Object) => void
+    visibleChange?: (visible: boolean) => void
+    removeTag?: (tag: any) => void
+    clear?: () => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+  }
+  slots?: {
+    default?: (options: SelectOption[]) => JSX.Element[] | null
+    optionGroupDefault?: (item: SelectOption) => JSX.Element
+    optionDefault?: (option: SelectOption) => JSX.Element | null
+    prefix?: (...args: any[]) => JSX.Element | null
+    empty?: (...args: any[]) => JSX.Element | null
+  }
+  options?: SelectOption[]
+  style?: CSSProperties
+}
+
+export interface SelectV2ComponentProps {
+  value?: string | number | boolean | Object
+  multiple?: boolean
+  disabled?: boolean
+  valueKey?: string
+  size?: ElementPlusSize
+  clearable?: boolean
+  clearIcon?: string | JSX.Element | null
+  collapseTags?: boolean
+  multipleLimit?: number
+  name?: string
+  effect?: string
+  autocomplete?: string
+  placeholder?: string
+  filterable?: boolean
+  allowCreate?: boolean
+  reserveKeyword?: boolean
+  noDataText?: string
+  popperClass?: string
+  teleported?: boolean
+  persistent?: boolean
+  popperOptions?: any
+  automaticDropdown?: boolean
+  height?: number
+  scrollbarAlwaysOn?: boolean
+  remote?: boolean
+  remoteMethod?: (query: string) => void
+  validateEvent?: boolean
+  placement?: AutocompleteProps['placement']
+  collapseTagsTooltip?: boolean
+  on?: {
+    change?: (value: string | number | boolean | Object) => void
+    visibleChange?: (visible: boolean) => void
+    removeTag?: (tag: any) => void
+    clear?: () => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+  }
+  options?: SelectOption[]
+  slots?: {
+    default?: (option: SelectOption) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface CascaderComponentProps {
+  value?: string | number | string[] | number[] | any
+  options?: Record<string, unknown>[]
+  props?: CascaderProps
+  size?: ElementPlusSize
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  showAllLevels?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  separator?: string
+  filterable?: boolean
+  filterMethod?: (node: CascaderNode, keyword: string) => boolean
+  debounce?: number
+  beforeFilter?: (value: string) => boolean
+  popperClass?: string
+  teleported?: boolean
+  tagType?: ElementPlusInfoType
+  validateEvent?: boolean
+  on?: {
+    change?: (value: CascaderValue) => void
+    expandChange?: (value: CascaderValue) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    visibleChange?: (value: boolean) => void
+    removeTag?: (value: CascaderNode['valueByOption']) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    empty?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface SwitchComponentProps {
+  value?: boolean | string | number
+  disabled?: boolean
+  loading?: boolean
+  size?: ElementPlusSize
+  width?: number | string
+  inlinePrompt?: boolean
+  activeIcon?: string | JSX.Element | null
+  inactiveIcon?: string | JSX.Element | null
+  activeText?: string
+  inactiveText?: string
+  activeValue?: boolean | string | number
+  inactiveValue?: boolean | string | number
+  name?: string
+  validateEvent?: boolean
+  beforeChange?: (value: boolean) => boolean | Promise<boolean>
+  on?: {
+    change?: (value: boolean | string | number) => void
+  }
+  style?: CSSProperties
+}
+
+export interface RateComponentProps {
+  value?: number
+  max?: number
+  size?: ElementPlusSize
+  disabled?: boolean
+  allowHalf?: boolean
+  lowThreshold?: number
+  highThreshold?: number
+  colors?: string[] | Record<number, string>
+  voidColor?: string
+  disabledVoidColor?: string
+  icons?: string[] | JSX.Element[] | Record<number, string | JSX.Element>
+  voidIcon?: string | JSX.Element
+  disabledVoidIcon?: string | JSX.Element
+  showText?: boolean
+  showScore?: boolean
+  textColor?: string
+  texts?: string[]
+  scoreTemplate?: string
+  clearable?: boolean
+  id?: string
+  label?: string
+  on?: {
+    change?: (value: number) => void
+  }
+  style?: CSSProperties
+}
+
+export interface ColorPickerComponentProps {
+  value?: string
+  disabled?: boolean
+  size?: ElementPlusSize
+  showAlpha?: boolean
+  colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb' | 'hex' | 'rgb'
+  predefine?: string[]
+  validateEvent?: boolean
+  tabindex?: number | string
+  label?: string
+  id?: string
+  on?: {
+    change?: (value: string) => void
+    activeChange?: (value: string) => void
+  }
+  style?: CSSProperties
+}
+
+export interface TransferComponentProps {
+  value?: any[]
+  data?: any[]
+  filterable?: boolean
+  filterPlaceholder?: string
+  filterMethod?: (query: string, item: any) => boolean
+  targetOrder?: string
+  titles?: string[]
+  buttonTexts?: string[]
+  renderContent?: (
+    h: (type: string, props: VNodeProps | null, children?: string) => VNode,
+    option: any
+  ) => JSX.Element
+  format?: {
+    noChecked?: string
+    hasChecked?: string
+  }
+  props?: {
+    label?: string
+    key?: string
+    disabled?: string
+  }
+  leftDefaultChecked?: any[]
+  rightDefaultChecked?: any[]
+  validateEvent?: boolean
+  on?: {
+    change?: (
+      value: number | string,
+      direction: 'left' | 'right',
+      movedKeys: string[] | number[]
+    ) => void
+    leftCheckChange?: (value: any[]) => void
+    rightCheckChange?: (value: any[]) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    leftFooter?: (...args: any[]) => JSX.Element | null
+    rightFooter?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface RadioOption {
+  label?: string
+  value?: string | number | boolean
+  disabled?: boolean
+  border?: boolean
+  size?: ElementPlusSize
+  name?: string
+  [key: string]: any
+}
+export interface RadioGroupComponentProps {
+  value?: string | number | boolean
+  size?: ElementPlusSize
+  disabled?: boolean
+  textColor?: string
+  fill?: string
+  validateEvent?: boolean
+  label?: string
+  name?: string
+  id?: string
+  options?: RadioOption[]
+  /**
+   * 数据源的字段别名
+   */
+  props: {
+    label?: string
+    value?: string
+    disabled?: string
+  }
+  on?: {
+    change?: (value: string | number | boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface RadioButtonComponentProps {
+  value?: string | number | boolean
+  size?: ElementPlusSize
+  disabled?: boolean
+  textColor?: string
+  fill?: string
+  validateEvent?: boolean
+  label?: string
+  name?: string
+  id?: string
+  options?: RadioOption[]
+  /**
+   * 数据源的字段别名
+   */
+  props: {
+    label?: string
+    value?: string
+    disabled?: string
+  }
+  on?: {
+    change?: (value: string | number | boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface CheckboxOption {
+  label?: string
+  value?: string | number | boolean
+  disabled?: boolean
+  trueLabel?: string | number
+  falseLabel?: string | number
+  border?: boolean
+  size?: ElementPlusSize
+  name?: string
+  checked?: boolean
+  indeterminate?: boolean
+  validateEvent?: boolean
+  tabindex?: number | string
+  id?: string
+  controls?: boolean
+  [key: string]: any
+}
+
+export interface CheckboxGroupComponentProps {
+  value?: string[] | number[]
+  size?: ElementPlusSize
+  disabled?: boolean
+  min?: number
+  max?: number
+  label?: string
+  textColor?: string
+  fill?: string
+  tag?: string
+  validateEvent?: boolean
+  options?: CheckboxOption[]
+  /**
+   * 数据源的字段别名
+   */
+  props: {
+    label?: string
+    value?: string
+    disabled?: string
+  }
+  on?: {
+    change?: (value: string | number | boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface DividerComponentProps {
+  value?: number | Array<number>
+  min?: number
+  max?: number
+  disabled?: boolean
+  step?: number
+  showInput?: boolean
+  showInputControls?: boolean
+  size?: ElementPlusSize
+  inputSize?: ElementPlusSize
+  showStops?: boolean
+  showTooltip?: boolean
+  formatTooltip?: (value: number) => string
+  range?: boolean
+  vertical?: boolean
+  height?: string
+  label?: string
+  rangeStartLabel?: string
+  rangeEndLabel?: string
+  formatValueText?: (value: number) => string
+  debounce?: number
+  tooltipClass?: string
+  placement?: string
+  marks?: Record<number, string>
+  validateEvent?: boolean
+  on?: {
+    change?: (value: number) => void
+    input?: (value: number) => void
+  }
+  style?: CSSProperties
+}
+
+export interface DatePickerComponentProps {
+  value?: string | Date | number | string[]
+  readonly?: boolean
+  disabled?: boolean
+  size?: ElementPlusSize
+  editable?: boolean
+  clearable?: boolean
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  type?:
+    | 'year'
+    | 'month'
+    | 'date'
+    | 'dates'
+    | 'week'
+    | 'datetime'
+    | 'datetimerange'
+    | 'daterange'
+    | 'monthrange'
+  format?: string
+  popperClass?: string
+  popperOptions?: Record<string, any>
+  rangeSeparator?: string
+  defaultValue?: Date | [Date, Date]
+  defaultTime?: Date | [Date, Date]
+  valueFormat?: string
+  id?: string
+  name?: string
+  unlinkPanels?: boolean
+  prefixIcon?: string | JSX.Element
+  clearIcon?: string | JSX.Element
+  validateEvent?: boolean
+  disabledDate?: (date: Date) => boolean
+  shortcuts?: Array<{ text: string; value: Date | Function }>
+  cellClassName?: string | ((date: Date) => string | undefined)
+  teleported?: boolean
+  on?: {
+    change?: (value: string | Date | number | string[]) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    calendarChange?: (val: [Date, Date]) => void
+    panelChange?: (date, mode, view) => void
+    visibleChange?: (visibility: boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    rangeSeparator?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface DateTimePickerComponentProps {
+  value?: string | Date | number | string[]
+  readonly?: boolean
+  disabled?: boolean
+  editable?: boolean
+  clearable?: boolean
+  size?: ElementPlusSize
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  timeArrowControl?: boolean
+  type?: 'year' | 'month' | 'date' | 'datetime' | 'datetimerange' | 'daterange' | 'week'
+  format?: string
+  popperClass?: string
+  rangeSeparator?: string
+  defaultValue?: Date | [Date, Date]
+  defaultTime?: Date | [Date, Date]
+  valueFormat?: string
+  id?: string
+  name?: string
+  unlinkPanels?: boolean
+  prefixIcon?: string | JSX.Element
+  clearIcon?: string | JSX.Element
+  shortcuts?: Array<{ text: string; value: Date | Function }>
+  disabledDate?: (date: Date) => boolean
+  cellClassName?: string | ((date: Date) => string | undefined)
+  teleported?: boolean
+  on?: {
+    change?: (value: string | Date | number | string[]) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    calendarChange?: (val: [Date, Date]) => void
+    visibleChange?: (visibility: boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    rangeSeparator?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
+export interface TimePickerComponentProps {
+  value?: string | Date | number | [Date, Date] | [number, number] | [string, string]
+  readonly?: boolean
+  disabled?: boolean
+  editable?: boolean
+  clearable?: boolean
+  size?: ElementPlusSize
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  isRange?: boolean
+  arrowControl?: boolean
+  popperClass?: string
+  rangeSeparator?: string
+  format?: string
+  defaultValue?: Date | [Date, Date]
+  id?: string
+  name?: string
+  label?: string
+  prefixIcon?: string | JSX.Element
+  clearIcon?: string | JSX.Element
+  disabledHours?: (role: string, comparingDate?: any) => number[]
+  disabledMinutes?: (hour: number, role: string, comparingDate?: any) => number[]
+  disabledSeconds?: (hour: number, minute: number, role: string, comparingDate?: any) => number[]
+  teleported?: boolean
+  tabindex?: number | string
+  on?: {
+    change: (
+      val: number | string | Date | [number, number] | [string, string] | [Date, Date]
+    ) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    visibleChange?: (visibility: boolean) => void
+  }
+  style?: CSSProperties
+}
+
+export interface TimeSelectComponentProps {
+  value?: string
+  disabled?: boolean
+  editable?: boolean
+  clearable?: boolean
+  size?: ElementPlusSize
+  placeholder?: string
+  name?: string
+  effect?: string
+  prefixIcon?: string | JSX.Element
+  clearIcon?: string | JSX.Element
+  start?: string
+  end?: string
+  step?: string
+  minTime?: string
+  maxTime?: string
+  format?: string
+  on?: {
+    change?: (val: string) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+  }
+  style?: CSSProperties
+}
+
+export interface ColProps {
+  span?: number
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  tag?: string
+}
+
+import type { AxiosPromise } from 'axios'
+
+export type FormSetPropsType = {
+  field: string
+  path: string
+  value: any
+}
+
+export type FormValueType = string | number | string[] | number[] | boolean | undefined | null
+
+export type FormItemProps = {
+  labelWidth?: string | number
+  required?: boolean
+  rules?: Recordable
+  error?: string
+  showMessage?: boolean
+  inlineMessage?: boolean
+  style?: CSSProperties
+}
+
+export interface FormSchema {
+  /**
+   * 唯一标识
+   */
+  field: string
+
+  /**
+   * 标题
+   */
+  label?: string
+
+  /**
+   * 提示信息
+   */
+  labelMessage?: string
+
+  /**
+   * col组件属性
+   */
+  colProps?: ColProps
+
+  /**
+   * 表单组件属性，具体可以查看element-plus文档
+   */
+  componentProps?:
+    | InputComponentProps
+    | AutocompleteComponentProps
+    | InputNumberComponentProps
+    | SelectComponentProps
+    | SelectV2ComponentProps
+    | CascaderComponentProps
+    | SwitchComponentProps
+    | RateComponentProps
+    | ColorPickerComponentProps
+    | TransferComponentProps
+    | RadioGroupComponentProps
+    | RadioButtonComponentProps
+    | DividerComponentProps
+    | DatePickerComponentProps
+    | DateTimePickerComponentProps
+    | TimePickerComponentProps
+
+  /**
+   * formItem组件属性，具体可以查看element-plus文档
+   */
+  formItemProps?: FormItemProps
+
+  /**
+   * 渲染的组件名称
+   */
+  component?: ComponentName
+
+  /**
+   * 初始值
+   */
+  value?: FormValueType
+
+  /**
+   * 是否隐藏
+   */
+  hidden?: boolean
+
+  /**
+   * @returns 远程加载下拉项
+   */
+  api?: <T = any>() => AxiosPromise<T>
+}

src/hooks/web/useConfigGlobal.ts

@@ -1,4 +1,4 @@
-import { ConfigGlobalTypes } from '@/types/configGlobal'
+import { ConfigGlobalTypes } from '@/components/ConfigGlobal/src/types'
 import { inject } from 'vue'
 
 export const useConfigGlobal = () => {

src/types/components.d.ts

@@ -1,590 +0,0 @@
-import { CSSProperties, VNodeProps, VNode } from 'vue'
-import {
-  InputProps,
-  AutocompleteProps,
-  InputNumberProps,
-  CascaderProps,
-  CascaderNode,
-  CascaderValue
-} from 'element-plus'
-import { ElementPlusSize, ElementPlusInfoType } from './elementPlus.d'
-
-export enum ComponentNameEnum {
-  RADIO = 'Radio',
-  RADIO_GROUP = 'RadioGroup',
-  RADIO_BUTTON = 'RadioButton',
-  CHECKBOX = 'Checkbox',
-  CHECKBOX_GROUP = 'CheckboxGroup',
-  CHECKBOX_BUTTON = 'CheckboxButton',
-  INPUT = 'Input',
-  AUTOCOMPLETE = 'Autocomplete',
-  INPUT_NUMBER = 'InputNumber',
-  SELECT = 'Select',
-  CASCADER = 'Cascader',
-  SWITCH = 'Switch',
-  SLIDER = 'Slider',
-  TIME_PICKER = 'TimePicker',
-  DATE_PICKER = 'DatePicker',
-  RATE = 'Rate',
-  COLOR_PICKER = 'ColorPicker',
-  TRANSFER = 'Transfer',
-  DIVIDER = 'Divider',
-  TIME_SELECT = 'TimeSelect',
-  SELECT_V2 = 'SelectV2',
-  INPUT_PASSWORD = 'InputPassword',
-  EDITOR = 'Editor'
-}
-
-type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
-  ? K extends string
-    ? K extends `${infer A}_${infer B}`
-      ? `${Capitalize<Lowercase<A>>}${Capitalize<Lowercase<B>>}`
-      : Capitalize<Lowercase<K>>
-    : never
-  : never
-
-export type ComponentName = CamelCaseComponentName
-
-export interface InputComponentProps {
-  value?: string | number
-  maxlength?: number | string
-  minlength?: number | string
-  showWordLimit?: boolean
-  placeholder?: string
-  clearable?: boolean
-  formatter?: (value: string | number) => string
-  parser?: (value: string) => string
-  showPassword?: boolean
-  disabled?: boolean
-  size?: ElementPlusSize
-  prefixIcon?: string | JSX.Element
-  suffixIcon?: string | JSX.Element
-  type?: InputProps['type']
-  rows?: number
-  autosize?: boolean | { Pows?: numer; maxRows?: number }
-  autocomplete?: string
-  name?: string
-  readonly?: boolean
-  max?: number | string
-  min?: number | string
-  step?: number | string
-  resize?: InputProps['resize']
-  autofocus?: boolean
-  form?: string
-  label?: string
-  tabindex?: string | number
-  validateEvent?: boolean
-  inputStyle?: string | CSSProperties | CSSProperties[] | string[]
-  on?: {
-    blur?: (event: FocusEvent) => void
-    focus?: (event: FocusEvent) => void
-    change?: (value: string | number) => void
-    clear?: () => void
-    input?: (value: string | number) => void
-  }
-  slots?: {
-    prefix?: (...args: any[]) => JSX.Element | null
-    suffix?: (...args: any[]) => JSX.Element | null
-    prepend?: (...args: any[]) => JSX.Element | null
-    append?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface AutocompleteComponentProps {
-  value?: string
-  placeholder?: string
-  clearable?: boolean
-  disabled?: boolean
-  valueKey?: string
-  debounce?: number
-  placement?: AutocompleteProps['placement']
-  fetchSuggestions?: (queryString: string, callback: (data: string[]) => void) => void
-  triggerOnFocus?: boolean
-  selectWhenUnmatched?: boolean
-  name?: string
-  label?: string
-  hideLoading?: boolean
-  popperClass?: string
-  popperAppendToBody?: boolean
-  teleported?: boolean
-  highlightFirstItem?: boolean
-  fitInputWidth?: boolean
-  on?: {
-    select?: (item: any) => void
-    change?: (value: string | number) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-    prefix?: (...args: any[]) => JSX.Element | null
-    suffix?: (...args: any[]) => JSX.Element | null
-    prepend?: (...args: any[]) => JSX.Element | null
-    append?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface InputNumberComponentProps {
-  value?: number
-  min?: number
-  max?: number
-  step?: number
-  stepStrictly?: boolean
-  precision?: number
-  size?: ElementPlusSize
-  readonly?: boolean
-  disabled?: boolean
-  controls?: boolean
-  controlsPosition?: InputNumberProps['controlsPosition']
-  name?: string
-  label?: string
-  placeholder?: string
-  id?: string
-  valueOnClear?: number | null | 'min' | 'max'
-  validateEvent?: boolean
-  on?: {
-    change?: (currentValue: number | undefined, oldValue: number | undefined) => void
-    blur?: (event: FocusEvent) => void
-    focus?: (event: FocusEvent) => void
-  }
-  style?: CSSProperties
-}
-
-export interface SelectOption {
-  label?: string
-  disabled?: boolean
-  value?: any
-  key?: string | number
-  options?: SelectOption[]
-  [key: string]: any
-}
-
-export interface SelectComponentProps {
-  value?: string | number | boolean | Object
-  multiple?: boolean
-  disabled?: boolean
-  valueKey?: string
-  size?: ElementPlusSize
-  clearable?: boolean
-  collapseTags?: boolean
-  collapseTagsTooltip?: number
-  multipleLimit?: number
-  name?: string
-  effect?: string
-  autocomplete?: string
-  placeholder?: string
-  filterable?: boolean
-  allowCreate?: boolean
-  filterMethod?: (query: string, item: any) => boolean
-  remote?: boolean
-  remoteMethod?: (query: string) => void
-  remoteShowSuffix?: boolean
-  loading?: boolean
-  loadingText?: string
-  noMatchText?: string
-  noDataText?: string
-  popperClass?: string
-  reserveKeyword?: boolean
-  defaultFirstOption?: boolean
-  popperAppendToBody?: boolean
-  teleported?: boolean
-  persistent?: boolean
-  automaticDropdown?: boolean
-  clearIcon?: string | JSX.Element | null
-  fitInputWidth?: boolean
-  suffixIcon?: string | JSX.Element | null
-  tagType?: 'success' | 'info' | 'warning' | 'danger'
-  validateEvent?: boolean
-  placement?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-  maxCollapseTags?: number
-  /**
-   * 数据源的字段别名
-   */
-  props?: {
-    key?: string
-    value?: string
-    label?: string
-    children?: string
-  }
-  on?: {
-    change?: (value: string | number | boolean | Object) => void
-    visibleChange?: (visible: boolean) => void
-    removeTag?: (tag: any) => void
-    clear?: () => void
-    blur?: (event: FocusEvent) => void
-    focus?: (event: FocusEvent) => void
-  }
-  slots?: {
-    default?: (options: SelectOption[]) => JSX.Element[] | null
-    optionGroupDefault?: (item: SelectOption) => JSX.Element
-    optionDefault?: (option: SelectOption) => JSX.Element | null
-    prefix?: (...args: any[]) => JSX.Element | null
-    empty?: (...args: any[]) => JSX.Element | null
-  }
-  options?: SelectOption[]
-  style?: CSSProperties
-}
-
-export interface SelectV2ComponentProps {
-  value?: string | number | boolean | Object
-  multiple?: boolean
-  disabled?: boolean
-  valueKey?: string
-  size?: ElementPlusSize
-  clearable?: boolean
-  clearIcon?: string | JSX.Element | null
-  collapseTags?: boolean
-  multipleLimit?: number
-  name?: string
-  effect?: string
-  autocomplete?: string
-  placeholder?: string
-  filterable?: boolean
-  allowCreate?: boolean
-  reserveKeyword?: boolean
-  noDataText?: string
-  popperClass?: string
-  teleported?: boolean
-  persistent?: boolean
-  popperOptions?: any
-  automaticDropdown?: boolean
-  height?: number
-  scrollbarAlwaysOn?: boolean
-  remote?: boolean
-  remoteMethod?: (query: string) => void
-  validateEvent?: boolean
-  placement?: AutocompleteProps['placement']
-  collapseTagsTooltip?: boolean
-  on?: {
-    change?: (value: string | number | boolean | Object) => void
-    visibleChange?: (visible: boolean) => void
-    removeTag?: (tag: any) => void
-    clear?: () => void
-    blur?: (event: FocusEvent) => void
-    focus?: (event: FocusEvent) => void
-  }
-  options?: SelectOption[]
-  slots?: {
-    default?: (option: SelectOption) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface CascaderComponentProps {
-  value?: string | number | string[] | number[] | any
-  options?: Record<string, unknown>[]
-  props?: CascaderProps
-  size?: ElementPlusSize
-  placeholder?: string
-  disabled?: boolean
-  clearable?: boolean
-  showAllLevels?: boolean
-  collapseTags?: boolean
-  collapseTagsTooltip?: boolean
-  separator?: string
-  filterable?: boolean
-  filterMethod?: (node: CascaderNode, keyword: string) => boolean
-  debounce?: number
-  beforeFilter?: (value: string) => boolean
-  popperClass?: string
-  teleported?: boolean
-  tagType?: ElementPlusInfoType
-  validateEvent?: boolean
-  on?: {
-    change?: (value: CascaderValue) => void
-    expandChange?: (value: CascaderValue) => void
-    blur?: (event: FocusEvent) => void
-    focus?: (event: FocusEvent) => void
-    visibleChange?: (value: boolean) => void
-    removeTag?: (value: CascaderNode['valueByOption']) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-    empty?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface SwitchComponentProps {
-  value?: boolean | string | number
-  disabled?: boolean
-  loading?: boolean
-  size?: ElementPlusSize
-  width?: number | string
-  inlinePrompt?: boolean
-  activeIcon?: string | JSX.Element | null
-  inactiveIcon?: string | JSX.Element | null
-  activeText?: string
-  inactiveText?: string
-  activeValue?: boolean | string | number
-  inactiveValue?: boolean | string | number
-  name?: string
-  validateEvent?: boolean
-  beforeChange?: (value: boolean) => boolean | Promise<boolean>
-  on?: {
-    change?: (value: boolean | string | number) => void
-  }
-  style?: CSSProperties
-}
-
-export interface RateComponentProps {
-  value?: number
-  max?: number
-  size?: ElementPlusSize
-  disabled?: boolean
-  allowHalf?: boolean
-  lowThreshold?: number
-  highThreshold?: number
-  colors?: string[] | Record<number, string>
-  voidColor?: string
-  disabledVoidColor?: string
-  icons?: string[] | JSX.Element[] | Record<number, string | JSX.Element>
-  voidIcon?: string | JSX.Element
-  disabledVoidIcon?: string | JSX.Element
-  showText?: boolean
-  showScore?: boolean
-  textColor?: string
-  texts?: string[]
-  scoreTemplate?: string
-  clearable?: boolean
-  id?: string
-  label?: string
-  on?: {
-    change?: (value: number) => void
-  }
-  style?: CSSProperties
-}
-
-export interface ColorPickerComponentProps {
-  value?: string
-  disabled?: boolean
-  size?: ElementPlusSize
-  showAlpha?: boolean
-  colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb' | 'hex' | 'rgb'
-  predefine?: string[]
-  validateEvent?: boolean
-  tabindex?: number | string
-  label?: string
-  id?: string
-  on?: {
-    change?: (value: string) => void
-    activeChange?: (value: string) => void
-  }
-  style?: CSSProperties
-}
-
-export interface TransferComponentProps {
-  value?: any[]
-  data?: any[]
-  filterable?: boolean
-  filterPlaceholder?: string
-  filterMethod?: (query: string, item: any) => boolean
-  targetOrder?: string
-  titles?: string[]
-  buttonTexts?: string[]
-  renderContent?: (
-    h: (type: string, props: VNodeProps | null, children?: string) => VNode,
-    option: any
-  ) => JSX.Element
-  format?: {
-    noChecked?: string
-    hasChecked?: string
-  }
-  props?: {
-    label?: string
-    key?: string
-    disabled?: string
-  }
-  leftDefaultChecked?: any[]
-  rightDefaultChecked?: any[]
-  validateEvent?: boolean
-  on?: {
-    change?: (
-      value: number | string,
-      direction: 'left' | 'right',
-      movedKeys: string[] | number[]
-    ) => void
-    leftCheckChange?: (value: any[]) => void
-    rightCheckChange?: (value: any[]) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-    leftFooter?: (...args: any[]) => JSX.Element | null
-    rightFooter?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface RadioOption {
-  label?: string
-  value?: string | number | boolean
-  disabled?: boolean
-  [key: string]: any
-}
-
-export interface RadioComponentProps {
-  value?: string | number | boolean
-  label?: string | number | boolean
-  disabled?: boolean
-  border?: boolean
-  size?: ElementPlusSize
-  options?: RadioOption[]
-  /**
-   * 数据源的字段别名
-   */
-  props: {
-    label?: string
-    value?: string
-    disabled?: string
-  }
-  name?: string
-  on?: {
-    change?: (value: string | number | boolean) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface RadioGroupComponentProps {
-  value?: string | number | boolean
-  size?: ElementPlusSize
-  disabled?: boolean
-  textColor?: string
-  fill?: string
-  validateEvent?: boolean
-  label?: string
-  name?: string
-  id?: string
-  options?: RadioOption[]
-  /**
-   * 数据源的字段别名
-   */
-  props: {
-    label?: string
-    value?: string
-    disabled?: string
-  }
-  on?: {
-    change?: (value: string | number | boolean) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface RadioButtonComponentProps {
-  value?: string | number | boolean
-  size?: ElementPlusSize
-  disabled?: boolean
-  textColor?: string
-  fill?: string
-  validateEvent?: boolean
-  label?: string
-  name?: string
-  id?: string
-  options?: RadioOption[]
-  /**
-   * 数据源的字段别名
-   */
-  props: {
-    label?: string
-    value?: string
-    disabled?: string
-  }
-  on?: {
-    change?: (value: string | number | boolean) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-  }
-  style?: CSSProperties
-}
-
-export interface CheckboxOption {
-  label?: string
-  value?: string | number | boolean
-  disabled?: boolean
-  [key: string]: any
-}
-
-export interface CheckboxComponentProps {
-  value?: string | number | boolean
-  label?: string | number | boolean | any
-  trueLabel?: string | number
-  falseLabel?: string | number
-  disabled?: boolean
-  border?: boolean
-  size?: ElementPlusSize
-  name?: string
-  checked?: boolean
-  indeterminate?: boolean
-  validateEvent?: boolean
-  tabindex?: number | string
-  id?: string
-  controls?: boolean
-  on?: {
-    change?: (value: string | number | boolean) => void
-  }
-  slots?: {
-    default?: (...args: any[]) => JSX.Element | null
-  }
-  options: CheckboxOption[]
-  /**
-   * 数据源的字段别名
-   */
-  props: {
-    label?: string
-    value?: string
-    disabled?: string
-  }
-  style?: CSSProperties
-}
-
-export interface CheckboxGroupComponentProps {
-  value?: string[] | number[]
-}
-
-export interface ColProps {
-  span?: number
-  xs?: number
-  sm?: number
-  md?: number
-  lg?: number
-  xl?: number
-  tag?: string
-}
-
-export interface ComponentOptions extends Recordable {
-  label?: string
-  value?: any
-  disabled?: boolean
-  key?: string | number
-  children?: ComponentOptions[]
-  options?: ComponentOptions[]
-}
-
-export interface ComponentOptionsAlias {
-  labelField?: string
-  valueField?: string
-}
-
-export interface ComponentProps extends Recordable {
-  optionsAlias?: ComponentOptionsAlias
-  options?: ComponentOptions[]
-  optionsSlot?: boolean
-}

src/types/elementPlus.d.ts

@@ -1,3 +0,0 @@
-export type ElementPlusSize = 'default' | 'small' | 'large'
-
-export type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'

src/types/form.d.ts

@@ -1,106 +0,0 @@
-import type { CSSProperties } from 'vue'
-import {
-  ColProps,
-  ComponentProps,
-  ComponentName,
-  InputComponentProps,
-  AutocompleteComponentProps,
-  InputNumberComponentProps,
-  SelectComponentProps,
-  SelectV2ComponentProps,
-  CascaderComponentProps,
-  SwitchComponentProps,
-  RateComponentProps,
-  ColorPickerComponentProps,
-  TransferComponentProps,
-  RadioComponentProps,
-  RadioGroupComponentProps,
-  RadioButtonComponentProps,
-  CheckboxComponentProps
-} from '@/types/components'
-import { FormValueType, FormValueType } from '@/types/form'
-import type { AxiosPromise } from 'axios'
-
-export type FormSetPropsType = {
-  field: string
-  path: string
-  value: any
-}
-
-export type FormValueType = string | number | string[] | number[] | boolean | undefined | null
-
-export type FormItemProps = {
-  labelWidth?: string | number
-  required?: boolean
-  rules?: Recordable
-  error?: string
-  showMessage?: boolean
-  inlineMessage?: boolean
-  style?: CSSProperties
-}
-
-export interface FormSchema {
-  /**
-   * 唯一标识
-   */
-  field: string
-
-  /**
-   * 标题
-   */
-  label?: string
-
-  /**
-   * 提示信息
-   */
-  labelMessage?: string
-
-  /**
-   * col组件属性
-   */
-  colProps?: ColProps
-
-  /**
-   * 表单组件属性，具体可以查看element-plus文档
-   */
-  componentProps?:
-    | InputComponentProps
-    | AutocompleteComponentProps
-    | InputNumberComponentProps
-    | SelectComponentProps
-    | SelectV2ComponentProps
-    | CascaderComponentProps
-    | SwitchComponentProps
-    | RateComponentProps
-    | ColorPickerComponentProps
-    | TransferComponentProps
-    | RadioComponentProps
-    | RadioGroupComponentProps
-    | RadioButtonComponentProps
-    | CheckboxComponentProps
-
-  /**
-   * formItem组件属性，具体可以查看element-plus文档
-   */
-  formItemProps?: FormItemProps
-
-  /**
-   * 渲染的组件名称
-   */
-  component?: ComponentName
-
-  /**
-   * 初始值
-   */
-  value?: FormValueType
-
-  /**
-   * 是否隐藏
-   */
-  hidden?: boolean
-
-  /**
-   * @returns 远程加载下拉项
-   */
-  api?: <T = any>() => AxiosPromise<T>
-}

src/types/layout.d.ts

@@ -1 +0,0 @@
-export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'

src/types/theme.d.ts

@@ -1,16 +0,0 @@
-export type ThemeTypes = {
-    elColorPrimary?: string
-    leftMenuBorderColor?: string
-    leftMenuBgColor?: string
-    leftMenuBgLightColor?: string
-    leftMenuBgActiveColor?: string
-    leftMenuCollapseBgActiveColor?: string
-    leftMenuTextColor?: string
-    leftMenuTextActiveColor?: string
-    logoTitleTextColor?: string
-    logoBorderColor?: string
-    topHeaderBgColor?: string
-    topHeaderTextColor?: string
-    topHeaderHoverColor?: string
-    topToolBorderColor?: string
-  }

src/types/theme.ts

@@ -0,0 +1,16 @@
+export type ThemeTypes = {
+  elColorPrimary?: string
+  leftMenuBorderColor?: string
+  leftMenuBgColor?: string
+  leftMenuBgLightColor?: string
+  leftMenuBgActiveColor?: string
+  leftMenuCollapseBgActiveColor?: string
+  leftMenuTextColor?: string
+  leftMenuTextActiveColor?: string
+  logoTitleTextColor?: string
+  logoBorderColor?: string
+  topHeaderBgColor?: string
+  topHeaderTextColor?: string
+  topHeaderHoverColor?: string
+  topToolBorderColor?: string
+}

src/views/Components/Form/DefaultForm copy.vue

@@ -1,1136 +0,0 @@
-<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'
-import { FormSchema } from '@/types/form'
-import { ComponentOptions } from '@/types/components'
-
-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: [
-        {
-          disabled: true,
-          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: [
-            {
-              disabled: true,
-              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',
-              disabled: true
-            },
-            {
-              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: [
-        {
-          disabled: true,
-          label: 'option-1',
-          value: '1'
-        },
-        {
-          label: 'option-2',
-          value: '2'
-        }
-      ]
-    }
-  },
-  {
-    field: 'field40',
-    label: t('formDemo.button'),
-    component: 'RadioButton',
-    componentProps: {
-      options: [
-        {
-          disabled: true,
-          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: [
-        {
-          disabled: true,
-          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: [
-        {
-          disabled: true,
-          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/DefaultForm.vue

@@ -5,15 +5,17 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useIcon } from '@/hooks/web/useIcon'
 import { ContentWrap } from '@/components/ContentWrap'
 import { useAppStore } from '@/store/modules/app'
-import { FormSchema } from '@/types/form'
-import {
-  ComponentOptions,
-  SelectOption,
-  SelectComponentProps,
-  RadioOption
-} from '@/types/components'
+import { SelectOption, RadioOption, CheckboxOption, FormSchema } from '@/components/Form/src/types'
 import { useForm } from '@/hooks/web/useForm'
-import { ElOption, ElOptionGroup, ElButton, ElRadio, ElRadioButton } from 'element-plus'
+import {
+  ElOption,
+  ElOptionGroup,
+  ElButton,
+  ElRadio,
+  ElRadioButton,
+  ElCheckbox,
+  ElCheckboxButton
+} from 'element-plus'
 
 const appStore = useAppStore()
 
@@ -938,9 +940,9 @@ const schema = reactive<FormSchema[]>([
     component: 'Divider'
   },
   {
-    field: 'field39',
-    label: t('formDemo.default'),
-    component: 'Radio',
+    field: 'field39-2',
+    label: t('formDemo.radioGroup'),
+    component: 'RadioGroup',
     componentProps: {
       options: [
         {
@@ -956,9 +958,9 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'field39-1',
-    label: t('formDemo.slot'),
-    component: 'Radio',
+    field: 'field39-3',
+    label: `${t('formDemo.radioGroup')} ${t('formDemo.slot')}`,
+    component: 'RadioGroup',
     componentProps: {
       options: [
         {
@@ -972,25 +974,25 @@ const schema = reactive<FormSchema[]>([
         }
       ],
       slots: {
-        default: ({ option }) => {
-          return (
-            <>
-              <span>{option.label}</span>
-              <span> ({option.value}) </span>
-            </>
-          )
+        default: (options: RadioOption[]) => {
+          return options?.map((v) => {
+            return (
+              <ElRadio label={v.value}>
+                {v.label}({v.value})
+              </ElRadio>
+            )
+          })
         }
       }
     }
   },
   {
-    field: 'field39-2',
-    label: t('formDemo.radioGroup'),
-    component: 'RadioGroup',
+    field: 'field40',
+    label: t('formDemo.button'),
+    component: 'RadioButton',
     componentProps: {
       options: [
         {
-          // disabled: true,
           label: 'option-1',
           value: '1'
         },
@@ -1002,13 +1004,12 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'field39-3',
-    label: `${t('formDemo.radioGroup')} ${t('formDemo.slot')}`,
-    component: 'RadioGroup',
+    field: 'field40-1',
+    label: `${t('formDemo.button')} ${t('formDemo.slot')}`,
+    component: 'RadioButton',
     componentProps: {
       options: [
         {
-          // disabled: true,
           label: 'option-1',
           value: '1'
         },
@@ -1021,9 +1022,9 @@ const schema = reactive<FormSchema[]>([
         default: (options: RadioOption[]) => {
           return options?.map((v) => {
             return (
-              <ElRadio label={v.value}>
+              <ElRadioButton label={v.value}>
                 {v.label}({v.value})
-              </ElRadio>
+              </ElRadioButton>
             )
           })
         }
@@ -1031,9 +1032,15 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'field40',
-    label: t('formDemo.button'),
-    component: 'RadioButton',
+    field: 'field41',
+    label: t('formDemo.checkbox'),
+    component: 'Divider'
+  },
+  {
+    field: 'field42-2',
+    label: t('formDemo.checkboxGroup'),
+    component: 'CheckboxGroup',
+    value: [],
     componentProps: {
       options: [
         {
@@ -1043,14 +1050,19 @@ const schema = reactive<FormSchema[]>([
         {
           label: 'option-2',
           value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
         }
       ]
     }
   },
   {
-    field: 'field40-1',
-    label: `${t('formDemo.button')} ${t('formDemo.slot')}`,
-    component: 'RadioButton',
+    field: 'field42-3',
+    label: `${t('formDemo.checkboxGroup')} ${t('formDemo.slot')}`,
+    component: 'CheckboxGroup',
+    value: [],
     componentProps: {
       options: [
         {
@@ -1060,15 +1072,19 @@ const schema = reactive<FormSchema[]>([
         {
           label: 'option-2',
           value: '2'
+        },
+        {
+          label: 'option-3',
+          value: '3'
         }
       ],
       slots: {
-        default: (options: RadioOption[]) => {
+        default: (options: CheckboxOption[]) => {
           return options?.map((v) => {
             return (
-              <ElRadioButton label={v.value}>
+              <ElCheckbox label={v.value}>
                 {v.label}({v.value})
-              </ElRadioButton>
+              </ElCheckbox>
             )
           })
         }
@@ -1076,14 +1092,10 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'field41',
-    label: t('formDemo.checkbox'),
-    component: 'Divider'
-  },
-  {
-    field: 'field42',
-    label: t('formDemo.default'),
-    component: 'Checkbox',
+    field: 'field43',
+    label: t('formDemo.button'),
+    component: 'CheckboxButton',
+    value: [],
     componentProps: {
       options: [
         {
@@ -1097,18 +1109,20 @@ const schema = reactive<FormSchema[]>([
         },
         {
           label: 'option-3',
-          value: '3'
+          value: '23'
         }
       ]
     }
   },
   {
-    field: 'field42-1',
-    label: t('formDemo.slot'),
-    component: 'Checkbox',
+    field: 'field43-1',
+    label: `${t('formDemo.button')} ${t('formDemo.slot')}`,
+    component: 'CheckboxButton',
+    value: [],
     componentProps: {
       options: [
         {
+          disabled: true,
           label: 'option-1',
           value: '1'
         },
@@ -1118,256 +1132,218 @@ const schema = reactive<FormSchema[]>([
         },
         {
           label: 'option-3',
-          value: '3'
+          value: '23'
         }
       ],
       slots: {
-        default: ({ option }) => {
+        default: (options: CheckboxOption[]) => {
+          return options?.map((v) => {
+            return (
+              <ElCheckboxButton label={v.value}>
+                {v.label}({v.value})
+              </ElCheckboxButton>
+            )
+          })
+        }
+      }
+    }
+  },
+  {
+    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: 'field47-1',
+    component: 'DatePicker',
+    label: t('formDemo.slot'),
+    value: '2021-10-29',
+    componentProps: {
+      type: 'date',
+      slots: {
+        default: (cell: any) => {
           return (
-            <>
-              <span>{option.label}</span>
-              <span> ({option.value}) </span>
-            </>
+            <div class={{ cell: true, current: cell.isCurrent }}>
+              <span class="text">{cell.text}</span>
+              {isHoliday(cell) ? <span class="holiday" /> : null}
+            </div>
           )
         }
       }
     }
+  },
+  {
+    field: 'field49',
+    component: 'DatePicker',
+    label: t('formDemo.week'),
+    componentProps: {
+      type: 'week',
+      format: `[${t('formDemo.week')}]`
+    }
+  },
+  {
+    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: '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')
   }
-  // {
-  //   field: 'field42-2',
-  //   label: t('formDemo.checkboxGroup'),
-  //   component: 'CheckboxGroup',
-  //   value: [],
-  //   componentProps: {
-  //     options: [
-  //       {
-  //         label: 'option-1',
-  //         value: '1'
-  //       },
-  //       {
-  //         label: 'option-2',
-  //         value: '2'
-  //       },
-  //       {
-  //         label: 'option-3',
-  //         value: '3'
-  //       }
-  //     ]
-  //   }
-  // }
-  // {
-  //   field: 'field43',
-  //   label: t('formDemo.button'),
-  //   component: 'CheckboxButton',
-  //   value: [],
-  //   componentProps: {
-  //     options: [
-  //       {
-  //         disabled: true,
-  //         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')
-  // }
 ])
 
 const { register, formRef, methods } = useForm({
@@ -1445,102 +1421,43 @@ const changeToggle = () => {
       </template>
     </Form> -->
 
-    <Form @register="register">
-      <!-- <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>
+    <Form @register="register" />
   </ContentWrap>
 </template>
 
-<style lang="less" scoped>
+<style lang="less">
 .cell {
   height: 30px;
   padding: 3px 0;
   box-sizing: border-box;
 
   .text {
-    position: absolute;
-    left: 50%;
-    display: block;
     width: 24px;
     height: 24px;
+    display: block;
     margin: 0 auto;
     line-height: 24px;
-    border-radius: 50%;
+    position: absolute;
+    left: 50%;
     transform: translateX(-50%);
+    border-radius: 50%;
   }
 
   &.current {
     .text {
       color: #fff;
-      background: purple;
+      background: #626aef;
     }
   }
 
   .holiday {
     position: absolute;
-    bottom: 0px;
-    left: 50%;
     width: 6px;
     height: 6px;
-    background: red;
+    background: var(--el-color-danger);
     border-radius: 50%;
+    bottom: 0px;
+    left: 50%;
     transform: translateX(-50%);
   }
 }

types/global.d.ts

@@ -17,6 +17,12 @@ declare global {
   declare type TimeoutHandle = ReturnType<typeof setTimeout>
   declare type IntervalHandle = ReturnType<typeof setInterval>
 
+  declare type ElementPlusSize = 'default' | 'small' | 'large'
+
+  declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
+
+  declare type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
+
   declare type AxiosHeaders =
     | 'application/json'
     | 'application/x-www-form-urlencoded'