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/agents/_components/edit.tsx
+78 -85
View File
@@ -2,12 +2,13 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Controller, Resolver, useForm } from "react-hook-form";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Controller, type Resolver, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod/v4";
import { ImageInput } from "@/components/image-input";
import { OptionCombobox } from "@/components/option-combobox";
import { ProjectDialog } from "@/components/project-dialog";
import { Button } from "@/components/ui/button";
import {
@@ -30,13 +31,6 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import {
@@ -44,13 +38,12 @@ import {
fetchUsersAll,
type AdminAgentProfile,
type AdminUser,
type CreateAdminAgentProfilePayload
type CreateAdminAgentProfilePayload,
} from "@/lib/api/admin";
import {
ServiceStatus,
ServiceStatusLabels,
} from "@/lib/generated/enums";
import { getEnumLabel, getEnumOptions } from "@/lib/enums";
import { useI18n } from "@/i18n/provider";
import { ServiceStatus } from "@/lib/generated/enums";
type TFunction = (key: string, values?: Record<string, string | number>) => string;
type AgentEditDialogProps = {
open: boolean;
@@ -61,7 +54,6 @@ type AgentEditDialogProps = {
onSubmit: (payload: CreateAdminAgentProfilePayload) => Promise<void>;
};
const serviceStatusOptions = getEnumOptions(ServiceStatusLabels);
const emptyForm: EditForm = {
userId: "",
teamId: "",
@@ -76,40 +68,49 @@ const emptyForm: EditForm = {
remark: "",
};
const editFormSchema = z.object({
userId: z.string().trim().min(1, "请选择关联用户"),
teamId: z.string().trim().min(1, "请选择所属客服组"),
agentCode: z.string().trim().min(1, "客服工号不能为空"),
displayName: z.string().trim().min(1, "展示名不能为空"),
type EditForm = {
userId: string;
teamId: string;
agentCode: string;
displayName: string;
avatar: string;
serviceStatus: "0" | "1";
maxConcurrentCount: string;
priorityLevel: string;
autoAssignEnabled: boolean;
receiveOfflineMessage: boolean;
remark: string;
};
function createEditFormSchema(t: TFunction) {
return z.object({
userId: z.string().trim().min(1, t("agentProfile.userRequired")),
teamId: z.string().trim().min(1, t("agentProfile.teamRequired")),
agentCode: z.string().trim().min(1, t("agentProfile.agentCodeRequired")),
displayName: z.string().trim().min(1, t("agentProfile.displayNameRequired")),
avatar: z.string().trim(),
serviceStatus: z.enum(["0", "1"], {
message: "请选择客服状态",
message: t("agentProfile.statusRequired"),
}),
maxConcurrentCount: z
.string()
.trim()
.regex(/^\d+$/, "最大并发必须是大于等于 0 的整数"),
.regex(/^\d+$/, t("agentProfile.maxConcurrentInvalid")),
priorityLevel: z
.string()
.trim()
.regex(/^-?\d+$/, "优先级必须是整数"),
.regex(/^-?\d+$/, t("agentProfile.priorityInvalid")),
autoAssignEnabled: z.boolean(),
receiveOfflineMessage: z.boolean(),
remark: z.string().trim(),
});
});
}
type EditForm = z.infer<typeof editFormSchema>;
const editFormResolver = zodResolver(editFormSchema as never) as Resolver<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>;
function getStatusLabel(value: string) {
return getEnumLabel(
ServiceStatusLabels,
Number(value) as ServiceStatus,
);
function getServiceStatusOptions(t: TFunction) {
return [
{ value: String(ServiceStatus.Idle), label: t("agentProfile.statusIdle") },
{ value: String(ServiceStatus.Busy), label: t("agentProfile.statusBusy") },
];
}
function buildForm(item: AdminAgentProfile | null): EditForm {
@@ -203,6 +204,7 @@ function AgentEditDialogBody({
onOpenChange,
onSubmit,
}: AgentEditDialogBodyProps) {
const t = useI18n();
const [users, setUsers] = useState<AdminUser[]>([]);
const [userSelectOpen, setUserSelectOpen] = useState(false);
const [loading, setLoading] = useState(false);
@@ -210,6 +212,7 @@ function AgentEditDialogBody({
value: String(user.id),
label: `${user.nickname || user.username} (${user.username})`,
}));
const serviceStatusOptions = useMemo(() => getServiceStatusOptions(t), [t]);
const loadOptions = useCallback(async () => {
try {
const [usersData] = await Promise.all([
@@ -217,14 +220,15 @@ function AgentEditDialogBody({
]);
setUsers(usersData);
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载选项失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadOptionsFailed"));
}
}, []);
const form = useForm<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>({
}, [t]);
const editFormSchema = useMemo(() => createEditFormSchema(t), [t]);
const editFormResolver = useMemo(
() => zodResolver(editFormSchema) as Resolver<EditForm>,
[editFormSchema],
);
const form = useForm<EditForm>({
resolver: editFormResolver,
defaultValues: buildFormWithDefaultTeam(null, defaultTeamId),
});
@@ -247,13 +251,13 @@ function AgentEditDialogBody({
const data = await fetchAgentProfile(itemId);
reset(buildForm(data));
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载客服档案详情失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadDetailFailed"));
} finally {
setLoading(false);
}
}
void loadDetail();
}, [itemId, defaultTeamId, reset]);
}, [itemId, defaultTeamId, reset, t]);
useEffect(() => {
if (open) {
@@ -271,7 +275,7 @@ function AgentEditDialogBody({
<ProjectDialog
open={open}
onOpenChange={onOpenChange}
title={itemId ? "编辑客服档案" : "新建客服档案"}
title={itemId ? t("agentProfile.editTitle") : t("agentProfile.createTitle")}
size="lg"
footer={
<>
@@ -281,17 +285,17 @@ function AgentEditDialogBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
取消
{t("agentProfile.cancel")}
</Button>
<Button type="submit" form={formId} disabled={saving || loading}>
{saving ? "保存中..." : "保存"}
{saving ? t("agentProfile.saving") : t("agentProfile.save")}
</Button>
</>
}
>
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-muted-foreground">加载中...</div>
<div className="text-muted-foreground">{t("agentProfile.loading")}</div>
</div>
) : (
<form
@@ -301,7 +305,7 @@ function AgentEditDialogBody({
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field data-invalid={!!errors.userId}>
<FieldLabel>关联用户</FieldLabel>
<FieldLabel>{t("agentProfile.linkedUser")}</FieldLabel>
<FieldContent>
<Controller
control={control}
@@ -324,7 +328,7 @@ function AgentEditDialogBody({
<span className="truncate">
{userOptions.find(
(option) => option.value === field.value,
)?.label ?? "请选择用户"}
)?.label ?? t("agentProfile.selectUser")}
</span>
<ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
</PopoverTrigger>
@@ -333,9 +337,9 @@ function AgentEditDialogBody({
align="start"
>
<Command>
<CommandInput placeholder="搜索用户..." />
<CommandInput placeholder={t("agentProfile.searchUser")} />
<CommandList>
<CommandEmpty>没有匹配的用户</CommandEmpty>
<CommandEmpty>{t("agentProfile.emptyUser")}</CommandEmpty>
<CommandGroup>
{userOptions.map((option) => (
<CommandItem
@@ -367,11 +371,11 @@ function AgentEditDialogBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.displayName}>
<FieldLabel htmlFor="agent-display-name">展示名</FieldLabel>
<FieldLabel htmlFor="agent-display-name">{t("agentProfile.displayName")}</FieldLabel>
<FieldContent>
<Input
id="agent-display-name"
placeholder="请输入展示名"
placeholder={t("agentProfile.displayNamePlaceholder")}
{...register("displayName")}
/>
<FieldError errors={[errors.displayName]} />
@@ -381,11 +385,11 @@ function AgentEditDialogBody({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field data-invalid={!!errors.agentCode}>
<FieldLabel htmlFor="agent-code">客服工号</FieldLabel>
<FieldLabel htmlFor="agent-code">{t("agentProfile.agentCodeLabel")}</FieldLabel>
<FieldContent>
<Input
id="agent-code"
placeholder="例如：A1001"
placeholder={t("agentProfile.agentCodePlaceholder")}
{...register("agentCode")}
/>
<FieldError errors={[errors.agentCode]} />
@@ -393,7 +397,7 @@ function AgentEditDialogBody({
</Field>
<Field className="min-h-32">
<FieldLabel>头像</FieldLabel>
<FieldLabel>{t("agentProfile.avatar")}</FieldLabel>
<FieldContent>
<Controller
control={control}
@@ -404,7 +408,7 @@ function AgentEditDialogBody({
onChange={field.onChange}
disabled={saving}
prefix="avatar"
placeholder="上传头像"
placeholder={t("agentProfile.avatarUpload")}
className="size-16 rounded-full"
/>
)}
@@ -415,31 +419,20 @@ function AgentEditDialogBody({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field data-invalid={!!errors.serviceStatus}>
<FieldLabel>客服状态</FieldLabel>
<FieldLabel>{t("agentProfile.serviceStatus")}</FieldLabel>
<FieldContent>
<Controller
control={control}
name="serviceStatus"
render={({ field }) => (
<Select
<OptionCombobox
options={serviceStatusOptions}
value={field.value}
onValueChange={field.onChange}
modal={false}
>
<SelectTrigger className="w-full">
<SelectValue>{getStatusLabel(field.value)}</SelectValue>
</SelectTrigger>
<SelectContent>
{serviceStatusOptions.map((option) => (
<SelectItem
key={option.value}
value={String(option.value)}
>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
onChange={field.onChange}
placeholder={t("agentProfile.selectStatus")}
searchPlaceholder={t("agentProfile.searchStatus")}
emptyText={t("agentProfile.emptyStatus")}
/>
)}
/>
<FieldError errors={[errors.serviceStatus]} />
@@ -450,7 +443,7 @@ function AgentEditDialogBody({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field data-invalid={!!errors.maxConcurrentCount}>
<FieldLabel htmlFor="agent-max-concurrent-count">
最大并发
{t("agentProfile.maxConcurrent")}
</FieldLabel>
<FieldContent>
<Input
@@ -463,7 +456,7 @@ function AgentEditDialogBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.priorityLevel}>
<FieldLabel htmlFor="agent-priority-level">优先级</FieldLabel>
<FieldLabel htmlFor="agent-priority-level">{t("agentProfile.priority")}</FieldLabel>
<FieldContent>
<Input
id="agent-priority-level"
@@ -478,7 +471,7 @@ function AgentEditDialogBody({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Field>
<FieldLabel>参与自动分配</FieldLabel>
<FieldLabel>{t("agentProfile.autoAssignEnabled")}</FieldLabel>
<FieldContent>
<Controller
control={control}
@@ -493,7 +486,7 @@ function AgentEditDialogBody({
</FieldContent>
</Field>
<Field>
<FieldLabel>离线接收消息</FieldLabel>
<FieldLabel>{t("agentProfile.receiveOfflineMessage")}</FieldLabel>
<FieldContent>
<Controller
control={control}
@@ -510,12 +503,12 @@ function AgentEditDialogBody({
</div>
<Field>
<FieldLabel htmlFor="agent-remark">备注</FieldLabel>
<FieldLabel htmlFor="agent-remark">{t("agentProfile.remark")}</FieldLabel>
<FieldContent>
<Textarea
id="agent-remark"
rows={4}
placeholder="请输入备注"
placeholder={t("agentProfile.remarkPlaceholder")}
{...register("remark")}
/>
</FieldContent>
web/app/dashboard/agents/_components/team-edit.tsx
+65 -75
View File
@@ -1,9 +1,9 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
import { Controller, Resolver, useForm } from "react-hook-form";
import { Controller, type Resolver, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod/v4";
@@ -14,6 +14,7 @@ import {
fetchUsersAll,
type AdminUser,
} from "@/lib/api/admin";
import { OptionCombobox } from "@/components/option-combobox";
import { Button } from "@/components/ui/button";
import {
Command,
@@ -42,16 +43,11 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Status, StatusLabels } from "@/lib/generated/enums";
import { getEnumOptions } from "@/lib/enums";
import { useI18n } from "@/i18n/provider";
import { Status } from "@/lib/generated/enums";
type TFunction = (key: string, values?: Record<string, string | number>) => string;
type TeamEditDialogProps = {
open: boolean;
@@ -61,13 +57,6 @@ type TeamEditDialogProps = {
onSubmit: (payload: CreateAdminAgentTeamPayload) => Promise<void>;
};
const statusOptions = getEnumOptions(StatusLabels)
.filter((option) => option.value !== Status.Deleted)
.map((option) => ({
value: String(option.value),
label: option.label,
}));
const emptyForm: EditForm = {
name: "",
leaderUserId: "0",
@@ -76,22 +65,32 @@ const emptyForm: EditForm = {
remark: "",
};
const editFormSchema = z.object({
name: z.string().trim().min(1, "客服组名称不能为空"),
leaderUserId: z.string().trim().regex(/^\d+$/, "组长用户不合法"),
type EditForm = {
name: string;
leaderUserId: string;
status: string;
description: string;
remark: string;
};
function createEditFormSchema(t: TFunction) {
return z.object({
name: z.string().trim().min(1, t("agentProfile.teamNameRequired")),
leaderUserId: z.string().trim().regex(/^\d+$/, t("agentProfile.leaderInvalid")),
status: z.enum([String(Status.Ok), String(Status.Disabled)], {
message: "请选择状态",
message: t("agentProfile.teamStatusRequired"),
}),
description: z.string().trim(),
remark: z.string().trim(),
});
});
}
type EditForm = z.infer<typeof editFormSchema>;
const editFormResolver = zodResolver(editFormSchema as never) as Resolver<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>;
function getStatusOptions(t: TFunction) {
return [
{ value: String(Status.Ok), label: t("agentProfile.enabled") },
{ value: String(Status.Disabled), label: t("agentProfile.disabled") },
];
}
function buildForm(item: AdminAgentTeam | null): EditForm {
if (!item) {
@@ -146,6 +145,7 @@ function TeamEditDialogBody({
onOpenChange,
onSubmit,
}: TeamEditDialogBodyProps) {
const t = useI18n();
const [users, setUsers] = useState<AdminUser[]>([]);
const [userSelectOpen, setUserSelectOpen] = useState(false);
const [loading, setLoading] = useState(false);
@@ -153,19 +153,21 @@ function TeamEditDialogBody({
value: String(user.id),
label: `${user.nickname || user.username} (${user.username})`,
}));
const statusOptions = useMemo(() => getStatusOptions(t), [t]);
const loadUsers = useCallback(async () => {
try {
const data = await fetchUsersAll();
setUsers(data);
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载用户选项失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadUsersFailed"));
}
}, []);
const form = useForm<
z.input<typeof editFormSchema>,
undefined,
z.output<typeof editFormSchema>
>({
}, [t]);
const editFormSchema = useMemo(() => createEditFormSchema(t), [t]);
const editFormResolver = useMemo(
() => zodResolver(editFormSchema) as Resolver<EditForm>,
[editFormSchema],
);
const form = useForm<EditForm>({
resolver: editFormResolver,
defaultValues: emptyForm,
});
@@ -188,13 +190,13 @@ function TeamEditDialogBody({
const data = await fetchAgentTeam(itemId);
reset(buildForm(data));
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载客服组详情失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadTeamDetailFailed"));
} finally {
setLoading(false);
}
}
void loadDetail();
}, [itemId, reset]);
}, [itemId, reset, t]);
useEffect(() => {
void loadUsers();
@@ -207,28 +209,28 @@ function TeamEditDialogBody({
return (
<DialogContent className="max-w-xl gap-0 p-0 sm:max-w-xl">
<DialogHeader className="px-6 pt-6">
<DialogTitle>{itemId ? "编辑" : "新建"}</DialogTitle>
<DialogTitle>{itemId ? t("agentProfile.teamEditTitle") : t("agentProfile.teamCreateTitle")}</DialogTitle>
</DialogHeader>
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-muted-foreground">加载中...</div>
<div className="text-muted-foreground">{t("agentProfile.loading")}</div>
</div>
) : (
<form onSubmit={handleSubmit(onFormSubmit)}>
<div className="space-y-4 p-6">
<Field data-invalid={!!errors.name}>
<FieldLabel htmlFor="agent-team-name">客服组名称</FieldLabel>
<FieldLabel htmlFor="agent-team-name">{t("agentProfile.teamName")}</FieldLabel>
<FieldContent>
<Input
id="agent-team-name"
placeholder="请输入客服组名称"
placeholder={t("agentProfile.teamNamePlaceholder")}
{...register("name")}
/>
<FieldError errors={[errors.name]} />
</FieldContent>
</Field>
<Field data-invalid={!!errors.leaderUserId}>
<FieldLabel>组长</FieldLabel>
<FieldLabel>{t("agentProfile.leader")}</FieldLabel>
<FieldContent>
<Controller
control={control}
@@ -247,19 +249,19 @@ function TeamEditDialogBody({
>
<span className="truncate">
{field.value === "0"
? "暂不设置"
: userOptions.find((option) => option.value === field.value)?.label ?? "请选择组长"}
? t("agentProfile.noLeader")
: userOptions.find((option) => option.value === field.value)?.label ?? t("agentProfile.selectLeader")}
</span>
<ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
</PopoverTrigger>
<PopoverContent className="w-[var(--radix-popper-anchor-width)] p-0" align="start">
<Command>
<CommandInput placeholder="搜索用户..." />
<CommandInput placeholder={t("agentProfile.searchUser")} />
<CommandList>
<CommandEmpty>没有匹配的用户</CommandEmpty>
<CommandEmpty>{t("agentProfile.emptyUser")}</CommandEmpty>
<CommandGroup>
<CommandItem
value="暂不设置"
value={t("agentProfile.noLeader")}
onSelect={() => {
field.onChange("0");
setUserSelectOpen(false);
@@ -268,7 +270,7 @@ function TeamEditDialogBody({
<CheckIcon
className={`mr-2 size-4 ${field.value === "0" ? "opacity-100" : "opacity-0"}`}
/>
暂不设置
{t("agentProfile.noLeader")}
</CommandItem>
{userOptions.map((option) => (
<CommandItem
@@ -298,54 +300,42 @@ function TeamEditDialogBody({
</FieldContent>
</Field>
<Field data-invalid={!!errors.status}>
<FieldLabel>状态</FieldLabel>
<FieldLabel>{t("agentProfile.status")}</FieldLabel>
<FieldContent>
<Controller
control={control}
name="status"
render={({ field }) => (
<Select
<OptionCombobox
options={statusOptions}
value={field.value}
onValueChange={field.onChange}
modal={false}
>
<SelectTrigger className="w-full">
<SelectValue>
{statusOptions.find(
(item) => item.value === field.value,
)?.label ?? "请选择状态"}
</SelectValue>
</SelectTrigger>
<SelectContent>
{statusOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
onChange={field.onChange}
placeholder={t("agentProfile.selectStatus")}
searchPlaceholder={t("agentProfile.searchStatus")}
emptyText={t("agentProfile.emptyStatus")}
/>
)}
/>
<FieldError errors={[errors.status]} />
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="agent-team-description">职责说明</FieldLabel>
<FieldLabel htmlFor="agent-team-description">{t("agentProfile.description")}</FieldLabel>
<FieldContent>
<Input
id="agent-team-description"
placeholder="例如：负责售前咨询与线索转化"
placeholder={t("agentProfile.descriptionPlaceholder")}
{...register("description")}
/>
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="agent-team-remark">备注</FieldLabel>
<FieldLabel htmlFor="agent-team-remark">{t("agentProfile.remark")}</FieldLabel>
<FieldContent>
<Textarea
id="agent-team-remark"
rows={4}
placeholder="请输入备注"
placeholder={t("agentProfile.remarkPlaceholder")}
{...register("remark")}
/>
</FieldContent>
@@ -358,10 +348,10 @@ function TeamEditDialogBody({
onClick={() => onOpenChange(false)}
disabled={saving}
>
取消
{t("agentProfile.cancel")}
</Button>
<Button type="submit" disabled={saving || loading}>
{saving ? "保存中..." : "保存"}
{saving ? t("agentProfile.saving") : t("agentProfile.save")}
</Button>
</DialogFooter>
</form>
web/app/dashboard/agents/_components/team-sidebar.tsx
+25 -21
View File
@@ -31,8 +31,8 @@ import {
type AdminAgentTeam,
type CreateAdminAgentTeamPayload,
} from "@/lib/api/admin";
import { Status, StatusLabels } from "@/lib/generated/enums";
import { getEnumLabel } from "@/lib/enums";
import { Status } from "@/lib/generated/enums";
import { useI18n } from "@/i18n/provider";
import { cn } from "@/lib/utils";
type AgentTeamSidebarProps = {
@@ -41,17 +41,21 @@ type AgentTeamSidebarProps = {
onTeamsChange?: (teams: AdminAgentTeam[]) => void;
};
const statusTabs = [
{ value: "all", label: "全部" },
{ value: String(Status.Ok), label: StatusLabels[Status.Ok] },
{ value: String(Status.Disabled), label: StatusLabels[Status.Disabled] },
] as const;
function getStatusTabs(t: (key: string, values?: Record<string, string | number>) => string) {
return [
{ value: "all", label: t("agentProfile.all") },
{ value: String(Status.Ok), label: t("agentProfile.enabled") },
{ value: String(Status.Disabled), label: t("agentProfile.disabled") },
] as const;
}
export function AgentTeamSidebar({
selectedTeamId,
onSelectTeam,
onTeamsChange,
}: AgentTeamSidebarProps) {
const t = useI18n();
const statusTabs = getStatusTabs(t);
const [keyword, setKeyword] = useState("");
const [statusFilter, setStatusFilter] =
useState<(typeof statusTabs)[number]["value"]>("all");
@@ -69,11 +73,11 @@ export function AgentTeamSidebar({
setTeams(data);
onTeamsChange?.(data);
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载客服组失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadTeamsFailed"));
} finally {
setLoading(false);
}
}, [onTeamsChange]);
}, [onTeamsChange, t]);
useEffect(() => {
void loadData();
@@ -135,16 +139,16 @@ export function AgentTeamSidebar({
try {
if (editingItem) {
await updateAgentTeam({ id: editingItem.id, ...payload });
toast.success(`已更新客服组：${editingItem.name}`);
toast.success(t("agentProfile.teamUpdated", { name: editingItem.name }));
} else {
await createAgentTeam(payload);
toast.success(`已创建客服组：${payload.name}`);
toast.success(t("agentProfile.teamCreated", { name: payload.name }));
}
setDialogOpen(false);
setEditingItem(null);
await loadData();
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存客服组失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.teamSaveFailed"));
} finally {
setSaving(false);
}
@@ -154,10 +158,10 @@ export function AgentTeamSidebar({
setActionLoadingId(item.id);
try {
await deleteAgentTeam(item.id);
toast.success(`已删除客服组：${item.name}`);
toast.success(t("agentProfile.teamDeleted", { name: item.name }));
await loadData();
} catch (error) {
toast.error(error instanceof Error ? error.message : "删除客服组失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.teamDeleteFailed"));
} finally {
setActionLoadingId(null);
}
@@ -169,7 +173,7 @@ export function AgentTeamSidebar({
<div className="border-b px-3 py-3">
<div className="flex items-center justify-between gap-2">
<div>
<div className="text-sm font-medium">客服组</div>
<div className="text-sm font-medium">{t("agentProfile.teamTitle")}</div>
</div>
</div>
<div className="relative mt-3">
@@ -177,7 +181,7 @@ export function AgentTeamSidebar({
<Input
value={keyword}
onChange={(event) => setKeyword(event.target.value)}
placeholder="搜索客服组"
placeholder={t("agentProfile.searchTeams")}
className="pl-9"
/>
</div>
@@ -235,7 +239,7 @@ export function AgentTeamSidebar({
item.status === Status.Ok ? "secondary" : "outline"
}
>
{getEnumLabel(StatusLabels, item.status as Status)}
{item.status === Status.Ok ? t("agentProfile.enabled") : t("agentProfile.disabled")}
</Badge>
</button>
<DropdownMenu>
@@ -247,21 +251,21 @@ export function AgentTeamSidebar({
className="opacity-0 group-hover:opacity-100"
/>
}
aria-label={`更多操作 ${item.name}`}
aria-label={t("agentProfile.moreActions", { name: item.name })}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40 min-w-40">
<DropdownMenuItem onClick={() => openEditDialog(item)}>
<Pencil />
编辑
{t("agentProfile.edit")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => void handleDelete(item)}
className="text-destructive focus:text-destructive"
>
<Trash2Icon />
{actionLoadingId === item.id ? "删除中..." : "删除"}
{actionLoadingId === item.id ? t("agentProfile.deleting") : t("agentProfile.delete")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -269,7 +273,7 @@ export function AgentTeamSidebar({
))}
{!loading && filteredTeams.length === 0 ? (
<div className="px-2 py-10 text-center text-sm text-muted-foreground">
没有匹配的客服组
{t("agentProfile.noTeams")}
</div>
) : null}
</div>
web/app/dashboard/agents/page.tsx
+63 -74
View File
@@ -21,6 +21,7 @@ import { ListPagination } from "@/components/list-pagination";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { OptionCombobox } from "@/components/option-combobox";
import {
DropdownMenu,
DropdownMenuContent,
@@ -28,13 +29,6 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
@@ -53,25 +47,29 @@ import {
type CreateAdminAgentProfilePayload,
type PageResult,
} from "@/lib/api/admin";
import { getEnumLabel, getEnumOptions } from "@/lib/enums";
import {
ServiceStatus,
ServiceStatusLabels,
} from "@/lib/generated/enums";
import { useI18n } from "@/i18n/provider";
import { ServiceStatus } from "@/lib/generated/enums";
import { formatDateTime } from "@/lib/utils";
import { EditDialog } from "./_components/edit";
import { AgentTeamSidebar } from "./_components/team-sidebar";
const serviceStatusOptions = [
{ value: "all", label: "全部状态" },
...getEnumOptions(ServiceStatusLabels),
];
type TFunction = (key: string, values?: Record<string, string | number>) => string;
function getStatusLabel(value: number) {
return getEnumLabel(ServiceStatusLabels, value as ServiceStatus);
function getServiceStatusOptions(t: TFunction) {
return [
{ value: "all", label: t("agentProfile.allStatuses") },
{ value: String(ServiceStatus.Idle), label: t("agentProfile.statusIdle") },
{ value: String(ServiceStatus.Busy), label: t("agentProfile.statusBusy") },
];
}
function getStatusLabel(value: number, t: TFunction) {
return getServiceStatusOptions(t).find((item) => item.value === String(value))?.label ?? String(value);
}
export default function DashboardAgentsPage() {
const t = useI18n();
const serviceStatusOptions = getServiceStatusOptions(t);
const [selectedTeam, setSelectedTeam] = useState<AdminAgentTeam | null>(null);
const [teams, setTeams] = useState<AdminAgentTeam[]>([]);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -108,11 +106,11 @@ export default function DashboardAgentsPage() {
});
setResult(data);
} catch (error) {
toast.error(error instanceof Error ? error.message : "加载客服档案失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.loadFailed"));
} finally {
setLoading(false);
}
}, [agentCode, displayName, limit, page, selectedTeam?.id, statusFilter]);
}, [agentCode, displayName, limit, page, selectedTeam?.id, statusFilter, t]);
useEffect(() => {
void loadData();
@@ -193,16 +191,16 @@ export default function DashboardAgentsPage() {
try {
if (editingItem) {
await updateAgentProfile({ id: editingItem.id, ...payload });
toast.success(`已更新客服档案：${editingItem.displayName}`);
toast.success(t("agentProfile.updated", { name: editingItem.displayName }));
} else {
await createAgentProfile(payload);
toast.success(`已创建客服档案：${payload.displayName}`);
toast.success(t("agentProfile.created", { name: payload.displayName }));
}
setDialogOpen(false);
setEditingItem(null);
await loadData();
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存客服档案失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.saveFailed"));
} finally {
setSaving(false);
}
@@ -212,10 +210,10 @@ export default function DashboardAgentsPage() {
setActionLoadingId(item.id);
try {
await deleteAgentProfile(item.id);
toast.success(`已删除客服档案：${item.displayName}`);
toast.success(t("agentProfile.deleted", { name: item.displayName }));
await loadData();
} catch (error) {
toast.error(error instanceof Error ? error.message : "删除客服档案失败");
toast.error(error instanceof Error ? error.message : t("agentProfile.deleteFailed"));
} finally {
setActionLoadingId(null);
}
@@ -241,7 +239,7 @@ export default function DashboardAgentsPage() {
size="icon"
className="absolute top-4 left-1/2 z-10 size-7 -translate-x-1/2 rounded-full shadow-sm"
onClick={() => setSidebarCollapsed((value) => !value)}
aria-label={sidebarCollapsed ? "展开客服组列表" : "折叠客服组列表"}
aria-label={sidebarCollapsed ? t("agentProfile.expandTeams") : t("agentProfile.collapseTeams")}
>
{sidebarCollapsed ? (
<PanelLeftOpenIcon className="size-3.5" />
@@ -256,7 +254,7 @@ export default function DashboardAgentsPage() {
actions={
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
{t("agentProfile.new")}
</Button>
}
>
@@ -268,7 +266,7 @@ export default function DashboardAgentsPage() {
setDisplayNameInput(event.target.value)
}
onKeyDown={handleFilterKeyDown}
placeholder="按展示名筛选"
placeholder={t("agentProfile.filterDisplayName")}
className="pl-9"
/>
</div>
@@ -276,37 +274,26 @@ export default function DashboardAgentsPage() {
value={agentCodeInput}
onChange={(event) => setAgentCodeInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder="按客服工号筛选"
placeholder={t("agentProfile.filterAgentCode")}
className="w-full sm:w-44"
/>
<Select
value={statusFilterInput}
onValueChange={(value) =>
setStatusFilterInput(value ?? "all")
}
>
<SelectTrigger className="w-full sm:w-36">
<SelectValue>
{serviceStatusOptions.find(
(item) => item.value === statusFilterInput,
)?.label ?? "全部状态"}
</SelectValue>
</SelectTrigger>
<SelectContent>
{serviceStatusOptions.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectContent>
</Select>
<div className="w-full sm:w-36">
<OptionCombobox
value={statusFilterInput}
options={serviceStatusOptions}
placeholder={t("agentProfile.allStatuses")}
searchPlaceholder={t("agentProfile.searchStatus")}
emptyText={t("agentProfile.emptyStatus")}
onChange={(value) => setStatusFilterInput(value ?? "all")}
/>
</div>
<Button
variant="outline"
onClick={applyFilters}
disabled={loading}
>
<SearchIcon />
查询
{t("agentProfile.query")}
</Button>
</DashboardToolbar>
<DashboardTableShell
@@ -328,12 +315,12 @@ export default function DashboardAgentsPage() {
<Table>
<TableHeader className="bg-muted/40">
<TableRow>
<TableHead>客服</TableHead>
<TableHead>服务规则</TableHead>
<TableHead>分配策略</TableHead>
<TableHead>最近时间</TableHead>
<TableHead>{t("agentProfile.columnAgent")}</TableHead>
<TableHead>{t("agentProfile.columnRules")}</TableHead>
<TableHead>{t("agentProfile.columnDispatch")}</TableHead>
<TableHead>{t("agentProfile.columnRecent")}</TableHead>
<TableHead className="w-[92px] text-right">
操作
{t("agentProfile.columnActions")}
</TableHead>
</TableRow>
</TableHeader>
@@ -360,21 +347,23 @@ export default function DashboardAgentsPage() {
<div className="text-xs text-muted-foreground">
{item.nickname ||
item.username ||
`用户#${item.userId}`}
t("agentProfile.userFallback", { id: item.userId })}
</div>
<div className="mt-1 text-xs text-muted-foreground">
工号：{item.agentCode}
{t("agentProfile.agentCode", { code: item.agentCode })}
</div>
</div>
</div>
</TableCell>
<TableCell>
<Badge variant="outline">
{getStatusLabel(item.serviceStatus)}
{getStatusLabel(item.serviceStatus, t)}
</Badge>
<div className="mt-2 text-sm text-muted-foreground">
最大并发 {item.maxConcurrentCount} / 优先级{" "}
{item.priorityLevel}
{t("agentProfile.capacityPriority", {
capacity: item.maxConcurrentCount,
priority: item.priorityLevel,
})}
</div>
</TableCell>
<TableCell>
@@ -385,8 +374,8 @@ export default function DashboardAgentsPage() {
}
>
{item.autoAssignEnabled
? "自动分配"
: "不自动分配"}
? t("agentProfile.autoAssign")
: t("agentProfile.noAutoAssign")}
</Badge>
<Badge
variant={
@@ -396,17 +385,17 @@ export default function DashboardAgentsPage() {
}
>
{item.receiveOfflineMessage
? "离线接收"
: "离线不接收"}
? t("agentProfile.offlineReceive")
: t("agentProfile.noOfflineReceive")}
</Badge>
</div>
</TableCell>
<TableCell>
<div className="text-sm">
在线：{formatDateTime(item.lastOnlineAt)}
{t("agentProfile.onlineAt", { time: formatDateTime(item.lastOnlineAt) })}
</div>
<div className="text-sm text-muted-foreground">
状态：{formatDateTime(item.lastStatusAt)}
{t("agentProfile.statusAt", { time: formatDateTime(item.lastStatusAt) })}
</div>
</TableCell>
<TableCell className="text-right">
@@ -416,14 +405,14 @@ export default function DashboardAgentsPage() {
size="sm"
onClick={() => openEditDialog(item)}
>
编辑
{t("agentProfile.edit")}
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button variant="outline" size="icon-sm" />
}
aria-label={`更多操作 ${item.displayName}`}
aria-label={t("agentProfile.moreActions", { name: item.displayName })}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
@@ -437,8 +426,8 @@ export default function DashboardAgentsPage() {
>
<Trash2Icon />
{actionLoadingId === item.id
? "删除中..."
: "删除"}
? t("agentProfile.deleting")
: t("agentProfile.delete")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -450,11 +439,11 @@ export default function DashboardAgentsPage() {
<DashboardTableStateRow
colSpan={5}
loading={loading}
loadingText="正在加载客服档案..."
loadingText={t("agentProfile.loadingRows")}
emptyText={
selectedTeam
? "当前客服组下没有匹配的客服档案"
: "没有匹配的客服档案"
? t("agentProfile.emptyTeamRows")
: t("agentProfile.emptyRows")
}
/>
) : null}