feat(Form): 新增Transfer、CropperAvatar、BasicTitle 组件至Form中，并添加至演示页面 (#3362)

Co-authored-by: gavin-james <meaganlindesy1258@gmail.com>

src/components/Form/src/componentMap.ts

@@ -19,6 +19,7 @@ import {
   Switch,
   TimePicker,
   TreeSelect,
+  Transfer,
 } from 'ant-design-vue';
 import ApiRadioGroup from './components/ApiRadioGroup.vue';
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
@@ -31,6 +32,8 @@ import { BasicUpload, ImageUpload } from '@/components/Upload';
 import { StrengthMeter } from '@/components/StrengthMeter';
 import { IconPicker } from '@/components/Icon';
 import { CountdownInput } from '@/components/CountDown';
+import { BasicTitle } from '@/components/Basic';
+import { CropperAvatar } from '@/components/Cropper';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -57,6 +60,7 @@ componentMap.set('ApiCascader', ApiCascader);
 componentMap.set('Cascader', Cascader);
 componentMap.set('Slider', Slider);
 componentMap.set('Rate', Rate);
+componentMap.set('Transfer', Transfer);
 componentMap.set('ApiTransfer', ApiTransfer);
 
 componentMap.set('DatePicker', DatePicker);
@@ -71,6 +75,9 @@ componentMap.set('InputCountDown', CountdownInput);
 
 componentMap.set('Upload', BasicUpload);
 componentMap.set('Divider', Divider);
+componentMap.set('CropperAvatar', CropperAvatar);
+
+componentMap.set('BasicTitle', BasicTitle);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

src/components/Form/src/components/FormItem.vue

@@ -12,7 +12,7 @@
   import type { TableActionType } from '@/components/Table';
   import { Col, Divider, Form } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
-  import { BasicHelp } from '@/components/Basic';
+  import { BasicHelp, BasicTitle } from '@/components/Basic';
   import { isBoolean, isFunction, isNull } from '@/utils/is';
   import { getSlot } from '@/utils/helper/tsxHelper';
   import {
@@ -367,6 +367,17 @@
               <Divider {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</Divider>
             </Col>
           );
+        } else if (component === 'BasicTitle') {
+          return (
+            <Form.Item
+              labelCol={labelCol}
+              wrapperCol={wrapperCol}
+              name={field}
+              class={{ 'suffix-item': !!suffix }}
+            >
+              <BasicTitle {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</BasicTitle>
+            </Form.Item>
+          );
         } else {
           const getContent = () => {
             return slot

src/components/Form/src/types/index.ts

@@ -116,4 +116,7 @@ export type ComponentType =
   | 'Slider'
   | 'Rate'
   | 'Divider'
-  | 'ApiTransfer';
+  | 'ApiTransfer'
+  | 'Transfer'
+  | 'CropperAvatar'
+  | 'BasicTitle';

src/views/demo/form/index.vue

@@ -357,6 +357,39 @@
         ],
       },
     },
+    {
+      field: 'field12',
+      component: 'BasicTitle',
+      label: '标题区分',
+      componentProps: {
+        line: true,
+        span: true,
+      },
+      colProps: {
+        span: 24,
+      },
+    },
+    {
+      field: 'field13',
+      component: 'CropperAvatar',
+      label: '头像上传',
+      colProps: {
+        span: 8,
+      },
+    },
+    {
+      field: 'field14',
+      component: 'Transfer',
+      label: '穿梭框',
+      colProps: {
+        span: 8,
+      },
+      componentProps: {
+        render: (item) => item.label,
+        dataSource: citiesOptionsData.guangdong,
+        targetKeys: ['1'],
+      },
+    },
     {
       field: 'divider-api-select',
       component: 'Divider',