From 2b84533c1124b716591ec7ff6f2557776b389745 Mon Sep 17 00:00:00 2001
From: heheer <1239331448@qq.com>
Date: Fri, 10 Jan 2025 12:08:52 +0800
Subject: [PATCH] feat: create app by json

---
 packages/global/core/app/utils.ts             |  19 +
 .../web/components/common/Icon/constants.ts   |   1 +
 .../Icon/icons/core/app/type/jsonImport.svg   |  19 +
 .../common/Textarea/DragEditor/index.tsx      | 140 +++++++
 packages/web/i18n/en/app.json                 |   5 +
 packages/web/i18n/en/common.json              |   1 +
 packages/web/i18n/zh-CN/app.json              |   5 +
 packages/web/i18n/zh-CN/common.json           |   1 +
 packages/web/i18n/zh-Hant/app.json            |   5 +
 packages/web/i18n/zh-Hant/common.json         |   1 +
 .../detail/components/SimpleApp/AppCard.tsx   |  12 +
 .../components/WorkflowComponents/AppCard.tsx |  62 ++--
 .../Flow/ImportSettings.tsx                   | 125 +------
 .../Flow/nodes/NodeHttp/CurlImportModal.tsx   |  53 ++-
 .../pages/app/list/components/CreateModal.tsx | 308 +++++++++-------
 .../app/list/components/JsonImportModal.tsx   | 176 +++++++++
 .../list/components/TemplateMarketModal.tsx   |  11 +-
 projects/app/src/pages/app/list/index.tsx     |  17 +
 .../web/common/file/hooks/useSelectFile.tsx   |   1 -
 projects/app/src/web/core/app/templates.ts    | 341 ++++++++++++++++++
 projects/app/src/web/core/app/utils.ts        |   8 +
 21 files changed, 1026 insertions(+), 285 deletions(-)
 create mode 100644 packages/web/components/common/Icon/icons/core/app/type/jsonImport.svg
 create mode 100644 packages/web/components/common/Textarea/DragEditor/index.tsx
 create mode 100644 projects/app/src/pages/app/list/components/JsonImportModal.tsx

diff --git a/packages/global/core/app/utils.ts b/packages/global/core/app/utils.ts
index c574cac5f90b..61d145347d0f 100644
--- a/packages/global/core/app/utils.ts
+++ b/packages/global/core/app/utils.ts
@@ -5,6 +5,8 @@ import type { FlowNodeInputItemType } from '../workflow/type/io.d';
 import { getAppChatConfig } from '../workflow/utils';
 import { StoreNodeItemType } from '../workflow/type/node';
 import { DatasetSearchModeEnum } from '../dataset/constants';
+import { WorkflowTemplateBasicType } from 'core/workflow/type';
+import { AppTypeEnum } from './constants';
 
 export const getDefaultAppForm = (): AppSimpleEditFormType => {
   return {
@@ -127,3 +129,20 @@ export const appWorkflow2Form = ({
 
   return defaultAppForm;
 };
+
+export const getAppType = (config?: WorkflowTemplateBasicType | AppSimpleEditFormType) => {
+  if (!config) return '';
+
+  if ('aiSettings' in config) {
+    return AppTypeEnum.simple;
+  }
+
+  if (!('nodes' in config)) return '';
+  if (config.nodes.some((node) => node.flowNodeType === 'workflowStart')) {
+    return AppTypeEnum.workflow;
+  }
+  if (config.nodes.some((node) => node.flowNodeType === 'pluginInput')) {
+    return AppTypeEnum.plugin;
+  }
+  return '';
+};
diff --git a/packages/web/components/common/Icon/constants.ts b/packages/web/components/common/Icon/constants.ts
index e7e87d5cd19e..01745bf14b34 100644
--- a/packages/web/components/common/Icon/constants.ts
+++ b/packages/web/components/common/Icon/constants.ts
@@ -142,6 +142,7 @@ export const iconPaths = {
   'core/app/ttsFill': () => import('./icons/core/app/ttsFill.svg'),
   'core/app/type/httpPlugin': () => import('./icons/core/app/type/httpPlugin.svg'),
   'core/app/type/httpPluginFill': () => import('./icons/core/app/type/httpPluginFill.svg'),
+  'core/app/type/jsonImport': () => import('./icons/core/app/type/jsonImport.svg'),
   'core/app/type/plugin': () => import('./icons/core/app/type/plugin.svg'),
   'core/app/type/pluginFill': () => import('./icons/core/app/type/pluginFill.svg'),
   'core/app/type/pluginLight': () => import('./icons/core/app/type/pluginLight.svg'),
diff --git a/packages/web/components/common/Icon/icons/core/app/type/jsonImport.svg b/packages/web/components/common/Icon/icons/core/app/type/jsonImport.svg
new file mode 100644
index 000000000000..8ec2dc5847fd
--- /dev/null
+++ b/packages/web/components/common/Icon/icons/core/app/type/jsonImport.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <g clip-path="url(#clip0_16784_2993)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5271 4.37083L25.4043 8.01175C26.3626 8.91164 26.8417 9.36158 27.1828 9.89648C27.4727 10.3511 27.6882 10.849 27.8211 11.3715C27.9775 11.9863 27.9775 12.6436 27.9775 13.9582V19.4935C27.0071 19.026 25.919 18.764 24.7697 18.764C20.6828 18.764 17.3698 22.077 17.3698 26.1639C17.3698 27.502 17.7249 28.7571 18.3461 29.8401H12.1799C9.29446 29.8401 7.85176 29.8401 6.75362 29.2697C5.82822 28.789 5.07369 28.0344 4.59299 27.1091C4.02255 26.0109 4.02255 24.5682 4.02255 21.6828V10.3173C4.02255 7.43186 4.02255 5.98915 4.59299 4.89101C5.07369 3.96561 5.82822 3.21108 6.75362 2.73038C7.85176 2.15994 9.29447 2.15994 12.1799 2.15994H15.943C17.1489 2.15994 17.7519 2.15994 18.3216 2.29333C18.806 2.40673 19.2711 2.59087 19.7019 2.83981C20.2085 3.1326 20.6481 3.54535 21.5271 4.37083ZM19.1105 6.20351C18.3195 5.4451 17.924 5.0659 17.5846 5.05216C17.315 5.04124 17.0548 5.15224 16.8761 5.3544C16.6511 5.60893 16.6511 6.15685 16.6511 7.25268V8.50383C16.6511 10.1068 16.6511 10.9083 16.963 11.5205C17.2374 12.0591 17.6753 12.4969 18.2138 12.7713C18.8261 13.0833 19.6276 13.0833 21.2305 13.0833H22.6697C23.8233 13.0833 24.4001 13.0833 24.6566 12.8505C24.8602 12.6658 24.9678 12.3979 24.9487 12.1238C24.9247 11.7782 24.5084 11.379 23.6757 10.5806L19.1105 6.20351Z" fill="url(#paint0_linear_16784_2993)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5057 21.6108C23.8901 20.1169 26.0117 20.1169 26.3961 21.6108C26.6044 22.4202 27.4368 22.9007 28.2419 22.6764C29.7278 22.2624 30.7886 24.0997 29.6871 25.1796C29.0903 25.7646 29.0903 26.7258 29.6871 27.3108C30.7886 28.3907 29.7278 30.228 28.2419 29.814C27.4368 29.5897 26.6044 30.0703 26.3961 30.8796C26.0117 32.3735 23.8901 32.3735 23.5057 30.8796C23.2974 30.0703 22.4651 29.5897 21.66 29.814C20.174 30.228 19.1133 28.3907 20.2148 27.3108C20.8116 26.7258 20.8116 25.7646 20.2148 25.1796C19.1133 24.0997 20.174 22.2624 21.66 22.6764C22.4651 22.9007 23.2974 22.4202 23.5057 21.6108ZM26.8127 26.2452C26.8127 27.2734 25.9791 28.107 24.9509 28.107C23.9227 28.107 23.0891 27.2734 23.0891 26.2452C23.0891 25.217 23.9227 24.3834 24.9509 24.3834C25.9791 24.3834 26.8127 25.217 26.8127 26.2452Z" fill="url(#paint1_linear_16784_2993)"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_16784_2993" x1="17.0824" y1="2.15994" x2="17.0824" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BAC6D8"/>
+      <stop offset="1" stop-color="#9FA9C2"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_16784_2993" x1="17.0824" y1="2.15994" x2="17.0824" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BAC6D8"/>
+      <stop offset="1" stop-color="#9FA9C2"/>
+    </linearGradient>
+    <clipPath id="clip0_16784_2993">
+      <rect width="32" height="32" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/web/components/common/Textarea/DragEditor/index.tsx b/packages/web/components/common/Textarea/DragEditor/index.tsx
new file mode 100644
index 000000000000..4ad814af7144
--- /dev/null
+++ b/packages/web/components/common/Textarea/DragEditor/index.tsx
@@ -0,0 +1,140 @@
+import React, { DragEvent, useCallback, useState } from 'react';
+import { Box, Button, Flex, Textarea } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useSystem } from '../../../../hooks/useSystem';
+import MyIcon from '../../Icon';
+import { useToast } from '../../../../hooks/useToast';
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+  File?: ({ onSelect }: { onSelect: (e: File[], sign?: any) => void }) => React.JSX.Element;
+  onOpen?: () => void;
+};
+
+const DragEditor = ({ value, onChange, placeholder, rows = 16, File, onOpen }: Props) => {
+  const { t } = useTranslation();
+  const { isPc } = useSystem();
+  const { toast } = useToast();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const readJSONFile = useCallback(
+    (file: File) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (!file.name.endsWith('.json')) {
+          toast({
+            title: t('app:not_json_file'),
+            status: 'error'
+          });
+          return;
+        }
+        if (e.target) {
+          const res = JSON.parse(e.target.result as string);
+          onChange(JSON.stringify(res, null, 2));
+        }
+      };
+      reader.readAsText(file);
+    },
+    [t, toast]
+  );
+
+  const onSelectFile = useCallback(
+    async (e: File[]) => {
+      const file = e[0];
+      readJSONFile(file);
+    },
+    [readJSONFile]
+  );
+
+  const handleDrop = useCallback(
+    async (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      console.log(file);
+      readJSONFile(file);
+      setIsDragging(false);
+    },
+    [readJSONFile]
+  );
+
+  return (
+    <>
+      <Box w={['100%', '31rem']}>
+        {isDragging ? (
+          <Flex
+            align={'center'}
+            justify={'center'}
+            w={'full'}
+            h={'17.5rem'}
+            borderRadius={'md'}
+            border={'1px dashed'}
+            borderColor={'myGray.400'}
+            onDragEnter={handleDragEnter}
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={handleDrop}
+            onDragLeave={handleDragLeave}
+          >
+            <Flex align={'center'} justify={'center'} flexDir={'column'} gap={'0.62rem'}>
+              <MyIcon name={'configmap'} w={'1.5rem'} color={'myGray.500'} />
+              <Box color={'myGray.600'} fontSize={'mini'}>
+                {t('app:file_recover')}
+              </Box>
+            </Flex>
+          </Flex>
+        ) : (
+          <Box>
+            <Flex justify={'space-between'} align={'center'} pb={2}>
+              <Box fontSize={'sm'} color={'myGray.900'} fontWeight={'500'}>
+                {t('common:common.json_config')}
+              </Box>
+              <Button onClick={onOpen} variant={'whiteBase'} p={0}>
+                <Flex px={'0.88rem'} py={'0.44rem'} color={'myGray.600'} fontSize={'mini'}>
+                  <MyIcon name={'file/uploadFile'} w={'1rem'} mr={'0.38rem'} />
+                  {t('common:common.upload_file')}
+                </Flex>
+              </Button>
+            </Flex>
+            <Box
+              onDragEnter={handleDragEnter}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={handleDrop}
+              onDragLeave={handleDragLeave}
+            >
+              <Textarea
+                bg={'myGray.50'}
+                border={'1px solid'}
+                borderRadius={'md'}
+                borderColor={'myGray.200'}
+                value={value}
+                placeholder={
+                  placeholder ||
+                  (isPc
+                    ? t('app:paste_config') + '\n' + t('app:or_drag_JSON')
+                    : t('app:paste_config'))
+                }
+                rows={rows}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </Box>
+          </Box>
+        )}
+      </Box>
+      {File && <File onSelect={onSelectFile} />}
+    </>
+  );
+};
+
+export default React.memo(DragEditor);
diff --git a/packages/web/i18n/en/app.json b/packages/web/i18n/en/app.json
index d206af376447..e0445df335a8 100644
--- a/packages/web/i18n/en/app.json
+++ b/packages/web/i18n/en/app.json
@@ -69,6 +69,7 @@
   "interval.6_hours": "Every 6 Hours",
   "interval.per_hour": "Every Hour",
   "intro": "A comprehensive model application orchestration system that offers out-of-the-box data processing and model invocation capabilities. It allows for rapid Dataset construction and workflow orchestration through Flow visualization, enabling complex Dataset scenarios!",
