fix: update document title with system features config

2025-03-14 18:54:17 +08:00 · 2025-03-14 18:54:17 +08:00 · 00b923651f
parent 24fce3cc64
commit 00b923651f
23 changed files with 156 additions and 128 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
+import useDocumentTitle from '@/hooks/use-document-title'

 export type IAppDetail = {
  children: React.ReactNode
@ -11,11 +13,13 @@ export type IAppDetail = {
 const AppDetail: FC<IAppDetail> = ({ children }) => {
  const router = useRouter()
  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.appDetail'))

  useEffect(() => {
    if (isCurrentWorkspaceDatasetOperator)
      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator])
+  }, [isCurrentWorkspaceDatasetOperator, router])

  return (
    <>
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@ -26,7 +26,6 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import { useGlobalPublicStore } from '@/context/global-public-context'

 const getKey = (
  pageIndex: number,
@ -56,7 +55,6 @@ const Apps = () => {
  const { t } = useTranslation()
  const router = useRouter()
  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const { systemFeatures } = useGlobalPublicStore()
  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'all',
@ -87,16 +85,11 @@ const Apps = () => {
  ]

  useEffect(() => {
-    if (systemFeatures.branding.enabled)
-      document.title = `${t('common.menus.apps')} -  ${systemFeatures.branding.application_title}`
-    else
-      document.title = `${t('common.menus.apps')} -  Dify`
-
    if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
      localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
      mutate()
    }
-  }, [mutate, t, systemFeatures])
+  }, [mutate, t])

  useEffect(() => {
    if (isCurrentWorkspaceDatasetOperator)
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@ -4,17 +4,17 @@ import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import style from '../list.module.css'
 import Apps from './Apps'
-import { LicenseStatus } from '@/types/feature'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'

 const AppList = () => {
  const { t } = useTranslation()
  const { systemFeatures } = useGlobalPublicStore()
-
+  useDocumentTitle(t('common.menus.apps'))
  return (
    <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
      <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
+      {!systemFeatures.branding.enabled && <footer className='px-12 py-6 grow-0 shrink-0'>
        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
        <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
        <div className='flex items-center gap-2 mt-3'>
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@ -29,9 +29,11 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const Container = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
  const router = useRouter()
  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@ -123,7 +125,7 @@ const Container = () => {
      {activeTab === 'dataset' && (
        <>
          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
-          <DatasetFooter />
+          {!systemFeatures.branding.enabled && <DatasetFooter />}
          {showTagManagementModal && (
            <TagManagementModal type='knowledge' show={showTagManagementModal} />
          )}
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import { useTranslation } from 'react-i18next'
 import NewDatasetCard from './NewDatasetCard'
 import DatasetCard from './DatasetCard'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
@ -57,11 +56,8 @@ const Datasets = ({
  const loadingStateRef = useRef(false)
  const anchorRef = useRef<HTMLAnchorElement>(null)

-  const { t } = useTranslation()
-
  useEffect(() => {
    loadingStateRef.current = isLoading
-    document.title = `${t('dataset.knowledge')} - Dify`
  }, [isLoading])

  useEffect(() => {
@ -80,7 +76,7 @@ const Datasets = ({

  return (
    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
-      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} />}
      {data?.map(({ data: datasets }) => datasets.map(dataset => (
        <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
      ))}
--- a/web/app/(commonLayout)/datasets/page.tsx
+++ b/web/app/(commonLayout)/datasets/page.tsx
@ -1,11 +1,12 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import Container from './Container'
+import useDocumentTitle from '@/hooks/use-document-title'

-const AppList = async () => {
+const AppList = () => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.datasets'))
  return <Container />
 }

-export const metadata = {
-  title: 'Datasets - Dify',
-}
-
 export default AppList
--- a/web/app/(commonLayout)/explore/layout.tsx
+++ b/web/app/(commonLayout)/explore/layout.tsx
@ -1,11 +1,13 @@
-import type { FC } from 'react'
+'use client'
+import type { FC, PropsWithChildren } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import ExploreClient from '@/app/components/explore'
-export type IAppDetail = {
-  children: React.ReactNode
-}
+import useDocumentTitle from '@/hooks/use-document-title'

-const AppDetail: FC<IAppDetail> = ({ children }) => {
+const ExploreLayout: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.explore'))
  return (
    <ExploreClient>
      {children}
@ -13,4 +15,4 @@ const AppDetail: FC<IAppDetail> = ({ children }) => {
  )
 }

-export default React.memo(AppDetail)
+export default React.memo(ExploreLayout)
--- a/web/app/(commonLayout)/tools/page.tsx
+++ b/web/app/(commonLayout)/tools/page.tsx
@ -1,22 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import ToolProviderList from '@/app/components/tools/provider-list'
 import { useAppContext } from '@/context/app-context'
-
-const Layout: FC = () => {
-  const { t } = useTranslation()
+import useDocumentTitle from '@/hooks/use-document-title'
+const ToolsList: FC = () => {
  const router = useRouter()
  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      document.title = `${t('tools.title')} - Dify`
-    if (isCurrentWorkspaceDatasetOperator)
-      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator, router, t])
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.tools'))

  useEffect(() => {
    if (isCurrentWorkspaceDatasetOperator)
@ -25,4 +19,4 @@ const Layout: FC = () => {

  return <ToolProviderList />
 }
-export default React.memo(Layout)
+export default React.memo(ToolsList)
--- a/web/app/account/layout.tsx
+++ b/web/app/account/layout.tsx
@ -1,5 +1,6 @@
 import React from 'react'
 import type { ReactNode } from 'react'
+import { t } from 'i18next'
 import Header from './header'
 import SwrInitor from '@/app/components/swr-initor'
 import { AppContextProvider } from '@/context/app-context'
@ -34,7 +35,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 }

 export const metadata = {
-  title: 'Dify',
+  title: t('common.menus.account'),
 }

 export default Layout
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
@ -16,7 +15,6 @@ export type IExploreProps = {
 const Explore: FC<IExploreProps> = ({
  children,
 }) => {
-  const { t } = useTranslation()
  const router = useRouter()
  const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
  const { userProfile, isCurrentWorkspaceDatasetOperator } = useAppContext()
@ -24,7 +22,6 @@ const Explore: FC<IExploreProps> = ({
  const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])

  useEffect(() => {
-    document.title = `${t('explore.title')} -  Dify`;
    (async () => {
      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
      if (!accounts)
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@ -20,6 +20,7 @@ import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type IAppSelector = {
  isMobile: boolean
@ -32,6 +33,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
  `
  const router = useRouter()
  const [aboutVisible, setAboutVisible] = useState(false)
+  const { systemFeatures } = useGlobalPublicStore()

  const { locale } = useContext(I18n)
  const { t } = useTranslation()
@ -122,78 +124,80 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                        <div>{t('common.userProfile.settings')}</div>
                      </div>}
                    </Menu.Item>
-                    {canEmailSupport && <Menu.Item>
-                      {({ active }) => <a
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.emailSupport')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </a>}
-                    </Menu.Item>}
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.communityFeedback')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://discord.gg/5AEfbxcd9k'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.community')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={
-                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
-                        }
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.helpCenter')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://roadmap.dify.ai'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.roadmap')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    {
-                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
-                        <Menu.Item>
-                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                    {!systemFeatures.branding.enabled && <>
+                      {canEmailSupport && <Menu.Item>
+                        {({ active }) => <a
+                          className={classNames(itemClassName, 'group justify-between',
                            active && 'bg-state-base-hover',
-                          )} onClick={() => setAboutVisible(true)}>
-                            <div>{t('common.userProfile.about')}</div>
-                            <div className='flex items-center'>
-                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
-                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
-                            </div>
-                          </div>}
-                        </Menu.Item>
-                      )
-                    }
+                          )}
+                          href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.emailSupport')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </a>}
+                      </Menu.Item>}
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.communityFeedback')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://discord.gg/5AEfbxcd9k'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.community')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href={
+                            locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
+                          }
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.helpCenter')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://roadmap.dify.ai'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.roadmap')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      {
+                        document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                          <Menu.Item>
+                            {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                              active && 'bg-state-base-hover',
+                            )} onClick={() => setAboutVisible(true)}>
+                              <div>{t('common.userProfile.about')}</div>
+                              <div className='flex items-center'>
+                                <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
+                                <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                              </div>
+                            </div>}
+                          </Menu.Item>
+                        )
+                      }
+                    </>}
                  </div>
                  <Menu.Item>
                    {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@ -17,9 +17,11 @@ import ProviderCard from '@/app/components/tools/provider/card'
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { fetchCollectionList } from '@/service/tools'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const ProviderList = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()

  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'builtin',
@ -98,7 +100,7 @@ const ProviderList = () => {
          'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
          currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
        )}>
-          {activeTab === 'builtin' && <ContributeCard />}
+          {activeTab === 'builtin' && !systemFeatures.branding.enabled && <ContributeCard />}
          {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
          {filteredCollectionList.map(collection => (
            <ProviderCard
--- a/web/app/components/tools/provider/contribute.tsx
+++ b/web/app/components/tools/provider/contribute.tsx
@ -21,8 +21,8 @@ const Contribute: FC = () => {
    >
      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
        <div className='relative shrink-0 flex items-center'>
-          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
-          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
+          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600' /></div>
+          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]' /></div>
        </div>
      </div>
      <div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@ -7,7 +7,9 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import './styles/globals.css'
 import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
-import { fetchSystemFeatures } from '@/service/share'
+import type { SystemFeatures } from '@/types/feature'
+import { defaultSystemFeatures } from '@/types/feature'
+import { API_PREFIX } from '@/config'

 export const viewport: Viewport = {
  width: 'device-width',
@ -18,12 +20,19 @@ export const viewport: Viewport = {
 }

 export async function generateMetadata(): Promise<Metadata> {
-  const config = await fetchSystemFeatures()
-  if (config.branding.enabled)
-    return { title: config.branding.application_title ?? '-', icons: config.branding.favicon }
-
+  const ret = await fetch(`${API_PREFIX}/system-features`, { cache: 'no-cache' }).then(res => res.json())
+  const config: SystemFeatures = { ...defaultSystemFeatures, ...ret.data }
+  if (config.branding.enabled) {
+    return {
+      title: { template: `%s - ${config.branding.application_title}`, default: config.branding.application_title },
+      icons: config.branding.favicon,
+    }
+  }
  return {
-    title: 'Dify',
+    title: {
+      template: '%s - Dify',
+      default: 'Dify',
+    },
  }
 }

--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@ -1,3 +1,4 @@
+'use client'
 import Header from './_header'
 import style from './page.module.css'

--- a/web/context/global-public-context.tsx
+++ b/web/context/global-public-context.tsx
@ -5,7 +5,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { useEffect } from 'react'
 import type { SystemFeatures } from '@/types/feature'
 import { defaultSystemFeatures } from '@/types/feature'
-import { fetchSystemFeatures } from '@/service/share'
+import { getSystemFeatures } from '@/service/common'

 type GlobalPublicStore = {
  systemFeatures: SystemFeatures
@ -22,7 +22,7 @@ const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({
 }) => {
  const { data } = useQuery({
    queryKey: ['systemFeatures'],
-    queryFn: fetchSystemFeatures,
+    queryFn: getSystemFeatures,
  })
  const { setSystemFeatures } = useGlobalPublicStore()
  useEffect(() => {
--- a/web/hooks/use-document-title.ts
+++ b/web/hooks/use-document-title.ts
@ -0,0 +1,13 @@
+'use client'
+import { useLayoutEffect } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function useDocumentTitle(title: string) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useLayoutEffect(() => {
+    if (systemFeatures.branding.enabled)
+      document.title = `${title} - ${systemFeatures.branding.application_title}`
+    else
+      document.title = `${title} - Dify`
+  }, [systemFeatures, title])
+}
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -131,6 +131,7 @@ const translation = {
    status: 'beta',
    explore: 'Explore',
    apps: 'Studio',
+    appDetail: 'App Detail',
    plugins: 'Plugins',
    pluginsTips: 'Integrate third-party plugins or create ChatGPT-compatible AI-Plugins.',
    datasets: 'Knowledge',
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@ -131,6 +131,7 @@ const translation = {
    status: 'ベータ版',
    explore: '探索',
    apps: 'スタジオ',
+    appDetail: 'アプリの詳細',
    plugins: 'プラグイン',
    pluginsTips: 'サードパーティのプラグインを統合するか、ChatGPT互換のAIプラグインを作成します。',
    datasets: 'ナレッジ',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -131,6 +131,7 @@ const translation = {
    status: 'beta',
    explore: '探索',
    apps: '工作室',
+    appDetail: '应用详情',
    plugins: '插件',
    pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
    datasets: '知识库',
--- a/web/i18n/zh-Hant/common.ts
+++ b/web/i18n/zh-Hant/common.ts
@ -127,6 +127,7 @@ const translation = {
    status: 'beta',
    explore: '探索',
    apps: '工作室',
+    appDetail: '應用詳情',
    plugins: '外掛',
    pluginsTips: '整合第三方外掛或建立與 ChatGPT 相容的 AI 外掛。',
    datasets: '知識庫',
--- a/web/service/common.ts
+++ b/web/service/common.ts
@ -36,6 +36,7 @@ import type {
  ModelTypeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import type { SystemFeatures } from '@/types/feature'

 type LoginSuccess = {
  result: 'success'
@ -303,6 +304,10 @@ export const fetchSupportRetrievalMethods: Fetcher<RetrievalMethodsRes, string>
  return get<RetrievalMethodsRes>(url)
 }

+export const getSystemFeatures = () => {
+  return get<SystemFeatures>('/system-features')
+}
+
 export const enableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }) =>
  patch<CommonResponse>(url, { body })

--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@ -61,6 +61,6 @@ export const defaultSystemFeatures: SystemFeatures = {
    login_page_logo: '',
    workspace_logo: '',
    favicon: '',
-    application_title: '',
+    application_title: 'test title',
  },
 }