chore: title support i18n (#212)

web/app/(commonLayout)/apps/Apps.tsx

@@ -9,6 +9,7 @@ import { AppListResponse } from '@/models/app'
 import { fetchAppList } from '@/service/apps'
 import { useSelector } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { useTranslation } from 'react-i18next'
 
 const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -17,12 +18,14 @@ const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
 }
 
 const Apps = () => {
+  const { t } = useTranslation()
   const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchAppList, { revalidateFirstPage: false })
   const loadingStateRef = useRef(false)
   const pageContainerRef = useSelector(state => state.pageContainerRef)
   const anchorRef = useRef<HTMLAnchorElement>(null)
 
   useEffect(() => {
+    document.title = `${t('app.title')} -  Dify`;
     if(localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       mutate()

web/app/(commonLayout)/apps/page.tsx

@@ -29,8 +29,4 @@ const AppList = async () => {
   )
 }
 
-export const metadata = {
-  title: 'Apps - Dify',
-}
-
 export default AppList

web/app/components/explore/index.tsx

@@ -5,6 +5,7 @@ import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
 import { fetchMembers } from '@/service/common'
 import { InstalledApp } from '@/models/explore'
+import { useTranslation } from 'react-i18next'
 
 export interface IExploreProps {
   children: React.ReactNode
@@ -13,12 +14,14 @@ export interface IExploreProps {
 const Explore: FC<IExploreProps> = ({
   children
 }) => {
+  const { t } = useTranslation()
   const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
   const { userProfile } = useAppContext()
   const [hasEditPermission, setHasEditPermission] = useState(false)
   const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])
 
   useEffect(() => {
+    document.title = `${t('explore.title')} -  Dify`;
     (async () => {
       const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {}})
       if(!accounts) return

web/i18n/lang/app.en.ts

@@ -1,4 +1,5 @@
 const translation = {
+  title: 'Apps',
   createApp: 'Create new App',
   modes: {
     completion: 'Text Generator',

web/i18n/lang/app.zh.ts

@@ -1,4 +1,5 @@
 const translation = {
+  title: '应用',
   createApp: '创建应用',
   modes: {
     completion: '文本生成型',

web/i18n/lang/explore.en.ts

@@ -1,4 +1,5 @@
 const translation = {
+  title: 'My Apps',
   sidebar: {
     discovery: 'Discovery',
     workspace: 'Workspace',

web/i18n/lang/explore.zh.ts

@@ -1,4 +1,5 @@
 const translation = {
+  title: '我的应用',
   sidebar: {
     discovery: '发现',
     workspace: '工作区',