feat: add color-picker component

packages/editor/src/config/components.ts

@@ -211,6 +211,11 @@ const components = [
         name: '表单项',
         type: 'FormItem',
       },
+      {
+        icon: '',
+        name: '颜色选择器',
+        type: 'ColorPicker',
+      },
     ],
   },
   {

packages/editor/src/packages/FormItems/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Form, ColorPicker, ColorPickerProps, FormItemProps } from 'antd';
+import { ComponentType } from '@/packages/types';
+import { useFormContext } from '@/packages/utils/context';
+import { Color } from 'antd/es/color-picker';
+
+/*泛型只需要定义组件本身用到的属性*/
+export interface IConfig {
+  defaultValue: string;
+  formItem: FormItemProps;
+  formWrap: ColorPickerProps;
+}
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MColorPicker = ({ id, type, config, onChange, onChangeComplete }: ComponentType<IConfig>, ref: any) => {
+  const { initValues } = useFormContext();
+  const [disabled, setDisabled] = useState<boolean | undefined>();
+  const [visible, setVisible] = useState(true);
+
+  // 初始化默认值
+  useEffect(() => {
+    const name: string = config.props.formItem?.name;
+    const value = config.props.defaultValue;
+    initValues(type, name, value);
+  }, [config.props.defaultValue]);
+
+  // 启用和禁用
+  useEffect(() => {
+    if (typeof config.props.formWrap.disabled === 'boolean') setDisabled(config.props.formWrap.disabled);
+  }, [config.props.formWrap.disabled]);
+
+  /**
+   * 颜色变化的回调
+   */
+  const handleChange = (val: string) => {
+    onChange?.({
+      [config.props.formItem.name]: val,
+    });
+  };
+
+  /**
+   * 颜色选择完成的回调
+   */
+  const handleChangeComplete = (val: string) => {
+    onChangeComplete?.({
+      [config.props.formItem.name]: val,
+    });
+  };
+
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+      enable() {
+        setDisabled(false);
+      },
+      disable() {
+        setDisabled(true);
+      },
+    };
+  });
+
+  return (
+    visible && (
+      <Form.Item {...config.props.formItem} data-id={id} data-type={type}>
+        <ColorPicker
+          {...config.props.formWrap}
+          disabled={disabled}
+          style={config.style}
+          onChange={(color) => handleChange(color.toCssString())}
+          onChangeComplete={(color) => handleChangeComplete(color.toCssString())}
+        />
+      </Form.Item>
+    )
+  );
+};
+export default forwardRef(MColorPicker);

packages/editor/src/packages/FormItems/ColorPicker/Schema.tsx

