diff --git a/web/app/components/datasets/common/chunking-mode-label.tsx b/web/app/components/datasets/common/chunking-mode-label.tsx
index 7afc56f0d6f..6917650297e 100644
--- a/web/app/components/datasets/common/chunking-mode-label.tsx
+++ b/web/app/components/datasets/common/chunking-mode-label.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 
-type Props = {
+type Props = Readonly<{
   isGeneralMode: boolean
   isQAMode: boolean
-}
+}>
 
 const ChunkingModeLabel: FC<Props> = ({
   isGeneralMode,
diff --git a/web/app/components/datasets/common/document-file-icon.tsx b/web/app/components/datasets/common/document-file-icon.tsx
index d831cd78aad..edf79c6c114 100644
--- a/web/app/components/datasets/common/document-file-icon.tsx
+++ b/web/app/components/datasets/common/document-file-icon.tsx
@@ -19,12 +19,12 @@ const extendToFileTypeMap: { [key: string]: FileAppearanceType } = {
   docx: FileAppearanceTypeEnum.word,
 }
 
-type Props = {
+type Props = Readonly<{
   extension?: string
   name?: string
   size?: 'sm' | 'md' | 'lg' | 'xl'
   className?: string
-}
+}>
 
 const DocumentFileIcon: FC<Props> = ({
   extension,
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 366e744cbd1..726efb5f260 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -8,9 +8,9 @@ import {
 } from '@langgenius/dify-ui/combobox'
 import FileIcon from '../document-file-icon'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 function getDocumentExtension(document: SimpleDocumentDetail) {
   const detailExtension = document.data_source_detail_dict?.upload_file?.extension
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 9f06727ed9b..49a225f6e23 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -23,12 +23,12 @@ import { useDocumentList } from '@/service/knowledge/use-document'
 import FileIcon from '../document-file-icon'
 import DocumentList from './document-list'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   value?: SimpleDocumentDetail | null
   parentMode?: ParentMode
   onChange: (value: SimpleDocumentDetail) => void
-}
+}>
 
 function getDocumentLabel(document: SimpleDocumentDetail) {
   return document.name
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 3869ffd2a15..c9d387ce90d 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -15,12 +15,12 @@ import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import FileIcon from '../document-file-icon'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value?: DocumentItem
   files: DocumentItem[]
   onChange: (value: DocumentItem) => void
-}
+}>
 
 const PreviewDocumentPicker: FC<Props> = ({
   className,
diff --git a/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx b/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
index c150ac823f8..9b4c44c29db 100644
--- a/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { useAutoDisabledDocuments, useDocumentEnable, useInvalidDisabledDocument } from '@/service/knowledge/use-document'
 import StatusWithAction from './status-with-action'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 
 const AutoDisabledDocument: FC<Props> = ({
   datasetId,
diff --git a/web/app/components/datasets/common/document-status-with-action/index-failed.tsx b/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
index b691f4e8c5b..02373cfe266 100644
--- a/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
@@ -9,9 +9,9 @@ import { retryErrorDocs } from '@/service/datasets'
 import { useDatasetErrorDocs } from '@/service/knowledge/use-dataset'
 import StatusWithAction from './status-with-action'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 type IIndexState = {
   value: string
 }
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index ce93201e812..f9d8023826c 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -6,13 +6,13 @@ import * as React from 'react'
 import Divider from '@/app/components/base/divider'
 
 type Status = 'success' | 'error' | 'warning' | 'info'
-type Props = {
+type Props = Readonly<{
   type?: Status
   description: string
   actionText?: string
   onAction?: () => void
   disabled?: boolean
-}
+}>
 
 const IconMap = {
   success: {
diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index d5364507e74..65facad266f 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -9,11 +9,11 @@ import { EffectColor } from '../../settings/chunk-structure/types'
 import OptionCard from '../../settings/option-card'
 import RetrievalParamConfig from '../retrieval-param-config'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: RetrievalConfig
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const EconomicalRetrievalMethodConfig: FC<Props> = ({
   disabled = false,
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index dd37187e690..52fdfa97529 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -18,12 +18,12 @@ import { EffectColor } from '../../settings/chunk-structure/types'
 import OptionCard from '../../settings/option-card'
 import RetrievalParamConfig from '../retrieval-param-config'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: RetrievalConfig
   showMultiModalTip?: boolean
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const RetrievalMethodConfig: FC<Props> = ({
   disabled = false,
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index c219a5c15f6..6b6b4138aa0 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -7,9 +7,9 @@ import RadioCard from '@/app/components/base/radio-card'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { retrievalIcon } from '../../create/icons'
 
-type Props = {
+type Props = Readonly<{
   value: RetrievalConfig
-}
+}>
 
 export const getIcon = (type: RETRIEVE_METHOD) => {
   return ({
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 43c0071115d..fe9152944c2 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -27,12 +27,12 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
 import Reranking from '../../create/assets/rerank.svg'
 
-type Props = {
+type Props = Readonly<{
   type: RETRIEVE_METHOD
   value: RetrievalConfig
   showMultiModalTip?: boolean
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const RetrievalParamConfig: FC<Props> = ({
   type,
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index cc2c159fa27..9f19af4acc0 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -9,11 +9,11 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { formatFileSize } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   file: File | undefined
   updateFile: (file?: File) => void
   className?: string
-}
+}>
 const Uploader: FC<Props> = ({ file, updateFile, className }) => {
   const { t } = useTranslation()
   const [dragging, setDragging] = useState(false)
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index 5ccb5cbf06b..2868e8e45de 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
@@ -3,14 +3,14 @@ import { Checkbox } from '@langgenius/dify-ui/checkbox'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   isChecked: boolean
   onChange: (isChecked: boolean) => void
   label: string
   labelClassName?: string
   tooltip?: string
-}
+}>
 
 export default function CheckboxWithLabel({
   className = '',
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 2283e2d36b5..94b0088deef 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -7,13 +7,13 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   payload: CrawlResultItemType
   isChecked: boolean
   isPreview: boolean
   onCheckChange: (checked: boolean) => void
   onPreview: () => void
-}
+}>
 
 const CrawledResultItem: FC<Props> = ({
   isPreview,
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index b008f9e7c67..15f85e3c078 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -10,14 +10,14 @@ import CrawledResultItem from './crawled-result-item'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   list: CrawlResultItem[]
   checkedList: CrawlResultItem[]
   onSelectedChange: (selected: CrawlResultItem[]) => void
   onPreview: (payload: CrawlResultItem) => void
   usedTime: number
-}
+}>
 
 const CrawledResult: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/create/website/base/crawling.tsx b/web/app/components/datasets/create/website/base/crawling.tsx
index c2619efc380..4fd3928031f 100644
--- a/web/app/components/datasets/create/website/base/crawling.tsx
+++ b/web/app/components/datasets/create/website/base/crawling.tsx
@@ -4,11 +4,11 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { RowStruct } from '@/app/components/base/icons/src/public/other'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   crawledNum: number
   totalNum: number
-}
+}>
 
 const Crawling: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index 74b80ef8cf2..0344c0b066f 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -4,11 +4,11 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: string
   errorMsg?: string
-}
+}>
 
 const ErrorMessage: FC<Props> = ({
   className,
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 42e32b987ff..33227adc3fc 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 import Input from './text-input'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   labelClassName?: string
@@ -15,7 +15,7 @@ type Props = {
   placeholder?: string
   isNumber?: boolean
   tooltip?: string
-}
+}>
 
 const Field: FC<Props> = ({
   className,
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index 569b0c8ee47..cbf45f2e9fc 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -10,11 +10,11 @@ import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   children: React.ReactNode
   controlFoldOptions?: number
-}
+}>
 
 const OptionsWrap: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/create/website/base/text-input.tsx b/web/app/components/datasets/create/website/base/text-input.tsx
index a9c42a6b7c5..8048d614ff1 100644
--- a/web/app/components/datasets/create/website/base/text-input.tsx
+++ b/web/app/components/datasets/create/website/base/text-input.tsx
@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback } from 'react'
 
-type Props = {
+type Props = Readonly<{
   value: string | number
   onChange: (value: string | number) => void
   placeholder?: string
   isNumber?: boolean
-}
+}>
 
 const MIN_VALUE = 0
 
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index da6dc768457..a4b461dbb82 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -9,10 +9,10 @@ import Input from './text-input'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   isRunning: boolean
   onRun: (url: string) => void
-}
+}>
 
 const UrlInput: FC<Props> = ({
   isRunning,
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index 4f6077d6cc1..4edb0200f27 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index 3496bbb236c..6eb52cc87e4 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 5e6fce527da..c8f02f3aa27 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -16,7 +16,7 @@ import JinaReader from './jina-reader'
 import NoData from './no-data'
 import Watercrawl from './watercrawl'
 
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
@@ -25,7 +25,7 @@ type Props = {
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
   authedDataSourceList: DataSourceAuth[]
-}
+}>
 
 const Website: FC<Props> = ({
   onPreview,
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index 9d0cbfe169a..c7df281d658 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -9,10 +9,10 @@ import { useDocLink } from '@/context/i18n'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   isRunning: boolean
   onRun: (url: string) => void
-}
+}>
 
 const UrlInput: FC<Props> = ({
   isRunning,
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 3dc3505bb44..6d718535fa2 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index ce13f38ee3f..97ac1bdad88 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 0659d103335..ca0bcd8e66c 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -10,10 +10,10 @@ import s from './index.module.css'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   onConfig: () => void
   provider: DataSourceProvider
-}
+}>
 
 const NoData: FC<Props> = ({
   onConfig,
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx
index 62285479660..1893994af01 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',
diff --git a/web/app/components/datasets/create/website/watercrawl/options.tsx b/web/app/components/datasets/create/website/watercrawl/options.tsx
index 3496bbb236c..6eb52cc87e4 100644
--- a/web/app/components/datasets/create/website/watercrawl/options.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/options.tsx
@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index ac4fc7fc848..e42fd5654d6 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -10,13 +10,13 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { renameDocumentName } from '@/service/datasets'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   name: string
   onClose: () => void
   onSaved: () => void
-}
+}>
 
 const RenameModal: FC<Props> = ({
   documentId,
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index b96f50932e7..ebf7a69aeec 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -16,10 +16,10 @@ import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
 import { Theme } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   file: FileItem | undefined
   updateFile: (file?: FileItem) => void
-}
+}>
 const CSVUploader: FC<Props> = ({ file, updateFile }) => {
   const { t } = useTranslation()
   const [dragging, setDragging] = useState(false)
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index f6106761332..161748104e1 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -44,9 +44,9 @@ import ModifyRetrievalModal from './modify-retrieval-modal'
 
 const limit = 10
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 
 const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index 87151657f33..4295bd9260d 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -17,13 +17,13 @@ import { useDocLink } from '@/context/i18n'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
 import { checkShowMultiModalTip } from '../settings/utils'
 
-type Props = {
+type Props = Readonly<{
   indexMethod: string
   value: RetrievalConfig
   isShow: boolean
   onHide: () => void
   onSave: (value: RetrievalConfig) => void
-}
+}>
 const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, onSave }) => {
   const ref = useRef(null)
   const { t } = useTranslation()
diff --git a/web/app/components/datasets/list/datasets.tsx b/web/app/components/datasets/list/datasets.tsx
index 7ba9326ce5c..8f5c42babc0 100644
--- a/web/app/components/datasets/list/datasets.tsx
+++ b/web/app/components/datasets/list/datasets.tsx
@@ -9,12 +9,12 @@ import DatasetCard from './dataset-card'
 import DatasetCardSkeleton from './dataset-card-skeleton'
 import NewDatasetCard from './new-dataset-card'
 
-type Props = {
+type Props = Readonly<{
   tags: string[]
   keywords: string
   includeAll: boolean
   onOpenTagManagement?: () => void
-}
+}>
 
 const Datasets = ({
   tags,
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index 4306bb6330f..2bb807d2a5b 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -12,12 +12,12 @@ import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import { userProfileQueryOptions } from '@/features/account-profile/client'
 import useTimestamp from '@/hooks/use-timestamp'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label?: string
   value?: number
   onChange: (date: number | null) => void
-}
+}>
 const WrappedDatePicker = ({
   className,
   label,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
index 8d98df3202d..f7dd573a735 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
@@ -7,12 +7,12 @@ import * as React from 'react'
 import InputCombined from './input-combined'
 import Label from './label'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: MetadataItemWithEdit
   onChange: (value: MetadataItemWithEdit) => void
   onRemove: () => void
-}
+}>
 
 const AddRow: FC<Props> = ({
   className,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
index 2fffdb6e549..94da42f18e0 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
@@ -10,12 +10,12 @@ import InputCombined from './input-combined'
 import InputHasSetMultipleValue from './input-has-set-multiple-value'
 import Label from './label'
 
-type Props = {
+type Props = Readonly<{
   payload: MetadataItemWithEdit
   onChange: (payload: MetadataItemWithEdit) => void
   onRemove: (id: string) => void
   onReset: (id: string) => void
-}
+}>
 
 const EditMetadatabatchItem: FC<Props> = ({
   payload,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
index da531146af7..6418874949f 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onReset: () => void
-}
+}>
 
 const EditedBeacon: FC<Props> = ({
   onReset,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
index 0f9033a0498..5156944c679 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
@@ -14,14 +14,14 @@ import * as React from 'react'
 import Datepicker from '../base/date-picker'
 import { DataType } from '../types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   type: DataType
   value: any
   onChange: (value: any) => void
   readOnly?: boolean
-}
+}>
 
 const InputCombined: FC<Props> = ({
   className: configClassName,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
index 337bd47ab0c..c919236c504 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
@@ -5,10 +5,10 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onClear: () => void
   readOnly?: boolean
-}
+}>
 
 const InputHasSetMultipleValue: FC<Props> = ({
   onClear,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
index 186334e511a..2a1204a4186 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
@@ -3,11 +3,11 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   isDeleted?: boolean
   className?: string
   text: string
-}
+}>
 
 const Label: FC<Props> = ({
   isDeleted,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index f5642e833aa..b13f4978031 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -19,14 +19,14 @@ import AddedMetadataItem from './add-row'
 import EditMetadataBatchItem from './edit-row'
 
 const i18nPrefix = 'metadata.batchEditMetadata'
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentNum: number
   list: MetadataItemInBatchEdit[]
   onSave: (editedList: MetadataItemInBatchEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => void
   onHide: () => void
   onShowManage: () => void
-}
+}>
 const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSave, onHide, onShowManage }) => {
   const { t } = useTranslation()
   const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
diff --git a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
index df78b09fcac..a21226fc9f0 100644
--- a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
@@ -7,12 +7,12 @@ import { useMemo } from 'react'
 import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
 import { UpdateType } from '../types'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   docList: SimpleDocumentDetail[]
   selectedDocumentIds?: string[]
   onUpdate: () => void
-}
+}>
 const useBatchEditDocumentMetadata = ({ datasetId, docList, selectedDocumentIds, onUpdate }: Props) => {
   const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
   const metaDataList: MetadataItemWithValue[][] = (() => {
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
index aa6162fb0d0..0e844cf44b1 100644
--- a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
@@ -10,11 +10,11 @@ import { useBatchUpdateDocMetadata, useCreateMetaData, useDatasetMetaData, useDo
 import { DataType } from '../types'
 import useCheckMetadataName from './use-check-metadata-name'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   docDetail: FullDocumentDetail
-}
+}>
 const useMetadataDocument = ({ datasetId, documentId, docDetail }: Props) => {
   const { t } = useTranslation()
   const { dataset } = useDatasetDetailContext()
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
index a1236f0ea3b..061cf346193 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
@@ -11,12 +11,12 @@ import Field from './field'
 
 const i18nPrefix = 'metadata.createMetadata'
 
-export type Props = {
+export type Props = Readonly<{
   onClose?: () => void
   onSave: (data: BuiltInMetadataItem) => void
   hasBack?: boolean
   onBack?: () => void
-}
+}>
 
 export function CreateContent({
   onClose = noop,
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
index 68163bd8d5f..50b2ca8fc94 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
@@ -4,12 +4,12 @@ import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/pop
 import * as React from 'react'
 import { CreateContent } from './create-content'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   setOpen: (open: boolean) => void
   trigger: React.ReactNode
   popupLeft?: number
-} & CreateContentProps
+}> & CreateContentProps
 
 export function CreateMetadataModal({
   open,
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 68c031349e0..1e2c3633457 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -38,7 +38,7 @@ import Field from './field'
 
 const i18nPrefix = 'metadata.datasetMetadata'
 
-type Props = {
+type Props = Readonly<{
   userMetadata: MetadataItemWithValueLength[]
   builtInMetadata: BuiltInMetadataItem[]
   isBuiltInEnabled: boolean
@@ -47,7 +47,7 @@ type Props = {
   onAdd: (payload: BuiltInMetadataItem) => void
   onRename: (payload: MetadataItemWithValueLength) => void
   onRemove: (metaDataId: string) => void
-}
+}>
 
 type ItemProps = {
   readonly?: boolean
diff --git a/web/app/components/datasets/metadata/metadata-dataset/field.tsx b/web/app/components/datasets/metadata/metadata-dataset/field.tsx
index e78c32ff62d..84d1a9563f9 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/field.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/field.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   children: React.ReactNode
-}
+}>
 
 const Field: FC<Props> = ({
   className,
diff --git a/web/app/components/datasets/metadata/metadata-document/field.tsx b/web/app/components/datasets/metadata/metadata-document/field.tsx
index 3993cfbb408..7118738e38e 100644
--- a/web/app/components/datasets/metadata/metadata-document/field.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/field.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   label: string
   children: React.ReactNode
-}
+}>
 
 const Field: FC<Props> = ({
   label,
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 18ee6e04eaa..c54b99edbc1 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -13,12 +13,12 @@ import NoData from './no-data'
 
 const i18nPrefix = 'metadata.documentMetadata'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   className?: string
   docDetail: FullDocumentDetail
-}
+}>
 const MetadataDocument: FC<Props> = ({
   datasetId,
   documentId,
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 5c4da3a1994..4ef93919043 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -14,7 +14,7 @@ import { DatasetMetadataPicker } from '../metadata-dataset/dataset-metadata-pick
 import { DataType, isShowManageMetadataLocalStorageKey } from '../types'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   dataSetId: string
   className?: string
   noHeader?: boolean
@@ -29,7 +29,7 @@ type Props = {
   onDelete?: (item: MetadataItemWithValue) => void
   onSelect?: (item: MetadataItemWithValue) => void
   onAdd?: (item: BuiltInMetadataItem) => void
-}
+}>
 
 const InfoGroup: FC<Props> = ({
   dataSetId,
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
index 82c4b8c2746..fb4e3d3a4e6 100644
--- a/web/app/components/datasets/metadata/metadata-document/no-data.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
@@ -5,9 +5,9 @@ import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onStart: () => void
-}
+}>
 
 const NoData: FC<Props> = ({
   onStart,