From bea6824fd7c28e2b9097c7a308d58b8976d1767d Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 16 Mar 2022 16:12:39 +0800
Subject: [PATCH] feat: update basic-form demo

---
 package.json                                  |  10 +-
 src/api/demos/select.ts                       |  18 +
 .../basic/excel/src/ExportExcelModal.tsx      |   1 -
 .../dynamic-table/src/hooks/useTableForm.ts   |   3 +-
 src/components/core/schema-form/index.ts      |   6 +-
 .../schema-form/src/components/ApiSelect.vue  | 141 +++++
 .../src/components/form-action.vue            |   2 +-
 .../core/schema-form/src/components/index.ts  |   1 +
 src/components/core/schema-form/src/helper.ts |   2 +-
 .../core/schema-form/src/hooks/useAdvanced.ts |   4 +-
 .../core/schema-form/src/schema-form-item.vue |  76 +--
 .../core/schema-form/src/schema-form.ts       |   2 +-
 .../core/schema-form/src/schema-form.vue      |   4 +-
 .../core/schema-form/src/types/component.ts   | 125 +++++
 .../core/schema-form/src/types/form.ts        |   9 +-
 .../core/schema-form/src/types/index.ts       | 124 +----
 src/layout/header/index.vue                   |   2 +-
 src/layout/tabs/tabs-view.vue                 |   2 +-
 src/mock/demo/index.js                        |  26 +
 src/mock/index.js                             |   3 +-
 src/utils/propTypes.ts                        |  34 ++
 src/views/demos/custom-modal.vue              |   7 +
 .../demos/form/basic-form/form-schema.ts      | 222 --------
 .../demos/form/basic-form/form-schema.tsx     | 499 ++++++++++++++++++
 src/views/demos/form/basic-form/index.vue     | 127 ++++-
 src/views/demos/form/use-form/index.vue       |   2 +-
 yarn.lock                                     |  77 ++-
 27 files changed, 1083 insertions(+), 446 deletions(-)
 create mode 100644 src/api/demos/select.ts
 create mode 100644 src/components/core/schema-form/src/components/ApiSelect.vue
 create mode 100644 src/components/core/schema-form/src/components/index.ts
 create mode 100644 src/components/core/schema-form/src/types/component.ts
 create mode 100644 src/mock/demo/index.js
 create mode 100644 src/utils/propTypes.ts
 delete mode 100644 src/views/demos/form/basic-form/form-schema.ts
 create mode 100644 src/views/demos/form/basic-form/form-schema.tsx

diff --git a/package.json b/package.json
index 4cb3c4d20..29adcbfda 100644
--- a/package.json
+++ b/package.json
@@ -46,10 +46,11 @@
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.14",
-    "xlsx": "^0.18.3"
+    "vue-types": "^4.1.1",
+    "xlsx": "^0.18.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
+    "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.21",
@@ -62,7 +63,6 @@
     "@vue/cli-plugin-typescript": "^5.0.3",
     "@vue/cli-plugin-vuex": "^5.0.3",
     "@vue/cli-service": "^5.0.3",
-    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-typescript": "^10.0.0",
     "babel-plugin-import": "^1.13.3",
     "commitizen": "^4.2.4",
@@ -76,10 +76,10 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "^12.3.6",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "regenerator-runtime": "^0.13.9",
     "stylelint": "^14.5.3",
     "stylelint-config-html": "^1.0.0",
diff --git a/src/api/demos/select.ts b/src/api/demos/select.ts
new file mode 100644
index 000000000..6e0e7a2ac
--- /dev/null
+++ b/src/api/demos/select.ts
@@ -0,0 +1,18 @@
+import { request } from '@/utils/request';
+
+/**
+ * @description Get sample options value
+ */
+export function optionsListApi(params?: any) {
+  return request<{ list: { id: string; name: string }[] }>(
+    {
+      url: '/select/getDemoOptions',
+      method: 'get',
+      params,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: true,
+    },
+  );
+}
diff --git a/src/components/basic/excel/src/ExportExcelModal.tsx b/src/components/basic/excel/src/ExportExcelModal.tsx
index 1cc230e5b..a44763486 100644
--- a/src/components/basic/excel/src/ExportExcelModal.tsx
+++ b/src/components/basic/excel/src/ExportExcelModal.tsx
@@ -67,7 +67,6 @@ export const useExportExcelModal = () => {
       },
       formProps: {
         labelWidth: 100,
-        layout: 'vertical',
         schemas: getSchemas(t),
       },
     });
diff --git a/src/components/core/dynamic-table/src/hooks/useTableForm.ts b/src/components/core/dynamic-table/src/hooks/useTableForm.ts
index 2eb58e5f5..1fc4c6910 100644
--- a/src/components/core/dynamic-table/src/hooks/useTableForm.ts
+++ b/src/components/core/dynamic-table/src/hooks/useTableForm.ts
@@ -1,5 +1,4 @@
 import { unref, computed, watchEffect } from 'vue';
-import { omit } from 'lodash-es';
 import type { TableMethods } from './useTableMethods';
 import type { TableState } from './useTableState';
 import type { ComputedRef, Slots } from 'vue';
@@ -49,7 +48,7 @@ export function useTableForm({ tableState, slots, tableMethods }: UseTableFormCo
   });
 
   // 同步外部对props的修改
