diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index b5849682e9..6a00c667a9 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -26,7 +26,7 @@ enum DocName {
 }
 
 type UpgradeOrDownloadProps = {
-  doc_name: DocName
+  readonly doc_name: DocName
 }
 const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
   const { t } = useTranslation()
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index 58f1262c56..7ff1f5383b 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -7,7 +7,7 @@ import classNames from '@/utils/classnames'
 import type { AppDetailResponse } from '@/models/app'
 
 type IAppBackProps = {
-  curApp: AppDetailResponse
+  readonly curApp: AppDetailResponse
 }
 export default function AppBack({ curApp }: IAppBackProps) {
   const { t } = useTranslation()
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 1c0dbc55d6..093a4956aa 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -12,8 +12,8 @@ import { useAppContext } from '@/context/app-context'
 import { noop } from 'lodash-es'
 
 type IAppSelectorProps = {
-  appItems: AppDetailResponse[]
-  curApp: AppDetailResponse
+  readonly appItems: AppDetailResponse[]
+  readonly curApp: AppDetailResponse
 }
 
 export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index d0452ac65c..86a3ca308d 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -6,7 +6,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import classNames from '@/utils/classnames'
 
 type HeaderWrapperProps = {
-  children: React.ReactNode
+  readonly children: React.ReactNode
 }
 
 const HeaderWrapper = ({
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index 8d27825247..51c3c33ff8 100644
--- a/web/app/components/header/indicator/index.tsx
+++ b/web/app/components/header/indicator/index.tsx
@@ -3,8 +3,8 @@
 import classNames from '@/utils/classnames'
 
 export type IndicatorProps = {
-  color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
-  className?: string
+  readonly color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
+  readonly className?: string
 }
 
 export type ColorMap = {
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index 292025caeb..63e9091473 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -9,10 +9,10 @@ import PremiumBadge from '../../base/premium-badge'
 import { Plan } from '../../billing/type'
 
 type PlanBadgeProps = {
-  plan: Plan
-  allowHover?: boolean
-  sandboxAsUpgrade?: boolean
-  onClick?: () => void
+  readonly plan: Plan
+  readonly allowHover?: boolean
+  readonly sandboxAsUpgrade?: boolean
+  readonly onClick?: () => void
 }
 
 const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
diff --git a/web/app/components/workflow/nodes/agent/node.tsx b/web/app/components/workflow/nodes/agent/node.tsx
index a2190317af..9d3d78ec4b 100644
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@@ -11,6 +11,7 @@ import { FormTypeEnum } from '@/app/components/header/account-setting/model-prov
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ModelBar } from './components/model-bar'
 
+// eslint-disable-next-line @eslint-react/prefer-read-only-props
 const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
   const { inputs, currentStrategy, currentStrategyStatus, pluginDetail } = useConfig(props.id, props.data)
   const renderI18nObject = useRenderI18nObject()
diff --git a/web/app/components/workflow/nodes/agent/panel.tsx b/web/app/components/workflow/nodes/agent/panel.tsx
index 7c87da8121..b6152a3b20 100644
--- a/web/app/components/workflow/nodes/agent/panel.tsx
+++ b/web/app/components/workflow/nodes/agent/panel.tsx
@@ -25,6 +25,7 @@ export function strategyParamToCredientialForm(param: StrategyParamItem): Creden
   }
 }
 
+// eslint-disable-next-line @eslint-react/prefer-read-only-props
 const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
   const {
     inputs,
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
index 4f53f6b163..2a87c3d96c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
@@ -2,10 +2,10 @@ import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 type CardProps = {
-  name: string
-  type: string
-  required: boolean
-  description?: string
+  readonly name: string
+  readonly type: string
+  readonly required: boolean
+  readonly description?: string
 }
 
 const Card: FC<CardProps> = ({
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 36671ab050..2099d83a62 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -13,13 +13,13 @@ import AddField from './add-field'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 
 type SchemaNodeProps = {
-  name: string
-  required: boolean
-  schema: Field
-  path: string[]
-  parentPath?: string[]
-  depth: number
-  readOnly?: boolean
+  readonly name: string
+  readonly required: boolean
+  readonly schema: Field
+  readonly path: string[]
+  readonly parentPath?: string[]
+  readonly depth: number
+  readonly readOnly?: boolean
 }
 
 // Support 10 levels of indentation
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 c3c0483bec..9b19015998 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,12 +12,12 @@ import type { ModelConfig } from '@/app/components/workflow/types'
 import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
-  className?: string
-  onGenerated?: (prompt: string) => void
-  modelConfig?: ModelConfig
-  nodeId: string
-  editorId?: string
-  currentPrompt?: string
+  readonly className?: string
+  readonly onGenerated?: (prompt: string) => void
+  readonly modelConfig?: ModelConfig
+  readonly nodeId: string
+  readonly editorId?: string
+  readonly currentPrompt?: string
 }
 
 const PromptGeneratorBtn: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
index 49425ff64c..ba0ce1d2fc 100644
--- a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
@@ -5,9 +5,9 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 
 type ReasoningFormatConfigProps = {
-  value?: 'tagged' | 'separated'
-  onChange: (value: 'tagged' | 'separated') => void
-  readonly?: boolean
+  readonly value?: 'tagged' | 'separated'
+  readonly onChange: (value: 'tagged' | 'separated') => void
+  readonly readonly?: boolean
 }
 
 const ReasoningFormatConfig: FC<ReasoningFormatConfigProps> = ({
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 191b9bfa4a..a5441fa33f 100644
--- a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
+++ b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
@@ -8,8 +8,8 @@ import { Resolution } from '@/types/app'
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
-  value: Resolution
-  onChange: (value: Resolution) => void
+  readonly value: Resolution
+  readonly onChange: (value: Resolution) => void
 }
 
 const ResolutionPicker: FC<Props> = ({