+  "invalid_json_format": "JSON format error",
   "llm_not_support_vision": "This model does not support image recognition",
   "llm_use_vision": "Vision",
   "llm_use_vision_tip": "After clicking on the model selection, you can see whether the model supports image recognition and the ability to control whether to start image recognition. \nAfter starting image recognition, the model will read the image content in the file link, and if the user question is less than 500 words, it will automatically parse the image in the user question.",
@@ -94,6 +95,7 @@
   "open_vision_function_tip": "Models with icon switches have image recognition capabilities. \nAfter being turned on, the model will parse the pictures in the file link and automatically parse the pictures in the user's question (user question ≤ 500 words).",
   "or_drag_JSON": "or drag in JSON file",
   "paste_config": "Paste Configuration",
+  "paste_config_or_drag": "Paste config or drag JSON file here",
   "permission.des.manage": "Based on write permissions, you can configure publishing channels, view conversation logs, and assign permissions to the application.",
   "permission.des.read": "Use the app to have conversations",
   "permission.des.write": "Can view and edit apps",
@@ -150,9 +152,12 @@
   "type.Create workflow bot": "Create Workflow",
   "type.Create workflow tip": "Build complex multi-turn dialogue AI applications through low-code methods, recommended for advanced users.",
   "type.Http plugin": "HTTP Plugin",
+  "type.Import from json": "Import JSON",
+  "type.Import from json tip": "Create an application with corresponding properties by  importing a JSON file",
   "type.Plugin": "Plugin",
   "type.Simple bot": "Simple App",
   "type.Workflow bot": "Workflow",
+  "type_not_recognized": "App type not recognized",
   "upload_file_max_amount": "Maximum File Quantity",
   "upload_file_max_amount_tip": "Maximum number of files uploaded in a single round of conversation",
   "variable.select type_desc": "You can define a global variable that does not need to be filled in by the user.\n\nThe value of this variable can come from the API interface, the Query of the shared link, or assigned through the [Variable Update] module.",
diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json
index f36a3ea8aa3f..79e04a16253c 100644
--- a/packages/web/i18n/en/common.json
+++ b/packages/web/i18n/en/common.json
@@ -285,6 +285,7 @@
   "core.app.Config schedule plan": "Configure Scheduled Execution",
   "core.app.Config whisper": "Configure Voice Input",
   "core.app.Config_auto_execute": "Click to configure automatic execution rules",
+  "core.app.Create app by curl": "Create by curl",
   "core.app.Interval timer config": "Scheduled Execution Configuration",
   "core.app.Interval timer run": "Scheduled Execution",
   "core.app.Interval timer tip": "Can Execute App on Schedule",
diff --git a/packages/web/i18n/zh-CN/app.json b/packages/web/i18n/zh-CN/app.json
index 4124839cb25b..d0aef585d3ed 100644
--- a/packages/web/i18n/zh-CN/app.json
+++ b/packages/web/i18n/zh-CN/app.json
@@ -69,6 +69,7 @@
   "interval.6_hours": "每6小时",
   "interval.per_hour": "每小时",
   "intro": "是一个大模型应用编排系统，提供开箱即用的数据处理、模型调用等能力，可以快速的构建知识库并通过 Flow 可视化进行工作流编排，实现复杂的知识库场景！",
+  "invalid_json_format": "JSON 格式错误",
   "llm_not_support_vision": "该模型不支持图片识别",
   "llm_use_vision": "图片识别",
   "llm_use_vision_tip": "点击模型选择后，可以看到模型是否支持图片识别以及控制是否启动图片识别的能力。启动图片识别后，模型会读取文件链接里图片内容，并且如果用户问题少于 500 字，会自动解析用户问题中的图片。",
@@ -94,6 +95,7 @@
   "open_vision_function_tip": "有图示开关的模型即拥有图片识别能力。若开启，模型会解析文件链接里的图片，并自动解析用户问题中的图片（用户问题≤500字时生效）。",
   "or_drag_JSON": "或拖入JSON文件",
   "paste_config": "粘贴配置",
