refactor: support i18n
This commit is contained in:
mlogclub
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user