From 23bcf4f61b8d4c0fe243b477d068eea7d89141c9 Mon Sep 17 00:00:00 2001
From: chenminjie <943130926@qq.com>
Date: Tue, 26 Nov 2024 06:07:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=E7=A0=81=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除未使用的 Verify 验证码组件及其相关文件
- 在组件适配器中添加自定义表单组件的注册支持
- 扩展 ComponentType 类型以支持自定义组件类型
---
 apps/web-antd/src/adapter/component/index.ts  |  10 +-
 .../src/components/Verification/index.ts      |   1 -
 .../components/Verification/src/Verify.vue    | 162 ------------------
 .../components/description/description.vue    |  77 +++++++++
 .../src/components/description/index.ts       |   2 +
 .../src/components/description/types.d.ts     |  54 ++++++
 .../src/components/form/component-map.ts      |  37 ++++
 .../form/components/api-checkbox-group.vue    | 137 +++++++++++++++
 .../components/form/components/api-dict.vue   |  53 ++++++
 .../form/components/api-radio-group.vue       | 143 ++++++++++++++++
 .../components/form/components/api-select.vue | 150 ++++++++++++++++
 .../form/components/api-tree-select.vue       | 140 +++++++++++++++
 apps/web-antd/src/components/form/index.ts    |   5 +
 .../src/components/form/types/index.d.ts      |   6 +
 .../src/components/view/component-map.ts      |  27 +++
 .../view/components/api-checkbox-group.vue    |   6 +
 .../components/view/components/api-dict.vue   |  64 +++++++
 .../view/components/api-radio-group.vue       |   6 +
 .../components/view/components/api-select.vue | 154 +++++++++++++++++
 .../view/components/api-tree-select.vue       |  95 ++++++++++
 20 files changed, 1165 insertions(+), 164 deletions(-)
 delete mode 100644 apps/web-antd/src/components/Verification/index.ts
 delete mode 100644 apps/web-antd/src/components/Verification/src/Verify.vue
 create mode 100644 apps/web-antd/src/components/description/description.vue
 create mode 100644 apps/web-antd/src/components/description/index.ts
 create mode 100644 apps/web-antd/src/components/description/types.d.ts
 create mode 100644 apps/web-antd/src/components/form/component-map.ts
 create mode 100644 apps/web-antd/src/components/form/components/api-checkbox-group.vue
 create mode 100644 apps/web-antd/src/components/form/components/api-dict.vue
 create mode 100644 apps/web-antd/src/components/form/components/api-radio-group.vue
 create mode 100644 apps/web-antd/src/components/form/components/api-select.vue
 create mode 100644 apps/web-antd/src/components/form/components/api-tree-select.vue
 create mode 100644 apps/web-antd/src/components/form/index.ts
 create mode 100644 apps/web-antd/src/components/form/types/index.d.ts
 create mode 100644 apps/web-antd/src/components/view/component-map.ts
 create mode 100644 apps/web-antd/src/components/view/components/api-checkbox-group.vue
 create mode 100644 apps/web-antd/src/components/view/components/api-dict.vue
 create mode 100644 apps/web-antd/src/components/view/components/api-radio-group.vue
 create mode 100644 apps/web-antd/src/components/view/components/api-select.vue
 create mode 100644 apps/web-antd/src/components/view/components/api-tree-select.vue

diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index 1afa6217..9e102896 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -5,6 +5,8 @@
 
 import type { BaseFormComponentType } from '@vben/common-ui';
 
+import type { CustomComponentType } from '#/components/form/types';
+
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
@@ -36,6 +38,8 @@ import {
   Upload,
 } from 'ant-design-vue';
 
