feat: refactor plugin module

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api7-dashboard/plugin",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "@api7-dashboard/plugin",
   "repository": {
     "type": "git",
@@ -25,6 +25,7 @@
   "dependencies": {
     "@rjsf/antd": "^2.3.0",
     "@rjsf/core": "^2.3.0",
+    "@uiw/react-codemirror": "^3.0.1",
     "json-schema": "^0.2.5",
     "set-value": "^3.0.2"
   },

packages/plugin/src/CodeMirrorDrawer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Drawer } from 'antd';
+import CodeMirror from '@uiw/react-codemirror';
+
+type Props = {
+  visiable: boolean;
+  data: object;
+  onClose(): void
+};
+
+const CodeMirrorDrawer: React.FC<Props> = ({ visiable, data = {}, onClose }) => {
+  return (
+    <Drawer visible={visiable} width={500} onClose={onClose}>
+      <CodeMirror
+        value={JSON.stringify(data)}
+        options={{
+          mode: 'json-ld',
+          readonly: true
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default CodeMirrorDrawer;

packages/plugin/src/PluginDrawer.tsx

@@ -1,91 +1,67 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Drawer, Button } from 'antd';
 import { withTheme, FormProps } from '@rjsf/core';
 import { JSONSchema7 } from 'json-schema';
 // @ts-ignore
 import { Theme as AntDTheme } from '@rjsf/antd';
 
-interface Props {
+type Props = {
   name?: string;
   initialData: any;
-  active?: boolean;
-  disabled?: boolean;
   schema: JSONSchema7;
-  onActive(name: string): void;
-  onInactive(name: string): void;
+  readonly?: boolean;
   onClose(): void;
   onFinish(values: any): void;
-}
+};
+
+const PluginForm = withTheme(AntDTheme);
 
 const PluginDrawer: React.FC<Props> = ({
   name,
-  active,
-  disabled,
   schema,
   initialData,
-  onActive,
-  onInactive,
+  readonly,
   onClose,
   onFinish,
 }) => {
-  const PluginForm = withTheme(AntDTheme);
-
   if (!name) {
     return null;
   }
 
-  // NOTE: 用于作为 PluginForm 的引用
-  let form: any;
-
+  const form = useRef<any>(null);
   return (
     <Drawer
       title={`配置 ${name} 插件`}
-      width={400}
+      width={500}
       visible={Boolean(name)}
       destroyOnClose
       onClose={onClose}
       footer={
-        disabled ? null : (
+        !readonly && (
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div>
-              {Boolean(active) && (
-                <Button type="primary" danger onClick={() => onInactive(name)}>
-                  禁用
-                </Button>
-              )}
-              {Boolean(!active) && (
-                <Button type="primary" onClick={() => onActive(name)}>
-                  启用
-                </Button>
-              )}
-            </div>
-            {Boolean(active) && (
-              <div>
-                <Button onClick={onClose}>取消</Button>
-                <Button
-                  type="primary"
-                  style={{ marginRight: 8, marginLeft: 8 }}
-                  onClick={() => {
-                    form.submit();
-                  }}
-                >
-                  确认
-                </Button>
-              </div>
-            )}
+            <Button onClick={onClose}>取消</Button>
+            <Button
+              type="primary"
+              style={{ marginRight: 8, marginLeft: 8 }}
+              onClick={() => {
+                form.current?.submit();
+              }}
+            >
+              确认
+            </Button>
           </div>
         )
       }
     >
       <PluginForm
         schema={schema}
         liveValidate
-        disabled={disabled || !active}
         formData={initialData}
         showErrorList={false}
+        disabled={readonly}
         // @ts-ignore
         ref={(_form: FormProps<any>) => {
-          form = _form;
+          form.current = _form;
         }}
         onSubmit={({ formData }) => {
           onFinish(formData);