refactor: support i18n

2026-05-25 12:06:15 +08:00
parent 309ac1fe9e
commit 988f55c80d
179 changed files with 10968 additions and 3763 deletions
@@ -25,6 +25,9 @@ import {
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import type { AdminPermission, AdminRole } from "@/lib/api/admin";
+import { useAppLocale, useI18n } from "@/i18n/provider";
+import { getPermissionDisplayName, getPermissionGroupName } from "@/lib/permission-i18n";
+import { getRoleDisplayName } from "@/lib/role-i18n";

 type AssignPermissionsDrawerProps = {
  open: boolean;
@@ -104,6 +107,8 @@ function AssignPermissionsDrawerBody({
  onOpenChange,
  onSubmit,
 }: AssignPermissionsDrawerBodyProps) {
+  const t = useI18n();
+  const { locale } = useAppLocale();
  const [keyword, setKeyword] = useState("");
  const form = useForm<
    z.input<typeof assignPermissionsSchema>,
@@ -128,7 +133,7 @@ function AssignPermissionsDrawerBody({
    const output = keyword.trim().toLowerCase();
    const filtered = output
      ? permissions.filter((permission) =>
-          `${permission.name} ${permission.code} ${permission.groupName} ${permission.apiPath}`
+          `${permission.name} ${getPermissionDisplayName(permission.code, permission.name, locale)} ${permission.code} ${permission.groupName} ${getPermissionGroupName(permission.groupName, locale)} ${permission.apiPath}`
            .toLowerCase()
            .includes(output),
        )
@@ -142,9 +147,9 @@ function AssignPermissionsDrawerBody({
      groups.set(groupName, list);
    });
    return Array.from(groups.entries()).sort(([left], [right]) =>
-      left.localeCompare(right, "zh-CN"),
+      getPermissionGroupName(left, locale).localeCompare(getPermissionGroupName(right, locale)),
    );
-  }, [keyword, permissions]);
+  }, [keyword, locale, permissions]);

  async function onFormSubmit(values: AssignPermissionsForm) {
    await onSubmit(values.permissionIds);
@@ -153,9 +158,12 @@ function AssignPermissionsDrawerBody({
  return (
    <DrawerContent className="min-w-3xl">
      <DrawerHeader>
-        <DrawerTitle>分配权限</DrawerTitle>
+        <DrawerTitle>{t("role.assignTitle")}</DrawerTitle>
        <DrawerDescription>
-          当前角色：{item?.name || "-"} {item?.code ? `(${item.code})` : ""}
+          {t("role.currentRole", {
+            name: item ? getRoleDisplayName(item.code, item.name, locale) : "-",
+            code: item?.code ? `(${item.code})` : "",
+          })}
        </DrawerDescription>
      </DrawerHeader>
      <form
@@ -164,14 +172,14 @@ function AssignPermissionsDrawerBody({
      >
        <div className="flex-1 flex flex-col min-h-0 space-y-4 px-4 pb-4">
          <Field data-invalid={!!errors.permissionIds} className="flex-1 flex flex-col min-h-0">
-            <FieldLabel>权限列表</FieldLabel>
+            <FieldLabel>{t("role.permissionList")}</FieldLabel>
            <FieldContent className="flex-1 min-h-0 flex flex-col">
              <div className="relative mb-2">
                <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  value={keyword}
                  onChange={(event) => setKeyword(event.target.value)}
-                  placeholder="搜索权限名称、编码、分组或接口"
+                  placeholder={t("role.searchPermission")}
                  className="pl-9"
                  disabled={loading}
                />
@@ -186,15 +194,15 @@ function AssignPermissionsDrawerBody({
                    <div className="flex-1 min-h-0 space-y-4 overflow-y-auto rounded-xl border p-3">
                      {loading ? (
                        <div className="py-8 text-center text-sm text-muted-foreground">
-                          正在加载权限列表...
+                          {t("role.loadingPermissions")}
                        </div>
                      ) : groupedPermissions.length > 0 ? (
                        groupedPermissions.map(([groupName, list]) => (
                          <section key={groupName} className="space-y-2">
                            <div className="flex items-center gap-2">
-                              <Badge variant="outline">{groupName}</Badge>
+                              <Badge variant="outline">{getPermissionGroupName(groupName, locale)}</Badge>
                              <span className="text-xs text-muted-foreground">
-                                {list.length} 项
+                                {t("role.permissionCount", { count: list.length })}
                              </span>
                            </div>
                            <div className="space-y-1">
@@ -225,7 +233,7 @@ function AssignPermissionsDrawerBody({
                                    />
                                    <div className="min-w-0 flex-1">
                                      <div className="font-medium">
-                                        {permission.name}
+                                        {getPermissionDisplayName(permission.code, permission.name, locale)}
                                      </div>
                                      <div className="text-sm text-muted-foreground">
                                        {permission.code}
@@ -243,8 +251,8 @@ function AssignPermissionsDrawerBody({
                                      }
                                    >
                                      {permission.status === 1
-                                        ? "禁用"
-                                        : "启用"}
+                                        ? t("status.disabled")
+                                        : t("status.ok")}
                                    </Badge>
                                  </label>
                                );
@@ -254,7 +262,7 @@ function AssignPermissionsDrawerBody({
                        ))
                      ) : (
                        <div className="py-8 text-center text-sm text-muted-foreground">
-                          没有匹配的权限
+                          {t("role.noPermissions")}
                        </div>
                      )}
                    </div>
@@ -267,7 +275,7 @@ function AssignPermissionsDrawerBody({
        </div>
        <DrawerFooter className="border-t">
          <Button type="submit" disabled={saving || loading || !item}>
-            {saving ? "保存中..." : "保存权限"}
+            {saving ? t("role.saving") : t("role.savePermissions")}
          </Button>
          <Button
            type="button"
@@ -275,7 +283,7 @@ function AssignPermissionsDrawerBody({
            onClick={() => onOpenChange(false)}
            disabled={saving}
          >
-            取消
+            {t("role.cancel")}
          </Button>
        </DrawerFooter>
      </form>
@@ -1,5 +1,6 @@
 "use client"

+import { useMemo } from "react"
 import { Resolver, useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { z } from "zod/v4"
@@ -22,6 +23,7 @@ import {
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
+import { useI18n } from "@/i18n/provider"

 type CreateRoleDrawerProps = {
  open: boolean
@@ -30,23 +32,11 @@ type CreateRoleDrawerProps = {
  onSubmit: (payload: CreateAdminRolePayload) => Promise<void>
 }

-const createFormSchema = z.object({
-  name: z.string().trim().min(1, "角色名称不能为空"),
-  code: z
-    .string()
-    .trim()
-    .min(1, "角色编码不能为空")
-    .regex(/^[A-Za-z][A-Za-z0-9:_-]*$/, "角色编码需以字母开头，仅支持字母、数字、冒号、下划线和短横线"),
-  remark: z.string().trim(),
-})
-
-type CreateForm = z.infer<typeof createFormSchema>
-
-const createFormResolver = zodResolver(createFormSchema as never) as Resolver<
-  z.input<typeof createFormSchema>,
-  undefined,
-  z.output<typeof createFormSchema>
->
+type CreateForm = {
+  name: string
+  code: string
+  remark: string
+}

 const emptyForm: CreateForm = {
  name: "",
@@ -99,11 +89,25 @@ function CreateRoleDrawerBody({
  onOpenChange,
  onSubmit,
 }: CreateRoleDrawerBodyProps) {
-  const form = useForm<
-    z.input<typeof createFormSchema>,
-    undefined,
-    z.output<typeof createFormSchema>
-  >({
+  const t = useI18n()
+  const createFormSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().trim().min(1, t("role.nameRequired")),
+        code: z
+          .string()
+          .trim()
+          .min(1, t("role.codeRequired"))
+          .regex(/^[A-Za-z][A-Za-z0-9:_-]*$/, t("role.codeInvalid")),
+        remark: z.string().trim(),
+      }),
+    [t]
+  )
+  const createFormResolver = useMemo(
+    () => zodResolver(createFormSchema as never) as Resolver<CreateForm>,
+    [createFormSchema]
+  )
+  const form = useForm<CreateForm>({
    resolver: createFormResolver,
    defaultValues: buildEmptyForm(),
  })
@@ -122,8 +126,8 @@ function CreateRoleDrawerBody({
  return (
    <DrawerContent className="min-w-2xl">
      <DrawerHeader>
-        <DrawerTitle>添加角色</DrawerTitle>
-        <DrawerDescription>创建后可在列表中分配权限和调整排序。</DrawerDescription>
+        <DrawerTitle>{t("role.createTitle")}</DrawerTitle>
+        <DrawerDescription>{t("role.createDescription")}</DrawerDescription>
      </DrawerHeader>
      <form
        className="flex h-full flex-col"
@@ -131,11 +135,11 @@ function CreateRoleDrawerBody({
      >
        <div className="space-y-4 overflow-y-auto px-4 pb-4">
          <Field data-invalid={!!errors.name}>
-            <FieldLabel htmlFor="create-role-name">角色名称</FieldLabel>
+            <FieldLabel htmlFor="create-role-name">{t("role.name")}</FieldLabel>
            <FieldContent>
              <Input
                id="create-role-name"
-                placeholder="例如：客服主管"
+                placeholder={t("role.namePlaceholder")}
                autoComplete="off"
                aria-invalid={!!errors.name}
                {...register("name")}
@@ -144,11 +148,11 @@ function CreateRoleDrawerBody({
            </FieldContent>
          </Field>
          <Field data-invalid={!!errors.code}>
-            <FieldLabel htmlFor="create-role-code">角色编码</FieldLabel>
+            <FieldLabel htmlFor="create-role-code">{t("role.code")}</FieldLabel>
            <FieldContent>
              <Input
                id="create-role-code"
-                placeholder="例如：support_manager"
+                placeholder={t("role.codePlaceholder")}
                autoComplete="off"
                aria-invalid={!!errors.code}
                {...register("code")}
@@ -157,11 +161,11 @@ function CreateRoleDrawerBody({
            </FieldContent>
          </Field>
          <Field data-invalid={!!errors.remark}>
-            <FieldLabel htmlFor="create-role-remark">备注</FieldLabel>
+            <FieldLabel htmlFor="create-role-remark">{t("role.remark")}</FieldLabel>
            <FieldContent>
              <Textarea
                id="create-role-remark"
-                placeholder="可选"
+                placeholder={t("role.optional")}
                aria-invalid={!!errors.remark}
                {...register("remark")}
              />
@@ -171,7 +175,7 @@ function CreateRoleDrawerBody({
        </div>
        <DrawerFooter className="border-t">
          <Button type="submit" disabled={saving}>
-            {saving ? "创建中..." : "创建角色"}
+            {saving ? t("role.creating") : t("role.create")}
          </Button>
          <Button
            type="button"
@@ -179,7 +183,7 @@ function CreateRoleDrawerBody({
            onClick={() => onOpenChange(false)}
            disabled={saving}
          >
-            取消
+            {t("role.cancel")}
          </Button>
        </DrawerFooter>
      </form>