diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 62f1010b54..93d0384aee 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -16,6 +16,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { useAppContext } from '@/context/app-context'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import type { RetrievalConfig } from '@/types/app'
 import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
@@ -277,7 +278,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
               </div>
               <div className='mt-2 w-full text-xs leading-6 text-text-tertiary'>
                 {t('datasetSettings.form.embeddingModelTip')}
-                <span className='cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
+                <span className='cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
               </div>
             </div>
           </div>
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 69f764e5c8..afe640278e 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -52,6 +52,7 @@ import { PromptMode } from '@/models/debug'
 import { ANNOTATION_DEFAULT, DATASET_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Drawer from '@/app/components/base/drawer'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
@@ -1021,7 +1022,7 @@ const Configuration: FC = () => {
                 <div className='flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg '>
                   <Debug
                     isAPIKeySet={isAPIKeySet}
-                    onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+                    onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
                     inputs={inputs}
                     modelParameterParams={{
                       setModel: setModel as any,
@@ -1041,7 +1042,7 @@ const Configuration: FC = () => {
               content={t('appDebug.trailUseGPT4Info.description')}
               isShow={showUseGPT4Confirm}
               onConfirm={() => {
-                setShowAccountSettingModal({ payload: 'provider' })
+                setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
                 setShowUseGPT4Confirm(false)
               }}
               onCancel={() => setShowUseGPT4Confirm(false)}
@@ -1073,7 +1074,7 @@ const Configuration: FC = () => {
             <Drawer showClose isOpen={isShowDebugPanel} onClose={hideDebugPanel} mask footer={null}>
               <Debug
                 isAPIKeySet={isAPIKeySet}
-                onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+                onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
                 inputs={inputs}
                 modelParameterParams={{
                   setModel: setModel as any,
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 7654d49e99..b50b0077cb 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -9,6 +9,7 @@ import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/gene
 import { IS_CE_EDITION } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const APIKeyInfoPanel: FC = () => {
   const isCloud = !IS_CE_EDITION
@@ -47,7 +48,7 @@ const APIKeyInfoPanel: FC = () => {
       <Button
         variant='primary'
         className='mt-2 space-x-2'
-        onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
+        onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
       >
         <div className='text-sm font-medium'>{t('appOverview.apiKeyInfo.setAPIBtn')}</div>
         <LinkExternal02 className='h-4 w-4' />
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 7d90ae40c1..3b71b8f75c 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -22,6 +22,7 @@ import { languages } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import cn from '@/utils/classnames'
@@ -113,7 +114,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
     if (isFreePlan)
       setShowPricingModal()
     else
-      setShowAccountSettingModal({ payload: 'billing' })
+      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
   }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
 
   useEffect(() => {
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 095137203b..ff45a7ea4c 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -26,6 +26,7 @@ import { CustomConfigurationStatusEnum } from '@/app/components/header/account-s
 import cn from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const systemTypes = ['openai_moderation', 'keywords', 'api']
 
@@ -55,7 +56,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
   const { setShowAccountSettingModal } = useModalContext()
   const handleOpenSettingsModal = () => {
     setShowAccountSettingModal({
-      payload: 'provider',
+      payload: ACCOUNT_SETTING_TAB.PROVIDER,
       onCancelCallback: () => {
         mutate()
       },
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index adf044c406..1f9ddeaebd 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -10,6 +10,7 @@ import { useInvalidPreImportNotionPages, usePreImportNotionPages } from '@/servi
 import Header from '../../datasets/create/website/base/header'
 import type { DataSourceCredential } from '../../header/account-setting/data-source-page-new/types'
 import Loading from '../loading'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type NotionPageSelectorProps = {
   value?: string[]
@@ -124,7 +125,7 @@ const NotionPageSelector = ({
   }, [pagesMapAndSelectedPagesId, onPreview])
 
   const handleConfigureNotion = useCallback(() => {
-    setShowAccountSettingModal({ payload: 'data-source' })
+    setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.DATA_SOURCE })
   }, [setShowAccountSettingModal])
 
   if (isFetchingNotionPagesError) {
diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index 11def1a8bc..b04bd85530 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -16,6 +16,7 @@ import { useGetDefaultDataSourceListAuth } from '@/service/use-datasource'
 import { produce } from 'immer'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Loading from '@/app/components/base/loading'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type DatasetUpdateFormProps = {
   datasetId?: string
@@ -117,7 +118,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
               {step === 1 && (
                 <StepOne
                   authedDataSourceList={dataSourceList?.result || []}
-                  onSetting={() => setShowAccountSettingModal({ payload: 'data-source' })}
+                  onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.DATA_SOURCE })}
                   datasetId={datasetId}
                   dataSourceType={dataSourceType}
                   dataSourceTypeDisable={!!datasetDetail?.data_source_type}
@@ -141,7 +142,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
               {(step === 2 && (!datasetId || (datasetId && !!datasetDetail))) && (
                 <StepTwo
                   isAPIKeySet={!!embeddingsDefaultModel}
-                  onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+                  onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
                   indexingType={datasetDetail?.indexing_technique}
                   datasetId={datasetId}
                   dataSourceType={dataSourceType}
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index 8d207a0386..51c2c7d505 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -14,6 +14,7 @@ import Toast from '@/app/components/base/toast'
 import { checkFirecrawlTaskStatus, createFirecrawlTask } from '@/service/datasets'
 import { sleep } from '@/utils'
 import Header from '../base/header'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const ERROR_I18N_PREFIX = 'common.errorMsg'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
@@ -51,7 +52,7 @@ const FireCrawl: FC<Props> = ({
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 7190ca3228..ee7ace6815 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -13,6 +13,7 @@ import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import { DataSourceProvider } from '@/models/common'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type Props = {
   onPreview: (payload: CrawlResultItem) => void
@@ -48,7 +49,7 @@ const Website: FC<Props> = ({
 
   const handleOnConfig = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
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 460c169fb4..b6e6177af2 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -14,6 +14,7 @@ import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datas
 import { sleep } from '@/utils'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import Header from '../base/header'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const ERROR_I18N_PREFIX = 'common.errorMsg'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
@@ -51,7 +52,7 @@ const JinaReader: FC<Props> = ({
   const { setShowAccountSettingModal } = useModalContext()
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx
index 640b1c2063..67a3e53feb 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -14,6 +14,7 @@ import Toast from '@/app/components/base/toast'
 import { checkWatercrawlTaskStatus, createWatercrawlTask } from '@/service/datasets'
 import { sleep } from '@/utils'
 import Header from '../base/header'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const ERROR_I18N_PREFIX = 'common.errorMsg'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
@@ -51,7 +52,7 @@ const WaterCrawl: FC<Props> = ({
   const { setShowAccountSettingModal } = useModalContext()
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
index f5cbac909d..97d6721e00 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
@@ -16,6 +16,7 @@ import Title from './title'
 import { useGetDataSourceAuth } from '@/service/use-datasource'
 import Loading from '@/app/components/base/loading'
 import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type OnlineDocumentsProps = {
   isInPipeline?: boolean
@@ -120,7 +121,7 @@ const OnlineDocuments = ({
 
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
index ed2820675c..da8fd5dcc0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
@@ -15,6 +15,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useGetDataSourceAuth } from '@/service/use-datasource'
 import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type OnlineDriveProps = {
   nodeId: string
@@ -180,7 +181,7 @@ const OnlineDrive = ({
 
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx
index c46cbdf0f1..648f6a5d93 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx
@@ -26,6 +26,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useGetDataSourceAuth } from '@/service/use-datasource'
 import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -139,7 +140,7 @@ const WebsiteCrawl = ({
 
   const handleSetting = useCallback(() => {
     setShowAccountSettingModal({
-      payload: 'data-source',
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
 
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index b5849682e9..8dc4aeec32 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -16,6 +16,7 @@ import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { getDocDownloadUrl } from '@/service/common'
 
 enum DocName {
@@ -38,7 +39,7 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
     if (isFreePlan)
       setShowPricingModal()
     else
-      setShowAccountSettingModal({ payload: 'billing' })
+      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
   }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
 
   const { isPending, mutate: downloadCompliance } = useMutation({
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 30b2bfdf6f..d00cddc693 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -33,6 +33,7 @@ import cn from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { useLogout } from '@/service/use-common'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 export default function AppSelector() {
   const itemClassName = `
@@ -122,7 +123,7 @@ export default function AppSelector() {
                     <MenuItem>
                       <div className={cn(itemClassName,
                         'data-[active]:bg-state-base-hover',
-                      )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
+                      )} onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.MEMBERS })}>
                         <RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
                         <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.settings')}</div>
                       </div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index ce218540ee..549b5e7910 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
 import { fetchApiBasedExtensionList } from '@/service/common'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 type ApiBasedExtensionSelectorProps = {
   value: string
@@ -83,7 +84,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
                 className='flex cursor-pointer items-center text-xs text-text-accent'
                 onClick={() => {
                   setOpen(false)
-                  setShowAccountSettingModal({ payload: 'api-based-extension' })
+                  setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION })
                 }}
               >
                 {t('common.apiBasedExtension.selector.manage')}
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 8e71597e9c..efec47ad50 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -31,6 +31,10 @@ import { useProviderContext } from '@/context/provider-context'
 import { useAppContext } from '@/context/app-context'
 import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
 import Input from '@/app/components/base/input'
+import {
+  ACCOUNT_SETTING_TAB,
+  type AccountSettingTab,
+} from '@/app/components/header/account-setting/constants'
 
 const iconClassName = `
   w-5 h-5 mr-2
@@ -38,11 +42,11 @@ const iconClassName = `
 
 type IAccountSettingProps = {
   onCancel: () => void
-  activeTab?: string
+  activeTab?: AccountSettingTab
 }
 
 type GroupItem = {
-  key: string
+  key: AccountSettingTab
   name: string
   description?: string
   icon: React.JSX.Element
@@ -51,56 +55,67 @@ type GroupItem = {
 
 export default function AccountSetting({
   onCancel,
-  activeTab = 'members',
+  activeTab = ACCOUNT_SETTING_TAB.MEMBERS,
 }: IAccountSettingProps) {
-  const [activeMenu, setActiveMenu] = useState(activeTab)
+  const [activeMenu, setActiveMenu] = useState<AccountSettingTab>(activeTab)
   const { t } = useTranslation()
   const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
 
-  const workplaceGroupItems = (() => {
+  const workplaceGroupItems: GroupItem[] = (() => {
     if (isCurrentWorkspaceDatasetOperator)
       return []
-    return [
+
+    const items: GroupItem[] = [
       {
-        key: 'provider',
+        key: ACCOUNT_SETTING_TAB.PROVIDER,
         name: t('common.settings.provider'),
         icon: <RiBrain2Line className={iconClassName} />,
         activeIcon: <RiBrain2Fill className={iconClassName} />,
       },
       {
-        key: 'members',
+        key: ACCOUNT_SETTING_TAB.MEMBERS,
         name: t('common.settings.members'),
         icon: <RiGroup2Line className={iconClassName} />,
         activeIcon: <RiGroup2Fill className={iconClassName} />,
       },
-      {
-        // Use key false to hide this item
-        key: enableBilling ? 'billing' : false,
+    ]
+
+    if (enableBilling) {
+      items.push({
+        key: ACCOUNT_SETTING_TAB.BILLING,
         name: t('common.settings.billing'),
         description: t('billing.plansCommon.receiptInfo'),
         icon: <RiMoneyDollarCircleLine className={iconClassName} />,
         activeIcon: <RiMoneyDollarCircleFill className={iconClassName} />,
-      },
+      })
+    }
+
+    items.push(
       {
-        key: 'data-source',
+        key: ACCOUNT_SETTING_TAB.DATA_SOURCE,
         name: t('common.settings.dataSource'),
         icon: <RiDatabase2Line className={iconClassName} />,
         activeIcon: <RiDatabase2Fill className={iconClassName} />,
       },
       {
-        key: 'api-based-extension',
+        key: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION,
         name: t('common.settings.apiBasedExtension'),
         icon: <RiPuzzle2Line className={iconClassName} />,
         activeIcon: <RiPuzzle2Fill className={iconClassName} />,
       },
-      {
-        key: (enableReplaceWebAppLogo || enableBilling) ? 'custom' : false,
+    )
+
+    if (enableReplaceWebAppLogo || enableBilling) {
+      items.push({
+        key: ACCOUNT_SETTING_TAB.CUSTOM,
         name: t('custom.custom'),
         icon: <RiColorFilterLine className={iconClassName} />,
         activeIcon: <RiColorFilterFill className={iconClassName} />,
-      },
-    ].filter(item => !!item.key) as GroupItem[]
+      })
+    }
+
+    return items
   })()
 
   const media = useBreakpoints()
@@ -117,7 +132,7 @@ export default function AccountSetting({
       name: t('common.settings.generalGroup'),
       items: [
         {
-          key: 'language',
+          key: ACCOUNT_SETTING_TAB.LANGUAGE,
           name: t('common.settings.language'),
           icon: <RiTranslate2 className={iconClassName} />,
           activeIcon: <RiTranslate2 className={iconClassName} />,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index b43fcd6301..ae7d863d91 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -15,6 +15,7 @@ import { useLanguage } from '../hooks'
 import PopupItem from './popup-item'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { useModalContext } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { supportFunctionCall } from '@/utils/tool-call'
 import { tooltipManager } from '@/app/components/base/tooltip/TooltipManager'
 
@@ -129,7 +130,7 @@ const Popup: FC<PopupProps> = ({
       </div>
       <div className='sticky bottom-0 flex cursor-pointer items-center rounded-b-lg border-t border-divider-subtle bg-components-panel-bg px-4 py-2 text-text-accent-light-mode-only' onClick={() => {
         onHide()
-        setShowAccountSettingModal({ payload: 'provider' })
+        setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
       }}>
         <span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
         <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index fc511d2954..ef24d471e0 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -19,6 +19,7 @@ import PlanBadge from './plan-badge'
 import LicenseNav from './license-env'
 import { Plan } from '../billing/type'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const navClassName = `
   flex items-center relative px-3 h-8 rounded-xl
@@ -38,7 +39,7 @@ const Header = () => {
     if (isFreePlan)
       setShowPricingModal()
     else
-      setShowAccountSettingModal({ payload: 'billing' })
+      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
   }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
 
   if (isMobile) {
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 61c2f60e14..dfbeaad9cb 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
@@ -15,6 +15,7 @@ import { RiTimeLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import { useModalContextSelector } from '@/context/modal-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const i18nPrefix = 'plugin.autoUpdate'
 
@@ -30,7 +31,7 @@ const SettingTimeZone: FC<{
 }) => {
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
   return (
-    <span className='body-xs-regular cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: 'language' })} >{children}</span>
+    <span className='body-xs-regular cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })} >{children}</span>
   )
 }
 const AutoUpdateSetting: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 19de8206cf..eaafab550e 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -45,6 +45,7 @@ import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { FlowType } from '@/types/common'
 import { canFindTool } from '@/utils'
 import cn from '@/utils/classnames'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import {
   RiCloseLine,
   RiPlayLargeLine,
@@ -333,7 +334,7 @@ const BasePanel: FC<BasePanelProps> = ({
   const { setShowAccountSettingModal } = useModalContext()
 
   const handleJumpToDataSourcePage = useCallback(() => {
-    setShowAccountSettingModal({ payload: 'data-source' })
+    setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.DATA_SOURCE })
   }, [setShowAccountSettingModal])
 
   const {
diff --git a/web/app/education-apply/hooks.ts b/web/app/education-apply/hooks.ts
index df3ee38795..9d45a5ee69 100644
--- a/web/app/education-apply/hooks.ts
+++ b/web/app/education-apply/hooks.ts
@@ -20,6 +20,7 @@ import timezone from 'dayjs/plugin/timezone'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from 'next/navigation'
 import { useProviderContext } from '@/context/provider-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -155,7 +156,7 @@ export const useEducationInit = () => {
 
   useEffect(() => {
     if (educationVerifying === 'yes' || educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION) {
-      setShowAccountSettingModal({ payload: 'billing' })
+      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
 
       if (educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
         localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
diff --git a/web/context/modal-context.tsx b/web/context/modal-context.tsx
index 1bbfb93e6c..9853508603 100644
--- a/web/context/modal-context.tsx
+++ b/web/context/modal-context.tsx
@@ -15,6 +15,7 @@ import {
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
   SHOW_PRICING_MODAL_ACTION,
 } from '@/app/education-apply/constants'
+import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
 import {
   ACCOUNT_SETTING_MODAL_ACTION,
   DEFAULT_ACCOUNT_SETTING_TAB,
@@ -96,7 +97,7 @@ export type ModelModalType = {
 }
 
 export type ModalContextState = {
-  setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<string> | null>>
+  setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<AccountSettingTab> | null>>
   setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
   setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
   setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
@@ -143,7 +144,7 @@ export const ModalContextProvider = ({
 }: ModalContextProviderProps) => {
   const searchParams = useSearchParams()
 
-  const [showAccountSettingModal, setShowAccountSettingModal] = useState<ModalState<string> | null>(() => {
+  const [showAccountSettingModal, setShowAccountSettingModal] = useState<ModalState<AccountSettingTab> | null>(() => {
     if (searchParams.get('action') === ACCOUNT_SETTING_MODAL_ACTION) {
       const tabParam = searchParams.get('tab')
       const tab = isValidAccountSettingTab(tabParam) ? tabParam : DEFAULT_ACCOUNT_SETTING_TAB