feat(all): 新增JSON预览、编辑组件

package.json

@@ -68,6 +68,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
+    "react-json-view": "^1.21.3",
     "react-quill": "^2.0.0",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.21.2",
@@ -145,5 +146,11 @@
       }
     ],
     "scopes": []
+  },
+  "overrides": {
+    "react-json-view": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
   }
 }

packages/editor/src/config/components.tsx

@@ -42,6 +42,7 @@ import IconFormTextArea from './icons/IconFormTextArea';
 import IconDescriptions from './icons/IconDescriptions';
 import IconButton from './icons/IconButton';
 import IconRate from './icons/IconRate';
+import IconJson from './icons/IconJson';
 import IconGridForm from './icons/IconGridForm';
 import IconColorPicker from './icons/IconColorPicker';
 import IconSearchForm from './icons/IconSearcFrom';
@@ -293,6 +294,11 @@ const components = [
         name: '评分',
         type: 'Rate',
       },
+      {
+        icon: <IconJson />,
+        name: 'Json',
+        type: 'Json',
+      },
     ],
   },
   {

packages/editor/src/config/icons/IconJson.tsx

@@ -0,0 +1,14 @@
+const IconJson = (props: any) => {
+  const { width = '30px', height = '30px' } = props;
+  return (
+    <svg width={width} height={height} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5649">
+      <path
+        d="M384 190.976V128h-5.76c-20.032 0-39.424 3.968-58.176 11.84a149.12 149.12 0 0 0-49.6 33.92 142.72 142.72 0 0 0-31.552 48.192v0.064a226.688 226.688 0 0 0-12.672 53.12v0.128a389.12 389.12 0 0 0-1.536 55.232c0.768 18.56 1.152 37.12 1.152 55.616 0 12.992-2.56 25.152-7.488 36.608v0.064a96.256 96.256 0 0 1-48.96 50.368 88.064 88.064 0 0 1-35.712 7.36H128v62.976h5.76c12.48 0 24.32 2.56 35.584 7.744l0.064 0.064c11.392 4.992 21.056 11.776 29.12 20.352l0.128 0.128c8.32 8.32 14.912 18.24 19.648 29.76l0.064 0.128c4.992 11.52 7.488 23.552 7.488 36.224 0 18.56-0.384 37.12-1.152 55.616-0.768 18.944-0.256 37.44 1.536 55.68v0.064c2.112 18.112 6.336 35.712 12.608 52.736v0.064c6.784 17.472 17.344 33.536 31.616 48.192 14.272 14.72 30.848 26.048 49.6 33.92 18.752 7.872 38.144 11.84 58.24 11.84H384v-62.976h-5.76c-12.736 0-24.768-2.432-35.968-7.36a103.232 103.232 0 0 1-29.248-20.48 106.176 106.176 0 0 1-19.776-29.888c-4.736-11.52-7.04-23.68-7.04-36.672 0-14.592 0.192-28.992 0.704-43.008 0.512-14.592 0.512-28.8 0-42.56a296.896 296.896 0 0 0-3.52-40.96 171.648 171.648 0 0 0-10.752-38.976A146.176 146.176 0 0 0 225.408 512a146.176 146.176 0 0 0 47.232-61.12c5.12-12.288 8.64-25.152 10.752-38.528 2.112-13.44 3.264-27.072 3.52-40.96 0.512-14.08 0.512-28.288 0-42.624-0.512-14.336-0.768-28.8-0.768-43.392a94.08 94.08 0 0 1 56.128-86.656 85.12 85.12 0 0 1 36.032-7.744H384z m256 642.048V896h5.76c20.032 0 39.424-3.968 58.176-11.84 18.752-7.872 35.328-19.2 49.6-33.92 14.272-14.72 24.832-30.72 31.552-48.192v-0.064c6.4-17.024 10.56-34.752 12.672-53.12v-0.128c1.792-17.92 2.304-36.288 1.536-55.232-0.768-18.56-1.152-37.12-1.152-55.616 0-12.992 2.56-25.152 7.488-36.608v-0.064a96.256 96.256 0 0 1 48.96-50.368c11.264-4.928 23.168-7.36 35.712-7.36H896v-62.976h-5.76c-12.48 0-24.32-2.56-35.584-7.744l-0.064-0.064a88.064 88.064 0 0 1-29.12-20.352l-0.128-0.128a90.496 90.496 0 0 1-19.648-29.76l-0.064-0.128a89.92 89.92 0 0 1-7.488-36.224c0-18.56 0.384-37.12 1.152-55.616a396.16 396.16 0 0 0-1.536-55.68v-0.064a226.688 226.688 0 0 0-12.608-52.736v-0.064a142.72 142.72 0 0 0-31.616-48.192 149.12 149.12 0 0 0-49.6-33.92 148.8 148.8 0 0 0-58.24-11.84H640v62.976h5.76c12.8 0 24.704 2.432 35.968 7.36 11.136 5.248 20.864 12.032 29.248 20.48 8.128 8.576 14.72 18.56 19.776 29.888 4.736 11.52 7.04 23.68 7.04 36.672 0 14.592-0.192 28.928-0.704 43.008-0.512 14.592-0.512 28.8 0 42.56 0.256 14.208 1.408 27.84 3.52 40.96 2.112 13.696 5.696 26.624 10.752 38.976a146.048 146.048 0 0 0 47.232 61.12 146.048 146.048 0 0 0-47.232 61.12 172.8 172.8 0 0 0-10.752 38.528c-2.112 13.44-3.264 27.072-3.52 40.96-0.512 14.08-0.512 28.288 0 42.624 0.512 14.336 0.768 28.8 0.768 43.392a94.08 94.08 0 0 1-26.88 66.24 93.824 93.824 0 0 1-29.248 20.416 85.12 85.12 0 0 1-36.032 7.744H640z"
+        fill="#1296db"
+        p-id="5650"
+      ></path>
+    </svg>
+  );
+};
+
+export default IconJson;

packages/editor/src/packages/FormItems/Json/Json.tsx

@@ -0,0 +1,132 @@
+import { ComponentType } from '@/packages/types';
+import { Form, FormItemProps } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import ReactJsonView, { ReactJsonViewProps, InteractionProps } from 'react-json-view';
+import { useFormContext } from '@/packages/utils/context';
+import { isNotEmpty } from '@/packages/utils/util';
+
+export interface JsonProps extends ReactJsonViewProps {
+  placeholder?: string; // 占位符
+  disabled?: boolean; // 是否可编辑
+}
+
+/* 泛型只需要定义组件本身用到的属性，当然也可以不定义，默认为any */
+export interface IConfig {
+  defaultValue: string;
+  formItem: FormItemProps;
+  formWrap: JsonProps;
+  source: Array<{ label: string; value: any }>;
+}
+
+/**
+ * ReactJsonView并没有onChange事件，所以需要自己实现表单组件的onChange
+ * @returns 返回组件
+ */
+const JsonView = (props: JsonProps & { onChange: (v: object) => void }) => {
+  const onEdit = (e: InteractionProps) => {
+    props.onChange(e.updated_src);
+    props.onEdit && props.onEdit(e);
+  };
+  const onDelete = (e: InteractionProps) => {
+    props.onChange(e.updated_src);
+    props.onDelete && props.onDelete(e);
+  };
+  const onAdd = (e: InteractionProps) => {
+    props.onChange(e.updated_src);
+    props.onAdd && props.onAdd(e);
+  };
+
+  return (
+    <ReactJsonView
+      {...props}
+      onEdit={props.onEdit ? onEdit : false}
+      onDelete={props.onDelete ? onDelete : false}
+      onAdd={props.onAdd ? onAdd : false}
+    />
+  );
+};
+
+/**
+ *
+ * @param config 组件配置属性值
+ * @param props 系统属性值：componentid、componentname等
+ * @returns 返回组件
+ */
+const MJson = ({ id, type, config, onAdd, onEdit, onDelete }: ComponentType<IConfig>, ref: any) => {
+  const [visible, setVisible] = useState(true);
+  const [disabled, setDisabled] = useState<boolean | undefined>();
+  const { initValues } = useFormContext();
+
+  // 初始化默认值
+  useEffect(() => {
+    const name: string = config.props.formItem?.name;
+    const value = config.props.defaultValue;
+    // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
+    const jsonValue = ['string', 'number', 'boolean'].includes(value) ? value : {};
+    initValues(type, name, jsonValue);
+  }, [config.props.defaultValue]);
+
+  // 启用和禁用(是否可编辑)
+  useEffect(() => {
+    if (typeof config.props.formWrap.disabled === 'boolean') setDisabled(config.props.formWrap.disabled);
+  }, [config.props.formWrap.disabled]);
+
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+      enable() {
+        setDisabled(false);
+      },
+      disable() {
+        setDisabled(true);
+      },
+    };
+  });
+
+  const handleEdit = (e: InteractionProps) => {
+    onEdit?.({
+      [config.props.formItem.name]: e.updated_src,
+    });
+  };
+  const handleDelete = (e: InteractionProps) => {
+    onDelete?.({
+      [config.props.formItem.name]: e.updated_src,
+    });
+  };
+  const handleAdd = (e: InteractionProps) => {
+    onAdd?.({
+      [config.props.formItem.name]: e.updated_src,
+    });
+  };
+
+  const { placeholder } = config.props.formWrap || {};
+
+  return (
+    visible && (
+      <Form.Item {...config.props.formItem} data-id={id} data-type={type} valuePropName="src">
+        {!isNotEmpty(config.props.defaultValue) && disabled ? (
+          placeholder
+        ) : (
+          <JsonView
+            {...config.props.formWrap}
+            name={false}
+            style={{
+              zIndex: 9999, // 避免默认添加属性时被其他组件遮挡
+              ...config.style,
+            }}
+            onEdit={!disabled ? handleEdit : false}
+            onDelete={!disabled ? handleDelete : false}
+            onAdd={!disabled ? handleAdd : false}
+            onChange={() => {}}
+          />
+        )}
+      </Form.Item>
+    )
+  );
+};
+export default forwardRef(MJson);