-  watchEffect(() => getQueryFormRef()?.setSchemaFormProps(omit(unref(getFormProps), 'schemas')), {
+  watchEffect(() => getQueryFormRef()?.setSchemaFormProps(unref(getFormProps)), {
     flush: 'post',
   });
 
diff --git a/src/components/core/schema-form/index.ts b/src/components/core/schema-form/index.ts
index 0347e0c2f..080e17746 100644
--- a/src/components/core/schema-form/index.ts
+++ b/src/components/core/schema-form/index.ts
@@ -1,13 +1,11 @@
-// export { default as SchemaForm } from './schema-form.vue'
 import SchemaForm from './src/schema-form.vue';
 import type { DefineComponent } from 'vue';
 import type { SchemaFormProps } from './src/schema-form';
 
-export * from './src/types/form';
-export * from './src/types/formItem';
+export * from './src/types/';
 export * from './src/schema-form';
-
 export * from './src/hooks/';
+export * from './src/components/';
 
 export { SchemaForm };
 
diff --git a/src/components/core/schema-form/src/components/ApiSelect.vue b/src/components/core/schema-form/src/components/ApiSelect.vue
new file mode 100644
index 000000000..a09537c64
--- /dev/null
+++ b/src/components/core/schema-form/src/components/ApiSelect.vue
@@ -0,0 +1,141 @@
+<template>
+  <Select
+    v-bind="getProps"
+    :options="getOptions"
+    @dropdown-visible-change="handleFetch"
+    @change="handleChange"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loading" #suffixIcon>
+      <LoadingOutlined spin />
+    </template>
+    <template v-if="loading" #notFoundContent>
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+  </Select>
+</template>
+<script lang="ts" setup>
+  import { PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { get, omit } from 'lodash-es';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { selectProps } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+  import { isFunction } from '@/utils/is';
+  import { useI18n } from '@/hooks/useI18n';
+  import { propTypes } from '@/utils/propTypes';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+
+  defineOptions({
+    name: 'ApiSelect',
+    inheritAttrs: false,
+  });
+
+  const props = defineProps({
+    ...selectProps(),
+    value: [Array, Object, String, Number],
+    numberToString: propTypes.bool,
+    api: {
+      type: Function as PropType<(arg?: Recordable) => Promise<any>>,
+      default: null,
+    },
+    // api params
+    params: {
+      type: Object as PropType<Recordable>,
+      default: () => ({}),
+    },
+    // support xxx.xxx.xx
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('label'),
+    valueField: propTypes.string.def('value'),
+    immediate: propTypes.bool.def(true),
+    alwaysLoad: propTypes.bool.def(false),
+  });
+
+  const emit = defineEmits(['options-change', 'change']);
+
+  const options = ref<OptionsItem[]>([]);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+  const { t } = useI18n();
+
+  const getProps = computed(() => props as Recordable);
+
+  // Embedded in the form, just use the hook binding to perform form verification
+
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    return unref(options).reduce((prev, next: Recordable) => {
+      if (next) {
+        const value = next[valueField];
+        prev.push({
+          ...omit(next, [labelField, valueField]),
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && !props.alwaysLoad && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true },
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        options.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function handleFetch(visible) {
+    if (visible) {
+      if (props.alwaysLoad) {
+        await fetch();
+      } else if (!props.immediate && unref(isFirstLoad)) {
+        await fetch();
+        isFirstLoad.value = false;
+      }
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
+</script>
diff --git a/src/components/core/schema-form/src/components/form-action.vue b/src/components/core/schema-form/src/components/form-action.vue
index c054a6129..db01e2820 100644
--- a/src/components/core/schema-form/src/components/form-action.vue
+++ b/src/components/core/schema-form/src/components/form-action.vue
@@ -43,7 +43,7 @@
   import { computed, type PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { useFormContext } from '../hooks/useFormContext';
-  import type { ColEx } from '../types/index';
+  import type { ColEx } from '../types/component';
   import { Button, ButtonProps } from '@/components/basic/button';
   import { BasicArrow } from '@/components/basic/basic-arrow';
   import { useI18n } from '@/hooks/useI18n';
diff --git a/src/components/core/schema-form/src/components/index.ts b/src/components/core/schema-form/src/components/index.ts
new file mode 100644
index 000000000..9137b5876
--- /dev/null
+++ b/src/components/core/schema-form/src/components/index.ts
@@ -0,0 +1 @@
+export { default as ApiSelect } from './ApiSelect.vue';
diff --git a/src/components/core/schema-form/src/helper.ts b/src/components/core/schema-form/src/helper.ts
index 254e00e41..c92b67205 100644
--- a/src/components/core/schema-form/src/helper.ts
+++ b/src/components/core/schema-form/src/helper.ts
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import type { ValidationRule } from 'ant-design-vue/es/form/Form';
-import type { ComponentMapType } from './types';
+import type { ComponentMapType } from './types/component';
 import { isNumber } from '@/utils/is';
 import { useI18n } from '@/hooks/useI18n';
 
diff --git a/src/components/core/schema-form/src/hooks/useAdvanced.ts b/src/components/core/schema-form/src/hooks/useAdvanced.ts
index 594b749bf..7d654d41c 100644
--- a/src/components/core/schema-form/src/hooks/useAdvanced.ts
+++ b/src/components/core/schema-form/src/hooks/useAdvanced.ts
@@ -1,6 +1,6 @@
 import { computed, unref, watch } from 'vue';
 import type { SchemaFormEmitFn } from '../schema-form';
-import type { ColEx } from '../types';
+import type { ColEx } from '../types/component';
 import type { SchemaFormType } from './';
 import { isBoolean, isFunction, isNumber, isObject } from '@/utils/is';
 import { useBreakpoint } from '@/hooks/event/useBreakpoint';
@@ -40,7 +40,7 @@ export const useAdvanced = ({ instance, emit }: UseAdvancedContext) => {
     () => {
       const { showAdvancedButton } = unref(getFormProps);
       if (showAdvancedButton) {
-        requestIdleCallback(updateAdvanced);
+        updateAdvanced();
       }
     },
     { immediate: true },
diff --git a/src/components/core/schema-form/src/schema-form-item.vue b/src/components/core/schema-form/src/schema-form-item.vue
index 6255a9fe2..024cf90fa 100644
--- a/src/components/core/schema-form/src/schema-form-item.vue
+++ b/src/components/core/schema-form/src/schema-form-item.vue
@@ -1,6 +1,10 @@
 <template>
   <Col v-if="getShow.isIfShow" v-show="getShow.isShow" v-bind="schema.colProps">
+    <Divider v-if="schema.component === 'Divider'" v-bind="getComponentProps">
+      <component :is="renderLabelHelpMessage"></component>
+    </Divider>
     <Form.Item
+      v-else
       v-bind="{ ...schema.formItemProps }"
       :label="renderLabelHelpMessage"
       :name="schema.field"
@@ -42,7 +46,7 @@
   import { computed, unref, toRefs, onMounted, isVNode } from 'vue';
   import { useVModel, isFunction } from '@vueuse/core';
   import { cloneDeep } from 'lodash-es';
-  import { Form, Col, Spin } from 'ant-design-vue';
+  import { Form, Col, Spin, Divider } from 'ant-design-vue';
   import { useItemLabelWidth } from './hooks/useLabelWidth';
   import { componentMap } from './componentMap';
   import { createPlaceholderMessage } from './helper';
@@ -97,11 +101,6 @@
 
   // @ts-ignore
   const itemLabelWidthProp = useItemLabelWidth(schema, formPropsRef);
-  // eslint-disable-next-line
-  // const valuesRef = computed(() => {
-  //   const { formModel, schema } = props;
-  //   return { formModel, schema, field: schema.field };
-  // });
 
   const modelValueType = computed(() => {
     const { component, componentProps } = schema.value;
@@ -157,7 +156,7 @@
   const getDisable = computed(() => {
     const { disabled: globDisabled } = unref(formPropsRef);
     const { dynamicDisabled } = props.schema;
-    const { disabled: itemDisabled = false } = unref(getComponentsProps);
+    const { disabled: itemDisabled = false } = unref(getComponentProps);
     let disabled = !!globDisabled || itemDisabled;
     if (isBoolean(dynamicDisabled)) {
       disabled = dynamicDisabled;
@@ -173,7 +172,7 @@
     values = unref(getValues),
   ) => {
     if (isString(component)) {
-      return componentMap[component] ?? <>{component}</>;
+      return <>{component}</>;
     } else if (isVNode(component)) {
       return component;
     } else if (isFunction(component)) {
@@ -197,7 +196,9 @@
    */
   const getComponent = computed(() => {
     const component = props.schema.component;
-    return vnodeFactory(component);
+    return isString(component)
+      ? componentMap[component] ?? vnodeFactory(component)
+      : vnodeFactory(component);
   });
 
   /**
@@ -205,7 +206,11 @@
    */
   const getComponentSlots = computed<Recordable<CustomRenderFn>>(() => {
     const componentSlots = props.schema.componentSlots ?? {};
-    return vnodeFactory(componentSlots);
+    return isString(componentSlots) || isVNode(componentSlots)
+      ? {
+          default: (...rest: any) => vnodeFactory(componentSlots, rest),
+        }
+      : vnodeFactory(componentSlots);
   });
 
   /**
@@ -213,16 +218,24 @@
    */
   const getComponentProps = computed(() => {
     const { schema } = props;
-    const { componentProps = {}, component, label = '' } = schema;
+    let { componentProps = {}, component, label = '' } = schema;
 
-    const _componentProps = isFunction(componentProps)
-      ? componentProps(unref(getValues))
-      : componentProps;
+    if (isFunction(componentProps)) {
+      componentProps = componentProps(unref(getValues)) ?? {};
+    }
 
     if (component !== 'RangePicker' && isString(component)) {
-      _componentProps.placeholder ??= createPlaceholderMessage(component, label);
+      componentProps.placeholder ??= createPlaceholderMessage(component, label);
+    }
+    if (schema.component === 'Divider') {
+      componentProps = Object.assign({ type: 'horizontal' }, componentProps, {
+        orientation: 'left',
+        plain: true,
+      });
     }
-    return _componentProps;
+    schema.field === 'field35' && console.log('componentProps', componentProps);
+
+    return componentProps as Recordable;
   });
 
   /**
@@ -247,7 +260,7 @@
         {label} <span class="text-secondary">{subLabel}</span>
       </span>
     ) : (
-      label
+      vnodeFactory(label)
     );
     const getHelpMessage = isFunction(helpMessage) ? helpMessage(unref(getValues)) : helpMessage;
     if (!getHelpMessage || (Array.isArray(getHelpMessage) && getHelpMessage.length === 0)) {
@@ -261,15 +274,6 @@
     );
   });
 
-  const getComponentsProps = computed(() => {
-    const { schema } = props;
-    let { componentProps = {} } = schema;
-    if (isFunction(componentProps)) {
-      componentProps = componentProps(unref(getValues)) ?? {};
-    }
-    return componentProps as Recordable;
-  });
-
   function setComponentRuleType(
     rule: ValidationRule,
     component: ComponentMapType,
@@ -358,7 +362,7 @@
         if (component.includes('Input') || component.includes('Textarea')) {
           rule.whitespace = true;
         }
-        const valueFormat = unref(getComponentsProps)?.valueFormat;
+        const valueFormat = unref(getComponentProps)?.valueFormat;
         setComponentRuleType(rule, component, valueFormat);
       }
     }
@@ -377,14 +381,20 @@
   onMounted(async () => {
     if (getComponentProps.value?.request) {
       const compProps = getComponentProps.value;
-      const compName = schema.value.component;
+      const { componentProps, component } = schema.value;
+
       schema.value.loading = true;
+      schema.value.field === 'field35' && console.log('compProps', compProps, formPropsRef.value);
+
       try {
-        if (['Select', 'RadioGroup', 'CheckBoxGroup'].some((n) => n === compName)) {
-          compProps.options = await getComponentProps.value?.request();
-          console.log('compProps.options', schema.value);
-        } else if (['TreeSelect', 'Tree'].some((n) => n === compName)) {
-          compProps.treeData = await getComponentProps.value?.request();
+        const result = await getComponentProps.value?.request(unref(getValues));
+        if (['Select', 'RadioGroup', 'CheckBoxGroup'].some((n) => n === component)) {
+          compProps.options = result;
+        } else if (['TreeSelect', 'Tree'].some((n) => n === component)) {
+          compProps.treeData = result;
+        }
+        if (componentProps) {
+          componentProps.requestResult = result;
         }
       } finally {
         schema.value.loading = false;
diff --git a/src/components/core/schema-form/src/schema-form.ts b/src/components/core/schema-form/src/schema-form.ts
index d17079e56..d5628e7c8 100644
--- a/src/components/core/schema-form/src/schema-form.ts
+++ b/src/components/core/schema-form/src/schema-form.ts
@@ -1,6 +1,6 @@
 import { formProps, type FormProps } from 'ant-design-vue/es/form';
 import SchemaForm from './schema-form.vue';
-import { ColEx } from './types';
+import { ColEx } from './types/component';
 import type { ExtractPropTypes, ComponentInternalInstance, CSSProperties } from 'vue';
 import type { FieldMapToTime, FormSchema, RowProps } from './types/form';
 import type { ButtonProps } from '@/components/basic/button';
diff --git a/src/components/core/schema-form/src/schema-form.vue b/src/components/core/schema-form/src/schema-form.vue
index 2fc39f51d..5d4005a51 100644
--- a/src/components/core/schema-form/src/schema-form.vue
+++ b/src/components/core/schema-form/src/schema-form.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
   import { useAttrs, watchEffect } from 'vue';
-  import { omit, pick } from 'lodash-es';
+  import { pick } from 'lodash-es';
   import { Form, Row } from 'ant-design-vue';
   import SchemaFormItem from './schema-form-item.vue';
   import FormAction from './components/form-action.vue';
@@ -79,7 +79,7 @@
   const formEvents = useFormEvents({ ...formState, emit, handleFormValues });
 
   // 同步外部对props的修改
-  watchEffect(() => setSchemaFormProps(omit(props, 'schemas')));
+  watchEffect(() => setSchemaFormProps(props));
 
   // 当前组件所有的状态和方法
   const instance = {
diff --git a/src/components/core/schema-form/src/types/component.ts b/src/components/core/schema-form/src/types/component.ts
new file mode 100644
index 000000000..0f8ad4d34
--- /dev/null
+++ b/src/components/core/schema-form/src/types/component.ts
@@ -0,0 +1,125 @@
+import type { CSSProperties } from 'vue';
+import type {
+  InputNumberProps,
+  SelectProps,
+  CascaderProps,
+  SwitchProps,
+  RateProps,
+  DividerProps,
+  TimePickerProps,
+  TreeProps,
+  TreeSelectProps,
+  RadioGroupProps,
+} from 'ant-design-vue';
+import type { RenderCallbackParams } from './form';
+
+export type { ComponentMapType } from '../componentMap';
+
+type ColSpanType = number | string;
+
+/** 组件属性 */
+export type ComponentProps = (
+  | InputNumberProps
+  | SelectProps
+  | CascaderProps
+  | SwitchProps
+  | RateProps
+  | DividerProps
+  | TimePickerProps
+  | TreeProps
+  | TreeSelectProps
+  | RadioGroupProps
+) & {
+  /** 组件异步请求数据 */
+  request?: PromiseFn<RenderCallbackParams, any>;
+  /** 组件异步请求数据结果 */
+  requestResult?: any;
+  style?: CSSProperties;
+  /** 手动指定v-model绑定的key */
+  vModelKey?: string;
+  [key: string]: any;
+};
+
+/** 所有组件属性集合 */
+export type AllComponentProps = UnionToIntersection<ComponentProps>;
+
+export interface ColEx {
+  style?: any;
+  /**
+   * raster number of cells to occupy, 0 corresponds to display: none
+   * @default none (0)
+   * @type ColSpanType
+   */
+  span?: ColSpanType;
+
+  /**
+   * raster order, used in flex layout mode
+   * @default 0
+   * @type ColSpanType
+   */
+  order?: ColSpanType;
+
+  /**
+   * the layout fill of flex
+   * @default none
+   * @type ColSpanType
+   */
+  flex?: ColSpanType;
+
+  /**
+   * the number of cells to offset Col from the left
+   * @default 0
+   * @type ColSpanType
+   */
+  offset?: ColSpanType;
+
+  /**
+   * the number of cells that raster is moved to the right
+   * @default 0
+   * @type ColSpanType
+   */
+  push?: ColSpanType;
+
+  /**
+   * the number of cells that raster is moved to the left
+   * @default 0
+   * @type ColSpanType
+   */
+  pull?: ColSpanType;
+
+  /**
+   * <576px and also default setting, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xs?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥576px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  sm?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥768px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  md?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥992px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  lg?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥1200px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥1600px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xxl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
+}
diff --git a/src/components/core/schema-form/src/types/form.ts b/src/components/core/schema-form/src/types/form.ts
index 070c3abc7..8958d986c 100644
--- a/src/components/core/schema-form/src/types/form.ts
+++ b/src/components/core/schema-form/src/types/form.ts
@@ -2,7 +2,7 @@ import type { NamePath, RuleObject } from 'ant-design-vue/es/form/interface';
 import type { FormItemProps } from './formItem';
 import type { Component, VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from '@/components/basic/button';
-import type { ColEx, ComponentMapType, ComponentProps } from './index';
+import type { ColEx, ComponentMapType, ComponentProps } from './component';
 // import type { TableActionType } from '/@/components/Table/src/types/table'
 import type { RowProps } from 'ant-design-vue';
 import type { SchemaFormInstance } from '../schema-form';
@@ -89,7 +89,12 @@ export interface FormSchema<T = string> {
   // render component
   component?: ComponentMapType | CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
   // 组件参数
-  componentProps?: ComponentProps | ((opt: RenderCallbackParams<T>) => ComponentProps);
+  componentProps?:
+    | ComponentProps
+    | {
+        (opt: RenderCallbackParams<T>): ComponentProps;
+        requestResult: ComponentProps['requestResult'];
+      };
   /** 表单组件slots，例如 a-input 的 suffix slot 可以写成：{ suffix: () => VNode } */
   componentSlots?:
     | ((renderCallbackParams: RenderCallbackParams<T>) => Recordable<CustomRenderFn<T>>)
diff --git a/src/components/core/schema-form/src/types/index.ts b/src/components/core/schema-form/src/types/index.ts
index 2c480611a..18a19df96 100644
--- a/src/components/core/schema-form/src/types/index.ts
+++ b/src/components/core/schema-form/src/types/index.ts
@@ -1,120 +1,4 @@
-import type { CSSProperties } from 'vue';
-import type {
-  InputNumberProps,
-  SelectProps,
-  CascaderProps,
-  SwitchProps,
-  RateProps,
-  DividerProps,
-  TimePickerProps,
-  TreeProps,
-  TreeSelectProps,
-} from 'ant-design-vue';
-
-export type { ComponentMapType } from '../componentMap';
-
-type ColSpanType = number | string;
-
-/** 组件属性 */
-export type ComponentProps = (
-  | InputNumberProps
-  | SelectProps
-  | CascaderProps
-  | SwitchProps
-  | RateProps
-  | DividerProps
-  | TimePickerProps
-  | TreeProps
-  | TreeSelectProps
-) & {
-  /** 组件异步请求数据 */
-  request?: Fn;
-  style?: CSSProperties;
-  /** 手动指定v-model绑定的key */
-  vModelKey?: string;
-  [key: string]: any;
-};
-
-/** 所有组件属性集合 */
-export type AllComponentProps = UnionToIntersection<ComponentProps>;
-
-export interface ColEx {
-  style?: any;
-  /**
-   * raster number of cells to occupy, 0 corresponds to display: none
-   * @default none (0)
-   * @type ColSpanType
-   */
-  span?: ColSpanType;
-
-  /**
-   * raster order, used in flex layout mode
-   * @default 0
-   * @type ColSpanType
-   */
-  order?: ColSpanType;
-
-  /**
-   * the layout fill of flex
-   * @default none
-   * @type ColSpanType
-   */
-  flex?: ColSpanType;
-
-  /**
-   * the number of cells to offset Col from the left
-   * @default 0
-   * @type ColSpanType
-   */
-  offset?: ColSpanType;
-
-  /**
-   * the number of cells that raster is moved to the right
-   * @default 0
-   * @type ColSpanType
-   */
-  push?: ColSpanType;
-
-  /**
-   * the number of cells that raster is moved to the left
-   * @default 0
-   * @type ColSpanType
-   */
-  pull?: ColSpanType;
-
-  /**
-   * <576px and also default setting, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  xs?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-
-  /**
-   * ≥576px, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  sm?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-
-  /**
-   * ≥768px, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  md?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-
-  /**
-   * ≥992px, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  lg?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-
-  /**
-   * ≥1200px, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  xl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-
-  /**
-   * ≥1600px, could be a span value or an object containing above props
-   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
-   */
-  xxl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
-}
+export * from './form';
+export * from './component';
+export * from './hooks';
+export * from './formItem';
diff --git a/src/layout/header/index.vue b/src/layout/header/index.vue
index 559f6cda9..4bca4adf4 100644
--- a/src/layout/header/index.vue
+++ b/src/layout/header/index.vue
@@ -32,7 +32,7 @@
       </Tooltip>
       <FullScreen />
       <LocalePicker />
-      <Dropdown>
+      <Dropdown placement="bottomRight">
         <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
         <template #overlay>
           <Menu>
diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
index 8971d48d7..ffc4f8c0c 100644
--- a/src/layout/tabs/tabs-view.vue
+++ b/src/layout/tabs/tabs-view.vue
@@ -49,7 +49,7 @@
       </Tabs.TabPane>
 
       <template #rightExtra>
-        <Dropdown :trigger="['click']">
+        <Dropdown :trigger="['click']" placement="bottomRight">
           <a class="ant-dropdown-link" @click.prevent>
             <down-outlined :style="{ fontSize: '20px' }" />
           </a>
diff --git a/src/mock/demo/index.js b/src/mock/demo/index.js
new file mode 100644
index 000000000..97606731b
--- /dev/null
+++ b/src/mock/demo/index.js
@@ -0,0 +1,26 @@
+const { resultSuccess } = require('../utils');
+
+const demoList = (keyword, count = 20) => {
+  const result = {
+    list: [],
+  };
+  for (let index = 0; index < count; index++) {
+    result.list.push({
+      name: `${keyword ?? ''}选项${index}`,
+      id: `${index}`,
+    });
+  }
+  return result;
+};
+
+module.exports = [
+  {
+    url: '/select/getDemoOptions',
+    type: 'get',
+    timeout: 1000,
+    response: ({ query }) => {
+      const { keyword, count } = query;
+      return resultSuccess(demoList(keyword, count));
+    },
+  },
+];
diff --git a/src/mock/index.js b/src/mock/index.js
index db45d2c4b..5e1b83f8b 100644
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -2,13 +2,14 @@ const Mock = require('mockjs');
 const { param2Obj } = require('./utils');
 
 const hero = require('./hero');
+const demo = require('./demo');
 const user = require('./user');
 const role = require('./role');
 const log = require('./log');
 const article = require('./article');
 const search = require('./remote-search');
 
-const mocks = [...user, ...role, ...log, ...article, ...search, ...hero];
+const mocks = [...user, ...role, ...log, ...article, ...search, ...hero, ...demo];
 
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
new file mode 100644
index 000000000..a5b0a47a4
--- /dev/null
+++ b/src/utils/propTypes.ts
@@ -0,0 +1,34 @@
+import { CSSProperties, VNodeChild } from 'vue';
+import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+
+export type VueNode = VNodeChild | JSX.Element;
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+  // readonly trueBool: VueTypeValidableDef<boolean>;
+};
+
+const propTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined,
+}) as PropTypes;
+
+propTypes.extend([
+  {
+    name: 'style',
+    getter: true,
+    type: [String, Object],
+    default: undefined,
+  },
+  {
+    name: 'VNodeChild',
+    getter: true,
+    type: undefined,
+  },
+]);
+export { propTypes };
diff --git a/src/views/demos/custom-modal.vue b/src/views/demos/custom-modal.vue
index 6196656ed..9261479c8 100644
--- a/src/views/demos/custom-modal.vue
+++ b/src/views/demos/custom-modal.vue
@@ -6,6 +6,13 @@
         <span class="text-red-500">
           Tips: 如果你的弹窗依赖于App上下文（provide/inject），你应该使用`useModal组件方式`
         </span>
+        <a
+          class="text-blue-500"
+          target="_blank"
+          href="https://github.com/buqiyuan/vue3-antd-admin/blob/main/src/views/demos/custom-modal.vue"
+        >
+          查看源码
+        </a>
       </template>
     </Alert>
     <a-card>
diff --git a/src/views/demos/form/basic-form/form-schema.ts b/src/views/demos/form/basic-form/form-schema.ts
deleted file mode 100644
index 1f08c97b0..000000000
--- a/src/views/demos/form/basic-form/form-schema.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import type { FormSchema } from '@/components/core/schema-form/';
-
-export const schemas: FormSchema[] = [
-  {
-    field: 'type',
-    component: 'RadioGroup',
-    label: '类型',
-    defaultValue: 1,
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      options: [
-        {
-          label: '类型一',
-          value: 1,
-        },
-        {
-          label: '类型二',
-          value: 2,
-        },
-      ],
-    },
-  },
-  {
-    field: 'isExtenal',
-    component: 'Switch',
-    label: '是否外链',
-    colProps: {
-      span: 8,
-    },
-    vIf: ({ formModel }) => formModel['type'] === 2,
-  },
-  {
-    field: 'isEbed',
-    component: 'Switch',
-    label: '是否内嵌',
-    colProps: {
-      span: 8,
-    },
-    vIf: ({ formModel }) => formModel['type'] === 2 && formModel['isExtenal'],
-  },
-  {
-    field: 'field1',
-    component: 'Input',
-    label: '字段1',
-    colProps: {
-      span: 8,
-    },
-    required: true,
-  },
-  {
-    field: 'field2',
-    component: 'Input',
-    label: '字段2',
-    colProps: {
-      span: 8,
-    },
-    required: true,
-  },
-  {
-    field: 'id',
-    label: 'id',
-    required: true,
-    defaultValue: 0,
-    component: 'InputNumber',
-    vShow: false,
-  },
-  {
-    field: 'field3',
-    component: 'DatePicker',
-    label: '字段3',
-    colProps: {
-      span: 8,
-    },
-    required: true,
-  },
-  {
-    field: 'field33',
-    component: 'DatePicker',
-    label: '字段33',
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      valueFormat: 'YYYY-MM-DD',
-    },
-    rules: [{ required: true, type: 'string' }],
-  },
-  // {
-  //   field: 'field44',
-  //   component: 'InputCountDown',
-  //   label: '验证码',
-  //   colProps: {
-  //     span: 8
-  //   },
-  //   required: true
-  // },
-  {
-    field: 'field4',
-    component: 'Select',
-    label: '字段4',
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      mode: 'multiple',
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-          key: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-          key: '2',
-        },
-      ],
-    },
-    rules: [
-      {
-        required: true,
-        message: '请输入aa',
-        type: 'array',
-      },
-    ],
-  },
-  {
-    field: 'field441',
-    component: 'Input',
-    label: '自定义校验',
-    colProps: {
-      span: 8,
-    },
-    rules: [
-      {
-        required: true,
-        validator: async (_, value) => {
-          if (!value) {
-            return Promise.reject('值不能为空');
-          }
-          if (value === '1') {
-            return Promise.reject('值不能为1');
-          }
-          return Promise.resolve();
-        },
-        trigger: 'change',
-      },
-    ],
-  },
-  {
-    field: 'field5',
-    component: 'CheckboxGroup',
-    label: '字段5',
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
-    },
-    rules: [{ required: true, message: '请选择你的爱好' }],
-  },
-  {
-    field: 'field7',
-    component: 'RadioGroup',
-    label: '字段7',
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
-    },
-    rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
-  },
-  {
-    field: 'field8',
-    component: 'Input',
-    label: '后端异步验证',
-    colProps: {
-      span: 8,
-    },
-    helpMessage: ['本字段演示异步验证', '本地规则：必须填写', '后端规则：不能包含admin'],
-    rules: [
-      {
-        required: true,
-        message: '请输入数据',
-      },
-      {
-        validator(_, value = '') {
-          return new Promise((resolve, reject) => {
-            setTimeout(() => {
-              if (value.includes('admin')) {
-                reject('该字段不能包含admin关键字');
-              } else {
-                resolve();
-              }
-            }, 100);
-          });
-        },
-      },
-    ],
-  },
-];
diff --git a/src/views/demos/form/basic-form/form-schema.tsx b/src/views/demos/form/basic-form/form-schema.tsx
new file mode 100644
index 000000000..a3bbc99af
--- /dev/null
+++ b/src/views/demos/form/basic-form/form-schema.tsx
@@ -0,0 +1,499 @@
+import { Radio } from 'ant-design-vue';
+import type { FormSchema } from '@/components/core/schema-form';
+import { optionsListApi } from '@/api/demos/select';
+
+const provincesOptions = [
+  {
+    id: 'guangdong',
+    label: '广东省',
+    value: '1',
+    key: '1',
+  },
+  {
+    id: 'jiangsu',
+    label: '江苏省',
+    value: '2',
+    key: '2',
+  },
+];
+const citiesOptionsData = {
+  guangdong: [
+    {
+      label: '珠海市',
+      value: '1',
+      key: '1',
+    },
+    {
+      label: '深圳市',
+      value: '2',
+      key: '2',
+    },
+    {
+      label: '广州市',
+      value: '3',
+      key: '3',
+    },
+  ],
+  jiangsu: [
+    {
+      label: '南京市',
+      value: '1',
+      key: '1',
+    },
+    {
+      label: '无锡市',
+      value: '2',
+      key: '2',
+    },
+    {
+      label: '苏州市',
+      value: '3',
+      key: '3',
+    },
+  ],
+};
+
+const fetchOptionList = async () => {
+  const data = await optionsListApi();
+  return data.list.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+};
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'divider-basic',
+    component: 'Divider',
+    label: '基础字段',
+  },
+  {
+    field: 'field1',
+    component: 'Input',
+    label: '字段1',
+
+    colProps: {
+      span: 8,
+    },
+    // componentProps:{},
+    // can func
+    componentProps: () => {
+      return {
+        placeholder: '自定义placeholder',
+        onChange: (e: any) => {
+          console.log(e);
+        },
+      };
+    },
+    componentSlots: () => {
+      return {
+        prefix: () => 'pSlot',
+        suffix: () => 'sSlot',
+      };
+    },
+  },
+  {
+    field: 'field2',
+    component: 'Input',
+    label: '带后缀',
+    defaultValue: '111',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      onChange: (e: any) => {
+        console.log(e);
+      },
+    },
+    suffix: '天',
+  },
+  {
+    field: 'field3',
+    component: 'DatePicker',
+    label: '字段3',
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field4',
+    component: 'Select',
+    label: '字段4',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '选项2',
+          value: '2',
+          key: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'field5',
+    component: 'CheckboxGroup',
+    label: '字段5',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '1',
+        },
+        {
+          label: '选项2',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'field7',
+    component: 'RadioGroup',
+    label: '字段7',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '1',
+        },
+        {
+          label: '选项2',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'field8',
+    component: 'Checkbox',
+    label: '字段8',
+    colProps: {
+      span: 8,
+    },
+    componentSlots: 'Check',
+  },
+  {
+    field: 'field9',
+    component: 'Switch',
+    label: '字段9',
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field10',
+    component: 'RadioGroup',
+    label: '字段10',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '1',
+        },
+        {
+          label: '选项2',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'field11',
+    component: 'Cascader',
+    label: '字段11',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [
+            {
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [
+                {
+                  value: 'xihu',
+                  label: 'West Lake',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [
+            {
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [
+                {
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    field: 'divider-api-select',
+    component: 'Divider',
+    label: '远程下拉演示',
+  },
+  {
+    field: 'field30',
+    component: 'Select',
+    label: '懒加载远程下拉',
+    required: true,
+    componentProps: {
+      // more details see /src/components/Form/src/components/ApiSelect.vue
+      request: async (values) => {
+        console.log('field30 fetch', values);
+        return await fetchOptionList();
+      },
+      onChange: (e) => {
+        console.log('selected:', e);
+      },
+    },
+    colProps: {
+      span: 8,
+    },
+    defaultValue: 1,
+  },
+  {
+    field: 'field31',
+    component: 'Input',
+    label: '下拉本地搜索',
+    helpMessage: ['Select组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
+    required: true,
+    slot: 'localSearch',
+    colProps: {
+      span: 8,
+    },
+    defaultValue: '0',
+  },
+  {
+    field: 'field32',
+    component: 'Input',
+    label: '下拉远程搜索',
+    helpMessage: ['Select组件', '将关键词发送到接口进行远程搜索'],
+    required: true,
+    slot: 'remoteSearch',
+    colProps: {
+      span: 8,
+    },
+    defaultValue: '0',
+  },
+  {
+    field: 'field33',
+    component: 'TreeSelect',
+    label: '远程下拉树',
+    helpMessage: ['TreeSelect组件', '使用接口提供的数据生成选项'],
+    required: true,
+    componentProps: {
+      request: () => {
+        return new Promise((resolve) => {
+          const treeData = Array.from({ length: 5 }).map((_, i) => ({
+            title: `选项 ${i}`,
+            value: `选项 ${i}`,
+            children: Array.from({ length: 3 }).map((_, j) => ({
+              title: `选项 ${i}-${j}`,
+              value: `选项 ${i}-${j}`,
+            })),
+          }));
+          setTimeout(() => resolve(treeData), 2000);
+        });
+      },
+    },
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field34',
+    component: ({ formModel, schema, field }) => {
+      const options = schema.componentProps?.requestResult || [];
+      return (
+        <Radio.Group
+          v-model={[formModel[field], 'value']}
+          options={options.slice(0, 2)}
+        ></Radio.Group>
+      );
+    },
+    label: '远程Radio',
+    helpMessage: ['RadioGroup组件', '使用接口提供的数据生成选项'],
+    required: true,
+    componentProps: {
+      optionType: 'button',
+      request: async () => {
+        const data = await fetchOptionList();
+        return data;
+      },
+    },
+    defaultValue: '1',
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field35',
+    component: 'RadioGroup',
+    label: '远程Radio',
+    helpMessage: ['RadioGroup组件', '使用接口提供的数据生成选项'],
+    required: true,
+    componentProps: {
+      optionType: 'button',
+      request: async () => {
+        const data = await fetchOptionList();
+        return data.slice(0, 2);
+      },
+    },
+    defaultValue: '1',
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'divider-linked',
+    component: 'Divider',
+    label: '字段联动',
+  },
+  {
+    field: 'province',
+    component: 'Select',
+    label: '省份',
+    colProps: {
+      span: 8,
+    },
+    componentProps: ({ formModel, formInstance }) => {
+      return {
+        options: provincesOptions,
+        placeholder: '省份与城市联动',
+        onChange: (e: any) => {
+          // console.log(e)
+          let citiesOptions =
+            e == 1
+              ? citiesOptionsData[provincesOptions[0].id]
+              : citiesOptionsData[provincesOptions[1].id];
+          // console.log(citiesOptions)
+          if (e === undefined) {
+            citiesOptions = [];
+          }
+          formModel.city = undefined; //  reset city value
+          const { updateSchema } = formInstance;
+          updateSchema({
+            field: 'city',
+            componentProps: {
+              options: citiesOptions,
+            },
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'city',
+    component: 'Select',
+    label: '城市',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [], // defalut []
+      placeholder: '省份与城市联动',
+    },
+  },
+  {
+    field: 'divider-selects',
+    component: 'Divider',
+    label: '互斥多选',
+    helpMessage: ['两个Select共用数据源', '但不可选择对方已选中的项目'],
+  },
+  {
+    field: 'selectA',
+    component: 'Select',
+    label: '互斥SelectA',
+    slot: 'selectA',
+    defaultValue: [],
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'selectB',
+    component: 'Select',
+    label: '互斥SelectB',
+    slot: 'selectB',
+    defaultValue: [],
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'divider-others',
+    component: 'Divider',
+    label: '其它',
+  },
+  {
+    field: 'field20',
+    component: 'InputNumber',
+    label: '字段20',
+    required: true,
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field21',
+    component: 'Slider',
+    label: '字段21',
+    componentProps: {
+      min: 0,
+      max: 100,
+      range: true,
+      marks: {
+        20: '20°C',
+        60: '60°C',
+      },
+    },
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'field22',
+    component: 'Rate',
+    label: '字段22',
+    defaultValue: 3,
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      disabled: false,
+      allowHalf: true,
+    },
+  },
+];
diff --git a/src/views/demos/form/basic-form/index.vue b/src/views/demos/form/basic-form/index.vue
index d424a4ec7..e1844fa61 100644
--- a/src/views/demos/form/basic-form/index.vue
+++ b/src/views/demos/form/basic-form/index.vue
@@ -1,44 +1,121 @@
 <template>
   <div>
-    <Alert
-      message="验证表单"
-      description="动态验证表单"
-      type="info"
-      show-icon
-      style="margin-bottom: 12px"
-    />
+    <Alert message="基础表单示例" type="info" show-icon style="margin-bottom: 12px">
+      <template #description>
+        <a
+          class="text-blue-500"
+          target="_blank"
+          href="https://github.com/buqiyuan/vue3-antd-admin/blob/main/src/views/demos/form/basic-form/index.vue"
+        >
+          查看源码
+        </a>
+      </template>
+    </Alert>
     <a-card>
-      <schema-form ref="dynamicForm" v-bind="formProps">
-        <template #operate-button>
-          <a-button type="primary" @click="confirm"> 确定 </a-button>
+      <SchemaForm @submit="handleSubmit">
+        <template #selectA="{ formModel, field }">
+          <Select
+            v-model:value="formModel[field]"
+            :options="optionsA"
+            mode="multiple"
+            allow-clear
+            @change="valueSelectA = formModel[field]"
+          />
         </template>
-      </schema-form>
+        <template #selectB="{ formModel, field }">
+          <Select
+            v-model:value="formModel[field]"
+            :options="optionsB"
+            mode="multiple"
+            allow-clear
+            @change="valueSelectB = formModel[field]"
+          />
+        </template>
+        <template #localSearch="{ formModel, field }">
+          <ApiSelect
+            v-model:value="formModel[field]"
+            :api="optionsListApi"
+            show-search
+            option-filter-prop="label"
+            result-field="list"
+            label-field="name"
+            value-field="id"
+          />
+        </template>
+        <template #remoteSearch="{ formModel, field }">
+          <ApiSelect
+            v-model:value="formModel[field]"
+            :api="optionsListApi"
+            show-search
+            :filter-option="false"
+            result-field="list"
+            label-field="name"
+            value-field="id"
+            :params="searchParams"
+            @search="onSearch"
+          />
+        </template>
+      </SchemaForm>
     </a-card>
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { Alert, message } from 'ant-design-vue';
+<script lang="tsx" setup>
+  import { computed, ref, unref } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  import { Alert, message, Select } from 'ant-design-vue';
   import { schemas } from './form-schema';
-  import type { SchemaFormProps } from '@/components/core/schema-form';
-  import { SchemaForm } from '@/components/core/schema-form';
+  import { useForm, ApiSelect } from '@/components/core/schema-form';
+  import { optionsListApi } from '@/api/demos/select';
 
   defineOptions({
     name: 'DemosFormBasicForm',
   });
 
-  /**
-   * @description 基础表单
-   */
-  const dynamicForm = ref<InstanceType<typeof SchemaForm>>();
-  const formProps: SchemaFormProps = { schemas, labelWidth: 120, actionColOptions: { span: 24 } };
+  const [SchemaForm] = useForm({
+    labelWidth: 200,
+    schemas,
+    actionColOptions: {
+      span: 24,
+    },
+  });
 
-  // 点击提交
-  function confirm() {
-    console.log('dynamicForm.value', dynamicForm.value?.formModel);
+  const keyword = ref<string>('');
+
+  const valueSelectA = ref<string[]>([]);
+  const valueSelectB = ref<string[]>([]);
+  const options = ref<Recordable[]>([]);
+  for (let i = 1; i < 10; i++) options.value.push({ label: `选项${i}`, value: `${i}` });
+
+  const optionsA = computed(() => {
+    return cloneDeep(unref(options)).map((op) => {
+      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
+      return op;
+    });
+  });
+  const optionsB = computed(() => {
+    return cloneDeep(unref(options)).map((op) => {
+      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
+      return op;
+    });
+  });
+
+  const searchParams = computed<Recordable>(() => {
+    return { keyword: unref(keyword) };
+  });
 
-    dynamicForm.value?.validate().then(() => message.success('验证通过！'));
+  function onSearch(value: string) {
+    keyword.value = value;
+  }
+
+  // 点击提交
+  function handleSubmit(values) {
+    message.success(
+      <div>
+        验证通过！<pre class="text-left">{JSON.stringify(values, null, 2)}</pre>
+      </div>,
+      3,
+    );
   }
 </script>
 
diff --git a/src/views/demos/form/use-form/index.vue b/src/views/demos/form/use-form/index.vue
index 39fc10cb3..7217393b1 100644
--- a/src/views/demos/form/use-form/index.vue
+++ b/src/views/demos/form/use-form/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Alert message="动态表单示例" type="info" show-icon style="margin-bottom: 12px">
+    <Alert message="useForm示例" type="info" show-icon style="margin-bottom: 12px">
       <template #description>
         <a
           class="text-blue-500"
diff --git a/yarn.lock b/yarn.lock
index 785609710..9c551803f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -959,14 +959,14 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@commitlint/cli@^16.2.1":
-  version "16.2.1"
-  resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.2.1.tgz#ca4e557829a2755f0e1f0cd69b56b83ce2510173"
-  integrity sha512-zfKf+B9osuiDbxGMJ7bWFv7XFCW8wlQYPtCffNp7Ukdb7mdrep5R9e03vPUZysnwp8NX6hg05kPEvnD/wRIGWw==
+"@commitlint/cli@^16.2.3":
+  version "16.2.3"
+  resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.2.3.tgz#6c250ce7a660a08a3ac35dd2ec5039421fb831df"
+  integrity sha512-VsJBQLvhhlOgEfxs/Z5liYuK0dXqLE5hz1VJzLBxiOxG31kL/X5Q4OvK292BmO7IGZcm1yJE3XQPWSiFaEHbWA==
   dependencies:
     "@commitlint/format" "^16.2.1"
     "@commitlint/lint" "^16.2.1"
-    "@commitlint/load" "^16.2.1"
+    "@commitlint/load" "^16.2.3"
     "@commitlint/read" "^16.2.1"
     "@commitlint/types" "^16.2.1"
     lodash "^4.17.19"
@@ -1028,7 +1028,7 @@
     "@commitlint/rules" "^16.2.1"
     "@commitlint/types" "^16.2.1"
 
-"@commitlint/load@>6.1.1", "@commitlint/load@^16.2.1":
+"@commitlint/load@>6.1.1":
   version "16.2.1"
   resolved "https://registry.npmmirror.com/@commitlint/load/-/load-16.2.1.tgz#301bda1bff66b3e40a85819f854eda72538d8e24"
   integrity sha512-oSpz0jTyVI/A1AIImxJINTLDOMB8YF7lWGm+Jg5wVWM0r7ucpuhyViVvpSRTgvL0z09oIxlctyFGWUQQpI42uw==
@@ -1045,6 +1045,23 @@
     resolve-from "^5.0.0"
     typescript "^4.4.3"
 
+"@commitlint/load@^16.2.3":
+  version "16.2.3"
+  resolved "https://registry.npmmirror.com/@commitlint/load/-/load-16.2.3.tgz#7b2e85af25a6f736f080ba08e7165738cedf8c8f"
+  integrity sha512-Hb4OUlMnBUK6UxJEZ/VJ5k0LocIS7PtEMbRXEAA7eSpOgORIFexC4K/RaRpVd5UTtu3M0ST3ddPPijF9rdW6nw==
+  dependencies:
+    "@commitlint/config-validator" "^16.2.1"
+    "@commitlint/execute-rule" "^16.2.1"
+    "@commitlint/resolve-extends" "^16.2.1"
+    "@commitlint/types" "^16.2.1"
+    "@types/node" ">=12"
+    chalk "^4.0.0"
+    cosmiconfig "^7.0.0"
+    cosmiconfig-typescript-loader "^1.0.0"
+    lodash "^4.17.19"
+    resolve-from "^5.0.0"
+    typescript "^4.4.3"
+
 "@commitlint/message@^16.2.1":
   version "16.2.1"
   resolved "https://registry.npmmirror.com/@commitlint/message/-/message-16.2.1.tgz#bc6a0fa446a746ac2ca78cf372e4cec48daf620d"
@@ -1970,7 +1987,7 @@
     "@vue/compiler-core" "3.2.31"
     "@vue/shared" "3.2.31"
 
-"@vue/compiler-sfc@3.2.31", "@vue/compiler-sfc@^3.2.31":
+"@vue/compiler-sfc@3.2.31":
   version "3.2.31"
   resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz#d02b29c3fe34d599a52c5ae1c6937b4d69f11c2f"
   integrity sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==
@@ -5689,6 +5706,11 @@ is-plain-object@3.0.1:
   resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
   integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
 
+is-plain-object@5.0.0, is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -5696,11 +5718,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
-  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-
 is-regex@^1.0.4, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -6031,10 +6048,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lint-staged@^12.3.5:
-  version "12.3.5"
-  resolved "https://registry.npmmirror.com/lint-staged/-/lint-staged-12.3.5.tgz#8048ce048c3cac12f57200a06344a54dc91c8fa9"
-  integrity sha512-oOH36RUs1It7b9U/C7Nl/a0sLfoIBcMB8ramiB3nuJ6brBqzsWiUAFSR5DQ3yyP/OR7XKMpijtgKl2DV1lQ3lA==
+lint-staged@^12.3.6:
+  version "12.3.6"
+  resolved "https://registry.npmmirror.com/lint-staged/-/lint-staged-12.3.6.tgz#7b999ebe041c07f241537a17c49969027b4d26f0"
+  integrity sha512-tVNyl/HsAnplKh4oaoRNzyZLm0PE/6VaBUXvd/gA9zhYCC/+ivZwiwpoT6jOxcLzuIOjP19wW+mfOi7/Bw4c1A==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"
@@ -6046,6 +6063,7 @@ lint-staged@^12.3.5:
     micromatch "^4.0.4"
     normalize-path "^3.0.0"
     object-inspect "^1.12.0"
+    pidtree "^0.5.0"
     string-argv "^0.3.1"
     supports-color "^9.2.1"
     yaml "^1.10.2"
@@ -7115,6 +7133,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pidtree@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.5.0.tgz#ad5fbc1de78b8a5f99d6fbdd4f6e4eee21d1aca1"
+  integrity sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7516,11 +7539,16 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-"prettier@^1.18.2 || ^2.0.0", prettier@^2.5.1:
+"prettier@^1.18.2 || ^2.0.0":
   version "2.5.1"
   resolved "https://registry.npmmirror.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
   integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
+prettier@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
+  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
+
 pretty-error@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
@@ -9322,6 +9350,13 @@ vue-types@^3.0.0:
   dependencies:
     is-plain-object "3.0.1"
 
+vue-types@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/vue-types/-/vue-types-4.1.1.tgz#7d7a4e4a01249a51b6da3faa301248c2ea5f5b97"
+  integrity sha512-Jq2GZ/w6rExJbLA/h7nHBFLciu+YNekgox0DB64wN1snZ4IIJMq+qnqp1/vE4fc7vEjZcP5KGhLzkkSjIHLRzw==
+  dependencies:
+    is-plain-object "5.0.0"
+
 vue@^3.2.31:
   version "3.2.31"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"
@@ -9634,10 +9669,10 @@ ws@~8.2.3:
   resolved "https://registry.npmmirror.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
   integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
 
-xlsx@^0.18.3:
-  version "0.18.3"
-  resolved "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.3.tgz#03a95a1082b0ac436afa0fcbc50adb98ee4b288e"
-  integrity sha512-iNBdKSJO11bI59C/dJjYWfR2gglRUrbWtDK9YoKKvu+RA1dinyWU3XXc0BaZUoSYFkxvPrO/9dwBGu6mhVNVGQ==
+xlsx@^0.18.4:
+  version "0.18.4"
+  resolved "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.4.tgz#eae7df428d6eb6a57cf595ee1fff6df95cc0a43d"
+  integrity sha512-u2plLVR/Ju2NxByPcWuxW3eOHEE/EH8w0vDyvHx8pFa8qO3fpq+l/57msr/Eq4cY5LErFOFD4sp4jIyPd6nFzQ==
   dependencies:
     adler-32 "~1.3.0"
     cfb "~1.2.1"