perf: workflow&plugins json config import and export (#2592)

packages/web/components/common/Icon/constants.ts

@@ -5,6 +5,7 @@ export const iconPaths = {
   visible: () => import('./icons/visible.svg'),
   change: () => import('./icons/change.svg'),
   chatSend: () => import('./icons/chatSend.svg'),
+  configmap: () => import('./icons/configmap.svg'),
   closeSolid: () => import('./icons/closeSolid.svg'),
   collectionLight: () => import('./icons/collectionLight.svg'),
   collectionSolid: () => import('./icons/collectionSolid.svg'),

packages/web/components/common/MyMenu/index.tsx

@@ -23,6 +23,7 @@ export type Props = {
   trigger?: 'hover' | 'click';
   iconSize?: string;
   iconRadius?: string;
+  menuItemStyles?: MenuItemProps;
   placement?: PlacementWithLogical;
   menuList: {
     label?: string;
@@ -45,7 +46,15 @@ const MyMenu = ({
   Button,
   menuList,
   iconRadius,
-  placement = 'bottom-start'
+  placement = 'bottom-start',
+  menuItemStyles = {
+    borderRadius: 'sm',
+    py: 2,
+    px: 3,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 'sm'
+  }
 }: Props) => {
   const typeMapStyle: Record<MenuItemType, MenuItemProps> = {
     primary: {
@@ -75,14 +84,6 @@ const MyMenu = ({
       }
     }
   };
-  const menuItemStyles: MenuItemProps = {
-    borderRadius: 'sm',
-    py: 2,
-    px: 3,
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 'sm'
-  };
 
   const { isPc } = useSystem();
   const ref = useRef<HTMLDivElement>(null);
@@ -167,7 +168,7 @@ const MyMenu = ({
                   <MenuItem
                     key={index}
                     {...menuItemStyles}
-                    onClickCapture={(e) => {
+                    onClick={(e) => {
                       e.stopPropagation();
                       setIsOpen(false);
                       child.onClick && child.onClick();
@@ -185,12 +186,16 @@ const MyMenu = ({
                         mr={3}
                       />
                     )}
-                    <Box>
-                      <Box color={child.description ? 'myGray.900' : 'inherit'} fontSize={'sm'}>
+                    <Box w={'100%'}>
+                      <Box
+                        w={'100%'}
+                        color={child.description ? 'myGray.900' : 'inherit'}
+                        fontSize={'sm'}
+                      >
                         {child.label}
                       </Box>
                       {child.description && (
-                        <Box color={'myGray.500'} fontSize={'mini'}>
+                        <Box color={'myGray.500'} fontSize={'mini'} w={'100%'}>
                           {child.description}
                         </Box>
                       )}

packages/web/i18n/en/app.json

@@ -48,6 +48,7 @@
   "export_config_successful": "Config copied, please check for important data",
   "export_configs": "Export Configs",
   "feedback_count": "User Feedback",
+  "file_recover": "The file will overwrite the current content",
   "file_upload": "file_upload",
   "file_upload_tip": "After it is enabled, you can upload documents/pictures. Documents are kept for 7 days and pictures for 15 days. Use of this feature may incur additional charges. To ensure the user experience, select an AI model with a large context length when using this function.",
   "go_to_chat": "To chat",
@@ -56,6 +57,7 @@
   "image_upload_tip": "Be sure to select a visual model that can handle the picture",
   "import_configs": "Import Configs",
   "import_configs_failed": "Failed to import configs, please ensure configs are valid!",
+  "import_configs_success": "Import successful",
   "interval": {
     "12_hours": "every 12 hours",
     "2_hours": "every 2 hours",
@@ -86,6 +88,8 @@
   },
   "move_app": "Move app",
   "no": "no",
+  "not_json_file": "Please select a JSON file",
+  "or_drag_JSON": "Or drag in a JSON file",
   "paste_config": "Paste Config",
   "plugin_cost_per_times": "{{cost}}/per time",
   "plugin_dispatch": "Plugins",

packages/web/i18n/en/common.json

@@ -227,6 +227,7 @@
     "confirm": {
       "Common Tip": "Operation confirmation"
     },
+    "copy_to_clipboard": "copy to clipboard",
     "course": {
       "Read Course": "Read course"
     },
@@ -238,6 +239,7 @@
       "too_many_request": "Too many requests, please try again later.",
       "unKnow": "An unexpected error occurred~"
     },
+    "export_to_json": "Export to JSON",
     "failed": "fail",
     "folder": {
       "Drag Tip": "Drag me",
@@ -257,6 +259,7 @@
     "jsonEditor": {
       "Parse error": "JSON may be incorrect, please check carefully"
     },
+    "json_config": "JSON configuration",
     "link": {
       "UnValid": "Invalid link"
     },
@@ -289,6 +292,7 @@
     },
     "undo_tip": "unde ctrl z",
     "undo_tip_mac": "undo  ⌘  z  ",
+    "upload_file": "Upload files",
     "zoomin_tip": "zoomIn  ctrl  -",
     "zoomin_tip_mac": "zoomIn ⌘  -",
     "zoomout_tip": "zoomOut  ctrl  +",

packages/web/i18n/zh/app.json

@@ -48,6 +48,7 @@
   "export_config_successful": "已复制配置，自动过滤部分敏感信息，请注意检查是否仍有敏感数据",
   "export_configs": "导出配置",
   "feedback_count": "用户反馈",
+  "file_recover": "文件将覆盖当前内容",
   "file_upload": "文件上传",
   "file_upload_tip": "开启后，可以上传文档/图片。文档保留7天，图片保留15天。使用该功能可能产生较多额外费用。为保证使用体验，使用该功能时，请选择上下文长度较大的AI模型。",
   "go_to_chat": "去对话",
@@ -56,6 +57,7 @@
   "image_upload_tip": "请确保选择可处理图片的视觉模型",
   "import_configs": "导入配置",
   "import_configs_failed": "导入配置失败，请确保配置正常！",
+  "import_configs_success": "导入成功",
   "interval": {
     "12_hours": "每12小时",
     "2_hours": "每2小时",
@@ -85,7 +87,9 @@
     "unit": "号"
   },
   "move_app": "移动应用",
+  "not_json_file": "请选择JSON文件",
   "paste_config": "粘贴配置",
+  "or_drag_JSON": "或拖入JSON文件",
   "plugin_cost_per_times": "{{cost}}/次",
   "plugin_dispatch": "插件调用",
   "plugin_dispatch_tip": "给模型附加额外的能力，具体调用哪些插件，将由模型自主决定。\n若选择了插件，知识库调用将自动作为一个特殊的插件。",

packages/web/i18n/zh/common.json

@@ -112,6 +112,7 @@
   "common": {
     "Action": "操作",
     "Add": "添加",
+    "copy_to_clipboard": "复制到剪贴板",
     "Add New": "新增",
     "Add Success": "添加成功",
     "All": "全部",
@@ -122,6 +123,7 @@
     "Confirm": "确认",
     "Confirm Create": "确认创建",
     "Confirm Import": "确认导入",
+    "export_to_json": "导出为 JSON",
     "Confirm Move": "移动到这",
     "Confirm Update": "确认更新",
     "Confirm to leave the page": "确认离开该页面？",
@@ -193,6 +195,7 @@
     "Save Success": "保存成功",
     "Save_and_exit": "保存并退出",
     "Search": "搜索",
+    "json_config": "JSON 配置",
     "Select File Failed": "选择文件异常",
     "Select template": "选择模板",
     "Set Avatar": "点击设置头像",
@@ -289,6 +292,7 @@
     },
     "undo_tip": "撤销  ctrl  z",
     "undo_tip_mac": "撤销  ⌘  z ",
+    "upload_file": "上传文件",
     "zoomin_tip": "缩小  ctrl  -",
     "zoomin_tip_mac": "缩小  ⌘  -",
     "zoomout_tip": "放大  ctrl  +",

projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx

@@ -14,6 +14,9 @@ import { useCopyData } from '@/web/common/hooks/useCopyData';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyTag from '@fastgpt/web/components/common/Tag/index';
 import { publishStatusStyle } from '../constants';
+import MyPopover from '@fastgpt/web/components/common/MyPopover';
+import { fileDownload } from '@/web/common/file/utils';
+import { AppChatConfigType } from '@fastgpt/global/core/app/type';
 
 const ImportSettings = dynamic(() => import('./Flow/ImportSettings'));
 
@@ -26,32 +29,16 @@ const AppCard = ({
 }) => {
   const { t } = useTranslation();
   const { appT } = useI18n();
-  const { copyData } = useCopyData();
   const { feConfigs } = useSystemStore();
 
   const { appDetail, onOpenInfoEdit, onOpenTeamTagModal, onDelApp, currentTab } =
     useContextSelector(AppContext, (v) => v);
-  const { historiesDefaultData, flowData2StoreDataAndCheck, onSaveWorkflow, isSaving } =
-    useContextSelector(WorkflowContext, (v) => v);
+  const { historiesDefaultData, onSaveWorkflow, isSaving } = useContextSelector(
+    WorkflowContext,
+    (v) => v
+  );
 
   const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
-  const onExportWorkflow = useCallback(async () => {
-    const data = flowData2StoreDataAndCheck();
-    if (data) {
-      copyData(
-        JSON.stringify(
-          {
-            nodes: filterSensitiveNodesData(data.nodes),
-            edges: data.edges,
-            chatConfig: appDetail.chatConfig
-          },
-          null,
-          2
-        ),
-        appT('export_config_successful')
-      );
-    }
-  }, [appDetail.chatConfig, appT, copyData, flowData2StoreDataAndCheck]);
 
   const InfoMenu = useCallback(
     ({ children }: { children: React.ReactNode }) => {
@@ -84,9 +71,11 @@ const AppCard = ({
                         onClick: onOpenImport
                       },
                       {
-                        label: appT('export_configs'),
-                        icon: 'export',
-                        onClick: onExportWorkflow
+                        label: ExportPopover({
+                          chatConfig: appDetail.chatConfig,
+                          appName: appDetail.name
+                        }),
+                        onClick: () => {}
                       }
                     ]
                   }
@@ -124,14 +113,15 @@ const AppCard = ({
       );
     },
     [
+      appDetail.chatConfig,
+      appDetail.name,
       appDetail.permission.hasWritePer,
       appDetail.permission.isOwner,
       appT,
       currentTab,
       feConfigs?.show_team_chat,
       historiesDefaultData,
       onDelApp,
-      onExportWorkflow,
       onOpenImport,
       onOpenInfoEdit,
       onOpenTeamTagModal,
@@ -192,4 +182,98 @@ const AppCard = ({
   return Render;
 };
 
+function ExportPopover({
+  chatConfig,
+  appName
+}: {
+  chatConfig: AppChatConfigType;
+  appName: string;
+}) {
+  const { t } = useTranslation();
+  const { copyData } = useCopyData();
+  const { flowData2StoreDataAndCheck } = useContextSelector(WorkflowContext, (v) => v);
+  const data = flowData2StoreDataAndCheck();
+  const onExportWorkflow = useCallback(async () => {
+    const data = flowData2StoreDataAndCheck();
+    if (data) {
+      copyData(
+        JSON.stringify(
+          {
+            nodes: filterSensitiveNodesData(data.nodes),
+            edges: data.edges,
+            chatConfig: chatConfig
+          },
+          null,
+          2
+        ),
+        t('app:export_config_successful')
+      );
+    }
+  }, [chatConfig, copyData, flowData2StoreDataAndCheck, t]);
+
+  return (
+    <MyPopover
+      placement={'right-start'}
+      offset={[-5, 20]}
+      hasArrow={false}
+      trigger={'hover'}
+      w={'8.6rem'}
+      Trigger={
+        <Flex align={'center'} w={'100%'}>
+          <Avatar src={'export'} borderRadius={'sm'} w={'1rem'} mr={3} />
+          {t('app:export_configs')}
+        </Flex>
+      }
+    >
+      {({ onClose }) => (
+        <Box p={1}>
+          <Flex
+            py={'0.38rem'}
+            px={1}
+            color={'myGray.600'}
+            _hover={{
+              bg: 'myGray.05',
+              color: 'primary.600'
+            }}
+            borderRadius={'xs'}
+            onClick={onExportWorkflow}
+          >
+            <MyIcon name={'copy'} w={'1rem'} mr={2} />
+            <Box fontSize={'mini'}>{t('common:common.copy_to_clipboard')}</Box>
+          </Flex>
+          <Flex
+            py={'0.38rem'}
+            px={1}
+            color={'myGray.600'}
+            _hover={{
+              bg: 'myGray.05',
+              color: 'primary.600'
+            }}
+            borderRadius={'xs'}
+            onClick={() => {
+              if (!data) return;
+              fileDownload({
+                text: JSON.stringify(
+                  {
+                    nodes: filterSensitiveNodesData(data.nodes),
+                    edges: data.edges,
+                    chatConfig: chatConfig
+                  },
+                  null,
+                  2
+                ),
+                type: 'application/json;charset=utf-8',
+                filename: `${appName}.json`
+              });
+            }}
+          >
+            <MyIcon name={'configmap'} w={'1rem'} mr={2} />
+            <Box fontSize={'mini'}>{t('common:common.export_to_json')}</Box>
+          </Flex>
+        </Box>
+      )}
+    </MyPopover>
+  );
+}
+
 export default AppCard;