@@ -0,0 +1,226 @@
+/**
+ * 组件配置和属性值
+ */
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '标签配置',
+      key: 'formItem',
+    },
+    {
+      type: 'Input',
+      label: '标题',
+      name: ['formItem', 'label'],
+      props: {
+        placeholder: '请输入文本标题',
+      },
+    },
+    {
+      type: 'Input',
+      label: '字段',
+      name: ['formItem', 'name'],
+      props: {
+        placeholder: '请输入提交字段',
+      },
+    },
+    {
+      type: 'Variable',
+      label: '默认值',
+      name: ['defaultValue'],
+    },
+    {
+      type: 'Switch',
+      label: '隐藏域',
+      name: ['formItem', 'hidden'],
+    },
+    {
+      type: 'Input',
+      label: 'Extra',
+      name: ['formItem', 'extra'],
+      tooltip: '表单控件下方显示的提示信息',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      type: 'Input',
+      label: 'Tooltip',
+      name: ['formItem', 'tooltip'],
+      tooltip: '表单项后面显示的提示信息',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+
+    {
+      type: 'Title',
+      label: '表单配置',
+      key: 'formWrap',
+    },
+    {
+      type: 'Switch',
+      label: '允许清除',
+      name: ['formWrap', 'allowClear'],
+    },
+    {
+      type: 'Switch',
+      label: '是否禁用',
+      name: ['formWrap', 'disabled'],
+    },
+    {
+      type: 'Switch',
+      label: '禁用透明度',
+      name: ['formWrap', 'disabledAlpha'],
+    },
+    {
+      type: 'Select',
+      label: '颜色格式',
+      name: ['formWrap', 'format'],
+      props: {
+        placeholder: '请选择',
+        options: [
+          { value: 'rgb', label: 'rgb' },
+          { value: 'hex', label: 'hex' },
+          { value: 'hsb', label: 'hsb' },
+        ],
+      },
+    },
+    {
+      type: 'Select',
+      label: '单色与渐变',
+      name: ['formWrap', 'mode'],
+      props: {
+        mode: 'multiple',
+        placeholder: '请选择',
+        options: [
+          { value: 'single', label: 'single' },
+          { value: 'gradient', label: 'gradient' },
+        ],
+      },
+    },
+    {
+      type: 'Select',
+      label: '窗口位置',
+      name: ['formWrap', 'placement'],
+      props: {
+        options: [
+          { value: 'top', label: 'top' },
+          { value: 'left', label: 'left' },
+          { value: 'right', label: 'right' },
+          { value: 'bottom', label: 'bottom' },
+          { value: 'topLeft', label: 'topLeft' },
+          { value: 'topRight', label: 'topRight' },
+          { value: 'bottomLeft', label: 'bottomLeft' },
+          { value: 'bottomRight', label: 'bottomRight' },
+          { value: 'leftTop', label: 'leftTop' },
+          { value: 'leftBottom', label: 'leftBottom' },
+          { value: 'rightTop', label: 'rightTop' },
+          { value: 'rightBottom', label: 'rightBottom' },
+        ],
+      },
+    },
+    {
+      type: 'Switch',
+      label: '显示颜色文本',
+      name: ['formWrap', 'showText'],
+    },
+    {
+      type: 'Select',
+      label: '触发器大小',
+      name: ['formWrap', 'size'],
+      props: {
+        options: [
+          { value: 'large', label: 'large' },
+          { value: 'middle', label: 'middle' },
+          { value: 'small', label: 'small' },
+        ],
+      },
+    },
+    {
+      type: 'Select',
+      label: '触发方式',
+      name: ['formWrap', 'trigger'],
+      props: {
+        options: [
+          { value: 'hover', label: 'hover' },
+          { value: 'click', label: 'click' },
+        ],
+      },
+    },
+
+    {
+      type: 'Title',
+      label: '布局',
+      key: 'FormLayout',
+    },
+    {
+      type: 'InputNumber',
+      label: '标签占位',
+      name: ['formItem', 'labelCol', 'span'],
+      props: {
+        placeholder: '占位格数',
+      },
+    },
+    {
+      type: 'InputNumber',
+      label: '标签偏移',
+      name: ['formItem', 'labelCol', 'offset'],
+      props: {
+        placeholder: '偏移数',
+      },
+    },
+    {
+      type: 'InputNumber',
+      label: '控件占列',
+      name: ['formItem', 'wrapperCol', 'span'],
+      props: {
+        placeholder: '占位格数',
+      },
+    },
+    {
+      type: 'InputNumber',
+      label: '控件偏移',
+      name: ['formItem', 'wrapperCol', 'offset'],
+      props: {
+        placeholder: '偏移数',
+      },
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      formItem: {
+        label: '颜色选择器',
+        name: 'value',
+      },
+      // 组件默认属性值
+      formWrap: {
+        allowClear: false,
+        format: 'hex',
+        mode: ['single'],
+        placement: 'bottomLeft',
+        size: 'middle',
+        trigger: 'click',
+      },
+      defaultValue: '',
+    },
+    // 组件样式
+    style: {},
+    // 事件
+    events: [],
+  },
+  // 组件事件
+  events: [
+    {
+      value: 'onChange',
+      name: '颜色变化的回调',
+    },
+    {
+      value: 'onChangeComplete',
+      name: '颜色选择完成的回调',
+    },
+  ],
+  methods: [],
+};

packages/editor/src/packages/FormItems/Input/Input.tsx

@@ -15,7 +15,7 @@ export interface IConfig {
 /**
  *
  * @param config 组件配置属性值
- * @param props 系统属性值：componentid、componentname等
+ * @param props 系统属性值：componentId、componentName等
  * @returns 返回组件
  */
 const MInput = ({ id, type, config, onChange, onBlur, onPressEnter }: ComponentType<IConfig>, ref: any) => {

packages/editor/src/packages/FormItems/Select/Schema.tsx

@@ -26,6 +26,24 @@ export default {
       label: '默认值',
       name: ['defaultValue'],
     },
+    {
+      type: 'Input',
+      label: 'Extra',
+      name: ['formItem', 'extra'],
+      tooltip: '表单控件下方显示的提示信息',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      type: 'Input',
+      label: 'Tooltip',
+      name: ['formItem', 'tooltip'],
+      tooltip: '表单项后面显示的提示信息',
+      props: {
+        placeholder: '请输入',
+      },
+    },
     {
       type: 'Title',
       label: '表单配置',
@@ -74,18 +92,6 @@ export default {
       name: ['formWrap', 'labelInValue'],
       tooltip: '提交时，会把label包装到value中',
     },
-    {
-      type: 'Input',
-      label: 'Extra',
-      name: ['formItem', 'extra'],
-      tooltip: '表单控件下方显示的提示信息',
-    },
-    {
-      type: 'Input',
-      label: 'Tooltip',
-      name: ['formItem', 'tooltip'],
-      tooltip: '表单项后面显示的提示信息',
-    },
     {
       type: 'Select',
       label: '边框样式',