feat: add i18n support for initialization page and fix plugin loading text (#1505)

* feat: add i18n support for initialization page and fix plugin loading text - Add language selector to register/initialization page with Chinese and English options - Add register section translations to both zh-Hans.ts and en-US.ts - Replace hardcoded Chinese texts in register page with i18n translation calls - Fix hardcoded '加载中...' text in plugin configuration dialog to use t('plugins.loading') - Follow existing login page pattern for language selector implementation - Maintain consistent UI/UX design with proper language switching functionality Co-Authored-By: Junyan Qin <Chin>, 秦骏言 in Chinese, you can call me my english name Rock Chin. <rockchinq@gmail.com> * perf: language selecting logic --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Junyan Qin <Chin>, 秦骏言 in Chinese, you can call me my english name Rock Chin. <rockchinq@gmail.com>
2025-11-25 11:29:39 +08:00 · 2025-06-06 21:29:36 +08:00
parent fe3fd664af 20dc8fb5ab
commit e6bc009414
5 changed files with 128 additions and 32 deletions
--- a/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx
+++ b/web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx
@@ -72,7 +72,7 @@ export default function PluginForm({
  };

  if (!pluginInfo || !pluginConfig) {
-    return <div>加载中...</div>;
+    return <div>{t('plugins.loading')}</div>;
  }

  function deletePlugin() {
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -61,19 +61,32 @@ export default function Login() {
  }, []);

  const judgeLanguage = () => {
-    // here's for user have never set the language
-    // judge the language by the browser
-    const language = navigator.language;
-    if (language) {
-      let lang = 'zh-Hans';
-      if (language === 'zh-CN') {
-        lang = 'zh-Hans';
-      } else {
-        lang = 'en-US';
-      }
+    if (i18n.language === 'zh-CN' || i18n.language === 'zh-Hans') {
+      setCurrentLanguage('zh-Hans');
+      localStorage.setItem('langbot_language', 'zh-Hans');
+    } else {
+      setCurrentLanguage('en-US');
+      localStorage.setItem('langbot_language', 'en-US');
+    }
+    // check if the language is already set
+    const lang = localStorage.getItem('langbot_language');
+    if (lang) {
      i18n.changeLanguage(lang);
      setCurrentLanguage(lang);
-      localStorage.setItem('langbot_language', lang);
+      return;
+    } else {
+      const language = navigator.language;
+      if (language) {
+        let lang = 'zh-Hans';
+        if (language === 'zh-CN') {
+          lang = 'zh-Hans';
+        } else {
+          lang = 'en-US';
+        }
+        i18n.changeLanguage(lang);
+        setCurrentLanguage(lang);
+        localStorage.setItem('langbot_language', lang);
+      }
    }
  };

--- a/web/src/app/register/page.tsx
+++ b/web/src/app/register/page.tsx
@@ -8,6 +8,13 @@ import {
  CardTitle,
  CardDescription,
 } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
@@ -19,23 +26,28 @@ import {
  FormLabel,
  FormMessage,
 } from '@/components/ui/form';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { useRouter } from 'next/navigation';
-import { Mail, Lock } from 'lucide-react';
+import { Mail, Lock, Globe } from 'lucide-react';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import i18n from '@/i18n';

-const formSchema = z.object({
-  email: z.string().email('请输入有效的邮箱地址'),
-  password: z.string().min(1, '请输入密码'),
-});
+const formSchema = (t: (key: string) => string) =>
+  z.object({
+    email: z.string().email(t('common.invalidEmail')),
+    password: z.string().min(1, t('common.emptyPassword')),
+  });

 export default function Register() {
  const router = useRouter();
+  const { t } = useTranslation();
+  const [currentLanguage, setCurrentLanguage] = useState<string>(i18n.language);

-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+  const form = useForm<z.infer<ReturnType<typeof formSchema>>>({
+    resolver: zodResolver(formSchema(t)),
    defaultValues: {
      email: '',
      password: '',
@@ -43,9 +55,48 @@ export default function Register() {
  });

  useEffect(() => {
+    judgeLanguage();
    getIsInitialized();
  }, []);

+  const judgeLanguage = () => {
+    if (i18n.language === 'zh-CN' || i18n.language === 'zh-Hans') {
+      setCurrentLanguage('zh-Hans');
+      localStorage.setItem('langbot_language', 'zh-Hans');
+    } else {
+      setCurrentLanguage('en-US');
+      localStorage.setItem('langbot_language', 'en-US');
+    }
+    // check if the language is already set
+    const lang = localStorage.getItem('langbot_language');
+    console.log('lang: ', lang);
+    if (lang) {
+      i18n.changeLanguage(lang);
+      setCurrentLanguage(lang);
+    } else {
+      const language = navigator.language;
+      if (language) {
+        let lang = 'zh-Hans';
+        if (language === 'zh-CN') {
+          lang = 'zh-Hans';
+        } else {
+          lang = 'en-US';
+        }
+        console.log('language: ', lang);
+        i18n.changeLanguage(lang);
+        setCurrentLanguage(lang);
+        localStorage.setItem('langbot_language', lang);
+      }
+    }
+  };
+
+  const handleLanguageChange = (value: string) => {
+    console.log('handleLanguageChange: ', value);
+    i18n.changeLanguage(value);
+    setCurrentLanguage(value);
+    localStorage.setItem('langbot_language', value);
+  };
+
  function getIsInitialized() {
    httpClient
      .checkIfInited()
@@ -59,7 +110,7 @@ export default function Register() {
      });
  }

-  function onSubmit(values: z.infer<typeof formSchema>) {
+  function onSubmit(values: z.infer<ReturnType<typeof formSchema>>) {
    handleRegister(values.email, values.password);
  }

@@ -68,31 +119,46 @@ export default function Register() {
      .initUser(username, password)
      .then((res) => {
        console.log('init user success: ', res);
-        toast.success('初始化成功 请登录');
+        toast.success(t('register.initSuccess'));
        router.push('/login');
      })
      .catch((err) => {
        console.log('init user error: ', err);
-        toast.error('初始化失败：' + err.message);
+        toast.error(t('register.initFailed') + err.message);
      });
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <Card className="w-[360px]">
+      <Card className="w-[375px]">
        <CardHeader>
+          <div className="flex justify-end mb-6">
+            <Select
+              value={currentLanguage}
+              onValueChange={handleLanguageChange}
+            >
+              <SelectTrigger className="w-[140px]">
+                <Globe className="h-4 w-4 mr-2" />
+                <SelectValue placeholder={t('common.language')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="zh-Hans">简体中文</SelectItem>
+                <SelectItem value="en-US">English</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
          <img
            src={langbotIcon.src}
            alt="LangBot"
            className="w-16 h-16 mb-4 mx-auto"
          />
          <CardTitle className="text-2xl text-center">
-            初始化 LangBot 👋
+            {t('register.title')}
          </CardTitle>
          <CardDescription className="text-center">
-            这是您首次启动 LangBot
+            {t('register.description')}
            <br />
-            您填写的邮箱和密码将作为初始管理员账号
+            {t('register.adminAccountNote')}
          </CardDescription>
        </CardHeader>
        <CardContent>
@@ -103,12 +169,12 @@ export default function Register() {
                name="email"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>邮箱</FormLabel>
+                    <FormLabel>{t('common.email')}</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                        <Input
-                          placeholder="输入邮箱地址"
+                          placeholder={t('common.enterEmail')}
                          className="pl-10"
                          {...field}
                        />
@@ -124,13 +190,13 @@ export default function Register() {
                name="password"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>密码</FormLabel>
+                    <FormLabel>{t('common.password')}</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                        <Input
                          type="password"
-                          placeholder="输入密码"
+                          placeholder={t('common.enterPassword')}
                          className="pl-10"
                          {...field}
                        />
@@ -142,7 +208,7 @@ export default function Register() {
              />

              <Button type="submit" className="w-full mt-4 cursor-pointer">
-                注册
+                {t('register.register')}
              </Button>
            </form>
          </Form>
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -203,6 +203,15 @@ const enUS = {
      'Are you sure you want to delete this pipeline? Bots bound to this pipeline will not work.',
    defaultPipelineCannotDelete: 'Default pipeline cannot be deleted',
  },
+  register: {
+    title: 'Initialize LangBot 👋',
+    description: 'This is your first time starting LangBot',
+    adminAccountNote:
+      'The email and password you fill in will be used as the initial administrator account',
+    register: 'Register',
+    initSuccess: 'Initialization successful, please login',
+    initFailed: 'Initialization failed: ',
+  },
 };

 export default enUS;
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -198,6 +198,14 @@ const zhHans = {
      '你确定要删除这个流水线吗？已绑定此流水线的机器人将无法使用。',
    defaultPipelineCannotDelete: '默认流水线不可删除',
  },
+  register: {
+    title: '初始化 LangBot 👋',
+    description: '这是您首次启动 LangBot',
+    adminAccountNote: '您填写的邮箱和密码将作为初始管理员账号',
+    register: '注册',
+    initSuccess: '初始化成功 请登录',
+    initFailed: '初始化失败：',
+  },
 };

 export default zhHans;