diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
index 0322720fca..a9e659cc64 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
@@ -9,6 +9,7 @@ import useKnowledgeRetrievalSingleRunFormParams from '../../../../knowledge-retr
 import useCodeSingleRunFormParams from '../../../../code/use-single-run-form-params'
 import useTemplateTransformSingleRunFormParams from '../../../../template-transform/use-single-run-form-params'
 import useQuestionClassifierSingleRunFormParams from '../../../../question-classifier/use-single-run-form-params'
+import useHttpRequestSingleRunFormParams from '../../../../http/use-single-run-form-params'
 import useIterationSingleRunFormParams from '../../../../iteration/use-single-run-form-params'
 import { BlockEnum } from '@/app/components/workflow/types'
 import {
@@ -21,7 +22,7 @@ const singleRunFormParamsHooks: Record<BlockEnum, any> = {
   [BlockEnum.Code]: useCodeSingleRunFormParams,
   [BlockEnum.TemplateTransform]: useTemplateTransformSingleRunFormParams,
   [BlockEnum.QuestionClassifier]: useQuestionClassifierSingleRunFormParams,
-  [BlockEnum.HttpRequest]: undefined,
+  [BlockEnum.HttpRequest]: useHttpRequestSingleRunFormParams,
   [BlockEnum.Tool]: undefined,
   [BlockEnum.ParameterExtractor]: undefined,
   [BlockEnum.Iteration]: useIterationSingleRunFormParams,
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 4ba9b04a12..cba01602b6 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -16,8 +16,6 @@ import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/compo
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import { FileArrow01 } from '@/app/components/base/icons/src/vender/line/files'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import ResultPanel from '@/app/components/workflow/run/result-panel'
 
 const i18nPrefix = 'workflow.nodes.http'
 
@@ -45,16 +43,6 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     hideAuthorization,
     setAuthorization,
     setTimeout,
-    // single run
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    varInputs,
-    inputVarValues,
-    setInputVarValues,
-    runResult,
     isShowCurlPanel,
     showCurlPanel,
     hideCurlPanel,
@@ -178,24 +166,6 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           </>
         </OutputVars>
       </div>
-      {isShowSingleRun && (
-        <BeforeRunForm
-          nodeName={inputs.title}
-          nodeType={inputs.type}
-          onHide={hideSingleRun}
-          forms={[
-            {
-              inputs: varInputs,
-              values: inputVarValues,
-              onChange: setInputVarValues,
-            },
-          ]}
-          runningStatus={runningStatus}
-          onRun={handleRun}
-          onStop={handleStop}
-          result={<ResultPanel {...runResult} showSteps={false} />}
-        />
-      )}
       {(isShowCurlPanel && !readOnly) && (
         <CurlPanel
           nodeId={id}
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 68c0a89fe7..802a943eda 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import useVarList from '../_base/hooks/use-var-list'
@@ -9,7 +9,6 @@ import { type Authorization, type Body, BodyType, type HttpNodeType, type Method
 import useKeyValueList from './hooks/use-key-value-list'
 import { transformToBodyPayload } from './utils'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
-import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 import {
   useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
@@ -119,55 +118,6 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
   }, [])
 
-  // single run
-  const {
-    isShowSingleRun,
-    hideSingleRun,
-    getInputVars,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runInputData,
-    setRunInputData,
-    runResult,
-  } = useOneStepRun<HttpNodeType>({
-    id,
-    data: inputs,
-    defaultRunInputData: {},
-  })
-
-  const fileVarInputs = useMemo(() => {
-    if (!Array.isArray(inputs.body.data))
-      return ''
-
-    const res = inputs.body.data
-      .filter(item => item.file?.length)
-      .map(item => item.file ? `{{#${item.file.join('.')}#}}` : '')
-      .join(' ')
-    return res
-  }, [inputs.body.data])
-
-  const varInputs = getInputVars([
-    inputs.url,
-    inputs.headers,
-    inputs.params,
-    typeof inputs.body.data === 'string' ? inputs.body.data : inputs.body.data.map(item => item.value).join(''),
-    fileVarInputs,
-  ])
-
-  const inputVarValues = (() => {
-    const vars: Record<string, any> = {}
-    Object.keys(runInputData)
-      .forEach((key) => {
-        vars[key] = runInputData[key]
-      })
-    return vars
-  })()
-
-  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
-    setRunInputData(newPayload)
-  }, [setRunInputData])
-
   // curl import panel
   const [isShowCurlPanel, {
     setTrue: showCurlPanel,
@@ -214,16 +164,6 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     hideAuthorization,
     setAuthorization,
     setTimeout,
-    // single run
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    varInputs,
-    inputVarValues,
-    setInputVarValues,
-    runResult,
     // curl import
     isShowCurlPanel,
     showCurlPanel,
diff --git a/web/app/components/workflow/nodes/http/use-single-run-form-params.ts b/web/app/components/workflow/nodes/http/use-single-run-form-params.ts
new file mode 100644
index 0000000000..c5cd77d665
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/use-single-run-form-params.ts
@@ -0,0 +1,69 @@
+import type { MutableRefObject } from 'react'
+import type { InputVar, Variable } from '@/app/components/workflow/types'
+import { useCallback, useMemo } from 'react'
+import useNodeCrud from '../_base/hooks/use-node-crud'
+import type { HttpNodeType } from './types'
+
+type Params = {
+  id: string,
+  payload: HttpNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: MutableRefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  getInputVars,
+  setRunInputData,
+}: Params) => {
+  const { inputs } = useNodeCrud<HttpNodeType>(id, payload)
+
+  const fileVarInputs = useMemo(() => {
+    if (!Array.isArray(inputs.body.data))
+      return ''
+
+    const res = inputs.body.data
+      .filter(item => item.file?.length)
+      .map(item => item.file ? `{{#${item.file.join('.')}#}}` : '')
+      .join(' ')
+    return res
+  }, [inputs.body.data])
+  const varInputs = getInputVars([
+    inputs.url,
+    inputs.headers,
+    inputs.params,
+    typeof inputs.body.data === 'string' ? inputs.body.data : inputs.body.data.map(item => item.value).join(''),
+    fileVarInputs,
+  ])
+  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
+    setRunInputData(newPayload)
+  }, [setRunInputData])
+  const inputVarValues = (() => {
+    const vars: Record<string, any> = {}
+    Object.keys(runInputData)
+      .forEach((key) => {
+        vars[key] = runInputData[key]
+      })
+    return vars
+  })()
+
+  const forms = useMemo(() => {
+    return [
+      {
+        inputs: varInputs,
+        values: inputVarValues,
+        onChange: setInputVarValues,
+      },
+    ]
+  }, [inputVarValues, setInputVarValues, varInputs])
+
+  return {
+    forms,
+  }
+}
+
+export default useSingleRunFormParams