+  "paste_config_or_drag": "粘贴配置或拖入 JSON 文件",
   "permission.des.manage": "写权限基础上，可配置发布渠道、查看对话日志、分配该应用权限",
   "permission.des.read": "可使用该应用进行对话",
   "permission.des.write": "可查看和编辑应用",
@@ -150,9 +152,12 @@
   "type.Create workflow bot": "创建工作流",
   "type.Create workflow tip": "通过低代码的方式，构建逻辑复杂的多轮对话 AI 应用，推荐高级玩家使用",
   "type.Http plugin": "HTTP 插件",
+  "type.Import from json": "导入 JSON 配置",
+  "type.Import from json tip": "通过粘贴或导入 JSON 文件，直接创建对应属性的应用",
   "type.Plugin": "插件",
   "type.Simple bot": "简易应用",
   "type.Workflow bot": "工作流",
+  "type_not_recognized": "未识别到应用类型",
   "upload_file_max_amount": "最大文件数量",
   "upload_file_max_amount_tip": "单轮对话中最大上传文件数量",
   "variable.select type_desc": "可以为工作流定义全局变量，常用临时缓存。赋值的方式包括：\n1. 从对话页面的 query 参数获取。\n2. 通过 API 的 variables 对象传递。\n3. 通过【变量更新】节点进行赋值。",
diff --git a/packages/web/i18n/zh-CN/common.json b/packages/web/i18n/zh-CN/common.json
index 7aca2c892cd2..c13f73f7c5a3 100644
--- a/packages/web/i18n/zh-CN/common.json
+++ b/packages/web/i18n/zh-CN/common.json
@@ -288,6 +288,7 @@
   "core.app.Config schedule plan": "配置定时执行",
   "core.app.Config whisper": "配置语音输入",
   "core.app.Config_auto_execute": "点击配置自动执行规则",
+  "core.app.Create app by curl": "通过 curl 创建",
   "core.app.Interval timer config": "定时执行配置",
   "core.app.Interval timer run": "定时执行",
   "core.app.Interval timer tip": "可定时执行应用",
diff --git a/packages/web/i18n/zh-Hant/app.json b/packages/web/i18n/zh-Hant/app.json
index fa0bbd8c0767..b5254b8192cb 100644
--- a/packages/web/i18n/zh-Hant/app.json
+++ b/packages/web/i18n/zh-Hant/app.json
@@ -69,6 +69,7 @@
   "interval.6_hours": "每 6 小時",
   "interval.per_hour": "每小時",
   "intro": "FastGPT 是一個基於大型語言模型的知識庫平臺，提供開箱即用的資料處理、向量檢索和視覺化 AI 工作流程編排等功能，讓您可以輕鬆開發和部署複雜的問答系統，而無需繁瑣的設定或配置。",
+  "invalid_json_format": "JSON 格式錯誤",
   "llm_not_support_vision": "這個模型不支援圖片辨識",
   "llm_use_vision": "圖片辨識",
   "llm_use_vision_tip": "點選模型選擇後，可以看到模型是否支援圖片辨識以及控制是否啟用圖片辨識的功能。啟用圖片辨識後，模型會讀取檔案連結中的圖片內容，並且如果使用者問題少於 500 字，會自動解析使用者問題中的圖片。",
@@ -94,6 +95,7 @@
   "open_vision_function_tip": "有圖示開關的模型即擁有圖片辨識功能。若開啟，模型會解析檔案連結中的圖片，並自動解析使用者問題中的圖片（使用者問題 ≤ 500 字時生效）。",
   "or_drag_JSON": "或拖曳 JSON 檔案",
   "paste_config": "貼上設定",
+  "paste_config_or_drag": "貼上配置或拖入 JSON 文件",
   "permission.des.manage": "在寫入權限基礎上，可以設定發布通道、檢視對話紀錄、分配這個應用程式的權限",
   "permission.des.read": "可以使用這個應用程式進行對話",
   "permission.des.write": "可以檢視和編輯應用程式",
@@ -150,9 +152,12 @@
   "type.Create workflow bot": "建立工作流程",
   "type.Create workflow tip": "透過低程式碼的方式，建立邏輯複雜的多輪對話 AI 應用程式，建議進階使用者使用",
   "type.Http plugin": "HTTP 外掛",
+  "type.Import from json": "導入 JSON 配置",
+  "type.Import from json tip": "透過貼上或匯入 JSON 文件，直接建立對應屬性的應用",
   "type.Plugin": "外掛",
   "type.Simple bot": "簡易應用程式",
   "type.Workflow bot": "工作流程",
+  "type_not_recognized": "未識別到應用程式類型",
   "upload_file_max_amount": "最大檔案數量",
   "upload_file_max_amount_tip": "單輪對話中最大上傳檔案數量",
   "variable.select type_desc": "可以為工作流程定義全域變數，常用於暫存。賦值的方式包括：\n1. 從對話頁面的 query 參數取得。\n2. 透過 API 的 variables 物件傳遞。\n3. 透過【變數更新】節點進行賦值。",
diff --git a/packages/web/i18n/zh-Hant/common.json b/packages/web/i18n/zh-Hant/common.json
index dc3f4d736033..d7eb9e7294fe 100644
--- a/packages/web/i18n/zh-Hant/common.json
+++ b/packages/web/i18n/zh-Hant/common.json
@@ -285,6 +285,7 @@
   "core.app.Config schedule plan": "設定排程執行",
   "core.app.Config whisper": "設定語音輸入",
   "core.app.Config_auto_execute": "點選配置自動執行規則",
+  "core.app.Create app by curl": "透過 curl 創建",
   "core.app.Interval timer config": "排程執行設定",
   "core.app.Interval timer run": "排程執行",
   "core.app.Interval timer tip": "可排程執行應用程式",
diff --git a/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx b/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
index 31226c5bc461..22176182f376 100644
--- a/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
@@ -24,6 +24,7 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { postTransition2Workflow } from '@/web/core/app/api/app';
 import { form2AppWorkflow } from '@/web/core/app/utils';
 import { SimpleAppSnapshotType } from './useSnapshots';
