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/quick-replies/_components/edit.tsx
+74 -69
View File
@@ -1,10 +1,11 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, Resolver, useForm } from "react-hook-form";
import { z } from "zod/v4";
import { OptionCombobox } from "@/components/option-combobox";
import { ProjectDialog } from "@/components/project-dialog";
import { Button } from "@/components/ui/button";
import {
@@ -14,21 +15,15 @@ import {
FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
type AdminQuickReply,
type CreateAdminQuickReplyPayload,
fetchQuickReply,
} from "@/lib/api/admin";
import { getEnumLabel, getEnumOptions } from "@/lib/enums";
import { getEnumOptions } from "@/lib/enums";
import { Status, StatusLabels } from "@/lib/generated/enums";
import { useI18n } from "@/i18n/provider";
type QuickReplyFormDialogProps = {
open: boolean;
@@ -46,33 +41,39 @@ const emptyForm: EditForm = {
sortNo: "0",
};
const formStatusOptions = getEnumOptions(StatusLabels).filter(
(item) => Number(item.value) !== Status.Deleted,
);
type EditForm = {
groupName: string;
title: string;
content: string;
status: string;
sortNo: string;
};
const quickReplyFormSchema = z.object({
groupName: z.string().trim().min(1, "分组名称不能为空"),
title: z.string().trim().min(1, "标题不能为空"),
content: z.string().trim().min(1, "回复内容不能为空"),
status: z.enum([String(Status.Ok), String(Status.Disabled)], {
message: "请选择状态",
}),
sortNo: z
.string()
.trim()
.min(1, "排序不能为空")
.regex(/^\d+$/, "排序值必须是大于等于 0 的整数"),
});
function createSchema(t: (key: string) => string) {
return z.object({
groupName: z.string().trim().min(1, t("quickReply.groupNameRequired")),
title: z.string().trim().min(1, t("quickReply.titleRequired")),
content: z.string().trim().min(1, t("quickReply.contentRequired")),
status: z.enum([String(Status.Ok), String(Status.Disabled)], {
message: t("quickReply.statusRequired"),
}),
sortNo: z
.string()
.trim()
.min(1, t("quickReply.sortRequired"))
.regex(/^\d+$/, t("quickReply.sortInvalid")),
});
}
type EditForm = z.infer<typeof quickReplyFormSchema>;
const editFormResolver = zodResolver(quickReplyFormSchema as never) as Resolver<
z.input<typeof quickReplyFormSchema>,
undefined,
z.output<typeof quickReplyFormSchema>
>;
function getStatusLabel(value: string) {
return getEnumLabel(StatusLabels, Number(value) as Status);
function getLocalizedStatusLabel(value: string | number, t: (key: string) => string) {
const status = Number(value) as Status;
if (status === Status.Disabled) {
return t("status.disabled");
}
if (status === Status.Deleted) {
return t("status.deleted");
}
return t("status.ok");
}
function buildForm(item: AdminQuickReply | null): EditForm {
@@ -137,8 +138,29 @@ function QuickReplyFormDialogBody({
onOpenChange,
onSubmit,
}: QuickReplyFormDialogBodyProps) {
const t = useI18n();
const formId = "quick-reply-edit-form";
const [loading, setLoading] = useState(false);
const quickReplyFormSchema = useMemo(() => createSchema(t), [t]);
const editFormResolver = useMemo(
() =>
zodResolver(quickReplyFormSchema as never) as Resolver<
z.input<typeof quickReplyFormSchema>,
undefined,
z.output<typeof quickReplyFormSchema>
>,
[quickReplyFormSchema],
);
const formStatusOptions = useMemo(
() =>
getEnumOptions(StatusLabels)
.filter((item) => Number(item.value) !== Status.Deleted)
.map((item) => ({
value: String(item.value),
label: getLocalizedStatusLabel(item.value, t),
})),
[t],
);
const form = useForm<
z.input<typeof quickReplyFormSchema>,
undefined,
@@ -183,7 +205,7 @@ function QuickReplyFormDialogBody({
<ProjectDialog
open={open}
onOpenChange={onOpenChange}
title={itemId ? "编辑" : "新建"}
title={itemId ? t("quickReply.editTitle") : t("quickReply.createTitle")}
size="md"
allowFullscreen
footer={
@@ -194,26 +216,26 @@ function QuickReplyFormDialogBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
取消
{t("quickReply.cancel")}
</Button>
<Button type="submit" form={formId} disabled={saving || loading}>
{saving ? "保存中..." : itemId ? "保存" : "创建"}
{saving ? t("quickReply.saving") : itemId ? t("quickReply.save") : t("quickReply.create")}
</Button>
</>
}
>
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-muted-foreground">加载中...</div>
<div className="text-muted-foreground">{t("quickReply.loadingDetail")}</div>
</div>
) : (
<form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
<Field data-invalid={!!errors.groupName}>
<FieldLabel htmlFor="quick-reply-group-name">分组名称</FieldLabel>
<FieldLabel htmlFor="quick-reply-group-name">{t("quickReply.groupName")}</FieldLabel>
<FieldContent>
<Input
id="quick-reply-group-name"
placeholder="例如：售前、售后、催单"
placeholder={t("quickReply.groupNamePlaceholder")}
aria-invalid={!!errors.groupName}
{...register("groupName")}
/>
@@ -221,11 +243,11 @@ function QuickReplyFormDialogBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.title}>
<FieldLabel htmlFor="quick-reply-title">标题</FieldLabel>
<FieldLabel htmlFor="quick-reply-title">{t("quickReply.title")}</FieldLabel>
<FieldContent>
<Input
id="quick-reply-title"
placeholder="请输入快捷回复标题"
placeholder={t("quickReply.titlePlaceholder")}
aria-invalid={!!errors.title}
{...register("title")}
/>
@@ -233,11 +255,11 @@ function QuickReplyFormDialogBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.content}>
<FieldLabel htmlFor="quick-reply-content">回复内容</FieldLabel>
<FieldLabel htmlFor="quick-reply-content">{t("quickReply.content")}</FieldLabel>
<FieldContent>
<Textarea
id="quick-reply-content"
placeholder="请输入回复内容"
placeholder={t("quickReply.contentPlaceholder")}
rows={6}
aria-invalid={!!errors.content}
{...register("content")}
@@ -247,49 +269,32 @@ function QuickReplyFormDialogBody({
</Field>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field data-invalid={!!errors.status}>
<FieldLabel htmlFor="quick-reply-status">状态</FieldLabel>
<FieldLabel>{t("quickReply.columnStatus")}</FieldLabel>
<FieldContent>
<Controller
control={control}
name="status"
render={({ field }) => (
<Select
<OptionCombobox
value={field.value}
onValueChange={field.onChange}
modal={false}
>
<SelectTrigger
id="quick-reply-status"
className="w-full"
aria-invalid={!!errors.status}
>
<SelectValue>{getStatusLabel(field.value)}</SelectValue>
</SelectTrigger>
<SelectContent>
{formStatusOptions.map((option) => (
<SelectItem
key={String(option.value)}
value={String(option.value)}
>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
options={formStatusOptions}
placeholder={t("quickReply.statusRequired")}
onChange={field.onChange}
/>
)}
/>
<FieldError errors={[errors.status]} />
</FieldContent>
</Field>
<Field data-invalid={!!errors.sortNo}>
<FieldLabel htmlFor="quick-reply-sort-no">排序</FieldLabel>
<FieldLabel htmlFor="quick-reply-sort-no">{t("quickReply.columnSort")}</FieldLabel>
<FieldContent>
<Input
id="quick-reply-sort-no"
type="number"
min={0}
step={1}
placeholder="数字越大越靠前"
placeholder={t("quickReply.sortPlaceholder")}
aria-invalid={!!errors.sortNo}
{...register("sortNo")}
/>
web/app/dashboard/quick-replies/page.tsx
+52 -40
View File
@@ -46,21 +46,23 @@ import {
type CreateAdminQuickReplyPayload,
type PageResult,
} from "@/lib/api/admin"
import { getEnumLabel, getEnumOptions } from "@/lib/enums"
import { getEnumOptions } from "@/lib/enums"
import { Status, StatusLabels } from "@/lib/generated/enums"
import { useI18n } from "@/i18n/provider"
import { EditDialog } from "./_components/edit"
const listStatusOptions = [
{ value: "all", label: "全部状态" },
...getEnumOptions(StatusLabels)
.filter((item) => Number(item.value) !== Status.Deleted)
.map((item) => ({
value: String(item.value),
label: item.label,
})),
] as const
function getStatusLabel(status: Status, t: (key: string) => string) {
if (status === Status.Disabled) {
return t("status.disabled")
}
if (status === Status.Deleted) {
return t("status.deleted")
}
return t("status.ok")
}
export default function DashboardQuickRepliesPage() {
const t = useI18n()
const [keywordInput, setKeywordInput] = useState("")
const [groupNameInput, setGroupNameInput] = useState("")
const [statusFilterInput, setStatusFilterInput] = useState("all")
@@ -91,11 +93,21 @@ export default function DashboardQuickRepliesPage() {
})
setResult(data)
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载快捷回复失败")
toast.error(error instanceof Error ? error.message : t("quickReply.loadFailed"))
} finally {
setLoading(false)
}
}, [groupName, keyword, limit, page, statusFilter])
}, [groupName, keyword, limit, page, statusFilter, t])
const listStatusOptions = [
{ value: "all", label: t("status.all") },
...getEnumOptions(StatusLabels)
.filter((item) => Number(item.value) !== Status.Deleted)
.map((item) => ({
value: String(item.value),
label: getStatusLabel(item.value as Status, t),
})),
]
useEffect(() => {
void loadData()
@@ -156,16 +168,16 @@ export default function DashboardQuickRepliesPage() {
id: editingItem.id,
...payload,
})
toast.success(`已更新快捷回复：${editingItem.title}`)
toast.success(t("quickReply.updated", { title: editingItem.title }))
} else {
await createQuickReply(payload)
toast.success(`已创建快捷回复：${payload.title}`)
toast.success(t("quickReply.created", { title: payload.title }))
}
setDialogOpen(false)
setEditingItem(null)
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存快捷回复失败")
toast.error(error instanceof Error ? error.message : t("quickReply.saveFailed"))
} finally {
setSaving(false)
}
@@ -185,11 +197,11 @@ export default function DashboardQuickRepliesPage() {
status: nextStatus,
})
toast.success(
`已${nextStatus === Status.Ok ? "启用" : "禁用"}：${item.title}`
t(nextStatus === Status.Ok ? "quickReply.enabled" : "quickReply.disabled", { title: item.title })
)
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : "更新状态失败")
toast.error(error instanceof Error ? error.message : t("quickReply.statusUpdateFailed"))
} finally {
setActionLoadingId(null)
}
@@ -199,10 +211,10 @@ export default function DashboardQuickRepliesPage() {
setActionLoadingId(item.id)
try {
await deleteQuickReply(item.id)
toast.success(`已删除快捷回复：${item.title}`)
toast.success(t("quickReply.deleted", { title: item.title }))
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : "删除快捷回复失败")
toast.error(error instanceof Error ? error.message : t("quickReply.deleteFailed"))
} finally {
setActionLoadingId(null)
}
@@ -216,11 +228,11 @@ export default function DashboardQuickRepliesPage() {
<>
<Button variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCwIcon className={loading ? "animate-spin" : undefined} />
刷新
{t("quickReply.refresh")}
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建快捷回复
{t("quickReply.new")}
</Button>
</>
}
@@ -231,7 +243,7 @@ export default function DashboardQuickRepliesPage() {
value={keywordInput}
onChange={(event) => setKeywordInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder="按标题筛选"
placeholder={t("quickReply.filterTitle")}
className="pl-9"
/>
</div>
@@ -239,20 +251,20 @@ export default function DashboardQuickRepliesPage() {
value={groupNameInput}
onChange={(event) => setGroupNameInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder="按分组筛选"
placeholder={t("quickReply.filterGroup")}
className="w-full sm:w-44"
/>
<div className="w-full sm:w-36">
<OptionCombobox
value={statusFilterInput}
onChange={setStatusFilterInput}
placeholder="全部状态"
placeholder={t("status.all")}
options={[...listStatusOptions]}
/>
</div>
<Button variant="outline" onClick={applyFilters} disabled={loading}>
<SearchIcon />
查询
{t("quickReply.query")}
</Button>
</DashboardToolbar>
<DashboardTableShell
@@ -273,12 +285,12 @@ export default function DashboardQuickRepliesPage() {
<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("quickReply.columnQuickReply")}</TableHead>
<TableHead>{t("quickReply.columnGroup")}</TableHead>
<TableHead>{t("quickReply.columnStatus")}</TableHead>
<TableHead>{t("quickReply.columnSort")}</TableHead>
<TableHead>{t("quickReply.columnCreator")}</TableHead>
<TableHead className="w-[92px] text-right">{t("quickReply.columnActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -306,7 +318,7 @@ export default function DashboardQuickRepliesPage() {
item.status === Status.Ok ? "default" : "outline"
}
>
{getEnumLabel(StatusLabels, item.status as Status)}
{getStatusLabel(item.status as Status, t)}
</Badge>
</TableCell>
<TableCell>{item.sortNo}</TableCell>
@@ -318,12 +330,12 @@ export default function DashboardQuickRepliesPage() {
size="sm"
onClick={() => openEditDialog(item)}
>
编辑
{t("quickReply.edit")}
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon-sm" />}
aria-label={`更多操作 ${item.title}`}
aria-label={t("quickReply.moreActions", { title: item.title })}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
@@ -331,17 +343,17 @@ export default function DashboardQuickRepliesPage() {
<DropdownMenuItem onClick={() => void handleToggleStatus(item)}>
<RefreshCwIcon />
{actionLoadingId === item.id
? "处理中..."
? t("quickReply.processing")
: item.status === Status.Ok
? "禁用"
: "启用"}
? t("quickReply.disable")
: t("quickReply.enable")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => void handleDelete(item)}
className="text-destructive focus:text-destructive"
>
<Trash2Icon />
{actionLoadingId === item.id ? "删除中..." : "删除"}
{actionLoadingId === item.id ? t("quickReply.deleting") : t("quickReply.delete")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -353,8 +365,8 @@ export default function DashboardQuickRepliesPage() {
<DashboardTableStateRow
colSpan={6}
loading={loading}
loadingText="正在加载快捷回复..."
emptyText="没有匹配的快捷回复"
loadingText={t("quickReply.loading")}
emptyText={t("quickReply.empty")}
/>
) : null}
</TableBody>