wip: implement colorPicker

@@ -31,6 +31,7 @@ import ApiRadioGroup from './components/ApiRadioGroup.vue';
 //自定义组件
 import JAddInput from './externalCompns/components/JAddInput.vue';
 import { JEasyCron } from './externalCompns/components/JEasyCron';
+import ColorPicker from './components/ColorPicker.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -69,6 +70,7 @@ componentMap.set('Upload', BasicUpload);
 //注册自定义组件
 componentMap.set('JAddInput', JAddInput);
 componentMap.set('JEasyCron', JEasyCron);
+componentMap.set('ColorPicker', ColorPicker);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

@@ -112,4 +112,5 @@ export type ComponentType =
   | 'Render'
   | 'Slider'
   | 'JAddInput'
-  | 'Rate';
+  | 'Rate'
+  | 'ColorPicker';

 <script lang="ts" setup>
-  import { BasicModal } from '/@/components/Modal';
+  import { modeOne } from '../config/visualOptions';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  const [registerForm, method] = useForm({
+    schemas: modeOne,
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const [registerModal, { closeModal }] = useModalInner();
+
+  const handleGetValue = () => {
+    const value = method.getFieldsValue();
+    console.log(value);
+  };
 </script>
 
 <template>
-  <BasicModal v-bind="$attrs" title="" width="60%">
-    <section> content </section>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="" width="60%">
+    <BasicForm @register="registerForm" />
+    <button @click="handleGetValue">啊按钮</button>
   </BasicModal>
 </template>

@@ -3,10 +3,130 @@ export enum defaultOptions {
   fontColor = '#rer',
 }
 
-export const mode: FormSchema[] = [
+export enum visualOptionField {
+  FONT_COLOR = 'fontColor',
+  UNIT = 'unit',
+  ICON_COLOR = 'iconColor',
+  ICON = 'icon',
+  FIRST_PHASE_COLOR = 'firstPhaseColor',
+  SECOND_PHASE_COLOR = 'secondPhaseColor',
+  THIRD_PHASE_COLOR = 'thirdPhaseColor',
+  FOURTH_PHASE_COLOR = 'fourthPhaseColor',
+  FIRST_PHASE_VALUE = 'firstPhaseValue',
+  SECOND_PHASE_VALUE = 'secondPhaseValue',
+  THIRD_PHASE_VALUE = 'thirdPhaseValue',
+  FOURTH_PHASE_VALUE = 'fourthPhaseValue',
+}
+
+export const modeOne: FormSchema[] = [
+  {
+    field: visualOptionField.FONT_COLOR,
+    label: '数值字体颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+];
+
+export const modeTwo: FormSchema[] = [
+  {
+    field: visualOptionField.UNIT,
+    label: '数值字体颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.UNIT,
+    label: '数值单位',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入数值单位',
+    },
+  },
+  {
+    field: visualOptionField.ICON_COLOR,
+    label: '图标颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.ICON,
+    label: '图标',
+    component: 'Input',
+  },
+];
+
+export const modeThree: FormSchema[] = [
+  {
+    field: visualOptionField.FONT_COLOR,
+    label: '数值字体颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.UNIT,
+    label: '数值单位',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入数值单位',
+    },
+  },
+  {
+    field: visualOptionField.FIRST_PHASE_COLOR,
+    label: '一阶段颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.FIRST_PHASE_VALUE,
+    label: '一阶段阀值',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入一阶段阀值',
+    },
+  },
+  {
+    field: visualOptionField.SECOND_PHASE_COLOR,
+    label: '二阶段颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
   {
-    field: 'fontColor',
+    field: visualOptionField.SECOND_PHASE_VALUE,
+    label: '二阶段阀值',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入二阶段阀值',
+    },
+  },
+  {
+    field: visualOptionField.THIRD_PHASE_COLOR,
+    label: '三阶段颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.THIRD_PHASE_VALUE,
+    label: '三阶段阀值',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入三阶段阀值',
+    },
+  },
+];
+
+export const modeFour: FormSchema[] = [
+  {
+    field: visualOptionField.FONT_COLOR,
     label: '数值字体颜色',
     component: 'ColorPicker',
+    changeEvent: 'update:value',
+  },
+  {
+    field: visualOptionField.UNIT,
+    label: '数值单位',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入数值单位',
+    },
   },
 ];