v4.5.2 (#439)

projects/app/src/pages/plugin/edit/Preview.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import ReactFlow, { Background, ReactFlowProvider, useNodesState } from 'reactflow';
+import { FlowModuleItemType, ModuleItemType } from '@fastgpt/global/core/module/type';
+import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
+import dynamic from 'next/dynamic';
+import { formatPluginIOModules } from '@fastgpt/global/core/module/utils';
+import MyModal from '@/components/MyModal';
+import { Box } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { PluginItemSchema } from '@fastgpt/global/core/plugin/type';
+import { appModule2FlowNode } from '@/utils/adapt';
+
+const nodeTypes = {
+  [FlowNodeTypeEnum.pluginModule]: dynamic(
+    () => import('@/components/core/module/Flow/components/nodes/NodePreviewPlugin')
+  )
+};
+
+const PreviewPlugin = ({
+  plugin,
+  modules,
+  onClose
+}: {
+  plugin: PluginItemSchema;
+  modules: ModuleItemType[];
+  onClose: () => void;
+}) => {
+  const { t } = useTranslation();
+  const [nodes = [], setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
+
+  useEffect(() => {
+    setNodes([
+      appModule2FlowNode({
+        item: {
+          moduleId: 'plugin',
+          flowType: FlowNodeTypeEnum.pluginModule,
+          logo: plugin.avatar,
+          name: plugin.name,
+          description: plugin.intro,
+          intro: plugin.intro,
+          ...formatPluginIOModules(plugin._id, modules)
+        }
+      })
+    ]);
+  }, [modules, plugin, setNodes]);
+
+  return (
+    <MyModal isOpen title={t('module.Preview Plugin')} onClose={onClose} isCentered>
+      <Box h={'400px'} w={'400px'}>
+        <ReactFlowProvider>
+          <ReactFlow
+            fitView
+            nodes={nodes}
+            edges={[]}
+            minZoom={0.1}
+            maxZoom={1.5}
+            nodeTypes={nodeTypes}
+            onNodesChange={onNodesChange}
+          >
+            <Background />
+          </ReactFlow>
+        </ReactFlowProvider>
+      </Box>
+    </MyModal>
+  );
+};
+
+export default React.memo(PreviewPlugin);