wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: support i18n

Browse Source
This commit is contained in:
mlogclub
2026-05-25 12:06:15 +08:00
parent 309ac1fe9e
commit 988f55c80d
179 changed files with 10968 additions and 3763 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/roles/_components/assign-permissions.tsx
+24 -16
View File
@@ -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>
web/app/dashboard/roles/_components/create.tsx
+36 -32
View File
@@ -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>
web/app/dashboard/roles/page.tsx
+31 -25
View File
@@ -62,6 +62,8 @@ import {
TableRow,
} from "@/components/ui/table"
import { Status } from "@/lib/generated/enums"
import { useAppLocale, useI18n } from "@/i18n/provider"
import { getRoleDisplayName } from "@/lib/role-i18n"
type SortableRoleRowProps = {
item: AdminRole
@@ -76,6 +78,9 @@ function SortableRoleRow({
actionLoading,
onAssignPermissions,
}: SortableRoleRowProps) {
const t = useI18n()
const { locale } = useAppLocale()
const displayName = getRoleDisplayName(item.code, item.name, locale)
const {
attributes,
listeners,
@@ -109,7 +114,7 @@ function SortableRoleRow({
size="icon"
className="size-8 cursor-grab active:cursor-grabbing"
disabled={disabled}
aria-label={`拖拽排序 ${item.name}`}
aria-label={t("role.dragSort", { name: displayName })}
{...attributes}
{...listeners}
>
@@ -121,7 +126,7 @@ function SortableRoleRow({
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
<ShieldCheckIcon className="size-4" />
</div>
<div className="font-medium">{item.name}</div>
<div className="font-medium">{displayName}</div>
</div>
</TableCell>
<TableCell>
@@ -132,11 +137,11 @@ function SortableRoleRow({
</TableCell>
<TableCell>
<Badge variant={item.status === Status.Ok ? "secondary" : "outline"}>
{item.status === Status.Ok ? "启用" : "禁用"}
{item.status === Status.Ok ? t("status.ok") : t("status.disabled")}
</Badge>
{item.isSystem ? (
<Badge variant="outline" className="ml-2">
系统
{t("role.system")}
</Badge>
) : null}
</TableCell>
@@ -149,7 +154,7 @@ function SortableRoleRow({
onClick={() => onAssignPermissions(item)}
disabled={disabled || actionLoading}
>
{actionLoading ? "处理中..." : "分配权限"}
{actionLoading ? t("role.processing") : t("role.assignPermissions")}
</Button>
</TableCell>
</TableRow>
@@ -157,6 +162,7 @@ function SortableRoleRow({
}
export default function DashboardRolesPage() {
const t = useI18n()
const [loading, setLoading] = useState(true)
const [sorting, setSorting] = useState(false)
const [creatingOpen, setCreatingOpen] = useState(false)
@@ -191,7 +197,7 @@ export default function DashboardRolesPage() {
try {
setResult(await fetchRoles({ limit: 200 }))
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载角色失败")
toast.error(error instanceof Error ? error.message : t("role.loadFailed"))
} finally {
setLoading(false)
}
@@ -212,11 +218,11 @@ export default function DashboardRolesPage() {
setSavingCreate(true)
try {
const role = await createRole(payload)
toast.success(`已创建角色 ${role.name}`)
toast.success(t("role.created", { name: role.name }))
setCreatingOpen(false)
await loadRoles()
} catch (error) {
toast.error(error instanceof Error ? error.message : "创建角色失败")
toast.error(error instanceof Error ? error.message : t("role.createFailed"))
} finally {
setSavingCreate(false)
}
@@ -240,7 +246,7 @@ export default function DashboardRolesPage() {
)
} catch (error) {
setAssigningRole(null)
toast.error(error instanceof Error ? error.message : "加载权限分配数据失败")
toast.error(error instanceof Error ? error.message : t("role.loadAssignFailed"))
} finally {
setAssignPermissionsLoading(false)
setActionLoadingId(null)
@@ -269,14 +275,14 @@ export default function DashboardRolesPage() {
try {
await updateRoleSort(nextResults.map((item) => item.id))
toast.success("角色排序已更新")
toast.success(t("role.sortUpdated"))
await loadRoles()
} catch (error) {
setResult((current) => ({
...current,
results: previousResults,
}))
toast.error(error instanceof Error ? error.message : "更新角色排序失败")
toast.error(error instanceof Error ? error.message : t("role.sortUpdateFailed"))
} finally {
setSorting(false)
}
@@ -301,13 +307,13 @@ export default function DashboardRolesPage() {
setSavingPermissions(true)
try {
await assignRolePermissions(assigningRole.id, permissionIds)
toast.success(`已更新角色 ${assigningRole.name} 的权限`)
toast.success(t("role.permissionsUpdated", { name: assigningRole.name }))
setAssigningRole(null)
setAssignPermissionOptions([])
setAssignPermissionIds([])
await loadRoles()
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存权限分配失败")
toast.error(error instanceof Error ? error.message : t("role.savePermissionsFailed"))
} finally {
setSavingPermissions(false)
}
@@ -328,7 +334,7 @@ export default function DashboardRolesPage() {
disabled={loading || sorting}
>
<PlusIcon className="size-4" />
添加角色
{t("role.add")}
</Button>
<Button
variant="outline"
@@ -336,22 +342,22 @@ export default function DashboardRolesPage() {
disabled={loading || sorting}
>
<RefreshCwIcon className={cn((loading || sorting) && "animate-spin")} />
刷新
{t("role.refresh")}
</Button>
</>
}
>
<div className="text-sm text-muted-foreground">
拖拽行可调整角色顺序
{t("role.dragHint")}
</div>
</DashboardToolbar>
<DashboardTableShell
pagination={
<DashboardTableSummary>
<span>
第 {result.page.page} 页 / 每页 {result.page.limit} 条
{t("role.pageSummary", { page: result.page.page, limit: result.page.limit })}
</span>
<span>共 {result.page.total} 条记录</span>
<span>{t("pagination.total", { total: result.page.total })}</span>
</DashboardTableSummary>
}
>
@@ -364,11 +370,11 @@ export default function DashboardRolesPage() {
<TableHeader className="bg-muted/40">
<TableRow>
<TableHead className="w-14"></TableHead>
<TableHead>角色</TableHead>
<TableHead>编码</TableHead>
<TableHead>状态</TableHead>
<TableHead>排序</TableHead>
<TableHead className="text-right">操作</TableHead>
<TableHead>{t("role.columnRole")}</TableHead>
<TableHead>{t("role.columnCode")}</TableHead>
<TableHead>{t("role.columnStatus")}</TableHead>
<TableHead>{t("role.columnSort")}</TableHead>
<TableHead className="text-right">{t("role.columnActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -392,8 +398,8 @@ export default function DashboardRolesPage() {
<DashboardTableStateRow
colSpan={6}
loading={loading}
loadingText="正在加载角色数据..."
emptyText="暂无角色数据"
loadingText={t("role.loading")}
emptyText={t("role.empty")}
/>
) : null}
</TableBody>