feat: explore i18n

web/app/components/explore/app-list/index.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React, { FC, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppList } from '@/service/explore'
 
-
 const mockList = [
   {
     id: 1,
@@ -28,6 +28,8 @@ const mockCategories = ['music', 'news']
 
 const isMock = true
 const Apps: FC = ({ }) => {
+  const { t } = useTranslation()
+
   const [currCategory, setCurrCategory] = React.useState('')
   const [allList, setAllList] = React.useState(isMock ? mockList : [])
   const currList = (() => {
@@ -47,8 +49,8 @@ const Apps: FC = ({ }) => {
   return (
     <div className='h-full flex flex-col'>
       <div className='shrink-0 pt-6 px-12'>
-        <div className='mb-1 text-primary-600 text-xl font-semibold'>Explore Apps by Dify</div>
-        <div className='text-gray-500 text-sm'>Use these template apps instantly or customize your own apps based on the templates.</div>
+        <div className='mb-1 text-primary-600 text-xl font-semibold'>{t('explore.apps.title')}</div>
+        <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
       </div>
       <Category
         className='mt-6 px-12'

web/app/components/explore/category.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 
 export interface ICategoryProps {
@@ -15,7 +16,9 @@ const Category: FC<ICategoryProps> = ({
   value,
   onChange
 }) => {
-  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium','flex items-center h-7 px-3 border cursor-pointer rounded')
+  const { t } = useTranslation()
+
+  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium','flex items-center h-7 px-3 border cursor-pointer rounded-lg')
   const itemStyle = (isSelected: boolean) => isSelected ? {boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'} : {}
   return (
     <div className={cn(className, 'flex space-x-1 text-[13px]')}>
@@ -24,7 +27,7 @@ const Category: FC<ICategoryProps> = ({
           style={itemStyle('' === value)}
           onClick={() => onChange('')}
         >
-          All Categories
+          {t('explore.apps.allCategories')}
         </div>
       {list.map(name => (
         <div 

web/app/components/explore/sidebar/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import Item from './app-nav-item'
 
 const list = [
@@ -20,6 +21,8 @@ const DiscoveryIcon = () => (
 )
 
 const SideBar: FC = () => {
+  const { t } = useTranslation()
+
   return (
     <div className='w-[216px] shrink-0 pt-6 px-4 border-r border-gray-200'>
       <div>
@@ -28,12 +31,12 @@ const SideBar: FC = () => {
           style={{boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'}}
         >
           <DiscoveryIcon />
-          <div className='text-sm text-primary-600 font-semibold'>Discovery</div>
+          <div className='text-sm text-primary-600 font-semibold'>{t('explore.sidebar.discovery')}</div>
         </div>
       </div>
       <div className='mt-10'>
-        <div className='pl-2 text-xs text-gray-500 font-medium'>Workspace</div>
-        <div className='mt-1 space-y-1'>
+        <div className='pl-2 text-xs text-gray-500 font-medium uppercase'>{t('explore.sidebar.workspace')}</div>
+        <div className='mt-3 space-y-1'>
           {list.map(({id, name}) => {
             return (
               <Item key={id} name={name} id={id} />

web/i18n/i18next-config.ts

@@ -31,6 +31,8 @@ import datasetSettingsEn from './lang/dataset-settings.en'
 import datasetSettingsZh from './lang/dataset-settings.zh'
 import datasetCreationEn from './lang/dataset-creation.en'
 import datasetCreationZh from './lang/dataset-creation.zh'
+import exploreEn from './lang/explore.en'
+import exploreZh from './lang/explore.zh'
 import { getLocaleOnClient } from '@/i18n/client'
 
 const resources = {
@@ -53,6 +55,7 @@ const resources = {
       datasetHitTesting: datasetHitTestingEn,
       datasetSettings: datasetSettingsEn,
       datasetCreation: datasetCreationEn,
+      explore: exploreEn,
     },
   },
   'zh-Hans': {
@@ -74,6 +77,7 @@ const resources = {
       datasetHitTesting: datasetHitTestingZh,
       datasetSettings: datasetSettingsZh,
       datasetCreation: datasetCreationZh,
+      explore: exploreZh,
     },
   },
 }

web/i18n/lang/explore.en.ts

@@ -0,0 +1,13 @@
+const translation = {
+  sidebar: {
+    discovery: 'Discovery',
+    workspace: 'Workspace',
+  },
+  apps: {
+    title: 'Explore Apps by Dify',
+    description: 'Use these template apps instantly or customize your own apps based on the templates.',
+    allCategories: 'All Categories',
+  }
+}
+
+export default translation

web/i18n/lang/explore.zh.ts

@@ -0,0 +1,13 @@
+const translation = {
+  sidebar: {
+    discovery: '发现',
+    workspace: '工作区',
+  },
+  apps: {
+    title: '探索 Dify 的应用',
+    description: '使用这些模板应用程序，或根据模板自定义您自己的应用程序。',
+    allCategories: '所有类别',
+  }
+}
+
+export default translation