Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-admin",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "用于实现一个后台管理系统的必要组件",
   "scripts": {
     "init": "husky",

src/components/Apis/getApis.js

@@ -245,6 +245,26 @@ const getApis = options => {
         url: `${prefix}/tenant/admin/append-args`,
         method: 'POST'
       },
+      appendCustomComponent: {
+        url: `${prefix}/tenant/admin/append-custom-component`,
+        method: 'POST'
+      },
+      removeCustomComponent: {
+        url: `${prefix}/tenant/admin/remove-custom-component`,
+        method: 'POST'
+      },
+      saveCustomComponent: {
+        url: `${prefix}/tenant/admin/save-custom-component`,
+        method: 'POST'
+      },
+      copyCustomComponent: {
+        url: `${prefix}/tenant/admin/copy-custom-component`,
+        method: 'POST'
+      },
+      customComponentDetail: {
+        url: `${prefix}/tenant/admin/custom-component-detail`,
+        method: 'GET'
+      },
       removeArg: {
         url: `${prefix}/tenant/admin/remove-arg`,
         method: 'POST'
@@ -350,7 +370,11 @@ const getApis = options => {
       userInviteMessage: {
         url: `${prefix}/tenant/send-invite-message`,
         method: 'POST'
-      }
+      },
+      customComponentDetail: {
+        url: `${prefix}/tenant/custom-component-detail`,
+        method: 'GET'
+      },
     }
   };
 };

src/components/TenantAdmin/TabDetail/Setting/index.js

