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
+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>
@@ -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>
@@ -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>