refactor: support i18n

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
@@ -25,6 +25,8 @@ import {
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Status } from "@/lib/generated/enums"
import { useAppLocale, useI18n } from "@/i18n/provider"
import { getRoleDisplayName } from "@/lib/role-i18n"
import { cn } from "@/lib/utils"
type AssignRolesDrawerProps = {
@@ -103,6 +105,8 @@ function AssignRolesDrawerBody({
onOpenChange,
onSubmit,
}: AssignRolesDrawerBodyProps) {
const t = useI18n()
const { locale } = useAppLocale()
const [keyword, setKeyword] = useState("")
const form = useForm<
z.input<typeof assignRolesSchema>,
@@ -135,7 +139,7 @@ function AssignRolesDrawerBody({
return (
<DrawerContent className="flex min-w-2xl flex-col overflow-hidden">
<DrawerHeader>
<DrawerTitle></DrawerTitle>
<DrawerTitle>{t("user.assignRoles")}</DrawerTitle>
</DrawerHeader>
<form
className="flex min-h-0 flex-1 flex-col overflow-hidden"
@@ -161,13 +165,15 @@ function AssignRolesDrawerBody({
if (!output) {
return true
}
return `${role.name} ${role.code}`.toLowerCase().includes(output)
return `${role.name} ${getRoleDisplayName(role.code, role.name, locale)} ${role.code}`
.toLowerCase()
.includes(output)
})
return (
<div className="space-y-4 px-4 pb-4">
<Field>
<FieldLabel></FieldLabel>
<FieldLabel>{t("user.assignedRoles")}</FieldLabel>
<FieldContent>
<div className="rounded-lg border p-3">
{selectedRoles.length > 0 ? (
@@ -183,27 +189,29 @@ function AssignRolesDrawerBody({
) : (
<ShieldAlertIcon className="size-3" />
)}
{role.name}
{role.status !== Status.Ok ? "(已禁用)" : ""}
{getRoleDisplayName(role.code, role.name, locale)}
{role.status !== Status.Ok ? ` (${t("user.disabled")})` : ""}
</Badge>
))}
</div>
) : (
<div className="text-sm text-muted-foreground"></div>
<div className="text-sm text-muted-foreground">
{t("user.unassignedRoles")}
</div>
)}
</div>
</FieldContent>
</Field>
<Field data-invalid={!!errors.roleIds}>
<FieldLabel></FieldLabel>
<FieldLabel>{t("user.roleList")}</FieldLabel>
<FieldContent>
<div className="relative">
<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("user.searchRoleNameOrCode")}
className="pl-9"
disabled={loading}
/>
@@ -211,7 +219,7 @@ function AssignRolesDrawerBody({
<div className="mt-2 max-h-[360px] space-y-1 overflow-y-auto rounded-lg border p-2">
{loading ? (
<div className="py-8 text-center text-sm text-muted-foreground">
...
{t("user.loadingRoleList")}
</div>
) : filteredRoles.length > 0 ? (
filteredRoles.map((role) => {
@@ -244,7 +252,9 @@ function AssignRolesDrawerBody({
/>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 whitespace-nowrap">
<span className="truncate font-medium">{role.name}</span>
<span className="truncate font-medium">
{getRoleDisplayName(role.code, role.name, locale)}
</span>
<span className="truncate text-muted-foreground">
{role.code}
</span>
@@ -252,21 +262,21 @@ function AssignRolesDrawerBody({
</div>
{role.isSystem ? (
<Badge variant="outline" className="shrink-0">
{t("user.system")}
</Badge>
) : null}
<Badge
variant={role.status === Status.Ok ? "secondary" : "outline"}
className="shrink-0"
>
{role.status === Status.Ok ? "启用" : "禁用"}
{role.status === Status.Ok ? t("user.enabled") : t("user.disabled")}
</Badge>
</label>
)
})
) : (
<div className="py-8 text-center text-sm text-muted-foreground">
{t("user.noMatchedRoles")}
</div>
)}
</div>
@@ -275,37 +285,37 @@ function AssignRolesDrawerBody({
</Field>
<Field>
<FieldLabel></FieldLabel>
<FieldLabel>{t("user.changes")}</FieldLabel>
<FieldContent>
<div className="space-y-3 rounded-lg border p-3">
<div>
<div className="mb-2 text-sm font-medium"></div>
<div className="mb-2 text-sm font-medium">{t("user.addedRoles")}</div>
{addedRoles.length > 0 ? (
<div className="flex flex-wrap gap-2">
{addedRoles.map((role) => (
<Badge key={role.id} variant="secondary" className="gap-1">
<ShieldIcon className="size-3" />
{role.name}
{getRoleDisplayName(role.code, role.name, locale)}
</Badge>
))}
</div>
) : (
<div className="text-sm text-muted-foreground"></div>
<div className="text-sm text-muted-foreground">{t("user.noneAdded")}</div>
)}
</div>
<div>
<div className="mb-2 text-sm font-medium"></div>
<div className="mb-2 text-sm font-medium">{t("user.removedRoles")}</div>
{removedRoles.length > 0 ? (
<div className="flex flex-wrap gap-2">
{removedRoles.map((role) => (
<Badge key={role.id} variant="outline" className="gap-1">
<ShieldIcon className="size-3" />
{role.name}
{getRoleDisplayName(role.code, role.name, locale)}
</Badge>
))}
</div>
) : (
<div className="text-sm text-muted-foreground"></div>
<div className="text-sm text-muted-foreground">{t("user.noneRemoved")}</div>
)}
</div>
</div>
@@ -318,7 +328,7 @@ function AssignRolesDrawerBody({
</div>
<DrawerFooter className="border-t">
<Button type="submit" disabled={saving || loading || !item}>
{saving ? "保存中..." : "确认分配"}
{saving ? t("user.saving") : t("user.confirmAssign")}
</Button>
<Button
type="button"
@@ -326,7 +336,7 @@ function AssignRolesDrawerBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
{t("user.cancel")}
</Button>
</DrawerFooter>
</form>
+78 -65
View File
@@ -11,7 +11,9 @@ import {
type AdminRole,
type CreateAdminUserPayload,
} from "@/lib/api/admin"
import { useAppLocale, useI18n } from "@/i18n/provider"
import { Status } from "@/lib/generated/enums"
import { getRoleDisplayName } from "@/lib/role-i18n"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
@@ -39,36 +41,15 @@ type CreateUserDrawerProps = {
onSubmit: (payload: CreateAdminUserPayload) => Promise<void>
}
const createFormSchema = z.object({
username: z.string().trim().min(1, "用户名不能为空"),
nickname: z.string().trim(),
avatar: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
"头像地址必须是 http 或 https 链接"
),
mobile: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
"手机号格式不正确"
),
email: z
.string()
.trim()
.refine(
(value) =>
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
"邮箱格式不正确"
),
remark: z.string().trim(),
roleIds: z.array(z.number().int().positive()),
})
type CreateForm = z.infer<typeof createFormSchema>
type CreateForm = {
username: string
nickname: string
avatar: string
mobile: string
email: string
remark: string
roleIds: number[]
}
const emptyForm: CreateForm = {
username: "",
@@ -80,12 +61,6 @@ const emptyForm: CreateForm = {
roleIds: [],
}
const createFormResolver = zodResolver(createFormSchema as never) as Resolver<
z.input<typeof createFormSchema>,
undefined,
z.output<typeof createFormSchema>
>
function toNullableString(value: string) {
const output = value.trim()
return output ? output : null
@@ -134,14 +109,48 @@ function CreateUserDrawerBody({
onOpenChange,
onSubmit,
}: CreateUserDrawerBodyProps) {
const t = useI18n()
const { locale } = useAppLocale()
const [rolesLoading, setRolesLoading] = useState(true)
const [roles, setRoles] = useState<AdminRole[]>([])
const [roleKeyword, setRoleKeyword] = useState("")
const form = useForm<
z.input<typeof createFormSchema>,
undefined,
z.output<typeof createFormSchema>
>({
const createFormSchema = useMemo(
() =>
z.object({
username: z.string().trim().min(1, t("user.usernameRequired")),
nickname: z.string().trim(),
avatar: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
t("user.avatarInvalid")
),
mobile: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
t("user.mobileInvalid")
),
email: z
.string()
.trim()
.refine(
(value) =>
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
t("user.emailInvalid")
),
remark: z.string().trim(),
roleIds: z.array(z.number().int().positive()),
}),
[t]
)
const createFormResolver = useMemo(
() => zodResolver(createFormSchema as never) as Resolver<CreateForm>,
[createFormSchema]
)
const form = useForm<CreateForm>({
resolver: createFormResolver,
defaultValues: emptyForm,
})
@@ -174,9 +183,11 @@ function CreateUserDrawerBody({
return roles
}
return roles.filter((role) =>
`${role.name} ${role.code}`.toLowerCase().includes(q)
`${role.name} ${getRoleDisplayName(role.code, role.name, locale)} ${role.code}`
.toLowerCase()
.includes(q)
)
}, [roleKeyword, roles])
}, [locale, roleKeyword, roles])
async function onFormSubmit(values: CreateForm) {
await onSubmit(buildPayload(values))
@@ -187,9 +198,9 @@ function CreateUserDrawerBody({
return (
<DrawerContent className="min-w-2xl">
<DrawerHeader>
<DrawerTitle></DrawerTitle>
<DrawerTitle>{t("user.createTitle")}</DrawerTitle>
<DrawerDescription>
{t("user.createDescription")}
</DrawerDescription>
</DrawerHeader>
<form
@@ -198,11 +209,11 @@ function CreateUserDrawerBody({
>
<div className="space-y-4 overflow-y-auto px-4 pb-4">
<Field data-invalid={!!errors.username}>
<FieldLabel htmlFor="create-username"></FieldLabel>
<FieldLabel htmlFor="create-username">{t("user.username")}</FieldLabel>
<FieldContent>
<Input
id="create-username"
placeholder="登录名,必填"
placeholder={t("user.usernamePlaceholder")}
autoComplete="off"
aria-invalid={!!errors.username}
{...register("username")}
@@ -211,11 +222,11 @@ function CreateUserDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.nickname}>
<FieldLabel htmlFor="create-nickname"></FieldLabel>
<FieldLabel htmlFor="create-nickname">{t("user.nickname")}</FieldLabel>
<FieldContent>
<Input
id="create-nickname"
placeholder="可选,默认同用户名"
placeholder={t("user.nicknameCreatePlaceholder")}
aria-invalid={!!errors.nickname}
{...register("nickname")}
/>
@@ -223,11 +234,11 @@ function CreateUserDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.avatar}>
<FieldLabel htmlFor="create-avatar"></FieldLabel>
<FieldLabel htmlFor="create-avatar">{t("user.avatar")}</FieldLabel>
<FieldContent>
<Input
id="create-avatar"
placeholder="可选,http(s) 链接"
placeholder={t("user.avatarCreatePlaceholder")}
aria-invalid={!!errors.avatar}
{...register("avatar")}
/>
@@ -235,11 +246,11 @@ function CreateUserDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.mobile}>
<FieldLabel htmlFor="create-mobile"></FieldLabel>
<FieldLabel htmlFor="create-mobile">{t("user.mobile")}</FieldLabel>
<FieldContent>
<Input
id="create-mobile"
placeholder="可选"
placeholder={t("user.optional")}
aria-invalid={!!errors.mobile}
{...register("mobile")}
/>
@@ -247,11 +258,11 @@ function CreateUserDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.email}>
<FieldLabel htmlFor="create-email"></FieldLabel>
<FieldLabel htmlFor="create-email">{t("user.email")}</FieldLabel>
<FieldContent>
<Input
id="create-email"
placeholder="可选"
placeholder={t("user.optional")}
aria-invalid={!!errors.email}
{...register("email")}
/>
@@ -259,11 +270,11 @@ function CreateUserDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.remark}>
<FieldLabel htmlFor="create-remark"></FieldLabel>
<FieldLabel htmlFor="create-remark">{t("user.remark")}</FieldLabel>
<FieldContent>
<Input
id="create-remark"
placeholder="可选"
placeholder={t("user.optional")}
aria-invalid={!!errors.remark}
{...register("remark")}
/>
@@ -272,14 +283,14 @@ function CreateUserDrawerBody({
</Field>
<Field data-invalid={!!errors.roleIds}>
<FieldLabel></FieldLabel>
<FieldLabel>{t("user.rolesOptional")}</FieldLabel>
<FieldContent>
<div className="relative">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={roleKeyword}
onChange={(event) => setRoleKeyword(event.target.value)}
placeholder="搜索角色"
placeholder={t("user.searchRoles")}
className="pl-9"
disabled={rolesLoading}
/>
@@ -294,7 +305,7 @@ function CreateUserDrawerBody({
<div className="mt-2 max-h-[240px] space-y-1 overflow-y-auto rounded-lg border p-2">
{rolesLoading ? (
<div className="py-6 text-center text-sm text-muted-foreground">
...
{t("user.loadingRoles")}
</div>
) : filteredRoles.length > 0 ? (
filteredRoles.map((role) => {
@@ -332,10 +343,12 @@ function CreateUserDrawerBody({
) : (
<ShieldAlertIcon className="size-3.5 shrink-0 text-muted-foreground" />
)}
<span className="truncate">{role.name}</span>
<span className="truncate">
{getRoleDisplayName(role.code, role.name, locale)}
</span>
{role.status !== Status.Ok ? (
<Badge variant="outline" className="text-xs">
{t("user.disabledBadge")}
</Badge>
) : null}
</span>
@@ -344,7 +357,7 @@ function CreateUserDrawerBody({
})
) : (
<div className="py-6 text-center text-sm text-muted-foreground">
{t("user.emptyRoles")}
</div>
)}
</div>
@@ -357,7 +370,7 @@ function CreateUserDrawerBody({
</div>
<DrawerFooter className="border-t">
<Button type="submit" disabled={saving || rolesLoading}>
{saving ? "创建中..." : "创建用户"}
{saving ? t("user.creating") : t("user.createUser")}
</Button>
<Button
type="button"
@@ -365,7 +378,7 @@ function CreateUserDrawerBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
{t("user.cancel")}
</Button>
</DrawerFooter>
</form>
+58 -51
View File
@@ -1,6 +1,6 @@
"use client"
import { useEffect, useState } from "react"
import { useEffect, useMemo, useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Resolver, useForm } from "react-hook-form"
import { z } from "zod/v4"
@@ -10,6 +10,7 @@ import {
type UpdateAdminUserPayload,
fetchUserDetail,
} from "@/lib/api/admin"
import { useI18n } from "@/i18n/provider"
import { Button } from "@/components/ui/button"
import {
Drawer,
@@ -42,38 +43,12 @@ const emptyForm: EditForm = {
email: "",
}
const editFormSchema = z.object({
nickname: z.string().trim().min(1, "昵称不能为空"),
avatar: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
"头像地址必须是 http 或 https 链接"
),
mobile: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
"手机号格式不正确"
),
email: z
.string()
.trim()
.refine(
(value) =>
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
"邮箱格式不正确"
),
})
type EditForm = z.infer<typeof editFormSchema>
const editFormResolver = zodResolver(editFormSchema as never) as Resolver<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>
type EditForm = {
nickname: string
avatar: string
mobile: string
email: string
}
function toNullableString(value: string) {
const output = value.trim()
@@ -139,13 +114,43 @@ function UserEditDrawerBody({
onOpenChange,
onSubmit,
}: UserEditDrawerBodyProps) {
const t = useI18n()
const [loading, setLoading] = useState(false)
const [item, setItem] = useState<AdminUser | null>(null)
const form = useForm<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>({
const editFormSchema = useMemo(
() =>
z.object({
nickname: z.string().trim().min(1, t("user.nicknameRequired")),
avatar: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
t("user.avatarInvalid")
),
mobile: z
.string()
.trim()
.refine(
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
t("user.mobileInvalid")
),
email: z
.string()
.trim()
.refine(
(value) =>
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
t("user.emailInvalid")
),
}),
[t]
)
const editFormResolver = useMemo(
() => zodResolver(editFormSchema as never) as Resolver<EditForm>,
[editFormSchema]
)
const form = useForm<EditForm>({
resolver: editFormResolver,
defaultValues: emptyForm,
})
@@ -188,12 +193,14 @@ function UserEditDrawerBody({
return (
<DrawerContent className="min-w-2xl">
<DrawerHeader>
<DrawerTitle></DrawerTitle>
<DrawerDescription>{item?.username || "-"}</DrawerDescription>
<DrawerTitle>{t("user.editTitle")}</DrawerTitle>
<DrawerDescription>
{t("user.currentUser", { username: item?.username || "-" })}
</DrawerDescription>
</DrawerHeader>
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-muted-foreground">...</div>
<div className="text-muted-foreground">{t("user.loading")}</div>
</div>
) : (
<form
@@ -202,11 +209,11 @@ function UserEditDrawerBody({
>
<div className="space-y-4 px-4 pb-4">
<Field data-invalid={!!errors.nickname}>
<FieldLabel htmlFor="user-nickname"></FieldLabel>
<FieldLabel htmlFor="user-nickname">{t("user.nickname")}</FieldLabel>
<FieldContent>
<Input
id="user-nickname"
placeholder="请输入昵称"
placeholder={t("user.nicknamePlaceholder")}
aria-invalid={!!errors.nickname}
{...register("nickname")}
/>
@@ -214,11 +221,11 @@ function UserEditDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.avatar}>
<FieldLabel htmlFor="user-avatar"></FieldLabel>
<FieldLabel htmlFor="user-avatar">{t("user.avatar")}</FieldLabel>
<FieldContent>
<Input
id="user-avatar"
placeholder="请输入头像 URL"
placeholder={t("user.avatarPlaceholder")}
aria-invalid={!!errors.avatar}
{...register("avatar")}
/>
@@ -226,11 +233,11 @@ function UserEditDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.mobile}>
<FieldLabel htmlFor="user-mobile"></FieldLabel>
<FieldLabel htmlFor="user-mobile">{t("user.mobile")}</FieldLabel>
<FieldContent>
<Input
id="user-mobile"
placeholder="请输入手机号"
placeholder={t("user.mobilePlaceholder")}
aria-invalid={!!errors.mobile}
{...register("mobile")}
/>
@@ -238,11 +245,11 @@ function UserEditDrawerBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.email}>
<FieldLabel htmlFor="user-email"></FieldLabel>
<FieldLabel htmlFor="user-email">{t("user.email")}</FieldLabel>
<FieldContent>
<Input
id="user-email"
placeholder="请输入邮箱"
placeholder={t("user.emailPlaceholder")}
aria-invalid={!!errors.email}
{...register("email")}
/>
@@ -252,7 +259,7 @@ function UserEditDrawerBody({
</div>
<DrawerFooter className="border-t">
<Button type="submit" disabled={saving || loading}>
{saving ? "保存中..." : "保存修改"}
{saving ? t("user.saving") : t("user.saveEdit")}
</Button>
<Button
type="button"
@@ -260,7 +267,7 @@ function UserEditDrawerBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
{t("user.cancel")}
</Button>
</DrawerFooter>
</form>
@@ -5,6 +5,7 @@ import { CopyIcon } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import { useI18n } from "@/i18n/provider"
import {
Dialog,
DialogContent,
@@ -27,6 +28,7 @@ export function InitialPasswordDialog({
password,
onOpenChange,
}: InitialPasswordDialogProps) {
const t = useI18n()
const [copying, setCopying] = useState(false)
async function handleCopy() {
@@ -37,9 +39,9 @@ export function InitialPasswordDialog({
setCopying(true)
try {
await navigator.clipboard.writeText(password)
toast.success("密码已复制")
toast.success(t("user.copied"))
} catch {
toast.error("复制失败,请手动复制")
toast.error(t("user.copyFailed"))
} finally {
setCopying(false)
}
@@ -49,13 +51,13 @@ export function InitialPasswordDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogTitle>{t("user.createdTitle")}</DialogTitle>
<DialogDescription>
{username || "-"}
{t("user.initialPasswordDescription", { username: username || "-" })}
</DialogDescription>
</DialogHeader>
<div className="rounded-xl border bg-muted/40 p-4">
<div className="text-xs text-muted-foreground"></div>
<div className="text-xs text-muted-foreground">{t("user.initialPassword")}</div>
<div className="mt-2 break-all font-mono text-base">{password}</div>
</div>
<DialogFooter>
@@ -66,10 +68,10 @@ export function InitialPasswordDialog({
disabled={copying || !password}
>
<CopyIcon />
{copying ? "复制中..." : "复制密码"}
{copying ? t("user.copying") : t("user.copyPassword")}
</Button>
<Button type="button" onClick={() => onOpenChange(false)}>
{t("user.close")}
</Button>
</DialogFooter>
</DialogContent>
@@ -5,6 +5,7 @@ import { CopyIcon } from "lucide-react"
import { toast } from "sonner"
import { type AdminUser } from "@/lib/api/admin"
import { useI18n } from "@/i18n/provider"
import { Button } from "@/components/ui/button"
import {
Dialog,
@@ -32,6 +33,7 @@ export function ResetPasswordDialogs({
onOpenChange,
onConfirm,
}: ResetPasswordDialogsProps) {
const t = useI18n()
const [copying, setCopying] = useState(false)
const showingResult = password.trim().length > 0
@@ -43,9 +45,9 @@ export function ResetPasswordDialogs({
setCopying(true)
try {
await navigator.clipboard.writeText(password)
toast.success("密码已复制")
toast.success(t("user.copied"))
} catch {
toast.error("复制失败,请手动复制")
toast.error(t("user.copyFailed"))
} finally {
setCopying(false)
}
@@ -56,14 +58,14 @@ export function ResetPasswordDialogs({
<Dialog open={open && !showingResult} onOpenChange={onOpenChange}>
<DialogContent showCloseButton={!saving}>
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogTitle>{t("user.confirmResetTitle")}</DialogTitle>
<DialogDescription>
{item?.username || "-"} 使
{t("user.confirmResetDescription", { username: item?.username || "-" })}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button onClick={() => void onConfirm()} disabled={saving}>
{saving ? "重置中..." : "确认重置"}
{saving ? t("user.resetting") : t("user.confirmReset")}
</Button>
<Button
type="button"
@@ -71,7 +73,7 @@ export function ResetPasswordDialogs({
onClick={() => onOpenChange(false)}
disabled={saving}
>
{t("user.cancel")}
</Button>
</DialogFooter>
</DialogContent>
@@ -79,22 +81,22 @@ export function ResetPasswordDialogs({
<Dialog open={open && showingResult} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogTitle>{t("user.resetSuccessTitle")}</DialogTitle>
<DialogDescription>
{item?.username || "-"}
{t("user.resetSuccessDescription", { username: item?.username || "-" })}
</DialogDescription>
</DialogHeader>
<div className="rounded-xl border bg-muted/40 p-4">
<div className="text-xs text-muted-foreground"></div>
<div className="text-xs text-muted-foreground">{t("user.newPassword")}</div>
<div className="mt-2 break-all font-mono text-base">{password}</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => void handleCopy()} disabled={copying}>
<CopyIcon />
{copying ? "复制中..." : "复制密码"}
{copying ? t("user.copying") : t("user.copyPassword")}
</Button>
<Button type="button" onClick={() => onOpenChange(false)}>
{t("user.close")}
</Button>
</DialogFooter>
</DialogContent>
+45 -36
View File
@@ -35,6 +35,8 @@ import {
type UpdateAdminUserPayload,
} from "@/lib/api/admin"
import { Status } from "@/lib/generated/enums"
import { useAppLocale, useI18n } from "@/i18n/provider"
import { getRoleDisplayName } from "@/lib/role-i18n"
import { formatDateTime } from "@/lib/utils"
import { AssignRolesDrawer } from "./_components/assign-roles"
import { CreateUserDrawer } from "./_components/create"
@@ -61,6 +63,8 @@ import {
} from "@/components/ui/table"
export default function DashboardUsersPage() {
const t = useI18n()
const { locale } = useAppLocale()
const [keywordInput, setKeywordInput] = useState("")
const [keyword, setKeyword] = useState("")
const [page, setPage] = useState(1)
@@ -99,11 +103,11 @@ export default function DashboardUsersPage() {
})
setResult(data)
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载用户失败")
toast.error(error instanceof Error ? error.message : t("user.loadFailed"))
} finally {
setLoading(false)
}
}, [keyword, limit, page])
}, [keyword, limit, page, t])
useEffect(() => {
void loadUsers()
@@ -140,7 +144,7 @@ export default function DashboardUsersPage() {
setAssignRoleIds((userDetail.roles || []).map((role) => role.id))
} catch (error) {
setAssigningRolesUser(null)
toast.error(error instanceof Error ? error.message : "加载角色分配数据失败")
toast.error(error instanceof Error ? error.message : t("user.loadRoleAssignFailed"))
} finally {
setAssignRolesLoading(false)
setActionLoadingId(null)
@@ -188,7 +192,7 @@ export default function DashboardUsersPage() {
setSavingCreate(true)
try {
const result = await createUser(payload)
toast.success(`已创建用户 ${result.user.username}`)
toast.success(t("user.created", { username: result.user.username }))
setCreatingOpen(false)
setInitialPassword({
username: result.user.username,
@@ -196,7 +200,7 @@ export default function DashboardUsersPage() {
})
await loadUsers()
} catch (error) {
toast.error(error instanceof Error ? error.message : "创建用户失败")
toast.error(error instanceof Error ? error.message : t("user.createFailed"))
} finally {
setSavingCreate(false)
}
@@ -221,11 +225,11 @@ export default function DashboardUsersPage() {
setSavingEdit(true)
try {
await updateUser(payload)
toast.success(`已更新 ${editingUser?.username || "用户"}`)
toast.success(t("user.updated", { username: editingUser?.username || t("user.fallbackUser") }))
setEditingUser(null)
await loadUsers()
} catch (error) {
toast.error(error instanceof Error ? error.message : "更新用户失败")
toast.error(error instanceof Error ? error.message : t("user.updateFailed"))
} finally {
setSavingEdit(false)
}
@@ -239,13 +243,13 @@ export default function DashboardUsersPage() {
setSavingRoles(true)
try {
await assignUserRoles(assigningRolesUser.id, roleIds)
toast.success(`已更新 ${assigningRolesUser.username} 的角色`)
toast.success(t("user.rolesUpdated", { username: assigningRolesUser.username }))
setAssigningRolesUser(null)
setAssignRoleOptions([])
setAssignRoleIds([])
await loadUsers()
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存角色分配失败")
toast.error(error instanceof Error ? error.message : t("user.saveRolesFailed"))
} finally {
setSavingRoles(false)
}
@@ -275,9 +279,9 @@ export default function DashboardUsersPage() {
try {
const result = await resetUserPassword(resettingUser.id)
setResetPasswordResult(result)
toast.success(`已重置 ${resettingUser.username} 的密码`)
toast.success(t("user.passwordReset", { username: resettingUser.username }))
} catch (error) {
toast.error(error instanceof Error ? error.message : "重置密码失败")
toast.error(error instanceof Error ? error.message : t("user.resetPasswordFailed"))
} finally {
setSavingPassword(false)
}
@@ -288,10 +292,15 @@ export default function DashboardUsersPage() {
try {
const nextStatus = user.status === Status.Ok ? Status.Disabled : Status.Ok
await updateUserStatus(user.id, nextStatus)
toast.success(`${user.username}${nextStatus === Status.Ok ? "启用" : "禁用"}`)
toast.success(
t("user.statusUpdated", {
username: user.username,
status: nextStatus === Status.Ok ? t("user.enabled") : t("user.disabled"),
})
)
await loadUsers()
} catch (error) {
toast.error(error instanceof Error ? error.message : "更新状态失败")
toast.error(error instanceof Error ? error.message : t("user.statusUpdateFailed"))
} finally {
setActionLoadingId(null)
}
@@ -304,7 +313,7 @@ export default function DashboardUsersPage() {
actions={
<Button onClick={() => setCreatingOpen(true)} disabled={loading}>
<PlusIcon />
{t("user.addUser")}
</Button>
}
>
@@ -314,12 +323,12 @@ export default function DashboardUsersPage() {
value={keywordInput}
onChange={(event) => setKeywordInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder="按用户名筛选"
placeholder={t("user.filterUsername")}
className="pl-9"
/>
</div>
<Button variant="outline" onClick={applyFilters} disabled={loading}>
{t("user.query")}
</Button>
</DashboardToolbar>
<DashboardTableShell
@@ -337,12 +346,12 @@ export default function DashboardUsersPage() {
<Table>
<TableHeader className="bg-muted/40">
<TableRow>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="w-[92px] text-right"></TableHead>
<TableHead>{t("user.columnUser")}</TableHead>
<TableHead>{t("user.columnRoles")}</TableHead>
<TableHead>{t("user.columnStatus")}</TableHead>
<TableHead>{t("user.columnLastLogin")}</TableHead>
<TableHead>{t("user.columnContact")}</TableHead>
<TableHead className="w-[92px] text-right">{t("user.columnActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -365,21 +374,21 @@ export default function DashboardUsersPage() {
item.roles?.map((role) => (
<Badge key={role.id} variant="outline">
<ShieldIcon className="size-3" />
{role.name}
{getRoleDisplayName(role.code, role.name, locale)}
</Badge>
))
) : (
<span className="text-sm text-muted-foreground"></span>
<span className="text-sm text-muted-foreground">{t("user.unassigned")}</span>
)}
</div>
</TableCell>
<TableCell>
<Badge variant={item.status === Status.Ok ? "secondary" : "outline"}>
{item.status === Status.Ok ? "启用" : "禁用"}
{item.status === Status.Ok ? t("user.enabled") : t("user.disabled")}
</Badge>
{item.isSystem ? (
<Badge variant="outline" className="ml-2">
{t("user.system")}
</Badge>
) : null}
</TableCell>
@@ -403,12 +412,12 @@ export default function DashboardUsersPage() {
onClick={() => openEditDrawer(item)}
disabled={actionLoadingId === item.id}
>
{t("user.edit")}
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon-sm" />}
aria-label={`更多操作 ${item.username}`}
aria-label={t("user.moreActions", { username: item.username })}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
@@ -419,15 +428,15 @@ export default function DashboardUsersPage() {
>
<ShieldIcon />
{actionLoadingId === item.id
? "处理中..."
: "分配角色"}
? t("user.processing")
: t("user.assignRoles")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => openResetDrawer(item)}
disabled={actionLoadingId === item.id}
>
<KeyRoundIcon />
{t("user.resetPassword")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleToggleStatus(item)}
@@ -435,10 +444,10 @@ export default function DashboardUsersPage() {
>
<ShieldIcon />
{actionLoadingId === item.id
? "处理中..."
? t("user.processing")
: item.status === Status.Ok
? "禁用"
: "启用"}
? t("user.disabled")
: t("user.enabled")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -450,8 +459,8 @@ export default function DashboardUsersPage() {
<DashboardTableStateRow
colSpan={6}
loading={loading}
loadingText="正在加载用户数据..."
emptyText="没有匹配的用户数据"
loadingText={t("user.loadingRows")}
emptyText={t("user.emptyRows")}
/>
) : null}
</TableBody>