Merge branch 'l123wx-i18n'

usual2970 · Sep 27, 2024 · 6b85b4a · 6b85b4a
2 parents 9797a08 + 3c56a53
commit 6b85b4a
Show file tree

Hide file tree

Showing 48 changed files with 1,531 additions and 805 deletions.
diff --git a/ui/dist/assets/index-CQVPrK_Y.js b/ui/dist/assets/index-CQVPrK_Y.js
diff --git a/ui/dist/assets/index-Djc_JtNf.css b/ui/dist/assets/index-Djc_JtNf.css
diff --git a/ui/dist/assets/index-I--T0qY3.css b/ui/dist/assets/index-I--T0qY3.css
diff --git a/ui/dist/assets/index-TzNEc_kS.js b/ui/dist/assets/index-TzNEc_kS.js
diff --git a/ui/dist/index.html b/ui/dist/index.html
@@ -5,8 +5,8 @@
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Certimate - Your Trusted SSL Automation Partner</title>
- <script type="module" crossorigin src="/assets/index-CQVPrK_Y.js"></script>
- <link rel="stylesheet" crossorigin href="/assets/index-Djc_JtNf.css">
+ <script type="module" crossorigin src="/assets/index-TzNEc_kS.js"></script>
+ <link rel="stylesheet" crossorigin href="/assets/index-I--T0qY3.css">
  </head>
  <body class="bg-background">
  <div id="root"></div>

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -40,7 +40,11 @@
  "tailwind-merge": "^2.4.0",
  "tailwindcss-animate": "^1.0.7",
  "vaul": "^0.9.1",
- "zod": "^3.23.8"
+ "zod": "^3.23.8",
+ "i18next": "^23.15.1",
+ "i18next-browser-languagedetector": "^8.0.0",
+ "i18next-http-backend": "^2.6.1",
+ "react-i18next": "^15.0.2"
  },
  "devDependencies": {
  "@types/node": "^22.0.0",

diff --git a/ui/src/components/LocaleToggle.tsx b/ui/src/components/LocaleToggle.tsx
@@ -0,0 +1,33 @@
+import { Languages } from "lucide-react";
+
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export default function LocaleToggle() {
+ const { i18n } = useTranslation()
+
+ return (
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button variant="outline" size="icon">
+ <Languages className="h-[1.2rem] w-[1.2rem] dark:text-white" />
+ <span className="sr-only">Toggle theme</span>
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end">
+ {Object.keys(i18n.store.data).map(key => (
+ <DropdownMenuItem onClick={() => i18n.changeLanguage(key)}>
+ {i18n.store.data[key].name as string}
+ </DropdownMenuItem>
+ ))}
+ </DropdownMenuContent>
+ </DropdownMenu>
+ );
+}
diff --git a/ui/src/components/ThemeToggle.tsx b/ui/src/components/ThemeToggle.tsx
@@ -1,4 +1,5 @@
 import { Moon, Sun } from "lucide-react";
+import { useTranslation } from 'react-i18next'
 
 import { Button } from "@/components/ui/button";
 import {
@@ -11,6 +12,8 @@ import { useTheme } from "./ThemeProvider";
 
 export function ThemeToggle() {
  const { setTheme } = useTheme();
+ const { t } = useTranslation();
+
 
  return (
  <DropdownMenu>
@@ -23,13 +26,13 @@ export function ThemeToggle() {
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
  <DropdownMenuItem onClick={() => setTheme("light")}>
- 浅色
+ {t('theme.light')}
  </DropdownMenuItem>
  <DropdownMenuItem onClick={() => setTheme("dark")}>
- 暗黑
+ {t('theme.dark')}
  </DropdownMenuItem>
  <DropdownMenuItem onClick={() => setTheme("system")}>
- 系统
+ {t('theme.system')}
  </DropdownMenuItem>
  </DropdownMenuContent>
  </DropdownMenu>

diff --git a/ui/src/components/certimate/AccessAliyunForm.tsx b/ui/src/components/certimate/AccessAliyunForm.tsx
@@ -1,5 +1,6 @@
 import { Input } from "@/components/ui/input";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 
@@ -29,12 +30,13 @@ const AccessAliyunForm = ({
  onAfterReq: () => void;
 }) => {
  const { addAccess, updateAccess } = useConfig();
+ const { t } = useTranslation();
  const formSchema = z.object({
  id: z.string().optional(),
- name: z.string().min(1).max(64),
+ name: z.string().min(1, 'access.form.name.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
  configType: accessFormType,
- accessKeyId: z.string().min(1).max(64),
- accessSecretId: z.string().min(1).max(64),
+ accessKeyId: z.string().min(1, 'access.form.access.key.id.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
+ accessSecretId: z.string().min(1, 'access.form.access.key.secret.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
  });
 
  let config: AliyunConfig = {
@@ -47,7 +49,7 @@ const AccessAliyunForm = ({
  resolver: zodResolver(formSchema),
  defaultValues: {
  id: data?.id,
- name: data?.name,
+ name: data?.name || '',
  configType: "aliyun",
  accessKeyId: config.accessKeyId,
  accessSecretId: config.accessKeySecret,
@@ -111,9 +113,9 @@ const AccessAliyunForm = ({
  name="name"
  render={({ field }) => (
  <FormItem>
- <FormLabel>名称</FormLabel>
+ <FormLabel>{t('name')}</FormLabel>
  <FormControl>
- <Input placeholder="请输入授权名称" {...field} />
+ <Input placeholder={t('access.form.name.not.empty')} {...field} />
  </FormControl>
 
  <FormMessage />
@@ -126,7 +128,7 @@ const AccessAliyunForm = ({
  name="id"
  render={({ field }) => (
  <FormItem className="hidden">
- <FormLabel>配置类型</FormLabel>
+ <FormLabel>{t('access.form.config.field')}</FormLabel>
  <FormControl>
  <Input {...field} />
  </FormControl>
@@ -141,7 +143,7 @@ const AccessAliyunForm = ({
  name="configType"
  render={({ field }) => (
  <FormItem className="hidden">
- <FormLabel>配置类型</FormLabel>
+ <FormLabel>{t('access.form.config.field')}</FormLabel>
  <FormControl>
  <Input {...field} />
  </FormControl>
@@ -156,9 +158,9 @@ const AccessAliyunForm = ({
  name="accessKeyId"
  render={({ field }) => (
  <FormItem>
- <FormLabel>AccessKeyId</FormLabel>
+ <FormLabel>{t('access.form.access.key.id')}</FormLabel>
  <FormControl>
- <Input placeholder="请输入AccessKeyId" {...field} />
+ <Input placeholder={t('access.form.access.key.id.not.empty')} {...field} />
  </FormControl>
 
  <FormMessage />
@@ -171,9 +173,9 @@ const AccessAliyunForm = ({
  name="accessSecretId"
  render={({ field }) => (
  <FormItem>
- <FormLabel>AccessKeySecret</FormLabel>
+ <FormLabel>{t('access.form.access.key.secret')}</FormLabel>
  <FormControl>
- <Input placeholder="请输入AccessKeySecret" {...field} />
+ <Input placeholder={t('access.form.access.key.secret.not.empty')} {...field} />
  </FormControl>
 
  <FormMessage />
@@ -184,7 +186,7 @@ const AccessAliyunForm = ({
  <FormMessage />
 
  <div className="flex justify-end">
- <Button type="submit">保存</Button>
+ <Button type="submit">{t('save')}</Button>
  </div>
  </form>
  </Form>