+import { ExportPopover } from '../WorkflowComponents/AppCard';
 
 const AppCard = ({
   appForm,
@@ -118,6 +119,7 @@ const AppCard = ({
           )}
           {appDetail.permission.isOwner && (
             <MyMenu
+              size={'xs'}
               Button={
                 <IconButton
                   variant={'whitePrimary'}
@@ -129,6 +131,16 @@ const AppCard = ({
               menuList={[
                 {
                   children: [
+                    {
+                      label: (
+                        <Flex>
+                          {ExportPopover({
+                            appName: appDetail.name,
+                            appForm
+                          })}
+                        </Flex>
+                      )
+                    },
                     {
                       icon: 'core/app/type/workflow',
                       label: t('app:transition_to_workflow'),
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx
index 70b4f796922e..0b1cca250043 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx
@@ -13,9 +13,10 @@ 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';
+import { AppChatConfigType, AppSimpleEditFormType } from '@fastgpt/global/core/app/type';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { filterSensitiveFormData } from '@/web/core/app/utils';
 
 const ImportSettings = dynamic(() => import('./Flow/ImportSettings'));
 
@@ -210,11 +211,13 @@ const AppCard = ({ showSaveStatus, isSaved }: { showSaveStatus: boolean; isSaved
   return Render;
 };
 
-function ExportPopover({
+export function ExportPopover({
   chatConfig,
+  appForm,
   appName
 }: {
-  chatConfig: AppChatConfigType;
+  chatConfig?: AppChatConfigType;
+  appForm?: AppSimpleEditFormType;
   appName: string;
 }) {
   const { t } = useTranslation();
@@ -223,24 +226,15 @@ function ExportPopover({
 
   const onExportWorkflow = useCallback(
     async (mode: 'copy' | 'json') => {
-      const data = flowData2StoreData();
-      if (data) {
-        if (mode === 'copy') {
-          copyData(
-            JSON.stringify(
-              {
-                nodes: filterSensitiveNodesData(data.nodes),
-                edges: data.edges,
-                chatConfig
-              },
-              null,
-              2
-            ),
-            t('app:export_config_successful')
-          );
-        } else if (mode === 'json') {
-          fileDownload({
-            text: JSON.stringify(
+      let config = '';
+
+      try {
+        if (appForm) {
+          config = JSON.stringify(filterSensitiveFormData(appForm), null, 2);
+        } else {
+          const data = flowData2StoreData();
+          if (data) {
+            config = JSON.stringify(
               {
                 nodes: filterSensitiveNodesData(data.nodes),
                 edges: data.edges,
@@ -248,14 +242,28 @@ function ExportPopover({
               },
               null,
               2
-            ),
-            type: 'application/json;charset=utf-8',
-            filename: `${appName}.json`
-          });
+            );
+          }
         }
+      } catch (err) {
+        console.error(err);
+      }
+
+      if (!config) {
+        return;
+      }
+
+      if (mode === 'copy') {
+        copyData(config, t('app:export_config_successful'));
+      } else if (mode === 'json') {
+        fileDownload({
+          text: config,
+          type: 'application/json;charset=utf-8',
+          filename: `${appName}.json`
+        });
       }
     },
-    [appName, chatConfig, copyData, flowData2StoreData, t]
+    [appForm, appName, chatConfig, copyData, flowData2StoreData, t]
   );
 
   return (
@@ -266,7 +274,7 @@ function ExportPopover({
       trigger={'hover'}
       w={'8.6rem'}
       Trigger={
-        <MyBox display={'flex'} size={'md'} rounded={'4px'} cursor={'pointer'}>
+        <MyBox display={'flex'} cursor={'pointer'}>
           <MyIcon name={'export'} w={'16px'} mr={2} />
           <Box fontSize={'sm'}>{t('app:export_configs')}</Box>
         </MyBox>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx
index dd67eb8f0248..11867202cfe9 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx
@@ -1,13 +1,13 @@
-import React, { DragEvent, useCallback, useMemo, useState } from 'react';
-import { Textarea, Button, ModalBody, ModalFooter, Flex, Box } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+import { Button, ModalBody, ModalFooter } from '@chakra-ui/react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../context';
 import { useTranslation } from 'next-i18next';
-import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import DragEditor from '@fastgpt/web/components/common/Textarea/DragEditor';
 
 type Props = {
   onClose: () => void;
@@ -21,57 +21,8 @@ const ImportSettings = ({ onClose }: Props) => {
   });
   const { isPc } = useSystem();
   const initData = useContextSelector(WorkflowContext, (v) => v.initData);
-  const [isDragging, setIsDragging] = useState(false);
-  const [value, setValue] = useState('');
   const { t } = useTranslation();
-
-  const readJSONFile = useCallback(
-    (file: File) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (!file.name.endsWith('.json')) {
-          toast({
-            title: t('app:not_json_file'),
-            status: 'error'
-          });
-          return;
-        }
-        if (e.target) {
-          const res = JSON.parse(e.target.result as string);
-          setValue(JSON.stringify(res, null, 2));
-        }
-      };
-      reader.readAsText(file);
-    },
-    [t, toast]
-  );
-
-  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-  const handleDrop = useCallback(
-    async (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      const file = e.dataTransfer.files[0];
-      readJSONFile(file);
-      setIsDragging(false);
-    },
-    [readJSONFile]
-  );
-
-  const onSelectFile = useCallback(
-    async (e: File[]) => {
-      const file = e[0];
-      readJSONFile(file);
-    },
-    [readJSONFile]
-  );
+  const [value, setValue] = useState('');
 
   return (
     <MyModal
@@ -83,64 +34,16 @@ const ImportSettings = ({ onClose }: Props) => {
       size={isPc ? 'lg' : 'md'}
     >
       <ModalBody>
-        <File onSelect={onSelectFile} />
-        {isDragging ? (
-          <Flex
-            align={'center'}
-            justify={'center'}
-            w={'31rem'}
-            h={'17.5rem'}
-            borderRadius={'md'}
-            border={'1px dashed'}
-            borderColor={'myGray.400'}
-            onDragEnter={handleDragEnter}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={handleDrop}
-            onDragLeave={handleDragLeave}
-          >
-            <Flex align={'center'} justify={'center'} flexDir={'column'} gap={'0.62rem'}>
-              <MyIcon name={'configmap'} w={'1.5rem'} color={'myGray.500'} />
-              <Box color={'myGray.600'} fontSize={'mini'}>
-                {t('app:file_recover')}
-              </Box>
-            </Flex>
-          </Flex>
-        ) : (
-          <Box w={['100%', '31rem']}>
-            <Flex justify={'space-between'} align={'center'} pb={2}>
-              <Box fontSize={'sm'} color={'myGray.900'} fontWeight={'500'}>
-                {t('common:common.json_config')}
-              </Box>
-              <Button onClick={onOpen} variant={'whiteBase'} p={0}>
-                <Flex px={'0.88rem'} py={'0.44rem'} color={'myGray.600'} fontSize={'mini'}>
-                  <MyIcon name={'file/uploadFile'} w={'1rem'} mr={'0.38rem'} />
-                  {t('common:common.upload_file')}
-                </Flex>
-              </Button>
-            </Flex>
-            <Box
-              onDragEnter={handleDragEnter}
-              onDragOver={(e) => e.preventDefault()}
-              onDrop={handleDrop}
-              onDragLeave={handleDragLeave}
-            >
-              <Textarea
-                bg={'myGray.50'}
-                border={'1px solid'}
-                borderRadius={'md'}
-                borderColor={'myGray.200'}
-                value={value}
-                placeholder={
-                  isPc
-                    ? t('app:paste_config') + '\n' + t('app:or_drag_JSON')
-                    : t('app:paste_config')
-                }
-                rows={16}
-                onChange={(e) => setValue(e.target.value)}
-              />
-            </Box>
-          </Box>
-        )}
+        <DragEditor
+          value={value}
+          onChange={setValue}
+          rows={16}
+          placeholder={
+            isPc ? t('app:paste_config') + '\n' + t('app:or_drag_JSON') : t('app:paste_config')
+          }
+          File={File}
+          onOpen={onOpen}
+        />
       </ModalBody>
       <ModalFooter justifyItems={'flex-end'}>
         <Button
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/CurlImportModal.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/CurlImportModal.tsx
index 3ab34883af8c..686d8ca01531 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/CurlImportModal.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/CurlImportModal.tsx
@@ -19,6 +19,34 @@ const methodMap: { [K in RequestMethod]: string } = {
   patch: 'PATCH'
 };
 
+export const parseCurl = (curlContent: string) => {
+  const parsed = parse(curlContent);
+
+  if (!parsed.url) {
+    throw new Error('url not found');
+  }
+
+  const newParams = Object.keys(parsed.params || {}).map((key) => ({
+    key,
+    value: parsed.params?.[key],
+    type: 'string'
+  }));
+  const newHeaders = Object.keys(parsed.header || {}).map((key) => ({
+    key,
+    value: parsed.header?.[key],
+    type: 'string'
+  }));
+  const newBody = JSON.stringify(parsed.data, null, 2);
+
+  return {
+    url: parsed.url,
+    method: methodMap[parsed.method?.toLowerCase() as RequestMethod] || 'GET',
+    params: newParams,
+    headers: newHeaders,
+    body: newBody
+  };
+};
+
 const CurlImportModal = ({
   nodeId,
   inputs,
@@ -49,22 +77,7 @@ const CurlImportModal = ({
 
       if (!requestUrl || !requestMethod || !params || !headers || !jsonBody) return;
 
-      const parsed = parse(content);
-      if (!parsed.url) {
-        throw new Error('url not found');
-      }
-
-      const newParams = Object.keys(parsed.params || {}).map((key) => ({
-        key,
-        value: parsed.params?.[key],
-        type: 'string'
-      }));
-      const newHeaders = Object.keys(parsed.header || {}).map((key) => ({
-        key,
-        value: parsed.header?.[key],
-        type: 'string'
-      }));
-      const newBody = JSON.stringify(parsed.data, null, 2);
+      const parsed = parseCurl(content);
 
       onChangeNode({
         nodeId,
@@ -82,7 +95,7 @@ const CurlImportModal = ({
         key: NodeInputKeyEnum.httpMethod,
         value: {
           ...requestMethod,
-          value: methodMap[parsed.method?.toLowerCase() as RequestMethod] || 'GET'
+          value: parsed.method
         }
       });
 
@@ -92,7 +105,7 @@ const CurlImportModal = ({
         key: NodeInputKeyEnum.httpParams,
         value: {
           ...params,
-          value: newParams
+          value: parsed.params
         }
       });
 
@@ -102,7 +115,7 @@ const CurlImportModal = ({
         key: NodeInputKeyEnum.httpHeaders,
         value: {
           ...headers,
-          value: newHeaders
+          value: parsed.headers
         }
       });
 
@@ -112,7 +125,7 @@ const CurlImportModal = ({
         key: NodeInputKeyEnum.httpJsonBody,
         value: {
           ...jsonBody,
-          value: newBody
+          value: parsed.body
         }
       });
 
diff --git a/projects/app/src/pages/app/list/components/CreateModal.tsx b/projects/app/src/pages/app/list/components/CreateModal.tsx
index e3460af99a27..dfa19bc7c695 100644
--- a/projects/app/src/pages/app/list/components/CreateModal.tsx
+++ b/projects/app/src/pages/app/list/components/CreateModal.tsx
@@ -1,10 +1,20 @@
-import React, { useRef } from 'react';
-import { Box, Flex, Button, ModalBody, Input, Grid, Card } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import {
+  Box,
+  Flex,
+  Button,
+  ModalBody,
+  Input,
+  Grid,
+  Card,
+  Textarea,
+  ModalFooter
+} from '@chakra-ui/react';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useForm } from 'react-hook-form';
 import { postCreateApp } from '@/web/core/app/api';
 import { useRouter } from 'next/router';
-import { emptyTemplates } from '@/web/core/app/templates';
+import { emptyTemplates, getCurlPlugin } from '@/web/core/app/templates';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
@@ -21,6 +31,9 @@ import {
   getTemplateMarketItemList
 } from '@/web/core/app/api/template';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { i18nT } from '@fastgpt/web/i18n/utils';
+import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
+import { parseCurl } from '../../detail/components/WorkflowComponents/Flow/nodes/NodeHttp/CurlImportModal';
 
 type FormType = {
   avatar: string;
@@ -29,6 +42,27 @@ type FormType = {
 
 export type CreateAppType = AppTypeEnum.simple | AppTypeEnum.workflow | AppTypeEnum.plugin;
 
+export const appTypeMap = {
+  [AppTypeEnum.simple]: {
+    icon: 'core/app/simpleBot',
+    title: i18nT('app:type.Create simple bot'),
+    avatar: 'core/app/type/simpleFill',
+    emptyCreateText: i18nT('app:create_empty_app')
+  },
+  [AppTypeEnum.workflow]: {
+    icon: 'core/app/type/workflowFill',
+    avatar: 'core/app/type/workflowFill',
+    title: i18nT('app:type.Create workflow bot'),
+    emptyCreateText: i18nT('app:create_empty_workflow')
+  },
+  [AppTypeEnum.plugin]: {
+    icon: 'core/app/type/pluginFill',
+    avatar: 'core/app/type/pluginFill',
+    title: i18nT('app:type.Create plugin bot'),
+    emptyCreateText: i18nT('app:create_empty_plugin')
+  }
+};
+
 const CreateModal = ({
   onClose,
   type,
@@ -43,28 +77,10 @@ const CreateModal = ({
   const { parentId, loadMyApps } = useContextSelector(AppListContext, (v) => v);
   const { isPc } = useSystem();
   const { feConfigs } = useSystemStore();
+  const [currentCreateType, setCurrentCreateType] = useState<'template' | 'curl'>('template');
+  const [curlContent, setCurlContent] = useState('');
 
-  const typeMap = useRef({
-    [AppTypeEnum.simple]: {
-      icon: 'core/app/simpleBot',
-      title: t('app:type.Create simple bot'),
-      avatar: 'core/app/type/simpleFill',
-      emptyCreateText: t('app:create_empty_app')
-    },
-    [AppTypeEnum.workflow]: {
-      icon: 'core/app/type/workflowFill',
-      avatar: 'core/app/type/workflowFill',
-      title: t('app:type.Create workflow bot'),
-      emptyCreateText: t('app:create_empty_workflow')
-    },
-    [AppTypeEnum.plugin]: {
-      icon: 'core/app/type/pluginFill',
-      avatar: 'core/app/type/pluginFill',
-      title: t('app:type.Create plugin bot'),
-      emptyCreateText: t('app:create_empty_plugin')
-    }
-  });
-  const typeData = typeMap.current[type];
+  const typeData = appTypeMap[type];
   const { data: templateList = [], loading: isRequestTemplates } = useRequest2(
     () => getTemplateMarketItemList({ isQuickTemplate: true, type }),
     {
@@ -91,7 +107,7 @@ const CreateModal = ({
 
   const { runAsync: onclickCreate, loading: isCreating } = useRequest2(
     async (data: FormType, templateId?: string) => {
-      if (!templateId) {
+      if (!templateId && currentCreateType !== 'curl') {
         return postCreateApp({
           parentId,
           avatar: data.avatar,
@@ -103,15 +119,24 @@ const CreateModal = ({
         });
       }
 
-      const templateDetail = await getTemplateMarketItemDetail(templateId);
+      let workflow;
+      let templateDetail;
+      if (templateId) {
+        templateDetail = await getTemplateMarketItemDetail(templateId);
+        workflow = templateDetail.workflow;
+      } else {
+        const parsedCurl = parseCurl(curlContent);
+        workflow = getCurlPlugin(parsedCurl);
+      }
+
       return postCreateApp({
         parentId,
-        avatar: data.avatar || templateDetail.avatar,
+        avatar: data.avatar || templateDetail?.avatar || '',
         name: data.name,
-        type: templateDetail.type as AppTypeEnum,
-        modules: templateDetail.workflow.nodes || [],
-        edges: templateDetail.workflow.edges || [],
-        chatConfig: templateDetail.workflow.chatConfig
+        type: (templateDetail?.type as AppTypeEnum) || type,
+        modules: workflow.nodes || [],
+        edges: workflow.edges || [],
+        chatConfig: workflow.chatConfig || {}
       });
     },
     {
@@ -128,14 +153,14 @@ const CreateModal = ({
   return (
     <MyModal
       iconSrc={typeData.icon}
-      title={typeData.title}
+      title={t(typeData.title)}
       isOpen
       onClose={onClose}
       isCentered={!isPc}
       maxW={['90vw', '40rem']}
       isLoading={isCreating || isRequestTemplates}
     >
-      <ModalBody px={9} pb={8}>
+      <ModalBody px={9} pb={currentCreateType === 'template' ? 8 : 2}>
         <Box color={'myGray.800'} fontWeight={'bold'}>
           {t('common:common.Set Name')}
         </Box>
@@ -162,110 +187,147 @@ const CreateModal = ({
           />
         </Flex>
         <Flex mt={[4, 7]} mb={[0, 3]}>
-          <Box color={'myGray.900'} fontWeight={'bold'} fontSize={'sm'}>
-            {t('common:core.app.Select app from template')}
-          </Box>
+          {type !== AppTypeEnum.plugin ? (
+            <Box color={'myGray.900'} fontWeight={'bold'} fontSize={'sm'}>
+              {t('common:core.app.Select app from template')}
+            </Box>
+          ) : (
+            <FillRowTabs
+              list={[
+                { label: t('common:core.app.Select app from template'), value: 'template' },
+                { label: t('common:core.app.Create app by curl'), value: 'curl' }
+              ]}
+              value={currentCreateType}
+              onChange={(e) => setCurrentCreateType(e as 'template' | 'curl')}
+            />
+          )}
           <Box flex={1} />
-          <Flex
-            onClick={() => onOpenTemplateModal(type)}
-            alignItems={'center'}
-            cursor={'pointer'}
-            color={'myGray.600'}
-            fontSize={'xs'}
-            _hover={{ color: 'blue.700' }}
-          >
-            {t('common:core.app.more')}
-            <ChevronRightIcon w={4} h={4} />
-          </Flex>
+          {currentCreateType === 'template' && (
+            <Flex
+              onClick={() => onOpenTemplateModal(type)}
+              alignItems={'center'}
+              cursor={'pointer'}
+              color={'myGray.600'}
+              fontSize={'xs'}
+              _hover={{ color: 'blue.700' }}
+            >
+              {t('common:core.app.more')}
+              <ChevronRightIcon w={4} h={4} />
+            </Flex>
+          )}
         </Flex>
-        <Grid
-          userSelect={'none'}
-          gridTemplateColumns={templateList.length > 0 ? ['repeat(1,1fr)', 'repeat(2,1fr)'] : '1fr'}
-          gridGap={[2, 4]}
-        >
-          <Card
-            borderWidth={'1px'}
-            borderRadius={'md'}
-            cursor={'pointer'}
-            boxShadow={'3'}
-            display={'flex'}
-            flexDirection={'column'}
-            alignItems={'center'}
-            justifyContent={'center'}
-            color={'myGray.500'}
-            borderColor={'myGray.200'}
-            h={'8.25rem'}
-            _hover={{
-              color: 'primary.700',
-              borderColor: 'primary.300'
-            }}
-            onClick={handleSubmit((data) => onclickCreate(data))}
+        {currentCreateType === 'template' ? (
+          <Grid
+            userSelect={'none'}
+            gridTemplateColumns={
+              templateList.length > 0 ? ['repeat(1,1fr)', 'repeat(2,1fr)'] : '1fr'
+            }
+            gridGap={[2, 4]}
           >
-            <MyIcon name={'common/addLight'} w={'1.5rem'} />
-            <Box fontSize={'sm'} mt={2}>
-              {typeData.emptyCreateText}
-            </Box>
-          </Card>
-          {templateList.map((item) => (
             <Card
-              key={item.templateId}
-              p={4}
-              borderRadius={'md'}
               borderWidth={'1px'}
-              borderColor={'myGray.200'}
+              borderRadius={'md'}
+              cursor={'pointer'}
               boxShadow={'3'}
+              display={'flex'}
+              flexDirection={'column'}
+              alignItems={'center'}
+              justifyContent={'center'}
+              color={'myGray.500'}
+              borderColor={'myGray.200'}
               h={'8.25rem'}
               _hover={{
-                borderColor: 'primary.300',
-                '& .buttons': {
-                  display: 'flex'
-                }
+                color: 'primary.700',
+                borderColor: 'primary.300'
               }}
-              display={'flex'}
-              flexDirection={'column'}
+              onClick={handleSubmit((data) => onclickCreate(data))}
             >
-              <Flex alignItems={'center'}>
-                <Avatar src={item.avatar} borderRadius={'sm'} w={'1.5rem'} />
-                <Box ml={3} color={'myGray.900'} fontWeight={500}>
-                  {t(item.name as any)}
-                </Box>
-              </Flex>
-              <Box fontSize={'xs'} mt={2} color={'myGray.600'} flex={1}>
-                {t(item.intro as any)}
+              <MyIcon name={'common/addLight'} w={'1.5rem'} />
+              <Box fontSize={'sm'} mt={2}>
+                {t(typeData.emptyCreateText)}
               </Box>
-              <Box w={'full'} fontSize={'mini'}>
-                <Box color={'myGray.500'}>{`By ${item.author || feConfigs.systemTitle}`}</Box>
-                <Box
-                  className="buttons"
-                  display={'none'}
-                  justifyContent={'center'}
-                  alignItems={'center'}
-                  position={'absolute'}
-                  borderRadius={'lg'}
-                  w={'full'}
-                  h={'full'}
-                  left={0}
-                  right={0}
-                  bottom={1}
-                  height={'40px'}
-                  bg={'white'}
-                  zIndex={1}
-                >
-                  <Button
-                    variant={'whiteBase'}
-                    h={6}
-                    borderRadius={'sm'}
-                    w={'40%'}
-                    onClick={handleSubmit((data) => onclickCreate(data, item.templateId))}
+            </Card>
+            {templateList.map((item) => (
+              <Card
+                key={item.templateId}
+                p={4}
+                borderRadius={'md'}
+                borderWidth={'1px'}
+                borderColor={'myGray.200'}
+                boxShadow={'3'}
+                h={'8.25rem'}
+                _hover={{
+                  borderColor: 'primary.300',
+                  '& .buttons': {
+                    display: 'flex'
+                  }
+                }}
+                display={'flex'}
+                flexDirection={'column'}
+              >
+                <Flex alignItems={'center'}>
+                  <Avatar src={item.avatar} borderRadius={'sm'} w={'1.5rem'} />
+                  <Box ml={3} color={'myGray.900'} fontWeight={500}>
+                    {t(item.name as any)}
+                  </Box>
+                </Flex>
+                <Box fontSize={'xs'} mt={2} color={'myGray.600'} flex={1}>
+                  {t(item.intro as any)}
+                </Box>
+                <Box w={'full'} fontSize={'mini'}>
+                  <Box color={'myGray.500'}>{`By ${item.author || feConfigs.systemTitle}`}</Box>
+                  <Box
+                    className="buttons"
+                    display={'none'}
+                    justifyContent={'center'}
+                    alignItems={'center'}
+                    position={'absolute'}
+                    borderRadius={'lg'}
+                    w={'full'}
+                    h={'full'}
+                    left={0}
+                    right={0}
+                    bottom={1}
+                    height={'40px'}
+                    bg={'white'}
+                    zIndex={1}
                   >
-                    {t('app:templateMarket.Use')}
-                  </Button>
+                    <Button
+                      variant={'whiteBase'}
+                      h={6}
+                      borderRadius={'sm'}
+                      w={'40%'}
+                      onClick={handleSubmit((data) => onclickCreate(data, item.templateId))}
+                    >
+                      {t('app:templateMarket.Use')}
+                    </Button>
+                  </Box>
                 </Box>
-              </Box>
-            </Card>
-          ))}
-        </Grid>
+              </Card>
+            ))}
+          </Grid>
+        ) : (
+          <Box>
+            <Textarea
+              placeholder={t('app:paste_config')}
+              w={'560px'}
+              h={'260px'}
+              bg={'myGray.50'}
+              onChange={(e) => setCurlContent(e.target.value)}
+            />
+          </Box>
+        )}
       </ModalBody>
+      {currentCreateType !== 'template' && (
+        <ModalFooter gap={4}>
+          <Button variant={'whiteBase'} onClick={onClose}>
+            {t('common:common.Cancel')}
+          </Button>
+          <Button variant={'primary'} onClick={handleSubmit((data) => onclickCreate(data))}>
+            {t('common:common.Confirm')}
+          </Button>
+        </ModalFooter>
+      )}
       <File
         onSelect={(e) =>
           onSelectImage(e, {
diff --git a/projects/app/src/pages/app/list/components/JsonImportModal.tsx b/projects/app/src/pages/app/list/components/JsonImportModal.tsx
new file mode 100644
index 000000000000..ff32c75a4587
--- /dev/null
+++ b/projects/app/src/pages/app/list/components/JsonImportModal.tsx
@@ -0,0 +1,176 @@
+import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
+import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { useTranslation } from 'next-i18next';
+import { useForm } from 'react-hook-form';
+import { appTypeMap } from './CreateModal';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { useEffect, useState } from 'react';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import { getAppType } from '@fastgpt/global/core/app/utils';
+import { useContextSelector } from 'use-context-selector';
+import { AppListContext } from './context';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { postCreateApp } from '@/web/core/app/api';
+import { useRouter } from 'next/router';
+import { form2AppWorkflow } from '@/web/core/app/utils';
+import DragEditor from '@fastgpt/web/components/common/Textarea/DragEditor';
+
+type FormType = {
+  avatar: string;
+  name: string;
+  type: AppTypeEnum | '';
+};
+
+const JsonImportModal = ({ onClose }: { onClose: () => void }) => {
+  const { toast } = useToast();
+  const { t } = useTranslation();
+  const { isPc } = useSystem();
+  const { parentId, loadMyApps } = useContextSelector(AppListContext, (v) => v);
+  const router = useRouter();
+
+  const { register, setValue, watch, handleSubmit } = useForm<FormType>({
+    defaultValues: {
+      avatar: appTypeMap[AppTypeEnum.simple].avatar,
+      name: '',
+      type: AppTypeEnum.simple
+    }
+  });
+  const avatar = watch('avatar');
+
+  const {
+    File,
+    onOpen: onOpenSelectFile,
+    onSelectImage
+  } = useSelectFile({
+    fileType: '.jpg,.png',
+    multiple: false
+  });
+
+  const { File: ConfigFile, onOpen: onOpenSelectConfigFile } = useSelectFile({
+    fileType: 'json',
+    multiple: false
+  });
+
+  const [workflowStr, setWorkflowStr] = useState('');
+
+  const { runAsync: onSubmit, loading: isCreating } = useRequest2(
+    async (data: FormType) => {
+      if (!data.type) {
+        return Promise.reject(t('app:type_not_recognized'));
+      }
+
+      let workflow;
+      try {
+        if (data.type === AppTypeEnum.simple) {
+          const appForm = JSON.parse(workflowStr);
+          workflow = form2AppWorkflow(appForm, t);
+        } else {
+          workflow = JSON.parse(workflowStr);
+        }
+      } catch (err) {
+        return Promise.reject(t('app:invalid_json_format'));
+      }
+
+      return postCreateApp({
+        parentId,
+        avatar: data.avatar,
+        name: data.name,
+        type: data.type,
+        modules: workflow.nodes,
+        edges: workflow.edges,
+        chatConfig: workflow.chatConfig
+      });
+    },
+    {
+      onSuccess(id: string) {
+        router.push(`/app/detail?appId=${id}`);
+        loadMyApps();
+        onClose();
+      },
+      successToast: t('common:common.Create Success')
+    }
+  );
+
+  useEffect(() => {
+    try {
+      const workflow = JSON.parse(workflowStr);
+      const type = getAppType(workflow);
+      setValue('type', type);
+      if (type && !avatar.startsWith('/')) {
+        setValue('avatar', appTypeMap[type].avatar);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }, [avatar, setValue, workflowStr]);
+
+  return (
+    <>
+      <MyModal
+        isOpen
+        onClose={onClose}
+        isLoading={isCreating}
+        title={t('app:type.Import from json')}
+        iconSrc="common/importLight"
+        iconColor={'primary.600'}
+        isCentered={!isPc}
+        maxW={['90vw', '40rem']}
+      >
+        <ModalBody px={9}>
+          <Box color={'myGray.800'} fontWeight={'bold'}>
+            {t('common:common.Set Name')}
+          </Box>
+          <Flex mt={2} alignItems={'center'}>
+            <MyTooltip label={t('common:common.Set Avatar')}>
+              <Avatar
+                flexShrink={0}
+                src={avatar}
+                w={['28px', '36px']}
+                h={['28px', '36px']}
+                cursor={'pointer'}
+                borderRadius={'md'}
+                onClick={onOpenSelectFile}
+              />
+            </MyTooltip>
+            <Input
+              flex={1}
+              ml={3}
+              autoFocus
+              bg={'myWhite.600'}
+              {...register('name', {
+                required: t('common:core.app.error.App name can not be empty')
+              })}
+            />
+          </Flex>
+          <Flex mt={3} w={'458px'}>
+            <DragEditor
+              value={workflowStr}
+              onChange={setWorkflowStr}
+              rows={10}
+              File={ConfigFile}
+              onOpen={onOpenSelectConfigFile}
+            />
+          </Flex>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={handleSubmit(onSubmit)}>{t('common:add_new')}</Button>
+        </ModalFooter>
+      </MyModal>
+      <File
+        onSelect={(e) =>
+          onSelectImage(e, {
+            maxH: 300,
+            maxW: 300,
+            callback: (e) => setValue('avatar', e)
+          })
+        }
+      />
+    </>
+  );
+};
+
+export default JsonImportModal;
diff --git a/projects/app/src/pages/app/list/components/TemplateMarketModal.tsx b/projects/app/src/pages/app/list/components/TemplateMarketModal.tsx
index 8941c95e9c40..a68f64b327a6 100644
--- a/projects/app/src/pages/app/list/components/TemplateMarketModal.tsx
+++ b/projects/app/src/pages/app/list/components/TemplateMarketModal.tsx
@@ -37,6 +37,7 @@ import { webPushTrack } from '@/web/common/middle/tracks/utils';
 import { AppTemplateSchemaType, TemplateTypeSchemaType } from '@fastgpt/global/core/app/type';
 import { i18nT } from '@fastgpt/web/i18n/utils';
 import UseGuideModal from '@/components/common/Modal/UseGuideModal';
+import { form2AppWorkflow } from '@/web/core/app/utils';
 
 type TemplateAppType = AppTypeEnum | 'all';
 
@@ -94,14 +95,18 @@ const TemplateMarketModal = ({
   const { runAsync: onUseTemplate, loading: isCreating } = useRequest2(
     async (template: AppTemplateSchemaType) => {
       const templateDetail = await getTemplateMarketItemDetail(template.templateId);
+      let workflow = templateDetail.workflow;
+      if (templateDetail.type === AppTypeEnum.simple) {
+        workflow = form2AppWorkflow(workflow, t);
+      }
       return postCreateApp({
         parentId,
         avatar: template.avatar,
         name: template.name,
         type: template.type as AppTypeEnum,
-        modules: templateDetail.workflow.nodes || [],
-        edges: templateDetail.workflow.edges || [],
-        chatConfig: templateDetail.workflow.chatConfig
+        modules: workflow.nodes || [],
+        edges: workflow.edges || [],
+        chatConfig: workflow.chatConfig
       }).then((res) => {
         webPushTrack.useAppTemplate({
           id: res,
diff --git a/projects/app/src/pages/app/list/index.tsx b/projects/app/src/pages/app/list/index.tsx
index 602652975f62..118674d884e2 100644
--- a/projects/app/src/pages/app/list/index.tsx
+++ b/projects/app/src/pages/app/list/index.tsx
@@ -30,6 +30,7 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import TemplateMarketModal from './components/TemplateMarketModal';
 import MyImage from '@fastgpt/web/components/common/Image/MyImage';
+import JsonImportModal from './components/JsonImportModal';
 
 const CreateModal = dynamic(() => import('./components/CreateModal'));
 const EditFolderModal = dynamic(
@@ -64,6 +65,11 @@ const MyApps = () => {
     onOpen: onOpenCreateHttpPlugin,
     onClose: onCloseCreateHttpPlugin
   } = useDisclosure();
+  const {
+    isOpen: isOpenJsonImportModal,
+    onOpen: onOpenJsonImportModal,
+    onClose: onCloseJsonImportModal
+  } = useDisclosure();
   const [editFolder, setEditFolder] = useState<EditFolderFormType>();
   const [templateModalType, setTemplateModalType] = useState<AppTypeEnum | 'all'>();
 
@@ -244,6 +250,16 @@ const MyApps = () => {
                       }
                     ]
                   },
+                  {
+                    children: [
+                      {
+                        icon: 'core/app/type/jsonImport',
+                        label: t('app:type.Import from json'),
+                        description: t('app:type.Import from json tip'),
+                        onClick: onOpenJsonImportModal
+                      }
+                    ]
+                  },
                   ...(isPc
                     ? []
                     : [
@@ -375,6 +391,7 @@ const MyApps = () => {
           defaultType={templateModalType}
         />
       )}
+      {isOpenJsonImportModal && <JsonImportModal onClose={onCloseJsonImportModal} />}
     </Flex>
   );
 };
diff --git a/projects/app/src/web/common/file/hooks/useSelectFile.tsx b/projects/app/src/web/common/file/hooks/useSelectFile.tsx
index b2abdecb1d8b..72fabdccfc3b 100644
--- a/projects/app/src/web/common/file/hooks/useSelectFile.tsx
+++ b/projects/app/src/web/common/file/hooks/useSelectFile.tsx
@@ -74,7 +74,6 @@ export const useSelectFile = (props?: {
           maxW,
           maxH
         });
-        console.log(src, '--');
         callback?.(src);
         return src;
       } catch (err: any) {
diff --git a/projects/app/src/web/core/app/templates.ts b/projects/app/src/web/core/app/templates.ts
index 9280ec0776bf..7a8c8eaba259 100644
--- a/projects/app/src/web/core/app/templates.ts
+++ b/projects/app/src/web/core/app/templates.ts
@@ -408,3 +408,344 @@ export const emptyTemplates: Record<
     edges: []
   }
 };
+
+export const getCurlPlugin = ({
+  params,
+  headers,
+  body,
+  method,
+  url
+}: {
+  params: {
+    key: string;
+    value: string | undefined;
+    type: string;
+  }[];
+  headers: {
+    key: string;
+    value: string | undefined;
+    type: string;
+  }[];
+  body: string;
+  method: string;
+  url: string;
+}): {
+  nodes: AppSchema['modules'];
+  edges: AppSchema['edges'];
+  chatConfig: AppSchema['chatConfig'];
+} => {
+  return {
+    nodes: [
+      {
+        nodeId: 'pluginInput',
+        name: 'workflow:template.plugin_start',
+        intro: 'workflow:intro_plugin_input',
+        avatar: 'core/workflow/template/workflowStart',
+        flowNodeType: 'pluginInput',
+        showStatus: false,
+        position: {
+          x: 630.1191328382079,
+          y: -125.05298493910118
+        },
+        version: '481',
+        inputs: [],
+        outputs: []
+      },
+      {
+        nodeId: 'pluginOutput',
+        name: 'common:core.module.template.self_output',
+        intro: 'workflow:intro_custom_plugin_output',
+        avatar: 'core/workflow/template/pluginOutput',
+        flowNodeType: 'pluginOutput',
+        showStatus: false,
+        position: {
+          x: 1776.334576378706,
+          y: -179.2671413906911
+        },
+        version: '481',
+        inputs: [
+          {
+            renderTypeList: ['reference'],
+            valueType: 'any',
+            canEdit: true,
+            key: 'result',
+            label: 'result',
+            isToolOutput: false,
+            description: '',
+            required: true,
+            value: ['vumlECDQTjeC', 'httpRawResponse']
+          },
+          {
+            renderTypeList: ['reference'],
+            valueType: 'object',
+            canEdit: true,
+            key: 'error',
+            label: 'error',
+            isToolOutput: false,
+            description: '',
+            required: true,
+            value: ['vumlECDQTjeC', 'error']
+          }
+        ],
+        outputs: []
+      },
+      {
+        nodeId: 'pluginConfig',
+        name: 'common:core.module.template.system_config',
+        intro: '',
+        avatar: 'core/workflow/template/systemConfig',
+        flowNodeType: 'pluginConfig',
+        position: {
+          x: 182.48010602254573,
+          y: -190.55298493910115
+        },
+        version: '4811',
+        inputs: [],
+        outputs: []
+      },
+      {
+        nodeId: 'vumlECDQTjeC',
+        name: 'HTTP 请求',
+        intro: '可以发出一个 HTTP 请求，实现更为复杂的操作（联网搜索、数据库查询等）',
+        avatar: 'core/workflow/template/httpRequest',
+        flowNodeType: 'httpRequest468',
+        showStatus: true,
+        position: {
+          x: 1068.6226695001628,
+          y: -435.2671413906911
+        },
+        version: '481',
+        inputs: [
+          {
+            key: 'system_addInputParam',
+            renderTypeList: ['addInputParam'],
+            valueType: 'dynamic',
+            label: '',
+            required: false,
+            description: '接收前方节点的输出值作为变量，这些变量可以被 HTTP 请求参数使用。',
+            customInputConfig: {
+              selectValueTypeList: [
+                'string',
+                'number',
+                'boolean',
+                'object',
+                'arrayString',
+                'arrayNumber',
+                'arrayBoolean',
+                'arrayObject',
+                'arrayAny',
+                'any',
+                'chatHistory',
+                'datasetQuote',
+                'dynamic',
+                'selectApp',
+                'selectDataset'
+              ],
+              showDescription: false,
+              showDefaultValue: true
+            },
+            valueDesc: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpMethod',
+            renderTypeList: ['custom'],
+            valueType: 'string',
+            label: '',
+            value: method,
+            required: true,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpTimeout',
+            renderTypeList: ['custom'],
+            valueType: 'number',
+            label: '',
+            value: 30,
+            min: 5,
+            max: 600,
+            required: true,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpReqUrl',
+            renderTypeList: ['hidden'],
+            valueType: 'string',
+            label: '',
+            description:
+              '新的 HTTP 请求地址。如果出现两个"请求地址"，可以删除该模块重新加入，会拉取最新的模块配置。',
+            placeholder: 'https://api.ai.com/getInventory',
+            required: false,
+            value: url,
+            valueDesc: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpHeader',
+            renderTypeList: ['custom'],
+            valueType: 'any',
+            value: headers,
+            label: '',
+            description:
+              '自定义请求头，请严格填入 JSON 字符串。\n1. 确保最后一个属性没有逗号\n2. 确保 key 包含双引号\n例如：{"Authorization":"Bearer xxx"}',
+            placeholder: 'common:core.module.input.description.Http Request Header',
+            required: false,
+            valueDesc: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpParams',
+            renderTypeList: ['hidden'],
+            valueType: 'any',
+            description:
+              '新的 HTTP 请求地址。如果出现两个“请求地址”，可以删除该模块重新加入，会拉取最新的模块配置。',
+            label: '',
+            required: false,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpJsonBody',
+            renderTypeList: ['hidden'],
+            valueType: 'any',
+            value: body,
+            label: '',
+            required: false,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpFormBody',
+            renderTypeList: ['hidden'],
+            valueType: 'any',
+            value: [],
+            label: '',
+            required: false,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          },
+          {
+            key: 'system_httpContentType',
+            renderTypeList: ['hidden'],
+            valueType: 'string',
+            value: 'json',
+            label: '',
+            required: false,
+            valueDesc: '',
+            description: '',
+            debugLabel: '',
+            toolDescription: ''
+          }
+        ],
+        outputs: [
+          {
+            id: 'system_addOutputParam',
+            key: 'system_addOutputParam',
+            type: 'dynamic',
+            valueType: 'dynamic',
+            label: '输出字段提取',
+            customFieldConfig: {
+              selectValueTypeList: [
+                'string',
+                'number',
+                'boolean',
+                'object',
+                'arrayString',
+                'arrayNumber',
+                'arrayBoolean',
+                'arrayObject',
+                'arrayAny',
+                'any',
+                'chatHistory',
+                'datasetQuote',
+                'dynamic',
+                'selectApp',
+                'selectDataset'
+              ],
+              showDescription: false,
+              showDefaultValue: false
+            },
+            description: '可以通过 JSONPath 语法来提取响应值中的指定字段',
+            valueDesc: ''
+          },
+          {
+            id: 'error',
+            key: 'error',
+            label: '请求错误',
+            description: 'HTTP请求错误信息，成功时返回空',
+            valueType: 'object',
+            type: 'static',
+            valueDesc: ''
+          },
+          {
+            id: 'httpRawResponse',
+            key: 'httpRawResponse',
+            required: true,
+            label: '原始响应',
+            description: 'HTTP请求的原始响应。只能接受字符串或JSON类型响应数据。',
+            valueType: 'any',
+            type: 'static',
+            valueDesc: ''
+          }
+        ]
+      }
+    ],
+    edges: [
+      {
+        source: 'pluginInput',
+        target: 'vumlECDQTjeC',
+        sourceHandle: 'pluginInput-source-right',
+        targetHandle: 'vumlECDQTjeC-target-left'
+      },
+      {
+        source: 'vumlECDQTjeC',
+        target: 'pluginOutput',
+        sourceHandle: 'vumlECDQTjeC-source-right',
+        targetHandle: 'pluginOutput-target-left'
+      }
+    ],
+    chatConfig: {
+      questionGuide: {
+        open: false,
+        model: 'gpt-4o-mini',
+        customPrompt:
+          "You are an AI assistant tasked with predicting the user's next question based on the conversation history. Your goal is to generate 3 potential questions that will guide the user to continue the conversation. When generating these questions, adhere to the following rules:\n\n1. Use the same language as the user's last question in the conversation history.\n2. Keep each question under 20 characters in length.\n\nAnalyze the conversation history provided to you and use it as context to generate relevant and engaging follow-up questions. Your predictions should be logical extensions of the current topic or related areas that the user might be interested in exploring further.\n\nRemember to maintain consistency in tone and style with the existing conversation while providing diverse options for the user to choose from. Your goal is to keep the conversation flowing naturally and help the user delve deeper into the subject matter or explore related topics."
+      },
+      ttsConfig: {
+        type: 'web'
+      },
+      whisperConfig: {
+        open: false,
+        autoSend: false,
+        autoTTSResponse: false
+      },
+      chatInputGuide: {
+        open: false,
+        textList: [],
+        customUrl: ''
+      },
+      instruction: '',
+      autoExecute: {
+        open: false,
+        defaultPrompt: ''
+      },
+      variables: [],
+      welcomeText: ''
+    }
+  };
+};
diff --git a/projects/app/src/web/core/app/utils.ts b/projects/app/src/web/core/app/utils.ts
index f0bd045c8271..5a8546a58b34 100644
--- a/projects/app/src/web/core/app/utils.ts
+++ b/projects/app/src/web/core/app/utils.ts
@@ -40,6 +40,7 @@ import {
   Input_Template_UserChatInput
 } from '@fastgpt/global/core/workflow/template/input';
 import { workflowStartNodeId } from './constants';
+import { getDefaultAppForm } from '@fastgpt/global/core/app/utils';
 
 type WorkflowType = {
   nodes: StoreNodeItemType[];
@@ -515,6 +516,13 @@ export function form2AppWorkflow(
     chatConfig: data.chatConfig
   };
 }
+export function filterSensitiveFormData(appForm: AppSimpleEditFormType) {
+  const defaultAppForm = getDefaultAppForm();
+  return {
+    ...appForm,
+    dataset: defaultAppForm.dataset
+  };
+}
 
 export const workflowSystemVariables: EditorVariablePickerType[] = [
   {