+import { registerComponent as registerCustomFormComponent } from '#/components/form/component-map';
+
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
@@ -70,7 +74,8 @@ export type ComponentType =
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
-  | BaseFormComponentType;
+  | BaseFormComponentType
+  | CustomComponentType;
 
 async function initComponentAdapter() {
   const components: Partial<Record<ComponentType, Component>> = {
@@ -108,6 +113,9 @@ async function initComponentAdapter() {
     Upload,
   };
 
+  // 注册自定义组件
+  registerCustomFormComponent(components);
+
   // 将组件注册到全局共享状态中
   globalShareState.setComponents(components);
 
diff --git a/apps/web-antd/src/components/Verification/index.ts b/apps/web-antd/src/components/Verification/index.ts
deleted file mode 100644
index 0d53aa67..00000000
--- a/apps/web-antd/src/components/Verification/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Verify } from './src/Verify.vue';
diff --git a/apps/web-antd/src/components/Verification/src/Verify.vue b/apps/web-antd/src/components/Verification/src/Verify.vue
deleted file mode 100644
index 53199c6e..00000000
--- a/apps/web-antd/src/components/Verification/src/Verify.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script type="text/babel">
-/**
- * Verify 验证码组件
- * @description 分发验证码使用
- */
-import { computed, ref, toRefs, watchEffect } from 'vue';
-
-// import { $t } from '@vben/locales';
-
-import VerifyPoints from './Verify/VerifyPoints.vue';
-import VerifySlide from './Verify/VerifySlide.vue';
-
-import './style/verify.css';
-
-export default {
-  name: 'Vue3Verify',
-  components: {
-    VerifyPoints,
-    VerifySlide,
-  },
-  props: {
-    arith: {
-      default: 0,
-      type: Number,
-    },
-    barSize: {
-      default: () => {
-        return {
-          height: '40px',
-          width: '310px',
-        };
-      },
-      type: Object,
-    },
-    blockSize: {
-      default() {
-        return {
-          height: '50px',
-          width: '50px',
-        };
-      },
-      type: Object,
-    },
-    captchaType: {
-      required: true,
-      type: String,
-    },
-    explain: {
-      default: '',
-      type: String,
-    },
-    figure: {
-      default: 0,
-      type: Number,
-    },
-    imgSize: {
-      default() {
-        return {
-          height: '155px',
-          width: '310px',
-        };
-      },
-      type: Object,
-    },
-    mode: {
-      default: 'pop',
-      type: String,
-    },
-    vSpace: {
-      default: 5,
-      type: Number,
-    },
-  },
-  setup(props) {
-    const { captchaType, mode } = toRefs(props);
-    const clickShow = ref(false);
-    const verifyType = ref(undefined);
-    const componentType = ref(undefined);
-
-    const instance = ref({});
-
-    const showBox = computed(() => {
-      return mode.value === 'pop' ? clickShow.value : true;
-    });
-    /**
-     * refresh
-     * @description 刷新
-     */
-    const refresh = () => {
-      if (instance.value.refresh) instance.value.refresh();
-    };
-    const closeBox = () => {
-      clickShow.value = false;
-      refresh();
-    };
-    const show = () => {
-      if (mode.value === 'pop') clickShow.value = true;
-    };
-    watchEffect(() => {
-      switch (captchaType.value) {
-        case 'blockPuzzle': {
-          verifyType.value = '2';
-          componentType.value = 'VerifySlide';
-          break;
-        }
-        case 'clickWord': {
-          verifyType.value = '';
-          componentType.value = 'VerifyPoints';
-          break;
-        }
-      }
-    });
-
-    return {
-      clickShow,
-      closeBox,
-      componentType,
-      instance,
-      show,
-      showBox,
-      verifyType,
-    };
-  },
-};
-</script>
-
-<template>
-  <div v-show="showBox" :class="mode === 'pop' ? 'mask' : ''">
-    <div
-      :class="mode === 'pop' ? 'verifybox' : ''"
-      :style="{ 'max-width': `${parseInt(imgSize.width) + 20}px` }"
-    >
-      <div v-if="mode === 'pop'" class="verifybox-top">
-        请完成安全验证
-        <span class="verifybox-close" @click="closeBox">
-          <i class="iconfont icon-close"></i>
-        </span>
-      </div>
-      <div
-        :style="{ padding: mode === 'pop' ? '10px' : '0' }"
-        class="verifybox-bottom"
-      >
-        <!-- 验证码容器 -->
-        <component
-          :is="componentType"
-          v-if="componentType"
-          ref="instance"
-          :arith="arith"
-          :bar-size="barSize"
-          :block-size="blockSize"
-          :captcha-type="captchaType"
-          :explain="explain"
-          :figure="figure"
-          :img-size="imgSize"
-          :mode="mode"
-          :type="verifyType"
-          :v-space="vSpace"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
new file mode 100644
index 00000000..ec5e220e
--- /dev/null
+++ b/apps/web-antd/src/components/description/description.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { DescItem } from './types';
+
+import type { PropType } from 'vue';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+import { componentMap } from '#/components/view/component-map';
+
+defineProps({
+  title: { type: String, default: '' },
+  bordered: { type: Boolean, default: true },
+  size: {
+    type: String as PropType<'default' | 'middle' | 'small'>,
+    default: undefined,
+  },
+  column: {
+    type: [Number, Object],
+    default: () => {
+      // return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
+      return 12;
+    },
+  },
+  labelStyle: {
+    type: Object,
+    default() {
+      return {
+        width: '120px',
+      };
+    },
+  },
+  contentStyle: {
+    type: Object,
+    default() {
+      return {
+        width: '0px',
+      };
+    },
+  },
+  schema: {
+    type: Array as PropType<DescItem[]>,
+    default: () => [],
+  },
+  data: { type: Object, default: undefined },
+});
+</script>
+<template>
+  <Descriptions
+    :bordered="bordered"
+    :column="column"
+    :content-style="contentStyle"
+    :label-style="labelStyle"
+    :size="size"
+    :title="title ? title : undefined"
+  >
+    <template v-for="item in schema" :key="item.field">
+      <DescriptionsItem :label="item.label" :span="item.span">
+        <component
+          :is="(componentMap as Map<String, any>).get(item.component)"
+          v-if="(componentMap as Map<String, any>).has(item.component)"
+          :value="data?.[item.field]"
+          v-bind="{ ...item.componentProps }"
+        />
+        <component
+          :is="item.render(data?.[item.field], data)"
+          v-else-if="
+            !(componentMap as Map<String, any>).has(item.component) &&
+            item.render
+          "
+          :value="data?.[item.field]"
+          v-bind="{ ...item.componentProps }"
+        />
+        <template v-else>{{ data?.[item.field] }}</template>
+      </DescriptionsItem>
+    </template>
+  </Descriptions>
+</template>
diff --git a/apps/web-antd/src/components/description/index.ts b/apps/web-antd/src/components/description/index.ts
new file mode 100644
index 00000000..745e7550
--- /dev/null
+++ b/apps/web-antd/src/components/description/index.ts
@@ -0,0 +1,2 @@
+export { default as Description } from './description.vue';
+export type * from './types';
diff --git a/apps/web-antd/src/components/description/types.d.ts b/apps/web-antd/src/components/description/types.d.ts
new file mode 100644
index 00000000..c5120b8e
--- /dev/null
+++ b/apps/web-antd/src/components/description/types.d.ts
@@ -0,0 +1,54 @@
+import type { CollapseContainerOptions } from '@/components/Container';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+
+import type { CSSProperties, VNode } from 'vue';
+
+export interface DescItem {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties;
+  field: string;
+  label: JSX.Element | string | VNode;
+  // Merge column
+  span?: number;
+  show?: (...arg: any) => boolean;
+  // render
+  render?: (
+    val: any,
+    data: Recordable,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+  component: string;
+  componentProps?: any;
+  children?: DescItem[];
+}
+
+export interface DescriptionProps extends DescriptionsProps {
+  // Whether to include the collapse component
+  useCollapse?: boolean;
+  /**
+   * item configuration
+   * @type DescItem
+   */
+  schema: DescItem[];
+  /**
+   * 数据
+   * @type object
+   */
+  data: Recordable;
+  /**
+   * Built-in CollapseContainer component configuration
+   * @type CollapseContainerOptions
+   */
+  collapseOptions?: CollapseContainerOptions;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}
+
+export type Register = (descInstance: DescInstance) => void;
+
+/**
+ * @description:
+ */
+export type UseDescReturnType = [Register, DescInstance];
diff --git a/apps/web-antd/src/components/form/component-map.ts b/apps/web-antd/src/components/form/component-map.ts
new file mode 100644
index 00000000..e4f66445
--- /dev/null
+++ b/apps/web-antd/src/components/form/component-map.ts
@@ -0,0 +1,37 @@
+import type { CustomComponentType } from './types';
+
+import type { Component } from 'vue';
+
+import { kebabToCamelCase } from '@vben/utils';
+
+const componentMap = new Map<CustomComponentType | string, Component>();
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./components/**/*.vue', { eager: true });
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  if (!key.includes('-ignore')) {
+    const mod = (modules as any)[key].default || {};
+    // ./components/ApiDict.vue
+    // 获取ApiDict
+    const compName = key.replace('./components/', '').replace('.vue', '');
+    componentMap.set(kebabToCamelCase(compName), mod);
+  }
+});
+
+export function add(compName: string, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: string) {
+  componentMap.delete(compName);
+}
+/**
+ * 注册组件
+ * @param components
+ */
+export const registerComponent = (components: any) => {
+  componentMap.forEach((value, key) => {
+    components[key] = value as Component;
+  });
+};
+export { componentMap };
diff --git a/apps/web-antd/src/components/form/components/api-checkbox-group.vue b/apps/web-antd/src/components/form/components/api-checkbox-group.vue
new file mode 100644
index 00000000..1ef81da2
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-checkbox-group.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { CheckboxValueType } from 'ant-design-vue/es/checkbox/interface';
+
+import { computed, type PropType, ref, watch, watchEffect } from 'vue';
+
+import { getNestedValue, isFunction } from '@vben/utils';
+
+import { objectOmit, useVModel } from '@vueuse/core';
+import { CheckboxGroup, Spin } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+type OptionsItem = { disabled?: boolean; label: string; value: string };
+const props = defineProps({
+  value: {
+    type: [Array] as PropType<CheckboxValueType[]>,
+    default: undefined,
+  },
+  numberToString: {
+    type: Boolean,
+    default: false,
+  },
+  api: {
+    type: [Function, String] as PropType<
+      (arg?: any) => Promise<OptionsItem[]> | String
+    >,
+    default: null,
+  },
+  // api params
+  params: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  requestMethod: {
+    // 请求方法
+    type: String,
+    default: 'post',
+  },
+  // support xxx.xxx.xx
+  resultField: {
+    type: String,
+    default: '',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits(['update:value', 'optionsChange']);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+const options = ref<OptionsItem[]>([]);
+const loading = ref(false);
+const isFirstLoad = ref(true);
+const getOptions = computed(() => {
+  const { labelField, valueField, numberToString } = props;
+  const res: OptionsItem[] = [];
+  options.value.forEach((item: any) => {
+    const value = item[valueField];
+    res.push({
+      ...objectOmit(item, [labelField, valueField]),
+      label: item[labelField],
+      value: numberToString ? `${value}` : value,
+      disabled: item.disabled || false,
+    });
+  });
+  return res;
+});
+
+const fetch = async () => {
+  const api: any =
+    typeof props.api === 'string' && props.api
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : props.api;
+  if (!api || !isFunction(api)) return;
+  try {
+    loading.value = true;
+    const params =
+      props.requestMethod === 'get' ? { params: props.params } : props.params;
+    const res = await api(params);
+    if (Array.isArray(res)) {
+      options.value = res;
+      emits('optionsChange', options.value);
+    } else {
+      options.value = props.resultField
+        ? getNestedValue(res, props.resultField)
+        : [];
+      emits('optionsChange', options.value);
+    }
+  } catch (error) {
+    console.warn(error);
+  } finally {
+    loading.value = false;
+  }
+};
+watchEffect(() => {
+  props.immediate && fetch();
+});
+
+watch(
+  () => props.params,
+  () => {
+    !isFirstLoad.value && fetch();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <Spin :spinning="loading" style="margin-left: 20px">
+    <CheckboxGroup
+      v-bind="$attrs"
+      v-model:value="mValue"
+      :options="getOptions"
+      class="w-full"
+    >
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </CheckboxGroup>
+  </Spin>
+</template>
diff --git a/apps/web-antd/src/components/form/components/api-dict.vue b/apps/web-antd/src/components/form/components/api-dict.vue
new file mode 100644
index 00000000..6b9f80db
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-dict.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+
+import { requestClient } from '#/api/request';
+
+import { ApiCheckboxGroup, ApiRadioGroup, ApiSelect } from '..';
+
+type OptionsItem = { disabled?: boolean; label: string; value: string };
+
+const props = defineProps({
+  renderType: {
+    type: String as PropType<'CheckboxGroup' | 'RadioGroup' | 'Select'>,
+    default: 'Select',
+  },
+  api: {
+    type: [Function, String] as PropType<
+      (arg?: any) => Promise<OptionsItem[]> | String
+    >,
+    default: null,
+  },
+  requestMethod: {
+    // 请求方法
+    type: String,
+    default: 'post',
+  },
+  // api params
+  params: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  code: {
+    type: String,
+    default: undefined,
+  },
+});
+const DictComponent = computed(() => {
+  if (props.renderType === 'RadioGroup') {
+    return ApiRadioGroup;
+  } else if (props.renderType === 'CheckboxGroup') {
+    return ApiCheckboxGroup;
+  }
+  return ApiSelect;
+});
+const fetch = () => {
+  return requestClient.post('/sys/dict/getByDictType', {
+    dictType: props.code,
+    ...props.params,
+  });
+};
+</script>
+<template>
+  <DictComponent :api="props.code ? fetch : props.api" />
+</template>
diff --git a/apps/web-antd/src/components/form/components/api-radio-group.vue b/apps/web-antd/src/components/form/components/api-radio-group.vue
new file mode 100644
index 00000000..d87e7445
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-radio-group.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import { computed, type PropType, ref, watch, watchEffect } from 'vue';
+
+import { getNestedValue, isFunction } from '@vben/utils';
+
+import { objectOmit, useVModel } from '@vueuse/core';
+import { RadioGroup, Spin } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+type OptionsItem = { disabled?: boolean; label: string; value: string };
+const props = defineProps({
+  value: {
+    type: [String, Number, Array] as PropType<SelectValue>,
+    default: undefined,
+  },
+  numberToString: {
+    type: Boolean,
+    default: false,
+  },
+  api: {
+    type: [Function, String] as PropType<
+      (arg?: any) => Promise<OptionsItem[]> | String
+    >,
+    default: null,
+  },
+  requestMethod: {
+    // 请求方法
+    type: String,
+    default: 'post',
+  },
+  // api params
+  params: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  // support xxx.xxx.xx
+  resultField: {
+    type: String,
+    default: '',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+  isBtn: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['update:value', 'optionsChange']);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+const options = ref<OptionsItem[]>([]);
+const loading = ref(false);
+const isFirstLoad = ref(true);
+const getOptions = computed(() => {
+  const { labelField, valueField, numberToString } = props;
+  const res: OptionsItem[] = [];
+  options.value.forEach((item: any) => {
+    const value = item[valueField];
+    res.push({
+      ...objectOmit(item, [labelField, valueField]),
+      label: item[labelField],
+      value: numberToString ? `${value}` : value,
+      disabled: item.disabled || false,
+    });
+  });
+  return res;
+});
+
+const fetch = async () => {
+  const api: any =
+    typeof props.api === 'string' && props.api
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : props.api;
+  if (!api || !isFunction(api)) return;
+  try {
+    loading.value = true;
+    const params =
+      props.requestMethod === 'get' ? { params: props.params } : props.params;
+    const res = await api(params);
+    if (Array.isArray(res)) {
+      options.value = res;
+      emits('optionsChange', options.value);
+    } else {
+      options.value = props.resultField
+        ? getNestedValue(res, props.resultField)
+        : [];
+      emits('optionsChange', options.value);
+    }
+  } catch (error) {
+    console.warn(error);
+  } finally {
+    loading.value = false;
+  }
+};
+watchEffect(() => {
+  props.immediate && fetch();
+});
+
+watch(
+  () => props.params,
+  () => {
+    !isFirstLoad.value && fetch();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <Spin :spinning="loading" style="margin-left: 20px">
+    <RadioGroup
+      v-bind="$attrs"
+      v-model:value="mValue"
+      :button-style="isBtn ? 'solid' : 'outline'"
+      :option-type="isBtn ? 'button' : 'default'"
+      :options="getOptions"
+      class="w-full"
+    >
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </RadioGroup>
+  </Spin>
+</template>
diff --git a/apps/web-antd/src/components/form/components/api-select.vue b/apps/web-antd/src/components/form/components/api-select.vue
new file mode 100644
index 00000000..4e6f1772
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-select.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import { computed, type PropType, ref, watch, watchEffect } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { getNestedValue, isFunction } from '@vben/utils';
+
+import { objectOmit, useVModel } from '@vueuse/core';
+import { Select } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+type OptionsItem = { disabled?: boolean; label: string; value: string };
+const props = defineProps({
+  value: {
+    type: [String, Number, Array] as PropType<SelectValue>,
+    default: undefined,
+  },
+  numberToString: {
+    type: Boolean,
+    default: false,
+  },
+  api: {
+    type: [Function, String] as PropType<
+      (arg?: any) => Promise<OptionsItem[]> | String
+    >,
+    default: null,
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+  // api params
+  params: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  // support xxx.xxx.xx
+  resultField: {
+    type: String,
+    default: '',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits(['update:value', 'optionsChange']);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+const options = ref<OptionsItem[]>([]);
+const loading = ref(false);
+const isFirstLoad = ref(true);
+const getOptions = computed(() => {
+  const { labelField, valueField, numberToString } = props;
+  const res: OptionsItem[] = [];
+  options.value.forEach((item: any) => {
+    const value = item[valueField];
+    res.push({
+      ...objectOmit(item, [labelField, valueField]),
+      label: item[labelField],
+      value: numberToString ? `${value}` : value,
+      disabled: item.disabled || false,
+    });
+  });
+  return res;
+});
+
+const fetch = async () => {
+  const api: any =
+    typeof props.api === 'string' && props.api
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : props.api;
+  if (!api || !isFunction(api)) return;
+  try {
+    loading.value = true;
+    const params =
+      props.requestMethod === 'get' ? { params: props.params } : props.params;
+    const res = await api(params);
+    if (Array.isArray(res)) {
+      options.value = res;
+      emits('optionsChange', options.value);
+    } else {
+      options.value = props.resultField
+        ? getNestedValue(res, props.resultField)
+        : [];
+      emits('optionsChange', options.value);
+    }
+  } catch (error) {
+    console.warn(error);
+  } finally {
+    loading.value = false;
+  }
+};
+async function handleFetch() {
+  if (!props.immediate && isFirstLoad.value) {
+    await fetch();
+    isFirstLoad.value = false;
+  }
+}
+watchEffect(() => {
+  props.immediate && fetch();
+});
+
+watch(
+  () => props.params,
+  () => {
+    !isFirstLoad.value && fetch();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <Select
+    v-model:value="mValue"
+    :options="getOptions"
+    class="w-full"
+    @dropdown-visible-change="handleFetch"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loading" #suffixIcon>
+      <IconifyIcon icon="ant-design:loading-outlined" spin />
+    </template>
+    <template v-if="loading" #notFoundContent>
+      <span>
+        <IconifyIcon icon="ant-design:loading-outlined" spin />
+        请等待数据加载完成
+      </span>
+    </template>
+  </Select>
+</template>
diff --git a/apps/web-antd/src/components/form/components/api-tree-select.vue b/apps/web-antd/src/components/form/components/api-tree-select.vue
new file mode 100644
index 00000000..776ce772
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-tree-select.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import { computed, type PropType, ref, watch, watchEffect } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { getNestedValue, isFunction } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { TreeSelect } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+const props = defineProps({
+  value: {
+    type: [String, Number, Array] as PropType<SelectValue>,
+    default: undefined,
+  },
+  api: {
+    type: [Function, String] as PropType<(arg?: any) => Promise<any> | String>,
+    default: null,
+  },
+  requestMethod: {
+    // 请求方法
+    type: String,
+    default: 'post',
+  },
+  // api params
+  params: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  // support xxx.xxx.xx
+  resultField: {
+    type: String,
+    default: '',
+  },
+  labelField: {
+    type: String,
+    default: 'title',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  childrenField: {
+    type: String,
+    default: 'children',
+  },
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits(['update:value', 'treeDataChange']);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+const treeData = ref<any>([]);
+const loading = ref(false);
+const isFirstLoad = ref(true);
+const fieldNames = computed(() => {
+  return {
+    label: props.labelField,
+    value: props.valueField,
+    children: props.childrenField,
+  };
+});
+const getTreeData = computed(() => {
+  return treeData.value;
+});
+
+const fetch = async () => {
+  const api: any =
+    typeof props.api === 'string' && props.api
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : props.api;
+  if (!api || !isFunction(api)) return;
+  try {
+    loading.value = true;
+    const params =
+      props.requestMethod === 'get' ? { params: props.params } : props.params;
+    const res = await api(params);
+    if (Array.isArray(res)) {
+      treeData.value = res;
+      emits('treeDataChange', treeData.value);
+    } else {
+      treeData.value = props.resultField
+        ? getNestedValue(res, props.resultField)
+        : [];
+      emits('treeDataChange', treeData.value);
+    }
+  } catch (error) {
+    console.warn(error);
+  } finally {
+    loading.value = false;
+  }
+};
+async function handleFetch() {
+  if (!props.immediate && isFirstLoad.value) {
+    await fetch();
+    isFirstLoad.value = false;
+  }
+}
+watchEffect(() => {
+  props.immediate && fetch();
+});
+
+watch(
+  () => props.params,
+  () => {
+    !isFirstLoad.value && fetch();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <TreeSelect
+    v-model:value="mValue"
+    :field-names="fieldNames"
+    :tree-data="getTreeData"
+    :tree-node-filter-prop="labelField"
+    class="w-full"
+    @dropdown-visible-change="handleFetch"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loading" #suffixIcon>
+      <IconifyIcon icon="ant-design:loading-outlined" spin />
+    </template>
+  </TreeSelect>
+</template>
diff --git a/apps/web-antd/src/components/form/index.ts b/apps/web-antd/src/components/form/index.ts
new file mode 100644
index 00000000..750820af
--- /dev/null
+++ b/apps/web-antd/src/components/form/index.ts
@@ -0,0 +1,5 @@
+export { default as ApiCheckboxGroup } from './components/api-checkbox-group.vue';
+export { default as ApiDict } from './components/api-dict.vue';
+export { default as ApiRadioGroup } from './components/api-radio-group.vue';
+export { default as ApiSelect } from './components/api-select.vue';
+export { default as ApiTreeSelect } from './components/api-tree-select.vue';
diff --git a/apps/web-antd/src/components/form/types/index.d.ts b/apps/web-antd/src/components/form/types/index.d.ts
new file mode 100644
index 00000000..e60e17e0
--- /dev/null
+++ b/apps/web-antd/src/components/form/types/index.d.ts
@@ -0,0 +1,6 @@
+export type CustomComponentType =
+  | 'ApiCheckboxGroup'
+  | 'ApiDict'
+  | 'ApiRadioGroup'
+  | 'ApiSelect'
+  | 'ApiTreeSelect';
diff --git a/apps/web-antd/src/components/view/component-map.ts b/apps/web-antd/src/components/view/component-map.ts
new file mode 100644
index 00000000..f0a1b2a8
--- /dev/null
+++ b/apps/web-antd/src/components/view/component-map.ts
@@ -0,0 +1,27 @@
+import type { Component } from 'vue';
+
+import { toPascalCase } from '#/util/tool';
+
+const componentMap = new Map<string, Component>();
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./components/**/*.vue', { eager: true });
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  if (!key.includes('-ignore')) {
+    const mod = (modules as any)[key].default || {};
+    // ./components/ApiDict.vue
+    // 获取ApiDict
+    const compName = key.replace('./components/', '').replace('.vue', '');
+    componentMap.set(toPascalCase(compName), mod);
+  }
+});
+
+export function add(compName: string, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: string) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };
diff --git a/apps/web-antd/src/components/view/components/api-checkbox-group.vue b/apps/web-antd/src/components/view/components/api-checkbox-group.vue
new file mode 100644
index 00000000..dbca93f9
--- /dev/null
+++ b/apps/web-antd/src/components/view/components/api-checkbox-group.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ApiSelect from './api-select.vue';
+</script>
+<template>
+  <ApiSelect />
+</template>
diff --git a/apps/web-antd/src/components/view/components/api-dict.vue b/apps/web-antd/src/components/view/components/api-dict.vue
new file mode 100644
index 00000000..d4ec0df6
--- /dev/null
+++ b/apps/web-antd/src/components/view/components/api-dict.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { type DictItem, useDictStore } from '@vben/stores';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: undefined,
+  },
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  split: {
+    // 分割符
+    type: String,
+    default: ',',
+  },
+  join: {
+    // 连接符
+    type: String,
+    default: ',',
+  },
+});
+const dictStore = useDictStore();
+const cValue = computed(() => {
+  if (!props.value && props.value !== 0) {
+    return '';
+  }
+  const arr: Array<any> = [];
+  if (Array.isArray(props.value)) {
+    arr.push(...props.value);
+  } else {
+    arr.push(...props.value.toString().split(props.split));
+  }
+  const dictData = dictStore.getDictData(props.code as string) as DictItem[];
+  const res: Array<any> = [];
+  arr.forEach((item) => {
+    for (let i = 0; i < dictData.length; i++) {
+      if (dictData[i]?.value?.toString() === item?.toString()) {
+        res.push(dictData[i]?.label);
+        break;
+      }
+      if (i === dictData.length - 1) {
+        res.push(item);
+      }
+    }
+  });
+
+  return res.join(props.join);
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>
diff --git a/apps/web-antd/src/components/view/components/api-radio-group.vue b/apps/web-antd/src/components/view/components/api-radio-group.vue
new file mode 100644
index 00000000..dbca93f9
--- /dev/null
+++ b/apps/web-antd/src/components/view/components/api-radio-group.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ApiSelect from './api-select.vue';
+</script>
+<template>
+  <ApiSelect />
+</template>
diff --git a/apps/web-antd/src/components/view/components/api-select.vue b/apps/web-antd/src/components/view/components/api-select.vue
new file mode 100644
index 00000000..de417747
--- /dev/null
+++ b/apps/web-antd/src/components/view/components/api-select.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, onMounted, type PropType, watch } from 'vue';
+
+import { type DictItem, useDictStore } from '@vben/stores';
+
+import { requestClient } from '#/api/request';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: undefined,
+  },
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  split: {
+    // 分割符
+    type: String,
+    default: ',',
+  },
+  join: {
+    // 连接符
+    type: String,
+    default: ',',
+  },
+  api: {
+    // 接口请求对象
+    type: [Function, String] as PropType<
+      ((...arg: any) => Promise<any>) | String
+    >,
+    default() {
+      return () => {
+        return new Promise((resolve) => {
+          resolve([]);
+        });
+      };
+    },
+  },
+  params: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cacheKey: {
+    type: String,
+    default: '',
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+});
+const dictStore = useDictStore();
+/**
+ * 获取包含的id
+ */
+const getIncludeIds = () => {
+  if (!props.value && props.value !== 0) {
+    return [];
+  }
+  const arr: Array<any> = [];
+  if (Array.isArray(props.value)) {
+    arr.push(...props.value);
+  } else {
+    arr.push(...props.value.toString().split(props.split));
+  }
+  return arr;
+};
+/**
+ * 获取缓存key
+ */
+const getCacheKey = () => {
+  let cacheKey = props.cacheKey;
+  if (typeof props.api === 'string' && !cacheKey) {
+    cacheKey = props.api as string;
+  }
+  return cacheKey;
+};
+const cValue = computed(() => {
+  if (!props.value && props.value !== 0) {
+    return '';
+  }
+  const arr: Array<any> = getIncludeIds();
+  const cacheKey = getCacheKey();
+  const dictData = dictStore.getDictData(cacheKey) as DictItem[];
+  const res: Array<any> = [];
+  arr.forEach((item) => {
+    for (let i = 0; i < dictData.length; i++) {
+      if (dictData[i]?.value?.toString() === item?.toString()) {
+        res.push(dictData[i]?.label);
+        break;
+      }
+      if (i === dictData.length - 1) {
+        res.push(item);
+      }
+    }
+  });
+
+  return res.join(props.join);
+});
+const requestData = () => {
+  const api: (...arg: any) => Promise<any> =
+    typeof props.api === 'string'
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : (props.api as (...arg: any) => Promise<any>);
+  const cacheKey = getCacheKey();
+  const params =
+    props.requestMethod === 'get'
+      ? {
+          params: {
+            ...props.params,
+            dictType: cacheKey,
+            includeType: 2,
+            includeIds: getIncludeIds(),
+          },
+        }
+      : {
+          data: {
+            ...props.params,
+            dictType: cacheKey,
+            includeType: 2,
+            includeIds: getIncludeIds(),
+          },
+        };
+  dictStore.setDictCacheByApi(api, params);
+};
+onMounted(() => {
+  requestData();
+});
+watch(
+  () => props.value,
+  () => {
+    requestData();
+  },
+);
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>
diff --git a/apps/web-antd/src/components/view/components/api-tree-select.vue b/apps/web-antd/src/components/view/components/api-tree-select.vue
new file mode 100644
index 00000000..c581a06e
--- /dev/null
+++ b/apps/web-antd/src/components/view/components/api-tree-select.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, onMounted, type PropType, ref } from 'vue';
+
+import { requestClient } from '#/api/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  api: {
+    // 接口请求对象
+    type: [Function, String] as PropType<
+      ((...arg: any) => Promise<any>) | String
+    >,
+    default() {
+      return () => {
+        return new Promise((resolve) => {
+          resolve([]);
+        });
+      };
+    },
+  },
+  params: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cacheKey: {
+    type: String,
+    default: '',
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+  valueField: {
+    type: String,
+    default: 'id',
+  },
+  labelField: {
+    type: String,
+    default: 'name',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+const currentData = ref({});
+const cValue = computed(() => {
+  return (currentData.value as any)[props.labelField] || props.value;
+});
+onMounted(() => {
+  const api: (...arg: any) => Promise<any> =
+    typeof props.api === 'string'
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : (props.api as (...arg: any) => Promise<any>);
+  const searchType = props.multiple ? 'IN' : 'EQ';
+  const params =
+    props.requestMethod === 'get'
+      ? {
+          params: {
+            ...props.params,
+            [`m_${searchType}_${props.valueField}`]: props.value,
+          },
+        }
+      : {
+          ...props.params,
+          [`m_${searchType}_${props.valueField}`]: props.value,
+        };
+  api(params).then((res) => {
+    if (res.length > 0) {
+      currentData.value = res[0];
+    }
+  });
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>