diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index fd0e87c7fc0..0b43a2b03ec 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -16,13 +16,13 @@ import { marketplaceQuery } from '@/service/client'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   onOpenChange: (v: boolean) => void
   author: string
   name: string
   version: string
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   open,
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 84ef3c29c1e..ced39083151 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -16,10 +16,10 @@ enum ActionType {
   download = 'download',
   // viewDetail = 'viewDetail', // wait for marketplace api
 }
-type Props = {
+type Props = Readonly<{
   payload: Plugin
   onAction: (type: ActionType) => void
-}
+}>
 
 const Item: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index dd8a6b6dd4b..571f6770058 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -36,7 +36,7 @@ import {
   useInvalidateAllWorkflowTools,
 } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   panelClassName?: string
   disabled: boolean
   trigger: React.ReactNode
@@ -49,7 +49,7 @@ type Props = {
   supportAddCustomTool?: boolean
   scope?: string
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolPicker: FC<Props> = ({
   disabled,
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index 1d2ccf05bee..7265b65b300 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -24,14 +24,14 @@ const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   provider: ToolWithProvider
   payload: Tool
   previewCardHandle: PreviewCardHandle
   disabled?: boolean
   isAdded?: boolean
   onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
-}
+}>
 
 export type ToolActionPreviewPayload = {
   providerIcon: ToolWithProvider['icon']
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
index e2694d1f06f..bdd87717bdf 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -8,7 +8,7 @@ import { useMemo } from 'react'
 import { ViewType } from '../../view-type-select'
 import Tool from '../tool'
 
-type Props = {
+type Props = Readonly<{
   payload: ToolWithProvider[]
   previewCardHandle: ToolActionPreviewCardHandle
   isShowLetterIndex: boolean
@@ -20,7 +20,7 @@ type Props = {
   letters: string[]
   toolRefs: RefObject<Record<string, HTMLDivElement | null>>
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolViewFlatView: FC<Props> = ({
   letters,
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
index aa4ce9abe2e..7e30b482c2c 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { ViewType } from '../../view-type-select'
 import Tool from '../tool'
 
-type Props = {
+type Props = Readonly<{
   groupName: string
   toolList: ToolWithProvider[]
   previewCardHandle: ToolActionPreviewCardHandle
@@ -16,7 +16,7 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-}
+}>
 
 const Item: FC<Props> = ({
   groupName,
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
index 9afdf1e022d..52ec7b57234 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { AGENT_GROUP_NAME, CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar'
 import Item from './item'
 
-type Props = {
+type Props = Readonly<{
   payload: Record<string, ToolWithProvider[]>
   previewCardHandle: ToolActionPreviewCardHandle
   hasSearchText: boolean
@@ -17,7 +17,7 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolListTreeView: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 080eb129f9f..a307b0672f7 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -31,7 +31,7 @@ const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: ToolWithProvider
   previewCardHandle: ToolActionPreviewCardHandle
@@ -42,7 +42,7 @@ type Props = {
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
   isShowLetterIndex?: boolean
-}
+}>
 
 const Tool: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
index 339ca93ee4f..b4a243b8079 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
@@ -10,14 +10,14 @@ import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
 import { BlockEnum } from '../../types'
 
-type Props = {
+type Props = Readonly<{
   provider: TriggerWithProvider
   payload: Event
   previewCardHandle: TriggerPluginActionPreviewCardHandle
   disabled?: boolean
   isAdded?: boolean
   onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
-}
+}>
 
 export type TriggerPluginActionPreviewPayload = {
   provider: TriggerWithProvider
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index f633e5e2572..5932bbb94ad 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -24,13 +24,13 @@ const normalizeProviderIcon = (icon?: TriggerWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: TriggerWithProvider
   hasSearchText: boolean
   previewCardHandle: TriggerPluginActionPreviewCardHandle
   onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
-}
+}>
 
 const TriggerPluginItem: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index 558da02d091..bf9bcb76474 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -10,10 +10,10 @@ export enum ViewType {
   tree = 'tree',
 }
 
-type Props = {
+type Props = Readonly<{
   viewType: ViewType
   onChange: (viewType: ViewType) => void
-}
+}>
 
 const ViewTypeSelect: FC<Props> = ({
   viewType,
diff --git a/web/app/components/workflow/candidate-node-main.tsx b/web/app/components/workflow/candidate-node-main.tsx
index a3a62345ff2..8161f4aefef 100644
--- a/web/app/components/workflow/candidate-node-main.tsx
+++ b/web/app/components/workflow/candidate-node-main.tsx
@@ -26,9 +26,9 @@ import {
 import { BlockEnum } from './types'
 import { getIterationStartNode, getLoopStartNode } from './utils'
 
-type Props = {
+type Props = Readonly<{
   candidateNode: Node
-}
+}>
 const CandidateNodeMain: FC<Props> = ({
   candidateNode,
 }) => {
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index 3a1ae22e1db..95d6b10d8b2 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -7,11 +7,11 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   text: string
   onClick: () => void
-}
+}>
 
 const AddButton: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
index c88859f4abc..bee2d3fe13e 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
@@ -5,13 +5,13 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   name: string
   value: boolean
   required?: boolean
   onChange: (value: boolean) => void
   readonly?: boolean
-}
+}>
 
 const BoolInput: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 8fc82c79130..f24d6c62a07 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -28,14 +28,14 @@ import CodeEditor from '../editor/code-editor'
 import TextEditor from '../editor/text-editor'
 import BoolInput from './bool-input'
 
-type Props = {
+type Props = Readonly<{
   payload: InputVar
   value: any
   onChange: (value: any) => void
   className?: string
   autoFocus?: boolean
   inStepRun?: boolean
-}
+}>
 
 const FormItem: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 1aaf0e9c243..73def4bc49e 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -10,13 +10,13 @@ import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import FormItem from './form-item'
 
-export type Props = {
+export type Props = Readonly<{
   className?: string
   label?: string
   inputs: InputVar[]
   values: Record<string, string>
   onChange: (newValues: Record<string, any>) => void
-}
+}>
 
 const Form: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
index 69d4e172dd5..15ca1503b32 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'singleRun'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   onHide: () => void
   children: React.ReactNode
-}
+}>
 
 const PanelWrap: FC<Props> = ({
   nodeName,
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 8ab79d0b6d2..279d8d48626 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -12,13 +12,13 @@ import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
 import { useHooksStore } from '../../../hooks-store'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   currentCode?: string
   className?: string
   onGenerated?: (prompt: string) => void
   codeLanguages: CodeLanguage
-}
+}>
 
 const CodeGenerateBtn: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/_base/components/config-vision.tsx b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
index 546cb1ac6bf..5b173834433 100644
--- a/web/app/components/workflow/nodes/_base/components/config-vision.tsx
+++ b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
@@ -15,7 +15,7 @@ import VarReferencePicker from './variable/var-reference-picker'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   isVisionModel: boolean
   readOnly: boolean
   enabled: boolean
@@ -23,7 +23,7 @@ type Props = {
   nodeId: string
   config?: VisionSetting
   onConfigChange: (config: VisionSetting) => void
-}
+}>
 
 const ConfigVision: FC<Props> = ({
   isVisionModel,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 8d7f1cb94b0..ba73ccfab94 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -19,7 +19,7 @@ import CodeGeneratorButton from '../code-generator-button'
 import ToggleExpandBtn from '../toggle-expand-btn'
 import Wrap from './wrap'
 
-type Props = {
+type Props = Readonly<{
   nodeId?: string
   className?: string
   title: React.JSX.Element | string
@@ -41,7 +41,7 @@ type Props = {
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   footer?: React.ReactNode
-}
+}>
 
 const Base: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 4944b079de9..fe8138a2f7b 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -13,11 +13,11 @@ import Editor from '.'
 
 const TO_WINDOW_OFFSET = 8
 
-type Props = {
+type Props = Readonly<{
   availableVars: NodeOutPutVar[]
   varList: Variable[]
   onAddVar?: (payload: Variable) => void
-} & EditorProps
+}> & EditorProps
 
 const CodeEditor: FC<Props> = ({
   availableVars,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 5649afaca49..5c825d6b2b4 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -21,7 +21,7 @@ if (typeof window !== 'undefined')
 
 const CODE_EDITOR_LINE_HEIGHT = 18
 
-export type Props = {
+export type Props = Readonly<{
   nodeId?: string
   value?: string | object
   placeholder?: React.JSX.Element | string
@@ -42,7 +42,7 @@ export type Props = {
   className?: string
   tip?: React.JSX.Element
   footer?: React.ReactNode
-}
+}>
 
 export const languageMap = {
   [CodeLanguage.javascript]: 'javascript',
diff --git a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
index 3de713c0672..aeee4b00012 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import Base from './base'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   title: React.JSX.Element | string
@@ -15,7 +15,7 @@ type Props = {
   placeholder?: string
   readonly?: boolean
   isInNode?: boolean
-}
+}>
 
 const TextEditor: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/wrap.tsx b/web/app/components/workflow/nodes/_base/components/editor/wrap.tsx
index 4ebedfe596c..94442bce6a4 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/wrap.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/wrap.tsx
@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useStore } from '@/app/components/workflow/store'
 
-type Props = {
+type Props = Readonly<{
   isInNode?: boolean
   isExpand: boolean
   className: string
   style: React.CSSProperties
   children: React.ReactNode
-}
+}>
 
 // It doesn't has workflow store
 const WrapInWebApp = ({
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index d17e05c258c..d4de8eb5557 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -8,7 +8,7 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: ReactNode
   tooltip?: ReactNode
@@ -19,7 +19,7 @@ type Props = {
   inline?: boolean
   required?: boolean
   warningDot?: boolean
-}
+}>
 
 const getTextFromNode = (node: ReactNode): string | undefined => {
   if (typeof node === 'string' || typeof node === 'number')
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index 861d525d9ad..cf86aee8d44 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -11,13 +11,13 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
 import { SupportUploadFileTypes } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
   selected: boolean
   onToggle: (type: SupportUploadFileTypes) => void
   onCustomFileTypesChange?: (customFileTypes: string[]) => void
   customFileTypes?: string[]
-}
+}>
 
 const FileTypeItem: FC<Props> = ({
   type,
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index df662dc3f82..3a9af995381 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -15,13 +15,13 @@ import FileTypeItem from './file-type-item'
 import InputNumberWithSlider from './input-number-with-slider'
 import OptionCard from './option-card'
 
-type Props = {
+type Props = Readonly<{
   payload: UploadFileSetting
   isMultiple: boolean
   inFeaturePanel?: boolean
   hideSupportFileType?: boolean
   onChange: (payload: UploadFileSetting) => void
-}
+}>
 
 const FileUploadSetting: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
index 6873d4f11df..05013ae6949 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 
-type Props = {
+type Props = Readonly<{
   value: boolean
   onChange: (value: boolean) => void
-}
+}>
 
 const FormInputBoolean: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index ad4ff29ec0e..f2db48f727f 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -41,7 +41,7 @@ import {
 } from './form-input-item.sections'
 import FormInputTypeSwitch from './form-input-type-switch'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema
@@ -55,7 +55,7 @@ type Props = {
   extraParams?: Record<string, unknown>
   providerType?: string
   disableVariableInsertion?: boolean
-}
+}>
 
 type FormInputValue = string | number | boolean | string[] | Record<string, unknown> | null | undefined
 
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
index 6ef12a0eae8..705367f38b6 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { VarType } from '@/app/components/workflow/nodes/tool/types'
 
-type Props = {
+type Props = Readonly<{
   value: VarType
   onChange: (value: VarType) => void
-}
+}>
 
 const FormInputTypeSwitch: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/_base/components/info-panel.tsx b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
index a7b2efb7ca2..bb125062e6f 100644
--- a/web/app/components/workflow/nodes/_base/components/info-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
@@ -2,10 +2,10 @@
 import type { FC, ReactNode } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   title: string
   content: ReactNode
-}
+}>
 
 const InfoPanel: FC<Props> = ({
   title,
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index c0d79138f54..950ce7d92f6 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -16,7 +16,7 @@ import PromptEditor from '@/app/components/base/prompt-editor'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   instanceId?: string
   className?: string
   placeholder?: string
@@ -30,7 +30,7 @@ type Props = {
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   insertVarTipToLeft?: boolean
-}
+}>
 
 const Editor: FC<Props> = ({
   instanceId,
diff --git a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
index 586149d727a..7d0cf9eaf22 100644
--- a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
@@ -13,10 +13,10 @@ import {
 import * as React from 'react'
 import { InputVarType } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   type: InputVarType
-}
+}>
 
 const getIcon = (type: InputVarType) => {
   return ({
diff --git a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
index cc801378b2c..e52659808ad 100644
--- a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   children: React.ReactNode
-}
+}>
 
 const ListNoDataPlaceholder: FC<Props> = ({
   children,
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 8d37e161667..27db3ac6028 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -46,14 +46,14 @@ const RoleItem: FC<RoleItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   config: { data?: Memory }
   onChange: (memory?: Memory) => void
   canSetRoleName?: boolean
   defaultMemory?: Memory
-}
+}>
 
 const MEMORY_DEFAULT: Memory = {
   window: { enabled: false, size: WINDOW_SIZE_DEFAULT },
diff --git a/web/app/components/workflow/nodes/_base/components/option-card.tsx b/web/app/components/workflow/nodes/_base/components/option-card.tsx
index e23ae222041..4bb860aba6d 100644
--- a/web/app/components/workflow/nodes/_base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/option-card.tsx
@@ -20,7 +20,7 @@ const variants = cva([], {
   },
 })
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: string
   onSelect: () => void
@@ -28,7 +28,7 @@ type Props = {
   disabled?: boolean
   align?: 'left' | 'center' | 'right'
   tooltip?: string
-} & VariantProps<typeof variants>
+}> & VariantProps<typeof variants>
 
 const OptionCard: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index 9eef21f9777..c5c5cd9a8db 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
 import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title?: string
   children: ReactNode
   operations?: ReactNode
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
-}
+}>
 
 const OutputVars: FC<Props> = ({
   title,
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 880765a9acd..7d136889898 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -39,7 +39,7 @@ import { CodeLanguage } from '../../../code/types'
 import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
 import Wrap from '../editor/wrap'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   headerClassName?: string
   instanceId?: string
@@ -81,7 +81,7 @@ type Props = {
   placeholderClassName?: string
   titleClassName?: string
   required?: boolean
-}
+}>
 
 const Editor: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index fb6e0e42119..9581f22fd4b 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -9,11 +9,11 @@ import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { getNodeInfoById, isSystemVar } from './variable/utils'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   value: string
   className?: string
-}
+}>
 
 const VAR_PLACEHOLDER = '@#!@#!'
 
diff --git a/web/app/components/workflow/nodes/_base/components/remove-button.tsx b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
index 03ca00fad49..0a3b756c2bc 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
@@ -4,10 +4,10 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   onClick: (e: React.MouseEvent) => void
-}
+}>
 
 const Remove: FC<Props> = ({
   onClick,
diff --git a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
index 6ae65da1ae6..2f1a0fed6dc 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
@@ -12,11 +12,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onConfirm: () => void
   onCancel: () => void
-}
+}>
 const i18nPrefix = 'common.effectVarConfirm'
 
 const RemoveVarConfirm: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index db4883c0512..03a7b1c2ae7 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -10,7 +10,7 @@ type Item = {
   value: string
   label: string
 }
-type Props = {
+type Props = Readonly<{
   className?: string
   trigger?: React.JSX.Element
   DropDownIcon?: any
@@ -26,7 +26,7 @@ type Props = {
   itemClassName?: string
   readonly?: boolean
   showChecked?: boolean
-}
+}>
 
 const TypeSelector: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 65c5e4ad69a..847e709e788 100644
--- a/web/app/components/workflow/nodes/_base/components/split.tsx
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 const Split: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 1e80b3a3664..74c2516f46f 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -4,7 +4,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
 
-type Props = {
+type Props = Readonly<{
   isFocus?: boolean
   onFocus?: () => void
   value: string
@@ -12,7 +12,7 @@ type Props = {
   wrapClassName?: string
   textClassName?: string
   readonly?: boolean
-}
+}>
 
 const SupportVarInput: FC<Props> = ({
   isFocus,
diff --git a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
index 8429d2a411a..3a0bda6578e 100644
--- a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
+++ b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
@@ -8,10 +8,10 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   isExpand: boolean
   onExpandChange: (isExpand: boolean) => void
-}
+}>
 
 const ExpandBtn: FC<Props> = ({
   isExpand,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
index 0ea72881472..b62006f5daf 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
@@ -6,11 +6,11 @@ import { useTranslation } from 'react-i18next'
 import ListEmpty from '@/app/components/base/list-empty'
 import VarReferenceVars from './var-reference-vars'
 
-type Props = {
+type Props = Readonly<{
   vars: NodeOutPutVar[]
   onChange: (value: ValueSelector, varDetail: Var) => void
   itemWidth?: number
-}
+}>
 const AssignedVarReferencePopup: FC<Props> = ({
   vars,
   onChange,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
index e793b5922a8..aca17258330 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
@@ -9,14 +9,14 @@ import { FormTypeEnum } from '@/app/components/header/account-setting/model-prov
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 
-type Props = {
+type Props = Readonly<{
   schema: Partial<CredentialFormSchema>
   readonly: boolean
   value: string
   onChange: (value: string | number, varKindType: VarKindType, varInfo?: Var) => void
   onOpenChange?: (open: boolean) => void
   isLoading?: boolean
-}
+}>
 
 const DEFAULT_SCHEMA = {} as CredentialFormSchema
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index dc0d6f75956..2954be21370 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -13,14 +13,14 @@ import TreeIndentLine from '../tree-indent-line'
 
 const MAX_DEPTH = 10
 
-type Props = {
+type Props = Readonly<{
   valueSelector: ValueSelector
   name: string
   payload: FieldType
   depth?: number
   readonly?: boolean
   onSelect?: (valueSelector: ValueSelector) => void
-}
+}>
 
 const Field: FC<Props> = ({
   valueSelector,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
index c9ba9465d95..00ca3ca1420 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
@@ -8,14 +8,14 @@ import * as React from 'react'
 import { useRef } from 'react'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   root: { nodeId?: string, nodeName?: string, attrName: string, attrAlias?: string }
   payload: StructuredOutput
   readonly?: boolean
   onSelect?: (valueSelector: ValueSelector) => void
   onHovering?: (value: boolean) => void
-}
+}>
 
 export const PickerPanelMain: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 863ec66eaba..807398a6a55 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -10,13 +10,13 @@ import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import TreeIndentLine from '../tree-indent-line'
 
-type Props = {
+type Props = Readonly<{
   name: string
   payload: FieldType
   required: boolean
   depth?: number
   rootClassName?: string
-}
+}>
 
 const Field: FC<Props> = ({
   name,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
index ba03c3b17a7..268fc9e96f5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
@@ -5,10 +5,10 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   payload: StructuredOutput
   rootClassName?: string
-}
+}>
 
 const ShowPanel: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index 0396a2e8717..5b6e865a2f9 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   depth?: number
   className?: string
-}
+}>
 
 const TreeIndentLine: FC<Props> = ({
   depth = 1,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index a4bbe9a6eb2..5ec99bbce9f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -13,13 +13,13 @@ import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var
 import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   outputs: OutputVar
   outputKeyOrders: string[]
   onChange: (payload: OutputVar, changedIndex?: number, newKey?: string) => void
   onRemove: (index: number) => void
-}
+}>
 
 const OutputVarList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
index 803164547d6..74425897b15 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
@@ -7,12 +7,12 @@ import { PickerPanelMain as Panel } from '@/app/components/workflow/nodes/_base/
 import { BlockEnum } from '@/app/components/workflow/types'
 import { Type } from '../../../llm/types'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   path: string[]
   varType: TypeWithArray
   nodeType?: BlockEnum
-}
+}>
 
 const VarFullPathPanel: FC<Props> = ({
   nodeName,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index dc5b48946f0..eefb73b1e45 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -17,7 +17,7 @@ import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var
 import RemoveButton from '../remove-button'
 import VarReferencePicker from './var-reference-picker'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readonly: boolean
   list: Variable[]
@@ -27,7 +27,7 @@ type Props = {
   onlyLeafNodeVar?: boolean
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
   isSupportFileVar?: boolean
-}
+}>
 
 const VarList: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index d10874761e8..a9ef140eeb9 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -25,7 +25,7 @@ export type HoverPopup
   = | { kind: 'full-path', panel: ReactElement }
     | { kind: 'invalid-variable', message: string }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   controlFocus: number
   currentProvider?: ToolWithProvider | TriggerWithProvider
@@ -70,7 +70,7 @@ type Props = {
   varKindTypes: Array<{ label: string, value: VarKindType }>
   varName: string
   variableCategory: string
-}
+}>
 
 const VarReferencePickerTrigger: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 3ff9b4a1cbd..297fd3528f9 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -55,7 +55,7 @@ import VarReferencePopup from './var-reference-popup'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
-type Props = {
+type Props = Readonly<{
   className?: string
   nodeId: string
   isShowNodeName?: boolean
@@ -85,7 +85,7 @@ type Props = {
   currentTool?: Tool
   currentProvider?: ToolWithProvider | TriggerWithProvider
   preferSchemaType?: boolean
-}
+}>
 
 const DEFAULT_VALUE_SELECTOR: Props['value'] = []
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
index 4aa1688a122..b098e5d849b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -8,14 +8,14 @@ import ListEmpty from '@/app/components/base/list-empty'
 import { useStore } from '@/app/components/workflow/store'
 import VarReferenceVars from './var-reference-vars'
 
-type Props = {
+type Props = Readonly<{
   vars: NodeOutPutVar[]
   popupFor?: 'assigned' | 'toAssigned'
   onChange: (value: ValueSelector, varDetail: Var) => void
   itemWidth?: number
   isSupportFileVar?: boolean
   preferSchemaType?: boolean
-}
+}>
 const VarReferencePopup: FC<Props> = ({
   vars,
   popupFor,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 77c1f6ae711..6990750a180 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -279,7 +279,7 @@ const Item: FC<ItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   hideSearch?: boolean
   searchText?: string
   searchBoxClassName?: string
@@ -295,7 +295,7 @@ type Props = {
   onManageInputField?: () => void
   autoFocus?: boolean
   preferSchemaType?: boolean
-}
+}>
 const VarReferenceVars: FC<Props> = ({
   hideSearch,
   searchText,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 14a88b44323..c1a5bab70c9 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -12,12 +12,12 @@ import {
 import * as React from 'react'
 import { VarType } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const TYPES = [VarType.string, VarType.number, VarType.boolean, VarType.arrayNumber, VarType.arrayString, VarType.arrayBoolean, VarType.arrayObject, VarType.object]
 const VarReferencePicker: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
index 31a7e3b9fdd..23d405b587e 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
@@ -12,7 +12,7 @@ import { useLastRun } from '@/service/use-workflow'
 import { FlowType } from '@/types/common'
 import NoData from './no-data'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   nodeId: string
   canSingleRun: boolean
@@ -23,7 +23,7 @@ type Props = {
   onSingleRunClicked: () => void
   singleRunResult?: NodeTracing
   isPaused?: boolean
-} & Partial<ResultPanelProps>
+}> & Partial<ResultPanelProps>
 
 const LastRun: FC<Props> = ({
   appId: _appId,
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
index 2a2de60d2dd..44c8b181b12 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -6,10 +6,10 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 
-type Props = {
+type Props = Readonly<{
   canSingleRun: boolean
   onSingleRun: () => void
-}
+}>
 
 const NoData: FC<Props> = ({
   canSingleRun,
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
index 08d4b8935da..bf5d738a4dc 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -20,7 +20,7 @@ import { VarType } from '@/app/components/workflow/types'
 import { AssignerNodeInputType, WriteMode } from '../../types'
 import OperationSelector from '../operation-selector'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: AssignerNodeOperation[]
@@ -33,7 +33,7 @@ type Props = {
   writeModeTypes?: WriteMode[]
   writeModeTypesArr?: WriteMode[]
   writeModeTypesNum?: WriteMode[]
-}
+}>
 
 const VarList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
index da6f324bae1..8df81f146de 100644
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ b/web/app/components/workflow/nodes/code/dependency-picker.tsx
@@ -14,11 +14,11 @@ import { useCallback, useState } from 'react'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import Input from '@/app/components/base/input'
 
-type Props = {
+type Props = Readonly<{
   value: CodeDependency
   available_dependencies: CodeDependency[]
   onChange: (dependency: CodeDependency) => void
-}
+}>
 
 const DependencyPicker: FC<Props> = ({
   available_dependencies,
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 340b892b09c..f102d815997 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -20,14 +20,14 @@ const MethodOptions = [
   { label: 'PUT', value: Method.put },
   { label: 'DELETE', value: Method.delete },
 ]
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readonly: boolean
   method: Method
   onMethodChange: (method: Method) => void
   url: string
   onUrlChange: (url: string) => void
-}
+}>
 
 const ApiInput: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index a3d8fc7331f..a0dda3b45ab 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -18,13 +18,13 @@ import RadioGroup from './radio-group'
 
 const i18nPrefix = 'nodes.http.authorization'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   payload: AuthorizationPayloadType
   onChange: (payload: AuthorizationPayloadType) => void
   isShow: boolean
   onHide: () => void
-}
+}>
 
 const Field = ({ title, isRequired, children }: { title: string, isRequired?: boolean, children: React.JSX.Element }) => {
   return (
diff --git a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
index 6af508ead2f..fff1fe79d6c 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
@@ -33,11 +33,11 @@ const Item: FC<ItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   options: Option[]
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const RadioGroup: FC<Props> = ({
   options,
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index 6c847dc6139..57af7cf827b 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -11,12 +11,12 @@ import { useTranslation } from 'react-i18next'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   isShow: boolean
   onHide: () => void
   handleCurlImport: (node: HttpNodeType) => void
-}
+}>
 
 const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
   const [inputString, setInputString] = useState('')
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 76be3ba08ab..88d9cec2941 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -17,12 +17,12 @@ import { isSupportedHttpBodyVariable } from './supported-body-vars'
 
 const UNIQUE_ID_PREFIX = 'key-value-'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   payload: Body
   onChange: (payload: Body) => void
-}
+}>
 
 const allTypes = [
   BodyType.none,
diff --git a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
index 1a9a37fa7b8..df993078605 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
@@ -8,11 +8,11 @@ import TextEditor from '@/app/components/workflow/nodes/_base/components/editor/
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   onSwitchToKeyValueEdit: () => void
-}
+}>
 
 const BulkEdit: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/http/components/key-value/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/index.tsx
index 02ba7c641dc..5c1eeca2c0c 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/index.tsx
@@ -4,7 +4,7 @@ import type { KeyValue } from '../../types'
 import * as React from 'react'
 import KeyValueEdit from './key-value-edit'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: KeyValue[]
@@ -12,7 +12,7 @@ type Props = {
   onAdd: () => void
   isSupportFile?: boolean
   // toggleKeyValueEdit: () => void
-}
+}>
 
 const KeyValueList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 2a4b6b23b68..857405d149b 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -10,7 +10,7 @@ import KeyValueItem from './item'
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: KeyValue[]
@@ -20,7 +20,7 @@ type Props = {
   // onSwitchToBulkEdit: () => void
   keyNotSupportVar?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const KeyValueList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 6fa83dac522..bea36104b8b 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -10,7 +10,7 @@ import RemoveButton from '@/app/components/workflow/nodes/_base/components/remov
 import { VarType } from '@/app/components/workflow/types'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   instanceId?: string
   nodeId: string
@@ -22,7 +22,7 @@ type Props = {
   readOnly?: boolean
   isSupportFile?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const InputItem: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index b349e8d8b22..28b33ba94e9 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -23,7 +23,7 @@ import InputItem from './input-item'
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   instanceId: string
   className?: string
   nodeId: string
@@ -37,7 +37,7 @@ type Props = {
   isSupportFile?: boolean
   keyNotSupportVar?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const KeyValueItem: FC<Props> = ({
   instanceId,
diff --git a/web/app/components/workflow/nodes/http/components/timeout/index.tsx b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
index 66a640ed146..027fdf284f7 100644
--- a/web/app/components/workflow/nodes/http/components/timeout/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
@@ -8,12 +8,12 @@ import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   payload: TimeoutPayloadType
   onChange: (payload: TimeoutPayloadType) => void
-}
+}>
 
 const i18nPrefix = 'nodes.http'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/add-input-field.tsx b/web/app/components/workflow/nodes/human-input/components/add-input-field.tsx
index b8fe4ebf9ad..3a5603cff7b 100644
--- a/web/app/components/workflow/nodes/human-input/components/add-input-field.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/add-input-field.tsx
@@ -4,12 +4,12 @@ import type { FormInputItem } from '../types'
 import * as React from 'react'
 import InputField from '@/app/components/base/prompt-editor/plugins/hitl-input-block/input-field'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   unavailableVariableNames?: string[]
   onSave: (newPayload: FormInputItem) => void
   onCancel: () => void
-}
+}>
 
 const AddInputField: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index b3149f6b667..b3f7a548a61 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -16,12 +16,12 @@ import { UserActionButtonType } from '../types'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   text: string
   data: UserActionButtonType
   onChange: (state: UserActionButtonType) => void
   readonly?: boolean
-}
+}>
 
 const ButtonStyleDropdown: FC<Props> = ({
   text = 'Button Text',
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
index 50c2bf333aa..47a1bc8ce95 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
@@ -14,7 +14,7 @@ import { UpgradeModal } from './upgrade-modal'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   value: DeliveryMethod[]
   nodesOutputVars?: NodeOutPutVar[]
@@ -23,7 +23,7 @@ type Props = {
   formInputs?: FormInputItem[]
   onChange: (value: DeliveryMethod[]) => void
   readonly?: boolean
-}
+}>
 
 const DeliveryMethodForm: React.FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
index 017b5228859..fe260edee4b 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
@@ -13,7 +13,7 @@ import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   email: string
   value: RecipientItem[]
   list: Member[]
@@ -21,7 +21,7 @@ type Props = {
   onSelect: (value: string) => void
   onAdd: (email: string) => void
   disabled?: boolean
-}
+}>
 
 const EmailInput = ({
   email,
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
index 91f381b55bb..537e71839b1 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
@@ -6,13 +6,13 @@ import { RiCloseCircleFill, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   email: string
   data: Member
   disabled?: boolean
   onDelete: (recipient: RecipientItem) => void
   isError: boolean
-}
+}>
 
 const EmailItem = ({
   email,
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
index d2ccd2ed608..eb741a89eb8 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
@@ -12,10 +12,10 @@ import MemberSelector from './member-selector'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   data: RecipientData
   onChange: (data: RecipientData) => void
-}
+}>
 
 const Recipient = ({
   data,
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
index 0e262e839e0..0d8569031d7 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
@@ -10,7 +10,7 @@ import Input from '@/app/components/base/input'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   value: Recipient[]
   searchValue: string
   onSearchChange: (value: string) => void
@@ -18,7 +18,7 @@ type Props = {
   onSelect: (value: string) => void
   email: string
   hideSearch?: boolean
-}
+}>
 
 const MemberList: FC<Props> = ({ searchValue, list, value, onSearchChange, onSelect, email, hideSearch }) => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index 1e2de58247d..4c4ee547754 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -17,12 +17,12 @@ import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   value: Recipient[]
   email: string
   onSelect: (value: string) => void
   list: Member[]
-}
+}>
 
 const MemberSelector: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index c0d27bfb6d4..280884389b2 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -12,13 +12,13 @@ import { useTranslation } from 'react-i18next'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { getButtonStyle, getRenderedFormInputs, hasInvalidSelectOrFileInput, initializeInputs, splitByOutputVar } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   data: HumanInputFormData
   showBackButton?: boolean
   handleBack?: () => void
   onSubmit?: ({ inputs, action }: { inputs: Record<string, HumanInputFieldValue>, action: string }) => Promise<void>
-}
+}>
 
 const FormContent = ({
   nodeName,
diff --git a/web/app/components/workflow/nodes/human-input/components/timeout.tsx b/web/app/components/workflow/nodes/human-input/components/timeout.tsx
index 682a56a002e..a8cfa121fb6 100644
--- a/web/app/components/workflow/nodes/human-input/components/timeout.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/timeout.tsx
@@ -6,12 +6,12 @@ import Input from '@/app/components/base/input'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   timeout: number
   unit: 'day' | 'hour'
   onChange: (state: { timeout: number, unit: 'day' | 'hour' }) => void
   readonly?: boolean
-}
+}>
 
 const TimeoutInput: FC<Props> = ({
   timeout,
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 889025191fb..4ca54041f4c 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -21,7 +21,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import ConditionAdd from './condition-add'
 import ConditionList from './condition-list'
 
-type Props = {
+type Props = Readonly<{
   isSubVariable?: boolean
   caseId?: string
   conditionId?: string
@@ -42,7 +42,7 @@ type Props = {
   availableNodes: Node[]
   varsIsVarFileAttribute?: Record<string, boolean>
   filterVar: (varPayload: Var) => boolean
-}
+}>
 
 const ConditionWrap: FC<Props> = ({
   isSubVariable,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index 096ddbf4f11..f2537f94e16 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -7,10 +7,10 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
 
-type Props = {
+type Props = Readonly<{
   selectedIds: string[]
   onChange: (dataSets: DataSet[]) => void
-}
+}>
 
 const AddDataset: FC<Props> = ({
   selectedIds,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index 778e0069042..c2a1aff4912 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -27,13 +27,13 @@ import FeatureIcon from '@/app/components/header/account-setting/model-provider-
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useKnowledge } from '@/hooks/use-knowledge'
 
-type Props = {
+type Props = Readonly<{
   payload: DataSet
   onRemove: () => void
   onChange: (dataSet: DataSet) => void
   readonly?: boolean
   editable?: boolean
-}
+}>
 
 const DatasetItem: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
index 9c1dd854ba0..1c14b6dbea1 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
@@ -9,11 +9,11 @@ import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { hasEditPermissionForDataset } from '@/utils/permission'
 import Item from './dataset-item'
 
-type Props = {
+type Props = Readonly<{
   list: DataSet[]
   onChange: (list: DataSet[]) => void
   readonly?: boolean
-}
+}>
 
 const DatasetList: FC<Props> = ({
   list,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index 8aa49c11376..987ee789147 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -20,7 +20,7 @@ import ConfigRetrievalContent from '@/app/components/app/configuration/dataset-c
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   payload: {
     retrieval_mode: RETRIEVE_TYPE
     multiple_retrieval_config?: MultipleRetrievalConfig
@@ -35,7 +35,7 @@ type Props = {
   rerankModalOpen: boolean
   onRerankModelOpenChange: (open: boolean) => void
   selectedDatasets: DataSet[]
-}
+}>
 
 const RetrievalConfig: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index a5b91ec1995..023fcefe39e 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -9,12 +9,12 @@ import Input from '@/app/components/workflow/nodes/_base/components/input-suppor
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readOnly: boolean
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const ExtractInput: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 6d92b8123ce..8a159ae62cf 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -30,14 +30,14 @@ const VAR_INPUT_SUPPORTED_KEYS: Record<string, VarType> = {
   size: VarType.number,
 }
 
-type Props = {
+type Props = Readonly<{
   condition: Condition
   varType: VarType
   onChange: (condition: Condition) => void
   hasSubVariable: boolean
   readOnly: boolean
   nodeId: string
-}
+}>
 
 const getExpectedVarType = (condition: Condition, varType: VarType) => {
   return condition.key ? VAR_INPUT_SUPPORTED_KEYS[condition.key] : varType
diff --git a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
index 223d24d96c4..95e27904c05 100644
--- a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
@@ -14,13 +14,13 @@ const LIMIT_SIZE_MIN = 1
 const LIMIT_SIZE_MAX = 20
 const LIMIT_SIZE_DEFAULT = 10
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   config: Limit
   onChange: (limit: Limit) => void
   canSetRoleName?: boolean
-}
+}>
 
 const LIMIT_DEFAULT: Limit = {
   enabled: false,
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index 53eb583bd4f..c6e374cb8d5 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { SUB_VARIABLES } from '../../constants'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   className?: string
-}
+}>
 
 type SubVariableOption = {
   value: string
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index c9a55d42ef9..275aad377b8 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -13,7 +13,7 @@ import { EditionType } from '../../../types'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   instanceId: string
   className?: string
   headerClassName?: string
@@ -40,7 +40,7 @@ type Props = {
   varList: Variable[]
   handleAddVariable: (payload: Variable) => void
   modelConfig?: ModelConfig
-}
+}>
 
 const roleOptions = [
   {
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 8665966e3d6..ee0407cb0c5 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -18,7 +18,7 @@ import ConfigPromptItem from './config-prompt-item'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   filterVar: (payload: Var, selector: ValueSelector) => boolean
@@ -35,7 +35,7 @@ type Props = {
   varList?: Variable[]
   handleAddVariable: (payload: any) => void
   modelConfig: ModelConfig
-}
+}>
 
 const ConfigPrompt: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
index 81d53ec488d..d867e969662 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
@@ -8,7 +8,7 @@ import MemoryConfig from '@/app/components/workflow/nodes/_base/components/memor
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import { FlowType } from '@/types/common'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   isChatMode: boolean
   isChatModel: boolean
@@ -24,7 +24,7 @@ type Props = {
   flowType?: FlowType
   handleSyeQueryChange: (query: string) => void
   handleMemoryChange: (memory?: Memory) => void
-}
+}>
 
 const i18nPrefix = 'nodes.llm'
 const DEFAULT_MEMORY: Memory = {
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index 82b0a24aefc..c5da2c68d52 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -9,7 +9,7 @@ import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/compo
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { StructureOutput } from './structure-output'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   inputs: LLMNodeType
   isModelSupportStructuredOutput: boolean | undefined
@@ -17,7 +17,7 @@ type Props = {
   setStructuredOutputCollapsed: (collapsed: boolean) => void
   handleStructureOutputEnableChange: (enabled: boolean) => void
   handleStructureOutputChange: (newOutput: StructuredOutput) => void
-}
+}>
 
 const i18nPrefix = 'nodes.llm'
 
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 0bd2cd798ec..ea4328a56da 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -12,14 +12,14 @@ import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
 import { useHooksStore } from '../../../hooks-store'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   onGenerated?: (prompt: string) => void
   modelConfig?: ModelConfig
   nodeId: string
   editorId?: string
   currentPrompt?: string
-}
+}>
 
 const PromptGeneratorBtn: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
index 8a1d06deb54..6380e5d6d1b 100644
--- a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
+++ b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
@@ -8,10 +8,10 @@ import { Resolution } from '@/types/app'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   value: Resolution
   onChange: (value: Resolution) => void
-}
+}>
 
 const ResolutionPicker: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index c7dadab2693..56a0f40fd70 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -8,11 +8,11 @@ import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable
 import { Type } from '../types'
 import { JsonSchemaConfigModal } from './json-schema-config-modal'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value?: StructuredOutput
   onChange: (value: StructuredOutput) => void
-}
+}>
 
 export function StructureOutput({
   className,
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index 3e1c70e3196..09d4869c770 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -17,7 +17,7 @@ import { SUB_VARIABLES } from './../default'
 import ConditionAdd from './condition-add'
 import ConditionList from './condition-list'
 
-type Props = {
+type Props = Readonly<{
   isSubVariable?: boolean
   conditionId?: string
   conditions: Condition[]
@@ -34,7 +34,7 @@ type Props = {
   nodeId: string
   availableNodes: Node[]
   availableVars: NodeOutPutVar[]
-}
+}>
 
 const ConditionWrap: FC<Props> = ({
   isSubVariable,
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index 3770d442fcd..48240858a17 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -25,9 +25,9 @@ import BlockSelector from '../../../../block-selector'
 
 const i18nPrefix = 'nodes.parameterExtractor'
 
-type Props = {
+type Props = Readonly<{
   onImport: (params: Param[]) => void
-}
+}>
 
 function toParmExactParams(toolParams: ToolParameter[], lan: string): Param[] {
   return toolParams.map((item) => {
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
index b8a38bca8ea..b47f73b8da5 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
@@ -11,11 +11,11 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 
 const i18nPrefix = 'nodes.parameterExtractor'
 
-type Props = {
+type Props = Readonly<{
   payload: Param
   onEdit: () => void
   onDelete: () => void
-}
+}>
 
 const Item: FC<Props> = ({
   payload,
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
index 01d16f64c80..853ade7300c 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
@@ -12,11 +12,11 @@ import EditParam from './update'
 
 const i18nPrefix = 'nodes.parameterExtractor'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   list: Param[]
   onChange: (list: Param[], moreInfo?: MoreInfo) => void
-}
+}>
 
 const List: FC<Props> = ({
   list,
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 5b28a8fcabd..7d9a37ae686 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -29,12 +29,12 @@ const DEFAULT_PARAM: Param = {
   required: false,
 }
 
-type Props = {
+type Props = Readonly<{
   type: 'add' | 'edit'
   payload?: Param
   onSave: (payload: Param, moreInfo?: MoreInfo) => void
   onCancel?: () => void
-}
+}>
 
 const TYPES = [ParamType.string, ParamType.number, ParamType.bool, ParamType.arrayString, ParamType.arrayNumber, ParamType.arrayObject, ParamType.arrayBool]
 
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
index c4b8809ffe2..f2f9a800190 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
@@ -9,10 +9,10 @@ import { ReasoningModeType } from '../types'
 
 const i18nPrefix = 'nodes.parameterExtractor'
 
-type Props = {
+type Props = Readonly<{
   type: ReasoningModeType
   onChange: (type: ReasoningModeType) => void
-}
+}>
 
 const ReasoningModePicker: FC<Props> = ({
   type,
diff --git a/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx b/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
index 21a925f7bc5..752a73270bd 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
@@ -9,7 +9,7 @@ import MemoryConfig from '../../_base/components/memory-config'
 
 const i18nPrefix = 'nodes.questionClassifiers'
 
-type Props = {
+type Props = Readonly<{
   instruction: string
   onInstructionChange: (instruction: string) => void
   hideMemorySetting: boolean
@@ -25,7 +25,7 @@ type Props = {
   }
   nodesOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
-}
+}>
 
 const AdvancedSetting: FC<Props> = ({
   instruction,
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index 9894e29cc11..38e42d6fe14 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -12,7 +12,7 @@ import { getCanonicalClassLabel, getDisplayClassLabel } from './class-label-util
 
 const i18nPrefix = 'nodes.questionClassifiers'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   headerClassName?: string
   nodeId: string
@@ -23,7 +23,7 @@ type Props = {
   readonly?: boolean
   filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
   onLabelEditStart?: () => void
-}
+}>
 
 const ClassItem: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index ef7764a106c..e8a809b5606 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -20,14 +20,14 @@ import { getDefaultClassLabel, isDefaultClassLabel } from './class-label-utils'
 const i18nPrefix = 'nodes.questionClassifiers'
 const INLINE_LABEL_HINT_STORAGE_KEY = 'question-classifier-inline-label-hint-dismissed'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   list: Topic[]
   onChange: (list: Topic[]) => void
   readonly?: boolean
   filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
   handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
-}
+}>
 
 const ClassList: FC<Props> = ({
   nodeId,
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index 2820f209d65..d3568960a0b 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -16,7 +16,7 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   payload: InputVar
@@ -26,7 +26,7 @@ type Props = {
   varKeys?: string[]
   showLegacyBadge?: boolean
   canDrag?: boolean
-}
+}>
 
 const VarItem: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index 6e5caf6a834..c606644f29d 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -13,11 +13,11 @@ import { ChangeType } from '@/app/components/workflow/types'
 import { hasDuplicateStr } from '@/utils/var'
 import VarItem from './var-item'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   list: InputVar[]
   onChange: (list: InputVar[], moreInfo?: { index: number, payload: MoreInfo }) => void
-}
+}>
 
 const VarList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/nodes/tool/components/copy-id.tsx b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
index 2c55b009a48..ff0b7249512 100644
--- a/web/app/components/workflow/nodes/tool/components/copy-id.tsx
+++ b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
@@ -6,9 +6,9 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   content: string
-}
+}>
 
 const prefixEmbedded = 'overview.appInfo.embedded'
 
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index 6765c92033f..7dbcf1f8300 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -20,7 +20,7 @@ import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use
 import { VarType } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '../types'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema[]
@@ -31,7 +31,7 @@ type Props = {
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
   currentTool?: Tool
   currentProvider?: ToolWithProvider
-}
+}>
 
 const InputVarList: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
index c8d60be7895..f858e5dc401 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
@@ -6,7 +6,7 @@ import type { Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import ToolFormItem from './item'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema[]
@@ -19,7 +19,7 @@ type Props = {
   showManageInputField?: boolean
   onManageInputField?: () => void
   extraParams?: Record<string, any>
-}
+}>
 
 const ToolForm: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index fa7c1b867d2..6680c5ad325 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -54,7 +54,7 @@ const renderDescriptionWithLinks = (description: string): ReactNode => {
   return parts
 }
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema
@@ -67,7 +67,7 @@ type Props = {
   onManageInputField?: () => void
   extraParams?: Record<string, any>
   providerType?: 'tool' | 'trigger'
-}
+}>
 
 const ToolFormItem: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx
index 7ed42ea0195..d3282f7d94a 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx
@@ -6,7 +6,7 @@ import type { TriggerWithProvider } from '@/app/components/workflow/block-select
 import type { PluginTriggerVarInputs } from '@/app/components/workflow/nodes/trigger-plugin/types'
 import TriggerFormItem from './item'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema[]
@@ -18,7 +18,7 @@ type Props = {
   currentProvider?: TriggerWithProvider
   extraParams?: Record<string, any>
   disableVariableInsertion?: boolean
-}
+}>
 
 const TriggerForm: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index 40119674d46..9427c8857f2 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -15,7 +15,7 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema
@@ -26,7 +26,7 @@ type Props = {
   currentProvider?: TriggerWithProvider
   extraParams?: Record<string, any>
   disableVariableInsertion?: boolean
-}
+}>
 
 const TriggerFormItem: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index 0f23c0c8913..3d8943515db 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -25,7 +25,7 @@ type Payload = VarGroupItemType & {
   group_name?: string
 }
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   payload: Payload
@@ -35,7 +35,7 @@ type Props = {
   canRemove?: boolean
   onRemove?: () => void
   availableVars: NodeOutPutVar[]
-}
+}>
 
 const VarGroupItem: FC<Props> = ({
   readOnly,
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
index 1f45a8a0e1d..c4f324272e3 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
@@ -11,14 +11,14 @@ import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/typ
 import ListNoDataPlaceholder from '../../../_base/components/list-no-data-placeholder'
 import RemoveButton from '../../../_base/components/remove-button'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: ValueSelector[]
   onChange: (list: ValueSelector[], value?: ValueSelector) => void
   onOpen?: (index: number) => void
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
-}
+}>
 
 const VarList: FC<Props> = ({
   readonly,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index 759c5cf8a23..da778851050 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -10,11 +10,11 @@ import { useTranslation } from 'react-i18next'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import BoolValue from './bool-value'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   list: boolean[]
   onChange: (list: boolean[]) => void
-}
+}>
 
 const ArrayValueList: FC<Props> = ({
   className,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index 03e476d981f..32f28732bd8 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -9,11 +9,11 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 
-type Props = {
+type Props = Readonly<{
   isString: boolean
   list: any[]
   onChange: (list: any[]) => void
-}
+}>
 
 const ArrayValueList: FC<Props> = ({
   isString = true,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
index 859a8bc7287..e75d48a8262 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx
@@ -4,10 +4,10 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import OptionCard from '../../../nodes/_base/components/option-card'
 
-type Props = {
+type Props = Readonly<{
   value: boolean
   onChange: (value: boolean) => void
-}
+}>
 
 const BoolValue: FC<Props> = ({
   value,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index a7d801ddcef..fa90a1c012d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -9,11 +9,11 @@ import ActionButton from '@/app/components/base/action-button'
 import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 
-type Props = {
+type Props = Readonly<{
   index: number
   list: any[]
   onChange: (list: any[]) => void
-}
+}>
 
 const typeList = [
   ChatVarType.String,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
index 1db0a559c37..58b7537dddb 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
@@ -4,10 +4,10 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ObjectValueItem from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
 
-type Props = {
+type Props = Readonly<{
   list: any[]
   onChange: (list: any[]) => void
-}
+}>
 
 const ObjectValueList: FC<Props> = ({
   list,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index 4a0f79d2763..5544b6c3513 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -7,14 +7,14 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   setOpen: (value: React.SetStateAction<boolean>) => void
   showTip: boolean
   chatVar?: ConversationVariable
   onClose: () => void
   onSave: (env: ConversationVariable) => void
-}
+}>
 
 const VariableModalTrigger = ({
   open,
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 7000f1d64de..75a14e6c88c 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -23,10 +23,10 @@ import { useStore } from '@/app/components/workflow/store'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
 
-type Props = {
+type Props = Readonly<{
   conversationID: string
   onHide: () => void
-}
+}>
 
 const ConversationVariableModal = ({
   conversationID,
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index 600a86e09c6..162facc262d 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -7,13 +7,13 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   setOpen: (value: React.SetStateAction<boolean>) => void
   env?: EnvironmentVariable
   onClose: () => void
   onSave: (env: EnvironmentVariable) => void
-}
+}>
 
 const VariableTrigger = ({
   open,
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index 46cd160620b..e803570df95 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -5,9 +5,9 @@ import { capitalize } from 'es-toolkit/string'
 import { memo } from 'react'
 import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
 
-type Props = {
+type Props = Readonly<{
   payload: GlobalVariable
-}
+}>
 
 const Item = ({
   payload,
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index 10004236dd8..6a40a755396 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -25,9 +25,9 @@ import {
   WorkflowRunningStatus,
 } from '../types'
 
-type Props = {
+type Props = Readonly<{
   onRun: () => void
-}
+}>
 
 const InputsPanel = ({ onRun }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/workflow-generator/example-prompts.tsx b/web/app/components/workflow/workflow-generator/example-prompts.tsx
index e105f989115..ebe3bbb452b 100644
--- a/web/app/components/workflow/workflow-generator/example-prompts.tsx
+++ b/web/app/components/workflow/workflow-generator/example-prompts.tsx
@@ -3,10 +3,10 @@ import type { WorkflowGeneratorMode } from './types'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   mode: WorkflowGeneratorMode
   onSelect: (prompt: string) => void
-}
+}>
 
 /**
  * "Try one of these" chips that sit below the instruction textarea.
diff --git a/web/app/components/workflow/workflow-generator/generation-phases.tsx b/web/app/components/workflow/workflow-generator/generation-phases.tsx
index f2dd7c0c99e..6ff5b72e27a 100644
--- a/web/app/components/workflow/workflow-generator/generation-phases.tsx
+++ b/web/app/components/workflow/workflow-generator/generation-phases.tsx
@@ -17,7 +17,7 @@ import Loading from '@/app/components/base/loading'
 const PLANNING_MS = 3500
 const BUILDING_MS = 12000
 
-type Props = {
+type Props = Readonly<{
   /**
    * Per-attempt nonce — typically ``Date.now()`` of when Generate was
    * clicked. The component resets ``phaseIndex`` whenever this changes so a
@@ -25,7 +25,7 @@ type Props = {
    * resuming wherever the previous attempt left off.
    */
   startedAt: number
-}
+}>
 
 const GenerationPhases = ({ startedAt }: Props) => {
   const { t } = useTranslation('workflow')