diff --git a/apps/builder/src/api/base.ts b/apps/builder/src/api/base.ts
index 440bd1c2ce..8a9b8cef13 100644
--- a/apps/builder/src/api/base.ts
+++ b/apps/builder/src/api/base.ts
@@ -25,7 +25,7 @@ const axios = Axios.create({
 })
 
 axios.interceptors.request.use(
-  (config) => {
+  config => {
     addRequestPendingPool(config)
     const token = getLocalStorage("token")
     if (token) {
@@ -36,13 +36,13 @@ axios.interceptors.request.use(
     }
     return config
   },
-  (err) => {
+  err => {
     return Promise.reject(err)
   },
 )
 
 axios.interceptors.response.use(
-  (response) => {
+  response => {
     const { config } = response
     removeRequestPendingPool(config)
     return response
@@ -80,7 +80,7 @@ export class Api {
     errorState?.(false)
     axios
       .request<RespData, AxiosResponse<RespData>, RequestBody>(config)
-      .then((response) => {
+      .then(response => {
         loading?.(false)
         errorState?.(false)
         success?.(response)
diff --git a/apps/builder/src/api/helpers/axiosPendingPool.tsx b/apps/builder/src/api/helpers/axiosPendingPool.tsx
index 539be68d67..cc1893617c 100644
--- a/apps/builder/src/api/helpers/axiosPendingPool.tsx
+++ b/apps/builder/src/api/helpers/axiosPendingPool.tsx
@@ -12,7 +12,7 @@ export const generateUniqueKey = (config: AxiosRequestConfig) =>
   ].join("/")
 
 export const clearRequestPendingPool = () => {
-  pendingPollMap.forEach((cancel) => {
+  pendingPollMap.forEach(cancel => {
     cancel?.()
   })
   pendingPollMap.clear()
diff --git a/apps/builder/src/api/ws/index.ts b/apps/builder/src/api/ws/index.ts
index 44b096856a..261a060fd8 100644
--- a/apps/builder/src/api/ws/index.ts
+++ b/apps/builder/src/api/ws/index.ts
@@ -229,14 +229,14 @@ function resetHeartbeat(ws: ILLAWebSocket) {
 
 function reconnect(ws: ILLAWebSocket) {
   clearWSTimeout(ws)
-  const callNow = !ws.debounceTimeout
-  ws.debounceTimeout = setTimeout(() => {
-    ws.debounceTimeout = null
-    reconnect(ws)
-  }, RECONNECT_TIMEOUT)
-  if (callNow) {
-    generateWs(ws.url)
-  }
+  // const callNow = !ws.debounceTimeout
+  // ws.debounceTimeout = setTimeout(() => {
+  //   ws.debounceTimeout = null
+  //   reconnect(ws)
+  // }, RECONNECT_TIMEOUT)
+  // if (callNow) {
+  //   generateWs(ws.url)
+  // }
 }
 
 function initWsConfig(ws: ILLAWebSocket) {
diff --git a/apps/builder/src/auth/index.tsx b/apps/builder/src/auth/index.tsx
index ed4912d011..71127ff05d 100644
--- a/apps/builder/src/auth/index.tsx
+++ b/apps/builder/src/auth/index.tsx
@@ -12,7 +12,7 @@ interface CheckIsLoginWrapperProps {
   children: ReactNode
 }
 
-export const CheckIsLogin: FC<CheckIsLoginWrapperProps> = (props) => {
+export const CheckIsLogin: FC<CheckIsLoginWrapperProps> = props => {
   const { children } = props
   const navigate = useNavigate()
   const token = getLocalStorage("token")
@@ -31,7 +31,7 @@ export const CheckIsLogin: FC<CheckIsLoginWrapperProps> = (props) => {
           url: "/users",
           method: "GET",
         },
-        (response) => {
+        response => {
           // TIPS: can check user role
           dispatch(
             currentUserActions.updateCurrentUserReducer({
diff --git a/apps/builder/src/components/CodeEditor/CodePreview.tsx b/apps/builder/src/components/CodeEditor/CodePreview.tsx
index 35f3ec4a5e..0ee7b9bec3 100644
--- a/apps/builder/src/components/CodeEditor/CodePreview.tsx
+++ b/apps/builder/src/components/CodeEditor/CodePreview.tsx
@@ -24,7 +24,7 @@ function copyToClipboard(content: any) {
   Message.success("copied to clipboard")
 }
 
-export const CodePreview: FC<CodePreviewProps> = (props) => {
+export const CodePreview: FC<CodePreviewProps> = props => {
   const { className, preview, ...otherProps } = props
 
   return (
diff --git a/apps/builder/src/components/CodeEditor/TernSever/HintTooltip/index.tsx b/apps/builder/src/components/CodeEditor/TernSever/HintTooltip/index.tsx
index 1b87eba2a6..c9182315d2 100644
--- a/apps/builder/src/components/CodeEditor/TernSever/HintTooltip/index.tsx
+++ b/apps/builder/src/components/CodeEditor/TernSever/HintTooltip/index.tsx
@@ -38,7 +38,7 @@ const formatEvaluate = (data: any) => {
   return format
 }
 
-const Evaluate: FC<{ type: string; data?: any }> = (props) => {
+const Evaluate: FC<{ type: string; data?: any }> = props => {
   const { type, data } = props
 
   return (
@@ -83,7 +83,7 @@ const handleTernCompletions = (data: TypeQueryResult): TransQuery => {
   return result
 }
 
-export const HintTooltip: FC<HintTooltipProps> = (props) => {
+export const HintTooltip: FC<HintTooltipProps> = props => {
   const { current: data } = useRef(handleTernCompletions(props.data))
   const { globalData: executionResult = {} } = props
 
diff --git a/apps/builder/src/components/CodeEditor/TernSever/index.tsx b/apps/builder/src/components/CodeEditor/TernSever/index.tsx
index d630cce0d0..36cd2f9d28 100644
--- a/apps/builder/src/components/CodeEditor/TernSever/index.tsx
+++ b/apps/builder/src/components/CodeEditor/TernSever/index.tsx
@@ -3,7 +3,7 @@ import "codemirror/addon/tern/tern"
 import "./tern/tern"
 import ecmascript from "tern/defs/ecmascript.json"
 import CodeMirror from "codemirror"
-import ReactDOM from "react-dom"
+import { render } from "react-dom"
 import { TypeQueryResult } from "tern/lib/tern"
 import { isObject } from "@illa-design/system"
 import { getValueType } from "@/components/CodeEditor/utils"
@@ -159,7 +159,7 @@ export const TernServer = (
     // @ts-ignore: type define error
     completionTip: (completion: TypeQueryResult) => {
       let div = document.createElement("div")
-      ReactDOM.render(<HintTooltip data={completion} />, div)
+      render(<HintTooltip data={completion} />, div)
       return div
     },
   })
@@ -171,7 +171,7 @@ export const BaseTern = new CodeMirror.TernServer({
   // @ts-ignore: type define error
   completionTip: (completion: TypeQueryResult) => {
     let div = document.createElement("div")
-    ReactDOM.render(<HintTooltip data={completion} />, div)
+    render(<HintTooltip data={completion} />, div)
     return div
   },
 })
diff --git a/apps/builder/src/components/CodeEditor/hinter.tsx b/apps/builder/src/components/CodeEditor/hinter.tsx
index f87d90300c..2e305a4248 100644
--- a/apps/builder/src/components/CodeEditor/hinter.tsx
+++ b/apps/builder/src/components/CodeEditor/hinter.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom"
+import { render } from "react-dom"
 import CodeMirror, { Hint, Hints } from "codemirror"
 import "codemirror/addon/hint/sql-hint"
 import "codemirror/addon/hint/javascript-hint"
@@ -9,12 +9,13 @@ import { AutoCompleteItem } from "./AutoComplete"
 
 let origJsHint = CodeMirror.hint.javascript
 CodeMirror.hint.javascript = async function (cm, option) {
-  let inner = (await origJsHint(cm, option)) || {
-    from: cm.getCursor(),
-    to: cm.getCursor(),
-    list: [],
-  }
-  return inner
+  return (
+    (await origJsHint(cm, option)) || {
+      from: cm.getCursor(),
+      to: cm.getCursor(),
+      list: [],
+    }
+  )
 }
 
 const transHinters = (inner: Hints) => {
@@ -27,7 +28,7 @@ const transHinters = (inner: Hints) => {
       text: item,
       render: (elt: HTMLLIElement) => {
         let div = document.createElement("div")
-        ReactDOM.render(<AutoCompleteItem content={item as string} />, div)
+        render(<AutoCompleteItem content={item as string} />, div)
         elt?.appendChild(div)
       },
     })
@@ -63,7 +64,7 @@ CodeMirror.hint.xml = async function (cm, option) {
 
 let origHtmlHint = CodeMirror.hint.html
 CodeMirror.hint.html = async function (cm, option) {
-  let inner = (await origXmlHint(cm, option)) || {
+  let inner = (await origHtmlHint(cm, option)) || {
     from: cm.getCursor(),
     to: cm.getCursor(),
     list: [],
diff --git a/apps/builder/src/components/CodeEditor/index.tsx b/apps/builder/src/components/CodeEditor/index.tsx
index 3019087670..b010c98ac6 100644
--- a/apps/builder/src/components/CodeEditor/index.tsx
+++ b/apps/builder/src/components/CodeEditor/index.tsx
@@ -1,12 +1,6 @@
-import React, {
-  FC,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import { css, Global } from "@emotion/react"
+/* eslint-disable */
+import { FC, useContext, useEffect, useRef, useState } from "react"
+import { Global } from "@emotion/react"
 import { debounce, get } from "lodash"
 import CodeMirror, { Editor } from "codemirror"
 import "codemirror/lib/codemirror.css"
@@ -36,7 +30,7 @@ import {
 import { clearMarks, lineMarker } from "@/components/CodeEditor/lintHelper"
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
-export const CodeEditor: FC<CodeEditorProps> = props => {
+export const CodeEditor: FC<CodeEditorProps> = (props) => {
   const {
     className,
     mode = "TEXT_JS",
@@ -83,7 +77,7 @@ export const CodeEditor: FC<CodeEditorProps> = props => {
     setFocus(true)
   }
 
-  const handleBlur = (instance: Editor, event: FocusEvent) => {
+  const handleBlur = () => {
     latestProps.current?.onBlur?.()
     setFocus(false)
     setPreviewVisible(false)
@@ -127,10 +121,10 @@ export const CodeEditor: FC<CodeEditorProps> = props => {
       const error = get(executionError, path)
       const result = get(executionResult, path)
       if (error) {
-        const evalError = error?.find(item => {
+        const evalError = error?.find((item) => {
           return item.errorType !== "LINT"
         })
-        const lintError = error?.find(item => {
+        const lintError = error?.find((item) => {
           return item.errorType === "LINT"
         })
         if (evalError) {
@@ -154,7 +148,7 @@ export const CodeEditor: FC<CodeEditorProps> = props => {
     }
   }, [executionError, executionResult, path])
 
-  const handleChange = (editor: Editor, change: CodeMirror.EditorChange) => {
+  const handleChange = (editor: Editor) => {
     const currentValue = editor?.getValue()
     clearMarks(editor)
     if (path) {
@@ -298,7 +292,7 @@ export const CodeEditor: FC<CodeEditorProps> = props => {
         content={<CodePreview preview={preview} />}
         showArrow={false}
         colorScheme="white"
-        onVisibleChange={visible => {
+        onVisibleChange={(visible) => {
           if (visible !== previewVisible && focus) {
             setPreviewVisible(true)
           }
diff --git a/apps/builder/src/components/CodeEditor/interface.ts b/apps/builder/src/components/CodeEditor/interface.ts
index 80294c2b2b..fffaa9b84e 100644
--- a/apps/builder/src/components/CodeEditor/interface.ts
+++ b/apps/builder/src/components/CodeEditor/interface.ts
@@ -10,6 +10,7 @@ export enum EditorModes {
   SQL_JS = "sql-js",
   XML_JS = "xml-js",
   HTML_JS = "html-js",
+  Postgre_SQL_JS = "postgre_sql_js",
 }
 
 export type EditorMode = keyof typeof EditorModes
diff --git a/apps/builder/src/components/CodeEditor/lintHelper.tsx b/apps/builder/src/components/CodeEditor/lintHelper.tsx
index 5d828f3006..dab08c4cd2 100644
--- a/apps/builder/src/components/CodeEditor/lintHelper.tsx
+++ b/apps/builder/src/components/CodeEditor/lintHelper.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom"
+import { render } from "react-dom"
 import { JSHINT } from "jshint"
 import { Editor } from "codemirror"
 import "codemirror/addon/lint/lint"
@@ -15,7 +15,7 @@ const GUTTER_ID = "CodeMirror-lint-markers"
 export const lineMarker = (cm: Editor, line: number) => {
   cm.clearGutter(GUTTER_ID)
   const div = document.createElement("div")
-  ReactDOM.render(
+  render(
     <div className={"CodeMirror-lint-marker CodeMirror-lint-marker-error"} />,
     div,
   )
diff --git a/apps/builder/src/components/CodeEditor/modes.ts b/apps/builder/src/components/CodeEditor/modes.ts
index 36caf8f10b..e6102843e7 100644
--- a/apps/builder/src/components/CodeEditor/modes.ts
+++ b/apps/builder/src/components/CodeEditor/modes.ts
@@ -1,4 +1,4 @@
-import CodeMirror from "codemirror"
+import { defineMode, getMode, multiplexingMode } from "codemirror"
 import "codemirror/addon/mode/multiplex"
 import "codemirror/mode/javascript/javascript"
 import "codemirror/mode/htmlmixed/htmlmixed"
@@ -11,78 +11,79 @@ import "codemirror/addon/hint/javascript-hint"
 
 import { EditorModes } from "./interface"
 
-CodeMirror.defineMode(EditorModes.TEXT_JS, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, EditorModes.TEXT),
-    {
-      open: "{{",
-      close: "}}",
-      mode: CodeMirror.getMode(config, {
-        name: "application/json",
-      }),
-      delimStyle: "illa-expression",
-      innerStyle: "illa-expression",
-      parseDelimiters: false,
-    },
-  )
+defineMode(EditorModes.Postgre_SQL_JS, function (config) {
+  return multiplexingMode(getMode(config, { name: "text/x-pgsql" }), {
+    open: "{{",
+    close: "}}",
+    mode: getMode(config, {
+      name: "application/json",
+    }),
+    delimStyle: "illa-expression",
+    innerStyle: "illa-expression",
+    parseDelimiters: false,
+  })
 })
 
-CodeMirror.defineMode(EditorModes.SQL_JS, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, { name: "text/x-mysql" }),
-    {
-      open: "{{",
-      close: "}}",
-      mode: CodeMirror.getMode(config, {
-        name: "application/json",
-      }),
-      delimStyle: "illa-expression",
-      innerStyle: "illa-expression",
-      parseDelimiters: false,
-    },
-  )
+defineMode(EditorModes.TEXT_JS, function (config) {
+  return multiplexingMode(getMode(config, EditorModes.TEXT), {
+    open: "{{",
+    close: "}}",
+    mode: getMode(config, {
+      name: "application/json",
+    }),
+    delimStyle: "illa-expression",
+    innerStyle: "illa-expression",
+    parseDelimiters: false,
+  })
 })
 
-CodeMirror.defineMode(EditorModes.XML_JS, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, { name: "application/xml" }),
-    {
-      open: "{{",
-      close: "}}",
-      mode: CodeMirror.getMode(config, {
-        name: "application/json",
-      }),
-      delimStyle: "illa-expression",
-      innerStyle: "illa-expression",
-      parseDelimiters: false,
-    },
-  )
+defineMode(EditorModes.SQL_JS, function (config) {
+  return multiplexingMode(getMode(config, { name: "text/x-mysql" }), {
+    open: "{{",
+    close: "}}",
+    mode: getMode(config, {
+      name: "application/json",
+    }),
+    delimStyle: "illa-expression",
+    innerStyle: "illa-expression",
+    parseDelimiters: false,
+  })
 })
 
-CodeMirror.defineMode(EditorModes.HTML_JS, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, { name: "text/html" }),
-    {
-      open: "{{",
-      close: "}}",
-      mode: CodeMirror.getMode(config, {
-        name: "application/json",
-      }),
-      delimStyle: "illa-expression",
-      innerStyle: "illa-expression",
-      parseDelimiters: false,
-    },
-  )
+defineMode(EditorModes.XML_JS, function (config) {
+  return multiplexingMode(getMode(config, { name: "application/xml" }), {
+    open: "{{",
+    close: "}}",
+    mode: getMode(config, {
+      name: "application/json",
+    }),
+    delimStyle: "illa-expression",
+    innerStyle: "illa-expression",
+    parseDelimiters: false,
+  })
+})
+
+defineMode(EditorModes.HTML_JS, function (config) {
+  return multiplexingMode(getMode(config, { name: "text/html" }), {
+    open: "{{",
+    close: "}}",
+    mode: getMode(config, {
+      name: "application/json",
+    }),
+    delimStyle: "illa-expression",
+    innerStyle: "illa-expression",
+    parseDelimiters: false,
+  })
 })
-CodeMirror.defineMode(EditorModes.JAVASCRIPT, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, {
+defineMode(EditorModes.JAVASCRIPT, function (config) {
+  return multiplexingMode(
+    getMode(config, {
       name: "application/javascript",
     }),
     {
       open: "{{",
       close: "}}",
-      mode: CodeMirror.getMode(config, {
+      mode: getMode(config, {
         name: "application/json",
       }),
       delimStyle: "illa-expression",
@@ -92,9 +93,9 @@ CodeMirror.defineMode(EditorModes.JAVASCRIPT, function (config) {
   )
 })
 
-CodeMirror.defineMode(EditorModes.JSON, function (config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, {
+defineMode(EditorModes.JSON, function (config) {
+  return multiplexingMode(
+    getMode(config, {
       name: "application/json",
       json: true,
       jsonld: true,
@@ -102,7 +103,7 @@ CodeMirror.defineMode(EditorModes.JSON, function (config) {
     {
       open: "{{",
       close: "}}",
-      mode: CodeMirror.getMode(config, {
+      mode: getMode(config, {
         name: "application/json",
       }),
       delimStyle: "illa-expression",
diff --git a/apps/builder/src/components/CodeEditor/style.ts b/apps/builder/src/components/CodeEditor/style.ts
index a43c599182..7b77fbfc05 100644
--- a/apps/builder/src/components/CodeEditor/style.ts
+++ b/apps/builder/src/components/CodeEditor/style.ts
@@ -200,3 +200,7 @@ export const contentTextStyle = css`
   font-weight: 400;
   word-wrap: break-word;
 `
+
+export const containerStyle = css`
+  overflow: scroll;
+`
\ No newline at end of file
diff --git a/apps/builder/src/components/EditableText/index.tsx b/apps/builder/src/components/EditableText/index.tsx
index 74562c16dc..4fa29900b1 100644
--- a/apps/builder/src/components/EditableText/index.tsx
+++ b/apps/builder/src/components/EditableText/index.tsx
@@ -8,7 +8,7 @@ import { EditableTextWrapperStyle, textStyle } from "./style"
 import { isValidDisplayName } from "@/utils/typeHelper"
 import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
 
-export const EditableText: FC<EditableTextProps> = (props) => {
+export const EditableText: FC<EditableTextProps> = props => {
   const { displayName, updateDisplayNameByBlur } = props
   const [inputValue, setInputValue] = useState(displayName)
   const [isFocusInput, setIsFocusInput] = useState(false)
diff --git a/apps/builder/src/components/JSONViewer/index.tsx b/apps/builder/src/components/JSONViewer/index.tsx
index 46d9cace67..49e41b6bfd 100644
--- a/apps/builder/src/components/JSONViewer/index.tsx
+++ b/apps/builder/src/components/JSONViewer/index.tsx
@@ -3,7 +3,7 @@ import ReactJson from "react-json-view"
 import { JSONViewerProps } from "./interface"
 import { jsonViewContainer } from "./style"
 
-export const JSONViewer: FC<JSONViewerProps> = (props) => {
+export const JSONViewer: FC<JSONViewerProps> = props => {
   const { data = {}, collapsed } = props
 
   const reactJsonConfig = {
diff --git a/apps/builder/src/constants/regExp.ts b/apps/builder/src/constants/regExp.ts
index f8ad464220..1a737304f6 100644
--- a/apps/builder/src/constants/regExp.ts
+++ b/apps/builder/src/constants/regExp.ts
@@ -1,2 +1 @@
-export const EMAIL_FORMAT =
-  /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
+export const EMAIL_FORMAT = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
diff --git a/apps/builder/src/hooks/useInitApp.tsx b/apps/builder/src/hooks/useInitApp.tsx
index c7a2feced0..54dc91248d 100644
--- a/apps/builder/src/hooks/useInitApp.tsx
+++ b/apps/builder/src/hooks/useInitApp.tsx
@@ -28,7 +28,7 @@ export const useInitBuilderApp = (model: IllaMode) => {
         method: "GET",
         signal: controller.signal,
       },
-      (response) => {
+      response => {
         dispatch(configActions.updateIllaMode(model))
         dispatch(appInfoActions.updateAppInfoReducer(response.data.appInfo))
         dispatch(
@@ -57,9 +57,9 @@ export const useInitBuilderApp = (model: IllaMode) => {
           dispatch(configActions.changeSelectedAction(response.data.actions[0]))
         }
       },
-      (e) => {},
-      (e) => {},
-      (loading) => {
+      e => {},
+      e => {},
+      loading => {
         setLoadingState(loading)
       },
     )
diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json
index d6465de58f..b54cf39d39 100644
--- a/apps/builder/src/i18n/locale/en-US.json
+++ b/apps/builder/src/i18n/locale/en-US.json
@@ -4,6 +4,7 @@
   "exit_preview": "Exit Preview",
   "edit": "Edit",
   "edit_at": "Edited at",
+  "created_at": "Created at",
   "title": "Welcome to illa",
   "description": {
     "part1": "This is an example without namespaces."
@@ -186,8 +187,9 @@
           "valid_name": "Can only contain letters, numbers, '_' or '$', start with '_' or a letter",
           "load_action_list_fail": "Failed to get Action list: {{message}}",
           "load_resource_fail": "Failed to get resource list: {{message}}",
-          "success_created": "Successfully created!",
-          "success_saved": "Successfully saved!",
+          "success_created": "Successfully created",
+          "success_saved": "Successfully saved",
+          "success_deleted": "Successfully deleted",
           "failed": "Failed to connect to server"
         },
         "action_generator": {
@@ -263,8 +265,7 @@
         "btn": {
           "back": "Back",
           "test_connection": "Test Connection",
-          "create_resource": "Create Resource",
-          "save_changes": "Save Changes"
+          "save_changes": "Save Resource"
         },
         "validate": {
           "required": "{name} is required"
@@ -279,14 +280,10 @@
             "external_reference": "You can create external references to variables you've defined. For example, {{ transformer2.value }}. "
           }
         },
-        "js_transformer": {
-          "name": "Transformer"
-        },
         "label": {
           "coming_soon": "Coming Soon"
         },
         "mysql": {
-          "name": "MySQL",
           "title": {
             "advanced_option": "Advanced Options"
           },
@@ -296,22 +293,46 @@
             "database": "Database",
             "username_password": "Username/Password",
             "connect_type": "Connect Type",
-            "connect_over_ssh": "Connect over SSH",
-            "ssh_hostname_port": "SSH Hostname/Port",
-            "ssh_credentials": "SSH Credentials",
             "private_key": "Private Key",
-            "ssh_passphrase": "SSH passphrase",
             "ssl_options": "SSL options",
-            "server_root_certificate": "Server Root Certificate",
+            "ca_certificate": "CA Cert",
+            "client_key": "Client Key",
+            "client_certificate": "Client Cert"
+          },
+          "tip": {
+            "username_password": "Credentials will be encrypted & stored securely on our servers.",
+            "connect_type": "Cloud: ILLA servers will securely connect to your database.",
+            "ssl_options": "SSL is used when available"
+          },
+          "placeholder": {
+            "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
+            "hostname": "Hostname",
+            "database": "acme_production",
+            "username": "Username",
+            "password": "Password",
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+          }
+        },
+        "postgresql": {
+          "title": {
+            "advanced_option": "Advanced Options"
+          },
+          "label": {
+            "name": "Name",
+            "hostname_port": "Hostname/Port",
+            "database": "Database",
+            "username_password": "Username/Password",
+            "connect_type": "Connect Type",
+            "private_key": "Private Key",
+            "ssl_options": "SSL options",
+            "ca_certificate": "CA Cert",
             "client_key": "Client Key",
-            "client_certificate": "Client Certificate"
+            "client_certificate": "Client Cert"
           },
           "tip": {
             "username_password": "Credentials will be encrypted & stored securely on our servers.",
             "connect_type": "Cloud: ILLA servers will securely connect to your database.",
-            "connect_over_ssh": "Useful to connect to private network",
-            "ssl_options": "SSL is used when available",
-            "ssh_passphrase": "used if provided"
+            "ssl_options": "SSL is used when available"
           },
           "placeholder": {
             "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
@@ -319,16 +340,13 @@
             "database": "acme_production",
             "username": "Username",
             "password": "Password",
-            "ssh_hostname_port": "e.g.localhost",
-            "ssh_credentials": "e.g.ec2-user",
-            "private_key": "e.g.path/to/root.crt",
-            "server_root_certificate": "e.g.path/to/root.crt",
-            "client_key": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----",
-            "client_certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
           }
         },
         "restapi": {
-          "name": "REST API",
+          "title": {
+            "advanced_option": "GENERAL"
+          },
           "label": {
             "name": "Name",
             "action_type": "Action Type",
@@ -370,8 +388,6 @@
             "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
             "api": "i.e.\"Internal Admin API\"",
             "database": "i.e.\"Users DB(readonly)\"",
-            "action_url_path_with_base_url": "api/v2/endpoint.json",
-            "action_url_path": "http://www.api.com/api/v2/endpoint.json",
             "base_url": "Use the absolute URL (e.g https://example.com)",
             "username": "username",
             "password": "password",
@@ -394,14 +410,35 @@
             "new": "New"
           }
         },
-        "postgres": {
-          "name": "Postgres"
-        },
         "redis": {
-          "name": "Redis"
-        },
-        "mongodb": {
-          "name": "MongoDB"
+          "title": {
+            "advanced_option": "Advanced Options"
+          },
+          "label": {
+            "name": "Name",
+            "hostname_port": "Hostname/Port",
+            "database": "Database",
+            "username_password": "Username/Password",
+            "connect_type": "Connect Type",
+            "private_key": "Private Key",
+            "ssl_options": "SSL options",
+            "ca_certificate": "CA Cert",
+            "client_key": "Client Key",
+            "client_certificate": "Client Cert"
+          },
+          "tip": {
+            "username_password": "Credentials will be encrypted & stored securely on our servers.",
+            "connect_type": "Cloud: ILLA servers will securely connect to your database.",
+            "ssl_options": "SSL is used when available"
+          },
+          "placeholder": {
+            "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
+            "hostname": "Hostname",
+            "database": "acme_production",
+            "username": "Username",
+            "password": "Password",
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+          }
         }
       },
       "result": {
@@ -451,6 +488,11 @@
         "style": "STYLE",
         "validation": "VALIDATION",
         "options": "OPTIONS",
+        "column": "COLUMNS",
+        "sort": "SORT",
+        "row_selection": "ROW SELECTION",
+        "pagination": "PAGINATION",
+        "toolbar": "TOOLBAR",
         "data": "DATA"
       },
       "setter_label": {
@@ -564,13 +606,25 @@
           "remove": "Remove dataset",
           "aggregation_method": "Aggregation method"
         },
+        "sort": "Sort",
+        "default_sort_key": "Column",
+        "default_sort_order": "Direction",
+        "column_title": "Column title",
+        "column_type": "Column type",
+        "enable_sorting": "Enable Sorting",
+        "decimal_places": "Decimal places",
+        "multi_row_selection": "Multi-Row Selection",
+        "overFlow": "OverFlow",
+        "download": "Download",
+        "filter": "Filter",
         "new_tab": "New tab",
         "description": "Description",
         "duration": "Duration",
         "data": "Data",
+        "empty_state": "Empty state",
         "chart_title": "Title",
         "x_axis_name": "X-axis name",
-        "Y_axis_name": "Y-axis name"
+        "y_axis_name": "Y-axis name"
       },
       "setter_tooltip": {
         "default_value": "The initial value of the input box. You can dynamically change the initial value of the input field by typing JavaScript in {{}}.",
@@ -592,7 +646,9 @@
         "loading": "Whether the component should show a loading indicator.",
         "progress_percentage": "The percentage value is between 0 and 100",
         "timeline_direction": "Change the direction of the timeline.",
-        "only_run_when": "Conditions that must be met before the event executes"
+        "only_run_when": "Conditions that must be met before the event executes",
+        "download": "Show download button in toolbar",
+        "filter": "Show filter button in toolbar"
       },
       "setter_default_value": {
         "fill": "Fill",
@@ -610,6 +666,11 @@
         }
       },
       "setter_content": {
+        "column_setter": {
+          "label": "Columns ({{number}})",
+          "title": "Title",
+          "new": "New"
+        },
         "option_list": {
           "action_menu": {
             "delete": "Delete",
@@ -634,6 +695,9 @@
           "prefabricated": "Prefabricated color"
         },
         "widget_action_type_name": {
+          "sortingChange": "Sort change",
+          "paginationChange": "Page change",
+          "columnFiltersChange": "Filter change",
           "click": "Click",
           "change": "Change",
           "focus": "Focus",
@@ -747,7 +811,11 @@
       "name": "Chart"
     },
     "table": {
-      "name": "Table"
+      "name": "Table",
+      "pagination": "Pagination",
+      "scroll": "Scroll",
+      "ascend": "Asc",
+      "descend": "Desc"
     }
   },
   "Setting": "Setting",
@@ -787,14 +855,15 @@
       "delete_success": "Deleted successfully",
       "delete_fail": "Failed to delete",
       "create_resource": "Create New",
-      "create_success": "Create Success!",
-      "edit_success": "Edit Success"
+      "save_success": "Save successfully",
+      "save_fail": "Failed to save",
+      "test_success": "Test successfully",
+      "test_fail": "Failed to test"
     }
   },
   "setting": {
     "account": {
       "email": "Email",
-      "uneditable": "uneditable",
       "title": "ACCOUNT",
       "username": "Username",
       "empty_username": "Please enter your username",
diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json
index fd0e5e595c..425683c784 100644
--- a/apps/builder/src/i18n/locale/zh-CN.json
+++ b/apps/builder/src/i18n/locale/zh-CN.json
@@ -4,6 +4,7 @@
   "exit_preview": "退出预览",
   "edit": "编辑",
   "edit_at": "上次编辑于",
+  "created_at": "创建于",
   "title": "欢迎来到艾拉云",
   "description": {
     "part1": "这是一个示例。"
@@ -186,8 +187,9 @@
           "valid_name": "仅能包含字母，数字，'_' 或 '$'， 请以 '_' 或字母开头",
           "load_action_list_fail": "获取 Action 列表失败: {{message}}",
           "load_resource_fail": "获取资源列表失败: {{message}}",
-          "success_created": "创建成功!",
-          "success_saved": "保存成功!",
+          "success_created": "创建成功",
+          "success_saved": "保存成功",
+          "success_deleted": "删除成功",
           "failed": "服务器连接失败"
         },
         "action_generator": {
@@ -230,8 +232,9 @@
           "run": "运行",
           "save": "保存",
           "save_and_run": "保存 & 运行",
-          "disable": "禁用",
-          "enable": "使用",
+          "save_fail": "保存失败",
+          "disable": "关闭",
+          "enable": "开启",
           "new": "新增"
         },
         "menu": {
@@ -262,8 +265,7 @@
         "btn": {
           "back": "后退",
           "test_connection": "测试连接",
-          "create_resource": "创建资源",
-          "save_changes": "保存修改"
+          "save_changes": "保存资源"
         },
         "validate": {
           "required": "请输入{name}"
@@ -278,14 +280,10 @@
             "external_reference": "您可以创建对已定义变量的外部引用。 例如 {{ transformer2.value }}"
           }
         },
-        "js_transformer": {
-          "name": "Transformer"
-        },
         "label": {
           "coming_soon": "即将更新"
         },
         "mysql": {
-          "name": "MySQL",
           "title": {
             "advanced_option": "高级配置"
           },
@@ -295,22 +293,16 @@
             "database": "数据库名称",
             "username_password": "用户名/密码",
             "connect_type": "连接类型",
-            "connect_over_ssh": "通过 SSH 连接",
-            "ssh_hostname_port": "SSH 主机名/端口",
-            "ssh_credentials": "SSH 凭证",
             "private_key": "私钥",
-            "ssh_passphrase": "SSH 密码",
             "ssl_options": "SSL 选项",
-            "server_root_certificate": "服务器根证书",
+            "ca_certificate": "服务端证书",
             "client_key": "客户端密钥",
             "client_certificate": "客户端证书"
           },
           "tip": {
             "username_password": "凭证将被加密并安全存储在我们的服务器上",
             "connect_type": "云服务器: ILLA 服务器将安全地连接到您的数据库",
-            "connect_over_ssh": "用于连接到专用网络",
-            "ssl_options": "可用时使用 SSL",
-            "ssh_passphrase": "如果提供则使用"
+            "ssl_options": "可用时使用 SSL"
           },
           "placeholder": {
             "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
@@ -318,16 +310,43 @@
             "database": "acme_production",
             "username": "用户名",
             "password": "密码",
-            "ssh_hostname_port": "e.g.localhost",
-            "ssh_credentials": "e.g.ec2-user",
-            "private_key": "e.g.path/to/root.crt",
-            "server_root_certificate": "e.g.path/to/root.crt",
-            "client_key": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----",
-            "client_certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+          }
+        },
+        "postgresql": {
+          "title": {
+            "advanced_option": "高级配置"
+          },
+          "label": {
+            "name": "名称",
+            "hostname_port": "主机/端口",
+            "database": "数据库名称",
+            "username_password": "用户名/密码",
+            "connect_type": "连接类型",
+            "private_key": "私钥",
+            "ssl_options": "SSL 选项",
+            "ca_certificate": "服务端证书",
+            "client_key": "客户端密钥",
+            "client_certificate": "客户端证书"
+          },
+          "tip": {
+            "username_password": "凭证将被加密并安全存储在我们的服务器上",
+            "connect_type": "云服务器: ILLA 服务器将安全地连接到您的数据库",
+            "ssl_options": "可用时使用 SSL"
+          },
+          "placeholder": {
+            "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
+            "hostname": "主机名",
+            "database": "acme_production",
+            "username": "用户名",
+            "password": "密码",
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
           }
         },
         "restapi": {
-          "name": "REST API",
+          "title": {
+            "advanced_option": "通用"
+          },
           "label": {
             "name": "名称",
             "action_type": "Action type",
@@ -361,7 +380,7 @@
           },
           "tip": {
             "get_req_auto_run": "(GET 请求) 当参数改变时会自动执行",
-            "name": "在 ILLA 中创建 actions 时的资源名称",
+            "name": "在 ILLA 中创建 Action 时的资源名称",
             "extra_body_values": "Extra body values are not passed for GET or HEAD requests",
             "configure_oauth2": "OAuth 2.0 is a complex spec. ILLA currently supports the server-side OAuth 2.0 authentication flow as well as the Client Credentials flow. In both cases, you must use the OAUTH2_TOKEN placeholder in order to inform ILLA where to place the OAuth access token in the API request. A common location for this is as a header such as Authorization: Bearer OAUTH2_TOKEN."
           },
@@ -369,8 +388,6 @@
             "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
             "api": "i.e.\"Internal Admin API\"",
             "database": "i.e.\"Users DB(readonly)\"",
-            "action_url_path_with_base_url": "api/v2/endpoint.json",
-            "action_url_path": "http://www.api.com/api/v2/endpoint.json",
             "base_url": "请使用绝对 URL (e.g https://example.com)",
             "username": "用户名",
             "password": "密码",
@@ -393,14 +410,35 @@
             "new": "新增"
           }
         },
-        "postgres": {
-          "name": "Postgres"
-        },
         "redis": {
-          "name": "Redis"
-        },
-        "mongodb": {
-          "name": "MongoDB"
+          "title": {
+            "advanced_option": "高级配置"
+          },
+          "label": {
+            "name": "名称",
+            "hostname_port": "主机/端口",
+            "database": "数据库名称",
+            "username_password": "用户名/密码",
+            "connect_type": "连接类型",
+            "private_key": "私钥",
+            "ssl_options": "SSL 选项",
+            "ca_certificate": "服务端证书",
+            "client_key": "客户端密钥",
+            "client_certificate": "客户端证书"
+          },
+          "tip": {
+            "username_password": "凭证将被加密并安全存储在我们的服务器上",
+            "connect_type": "云服务器: ILLA 服务器将安全地连接到您的数据库",
+            "ssl_options": "可用时使用 SSL"
+          },
+          "placeholder": {
+            "name": "i.e.\"Users DB(readonly)\" or \"Internal Admin API\"",
+            "hostname": "主机名",
+            "database": "acme_production",
+            "username": "用户名",
+            "password": "密码",
+            "certificate": "-----BEGIN CERTIFICATE-----\nMIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\nDTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4\n...\n-----END CERTIFICATE-----"
+          }
         }
       },
       "result": {
@@ -450,6 +488,10 @@
         "style": "风格",
         "validation": "验证",
         "options": "选项",
+        "column": "列",
+        "row_selection": "行选择",
+        "pagination": "翻页",
+        "toolbar": "工具栏",
         "data": "数据"
       },
       "setter_label": {
@@ -563,10 +605,21 @@
           "remove": "移除数据集",
           "aggregation_method": "聚合方式"
         },
+        "sort": "排序",
+        "default_sort_key": "排序列",
+        "default_sort_order": "顺序",
+        "column_title": "列标题",
+        "enable_sorting": "排序",
+        "decimal_places": "小数位数",
+        "multi_row_selection": "多行选择",
+        "overFlow": "翻页方式",
+        "download": "下载",
+        "filter": "筛选",
         "new_tab": "在新标签中打开",
         "description": "描述",
         "duration": "持续时间",
         "data": "数据",
+        "empty_state": "空状态",
         "chart_title": "标题",
         "x_axis_name": "横坐标名称",
         "y_axis_name": "纵坐标名称"
@@ -591,7 +644,9 @@
         "loading": "控制组件是否为加载状态。",
         "progress_percentage": "进度条的数值范围为 0-100",
         "timeline_direction": "切换时间轴的方向",
-        "only_run_when": "在此输入该事件执行前必须满足的条件"
+        "only_run_when": "在此输入该事件执行前必须满足的条件",
+        "download": "在工具栏显示下载按钮",
+        "filter": "在工具栏显示筛选按钮"
       },
       "setter_default_value": {
         "fill": "填充",
@@ -609,6 +664,11 @@
         }
       },
       "setter_content": {
+        "column_setter": {
+          "label": "列 ({{number}})",
+          "title": "标题",
+          "new": "新建"
+        },
         "option_list": {
           "action_menu": {
             "delete": "删除",
@@ -633,6 +693,9 @@
           "prefabricated": "Prefabricated color"
         },
         "widget_action_type_name": {
+          "sortingChange": "排序方式改变",
+          "paginationChange": "翻页配置改变",
+          "columnFiltersChange": "行筛选改变",
           "click": "单击",
           "change": "内容改变",
           "focus": "聚焦",
@@ -694,8 +757,7 @@
       "name": "日期选择器"
     },
     "date_range": {
-      "name": "日期范围选择器",
-      "start_date": "Start date"
+      "name": "Date range"
     },
     "image": {
       "name": "图片"
@@ -712,6 +774,12 @@
     "switch": {
       "name": "开关"
     },
+    "circle_progress": {
+      "name": "圆形进度条"
+    },
+    "bar_progress": {
+      "name": "条形进度条"
+    },
     "rate": {
       "name": "评分"
     },
@@ -719,12 +787,6 @@
       "name": "日期时间选择器",
       "placeholder": "请选择时间"
     },
-    "circle_progress": {
-      "name": "环形进度条"
-    },
-    "bar_progress": {
-      "name": "进度条"
-    },
     "divider_progress": {
       "name": "分割线"
     },
@@ -747,7 +809,11 @@
       "name": "图表"
     },
     "table": {
-      "name": "表格"
+      "name": "表格",
+      "pagination": "翻页",
+      "scroll": "滚动",
+      "ascend": "升序",
+      "descend": "降序"
     }
   },
   "Setting": "设置",
@@ -787,8 +853,10 @@
       "delete_success": "删除成功",
       "delete_fail": "删除失败",
       "create_resource": "创建资源",
-      "create_success": "创建成功！",
-      "edit_success": "修改成功"
+      "save_success": "保存成功",
+      "save_fail": "保存失败",
+      "test_success": "测试成功",
+      "test_fail": "测试失败"
     }
   },
   "setting": {
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/index.tsx
new file mode 100644
index 0000000000..f5f6aa5614
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/index.tsx
@@ -0,0 +1,32 @@
+import { FC } from "react"
+import { ActionTypeSelectorCardProps } from "./interface"
+import { applyItemStyle, comingStyle, nameStyle } from "./style"
+import { getIconFromActionType } from "@/page/App/components/Actions/getIcon"
+import { useTranslation } from "react-i18next"
+import { getActionNameFromActionType } from "@/utils/actionResourceTransformer"
+
+export const ActionCard: FC<ActionTypeSelectorCardProps> = (props) => {
+  const { actionType, onSelect, isDraft } = props
+  const { t } = useTranslation()
+
+  return (
+    <div
+      css={applyItemStyle(isDraft)}
+      onClick={() => {
+        if (!isDraft) {
+          onSelect?.(actionType)
+        }
+      }}
+    >
+      {getIconFromActionType(actionType, "24px")}
+      <span css={nameStyle}>{getActionNameFromActionType(actionType)}</span>
+      {isDraft && (
+        <span css={comingStyle}>
+          {t("editor.action.resource.label.coming_soon")}
+        </span>
+      )}
+    </div>
+  )
+}
+
+ActionCard.displayName = "ActionCard"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/interface.ts
new file mode 100644
index 0000000000..4eb4525327
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/interface.ts
@@ -0,0 +1,6 @@
+import { ActionDataItem } from "@/page/App/components/Actions/ActionGenerator/config"
+import { ActionType } from "@/redux/currentApp/action/actionState"
+
+export interface ActionTypeSelectorCardProps extends ActionDataItem {
+  onSelect?: (item: ActionType) => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/style.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/style.ts
new file mode 100644
index 0000000000..980c0ded77
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/style.ts
@@ -0,0 +1,56 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/theme"
+
+export function applyItemStyle(isDraft: boolean): SerializedStyles {
+  const draftStyle = isDraft
+    ? css`
+        pointer-events: auto;
+        cursor: not-allowed;
+      `
+    : css``
+
+  const hoverStyle = isDraft
+    ? css``
+    : css`
+        &:hover {
+          box-shadow: 0 4px 10px 0
+            ${globalColor(`--${illaPrefix}-blackAlpha-07`)};
+          background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)};
+          border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)};
+        }
+      `
+
+  return css`
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 0;
+    border-radius: 8px;
+    border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)};
+    position: relative;
+    display: flex;
+    background-color: ${globalColor(`--${illaPrefix}-white-01`)};
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    ${hoverStyle};
+    ${draftStyle};
+  `
+}
+
+export const nameStyle = css`
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+`
+
+export const comingStyle = css`
+  position: absolute;
+  border-radius: 0 0 4px 4px;
+  padding: 0 8px;
+  top: 0;
+  height: 16px;
+  background-color: ${getColor("techPurple", "07")};
+  font-size: 10px;
+  color: ${getColor("techPurple", "02")};
+`
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx
deleted file mode 100644
index b8d474a37f..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-import { forwardRef, useImperativeHandle, useState } from "react"
-import { css } from "@emotion/react"
-import { Controller, SubmitHandler, useForm } from "react-hook-form"
-import { Input, Password, TextArea } from "@illa-design/input"
-import { Switch } from "@illa-design/switch"
-import { InputNumber } from "@illa-design/input-number"
-import { useSelector } from "react-redux"
-import {
-  connectTextStyle,
-  descriptionStyle,
-  errorMessageStyle,
-  formStyle,
-  gridContainerStyle,
-  gridRowContainerStyle,
-  groupTitleStyle,
-  labelTextStyle,
-  requiredLabelTextStyle,
-  splitLineStyle,
-  formPaddingStyle,
-  hostnamePortStyle,
-  switchAreaStyle,
-  switchDescriptionStyle,
-  usernamePasswordStyle,
-  applyGridColIndex,
-} from "./style"
-import { MySQLConfigureProps, MySQLConfigureValues } from "./interface"
-import i18n from "@/i18n/config"
-import { getAllResources } from "@/redux/resource/resourceSelector"
-import { MysqlResource } from "@/redux/resource/resourceState"
-
-export const MySQLConfigure = forwardRef<HTMLFormElement, MySQLConfigureProps>(
-  (props, ref) => {
-    const { resourceId, connectionRef, onSubmit, onTestConnection } = props
-    const resourceConfig = useSelector(getAllResources).find(
-      (i) => i.resourceId === resourceId,
-    )
-    const [enableSSL, setEnableSSL] = useState(
-      (resourceConfig?.content as MysqlResource)?.ssl?.ssl,
-    )
-    const {
-      handleSubmit,
-      control,
-      formState: { errors },
-      getValues,
-      trigger,
-    } = useForm<MySQLConfigureValues>({
-      mode: "onChange",
-      defaultValues: {
-        resourceName: resourceConfig?.resourceName,
-        ...resourceConfig?.content,
-      } || {
-        port: 3306,
-      },
-    })
-
-    const testConnection = () => {
-      const data = getValues()
-      const { resourceName, ...content } = data
-
-      trigger().then((res)=>{
-        if (res) {
-          onTestConnection?.({
-            resourceName: resourceName,
-            resourceType: "mysql",
-            content: {
-              ...content,
-              port: content.port?.toString(),
-            },
-          })
-        }
-      })
-    }
-
-    useImperativeHandle(connectionRef, () => {
-      {
-        return { testConnection }
-      }
-    })
-
-    const submitForm: SubmitHandler<MySQLConfigureValues> = (data) => {
-      const { resourceName, ...content } = data
-      onSubmit?.({
-        resourceName: resourceName,
-        resourceType: "mysql",
-        content: {
-          ...content,
-          port: content.port?.toString(),
-          ssh: { ssh: false },
-          ssl: { ...content.ssl, ssl: enableSSL },
-        },
-      })
-    }
-    return (
-      <form onSubmit={handleSubmit(submitForm)} css={formStyle} ref={ref}>
-        <div css={css(gridContainerStyle, formPaddingStyle)}>
-          <div css={gridRowContainerStyle}>
-            <label css={requiredLabelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.name")}
-            </label>
-            <Controller
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  placeholder={i18n.t(
-                    "editor.action.resource.mysql.placeholder.database",
-                  )}
-                  error={!!errors.resourceName}
-                  maxLength={200}
-                  borderColor="techPurple"
-                />
-              )}
-              rules={{
-                required: i18n.t("editor.action.form.required") as string,
-              }}
-              control={control}
-              name="resourceName"
-            />
-            {errors.resourceName && (
-              <div css={css(errorMessageStyle, applyGridColIndex(2))}>
-                {errors.resourceName.message}
-              </div>
-            )}
-          </div>
-          <div css={gridRowContainerStyle}>
-            <label css={requiredLabelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.hostname_port")}
-            </label>
-            <div css={hostnamePortStyle}>
-              <Controller
-                render={({ field }) => (
-                  <Input
-                    {...field}
-                    placeholder={i18n.t(
-                      "editor.action.resource.mysql.placeholder.hostname",
-                    )}
-                    error={!!errors.host}
-                    maxLength={200}
-                    borderColor="techPurple"
-                  />
-                )}
-                control={control}
-                name="host"
-                rules={{
-                  required: i18n.t("editor.action.form.required") as string,
-                }}
-              />
-              <Controller
-                render={({ field }) => (
-                  <InputNumber
-                    {...field}
-                    placeholder="3306"
-                    error={!!errors.port}
-                    borderColor="techPurple"
-                  />
-                )}
-                control={control}
-                name="port"
-                rules={{
-                  required: i18n.t("editor.action.form.required") as string,
-                }}
-              />
-            </div>
-            {(errors.host || errors.port) && (
-              <div css={css(hostnamePortStyle, applyGridColIndex(2))}>
-                <div css={errorMessageStyle}>{errors.host?.message}</div>
-                <div css={errorMessageStyle}>{errors.port?.message}</div>
-              </div>
-            )}
-          </div>
-          <div css={gridRowContainerStyle}>
-            <label css={requiredLabelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.database")}
-            </label>
-            <Controller
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  error={!!errors.databaseName}
-                  placeholder={i18n.t(
-                    "editor.action.resource.mysql.placeholder.database",
-                  )}
-                  borderColor="techPurple"
-                />
-              )}
-              control={control}
-              name="databaseName"
-              rules={{
-                required: i18n.t("editor.action.form.required") as string,
-              }}
-            />
-            {errors.databaseName && (
-              <div css={css(errorMessageStyle, applyGridColIndex(2))}>
-                {errors.databaseName.message}
-              </div>
-            )}
-          </div>
-          <div css={gridRowContainerStyle}>
-            <label css={labelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.username_password")}
-            </label>
-            <div css={usernamePasswordStyle}>
-              <Controller
-                render={({ field }) => (
-                  <Input
-                    {...field}
-                    placeholder={i18n.t(
-                      "editor.action.resource.mysql.placeholder.username",
-                    )}
-                    borderColor="techPurple"
-                  />
-                )}
-                control={control}
-                name="databaseUsername"
-              />
-              <Controller
-                render={({ field }) => (
-                  <Password
-                    {...field}
-                    invisibleButton={false}
-                    placeholder={i18n.t(
-                      "editor.action.resource.mysql.placeholder.password",
-                    )}
-                    borderColor="techPurple"
-                  />
-                )}
-                control={control}
-                name="databasePassword"
-              />
-            </div>
-            <div css={css(descriptionStyle, applyGridColIndex(2))}>
-              {i18n.t("editor.action.resource.mysql.tip.username_password")}
-            </div>
-          </div>
-          <div css={gridRowContainerStyle}>
-            <label css={labelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.connect_type")}
-            </label>
-            <div css={connectTextStyle}>
-              {i18n.t("editor.action.resource.mysql.tip.connect_type")}
-            </div>
-          </div>
-          <div css={splitLineStyle} />
-          <h4 css={groupTitleStyle}>
-            {i18n.t("editor.action.resource.mysql.title.advanced_option")}
-          </h4>
-          <div css={gridRowContainerStyle}>
-            <label css={labelTextStyle}>
-              {i18n.t("editor.action.resource.mysql.label.ssl_options")}
-            </label>
-            <div css={switchAreaStyle}>
-              <Switch
-                colorScheme="techPurple"
-                checked={enableSSL}
-                onChange={(val) => {
-                  setEnableSSL(val)
-                }}
-              />
-              <div css={switchDescriptionStyle}>
-                <div css={connectTextStyle}>
-                  {i18n.t("editor.action.resource.mysql.tip.ssl_options")}
-                </div>
-              </div>
-            </div>
-          </div>
-          {enableSSL && (
-            <>
-              <div css={gridRowContainerStyle}>
-                <label css={labelTextStyle}>
-                  {i18n.t(
-                    "editor.action.resource.mysql.label.server_root_certificate",
-                  )}
-                </label>
-                <Controller
-                  name="ssl.serverCert"
-                  render={({ field }) => (
-                    <Input {...field} borderColor="techPurple" />
-                  )}
-                  control={control}
-                />
-              </div>
-              <div css={gridRowContainerStyle}>
-                <label css={labelTextStyle}>
-                  {i18n.t("editor.action.resource.mysql.label.client_key")}
-                </label>
-                <Controller
-                  name="ssl.clientKey"
-                  render={({ field }) => (
-                    <TextArea
-                      {...field}
-                      placeholder={i18n.t(
-                        "editor.action.resource.mysql.placeholder.client_key",
-                      )}
-                      borderColor="techPurple"
-                      autoSize={{ minRows: 4 }}
-                    />
-                  )}
-                  control={control}
-                />
-              </div>
-              <div css={gridRowContainerStyle}>
-                <label css={labelTextStyle}>
-                  {i18n.t(
-                    "editor.action.resource.mysql.label.client_certificate",
-                  )}
-                </label>
-                <Controller
-                  render={({ field }) => (
-                    <TextArea
-                      {...field}
-                      placeholder={i18n.t(
-                        "editor.action.resource.mysql.placeholder.client_certificate",
-                      )}
-                      borderColor="techPurple"
-                      autoSize={{ minRows: 4 }}
-                    />
-                  )}
-                  control={control}
-                  name="ssl.clientCert"
-                />
-              </div>
-            </>
-          )}
-        </div>
-      </form>
-    )
-  },
-)
-
-MySQLConfigure.displayName = "MySQLConfigure"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/interface.ts
deleted file mode 100644
index 1fb308c964..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/interface.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { RefObject } from "react"
-import { ConnectionRef } from "../interface"
-import { MysqlResource, Resource } from "@/redux/resource/resourceState"
-
-export interface MySQLConfigureProps {
-  resourceId?: string
-  connectionRef: RefObject<ConnectionRef>
-  onSubmit?: (data: Partial<Resource<MysqlResource>>) => void
-  onTestConnection?: (data: Partial<Resource<MysqlResource>>) => void
-}
-
-export interface MySQLConfigureValues extends MysqlResource {
-  resourceName: string
-}
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style.ts
deleted file mode 100644
index 06874845e6..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-/* Common CSS for all form */
-import { css } from "@emotion/react"
-import { SerializedStyles } from "@emotion/serialize"
-import { globalColor, illaPrefix } from "@illa-design/theme"
-import { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH } from "@/style"
-
-export const formStyle = css`
-  overflow: auto;
-  padding: 0 24px;
-  max-height: 716px;
-`
-
-/* form grid */
-export const gridContainerStyle = css`
-  display: grid;
-  grid: auto/repeat(auto-fit, 152px minmax(280px, 1fr));
-  grid-gap: 16px;
-  white-space: nowrap;
-  overflow: auto;
-`
-
-export const gridRowContainerStyle = css`
-  grid-gap: 8px 16px;
-  grid-column: span 2;
-  grid: auto/repeat(auto-fit, 152px minmax(280px, 1fr));
-  display: grid;
-`
-
-function applyMediaQueryStyle(
-  leftPanelVisible: boolean,
-  rightPanelVisible: boolean,
-  style: SerializedStyles,
-): SerializedStyles {
-  const MEDIA_QUERY_WIDTH = 1600
-  const WIDTH_THRESHOLD = 1000
-
-  const active =
-    MEDIA_QUERY_WIDTH -
-      (leftPanelVisible ? LEFT_PANEL_WIDTH : 0) -
-      (rightPanelVisible ? RIGHT_PANEL_WIDTH : 0) <=
-    WIDTH_THRESHOLD
-
-  if (!active) {
-    return css``
-  }
-
-  return css`
-    @media screen and (max-width: ${MEDIA_QUERY_WIDTH}px) {
-      ${style}
-    }
-  `
-}
-
-export const gridRowCenterItemStyle = css`
-  align-items: center;
-`
-
-export function applyGridColIndex(index: number): SerializedStyles {
-  return css`
-    grid-column-start: ${index};
-  `
-}
-
-export const emptyFillingStyle = css`
-  grid-column: span 2;
-`
-
-export const splitLineStyle = css`
-  display: inline-block;
-  grid-column: span 2;
-  height: 1px;
-  width: 100%;
-  background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
-`
-
-export const labelTextStyle = css`
-  display: flex;
-  justify-content: end;
-  align-items: flex-start;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: right;
-  line-height: 32px;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-  white-space: pre;
-`
-
-export const labelTextAlignSelfStartStyle = css`
-  align-self: flex-start;
-  /* vertical center to input, lineHeight same with input */
-  line-height: 30px;
-`
-
-export const dynamicLabelTextStyle = css`
-  display: flex;
-  justify-content: end;
-  padding-top: 5px;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: right;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-  white-space: pre;
-`
-
-export const connectTextStyle = css`
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  font-size: 14px;
-  text-align: right;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-  white-space: pre;
-`
-
-export const requiredLabelTextStyle = css`
-  ${labelTextStyle};
-  position: relative;
-
-  &:before {
-    content: "*";
-    margin-right: 5px;
-    font-weight: 500;
-    color: ${globalColor(`--${illaPrefix}-red-03`)};
-  }
-`
-
-export const groupTitleStyle = css`
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  line-height: 1.57;
-  font-weight: 500;
-  text-align: right;
-  margin: 0;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
-  grid-column: span 2;
-`
-
-export const actionTextStyle = css`
-  cursor: pointer;
-  color: ${globalColor(`--${illaPrefix}-techPurple-01`)};
-  transition: color 0.2s ease-in-out;
-  justify-self: start;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-
-  &:hover {
-    color: ${globalColor(`--${illaPrefix}-techPurple-03`)};
-  }
-`
-
-export const descriptionStyle = css`
-  display: grid;
-  align-items: center;
-  font-size: 14px;
-  line-height: 1.57;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
-  margin: 0;
-`
-
-export const errorMessageStyle = css`
-  font-size: 14px;
-  color: ${globalColor(`--${illaPrefix}-red-03`)};
-  line-height: 1.57;
-`
-
-export const hostnamePortStyle = css`
-  display: grid;
-  grid-column-gap: 8px;
-  grid-template-columns: 1fr 142px;
-`
-
-export const usernamePasswordStyle = css`
-  display: grid;
-  grid-column-gap: 8px;
-  grid-template-columns: 1fr 1fr;
-`
-
-export const switchAreaStyle = css`
-  display: flex;
-  align-items: center;
-`
-export const switchDescriptionStyle = css`
-  display: inline-block;
-  margin-left: 8px;
-`
-
-export const formPaddingStyle = css`
-  padding: 8px 0;
-`
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BasicAuth.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BasicAuth.tsx
deleted file mode 100644
index 7cf09cc222..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BasicAuth.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { FC } from "react"
-import { Input, Password } from "@illa-design/input"
-import { BasicAuthProps } from "./interface"
-import { Controller } from "react-hook-form"
-import { labelTextStyle } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style"
-import i18n from "@/i18n/config"
-
-export const BasicAuth: FC<BasicAuthProps> = (props) => {
-  const { control } = props
-
-  return (
-    <>
-      <label css={labelTextStyle}>
-        {i18n.t("editor.action.resource.restapi.label.basic_auth_username")}
-      </label>
-      <Controller
-        render={({ field }) => (
-          <Input
-            {...field}
-            placeholder={i18n.t(
-              "editor.action.resource.restapi.placeholder.username",
-            )}
-            maxLength={200}
-            borderColor="techPurple"
-          />
-        )}
-        control={control}
-        name="authContent.username"
-      />
-
-      <label css={labelTextStyle}>
-        {i18n.t("editor.action.resource.restapi.label.basic_auth_password")}
-      </label>
-      <Controller
-        render={({ field }) => (
-          <Password
-            {...field}
-            placeholder={i18n.t(
-              "editor.action.resource.restapi.placeholder.password",
-            )}
-            maxLength={200}
-            borderColor="techPurple"
-          />
-        )}
-        control={control}
-        name="authContent.password"
-      />
-    </>
-  )
-}
-
-BasicAuth.displayName = "BasicAuth"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BearerAuth.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BearerAuth.tsx
deleted file mode 100644
index 2d635e8933..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BearerAuth.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from "react"
-import { Input } from "@illa-design/input"
-import { Controller } from "react-hook-form"
-import { BearerAuthProps } from "./interface"
-import i18n from "@/i18n/config"
-import { labelTextStyle } from "../MySQLConfigure/style"
-
-export const BearerAuth: FC<BearerAuthProps> = (props) => {
-  const { control } = props
-
-  return (
-    <>
-      <label css={labelTextStyle}>
-        {i18n.t("editor.action.resource.restapi.label.bearerToken")}
-      </label>
-      <Controller
-        render={({ field }) => <Input {...field} maxLength={200} />}
-        control={control}
-        name="authContent.token"
-      />
-    </>
-  )
-}
-
-BearerAuth.displayName = "BearerAuth"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/index.tsx
deleted file mode 100644
index 7098f3f9c7..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { css } from "@emotion/react"
-import { forwardRef, useCallback, useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { Input } from "@illa-design/input"
-import { DeleteIcon, AddIcon } from "@illa-design/icon"
-import { useFieldArray, Controller } from "react-hook-form"
-import {
-  paramListWrapperStyle,
-  paramItemStyle,
-  paramItemKeyStyle,
-  newButtonStyle,
-  deleteIconStyle,
-  applyParamItemValueStyle,
-} from "./style"
-import { ParamListProps } from "./interface"
-import { Params } from "../interface"
-import i18n from "@/i18n/config"
-import { actionTextStyle } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style"
-
-const EmptyField: Params = { key: "", value: "" }
-
-export const ParamList = forwardRef<HTMLDivElement, ParamListProps>(
-  (props, ref) => {
-    const { control, name, ...restProps } = props
-    const { t } = useTranslation()
-    const { fields, append, remove, update } = useFieldArray({
-      control,
-      name,
-    })
-    const [isValueFocus, setIsValueFocus] = useState({
-      index: 0,
-      focus: false,
-    })
-
-    const addParamItem = useCallback(() => append(EmptyField), [append])
-    const removeParamItem = useCallback(
-      (index) => {
-        if (fields.length === 1) {
-          update(index, EmptyField)
-          return
-        }
-
-        remove(index)
-      },
-      [update, remove, fields],
-    )
-
-    const paramList = useMemo(
-      () =>
-        fields.map((field, index) => {
-          return (
-            <div css={paramItemStyle} key={field.id}>
-              <Controller
-                render={({ field }) => (
-                  <Input
-                    {...field}
-                    placeholder={i18n.t(
-                      "editor.action.resource.restapi.placeholder.param_key",
-                    )}
-                    css={paramItemKeyStyle}
-                    borderColor="techPurple"
-                  />
-                )}
-                control={control}
-                name={`${name}.${index}.key`}
-              />
-              <Controller
-                render={({ field }) => (
-                  <Input
-                    {...field}
-                    borderColor="techPurple"
-                    addonAfter={{
-                      render: (
-                        <DeleteIcon
-                          onClick={() => removeParamItem(index)}
-                          css={deleteIconStyle}
-                        />
-                      ),
-                    }}
-                    placeholder={i18n.t(
-                      "editor.action.resource.restapi.placeholder.param_value",
-                    )}
-                    css={applyParamItemValueStyle(
-                      isValueFocus.focus && isValueFocus.index === index,
-                    )}
-                    onFocus={() => setIsValueFocus({ index, focus: true })}
-                    onBlur={() => setIsValueFocus({ index, focus: false })}
-                  />
-                )}
-                control={control}
-                name={`${name}.${index}.value`}
-              />
-            </div>
-          )
-        }),
-      [fields, isValueFocus],
-    )
-
-    return (
-      <div css={paramListWrapperStyle} ref={ref} {...restProps}>
-        {paramList}
-        <span css={css(newButtonStyle, actionTextStyle)} onClick={addParamItem}>
-          <AddIcon />
-          {i18n.t("editor.action.resource.restapi.btns.new")}
-        </span>
-      </div>
-    )
-  },
-)
-
-ParamList.displayName = "ParamList"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/interface.ts
deleted file mode 100644
index 04e200c649..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/interface.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { HTMLAttributes } from "react"
-import { Control, FieldArrayPath } from "react-hook-form"
-import { RESTAPIConfigureValues } from "../interface"
-
-export interface ParamListProps extends HTMLAttributes<HTMLDivElement> {
-  name: FieldArrayPath<RESTAPIConfigureValues>
-  control: Control<RESTAPIConfigureValues>
-}
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/style.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/style.tsx
deleted file mode 100644
index 3bc84f0bce..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/style.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { css, SerializedStyles } from "@emotion/react"
-import { globalColor, illaPrefix } from "@illa-design/theme"
-
-export const paramListWrapperStyle = css`
-  display: flex;
-  flex-direction: column;
-`
-
-export const paramItemStyle = css`
-  display: flex;
-
-  & + & {
-    margin-top: 8px;
-  }
-`
-
-export const paramItemKeyStyle = css`
-  width: 169px !important;
-
-  & > span {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-`
-
-export function applyParamItemValueStyle(isFocus: boolean): SerializedStyles {
-  return css`
-    & > span {
-      ${!isFocus &&
-      css`
-        border-left: 0px;
-      `}
-      transition: all .2s ease-in-out;
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-    }
-  `
-}
-
-export const newButtonStyle = css`
-  display: flex;
-  align-items: center;
-  align-self: flex-start;
-  padding-top: 8px !important;
-
-  & svg {
-    margin-right: 5px;
-    margin-bottom: 2px;
-  }
-`
-
-export const deleteIconStyle = css`
-  cursor: pointer;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-07`)};
-
-  &:hover {
-    color: ${globalColor(`--${illaPrefix}-red-05`)};
-  }
-`
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/index.tsx
deleted file mode 100644
index ef59071ed3..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/index.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { forwardRef, useState } from "react"
-import { css } from "@emotion/react"
-import { useForm, Controller, SubmitHandler } from "react-hook-form"
-import { Input } from "@illa-design/input"
-import { InputTag } from "@illa-design/input-tag"
-import { Checkbox } from "@illa-design/checkbox"
-import { Select, Option } from "@illa-design/select"
-import { useSelector } from "react-redux"
-import {
-  formStyle,
-  gridContainerStyle,
-  labelTextStyle,
-  requiredLabelTextStyle,
-  applyGridColIndex,
-  descriptionStyle,
-  errorMessageStyle,
-  gridRowContainerStyle,
-  dynamicLabelTextStyle,
-} from "../MySQLConfigure/style"
-import {
-  RESTAPIConfigureProps,
-  RESTAPIConfigureValues,
-  Params,
-} from "./interface"
-import { topZIndexStyle } from "./style"
-import { ParamList } from "./ParamList"
-import { BasicAuth } from "./BasicAuth"
-import { BearerAuth } from "./BearerAuth"
-import { getAllResources } from "@/redux/resource/resourceSelector"
-import i18n from "@/i18n/config"
-
-const EmptyField: Params = { key: "", value: "" }
-
-const getOptions = (data: RESTAPIConfigureValues) => {
-  return data
-}
-
-export const RESTAPIConfigure = forwardRef<
-  HTMLFormElement,
-  RESTAPIConfigureProps
->((props, ref) => {
-  const { resourceId, onSubmit } = props
-  const resourceConfig = useSelector(getAllResources).find(
-    (i) => i.resourceId === resourceId,
-  )
-  const {
-    handleSubmit,
-    control,
-    watch,
-    formState: { errors },
-  } = useForm<RESTAPIConfigureValues>({
-    mode: "onSubmit",
-    defaultValues: {
-      urlParams: [EmptyField],
-      headers: [EmptyField],
-      authentication: "none",
-      /* TODO: @spike hide param that not support yet */
-      // forwardAllCookies: false,
-      // body: [EmptyField],
-      // oauth2UseClientCredentialsAuth: false,
-      // oauth2ShareUserCredentials: false,
-      resourceName: resourceConfig?.resourceName,
-      ...resourceConfig?.content,
-    },
-  })
-
-  const submitForm: SubmitHandler<RESTAPIConfigureValues> = (data) => {
-    onSubmit?.({
-      resourceName: data.resourceName,
-      resourceType: "restapi",
-      content: getOptions(data),
-    })
-  }
-
-  const renderAuthConfig = () => {
-    switch (watch("authentication")) {
-      case "basic":
-        return <BasicAuth control={control} watch={watch} />
-      case "bearer":
-        return <BearerAuth control={control} watch={watch} />
-
-      default:
-        return null
-    }
-  }
-
-  return (
-    <form
-      ref={ref}
-      onSubmit={handleSubmit(submitForm)}
-      css={css(formStyle, gridContainerStyle)}
-    >
-      <div css={gridRowContainerStyle}>
-        <label css={requiredLabelTextStyle}>
-          {i18n.t("editor.action.resource.restapi.label.name")}
-        </label>
-        <Controller
-          render={({ field }) => (
-            <Input
-              {...field}
-              placeholder={i18n.t(
-                "editor.action.resource.restapi.placeholder.api",
-              )}
-              error={!!errors.resourceName}
-              maxLength={200}
-              borderColor="techPurple"
-            />
-          )}
-          rules={{
-            required: i18n.t("editor.action.form.required") as string,
-          }}
-          control={control}
-          name="resourceName"
-        />
-        {errors.resourceName && (
-          <div css={css(errorMessageStyle, applyGridColIndex(2))}>
-            {errors.resourceName.message}
-          </div>
-        )}
-        <dd css={css(applyGridColIndex(2), descriptionStyle)}>
-          {i18n.t("editor.action.resource.restapi.tip.name")}
-        </dd>
-      </div>
-
-      <div css={gridRowContainerStyle}>
-        <label css={requiredLabelTextStyle}>
-          {i18n.t("editor.action.resource.restapi.label.base_url")}
-        </label>
-        <Controller
-          render={({ field }) => (
-            <Input
-              borderColor="techPurple"
-              {...field}
-              error={!!errors.baseUrl}
-              placeholder={i18n.t(
-                "editor.action.resource.restapi.placeholder.base_url",
-              )}
-              maxLength={200}
-            />
-          )}
-          rules={{
-            required: i18n.t("editor.action.form.required") as string,
-          }}
-          control={control}
-          name="baseUrl"
-        />
-        {errors.baseUrl && (
-          <div css={css(errorMessageStyle, applyGridColIndex(2))}>
-            {errors.baseUrl.message}
-          </div>
-        )}
-      </div>
-
-      <div css={gridRowContainerStyle}>
-        <label css={dynamicLabelTextStyle}>
-          {i18n.t("editor.action.resource.restapi.label.url_parameters")}
-        </label>
-        <ParamList control={control} name={"urlParams"} />
-      </div>
-
-      <div css={gridRowContainerStyle}>
-        <label css={dynamicLabelTextStyle}>
-          {i18n.t("editor.action.resource.restapi.label.headers")}
-        </label>
-        <ParamList control={control} name={"headers"} />
-      </div>
-      <div css={gridRowContainerStyle}>
-        <label css={labelTextStyle}>
-          {i18n.t("editor.action.resource.restapi.label.authentication")}
-        </label>
-        <Controller
-          render={({ field }) => (
-            <Select
-              size="medium"
-              colorScheme="techPurple"
-              {...field}
-              triggerProps={{ _css: topZIndexStyle }}
-            >
-              <Option value={"none"}>
-                {i18n.t(
-                  "editor.action.resource.restapi.option.authentication.none",
-                )}
-              </Option>
-              <Option value={"bearer"}>
-                {i18n.t(
-                  "editor.action.resource.restapi.option.authentication.bearer",
-                )}
-              </Option>
-              <Option value={"basic"}>
-                {i18n.t(
-                  "editor.action.resource.restapi.option.authentication.basic_auth",
-                )}
-              </Option>
-              {/* TODO: @spike not support yet */}
-              {/* <Option value={"OAuth2"}>
-                      {i18n.t(
-                      "editor.action.resource.restapi.option.authentication.oauth2",
-                      )}
-                      </Option> */}
-            </Select>
-          )}
-          control={control}
-          name="authentication"
-        />
-      </div>
-
-      {renderAuthConfig()}
-    </form>
-  )
-})
-
-RESTAPIConfigure.displayName = "RESTAPIConfigure"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/interface.ts
deleted file mode 100644
index 3cb1cfadca..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/interface.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  Resource,
-  RestApiAuth,
-  RestApiResource,
-} from "@/redux/resource/resourceState"
-import { Control, FieldErrors, UseFormWatch } from "react-hook-form"
-
-export interface RESTAPIConfigureProps {
-  resourceId?: string
-  onSubmit?: (data: Partial<Resource<RestApiResource<RestApiAuth>>>) => void
-}
-
-export type Params = {
-  key: string
-  value: string
-}
-
-export interface RESTAPIConfigureValues extends RestApiResource<RestApiAuth> {
-  resourceName: string
-}
-
-interface BaseAuthProps<T> {
-  control: Control<T>
-  watch: UseFormWatch<T>
-  errors?: FieldErrors
-}
-
-export interface BasicAuthProps extends BaseAuthProps<RESTAPIConfigureValues> {}
-
-export interface BearerAuthProps
-  extends BaseAuthProps<RESTAPIConfigureValues> {}
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/style.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/style.ts
deleted file mode 100644
index 9797fef36b..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/style.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { css } from "@emotion/react"
-import { SerializedStyles } from "@emotion/serialize"
-import { globalColor, illaPrefix } from "@illa-design/theme"
-
-export const topZIndexStyle = css``
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx
index 81556bb7f0..d0beec9699 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx
@@ -1,199 +1,88 @@
-import { FC, useRef, useState } from "react"
-import { useSelector, useDispatch } from "react-redux"
-import { Button } from "@illa-design/button"
-import { PaginationPreIcon } from "@illa-design/icon"
-import { Notification } from "@illa-design/notification"
-import i18n from "@/i18n/config"
-import { Api } from "@/api/base"
-import { MySQLConfigure } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure"
-import { RESTAPIConfigure } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure"
-import { Resource, ResourceContent } from "@/redux/resource/resourceState"
-import { resourceActions } from "@/redux/resource/resourceSlice"
-import { ActionResourceCreatorProps, ConnectionRef } from "./interface"
-import {
-  formContainerStyle,
-  formFooterStyle,
-  backIconStyle,
-  formFooterFillingStyle,
-  createResourceBtnStyle,
-  formTitleStyle,
-  formBodyStyle,
-} from "./style"
-import { Message } from "@illa-design/message"
+import { FC, ReactNode } from "react"
+import { ResourceEditorProps } from "./interface"
+import { useSelector } from "react-redux"
 import { getAllResources } from "@/redux/resource/resourceSelector"
+import { MysqlLikeConfigElement } from "@/page/App/components/Actions/MysqlLikeConfigElement"
+import { RestApiConfigElement } from "@/page/App/components/Actions/RestApiConfigElement"
+import { PostgreConfigElement } from "@/page/App/components/Actions/PostgreConfigElement"
+import { RedisConfigElement } from "@/page/App/components/Actions/RedisConfigElement"
 
-export const ActionResourceCreator: FC<ActionResourceCreatorProps> = (
-  props,
-) => {
-  const {
-    resourceId,
-    category,
-    onBack,
-    onCreated,
-    resourceType: resourceTypeProps,
-  } = props
-  const dispatch = useDispatch()
-  const resource = useSelector(getAllResources).find(
-    (i) => i.resourceId === resourceId,
-  )
-  // if receive `resourceTypeProps` means add new
-  const resourceType = resourceTypeProps || resource?.resourceType
-  const connectionRef = useRef<ConnectionRef>(null)
-  const formRef = useRef<HTMLFormElement>(null)
+export const ActionResourceCreator: FC<ResourceEditorProps> = (props) => {
+  const { onBack, onFinished, resourceType } = props
 
-  const [createBtnLoading, setCreateBtnLoading] = useState(false)
-  const [testConnectLoading, setTestConnectLoading] = useState(false)
-
-  const resourceTitle = resourceType
-    ? i18n.t(`editor.action.resource.${resourceType}.name`)
-    : ""
-
-  function submitForm() {
-    formRef.current?.requestSubmit()
-  }
-
-  function onTestConnection(data: any) {
-    Api.request<{ message: string }>(
-      {
-        url: "/resources/testConnection",
-        method: "POST",
-        data,
-      },
-      ({ data }) => {
-        Notification.success({ title: <span>{data.message}</span> })
-      },
-      ({ data }) => {
-        Notification.error({ title: <span>{data.errorMessage}</span> })
-      },
-      () => {},
-      (loading) => setTestConnectLoading(loading),
-    )
-  }
-
-  function addResourceItem(data: Partial<Resource<ResourceContent>>) {
-    Api.request<Resource<ResourceContent>>(
-      {
-        url: "/resources",
-        method: "POST",
-        data,
-      },
-      ({ data }) => {
-        Message.success(
-          i18n.t("editor.action.action_list.message.success_created"),
-        )
-        dispatch(resourceActions.addResourceItemReducer(data))
-        onCreated?.(data.resourceId)
-      },
-      () => {
-        Message.error(i18n.t("editor.action.action_list.message.failed"))
-      },
-      () => {},
-      (loading) => setCreateBtnLoading(loading),
+  const resourceList = useSelector(getAllResources)
+    .filter((r) => r.resourceType == resourceType)
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
     )
-  }
-
-  function updateResourceItem(
-    data: Partial<Resource<ResourceContent>>,
-    resourceId: string,
-  ) {
-    Api.request<Resource<ResourceContent>>(
-      {
-        url: `/resources/${resourceId}`,
-        method: "PUT",
-        data,
-      },
-      ({ data }) => {
-        Message.success(
-          i18n.t("editor.action.action_list.message.success_saved"),
-        )
-        dispatch(resourceActions.updateResourceItemReducer(data))
-        onCreated?.(resourceId)
-      },
-      () => {
-        Message.error(i18n.t("editor.action.action_list.message.failed"))
-      },
-      () => {},
-      (loading) => setCreateBtnLoading(loading),
-    )
-  }
 
-  function onSubmitForm(
-    data: Partial<Resource<ResourceContent>>,
-    resourceId?: string,
-  ) {
-    if (resourceId) {
-      updateResourceItem(data, resourceId)
-    } else {
-      addResourceItem(data)
-    }
+  let renderElement: ReactNode = null
+  switch (resourceType) {
+    case "tidb":
+    case "mariadb":
+    case "mysql":
+      renderElement = (
+        <MysqlLikeConfigElement
+          resourceType={resourceType}
+          onBack={() => {
+            if (resourceList.length > 0) {
+              onBack("createAction")
+            } else {
+              onBack("select")
+            }
+          }}
+          onFinished={onFinished}
+        />
+      )
+      break
+    case "restapi":
+      renderElement = (
+        <RestApiConfigElement
+          onBack={() => {
+            if (resourceList.length > 0) {
+              onBack("createAction")
+            } else {
+              onBack("select")
+            }
+          }}
+          onFinished={onFinished}
+        />
+      )
+      break
+    case "redis":
+      renderElement = (
+        <RedisConfigElement
+          onBack={() => {
+            if (resourceList.length > 0) {
+              onBack("createAction")
+            } else {
+              onBack("select")
+            }
+          }}
+          onFinished={onFinished}
+        />
+      )
+      break
+    case "postgresql":
+      renderElement = (
+        <PostgreConfigElement
+          onBack={() => {
+            if (resourceList.length > 0) {
+              onBack("createAction")
+            } else {
+              onBack("select")
+            }
+          }}
+          onFinished={onFinished}
+        />
+      )
+      break
+    default:
+      break
   }
 
-  return (
-    <div css={formContainerStyle}>
-      <div css={formTitleStyle}>
-        {i18n.t("editor.action.form.title.configure", { name: resourceTitle })}
-      </div>
-      <div css={formBodyStyle}>
-        {resourceType === "mysql" ? (
-          <MySQLConfigure
-            ref={formRef}
-            connectionRef={connectionRef}
-            resourceId={resourceId}
-            onTestConnection={onTestConnection}
-            onSubmit={(data) => onSubmitForm(data, resourceId)}
-          />
-        ) : resourceType === "restapi" ? (
-          <RESTAPIConfigure
-            ref={formRef}
-            resourceId={resourceId}
-            onSubmit={(data) => onSubmitForm(data, resourceId)}
-          />
-        ) : null}
-      </div>
-      <div css={formFooterStyle}>
-        {onBack && (
-          <Button
-            variant="text"
-            size="medium"
-            colorScheme="grayBlue"
-            type="button"
-            onClick={onBack}
-          >
-            <PaginationPreIcon css={backIconStyle} />
-            {i18n.t("back")}
-          </Button>
-        )}
-
-        <div css={formFooterFillingStyle} />
-
-        {category === "databases" ? (
-          <Button
-            size="medium"
-            colorScheme="gray"
-            type="button"
-            onClick={() => {
-              connectionRef.current?.testConnection()
-            }}
-            loading={testConnectLoading}
-          >
-            {i18n.t("editor.action.form.btn.test_connection")}
-          </Button>
-        ) : null}
-
-        <Button
-          size="medium"
-          colorScheme="techPurple"
-          css={createResourceBtnStyle}
-          onClick={submitForm}
-          loading={createBtnLoading}
-        >
-          {resourceId
-            ? i18n.t("editor.action.form.btn.save_changes")
-            : i18n.t("editor.action.form.btn.create_resource")}
-        </Button>
-      </div>
-    </div>
-  )
+  return <>{renderElement}</>
 }
 
 ActionResourceCreator.displayName = "ActionResourceCreator"
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/interface.ts
index fe4a924ee5..0c08146969 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/interface.ts
@@ -1,15 +1,9 @@
-import { ActionType } from "@/redux/currentApp/action/actionState"
-import { ActionTypeCategory } from "@/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface"
+import { ResourceType } from "@/redux/resource/resourceState"
+import { ActionCreatorPage } from "@/page/App/components/Actions/ActionGenerator/interface"
 
-export type ConnectionRef = {
-  testConnection: () => void
-}
-
-export interface ActionResourceCreatorProps {
+export interface ResourceEditorProps {
   resourceId?: string
-  category?: ActionTypeCategory
-  resourceType?: ActionType
-  ResourceFormEditor?: boolean
-  onBack?: () => void
-  onCreated?: (resourceId: string) => void
+  resourceType: ResourceType
+  onBack: (page: ActionCreatorPage) => void
+  onFinished: (resourceId: string) => void
 }
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/style.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/style.tsx
deleted file mode 100644
index 65c7b072dd..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/style.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { css } from "@emotion/react"
-import { globalColor, illaPrefix } from "@illa-design/theme"
-
-export const formContainerStyle = css``
-
-export const formTitleStyle = css`
-  padding: 16px 40px 8px 16px;
-  width: 100%;
-  font-size: 16px;
-  font-weight: 500;
-  text-align: center;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-`
-export const formBodyStyle = css`
-  padding: 8px 24px;
-`
-export const formFooterStyle = css`
-  display: flex;
-  padding: 24px;
-  max-height: 80px;
-`
-
-export const formFooterFillingStyle = css`
-  flex: 1;
-`
-
-export const backIconStyle = css`
-  display: inline-block;
-  font-size: 12px;
-  margin-right: 4px;
-  margin-bottom: 2px;
-`
-
-export const createResourceBtnStyle = css`
-  margin-left: 8px;
-`
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx
index 83038db76c..6a6faf8e62 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/index.tsx
@@ -1,108 +1,155 @@
 import { FC, useEffect, useState } from "react"
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { AddIcon, PaginationPreIcon } from "@illa-design/icon"
 import { Button, ButtonGroup } from "@illa-design/button"
-import { ActionResourceSeletorProps } from "./interface"
+import { ActionResourceSelectorProps } from "./interface"
 import {
+  applyResourceItemStyle,
   containerStyle,
-  titleStyle,
   footerStyle,
-  listStyle,
-  resourceItemTitleStyle,
   resourceItemTimeStyle,
-  applyResourceItemStyle,
+  resourceItemTitleStyle,
 } from "./style"
-import i18n from "@/i18n/config"
 import { getIconFromActionType } from "@/page/App/components/Actions/getIcon"
-import dayjs from "dayjs"
 import { getAllResources } from "@/redux/resource/resourceSelector"
+import { List } from "@illa-design/list"
+import { fromNow } from "@/utils/dayjs"
+import { useTranslation } from "react-i18next"
+import {
+  ActionContent,
+  ActionItem,
+  actionItemInitial,
+} from "@/redux/currentApp/action/actionState"
+import { Api } from "@/api/base"
+import { getAppInfo } from "@/redux/currentApp/appInfo/appInfoSelector"
+import { Message } from "@illa-design/message"
+import { actionActions } from "@/redux/currentApp/action/actionSlice"
+import { configActions } from "@/redux/config/configSlice"
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import { getInitialContent } from "@/redux/currentApp/action/getInitialContent"
+import { getResourceTypeFromActionType } from "@/utils/actionResourceTransformer"
 
-export const ActionResourceSelector: FC<ActionResourceSeletorProps> = (
+export const ActionResourceSelector: FC<ActionResourceSelectorProps> = (
   props,
 ) => {
-  const {
-    actionType,
-    loading,
-    onBack,
-    onCreateAction,
-    onCreateResource,
-    defaultSelected = "",
-  } = props
+  const { actionType, onBack, onCreateAction, onCreateResource } = props
+
+  const { t } = useTranslation()
+
+  const appInfo = useSelector(getAppInfo)
+
   const resourceList = useSelector(getAllResources)
-    .filter((r) => r.resourceType === actionType)
+    .filter((r) => r.resourceType == getResourceTypeFromActionType(actionType))
     .sort(
       (a, b) =>
         new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
     )
-  const [selectedResourceId, setSelectedResourceId] = useState<string>("")
+
+  const [selectedResourceId, setSelectedResourceId] = useState<string>(
+    resourceList[0]?.resourceId,
+  )
 
   useEffect(() => {
-    if (resourceList.length === 0) {
-      onCreateResource?.(actionType)
+    if (resourceList.length == 0) {
+      onCreateResource?.(getResourceTypeFromActionType(actionType)!!)
     }
-  }, [])
+  }, [resourceList, onCreateResource, actionType])
 
-  useEffect(() => {
-    setSelectedResourceId(
-      defaultSelected || (resourceList[0]?.resourceId ?? ""),
-    )
-  }, [defaultSelected])
+  const [loading, setLoading] = useState(false)
+
+  const dispatch = useDispatch()
 
   return (
     <div css={containerStyle}>
-      <div css={titleStyle}>
-        {i18n.t(
-          "editor.action.action_list.action_generator.title.choose_resource",
-        )}
-      </div>
-
-      <div css={listStyle}>
-        {resourceList.map((r) => (
-          <div
-            key={r.resourceId}
-            css={applyResourceItemStyle(r.resourceId === selectedResourceId)}
-            onClick={() => setSelectedResourceId(r.resourceId ?? "")}
-          >
-            {getIconFromActionType(r.resourceType, "24px")}
-            <span css={resourceItemTitleStyle}>{r.resourceName}</span>
-            <span css={resourceItemTimeStyle}>
-              {dayjs.utc(r.createdAt).format("YYYY-MM-DD HH:mm:ss")}
-            </span>
-          </div>
-        ))}
-      </div>
-
+      <List
+        bordered={false}
+        height={550}
+        data={resourceList}
+        renderKey={(data) => {
+          return data.resourceId
+        }}
+        renderRaw
+        render={(r) => {
+          return (
+            <div
+              css={applyResourceItemStyle(r.resourceId === selectedResourceId)}
+              onClick={() => {
+                setSelectedResourceId(r.resourceId)
+              }}
+            >
+              {getIconFromActionType(r.resourceType, "24px")}
+              <span css={resourceItemTitleStyle}>{r.resourceName}</span>
+              <span css={resourceItemTimeStyle}>
+                {t("created_at") + " " + fromNow(r.createdAt)}
+              </span>
+            </div>
+          )
+        }}
+      />
       <div css={footerStyle}>
         <Button
           leftIcon={<PaginationPreIcon />}
           variant="text"
           colorScheme="gray"
-          onClick={onBack}
+          onClick={() => {
+            onBack("select")
+          }}
         >
-          {i18n.t("back")}
+          {t("back")}
         </Button>
         <ButtonGroup spacing="8px">
           <Button
             leftIcon={<AddIcon />}
             colorScheme="gray"
             onClick={() => {
-              onCreateResource?.(actionType)
+              onCreateResource?.(getResourceTypeFromActionType(actionType)!!)
             }}
           >
-            {i18n.t(
-              "editor.action.action_list.action_generator.btns.new_resource",
-            )}
+            {t("editor.action.action_list.action_generator.btns.new_resource")}
           </Button>
           <Button
             colorScheme="techPurple"
-            onClick={() =>
-              actionType && onCreateAction?.(actionType, selectedResourceId)
-            }
+            onClick={() => {
+              const displayName =
+                DisplayNameGenerator.generateDisplayName(actionType)
+              const initialContent = getInitialContent(actionType)
+              const data: Partial<ActionItem<ActionContent>> = {
+                actionType,
+                displayName,
+                resourceId: selectedResourceId,
+                content: initialContent,
+                ...actionItemInitial,
+              }
+              Api.request(
+                {
+                  url: `/apps/${appInfo.appId}/actions`,
+                  method: "POST",
+                  data,
+                },
+                ({ data }: { data: ActionItem<ActionContent> }) => {
+                  Message.success(
+                    t("editor.action.action_list.message.success_created"),
+                  )
+                  dispatch(actionActions.addActionItemReducer(data))
+                  dispatch(configActions.updateSelectedAction(data))
+                  onCreateAction?.(actionType, selectedResourceId)
+                },
+                () => {
+                  Message.error(t("editor.action.action_list.message.failed"))
+                  DisplayNameGenerator.removeDisplayName(displayName)
+                },
+                () => {
+                  DisplayNameGenerator.removeDisplayName(displayName)
+                },
+                (loading) => {
+                  setLoading(loading)
+                },
+              )
+            }}
             loading={loading}
+            disabled={resourceList.length <= 0}
           >
-            {i18n.t(
-              "editor.action.action_list.action_generator.btns.create_action",
-            )}
+            {t("editor.action.action_list.action_generator.btns.create_action")}
           </Button>
         </ButtonGroup>
       </div>
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/interface.ts
index a192cfa360..cb714e8382 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/interface.ts
@@ -1,10 +1,10 @@
+import { ResourceType } from "@/redux/resource/resourceState"
 import { ActionType } from "@/redux/currentApp/action/actionState"
+import { ActionCreatorPage } from "@/page/App/components/Actions/ActionGenerator/interface"
 
-export interface ActionResourceSeletorProps {
-  actionType?: ActionType
-  loading?: boolean
-  defaultSelected?: string
-  onBack?: () => void
-  onCreateResource?: (actionType?: ActionType) => void
-  onCreateAction?: (actionType?: ActionType, resourceId?: string) => void
+export interface ActionResourceSelectorProps {
+  actionType: ActionType
+  onBack: (page: ActionCreatorPage) => void
+  onCreateResource: (resourceType: ResourceType) => void
+  onCreateAction: (actionType: ActionType, resourceId?: string) => void
 }
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/style.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/style.ts
index cefebaab40..2d899bf3d0 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/style.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/style.ts
@@ -6,21 +6,6 @@ export const containerStyle = css`
   flex-direction: column;
 `
 
-export const titleStyle = css`
-  padding: 24px 0 16px 0;
-  font-size: 20px;
-  font-weight: 500;
-  text-align: center;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-`
-
-export const listStyle = css`
-  margin-top: 16px;
-  overflow: auto;
-  max-height: 550px;
-  height: 550px;
-`
-
 export const footerStyle = css`
   height: 80px;
   padding: 24px;
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/index.tsx
index 5b9f2f935c..1bcb1a57ac 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/index.tsx
@@ -1,72 +1,92 @@
-import { FC } from "react"
-import {
-  ActionTypeSelectorCardProps,
-  ActionTypeSelectorProps,
-} from "./interface"
-import {
-  applyResourceItemStyle,
-  categoryStyle,
-  containerStyle,
-  resourceListStyle,
-  resourceNameStyle,
-  titleStyle,
-} from "./style"
-import {
-  ActionTypeList,
-  GeneratorTypeList,
-} from "@/page/App/components/Actions/ActionGenerator/config"
-import { getIconFromActionType } from "@/page/App/components/Actions/getIcon"
-import i18n from "@/i18n/config"
+import { FC, useState } from "react"
+import { ActionTypeSelectorProps } from "./interface"
+import { ActionTypeList } from "@/page/App/components/Actions/ActionGenerator/config"
+import { categoryStyle, containerStyle, resourceListStyle } from "./style"
 import { Spin } from "@illa-design/spin"
-
-const Card: FC<ActionTypeSelectorCardProps> = (props) => {
-  const { nameKey, isDraft, category, actionType, onSelect } = props
-
-  return (
-    <div
-      css={applyResourceItemStyle(isDraft)}
-      data-draft-tip={i18n.t("editor.action.resource.label.coming_soon")}
-      onClick={() => !isDraft && onSelect?.({ actionType, category })}
-    >
-      {getIconFromActionType(actionType, "32px")}
-      <span css={resourceNameStyle}>
-        {i18n.t(`editor.action.resource.${nameKey}.name`)}
-      </span>
-    </div>
-  )
-}
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import { getInitialContent } from "@/redux/currentApp/action/getInitialContent"
+import {
+  ActionContent,
+  ActionItem,
+  actionItemInitial,
+} from "@/redux/currentApp/action/actionState"
+import { Api } from "@/api/base"
+import { Message } from "@illa-design/message"
+import { actionActions } from "@/redux/currentApp/action/actionSlice"
+import { configActions } from "@/redux/config/configSlice"
+import { useDispatch, useSelector } from "react-redux"
+import { getAppInfo } from "@/redux/currentApp/appInfo/appInfoSelector"
+import { useTranslation } from "react-i18next"
+import { ActionCard } from "../ActionCard"
 
 export const ActionTypeSelector: FC<ActionTypeSelectorProps> = (props) => {
-  const { resourceOnly, loading = false, onSelect } = props
-  const typeList = resourceOnly ? GeneratorTypeList : ActionTypeList
+  const { onSelect } = props
+
+  const [loading, setLoading] = useState(false)
+  const appInfo = useSelector(getAppInfo)
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
 
   return (
-    <div>
-      <Spin css={containerStyle} colorScheme="techPurple" loading={loading}>
-        <div css={titleStyle}>
-          {resourceOnly
-            ? i18n.t("dashboard.resources.create_new_title")
-            : i18n.t(
-                "editor.action.action_list.action_generator.selector.title",
-              )}
-        </div>
-        {typeList.map(({ title, item, category }) => (
-          <div key={category}>
-            <span css={categoryStyle}>{title}</span>
-            <div css={resourceListStyle}>
-              {item.map((prop) => (
-                <Card
-                  key={prop.nameKey}
-                  onSelect={onSelect}
-                  category={category}
-                  {...prop}
-                />
-              ))}
-            </div>
+    <Spin css={containerStyle} colorScheme="techPurple" loading={loading}>
+      {ActionTypeList.map(({ title, item, category }) => (
+        <div key={category}>
+          <span css={categoryStyle}>{title}</span>
+          <div css={resourceListStyle}>
+            {item.map((prop) => (
+              <ActionCard
+                key={prop.actionType}
+                onSelect={(item) => {
+                  if (item === "transformer") {
+                    const displayName =
+                      DisplayNameGenerator.generateDisplayName(item)
+                    const initialContent = getInitialContent(item)
+                    const data: Partial<ActionItem<ActionContent>> = {
+                      actionType: item,
+                      displayName,
+                      content: initialContent,
+                      ...actionItemInitial,
+                    }
+                    Api.request(
+                      {
+                        url: `/apps/${appInfo.appId}/actions`,
+                        method: "POST",
+                        data,
+                      },
+                      ({ data }: { data: ActionItem<ActionContent> }) => {
+                        Message.success(
+                          t(
+                            "editor.action.action_list.message.success_created",
+                          ),
+                        )
+                        dispatch(actionActions.addActionItemReducer(data))
+                        dispatch(configActions.updateSelectedAction(data))
+                        onSelect(item)
+                      },
+                      () => {
+                        Message.error(
+                          t("editor.action.action_list.message.failed"),
+                        )
+                        DisplayNameGenerator.removeDisplayName(displayName)
+                      },
+                      () => {
+                        DisplayNameGenerator.removeDisplayName(displayName)
+                      },
+                      (loading) => {
+                        setLoading(loading)
+                      },
+                    )
+                  } else {
+                    onSelect(item)
+                  }
+                }}
+                {...prop}
+              />
+            ))}
           </div>
-        ))}
-      </Spin>
-    </div>
+        </div>
+      ))}
+    </Spin>
   )
 }
 
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts
index a28f37eae9..eed9922a93 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts
@@ -1,20 +1,5 @@
-import { ResourceDataItem } from "../config"
 import { ActionType } from "@/redux/currentApp/action/actionState"
 
-export type ActionTypeCategory = "databases" | "apis" | "jsTransformer"
-
 export interface ActionTypeSelectorProps {
-  onSelect?: (item: ActionTypeInfo) => void
-  resourceOnly?: boolean
-  loading?: boolean
-}
-
-export interface ActionTypeSelectorCardProps extends ResourceDataItem {
-  onSelect?: (item: ActionTypeInfo) => void
-  category: ActionTypeCategory
-}
-
-export interface ActionTypeInfo {
-  actionType: ActionType
-  category?: ActionTypeCategory
+  onSelect: (item: ActionType) => void
 }
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/style.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/style.ts
index 0752898371..1784dbe22a 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/style.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/style.ts
@@ -1,4 +1,4 @@
-import { css, SerializedStyles } from "@emotion/react"
+import { css } from "@emotion/react"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 
 export const containerStyle = css`
@@ -6,14 +6,7 @@ export const containerStyle = css`
   display: flex;
   flex-direction: column;
   overflow: auto;
-  padding: 16px 24px 24px 24px;
-`
-export const titleStyle = css`
-  margin-bottom: 16px;
-  font-size: 16px;
-  font-weight: 500;
-  text-align: center;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  padding: 0 24px 16px 24px;
 `
 
 export const categoryStyle = css`
@@ -29,60 +22,6 @@ export const categoryStyle = css`
 export const resourceListStyle = css`
   padding: 8px 0;
   display: grid;
-  grid-gap: 24px;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-`
-
-export function applyResourceItemStyle(isDraft?: boolean): SerializedStyles {
-  const draftStyle = css`
-    cursor: not-allowed;
-
-    &:after {
-      top: 0;
-      position: absolute;
-      content: attr(data-draft-tip);
-      padding: 0 8px;
-      line-height: 16px;
-      font-size: 12px;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      background: ${globalColor(`--${illaPrefix}-techPurple-07`)};
-      color: ${globalColor(`--${illaPrefix}-techPurple-02`)};
-    }
-  `
-  const hoverStyle = css`
-    &:hover {
-      box-shadow: 0 4px 10px 0 ${globalColor(`--${illaPrefix}-blackAlpha-07`)};
-      background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)};
-      border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)};
-    }
-  `
-
-  return css`
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 24px 0;
-    border-radius: 8px;
-    border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)};
-    position: relative;
-    display: flex;
-    background-color: ${globalColor(`--${illaPrefix}-white-01`)};
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-
-    ${!isDraft && hoverStyle}
-    ${isDraft && draftStyle}
-  `
-}
-
-export const resourceIconStyle = css`
-  font-size: 32px;
-`
-
-export const resourceNameStyle = css`
-  margin-top: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 `
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/config.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/config.tsx
index d3fb64e597..13cae1bc9e 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/config.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/config.tsx
@@ -1,53 +1,77 @@
 import { ActionType } from "@/redux/currentApp/action/actionState"
 import i18n from "@/i18n/config"
 
-type ActionTypeNameKey =
-  | "mysql"
-  | "postgres"
-  | "redis"
-  | "mongodb"
-  | "restapi"
-  | "js_transformer"
-
-export interface ResourceDataItem {
-  nameKey: ActionTypeNameKey
+export interface ActionDataItem {
   actionType: ActionType
-  isDraft?: boolean
+  isDraft: boolean
 }
 
-export const Databases: ResourceDataItem[] = [
+export const Databases: ActionDataItem[] = [
+  {
+    actionType: "postgresql",
+    isDraft: false,
+  },
   {
-    nameKey: "mysql",
     actionType: "mysql",
+    isDraft: false,
   },
   {
-    nameKey: "postgres",
-    isDraft: true,
-    actionType: "postgresql",
+    actionType: "mariadb",
+    isDraft: false,
   },
   {
-    nameKey: "redis",
+    actionType: "tidb",
     isDraft: true,
-    actionType: "redis",
   },
   {
-    nameKey: "mongodb",
+    actionType: "redis",
     isDraft: true,
+  },
+  {
     actionType: "mongodb",
+    isDraft: true,
+  },
+  {
+    actionType: "elastic",
+    isDraft: true,
+  },
+  {
+    actionType: "snowflake",
+    isDraft: true,
   },
 ]
 
-export const Apis: ResourceDataItem[] = [
+export const Apis: ActionDataItem[] = [
   {
-    nameKey: "restapi",
     actionType: "restapi",
+    isDraft: false,
+  },
+  {
+    actionType: "graphql",
+    isDraft: true,
+  },
+  {
+    actionType: "s3",
+    isDraft: true,
+  },
+  {
+    actionType: "zapier",
+    isDraft: true,
+  },
+  {
+    actionType: "datadog",
+    isDraft: true,
+  },
+  {
+    actionType: "smtp",
+    isDraft: true,
   },
 ]
 
-export const JsTransformer: ResourceDataItem[] = [
+export const JsTransformer: ActionDataItem[] = [
   {
-    nameKey: "js_transformer",
     actionType: "transformer",
+    isDraft: false,
   },
 ]
 
@@ -68,26 +92,3 @@ export const ActionTypeList = [
     category: "jsTransformer" as const,
   },
 ]
-
-export const GeneratorTypeList = [
-  {
-    title: i18n.t("editor.action.type.database"),
-    item: Databases,
-    category: "databases" as const,
-  },
-  {
-    title: i18n.t("editor.action.type.api"),
-    item: Apis,
-    category: "apis" as const,
-  },
-]
-
-export const SSLClientKey = `
------BEGIN CERTIFICATE-----
-MIIEMDCCApigAwIBAgIDI2GWMA0GCSqGSIb3DQEBDAUAMDoxODA2BgNVBAMML2Fm
-DTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4
-DTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4
-DTE5MDQwODAzNDIyMloXDTI5MDQwNTAzNDIyMlowOjE4MDYGA1UEAwwvYWY1ZjU4
-...
------END CERTIFICATE-----
-`
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/index.tsx
index 40d9c4239b..0ef5cd1b44 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/index.tsx
@@ -1,142 +1,101 @@
-import { FC, useEffect, useState } from "react"
+import { FC, useState } from "react"
 import { Modal } from "@illa-design/modal"
-import { ActionGeneratorProps, ActionInfo } from "./interface"
+import { ActionCreatorPage, ActionGeneratorProps } from "./interface"
 import { ActionTypeSelector } from "./ActionTypeSelector"
 import { ActionResourceSelector } from "@/page/App/components/Actions/ActionGenerator/ActionResourceSelector"
+import { ActionType } from "@/redux/currentApp/action/actionState"
 import { ActionResourceCreator } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator"
+import { useTranslation } from "react-i18next"
 import {
-  ActionContent,
-  ActionItem,
-  actionItemInitial,
-  ActionType,
-} from "@/redux/currentApp/action/actionState"
-import { css } from "@emotion/react"
-import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
-import { getInitialContent } from "@/redux/currentApp/action/getInitialContent"
-import { Api } from "@/api/base"
-import { actionActions } from "@/redux/currentApp/action/actionSlice"
-import { Message } from "@illa-design/message"
-import i18n from "@/i18n/config"
-import { useParams } from "react-router-dom"
-import { useDispatch } from "react-redux"
-import { ActionTypeCategory } from "./ActionTypeSelector/interface"
-import { configActions } from "@/redux/config/configSlice"
+  getResourceNameFromResourceType,
+  getResourceTypeFromActionType,
+} from "@/utils/actionResourceTransformer"
 
 export const ActionGenerator: FC<ActionGeneratorProps> = function (props) {
   const { visible, onClose } = props
-  const [step, setStep] = useState<0 | 1 | 2>(0)
-  const [actionType, setResourceType] = useState<ActionType>()
-  const [category, setCategory] = useState<ActionTypeCategory>()
-  const [defaultSelectedResourceId, setDefaultSelectedResourceId] = useState("")
-  const [loading, setLoading] = useState<boolean>()
-  const dispatch = useDispatch()
-  const params = useParams()
-  const baseActionUrl = `/apps/${params.appId}/actions`
+  const [currentStep, setCurrentStep] = useState<ActionCreatorPage>("select")
 
-  useEffect(() => {
-    setStep(0)
-  }, [visible])
+  const [currentActionType, setCurrentActionType] = useState<ActionType | null>(
+    null,
+  )
 
-  function onAddActionItem(actionType: ActionType, resourceId?: string) {
-    const displayName = DisplayNameGenerator.generateDisplayName(actionType)
-    const initialContent = getInitialContent(actionType)
-    const data: Partial<ActionItem<{}>> = {
-      actionType,
-      displayName,
-      resourceId,
-      content: initialContent,
-      ...actionItemInitial,
-    }
-    Api.request(
-      {
-        url: baseActionUrl,
-        method: "POST",
-        data,
-      },
-      ({ data }: { data: ActionItem<ActionContent> }) => {
-        Message.success(
-          i18n.t("editor.action.action_list.message.success_created"),
-        )
-        dispatch(actionActions.addActionItemReducer(data))
-        dispatch(configActions.updateSelectedAction(data))
-        onClose()
-      },
-      () => {
-        Message.error(i18n.t("editor.action.action_list.message.failed"))
-        DisplayNameGenerator.removeDisplayName(displayName)
-      },
-      () => {},
-      (loading) => {
-        setLoading(loading)
-      },
-    )
-  }
+  const { t } = useTranslation()
 
-  const onAddAction = (info: ActionInfo) => {
-    const { actionType, resourceId } = info
-    onAddActionItem(actionType, resourceId)
+  let title
+  switch (currentStep) {
+    case "select":
+      title = t("editor.action.action_list.action_generator.selector.title")
+      break
+    case "createAction":
+      title = t(
+        "editor.action.action_list.action_generator.title.choose_resource",
+      )
+      break
+    case "createResource":
+      if (currentActionType != null) {
+        const resourceType = getResourceTypeFromActionType(currentActionType)
+        if (resourceType != null) {
+          title = getResourceNameFromResourceType(resourceType)
+        }
+      }
+      break
   }
 
+  const transformResource = currentActionType
+    ? getResourceTypeFromActionType(currentActionType)
+    : null
+
   return (
     <Modal
-      _css={css`
-        width: 696px;
-      `}
+      w="696px"
       visible={visible}
       footer={false}
       closable
+      withoutLine
       withoutPadding
-      onCancel={onClose}
+      title={title}
+      onCancel={() => {
+        onClose()
+        setCurrentStep("select")
+        setCurrentActionType(null)
+      }}
     >
-      {step === 0 ? (
+      {currentStep === "select" && (
         <ActionTypeSelector
-          loading={loading}
-          onSelect={(info) => {
-            const { category, actionType } = info
-
-            setCategory(category)
-            switch (category) {
-              case "jsTransformer": {
-                onAddAction(info)
-                break
-              }
-              case "apis":
-              case "databases": {
-                setResourceType(actionType)
-                setStep(1)
-                break
-              }
+          onSelect={(actionType) => {
+            if (actionType == "transformer") {
+              onClose()
+            } else {
+              setCurrentStep("createAction")
+              setCurrentActionType(actionType)
             }
           }}
         />
-      ) : step === 1 ? (
+      )}
+      {currentStep === "createAction" && currentActionType && (
         <ActionResourceSelector
-          actionType={actionType}
-          loading={loading}
-          onBack={() => {
-            setStep(0)
-            setResourceType(undefined)
+          actionType={currentActionType}
+          onBack={(page) => {
+            setCurrentStep(page)
           }}
           onCreateResource={(actionType) => {
-            setResourceType(actionType)
-            setStep(2)
+            setCurrentActionType(actionType)
+            setCurrentStep("createResource")
           }}
           onCreateAction={(actionType, resourceId) => {
-            actionType && onAddAction({ actionType, resourceId })
+            setCurrentStep("select")
+            onClose()
           }}
-          defaultSelected={defaultSelectedResourceId}
         />
-      ) : (
+      )}
+      {currentStep === "createResource" && transformResource && (
         <ActionResourceCreator
-          category={category}
-          resourceType={actionType}
-          onBack={() => {
-            setStep(0)
-            setResourceType(undefined)
+          resourceType={transformResource}
+          onBack={(page) => {
+            setCurrentStep(page)
           }}
-          onCreated={(resourceId) => {
-            setDefaultSelectedResourceId(resourceId)
-            setStep(1)
+          onFinished={(resourceId) => {
+            setCurrentStep("createAction")
           }}
         />
       )}
diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/interface.ts b/apps/builder/src/page/App/components/Actions/ActionGenerator/interface.ts
index c1d6e9eb8f..e73af3de22 100644
--- a/apps/builder/src/page/App/components/Actions/ActionGenerator/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/interface.ts
@@ -1,12 +1,6 @@
-import { ActionTypeInfo } from "@/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface"
-
-export interface ActionInfo extends ActionTypeInfo {
-  resourceId?: string
-}
-
 export interface ActionGeneratorProps {
   visible?: boolean
-  edit?: boolean
-  resourceId?: string
   onClose: () => void
 }
+
+export type ActionCreatorPage = "select" | "createAction" | "createResource"
diff --git a/apps/builder/src/page/App/components/Actions/ActionList/index.tsx b/apps/builder/src/page/App/components/Actions/ActionList/index.tsx
index 309d8eaec1..9237104f79 100644
--- a/apps/builder/src/page/App/components/Actions/ActionList/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionList/index.tsx
@@ -25,13 +25,13 @@ import {
   onDeleteActionItem,
 } from "@/page/App/components/Actions/api"
 
-export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
+export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const { className } = props
 
   const [generatorVisible, setGeneratorVisible] = useState<boolean>()
   const [searchActionValue, setSearchActionValue] = useState("")
   const actionList = useSelector((state: RootState) => {
-    return state.currentApp.action.filter((value) => {
+    return state.currentApp.action.filter(value => {
       return value.displayName
         .toLowerCase()
         .includes(searchActionValue.toLowerCase())
@@ -44,7 +44,7 @@ export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   return (
     <div className={className} css={searchHeaderContainerStyle}>
       <SearchHeader
-        onSearch={(value) => {
+        onSearch={value => {
           setSearchActionValue(value)
         }}
       />
@@ -57,7 +57,7 @@ export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
         css={addNewActionButtonStyle}
         onClick={() => setGeneratorVisible(true)}
       >
-        <Space size="8px" direction="horizontal">
+        <Space size="8px" direction="horizontal" alignItems="center">
           <AddIcon size="14px" />
           {t("editor.action.action_list.btn.new")}
         </Space>
@@ -68,15 +68,15 @@ export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
             _css={listStyle}
             bordered={false}
             data={actionList}
-            render={(data) => {
+            render={data => {
               return (
                 <ActionListItem
                   action={data}
                   onCopyItem={onCopyActionItem}
                   onDeleteItem={onDeleteActionItem}
-                  onItemClick={(action) => {
-                    const selectedAction =
-                      store.getState().config.selectedAction
+                  onItemClick={action => {
+                    const selectedAction = store.getState().config
+                      .selectedAction
                     if (selectedAction === null) {
                       dispatch(configActions.changeSelectedAction(action))
                       return
@@ -86,7 +86,7 @@ export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
                       // find last action
                       const lastAction = store
                         .getState()
-                        .currentApp.action.find((value) => {
+                        .currentApp.action.find(value => {
                           return (
                             value.displayName === selectedAction?.displayName
                           )
@@ -114,7 +114,7 @@ export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
               )
             }}
             renderRaw
-            renderKey={(data) => {
+            renderKey={data => {
               return data.displayName
             }}
           />
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionEventHandler/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionEventHandler/index.tsx
index 2d04d78a74..391aca3e99 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionEventHandler/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionEventHandler/index.tsx
@@ -37,7 +37,7 @@ export const ActionEventHandler: FC = () => {
         }),
       )
     },
-    [action.content],
+    [action, dispatch],
   )
 
   const handleUpdateMultiAttrDSL = useCallback(
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx
index ecbeb2bc4b..53ac6af94d 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx
@@ -1,7 +1,9 @@
-import { FC, ReactNode, useRef } from "react"
+import { FC, useRef } from "react"
 import { CloseIcon, RightIcon, WarningCircleIcon } from "@illa-design/icon"
 import { ActionResultType } from "./interface"
 import {
+  applyMaxHeightStyle,
+  codeStyle,
   errorIconStyle,
   errorResultWrapperStyle,
   resCloseIconStyle,
@@ -28,7 +30,10 @@ export const ActionResult: FC<ActionResultProps> = (props) => {
   const { t } = useTranslation()
 
   return res ? (
-    <div css={resultContainerStyle} ref={panelRef}>
+    <div
+      css={[resultContainerStyle, applyMaxHeightStyle(maxHeight)]}
+      ref={panelRef}
+    >
       {result?.error ? (
         <div css={errorResultWrapperStyle}>
           <WarningCircleIcon css={errorIconStyle} size="16px" />
@@ -36,7 +41,7 @@ export const ActionResult: FC<ActionResultProps> = (props) => {
         </div>
       ) : (
         <>
-          <DragBar resizeRef={panelRef} minHeight={40} maxHeight={maxHeight} />
+          <DragBar resizeRef={panelRef} minHeight={40} />
           <div css={successResultWrapperStyle}>
             <div>
               <RightIcon css={successIconStyle} size="16px" />
@@ -45,14 +50,12 @@ export const ActionResult: FC<ActionResultProps> = (props) => {
             <CloseIcon css={resCloseIconStyle} onClick={onClose} />
           </div>
           <CodeEditor
+            css={codeStyle}
             mode={"JSON"}
             expectedType={VALIDATION_TYPES.STRING}
             value={JSON.stringify(res, null, 2)}
             border={"unset"}
             borderRadius={"0"}
-            maxHeight={
-              panelRef.current ? `${panelRef.current?.clientHeight - 40}px` : ""
-            }
             readOnly
             lineNumbers
           />
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/style.ts
index 018160ff96..7496bde993 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/style.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/style.ts
@@ -9,6 +9,13 @@ export const resultContainerStyle = css`
   position: relative;
 `
 
+export function applyMaxHeightStyle(h?: number) {
+  return css`
+    ${h ? `max-height: ${h}px;` : ""};
+  }
+  `
+}
+
 export const resultWrapperStyle = css`
   display: flex;
   align-items: center;
@@ -52,3 +59,6 @@ export const resCloseIconStyle = css`
     color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
   }
 `
+export const codeStyle = css`
+  overflow: scroll;
+`
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
index d6a4c08e05..ea1acf02f5 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
@@ -1,9 +1,9 @@
 import { FC, useEffect, useState } from "react"
 import { CaretRightIcon, MoreIcon } from "@illa-design/icon"
 import {
-  actionTitleBarRunStyle,
   actionTitleBarSpaceStyle,
   actionTitleBarStyle,
+  dropMenuStyle,
   editableTitleBarWrapperStyle,
 } from "./style"
 import { Button } from "@illa-design/button"
@@ -52,7 +52,7 @@ export const ActionTitleBar: FC<ActionTitleBarProps> = (props) => {
   useEffect(() => {
     // Clear the previous result when changing the selected action
     onActionRun(undefined)
-  }, [action?.actionId])
+  }, [action.actionId, onActionRun])
 
   return (
     <div css={actionTitleBarStyle}>
@@ -67,6 +67,7 @@ export const ActionTitleBar: FC<ActionTitleBarProps> = (props) => {
       <Dropdown
         position="bottom-end"
         trigger="click"
+        triggerProps={{ _css: dropMenuStyle }}
         dropList={
           <DropList width={"184px"}>
             <Item
@@ -89,68 +90,78 @@ export const ActionTitleBar: FC<ActionTitleBarProps> = (props) => {
       >
         <Button colorScheme="grayBlue" leftIcon={<MoreIcon size="14px" />} />
       </Dropdown>
-      <Button
-        ml="8px"
-        colorScheme="techPurple"
-        variant={isChanged ? "fill" : "light"}
-        size="medium"
-        loading={loading}
-        leftIcon={<CaretRightIcon />}
-        onClick={() => {
-          switch (runMode) {
-            case "run":
-              runAction(action, onActionRun)
-              break
-            case "save":
-              Api.request(
-                {
-                  method: "PUT",
-                  url: `/apps/${currentApp.appId}/actions/${action.actionId}`,
-                  data: action,
-                },
-                () => {
-                  dispatch(actionActions.updateActionItemReducer(action))
-                  dispatch(configActions.changeSelectedAction(action))
-                },
-                () => {
-                  Message.error(t("create_fail"))
-                },
-                () => {
-                  Message.error(t("create_fail"))
-                },
-                (l) => {
-                  setLoading(l)
-                },
-              )
-              break
-            case "save_and_run":
-              Api.request(
-                {
-                  method: "PUT",
-                  url: `/apps/${currentApp.appId}/actions/${action.actionId}`,
-                  data: action,
-                },
-                () => {
-                  dispatch(actionActions.updateActionItemReducer(action))
-                  dispatch(configActions.changeSelectedAction(action))
-                  runAction(action, onActionRun)
-                },
-                () => {
-                  Message.error(t("editor.action.panel.btn.save_fail"))
-                },
-                () => {
-                  Message.error(t("editor.action.panel.btn.save_fail"))
-                },
-                (l) => {
-                  setLoading(l)
-                },
-              )
-              break
-          }
-        }}
-      >
-        {t(`editor.action.panel.btn.${runMode}`)}
-      </Button>
+      {action.actionType !== "transformer" && (
+        <Button
+          ml="8px"
+          colorScheme="techPurple"
+          variant={isChanged ? "fill" : "light"}
+          size="medium"
+          loading={loading}
+          leftIcon={<CaretRightIcon />}
+          onClick={() => {
+            switch (runMode) {
+              case "run":
+                setLoading(true)
+                runAction(action, (result: unknown, error?: boolean) => {
+                  setLoading(false)
+                  onActionRun(result, error)
+                })
+                break
+              case "save":
+                Api.request(
+                  {
+                    method: "PUT",
+                    url: `/apps/${currentApp.appId}/actions/${action.actionId}`,
+                    data: action,
+                  },
+                  () => {
+                    dispatch(actionActions.updateActionItemReducer(action))
+                    dispatch(configActions.changeSelectedAction(action))
+                  },
+                  () => {
+                    Message.error(t("create_fail"))
+                  },
+                  () => {
+                    Message.error(t("create_fail"))
+                  },
+                  (l) => {
+                    setLoading(l)
+                  },
+                )
+                break
+              case "save_and_run":
+                Api.request(
+                  {
+                    method: "PUT",
+                    url: `/apps/${currentApp.appId}/actions/${action.actionId}`,
+                    data: action,
+                  },
+                  () => {
+                    dispatch(actionActions.updateActionItemReducer(action))
+                    dispatch(configActions.changeSelectedAction(action))
+                    setLoading(true)
+                    runAction(action, (result: unknown, error?: boolean) => {
+                      setLoading(false)
+                      onActionRun(result, error)
+                    })
+                  },
+                  () => {
+                    Message.error(t("editor.action.panel.btn.save_fail"))
+                  },
+                  () => {
+                    Message.error(t("editor.action.panel.btn.save_fail"))
+                  },
+                  (l) => {
+                    setLoading(l)
+                  },
+                )
+                break
+            }
+          }}
+        >
+          {t(`editor.action.panel.btn.${runMode}`)}
+        </Button>
+      )}
     </div>
   )
 }
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts
index a488ca3dee..4d7d89f0ba 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts
@@ -27,3 +27,7 @@ export const actionTitleBarRunStyle = css`
 export const editableTitleBarWrapperStyle = css`
   width: 280px;
 `
+
+export const dropMenuStyle = css`
+  z-index: 2;
+`
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/index.tsx
similarity index 77%
rename from apps/builder/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx
rename to apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/index.tsx
index 8847cba93c..87c9321355 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/index.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react"
 import {
   mysqlContainerStyle,
   sqlInputStyle,
-} from "@/page/App/components/Actions/ActionPanel/MysqlPanel/style"
+} from "@/page/App/components/Actions/ActionPanel/MysqlLikePanel/style"
 import { ResourceChoose } from "@/page/App/components/Actions/ActionPanel/ResourceChoose"
 import { useDispatch } from "react-redux"
 import { CodeEditor } from "@/components/CodeEditor"
@@ -10,11 +10,7 @@ import { TransformerComponent } from "@/page/App/components/Actions/ActionPanel/
 import { configActions } from "@/redux/config/configSlice"
 import { ActionEventHandler } from "@/page/App/components/Actions/ActionPanel/ActionEventHandler"
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { MysqlPanelProps } from "@/page/App/components/Actions/ActionPanel/interface"
-import {
-  ActionContent,
-  ActionItem,
-} from "@/redux/currentApp/action/actionState"
+import { MysqlLikePanelProps } from "@/page/App/components/Actions/ActionPanel/interface"
 import { Api } from "@/api/base"
 import { isObject } from "@illa-design/system"
 
@@ -42,18 +38,17 @@ const convertResourcesToTables = (data: Record<string, unknown>) => {
   return res
 }
 
-export const MysqlPanel: FC<MysqlPanelProps> = (props) => {
+export const MysqlLikePanel: FC<MysqlLikePanelProps> = props => {
   const dispatch = useDispatch()
 
   const currentAction = props.action
   const currentContent = props.action.content
   const [sqlTable, setSqlTable] = useState<Record<string, string[]>>()
 
-  function getItemResources(action: ActionItem<ActionContent>) {
-    const { resourceId } = action
+  useEffect(() => {
     Api.request(
       {
-        url: `resources/${resourceId}/meta`,
+        url: `resources/${currentAction.resourceId}/meta`,
         method: "GET",
       },
       ({ data }: { data: ResourcesData }) => {
@@ -64,12 +59,7 @@ export const MysqlPanel: FC<MysqlPanelProps> = (props) => {
       () => {},
       () => {},
     )
-  }
-
-  useEffect(() => {
-    // When changing the selected action, get the corresponding resources
-    getItemResources(currentAction)
-  }, [currentAction.actionId])
+  }, [currentAction.resourceId])
 
   return (
     <div css={mysqlContainerStyle}>
@@ -80,10 +70,14 @@ export const MysqlPanel: FC<MysqlPanelProps> = (props) => {
         height="88px"
         css={sqlInputStyle}
         value={currentContent.query}
-        mode="SQL_JS"
+        mode={
+          currentAction.actionType === "postgresql"
+            ? "Postgre_SQL_JS"
+            : "SQL_JS"
+        }
         expectedType={VALIDATION_TYPES.STRING}
         tables={sqlTable}
-        onChange={(value) => {
+        onChange={value => {
           dispatch(
             configActions.updateSelectedAction({
               ...currentAction,
@@ -101,4 +95,4 @@ export const MysqlPanel: FC<MysqlPanelProps> = (props) => {
   )
 }
 
-MysqlPanel.displayName = "MysqlPanel"
+MysqlLikePanel.displayName = "MysqlPanel"
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/style.ts
similarity index 100%
rename from apps/builder/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts
rename to apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/style.ts
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/index.tsx
deleted file mode 100644
index d5f9f609ac..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC } from "react"
-import { RecordEditorItemProps } from "./interface"
-import { recordEditorItemContainerStyle } from "./style"
-import { CodeEditor } from "@/components/CodeEditor"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { Button } from "@illa-design/button"
-import { DeleteIcon } from "@illa-design/icon"
-import { globalColor, illaPrefix } from "@illa-design/theme"
-
-export const RecordEditorItem: FC<RecordEditorItemProps> = (props) => {
-  const { record, onDelete } = props
-
-  return (
-    <div css={recordEditorItemContainerStyle}>
-      <CodeEditor mode="TEXT_JS" expectedType={VALIDATION_TYPES.STRING} />
-      <CodeEditor mode="TEXT_JS" expectedType={VALIDATION_TYPES.STRING} />
-      <Button
-        leftIcon={
-          <DeleteIcon color={globalColor(`--${illaPrefix}-grayBlue-08`)} />
-        }
-      />
-    </div>
-  )
-}
-
-RecordEditorItem.displayName = "RecordEditorItem"
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/interface.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/interface.ts
deleted file mode 100644
index 3a0b03baa4..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/interface.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Params } from "@/redux/resource/resourceState"
-
-export interface RecordEditorItemProps {
-  record: Params
-  onDelete: (record: Params) => void
-}
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/style.ts
deleted file mode 100644
index 826a6ed837..0000000000
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/RecordEditorItem/style.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { css } from "@emotion/react"
-
-export const recordEditorItemContainerStyle = css`
-  display: inline-flex;
-  flex-direction: row;
-`
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/index.tsx
index a1ca23e8a2..9e0ff31651 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/index.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from "react"
 import { RecordEditorProps } from "@/page/App/components/Actions/ActionPanel/RecordEditor/interface"
 import {
-  applyRecordEditorContainerStyl,
+  applyRecordEditorContainerStyle,
   recordEditorLabelStyle,
   recordEditorStyle,
   recordKeyStyle,
@@ -15,7 +15,7 @@ import { AddIcon, DeleteIcon } from "@illa-design/icon"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 import { useTranslation } from "react-i18next"
 
-export const RecordEditor: FC<RecordEditorProps> = (props) => {
+export const RecordEditor: FC<RecordEditorProps> = props => {
   const { records, label, onDelete, onAdd, onChangeKey, onChangeValue } = props
 
   const { t } = useTranslation()
@@ -34,7 +34,7 @@ export const RecordEditor: FC<RecordEditorProps> = (props) => {
                 placeholder="key"
                 borderRadius="8px 0 0 8px"
                 expectedType={VALIDATION_TYPES.STRING}
-                onChange={(value) => {
+                onChange={value => {
                   onChangeKey(index, value, record.value)
                 }}
               />
@@ -46,7 +46,7 @@ export const RecordEditor: FC<RecordEditorProps> = (props) => {
                 value={record.value}
                 borderRadius="0 0 0 0"
                 expectedType={VALIDATION_TYPES.STRING}
-                onChange={(value) => {
+                onChange={value => {
                   onChangeValue(index, record.key, value)
                 }}
               />
@@ -54,7 +54,7 @@ export const RecordEditor: FC<RecordEditorProps> = (props) => {
                 ml="-1px"
                 variant="outline"
                 bdRadius="0 8px 8px 0"
-                colorScheme="gray"
+                colorScheme="grayBlue"
                 onClick={() => {
                   onDelete(index, record)
                 }}
@@ -69,10 +69,10 @@ export const RecordEditor: FC<RecordEditorProps> = (props) => {
         })}
       </>
     )
-  }, [records])
+  }, [onChangeKey, onChangeValue, onDelete, records])
 
   return (
-    <div css={applyRecordEditorContainerStyl(label)}>
+    <div css={applyRecordEditorContainerStyle(label)}>
       {label != "" && <span css={recordEditorLabelStyle}>{label}</span>}
       <div css={recordEditorStyle}>
         {recordList}
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/interface.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/interface.ts
index 0468dc3979..bbb8d9f3a8 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/interface.ts
@@ -1,7 +1,7 @@
 import { Params } from "@/redux/resource/resourceState"
 
 export interface RecordEditorProps {
-  label: any
+  label: string
   records: Params[]
   onAdd: () => void
   onDelete: (index: number, record: Params) => void
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/style.ts
index fd8a3ee99d..a268930efb 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/style.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RecordEditor/style.ts
@@ -1,13 +1,14 @@
 import { css } from "@emotion/react"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 
-export function applyRecordEditorContainerStyl(label: string) {
+export function applyRecordEditorContainerStyle(label: string) {
   return css`
     display: flex;
     padding-right: ${label !== "" ? "16px" : "0"};
     flex-direction: row;
   `
 }
+
 export const recordEditorStyle = css`
   display: flex;
   flex-grow: 1;
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx
index c69312144a..718b2e777f 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo, useState } from "react"
+import { FC, useState } from "react"
 import {
   createNewStyle,
   resourceChooseContainerStyle,
@@ -17,14 +17,18 @@ import { RootState } from "@/store"
 import { getInitialContent } from "@/redux/currentApp/action/getInitialContent"
 import { ResourceChooseProps } from "@/page/App/components/Actions/ActionPanel/interface"
 import { globalColor, illaPrefix } from "@illa-design/theme"
-import { ResourceEditor } from "@/page/Dashboard/components/ResourceEditor"
+import { Modal } from "@illa-design/modal"
+import { ResourceCreator } from "@/page/Dashboard/components/ResourceGenerator/ResourceCreator"
+import {
+  getResourceNameFromResourceType,
+  getResourceTypeFromActionType,
+} from "@/utils/actionResourceTransformer"
 
 export const ResourceChoose: FC<ResourceChooseProps> = props => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
   const [editorVisible, setEditorVisible] = useState(false)
-  const [editType, setEditType] = useState(false)
 
   const resourceList = useSelector(getAllResources)
   const action = props.action
@@ -32,113 +36,118 @@ export const ResourceChoose: FC<ResourceChooseProps> = props => {
     (state: RootState) => state.config.cacheActionContent,
   )
 
-  const realResourceId = useMemo(() => {
-    let currentResourceId = action.resourceId
-    const currentResource = resourceList.find(
-      r => r.resourceId === currentResourceId,
-    )
-    if (currentResource) {
-      return currentResourceId
-    }
-    return ""
-  }, [resourceList, action.resourceId])
-
   return (
-    <div css={resourceChooseContainerStyle}>
-      <span css={resourceTitleStyle}>{t("resources")}</span>
-      <Space direction="horizontal" size="8px">
-        <Select
-          colorScheme="techPurple"
-          w="200px"
-          value={realResourceId}
-          onChange={value => {
-            const resource = resourceList.find(r => r.resourceId === value)
-            if (resource != undefined) {
+    <>
+      <div css={resourceChooseContainerStyle}>
+        <span css={resourceTitleStyle}>{t("resources")}</span>
+        <Space direction="horizontal" size="8px" alignItems="center">
+          <Select
+            colorScheme="techPurple"
+            w="200px"
+            value={action.resourceId}
+            onChange={value => {
+              const resource = resourceList.find(r => r.resourceId === value)
+              if (resource != undefined) {
+                dispatch(
+                  configActions.updateSelectedAction({
+                    ...action,
+                    // selected resource is same as action type
+                    actionType: resource.resourceType,
+                    resourceId: value,
+                    content:
+                      contentMap[resource.resourceType] ??
+                      getInitialContent(resource.resourceType),
+                  }),
+                )
+              }
+            }}
+            addonAfter={{
+              buttonProps: {
+                variant: "outline",
+                colorScheme: "grayBlue",
+                leftIcon: (
+                  <PenIcon color={globalColor(`--${illaPrefix}-grayBlue-04`)} />
+                ),
+                onClick: () => {
+                  setEditorVisible(true)
+                },
+              } as ButtonProps,
+            }}
+          >
+            <Option
+              key="create"
+              isSelectOption={false}
+              onClick={() => {
+                setEditorVisible(true)
+              }}
+            >
+              <Space
+                size="8px"
+                direction="horizontal"
+                alignItems="center"
+                css={createNewStyle}
+              >
+                <AddIcon size="14px" />
+                {t("editor.action.panel.option.resource.new")}
+              </Space>
+            </Option>
+            {resourceList.map(item => {
+              return (
+                <Option value={item.resourceId} key={item.resourceId}>
+                  <Space size="8px" direction="horizontal" alignItems="center">
+                    {getIconFromResourceType(item.resourceType, "14px")}
+                    {item.resourceName}
+                  </Space>
+                </Option>
+              )
+            })}
+          </Select>
+          <Select
+            colorScheme="techPurple"
+            w="400px"
+            value={action.triggerMode}
+            onChange={value => {
               dispatch(
                 configActions.updateSelectedAction({
                   ...action,
-                  // selected resource is same as action type
-                  actionType: resource.resourceType,
-                  resourceId: value,
-                  content:
-                    contentMap[resource.resourceType] ??
-                    getInitialContent(resource.resourceType),
+                  triggerMode: value,
                 }),
               )
-            }
-          }}
-          addonAfter={{
-            buttonProps: {
-              variant: "outline",
-              colorScheme: "gray",
-              leftIcon: (
-                <PenIcon color={globalColor(`--${illaPrefix}-grayBlue-04`)} />
-              ),
-              onClick: () => {
-                setEditType(true)
-                setEditorVisible(true)
-              },
-            } as ButtonProps,
-          }}
-        >
-          <Option
-            key="create"
-            isSelectOption={false}
-            onClick={() => {
-              setEditType(false)
-              setEditorVisible(true)
             }}
           >
-            <Space
-              size="8px"
-              direction="horizontal"
-              align="center"
-              css={createNewStyle}
-            >
-              <AddIcon size="14px" />
-              {t("editor.action.panel.option.resource.new")}
-            </Space>
-          </Option>
-          {resourceList.map(item => {
-            return (
-              <Option value={item.resourceId} key={item.resourceId}>
-                <Space size="8px" direction="horizontal" align="center">
-                  {getIconFromResourceType(item.resourceType, "14px")}
-                  {item.resourceName}
-                </Space>
-              </Option>
-            )
-          })}
-        </Select>
-        <Select
-          colorScheme="techPurple"
-          w="400px"
-          value={action.triggerMode}
-          onChange={value => {
-            dispatch(
-              configActions.updateSelectedAction({
-                ...action,
-                triggerMode: value,
-              }),
-            )
-          }}
-        >
-          <Option value="manually" key="manually">
-            {t("editor.action.panel.option.trigger.manually")}
-          </Option>
-          <Option value="automate" key="automate">
-            {t("editor.action.panel.option.trigger.on_change")}
-          </Option>
-        </Select>
-      </Space>
-      <ResourceEditor
+            <Option value="manually" key="manually">
+              {t("editor.action.panel.option.trigger.manually")}
+            </Option>
+            <Option value="automate" key="automate">
+              {t("editor.action.panel.option.trigger.on_change")}
+            </Option>
+          </Select>
+        </Space>
+      </div>
+      <Modal
+        w="696px"
         visible={editorVisible}
-        edit={editType}
-        resourceId={action.resourceId}
-        onClose={() => {
+        footer={false}
+        closable
+        withoutLine
+        withoutPadding
+        title={getResourceNameFromResourceType(
+          getResourceTypeFromActionType(action.actionType),
+        )}
+        onCancel={() => {
           setEditorVisible(false)
         }}
-      />
-    </div>
+      >
+        <ResourceCreator
+          resourceId={action.resourceId}
+          onBack={() => {
+            setEditorVisible(false)
+          }}
+          onFinished={() => {
+            setEditorVisible(false)
+          }}
+        />
+      </Modal>
+    </>
   )
 }
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx
index 2403ebf746..75b7a3e57e 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx
@@ -100,7 +100,7 @@ function getBodyEditorComponent(
           value={(body as RawBody<RawBodyContent>).content}
           expectedType={VALIDATION_TYPES.STRING}
           height="88px"
-          onChange={(value) => {
+          onChange={value => {
             onChangeBody({
               type: rawBody.type,
               content: value,
@@ -116,7 +116,7 @@ function getBodyEditorComponent(
           value={body as BinaryBody}
           expectedType={VALIDATION_TYPES.STRING}
           height="88px"
-          onChange={(value) => {
+          onChange={value => {
             onChangeBody(value)
           }}
         />
@@ -124,7 +124,7 @@ function getBodyEditorComponent(
   }
 }
 
-export const BodyEditor: FC<BodyEditorProps> = (props) => {
+export const BodyEditor: FC<BodyEditorProps> = props => {
   const {
     body,
     bodyType,
@@ -151,19 +151,19 @@ export const BodyEditor: FC<BodyEditorProps> = (props) => {
               "raw",
               "binary",
             ]}
-            borderRadius={bodyType === "raw" ? " 8px 0 0 8px" : "8px"}
-            onChange={(value) => {
+            bdRadius={bodyType === "raw" ? " 8px 0 0 8px" : "8px"}
+            onChange={value => {
               onChangeBodyType(value)
             }}
           />
           {bodyType === "raw" && (
             <Select
-              borderRadius="0 8px 8px 0"
+              bdRadius="0 8px 8px 0"
               colorScheme="techPurple"
               width="162px"
               value={(body as RawBody<RawBodyContent>).type}
               options={["text", "json", "xml", "javascript", "html"]}
-              onChange={(value) => {
+              onChange={value => {
                 onChangeRawBodyType(value)
               }}
             />
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
index a4b2308a1a..de23f33126 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
@@ -13,7 +13,7 @@ import {
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { TransformerPanelProps } from "@/page/App/components/Actions/ActionPanel/interface"
 
-export const TransformerPanel: FC<TransformerPanelProps> = (props) => {
+export const TransformerPanel: FC<TransformerPanelProps> = props => {
   const action = props.action
   const dispatch = useDispatch()
   const { t } = useTranslation()
@@ -29,7 +29,7 @@ export const TransformerPanel: FC<TransformerPanelProps> = (props) => {
         height="88px"
         expectedType={VALIDATION_TYPES.STRING}
         mode="JAVASCRIPT"
-        onChange={(value) => {
+        onChange={value => {
           dispatch(
             configActions.updateSelectedAction({
               ...action,
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx
index fea0c34adf..944ae70550 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx
@@ -1,13 +1,17 @@
-import { FC, ReactNode, useRef, useState } from "react"
+import { FC, ReactNode, useCallback, useEffect, useRef, useState } from "react"
 import { actionPanelStyle } from "@/page/App/components/Actions/ActionPanel/style"
 import { useSelector } from "react-redux"
+import { useSize } from "react-use"
 import { getSelectedAction } from "@/redux/config/configSelector"
 import { ActionTitleBar } from "@/page/App/components/Actions/ActionPanel/ActionTitleBar"
-import { MysqlPanel } from "./MysqlPanel"
+import { MysqlLikePanel } from "./MysqlLikePanel"
 import { RestApiPanel } from "@/page/App/components/Actions/ActionPanel/RestApiPanel"
 import { TransformerPanel } from "@/page/App/components/Actions/ActionPanel/TransformerPanel"
-import { ActionItem } from "@/redux/currentApp/action/actionState"
-import { MysqlAction } from "@/redux/currentApp/action/mysqlAction"
+import {
+  ActionContent,
+  ActionItem,
+} from "@/redux/currentApp/action/actionState"
+import { MysqlLikeAction } from "@/redux/currentApp/action/mysqlLikeAction"
 import {
   BodyContent,
   RestApiAction,
@@ -17,10 +21,20 @@ import { onCopyActionItem, onDeleteActionItem } from "../api"
 import { ActionResult } from "@/page/App/components/Actions/ActionPanel/ActionResult"
 import { ActionResultType } from "@/page/App/components/Actions/ActionPanel/ActionResult/interface"
 
-export const ActionPanel: FC = () => {
+export interface ActionPanelProps {
+  maxHeight?: number
+}
+
+export const ActionPanel: FC<ActionPanelProps> = (props) => {
+  const { maxHeight } = props
   const panelRef = useRef<HTMLDivElement>(null)
   const selectedAction = useSelector(getSelectedAction)
   const [actionResult, setActionResult] = useState<ActionResultType>()
+
+  const run = useCallback((result, error) => {
+    setActionResult({ result, error })
+  }, [])
+
   // null selected
   if (selectedAction === null || selectedAction === undefined) {
     return null
@@ -28,8 +42,13 @@ export const ActionPanel: FC = () => {
   let actionPanel: ReactNode
   switch (selectedAction.actionType) {
     case "mysql":
+    case "tidb":
+    case "mariadb":
+    case "postgresql":
       actionPanel = (
-        <MysqlPanel action={selectedAction as ActionItem<MysqlAction>} />
+        <MysqlLikePanel
+          action={selectedAction as ActionItem<MysqlLikeAction>}
+        />
       )
       break
     case "restapi":
@@ -46,14 +65,6 @@ export const ActionPanel: FC = () => {
         />
       )
       break
-    case "mongodb":
-      break
-    case "redis":
-      break
-    case "postgresql":
-      break
-    default:
-      break
   }
 
   return (
@@ -62,9 +73,7 @@ export const ActionPanel: FC = () => {
         action={selectedAction}
         onCopy={onCopyActionItem}
         onDelete={onDeleteActionItem}
-        onActionRun={(result, error) => {
-          setActionResult({ result, error })
-        }}
+        onActionRun={run}
       />
       {actionPanel}
       <ActionResult
@@ -72,6 +81,7 @@ export const ActionPanel: FC = () => {
         onClose={() => {
           setActionResult(undefined)
         }}
+        maxHeight={maxHeight}
       />
     </div>
   )
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts
index 8a7e4ae713..88f1e65c71 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts
@@ -2,7 +2,7 @@ import {
   ActionContent,
   ActionItem,
 } from "@/redux/currentApp/action/actionState"
-import { MysqlAction } from "@/redux/currentApp/action/mysqlAction"
+import { MysqlLikeAction } from "@/redux/currentApp/action/mysqlLikeAction"
 import {
   BodyContent,
   RestApiAction,
@@ -13,8 +13,8 @@ export interface RestApiPanelProps {
   action: ActionItem<RestApiAction<BodyContent>>
 }
 
-export interface MysqlPanelProps {
-  action: ActionItem<MysqlAction>
+export interface MysqlLikePanelProps {
+  action: ActionItem<MysqlLikeAction>
 }
 
 export interface TransformerPanelProps {
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/utils/runAction.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/utils/runAction.ts
index f6915749ea..c3b56821ef 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/utils/runAction.ts
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/utils/runAction.ts
@@ -13,7 +13,7 @@ import { Api } from "@/api/base"
 import { getAppId } from "@/redux/currentApp/appInfo/appInfoSelector"
 import { runEventHandler } from "@/utils/eventHandlerHelper"
 import { BUILDER_CALC_CONTEXT } from "@/page/App/context/globalDataProvider"
-import { MysqlAction } from "@/redux/currentApp/action/mysqlAction"
+import { MysqlLikeAction } from "@/redux/currentApp/action/mysqlLikeAction"
 import { Message } from "@illa-design/message"
 import {
   BodyContent,
@@ -30,7 +30,7 @@ function calcRealContent(content: Record<string, any>) {
     // @ts-ignore
     const value = content[key]
     if (Array.isArray(value)) {
-      realContent[key] = value.map((item) => {
+      realContent[key] = value.map(item => {
         return calcRealContent(item)
       })
     }
@@ -77,7 +77,7 @@ const fetchActionResult = (
   displayName: string,
   appId: string,
   actionId: string,
-  actionContent: MysqlAction | RestApiAction<BodyContent>,
+  actionContent: MysqlLikeAction | RestApiAction<BodyContent>,
   successEvent: any[] = [],
   failedEvent: any[] = [],
   transformer: Transformer,
@@ -95,7 +95,7 @@ const fetchActionResult = (
         content: actionContent,
       },
     },
-    (data) => {
+    data => {
       // @ts-ignore
       //TODO: @aruseito not use any
       const rawData = data.data.Rows
@@ -105,27 +105,27 @@ const fetchActionResult = (
       if (!isTrigger) {
         store.dispatch(executionActions.startExecutionReducer())
       }
-      successEvent.forEach((scriptObj) => {
+      successEvent.forEach(scriptObj => {
         runEventHandler(scriptObj, BUILDER_CALC_CONTEXT)
       })
     },
-    (res) => {
+    res => {
       resultCallback?.(res.data, true)
-      failedEvent.forEach((scriptObj) => {
+      failedEvent.forEach(scriptObj => {
         runEventHandler(scriptObj, BUILDER_CALC_CONTEXT)
       })
     },
-    (res) => {
+    res => {
       resultCallback?.(res, true)
       Message.error("not online")
     },
-    (loading) => {},
+    loading => {},
   )
 }
 
 function getRealEventHandler(eventHandler?: any[]) {
   const realEventHandler: any[] = []
-  eventHandler?.map((item) => {
+  eventHandler?.map(item => {
     const event: Record<string, any> = calcRealContent(item)
     realEventHandler.push(event)
   })
@@ -141,9 +141,9 @@ export const runAction = (
   if (!content) return
   const rootState = store.getState()
   const appId = getAppId(rootState)
-  if (actionType === "mysql" || actionType === "restapi") {
+  if (actionType !== "transformer") {
     const { content, transformer } = action as ActionItem<
-      MysqlAction | RestApiAction<BodyContent>
+      MysqlLikeAction | RestApiAction<BodyContent>
     >
     const { successEvent, failedEvent, ...restContent } = content
     const realContent: Record<string, any> = isTrigger
@@ -161,7 +161,7 @@ export const runAction = (
       displayName,
       appId,
       actionId,
-      realContent as MysqlAction | RestApiAction<BodyContent>,
+      realContent as MysqlLikeAction | RestApiAction<BodyContent>,
       realSuccessEvent,
       realFailedEvent,
       transformer,
diff --git a/apps/builder/src/page/App/components/Actions/DragBar/index.tsx b/apps/builder/src/page/App/components/Actions/DragBar/index.tsx
index e70699108a..f482fd29fd 100644
--- a/apps/builder/src/page/App/components/Actions/DragBar/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/DragBar/index.tsx
@@ -8,6 +8,7 @@ const handleResize = (
   movementY: number,
   minHeight: number,
   maxHeight?: number,
+  callback?: () => void,
 ) => {
   const resize = resizeRef?.current
   if (!resize) return
@@ -18,18 +19,21 @@ const handleResize = (
   if (isNumber(maxHeight) && updatedHeight > maxHeight) return
 
   if (updatedHeight < window.innerHeight && updatedHeight > minHeight) {
-    resize.style.height = `${height - movementY}px`
+    resize.style.height = `${updatedHeight}px`
+    callback?.()
   }
 }
 
 export const DragBar: FC<DragBarProps> = (props) => {
-  const { resizeRef, minHeight = 300, maxHeight } = props
+  const { resizeRef, minHeight = 300, maxHeight, onChange } = props
   const [mouseDown, setMouseDown] = useState(false)
 
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       e.preventDefault()
-      handleResize(resizeRef, e.movementY, minHeight, maxHeight)
+      handleResize(resizeRef, e.movementY, minHeight, maxHeight, () => {
+        onChange?.()
+      })
     }
     if (mouseDown) {
       window.addEventListener("mousemove", handleMouseMove)
@@ -38,7 +42,7 @@ export const DragBar: FC<DragBarProps> = (props) => {
     return () => {
       window.removeEventListener("mousemove", handleMouseMove)
     }
-  }, [mouseDown])
+  }, [maxHeight, minHeight, mouseDown, resizeRef])
 
   useEffect(() => {
     handleResize(resizeRef, 0, minHeight, maxHeight)
@@ -48,7 +52,7 @@ export const DragBar: FC<DragBarProps> = (props) => {
     return () => {
       window.removeEventListener("mouseup", handleMouseUp)
     }
-  }, [])
+  }, [maxHeight, minHeight, resizeRef])
 
   return (
     <div
diff --git a/apps/builder/src/page/App/components/Actions/DragBar/interface.ts b/apps/builder/src/page/App/components/Actions/DragBar/interface.ts
index a382076c6c..d085349c23 100644
--- a/apps/builder/src/page/App/components/Actions/DragBar/interface.ts
+++ b/apps/builder/src/page/App/components/Actions/DragBar/interface.ts
@@ -5,4 +5,5 @@ export interface DragBarProps extends HTMLAttributes<HTMLDivElement> {
   minHeight?: number
   maxHeight?: number
   setContainerDimensions?: (height: number) => void
+  onChange?: () => void
 }
diff --git a/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/index.tsx b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/index.tsx
new file mode 100644
index 0000000000..2bd8eda169
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/index.tsx
@@ -0,0 +1,529 @@
+import { FC, useState } from "react"
+import { MysqlConfigElementProps } from "./interface"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  configItemTip,
+  connectTypeStyle,
+  container,
+  divider,
+  footerStyle,
+  hostInputContainer,
+  labelContainer,
+  optionLabelStyle,
+  sslItem,
+  sslStyle,
+} from "./style"
+import { Input, Password, TextArea } from "@illa-design/input"
+import { getColor } from "@illa-design/theme"
+import { useTranslation } from "react-i18next"
+import { Divider } from "@illa-design/divider"
+import { Switch } from "@illa-design/switch"
+import { InputNumber } from "@illa-design/input-number"
+import { Controller, useForm } from "react-hook-form"
+import { Button, ButtonGroup } from "@illa-design/button"
+import { PaginationPreIcon } from "@illa-design/icon"
+import { useDispatch, useSelector } from "react-redux"
+import { RootState } from "@/store"
+import {
+  generateSSLConfig,
+  MysqlResource,
+  Resource,
+} from "@/redux/resource/resourceState"
+import { Api } from "@/api/base"
+import { resourceActions } from "@/redux/resource/resourceSlice"
+import { Message } from "@illa-design/message"
+
+/**
+ * include mariadb or tidb
+ * @param props
+ * @constructor
+ */
+export const MysqlLikeConfigElement: FC<MysqlConfigElementProps> = props => {
+  const { onBack, resourceType, resourceId, onFinished } = props
+
+  const { t } = useTranslation()
+
+  const dispatch = useDispatch()
+
+  const { control, handleSubmit, getValues, formState } = useForm({
+    mode: "onChange",
+  })
+
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(r => r.resourceId === resourceId) as Resource<
+      MysqlResource
+    >
+  })
+
+  const [sslOpen, setSSLOpen] = useState(resource?.content.ssl.ssl ?? false)
+
+  const [testLoading, setTestLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  return (
+    <form
+      onSubmit={handleSubmit((data, event) => {
+        if (resourceId != undefined) {
+          Api.request<Resource<MysqlResource>>(
+            {
+              method: "PUT",
+              url: `/resources/${resourceId}`,
+              data: {
+                resourceId: data.resourceId,
+                resourceName: data.resourceName,
+                resourceType: resource.resourceType,
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.updateResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            error => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        } else {
+          Api.request<Resource<MysqlResource>>(
+            {
+              method: "POST",
+              url: `/resources`,
+              data: {
+                resourceName: data.resourceName,
+                resourceType,
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.addResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            error => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        }
+      })}
+    >
+      <div css={container}>
+        <div css={divider} />
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.mysql.label.name")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.resourceName ?? ""}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t("editor.action.resource.mysql.placeholder.name")}
+              />
+            )}
+            name="resourceName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.mysql.label.hostname_port")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.host}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.mysql.placeholder.hostname",
+                  )}
+                />
+              )}
+              name="host"
+            />
+            <Controller
+              defaultValue={resource?.content.port}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <InputNumber
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  w="142px"
+                  ml="8px"
+                  placeholder="3306"
+                />
+              )}
+              name="port"
+            />
+          </div>
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.mysql.label.database")}
+            </span>
+          </div>
+          <Controller
+            defaultValue={resource?.content.databaseName}
+            control={control}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.mysql.placeholder.database",
+                )}
+              />
+            )}
+            name="databaseName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.mysql.label.username_password")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.databaseUsername}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.mysql.placeholder.username",
+                  )}
+                />
+              )}
+              name="databaseUsername"
+            />
+            <Controller
+              control={control}
+              defaultValue={resource?.content.databasePassword}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Password
+                  borderColor="techPurple"
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  ml="8px"
+                  placeholder={t(
+                    "editor.action.resource.mysql.placeholder.password",
+                  )}
+                />
+              )}
+              name="databasePassword"
+            />
+          </div>
+        </div>
+        <span css={configItemTip}>
+          {t("editor.action.resource.mysql.tip.username_password")}
+        </span>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.mysql.label.connect_type")}
+            </span>
+          </div>
+          <span css={connectTypeStyle}>
+            {t("editor.action.resource.mysql.tip.connect_type")}
+          </span>
+        </div>
+        <Divider
+          direction="horizontal"
+          ml="24px"
+          mr="24px"
+          mt="8px"
+          mb="8px"
+          w="unset"
+        />
+        <div css={optionLabelStyle}>
+          {t("editor.action.resource.mysql.title.advanced_option")}
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.mysql.label.ssl_options")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.content.ssl.ssl}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Switch
+                value={value}
+                ml="16px"
+                colorScheme="techPurple"
+                onChange={open => {
+                  onChange(open)
+                  setSSLOpen(open)
+                }}
+                onBlur={onBlur}
+              />
+            )}
+            name="ssl"
+          />
+          <span css={sslStyle}>
+            {t("editor.action.resource.mysql.tip.ssl_options")}
+          </span>
+        </div>
+        {sslOpen && (
+          <>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span css={applyConfigItemLabelText(getColor("red", "02"))}>
+                  *
+                </span>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.mysql.label.ca_certificate")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.serverCert}
+                rules={{
+                  required: true,
+                }}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    value={value}
+                    autoSize
+                    placeholder={t(
+                      "editor.action.resource.mysql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="serverCert"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.mysql.label.client_key")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.clientKey}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.mysql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientKey"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.mysql.label.client_certificate")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                shouldUnregister={true}
+                defaultValue={resource?.content.ssl.clientCert}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.mysql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientCert"
+              />
+            </div>
+          </>
+        )}
+      </div>
+      <div css={footerStyle}>
+        <Button
+          leftIcon={<PaginationPreIcon />}
+          variant="text"
+          colorScheme="gray"
+          type="button"
+          onClick={() => {
+            onBack()
+          }}
+        >
+          {t("back")}
+        </Button>
+        <ButtonGroup spacing="8px">
+          <Button
+            colorScheme="gray"
+            loading={testLoading}
+            disabled={!formState.isValid}
+            type="button"
+            onClick={() => {
+              const data = getValues()
+              Api.request<Resource<MysqlResource>>(
+                {
+                  method: "POST",
+                  url: `/resources/testConnection`,
+                  data: {
+                    resourceId: data.resourceId,
+                    resourceName: data.resourceName,
+                    resourceType,
+                    content: {
+                      host: data.host,
+                      port: data.port.toString(),
+                      databaseName: data.databaseName,
+                      databaseUsername: data.databaseUsername,
+                      databasePassword: data.databasePassword,
+                      ssl: generateSSLConfig(sslOpen, data),
+                    },
+                  },
+                },
+                response => {
+                  Message.success(t("dashboard.resource.test_success"))
+                },
+                error => {
+                  Message.error(error.data.errorMessage)
+                },
+                () => {
+                  Message.error(t("dashboard.resource.test_fail"))
+                },
+                loading => {
+                  setTestLoading(loading)
+                },
+              )
+            }}
+          >
+            {t("editor.action.form.btn.test_connection")}
+          </Button>
+          <Button
+            colorScheme="techPurple"
+            disabled={!formState.isValid}
+            loading={saving}
+            type="submit"
+          >
+            {t("editor.action.form.btn.save_changes")}
+          </Button>
+        </ButtonGroup>
+      </div>
+    </form>
+  )
+}
+
+MysqlLikeConfigElement.displayName = "MysqlConfigElement"
diff --git a/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/interface.ts b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/interface.ts
new file mode 100644
index 0000000000..268bf65e17
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/interface.ts
@@ -0,0 +1,8 @@
+import { ResourceType } from "@/redux/resource/resourceState"
+
+export interface MysqlConfigElementProps {
+  resourceType: ResourceType
+  resourceId?: string
+  onBack: () => void
+  onFinished: (resourceId: string) => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/style.ts b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/style.ts
new file mode 100644
index 0000000000..7c389d3bba
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/MysqlLikeConfigElement/style.ts
@@ -0,0 +1,93 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor } from "@illa-design/theme"
+
+export const container = css`
+  width: 100%;
+  max-height: 685px;
+  overflow-y: auto;
+`
+
+export const footerStyle = css`
+  height: 80px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const labelContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-width: 176px;
+`
+
+export const configItem = css`
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  flex-direction: row;
+`
+
+export const sslItem = css`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`
+
+export const divider = css`
+  height: 16px;
+`
+
+export const hostInputContainer = css`
+  display: flex;
+  margin-left: 16px;
+  margin-right: 24px;
+  flex-direction: row;
+  width: 100%;
+`
+
+export function applyConfigItemLabelText(
+  color: string,
+  margin?: boolean,
+): SerializedStyles {
+  let marginLeft = css``
+  if (margin) {
+    marginLeft = css`
+      margin-left: 4px;
+    `
+  }
+  return css`
+    font-size: 14px;
+    color: ${color};
+    font-weight: 500;
+    ${marginLeft};
+  `
+}
+
+export const configItemTip = css`
+  font-size: 14px;
+  margin-left: 192px;
+  color: ${getColor("grayBlue", "04")};
+`
+
+export const connectTypeStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 16px;
+`
+
+export const sslStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 8px;
+`
+
+export const optionLabelStyle = css`
+  height: 38px;
+  display: flex;
+  font-size: 14px;
+  color: ${getColor("grayBlue", "04")};
+  align-items: center;
+  padding-left: 24px;
+`
diff --git a/apps/builder/src/page/App/components/Actions/PostgreConfigElement/index.tsx b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/index.tsx
new file mode 100644
index 0000000000..010e25476b
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/index.tsx
@@ -0,0 +1,528 @@
+import { FC, useState } from "react"
+import { PostgreConfigElementProps } from "./interface"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  configItemTip,
+  connectTypeStyle,
+  container,
+  divider,
+  footerStyle,
+  hostInputContainer,
+  labelContainer,
+  optionLabelStyle,
+  sslItem,
+  sslStyle,
+} from "./style"
+import { Input, Password, TextArea } from "@illa-design/input"
+import { getColor } from "@illa-design/theme"
+import { useTranslation } from "react-i18next"
+import { Divider } from "@illa-design/divider"
+import { Switch } from "@illa-design/switch"
+import { InputNumber } from "@illa-design/input-number"
+import { Controller, useForm } from "react-hook-form"
+import { Button, ButtonGroup } from "@illa-design/button"
+import { PaginationPreIcon } from "@illa-design/icon"
+import { useDispatch, useSelector } from "react-redux"
+import { RootState } from "@/store"
+import {
+  generateSSLConfig,
+  PostgreSqlResource,
+  Resource,
+} from "@/redux/resource/resourceState"
+import { Api } from "@/api/base"
+import { resourceActions } from "@/redux/resource/resourceSlice"
+import { Message } from "@illa-design/message"
+
+export const PostgreConfigElement: FC<PostgreConfigElementProps> = (props) => {
+  const { onBack, resourceId, onFinished } = props
+
+  const { t } = useTranslation()
+
+  const dispatch = useDispatch()
+
+  const { control, handleSubmit, getValues, formState } = useForm({
+    mode: "onChange",
+  })
+
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(
+      (r) => r.resourceId === resourceId,
+    ) as Resource<PostgreSqlResource>
+  })
+
+  const [sslOpen, setSSLOpen] = useState(resource?.content.ssl.ssl ?? false)
+
+  const [testLoading, setTestLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  return (
+    <form
+      onSubmit={handleSubmit((data, event) => {
+        if (resourceId != undefined) {
+          Api.request<Resource<PostgreSqlResource>>(
+            {
+              method: "PUT",
+              url: `/resources/${resourceId}`,
+              data: {
+                resourceId: data.resourceId,
+                resourceName: data.resourceName,
+                resourceType: "postgresql",
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            (response) => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.updateResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            (error) => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            (loading) => {
+              setSaving(loading)
+            },
+          )
+        } else {
+          Api.request<Resource<PostgreSqlResource>>(
+            {
+              method: "POST",
+              url: `/resources`,
+              data: {
+                resourceName: data.resourceName,
+                resourceType: "postgresql",
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            (response) => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.addResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            (error) => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            (loading) => {
+              setSaving(loading)
+            },
+          )
+        }
+      })}
+    >
+      <div css={container}>
+        <div css={divider} />
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.postgresql.label.name")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.resourceName ?? ""}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.postgresql.placeholder.name",
+                )}
+              />
+            )}
+            name="resourceName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.postgresql.label.hostname_port")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.host}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.postgresql.placeholder.hostname",
+                  )}
+                />
+              )}
+              name="host"
+            />
+            <Controller
+              defaultValue={resource?.content.port}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <InputNumber
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  w="142px"
+                  ml="8px"
+                  placeholder="3306"
+                />
+              )}
+              name="port"
+            />
+          </div>
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.postgresql.label.database")}
+            </span>
+          </div>
+          <Controller
+            defaultValue={resource?.content.databaseName}
+            control={control}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.postgresql.placeholder.database",
+                )}
+              />
+            )}
+            name="databaseName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.postgresql.label.username_password")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.databaseUsername}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.postgresql.placeholder.username",
+                  )}
+                />
+              )}
+              name="databaseUsername"
+            />
+            <Controller
+              control={control}
+              defaultValue={resource?.content.databasePassword}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Password
+                  borderColor="techPurple"
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  ml="8px"
+                  placeholder={t(
+                    "editor.action.resource.postgresql.placeholder.password",
+                  )}
+                />
+              )}
+              name="databasePassword"
+            />
+          </div>
+        </div>
+        <span css={configItemTip}>
+          {t("editor.action.resource.postgresql.tip.username_password")}
+        </span>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.postgresql.label.connect_type")}
+            </span>
+          </div>
+          <span css={connectTypeStyle}>
+            {t("editor.action.resource.postgresql.tip.connect_type")}
+          </span>
+        </div>
+        <Divider
+          direction="horizontal"
+          ml="24px"
+          mr="24px"
+          mt="8px"
+          mb="8px"
+          w="unset"
+        />
+        <div css={optionLabelStyle}>
+          {t("editor.action.resource.postgresql.title.advanced_option")}
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.postgresql.label.ssl_options")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.content.ssl.ssl}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Switch
+                value={value}
+                ml="16px"
+                colorScheme="techPurple"
+                onChange={(open) => {
+                  onChange(open)
+                  setSSLOpen(open)
+                }}
+                onBlur={onBlur}
+              />
+            )}
+            name="ssl"
+          />
+          <span css={sslStyle}>
+            {t("editor.action.resource.postgresql.tip.ssl_options")}
+          </span>
+        </div>
+        {sslOpen && (
+          <>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span css={applyConfigItemLabelText(getColor("red", "02"))}>
+                  *
+                </span>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.postgresql.label.ca_certificate")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.serverCert}
+                rules={{
+                  required: true,
+                }}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    value={value}
+                    autoSize
+                    placeholder={t(
+                      "editor.action.resource.postgresql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="serverCert"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.postgresql.label.client_key")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.clientKey}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.postgresql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientKey"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t(
+                    "editor.action.resource.postgresql.label.client_certificate",
+                  )}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                shouldUnregister={true}
+                defaultValue={resource?.content.ssl.clientCert}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.postgresql.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientCert"
+              />
+            </div>
+          </>
+        )}
+      </div>
+      <div css={footerStyle}>
+        <Button
+          leftIcon={<PaginationPreIcon />}
+          variant="text"
+          colorScheme="gray"
+          type="button"
+          onClick={() => {
+            onBack()
+          }}
+        >
+          {t("back")}
+        </Button>
+        <ButtonGroup spacing="8px">
+          <Button
+            colorScheme="gray"
+            loading={testLoading}
+            disabled={!formState.isValid}
+            type="button"
+            onClick={() => {
+              const data = getValues()
+              Api.request<Resource<PostgreSqlResource>>(
+                {
+                  method: "POST",
+                  url: `/resources/testConnection`,
+                  data: {
+                    resourceId: data.resourceId,
+                    resourceName: data.resourceName,
+                    resourceType: "postgresql",
+                    content: {
+                      host: data.host,
+                      port: data.port.toString(),
+                      databaseName: data.databaseName,
+                      databaseUsername: data.databaseUsername,
+                      databasePassword: data.databasePassword,
+                      ssl: generateSSLConfig(sslOpen, data),
+                    },
+                  },
+                },
+                (response) => {
+                  Message.success(t("dashboard.resource.test_success"))
+                },
+                (error) => {
+                  Message.error(error.data.errorMessage)
+                },
+                () => {
+                  Message.error(t("dashboard.resource.test_fail"))
+                },
+                (loading) => {
+                  setTestLoading(loading)
+                },
+              )
+            }}
+          >
+            {t("editor.action.form.btn.test_connection")}
+          </Button>
+          <Button
+            colorScheme="techPurple"
+            disabled={!formState.isValid}
+            loading={saving}
+            type="submit"
+          >
+            {t("editor.action.form.btn.save_changes")}
+          </Button>
+        </ButtonGroup>
+      </div>
+    </form>
+  )
+}
+
+PostgreConfigElement.displayName = "PostgreConfigElement"
diff --git a/apps/builder/src/page/App/components/Actions/PostgreConfigElement/interface.ts b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/interface.ts
new file mode 100644
index 0000000000..e186dd693a
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/interface.ts
@@ -0,0 +1,5 @@
+export interface PostgreConfigElementProps {
+  resourceId?: string
+  onBack: () => void
+  onFinished: (resourceId: string) => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/PostgreConfigElement/style.ts b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/style.ts
new file mode 100644
index 0000000000..fafa57d14c
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/PostgreConfigElement/style.ts
@@ -0,0 +1,93 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor } from "@illa-design/theme"
+
+export const container = css`
+  width: 100%;
+  max-height: 685px;
+  overflow-y: auto;
+`
+
+export const footerStyle = css`
+  height: 80px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const labelContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-width: 176px;
+`
+
+export const configItem = css`
+  display: flex;
+  height: 48px;
+  align-items: center;
+  flex-direction: row;
+`
+
+export const sslItem = css`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`
+
+export const divider = css`
+  height: 16px;
+`
+
+export const hostInputContainer = css`
+  display: flex;
+  margin-left: 16px;
+  margin-right: 24px;
+  flex-direction: row;
+  width: 100%;
+`
+
+export function applyConfigItemLabelText(
+  color: string,
+  margin?: boolean,
+): SerializedStyles {
+  let marginLeft = css``
+  if (margin) {
+    marginLeft = css`
+      margin-left: 4px;
+    `
+  }
+  return css`
+    font-size: 14px;
+    color: ${color};
+    font-weight: 500;
+    ${marginLeft};
+  `
+}
+
+export const configItemTip = css`
+  font-size: 14px;
+  margin-left: 192px;
+  color: ${getColor("grayBlue", "04")};
+`
+
+export const connectTypeStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 16px;
+`
+
+export const sslStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 8px;
+`
+
+export const optionLabelStyle = css`
+  height: 38px;
+  display: flex;
+  font-size: 14px;
+  color: ${getColor("grayBlue", "04")};
+  align-items: center;
+  padding-left: 24px;
+`
diff --git a/apps/builder/src/page/App/components/Actions/RedisConfigElement/index.tsx b/apps/builder/src/page/App/components/Actions/RedisConfigElement/index.tsx
new file mode 100644
index 0000000000..51a6fcc213
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RedisConfigElement/index.tsx
@@ -0,0 +1,518 @@
+import { FC, useState } from "react"
+import { RedisConfigElementProps } from "./interface"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  configItemTip,
+  connectTypeStyle,
+  container,
+  divider,
+  footerStyle,
+  hostInputContainer,
+  labelContainer,
+  optionLabelStyle,
+  sslItem,
+  sslStyle,
+} from "./style"
+import { Input, Password, TextArea } from "@illa-design/input"
+import { getColor } from "@illa-design/theme"
+import { useTranslation } from "react-i18next"
+import { Divider } from "@illa-design/divider"
+import { Switch } from "@illa-design/switch"
+import { InputNumber } from "@illa-design/input-number"
+import { Controller, useForm } from "react-hook-form"
+import { Button, ButtonGroup } from "@illa-design/button"
+import { PaginationPreIcon } from "@illa-design/icon"
+import { useDispatch, useSelector } from "react-redux"
+import { RootState } from "@/store"
+import {
+  generateSSLConfig,
+  RedisResource,
+  Resource,
+} from "@/redux/resource/resourceState"
+import { Api } from "@/api/base"
+import { resourceActions } from "@/redux/resource/resourceSlice"
+import { Message } from "@illa-design/message"
+
+export const RedisConfigElement: FC<RedisConfigElementProps> = props => {
+  const { onBack, resourceId, onFinished } = props
+
+  const { t } = useTranslation()
+
+  const dispatch = useDispatch()
+
+  const { control, handleSubmit, getValues, formState } = useForm({
+    mode: "onChange",
+  })
+
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(r => r.resourceId === resourceId) as Resource<
+      RedisResource
+    >
+  })
+
+  const [sslOpen, setSSLOpen] = useState(resource?.content.ssl.ssl ?? false)
+
+  const [testLoading, setTestLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  return (
+    <form
+      onSubmit={handleSubmit((data, event) => {
+        if (resourceId != undefined) {
+          Api.request<Resource<RedisResource>>(
+            {
+              method: "PUT",
+              url: `/resources/${resourceId}`,
+              data: {
+                resourceId: data.resourceId,
+                resourceName: data.resourceName,
+                resourceType: "redis",
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.updateResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            error => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        } else {
+          Api.request<Resource<RedisResource>>(
+            {
+              method: "POST",
+              url: `/resources`,
+              data: {
+                resourceName: data.resourceName,
+                resourceType: "redis",
+                content: {
+                  host: data.host,
+                  port: data.port.toString(),
+                  databaseName: data.databaseName,
+                  databaseUsername: data.databaseUsername,
+                  databasePassword: data.databasePassword,
+                  ssl: generateSSLConfig(sslOpen, data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.addResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            error => {
+              Message.error(error.data.errorMessage)
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        }
+      })}
+    >
+      <div css={container}>
+        <div css={divider} />
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.redis.label.name")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.resourceName ?? ""}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t("editor.action.resource.redis.placeholder.name")}
+              />
+            )}
+            name="resourceName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.redis.label.hostname_port")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.host}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.redis.placeholder.hostname",
+                  )}
+                />
+              )}
+              name="host"
+            />
+            <Controller
+              defaultValue={resource?.content.port}
+              control={control}
+              rules={{
+                required: true,
+              }}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <InputNumber
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  w="142px"
+                  ml="8px"
+                  placeholder="3306"
+                />
+              )}
+              name="port"
+            />
+          </div>
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.redis.label.database")}
+            </span>
+          </div>
+          <Controller
+            defaultValue={resource?.content.databaseName}
+            control={control}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.redis.placeholder.database",
+                )}
+              />
+            )}
+            name="databaseName"
+          />
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.redis.label.username_password")}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            <Controller
+              defaultValue={resource?.content.databaseUsername}
+              control={control}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  borderColor="techPurple"
+                  placeholder={t(
+                    "editor.action.resource.redis.placeholder.username",
+                  )}
+                />
+              )}
+              name="databaseUsername"
+            />
+            <Controller
+              control={control}
+              defaultValue={resource?.content.databasePassword}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Password
+                  borderColor="techPurple"
+                  w="100%"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  ml="8px"
+                  placeholder={t(
+                    "editor.action.resource.redis.placeholder.password",
+                  )}
+                />
+              )}
+              name="databasePassword"
+            />
+          </div>
+        </div>
+        <span css={configItemTip}>
+          {t("editor.action.resource.redis.tip.username_password")}
+        </span>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.redis.label.connect_type")}
+            </span>
+          </div>
+          <span css={connectTypeStyle}>
+            {t("editor.action.resource.redis.tip.connect_type")}
+          </span>
+        </div>
+        <Divider
+          direction="horizontal"
+          ml="24px"
+          mr="24px"
+          mt="8px"
+          mb="8px"
+          w="unset"
+        />
+        <div css={optionLabelStyle}>
+          {t("editor.action.resource.redis.title.advanced_option")}
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("grayBlue", "02"))}>
+              {t("editor.action.resource.redis.label.ssl_options")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.content.ssl.ssl}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Switch
+                value={value}
+                ml="16px"
+                colorScheme="techPurple"
+                onChange={open => {
+                  onChange(open)
+                  setSSLOpen(open)
+                }}
+                onBlur={onBlur}
+              />
+            )}
+            name="ssl"
+          />
+          <span css={sslStyle}>
+            {t("editor.action.resource.redis.tip.ssl_options")}
+          </span>
+        </div>
+        {sslOpen && (
+          <>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span css={applyConfigItemLabelText(getColor("red", "02"))}>
+                  *
+                </span>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.redis.label.ca_certificate")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.serverCert}
+                rules={{
+                  required: true,
+                }}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    value={value}
+                    autoSize
+                    placeholder={t(
+                      "editor.action.resource.redis.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="serverCert"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.redis.label.client_key")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                defaultValue={resource?.content.ssl.clientKey}
+                shouldUnregister={true}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.redis.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientKey"
+              />
+            </div>
+            <div css={sslItem}>
+              <div css={labelContainer}>
+                <span
+                  css={applyConfigItemLabelText(
+                    getColor("grayBlue", "02"),
+                    true,
+                  )}
+                >
+                  {t("editor.action.resource.redis.label.client_certificate")}
+                </span>
+              </div>
+              <Controller
+                control={control}
+                shouldUnregister={true}
+                defaultValue={resource?.content.ssl.clientCert}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <TextArea
+                    ml="16px"
+                    mr="24px"
+                    autoSize
+                    value={value}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    placeholder={t(
+                      "editor.action.resource.redis.placeholder.certificate",
+                    )}
+                  />
+                )}
+                name="clientCert"
+              />
+            </div>
+          </>
+        )}
+      </div>
+      <div css={footerStyle}>
+        <Button
+          leftIcon={<PaginationPreIcon />}
+          variant="text"
+          colorScheme="gray"
+          type="button"
+          onClick={() => {
+            onBack()
+          }}
+        >
+          {t("back")}
+        </Button>
+        <ButtonGroup spacing="8px">
+          <Button
+            colorScheme="gray"
+            loading={testLoading}
+            disabled={!formState.isValid}
+            type="button"
+            onClick={() => {
+              const data = getValues()
+              Api.request<Resource<RedisResource>>(
+                {
+                  method: "POST",
+                  url: `/resources/testConnection`,
+                  data: {
+                    resourceId: data.resourceId,
+                    resourceName: data.resourceName,
+                    resourceType: "redis",
+                    content: {
+                      host: data.host,
+                      port: data.port.toString(),
+                      databaseName: data.databaseName,
+                      databaseUsername: data.databaseUsername,
+                      databasePassword: data.databasePassword,
+                      ssl: generateSSLConfig(sslOpen, data),
+                    },
+                  },
+                },
+                response => {
+                  Message.success(t("dashboard.resource.test_success"))
+                },
+                error => {
+                  Message.error(error.data.errorMessage)
+                },
+                () => {
+                  Message.error(t("dashboard.resource.test_fail"))
+                },
+                loading => {
+                  setTestLoading(loading)
+                },
+              )
+            }}
+          >
+            {t("editor.action.form.btn.test_connection")}
+          </Button>
+          <Button
+            colorScheme="techPurple"
+            disabled={!formState.isValid}
+            loading={saving}
+            type="submit"
+          >
+            {t("editor.action.form.btn.save_changes")}
+          </Button>
+        </ButtonGroup>
+      </div>
+    </form>
+  )
+}
+
+RedisConfigElement.displayName = "RedisConfigElement"
diff --git a/apps/builder/src/page/App/components/Actions/RedisConfigElement/interface.ts b/apps/builder/src/page/App/components/Actions/RedisConfigElement/interface.ts
new file mode 100644
index 0000000000..8a045face7
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RedisConfigElement/interface.ts
@@ -0,0 +1,5 @@
+export interface RedisConfigElementProps {
+  resourceId?: string
+  onBack: () => void
+  onFinished: (resourceId: string) => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/RedisConfigElement/style.ts b/apps/builder/src/page/App/components/Actions/RedisConfigElement/style.ts
new file mode 100644
index 0000000000..fafa57d14c
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RedisConfigElement/style.ts
@@ -0,0 +1,93 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor } from "@illa-design/theme"
+
+export const container = css`
+  width: 100%;
+  max-height: 685px;
+  overflow-y: auto;
+`
+
+export const footerStyle = css`
+  height: 80px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const labelContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-width: 176px;
+`
+
+export const configItem = css`
+  display: flex;
+  height: 48px;
+  align-items: center;
+  flex-direction: row;
+`
+
+export const sslItem = css`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`
+
+export const divider = css`
+  height: 16px;
+`
+
+export const hostInputContainer = css`
+  display: flex;
+  margin-left: 16px;
+  margin-right: 24px;
+  flex-direction: row;
+  width: 100%;
+`
+
+export function applyConfigItemLabelText(
+  color: string,
+  margin?: boolean,
+): SerializedStyles {
+  let marginLeft = css``
+  if (margin) {
+    marginLeft = css`
+      margin-left: 4px;
+    `
+  }
+  return css`
+    font-size: 14px;
+    color: ${color};
+    font-weight: 500;
+    ${marginLeft};
+  `
+}
+
+export const configItemTip = css`
+  font-size: 14px;
+  margin-left: 192px;
+  color: ${getColor("grayBlue", "04")};
+`
+
+export const connectTypeStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 16px;
+`
+
+export const sslStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "02")};
+  margin-left: 8px;
+`
+
+export const optionLabelStyle = css`
+  height: 38px;
+  display: flex;
+  font-size: 14px;
+  color: ${getColor("grayBlue", "04")};
+  align-items: center;
+  padding-left: 24px;
+`
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/index.tsx b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/index.tsx
new file mode 100644
index 0000000000..75ff1dc300
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/index.tsx
@@ -0,0 +1,84 @@
+import { FC } from "react"
+import { BasicAuthPanelProps } from "./interface"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  labelContainer,
+} from "@/page/App/components/Actions/RestApiConfigElement/style"
+import { getColor } from "@illa-design/theme"
+import { Controller } from "react-hook-form"
+import { Input, Password } from "@illa-design/input"
+import { useTranslation } from "react-i18next"
+
+export const BasicAuthPanel: FC<BasicAuthPanelProps> = props => {
+  const { control, auth } = props
+
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div css={configItem}>
+        <div css={labelContainer}>
+          <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+          <span
+            css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+          >
+            {t("editor.action.resource.restapi.label.basic_auth_username")}
+          </span>
+        </div>
+        <Controller
+          control={control}
+          rules={{
+            required: true,
+          }}
+          defaultValue={auth?.username}
+          shouldUnregister={true}
+          render={({ field: { value, onChange, onBlur } }) => (
+            <Input
+              w="100%"
+              ml="16px"
+              mr="24px"
+              onBlur={onBlur}
+              onChange={onChange}
+              value={value}
+              borderColor="techPurple"
+            />
+          )}
+          name="username"
+        />
+      </div>
+      <div css={configItem}>
+        <div css={labelContainer}>
+          <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+          <span
+            css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+          >
+            {t("editor.action.resource.restapi.label.basic_auth_password")}
+          </span>
+        </div>
+        <Controller
+          control={control}
+          rules={{
+            required: true,
+          }}
+          defaultValue={auth?.password}
+          shouldUnregister={true}
+          render={({ field: { value, onChange, onBlur } }) => (
+            <Password
+              w="100%"
+              ml="16px"
+              mr="24px"
+              onBlur={onBlur}
+              onChange={onChange}
+              value={value}
+              borderColor="techPurple"
+            />
+          )}
+          name="password"
+        />
+      </div>
+    </>
+  )
+}
+
+BasicAuthPanel.displayName = "BasicAuthPanel"
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/interface.ts b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/interface.ts
new file mode 100644
index 0000000000..ea1de3aecc
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel/interface.ts
@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form"
+import { BasicAuth, RestApiResource } from "@/redux/resource/resourceState"
+
+export interface BasicAuthPanelProps {
+  auth?: BasicAuth
+  control: Control
+}
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/index.tsx b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/index.tsx
new file mode 100644
index 0000000000..c837e63e23
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/index.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  labelContainer,
+} from "@/page/App/components/Actions/RestApiConfigElement/style"
+import { getColor } from "@illa-design/theme"
+import { Controller } from "react-hook-form"
+import { Input } from "@illa-design/input"
+import { BearerAuthPanelProps } from "./interface"
+import { useTranslation } from "react-i18next"
+
+export const BearerAuthPanel: FC<BearerAuthPanelProps> = props => {
+  const { control, auth } = props
+
+  const { t } = useTranslation()
+
+  return (
+    <div css={configItem}>
+      <div css={labelContainer}>
+        <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+        <span css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}>
+          {t("editor.action.resource.restapi.label.bearerToken")}
+        </span>
+      </div>
+      <Controller
+        control={control}
+        rules={{
+          required: true,
+        }}
+        defaultValue={auth?.token}
+        shouldUnregister={true}
+        render={({ field: { value, onChange, onBlur } }) => (
+          <Input
+            w="100%"
+            ml="16px"
+            mr="24px"
+            onBlur={onBlur}
+            onChange={onChange}
+            value={value}
+            borderColor="techPurple"
+          />
+        )}
+        name="token"
+      />
+    </div>
+  )
+}
+
+BearerAuthPanel.displayName = "BearerAuthPanel"
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/interface.ts b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/interface.ts
new file mode 100644
index 0000000000..353050a549
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel/interface.ts
@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form"
+import { BearerAuth, RestApiResource } from "@/redux/resource/resourceState"
+
+export interface BearerAuthPanelProps {
+  auth?: BearerAuth
+  control: Control
+}
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/index.tsx b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/index.tsx
new file mode 100644
index 0000000000..a4fa6512a8
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/index.tsx
@@ -0,0 +1,421 @@
+import { FC, useState } from "react"
+import { RestApiConfigElementProps } from "./interface"
+import { useTranslation } from "react-i18next"
+import { Controller, useForm } from "react-hook-form"
+import { useDispatch, useSelector } from "react-redux"
+import { RootState } from "@/store"
+import {
+  BasicAuth,
+  BearerAuth,
+  Resource,
+  RestApiAuth,
+  RestApiResource,
+} from "@/redux/resource/resourceState"
+import {
+  applyConfigItemLabelText,
+  configItem,
+  configItemTip,
+  container,
+  divider,
+  footerStyle,
+  labelContainer,
+  optionLabelStyle,
+} from "./style"
+import { getColor } from "@illa-design/theme"
+import { Input } from "@illa-design/input"
+import { Button, ButtonGroup } from "@illa-design/button"
+import { PaginationPreIcon } from "@illa-design/icon"
+import { Divider } from "@illa-design/divider"
+import { Select } from "@illa-design/select"
+import { InputRecordEditor } from "@/page/App/components/InputRecordEditor"
+import { BearerAuthPanel } from "@/page/App/components/Actions/RestApiConfigElement/BearerAuthPanel"
+import { BasicAuthPanel } from "@/page/App/components/Actions/RestApiConfigElement/BasicAuthPanel"
+import { Api } from "@/api/base"
+import { Message } from "@illa-design/message"
+import { resourceActions } from "@/redux/resource/resourceSlice"
+
+function generateAuthContent(data: { [p: string]: any }): RestApiAuth | null {
+  let authContent: RestApiAuth | null = null
+  switch (data.authentication) {
+    case "basic":
+      authContent = {
+        username: data.username,
+        password: data.password,
+      }
+      break
+    case "bearer":
+      authContent = {
+        token: data.token,
+      }
+      break
+    default:
+      break
+  }
+  return authContent
+}
+
+export const RestApiConfigElement: FC<RestApiConfigElementProps> = props => {
+  const { onBack, onFinished, resourceId } = props
+
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const { control, handleSubmit, formState } = useForm({
+    mode: "onChange",
+  })
+
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(r => r.resourceId === resourceId) as Resource<
+      RestApiResource<RestApiAuth>
+    >
+  })
+
+  const [saving, setSaving] = useState(false)
+
+  const [authType, setAuthType] = useState(
+    resource?.content.authentication ?? "none",
+  )
+
+  return (
+    <form
+      onSubmit={handleSubmit((data, event) => {
+        if (resourceId != undefined) {
+          Api.request<Resource<RestApiResource<RestApiAuth>>>(
+            {
+              method: "PUT",
+              url: `/resources/${resourceId}`,
+              data: {
+                resourceId: data.resourceId,
+                resourceName: data.resourceName,
+                resourceType: "restapi",
+                content: {
+                  baseUrl: data.baseUrl,
+                  urlParams: data.urlParams,
+                  headers: data.headers,
+                  cookies: data.cookies,
+                  authentication: data.authentication,
+                  authContent: generateAuthContent(data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.updateResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        } else {
+          Api.request<Resource<RestApiResource<RestApiAuth>>>(
+            {
+              method: "POST",
+              url: `/resources`,
+              data: {
+                resourceName: data.resourceName,
+                resourceType: "restapi",
+                content: {
+                  baseUrl: data.baseUrl,
+                  urlParams: data.urlParams,
+                  headers: data.headers,
+                  cookies: data.cookies,
+                  authentication: data.authentication,
+                  authContent: generateAuthContent(data),
+                },
+              },
+            },
+            response => {
+              onFinished(response.data.resourceId)
+              dispatch(resourceActions.addResourceItemReducer(response.data))
+              Message.success(t("dashboard.resource.save_success"))
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            () => {
+              Message.error(t("dashboard.resource.save_fail"))
+            },
+            loading => {
+              setSaving(loading)
+            },
+          )
+        }
+      })}
+    >
+      <div css={container}>
+        <div css={divider} />
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.restapi.label.name")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.resourceName ?? ""}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.restapi.placeholder.name",
+                )}
+              />
+            )}
+            name="resourceName"
+          />
+        </div>
+        <span css={configItemTip}>
+          {t("editor.action.resource.restapi.tip.name")}
+        </span>
+        <Divider
+          direction="horizontal"
+          ml="24px"
+          mr="24px"
+          mt="16px"
+          mb="8px"
+          w="unset"
+        />
+        <div css={optionLabelStyle}>
+          {t("editor.action.resource.restapi.title.advanced_option")}
+        </div>
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span css={applyConfigItemLabelText(getColor("red", "02"))}>*</span>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.restapi.label.base_url")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.content.baseUrl ?? ""}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Input
+                w="100%"
+                ml="16px"
+                mr="24px"
+                onBlur={onBlur}
+                onChange={onChange}
+                value={value}
+                borderColor="techPurple"
+                placeholder={t(
+                  "editor.action.resource.restapi.placeholder.base_url",
+                )}
+              />
+            )}
+            name="baseUrl"
+          />
+        </div>
+        <Controller
+          control={control}
+          defaultValue={
+            resource?.content.urlParams ?? [
+              {
+                key: "",
+                value: "",
+              },
+            ]
+          }
+          render={({ field: { value, onChange, onBlur } }) => (
+            <InputRecordEditor
+              label={t("editor.action.resource.restapi.label.url_parameters")}
+              records={value}
+              onAdd={() => {
+                onChange([...value, { key: "", value: "" }])
+              }}
+              onDelete={(index, record) => {
+                let newRecords = [...value]
+                newRecords.splice(index, 1)
+                if (newRecords.length === 0) {
+                  newRecords = [{ key: "", value: "" }]
+                }
+                onChange(newRecords)
+              }}
+              onChangeKey={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index] = { key, value: v }
+                onChange(newRecords)
+              }}
+              onChangeValue={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index].value = v
+                onChange(newRecords)
+              }}
+            />
+          )}
+          name="urlParams"
+        />
+        <Controller
+          control={control}
+          defaultValue={
+            resource?.content.headers ?? [
+              {
+                key: "",
+                value: "",
+              },
+            ]
+          }
+          render={({ field: { value, onChange } }) => (
+            <InputRecordEditor
+              label={t("editor.action.resource.restapi.label.headers")}
+              records={value}
+              onAdd={() => {
+                onChange([...value, { key: "", value: "" }])
+              }}
+              onDelete={(index, record) => {
+                let newRecords = [...value]
+                newRecords.splice(index, 1)
+                if (newRecords.length === 0) {
+                  newRecords = [{ key: "", value: "" }]
+                }
+                onChange(newRecords)
+              }}
+              onChangeKey={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index] = { key, value: v }
+                onChange(newRecords)
+              }}
+              onChangeValue={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index].value = v
+                onChange(newRecords)
+              }}
+            />
+          )}
+          name="headers"
+        />
+        <Controller
+          control={control}
+          defaultValue={
+            resource?.content.cookies ?? [
+              {
+                key: "",
+                value: "",
+              },
+            ]
+          }
+          render={({ field: { value, onChange } }) => (
+            <InputRecordEditor
+              label={t("editor.action.resource.restapi.label.cookies")}
+              records={value}
+              onAdd={() => {
+                onChange([...value, { key: "", value: "" }])
+              }}
+              onDelete={(index, record) => {
+                let newRecords = [...value]
+                newRecords.splice(index, 1)
+                if (newRecords.length === 0) {
+                  newRecords = [{ key: "", value: "" }]
+                }
+                onChange(newRecords)
+              }}
+              onChangeKey={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index] = { key, value: v }
+                onChange(newRecords)
+              }}
+              onChangeValue={(index, key, v) => {
+                let newRecords = [...value]
+                newRecords[index].value = v
+                onChange(newRecords)
+              }}
+            />
+          )}
+          name="cookies"
+        />
+        <div css={configItem}>
+          <div css={labelContainer}>
+            <span
+              css={applyConfigItemLabelText(getColor("grayBlue", "02"), true)}
+            >
+              {t("editor.action.resource.restapi.label.authentication")}
+            </span>
+          </div>
+          <Controller
+            control={control}
+            defaultValue={resource?.content.authentication ?? "none"}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { value, onChange, onBlur } }) => (
+              <Select
+                value={value}
+                onBlur={onBlur}
+                onChange={value => {
+                  setAuthType(value)
+                  onChange(value)
+                }}
+                ml="16px"
+                mr="24px"
+                colorScheme="techPurple"
+                options={["none", "basic", "bearer"]}
+              />
+            )}
+            name="authentication"
+          />
+        </div>
+        {authType === "basic" && (
+          <BasicAuthPanel
+            control={control}
+            auth={resource?.content.authContent as BasicAuth}
+          />
+        )}
+        {authType === "bearer" && (
+          <BearerAuthPanel
+            control={control}
+            auth={resource?.content.authContent as BearerAuth}
+          />
+        )}
+      </div>
+      <div css={footerStyle}>
+        <Button
+          leftIcon={<PaginationPreIcon />}
+          variant="text"
+          colorScheme="gray"
+          type="button"
+          onClick={() => {
+            onBack()
+          }}
+        >
+          {t("back")}
+        </Button>
+        <ButtonGroup spacing="8px">
+          <Button
+            colorScheme="techPurple"
+            value="creating"
+            disabled={!formState.isValid}
+            loading={saving}
+            type="submit"
+          >
+            {t("editor.action.form.btn.save_changes")}
+          </Button>
+        </ButtonGroup>
+      </div>
+    </form>
+  )
+}
+
+RestApiConfigElement.displayName = "RestApiConfigElement"
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/interface.ts b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/interface.ts
new file mode 100644
index 0000000000..2947033b0e
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/interface.ts
@@ -0,0 +1,5 @@
+export interface RestApiConfigElementProps {
+  resourceId?: string
+  onBack: () => void
+  onFinished: (resourceId: string) => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/RestApiConfigElement/style.ts b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/style.ts
new file mode 100644
index 0000000000..965271d0b3
--- /dev/null
+++ b/apps/builder/src/page/App/components/Actions/RestApiConfigElement/style.ts
@@ -0,0 +1,67 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor } from "@illa-design/theme"
+
+export const container = css`
+  width: 100%;
+  max-height: 685px;
+  overflow-y: auto;
+`
+
+export const footerStyle = css`
+  height: 80px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const labelContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-width: 176px;
+`
+
+export const configItem = css`
+  display: flex;
+  height: 48px;
+  align-items: center;
+  flex-direction: row;
+`
+
+export const divider = css`
+  height: 16px;
+`
+
+export function applyConfigItemLabelText(
+  color: string,
+  margin?: boolean,
+): SerializedStyles {
+  let marginLeft = css``
+  if (margin) {
+    marginLeft = css`
+      margin-left: 4px;
+    `
+  }
+  return css`
+    font-size: 14px;
+    color: ${color};
+    font-weight: 500;
+    ${marginLeft};
+  `
+}
+
+export const configItemTip = css`
+  font-size: 14px;
+  margin-left: 192px;
+  color: ${getColor("grayBlue", "04")};
+`
+
+export const optionLabelStyle = css`
+  height: 38px;
+  display: flex;
+  font-size: 14px;
+  color: ${getColor("grayBlue", "04")};
+  align-items: center;
+  padding-left: 24px;
+`
diff --git a/apps/builder/src/page/App/components/Actions/SearchHeader/index.tsx b/apps/builder/src/page/App/components/Actions/SearchHeader/index.tsx
index 02af2dbdf4..1c177ef331 100644
--- a/apps/builder/src/page/App/components/Actions/SearchHeader/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/SearchHeader/index.tsx
@@ -16,7 +16,7 @@ import {
 } from "./style"
 import { SearchHeaderProps } from "./interface"
 
-export const SearchHeader: FC<SearchHeaderProps> = (props) => {
+export const SearchHeader: FC<SearchHeaderProps> = props => {
   const { onSearch } = props
   const { t } = useTranslation()
   const [inSearchState, setInSearchState] = useState(false)
diff --git a/apps/builder/src/page/App/components/Actions/api.ts b/apps/builder/src/page/App/components/Actions/api.ts
index f82485a384..fed24fae2c 100644
--- a/apps/builder/src/page/App/components/Actions/api.ts
+++ b/apps/builder/src/page/App/components/Actions/api.ts
@@ -1,6 +1,7 @@
 import {
   ActionContent,
   ActionItem,
+  ActionType,
 } from "@/redux/currentApp/action/actionState"
 import { omit } from "@illa-design/system"
 import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
@@ -24,7 +25,7 @@ export function onCopyActionItem(action: ActionItem<ActionContent>) {
   const displayName = DisplayNameGenerator.generateDisplayName(
     action.actionType,
   )
-  const data: Partial<ActionItem<{}>> = {
+  const data: Partial<ActionItem<ActionContent>> = {
     ...newAction,
     displayName,
   }
@@ -45,8 +46,10 @@ export function onCopyActionItem(action: ActionItem<ActionContent>) {
       Message.error(i18n.t("editor.action.action_list.message.failed"))
       DisplayNameGenerator.removeDisplayName(displayName)
     },
-    () => {},
-    (loading) => {},
+    () => {
+      DisplayNameGenerator.removeDisplayName(displayName)
+    },
+    loading => {},
   )
 }
 
@@ -61,12 +64,16 @@ export function onDeleteActionItem(action: ActionItem<ActionContent>) {
     ({ data }: { data: ActionItem<ActionContent> }) => {
       DisplayNameGenerator.removeDisplayName(displayName)
       store.dispatch(actionActions.removeActionItemReducer(displayName))
-      Message.success(i18n.t("dashboard.resources.trash_success"))
+      Message.success(
+        i18n.t("editor.action.action_list.message.success_deleted"),
+      )
     },
     () => {
-      Message.error(i18n.t("editor.action.action_list.message.failed"))
+      Message.error(
+        i18n.t("editor.action.action_list.message.failed_to_delete"),
+      )
     },
     () => {},
-    (loading) => {},
+    loading => {},
   )
 }
diff --git a/apps/builder/src/page/App/components/Actions/getIcon.tsx b/apps/builder/src/page/App/components/Actions/getIcon.tsx
index 9d21d8fa16..e08bbaa723 100644
--- a/apps/builder/src/page/App/components/Actions/getIcon.tsx
+++ b/apps/builder/src/page/App/components/Actions/getIcon.tsx
@@ -1,20 +1,45 @@
 import { ResourceType } from "@/redux/resource/resourceState"
 import { ReactElement } from "react"
 import { ActionType } from "@/redux/currentApp/action/actionState"
-import {
-  JSTransformerIcon,
-  MongoDbIcon,
-  MySqlIcon,
-  PostgresIcon,
-  RedisIcon,
-  RestApiIcon,
-} from "@illa-design/icon"
+import { MySqlIcon } from "@/page/App/components/Icons/mysql"
+import { RestApiIcon } from "@/page/App/components/Icons/restapi"
+import { MongoDbIcon } from "@/page/App/components/Icons/mongodb"
+import { RedisIcon } from "@/page/App/components/Icons/redis"
+import { PostgreSqlIcon } from "@/page/App/components/Icons/postgresql"
+import { MariaDbIcon } from "@/page/App/components/Icons/mariadb"
+import { SnowflakeIcon } from "@/page/App/components/Icons/snowflake"
+import { TidbIcon } from "@/page/App/components/Icons/tidb"
+import { DataDogIcon } from "@/page/App/components/Icons/datadog"
+import { ZapierIcon } from "@/page/App/components/Icons/zapier"
+import { S3Icon } from "@/page/App/components/Icons/s3"
+import { TransformerIcon } from "@/page/App/components/Icons/transformer"
+import { GraphQLIcon } from "@/page/App/components/Icons/graphql"
+import { ElasticIcon } from "@/page/App/components/Icons/elastic"
+import { SmtpIcon } from "@/page/App/components/Icons/smtp"
 
 export function getIconFromResourceType(
   type: ResourceType,
   size: string,
 ): ReactElement | null {
   switch (type) {
+    case "graphql":
+      return <GraphQLIcon size={size} />
+    case "elastic":
+      return <ElasticIcon size={size} />
+    case "smtp":
+      return <SmtpIcon size={size} />
+    case "mariadb":
+      return <MariaDbIcon size={size} />
+    case "snowflake":
+      return <SnowflakeIcon size={size} />
+    case "tidb":
+      return <TidbIcon size={size} />
+    case "datadog":
+      return <DataDogIcon size={size} />
+    case "zapier":
+      return <ZapierIcon size={size} />
+    case "s3":
+      return <S3Icon size={size} />
     case "mysql":
       return <MySqlIcon size={size} />
     case "restapi":
@@ -24,7 +49,7 @@ export function getIconFromResourceType(
     case "redis":
       return <RedisIcon size={size} />
     case "postgresql":
-      return <PostgresIcon size={size} />
+      return <PostgreSqlIcon size={size} />
   }
   return null
 }
@@ -34,18 +59,36 @@ export function getIconFromActionType(
   size: string,
 ): ReactElement | null {
   switch (type) {
+    case "graphql":
+      return <GraphQLIcon size={size} />
+    case "elastic":
+      return <ElasticIcon size={size} />
+    case "smtp":
+      return <SmtpIcon size={size} />
+    case "transformer":
+      return <TransformerIcon size={size} />
+    case "mariadb":
+      return <MariaDbIcon size={size} />
+    case "snowflake":
+      return <SnowflakeIcon size={size} />
+    case "tidb":
+      return <TidbIcon size={size} />
+    case "datadog":
+      return <DataDogIcon size={size} />
+    case "zapier":
+      return <ZapierIcon size={size} />
+    case "s3":
+      return <S3Icon size={size} />
     case "mysql":
       return <MySqlIcon size={size} />
-    case "postgresql":
-      return <PostgresIcon size={size} />
     case "restapi":
       return <RestApiIcon size={size} />
     case "mongodb":
       return <MongoDbIcon size={size} />
     case "redis":
       return <RedisIcon size={size} />
-    case "transformer":
-      return <JSTransformerIcon size={size} />
+    case "postgresql":
+      return <PostgreSqlIcon size={size} />
   }
   return null
 }
diff --git a/apps/builder/src/page/App/components/Actions/index.tsx b/apps/builder/src/page/App/components/Actions/index.tsx
index 7c47a491d5..b98200bf1d 100644
--- a/apps/builder/src/page/App/components/Actions/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/index.tsx
@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, useRef } from "react"
+import { FC, HTMLAttributes, useRef, useState } from "react"
 import { ActionList } from "./ActionList"
 import { ActionPanel } from "./ActionPanel"
 import { applyActionEditorStyle, contentContainerStyle } from "./styles"
@@ -10,6 +10,7 @@ const ActionEditorDefaultHeight = 300
 
 export const ActionEditor: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   const panelRef = useRef<HTMLDivElement>(null)
+  const [maxHeight, setMaxHeight] = useState<number>()
 
   return (
     <div
@@ -20,11 +21,19 @@ export const ActionEditor: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
         FocusManager.switchFocus("action")
       }}
     >
-      <DragBar resizeRef={panelRef} minHeight={ActionEditorDefaultHeight} />
+      <DragBar
+        resizeRef={panelRef}
+        minHeight={ActionEditorDefaultHeight}
+        onChange={() => {
+          if (panelRef.current?.offsetHeight) {
+            setMaxHeight(panelRef.current?.offsetHeight - 100)
+          }
+        }}
+      />
       <Divider direction="horizontal" />
       <div css={contentContainerStyle}>
         <ActionList />
-        <ActionPanel />
+        <ActionPanel maxHeight={maxHeight} />
       </div>
     </div>
   )
diff --git a/apps/builder/src/page/App/components/CanvasPanel/index.tsx b/apps/builder/src/page/App/components/CanvasPanel/index.tsx
index 8c2d3aa242..9148e77e4d 100644
--- a/apps/builder/src/page/App/components/CanvasPanel/index.tsx
+++ b/apps/builder/src/page/App/components/CanvasPanel/index.tsx
@@ -12,7 +12,7 @@ import { getIllaMode } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
 import { FocusManager } from "@/utils/focusManager"
 
-export const CanvasPanel: FC<CanvasPanelProps> = (props) => {
+export const CanvasPanel: FC<CanvasPanelProps> = props => {
   const { ...otherProps } = props
 
   const { t } = useTranslation()
diff --git a/apps/builder/src/page/App/components/ColorPicker/index.tsx b/apps/builder/src/page/App/components/ColorPicker/index.tsx
index 3868321018..70b818b38f 100644
--- a/apps/builder/src/page/App/components/ColorPicker/index.tsx
+++ b/apps/builder/src/page/App/components/ColorPicker/index.tsx
@@ -5,11 +5,11 @@ import { ColorPickerProps } from "./interface"
 import { colorSchemes } from "@/widgetLibrary/PublicSector/colorSchemeOptions"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 
-export const ColorPicker: FC<ColorPickerProps> = (props) => {
+export const ColorPicker: FC<ColorPickerProps> = props => {
   const { onChange, selectedColor } = props
 
   const preColors = useMemo(() => {
-    return colorSchemes.map((color) => {
+    return colorSchemes.map(color => {
       return {
         title: color,
         color: globalColor(`--${illaPrefix}-${color}-03`),
@@ -19,7 +19,7 @@ export const ColorPicker: FC<ColorPickerProps> = (props) => {
 
   const colorMap = useMemo(() => {
     const m = new Map<string, string>()
-    colorSchemes.forEach((color) => {
+    colorSchemes.forEach(color => {
       m.set(globalColor(`--${illaPrefix}-${color}-03`), color)
     })
     return m
@@ -34,7 +34,7 @@ export const ColorPicker: FC<ColorPickerProps> = (props) => {
     <Sketch
       color={c}
       presetColors={preColors}
-      onChange={(color) => {
+      onChange={color => {
         if (colorMap.has(color.hexa)) {
           onChange(colorMap.get(color.hex) || colorMap.get(color.hexa)!!)
         } else {
diff --git a/apps/builder/src/page/App/components/ComponentManager/index.tsx b/apps/builder/src/page/App/components/ComponentManager/index.tsx
index dea58fcffb..240dd87f63 100644
--- a/apps/builder/src/page/App/components/ComponentManager/index.tsx
+++ b/apps/builder/src/page/App/components/ComponentManager/index.tsx
@@ -8,7 +8,9 @@ import { FocusManager } from "@/utils/focusManager"
 import { ConfigPanel } from "@/page/App/components/ConfigPanel"
 import { ComponentPanel } from "@/page/App/components/ComponentPanel"
 
-export const ComponentsManager: FC<HTMLAttributes<HTMLDivElement>> = props => {
+export const ComponentsManager: FC<HTMLAttributes<HTMLDivElement>> = (
+  props,
+) => {
   const { t } = useTranslation()
 
   const [activeKey, setActiveKey] = useState("Insert")
@@ -35,7 +37,7 @@ export const ComponentsManager: FC<HTMLAttributes<HTMLDivElement>> = props => {
         variant="text"
         activeKey={activeKey}
         colorScheme="grayBlue"
-        onChange={key => {
+        onChange={(key) => {
           setActiveKey(key)
         }}
       >
diff --git a/apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx b/apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx
index 9d27a992f7..f4026ca5b8 100644
--- a/apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx
+++ b/apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx
@@ -16,7 +16,7 @@ export const ComponentSession = memo((props: ComponentSessionProps) => {
     <div css={sessionContainerStyle}>
       <span css={sessionTitleStyle}>{t(title)}</span>
       <div css={componentListContainerStyle}>
-        {widgetCardInfos.map((item) => (
+        {widgetCardInfos.map(item => (
           <ComponentItem key={item.id} {...item} />
         ))}
       </div>
diff --git a/apps/builder/src/page/App/components/ComponentPanel/index.tsx b/apps/builder/src/page/App/components/ComponentPanel/index.tsx
index 3a9b689d24..f874edf8c2 100644
--- a/apps/builder/src/page/App/components/ComponentPanel/index.tsx
+++ b/apps/builder/src/page/App/components/ComponentPanel/index.tsx
@@ -12,7 +12,7 @@ import { EmptySearchResult } from "./Empty"
 import { buildComponentList } from "@/widgetLibrary/componentListBuilder"
 import { useTranslation } from "react-i18next"
 
-export const ComponentPanel: FC<ComponentPanelProps> = (props) => {
+export const ComponentPanel: FC<ComponentPanelProps> = props => {
   const { t } = useTranslation()
 
   const defaultList: ComponentSessionProps[] = buildComponentList()
@@ -29,11 +29,11 @@ export const ComponentPanel: FC<ComponentPanelProps> = (props) => {
           borderColor="purple"
           variant="fill"
           placeholder={t("editor.widget_picker.search_placeholder")}
-          onChange={(e) => {
+          onChange={e => {
             const res = getMatchComponent(e.target.value, componentList)
             setSearchRes(res)
           }}
-          onSearch={(value) => {
+          onSearch={value => {
             const res = getMatchComponent(value, componentList)
             setSearchRes(res)
           }}
@@ -41,7 +41,7 @@ export const ComponentPanel: FC<ComponentPanelProps> = (props) => {
       </div>
       <div css={sessionListContainerStyle}>
         {searchRes && searchRes.length ? (
-          searchRes.map((session) => (
+          searchRes.map(session => (
             <ComponentSession key={"session-" + session.title} {...session} />
           ))
         ) : (
diff --git a/apps/builder/src/page/App/components/ComponentPanel/utils.tsx b/apps/builder/src/page/App/components/ComponentPanel/utils.tsx
index 3c37959b8d..c366b3ce26 100644
--- a/apps/builder/src/page/App/components/ComponentPanel/utils.tsx
+++ b/apps/builder/src/page/App/components/ComponentPanel/utils.tsx
@@ -7,20 +7,20 @@ export function getMatchComponent(
   if (!value || value.length === 0) return options
   const valueArr = value.split("")
   let regKey = ".*"
-  valueArr.forEach((s) => {
+  valueArr.forEach(s => {
     regKey += s.toLocaleLowerCase() + ".*"
   })
   const reg = RegExp(regKey)
 
   const newSessionList: ComponentSessionProps[] = []
-  const removeCommonlyOptions = options?.filter((option) => {
+  const removeCommonlyOptions = options?.filter(option => {
     return option.title !== sessionTypeMapSessionNameKey.COMMON
   })
-  removeCommonlyOptions?.forEach((session) => {
-    const res = session.widgetCardInfos.filter((widgetCardInfo) => {
+  removeCommonlyOptions?.forEach(session => {
+    const res = session.widgetCardInfos.filter(widgetCardInfo => {
       const keyword = widgetCardInfo?.keywords
       return keyword
-        ? keyword.some((key) => key.toLocaleLowerCase().match(reg))
+        ? keyword.some(key => key.toLocaleLowerCase().match(reg))
         : widgetCardInfo.widgetName.toLocaleLowerCase().match(reg)
     })
     if (res.length > 0) {
diff --git a/apps/builder/src/page/App/components/ConfigPanel/index.tsx b/apps/builder/src/page/App/components/ConfigPanel/index.tsx
index db7cc0cf82..0ba7eb5aa4 100644
--- a/apps/builder/src/page/App/components/ConfigPanel/index.tsx
+++ b/apps/builder/src/page/App/components/ConfigPanel/index.tsx
@@ -5,7 +5,7 @@ import { configPanelStyle } from "./style"
 
 interface ConfigPanelProps extends HTMLAttributes<HTMLDivElement> {}
 
-export const ConfigPanel: FC<ConfigPanelProps> = (props) => {
+export const ConfigPanel: FC<ConfigPanelProps> = props => {
   const { className } = props
 
   return (
diff --git a/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx b/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx
index dae120d631..071624aeee 100644
--- a/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx
+++ b/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx
@@ -37,7 +37,7 @@ export const WorkSpaceTreeNode: FC<WorkSpaceTreeNodeProps> = memo(
     const isExpanded = expandedKeys.includes(itemKey)
     const dispatch = useDispatch()
     if (isObject(value) || isArray(value)) {
-      const keyArr = Object.keys(value).filter((item) => !item.startsWith("$"))
+      const keyArr = Object.keys(value).filter(item => !item.startsWith("$"))
       return (
         <div>
           <div
@@ -69,7 +69,7 @@ export const WorkSpaceTreeNode: FC<WorkSpaceTreeNodeProps> = memo(
             initial={false}
             transition={{ duration: 0.2 }}
           >
-            {keyArr.map((name) => (
+            {keyArr.map(name => (
               <WorkSpaceTreeNode
                 key={name}
                 name={name}
diff --git a/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/index.tsx b/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/index.tsx
index 4ff407902a..dac998e37f 100644
--- a/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/index.tsx
+++ b/apps/builder/src/page/App/components/DataWorkspace/components/WorkSpaceTreeItem/index.tsx
@@ -21,10 +21,10 @@ export const WorkSpaceTreeItem: FC<WorkSpaceTreeItemProps> = memo(
     const expandedKeys = useSelector(getExpandedKeys)
     const isExpanded = expandedKeys.includes(title)
     const dispatch = useDispatch()
-    const keyArr = Object.keys(data).filter(item => !item.startsWith("$"))
+    const keyArr = Object.keys(data).filter((item) => !item.startsWith("$"))
 
     const tree = useMemo(() => {
-      return keyArr.map(name => (
+      return keyArr.map((name) => (
         <WorkSpaceTreeNode
           key={name}
           name={name}
@@ -33,7 +33,7 @@ export const WorkSpaceTreeItem: FC<WorkSpaceTreeItemProps> = memo(
           level={0}
         />
       ))
-    }, [keyArr])
+    }, [data, keyArr, title])
 
     return (
       <>
diff --git a/apps/builder/src/page/App/components/DataWorkspace/index.tsx b/apps/builder/src/page/App/components/DataWorkspace/index.tsx
index 2c1bca33d6..0e561ca1d6 100644
--- a/apps/builder/src/page/App/components/DataWorkspace/index.tsx
+++ b/apps/builder/src/page/App/components/DataWorkspace/index.tsx
@@ -18,7 +18,7 @@ import { cloneDeep } from "lodash"
 
 interface DataWorkspaceProps extends HTMLAttributes<HTMLDivElement> {}
 
-export const DataWorkspace: FC<DataWorkspaceProps> = props => {
+export const DataWorkspace: FC<DataWorkspaceProps> = (props) => {
   const { className } = props
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -34,7 +34,7 @@ export const DataWorkspace: FC<DataWorkspaceProps> = props => {
       if (e.metaKey) {
         const currentSelectedDisplayName = cloneDeep(selectedComponents)
         const index = currentSelectedDisplayName.findIndex(
-          displayName => displayName === selectedKeys[0],
+          (displayName) => displayName === selectedKeys[0],
         )
         if (index !== -1) {
           currentSelectedDisplayName.splice(index, 1)
@@ -56,10 +56,10 @@ export const DataWorkspace: FC<DataWorkspaceProps> = props => {
           currentSelectedDisplayName[currentSelectedDisplayName.length - 1]
         const selectedDisplayName = selectedKeys[0]
         const currentIndex = widgetExecutionArray.findIndex(
-          node => node.displayName === lastCurrentSelectDisplayName,
+          (node) => node.displayName === lastCurrentSelectDisplayName,
         )
         const selectedIndex = widgetExecutionArray.findIndex(
-          node => node.displayName === selectedDisplayName,
+          (node) => node.displayName === selectedDisplayName,
         )
         let left = currentIndex
         let right = selectedIndex
@@ -87,7 +87,7 @@ export const DataWorkspace: FC<DataWorkspaceProps> = props => {
   const handleActionSelect = useCallback(
     (selectedKeys: string[]) => {
       const action = actionList.find(
-        item => item.displayName === selectedKeys[0],
+        (item) => item.displayName === selectedKeys[0],
       )
       action && dispatch(configActions.updateSelectedAction(action))
     },
diff --git a/apps/builder/src/page/App/components/Debugger/components/ErrorItem/index.tsx b/apps/builder/src/page/App/components/Debugger/components/ErrorItem/index.tsx
index b0b064ebbd..818bdb6800 100644
--- a/apps/builder/src/page/App/components/Debugger/components/ErrorItem/index.tsx
+++ b/apps/builder/src/page/App/components/Debugger/components/ErrorItem/index.tsx
@@ -24,7 +24,7 @@ import { getDisplayNameAndPropertyPath } from "@/utils/executionTreeHelper/utils
 import { get } from "lodash"
 import { JsonView } from "@/page/App/components/Debugger/components/JsonView"
 
-export const ErrorItem: FC<ErrorItemProps> = props => {
+export const ErrorItem: FC<ErrorItemProps> = (props) => {
   const { item, pathName } = props
   const dispatch = useDispatch()
   const root = useSelector(getCanvas)
diff --git a/apps/builder/src/page/App/components/Debugger/components/JsonView/index.tsx b/apps/builder/src/page/App/components/Debugger/components/JsonView/index.tsx
index 2da9ab3493..b1a235ff89 100644
--- a/apps/builder/src/page/App/components/Debugger/components/JsonView/index.tsx
+++ b/apps/builder/src/page/App/components/Debugger/components/JsonView/index.tsx
@@ -15,13 +15,13 @@ import {
   jsonStyle,
 } from "./style"
 
-export const JsonView: FC<JsonViewProps> = (props) => {
+export const JsonView: FC<JsonViewProps> = props => {
   const { name, value, level = 0 } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   const type = typeof value
   if (isObject(value) || isArray(value)) {
-    const keyArr = Object.keys(value).filter((item) => !item.startsWith("$"))
+    const keyArr = Object.keys(value).filter(item => !item.startsWith("$"))
     return (
       <>
         <div css={jsonStyle}>
@@ -46,7 +46,7 @@ export const JsonView: FC<JsonViewProps> = (props) => {
           initial={false}
           transition={{ duration: 0.2 }}
         >
-          {keyArr.map((name) => (
+          {keyArr.map(name => (
             <JsonView
               key={name}
               name={name}
diff --git a/apps/builder/src/page/App/components/Debugger/index.tsx b/apps/builder/src/page/App/components/Debugger/index.tsx
index c8d5628975..c1e15cd68c 100644
--- a/apps/builder/src/page/App/components/Debugger/index.tsx
+++ b/apps/builder/src/page/App/components/Debugger/index.tsx
@@ -17,7 +17,7 @@ import { ErrorItem } from "@/page/App/components/Debugger/components/ErrorItem"
 
 const DebuggerDefaultHeight = 300
 
-export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
+export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const dispatch = useDispatch()
   const panelRef = useRef<HTMLDivElement>(null)
   const debuggerData = useSelector(getExecutionDebuggerData)
@@ -25,7 +25,7 @@ export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 
   const handleClickDebuggerIcon = useCallback(() => {
     dispatch(configActions.updateDebuggerVisible(!debuggerVisible))
-  }, [debuggerVisible])
+  }, [debuggerVisible, dispatch])
 
   return (
     <div
@@ -44,11 +44,11 @@ export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
           {Object.keys(debuggerData)?.map((name, index) => {
             const error = debuggerData[name]
             if (isArray(error)) {
-              return error?.map((item) => {
+              return error?.map(item => {
                 return <ErrorItem key={index} pathName={name} item={item} />
               })
             }
-            return <ErrorItem pathName={name} item={error} />
+            return <ErrorItem key={name} pathName={name} item={error} />
           })}
         </div>
       </div>
diff --git a/apps/builder/src/page/App/components/DotPanel/calc.ts b/apps/builder/src/page/App/components/DotPanel/calc.ts
index 4123b074c1..7e36e869f7 100644
--- a/apps/builder/src/page/App/components/DotPanel/calc.ts
+++ b/apps/builder/src/page/App/components/DotPanel/calc.ts
@@ -183,7 +183,7 @@ export const getCrossingNodeNewPosition = (
 ) => {
   const otherComponents = cloneDeep(allComponentNode)
   const indexOfAllComponentNode = otherComponents.findIndex(
-    (curr) => curr.displayName === currentNode.displayName,
+    curr => curr.displayName === currentNode.displayName,
   )
   if (indexOfAllComponentNode > -1) {
     otherComponents.splice(indexOfAllComponentNode, 1)
@@ -195,7 +195,7 @@ export const getCrossingNodeNewPosition = (
   while (queue.length !== 0) {
     let length = queue.length
     const indexOfAllComponentNode = otherComponents.findIndex(
-      (curr) => curr.displayName === queue[0].displayName,
+      curr => curr.displayName === queue[0].displayName,
     )
     if (indexOfAllComponentNode > -1) {
       otherComponents.splice(indexOfAllComponentNode, 1)
@@ -215,7 +215,7 @@ export const getCrossingNodeNewPosition = (
           walkedSet.add(otherComponents[i].displayName)
           res.set(otherComponents[i].displayName, otherComponents[i])
           const index = queue.findIndex(
-            (node) => node.displayName === otherComponents[i].displayName,
+            node => node.displayName === otherComponents[i].displayName,
           )
           if (index > -1) {
             queue.splice(index, 1, otherComponents[i])
@@ -235,7 +235,7 @@ export const getNearingNodes = (
 ) => {
   const otherComponents = cloneDeep(allComponentNode)
   const indexOfAllComponentNode = otherComponents.findIndex(
-    (curr) => curr.displayName === currentNode.displayName,
+    curr => curr.displayName === currentNode.displayName,
   )
   if (indexOfAllComponentNode > -1) {
     otherComponents.splice(indexOfAllComponentNode, 1)
@@ -247,7 +247,7 @@ export const getNearingNodes = (
   while (queue.length !== 0) {
     let length = queue.length
     const indexOfAllComponentNode = otherComponents.findIndex(
-      (curr) => curr.displayName === queue[0].displayName,
+      curr => curr.displayName === queue[0].displayName,
     )
     if (indexOfAllComponentNode > -1) {
       otherComponents.splice(indexOfAllComponentNode, 1)
@@ -263,7 +263,7 @@ export const getNearingNodes = (
           walkedSet.add(otherComponents[i].displayName)
           res.set(otherComponents[i].displayName, otherComponents[i])
           const index = queue.findIndex(
-            (node) => node.displayName === otherComponents[i].displayName,
+            node => node.displayName === otherComponents[i].displayName,
           )
           if (index > -1) {
             queue.splice(index, 1, otherComponents[i])
@@ -281,7 +281,7 @@ export const applyEffectMapToComponentNodes = (
   effectMap: Map<string, ComponentNode>,
   componentNodes: ComponentNode[],
 ) => {
-  return componentNodes.map((node) => {
+  return componentNodes.map(node => {
     if (effectMap.has(node.displayName)) {
       return effectMap.get(node.displayName) as ComponentNode
     }
@@ -307,7 +307,7 @@ export const getReflowResult = (
 
   if (exceptSelf) {
     finalState = finalState.filter(
-      (node) => node.displayName !== currentNode.displayName,
+      node => node.displayName !== currentNode.displayName,
     )
   }
   return {
diff --git a/apps/builder/src/page/App/components/DotPanel/index.tsx b/apps/builder/src/page/App/components/DotPanel/index.tsx
index 3cc2e3c61c..fb30d03807 100644
--- a/apps/builder/src/page/App/components/DotPanel/index.tsx
+++ b/apps/builder/src/page/App/components/DotPanel/index.tsx
@@ -5,7 +5,7 @@ import { useSelector } from "react-redux"
 import { getPreviewEdgeWidth } from "@/redux/config/configSelector"
 import { RenderComponentCanvas } from "@/page/App/components/DotPanel/renderComponentCanvas"
 
-export const DotPanel: FC<DotPanelProps> = (props) => {
+export const DotPanel: FC<DotPanelProps> = props => {
   const { componentNode, ...otherProps } = props
 
   // canvas field
diff --git a/apps/builder/src/page/App/components/DotPanel/previewPlaceholder.tsx b/apps/builder/src/page/App/components/DotPanel/previewPlaceholder.tsx
index f91e5909e7..7b1717a253 100644
--- a/apps/builder/src/page/App/components/DotPanel/previewPlaceholder.tsx
+++ b/apps/builder/src/page/App/components/DotPanel/previewPlaceholder.tsx
@@ -5,7 +5,7 @@ import {
   applyRectangleStyle,
 } from "@/page/App/components/DotPanel/style"
 
-export const PreviewPlaceholder: FC<PreviewPlaceholderProps> = (props) => {
+export const PreviewPlaceholder: FC<PreviewPlaceholderProps> = props => {
   const { w, h, x, y, lunchX, lunchY, canDrop } = props
   return (
     <>
diff --git a/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx b/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx
index 6ca5f7c445..08ce525321 100644
--- a/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx
+++ b/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx
@@ -40,7 +40,7 @@ const BLOCK_COLUMNS = 64
 export const RenderComponentCanvas: FC<{
   componentNode: ComponentNode
   containerRef: RefObject<HTMLDivElement>
-}> = props => {
+}> = (props) => {
   const { componentNode, containerRef } = props
 
   const isShowCanvasDot = useSelector(isShowDot)
@@ -58,7 +58,7 @@ export const RenderComponentCanvas: FC<{
 
   const componentTree = useMemo<ReactNode>(() => {
     const childrenNode = componentNode.childrenNode
-    return childrenNode.map<ReactNode>(item => {
+    return childrenNode.map<ReactNode>((item) => {
       const h = item.h * UNIT_HEIGHT
       const w = item.w * unitWidth
       const x = item.x * unitWidth
@@ -145,7 +145,7 @@ export const RenderComponentCanvas: FC<{
 
           const childrenNodes = dragInfo.childrenNodes
           const indexOfChildrenNodes = childrenNodes.findIndex(
-            node => node.displayName === item.displayName,
+            (node) => node.displayName === item.displayName,
           )
           let finalChildrenNodes: ComponentNode[] = []
 
@@ -170,7 +170,7 @@ export const RenderComponentCanvas: FC<{
             finalChildrenNodes = finalState
           } else {
             const indexOfChildren = childrenNodes.findIndex(
-              node => node.displayName === newItem.displayName,
+              (node) => node.displayName === newItem.displayName,
             )
             const allChildrenNodes = [...childrenNodes]
             allChildrenNodes.splice(indexOfChildren, 1, newItem)
@@ -231,7 +231,7 @@ export const RenderComponentCanvas: FC<{
           isDropOnCanvas: false,
         }
       },
-      collect: monitor => {
+      collect: (monitor) => {
         const dragInfo = monitor.getItem()
         return {
           isActive: monitor.canDrop() && monitor.isOver(),
@@ -247,7 +247,7 @@ export const RenderComponentCanvas: FC<{
     if (!isActive) {
       const childrenNodes = componentNode.childrenNode
       let maxY = 0
-      childrenNodes.forEach(node => {
+      childrenNodes.forEach((node) => {
         maxY = Math.max(maxY, node.y + node.h)
       })
       if (illaMode === "edit") {
@@ -265,7 +265,7 @@ export const RenderComponentCanvas: FC<{
 
   return (
     <div
-      ref={node => {
+      ref={(node) => {
         currentCanvasRef.current = node
         dropTarget(node)
         canvasRef(node)
@@ -279,7 +279,7 @@ export const RenderComponentCanvas: FC<{
         isShowCanvasDot,
         rowNumber * 8,
       )}
-      onClick={e => {
+      onClick={(e) => {
         if (
           e.target === currentCanvasRef.current &&
           illaMode !== "production"
diff --git a/apps/builder/src/page/App/components/DotPanel/updateData.ts b/apps/builder/src/page/App/components/DotPanel/updateData.ts
index d67bc5c9da..3684c5a149 100644
--- a/apps/builder/src/page/App/components/DotPanel/updateData.ts
+++ b/apps/builder/src/page/App/components/DotPanel/updateData.ts
@@ -14,10 +14,9 @@ export function updateDottedLineSquareData(
   dispatchFn: (dottedLineSquare: DottedLineSquare) => void,
 ) {
   // reduce render
-  const currentDrag =
-    store.getState().currentApp.editor.dottedLineSquare[
-      componentNode.displayName
-    ]
+  const currentDrag = store.getState().currentApp.editor.dottedLineSquare[
+    componentNode.displayName
+  ]
   if (currentDrag !== null && currentDrag !== undefined) {
     if (squareX == currentDrag.squareX && squareY == currentDrag.squareY) {
       return
@@ -50,8 +49,9 @@ export function updateDragShadowData(
   dispatchFn: (renderDragShadow: DragShadow) => void,
 ) {
   // reduce render
-  const currentDrag =
-    store.getState().currentApp.editor.dragShadow[componentNode.displayName]
+  const currentDrag = store.getState().currentApp.editor.dragShadow[
+    componentNode.displayName
+  ]
   if (currentDrag !== null && currentDrag !== undefined) {
     if (renderX == currentDrag.renderX && renderY == currentDrag.renderY) {
       return
diff --git a/apps/builder/src/page/App/components/Icons/datadog.tsx b/apps/builder/src/page/App/components/Icons/datadog.tsx
new file mode 100644
index 0000000000..4fa6056dfb
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/datadog.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from "@illa-design/icon"
+
+export const DataDogIcon = createIcon({
+  title: "DataDogIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#0gdfypf9ba)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="m19.459 16.875-1.965-1.295-1.638 2.737-1.906-.557-1.678 2.56.086.807 9.124-1.681-.53-5.701-1.494 3.13zm-8.509-2.457 1.464-.201c.237.106.402.146.686.219.442.115.954.225 1.712-.157.176-.087.544-.423.693-.615l5.997-1.088.612 7.405-10.276 1.852-.888-7.415zm11.14-2.668-.591.112L20.36.112.981 2.357 3.37 21.733l2.268-.33c-.181-.258-.463-.57-.945-.971-.668-.555-.432-1.498-.037-2.094.521-1.006 3.208-2.284 3.055-3.892-.054-.584-.147-1.345-.69-1.867-.02.217.016.425.016.425s-.222-.284-.333-.672c-.11-.149-.197-.196-.314-.395-.084.23-.073.497-.073.497s-.182-.431-.212-.795c-.108.163-.135.472-.135.472s-.237-.679-.183-1.045c-.107-.318-.428-.95-.337-2.384.59.414 1.893.316 2.4-.432.168-.248.284-.924-.084-2.256-.236-.854-.821-2.126-1.05-2.609l-.026.02c.12.389.368 1.203.463 1.599.288 1.198.365 1.616.23 2.168-.115.48-.391.795-1.09 1.146-.699.353-1.626-.505-1.685-.552-.679-.541-1.205-1.424-1.263-1.853-.061-.47.27-.75.438-1.135-.24.069-.506.19-.506.19s.318-.33.71-.614c.163-.107.258-.176.43-.318-.248-.004-.45.003-.45.003s.414-.223.842-.386c-.313-.014-.614-.002-.614-.002s.923-.413 1.651-.715c.501-.206.99-.145 1.266.253.36.52.74.803 1.543.979.494-.22.643-.331 1.263-.5.546-.6.974-.678.974-.678s-.212.195-.27.501a7.13 7.13 0 0 1 .649-.447s-.131.162-.254.42l.029.042c.36-.217.785-.387.785-.387s-.122.153-.264.351c.273-.002.825.012 1.039.036 1.265.028 1.527-1.35 2.012-1.524.608-.216.88-.348 1.915.67.889.873 1.583 2.436 1.238 2.787-.289.29-.86-.114-1.491-.901A3.412 3.412 0 0 1 15.575 3c-.1-.53-.488-.836-.488-.836s.225.503.225.945c0 .242.03 1.146.418 1.654-.038.074-.056.366-.099.423-.45-.546-1.42-.936-1.578-1.05.535.438 1.764 1.444 2.236 2.409.446.912.183 1.748.41 1.964.064.062.96 1.179 1.132 1.74.3.977.018 2.004-.376 2.641l-1.099.171c-.16-.044-.269-.066-.413-.15.08-.14.238-.491.24-.564l-.063-.108c-.342.484-.915.955-1.39 1.225-.624.353-1.341.298-1.809.154-1.326-.41-2.58-1.306-2.883-1.541 0 0-.01.188.047.23.334.377 1.1 1.06 1.842 1.536l-1.58.173.747 5.812c-.33.047-.382.071-.744.122-.32-1.128-.93-1.864-1.598-2.293-.589-.379-1.4-.464-2.178-.31l-.05.058a2.804 2.804 0 0 1 1.834.437C9 18.25 9.519 19.3 9.71 19.933c.245.808.414 1.673-.244 2.59-.468.651-1.834 1.011-2.938.232.295.474.693.862 1.23.935.796.108 1.552-.03 2.072-.565.444-.456.68-1.411.618-2.417l.703-.102.254 1.805 11.635-1.4-.95-9.261zm-7.078-4.902c-.033.074-.084.123-.007.364l.004.014.012.03.032.073c.138.283.29.549.544.685.065-.011.133-.019.204-.022.238-.01.388.027.483.078.009-.047.01-.116.005-.219-.018-.357.071-.965-.616-1.285-.26-.12-.624-.084-.745.066a.322.322 0 0 1 .057.013c.184.064.06.127.027.203zm1.927 3.337c-.09-.05-.512-.03-.808.005-.564.067-1.173.262-1.306.366-.243.188-.133.514.046.649.503.375.944.627 1.409.566.285-.038.537-.49.715-.9.122-.283.122-.587-.056-.686zM11.944 7.29c.16-.15-.792-.349-1.53.155-.545.37-.562 1.167-.041 1.619.052.044.095.076.135.102a4.706 4.706 0 0 1 1.374-.405c.11-.123.238-.34.206-.733-.044-.533-.447-.449-.144-.738z"
+          fill="#8226F2"
+        />
+      </g>
+      <defs>
+        <clipPath id="0gdfypf9ba">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+DataDogIcon.displayName = "DataDogIcon"
diff --git a/apps/builder/src/page/App/components/Icons/elastic.tsx b/apps/builder/src/page/App/components/Icons/elastic.tsx
new file mode 100644
index 0000000000..59bc040422
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/elastic.tsx
@@ -0,0 +1,43 @@
+import { createIcon } from "@illa-design/icon"
+
+export const ElasticIcon = createIcon({
+  title: "ElasticIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#zianj8k1ea)">
+        <path
+          d="M16.74 8.4h-6.27c.03.15.09.3.12.42.21.72.33 1.47.39 2.25.03.3.03.63.03.93 0 .3 0 .63-.03.93-.06.78-.18 1.53-.39 2.25-.03.15-.09.3-.12.42h6.27c1.98 0 3.57-1.62 3.57-3.6s-1.59-3.6-3.57-3.6z"
+          fill="#00A9E5"
+        />
+        <path
+          d="M10.98 12.93c.03-.3.03-.63.03-.93 0-.3 0-.63-.03-.93-.06-.78-.18-1.53-.39-2.25-.03-.15-.09-.3-.12-.42H.78C.42 9.54.24 10.74.24 12c0 1.26.18 2.46.54 3.6h9.69c.03-.15.09-.3.12-.42.21-.72.33-1.47.39-2.25z"
+          fill="#353535"
+        />
+        <path
+          d="M17.82 16.8h-7.8c-.24.54-.51 1.05-.81 1.53-.45.75-.99 1.41-1.59 2.04-.21.21-.42.39-.63.6-.42.39-.9.72-1.38 1.05C7.5 23.28 9.78 24 12.21 24c4.17 0 7.83-2.13 9.99-5.34a6.118 6.118 0 0 0-4.38-1.86z"
+          fill="#00BFB3"
+        />
+        <path
+          d="M9.21 18.33c.3-.48.57-.99.81-1.53H1.23c.93 2.13 2.46 3.96 4.41 5.22.48-.33.93-.66 1.38-1.05.21-.18.42-.39.63-.6.57-.6 1.11-1.29 1.56-2.04z"
+          fill="#019B8F"
+        />
+        <path
+          d="M7.62 3.63c-.21-.21-.42-.39-.63-.6-.42-.39-.9-.72-1.38-1.05C3.69 3.24 2.16 5.07 1.2 7.2h8.79c-.24-.54-.51-1.05-.81-1.53-.42-.75-.96-1.44-1.56-2.04z"
+          fill="#F9B110"
+        />
+        <path
+          d="M12.21 0C9.78 0 7.5.72 5.61 1.98c.48.33.93.66 1.38 1.05.21.18.42.39.63.6.6.63 1.14 1.29 1.59 2.04.3.48.57.99.81 1.53h7.8c1.71 0 3.27-.72 4.38-1.86C20.04 2.13 16.38 0 12.21 0z"
+          fill="#FED10A"
+        />
+      </g>
+      <defs>
+        <clipPath id="zianj8k1ea">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+ElasticIcon.displayName = "ElasticIcon"
diff --git a/apps/builder/src/page/App/components/Icons/graphql.tsx b/apps/builder/src/page/App/components/Icons/graphql.tsx
new file mode 100644
index 0000000000..b4dff0c701
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/graphql.tsx
@@ -0,0 +1,38 @@
+import { createIcon } from "@illa-design/icon"
+
+export const GraphQLIcon = createIcon({
+  title: "GraphQLIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path
+        d="m2.585 17.662.863.498 9.609-16.643-.863-.498-9.609 16.643z"
+        fill="#E535AB"
+      />
+      <path d="M21.606 16.332H2.388v.996h19.218v-.996z" fill="#E535AB" />
+      <path
+        d="m2.768 16.891 9.613 5.55.498-.862-9.613-5.55-.498.862zM11.119 2.427l9.612 5.55.498-.863-9.612-5.55-.498.863z"
+        fill="#E535AB"
+      />
+      <path
+        d="m2.771 7.11.498.863 9.613-5.55-.498-.862L2.77 7.11z"
+        fill="#E535AB"
+      />
+      <path
+        d="m10.945 1.517 9.61 16.643.862-.498-9.61-16.643-.862.498zM4.146 6.45H3.15v11.1h.996V6.45z"
+        fill="#E535AB"
+      />
+      <path d="M20.85 6.45h-.996v11.1h.996V6.45z" fill="#E535AB" />
+      <path
+        d="m11.776 21.267.435.753 8.36-4.827-.434-.753-8.36 4.827z"
+        fill="#E535AB"
+      />
+      <path
+        d="M22.17 17.874a2.097 2.097 0 0 1-2.862.768 2.097 2.097 0 0 1-.768-2.862 2.097 2.097 0 0 1 2.862-.768 2.088 2.088 0 0 1 .768 2.862zM5.454 8.22a2.097 2.097 0 0 1-2.862.768 2.097 2.097 0 0 1-.768-2.862 2.097 2.097 0 0 1 2.862-.768 2.099 2.099 0 0 1 .768 2.862zM1.83 17.874a2.099 2.099 0 0 1 .768-2.862 2.099 2.099 0 0 1 2.862.768 2.096 2.096 0 0 1-3.63 2.094zM18.546 8.22a2.099 2.099 0 0 1 .768-2.862 2.099 2.099 0 0 1 2.862.768 2.099 2.099 0 0 1-.768 2.862 2.097 2.097 0 0 1-2.862-.768zM12 23.748a2.092 2.092 0 0 1-2.094-2.094c0-1.158.936-2.094 2.094-2.094s2.094.936 2.094 2.094A2.096 2.096 0 0 1 12 23.748zM12 4.44a2.092 2.092 0 0 1-2.094-2.094c0-1.158.936-2.094 2.094-2.094s2.094.936 2.094 2.094A2.092 2.092 0 0 1 12 4.44z"
+        fill="#E535AB"
+      />
+    </>
+  ),
+})
+
+GraphQLIcon.displayName = "GraphQLIcon"
diff --git a/apps/builder/src/page/App/components/Icons/mariadb.tsx b/apps/builder/src/page/App/components/Icons/mariadb.tsx
new file mode 100644
index 0000000000..3c5e2c1b53
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/mariadb.tsx
@@ -0,0 +1,14 @@
+import { createIcon } from "@illa-design/icon"
+
+export const MariaDbIcon = createIcon({
+  title: "MariaDbIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <path
+      d="M23.857 4.158a.347.347 0 0 0-.233-.08c-.232 0-.53.16-.69.239a2.179 2.179 0 0 1-.927.254c-.308.01-.574.028-.917.064-2.048.213-2.956 1.776-3.834 3.29-.478.824-.971 1.675-1.648 2.335a4.39 4.39 0 0 1-.446.378c-.7.522-1.58.891-2.267 1.154-.658.251-1.377.479-2.073.697-.637.2-1.236.39-1.789.595-.25.092-.462.16-.648.226-.503.167-.867.288-1.396.65a9.788 9.788 0 0 0-.558.41c-.42.337-.792.729-1.105 1.166a6.907 6.907 0 0 1-.925 1.117c-.111.109-.31.16-.607.16-.349 0-.771-.073-1.219-.148-.46-.08-.936-.16-1.345-.16-.332 0-.586.054-.776.164 0 0-.32.187-.454.428l.132.06c.205.11.396.246.566.404.178.164.375.305.588.419.068.027.13.068.181.12-.056.08-.138.187-.223.3-.472.617-.747 1.007-.59 1.219.074.039.157.058.24.056 1.028 0 1.58-.268 2.28-.605.202-.099.41-.2.65-.303.408-.178.848-.46 1.314-.76.617-.398 1.255-.806 1.873-1.004.51-.155 1.04-.23 1.572-.221.656 0 1.342.088 2.005.173.495.063 1.007.128 1.51.16.195.011.376.017.551.017.235 0 .47-.012.704-.038l.056-.019c.352-.217.517-.681.678-1.13.103-.29.189-.55.323-.718a.215.215 0 0 1 .027-.022.032.032 0 0 1 .04.007v.012c-.085 1.759-.79 2.874-1.506 3.866l-.478.513s.669 0 1.05-.147c1.388-.415 2.437-1.33 3.2-2.79.189-.375.357-.76.504-1.152.013-.033.134-.093.122.076 0 .05-.007.105-.01.16 0 .034-.006.069-.007.104-.02.239-.08.763-.08.763l.429-.23c1.037-.655 1.834-1.972 2.437-4.024.252-.855.436-1.704.598-2.453.195-.895.363-1.668.559-1.967.301-.47.761-.787 1.206-1.095l.182-.126c.558-.393 1.116-.847 1.239-1.692v-.02c.095-.617.02-.778-.066-.852z"
+      fill="#003545"
+    />
+  ),
+})
+
+MariaDbIcon.displayName = "MariaDbIcon"
diff --git a/apps/builder/src/page/App/components/Icons/mongodb.tsx b/apps/builder/src/page/App/components/Icons/mongodb.tsx
new file mode 100644
index 0000000000..76444d3eba
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/mongodb.tsx
@@ -0,0 +1,28 @@
+import { createIcon } from "@illa-design/icon"
+
+export const MongoDbIcon = createIcon({
+  title: "MongoDbIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#pqy9jd7qva)">
+        <path d="M10.5 19.35h3l-.75 4.5h-1.5l-.75-4.5z" fill="#A6A385" />
+        <path
+          d="M12 20.85v-21c2.5.75 7.5 4.05 7.5 11.25s-5 9.5-7.5 9.75z"
+          fill="#499D4A"
+        />
+        <path
+          d="M12 20.85v-21C9.5.6 4.5 3.9 4.5 11.1s5 9.5 7.5 9.75z"
+          fill="#58AA50"
+        />
+      </g>
+      <defs>
+        <clipPath id="pqy9jd7qva">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+MongoDbIcon.displayName = "MongoDbIcon"
diff --git a/apps/builder/src/page/App/components/Icons/mysql.tsx b/apps/builder/src/page/App/components/Icons/mysql.tsx
new file mode 100644
index 0000000000..950935b512
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/mysql.tsx
@@ -0,0 +1,21 @@
+import { createIcon } from "@illa-design/icon"
+
+export const MySqlIcon = createIcon({
+  title: "MySqlIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#tvhidcx25a)" fill="#00546B">
+        <path d="M22.092 18.395c-1.305-.033-2.316.098-3.164.457-.245.097-.637.098-.67.407.131.131.148.343.262.522.196.327.538.767.848.995.343.261.685.522 1.044.75.636.392 1.354.62 1.974 1.012.358.228.717.522 1.076.767.18.13.294.342.522.424v-.05c-.114-.146-.147-.358-.261-.521-.163-.163-.326-.31-.49-.473a7.739 7.739 0 0 0-1.696-1.648c-.521-.359-1.663-.848-1.875-1.451l-.033-.033c.359-.033.783-.163 1.125-.261.555-.147 1.06-.114 1.631-.26.261-.066.522-.148.783-.23v-.146c-.293-.294-.505-.685-.815-.962a21.748 21.748 0 0 0-2.691-2.007c-.506-.326-1.159-.538-1.697-.815-.195-.098-.522-.147-.636-.31-.294-.359-.457-.832-.669-1.256a41.233 41.233 0 0 1-1.337-2.838c-.294-.636-.473-1.272-.832-1.86-1.68-2.772-3.507-4.452-6.312-6.1-.604-.342-1.321-.489-2.088-.668-.408-.017-.815-.05-1.223-.066-.261-.114-.522-.424-.75-.57C3.187.615.79-.657.104 1.023c-.44 1.06.653 2.104 1.028 2.642.277.376.636.8.832 1.224.114.277.146.57.26.864.262.718.506 1.517.849 2.186.18.342.375.701.603 1.011.13.18.359.261.408.555-.228.326-.245.815-.375 1.223-.587 1.843-.359 4.127.473 5.48.26.408.88 1.305 1.712.963.734-.294.571-1.224.783-2.04.05-.195.017-.325.114-.456v.033c.229.456.457.897.67 1.354.505.799 1.386 1.63 2.12 2.185.391.294.701.8 1.19.979v-.05h-.032c-.098-.146-.245-.211-.376-.325a7.926 7.926 0 0 1-.848-.979c-.685-.914-1.288-1.925-1.826-2.969-.261-.505-.49-1.06-.702-1.565-.098-.196-.098-.49-.26-.588-.245.36-.604.67-.784 1.11-.31.7-.342 1.565-.456 2.462-.066.017-.033 0-.066.033-.522-.13-.701-.669-.897-1.125-.49-1.158-.57-3.018-.147-4.355.115-.343.604-1.42.408-1.745-.098-.31-.424-.49-.603-.734a6.572 6.572 0 0 1-.587-1.044c-.392-.914-.588-1.925-1.012-2.838-.195-.425-.538-.865-.815-1.256-.31-.44-.653-.75-.897-1.273-.082-.179-.196-.473-.066-.668.033-.13.098-.18.229-.212.212-.18.815.049 1.027.146.604.245 1.11.473 1.615.816.228.163.473.473.767.555h.342c.522.114 1.11.032 1.599.179.864.277 1.647.685 2.348 1.125a14.47 14.47 0 0 1 5.09 5.579c.195.375.277.717.456 1.109.343.799.767 1.614 1.11 2.397.342.767.668 1.55 1.157 2.186.245.342 1.224.522 1.664.701.326.147.832.278 1.125.457.555.342 1.11.734 1.631 1.11.261.195 1.077.603 1.126.929z" />
+        <path d="M5.455 4.22c-.277 0-.473.033-.669.082v.033h.033c.13.26.359.44.522.669.13.26.245.522.375.783l.033-.033c.228-.163.342-.424.342-.815-.098-.115-.114-.229-.196-.343-.097-.163-.31-.245-.44-.375z" />
+      </g>
+      <defs>
+        <clipPath id="tvhidcx25a">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+MySqlIcon.displayName = "MySqlIcon"
diff --git a/apps/builder/src/page/App/components/Icons/postgresql.tsx b/apps/builder/src/page/App/components/Icons/postgresql.tsx
new file mode 100644
index 0000000000..7105f9ce59
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/postgresql.tsx
@@ -0,0 +1,34 @@
+import { createIcon } from "@illa-design/icon"
+
+export const PostgreSqlIcon = createIcon({
+  title: "PostgreSqlIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#wahd7ock8a)">
+        <path
+          d="M8.422 2.003C9.83.596 12.528.83 13.7 1.123c2.933-.88 8.799-1.231 8.799 4.4 0 3.88-1.605 5.087-3.045 6.42-.452 1.38 3.045 2.287 3.045 3.258 0 .971-2.17 2.64-5.288 2.64C17.113 22.438 16.188 24 13.7 24c-2.112 0-2.64-2.053-2.64-3.52 0-.382-.06-.87-.148-1.383h-3.2c-1.407 0-1.466-1.532-1.76-2.136-.579.197-1.896.88-2.639.376C1.012 15.775-.376 3.763 1.383 2.003c1.408-1.407 5.28-.586 7.039 0z"
+          fill="#3D6288"
+        />
+        <path
+          d="M13.701 1.123c-1.173-.293-3.871-.527-5.28.88m5.28-.88-5.28.88m5.28-.88c2.933-.88 8.799-1.231 8.799 4.4 0 3.88-1.605 5.087-3.045 6.42M13.7 1.123l5.754 10.82M13.7 1.123c1.18.945 3.426 2.992 4.624 4.856M13.7 1.123l4.624 4.856M8.422 2.003c-1.76-.586-5.631-1.407-7.039 0-1.76 1.76-.371 13.772 1.931 15.334.743.504 2.06-.179 2.64-.376M8.422 2.003 5.954 16.961M8.422 2.003a29.554 29.554 0 0 0-1.497 5.28m1.497-5.28-1.497 5.28m12.53 4.66c-.452 1.38 3.045 2.287 3.045 3.258 0 .971-2.17 2.64-5.288 2.64m2.243-5.898-2.243 5.898m2.243-5.898c-.766.71-1.486 1.455-1.892 2.658m1.892-2.658-1.892 2.658m.762-8.622c.29.452.518.892.655 1.303.704 2.112-1.76 7.04-1.76 9.679m1.105-10.982L17.22 16.961m1.105-10.982c-.955-.152-3.04-.104-3.744 1.303-.704 1.408 1.695 5.466 2.982 7.32m.762-8.623-.762 8.622m-11.61 2.36c.71-.504 2.043-1.773 2.469-2.731m-2.468 2.73 2.468-2.73m-2.468 2.73c.293.605.352 2.137 1.76 2.137h3.2M6.924 7.282c-.16.9-.263 1.806-.263 2.64 0 2.816 1.173 3.721 1.76 4.308M6.925 7.282l1.497 6.948M6.925 7.282c.792-.293 2.553-.703 3.257 0 .88.88 1.436 3.287.88 4.4-.88 1.76-.737 2.633-1.106 3.995m-3.03-8.395 3.03 8.395M8.422 14.23c.608.304 1.216 1.029 1.534 1.447M8.422 14.23l1.534 1.447m0 0 .093.125c.09.123.154.262.195.41.139.497.474 1.751.67 2.885m-.958-3.42.957 3.42m6.307-2.136c0 .305-.002.598-.008.88m.008-.88-.008.88m.008-.88c0-.957.128-1.722.343-2.36m-.343 2.36.343-2.36m-.351 3.24C17.113 22.438 16.188 24 13.7 24c-2.112 0-2.64-2.053-2.64-3.52 0-.382-.06-.87-.148-1.383m6.299-1.256-6.299 1.256"
+          stroke="#fff"
+          strokeWidth="1.05"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M119.648 80.212c-13.918-.347-24.705 1.045-33.752 4.872-2.61 1.043-6.786 1.044-7.134 4.35 1.393 1.392 1.566 3.654 2.784 5.567 2.09 3.479 5.741 8.177 9.047 10.614 3.653 2.783 7.308 5.566 11.134 8.002 6.786 4.176 14.442 6.611 21.053 10.787 3.829 2.434 7.654 5.568 11.482 8.177 1.914 1.391 3.131 3.654 5.568 4.523v-.521c-1.219-1.567-1.567-3.828-2.784-5.568-1.738-1.74-3.479-3.306-5.219-5.046-5.046-6.784-11.309-12.7-18.094-17.571-5.567-3.828-17.747-9.047-20.008-15.485 0 0-.175-.173-.348-.347 3.827-.348 8.35-1.74 12.005-2.784 5.916-1.567 11.309-1.218 17.398-2.784 2.783-.696 5.567-1.566 8.351-2.436v-1.565c-3.131-3.132-5.393-7.307-8.699-10.265-8.873-7.657-18.617-15.137-28.707-21.4-5.394-3.48-12.353-5.742-18.094-8.699-2.087-1.045-5.568-1.566-6.785-3.306-3.133-3.828-4.872-8.872-7.134-13.396-5.044-9.57-9.917-20.182-14.267-30.272-3.13-6.786-5.044-13.572-8.872-19.834-17.92-29.577-37.406-47.497-67.33-65.07-6.438-3.653-14.093-5.219-22.27-7.132-4.348-.175-8.699-.522-13.048-.697-2.784-1.218-5.568-4.523-8.004-6.089-9.915-6.264-35.492-19.833-42.799-1.913-4.698 11.308 6.959 22.442 10.961 28.185 2.959 4.001 6.785 8.524 8.873 13.048 1.218 2.956 1.565 6.09 2.784 9.221 2.784 7.653 5.392 16.18 9.047 23.314 1.914 3.653 4.001 7.48 6.437 10.786 1.392 1.913 3.827 2.784 4.35 5.915-2.435 3.48-2.61 8.7-4.003 13.049-6.263 19.66-3.826 44.017 5.046 58.457 2.783 4.348 9.395 13.92 18.268 10.265 7.83-3.131 6.09-13.048 8.35-21.747.524-2.09.176-3.48 1.219-4.872v.349c2.436 4.87 4.871 9.569 7.133 14.44 5.394 8.524 14.788 17.398 22.617 23.313 4.177 3.13 7.482 8.525 12.702 10.44v-.523h-.349c-1.044-1.567-2.61-2.262-4-3.48-3.132-3.132-6.613-6.96-9.048-10.439-7.306-9.743-13.745-20.53-19.486-31.664-2.783-5.393-5.22-11.31-7.481-16.702-1.045-2.09-1.045-5.22-2.784-6.263-2.61 3.827-6.437 7.133-8.351 11.83-3.304 7.481-3.653 16.702-4.871 26.27-.696.176-.349 0-.697.35-5.566-1.394-7.48-7.134-9.569-12.006-5.22-12.352-6.089-32.186-1.565-46.452 1.218-3.654 6.438-15.136 4.35-18.616-1.044-3.306-4.525-5.22-6.438-7.829-2.261-3.306-4.698-7.48-6.263-11.135-4.176-9.743-6.264-20.53-10.787-30.273-2.088-4.524-5.74-9.22-8.699-13.396-3.305-4.698-6.959-8.004-9.569-13.571-.868-1.913-2.088-5.045-.696-7.133.348-1.392 1.043-1.913 2.436-2.261 2.262-1.915 8.7.521 10.96 1.565 6.438 2.608 11.831 5.046 17.225 8.699 2.435 1.74 5.045 5.046 8.176 5.915h3.654c5.568 1.218 11.831.349 17.05 1.914 9.222 2.957 17.572 7.307 25.054 12.005 22.792 14.44 41.58 34.97 54.282 59.501 2.088 4 2.957 7.656 4.871 11.83C39.966 5.75 44.49 14.449 48.141 22.8c3.654 8.176 7.134 16.528 12.353 23.314 2.61 3.652 13.049 5.566 17.746 7.481 3.48 1.565 8.874 2.958 12.005 4.871 5.915 3.652 11.831 7.83 17.398 11.83 2.785 2.087 11.482 6.438 12.005 9.917z"
+          fill="#00546B"
+        />
+      </g>
+      <defs>
+        <clipPath id="wahd7ock8a">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+PostgreSqlIcon.displayName = "PostgreSqlIcon"
diff --git a/apps/builder/src/page/App/components/Icons/redis.tsx b/apps/builder/src/page/App/components/Icons/redis.tsx
new file mode 100644
index 0000000000..f745cb028b
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/redis.tsx
@@ -0,0 +1,52 @@
+import { createIcon } from "@illa-design/icon"
+
+export const RedisIcon = createIcon({
+  title: "RedisIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#f3k8oj0zea)">
+        <path
+          d="M23.543 17.692c-1.308.682-8.082 3.467-9.524 4.219-1.442.752-2.243.745-3.382.2-1.14-.544-8.348-3.456-9.646-4.077-.65-.31-.99-.572-.99-.82v-2.476s9.384-2.043 10.9-2.586c1.514-.544 2.04-.562 3.329-.091 1.29.47 8.999 1.863 10.273 2.33v2.441c0 .245-.295.514-.96.86z"
+          fill="#A41E11"
+        />
+        <path
+          d="M23.543 15.215c-1.308.681-8.082 3.467-9.524 4.218-1.442.752-2.243.745-3.382.2-1.14-.544-8.348-3.456-9.646-4.076-1.299-.62-1.326-1.048-.05-1.548l9.96-3.856c1.514-.543 2.04-.561 3.33-.09 1.288.47 8.022 3.152 9.296 3.619 1.274.466 1.323.851.014 1.533h.002z"
+          fill="#D82C20"
+        />
+        <path
+          d="M23.543 13.655c-1.308.682-8.082 3.467-9.524 4.22-1.442.751-2.243.744-3.382.199-1.14-.545-8.348-3.456-9.646-4.077-.65-.31-.99-.572-.99-.819v-2.477s9.384-2.043 10.9-2.587c1.514-.543 2.04-.561 3.329-.09 1.29.47 8.999 1.863 10.273 2.33v2.441c0 .245-.295.514-.96.86z"
+          fill="#A41E11"
+        />
+        <path
+          d="M23.543 11.176c-1.308.682-8.082 3.467-9.524 4.22-1.442.751-2.243.744-3.382.199-1.14-.545-8.348-3.457-9.646-4.077-1.299-.62-1.326-1.048-.05-1.547l9.96-3.856c1.514-.544 2.04-.562 3.33-.09 1.288.47 8.022 3.151 9.296 3.618 1.274.467 1.323.852.014 1.534h.002z"
+          fill="#D82C20"
+        />
+        <path
+          d="M23.543 9.466c-1.308.681-8.082 3.467-9.524 4.22-1.442.753-2.243.744-3.382.2-1.14-.545-8.348-3.457-9.646-4.077-.65-.31-.99-.572-.99-.82V6.512s9.384-2.043 10.9-2.586c1.514-.544 2.04-.562 3.329-.09 1.29.47 8.999 1.862 10.273 2.329v2.442c0 .244-.295.513-.96.86z"
+          fill="#A41E11"
+        />
+        <path
+          d="M23.543 6.988c-1.308.682-8.082 3.467-9.524 4.22-1.442.751-2.243.743-3.382.199C9.497 10.863 2.289 7.951.99 7.33-.308 6.71-.335 6.282.94 5.783l9.96-3.856c1.514-.544 2.04-.562 3.33-.09 1.288.47 8.022 3.151 9.296 3.618 1.274.467 1.323.852.014 1.533h.002z"
+          fill="#D82C20"
+        />
+        <path
+          d="m12.096 4.69-2.451-.22 1.829-.66-.547-1.012 1.714.67 1.613-.529-.436 1.047 1.646.617-2.123.22-.475 1.144-.77-1.276zM8.775 8.509l5.678-.872-1.714 2.515-3.964-1.643zM7.244 7.591c1.676 0 3.034-.527 3.034-1.176 0-.65-1.358-1.177-3.034-1.177-1.676 0-3.035.527-3.035 1.177S5.568 7.59 7.244 7.59z"
+          fill="#fff"
+        />
+        <path d="m21.332 6.244-3.356 1.325V4.915l3.356 1.329z" fill="#7A0C00" />
+        <path
+          d="M17.973 4.916v2.655l-.365.144-3.356-1.325 3.72-1.474z"
+          fill="#AD2115"
+        />
+      </g>
+      <defs>
+        <clipPath id="f3k8oj0zea">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+RedisIcon.displayName = "RedisIcon"
diff --git a/apps/builder/src/page/App/components/Icons/restapi.tsx b/apps/builder/src/page/App/components/Icons/restapi.tsx
new file mode 100644
index 0000000000..268e3421ce
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/restapi.tsx
@@ -0,0 +1,32 @@
+import { createIcon } from "@illa-design/icon"
+
+export const RestApiIcon = createIcon({
+  title: "RestApiIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path
+        d="M9.13125 21V18.75H6.68437C5.325 18.75 5.05312 18.8182 5.05312 17.1521V14.4347C5.05312 13.0661 4.10625 12.1735 2.33437 12.0942V11.9157C4.10625 11.8364 5.05312 10.9339 5.05312 9.5752V6.84793C5.05312 5.18183 5.325 5.25 6.68437 5.25H9.13125V3H6.21562C3.675 3 2.85937 3.8529 2.85937 6.49091V8.69256C2.85937 10.2496 2.11875 10.9735 0 10.8248V13.1851C2.11875 13.0364 2.85937 13.7603 2.85937 15.3075V17.5091C2.85937 20.1471 3.675 21 6.21562 21H9.13125Z"
+        fill="#C9CDD4"
+      />
+      <path
+        d="M17.7845 21C20.325 21 21.1407 20.1471 21.1407 17.5091V15.3075C21.1407 13.7603 21.8812 13.0364 24 13.1851V10.8248C21.8812 10.9735 21.1407 10.2496 21.1407 8.69256V6.49091C21.1407 3.8529 20.325 3 17.7845 3H15V5.25H15.9469C17.3062 5.25 18.9469 5.18183 18.9469 6.84793V9.5752C18.9469 10.9339 19.8937 11.8364 21.6657 11.9157V12.0942C19.8937 12.1735 18.9469 13.0661 18.9469 14.4347V17.1521C18.9469 18.8182 17.3062 18.75 15.9469 18.75H15V21H17.7845Z"
+        fill="#C9CDD4"
+      />
+      <path
+        d="M7.5 13.5C8.32843 13.5 9 12.8284 9 12C9 11.1716 8.32843 10.5 7.5 10.5C6.67157 10.5 6 11.1716 6 12C6 12.8284 6.67157 13.5 7.5 13.5Z"
+        fill="#E5E6EB"
+      />
+      <path
+        d="M12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5Z"
+        fill="#E5E6EB"
+      />
+      <path
+        d="M16.5 13.5C17.3284 13.5 18 12.8284 18 12C18 11.1716 17.3284 10.5 16.5 10.5C15.6716 10.5 15 11.1716 15 12C15 12.8284 15.6716 13.5 16.5 13.5Z"
+        fill="#E5E6EB"
+      />
+    </>
+  ),
+})
+
+RestApiIcon.displayName = "RestApiIcon"
diff --git a/apps/builder/src/page/App/components/Icons/s3.tsx b/apps/builder/src/page/App/components/Icons/s3.tsx
new file mode 100644
index 0000000000..1d4ce811b2
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/s3.tsx
@@ -0,0 +1,48 @@
+import { createIcon } from "@illa-design/icon"
+
+export const S3Icon = createIcon({
+  title: "S3Icon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path
+        d="M11.892 18.667V5.333L3.321 3.43v17.143l8.571-1.905zM21.793 19.095a1.5 1.5 0 0 0 .385-1.004V5.91a1.5 1.5 0 0 0-.385-1.003l-1.329-1.477v17.143l1.33-1.477z"
+        fill="#E05243"
+      />
+      <path
+        d="M1.992 19.095a1.5 1.5 0 0 1-.385-1.004V5.91c0-.37.137-.728.385-1.003l1.33-1.477v17.143l-1.33-1.477zM11.892 18.667V6.286l8.572-2.857v17.143l-8.572-1.905z"
+        fill="#8C3123"
+      />
+      <path
+        d="M11.892 0v6l3.429.857V2.641a1.5 1.5 0 0 0-.83-1.341L11.893 0z"
+        fill="#E05243"
+      />
+      <path
+        d="M11.892 0v6l-3.428.857V2.641A1.5 1.5 0 0 1 9.293 1.3l2.6-1.3zM11.892 8.571v6.857L9.6 14.855A1.5 1.5 0 0 1 8.464 13.4v-2.8A1.5 1.5 0 0 1 9.6 9.144l2.292-.573z"
+        fill="#8C3123"
+      />
+      <path
+        d="M11.892 8.571v6.857l2.293-.573A1.5 1.5 0 0 0 15.32 13.4v-2.8a1.5 1.5 0 0 0-1.136-1.456l-2.293-.573z"
+        fill="#E05243"
+      />
+      <path
+        d="M8.464 6.857 11.892 6l3.429.857-3.429.857-3.428-.857z"
+        fill="#5E1F18"
+      />
+      <path
+        d="M11.892 24v-6l-3.428-.857v4.215a1.5 1.5 0 0 0 .829 1.342l2.6 1.3z"
+        fill="#8C3123"
+      />
+      <path
+        d="M11.892 24v-6l3.429-.857v4.215a1.5 1.5 0 0 1-.83 1.342L11.893 24z"
+        fill="#E05243"
+      />
+      <path
+        d="M15.32 17.143 11.893 18l-3.428-.857 3.428-.857 3.429.857z"
+        fill="#F2B0A9"
+      />
+    </>
+  ),
+})
+
+S3Icon.displayName = "S3Icon"
diff --git a/apps/builder/src/page/App/components/Icons/smtp.tsx b/apps/builder/src/page/App/components/Icons/smtp.tsx
new file mode 100644
index 0000000000..a41fa68104
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/smtp.tsx
@@ -0,0 +1,18 @@
+import { createIcon } from "@illa-design/icon"
+
+export const SmtpIcon = createIcon({
+  title: "SmtpIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.39677 6.49658L11.0501 13.5766C11.6027 14.0287 12.3973 14.0287 12.9498 13.5766L21.9569 6.20714C21.6054 5.63305 20.9724 5.25 20.25 5.25H4.25C3.41196 5.25 2.69431 5.76543 2.39677 6.49658ZM22.25 7.25941L13.5831 14.3505C12.6621 15.104 11.3378 15.104 10.4169 14.3505L2.25 7.66856V17.25C2.25 18.3546 3.14543 19.25 4.25 19.25H20.25C21.3546 19.25 22.25 18.3546 22.25 17.25V7.25941Z"
+        fill="#FFAB00"
+      />
+    </>
+  ),
+})
+
+SmtpIcon.displayName = "SmtpIcon"
diff --git a/apps/builder/src/page/App/components/Icons/snowflake.tsx b/apps/builder/src/page/App/components/Icons/snowflake.tsx
new file mode 100644
index 0000000000..eaa309d3f0
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/snowflake.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from "@illa-design/icon"
+
+export const SnowflakeIcon = createIcon({
+  title: "SnowflakeIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#3szl9e6zqa)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.418 8.661 3.34 5.737a1.487 1.487 0 0 1-.547-2.034 1.494 1.494 0 0 1 2.04-.543l2.884 1.66V1.484a1.486 1.486 0 0 1 2.972 0v5.862c0 .431-.183.82-.48 1.091a1.495 1.495 0 0 1-1.79.224zm-.424 3.358a1.458 1.458 0 0 0-.728-1.285L2.187 7.809a1.46 1.46 0 0 0-1.991.533 1.454 1.454 0 0 0 .534 1.986l2.927 1.685L.73 13.699c-.338.194-.58.507-.68.883a1.44 1.44 0 0 0 .146 1.104 1.463 1.463 0 0 0 1.991.532l5.079-2.924c.454-.263.733-.75.728-1.275zm12.631 6.272-5.079-2.927a1.497 1.497 0 0 0-2.038.546c-.16.28-.223.589-.193.889v5.72c0 .817.666 1.48 1.488 1.48.82 0 1.485-.663 1.485-1.48v-3.29l2.845 1.64a1.494 1.494 0 0 0 2.04-.546 1.482 1.482 0 0 0-.548-2.032zm-5.865-6.035a.574.574 0 0 1-.145.35l-2.013 2.008a.572.572 0 0 1-.35.144h-.513a.571.571 0 0 1-.35-.144l-2.015-2.008a.574.574 0 0 1-.145-.35v-.51c0-.115.065-.27.145-.35l2.015-2.01a.571.571 0 0 1 .35-.145h.512c.113 0 .27.065.35.145l2.014 2.01c.08.08.145.235.145.35v.51zm-1.797-.245v-.022a.425.425 0 0 0-.106-.257l-.595-.59a.407.407 0 0 0-.257-.108h-.022a.417.417 0 0 0-.257.107l-.592.591a.414.414 0 0 0-.106.257v.021c0 .085.047.199.106.257l.592.593c.06.059.175.106.257.106h.022a.416.416 0 0 0 .257-.106l.595-.593a.415.415 0 0 0 .106-.256zm7.662-6.274L15.547 8.66a1.489 1.489 0 0 1-2.231-1.432V1.484a1.486 1.486 0 0 1 2.972 0v3.315l2.846-1.64a1.494 1.494 0 0 1 2.038.544 1.486 1.486 0 0 1-.547 2.034zM9.437 15.192a1.483 1.483 0 0 0-1.019.172L3.34 18.291c-.713.41-.96 1.32-.547 2.032a1.493 1.493 0 0 0 2.04.545l2.884-1.66v3.31c0 .818.665 1.482 1.487 1.482.82 0 1.485-.664 1.485-1.482v-5.862c0-.74-.542-1.352-1.251-1.464zM21.76 7.779a1.492 1.492 0 0 1 2.04.546 1.482 1.482 0 0 1-.548 2.032l-2.875 1.656 2.875 1.656c.714.412.96 1.322.547 2.034a1.497 1.497 0 0 1-2.039.546l-5.078-2.927a1.484 1.484 0 0 1-.746-1.302 1.49 1.49 0 0 1 .746-1.316l5.078-2.925z"
+          fill="#29B5E8"
+        />
+      </g>
+      <defs>
+        <clipPath id="3szl9e6zqa">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+SnowflakeIcon.displayName = "SnowflakeIcon"
diff --git a/apps/builder/src/page/App/components/Icons/tidb.tsx b/apps/builder/src/page/App/components/Icons/tidb.tsx
new file mode 100644
index 0000000000..de31d17003
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/tidb.tsx
@@ -0,0 +1,27 @@
+import { createIcon } from "@illa-design/icon"
+
+export const TidbIcon = createIcon({
+  title: "TidbIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#h3jahxhpga)">
+        <path
+          d="M12.018 0 .6 5.998v11.995L12.018 24 23.4 18.002V6.007L12.018 0z"
+          fill="#E6002D"
+        />
+        <path
+          d="M11.24 7.894v11.201l-2.796-1.463V9.367L4.87 11.245V8.247l7.139-3.749 2.84 1.5-3.609 1.896zM16.931 16.91l-2.814 1.48V9.377l2.814-1.481v9.014z"
+          fill="#fff"
+        />
+      </g>
+      <defs>
+        <clipPath id="h3jahxhpga">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+TidbIcon.displayName = "TidbIcon"
diff --git a/apps/builder/src/page/App/components/Icons/transformer.tsx b/apps/builder/src/page/App/components/Icons/transformer.tsx
new file mode 100644
index 0000000000..5cb50372e4
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/transformer.tsx
@@ -0,0 +1,22 @@
+import { createIcon } from "@illa-design/icon"
+
+export const TransformerIcon = createIcon({
+  title: "TransformerIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 2.25a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75V3h3v-.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75V3a3 3 0 0 1 3 3v13.5a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3v-.75z"
+        fill="#FFCD00"
+      />
+      <path
+        d="M10.471 13.645c0 .423-.036.832-.108 1.229-.072.396-.22.751-.445 1.066-.216.315-.536.567-.959.756-.414.189-.967.284-1.66.284-.513 0-.95-.077-1.31-.23a2.535 2.535 0 0 1-.89-.648 2.641 2.641 0 0 1-.514-.986 4.457 4.457 0 0 1-.162-1.228v-.513h1.688v.5c0 .549.09.976.27 1.282.189.297.54.445 1.053.445.27 0 .49-.04.661-.121a.947.947 0 0 0 .419-.351c.108-.162.18-.36.216-.594.036-.234.054-.5.054-.796V7.11h1.687v6.534zm3.16-.108c0 .369.063.684.19.945.126.261.301.477.526.648.225.162.482.284.77.364.296.072.616.108.958.108.369 0 .684-.04.945-.121.261-.09.473-.203.634-.338.163-.135.28-.288.352-.459.072-.18.107-.36.107-.54 0-.369-.085-.639-.256-.81a1.346 1.346 0 0 0-.54-.377 10.394 10.394 0 0 0-1.201-.352c-.45-.117-1.008-.265-1.675-.445a3.848 3.848 0 0 1-1.039-.418 2.601 2.601 0 0 1-.648-.595 2.17 2.17 0 0 1-.351-.688 2.947 2.947 0 0 1-.095-.742c0-.487.1-.905.297-1.256.207-.36.477-.657.81-.891a3.427 3.427 0 0 1 1.135-.513 4.79 4.79 0 0 1 1.282-.176c.504 0 .976.068 1.418.203.45.126.841.32 1.174.58.342.262.612.585.81.973.198.377.297.819.297 1.322h-1.688c-.044-.62-.256-1.057-.634-1.309-.378-.261-.86-.392-1.444-.392-.199 0-.401.023-.608.068a1.704 1.704 0 0 0-.567.202 1.24 1.24 0 0 0-.432.378 1.072 1.072 0 0 0-.162.608c0 .342.104.612.31.81.217.189.496.333.838.432.036.009.175.05.418.121a63.135 63.135 0 0 1 1.728.46c.297.072.509.126.634.162.316.098.59.233.824.404.234.171.427.37.58.595.163.216.28.45.352.702.08.252.121.504.121.756 0 .54-.112 1.003-.337 1.39a2.763 2.763 0 0 1-.864.931 3.68 3.68 0 0 1-1.229.527 5.662 5.662 0 0 1-1.404.176 5.778 5.778 0 0 1-1.553-.203 3.634 3.634 0 0 1-1.268-.621 3.055 3.055 0 0 1-.865-1.066c-.216-.441-.328-.959-.337-1.553h1.688z"
+        fill="#fff"
+      />
+    </>
+  ),
+})
+
+TransformerIcon.displayName = "TransformerIcon"
diff --git a/apps/builder/src/page/App/components/Icons/zapier.tsx b/apps/builder/src/page/App/components/Icons/zapier.tsx
new file mode 100644
index 0000000000..604901c6e2
--- /dev/null
+++ b/apps/builder/src/page/App/components/Icons/zapier.tsx
@@ -0,0 +1,23 @@
+import { createIcon } from "@illa-design/icon"
+
+export const ZapierIcon = createIcon({
+  title: "ZapierIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <g clipPath="url(#8xsex7ok7a)">
+        <path
+          d="M23.703 9.907h-7.041l4.947-4.948c-.38-.57-.76-.951-1.142-1.522a10.883 10.883 0 0 1-1.522-1.332L14 7.052V.202a6.47 6.47 0 0 0-1.903-.19 5.86 5.86 0 0 0-1.904.19v7.04L5.055 2.106a5.137 5.137 0 0 0-1.523 1.332c-.38.57-.95.951-1.332 1.523l4.947 4.947H.297l-.19 1.902a5.86 5.86 0 0 0 .19 1.903H7.34L2.2 18.849a10.199 10.199 0 0 0 2.854 2.855l4.948-4.948v7.041a6.473 6.473 0 0 0 1.902.19 5.862 5.862 0 0 0 1.903-.19v-7.04l4.947 4.948a5.14 5.14 0 0 0 1.522-1.332c.49-.465.936-.975 1.332-1.522l-4.947-4.948h7.04A6.47 6.47 0 0 0 23.894 12a7.135 7.135 0 0 0-.19-2.093zm-8.754 1.902a9.645 9.645 0 0 1-.38 2.474 5.708 5.708 0 0 1-2.474.38 9.645 9.645 0 0 1-2.474-.38 5.708 5.708 0 0 1-.38-2.474c.018-.837.146-1.669.38-2.474a5.709 5.709 0 0 1 2.474-.38c.837.019 1.67.147 2.474.38.22.808.347 1.638.38 2.474z"
+          fill="#FF4A00"
+        />
+      </g>
+      <defs>
+        <clipPath id="8xsex7ok7a">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+})
+
+ZapierIcon.displayName = "ZapierIcon"
diff --git a/apps/builder/src/page/App/components/InputRecordEditor/index.tsx b/apps/builder/src/page/App/components/InputRecordEditor/index.tsx
new file mode 100644
index 0000000000..422acf7d72
--- /dev/null
+++ b/apps/builder/src/page/App/components/InputRecordEditor/index.tsx
@@ -0,0 +1,96 @@
+import { FC, useMemo } from "react"
+import { InputRecordEditorProps } from "./interface"
+import { useTranslation } from "react-i18next"
+import {
+  applyRecordEditorContainerStyle,
+  recordEditorLabelStyle,
+  recordEditorStyle,
+  recordStyle,
+} from "./style"
+import { Button } from "@illa-design/button"
+import { AddIcon, DeleteIcon } from "@illa-design/icon"
+import { globalColor, illaPrefix } from "@illa-design/theme"
+import { Input } from "@illa-design/input"
+
+export const InputRecordEditor: FC<InputRecordEditorProps> = props => {
+  const { records, label, onDelete, onAdd, onChangeKey, onChangeValue } = props
+
+  const { t } = useTranslation()
+
+  const recordList = useMemo(() => {
+    return (
+      <>
+        {records.map((record, index) => {
+          return (
+            <div css={recordStyle} key={index}>
+              <Input
+                w="100%"
+                borderColor="techPurple"
+                value={record.key}
+                placeholder="key"
+                bdRadius="8px 0 0 8px"
+                onChange={value => {
+                  onChangeKey(index, value, record.value)
+                }}
+              />
+              <Input
+                w="100%"
+                borderColor="techPurple"
+                placeholder="value"
+                value={record.value}
+                ml="-1px"
+                bdRadius="0"
+                onChange={value => {
+                  onChangeValue(index, record.key, value)
+                }}
+              />
+              <Button
+                ml="-1px"
+                variant="outline"
+                minW="32px"
+                bdRadius="0 8px 8px 0"
+                colorScheme="grayBlue"
+                onClick={() => {
+                  onDelete(index, record)
+                }}
+                leftIcon={
+                  <DeleteIcon
+                    color={globalColor(`--${illaPrefix}-grayBlue-08`)}
+                  />
+                }
+              />
+            </div>
+          )
+        })}
+      </>
+    )
+  }, [onChangeKey, onChangeValue, onDelete, records])
+
+  return (
+    <div css={applyRecordEditorContainerStyle(label)}>
+      {label != "" && <span css={recordEditorLabelStyle}>{label}</span>}
+      <div css={recordEditorStyle}>
+        {recordList}
+        <span>
+          <Button
+            mb="8px"
+            pd="1px 8px"
+            colorScheme="techPurple"
+            size="medium"
+            variant="text"
+            onClick={() => {
+              onAdd()
+            }}
+            leftIcon={
+              <AddIcon color={globalColor(`--${illaPrefix}-techPurple-08`)} />
+            }
+          >
+            {t("editor.action.panel.btn.new")}
+          </Button>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+InputRecordEditor.displayName = "InputRecordEditor"
diff --git a/apps/builder/src/page/App/components/InputRecordEditor/interface.ts b/apps/builder/src/page/App/components/InputRecordEditor/interface.ts
new file mode 100644
index 0000000000..7fc58d0a69
--- /dev/null
+++ b/apps/builder/src/page/App/components/InputRecordEditor/interface.ts
@@ -0,0 +1,10 @@
+import { Params } from "@/redux/resource/resourceState"
+
+export interface InputRecordEditorProps {
+  label: string
+  records: Params[]
+  onAdd: () => void
+  onDelete: (index: number, record: Params) => void
+  onChangeKey: (index: number, key: string, value: string) => void
+  onChangeValue: (index: number, key: string, value: string) => void
+}
diff --git a/apps/builder/src/page/App/components/InputRecordEditor/style.ts b/apps/builder/src/page/App/components/InputRecordEditor/style.ts
new file mode 100644
index 0000000000..475df59093
--- /dev/null
+++ b/apps/builder/src/page/App/components/InputRecordEditor/style.ts
@@ -0,0 +1,36 @@
+import { css } from "@emotion/react"
+import { globalColor, illaPrefix } from "@illa-design/theme"
+
+export function applyRecordEditorContainerStyle(label: string) {
+  return css`
+    display: flex;
+    padding-right: ${label !== "" ? "24px" : "0"};
+    flex-direction: row;
+  `
+}
+export const recordEditorStyle = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+`
+
+export const recordStyle = css`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 48px;
+`
+
+export const recordEditorLabelStyle = css`
+  min-width: 160px;
+  margin-left: 16px;
+  margin-right: 16px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+`
diff --git a/apps/builder/src/page/App/components/InspectPanel/actionMenu.tsx b/apps/builder/src/page/App/components/InspectPanel/actionMenu.tsx
index b37b574f49..9565d57354 100644
--- a/apps/builder/src/page/App/components/InspectPanel/actionMenu.tsx
+++ b/apps/builder/src/page/App/components/InspectPanel/actionMenu.tsx
@@ -13,7 +13,7 @@ import { ComponentNode } from "@/redux/currentApp/editor/components/componentsSt
 
 const { Item } = DropList
 
-export const ActionMenu: FC<PanelHeaderActionProps> = props => {
+export const ActionMenu: FC<PanelHeaderActionProps> = (props) => {
   const { widgetDisplayName, componentType } = props
   const { t } = useTranslation()
 
diff --git a/apps/builder/src/page/App/components/InspectPanel/multiSelectedPanel.tsx b/apps/builder/src/page/App/components/InspectPanel/multiSelectedPanel.tsx
index 9304decfc0..927ff76aca 100644
--- a/apps/builder/src/page/App/components/InspectPanel/multiSelectedPanel.tsx
+++ b/apps/builder/src/page/App/components/InspectPanel/multiSelectedPanel.tsx
@@ -27,7 +27,7 @@ export const MultiSelectedPanel: FC = () => {
         })}
       </div>
       <div css={formContentStyle}>
-        {selectedComponents.map(displayName => {
+        {selectedComponents.map((displayName) => {
           return (
             <div key={displayName} css={formContentItemStyle}>
               {displayName}
diff --git a/apps/builder/src/page/App/components/InspectPanel/selectedPanel.tsx b/apps/builder/src/page/App/components/InspectPanel/selectedPanel.tsx
index 1b2212d1de..235310f209 100644
--- a/apps/builder/src/page/App/components/InspectPanel/selectedPanel.tsx
+++ b/apps/builder/src/page/App/components/InspectPanel/selectedPanel.tsx
@@ -3,13 +3,12 @@ import { SelectedPanelProps } from "@/page/App/components/InspectPanel/interface
 import { MultiSelectedPanel } from "@/page/App/components/InspectPanel/multiSelectedPanel"
 import { SingleSelectedPanel } from "@/page/App/components/InspectPanel/singleSelectedPanel"
 
-export const SelectedPanel: FC<SelectedPanelProps> = (props) => {
+export const SelectedPanel: FC<SelectedPanelProps> = props => {
   const { selectedDisplayNames } = props
 
-  const isMulti = useMemo(
-    () => selectedDisplayNames.length > 1,
-    [selectedDisplayNames],
-  )
+  const isMulti = useMemo(() => selectedDisplayNames.length > 1, [
+    selectedDisplayNames,
+  ])
   return isMulti ? <MultiSelectedPanel /> : <SingleSelectedPanel />
 }
 
diff --git a/apps/builder/src/page/App/components/InspectPanel/setter.tsx b/apps/builder/src/page/App/components/InspectPanel/setter.tsx
index 71b2c57cb4..c891fb29d8 100644
--- a/apps/builder/src/page/App/components/InspectPanel/setter.tsx
+++ b/apps/builder/src/page/App/components/InspectPanel/setter.tsx
@@ -112,6 +112,7 @@ export const Setter = memo<PanelSetterProps>((props: PanelSetterProps) => {
     finalValue,
     widgetProps,
     handleUpdateDsl,
+    handleUpdateMultiAttrDSL,
     widgetDisplayName,
     expectedType,
     widgetType,
diff --git a/apps/builder/src/page/App/components/PageNavBar/ZoomControl/index.tsx b/apps/builder/src/page/App/components/PageNavBar/ZoomControl/index.tsx
index fdcf6d1c11..49feb03159 100644
--- a/apps/builder/src/page/App/components/PageNavBar/ZoomControl/index.tsx
+++ b/apps/builder/src/page/App/components/PageNavBar/ZoomControl/index.tsx
@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux"
 import { configActions } from "@/redux/config/configSlice"
 import { getScale } from "@/redux/config/configSelector"
 
-export const ZoomControl: FC = (props) => {
+export const ZoomControl: FC = props => {
   const dispatch = useDispatch()
   const scale = useSelector(getScale)
   return (
diff --git a/apps/builder/src/page/App/components/PageNavBar/index.tsx b/apps/builder/src/page/App/components/PageNavBar/index.tsx
index 0aba68bc49..76ea1ce5f9 100644
--- a/apps/builder/src/page/App/components/PageNavBar/index.tsx
+++ b/apps/builder/src/page/App/components/PageNavBar/index.tsx
@@ -15,7 +15,8 @@ import { PageNavBarProps } from "@/page/App/components/PageNavBar/interface"
 import { configActions } from "@/redux/config/configSlice"
 import {
   getIllaMode,
-  isOpenBottomPanel, isOpenDebugger,
+  isOpenBottomPanel,
+  isOpenDebugger,
   isOpenLeftPanel,
   isOpenRightPanel,
 } from "@/redux/config/configSelector"
@@ -39,7 +40,7 @@ import { fromNow } from "@/utils/dayjs"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 import { getExecutionDebuggerData } from "@/redux/currentApp/executionTree/executionSelector"
 
-export const PageNavBar: FC<PageNavBarProps> = (props) => {
+export const PageNavBar: FC<PageNavBarProps> = props => {
   const { className } = props
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -58,16 +59,16 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
 
   const handleClickLeftWindowIcon = useCallback(() => {
     dispatch(configActions.updateLeftPanel(!leftPanelVisible))
-  }, [leftPanelVisible])
+  }, [dispatch, leftPanelVisible])
   const handleClickRightWindowIcon = useCallback(() => {
     dispatch(configActions.updateRightPanel(!rightPanelVisible))
-  }, [rightPanelVisible])
+  }, [dispatch, rightPanelVisible])
   const handleClickBottomWindowIcon = useCallback(() => {
     dispatch(configActions.updateBottomPanel(!bottomPanelVisible))
-  }, [bottomPanelVisible])
+  }, [bottomPanelVisible, dispatch])
   const handleClickDebuggerIcon = useCallback(() => {
     dispatch(configActions.updateDebuggerVisible(!debuggerVisible))
-  }, [debuggerVisible])
+  }, [debuggerVisible, dispatch])
 
   const handleClickDeploy = useCallback(() => {
     Api.request<DeployResp>(
@@ -75,7 +76,7 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
         url: `/apps/${appInfo.appId}/deploy`,
         method: "POST",
       },
-      (response) => {
+      response => {
         window.open(
           window.location.protocol +
             "//" +
@@ -84,20 +85,20 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
           "_blank",
         )
       },
-      (e) => {
+      e => {
         Message.error(t("editor.deploy.fail"))
       },
-      (e) => {
+      e => {
         Message.error(t("editor.deploy.fail"))
       },
-      (loading) => {
+      loading => {
         setDeployLoading(loading)
       },
     )
-  }, [setDeployLoading, appInfo])
+  }, [appInfo.appId, t])
   const handleClickPreview = useCallback(() => {
     dispatch(configActions.updateIllaMode("edit"))
-  }, [])
+  }, [dispatch])
 
   return (
     <div className={className} css={navBarStyle}>
@@ -144,7 +145,12 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
               <Button
                 colorScheme="gray"
                 size="medium"
-                leftIcon={<BugIcon color={globalColor(`--${illaPrefix}-grayBlue-03`)} size="14px" />}
+                leftIcon={
+                  <BugIcon
+                    color={globalColor(`--${illaPrefix}-grayBlue-03`)}
+                    size="14px"
+                  />
+                }
                 onClick={handleClickDebuggerIcon}
               />
             </Badge>
diff --git a/apps/builder/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts
index 6a677f597e..6ff360a2ac 100644
--- a/apps/builder/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts
+++ b/apps/builder/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts
@@ -7,7 +7,7 @@ export function applyCircleStyle(color: string): SerializedStyles {
     &::after {
       top: 0;
       left: 0;
-      content: '';
+      content: "";
       position: absolute;
       background-color: ${color};
       width: 100%;
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/actionMenu.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/actionMenu.tsx
index 15a1a0bb25..0e25939ac5 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/actionMenu.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/actionMenu.tsx
@@ -7,7 +7,7 @@ import { BaseEventHandlerContext } from "@/page/App/components/PanelSetters/Even
 
 const { Item } = DropList
 
-export const ActionMenu: FC<ActionMenuProps> = (props) => {
+export const ActionMenu: FC<ActionMenuProps> = props => {
   const { index, handleCloseMode } = props
   const { handleCopyEventItem, handleDeleteEventItem } = useContext(
     BaseEventHandlerContext,
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/body.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/body.tsx
index d64a676050..cce011d83f 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/body.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/body.tsx
@@ -3,7 +3,7 @@ import { ListItem } from "@/page/App/components/PanelSetters/EventHandlerSetter/
 import { ListBodyProps } from "@/page/App/components/PanelSetters/EventHandlerSetter/List/interface"
 import { EventHandlerEmpty } from "@/page/App/components/PanelSetters/EventHandlerSetter/List/empty"
 
-export const ListBody: FC<ListBodyProps> = (props) => {
+export const ListBody: FC<ListBodyProps> = props => {
   const { events } = props
 
   if (!events || events.length === 0) return <EventHandlerEmpty />
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx
index 32d8ebc1ef..a30a9c5275 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx
@@ -40,12 +40,16 @@ const getMethodName = (
   )
 }
 
-export const EventAndMethodLabel: FC<EventAndMethodLabelProps> = (props) => {
+export const EventAndMethodLabel: FC<EventAndMethodLabelProps> = props => {
   const { index } = props
   const { t } = useTranslation()
   const [modalVisible, setModalVisible] = useState(false)
-  const { widgetDisplayName, attrPath, childrenSetter, eventItems } =
-    useContext(BaseEventHandlerContext)
+  const {
+    widgetDisplayName,
+    attrPath,
+    childrenSetter,
+    eventItems,
+  } = useContext(BaseEventHandlerContext)
 
   const event = get(eventItems, index)
   const { eventType, widgetID, queryID, widgetMethod, actionType } = event
@@ -70,7 +74,7 @@ export const EventAndMethodLabel: FC<EventAndMethodLabelProps> = (props) => {
       showArrow={false}
       position="left-start"
       clickOutsideToClose
-      onVisibleChange={(visible) => {
+      onVisibleChange={visible => {
         setModalVisible(visible)
       }}
     >
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/item.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/item.tsx
index dda6f25435..030672f91f 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/item.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/item.tsx
@@ -7,7 +7,7 @@ import { More } from "@/page/App/components/PanelSetters/EventHandlerSetter/List
 import { EventAndMethodLabel } from "@/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel"
 import { ListItemProps } from "@/page/App/components/PanelSetters/EventHandlerSetter/List/interface"
 
-export const ListItem: FC<ListItemProps> = (props) => {
+export const ListItem: FC<ListItemProps> = props => {
   const { index } = props
   return (
     <div css={listItemWrapperStyle}>
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/more.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/more.tsx
index 2771e550b0..64c7f2b035 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/more.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/List/more.tsx
@@ -5,7 +5,7 @@ import { moreIconWrapperStyle } from "./style"
 import { ActionMenu } from "./actionMenu"
 import { MoreProps } from "./interface"
 
-export const More: FC<MoreProps> = (props) => {
+export const More: FC<MoreProps> = props => {
   const { index } = props
 
   const [actionMenuVisible, setActionMenuVisible] = useState(false)
@@ -20,7 +20,7 @@ export const More: FC<MoreProps> = (props) => {
       }
       trigger="click"
       position="bottom-end"
-      onVisibleChange={(visible) => {
+      onVisibleChange={visible => {
         setActionMenuVisible(visible)
       }}
     >
diff --git a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/context/index.tsx b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/context/index.tsx
index c065ff4d18..68d27f4ab3 100644
--- a/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/context/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/EventHandlerSetter/context/index.tsx
@@ -18,7 +18,7 @@ interface Inject extends Omit<ProviderProps, "children"> {
 
 export const BaseEventHandlerContext = createContext<Inject>({} as Inject)
 
-export const BaseEventHandlerProvider: FC<ProviderProps> = (props) => {
+export const BaseEventHandlerProvider: FC<ProviderProps> = props => {
   const { eventItems, attrPath, handleUpdateDsl } = props
 
   const handleDeleteEventItem = useCallback(
diff --git a/apps/builder/src/page/App/components/PanelSetters/InputSetter/calcSelfInput.tsx b/apps/builder/src/page/App/components/PanelSetters/InputSetter/calcSelfInput.tsx
index 3557c3bd6c..27ca5ec88b 100644
--- a/apps/builder/src/page/App/components/PanelSetters/InputSetter/calcSelfInput.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/InputSetter/calcSelfInput.tsx
@@ -3,7 +3,7 @@ import { BaseInputSetterProps } from "./interface"
 import { applyInputSetterWrapperStyle } from "./style"
 import { CodeEditor } from "@/components/CodeEditor"
 
-export const CalcSelfInput: FC<BaseInputSetterProps> = (props) => {
+export const CalcSelfInput: FC<BaseInputSetterProps> = props => {
   const {
     isSetterSingleRow,
     placeholder,
@@ -19,7 +19,7 @@ export const CalcSelfInput: FC<BaseInputSetterProps> = (props) => {
       <CodeEditor
         value={value ?? ""}
         placeholder={placeholder}
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
         mode="TEXT_JS"
diff --git a/apps/builder/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx b/apps/builder/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx
index 93e740ca04..6c891c205c 100644
--- a/apps/builder/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx
@@ -12,7 +12,7 @@ const iconNameMapComp = {
   textSize: <TextSizeIcon />,
 }
 
-export const EditableInputSetter: FC<EditableInputSetterProps> = (props) => {
+export const EditableInputSetter: FC<EditableInputSetterProps> = props => {
   const { value, handleUpdateDsl, attrName, iconName } = props
   return (
     <div css={editableInputSetterStyle}>
@@ -22,7 +22,7 @@ export const EditableInputSetter: FC<EditableInputSetterProps> = (props) => {
           withoutNormalBorder
           borderColor="techPurple"
           value={value}
-          onChange={(value) => {
+          onChange={value => {
             handleUpdateDsl(attrName, value)
           }}
         />
diff --git a/apps/builder/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx b/apps/builder/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx
index d5a8bbcaca..853e0eb748 100644
--- a/apps/builder/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx
@@ -15,7 +15,7 @@ function getPath(attrName?: string, widgetDisplayName?: string) {
   }
 }
 
-export const OptionMappedInputSetter: FC<BaseInputSetterProps> = (props) => {
+export const OptionMappedInputSetter: FC<BaseInputSetterProps> = props => {
   const {
     isSetterSingleRow,
     placeholder,
diff --git a/apps/builder/src/page/App/components/PanelSetters/ListSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/ListSetter/index.tsx
index de95e92067..9a8abbda64 100644
--- a/apps/builder/src/page/App/components/PanelSetters/ListSetter/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/ListSetter/index.tsx
@@ -29,7 +29,7 @@ export const ListSetter: FC<ListSetterProps> = memo(
     const childrenSetterAttrPathMapDefaultValue = useMemo(() => {
       const childrenSetterAttrPathMap: Record<string, any> = {}
       if (childrenSetter) {
-        childrenSetter.forEach((childSetter) => {
+        childrenSetter.forEach(childSetter => {
           set(
             childrenSetterAttrPathMap,
             childSetter.attrName,
@@ -41,7 +41,7 @@ export const ListSetter: FC<ListSetterProps> = memo(
     }, [childrenSetter])
 
     const canReset = useMemo(() => {
-      return Object.keys(childrenSetterAttrPathMapDefaultValue).some((key) => {
+      return Object.keys(childrenSetterAttrPathMapDefaultValue).some(key => {
         const realValue = get(panelConfig, key)
         const defaultValue = get(childrenSetterAttrPathMapDefaultValue, key)
         return !isEqual(realValue, defaultValue)
@@ -49,7 +49,7 @@ export const ListSetter: FC<ListSetterProps> = memo(
     }, [childrenSetterAttrPathMapDefaultValue, panelConfig])
 
     const onClickReset = useCallback(() => {
-      Object.keys(childrenSetterAttrPathMapDefaultValue).forEach((key) => {
+      Object.keys(childrenSetterAttrPathMapDefaultValue).forEach(key => {
         const defaultValue = get(childrenSetterAttrPathMapDefaultValue, key)
         handleUpdateDsl(key, defaultValue)
       })
@@ -71,7 +71,7 @@ export const ListSetter: FC<ListSetterProps> = memo(
           )}
         </div>
         <div css={listWrapperStyle}>
-          {childrenSetter?.map((child) => {
+          {childrenSetter?.map(child => {
             return renderFieldAndLabel(child, widgetDisplayName ?? "", true, "")
           })}
         </div>
diff --git a/apps/builder/src/page/App/components/PanelSetters/MappedOptionSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/MappedOptionSetter/index.tsx
index a29f527e39..390eb16a64 100644
--- a/apps/builder/src/page/App/components/PanelSetters/MappedOptionSetter/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/MappedOptionSetter/index.tsx
@@ -4,7 +4,7 @@ import { listStyle, listWrapperStyle, optionListHeaderStyle } from "./style"
 import { renderFieldAndLabel } from "@/page/App/components/InspectPanel/utils/fieldFactory"
 import { useTranslation } from "react-i18next"
 
-export const MappedOptionSetter: FC<MappedOptionSetterProps> = (props) => {
+export const MappedOptionSetter: FC<MappedOptionSetterProps> = props => {
   const { attrName, labelName, childrenSetter, widgetDisplayName } = props
   const { t } = useTranslation()
 
@@ -14,7 +14,7 @@ export const MappedOptionSetter: FC<MappedOptionSetterProps> = (props) => {
         <div>{t(labelName)}</div>
       </div>
       <div css={listWrapperStyle}>
-        {childrenSetter?.map((child) => {
+        {childrenSetter?.map(child => {
           return renderFieldAndLabel(
             child,
             widgetDisplayName ?? "",
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/actionMenu.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/actionMenu.tsx
index 24c982eb41..8d938ada0e 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/actionMenu.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/actionMenu.tsx
@@ -7,7 +7,7 @@ import { OptionListSetterContext } from "@/page/App/components/PanelSetters/Opti
 
 const { Item } = DropList
 
-export const ActionMenu: FC<ActionMenuProps> = (props) => {
+export const ActionMenu: FC<ActionMenuProps> = props => {
   const { index, handleCloseMode } = props
   const { handleCopyOptionItem, handleDeleteOptionItem } = useContext(
     OptionListSetterContext,
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/context/optionListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/context/optionListContext.tsx
index 11ad14e846..a86b62448b 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/context/optionListContext.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/context/optionListContext.tsx
@@ -1,7 +1,7 @@
 import { createContext, ReactNode, FC, useCallback } from "react"
-import { OptionItemShape } from "@/page/App/components/PanelSetters/OptionListSetter/interface"
+import { OptionItemShape } from "../interface"
 import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
-import { generateOptionItemId } from "@/page/App/components/PanelSetters/OptionListSetter/utils/generateNewOptions"
+import { generateOptionItemId } from "../utils/generateNewOptions"
 
 interface ProviderProps {
   optionItems: OptionItemShape[]
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/dragIconAndLabel.tsx
index e581c605d4..323763be05 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/dragIconAndLabel.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/dragIconAndLabel.tsx
@@ -14,7 +14,7 @@ import { OptionListSetterContext } from "@/page/App/components/PanelSetters/Opti
 import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
 import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal"
 
-export const DragIconAndLabel: FC<DragIconAndLabelProps> = (props) => {
+export const DragIconAndLabel: FC<DragIconAndLabelProps> = props => {
   const { index } = props
   const [modalVisible, setModalVisible] = useState(false)
   const { widgetDisplayName, attrPath, childrenSetter } = useContext(
@@ -52,7 +52,7 @@ export const DragIconAndLabel: FC<DragIconAndLabelProps> = (props) => {
       showArrow={false}
       position="left"
       clickOutsideToClose
-      onVisibleChange={(visible) => {
+      onVisibleChange={visible => {
         setModalVisible(visible)
       }}
     >
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/index.tsx
index 24497c66da..f8c218c6ff 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/index.tsx
@@ -7,7 +7,7 @@ import { generateNewOptionItem } from "@/page/App/components/PanelSetters/Option
 import { OptionListSetterProvider } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext"
 import { useTranslation } from "react-i18next"
 
-export const OptionListSetter: FC<OptionListSetterProps> = (props) => {
+export const OptionListSetter: FC<OptionListSetterProps> = props => {
   const {
     attrName,
     handleUpdateDsl,
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/listItem.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/listItem.tsx
index 0c13eb03c4..fbb43b692c 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/listItem.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/listItem.tsx
@@ -7,7 +7,7 @@ import { DragIconAndLabel } from "@/page/App/components/PanelSetters/OptionListS
 import { More } from "@/page/App/components/PanelSetters/OptionListSetter/more"
 import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext"
 
-export const ListItem: FC<ListItemProps> = (props) => {
+export const ListItem: FC<ListItemProps> = props => {
   const { id, label, value, index } = props
 
   const { handleMoveOptionItem } = useContext(OptionListSetterContext)
diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/more.tsx b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/more.tsx
index 679912d6a4..c69eaed253 100644
--- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/more.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/more.tsx
@@ -4,7 +4,7 @@ import { MoreIcon } from "@illa-design/icon"
 import { ActionMenu } from "@/page/App/components/PanelSetters/OptionListSetter/actionMenu"
 import { MoreProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface"
 
-export const More: FC<MoreProps> = (props) => {
+export const More: FC<MoreProps> = props => {
   const { index } = props
 
   const [actionMenuVisible, setActionMenuVisible] = useState(false)
@@ -19,7 +19,7 @@ export const More: FC<MoreProps> = (props) => {
       }
       trigger="click"
       position="bottom-end"
-      onVisibleChange={(visible) => {
+      onVisibleChange={visible => {
         setActionMenuVisible(visible)
       }}
     >
diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/baseBody.tsx b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/baseBody.tsx
index 3aeb17a6fc..d76d84e7a5 100644
--- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/baseBody.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/baseBody.tsx
@@ -2,7 +2,7 @@ import { FC } from "react"
 import { listWrapperStyle } from "./style"
 import { BaseBodyProps } from "./interface"
 
-export const BaseModalBody: FC<BaseBodyProps> = (props) => {
+export const BaseModalBody: FC<BaseBodyProps> = props => {
   const { children } = props
 
   return <div css={listWrapperStyle}>{children}</div>
diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/body.tsx b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/body.tsx
index e722d60a6f..7fa1643294 100644
--- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/body.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/body.tsx
@@ -3,12 +3,12 @@ import { listWrapperStyle } from "./style"
 import { BodyProps } from "./interface"
 import { renderFieldAndLabel } from "@/page/App/components/InspectPanel/utils/fieldFactory"
 
-export const ModalBody: FC<BodyProps> = (props) => {
+export const ModalBody: FC<BodyProps> = props => {
   const { childrenSetter, widgetDisplayName, attrPath } = props
 
   return (
     <div css={listWrapperStyle}>
-      {childrenSetter?.map((child) => {
+      {childrenSetter?.map(child => {
         return renderFieldAndLabel(
           child,
           widgetDisplayName ?? "",
diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/header.tsx b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/header.tsx
index 7193da363f..e8e3dfcb54 100644
--- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/header.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/header.tsx
@@ -3,7 +3,7 @@ import { CloseIcon } from "@illa-design/icon"
 import { HeaderProps } from "./interface"
 import { FC } from "react"
 
-export const ModalHeader: FC<HeaderProps> = (props) => {
+export const ModalHeader: FC<HeaderProps> = props => {
   const { title, handleCloseModal } = props
 
   return (
diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx
index 47a2d05c68..e104c32f83 100644
--- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx
@@ -5,7 +5,7 @@ import { ModalBody } from "./body"
 import { ModalProps } from "./interface"
 import { css } from "@emotion/react"
 
-export const BaseModal: FC<ModalProps> = (props) => {
+export const BaseModal: FC<ModalProps> = props => {
   const {
     title,
     handleCloseModal,
diff --git a/apps/builder/src/page/App/components/PanelSetters/RadioGroupSetter/baseRadioGroup.tsx b/apps/builder/src/page/App/components/PanelSetters/RadioGroupSetter/baseRadioGroup.tsx
index 99f32b48d9..d3217dab2a 100644
--- a/apps/builder/src/page/App/components/PanelSetters/RadioGroupSetter/baseRadioGroup.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/RadioGroupSetter/baseRadioGroup.tsx
@@ -6,13 +6,13 @@ import {
   radioGroupStyle,
 } from "@/page/App/components/PanelSetters/RadioGroupSetter/style"
 
-export const BaseRadioGroupSetter: FC<BaseRadioGroupProps> = (props) => {
+export const BaseRadioGroupSetter: FC<BaseRadioGroupProps> = props => {
   const { value, options, isSetterSingleRow, attrName, handleUpdateDsl } = props
 
   return (
     <div css={applyRadioGroupWrapperStyle(isSetterSingleRow)}>
       <RadioGroup
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
         value={value}
diff --git a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventActionTypeSelect.tsx b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventActionTypeSelect.tsx
index a41e63ce78..256dced5ab 100644
--- a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventActionTypeSelect.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventActionTypeSelect.tsx
@@ -7,7 +7,7 @@ import { useSelector } from "react-redux"
 import { getWidgetExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
 import { getSelectedAction } from "@/redux/config/configSelector"
 
-export const EventActionTypeSelect: FC<BaseSelectSetterProps> = (props) => {
+export const EventActionTypeSelect: FC<BaseSelectSetterProps> = props => {
   const {
     isSetterSingleRow,
     attrName,
@@ -48,7 +48,7 @@ export const EventActionTypeSelect: FC<BaseSelectSetterProps> = (props) => {
         options={options}
         size="medium"
         value={value}
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(_finalAttrPath, {
             actionType: value,
             id: oldEvent?.id,
diff --git a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx
index 9f72767dc7..44e8bc6fc8 100644
--- a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx
@@ -7,7 +7,7 @@ import { getActionList } from "@/redux/currentApp/action/actionSelector"
 import { SelectedPanelContext } from "@/page/App/components/InspectPanel/context/selectedContext"
 import { getSelectedAction } from "@/redux/config/configSelector"
 
-export const EventTargetActionSelect: FC<BaseSelectSetterProps> = (props) => {
+export const EventTargetActionSelect: FC<BaseSelectSetterProps> = props => {
   const { isSetterSingleRow, attrName, handleUpdateDsl, value } = props
 
   const actionList = useSelector(getActionList)
@@ -24,13 +24,13 @@ export const EventTargetActionSelect: FC<BaseSelectSetterProps> = (props) => {
   const actionOptions = useMemo(() => {
     if (selectedContext.widgetOrAction === "ACTION") {
       return actionList
-        .filter((value) => {
+        .filter(value => {
           return value.displayName !== selectedAction?.displayName
         })
-        .map((item) => item.displayName)
+        .map(item => item.displayName)
     }
     if (selectedContext.widgetOrAction === "WIDGET") {
-      return actionList.map((item) => {
+      return actionList.map(item => {
         return item.displayName
       })
     }
@@ -43,7 +43,7 @@ export const EventTargetActionSelect: FC<BaseSelectSetterProps> = (props) => {
         options={actionOptions}
         size="medium"
         value={value}
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
       />
diff --git a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx
index 7de29b30f1..7529a028c2 100644
--- a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx
@@ -6,7 +6,7 @@ import { applyBaseSelectWrapperStyle } from "@/page/App/components/PanelSetters/
 import { getWidgetExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
 import { widgetBuilder } from "@/widgetLibrary/widgetBuilder"
 
-export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = (props) => {
+export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = props => {
   const {
     isSetterSingleRow,
     attrName,
@@ -20,7 +20,7 @@ export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = (props) => {
 
   const finalOptions = useMemo(() => {
     const tmpOptions: { label: string; value: string }[] = []
-    Object.keys(widgetDisplayNameMapProps).forEach((key) => {
+    Object.keys(widgetDisplayNameMapProps).forEach(key => {
       if (key !== widgetDisplayName) {
         const widgetType = widgetDisplayNameMapProps[key].$widgetType
         const widgetMethod =
@@ -34,23 +34,23 @@ export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = (props) => {
       }
     })
     return tmpOptions
-  }, [widgetDisplayNameMapProps])
+  }, [widgetDisplayName, widgetDisplayNameMapProps])
 
   const actionFinalValue = useMemo(() => {
-    const index = finalOptions.findIndex((option) => {
+    const index = finalOptions.findIndex(option => {
       return option.value === value
     })
     if (index !== -1) return value
     return undefined
-  }, [finalOptions, attrName, value])
+  }, [finalOptions, value])
 
   const widgetfinalValue = useMemo(() => {
-    const index = finalOptions.findIndex((option) => {
+    const index = finalOptions.findIndex(option => {
       return option.value === value
     })
     if (index !== -1) return value
     return undefined
-  }, [finalOptions, attrName])
+  }, [finalOptions, value])
 
   const finalValue =
     widgetOrAction === "WIDGET" ? widgetfinalValue : actionFinalValue
@@ -59,7 +59,7 @@ export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = (props) => {
     if (finalValue === undefined) {
       handleUpdateDsl(attrName, undefined)
     }
-  }, [finalValue, attrName])
+  }, [finalValue, attrName, handleUpdateDsl])
 
   return (
     <div css={applyBaseSelectWrapperStyle(isSetterSingleRow)}>
@@ -67,7 +67,7 @@ export const EventTargetWidgetSelect: FC<BaseSelectSetterProps> = (props) => {
         options={finalOptions}
         size="medium"
         value={finalValue}
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
       />
diff --git a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventWidgetMethodSelect.tsx b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventWidgetMethodSelect.tsx
index d7600db327..cc84876038 100644
--- a/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventWidgetMethodSelect.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/SelectSetter/eventWidgetMethodSelect.tsx
@@ -8,7 +8,7 @@ import { getWidgetExecutionResult } from "@/redux/currentApp/executionTree/execu
 import { widgetBuilder } from "@/widgetLibrary/widgetBuilder"
 import { getSelectedAction } from "@/redux/config/configSelector"
 
-export const EventWidgetMethodSelect: FC<BaseSelectSetterProps> = (props) => {
+export const EventWidgetMethodSelect: FC<BaseSelectSetterProps> = props => {
   const {
     isSetterSingleRow,
     attrName,
@@ -42,16 +42,16 @@ export const EventWidgetMethodSelect: FC<BaseSelectSetterProps> = (props) => {
   }, [widgetDisplayNameMapProps, selectedWidgetID])
   const finalOptions = useMemo(() => {
     let tmpOptions: string[] = []
-    const eventHandlerConfig =
-      widgetBuilder(selectedWidgetType)?.eventHandlerConfig
+    const eventHandlerConfig = widgetBuilder(selectedWidgetType)
+      ?.eventHandlerConfig
     if (eventHandlerConfig) {
       tmpOptions = eventHandlerConfig.methods
     }
     return tmpOptions
-  }, [selectedWidgetID, selectedWidgetType])
+  }, [selectedWidgetType])
 
   const finalValue = useMemo(() => {
-    const index = finalOptions.findIndex((option) => {
+    const index = finalOptions.findIndex(option => {
       return option === value
     })
     if (index !== -1 && selectedWidgetType !== undefined) return value
@@ -62,7 +62,7 @@ export const EventWidgetMethodSelect: FC<BaseSelectSetterProps> = (props) => {
     if (finalValue === undefined) {
       handleUpdateDsl(attrName, undefined)
     }
-  }, [attrName, finalValue])
+  }, [attrName, finalValue, handleUpdateDsl])
 
   return (
     <div css={applyBaseSelectWrapperStyle(isSetterSingleRow)}>
@@ -70,7 +70,7 @@ export const EventWidgetMethodSelect: FC<BaseSelectSetterProps> = (props) => {
         options={finalOptions}
         size="medium"
         value={finalValue}
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
       />
diff --git a/apps/builder/src/page/App/components/PanelSetters/SwitchSetter/baseSwitch.tsx b/apps/builder/src/page/App/components/PanelSetters/SwitchSetter/baseSwitch.tsx
index 600e31c91d..5676ebeecf 100644
--- a/apps/builder/src/page/App/components/PanelSetters/SwitchSetter/baseSwitch.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/SwitchSetter/baseSwitch.tsx
@@ -3,13 +3,13 @@ import { BaseSwitchProps } from "./interface"
 import { Switch } from "@illa-design/switch"
 import { dynamicWidthStyle } from "@/page/App/components/PanelSetters/style"
 
-export const BaseSwitchSetter: FC<BaseSwitchProps> = (props) => {
+export const BaseSwitchSetter: FC<BaseSwitchProps> = props => {
   const { value, attrName, handleUpdateDsl } = props
 
   return (
     <div css={dynamicWidthStyle}>
       <Switch
-        onChange={(value) => {
+        onChange={value => {
           handleUpdateDsl(attrName, value)
         }}
         checked={value}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/body.tsx
new file mode 100644
index 0000000000..aa8f99ae5a
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/body.tsx
@@ -0,0 +1,29 @@
+import { FC, useContext } from "react"
+import { ColumnItem } from "./columnItem"
+import { ColumnListSetterContext } from "./context/columnListContext"
+import { EmptyBody } from "./empty"
+
+export const ListBody: FC = () => {
+  const { columnItems } = useContext(ColumnListSetterContext)
+
+  if (!columnItems || !Array.isArray(columnItems) || columnItems.length === 0)
+    return <EmptyBody />
+
+  return (
+    <>
+      {columnItems.map((item, index) => {
+        const { label, value, header, accessorKey, visible } = item
+        return (
+          <ColumnItem
+            key={accessorKey}
+            accessorKey={accessorKey}
+            header={header}
+            value={value}
+            visible={visible}
+            index={index}
+          />
+        )
+      })}
+    </>
+  )
+}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/columnItem.tsx
new file mode 100644
index 0000000000..cfc986ed71
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/columnItem.tsx
@@ -0,0 +1,67 @@
+import { FC, useContext, useRef } from "react"
+import { DragItem, ColumnItemProps } from "./interface"
+import { useDrag, useDrop, XYCoord } from "react-dnd"
+import { Identifier } from "dnd-core"
+import { optionListItemStyle } from "./style"
+import { DragIconAndLabel } from "./dragIconAndLabel"
+import { ColumnListSetterContext } from "./context/columnListContext"
+
+export const ColumnItem: FC<ColumnItemProps> = (props) => {
+  const { accessorKey, header, value, visible, index } = props
+
+  const { handleMoveColumnItem } = useContext(ColumnListSetterContext)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
+    accept: "OPTION_ITEM",
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      }
+    },
+    hover(item: DragItem, monitor) {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+      if (dragIndex === hoverIndex) {
+        return
+      }
+      const hoverBoundingRect = ref.current?.getBoundingClientRect()
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+      const clientOffset = monitor.getClientOffset()
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+      handleMoveColumnItem(dragIndex, hoverIndex)
+      item.index = hoverIndex
+    },
+  })
+
+  const [{ isDragging }, drag] = useDrag({
+    type: "OPTION_ITEM",
+    item: () => {
+      return { accessorKey, index }
+    },
+    collect: (monitor: any) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  })
+
+  drag(drop(ref))
+  const opacity = isDragging ? 0 : 1
+
+  return (
+    <div ref={ref} style={{ opacity }}>
+      <div css={optionListItemStyle}>
+        <DragIconAndLabel index={index} label={header} visible={visible} />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext.tsx
new file mode 100644
index 0000000000..607b1f6a1e
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext.tsx
@@ -0,0 +1,90 @@
+import { createContext, ReactNode, FC, useCallback } from "react"
+import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
+import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface"
+import { generateColumnItemId } from "../utils/generateNewColumns"
+
+interface ProviderProps {
+  columnItems: ColumnItemShape[]
+  childrenSetter: PanelFieldConfig[]
+  widgetDisplayName: string
+  attrPath: string
+  handleUpdateDsl: (attrPath: string, value: any) => void
+  children: ReactNode
+}
+
+interface Inject extends Omit<ProviderProps, "children"> {
+  handleDeleteColumnItem: (index: number) => void
+  handleCopyColumnItem: (index: number) => void
+  handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void
+  handleUpdateItemVisible: (attrName: string, visible?: boolean) => void
+}
+
+export const ColumnListSetterContext = createContext<Inject>({} as Inject)
+
+export const ColumnsSetterProvider: FC<ProviderProps> = (props) => {
+  const { columnItems, attrPath, handleUpdateDsl } = props
+
+  const handleDeleteColumnItem = useCallback(
+    (index: number) => {
+      const updatedArray = columnItems.filter(
+        (optionItem: Record<string, any>, i: number) => {
+          return i !== index
+        },
+      )
+      handleUpdateDsl(attrPath, updatedArray)
+    },
+    [columnItems, handleUpdateDsl, attrPath],
+  )
+
+  const handleCopyColumnItem = useCallback(
+    (index: number) => {
+      let targetOptionItem = columnItems.find(
+        (optionItem: Record<string, any>, i: number) => {
+          return i === index
+        },
+      )
+      if (!targetOptionItem) return
+      targetOptionItem = {
+        ...targetOptionItem,
+        accessorKey: generateColumnItemId(),
+      }
+      const updatedArray = [...columnItems, targetOptionItem]
+      handleUpdateDsl(attrPath, updatedArray)
+    },
+    [columnItems, handleUpdateDsl, attrPath],
+  )
+
+  const handleMoveColumnItem = useCallback(
+    (dragIndex: number, hoverIndex: number) => {
+      const dragOptionItem = columnItems[dragIndex]
+      const newOptions = [...columnItems]
+      newOptions.splice(dragIndex, 1)
+      newOptions.splice(hoverIndex, 0, dragOptionItem)
+      handleUpdateDsl(attrPath, newOptions)
+    },
+    [attrPath, columnItems, handleUpdateDsl],
+  )
+
+  const handleUpdateItemVisible = useCallback(
+    (attrName: string, visible?: boolean) => {
+      handleUpdateDsl(attrName, visible)
+    },
+    [handleUpdateDsl],
+  )
+
+  const value = {
+    ...props,
+    handleDeleteColumnItem,
+    handleCopyColumnItem,
+    handleMoveColumnItem,
+    handleUpdateItemVisible,
+  }
+
+  return (
+    <ColumnListSetterContext.Provider value={value}>
+      {props.children}
+    </ColumnListSetterContext.Provider>
+  )
+}
+
+ColumnsSetterProvider.displayName = "ColumnsSetterProvider"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/dragIconAndLabel.tsx
new file mode 100644
index 0000000000..4f7b221276
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/dragIconAndLabel.tsx
@@ -0,0 +1,85 @@
+import { FC, useCallback, useContext, useState } from "react"
+import { useSelector } from "react-redux"
+import { useTranslation } from "react-i18next"
+import { DragPointIcon, EyeOffIcon, EyeOnIcon } from "@illa-design/icon"
+import { Trigger } from "@illa-design/trigger"
+import {
+  baseIconStyle,
+  dragItemStyle,
+  labelNameAndIconStyle,
+  labelNameWrapperStyle,
+  movableIconWrapperStyle,
+} from "./style"
+import { DragIconAndLabelProps } from "./interface"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal"
+import { ColumnListSetterContext } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext"
+
+export const DragIconAndLabel: FC<DragIconAndLabelProps> = (props) => {
+  const { index, label, visible } = props
+  const [modalVisible, setModalVisible] = useState(false)
+  const {
+    widgetDisplayName,
+    attrPath,
+    childrenSetter,
+    handleUpdateDsl,
+    handleUpdateItemVisible,
+  } = useContext(ColumnListSetterContext)
+
+  const { t } = useTranslation()
+  const executionResult = useSelector(getExecutionResult)
+
+  const handleCloseModal = useCallback(() => {
+    setModalVisible(false)
+  }, [])
+
+  return (
+    <Trigger
+      withoutPadding
+      colorScheme="white"
+      popupVisible={modalVisible}
+      content={
+        <BaseModal
+          title={label ?? ""}
+          handleCloseModal={handleCloseModal}
+          attrPath={`${attrPath}.${index}`}
+          widgetDisplayName={widgetDisplayName}
+          childrenSetter={childrenSetter}
+        />
+      }
+      trigger="click"
+      showArrow={false}
+      position="left"
+      clickOutsideToClose
+      onVisibleChange={(visible) => {
+        setModalVisible(visible)
+      }}
+    >
+      <div css={dragItemStyle}>
+        <div css={labelNameAndIconStyle}>
+          <span css={movableIconWrapperStyle} className="movableIconWrapper">
+            <DragPointIcon />
+          </span>
+          <span css={labelNameWrapperStyle}>
+            {label ||
+              t("editor.inspect.setter_content.option_list.list_no_label")}
+          </span>
+        </div>
+        <span
+          onClick={(event) => {
+            handleUpdateItemVisible(`${attrPath}.${index}.visible`, !visible)
+            event.stopPropagation()
+          }}
+        >
+          {visible ? (
+            <EyeOnIcon css={baseIconStyle} />
+          ) : (
+            <EyeOffIcon css={baseIconStyle} />
+          )}
+        </span>
+      </div>
+    </Trigger>
+  )
+}
+
+DragIconAndLabel.displayName = "DragIconAndLabel"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/empty.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/empty.tsx
new file mode 100644
index 0000000000..c26f593315
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/empty.tsx
@@ -0,0 +1,8 @@
+import { FC } from "react"
+import { emptyEmptyBodyStyle } from "./style"
+
+export const EmptyBody: FC = () => {
+  return <div css={emptyEmptyBodyStyle}>No columns</div>
+}
+
+EmptyBody.displayName = "ColumnsEmptyBody"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/header.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/header.tsx
new file mode 100644
index 0000000000..f58fd3f720
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/header.tsx
@@ -0,0 +1,17 @@
+import { FC } from "react"
+import { optionListHeaderStyle } from "./style"
+import { HeaderProps } from "./interface"
+import { useTranslation } from "react-i18next"
+
+export const OptionListHeader: FC<HeaderProps> = (props) => {
+  const { labelName } = props
+  const { t } = useTranslation()
+
+  return (
+    <div css={optionListHeaderStyle}>
+      <div>{labelName}</div>
+    </div>
+  )
+}
+
+OptionListHeader.displayName = "OptionListHeader"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/index.tsx
new file mode 100644
index 0000000000..742180fada
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/index.tsx
@@ -0,0 +1,66 @@
+import { FC, useCallback } from "react"
+import { ListBody } from "./body"
+import { ColumnListSetterProps } from "./interface"
+import {
+  addIconStyle,
+  columnLabelStyle,
+  headerActionButtonStyle,
+  ListStyle,
+  optionListHeaderStyle,
+} from "./style"
+import { generateNewColumnItem } from "./utils/generateNewColumns"
+import { ColumnsSetterProvider } from "./context/columnListContext"
+import { useTranslation } from "react-i18next"
+import { AddIcon } from "@illa-design/icon"
+
+export const ColumnSetter: FC<ColumnListSetterProps> = (props) => {
+  const {
+    attrName,
+    handleUpdateDsl,
+    value = [],
+    childrenSetter,
+    widgetDisplayName,
+  } = props
+
+  const { t } = useTranslation()
+
+  const handleAddOption = useCallback(() => {
+    const num = value.length + 1
+    const newItem = generateNewColumnItem(num)
+    handleUpdateDsl(attrName, [...value, newItem])
+  }, [value, attrName, handleUpdateDsl])
+
+  if (!Array.isArray(childrenSetter) || childrenSetter.length === 0) {
+    return null
+  }
+
+  return (
+    <ColumnsSetterProvider
+      childrenSetter={childrenSetter}
+      widgetDisplayName={widgetDisplayName}
+      columnItems={value}
+      attrPath={attrName}
+      handleUpdateDsl={handleUpdateDsl}
+    >
+      <div css={columnLabelStyle}>
+        <div>
+          {t("editor.inspect.setter_content.column_setter.label", {
+            number: value.length,
+          })}
+        </div>
+        <div css={headerActionButtonStyle} onClick={handleAddOption}>
+          <AddIcon _css={addIconStyle} />
+          <span>{t("editor.inspect.setter_content.column_setter.new")}</span>
+        </div>
+      </div>
+      <div css={ListStyle}>
+        <div css={optionListHeaderStyle}>
+          <div>{t("editor.inspect.setter_content.column_setter.title")}</div>
+        </div>
+        <ListBody />
+      </div>
+    </ColumnsSetterProvider>
+  )
+}
+
+ColumnSetter.displayName = "ColumnSetter"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/interface.ts
new file mode 100644
index 0000000000..1f8abf1502
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/interface.ts
@@ -0,0 +1,38 @@
+import { BaseSetter } from "@/page/App/components/PanelSetters/interface"
+import {
+  PanelFieldConfig,
+  PanelLabelProps,
+} from "@/page/App/components/InspectPanel/interface"
+import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface"
+import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter"
+
+export interface HeaderProps {
+  labelName: string
+  handleAddOption: () => void
+}
+
+export interface ColumnItemProps extends Omit<ColumnItemShape, "disabled"> {
+  index: number
+}
+
+export interface DragIconAndLabelProps {
+  index: number
+  label?: string
+  visible?: boolean
+}
+
+export interface ColumnListSetterProps extends BaseSetter {
+  value: ColumnItemShape[]
+  childrenSetter?: PanelFieldConfig[]
+}
+
+export interface DragItem {
+  index: number
+  id: string
+  type: string
+}
+
+export interface ActionMenuProps {
+  index: number
+  handleCloseMode: () => void
+}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/style.ts
new file mode 100644
index 0000000000..fd5965fd3f
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/style.ts
@@ -0,0 +1,113 @@
+import { css } from "@emotion/react"
+import { globalColor, illaPrefix } from "@illa-design/theme"
+import { publicPaddingStyle } from "@/page/App/components/InspectPanel/style"
+
+export const optionListHeaderStyle = css`
+  width: 100%;
+  background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  font-weight: 500;
+  box-sizing: border-box;
+  ${publicPaddingStyle}
+`
+
+export const headerActionButtonStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalColor(`--${illaPrefix}-purple-01`)};
+  cursor: pointer;
+  font-weight: 400;
+  margin: 0 8px;
+`
+
+export const columnLabelStyle = css`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 16px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+`
+
+export const addIconStyle = css`
+  margin-right: 4px;
+  font-size: 12px;
+`
+
+export const ListStyle = css`
+  border: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)};
+  margin: 0 16px;
+  border-radius: 8px;
+  overflow: hidden;
+`
+
+export const optionListItemStyle = css`
+  display: flex;
+  justify-content: space-between;
+  padding-right: 16px;
+  height: 40px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    .movableIconWrapper {
+      opacity: 1;
+    }
+  }
+`
+
+export const dragItemStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const labelNameAndIconStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+`
+
+export const labelNameWrapperStyle = css`
+  font-size: 14px;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+`
+
+export const movableIconWrapperStyle = css`
+  opacity: 0;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+`
+
+export const emptyEmptyBodyStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+`
+
+export const baseIconStyle = css`
+  font-size: 16px;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+  cursor: pointer;
+  :hover {
+    color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  }
+`
+
+export const eyeIconStyle = css`
+  visibility: hidden;
+  ${baseIconStyle}
+`
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/utils/generateNewColumns.ts
new file mode 100644
index 0000000000..f662604676
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/ColumnSetter/utils/generateNewColumns.ts
@@ -0,0 +1,17 @@
+import { v4 } from "uuid"
+import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface"
+
+export const generateColumnItemId = () => `column-${v4()}`
+
+export const generateNewColumnItem = (number: number): ColumnItemShape => {
+  const id = generateColumnItemId()
+  return {
+    header: `Column ${number}`,
+    id,
+    accessorKey: id,
+    enableSorting: true,
+    type: "text",
+    visible: true,
+    format: "YYYY-MM-DD",
+  }
+}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/columsSelectSetter.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/columsSelectSetter.tsx
new file mode 100644
index 0000000000..bca8371cbd
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/columsSelectSetter.tsx
@@ -0,0 +1,67 @@
+import { FC, useCallback, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { RootState } from "@/store"
+import { get } from "lodash"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { BaseSelectSetter } from "@/page/App/components/PanelSetters/SelectSetter/baseSelect"
+import { ColumnsSelectSetterProps, SelectOptions } from "./interface"
+import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface"
+
+export const ColumnsSelectSetter: FC<ColumnsSelectSetterProps> = (props) => {
+  const {
+    widgetDisplayName,
+    attrName,
+    isSetterSingleRow,
+    widgetOrAction,
+    widgetType,
+    expectedType,
+    allowClear,
+    value,
+    handleUpdateMultiAttrDSL,
+  } = props
+
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      const executionTree = getExecutionResult(rootState)
+      return get(executionTree, widgetDisplayName, {})
+    },
+  )
+
+  const options = useMemo(() => {
+    const columns = get(targetComponentProps, "columns", [])
+    const opt: SelectOptions = []
+    columns.map((item: ColumnItemShape) => {
+      opt.push({
+        value: item.accessorKey,
+        label: item.header,
+      })
+    })
+    return opt
+  }, [targetComponentProps])
+
+  const handleUpdateDsl = useCallback(
+    (attrName: string, newValue: any) => {
+      handleUpdateMultiAttrDSL?.({
+        [attrName]: newValue,
+      })
+    },
+    [handleUpdateMultiAttrDSL],
+  )
+
+  return (
+    <BaseSelectSetter
+      isSetterSingleRow={isSetterSingleRow}
+      options={options}
+      attrName={attrName}
+      handleUpdateDsl={handleUpdateDsl}
+      value={value}
+      expectedType={expectedType}
+      widgetDisplayName={widgetDisplayName}
+      widgetOrAction={widgetOrAction}
+      widgetType={widgetType}
+      allowClear={allowClear}
+    />
+  )
+}
+
+ColumnsSelectSetter.displayName = "ColumnsSelectSetter"
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/TableSetter/interface.ts
new file mode 100644
index 0000000000..96adb4ae1c
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/interface.ts
@@ -0,0 +1,17 @@
+import { BaseSetter } from "@/page/App/components/PanelSetters/interface"
+import { PanelLabelProps } from "@/page/App/components/InspectPanel/interface"
+import { BaseInputSetterProps } from "@/page/App/components/PanelSetters/InputSetter/interface"
+
+export type SelectOptions = (
+  | string
+  | number
+  | {
+      label: string
+      value: string | number
+    }
+)[]
+
+export interface ColumnsSelectSetterProps extends BaseSetter, PanelLabelProps {
+  allowClear?: boolean
+}
+export interface TableDataInputSetterProps extends BaseInputSetterProps {}
diff --git a/apps/builder/src/page/App/components/PanelSetters/TableSetter/tableDataInputSetter.tsx b/apps/builder/src/page/App/components/PanelSetters/TableSetter/tableDataInputSetter.tsx
new file mode 100644
index 0000000000..fdc4c7d44e
--- /dev/null
+++ b/apps/builder/src/page/App/components/PanelSetters/TableSetter/tableDataInputSetter.tsx
@@ -0,0 +1,73 @@
+import { FC, useCallback, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { RootState } from "@/store"
+import { get, isEqual } from "lodash"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { TableDataInputSetterProps } from "./interface"
+import { BaseInput } from "@/page/App/components/PanelSetters/InputSetter/baseInput"
+import { tansTableDataToColumns } from "@/widgetLibrary/TableWidget/utils"
+import { evaluateDynamicString } from "@/utils/evaluateDynamicString"
+import { BUILDER_CALC_CONTEXT } from "@/page/App/context/globalDataProvider"
+
+export const TableDataInputSetter: FC<TableDataInputSetterProps> = (props) => {
+  const {
+    widgetDisplayName,
+    attrName,
+    isSetterSingleRow,
+    widgetOrAction,
+    widgetType,
+    expectedType,
+    value,
+    placeholder,
+    isInList,
+    handleUpdateMultiAttrDSL,
+  } = props
+
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      const executionTree = getExecutionResult(rootState)
+      return get(executionTree, widgetDisplayName, {})
+    },
+  )
+
+  const columns = useMemo(() => {
+    return get(targetComponentProps, "columns", [])
+  }, [targetComponentProps])
+
+  const handleUpdateDsl = useCallback(
+    (attrName: string, newValue: any) => {
+      try {
+        const data = evaluateDynamicString("", newValue, BUILDER_CALC_CONTEXT)
+        let newColumns = tansTableDataToColumns(data)
+        if (!isEqual(newColumns, columns)) {
+          handleUpdateMultiAttrDSL?.({
+            columns: newColumns,
+            [attrName]: newValue,
+          })
+          return
+        }
+      } catch {}
+      handleUpdateMultiAttrDSL?.({
+        [attrName]: newValue,
+      })
+    },
+    [columns, handleUpdateMultiAttrDSL],
+  )
+
+  return (
+    <BaseInput
+      attrName={attrName}
+      handleUpdateDsl={handleUpdateDsl}
+      value={value}
+      placeholder={placeholder}
+      expectedType={expectedType}
+      widgetDisplayName={widgetDisplayName}
+      widgetOrAction={widgetOrAction}
+      widgetType={widgetType}
+      isInList={isInList}
+      isSetterSingleRow={isSetterSingleRow}
+    />
+  )
+}
+
+TableDataInputSetter.displayName = "TableDataInputSetter"
diff --git a/apps/builder/src/page/App/components/PanelSetters/index.tsx b/apps/builder/src/page/App/components/PanelSetters/index.tsx
index 7059bca73e..38e8489b41 100644
--- a/apps/builder/src/page/App/components/PanelSetters/index.tsx
+++ b/apps/builder/src/page/App/components/PanelSetters/index.tsx
@@ -22,6 +22,9 @@ import { ChartKeysSelectSetter } from "@/page/App/components/PanelSetters/ChartS
 import { ChartDatasetsSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartDatasetsSetter"
 import { ChartColorSelectSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartColorSelectSetter"
 import { ChartTypeSelectSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartTypeSelectSetter"
+import { ColumnSetter } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter"
+import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter"
+import { TableDataInputSetter } from "@/page/App/components/PanelSetters/TableSetter/tableDataInputSetter"
 
 const SetterTypeMapSetter = {
   INPUT_SETTER: BaseInput,
@@ -34,6 +37,9 @@ const SetterTypeMapSetter = {
   BASE_SELECT_SETTER: BaseSelectSetter,
   COLOR_PICKER_SETTER: ColorPickerSetter,
   OPTION_LIST_SETTER: OptionListSetter,
+  COLUMN_SETTER: ColumnSetter,
+  COLUMNS_SELECT_SETTER: ColumnsSelectSetter,
+  TABLE_DATA_INPUT_SETTER: TableDataInputSetter,
   OPTION_MAPPED_SETTER: MappedOptionSetter,
   EVENT_HANDLER_SETTER: EventHandlerSetter,
   EVENT_TARGET_SELECT_SETTER: EventTargetWidgetSelect,
diff --git a/apps/builder/src/page/App/components/ScaleSquare/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/index.tsx
index a1900d1036..2413eaff38 100644
--- a/apps/builder/src/page/App/components/ScaleSquare/index.tsx
+++ b/apps/builder/src/page/App/components/ScaleSquare/index.tsx
@@ -110,7 +110,7 @@ export const ScaleSquare = memo<ScaleSquareProps>((props: ScaleSquareProps) => {
   }, [componentNode.displayName, errors])
 
   const isSelected = useMemo(() => {
-    return selectedComponents.some(displayName => {
+    return selectedComponents.some((displayName) => {
       return displayName === componentNode.displayName
     })
   }, [componentNode.displayName, selectedComponents])
@@ -130,7 +130,7 @@ export const ScaleSquare = memo<ScaleSquareProps>((props: ScaleSquareProps) => {
         const currentSelectedDisplayName = cloneDeep(selectedComponents)
 
         const index = currentSelectedDisplayName.findIndex(
-          displayName => displayName === componentNode.displayName,
+          (displayName) => displayName === componentNode.displayName,
         )
         if (index !== -1) {
           currentSelectedDisplayName.splice(index, 1)
@@ -224,7 +224,7 @@ export const ScaleSquare = memo<ScaleSquareProps>((props: ScaleSquareProps) => {
           childrenNodes,
         }
       },
-      collect: monitor => {
+      collect: (monitor) => {
         return {
           isDragging: monitor.isDragging(),
         }
@@ -350,7 +350,7 @@ export const ScaleSquare = memo<ScaleSquareProps>((props: ScaleSquareProps) => {
         h: finalHeight,
       }
       const indexOfChildren = childNodesRef.current.findIndex(
-        node => node.displayName === newItem.displayName,
+        (node) => node.displayName === newItem.displayName,
       )
       const allChildrenNodes = [...childNodesRef.current]
 
diff --git a/apps/builder/src/page/App/components/ScaleSquare/moveBar.tsx b/apps/builder/src/page/App/components/ScaleSquare/moveBar.tsx
index 6d35cc8620..7f97773d59 100644
--- a/apps/builder/src/page/App/components/ScaleSquare/moveBar.tsx
+++ b/apps/builder/src/page/App/components/ScaleSquare/moveBar.tsx
@@ -9,7 +9,7 @@ import { DragIcon, WarningCircleIcon } from "@illa-design/icon"
 import { MoveBarProps } from "@/page/App/components/ScaleSquare/interface"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 
-export const MoveBar: FC<MoveBarProps> = (props) => {
+export const MoveBar: FC<MoveBarProps> = props => {
   const { displayName, isError, maxWidth, selected, isEditor } = props
   return (
     <div
diff --git a/apps/builder/src/page/App/context/globalDataProvider.tsx b/apps/builder/src/page/App/context/globalDataProvider.tsx
index 9bfaff7a1d..a56ccff47b 100644
--- a/apps/builder/src/page/App/context/globalDataProvider.tsx
+++ b/apps/builder/src/page/App/context/globalDataProvider.tsx
@@ -74,14 +74,14 @@ export const GlobalDataProvider: FC<Props> = ({ children }) => {
   })
 
   const handleUpdateGlobalData = useCallback((key: string, value: any) => {
-    setGlobalData((prevState) => ({
+    setGlobalData(prevState => ({
       ...prevState,
       [key]: value,
     }))
   }, [])
 
   const handleDeleteGlobalData = useCallback((key: string) => {
-    setGlobalData((prevState) => {
+    setGlobalData(prevState => {
       const newGlobalData = cloneDeep(prevState)
       unset(newGlobalData, key)
       return newGlobalData
diff --git a/apps/builder/src/page/App/index.tsx b/apps/builder/src/page/App/index.tsx
index 8e5393cfbf..2ce6362b52 100644
--- a/apps/builder/src/page/App/index.tsx
+++ b/apps/builder/src/page/App/index.tsx
@@ -14,7 +14,8 @@ import {
 import { Connection } from "@/api/ws"
 import { useDispatch, useSelector } from "react-redux"
 import {
-  isOpenBottomPanel, isOpenDebugger,
+  isOpenBottomPanel,
+  isOpenDebugger,
   isOpenLeftPanel,
   isOpenRightPanel,
 } from "@/redux/config/configSelector"
@@ -34,7 +35,7 @@ import { setupConfigListener } from "@/redux/config/configListener"
 import { useInitBuilderApp } from "@/hooks/useInitApp"
 import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener"
 import { Debugger } from "@/page/App/components/Debugger"
-import ComponentsManager from "@/page/App/components/ComponentManager"
+import { ComponentsManager } from "@/page/App/components/ComponentManager"
 
 export const Editor: FC = () => {
   const dispatch = useDispatch()
@@ -55,7 +56,7 @@ export const Editor: FC = () => {
     return () => {
       Connection.leaveRoom("app", appId ?? "")
     }
-  }, [currentUser])
+  }, [currentUser, appId])
 
   useEffect(() => {
     const subscriptions: Unsubscribe[] = [
@@ -89,7 +90,7 @@ export const Editor: FC = () => {
     return () => {
       controller.abort()
     }
-  }, [])
+  }, [dispatch])
 
   useEffect(() => {
     window.addEventListener("beforeunload", event => {
@@ -108,7 +109,9 @@ export const Editor: FC = () => {
             <DataWorkspace css={applyLeftPanelStyle(showLeftPanel)} />
             <div css={middlePanelStyle}>
               <CanvasPanel css={centerPanelStyle} />
-              <ActionEditor css={applyBottomPanelStyle(showBottomPanel && !showDebugger)} />
+              <ActionEditor
+                css={applyBottomPanelStyle(showBottomPanel && !showDebugger)}
+              />
               <Debugger css={applyBottomPanelStyle(showDebugger)} />
             </div>
             <ComponentsManager css={applyRightPanelStyle(showRightPanel)} />
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/index.tsx b/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
index 6a35f144b0..6b693a8d7f 100644
--- a/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
@@ -59,7 +59,7 @@ export const DashboardApps: FC = () => {
             data={appsList}
             bordered={false}
             hoverable={true}
-            render={(item) => {
+            render={item => {
               return (
                 <ListItem
                   css={hoverStyle}
@@ -78,7 +78,7 @@ export const DashboardApps: FC = () => {
                 </ListItem>
               )
             }}
-            renderKey={(item) => {
+            renderKey={item => {
               return item.appId
             }}
           />
@@ -87,7 +87,7 @@ export const DashboardApps: FC = () => {
       </div>
       <CreateNewModal
         visible={createNewModalVisible}
-        onVisibleChange={(visible) => {
+        onVisibleChange={visible => {
           setCreateNewModalVisible(visible)
         }}
       />
diff --git a/apps/builder/src/page/Dashboard/DashboardResources/index.tsx b/apps/builder/src/page/Dashboard/DashboardResources/index.tsx
index 6f85084917..4c7907049f 100644
--- a/apps/builder/src/page/Dashboard/DashboardResources/index.tsx
+++ b/apps/builder/src/page/Dashboard/DashboardResources/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from "react"
+import { FC, useMemo, useState } from "react"
 import { useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 import { Button } from "@illa-design/button"
@@ -6,6 +6,7 @@ import { Empty } from "@illa-design/empty"
 import { Table } from "@illa-design/table"
 import {
   MysqlResource,
+  PostgreSqlResource,
   Resource,
   ResourceContent,
   ResourceListState,
@@ -26,25 +27,9 @@ import { Space } from "@illa-design/space"
 import { getIconFromResourceType } from "@/page/App/components/Actions/getIcon"
 import { DashboardResourceItemMenu } from "@/page/Dashboard/components/DashboardResourceItemMenu"
 import { fromNow } from "@/utils/dayjs"
-import { ResourceEditor } from "@/page/Dashboard/components/ResourceEditor"
 import { CellContext } from "@tanstack/table-core"
-
-function getDbName(resourceType: string): string {
-  let name = ""
-  switch (resourceType) {
-    case "mysql":
-      return "Mysql"
-    case "restapi":
-      return "RestApi"
-    case "mongodb":
-      return "MongoDb"
-    case "redis":
-      return "Redis"
-    case "postgresql":
-      return "PostgreSql"
-  }
-  return name
-}
+import { ResourceGenerator } from "@/page/Dashboard/components/ResourceGenerator"
+import { getResourceNameFromResourceType } from "@/utils/actionResourceTransformer"
 
 export const DashboardResources: FC = () => {
   const { t } = useTranslation()
@@ -53,17 +38,15 @@ export const DashboardResources: FC = () => {
 
   const [newResourceVisible, setNewResourceVisible] = useState(false)
 
-  const resourceData: ResourceTableData[] = resourcesList.map(
-    (resource: Resource<ResourceContent>) => {
+  const resourceData: ResourceTableData[] = useMemo(() => {
+    return resourcesList.map((resource: Resource<ResourceContent>) => {
       let dbName = "Null"
       switch (resource.resourceType) {
         case "restapi":
           break
-        case "mongodb":
-          break
-        case "redis":
-          break
         case "postgresql":
+          dbName = (resource as Resource<PostgreSqlResource>).content
+            .databaseName
           break
         case "mysql":
           dbName = (resource as Resource<MysqlResource>).content.databaseName
@@ -72,59 +55,64 @@ export const DashboardResources: FC = () => {
       return {
         id: resource.resourceId,
         name: resource.resourceName,
-        type: getDbName(resource.resourceType),
+        resourceType: resource.resourceType,
+        type: getResourceNameFromResourceType(resource.resourceType),
         databaseName: dbName,
         created: resource.createdAt,
       } as ResourceTableData
-    },
-  )
+    })
+  }, [resourcesList])
 
-  const columns: ColumnDef<ResourceTableData, string>[] = [
-    {
-      header: t("dashboard.resource.resource_name"),
-      accessorKey: "name",
-      cell: (props: CellContext<ResourceTableData, string>) => {
-        const type = resourcesList[props.row.index].resourceType
-        return (
-          <Space size="8px">
-            {getIconFromResourceType(type, "24px")}
-            <span css={applyTableTextStyle(true)}>{props.getValue()}</span>
-          </Space>
-        )
+  const columns: ColumnDef<ResourceTableData, string>[] = useMemo(() => {
+    return [
+      {
+        header: t("dashboard.resource.resource_name"),
+        accessorKey: "name",
+        cell: (props: CellContext<ResourceTableData, string>) => {
+          const type = props.row.original.resourceType
+          return (
+            <Space size="8px" alignItems="center" direction="horizontal">
+              {getIconFromResourceType(type, "24px")}
+              <span css={applyTableTextStyle(true)}>{props.getValue()}</span>
+            </Space>
+          )
+        },
+      },
+      {
+        header: t("dashboard.resource.resource_type"),
+        accessorKey: "type",
+        cell: (props: CellContext<ResourceTableData, string>) => (
+          <span css={applyTableTextStyle(false)}>{props.getValue()}</span>
+        ),
+      },
+      {
+        header: t("dashboard.resource.dbname"),
+        accessorKey: "databaseName",
+        cell: (props: CellContext<ResourceTableData, string>) => (
+          <span css={applyTableTextStyle(props.getValue() !== "Null")}>
+            {props.getValue()}
+          </span>
+        ),
+      },
+      {
+        header: t("dashboard.resource.created"),
+        accessorKey: "created",
+        cell: (props: CellContext<ResourceTableData, string>) => (
+          <span css={applyTableTextStyle(true)}>
+            {fromNow(props.getValue())}
+          </span>
+        ),
+      },
+      {
+        header: "",
+        enableSorting: false,
+        accessorKey: "id",
+        cell: (props: CellContext<ResourceTableData, string>) => (
+          <DashboardResourceItemMenu resourceId={props.getValue()} />
+        ),
       },
-    },
-    {
-      header: t("dashboard.resource.resource_type"),
-      accessorKey: "type",
-      cell: (props: CellContext<ResourceTableData, string>) => (
-        <span css={applyTableTextStyle(false)}>{props.getValue()}</span>
-      ),
-    },
-    {
-      header: t("dashboard.resource.dbname"),
-      accessorKey: "databaseName",
-      cell: (props: CellContext<ResourceTableData, string>) => (
-        <span css={applyTableTextStyle(props.getValue() !== "Null")}>
-          {props.getValue()}
-        </span>
-      ),
-    },
-    {
-      header: t("dashboard.resource.created"),
-      accessorKey: "created",
-      cell: (props: CellContext<ResourceTableData, string>) => (
-        <span css={applyTableTextStyle(true)}>{fromNow(props.getValue())}</span>
-      ),
-    },
-    {
-      header: "",
-      enableSorting: false,
-      accessorKey: "id",
-      cell: (props: CellContext<ResourceTableData, string>) => (
-        <DashboardResourceItemMenu resourceId={props.getValue()} />
-      ),
-    },
-  ]
+    ]
+  }, [resourcesList, t])
 
   return (
     <>
@@ -152,9 +140,8 @@ export const DashboardResources: FC = () => {
         ) : null}
         {!resourcesList?.length ? <Empty paddingVertical="120px" /> : null}
       </div>
-      <ResourceEditor
+      <ResourceGenerator
         visible={newResourceVisible}
-        edit={false}
         onClose={() => {
           setNewResourceVisible(false)
         }}
diff --git a/apps/builder/src/page/Dashboard/DashboardResources/interface.ts b/apps/builder/src/page/Dashboard/DashboardResources/interface.ts
index 949ba3f311..a3f5681c22 100644
--- a/apps/builder/src/page/Dashboard/DashboardResources/interface.ts
+++ b/apps/builder/src/page/Dashboard/DashboardResources/interface.ts
@@ -1,6 +1,7 @@
 import { ResourceType } from "@/redux/resource/resourceState"
 
 export interface ResourceTableData {
+  resourceType: ResourceType
   id: string
   name: string
   type: ResourceType
diff --git a/apps/builder/src/page/Dashboard/components/CreateNewModal/index.tsx b/apps/builder/src/page/Dashboard/components/CreateNewModal/index.tsx
index 8e4a66874e..a0c2bb7fd5 100644
--- a/apps/builder/src/page/Dashboard/components/CreateNewModal/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/CreateNewModal/index.tsx
@@ -10,7 +10,7 @@ import { Api } from "@/api/base"
 import { dashboardAppActions } from "@/redux/dashboard/apps/dashboardAppSlice"
 import { useNavigate } from "react-router-dom"
 
-export const CreateNewModal: FC<CreateNewModalProps> = (props) => {
+export const CreateNewModal: FC<CreateNewModalProps> = props => {
   const { visible, onVisibleChange } = props
 
   const { t } = useTranslation()
@@ -49,7 +49,7 @@ export const CreateNewModal: FC<CreateNewModalProps> = (props) => {
               appName: name,
             },
           },
-          (response) => {
+          response => {
             dispatch(
               dashboardAppActions.addDashboardAppReducer({
                 app: response.data,
@@ -57,12 +57,12 @@ export const CreateNewModal: FC<CreateNewModalProps> = (props) => {
             )
             navigate(`/app/${response.data.appId}`)
           },
-          (failure) => {},
-          (error) => {},
-          (loading) => {
+          failure => {},
+          error => {},
+          loading => {
             setLoading(loading)
           },
-          (errorState) => {
+          errorState => {
             if (errorState) {
               Message.error({ content: t("create_fail") })
             }
@@ -74,7 +74,7 @@ export const CreateNewModal: FC<CreateNewModalProps> = (props) => {
     >
       <Input
         borderColor="techPurple"
-        onChange={(res) => {
+        onChange={res => {
           setName(res)
         }}
       />
diff --git a/apps/builder/src/page/Dashboard/components/DashboardItemMenu/index.tsx b/apps/builder/src/page/Dashboard/components/DashboardItemMenu/index.tsx
index 5339111736..c07417e0de 100644
--- a/apps/builder/src/page/Dashboard/components/DashboardItemMenu/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/DashboardItemMenu/index.tsx
@@ -20,7 +20,7 @@ import { useNavigate } from "react-router-dom"
 
 const Item = DropList.Item
 
-export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
+export const DashboardItemMenu: FC<DashboardItemMenuProps> = props => {
   const { appId } = props
 
   const { t } = useTranslation()
@@ -29,7 +29,7 @@ export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
 
   const app = useSelector((state: RootState) => {
     return state.dashboard.dashboardApps.list.find(
-      (item) => item.appId === appId,
+      item => item.appId === appId,
     )!!
   })
 
@@ -38,7 +38,13 @@ export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
 
   return (
     <>
-      <Space direction="horizontal" w="100%" justifyContent="end" size="4px">
+      <Space
+        direction="horizontal"
+        w="100%"
+        justifyContent="end"
+        size="4px"
+        alignItems="center"
+      >
         <Button
           css={buttonVisibleStyle}
           className="dashboardAppEditButton"
@@ -90,7 +96,7 @@ export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
                           url: `/apps/${appId}`,
                           method: "DELETE",
                         },
-                        (response) => {
+                        response => {
                           dispatch(
                             dashboardAppActions.removeDashboardAppReducer(
                               response.data.appId,
@@ -98,10 +104,10 @@ export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
                           )
                           Message.success(t("dashboard.app.trash_success"))
                         },
-                        (failure) => {
+                        failure => {
                           Message.success(t("dashboard.app.trash_failure"))
                         },
-                        (crash) => {
+                        crash => {
                           Message.error(t("network_error"))
                         },
                       )
@@ -122,14 +128,14 @@ export const DashboardItemMenu: FC<DashboardItemMenuProps> = (props) => {
       <RenameModal
         appId={app.appId}
         visible={renameVisible}
-        onVisibleChange={(visible) => {
+        onVisibleChange={visible => {
           setRenameVisible(visible)
         }}
       />
       <DuplicateModal
         appId={app.appId}
         visible={duplicateVisible}
-        onVisibleChange={(visible) => {
+        onVisibleChange={visible => {
           setDuplicateVisible(visible)
         }}
       />
diff --git a/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/index.tsx b/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/index.tsx
index d242d86743..398480ac5c 100644
--- a/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/index.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 import { DashboardResourceItemMenuProps } from "@/page/Dashboard/components/DashboardResourceItemMenu/interface"
 import { Dropdown, DropList } from "@illa-design/dropdown"
@@ -13,13 +13,13 @@ import { resourceActions } from "@/redux/resource/resourceSlice"
 import { Message } from "@illa-design/message"
 import { Space } from "@illa-design/space"
 import { buttonVisibleStyle } from "@/page/Dashboard/components/DashboardResourceItemMenu/style"
-import { ResourceEditor } from "@/page/Dashboard/components/ResourceEditor"
+import { ResourceCreator } from "@/page/Dashboard/components/ResourceGenerator/ResourceCreator"
+import { RootState } from "@/store"
+import { getResourceNameFromResourceType } from "@/utils/actionResourceTransformer"
 
 const Item = DropList.Item
 
-export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = (
-  props,
-) => {
+export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = props => {
   const { resourceId } = props
 
   const { t } = useTranslation()
@@ -28,9 +28,13 @@ export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = (
   const [confirmLoading, setConfirmLoading] = useState(false)
   const [resourceEditorVisible, setResourceEditorVisible] = useState(false)
 
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(item => item.resourceId === resourceId)!!
+  })
+
   return (
     <>
-      <Space direction="horizontal" w="100%" justifyContent="end" size="4px">
+      <Space direction="horizontal" w="100%" align="end" size="4px">
         <Button
           css={buttonVisibleStyle}
           className="dashboardResourceEditButton"
@@ -70,13 +74,13 @@ export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = (
                     },
                     closable: false,
                     onOk: () => {
-                      return new Promise((resolve) => {
+                      return new Promise(resolve => {
                         Api.request<Resource<ResourceContent>>(
                           {
                             url: `/resources/${resourceId}`,
                             method: "DELETE",
                           },
-                          (response) => {
+                          response => {
                             dispatch(
                               resourceActions.removeResourceItemReducer(
                                 response.data.resourceId,
@@ -87,15 +91,15 @@ export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = (
                             )
                             resolve("finish")
                           },
-                          (failure) => {
+                          failure => {
                             Message.error(t("dashboard.resource.delete_fail"))
                             resolve("finish")
                           },
-                          (crash) => {
+                          crash => {
                             Message.error(t("network_error"))
                             resolve("finish")
                           },
-                          (loading) => {
+                          loading => {
                             setConfirmLoading(loading)
                           },
                         )
@@ -114,14 +118,28 @@ export const DashboardResourceItemMenu: FC<DashboardResourceItemMenuProps> = (
           />
         </Dropdown>
       </Space>
-      <ResourceEditor
+      <Modal
+        w="696px"
         visible={resourceEditorVisible}
-        edit={true}
-        resourceId={resourceId}
-        onClose={() => {
+        footer={false}
+        closable
+        withoutLine
+        withoutPadding
+        title={getResourceNameFromResourceType(resource.resourceType)}
+        onCancel={() => {
           setResourceEditorVisible(false)
         }}
-      />
+      >
+        <ResourceCreator
+          resourceId={resourceId}
+          onBack={() => {
+            setResourceEditorVisible(false)
+          }}
+          onFinished={() => {
+            setResourceEditorVisible(false)
+          }}
+        />
+      </Modal>
     </>
   )
 }
diff --git a/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/interface.ts b/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/interface.ts
index 66afd95143..92aa08acff 100644
--- a/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/interface.ts
+++ b/apps/builder/src/page/Dashboard/components/DashboardResourceItemMenu/interface.ts
@@ -1,5 +1,3 @@
-import { Resource, ResourceContent } from "@/redux/resource/resourceState"
-
 export interface DashboardResourceItemMenuProps {
   resourceId: string
 }
diff --git a/apps/builder/src/page/Dashboard/components/DashboardTitleBar/index.tsx b/apps/builder/src/page/Dashboard/components/DashboardTitleBar/index.tsx
index 83c05ee34f..334f95cb14 100644
--- a/apps/builder/src/page/Dashboard/components/DashboardTitleBar/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/DashboardTitleBar/index.tsx
@@ -26,7 +26,7 @@ import { getCurrentUser } from "@/redux/currentUser/currentUserSelector"
 const SettingTrigger: FC<{
   avatarBgColor: string
   avatarText: string
-}> = (props) => {
+}> = props => {
   const { avatarBgColor, avatarText } = props
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -126,7 +126,7 @@ export const DashboardTitleBar: FC = () => {
       withoutContent
       colorScheme="grayBlue"
       size="large"
-      onChange={(key) => {
+      onChange={key => {
         switch (key) {
           case "apps":
             navigate("./apps")
@@ -137,7 +137,7 @@ export const DashboardTitleBar: FC = () => {
         }
       }}
     >
-      {tabs.map((item) => {
+      {tabs.map(item => {
         return <TabPane title={item.title} key={item.key} />
       })}
     </Tabs>
diff --git a/apps/builder/src/page/Dashboard/components/DuplicateModal/index.tsx b/apps/builder/src/page/Dashboard/components/DuplicateModal/index.tsx
index 792b69736d..3012e9a195 100644
--- a/apps/builder/src/page/Dashboard/components/DuplicateModal/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/DuplicateModal/index.tsx
@@ -11,13 +11,11 @@ import { Api } from "@/api/base"
 import { DashboardApp } from "@/redux/dashboard/apps/dashboardAppState"
 import { dashboardAppActions } from "@/redux/dashboard/apps/dashboardAppSlice"
 
-export const DuplicateModal: FC<DuplicateModalProps> = (props) => {
+export const DuplicateModal: FC<DuplicateModalProps> = props => {
   const { appId, visible, onVisibleChange } = props
 
   const app = useSelector((state: RootState) => {
-    return state.dashboard.dashboardApps.list.find(
-      (item) => item.appId === appId,
-    )
+    return state.dashboard.dashboardApps.list.find(item => item.appId === appId)
   })!!
 
   const appList = useSelector(getDashboardApps)
@@ -48,7 +46,7 @@ export const DuplicateModal: FC<DuplicateModalProps> = (props) => {
           Message.error(t("dashboard.app.name_empty"))
           return
         }
-        if (appList.some((item) => item.appName === name)) {
+        if (appList.some(item => item.appName === name)) {
           Message.error(t("dashboard.app.name_existed"))
           return
         }
@@ -60,7 +58,7 @@ export const DuplicateModal: FC<DuplicateModalProps> = (props) => {
               appName: name,
             },
           },
-          (response) => {
+          response => {
             dispatch(
               dashboardAppActions.addDashboardAppReducer({
                 app: response.data,
@@ -68,13 +66,13 @@ export const DuplicateModal: FC<DuplicateModalProps> = (props) => {
             )
             onVisibleChange(false)
           },
-          (failure) => {
+          failure => {
             Message.error(t("dashboard.app.duplicate_fail"))
           },
-          (crash) => {
+          crash => {
             Message.error(t("network_error"))
           },
-          (loading) => {
+          loading => {
             setLoading(loading)
           },
         )
@@ -85,7 +83,7 @@ export const DuplicateModal: FC<DuplicateModalProps> = (props) => {
     >
       <Input
         borderColor="techPurple"
-        onChange={(res) => {
+        onChange={res => {
           setName(res)
         }}
         placeholder={`${t("dashboard.app.duplicate_placeholder")}`}
diff --git a/apps/builder/src/page/Dashboard/components/RenameModal/index.tsx b/apps/builder/src/page/Dashboard/components/RenameModal/index.tsx
index b45cf0c4c1..bffbc4d4d5 100644
--- a/apps/builder/src/page/Dashboard/components/RenameModal/index.tsx
+++ b/apps/builder/src/page/Dashboard/components/RenameModal/index.tsx
@@ -10,13 +10,11 @@ import { Api } from "@/api/base"
 import { dashboardAppActions } from "@/redux/dashboard/apps/dashboardAppSlice"
 import { getDashboardApps } from "@/redux/dashboard/apps/dashboardAppSelector"
 
-export const RenameModal: FC<RenameModalProps> = (props) => {
+export const RenameModal: FC<RenameModalProps> = props => {
   const { appId, visible, onVisibleChange } = props
 
   const app = useSelector((state: RootState) => {
-    return state.dashboard.dashboardApps.list.find(
-      (item) => item.appId === appId,
-    )
+    return state.dashboard.dashboardApps.list.find(item => item.appId === appId)
   })!!
 
   const appList = useSelector(getDashboardApps)
@@ -49,7 +47,7 @@ export const RenameModal: FC<RenameModalProps> = (props) => {
           Message.error(t("dashboard.app.name_empty"))
           return
         }
-        if (appList.some((item) => item.appName === name)) {
+        if (appList.some(item => item.appName === name)) {
           Message.error(t("dashboard.app.name_existed"))
           return
         }
@@ -61,7 +59,7 @@ export const RenameModal: FC<RenameModalProps> = (props) => {
               appName: name,
             },
           },
-          (response) => {
+          response => {
             dispatch(
               dashboardAppActions.renameDashboardAppReducer({
                 appId: app.appId,
@@ -71,13 +69,13 @@ export const RenameModal: FC<RenameModalProps> = (props) => {
             Message.success(t("dashboard.app.rename_success"))
             onVisibleChange(false)
           },
-          (failure) => {
+          failure => {
             Message.error(t("dashboard.app.rename_fail"))
           },
-          (crash) => {
+          crash => {
             Message.error(t("network_error"))
           },
-          (loading) => {
+          loading => {
             setLoading(loading)
           },
         )
@@ -88,7 +86,7 @@ export const RenameModal: FC<RenameModalProps> = (props) => {
         placeholder={app?.appName}
         autoFocus
         defaultValue={app?.appName}
-        onChange={(name) => {
+        onChange={name => {
           setName(name)
         }}
       />
diff --git a/apps/builder/src/page/Dashboard/components/ResourceEditor/index.tsx b/apps/builder/src/page/Dashboard/components/ResourceEditor/index.tsx
deleted file mode 100644
index 6d673d9775..0000000000
--- a/apps/builder/src/page/Dashboard/components/ResourceEditor/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { FC, useEffect, useState } from "react"
-import { Modal } from "@illa-design/modal"
-import { ActionType } from "@/redux/currentApp/action/actionState"
-import { ActionGeneratorProps } from "@/page/App/components/Actions/ActionGenerator/interface"
-import { ActionTypeCategory } from "@/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface"
-import { ActionTypeSelector } from "@/page/App/components/Actions/ActionGenerator/ActionTypeSelector"
-import { ActionResourceCreator } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator"
-
-export type ActionEditorSteps =
-  | "select-type"
-  | "resource-create"
-  | "resource-edit"
-
-export const ResourceEditor: FC<ActionGeneratorProps> = function(props) {
-  const { edit, resourceId, visible, onClose } = props
-  const [step, setStep] = useState<ActionEditorSteps>("select-type")
-  const [actionType, setResourceType] = useState<ActionType>()
-  const [category, setCategory] = useState<ActionTypeCategory>()
-
-  useEffect(() => {
-    if (edit) {
-      setStep("resource-edit")
-    } else {
-      setStep("select-type")
-    }
-  }, [visible])
-
-  return (
-    <Modal
-      w="696px"
-      visible={visible}
-      footer={false}
-      closable
-      withoutPadding
-      onCancel={onClose}
-    >
-      {step === "select-type" ? (
-        <ActionTypeSelector
-          onSelect={info => {
-            const { category, actionType } = info
-            setCategory(category)
-            switch (category) {
-              case "apis":
-              case "databases": {
-                setResourceType(actionType)
-                setStep("resource-create")
-                break
-              }
-            }
-          }}
-        />
-      ) : step === "resource-edit" ? (
-        <ActionResourceCreator
-          resourceId={resourceId}
-          category={category}
-          onCreated={onClose}
-        />
-      ) : (
-        <ActionResourceCreator
-          category={category}
-          resourceType={actionType}
-          onBack={() => {
-            setStep("select-type")
-          }}
-          onCreated={onClose}
-        />
-      )}
-    </Modal>
-  )
-}
-
-ResourceEditor.displayName = "ResourceEditor"
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/index.tsx b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/index.tsx
new file mode 100644
index 0000000000..8714316108
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/index.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react"
+import { applyItemStyle, comingStyle, nameStyle } from "./style"
+import { ResourceCardSelectorProps } from "./interface"
+import { getIconFromResourceType } from "@/page/App/components/Actions/getIcon"
+import { getResourceNameFromResourceType } from "@/utils/actionResourceTransformer"
+import { useTranslation } from "react-i18next"
+
+export const ResourceCard: FC<ResourceCardSelectorProps> = props => {
+  const { resourceType, onSelect, isDraft } = props
+
+  const { t } = useTranslation()
+
+  return (
+    <div
+      css={applyItemStyle(isDraft)}
+      onClick={() => {
+        if (!isDraft) {
+          onSelect?.(resourceType)
+        }
+      }}
+    >
+      {getIconFromResourceType(resourceType, "24px")}
+      <span css={nameStyle}>
+        {getResourceNameFromResourceType(resourceType)}
+      </span>
+      {isDraft && (
+        <span css={comingStyle}>
+          {t("editor.action.resource.label.coming_soon")}
+        </span>
+      )}
+    </div>
+  )
+}
+
+ResourceCard.displayName = "ResourceCard"
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/interface.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/interface.ts
new file mode 100644
index 0000000000..db55d08337
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/interface.ts
@@ -0,0 +1,6 @@
+import { ResourceType } from "@/redux/resource/resourceState"
+import { ResourceDataItem } from "../config"
+
+export interface ResourceCardSelectorProps extends ResourceDataItem {
+  onSelect?: (item: ResourceType) => void
+}
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/style.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/style.ts
new file mode 100644
index 0000000000..980c0ded77
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCard/style.ts
@@ -0,0 +1,56 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/theme"
+
+export function applyItemStyle(isDraft: boolean): SerializedStyles {
+  const draftStyle = isDraft
+    ? css`
+        pointer-events: auto;
+        cursor: not-allowed;
+      `
+    : css``
+
+  const hoverStyle = isDraft
+    ? css``
+    : css`
+        &:hover {
+          box-shadow: 0 4px 10px 0
+            ${globalColor(`--${illaPrefix}-blackAlpha-07`)};
+          background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)};
+          border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)};
+        }
+      `
+
+  return css`
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 0;
+    border-radius: 8px;
+    border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)};
+    position: relative;
+    display: flex;
+    background-color: ${globalColor(`--${illaPrefix}-white-01`)};
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    ${hoverStyle};
+    ${draftStyle};
+  `
+}
+
+export const nameStyle = css`
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+`
+
+export const comingStyle = css`
+  position: absolute;
+  border-radius: 0 0 4px 4px;
+  padding: 0 8px;
+  top: 0;
+  height: 16px;
+  background-color: ${getColor("techPurple", "07")};
+  font-size: 10px;
+  color: ${getColor("techPurple", "02")};
+`
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/index.tsx b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/index.tsx
new file mode 100644
index 0000000000..9a7bb7d647
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/index.tsx
@@ -0,0 +1,66 @@
+import { FC } from "react"
+import { ResourceCreatorProps } from "@/page/Dashboard/components/ResourceGenerator/ResourceCreator/interface"
+import { MysqlLikeConfigElement } from "@/page/App/components/Actions/MysqlLikeConfigElement"
+import { useSelector } from "react-redux"
+import { RootState } from "@/store"
+import { RestApiConfigElement } from "@/page/App/components/Actions/RestApiConfigElement"
+import { PostgreConfigElement } from "@/page/App/components/Actions/PostgreConfigElement"
+import { RedisConfigElement } from "@/page/App/components/Actions/RedisConfigElement"
+
+export const ResourceCreator: FC<ResourceCreatorProps> = props => {
+  const { resourceType, resourceId, onBack, onFinished } = props
+  const resource = useSelector((state: RootState) => {
+    return state.resource.find(r => r.resourceId === resourceId)
+  })
+
+  const finalResourceType = resource ? resource.resourceType : resourceType
+
+  switch (finalResourceType) {
+    case "tidb":
+    case "mariadb":
+    case "mysql":
+      return (
+        <MysqlLikeConfigElement
+          resourceType={finalResourceType}
+          resourceId={resourceId}
+          onBack={() => {
+            onBack("select")
+          }}
+          onFinished={onFinished}
+        />
+      )
+    case "restapi":
+      return (
+        <RestApiConfigElement
+          resourceId={resourceId}
+          onBack={() => {
+            onBack("select")
+          }}
+          onFinished={onFinished}
+        />
+      )
+    case "mongodb":
+      break
+    case "redis":
+      return (
+        <RedisConfigElement
+          resourceId={resourceId}
+          onBack={() => {
+            onBack("select")
+          }}
+          onFinished={onFinished}
+        />
+      )
+    case "postgresql":
+      return (
+        <PostgreConfigElement
+          resourceId={resourceId}
+          onBack={() => {
+            onBack("select")
+          }}
+          onFinished={onFinished}
+        />
+      )
+  }
+  return null
+}
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/interface.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/interface.ts
new file mode 100644
index 0000000000..667cb77476
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/interface.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from "@/redux/resource/resourceState"
+import { ResourceCreatorPage } from "@/page/Dashboard/components/ResourceGenerator/interface"
+
+export interface ResourceCreatorProps {
+  resourceId?: string
+  resourceType?: ResourceType
+  onBack: (page: ResourceCreatorPage) => void
+  onFinished: (resourceId: string) => void
+}
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/style.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceCreator/style.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/index.tsx b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/index.tsx
new file mode 100644
index 0000000000..cb08e88ee9
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/index.tsx
@@ -0,0 +1,32 @@
+import { FC } from "react"
+import { ResourceTypeSelectorProps } from "./interface"
+import { categoryStyle, containerStyle, resourceListStyle } from "./style"
+import { ResourceTypeList } from "@/page/Dashboard/components/ResourceGenerator/config"
+import { ResourceCard } from "@/page/Dashboard/components/ResourceGenerator/ResourceCard"
+
+export const ResourceTypeSelector: FC<ResourceTypeSelectorProps> = props => {
+  const { onSelect } = props
+
+  return (
+    <div css={containerStyle}>
+      {ResourceTypeList.map(({ title, item, category }) => (
+        <div key={category}>
+          <span css={categoryStyle}>{title}</span>
+          <div css={resourceListStyle}>
+            {item.map(prop => (
+              <ResourceCard
+                key={prop.resourceType}
+                onSelect={item => {
+                  onSelect(item)
+                }}
+                {...prop}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+ResourceTypeSelector.displayName = "ResourceTypeSelector"
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/interface.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/interface.ts
new file mode 100644
index 0000000000..33ec1d1823
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/interface.ts
@@ -0,0 +1,5 @@
+import { ResourceType } from "@/redux/resource/resourceState"
+
+export interface ResourceTypeSelectorProps {
+  onSelect: (item: ResourceType) => void
+}
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/style.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/style.ts
new file mode 100644
index 0000000000..b16cbf30c5
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector/style.ts
@@ -0,0 +1,27 @@
+import { css } from "@emotion/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/theme"
+
+export const containerStyle = css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 0 24px 16px 24px;
+`
+
+export const categoryStyle = css`
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+`
+
+export const resourceListStyle = css`
+  padding: 8px 0;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+`
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/config.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/config.ts
new file mode 100644
index 0000000000..c1a237e5fa
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/config.ts
@@ -0,0 +1,82 @@
+import i18n from "@/i18n/config"
+import { ResourceType } from "@/redux/resource/resourceState"
+
+export interface ResourceDataItem {
+  resourceType: ResourceType
+  isDraft: boolean
+}
+
+export const Databases: ResourceDataItem[] = [
+  {
+    resourceType: "postgresql",
+    isDraft: false,
+  },
+  {
+    resourceType: "mysql",
+    isDraft: false,
+  },
+  {
+    resourceType: "mariadb",
+    isDraft: false,
+  },
+  {
+    resourceType: "tidb",
+    isDraft: true,
+  },
+  {
+    resourceType: "redis",
+    isDraft: true,
+  },
+  {
+    resourceType: "mongodb",
+    isDraft: true,
+  },
+  {
+    resourceType: "elastic",
+    isDraft: true,
+  },
+  {
+    resourceType: "snowflake",
+    isDraft: true,
+  },
+]
+
+export const Apis: ResourceDataItem[] = [
+  {
+    resourceType: "restapi",
+    isDraft: false,
+  },
+  {
+    resourceType: "graphql",
+    isDraft: true,
+  },
+  {
+    resourceType: "s3",
+    isDraft: true,
+  },
+  {
+    resourceType: "zapier",
+    isDraft: true,
+  },
+  {
+    resourceType: "datadog",
+    isDraft: true,
+  },
+  {
+    resourceType: "smtp",
+    isDraft: true,
+  },
+]
+
+export const ResourceTypeList = [
+  {
+    title: i18n.t("editor.action.type.database"),
+    item: Databases,
+    category: "databases" as const,
+  },
+  {
+    title: i18n.t("editor.action.type.api"),
+    item: Apis,
+    category: "apis" as const,
+  },
+]
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/index.tsx b/apps/builder/src/page/Dashboard/components/ResourceGenerator/index.tsx
new file mode 100644
index 0000000000..02e41c2214
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/index.tsx
@@ -0,0 +1,76 @@
+import { FC, useState } from "react"
+import {
+  ResourceCreatorPage,
+  ResourceGeneratorProps,
+} from "@/page/Dashboard/components/ResourceGenerator/interface"
+import { Modal } from "@illa-design/modal"
+import { useTranslation } from "react-i18next"
+import { ResourceType } from "@/redux/resource/resourceState"
+import { ResourceTypeSelector } from "@/page/Dashboard/components/ResourceGenerator/ResourceTypeSelector"
+import { ResourceCreator } from "@/page/Dashboard/components/ResourceGenerator/ResourceCreator"
+import { getResourceNameFromResourceType } from "@/utils/actionResourceTransformer"
+
+export const ResourceGenerator: FC<ResourceGeneratorProps> = props => {
+  const { visible, onClose } = props
+  const [currentStep, setCurrentStep] = useState<ResourceCreatorPage>("select")
+
+  const [currentResource, setCurrentResource] = useState<ResourceType | null>(
+    null,
+  )
+
+  const { t } = useTranslation()
+
+  let title
+  switch (currentStep) {
+    case "select":
+      title = t("editor.action.form.title.select")
+      break
+    case "createResource":
+      if (currentResource != null) {
+        title = getResourceNameFromResourceType(currentResource)
+      }
+      break
+  }
+
+  return (
+    <Modal
+      w="696px"
+      visible={visible}
+      footer={false}
+      closable
+      withoutLine
+      withoutPadding
+      title={title}
+      onCancel={() => {
+        onClose()
+        setCurrentStep("select")
+        setCurrentResource(null)
+      }}
+    >
+      {currentStep === "select" && (
+        <ResourceTypeSelector
+          onSelect={resourceType => {
+            setCurrentStep("createResource")
+            setCurrentResource(resourceType)
+          }}
+        />
+      )}
+      {currentStep === "createResource" && currentResource != null && (
+        <ResourceCreator
+          onBack={() => {
+            setCurrentStep("select")
+            setCurrentResource(null)
+          }}
+          onFinished={() => {
+            setCurrentStep("select")
+            setCurrentResource(null)
+            onClose()
+          }}
+          resourceType={currentResource}
+        />
+      )}
+    </Modal>
+  )
+}
+
+ResourceGenerator.displayName = "ResourceGenerator"
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/interface.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/interface.ts
new file mode 100644
index 0000000000..d782080a0e
--- /dev/null
+++ b/apps/builder/src/page/Dashboard/components/ResourceGenerator/interface.ts
@@ -0,0 +1,6 @@
+export interface ResourceGeneratorProps {
+  visible: boolean
+  onClose: () => void
+}
+
+export type ResourceCreatorPage = "select" | "createResource"
diff --git a/apps/builder/src/page/Dashboard/components/ResourceGenerator/style.ts b/apps/builder/src/page/Dashboard/components/ResourceGenerator/style.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/builder/src/page/Dashboard/index.tsx b/apps/builder/src/page/Dashboard/index.tsx
index 98222dae6d..03332f1543 100644
--- a/apps/builder/src/page/Dashboard/index.tsx
+++ b/apps/builder/src/page/Dashboard/index.tsx
@@ -85,7 +85,7 @@ export const IllaApp: FC = () => {
     return () => {
       controller.abort()
     }
-  }, [])
+  }, [dispatch])
 
   useEffect(() => {
     Connection.enterRoom(
diff --git a/apps/builder/src/page/Deploy/index.tsx b/apps/builder/src/page/Deploy/index.tsx
index 457b9d025e..1fb512d97d 100644
--- a/apps/builder/src/page/Deploy/index.tsx
+++ b/apps/builder/src/page/Deploy/index.tsx
@@ -21,7 +21,7 @@ export const Deploy: FC = () => {
     const subscriptions: Unsubscribe[] = [
       setupExecutionListeners(startAppListening),
     ]
-    return () => subscriptions.forEach((unsubscribe) => unsubscribe())
+    return () => subscriptions.forEach(unsubscribe => unsubscribe())
   }, [])
   return (
     <div css={deployContainerStyle}>
diff --git a/apps/builder/src/page/Setting/Components/LabelAndSetter/index.tsx b/apps/builder/src/page/Setting/Components/LabelAndSetter/index.tsx
index d513b4e3b9..e51a25f30b 100644
--- a/apps/builder/src/page/Setting/Components/LabelAndSetter/index.tsx
+++ b/apps/builder/src/page/Setting/Components/LabelAndSetter/index.tsx
@@ -9,7 +9,7 @@ import {
   publicLabelAndInputWrapperStyle,
 } from "@/page/Setting/Components/LabelAndSetter/style"
 
-export const LabelAndSetter: FC<LabelAndSetterProps> = (props) => {
+export const LabelAndSetter: FC<LabelAndSetterProps> = props => {
   const { children, errorMessage, label } = props
   return (
     <div css={publicLabelAndInputWrapperStyle}>
diff --git a/apps/builder/src/page/Setting/Components/Layout/index.tsx b/apps/builder/src/page/Setting/Components/Layout/index.tsx
index faee0dca76..5c2e91316d 100644
--- a/apps/builder/src/page/Setting/Components/Layout/index.tsx
+++ b/apps/builder/src/page/Setting/Components/Layout/index.tsx
@@ -4,7 +4,7 @@ import {
   layoutWrapperStyle,
 } from "@/page/Setting/Components/Layout/style"
 
-export const SettingLayout: FC = (props) => {
+export const SettingLayout: FC = props => {
   const { children } = props
   return (
     <div css={layoutWrapperStyle}>
diff --git a/apps/builder/src/page/Setting/Components/label.tsx b/apps/builder/src/page/Setting/Components/label.tsx
index bd6c9bccc2..436d9156d5 100644
--- a/apps/builder/src/page/Setting/Components/label.tsx
+++ b/apps/builder/src/page/Setting/Components/label.tsx
@@ -5,7 +5,7 @@ import {
   labelStyles,
 } from "@/page/Setting/Components/style"
 
-export const SettingLabel: FC<LabelProps> = (props) => {
+export const SettingLabel: FC<LabelProps> = props => {
   const { label, extInfo } = props
 
   return (
diff --git a/apps/builder/src/page/Setting/SettingAccount/index.tsx b/apps/builder/src/page/Setting/SettingAccount/index.tsx
index 793d045dac..2d4e3c32f2 100644
--- a/apps/builder/src/page/Setting/SettingAccount/index.tsx
+++ b/apps/builder/src/page/Setting/SettingAccount/index.tsx
@@ -1,5 +1,4 @@
 import { FC, useCallback, useEffect, useState } from "react"
-import { debounce } from "lodash"
 import { useDispatch, useSelector } from "react-redux"
 import { getCurrentUser } from "@/redux/currentUser/currentUserSelector"
 import { useTranslation } from "react-i18next"
@@ -50,43 +49,6 @@ export const SettingAccount: FC = () => {
     },
     [checkUserNameValidate],
   )
-
-  const handleSubmit = useCallback(
-    debounce(() => {
-      if (!!errorMessage) {
-        return
-      }
-      Api.request<CurrentUser>(
-        {
-          url: "/users/nickname",
-          method: "PATCH",
-          data: {
-            nickname: nickNameValue,
-          },
-        },
-        (response) => {
-          dispatch(
-            currentUserActions.updateCurrentUserReducer({
-              ...response.data,
-              nickname: response.data.nickname,
-            }),
-          )
-          Message.success("success!")
-        },
-        (failure) => {
-          Message.error(t("setting.account.save_fail"))
-        },
-        (crash) => {
-          Message.error(t("network_error"))
-        },
-        (loading) => {
-          setIsLoading(loading)
-        },
-      )
-    }, 300),
-    [errorMessage, nickNameValue],
-  )
-
   return (
     <>
       <LabelAndSetter errorMessage="" label={t("setting.account.email")}>
@@ -118,7 +80,38 @@ export const SettingAccount: FC = () => {
           fullWidth
           disabled={!!errorMessage}
           loading={isLoading}
-          onClick={handleSubmit}
+          onClick={() => {
+            if (!!errorMessage) {
+              return
+            }
+            Api.request<CurrentUser>(
+              {
+                url: "/users/nickname",
+                method: "PATCH",
+                data: {
+                  nickname: nickNameValue,
+                },
+              },
+              (response) => {
+                dispatch(
+                  currentUserActions.updateCurrentUserReducer({
+                    ...response.data,
+                    nickname: response.data.nickname,
+                  }),
+                )
+                Message.success("success!")
+              },
+              (failure) => {
+                Message.error(t("setting.account.save_fail"))
+              },
+              (crash) => {
+                Message.error(t("network_error"))
+              },
+              (loading) => {
+                setIsLoading(loading)
+              },
+            )
+          }}
           colorScheme="techPurple"
         >
           {t("setting.account.save")}
diff --git a/apps/builder/src/page/Setting/SettingOthers/index.tsx b/apps/builder/src/page/Setting/SettingOthers/index.tsx
index c5255248c7..1643f0d624 100644
--- a/apps/builder/src/page/Setting/SettingOthers/index.tsx
+++ b/apps/builder/src/page/Setting/SettingOthers/index.tsx
@@ -48,13 +48,13 @@ export const SettingOthers: FC = () => {
           language: languageValue,
         },
       },
-      (response) => {
+      response => {
         localStorage.setItem("i18nextLng", languageValue)
         window.location.reload()
       },
-      (failure) => {},
-      (crash) => {},
-      (loading) => {
+      failure => {},
+      crash => {},
+      loading => {
         setIsLoading(loading)
       },
     )
diff --git a/apps/builder/src/page/Setting/SettingPassword/index.tsx b/apps/builder/src/page/Setting/SettingPassword/index.tsx
index c904f6f564..310f6fd0d8 100644
--- a/apps/builder/src/page/Setting/SettingPassword/index.tsx
+++ b/apps/builder/src/page/Setting/SettingPassword/index.tsx
@@ -29,16 +29,21 @@ const validateConfirmationAndNewEqual = (
 export const SettingPassword: FC = () => {
   const { t } = useTranslation()
   const [currentPassword, setCurrentPassword] = useState<string>("")
-  const [currentPasswordErrorMessage, setCurrentPasswordErrorMessage] =
-    useState<string>("")
+  const [
+    currentPasswordErrorMessage,
+    setCurrentPasswordErrorMessage,
+  ] = useState<string>("")
 
   const [newPassword, setNewPassword] = useState<string>("")
-  const [newPasswordErrorMessage, setNewPasswordErrorMessage] =
-    useState<string>("")
+  const [newPasswordErrorMessage, setNewPasswordErrorMessage] = useState<
+    string
+  >("")
 
   const [confirmPassword, setConfirmPassword] = useState<string>("")
-  const [confirmPasswordErrorMessage, setConfirmPasswordErrorMessage] =
-    useState("")
+  const [
+    confirmPasswordErrorMessage,
+    setConfirmPasswordErrorMessage,
+  ] = useState("")
 
   const [isLoading, setIsLoading] = useState(false)
 
@@ -150,23 +155,23 @@ export const SettingPassword: FC = () => {
           newPassword,
         },
       },
-      (response) => {
+      response => {
         setCurrentPassword("")
         setNewPassword("")
         setConfirmPassword("")
         Message.success(t("edit_success"))
       },
-      (failure) => {
+      failure => {
         //  TODO: need error code unique,to show error message
         const { data } = failure
         if (data?.errorCode === 400) {
           Message.error(failure.data.errorMessage)
         }
       },
-      (crash) => {
+      crash => {
         Message.error(t("network_error"))
       },
-      (loading) => {
+      loading => {
         setIsLoading(loading)
       },
     )
diff --git a/apps/builder/src/page/Setting/tabPanel.tsx b/apps/builder/src/page/Setting/tabPanel.tsx
index a738759b47..08a358cc31 100644
--- a/apps/builder/src/page/Setting/tabPanel.tsx
+++ b/apps/builder/src/page/Setting/tabPanel.tsx
@@ -67,7 +67,7 @@ export const SettingTabNavBar: FC = () => {
         colorScheme="grayBlue"
         size="large"
         withoutContent
-        onChange={(key) => {
+        onChange={key => {
           switch (key) {
             case "account":
               navigate("./account")
@@ -81,7 +81,7 @@ export const SettingTabNavBar: FC = () => {
           }
         }}
       >
-        {TabItems.map((item) => (
+        {TabItems.map(item => (
           <TabPane title={item.title} key={item.key}></TabPane>
         ))}
       </Tabs>
diff --git a/apps/builder/src/page/User/Login/index.tsx b/apps/builder/src/page/User/Login/index.tsx
index 6d44628a54..829a93edc1 100644
--- a/apps/builder/src/page/User/Login/index.tsx
+++ b/apps/builder/src/page/User/Login/index.tsx
@@ -42,10 +42,10 @@ export const Login: FC = () => {
   } = useForm<LoginFields>({
     mode: "onSubmit",
   })
-  const onSubmit: SubmitHandler<LoginFields> = (data) => {
+  const onSubmit: SubmitHandler<LoginFields> = data => {
     Api.request<CurrentUser>(
       { method: "POST", url: "/auth/signin", data },
-      (res) => {
+      res => {
         const token = res.headers["illa-token"]
         if (!token) return
         setLocalStorage("token", token, -1)
@@ -62,7 +62,7 @@ export const Login: FC = () => {
         })
         Message.success(t("user.sign_in.tips.success"))
       },
-      (res) => {
+      res => {
         Message.error(t("user.sign_in.tips.fail"))
         switch (res.data.errorMessage) {
           case "no such user":
@@ -83,7 +83,7 @@ export const Login: FC = () => {
       () => {
         Message.warning(t("network_error"))
       },
-      (loading) => {
+      loading => {
         setSubmitLoading(loading)
       },
     )
@@ -170,7 +170,7 @@ export const Login: FC = () => {
               render={({ field }) => (
                 <Password
                   {...field}
-                  onChange={(event) => {
+                  onChange={event => {
                     field.onChange(event)
                     if (errorMsg.password !== "") {
                       setErrorMsg({ ...errorMsg, password: "" })
diff --git a/apps/builder/src/page/User/Register/index.tsx b/apps/builder/src/page/User/Register/index.tsx
index 399bf5bc68..dbd530bb87 100644
--- a/apps/builder/src/page/User/Register/index.tsx
+++ b/apps/builder/src/page/User/Register/index.tsx
@@ -223,6 +223,7 @@ export const Register: FC = () => {
                 <Input
                   {...field}
                   borderColor="techPurple"
+                  maxLength={6}
                   onChange={(value, event) => {
                     field.onChange(event)
                     if (errorMsg.verificationCode !== "") {
diff --git a/apps/builder/src/page/User/ResetPassword/index.tsx b/apps/builder/src/page/User/ResetPassword/index.tsx
index 83ed83f168..a15254619e 100644
--- a/apps/builder/src/page/User/ResetPassword/index.tsx
+++ b/apps/builder/src/page/User/ResetPassword/index.tsx
@@ -38,7 +38,7 @@ export const ResetPassword: FC = () => {
   } = useForm<ResetPwdFields>({
     mode: "onSubmit",
   })
-  const onSubmit: SubmitHandler<ResetPwdFields> = (data) => {
+  const onSubmit: SubmitHandler<ResetPwdFields> = data => {
     Api.request(
       {
         method: "POST",
@@ -52,7 +52,7 @@ export const ResetPassword: FC = () => {
         navigate("/user/login")
         Message.success(t("user.forgot_password.tips.success"))
       },
-      (res) => {
+      res => {
         Message.error(t("user.forgot_password.tips.fail"))
         switch (res.data.errorMessage) {
           case "no such user":
@@ -75,7 +75,7 @@ export const ResetPassword: FC = () => {
       () => {
         Message.warning(t("network_error"))
       },
-      (loading) => {
+      loading => {
         setSubmitLoading(loading)
       },
     )
@@ -177,7 +177,7 @@ export const ResetPassword: FC = () => {
                                   usage: "forgetpwd",
                                 },
                               },
-                              (res) => {
+                              res => {
                                 Message.success(
                                   t(
                                     "user.forgot_password.tips.verification_code",
diff --git a/apps/builder/src/page/User/components/TextLink/index.tsx b/apps/builder/src/page/User/components/TextLink/index.tsx
index 6409cf1b7f..6a526386fe 100644
--- a/apps/builder/src/page/User/components/TextLink/index.tsx
+++ b/apps/builder/src/page/User/components/TextLink/index.tsx
@@ -2,12 +2,12 @@ import { FC } from "react"
 import { TextLinkProps } from "./interface"
 import { textLinkStyle } from "./style"
 
-export const TextLink: FC<TextLinkProps> = (props) => {
+export const TextLink: FC<TextLinkProps> = props => {
   const { onClick, children, ...rest } = props
   return (
     <span
       css={textLinkStyle}
-      onClick={(e) => {
+      onClick={e => {
         e.stopPropagation()
         onClick?.()
       }}
diff --git a/apps/builder/src/page/status/500/index.tsx b/apps/builder/src/page/status/500/index.tsx
index 376bf0b126..e2e86375ac 100644
--- a/apps/builder/src/page/status/500/index.tsx
+++ b/apps/builder/src/page/status/500/index.tsx
@@ -4,7 +4,6 @@ import { Result500Icon } from "@illa-design/icon"
 import { buttonStyle, iconStyle } from "@/page/status/style"
 import { Button } from "@illa-design/button"
 import { useNavigate } from "react-router-dom"
-import i18n from "@/i18n/config"
 import { useTranslation } from "react-i18next"
 
 export const Page500: FC = () => {
diff --git a/apps/builder/src/page/status/errorPage.tsx b/apps/builder/src/page/status/errorPage.tsx
index db890df37f..e991c3c283 100644
--- a/apps/builder/src/page/status/errorPage.tsx
+++ b/apps/builder/src/page/status/errorPage.tsx
@@ -2,7 +2,7 @@ import { FC } from "react"
 import { ErrorPageProps } from "@/page/status/interface"
 import { errorPageStyle } from "@/page/status/style"
 
-export const ErrorPage: FC<ErrorPageProps> = (props) => {
+export const ErrorPage: FC<ErrorPageProps> = props => {
   const { title, des, img, children } = props
   return (
     <div css={errorPageStyle}>
diff --git a/apps/builder/src/redux/config/configListener.ts b/apps/builder/src/redux/config/configListener.ts
index 60a8d1571c..206d19c1b7 100644
--- a/apps/builder/src/redux/config/configListener.ts
+++ b/apps/builder/src/redux/config/configListener.ts
@@ -8,7 +8,7 @@ async function handleUpdateSelectedActionExecution(
 ) {
   const resource = store
     .getState()
-    .resource.find((r) => r.resourceId === action.payload.resourceId)
+    .resource.find(r => r.resourceId === action.payload.resourceId)
   if (resource != null) {
     store.dispatch(
       configActions.updateCacheActionContent({
@@ -41,6 +41,6 @@ export function setupConfigListener(
   ]
 
   return () => {
-    subscriptions.forEach((unsubscribe) => unsubscribe())
+    subscriptions.forEach(unsubscribe => unsubscribe())
   }
 }
diff --git a/apps/builder/src/redux/config/configPayload.ts b/apps/builder/src/redux/config/configPayload.ts
index 0d29b4883b..18e95bb14a 100644
--- a/apps/builder/src/redux/config/configPayload.ts
+++ b/apps/builder/src/redux/config/configPayload.ts
@@ -1,5 +1,5 @@
-import { Params } from "@/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/interface"
 import { ActionContent } from "@/redux/currentApp/action/actionState"
+import { Params } from "../resource/resourceState"
 
 export interface CacheContentPayload {
   resourceType: string
diff --git a/apps/builder/src/redux/config/configReducer.ts b/apps/builder/src/redux/config/configReducer.ts
index 37a5d7c102..ab02de1474 100644
--- a/apps/builder/src/redux/config/configReducer.ts
+++ b/apps/builder/src/redux/config/configReducer.ts
@@ -322,6 +322,6 @@ export const removeExpandedKey: CaseReducer<
   ConfigState,
   PayloadAction<string>
 > = (state, action) => {
-  const index = state.expandedKeys.findIndex(key => key === action.payload)
+  const index = state.expandedKeys.findIndex((key) => key === action.payload)
   index > -1 && state.expandedKeys.splice(index, 1)
 }
diff --git a/apps/builder/src/redux/config/configSelector.ts b/apps/builder/src/redux/config/configSelector.ts
index 749e238b2a..b830951c89 100644
--- a/apps/builder/src/redux/config/configSelector.ts
+++ b/apps/builder/src/redux/config/configSelector.ts
@@ -42,7 +42,7 @@ export const getSelectedAction = (state: RootState) => {
 
 export const isSelected = (state: RootState, displayName: string) => {
   return (
-    state.config.selectedComponents.findIndex(value => {
+    state.config.selectedComponents.findIndex((value) => {
       return value == displayName
     }) != -1
   )
diff --git a/apps/builder/src/redux/config/configSlice.ts b/apps/builder/src/redux/config/configSlice.ts
index a7ace9707b..eb0a2dae69 100644
--- a/apps/builder/src/redux/config/configSlice.ts
+++ b/apps/builder/src/redux/config/configSlice.ts
@@ -18,7 +18,8 @@ import {
   removeSelectedApiUrlParams,
   setExpandedKey,
   updateBottomPanel,
-  updateCacheActionContent, updateDebuggerVisible,
+  updateCacheActionContent,
+  updateDebuggerVisible,
   updateIllaMode,
   updateLeftPanel,
   updateRightPanel,
diff --git a/apps/builder/src/redux/currentApp/action/actionSelector.ts b/apps/builder/src/redux/currentApp/action/actionSelector.ts
index c696079920..8d869c1dcf 100644
--- a/apps/builder/src/redux/currentApp/action/actionSelector.ts
+++ b/apps/builder/src/redux/currentApp/action/actionSelector.ts
@@ -7,7 +7,7 @@ export const getActionItemByDisplayName = (
   displayName: string,
 ) => {
   const actionList = getActionList(state)
-  return actionList.find((item) => {
+  return actionList.find(item => {
     return item.displayName === displayName
   })
 }
diff --git a/apps/builder/src/redux/currentApp/action/actionState.ts b/apps/builder/src/redux/currentApp/action/actionState.ts
index b555f857f6..3a4314744b 100644
--- a/apps/builder/src/redux/currentApp/action/actionState.ts
+++ b/apps/builder/src/redux/currentApp/action/actionState.ts
@@ -1,9 +1,7 @@
-import { MysqlAction } from "./mysqlAction"
-import { PostgresqlAction } from "./postgresqlAction"
-import { RedisAction } from "./redisAction"
+import { MysqlLikeAction } from "./mysqlLikeAction"
 import { BodyContent, RestApiAction } from "./restapiAction"
-import { MongodbAction } from "./mongodbAction"
 import { TransformerAction } from "./transformerAction"
+import { PostgreSqlAction } from "@/redux/currentApp/action/postgresqlAction"
 
 export interface Transformer {
   rawData: string
@@ -19,9 +17,18 @@ export interface Events {
 export type ActionType =
   | "mysql"
   | "restapi"
+  | "graphql"
   | "mongodb"
   | "redis"
+  | "elastic"
   | "postgresql"
+  | "mariadb"
+  | "snowflake"
+  | "tidb"
+  | "datadog"
+  | "smtp"
+  | "zapier"
+  | "s3"
   | "transformer"
 
 export type ActionTriggerMode = "manually" | "automate"
@@ -36,16 +43,6 @@ export interface ActionItem<T extends ActionContent> {
   content: T
 }
 
-export type ActionContent =
-  | MysqlAction
-  | RestApiAction<BodyContent>
-  | TransformerAction
-  | MongodbAction
-  | PostgresqlAction
-  | RedisAction
-
-export const actionInitialState: ActionItem<ActionContent>[] = []
-
 export const actionItemInitial: Partial<ActionItem<ActionContent>> = {
   transformer: {
     enable: false,
@@ -55,6 +52,14 @@ export const actionItemInitial: Partial<ActionItem<ActionContent>> = {
   triggerMode: "manually",
 }
 
+export type ActionContent =
+  | MysqlLikeAction
+  | RestApiAction<BodyContent>
+  | TransformerAction
+  | PostgreSqlAction
+
+export const actionInitialState: ActionItem<ActionContent>[] = []
+
 export interface UpdateActionItemPayload {
   displayName: string
   data: Record<string, any>
diff --git a/apps/builder/src/redux/currentApp/action/getInitialContent.ts b/apps/builder/src/redux/currentApp/action/getInitialContent.ts
index 9606380dc1..72ae5a0c62 100644
--- a/apps/builder/src/redux/currentApp/action/getInitialContent.ts
+++ b/apps/builder/src/redux/currentApp/action/getInitialContent.ts
@@ -1,24 +1,23 @@
 import { ActionContent, ActionType } from "./actionState"
 import { TransformerActionInitial } from "./transformerAction"
-import { MysqlActionInitial } from "./mysqlAction"
+import { MysqlLikeActionInitial } from "./mysqlLikeAction"
 import { RestApiActionInitial } from "./restapiAction"
-import { MongodbActionInitial } from "./mongodbAction"
-import { PostgresqlActionInitial } from "@/redux/currentApp/action/postgresqlAction"
-import { RedisActionInitial } from "@/redux/currentApp/action/redisAction"
+import { PostgreSqlActionInitial } from "@/redux/currentApp/action/postgresqlAction"
 
+// @ts-ignore
 export function getInitialContent(actionType: ActionType): ActionContent {
   switch (actionType) {
-    case "mongodb":
-      return MongodbActionInitial
+    case "mariadb":
+    case "tidb":
     case "mysql":
-      return MysqlActionInitial
+      return MysqlLikeActionInitial
     case "postgresql":
-      return PostgresqlActionInitial
-    case "redis":
-      return RedisActionInitial
+      return PostgreSqlActionInitial
     case "restapi":
       return RestApiActionInitial
     case "transformer":
       return TransformerActionInitial
+    default:
+      return {} as ActionContent
   }
 }
diff --git a/apps/builder/src/redux/currentApp/action/mongodbAction.ts b/apps/builder/src/redux/currentApp/action/mongodbAction.ts
deleted file mode 100644
index 90d5ef11a9..0000000000
--- a/apps/builder/src/redux/currentApp/action/mongodbAction.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface MongodbAction {}
-
-export const MongodbActionInitial: MongodbAction = {}
diff --git a/apps/builder/src/redux/currentApp/action/mysqlAction.ts b/apps/builder/src/redux/currentApp/action/mysqlAction.ts
deleted file mode 100644
index 8be63fa647..0000000000
--- a/apps/builder/src/redux/currentApp/action/mysqlAction.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Events } from "@/redux/currentApp/action/actionState"
-
-export type MysqlActionMode = "gui" | "sql"
-
-export interface MysqlAction extends Events {
-  mode: MysqlActionMode
-  query: string
-}
-
-export const MysqlActionInitial: MysqlAction = {
-  mode: "sql",
-  query: "",
-}
diff --git a/apps/builder/src/redux/currentApp/action/mysqlLikeAction.ts b/apps/builder/src/redux/currentApp/action/mysqlLikeAction.ts
new file mode 100644
index 0000000000..2ea6685c8c
--- /dev/null
+++ b/apps/builder/src/redux/currentApp/action/mysqlLikeAction.ts
@@ -0,0 +1,13 @@
+import { Events } from "@/redux/currentApp/action/actionState"
+
+export type MysqlLikeActionMode = "gui" | "sql"
+
+export interface MysqlLikeAction extends Events {
+  mode: MysqlLikeActionMode
+  query: string
+}
+
+export const MysqlLikeActionInitial: MysqlLikeAction = {
+  mode: "sql",
+  query: "",
+}
diff --git a/apps/builder/src/redux/currentApp/action/postgresqlAction.ts b/apps/builder/src/redux/currentApp/action/postgresqlAction.ts
index 636618571c..1bbb16e3bc 100644
--- a/apps/builder/src/redux/currentApp/action/postgresqlAction.ts
+++ b/apps/builder/src/redux/currentApp/action/postgresqlAction.ts
@@ -1,3 +1,13 @@
-export interface PostgresqlAction {}
+import { Events } from "@/redux/currentApp/action/actionState"
 
-export const PostgresqlActionInitial: PostgresqlAction = {}
+export type PostgreSqlActionMode = "gui" | "sql"
+
+export interface PostgreSqlAction extends Events {
+  mode: PostgreSqlActionMode
+  query: string
+}
+
+export const PostgreSqlActionInitial: PostgreSqlAction = {
+  mode: "sql",
+  query: "",
+}
diff --git a/apps/builder/src/redux/currentApp/action/redisAction.ts b/apps/builder/src/redux/currentApp/action/redisAction.ts
deleted file mode 100644
index d5eb8d98cc..0000000000
--- a/apps/builder/src/redux/currentApp/action/redisAction.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface RedisAction {}
-
-export const RedisActionInitial: RedisAction = {}
diff --git a/apps/builder/src/redux/currentApp/action/restapiAction.ts b/apps/builder/src/redux/currentApp/action/restapiAction.ts
index c94ca44e66..35084485e4 100644
--- a/apps/builder/src/redux/currentApp/action/restapiAction.ts
+++ b/apps/builder/src/redux/currentApp/action/restapiAction.ts
@@ -62,9 +62,9 @@ export interface RestApiAction<T extends BodyContent> extends Events {
 export const RestApiActionInitial: RestApiAction<BodyContent> = {
   url: "",
   method: "GET",
-  urlParams: [{} as Params],
-  headers: [{} as Params],
-  cookies: [{} as Params],
+  urlParams: [{ key: "", value: "" } as Params],
+  headers: [{ key: "", value: "" } as Params],
+  cookies: [{ key: "", value: "" } as Params],
   bodyType: "none",
   body: null,
 }
diff --git a/apps/builder/src/redux/currentApp/appInfo/appInfoSelector.ts b/apps/builder/src/redux/currentApp/appInfo/appInfoSelector.ts
index 12cd592fcf..976694b37a 100644
--- a/apps/builder/src/redux/currentApp/appInfo/appInfoSelector.ts
+++ b/apps/builder/src/redux/currentApp/appInfo/appInfoSelector.ts
@@ -5,6 +5,6 @@ export const getAppInfo = (state: RootState) => {
   return state.currentApp.appInfo
 }
 
-export const getAppId = createSelector([getAppInfo], (appInfo) => {
+export const getAppId = createSelector([getAppInfo], appInfo => {
   return appInfo.appId
 })
diff --git a/apps/builder/src/redux/currentApp/editor/components/componentsListener.ts b/apps/builder/src/redux/currentApp/editor/components/componentsListener.ts
index 6a1cdf854a..3e917bae89 100644
--- a/apps/builder/src/redux/currentApp/editor/components/componentsListener.ts
+++ b/apps/builder/src/redux/currentApp/editor/components/componentsListener.ts
@@ -25,7 +25,7 @@ function handleCopyComponentReflowEffect(
   const rootNode = getCanvas(rootState)
   const componentNodes = action.payload
   const effectResultMap = new Map<string, ComponentNode>()
-  componentNodes.forEach(copyShape => {
+  componentNodes.forEach((copyShape) => {
     const { oldComponentNode } = copyShape
     const parentNodeDisplayName = oldComponentNode.parentNode
     let parentNode = searchDsl(rootNode, parentNodeDisplayName)
@@ -92,6 +92,6 @@ export function setupComponentsListeners(
   ]
 
   return () => {
-    subscriptions.forEach(unsubscribe => unsubscribe())
+    subscriptions.forEach((unsubscribe) => unsubscribe())
   }
 }
diff --git a/apps/builder/src/redux/currentApp/editor/components/componentsSelector.ts b/apps/builder/src/redux/currentApp/editor/components/componentsSelector.ts
index e287304287..3b9bdb508f 100644
--- a/apps/builder/src/redux/currentApp/editor/components/componentsSelector.ts
+++ b/apps/builder/src/redux/currentApp/editor/components/componentsSelector.ts
@@ -27,7 +27,7 @@ export function searchDsl(
     }
     queue.pop()
     if (head.childrenNode) {
-      head.childrenNode.forEach(child => {
+      head.childrenNode.forEach((child) => {
         if (child) {
           queue.push(child)
         }
@@ -37,9 +37,7 @@ export function searchDsl(
   return null
 }
 
-export function flattenDsl(
-  rootNode: ComponentNode,
-): {
+export function flattenDsl(rootNode: ComponentNode): {
   [key: string]: ComponentNode
 } {
   const queue = [rootNode]
@@ -52,7 +50,7 @@ export function flattenDsl(
     }
     queue.pop()
     if (head.childrenNode) {
-      head.childrenNode.forEach(child => {
+      head.childrenNode.forEach((child) => {
         if (child) {
           queue.push(child)
         }
@@ -78,14 +76,14 @@ export const getComponentNodeBySingleSelected = createSelector(
 
 export const getAllComponentDisplayNameMapProps = createSelector(
   [getCanvas],
-  rootDSL => {
+  (rootDSL) => {
     if (rootDSL == null) {
       return null
     }
     const components = flattenDsl(rootDSL)
     if (!components) return
     const res: Record<string, any> = {}
-    Object.keys(components).forEach(key => {
+    Object.keys(components).forEach((key) => {
       res[key] = {
         ...components[key].props,
         $type: "WIDGET",
diff --git a/apps/builder/src/redux/currentApp/executionTree/executionReducer.ts b/apps/builder/src/redux/currentApp/executionTree/executionReducer.ts
index 537d93abc3..4bee5a4755 100644
--- a/apps/builder/src/redux/currentApp/executionTree/executionReducer.ts
+++ b/apps/builder/src/redux/currentApp/executionTree/executionReducer.ts
@@ -53,7 +53,7 @@ export const setExecutionDebuggerDataReducer: CaseReducer<
 export const startExecutionReducer: CaseReducer<
   ExecutionState,
   PayloadAction<void>
-> = (state) => {
+> = state => {
   return state
 }
 
diff --git a/apps/builder/src/redux/currentApp/executionTree/executionSelector.ts b/apps/builder/src/redux/currentApp/executionTree/executionSelector.ts
index 81120d5958..fa30997165 100644
--- a/apps/builder/src/redux/currentApp/executionTree/executionSelector.ts
+++ b/apps/builder/src/redux/currentApp/executionTree/executionSelector.ts
@@ -27,24 +27,24 @@ export const getExecution = (state: RootState) => state.currentApp.execution
 
 export const getExecutionResult = createSelector(
   [getExecution],
-  (execution) => execution.result,
+  execution => execution.result,
 )
 
 export const getExecutionError = createSelector(
   [getExecution],
-  (execution) => execution.error ?? {},
+  execution => execution.error ?? {},
 )
 
 export const getExecutionDebuggerData = createSelector(
   [getExecution],
-  (execution) => execution.debuggerData ?? {},
+  execution => execution.debuggerData ?? {},
 )
 
 export const getWidgetExecutionResult = createSelector(
   [getExecutionResult],
-  (executionResult) => {
+  executionResult => {
     const widgetExecutionResult: Record<string, any> = {}
-    Object.keys(executionResult).forEach((key) => {
+    Object.keys(executionResult).forEach(key => {
       const widgetOrAction = executionResult[key]
       if (widgetOrAction.$type === "WIDGET") {
         widgetExecutionResult[key] = widgetOrAction
@@ -56,9 +56,9 @@ export const getWidgetExecutionResult = createSelector(
 
 export const getWidgetExecutionResultArray = createSelector(
   [getWidgetExecutionResult],
-  (widgetExecutionResult) => {
+  widgetExecutionResult => {
     const widgetExecutionResultArray: Record<string, any>[] = []
-    Object.keys(widgetExecutionResult).forEach((key) => {
+    Object.keys(widgetExecutionResult).forEach(key => {
       widgetExecutionResultArray.push({
         ...widgetExecutionResult[key],
         displayName: key,
@@ -70,9 +70,9 @@ export const getWidgetExecutionResultArray = createSelector(
 
 export const getActionExecutionResult = createSelector(
   [getExecutionResult],
-  (executionResult) => {
+  executionResult => {
     const actionExecutionResult: Record<string, any> = {}
-    Object.keys(executionResult).forEach((key) => {
+    Object.keys(executionResult).forEach(key => {
       const widgetOrAction = executionResult[key]
       if (widgetOrAction.$type === "ACTION") {
         actionExecutionResult[key] = widgetOrAction
@@ -84,9 +84,9 @@ export const getActionExecutionResult = createSelector(
 
 export const getActionExecutionResultArray = createSelector(
   [getActionExecutionResult],
-  (actionExecutionResult) => {
+  actionExecutionResult => {
     const actionExecutionResultArray: Record<string, any>[] = []
-    Object.keys(actionExecutionResult).forEach((key) => {
+    Object.keys(actionExecutionResult).forEach(key => {
       actionExecutionResultArray.push({
         ...actionExecutionResult[key],
         displayName: key,
diff --git a/apps/builder/src/redux/currentUser/currentUserSelector.ts b/apps/builder/src/redux/currentUser/currentUserSelector.ts
index 298fb30e23..4c89de109d 100644
--- a/apps/builder/src/redux/currentUser/currentUserSelector.ts
+++ b/apps/builder/src/redux/currentUser/currentUserSelector.ts
@@ -34,7 +34,7 @@ export const getGlobalInfoExecutionResult = createSelector(
     const globalInfo: Record<string, any>[] = [
       {
         ...currentUserInfo,
-        displayName: "currentUser",
+        displayName: "currentUserInfo",
       },
       {
         ...builderInfo,
diff --git a/apps/builder/src/redux/dashboard/apps/dashboardAppState.ts b/apps/builder/src/redux/dashboard/apps/dashboardAppState.ts
index 562b0b48ca..016b87a88a 100644
--- a/apps/builder/src/redux/dashboard/apps/dashboardAppState.ts
+++ b/apps/builder/src/redux/dashboard/apps/dashboardAppState.ts
@@ -25,8 +25,8 @@ export const DashboardAppInitialState: DashboardApp = {
   currentVersionId: "",
   appActivity: {
     modifier: "",
-    modifiedAt: ""
-  }
+    modifiedAt: "",
+  },
 }
 
 export const DashboardAppsInitialState: DashboardAppsState = {
diff --git a/apps/builder/src/redux/resource/resourceReducer.ts b/apps/builder/src/redux/resource/resourceReducer.ts
index 369e441e15..3ec0c5c89a 100644
--- a/apps/builder/src/redux/resource/resourceReducer.ts
+++ b/apps/builder/src/redux/resource/resourceReducer.ts
@@ -1,23 +1,28 @@
 import { CaseReducer, PayloadAction } from "@reduxjs/toolkit"
-import { ResourceListState, Resource } from "@/redux/resource/resourceState"
+import {
+  Resource,
+  ResourceContent,
+  ResourceListState,
+} from "@/redux/resource/resourceState"
 
 export const updateResourceListReducer: CaseReducer<
   ResourceListState,
-  PayloadAction<Resource[]>
+  PayloadAction<Resource<ResourceContent>[]>
 > = (_, action) => {
   return action.payload
 }
 
 export const addResourceItemReducer: CaseReducer<
   ResourceListState,
-  PayloadAction<Resource>
+  PayloadAction<Resource<ResourceContent>>
 > = (state, action) => {
-  state.push(action.payload)
+  state = [action.payload, ...state]
+  return state
 }
 
 export const updateResourceItemReducer: CaseReducer<
   ResourceListState,
-  PayloadAction<Resource>
+  PayloadAction<Resource<ResourceContent>>
 > = (state, action) => {
   const targetIndex = state.findIndex(
     (i) => i.resourceId === action.payload.resourceId,
diff --git a/apps/builder/src/redux/resource/resourceState.ts b/apps/builder/src/redux/resource/resourceState.ts
index c71225e6f2..53037ec0ba 100644
--- a/apps/builder/src/redux/resource/resourceState.ts
+++ b/apps/builder/src/redux/resource/resourceState.ts
@@ -1,11 +1,24 @@
 export type ResourceType =
   | "mysql"
   | "restapi"
+  | "graphql"
   | "mongodb"
   | "redis"
+  | "elastic"
   | "postgresql"
+  | "mariadb"
+  | "snowflake"
+  | "tidb"
+  | "datadog"
+  | "smtp"
+  | "zapier"
+  | "s3"
 
-export type ResourceContent = MysqlResource | RestApiResource<RestApiAuth>
+export type ResourceContent =
+  | MysqlResource
+  | RestApiResource<RestApiAuth>
+  | PostgreSqlResource
+  | RedisResource
 
 export interface Resource<T extends ResourceContent> {
   resourceId: string
@@ -24,32 +37,59 @@ export interface MysqlResource {
   databaseName: string
   databaseUsername: string
   databasePassword: string
-  ssh: MysqlSSH
-  ssl: MysqlSSL
+  ssl: DbSSL
 }
 
-export interface MysqlSSH {
-  ssh: boolean
+export interface RedisResource {
+  host: string
+  port: string
+  databaseName: string
+  databaseUsername: string
+  databasePassword: string
+  ssl: DbSSL
 }
 
-export interface MysqlSSL {
+export interface DbSSL {
   ssl: boolean
   serverCert: string
   clientKey: string
   clientCert: string
 }
 
+export function generateSSLConfig(
+  open: boolean,
+  data: { [p: string]: any },
+): DbSSL {
+  return {
+    ssl: open,
+    clientKey: data.clientKey,
+    clientCert: data.clientCert,
+    serverCert: data.serverCert,
+  } as DbSSL
+}
+
+export interface PostgreSqlResource {
+  host: string
+  port: string
+  databaseName: string
+  databaseUsername: string
+  databasePassword: string
+  ssl: DbSSL
+}
+
 export interface Params {
   key: string
   value: string
 }
 
+export type RestApiAuthType = "none" | "basic" | "bearer"
+
 export interface RestApiResource<T extends RestApiAuth> {
   baseUrl: string
   urlParams: Params[]
   headers: Params[]
   cookies: Params[]
-  authentication: string
+  authentication: RestApiAuthType
   authContent: T
 }
 
diff --git a/apps/builder/src/utils/actionResourceTransformer.ts b/apps/builder/src/utils/actionResourceTransformer.ts
new file mode 100644
index 0000000000..29fdcd820d
--- /dev/null
+++ b/apps/builder/src/utils/actionResourceTransformer.ts
@@ -0,0 +1,101 @@
+import { ActionType } from "@/redux/currentApp/action/actionState"
+import i18n from "@/i18n/config"
+import { ResourceType } from "@/redux/resource/resourceState"
+
+export function getActionTypeFromResourceType(
+  resourceType: ResourceType | null | undefined,
+): ActionType | null {
+  return resourceType as ActionType
+}
+
+export function getActionNameFromActionType(actionType: ActionType): string {
+  if (actionType) {
+    switch (actionType) {
+      case "mysql":
+        return "MySQL"
+      case "restapi":
+        return "REST API"
+      case "graphql":
+        return "GraphQL"
+      case "mongodb":
+        return "MongoDB"
+      case "redis":
+        return "Redis"
+      case "elastic":
+        return "Elastic Search"
+      case "postgresql":
+        return "PostgreSQL"
+      case "mariadb":
+        return "MariaDB"
+      case "snowflake":
+        return "Snowflake"
+      case "tidb":
+        return "TiDB"
+      case "datadog":
+        return "DataDog"
+      case "smtp":
+        return "SMTP"
+      case "zapier":
+        return "Zapier"
+      case "s3":
+        return "Amazon S3"
+      case "transformer":
+        return "Transformer"
+      default:
+        return ""
+    }
+  } else {
+    return ""
+  }
+}
+
+export function getResourceNameFromResourceType(
+  resourceType: ResourceType | null | undefined,
+): string {
+  if (resourceType) {
+    switch (resourceType) {
+      case "mysql":
+        return "MySQL"
+      case "restapi":
+        return "REST API"
+      case "graphql":
+        return "GraphQL"
+      case "mongodb":
+        return "MongoDB"
+      case "redis":
+        return "Redis"
+      case "elastic":
+        return "Elastic Search"
+      case "postgresql":
+        return "PostgreSQL"
+      case "mariadb":
+        return "MariaDB"
+      case "snowflake":
+        return "Snowflake"
+      case "tidb":
+        return "TiDB"
+      case "datadog":
+        return "DataDog"
+      case "smtp":
+        return "SMTP"
+      case "zapier":
+        return "Zapier"
+      case "s3":
+        return "Amazon S3"
+      default:
+        return ""
+    }
+  } else {
+    return ""
+  }
+}
+
+export function getResourceTypeFromActionType(
+  actionType: ActionType | null | undefined,
+): ResourceType | null {
+  if (actionType === "transformer") {
+    return null
+  } else {
+    return actionType as ResourceType
+  }
+}
diff --git a/apps/builder/src/utils/ast/ast.ts b/apps/builder/src/utils/ast/ast.ts
index 59a22df877..7cb779e0cc 100644
--- a/apps/builder/src/utils/ast/ast.ts
+++ b/apps/builder/src/utils/ast/ast.ts
@@ -125,7 +125,7 @@ const getFunctionalParamsFromNode = (
   node: FunctionDeclarationNode | FunctionExpressionNode,
 ): Set<string> => {
   const functionalParams = new Set<string>()
-  node.params.forEach((paramNode) => {
+  node.params.forEach(paramNode => {
     if (isIdentifierNode(paramNode)) {
       functionalParams.add(paramNode.name)
     } else if (isAssignmentPatternNode(paramNode)) {
@@ -218,8 +218,9 @@ export const extractIdentifiersFromCode = (code: string): string[] => {
        * could be nesting of many MemberExpressions. To find the final reference, we will
        * try to find the top level MemberExpression that does not have a MemberExpression parent.
        * */
-      let candidateTopLevelNode: IdentifierNode | MemberExpressionNode =
-        node as IdentifierNode
+      let candidateTopLevelNode:
+        | IdentifierNode
+        | MemberExpressionNode = node as IdentifierNode
       let depth = ancestors.length - 2 // start "depth" with first parent
       while (depth > 0) {
         const parent = ancestors[depth]
@@ -283,8 +284,8 @@ export const extractIdentifiersFromCode = (code: string): string[] => {
   })
 
   // Remove declared variables and function params
-  variableDeclarations.forEach((variable) => identifiers.delete(variable))
-  functionalParams.forEach((param) => identifiers.delete(param))
+  variableDeclarations.forEach(variable => identifiers.delete(variable))
+  functionalParams.forEach(param => identifiers.delete(param))
 
   return Array.from(identifiers)
 }
diff --git a/apps/builder/src/utils/ast/unescapeJs.ts b/apps/builder/src/utils/ast/unescapeJs.ts
index a3fe63dddb..a1ba9b566e 100644
--- a/apps/builder/src/utils/ast/unescapeJs.ts
+++ b/apps/builder/src/utils/ast/unescapeJs.ts
@@ -1,7 +1,6 @@
 // Thk unescape-js
 
-const jsEscapeRegex =
-  /\\(u\{([0-9A-Fa-f]+)\}|u([0-9A-Fa-f]{4})|x([0-9A-Fa-f]{2})|([1-7][0-7]{0,2}|[0-7]{2,3})|(['"tbrnfv0\\]))|\\U([0-9A-Fa-f]{8})/g
+const jsEscapeRegex = /\\(u\{([0-9A-Fa-f]+)\}|u([0-9A-Fa-f]{4})|x([0-9A-Fa-f]{2})|([1-7][0-7]{0,2}|[0-7]{2,3})|(['"tbrnfv0\\]))|\\U([0-9A-Fa-f]{8})/g
 
 const usualEscapeSequences: Record<string, string> = {
   "0": "\0",
diff --git a/apps/builder/src/utils/componentNode/index.ts b/apps/builder/src/utils/componentNode/index.ts
index 5386a1488d..7deabac192 100644
--- a/apps/builder/src/utils/componentNode/index.ts
+++ b/apps/builder/src/utils/componentNode/index.ts
@@ -53,7 +53,7 @@ const generateDynamicAttrPaths = (
   if (update.action === DynamicAttrPathActions.ADD) {
     current.push(update.attrPath)
   } else if (update.action === DynamicAttrPathActions.REMOVE) {
-    current = current.filter((path) => path !== update.attrPath)
+    current = current.filter(path => path !== update.attrPath)
   }
   return current
 }
@@ -66,7 +66,7 @@ const getNewAttrUpdatesAndDynamicAttrPaths = (
   dynamicAttrPaths: string[]
 } => {
   const newWidgetProps = cloneDeep(widgetProps)
-  Object.keys(updateSlice).forEach((attrPath) => {
+  Object.keys(updateSlice).forEach(attrPath => {
     const attrValue = updateSlice[attrPath]
     set(newWidgetProps, attrPath, attrValue)
   })
@@ -76,7 +76,7 @@ const getNewAttrUpdatesAndDynamicAttrPaths = (
   }
   const currentDynamicAttrPaths = getWidgetOrActionDynamicAttrPaths(widgetProps)
   const dynamicAttrPathUpdates: DynamicAttrPathUpdateShape[] = []
-  Object.keys(updatePaths).forEach((attrPath) => {
+  Object.keys(updatePaths).forEach(attrPath => {
     const attrValue = get(updateSlice, attrPath)
     dynamicAttrPathUpdates.push(
       getDynamicAttrPathUpdate(widgetProps, attrPath, attrValue),
@@ -99,9 +99,11 @@ export const getNewWidgetPropsByUpdateSlice = (
 ) => {
   let newWidgetProps = cloneDeep(widgetProps)
   if (Object.keys(updateSlice).length > 0) {
-    const { attrUpdates, dynamicAttrPaths } =
-      getNewAttrUpdatesAndDynamicAttrPaths(newWidgetProps, updateSlice)
-    Object.keys(attrUpdates).forEach((attrPath) => {
+    const {
+      attrUpdates,
+      dynamicAttrPaths,
+    } = getNewAttrUpdatesAndDynamicAttrPaths(newWidgetProps, updateSlice)
+    Object.keys(attrUpdates).forEach(attrPath => {
       const attrValue = attrUpdates[attrPath]
       newWidgetProps = set(newWidgetProps, attrPath, attrValue)
     })
diff --git a/apps/builder/src/utils/evaluateDynamicString/codeSandbox.ts b/apps/builder/src/utils/evaluateDynamicString/codeSandbox.ts
index bfa10845c2..ec024960bd 100644
--- a/apps/builder/src/utils/evaluateDynamicString/codeSandbox.ts
+++ b/apps/builder/src/utils/evaluateDynamicString/codeSandbox.ts
@@ -6,7 +6,7 @@ export function evalScript(
   dataTree: Record<string, any>,
   isTriggerBased: boolean,
 ): any {
-  return (function () {
+  return (function() {
     let result: any
 
     const GlobalData = createGlobalData(dataTree)
diff --git a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts
index 2f48c1761e..51b9b8db2f 100644
--- a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts
+++ b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts
@@ -51,7 +51,7 @@ export const getSnippets = (
   // Get the {{binding}} bound values
   stringSnippets = getStringSnippets(sanitisedString)
   // Get the "binding" path values
-  jsSnippets = stringSnippets.map((segment) => {
+  jsSnippets = stringSnippets.map(segment => {
     const length = segment.length
     const matches = isDynamicString(segment)
     if (matches) {
diff --git a/apps/builder/src/utils/evaluateDynamicString/valueConverter.ts b/apps/builder/src/utils/evaluateDynamicString/valueConverter.ts
index 38761b0158..1dbc09e624 100644
--- a/apps/builder/src/utils/evaluateDynamicString/valueConverter.ts
+++ b/apps/builder/src/utils/evaluateDynamicString/valueConverter.ts
@@ -7,12 +7,15 @@ export const smartSubstituteDynamicValues = (
   originStringSnippets: string[],
   originValues: unknown[],
 ): string => {
-  const { dynamicString, stringSnippets, values } =
-    filterBindingSegmentsAndRemoveQuotes(
-      originDynamicString,
-      originStringSnippets,
-      originValues,
-    )
+  const {
+    dynamicString,
+    stringSnippets,
+    values,
+  } = filterBindingSegmentsAndRemoveQuotes(
+    originDynamicString,
+    originStringSnippets,
+    originValues,
+  )
   let finalBinding = dynamicString
   stringSnippets.forEach((b, i) => {
     const value = values[i]
diff --git a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
index 18186d064e..f2b93d5f5a 100644
--- a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
+++ b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
@@ -184,7 +184,7 @@ export class ExecutionTreeFactory {
     paths.forEach(path => {
       const newErrorTreeValue = get(newErrorTree, path)
       if (newErrorTreeValue) {
-        set(this.errorTree, path, newErrorTreeValue)
+        set(oldErrorTree, path, newErrorTreeValue)
       } else {
         unset(oldErrorTree, path)
       }
diff --git a/apps/builder/src/utils/executionTreeHelper/rawTreeFactory.ts b/apps/builder/src/utils/executionTreeHelper/rawTreeFactory.ts
index cc2362807f..13d95d846c 100644
--- a/apps/builder/src/utils/executionTreeHelper/rawTreeFactory.ts
+++ b/apps/builder/src/utils/executionTreeHelper/rawTreeFactory.ts
@@ -10,11 +10,11 @@ export class RawTreeFactory {
     const { widgets, actions, builderInfo, currentUserInfo } = seeds
     const rawTree: RawTreeShape = {} as RawTreeShape
 
-    actions.forEach((action) => {
+    actions.forEach(action => {
       rawTree[action.displayName] = generateRawAction(action)
     })
 
-    Object.keys(widgets).forEach((key) => {
+    Object.keys(widgets).forEach(key => {
       rawTree[key] = generateRawWidget(widgets[key])
     })
 
diff --git a/apps/builder/src/utils/generators/generateAllTypePathsFromWidgetConfig.ts b/apps/builder/src/utils/generators/generateAllTypePathsFromWidgetConfig.ts
index db18efdb0a..53bbbf19a0 100644
--- a/apps/builder/src/utils/generators/generateAllTypePathsFromWidgetConfig.ts
+++ b/apps/builder/src/utils/generators/generateAllTypePathsFromWidgetConfig.ts
@@ -11,10 +11,10 @@ export const generateAllTypePathsFromWidgetConfig = (
   widgetOrAction: Record<string, any>,
 ) => {
   let validationPaths: Record<string, VALIDATION_TYPES> = {}
-  panelConfig.forEach((config) => {
+  panelConfig.forEach(config => {
     if ((config as PanelFieldGroupConfig).children) {
       const filedConfigs = (config as PanelFieldGroupConfig).children
-      filedConfigs.forEach((filedConfig) => {
+      filedConfigs.forEach(filedConfig => {
         const attrPath = filedConfig.attrName
 
         const configValidationPaths: Record<string, VALIDATION_TYPES> = {}
@@ -27,9 +27,9 @@ export const generateAllTypePathsFromWidgetConfig = (
           const basePropertyPath = filedConfig.attrName
           const widgetPropertyValue = get(widgetOrAction, basePropertyPath, [])
           if (Array.isArray(widgetPropertyValue)) {
-            Object.keys(widgetPropertyValue).forEach((key) => {
+            Object.keys(widgetPropertyValue).forEach(key => {
               const objectIndexPropertyPath = `${basePropertyPath}.${key}`
-              filedConfig.childrenSetter?.forEach((childConfig) => {
+              filedConfig.childrenSetter?.forEach(childConfig => {
                 const childAttrPath = childConfig.attrName
                 if (childConfig.expectedType) {
                   configValidationPaths[
@@ -40,9 +40,9 @@ export const generateAllTypePathsFromWidgetConfig = (
             })
           }
           if (isObject(widgetPropertyValue)) {
-            Object.keys(widgetPropertyValue).forEach((key) => {
+            Object.keys(widgetPropertyValue).forEach(key => {
               const objectIndexPropertyPath = `${basePropertyPath}.${key}`
-              filedConfig.childrenSetter?.forEach((childConfig) => {
+              filedConfig.childrenSetter?.forEach(childConfig => {
                 if (childConfig.expectedType) {
                   configValidationPaths[`${objectIndexPropertyPath}`] =
                     childConfig.expectedType
diff --git a/apps/builder/src/utils/generators/generateDisplayName.ts b/apps/builder/src/utils/generators/generateDisplayName.ts
index e19558780a..0fed866384 100644
--- a/apps/builder/src/utils/generators/generateDisplayName.ts
+++ b/apps/builder/src/utils/generators/generateDisplayName.ts
@@ -52,7 +52,7 @@ export class DisplayNameGenerator {
     actionList: ActionItem<ActionContent>[],
   ) {
     this.displayNameList.clear()
-    actionList.forEach((action) => {
+    actionList.forEach(action => {
       this.displayNameList.add(action.displayName)
     })
     this.addComponentDisplayName(componentNode)
@@ -60,7 +60,7 @@ export class DisplayNameGenerator {
 
   static addComponentDisplayName(componentNode: ComponentNode) {
     this.displayNameList.add(componentNode.displayName)
-    componentNode.childrenNode?.forEach((child) => {
+    componentNode.childrenNode?.forEach(child => {
       this.addComponentDisplayName(child)
     })
   }
@@ -101,7 +101,7 @@ export class DisplayNameGenerator {
   }
 
   static removeDisplayNameMulti(displayNames: string[]) {
-    displayNames.forEach((displayName) => {
+    displayNames.forEach(displayName => {
       this.displayNameList.delete(displayName)
     })
     Connection.getRoom("app", this.appId)?.send(
diff --git a/apps/builder/src/utils/shortcut/index.tsx b/apps/builder/src/utils/shortcut/index.tsx
index fcd725fd20..44dacf61fc 100644
--- a/apps/builder/src/utils/shortcut/index.tsx
+++ b/apps/builder/src/utils/shortcut/index.tsx
@@ -30,11 +30,11 @@ export const Shortcut: FC = ({ children }) => {
 
   const currentSelectedComponent = useSelector(getSelectedComponents)
   const currentSelectedComponentNode = useSelector<RootState, ComponentNode[]>(
-    rootState => {
-      const result = currentSelectedComponent.map(displayName => {
+    (rootState) => {
+      const result = currentSelectedComponent.map((displayName) => {
         return searchDSLByDisplayName(displayName)
       })
-      return result.filter(node => node) as ComponentNode[]
+      return result.filter((node) => node) as ComponentNode[]
     },
   )
 
@@ -44,7 +44,7 @@ export const Shortcut: FC = ({ children }) => {
 
   useHotkeys(
     "command+s,ctrl+s",
-    event => {
+    (event) => {
       event.preventDefault()
       Message.success(t("dont_need_save"))
     },
@@ -55,9 +55,8 @@ export const Shortcut: FC = ({ children }) => {
   )
 
   // shortcut
-  const [alreadyShowDeleteDialog, setAlreadyShowDeleteDialog] = useState<
-    boolean
-  >(false)
+  const [alreadyShowDeleteDialog, setAlreadyShowDeleteDialog] =
+    useState<boolean>(false)
 
   const showDeleteDialog = (displayName: string[]) => {
     if (!alreadyShowDeleteDialog && displayName.length > 0) {
@@ -95,10 +94,10 @@ export const Shortcut: FC = ({ children }) => {
 
   useHotkeys(
     "Backspace",
-    event => {
+    (event) => {
       event.preventDefault()
       showDeleteDialog(
-        currentSelectedComponent.map(displayName => {
+        currentSelectedComponent.map((displayName) => {
           return displayName
         }),
       )
@@ -120,7 +119,7 @@ export const Shortcut: FC = ({ children }) => {
         case "canvas": {
           if (canvasRootNode) {
             const childNode = canvasRootNode.childrenNode
-            const childNodeDisplayNames = childNode.map(node => {
+            const childNodeDisplayNames = childNode.map((node) => {
               return node.displayName
             })
             dispatch(
@@ -169,6 +168,7 @@ export const Shortcut: FC = ({ children }) => {
           break
         case "command+d":
         case "ctrl+d":
+          keyboardEvent.preventDefault()
           switch (FocusManager.getFocus()) {
             case "none":
               break
@@ -196,12 +196,12 @@ export const Shortcut: FC = ({ children }) => {
           break
       }
     },
-    [currentSelectedComponent],
+    [currentSelectedComponent, currentSelectedAction],
   )
 
   useHotkeys(
     "*",
-    keyboardEvent => {
+    (keyboardEvent) => {
       if (hotkeys.ctrl || hotkeys.command) {
         if (keyboardEvent.type === "keydown") {
           dispatch(configActions.updateShowDot(true))
diff --git a/apps/builder/src/utils/typeHelper.ts b/apps/builder/src/utils/typeHelper.ts
index ed17739f25..2186392350 100644
--- a/apps/builder/src/utils/typeHelper.ts
+++ b/apps/builder/src/utils/typeHelper.ts
@@ -37,10 +37,10 @@ export const getType = (value: unknown) => {
 export function isURL(str: string) {
   const pattern = new RegExp(
     "^((blob:)?https?:\\/\\/)?" + // protocol
-      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+    "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+    "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+    "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+    "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
       "(\\#[-a-z\\d_]*)?$",
     "i",
   ) // fragment locator
diff --git a/apps/builder/src/utils/validationFactory/index.ts b/apps/builder/src/utils/validationFactory/index.ts
index 74db590237..c78c8df604 100644
--- a/apps/builder/src/utils/validationFactory/index.ts
+++ b/apps/builder/src/utils/validationFactory/index.ts
@@ -18,7 +18,7 @@ export type ValidateFunctionType = (value: unknown) => ValidationResponse
 
 // TODO: @weichen errorMessage i18n
 export const validationFactory: Record<string, ValidateFunctionType> = {
-  [VALIDATION_TYPES.STRING]: (value) => {
+  [VALIDATION_TYPES.STRING]: value => {
     if (value == undefined || value === "") {
       return {
         isValid: true,
@@ -38,7 +38,7 @@ export const validationFactory: Record<string, ValidateFunctionType> = {
       safeValue: value,
     }
   },
-  [VALIDATION_TYPES.BOOLEAN]: (value) => {
+  [VALIDATION_TYPES.BOOLEAN]: value => {
     if (value == undefined || value === "") {
       return {
         isValid: true,
@@ -58,7 +58,7 @@ export const validationFactory: Record<string, ValidateFunctionType> = {
       safeValue: value,
     }
   },
-  [VALIDATION_TYPES.NUMBER]: (value) => {
+  [VALIDATION_TYPES.NUMBER]: value => {
     if (value == undefined || value === "") {
       return {
         isValid: true,
@@ -78,7 +78,7 @@ export const validationFactory: Record<string, ValidateFunctionType> = {
       safeValue: value,
     }
   },
-  [VALIDATION_TYPES.ARRAY]: (value) => {
+  [VALIDATION_TYPES.ARRAY]: value => {
     if (value == undefined || value === "") {
       return {
         isValid: true,
@@ -98,7 +98,7 @@ export const validationFactory: Record<string, ValidateFunctionType> = {
       safeValue: value,
     }
   },
-  [VALIDATION_TYPES.OBJECT]: (value) => {
+  [VALIDATION_TYPES.OBJECT]: value => {
     if (value == undefined || value === "") {
       return {
         isValid: true,
diff --git a/apps/builder/src/widgetLibrary/BarProgressWidget/barProgress.tsx b/apps/builder/src/widgetLibrary/BarProgressWidget/barProgress.tsx
index e79a080faf..fa59399060 100644
--- a/apps/builder/src/widgetLibrary/BarProgressWidget/barProgress.tsx
+++ b/apps/builder/src/widgetLibrary/BarProgressWidget/barProgress.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, useMemo, FC, useEffect, useRef } from "react"
+import { FC, forwardRef, useEffect, useMemo, useRef } from "react"
 import { Progress } from "@illa-design/progress"
-import { WrappedBarProgressProps, BarProgressWidgetProps } from "./interface"
+import { BarProgressWidgetProps, WrappedBarProgressProps } from "./interface"
 import { Label } from "@/widgetLibrary/PublicSector/Label"
 import { applyCenterLabelAndComponentWrapperStyle } from "@/widgetLibrary/PublicSector/TransformWidgetWrapper/style"
 import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper"
diff --git a/apps/builder/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/BarProgressWidget/panelConfig.tsx
index a1c69a79a7..027a15a05b 100644
--- a/apps/builder/src/widgetLibrary/BarProgressWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/BarProgressWidget/panelConfig.tsx
@@ -51,7 +51,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -63,7 +63,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -82,7 +82,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/ButtonWidget/button.tsx b/apps/builder/src/widgetLibrary/ButtonWidget/button.tsx
index be765cf954..7df50790a8 100644
--- a/apps/builder/src/widgetLibrary/ButtonWidget/button.tsx
+++ b/apps/builder/src/widgetLibrary/ButtonWidget/button.tsx
@@ -4,7 +4,7 @@ import { ButtonWidgetProps, WrappedButtonProps } from "./interface"
 import { buttonLayoutStyle } from "@/widgetLibrary/ButtonWidget/style"
 import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper"
 
-export const WrappedButton: FC<WrappedButtonProps> = (props) => {
+export const WrappedButton: FC<WrappedButtonProps> = props => {
   const {
     text,
     variant,
@@ -35,7 +35,7 @@ export const WrappedButton: FC<WrappedButtonProps> = (props) => {
 
 WrappedButton.displayName = "WrappedButton"
 
-export const ButtonWidget: FC<ButtonWidgetProps> = (props) => {
+export const ButtonWidget: FC<ButtonWidgetProps> = props => {
   const {
     text,
     variant,
diff --git a/apps/builder/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/ButtonWidget/panelConfig.tsx
index b00a79620d..cd6dc3e6ac 100644
--- a/apps/builder/src/widgetLibrary/ButtonWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/ButtonWidget/panelConfig.tsx
@@ -36,7 +36,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [
         attrName: "formId",
         setterType: "INPUT_SETTER",
         bindAttrName: ["submit"],
-        shown: (value) => value === true,
+        shown: value => value === true,
       },
       {
         id: `${baseWidgetName}-interaction-loading`,
@@ -47,7 +47,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.BOOLEAN,
         bindAttrName: ["submit"],
-        shown: (value) => {
+        shown: value => {
           return !value
         },
       },
@@ -60,7 +60,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.BOOLEAN,
         bindAttrName: ["submit"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx
index 3edcfa1ba4..7474b81ad6 100644
--- a/apps/builder/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx
@@ -32,7 +32,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "manualOptions",
         setterType: "OPTION_LIST_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => !value || value === "static",
+        shown: value => !value || value === "static",
         childrenSetter: [
           {
             id: `${baseWidgetName}-options-label`,
@@ -63,7 +63,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         bindAttrName: ["optionConfigureMode"],
         expectedType: VALIDATION_TYPES.ARRAY,
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         isSetterSingleRow: true,
       },
       {
@@ -73,7 +73,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "mappedOption",
         setterType: "OPTION_MAPPED_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         childrenSetter: [
           {
             id: `${baseWidgetName}-mappedOption-labels`,
@@ -144,7 +144,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -156,7 +156,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -175,7 +175,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/CircleProgressWidget/circleProgress.tsx b/apps/builder/src/widgetLibrary/CircleProgressWidget/circleProgress.tsx
index 8fcd8b31c5..d8ab892c7d 100644
--- a/apps/builder/src/widgetLibrary/CircleProgressWidget/circleProgress.tsx
+++ b/apps/builder/src/widgetLibrary/CircleProgressWidget/circleProgress.tsx
@@ -45,7 +45,7 @@ export const WrappedCircleProgress = forwardRef<
 
 WrappedCircleProgress.displayName = "WrappedCircleProgress"
 
-export const CircleProgressWidget: FC<CircleProgressWidgetProps> = (props) => {
+export const CircleProgressWidget: FC<CircleProgressWidgetProps> = props => {
   const {
     value,
     showText,
diff --git a/apps/builder/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/DateRangeWidget/panelConfig.tsx
index 7521877b0e..3ee936e0af 100644
--- a/apps/builder/src/widgetLibrary/DateRangeWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/DateRangeWidget/panelConfig.tsx
@@ -93,7 +93,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -105,7 +105,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -124,7 +124,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/DateTimeWidget/dateTime.tsx b/apps/builder/src/widgetLibrary/DateTimeWidget/dateTime.tsx
index 1c510e33fd..ed2ea41262 100644
--- a/apps/builder/src/widgetLibrary/DateTimeWidget/dateTime.tsx
+++ b/apps/builder/src/widgetLibrary/DateTimeWidget/dateTime.tsx
@@ -148,7 +148,6 @@ export const DateTimeWidget: FC<DateTimeWidgetProps> = (props) => {
     value,
     pattern,
     regex,
-    required,
     customRule,
     hideValidationMessage,
   ])
diff --git a/apps/builder/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/DateTimeWidget/panelConfig.tsx
index 77fcbffbf1..b992295b68 100644
--- a/apps/builder/src/widgetLibrary/DateTimeWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/DateTimeWidget/panelConfig.tsx
@@ -91,7 +91,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -103,7 +103,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
diff --git a/apps/builder/src/widgetLibrary/DateWidget/date.tsx b/apps/builder/src/widgetLibrary/DateWidget/date.tsx
index b6d9fdd53e..34455a6ae0 100644
--- a/apps/builder/src/widgetLibrary/DateWidget/date.tsx
+++ b/apps/builder/src/widgetLibrary/DateWidget/date.tsx
@@ -140,7 +140,6 @@ export const DateWidget: FC<DateWidgetProps> = (props) => {
     value,
     pattern,
     regex,
-    required,
     customRule,
     hideValidationMessage,
   ])
diff --git a/apps/builder/src/widgetLibrary/DateWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/DateWidget/panelConfig.tsx
index af1933600c..faf75f4d67 100644
--- a/apps/builder/src/widgetLibrary/DateWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/DateWidget/panelConfig.tsx
@@ -84,7 +84,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -96,7 +96,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
diff --git a/apps/builder/src/widgetLibrary/DividerWidget/divider.tsx b/apps/builder/src/widgetLibrary/DividerWidget/divider.tsx
index f0c86309f2..95e26401e3 100644
--- a/apps/builder/src/widgetLibrary/DividerWidget/divider.tsx
+++ b/apps/builder/src/widgetLibrary/DividerWidget/divider.tsx
@@ -17,7 +17,7 @@ export const WrappedDivider = forwardRef<any, WrappedDividerProps>(
 
 WrappedDivider.displayName = "WrappedDivider"
 
-export const DividerWidget: FC<DividerWidgetProps> = (props) => {
+export const DividerWidget: FC<DividerWidgetProps> = props => {
   const {
     text,
     fs,
diff --git a/apps/builder/src/widgetLibrary/EditableWidget/editableText.tsx b/apps/builder/src/widgetLibrary/EditableWidget/editableText.tsx
index 8a247c9959..01bed6d887 100644
--- a/apps/builder/src/widgetLibrary/EditableWidget/editableText.tsx
+++ b/apps/builder/src/widgetLibrary/EditableWidget/editableText.tsx
@@ -12,7 +12,7 @@ import { Label } from "@/widgetLibrary/PublicSector/Label"
 import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage"
 import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper"
 
-export const WrappedEditableText: FC<WrappedEditableTextProps> = (props) => {
+export const WrappedEditableText: FC<WrappedEditableTextProps> = props => {
   const {
     value,
     placeholder,
@@ -39,7 +39,7 @@ export const WrappedEditableText: FC<WrappedEditableTextProps> = (props) => {
       {focus ? (
         <Input
           autoFocus
-          onChange={(value) => {
+          onChange={value => {
             handleUpdateDsl({ value })
           }}
           showCount={showCharacterCount}
@@ -77,7 +77,7 @@ export const WrappedEditableText: FC<WrappedEditableTextProps> = (props) => {
 }
 WrappedEditableText.displayName = "WrappedEditableText"
 
-export const EditableTextWidget: FC<EditableTextWidgetProps> = (props) => {
+export const EditableTextWidget: FC<EditableTextWidgetProps> = props => {
   const {
     value,
     placeholder,
diff --git a/apps/builder/src/widgetLibrary/EditableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/EditableWidget/panelConfig.tsx
index 373004fe10..2e236f757e 100644
--- a/apps/builder/src/widgetLibrary/EditableWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/EditableWidget/panelConfig.tsx
@@ -207,7 +207,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "regex",
         bindAttrName: ["pattern"],
         expectedType: VALIDATION_TYPES.STRING,
-        shown: (value) => value === "Regex",
+        shown: value => value === "Regex",
       },
       {
         id: `${baseWidgetName}-validation-max`,
diff --git a/apps/builder/src/widgetLibrary/ImageWidget/image.tsx b/apps/builder/src/widgetLibrary/ImageWidget/image.tsx
index 3e4bffe1e6..02a09c7933 100644
--- a/apps/builder/src/widgetLibrary/ImageWidget/image.tsx
+++ b/apps/builder/src/widgetLibrary/ImageWidget/image.tsx
@@ -27,7 +27,7 @@ export const WrappedImage = forwardRef<HTMLImageElement, WrappedImageProps>(
 
 WrappedImage.displayName = "WrappedImage"
 
-export const ImageWidget: FC<ImageWidgetProps> = (props) => {
+export const ImageWidget: FC<ImageWidgetProps> = props => {
   const {
     imageSrc,
     altText,
diff --git a/apps/builder/src/widgetLibrary/InputWidget/input.tsx b/apps/builder/src/widgetLibrary/InputWidget/input.tsx
index 6c365ebfe0..76fba52018 100644
--- a/apps/builder/src/widgetLibrary/InputWidget/input.tsx
+++ b/apps/builder/src/widgetLibrary/InputWidget/input.tsx
@@ -43,9 +43,9 @@ export const WrappedInput = forwardRef<HTMLInputElement, WrappedInputProps>(
         addonBefore={{ render: prefixText, custom: false }}
         suffix={suffixIcon}
         addonAfter={{ render: suffixText, custom: false }}
-        onChange={(value) => {
+        onChange={value => {
           setValue(value)
-          new Promise((resolve) => {
+          new Promise(resolve => {
             handleUpdateDsl({ value })
             resolve(true)
           }).then(() => {
@@ -66,7 +66,7 @@ export const WrappedInput = forwardRef<HTMLInputElement, WrappedInputProps>(
 )
 WrappedInput.displayName = "WrappedInput"
 
-export const InputWidget: FC<InputWidgetProps> = (props) => {
+export const InputWidget: FC<InputWidgetProps> = props => {
   const {
     value,
     placeholder,
@@ -120,6 +120,7 @@ export const InputWidget: FC<InputWidgetProps> = (props) => {
     customRule,
     hideValidationMessage,
     labelPosition,
+    updateComponentHeight,
   ])
 
   useEffect(() => {
diff --git a/apps/builder/src/widgetLibrary/InputWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/InputWidget/panelConfig.tsx
index 30d2b5d385..b2ce1eefdb 100644
--- a/apps/builder/src/widgetLibrary/InputWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/InputWidget/panelConfig.tsx
@@ -60,7 +60,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -72,7 +72,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -218,7 +218,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "regex",
         bindAttrName: ["pattern"],
         expectedType: VALIDATION_TYPES.STRING,
-        shown: (value) => value === "Regex",
+        shown: value => value === "Regex",
       },
       {
         id: `${baseWidgetName}-validation-max`,
diff --git a/apps/builder/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/NumberInputWidget/panelConfig.tsx
index f938407bdf..1442b73574 100644
--- a/apps/builder/src/widgetLibrary/NumberInputWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/NumberInputWidget/panelConfig.tsx
@@ -90,7 +90,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -102,7 +102,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -121,7 +121,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/index.tsx b/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/index.tsx
index 5270cfa180..dd94cf8e54 100644
--- a/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/index.tsx
+++ b/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/index.tsx
@@ -4,7 +4,7 @@ import { WarningCircleIcon } from "@illa-design/icon"
 import { handleValidateCheck } from "./utils"
 import { ValidateMessageProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface"
 
-export const InvalidMessage: FC<ValidateMessageProps> = (props) => {
+export const InvalidMessage: FC<ValidateMessageProps> = props => {
   const { value, hideValidationMessage, customRule, ...res } = props
 
   const message =
diff --git a/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/utils.tsx b/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/utils.tsx
index f1996a3361..744056b93c 100644
--- a/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/utils.tsx
+++ b/apps/builder/src/widgetLibrary/PublicSector/InvalidMessage/utils.tsx
@@ -33,8 +33,7 @@ export const handleValidateCheck = (
 }
 
 const validateEmail = (email: string) => {
-  const str =
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  const str = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
   const emailMatchPattern = new RegExp(str)
   return emailMatchPattern.test(email) ? undefined : invalidMessage.get("email")
 }
diff --git a/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx b/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx
index 0f09d8d129..d4eb74306a 100644
--- a/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx
+++ b/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx
@@ -23,7 +23,7 @@ import {
 import { componentsActions } from "@/redux/currentApp/editor/components/componentsSlice"
 
 export const getEventScripts = (events: EventsInProps[], eventType: string) => {
-  return events.filter(event => {
+  return events.filter((event) => {
     return event.eventType === eventType
   })
 }
@@ -35,22 +35,21 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
     const { displayName, type, w, h, unitW, unitH } = componentNode
 
     const displayNameMapProps = useSelector(getExecutionResult)
-    const {
-      handleUpdateGlobalData,
-      handleDeleteGlobalData,
-      globalData,
-    } = useContext(GLOBAL_DATA_CONTEXT)
+    const { handleUpdateGlobalData, handleDeleteGlobalData, globalData } =
+      useContext(GLOBAL_DATA_CONTEXT)
     const dispatch = useDispatch()
 
-    const allComponents = useSelector<RootState, ComponentNode[]>(rootState => {
-      const rootNode = getCanvas(rootState)
-      const parentNodeDisplayName = componentNode.parentNode
-      const target = searchDsl(rootNode, parentNodeDisplayName)
-      if (target) {
-        return target.childrenNode || []
-      }
-      return []
-    })
+    const allComponents = useSelector<RootState, ComponentNode[]>(
+      (rootState) => {
+        const rootNode = getCanvas(rootState)
+        const parentNodeDisplayName = componentNode.parentNode
+        const target = searchDsl(rootNode, parentNodeDisplayName)
+        if (target) {
+          return target.childrenNode || []
+        }
+        return []
+      },
+    )
 
     const updateComponentHeight = useCallback(
       (newHeight: number) => {
@@ -62,7 +61,7 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
         }
         const cloneDeepAllComponents = cloneDeep(allComponents)
         const findIndex = cloneDeepAllComponents.findIndex(
-          node => node.displayName === newItem.displayName,
+          (node) => node.displayName === newItem.displayName,
         )
         cloneDeepAllComponents.splice(findIndex, 1, newItem)
         if (componentNode.h < newItem.h) {
@@ -81,7 +80,7 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
             cloneDeepAllComponents,
           )
           effectMap.set(newItem.displayName, newItem)
-          effectMap.forEach(node => {
+          effectMap.forEach((node) => {
             if (node.displayName !== componentNode.displayName) {
               node.y -= effectRows
             }
@@ -101,10 +100,10 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
       [allComponents, componentNode, dispatch],
     )
 
-    const realProps = useMemo(() => displayNameMapProps[displayName] ?? {}, [
-      displayName,
-      displayNameMapProps,
-    ])
+    const realProps = useMemo(
+      () => displayNameMapProps[displayName] ?? {},
+      [displayName, displayNameMapProps],
+    )
 
     const handleUpdateDsl = useCallback(
       (value: Record<string, any>) => {
@@ -134,18 +133,60 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
       return []
     }, [realProps])
 
+    const getOnSortingChangeEventScripts = useCallback(() => {
+      const events = get(realProps, "events")
+      if (events) {
+        return getEventScripts(events, "sortingChange")
+      }
+      return []
+    }, [realProps])
+
+    const getOnPaginationChangeEventScripts = useCallback(() => {
+      const events = get(realProps, "events")
+      if (events) {
+        return getEventScripts(events, "paginationChange")
+      }
+      return []
+    }, [realProps])
+
+    const getOnColumnFiltersChangeEventScripts = useCallback(() => {
+      const events = get(realProps, "events")
+      if (events) {
+        return getEventScripts(events, "columnFiltersChange")
+      }
+      return []
+    }, [realProps])
+
     const handleOnChange = useCallback(() => {
-      getOnChangeEventScripts().forEach(scriptObj => {
+      getOnChangeEventScripts().forEach((scriptObj) => {
         runEventHandler(scriptObj, globalData)
       })
     }, [getOnChangeEventScripts, globalData])
 
     const handleOnClick = useCallback(() => {
-      getOnClickEventScripts().forEach(scriptObj => {
+      getOnClickEventScripts().forEach((scriptObj) => {
         runEventHandler(scriptObj, globalData)
       })
     }, [getOnClickEventScripts, globalData])
 
+    const handleOnSortingChange = useCallback(() => {
+      getOnSortingChangeEventScripts().forEach((scriptObj) => {
+        runEventHandler(scriptObj, globalData)
+      })
+    }, [getOnSortingChangeEventScripts, globalData])
+
+    const handleOnPaginationChange = useCallback(() => {
+      getOnPaginationChangeEventScripts().forEach((scriptObj) => {
+        runEventHandler(scriptObj, globalData)
+      })
+    }, [getOnPaginationChangeEventScripts, globalData])
+
+    const handleOnColumnFiltersChange = useCallback(() => {
+      getOnColumnFiltersChangeEventScripts().forEach((scriptObj) => {
+        runEventHandler(scriptObj, globalData)
+      })
+    }, [getOnColumnFiltersChangeEventScripts, globalData])
+
     if (!type) return null
     const COMP = widgetBuilder(type).widget
     if (!COMP) return null
@@ -164,6 +205,9 @@ export const TransformWidgetWrapper: FC<TransformWidgetProps> = memo(
           handleDeleteGlobalData={handleDeleteGlobalData}
           handleOnChange={handleOnChange}
           handleOnClick={handleOnClick}
+          handleOnSortingChange={handleOnSortingChange}
+          handleOnPaginationChange={handleOnPaginationChange}
+          handleOnColumnFiltersChange={handleOnColumnFiltersChange}
           handleUpdateDsl={handleUpdateDsl}
           updateComponentHeight={updateComponentHeight}
           displayName={displayName}
diff --git a/apps/builder/src/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig.ts b/apps/builder/src/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig.ts
index ad75be4e35..24e61a70e5 100644
--- a/apps/builder/src/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig.ts
+++ b/apps/builder/src/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig.ts
@@ -55,7 +55,7 @@ export const generatorEventHandlerConfig = (
         setterType: "EVENT_TARGET_ACTION_SELECT_SETTER",
         attrName: "queryID",
         bindAttrName: ["actionType"],
-        shown: (type) => type === "datasource",
+        shown: type => type === "datasource",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-actionMethod`,
@@ -63,7 +63,7 @@ export const generatorEventHandlerConfig = (
         setterType: "BASE_SELECT_SETTER",
         attrName: "widgetMethod",
         bindAttrName: ["queryID"],
-        shown: (type) => type === "datasource",
+        shown: type => type === "datasource",
         options: [{ label: "run", value: "executeAction" }],
       },
       {
@@ -72,7 +72,7 @@ export const generatorEventHandlerConfig = (
         setterType: "EVENT_TARGET_SELECT_SETTER",
         attrName: "widgetID",
         bindAttrName: ["actionType"],
-        shown: (type) => type === "widget",
+        shown: type => type === "widget",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-Method`,
@@ -80,7 +80,7 @@ export const generatorEventHandlerConfig = (
         setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER",
         attrName: "widgetMethod",
         bindAttrName: ["widgetID"],
-        shown: (widgetID) => !!widgetID,
+        shown: widgetID => !!widgetID,
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-Value`,
@@ -88,7 +88,7 @@ export const generatorEventHandlerConfig = (
         setterType: "CALC_SELF_INPUT_SETTER",
         attrName: "widgetTargetValue",
         bindAttrName: ["widgetMethod"],
-        shown: (widgetMethod) => widgetMethod === "setValue",
+        shown: widgetMethod => widgetMethod === "setValue",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-startValue`,
@@ -96,7 +96,7 @@ export const generatorEventHandlerConfig = (
         setterType: "CALC_SELF_INPUT_SETTER",
         attrName: "widgetTargetValue",
         bindAttrName: ["widgetMethod"],
-        shown: (widgetMethod) => widgetMethod === "setStartValue",
+        shown: widgetMethod => widgetMethod === "setStartValue",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-endValue`,
@@ -104,7 +104,7 @@ export const generatorEventHandlerConfig = (
         setterType: "CALC_SELF_INPUT_SETTER",
         attrName: "widgetTargetValue",
         bindAttrName: ["widgetMethod"],
-        shown: (widgetMethod) => widgetMethod === "setEndValue",
+        shown: widgetMethod => widgetMethod === "setEndValue",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-imageUrl`,
@@ -112,7 +112,7 @@ export const generatorEventHandlerConfig = (
         setterType: "CALC_SELF_INPUT_SETTER",
         attrName: "widgetTargetValue",
         bindAttrName: ["widgetMethod"],
-        shown: (widgetMethod) => widgetMethod === "setImageUrl",
+        shown: widgetMethod => widgetMethod === "setImageUrl",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-disabled`,
@@ -123,7 +123,7 @@ export const generatorEventHandlerConfig = (
         bindAttrName: ["type"],
         useCustomLayout: true,
         openDynamic: true,
-        shown: (type) => type === "widget",
+        shown: type => type === "widget",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-script`,
@@ -131,7 +131,7 @@ export const generatorEventHandlerConfig = (
         attrName: "script",
         bindAttrName: ["actionType"],
         expectedType: VALIDATION_TYPES.STRING,
-        shown: (type) => type === "script",
+        shown: type => type === "script",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-URL`,
@@ -140,7 +140,7 @@ export const generatorEventHandlerConfig = (
         attrName: "url",
         bindAttrName: ["actionType"],
         expectedType: VALIDATION_TYPES.STRING,
-        shown: (type) => type === "openUrl",
+        shown: type => type === "openUrl",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-newTab`,
@@ -151,7 +151,7 @@ export const generatorEventHandlerConfig = (
         bindAttrName: ["actionType"],
         useCustomLayout: true,
         openDynamic: true,
-        shown: (type) => type === "openUrl",
+        shown: type => type === "openUrl",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-title`,
@@ -160,7 +160,7 @@ export const generatorEventHandlerConfig = (
         attrName: "title",
         bindAttrName: ["actionType"],
         expectedType: VALIDATION_TYPES.STRING,
-        shown: (type) => type === "showNotification",
+        shown: type => type === "showNotification",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-description`,
@@ -169,7 +169,7 @@ export const generatorEventHandlerConfig = (
         expectedType: VALIDATION_TYPES.STRING,
         attrName: "description",
         bindAttrName: ["actionType"],
-        shown: (type) => type === "showNotification",
+        shown: type => type === "showNotification",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-notification-type`,
@@ -177,7 +177,7 @@ export const generatorEventHandlerConfig = (
         setterType: "BASE_SELECT_SETTER",
         attrName: "notificationType",
         bindAttrName: ["actionType"],
-        shown: (type) => type === "showNotification",
+        shown: type => type === "showNotification",
         options: [
           {
             label: i18n.t(
@@ -213,7 +213,7 @@ export const generatorEventHandlerConfig = (
         bindAttrName: ["actionType"],
         expectedType: VALIDATION_TYPES.NUMBER,
         placeholder: "{{4500}}",
-        shown: (type) => type === "showNotification",
+        shown: type => type === "showNotification",
       },
       {
         id: `${baseWidgetName}-interaction-event-handler-enabled`,
diff --git a/apps/builder/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx
index 41cb09a7c3..366b557229 100644
--- a/apps/builder/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx
@@ -32,7 +32,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         attrName: "manualOptions",
         setterType: "OPTION_LIST_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => !value || value === "static",
+        shown: value => !value || value === "static",
         childrenSetter: [
           {
             id: `${baseWidgetName}-options-label`,
@@ -63,7 +63,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         bindAttrName: ["optionConfigureMode"],
         expectedType: VALIDATION_TYPES.ARRAY,
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         isSetterSingleRow: true,
       },
       {
@@ -73,7 +73,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         attrName: "mappedOption",
         setterType: "OPTION_MAPPED_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         childrenSetter: [
           {
             id: `${baseWidgetName}-mappedOption-labels`,
@@ -143,7 +143,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -155,7 +155,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -174,7 +174,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx
index 61f416c63f..3a8194dfb8 100644
--- a/apps/builder/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx
@@ -32,7 +32,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "manualOptions",
         setterType: "OPTION_LIST_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => !value || value === "static",
+        shown: value => !value || value === "static",
         childrenSetter: [
           {
             id: `${baseWidgetName}-options-label`,
@@ -63,7 +63,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         bindAttrName: ["optionConfigureMode"],
         expectedType: VALIDATION_TYPES.ARRAY,
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         isSetterSingleRow: true,
       },
       {
@@ -73,7 +73,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "mappedOption",
         setterType: "OPTION_MAPPED_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         childrenSetter: [
           {
             id: `${baseWidgetName}-mappedOption-labels`,
@@ -143,7 +143,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -155,7 +155,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
diff --git a/apps/builder/src/widgetLibrary/RateWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/RateWidget/panelConfig.tsx
index 7c795102b7..6e4c83ef79 100644
--- a/apps/builder/src/widgetLibrary/RateWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/RateWidget/panelConfig.tsx
@@ -96,7 +96,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.top"), value: "top" },
@@ -108,7 +108,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -127,7 +127,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         expectedType: VALIDATION_TYPES.NUMBER,
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/SelectWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/SelectWidget/panelConfig.tsx
index a96b34f32c..0b9595e7a7 100644
--- a/apps/builder/src/widgetLibrary/SelectWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/SelectWidget/panelConfig.tsx
@@ -32,7 +32,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "manualOptions",
         setterType: "OPTION_LIST_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => !value || value === "static",
+        shown: value => !value || value === "static",
         childrenSetter: [
           {
             id: `${baseWidgetName}-options-label`,
@@ -63,7 +63,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         setterType: "INPUT_SETTER",
         bindAttrName: ["optionConfigureMode"],
         expectedType: VALIDATION_TYPES.ARRAY,
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         isSetterSingleRow: true,
       },
       {
@@ -74,7 +74,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "mappedOption",
         setterType: "OPTION_MAPPED_SETTER",
         bindAttrName: ["optionConfigureMode"],
-        shown: (value) => value === "dynamic",
+        shown: value => value === "dynamic",
         childrenSetter: [
           {
             id: `${baseWidgetName}-mappedOption-labels`,
@@ -152,7 +152,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.right"), value: "right" },
@@ -164,7 +164,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
@@ -182,7 +182,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelWidth",
         setterType: "INPUT_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         expectedType: VALIDATION_TYPES.NUMBER,
       },
     ],
diff --git a/apps/builder/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/SwitchWidget/panelConfig.tsx
index 5230bafa7a..5bfb121cf2 100644
--- a/apps/builder/src/widgetLibrary/SwitchWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/SwitchWidget/panelConfig.tsx
@@ -53,7 +53,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelPosition",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           { label: i18n.t("widget.public.left"), value: "left" },
           { label: i18n.t("widget.public.right"), value: "right" },
@@ -65,7 +65,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [
         attrName: "labelAlign",
         setterType: "RADIO_GROUP_SETTER",
         bindAttrName: ["labelHidden"],
-        shown: (value) => !value,
+        shown: value => !value,
         options: [
           {
             label: <HorizontalStartIcon />,
diff --git a/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts b/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts
new file mode 100644
index 0000000000..cf24fd486f
--- /dev/null
+++ b/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts
@@ -0,0 +1,26 @@
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+import i18n from "@/i18n/config"
+
+export const TABLE_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.sortingChange",
+      ),
+      value: "sortingChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.paginationChange",
+      ),
+      value: "paginationChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.columnFiltersChange",
+      ),
+      value: "columnFiltersChange",
+    },
+  ],
+  methods: [],
+}
diff --git a/apps/builder/src/widgetLibrary/TableWidget/index.ts b/apps/builder/src/widgetLibrary/TableWidget/index.ts
index b44e6834f2..2ce8e13e2d 100644
--- a/apps/builder/src/widgetLibrary/TableWidget/index.ts
+++ b/apps/builder/src/widgetLibrary/TableWidget/index.ts
@@ -1,5 +1,7 @@
 import { TABLE_WIDGET_CONFIG } from "@/widgetLibrary/TableWidget/widgetConfig"
+import { TABLE_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/TableWidget/eventHandlerConfig"
 
 export { TABLE_WIDGET_CONFIG } from "./widgetConfig"
+export { TABLE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
 export { TABLE_PANEL_CONFIG } from "./panelConfig"
 export { TableWidget } from "./table"
diff --git a/apps/builder/src/widgetLibrary/TableWidget/interface.ts b/apps/builder/src/widgetLibrary/TableWidget/interface.ts
index 1ca2962eae..eaa9497b89 100644
--- a/apps/builder/src/widgetLibrary/TableWidget/interface.ts
+++ b/apps/builder/src/widgetLibrary/TableWidget/interface.ts
@@ -1,7 +1,52 @@
-export interface WrappedTableProps {
-  originData: object[]
+import { TableProps } from "@illa-design/table"
+import { BaseWidgetProps } from "@/widgetLibrary/interface"
+import { HTMLAttributes } from "react"
+import { ColumnDef } from "@tanstack/react-table"
+
+export const ColumnTypeOption = [
+  { label: "Text", value: "text" },
+  { label: "Date", value: "date" },
+  { label: "Number", value: "number" },
+  { label: "Percent", value: "percent" },
+  { label: "Link", value: "link" },
+]
+
+type ColumnType = "text" | "date" | "number" | "percent" | "link"
+
+export interface ColumnItemShape
+  extends Pick<ColumnDef<object>, "cell" | "id"> {
+  accessorKey: string
+  header: string
+  value?: string
+  label?: string
+  disabled?: string
+  type?: ColumnType
+  enableSorting?: boolean
+  visible?: boolean
+  decimalPlaces?: number
+  format?: string
 }
 
-export interface TableWidgetProps {
-  originData: object[]
+export interface WrappedTableProps
+  extends HTMLAttributes<HTMLDivElement>,
+    Pick<
+      TableProps<any, any>,
+      | "loading"
+      | "columns"
+      | "filter"
+      | "download"
+      | "overFlow"
+      | "defaultSort"
+      | "columnVisibility"
+      | "multiRowSelection"
+      | "data"
+    > {
+  emptyState?: string
+  defaultSortKey?: string
+  defaultSortOrder?: "ascend" | "descend"
+  handleOnSortingChange?: () => void
+  handleOnPaginationChange?: () => void
+  handleOnColumnFiltersChange?: () => void
 }
+
+export interface TableWidgetProps extends WrappedTableProps, BaseWidgetProps {}
diff --git a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx
index 94e31ff80f..d088cd760e 100644
--- a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx
+++ b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx
@@ -1,7 +1,12 @@
 import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
 import i18n from "@/i18n/config"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"
+import { ColumnTypeOption } from "@/widgetLibrary/TableWidget/interface"
+import { TABLE_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/TableWidget/eventHandlerConfig"
 
 const baseWidgetName = "table"
+
 export const TABLE_PANEL_CONFIG: PanelConfig[] = [
   {
     id: `${baseWidgetName}-data`,
@@ -10,9 +15,186 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [
       {
         id: `${baseWidgetName}-basic-data`,
         labelName: i18n.t("editor.inspect.setter_label.data"),
-        attrName: "originData",
+        attrName: "data",
         isSetterSingleRow: true,
+        setterType: "TABLE_DATA_INPUT_SETTER",
+      },
+      {
+        id: `${baseWidgetName}-basic-emptyState`,
+        labelName: i18n.t("editor.inspect.setter_label.empty_state"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"),
+        attrName: "emptyState",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+      },
+      {
+        id: `${baseWidgetName}-basic-loading`,
+        labelName: i18n.t("editor.inspect.setter_label.loading"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"),
+        attrName: "loading",
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        openDynamic: true,
+        useCustomLayout: true,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-column`,
+    groupName: i18n.t("editor.inspect.setter_group.column"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-columns`,
+        useCustomLayout: true,
+        attrName: "columns",
+        setterType: "COLUMN_SETTER",
+        openDynamic: true,
+        childrenSetter: [
+          {
+            id: `${baseWidgetName}-column-header`,
+            labelName: i18n.t("editor.inspect.setter_label.column_title"),
+            attrName: "header",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.STRING,
+          },
+          {
+            id: `${baseWidgetName}-column-type`,
+            labelName: i18n.t("editor.inspect.setter_label.column_type"),
+            attrName: "type",
+            setterType: "BASE_SELECT_SETTER",
+            options: ColumnTypeOption,
+          },
+          {
+            id: `${baseWidgetName}-column-decimalPlaces`,
+            labelName: i18n.t("editor.inspect.setter_label.decimal_places"),
+            attrName: "decimalPlaces",
+            bindAttrName: ["type"],
+            shown: (value) => value === "number" || value === "percent",
+            placeholder: "{{ 0 }}",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.NUMBER,
+          },
+          {
+            id: `${baseWidgetName}-column-format`,
+            labelName: i18n.t("editor.inspect.setter_label.format"),
+            attrName: "format",
+            bindAttrName: ["type"],
+            shown: (value) => value === "date",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.STRING,
+          },
+          {
+            id: `${baseWidgetName}-basic-enableSorting`,
+            labelName: i18n.t("editor.inspect.setter_label.enable_sorting"),
+            attrName: "enableSorting",
+            setterType: "DYNAMIC_SWITCH_SETTER",
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+            openDynamic: true,
+            useCustomLayout: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-sort`,
+    groupName: i18n.t("editor.inspect.setter_group.sort"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-defaultSortKey`,
+        labelName: i18n.t("editor.inspect.setter_label.default_sort_key"),
+        attrName: "defaultSortKey",
+        setterType: "COLUMNS_SELECT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+        openDynamic: true,
+      },
+      {
+        id: `${baseWidgetName}-basic-defaultSortOrder`,
+        labelName: i18n.t("editor.inspect.setter_label.default_sort_order"),
+        attrName: "defaultSortOrder",
+        setterType: "RADIO_GROUP_SETTER",
+        options: [
+          { label: i18n.t("widget.table.ascend"), value: "ascend" },
+          { label: i18n.t("widget.table.descend"), value: "descend" },
+        ],
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-rowSelection`,
+    groupName: i18n.t("editor.inspect.setter_group.row_selection"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-multiRowSelection`,
+        labelName: i18n.t("editor.inspect.setter_label.multi_row_selection"),
+        attrName: "multiRowSelection",
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        openDynamic: true,
+        useCustomLayout: true,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-PAGINATION`,
+    groupName: i18n.t("editor.inspect.setter_group.pagination"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-overFlow`,
+        labelName: i18n.t("editor.inspect.setter_label.overFlow"),
+        attrName: "overFlow",
+        setterType: "RADIO_GROUP_SETTER",
+        options: [
+          { label: i18n.t("widget.table.pagination"), value: "pagination" },
+          { label: i18n.t("widget.table.scroll"), value: "scroll" },
+        ],
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-toolbar`,
+    groupName: i18n.t("editor.inspect.setter_group.toolbar"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-download`,
+        labelName: i18n.t("editor.inspect.setter_label.download"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.download"),
+        attrName: "download",
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        openDynamic: true,
+        useCustomLayout: true,
+      },
+      {
+        id: `${baseWidgetName}-basic-filter`,
+        labelName: i18n.t("editor.inspect.setter_label.filter"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.filter"),
+        attrName: "filter",
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        openDynamic: true,
+        useCustomLayout: true,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-interaction`,
+    groupName: i18n.t("editor.inspect.setter_group.interaction"),
+    children: [
+      {
+        ...generatorEventHandlerConfig(
+          baseWidgetName,
+          TABLE_EVENT_HANDLER_CONFIG.events,
+        ),
+      },
+      {
+        id: `${baseWidgetName}-interaction-disabled`,
+        labelName: i18n.t("editor.inspect.setter_label.disabled"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"),
+        attrName: "disabled",
         setterType: "INPUT_SETTER",
+        placeholder: "{{false}}",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
       },
     ],
   },
diff --git a/apps/builder/src/widgetLibrary/TableWidget/table.tsx b/apps/builder/src/widgetLibrary/TableWidget/table.tsx
index b2a5363ff7..47c1f5c726 100644
--- a/apps/builder/src/widgetLibrary/TableWidget/table.tsx
+++ b/apps/builder/src/widgetLibrary/TableWidget/table.tsx
@@ -1,39 +1,139 @@
-import { FC, useMemo } from "react"
+import { FC, forwardRef, useEffect, useMemo, useRef } from "react"
 import { Table } from "@illa-design/table"
-import { TableWidgetProps, WrappedTableProps } from "./interface"
-import { ColumnDef } from "@tanstack/react-table"
-
-export const WrappedTable: FC<WrappedTableProps> = (props) => {
-  const { originData } = props
-
-  let columnsDef: ColumnDef<object>[] = useMemo(() => {
-    let l: ColumnDef<object>[] = []
-    if (originData && originData.length > 0) {
-      Object.keys(originData[0]).forEach((key) => {
-        l.push({
-          header: key,
-          accessorKey: key,
-        })
-      })
+import {
+  ColumnItemShape,
+  TableWidgetProps,
+  WrappedTableProps,
+} from "./interface"
+import { cloneDeep } from "lodash"
+import { getCellForType } from "./utils"
+
+export const WrappedTable = forwardRef<HTMLInputElement, WrappedTableProps>(
+  (props, ref) => {
+    const {
+      data,
+      loading,
+      emptyState,
+      columns,
+      filter,
+      download,
+      overFlow,
+      defaultSort,
+      columnVisibility,
+      multiRowSelection,
+      handleOnSortingChange,
+      handleOnPaginationChange,
+      handleOnColumnFiltersChange,
+    } = props
+
+    return (
+      <Table
+        bordered
+        striped
+        borderedCell
+        pinedHeader
+        w="100%"
+        h="100%"
+        data={data}
+        columns={columns}
+        filter={filter}
+        loading={loading}
+        download={download}
+        overFlow={overFlow}
+        emptyProps={{ description: emptyState }}
+        defaultSort={defaultSort}
+        columnVisibility={columnVisibility}
+        multiRowSelection={multiRowSelection}
+        onSortingChange={handleOnSortingChange}
+        onPaginationChange={handleOnPaginationChange}
+        onColumnFiltersChange={handleOnColumnFiltersChange}
+      />
+    )
+  },
+)
+
+export const TableWidget: FC<TableWidgetProps> = (props) => {
+  const {
+    data,
+    emptyState,
+    loading,
+    columns,
+    filter,
+    download,
+    overFlow,
+    displayName,
+    defaultSortKey,
+    defaultSortOrder,
+    multiRowSelection,
+    handleUpdateDsl,
+    handleUpdateGlobalData,
+    handleDeleteGlobalData,
+  } = props
+
+  const defaultSort = useMemo(() => {
+    if (!defaultSortKey) return undefined
+    return [
+      {
+        id: defaultSortKey,
+        desc: defaultSortOrder === "descend",
+      },
+    ]
+  }, [defaultSortOrder, defaultSortKey])
+
+  const columnVisibility = useMemo(() => {
+    const res: Record<string, boolean> = {}
+    columns?.forEach((item) => {
+      const { visible, accessorKey } = item as ColumnItemShape
+      if (!visible) {
+        res[accessorKey] = false
+      }
+    })
+    return res
+  }, [columns])
+
+  const columnsDef = useMemo(() => {
+    const res: ColumnItemShape[] = []
+    columns?.forEach((item) => {
+      const transItem = cloneDeep(item) as ColumnItemShape
+      transItem["cell"] = getCellForType(transItem)
+      res.push(transItem)
+    })
+    return res
+  }, [columns])
+
+  useEffect(() => {
+    handleUpdateGlobalData(displayName, {
+      defaultSort,
+      data,
+      columns,
+    })
+    return () => {
+      handleDeleteGlobalData(displayName)
     }
-    return l
-  }, [originData])
+  }, [
+    displayName,
+    defaultSort,
+    data,
+    columns,
+    handleUpdateGlobalData,
+    handleUpdateDsl,
+    handleDeleteGlobalData,
+  ])
 
   return (
-    <Table
-      data={originData}
+    <WrappedTable
+      data={data}
+      emptyState={emptyState}
+      loading={loading}
+      filter={filter}
       columns={columnsDef}
-      bordered
-      striped
-      borderedCell
-      pinedHeader
-      w="100%"
-      h="100%"
+      download={download}
+      overFlow={overFlow}
+      columnVisibility={columnVisibility}
+      defaultSort={defaultSort}
+      multiRowSelection={multiRowSelection}
     />
   )
 }
 
-export const TableWidget: FC<TableWidgetProps> = (props) => {
-  const { originData } = props
-  return <WrappedTable originData={originData} />
-}
+WrappedTable.displayName = "WrappedTable"
diff --git a/apps/builder/src/widgetLibrary/TableWidget/utils.tsx b/apps/builder/src/widgetLibrary/TableWidget/utils.tsx
new file mode 100644
index 0000000000..d02f58e74b
--- /dev/null
+++ b/apps/builder/src/widgetLibrary/TableWidget/utils.tsx
@@ -0,0 +1,71 @@
+import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface"
+import { dayjsPro, isNumber } from "@illa-design/system"
+import { CellContext } from "@tanstack/table-core"
+import { Link } from "@illa-design/link"
+
+export const tansTableDataToColumns = (
+  data: Record<any, any>[],
+): ColumnItemShape[] => {
+  const columns: ColumnItemShape[] = []
+  if (data && data.length > 0) {
+    Object.keys(data[0]).forEach((key) => {
+      columns.push({
+        id: key,
+        header: key,
+        accessorKey: key,
+        enableSorting: true,
+        type: "text",
+        visible: true,
+        format: "YYYY-MM-DD",
+      })
+    })
+  }
+  return columns
+}
+
+const renderTableLink = (props: CellContext<any, any>) => {
+  const cellValue = props.getValue()
+  return cellValue ? (
+    <Link href={cellValue} target="_blank">{`${cellValue}`}</Link>
+  ) : (
+    "-"
+  )
+}
+
+export const getCellForType = (data: ColumnItemShape) => {
+  const {
+    type = "text",
+    decimalPlaces = 0,
+    format = "YYYY-MM-DD",
+    header,
+  } = data
+
+  switch (type) {
+    default:
+      return (props: CellContext<any, any>) => `${props.getValue() ?? "-"}`
+    case "text":
+      return (props: CellContext<any, any>) => {
+        return `${props.getValue() ?? "-"}`
+      }
+    case "link":
+      return renderTableLink
+    case "number":
+      return (props: CellContext<any, any>) => {
+        const formatVal = Number(props?.getValue())
+        return isNumber(formatVal) ? formatVal.toFixed(decimalPlaces) : "-"
+      }
+    case "percent":
+      return (props: CellContext<any, any>) => {
+        const formatVal = Number(props?.getValue())
+        return isNumber(formatVal)
+          ? `${(formatVal * 100).toFixed(decimalPlaces)}%`
+          : "-"
+      }
+    case "date":
+      return (props: CellContext<any, any>) => {
+        const cellValue = props?.getValue()
+        const formatVal = dayjsPro(cellValue).format(format)
+        return formatVal ? formatVal : "-"
+      }
+  }
+}
diff --git a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx
index 4e09e5d069..e57e7b65a9 100644
--- a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx
+++ b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx
@@ -1,63 +1,74 @@
 import { TextWidgetIcon } from "@illa-design/icon"
 import { WidgetConfig } from "@/widgetLibrary/interface"
 import i18n from "@/i18n/config"
+import { tansTableDataToColumns } from "@/widgetLibrary/TableWidget/utils"
 
-const fakeOriginData = [
+const originData = [
   {
+    id: 1,
     name: "Gerard Gislason",
     company: "Ameliorated explicit open system",
     phone: "(701) 882-0009 x344",
     address: "2741 Terry Glen Apt. 601",
   },
   {
+    id: 2,
     name: "Anne Lockman",
     company: "Customizable explicit solution",
     phone: "689.992.6307",
     address: "191 Schimmel Cliff Apt. 474",
   },
   {
+    id: 3,
     name: "Sue Hamill",
     company: "Proactive mission-critical open architecture",
     phone: "(686) 565-4880",
     address: "27002 Wilfredo Hill Suite 824",
   },
   {
+    id: 4,
     name: "Rosalie Keebler",
     company: "De-engineered bi-directional hardware",
     phone: "1-379-349-3046 x439",
     address: "29436 Keebler RestSuite 320",
   },
   {
+    id: 4,
     name: "Mrs. Florence Rohan I",
     company: "Customer-focused client-server budgetary management",
     phone: "1-718-234-7813 x1812",
     address: "2188 Brakus Islands Apt. 031",
   },
   {
+    id: 5,
     name: "Stacey Little",
     company: "Distributed interactive monitoring",
     phone: "(700) 403-5346",
     address: "47653 Reinger Row Apt. 480",
   },
   {
+    id: 6,
     name: "Kristie Zemlak",
     company: "Synchronised context-sensitive implementation",
     phone: "698-202-3176 x8337",
     address: "5700 Isac Spurs Suite 919",
   },
   {
+    id: 7,
     name: "Rhonda Torphy PhD",
     company: "User-friendly responsive hardware",
     phone: "470-744-4824 x376",
     address: "9826 Vincenzo Land Apt. 616",
   },
   {
+    id: 8,
     name: "Elizabeth Franecki",
     company: "Compatible upward-trending system engine",
     phone: "506-644-1590",
     address: "9316 Manuel Lodge Apt. 678",
   },
   {
+    id: 9,
     name: "Tasha Rohan",
     company: "Cloned scalable website",
     phone: "983.587.1143",
@@ -74,7 +85,16 @@ export const TABLE_WIDGET_CONFIG: WidgetConfig = {
   icon: <TextWidgetIcon size="100%" />,
   keywords: ["Table", "表格"],
   sessionType: "PRESENTATION",
-  defaults: {
-    originData: `{{${JSON.stringify(fakeOriginData)}}}`,
-  },
+  defaults: initTableWidgetDefaultProps(),
+}
+
+export function initTableWidgetDefaultProps() {
+  return {
+    data: `{{${JSON.stringify(originData)}}}`,
+    columns: tansTableDataToColumns(originData),
+    emptyState: "No rows found",
+    overFlow: "pagination",
+    download: false,
+    filter: false,
+  }
 }
diff --git a/apps/builder/src/widgetLibrary/TextWidget/text.tsx b/apps/builder/src/widgetLibrary/TextWidget/text.tsx
index 86be8c981f..b6960f42a0 100644
--- a/apps/builder/src/widgetLibrary/TextWidget/text.tsx
+++ b/apps/builder/src/widgetLibrary/TextWidget/text.tsx
@@ -7,7 +7,7 @@ import remarkGfm from "remark-gfm"
 import { Link } from "@illa-design/link"
 import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper"
 
-export const Text: FC<TextProps> = (props) => {
+export const Text: FC<TextProps> = props => {
   const {
     value,
     horizontalAlign,
@@ -48,7 +48,7 @@ export const Text: FC<TextProps> = (props) => {
 
 Text.displayName = "Text"
 
-export const TextWidget: FC<TextWidgetProps> = (props) => {
+export const TextWidget: FC<TextWidgetProps> = props => {
   const {
     value,
     horizontalAlign,
diff --git a/apps/builder/src/widgetLibrary/TimelineWidget/timeline.tsx b/apps/builder/src/widgetLibrary/TimelineWidget/timeline.tsx
index 1b94e42525..9f2f8f1f03 100644
--- a/apps/builder/src/widgetLibrary/TimelineWidget/timeline.tsx
+++ b/apps/builder/src/widgetLibrary/TimelineWidget/timeline.tsx
@@ -19,9 +19,7 @@ export const WrappedTimeline = forwardRef<any, WrappedTimelineProps>(
 
     const timelineItems = useMemo(() => {
       if (Array.isArray(items)) {
-        return items.map((item) => (
-          <TimelineItem key={item}>{item}</TimelineItem>
-        ))
+        return items.map(item => <TimelineItem key={item}>{item}</TimelineItem>)
       }
       return null
     }, [items])
@@ -36,7 +34,7 @@ export const WrappedTimeline = forwardRef<any, WrappedTimelineProps>(
 
 WrappedTimeline.displayName = "WrappedTimeline"
 
-export const TimelineWidget: FC<TimelineWidgetProps> = (props) => {
+export const TimelineWidget: FC<TimelineWidgetProps> = props => {
   const {
     items,
     direction,
diff --git a/apps/builder/src/widgetLibrary/componentListBuilder.tsx b/apps/builder/src/widgetLibrary/componentListBuilder.tsx
index de57269690..19afd6f30b 100644
--- a/apps/builder/src/widgetLibrary/componentListBuilder.tsx
+++ b/apps/builder/src/widgetLibrary/componentListBuilder.tsx
@@ -49,7 +49,7 @@ const translateChildren = (componentConfigs: WidgetConfig[]) => {
     CONTAINER: [],
     NAVIGATION: [],
   }
-  componentConfigs.forEach((item) => {
+  componentConfigs.forEach(item => {
     const { sessionType = "COMMON", type, displayName } = item
     if (!sessionConfigs[sessionType]) {
       sessionConfigs[sessionType] = []
@@ -67,7 +67,7 @@ const translateChildren = (componentConfigs: WidgetConfig[]) => {
 }
 
 const buildSessionTypeMapComponentConfig = (): NewTypeMapComponent => {
-  const componentConfigs = WidgetTypeList.map((item) => {
+  const componentConfigs = WidgetTypeList.map(item => {
     return getListItemConfig(item) as WidgetConfig
   }) as WidgetConfig[]
   return translateChildren(componentConfigs)
@@ -76,7 +76,7 @@ const buildSessionTypeMapComponentConfig = (): NewTypeMapComponent => {
 export const buildComponentList = (): ComponentSessionProps[] => {
   const configs = buildSessionTypeMapComponentConfig()
   const keys = Object.keys(configs) as SessionType[]
-  return keys.map((key) => {
+  return keys.map(key => {
     return {
       title: sessionTypeMapSessionNameKey[key],
       widgetCardInfos: configs[key],
diff --git a/apps/builder/src/widgetLibrary/widgetBuilder.tsx b/apps/builder/src/widgetLibrary/widgetBuilder.tsx
index baac8f293a..1ee041adb8 100644
--- a/apps/builder/src/widgetLibrary/widgetBuilder.tsx
+++ b/apps/builder/src/widgetLibrary/widgetBuilder.tsx
@@ -121,6 +121,7 @@ import {
 import {
   TABLE_PANEL_CONFIG,
   TABLE_WIDGET_CONFIG,
+  TABLE_EVENT_HANDLER_CONFIG,
   TableWidget,
 } from "@/widgetLibrary/TableWidget"
 
@@ -249,6 +250,7 @@ export const WidgetConfig: WidgetConfigs = {
     widget: TableWidget,
     config: TABLE_WIDGET_CONFIG,
     panelConfig: TABLE_PANEL_CONFIG,
+    eventHandlerConfig: TABLE_EVENT_HANDLER_CONFIG,
   },
 }
 
diff --git a/illa-design b/illa-design
index 53466cb702..4bdd6afe9d 160000
--- a/illa-design
+++ b/illa-design
@@ -1 +1 @@
-Subproject commit 53466cb70298e66cbd516fc42ce6be337a941303
+Subproject commit 4bdd6afe9d26330a87bf1ec16688486c1e29969b