Add i18n support with language selector on login page (#1410)

* feat: add i18n support with language selector on login page

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* feat: complete i18n implementation for all webui components

Co-Authored-By: Junyan Qin <Chin> <rockchinq@gmail.com>

* feat: complete all hardcoded text

* feat: dynamic label i18n

* fix: lint errors

* fix: lint errors

* delete sh fils

* fix: edit model dialog title

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Junyan Qin <Chin> <rockchinq@gmail.com>

web/src/app/home/plugins/page.tsx

@@ -20,6 +20,7 @@ import { GithubIcon } from 'lucide-react';
 import { useState, useRef } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
 
 enum PluginInstallStatus {
   WAIT_INPUT = 'wait_input',
@@ -28,6 +29,7 @@ enum PluginInstallStatus {
 }
 
 export default function PluginConfigPage() {
+  const { t } = useTranslation();
   const [modalOpen, setModalOpen] = useState(false);
   const [sortModalOpen, setSortModalOpen] = useState(false);
   const [pluginInstallStatus, setPluginInstallStatus] =
@@ -61,7 +63,7 @@ export default function PluginConfigPage() {
               } else {
                 // success
                 if (!alreadySuccess) {
-                  toast.success('插件安装成功');
+                  toast.success(t('plugins.installSuccess'));
                   alreadySuccess = true;
                 }
                 setGithubURL('');
@@ -85,10 +87,10 @@ export default function PluginConfigPage() {
         <div className="flex flex-row justify-between items-center px-[0.8rem]">
           <TabsList className="shadow-md py-5 bg-[#f0f0f0]">
             <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
-              已安装
+              {t('plugins.installed')}
             </TabsTrigger>
             <TabsTrigger value="market" className="px-6 py-4 cursor-pointer">
-              插件市场
+              {t('plugins.marketplace')}
             </TabsTrigger>
           </TabsList>
 
@@ -100,7 +102,7 @@ export default function PluginConfigPage() {
                 setSortModalOpen(true);
               }}
             >
-              编排
+              {t('plugins.arrange')}
             </Button>
             <Button
               variant="default"
@@ -112,7 +114,7 @@ export default function PluginConfigPage() {
               }}
             >
               <PlusIcon className="w-4 h-4" />
-              安装
+              {t('plugins.install')}
             </Button>
           </div>
         </div>
@@ -136,14 +138,14 @@ export default function PluginConfigPage() {
           <DialogHeader>
             <DialogTitle className="flex items-center gap-4">
               <GithubIcon className="size-6" />
-              <span>从 GitHub 安装插件</span>
+              <span>{t('plugins.installFromGithub')}</span>
             </DialogTitle>
           </DialogHeader>
           {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
             <div className="mt-4">
-              <p className="mb-2">目前仅支持从 GitHub 安装</p>
+              <p className="mb-2">{t('plugins.onlySupportGithub')}</p>
               <Input
-                placeholder="请输入插件的Github链接"
+                placeholder={t('plugins.enterGithubLink')}
                 value={githubURL}
                 onChange={(e) => setGithubURL(e.target.value)}
                 className="mb-4"
@@ -152,12 +154,12 @@ export default function PluginConfigPage() {
           )}
           {pluginInstallStatus === PluginInstallStatus.INSTALLING && (
             <div className="mt-4">
-              <p className="mb-2">正在安装插件...</p>
+              <p className="mb-2">{t('plugins.installing')}</p>
             </div>
           )}
           {pluginInstallStatus === PluginInstallStatus.ERROR && (
             <div className="mt-4">
-              <p className="mb-2">插件安装失败：</p>
+              <p className="mb-2">{t('plugins.installFailed')}</p>
               <p className="mb-2 text-red-500">{installError}</p>
             </div>
           )}
@@ -165,14 +167,16 @@ export default function PluginConfigPage() {
             {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
               <>
                 <Button variant="outline" onClick={() => setModalOpen(false)}>
-                  取消
+                  {t('common.cancel')}
+                </Button>
+                <Button onClick={handleModalConfirm}>
+                  {t('common.confirm')}
                 </Button>
-                <Button onClick={handleModalConfirm}>确认</Button>
               </>
             )}
             {pluginInstallStatus === PluginInstallStatus.ERROR && (
               <Button variant="default" onClick={() => setModalOpen(false)}>
-                关闭
+                {t('common.close')}
               </Button>
             )}
           </DialogFooter>