fix: 添加form组件

src/components/Form/src/componentMap.ts

@@ -36,6 +36,7 @@ import PlainText from './components/PlainText.vue';
 import Cron from './components/Cron.vue';
 import FormColorPicker from './components/FormColorPicker.vue';
 import InputNumberGroup from './components/InputNumberGroup.vue';
+import RadioDescGroup from './components/RadioDescGroup.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -55,6 +56,7 @@ componentMap.set('ApiTreeSelect', ApiTreeSelect);
 componentMap.set('ApiRadioGroup', ApiRadioGroup);
 componentMap.set('Switch', Switch);
 componentMap.set('RadioButtonGroup', RadioButtonGroup);
+componentMap.set('RadioDescGroup', RadioDescGroup);
 componentMap.set('TextEditor', TextEditor);
 componentMap.set('PlainText', PlainText);
 componentMap.set('Cron', Cron);

src/components/Form/src/components/RadioDescGroup.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
+-->
+<template>
+  <RadioGroup
+    v-bind="attrs"
+    v-model:value="state"
+    :class="['radio-desc', getOptions.length > 3 ? 'justify-between' : 'justify-start']"
+    size="small"
+  >
+    <template v-for="item in getOptions" :key="`${item.value}`">
+      <RadioButton :value="item.value" :disabled="item.disabled" class="radio-desc_item">
+        {{ item.label }}
+      </RadioButton>
+    </template>
+  </RadioGroup>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+  import { Radio } from 'ant-design-vue';
+  import { isString } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
+  type RadioItem = string | OptionsItem;
+
+  export default defineComponent({
+    name: 'RadioDescGroup',
+    components: {
+      RadioGroup: Radio.Group,
+      RadioButton: Radio.Button,
+      // eslint-disable-next-line vue/no-unused-components
+      Radio: Radio,
+    },
+    props: {
+      value: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      },
+      options: {
+        type: Array as PropType<RadioItem[]>,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const attrs = useAttrs();
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props);
+
+      // Processing options value
+      const getOptions = computed((): OptionsItem[] => {
+        const { options } = props;
+        if (!options || options?.length === 0) return [];
+
+        const isStringArr = options.some(item => isString(item));
+        if (!isStringArr) return options as OptionsItem[];
+
+        return options.map(item => ({ label: item, value: item })) as OptionsItem[];
+      });
+
+      return { state, getOptions, attrs };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .radio-desc.justify-start {
+    .radio-desc_item {
+      margin-right: 16px;
+      background-color: #f4f6f9;
+    }
+  }
+</style>

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

@@ -120,4 +120,5 @@ export type ComponentType =
   | 'PlainTitle'
   | 'FormColorPicker'
   | 'InputNumberGroup'
+  | 'RadioDescGroup'
   | 'Cron';