@@ -1,15 +1,63 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { Flex, Button, App } from 'antd';
+import { useState, forwardRef, useImperativeHandle } from 'react';
+import style from './style.module.scss';
+
+const LiveComponent = createWithRemoteLoader({
+  modules: ['components-thirdparty:LiveComponentEditor']
+})(
+  forwardRef(({ remoteModules, defaultValue }, ref) => {
+    const [LiveComponentEditor] = remoteModules;
+    const [value, setValue] = useState(defaultValue || '');
+    useImperativeHandle(ref, () => {
+      return {
+        getValue: () => value
+      };
+    });
+    return (
+      <Flex vertical gap={8}>
+        <LiveComponentEditor onChange={setValue} defaultValue={value} />
+      </Flex>
+    );
+  })
+);
+
+const CustomComponentFormInner = createWithRemoteLoader({
+  modules: ['components-core:FormInfo']
+})(({ remoteModules, isEdit }) => {
+  const [FormInfo] = remoteModules;
+  const { Input, TextArea } = FormInfo.fields;
+
+  return (
+    <FormInfo
+      column={1}
+      list={[
+        <Input name="key" label="KEY" rule="REQ LEN-0-100" disabled={isEdit}/>,
+        <Input name="name" label="名称" rule="REQ LEN-0-100" />,
+        <Input name="type" label="类型" rule="REQ LEN-0-100" />,
+        <TextArea name="description" label="描述" rule="LEN-0-500" />
+      ]}
+    />
+  );
+});
 
 const Setting = createWithRemoteLoader({
-  modules: ['components-core:Global@usePreset', 'components-core:Table', 'components-core:FormInfo']
+  modules: [
+    'components-core:Global@usePreset',
+    'components-core:Table',
+    'components-core:FormInfo',
+    'components-core:Modal@useModal',
+    'components-core:Modal@ModalButton',
+    'components-thirdparty:LiveComponentView'
+  ]
 })(({ remoteModules, tenant, reload }) => {
-  const [usePreset, Table, FormInfo] = remoteModules;
+  const [usePreset, Table, FormInfo, useModal, ModalButton, LiveComponentView] = remoteModules;
   const { apis, ajax } = usePreset();
-  const { useFormModal, TableList } = FormInfo;
+  const { useFormModal, TableList, Form } = FormInfo;
   const { Input, Switch } = FormInfo.fields;
   const formModal = useFormModal();
   const { message } = App.useApp();
+  const modal = useModal();
   const formInner = (
     <TableList
       title="环境变量"
@@ -65,7 +113,7 @@ const Setting = createWithRemoteLoader({
         columns={[
           {
             name: 'key',
-            title: '键'
+            title: 'KEY'
           },
           {
             name: 'value',
@@ -108,16 +156,195 @@ const Setting = createWithRemoteLoader({
           }
         ]}
       />
-      {/*<Flex justify="space-between">
+      <Flex justify="space-between">
         <div></div>
         <Flex gap={8}>
-          <Button type="primary" onClick={() => {
+          <Button
+            type="primary"
+            onClick={() => {
+              const modalApi = modal({
+                title: '添加自定义组件',
+                size: 'large',
+                wrapClassName: style['modal-wrap'],
+                classNames: {
+                  wrapper: style['modal-wrap']
+                },
+                children: ({ childrenRef }) => <LiveComponent ref={childrenRef} />,
+                onConfirm: async (e, { childrenRef }) => {
+                  const content = childrenRef.current.getValue();
+                  formModal({
+                    title: '添加自定义组件',
+                    size: 'small',
+                    formProps: {
+                      onSubmit: async formData => {
+                        const { data: resData } = await ajax(
+                          Object.assign({}, apis.tenantAdmin.appendCustomComponent, {
+                            data: {
+                              tenantId: tenant.id,
+                              customComponent: Object.assign({}, formData, {
+                                content
+                              })
+                            }
+                          })
+                        );
 
-          }}>
+                        if (resData.code !== 0) {
+                          return false;
+                        }
+                        message.success('添加成功');
+                        modalApi.close();
+                        reload();
+                      }
+                    },
+                    children: <CustomComponentFormInner />
+                  });
+                  return false;
+                }
+              });
+            }}>
             添加自定义组件
           </Button>
         </Flex>
-      </Flex>*/}
+      </Flex>
+      <Table
+        rowKey="key"
+        dataSource={customComponents}
+        columns={[
+          {
+            name: 'key',
+            title: 'KEY'
+          },
+          {
+            name: 'name',
+            title: '名称'
+          },
+          {
+            name: 'type',
+            title: '类型'
+          },
+          {
+            name: 'description',
+            title: '描述',
+            type: 'description'
+          },
+          {
+            name: 'options',
+            type: 'options',
+            title: '操作',
+            valueOf: item => {
+              return [
+                {
+                  buttonComponent: ModalButton,
+                  children: '预览',
+                  api: Object.assign({}, apis.tenantAdmin.customComponentDetail, {
+                    params: {
+                      tenantId: tenant.id,
+                      key: item.key
+                    }
+                  }),
+                  modalProps: ({ data }) => {
+                    return {
+                      title: '预览',
+                      footer: null,
+                      children: (
+                        <Form>
+                          <LiveComponentView content={data.content} />
+                        </Form>
+                      )
+                    };
+                  }
+                },
+                {
+                  buttonComponent: ModalButton,
+                  children: '编辑',
+                  api: Object.assign({}, apis.tenantAdmin.customComponentDetail, {
+                    params: {
+                      tenantId: tenant.id,
+                      key: item.key
+                    }
+                  }),
+                  modalProps: ({ data, close }) => {
+                    return {
+                      title: '编辑',
+                      size: 'large',
+                      children: ({ childrenRef }) => <LiveComponent defaultValue={data.content} ref={childrenRef} />,
+                      onConfirm: (e, { childrenRef }) => {
+                        const content = childrenRef.current.getValue();
+                        formModal({
+                          title: '编辑自定义组件',
+                          size: 'small',
+                          formProps: {
+                            data: Object.assign({}, item),
+                            onSubmit: async formData => {
+                              const { data: resData } = await ajax(
+                                Object.assign({}, apis.tenantAdmin.saveCustomComponent, {
+                                  data: {
+                                    tenantId: tenant.id,
+                                    customComponent: Object.assign({}, formData, {
+                                      key: item.key,
+                                      content
+                                    })
+                                  }
+                                })
+                              );
+
+                              if (resData.code !== 0) {
+                                return false;
+                              }
+                              message.success('修改');
+                              close();
+                              reload();
+                            }
+                          },
+                          children: <CustomComponentFormInner isEdit />
+                        });
+                        return false;
+                      }
+                    };
+                  }
+                },
+                {
+                  children: '复制',
+                  onClick: async () => {
+                    const { data: resData } = await ajax(
+                      Object.assign({}, apis.tenantAdmin.copyCustomComponent, {
+                        data: {
+                          tenantId: tenant.id,
+                          key: item.key
+                        }
+                      })
+                    );
+                    if (resData.code !== 0) {
+                      return;
+                    }
+                    message.success('复制成功');
+                    reload();
+                  }
+                },
+                {
+                  children: '删除',
+                  confirm: true,
+                  onClick: async () => {
+                    const { data: resData } = await ajax(
+                      Object.assign({}, apis.tenantAdmin.removeCustomComponent, {
+                        data: {
+                          tenantId: tenant.id,
+                          key: item.key
+                        }
+                      })
+                    );
+                    if (resData.code !== 0) {
+                      return;
+                    }
+                    message.success('删除成功');
+                    reload();
+                  }
+                }
+              ];
+            }
+          }
+        ]}
+      />
     </Flex>
   );
 });

src/components/TenantAdmin/TabDetail/Setting/style.module.scss

@@ -0,0 +1,7 @@
+.modal-wrap {
+  :global {
+    .modal-body-inner {
+      padding-top: 0;
+    }
+  }
+}

src/preset.js

@@ -90,6 +90,13 @@ export const globalInit = async () => {
         remote: 'components-iconfont',
         defaultVersion: '0.1.8'
       },
+      'components-thirdparty': {
+        ...registry,
+        //url: 'http://localhost:3010',
+        //tpl: '{{url}}',
+        remote: 'components-thirdparty',
+        defaultVersion: '0.1.2'
+      },
       'components-admin':
         process.env.NODE_ENV === 'development'
           ? {