diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index 822eefdcdc5..71ecf0e746e 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -9,13 +9,13 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { CopyCheck } from '../../base/icons/src/vender/line/files'
 
-type Props = {
+type Props = Readonly<{
   label: string
   labelWidthClassName?: string
   value: string
   maskedValue?: string
   valueMaxWidthClassName?: string
-}
+}>
 
 const KeyValueItem: FC<Props> = ({
   label,
diff --git a/web/app/components/plugins/card/base/description.tsx b/web/app/components/plugins/card/base/description.tsx
index ff43f491dd9..171b0e02735 100644
--- a/web/app/components/plugins/card/base/description.tsx
+++ b/web/app/components/plugins/card/base/description.tsx
@@ -3,11 +3,11 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   text: string
   descriptionLineRows: number
-}
+}>
 
 const Description: FC<Props> = ({
   className,
diff --git a/web/app/components/plugins/card/base/download-count.tsx b/web/app/components/plugins/card/base/download-count.tsx
index db822158a7d..916d59802b3 100644
--- a/web/app/components/plugins/card/base/download-count.tsx
+++ b/web/app/components/plugins/card/base/download-count.tsx
@@ -2,9 +2,9 @@ import { RiInstallLine } from '@remixicon/react'
 import * as React from 'react'
 import { formatNumber } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   downloadCount: number
-}
+}>
 
 const DownloadCountComponent = ({
   downloadCount,
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index ac1b670204a..1112ea044e1 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -1,11 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   orgName?: string
   packageName: string
   packageNameClassName?: string
-}
+}>
 
 const OrgInfo = ({
   className,
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 6076a27ac3b..a686f3fd981 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -3,10 +3,10 @@ import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
 
-type Props = {
+type Props = Readonly<{
   wrapClassName: string
   loadingFileName?: string
-}
+}>
 
 export const LoadingPlaceholder = ({ className }: { className?: string }) => (
   <div className={cn('h-2 rounded-xs bg-text-quaternary opacity-20', className)} />
diff --git a/web/app/components/plugins/card/card-more-info.tsx b/web/app/components/plugins/card/card-more-info.tsx
index 237e9232d22..9e6b3b13276 100644
--- a/web/app/components/plugins/card/card-more-info.tsx
+++ b/web/app/components/plugins/card/card-more-info.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import DownloadCount from './base/download-count'
 
-type Props = {
+type Props = Readonly<{
   downloadCount?: number
   tags: string[]
-}
+}>
 
 const CardMoreInfoComponent = ({
   downloadCount,
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index d0202f2b351..82a18f02b5f 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -22,7 +22,7 @@ import OrgInfo from './base/org-info'
 import Placeholder from './base/placeholder'
 import Title from './base/title'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: Plugin
   titleLeft?: React.ReactNode
@@ -34,7 +34,7 @@ type Props = {
   isLoading?: boolean
   loadingFileName?: string
   limitedInstall?: boolean
-}
+}>
 
 const Card = ({
   className,
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index e8d500ffe37..5eae96c8825 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -8,13 +8,13 @@ import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import Card from '../../card'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 
-type Props = {
+type Props = Readonly<{
   payload?: Plugin | PluginDeclaration | PluginManifestInMarket | null
   isMarketPayload?: boolean
   isFailed: boolean
   errMsg?: string | null
   onCancel: () => void
-}
+}>
 
 const Installed: FC<Props> = ({
   payload,
diff --git a/web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx b/web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx
index a90620dbc67..899bb5c7d78 100644
--- a/web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx
+++ b/web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx
@@ -3,10 +3,10 @@ import type { VersionInfo } from '../../types'
 import { useMemo } from 'react'
 import { useCheckInstalled as useDoCheckInstalled } from '@/service/use-plugins'
 
-type Props = {
+type Props = Readonly<{
   pluginIds: string[]
   enabled: boolean
-}
+}>
 const useCheckInstalled = (props: Props) => {
   const { data, isLoading, error } = useDoCheckInstalled(props)
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 7f07ee21502..6a7b7ab84fb 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -18,12 +18,12 @@ export enum InstallType {
   fromDSL = 'fromDSL',
 }
 
-type Props = {
+type Props = Readonly<{
   installType?: InstallType
   fromDSLPayload: Dependency[]
   // plugins?: PluginDeclaration[]
   onClose: () => void
-}
+}>
 
 const InstallBundle: FC<Props> = ({
   installType = InstallType.fromMarketplace,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
index a25c2f59784..8dfde85722a 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -9,14 +9,14 @@ import Loading from '../../base/loading'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   dependency: GitHubItemAndMarketPlaceDependency
   versionInfo: VersionProps
   onFetchedPayload: (payload: Plugin) => void
   onFetchError: () => void
-}
+}>
 
 const Item: FC<Props> = ({
   checked,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
index 9f1db59ba16..b9a60802e2c 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@@ -9,13 +9,13 @@ import useGetIcon from '../../base/use-get-icon'
 import Version from '../../base/version'
 import usePluginInstallLimit from '../../hooks/use-install-plugin-limit'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload: Plugin
   isFromMarketPlace?: boolean
   versionInfo: VersionProps
-}
+}>
 
 const LoadedItem: FC<Props> = ({
   checked,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
index d02cb0f74f0..4fd596f6626 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
@@ -6,13 +6,13 @@ import * as React from 'react'
 import Loading from '../../base/loading'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload?: Plugin
   version: string
   versionInfo: VersionProps
-}
+}>
 
 const MarketPlaceItem: FC<Props> = ({
   checked,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
index 63880bde5f0..88a6da207a1 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
@@ -7,13 +7,13 @@ import LoadingError from '../../base/loading-error'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload: PackageDependency
   isFromMarketPlace?: boolean
   versionInfo: VersionProps
-}
+}>
 
 const PackageItem: FC<Props> = ({
   payload,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx b/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
index 2310063367f..689d3feaaf8 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
@@ -7,7 +7,7 @@ import { InstallStep } from '../../types'
 import Install from './steps/install'
 import Installed from './steps/installed'
 
-type Props = {
+type Props = Readonly<{
   step: InstallStep
   onStepChange: (step: InstallStep) => void
   onStartToInstall: () => void
@@ -15,7 +15,7 @@ type Props = {
   allPlugins: Dependency[]
   onClose: () => void
   isFromMarketPlace?: boolean
-}
+}>
 
 const ReadyToInstall: FC<Props> = ({
   step,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
index 49055f90a5c..6cac57a37ac 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
@@ -8,7 +8,7 @@ import MarketplaceItem from '../item/marketplace-item'
 import PackageItem from '../item/package-item'
 import { getPluginKey, useInstallMultiState } from './hooks/use-install-multi-state'
 
-type Props = {
+type Props = Readonly<{
   allPlugins: Dependency[]
   selectedPlugins: Plugin[]
   onSelect: (plugin: Plugin, selectedIndex: number, allCanInstallPluginsLength: number) => void
@@ -17,7 +17,7 @@ type Props = {
   onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
   isFromMarketPlace?: boolean
   ref?: React.Ref<ExposeRefs>
-}
+}>
 
 export type ExposeRefs = {
   selectAllPlugins: () => void
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index ab4c3c6a796..2932d929df5 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -22,14 +22,14 @@ import InstallMulti from './install-multi'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   allPlugins: Dependency[]
   onStartToInstall?: () => void
   onInstalled: (plugins: Plugin[], installStatus: InstallStatus[]) => void
   onCancel: () => void
   isFromMarketPlace?: boolean
   isHideButton?: boolean
-}
+}>
 
 const Install: FC<Props> = ({
   allPlugins,
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index 3fbf0c13ec2..d99f284e90b 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -9,12 +9,12 @@ import Card from '@/app/components/plugins/card'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import useGetIcon from '../../base/use-get-icon'
 
-type Props = {
+type Props = Readonly<{
   list: Plugin[]
   installStatus: InstallStatus[]
   onCancel: () => void
   isHideButton?: boolean
-}
+}>
 
 const Installed: FC<Props> = ({
   list,
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
index b6f4e9d3ce4..cd0562c516f 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
@@ -8,7 +8,7 @@ import Installed from '../base/installed'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import Install from './steps/install'
 
-type Props = {
+type Props = Readonly<{
   step: InstallStep
   onStepChange: (step: InstallStep) => void
   onStartToInstall: () => void
@@ -18,7 +18,7 @@ type Props = {
   manifest: PluginDeclaration | null
   errorMsg: string | null
   onError: (errorMsg: string) => void
-}
+}>
 
 const ReadyToInstall: FC<Props> = ({
   step,
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 32f86efe717..1fbccbbb4b7 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -19,14 +19,14 @@ import { pluginManifestToCardPluginProps } from '../../utils'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   uniqueIdentifier: string
   payload: PluginDeclaration
   onCancel: () => void
   onStartToInstall?: () => void
   onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
-}
+}>
 
 const Installed: FC<Props> = ({
   uniqueIdentifier,
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index d5563806590..ffaf81f26d2 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -43,7 +43,7 @@ function getUploadFailureMessage(response: unknown): string | undefined {
   return (response as UploadFailureResponse).message
 }
 
-type Props = {
+type Props = Readonly<{
   isBundle: boolean
   file: File
   onCancel: () => void
@@ -53,7 +53,7 @@ type Props = {
   }) => void
   onBundleUploaded: (result: Dependency[]) => void
   onFailed: (errorMsg: string) => void
-}
+}>
 
 const Uploading: FC<Props> = ({
   isBundle,
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 1461d2f7541..152225a6255 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -20,14 +20,14 @@ import { pluginManifestInMarketToPluginProps } from '../../utils'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   uniqueIdentifier: string
   payload: PluginManifestInMarket | Plugin
   onCancel: () => void
   onStartToInstall?: () => void
   onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
-}
+}>
 
 const Installed: FC<Props> = ({
   uniqueIdentifier,
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 2ce95d06bd6..1625860f4eb 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -4,11 +4,11 @@ import { useTranslation } from '#i18n'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Line from './line'
 
-type Props = {
+type Props = Readonly<{
   text?: string
   lightCard?: boolean
   className?: string
-}
+}>
 
 const Empty = ({
   text,
diff --git a/web/app/components/plugins/plugin-detail-panel/action-list.tsx b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
index 40317f4b788..3cbffdb5438 100644
--- a/web/app/components/plugins/plugin-detail-panel/action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
@@ -8,9 +8,9 @@ import {
   useBuiltinTools,
 } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ActionList = ({
   detail,
diff --git a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
index e9aeedfa01f..c689d9a854b 100644
--- a/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
@@ -7,9 +7,9 @@ import {
   useStrategyProviderDetail,
 } from '@/service/use-strategy'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const AgentStrategyList = ({
   detail,
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
index 6d8bb3e4660..57b8f01dd13 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@@ -6,12 +6,12 @@ import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uplo
 import Input from '@/app/components/base/input'
 import { InputVarType } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   inputsForms: any[]
   inputs: Record<string, any>
   inputsRef: any
   onFormChange: (value: Record<string, any>) => void
-}
+}>
 const AppInputsForm = ({
   inputsForms,
   inputs,
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index b525cb9b2f1..78ff395ac36 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -7,14 +7,14 @@ import Loading from '@/app/components/base/loading'
 import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
 import { useAppInputsFormSchema } from '@/app/components/plugins/plugin-detail-panel/app-selector/hooks/use-app-inputs-form-schema'
 
-type Props = {
+type Props = Readonly<{
   value?: {
     app_id: string
     inputs: Record<string, unknown>
   }
   appDetail: App
   onFormChange: (value: Record<string, unknown>) => void
-}
+}>
 
 const AppInputsPanel = ({
   value,
diff --git a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
index b8768b16a1d..e52ee795da0 100644
--- a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
@@ -10,9 +10,9 @@ import { useTranslation } from 'react-i18next'
 import { transformDataSourceToTool } from '@/app/components/workflow/block-selector/utils'
 import { useDataSourceList } from '@/service/use-pipeline'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ActionList = ({
   detail,
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index 2eb84b62aff..3fe0e66f583 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -31,12 +31,12 @@ import { PluginCategoryEnum, PluginSource } from '../../types'
 import { HeaderModals, PluginSourceBadge } from './components'
 import { useDetailHeaderState, usePluginOperations } from './hooks'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
   isReadmeView?: boolean
   onHide?: () => void
   onUpdate?: (isDelete?: boolean) => void
-}
+}>
 
 const getIconSrc = (icon: string | undefined, iconDark: string | undefined, theme: string, tenantId: string): string => {
   const iconFileName = theme === 'dark' && iconDark ? iconDark : icon
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index 8fff7c7da5f..7bf9504470d 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -31,11 +31,11 @@ import { NAME_FIELD } from './utils'
 
 type EndpointModalFormSchemas = ComponentProps<typeof EndpointModal>['formSchemas']
 
-type Props = {
+type Props = Readonly<{
   pluginDetail: PluginDetail
   data: EndpointListItem
   handleChange: () => void
-}
+}>
 
 const EndpointCard = ({
   pluginDetail,
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index 4dfdba58291..28f5d08dd44 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -19,9 +19,9 @@ import EndpointCard from './endpoint-card'
 import EndpointModal from './endpoint-modal'
 import { NAME_FIELD } from './utils'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 const EndpointList = ({ detail }: Props) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 9bb6da25cbf..cc952a4653d 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -21,13 +21,13 @@ import Form from '@/app/components/header/account-setting/model-provider-page/mo
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 
-type Props = {
+type Props = Readonly<{
   formSchemas: FormSchema[]
   defaultValues?: any
   onCancel: () => void
   onSaved: (value: Record<string, any>) => void
   pluginDetail: PluginDetail
-}
+}>
 
 const extractDefaultValues = (schemas: any[]) => {
   const result: Record<string, any> = {}
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 877b15c51e8..50f5e079251 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -23,11 +23,11 @@ import { usePluginStore } from './store'
 import { SubscriptionList } from './subscription-list'
 import { TriggerEventsList } from './trigger/event-list'
 
-type Props = {
+type Props = Readonly<{
   detail?: PluginDetail
   onUpdate: () => void
   onHide: () => void
-}
+}>
 
 const PluginDetailPanel: FC<Props> = ({
   detail,
diff --git a/web/app/components/plugins/plugin-detail-panel/model-list.tsx b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
index 21c7a88ffb7..4b2ae80ac75 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
@@ -5,9 +5,9 @@ import ModelIcon from '@/app/components/header/account-setting/model-provider-pa
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import { useModelProviderModelList } from '@/service/use-models'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ModelList = ({
   detail,
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
index 4d12efb9b56..a65a077d540 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
@@ -14,13 +14,13 @@ import { getSupportedPresetConfig } from '@/app/components/header/account-settin
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE } from '@/config'
 import { useModelParameterRules } from '@/service/use-common'
 
-type Props = {
+type Props = Readonly<{
   isAdvancedMode: boolean
   provider: string
   modelId: string
   completionParams: FormValue
   onCompletionParamsChange: (newParams: FormValue) => void
-}
+}>
 
 const LLMParamsPanel = ({
   isAdvancedMode,
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
index 7edf2f5d18c..c2895db6ee8 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
@@ -4,12 +4,12 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 
-type Props = {
+type Props = Readonly<{
   currentModel: any
   language: string
   voice: string
   onChange: (language: string, voice: string) => void
-}
+}>
 
 const supportedLanguages = languages.filter(item => item.supported)
 
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index aaf614f4be9..3f3889ea66d 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -15,7 +15,7 @@ import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-sele
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useAllMCPTools } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: ToolValue[]
   label: string
@@ -27,7 +27,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-}
+}>
 
 const MultipleToolSelector = ({
   disabled,
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index 43e953cac2e..a9c9615e19b 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 import { PluginSource } from '../types'
 
-type Props = {
+type Props = Readonly<{
   source: PluginSource
   onInfo: () => void
   onCheckVersion: () => void
@@ -25,7 +25,7 @@ type Props = {
   sideOffset?: number
   alignOffset?: number
   popupClassName?: string
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   source,
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index f8fd4c6fd43..49e292f0213 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -27,7 +27,7 @@ import Description from '@/app/components/plugins/card/base/description'
 import { API_PREFIX } from '@/config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 
-type Props = {
+type Props = Readonly<{
   provider: {
     author: string
     name: string
@@ -39,7 +39,7 @@ type Props = {
   }
   detail: StrategyDetailType
   onHide: () => void
-}
+}>
 
 const StrategyDetail: FC<Props> = ({
   provider,
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index b04250efc8f..d3908f9c0e1 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -9,7 +9,7 @@ import { useState } from 'react'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import StrategyDetailPanel from './strategy-detail'
 
-type Props = {
+type Props = Readonly<{
   provider: {
     author: string
     name: string
@@ -20,7 +20,7 @@ type Props = {
     tags: string[]
   }
   detail: StrategyDetail
-}
+}>
 
 const StrategyItem = ({
   provider,
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index 82d42856aed..e08e57c886d 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -22,12 +22,12 @@ import {
   useCommonModalState,
 } from './hooks/use-common-modal-state'
 
-type Props = {
+type Props = Readonly<{
   open?: boolean
   onClose: () => void
   createType: SupportedCreationMethods
   builder?: TriggerSubscriptionBuilder
-}
+}>
 
 export const CommonCreateModal = ({ open = true, onClose, createType, builder }: Props) => {
   return (
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index 8b4798e9026..cbfc68e4b14 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -19,11 +19,11 @@ import { CommonCreateModal } from './common-modal'
 import { OAuthClientSettingsModal } from './oauth-client'
 import { CreateButtonType, DEFAULT_METHOD } from './types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   buttonType?: CreateButtonType
   shape?: 'square' | 'circle'
-}
+}>
 
 const MAX_COUNT = 10
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index 80e2137b7e2..6ddc088d7d9 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -10,12 +10,12 @@ import OptionCard from '@/app/components/workflow/nodes/_base/components/option-
 import { usePluginStore } from '../../store'
 import { ClientTypeEnum, useOAuthClientState as useOAuthClientSettings } from './hooks/use-oauth-client-state'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   oauthConfig?: TriggerOAuthConfig
   onOpenChange: (open: boolean) => void
   showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
-}
+}>
 
 const CLIENT_TYPE_OPTIONS = [ClientTypeEnum.Default, ClientTypeEnum.Custom] as const
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
index 3599dc6260c..35acd53d654 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
@@ -14,13 +14,13 @@ import Input from '@/app/components/base/input'
 import { useDeleteTriggerSubscription } from '@/service/use-triggers'
 import { useSubscriptionList } from './use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: (deleted: boolean) => void
   isShow: boolean
   currentId: string
   currentName: string
   workflowsInUse: number
-}
+}>
 
 const tPrefix = 'subscription.list.item.actions.deleteConfirm'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
index 79d1760b397..e8baf02280c 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
@@ -17,11 +17,11 @@ import { parsePluginErrorMessage } from '@/utils/error-parser'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const EditStep = {
   EditCredentials: 'edit_credentials',
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
index 90e89d043a9..199df8377bb 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
@@ -6,11 +6,11 @@ import { ApiKeyEditModal } from './apikey-edit-modal'
 import { ManualEditModal } from './manual-edit-modal'
 import { OAuthEditModal } from './oauth-edit-modal'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
   const credentialType = subscription.credential_type
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
index c2783014638..0c5d96a5e22 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
@@ -15,11 +15,11 @@ import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const normalizeFormType = (type: string): FormTypeEnum => {
   switch (type) {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
index 46e0dab0918..1280d6a4752 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
@@ -15,11 +15,11 @@ import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const normalizeFormType = (type: string): FormTypeEnum => {
   switch (type) {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
index f71b31be46e..2cf7c56080e 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -16,10 +16,10 @@ import { useTranslation } from 'react-i18next'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
-type Props = {
+type Props = Readonly<{
   logs: TriggerLogEntity[]
   className?: string
-}
+}>
 
 enum LogTypeEnum {
   REQUEST = 'request',
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index 2fe3aae0342..d304f230813 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -14,10 +14,10 @@ import ActionButton from '@/app/components/base/action-button'
 import { DeleteConfirm } from './delete-confirm'
 import { EditModal } from './edit'
 
-type Props = {
+type Props = Readonly<{
   data: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const SubscriptionCard = ({ data, pluginDetail }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
index 33081aa7df7..44c4802b8fa 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
@@ -45,14 +45,14 @@ import SchemaModal from './schema-modal'
 
 export type ReasoningConfigValue = ReasoningConfigValueShape
 
-type Props = {
+type Props = Readonly<{
   value: ReasoningConfigValue
   onChange: (val: ReasoningConfigValue) => void
   schemas: ToolFormSchema[]
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId: string
-}
+}>
 
 const ReasoningConfigForm: React.FC<Props> = ({
   value,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
index 7522eefbf35..357f74cf957 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
@@ -11,12 +11,12 @@ import { useTranslation } from 'react-i18next'
 import VisualEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor'
 import { MittProvider, VisualEditorContextProvider } from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   schema: SchemaRoot
   rootName: string
   onClose: () => void
-}
+}>
 
 const SchemaModal: FC<Props> = ({
   isShow,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index 758ee98fb1b..85f2b86569c 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -17,11 +17,11 @@ import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/t
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
 
-type Props = {
+type Props = Readonly<{
   collection: Collection
   onCancel: () => void
   onSaved: (value: Record<string, unknown>) => void
-}
+}>
 
 const ToolCredentialForm: FC<Props> = ({
   collection,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index 06735865f70..5711326b104 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -20,7 +20,7 @@ import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/co
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
 
-type Props = {
+type Props = Readonly<{
   icon?: string | { content?: string, background?: string }
   providerName?: string
   isMCPTool?: boolean
@@ -39,7 +39,7 @@ type Props = {
   versionMismatch?: boolean
   open: boolean
   authRemoved?: boolean
-}
+}>
 
 const ToolItem = ({
   open,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
index 69d9dfee0b6..ff3c4b0aa67 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   provider?: ToolWithProvider
   value?: {
@@ -18,7 +18,7 @@ type Props = {
     tool_name: string
   }
   isConfigure?: boolean
-}
+}>
 
 const ToolTrigger = ({
   open,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 40166ff9ec2..499c89a0353 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -24,7 +24,7 @@ import {
 } from './components'
 import { useToolSelectorState } from './hooks/use-tool-selector-state'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   placement?: Placement
   offset?: OffsetOptions
@@ -45,7 +45,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-}
+}>
 
 const ToolSelector: FC<Props> = ({
   value,
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index fd54047807e..3c338b5760f 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -26,7 +26,7 @@ import { PluginSource } from '../types'
 
 const i18nPrefix = 'action'
 
-type Props = {
+type Props = Readonly<{
   author: string
   installationId: string
   pluginUniqueIdentifier: string
@@ -38,7 +38,7 @@ type Props = {
   isShowDelete: boolean
   onDelete: () => void
   meta?: MetaData
-}
+}>
 const Action: FC<Props> = ({
   author,
   installationId,
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index b47c53570c4..ee5caeaa29e 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -34,10 +34,10 @@ import { usePluginPageContext } from '../plugin-page/context'
 import { PluginCategoryEnum, PluginSource } from '../types'
 import Action from './action'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   plugin: PluginDetail
-}
+}>
 
 const PluginItem: FC<Props> = ({
   className,
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index c8f666326a8..a2a208233e4 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { memo } from 'react'
 import Card from '@/app/components/plugins/card'
 
-type Props = {
+type Props = Readonly<{
   plugin: Plugin
   onCancel: () => void
   mutation: Pick<UseMutationResult, 'isSuccess' | 'isPending'>
@@ -18,7 +18,7 @@ type Props = {
   description: ReactNode
   cardTitleLeft: ReactNode
   modalBottomLeft?: ReactNode
-}
+}>
 
 const PluginMutationModal: FC<Props> = ({
   plugin,
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 488ca91160c..d54564e0165 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -20,9 +20,9 @@ import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/ins
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 
-type Props = {
+type Props = Readonly<{
   onSwitchToMarketplaceTab: () => void
-}
+}>
 
 type InstallMethod = {
   icon: React.FC<{ className?: string }>
diff --git a/web/app/components/plugins/plugin-page/plugin-info.tsx b/web/app/components/plugins/plugin-page/plugin-info.tsx
index 6c836731cf4..fb771ad83b1 100644
--- a/web/app/components/plugins/plugin-page/plugin-info.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-info.tsx
@@ -7,12 +7,12 @@ import KeyValueItem from '../base/key-value-item'
 import { convertRepoToUrl } from '../install-plugin/utils'
 
 const i18nPrefix = 'pluginInfoModal'
-type Props = {
+type Props = Readonly<{
   repository?: string
   release?: string
   packageName?: string
   onHide: () => void
-}
+}>
 
 const PlugInfo: FC<Props> = ({
   repository,
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 4b1ffb2a7e0..710a748a853 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -19,10 +19,10 @@ import Description from './card/base/description'
 import DownloadCount from './card/base/download-count'
 import Title from './card/base/title'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: Plugin
-}
+}>
 
 const ProviderCardComponent: FC<Props> = ({
   className,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index bf22f26083d..6f8ee83b9f1 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -22,10 +22,10 @@ import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds,
 
 const i18nPrefix = 'autoUpdate'
 
-type Props = {
+type Props = Readonly<{
   payload: AutoUpdateConfig
   onChange: (payload: AutoUpdateConfig) => void
-}
+}>
 
 const SettingTimeZone: FC<{
   children?: React.ReactNode
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
index 5cec7d3730e..bf814e80341 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 
-type Props = {
+type Props = Readonly<{
   className: string
   noPlugins?: boolean
-}
+}>
 
 const NoDataPlaceholder: FC<Props> = ({
   className,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
index ccd0423fc3e..ec96e32f9cd 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AUTO_UPDATE_MODE } from './types'
 
-type Props = {
+type Props = Readonly<{
   updateMode: AUTO_UPDATE_MODE
-}
+}>
 
 const NoPluginSelected: FC<Props> = ({
   updateMode,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index ef25c355924..8494d28bf99 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -12,11 +12,11 @@ import { AUTO_UPDATE_MODE } from './types'
 
 const i18nPrefix = 'autoUpdate'
 
-type Props = {
+type Props = Readonly<{
   updateMode: AUTO_UPDATE_MODE
   value: string[] // plugin ids
   onChange: (value: string[]) => void
-}
+}>
 
 const PluginsPicker: FC<Props> = ({
   updateMode,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
index cdb07b88744..fed97497e62 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
@@ -6,10 +6,10 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 
 const MAX_DISPLAY_COUNT = 14
-type Props = {
+type Props = Readonly<{
   className?: string
   plugins: string[]
-}
+}>
 
 const PluginsSelected: FC<Props> = ({
   className,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
index 11f4aab9124..9818425ee1b 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
@@ -13,10 +13,10 @@ import { AUTO_UPDATE_STRATEGY } from './types'
 
 const i18nPrefix = 'autoUpdate.strategy'
 
-type Props = {
+type Props = Readonly<{
   value: AUTO_UPDATE_STRATEGY
   onChange: (value: AUTO_UPDATE_STRATEGY) => void
-}
+}>
 const StrategyPicker = ({
   value,
   onChange,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx
index b4dddcf8189..7b98ddb6667 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx
@@ -8,11 +8,11 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 
-type Props = {
+type Props = Readonly<{
   payload: PluginDetail
   isChecked?: boolean
   onCheckChange: () => void
-}
+}>
 
 const ToolItem: FC<Props> = ({
   payload,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index f6ffb1618e3..8360910b48f 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -18,13 +18,13 @@ import { PluginSource } from '../../types'
 import NoDataPlaceholder from './no-data-placeholder'
 import ToolItem from './tool-item'
 
-type Props = {
+type Props = Readonly<{
   trigger: React.ReactNode
   value: string[]
   onChange: (value: string[]) => void
   isShow: boolean
   onShowChange: (isShow: boolean) => void
-}
+}>
 
 const ToolPicker: FC<Props> = ({
   trigger,
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index 0ebe08e8f0b..d44572c4453 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -16,11 +16,11 @@ import { defaultValue as autoUpdateDefaultValue } from './auto-update-setting/co
 import Label from './label'
 
 const i18nPrefix = 'privilege'
-type Props = {
+type Props = Readonly<{
   payload: ReferenceSetting
   onHide: () => void
   onSave: (payload: ReferenceSetting) => void
-}
+}>
 
 const PluginSettingModal: FC<Props> = ({
   payload,
diff --git a/web/app/components/plugins/reference-setting-modal/label.tsx b/web/app/components/plugins/reference-setting-modal/label.tsx
index ad833cb30eb..fdc8965e2ec 100644
--- a/web/app/components/plugins/reference-setting-modal/label.tsx
+++ b/web/app/components/plugins/reference-setting-modal/label.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<{
   label: string
   description?: string
-}
+}>
 
 const Label: FC<Props> = ({
   label,
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
index 801c8ede515..e16d0e35da0 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'autoUpdate.pluginDowngradeWarning'
 
-type Props = {
+type Props = Readonly<{
   onCancel: () => void
   onJustDowngrade: () => void
   onExcludeAndDowngrade: () => void
-}
+}>
 const DowngradeWarningModal = ({
   onCancel,
   onJustDowngrade,
diff --git a/web/app/components/plugins/update-plugin/from-github.tsx b/web/app/components/plugins/update-plugin/from-github.tsx
index c4bf1a8a0ab..0245b32fa29 100644
--- a/web/app/components/plugins/update-plugin/from-github.tsx
+++ b/web/app/components/plugins/update-plugin/from-github.tsx
@@ -4,11 +4,11 @@ import type { UpdateFromGitHubPayload } from '../types'
 import * as React from 'react'
 import InstallFromGitHub from '../install-plugin/install-from-github'
 
-type Props = {
+type Props = Readonly<{
   payload: UpdateFromGitHubPayload
   onSave: () => void
   onCancel: () => void
-}
+}>
 
 const FromGitHub: FC<Props> = ({
   payload,
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 52484e65aa7..e312273d539 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -25,13 +25,13 @@ import DowngradeWarningModal from './downgrade-warning'
 
 const i18nPrefix = 'upgrade'
 
-type Props = {
+type Props = Readonly<{
   payload: UpdateFromMarketPlacePayload
   pluginId?: string
   onSave: () => void
   onCancel: () => void
   isShowDowngradeWarningModal?: boolean
-}
+}>
 
 type FailedUpgradeResponse = {
   task?: {
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index 458947da6bb..f5b8c3f78e5 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -15,7 +15,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import { isEarlierThanVersion } from '@/utils/semver'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   isShow: boolean
   onShowChange: (isShow: boolean) => void
@@ -34,7 +34,7 @@ type Props = {
     unique_identifier: string
     isDowngrade: boolean
   }) => void
-}
+}>
 
 const PluginVersionPicker: FC<Props> = ({
   disabled = false,