diff --git a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
index 0b416ca644e..cabd8a0972d 100644
--- a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
@@ -9,11 +9,11 @@ export enum EditItemType {
   Query = 'query',
   Answer = 'answer',
 }
-type Props = {
+type Props = Readonly<{
   type: EditItemType
   content: string
   onChange: (content: string) => void
-}
+}>
 
 const EditItem: FC<Props> = ({
   type,
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index 4be9cc2146b..ac572707954 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -21,11 +21,11 @@ import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import EditItem, { EditItemType } from './edit-item'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onAdd: (payload: AnnotationItemBasic) => void
-}
+}>
 
 const AddAnnotationModal: FC<Props> = ({
   isShow,
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index fc65c0dc19d..991ca8a98b8 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -9,10 +9,10 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 
-export type Props = {
+export type Props = Readonly<{
   file: File | undefined
   updateFile: (file?: File) => void
-}
+}>
 
 const CSVUploader: FC<Props> = ({
   file,
diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
index 6b0ef19e7b5..5d054bbfcc4 100644
--- a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
@@ -12,11 +12,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onConfirm: () => void
-}
+}>
 
 const ClearAllAnnotationsConfirmModal: FC<Props> = ({
   isShow,
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index eb66c246d93..2797ad2aadb 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -13,12 +13,12 @@ export enum EditItemType {
   Query = 'query',
   Answer = 'answer',
 }
-type Props = {
+type Props = Readonly<{
   type: EditItemType
   content: string
   readonly?: boolean
   onSave: (content: string) => Promise<void>
-}
+}>
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
   <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index a7df64722fb..7ba47312316 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -29,7 +29,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { addAnnotation, editAnnotation } from '@/service/annotation'
 import EditItem, { EditItemType } from './edit-item'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   appId: string
@@ -42,7 +42,7 @@ type Props = {
   createdAt?: number
   onRemove: () => void
   onlyEditResponse?: boolean
-}
+}>
 
 const EditAnnotationModal: FC<Props> = ({
   isShow,
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index ab1ed04ce0b..8cbc1048be3 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -29,12 +29,12 @@ import ClearAllAnnotationsConfirmModal from '../clear-all-annotations-confirm-mo
 const CSV_HEADER_QA_EN = ['Question', 'Answer']
 const CSV_HEADER_QA_CN = ['问题', '答案']
 
-type Props = {
+type Props = Readonly<{
   appId: string
   onAdd: (payload: AnnotationItemBasic) => void
   onAdded: () => void
   controlUpdateList: number
-}
+}>
 
 type OperationsMenuProps = {
   list: AnnotationItemBasic[]
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index a8601d0a75d..d59b8eee465 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -30,9 +30,9 @@ import { List } from './list'
 import { AnnotationEnableStatus, JobStatus } from './type'
 import ViewAnnotationModal from './view-annotation-modal'
 
-type Props = {
+type Props = Readonly<{
   appDetail: App
-}
+}>
 
 const Annotation: FC<Props> = (props) => {
   const { appDetail } = props
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 96267158a68..b80c9ac4f76 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -9,14 +9,14 @@ import useTimestamp from '@/hooks/use-timestamp'
 import BatchAction from './batch-action'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 
-type Props = {
+type Props = Readonly<{
   list: AnnotationItem[]
   onView: (item: AnnotationItem) => void
   onRemove: (id: string) => void
   selectedIds: string[]
   onSelectedIdsChange: (selectedIds: string[]) => void
   onBatchDelete: () => Promise<void>
-}
+}>
 
 type AnnotationTableRowProps = {
   item: AnnotationItem
diff --git a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
index 864e098ca5c..3fc8bc4d6fd 100644
--- a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
@@ -11,11 +11,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onRemove: () => void
-}
+}>
 
 const RemoveAnnotationConfirmModal: FC<Props> = ({
   isShow,
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index 839f4331015..1214f108e07 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -33,14 +33,14 @@ import { fetchHitHistoryList } from '@/service/annotation'
 import EditItem, { EditItemType } from '../edit-annotation-modal/edit-item'
 import HitHistoryNoData from './hit-history-no-data'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   isShow: boolean
   onHide: () => void
   item: AnnotationItem
   onSave: (editedQuery: string, editedAnswer: string) => Promise<void>
   onRemove: () => void
-}
+}>
 
 enum TabType {
   annotation = 'annotation',