refactor: support i18n
This commit is contained in:
mlogclub
@@ -5,6 +5,7 @@ import { ArrowRightIcon, ShieldAlertIcon } from "lucide-react"
|
||||
|
||||
import type { DashboardAlert } from "@/lib/api/dashboard"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -28,19 +29,21 @@ function getAlertBadgeVariant(level: DashboardAlert["level"]) {
|
||||
}
|
||||
|
||||
export function AlertList({ alerts }: AlertListProps) {
|
||||
const t = useI18n()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>风险提醒</CardTitle>
|
||||
<CardDescription>优先处理会直接影响接待效率和 AI 稳定性的项目</CardDescription>
|
||||
<CardTitle>{t("dashboardHome.riskAlerts")}</CardTitle>
|
||||
<CardDescription>{t("dashboardHome.riskAlertsDescription")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{alerts.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed px-4 py-10 text-center">
|
||||
<ShieldAlertIcon className="mx-auto mb-3 size-8 text-muted-foreground" />
|
||||
<div className="text-sm font-medium">当前没有需要优先处理的风险项</div>
|
||||
<div className="text-sm font-medium">{t("dashboardHome.noRiskTitle")}</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
首页将持续监控会话堆积、客服排班与 AI 配置异常
|
||||
{t("dashboardHome.noRiskDescription")}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -7,6 +7,7 @@ import { toast } from "sonner"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import {
|
||||
fetchDashboardOverview,
|
||||
type DashboardOverview,
|
||||
@@ -17,12 +18,6 @@ import { TrendPanel } from "./trend-panel"
|
||||
import { TeamLoadPanel } from "./team-load-panel"
|
||||
import { AlertList } from "./alert-list"
|
||||
|
||||
const rangeOptions: Array<{ value: DashboardRange; label: string }> = [
|
||||
{ value: "today", label: "今天" },
|
||||
{ value: "7d", label: "近 7 天" },
|
||||
{ value: "30d", label: "近 30 天" },
|
||||
]
|
||||
|
||||
function LoadingCards() {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
|
||||
@@ -40,6 +35,7 @@ function LoadingCards() {
|
||||
}
|
||||
|
||||
export function DashboardHome() {
|
||||
const t = useI18n()
|
||||
const [range, setRange] = useState<DashboardRange>("7d")
|
||||
const [data, setData] = useState<DashboardOverview | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -56,27 +52,33 @@ export function DashboardHome() {
|
||||
const result = await fetchDashboardOverview(nextRange)
|
||||
setData(result)
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "加载首页概览失败")
|
||||
toast.error(error instanceof Error ? error.message : t("dashboardHome.loadFailed"))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
},
|
||||
[]
|
||||
[t]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
void loadData(range)
|
||||
}, [loadData, range])
|
||||
|
||||
const rangeOptions: Array<{ value: DashboardRange; label: string }> = [
|
||||
{ value: "today", label: t("dashboardHome.rangeToday") },
|
||||
{ value: "7d", label: t("dashboardHome.range7d") },
|
||||
{ value: "30d", label: t("dashboardHome.range30d") },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
|
||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">后台总览</h1>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t("dashboardHome.title")}</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
聚焦会话接待、工单处理、客服负载与 AI 运行状态
|
||||
{data ? `，更新于 ${data.generatedAt}` : ""}
|
||||
{t("dashboardHome.description")}
|
||||
{data ? t("dashboardHome.updatedAt", { time: data.generatedAt }) : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
@@ -99,7 +101,7 @@ export function DashboardHome() {
|
||||
disabled={loading || refreshing}
|
||||
>
|
||||
<RefreshCwIcon className={refreshing ? "mr-2 size-4 animate-spin" : "mr-2 size-4"} />
|
||||
刷新
|
||||
{t("dashboardHome.refresh")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,8 +113,8 @@ export function DashboardHome() {
|
||||
<SummaryCards summary={data.summary} />
|
||||
|
||||
<TrendPanel
|
||||
title="会话趋势"
|
||||
description="观察新增与关闭会话变化，快速判断接待压力是否持续上升"
|
||||
title={t("dashboardHome.conversationTrend")}
|
||||
description={t("dashboardHome.conversationTrendDescription")}
|
||||
trend={data.conversationStats.trend}
|
||||
distribution={data.conversationStats.statusDistribution}
|
||||
/>
|
||||
@@ -123,33 +125,33 @@ export function DashboardHome() {
|
||||
<Card>
|
||||
<CardContent className="grid gap-4 p-6 sm:grid-cols-2">
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">启用中的 AI Agent</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.enabledAiAgents")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">{data.aiStats.enabledAiAgents}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">启用中的接入渠道</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.enabledChannels")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">{data.aiStats.enabledChannels}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">今日知识检索次数</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayKnowledgeRetrieves")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">
|
||||
{data.aiStats.todayKnowledgeRetrieves}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">今日检索失败率</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayKnowledgeRetrieveFailRate")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">
|
||||
{data.aiStats.todayKnowledgeRetrieveFailRate.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">今日 Skill 失败次数</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.todaySkillRunFailCount")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">
|
||||
{data.aiStats.todaySkillRunFailCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-muted/30 p-4">
|
||||
<div className="text-sm text-muted-foreground">今日 AI 转人工次数</div>
|
||||
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayAiHandoffCount")}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">
|
||||
{data.aiStats.todayAiHandoffCount}
|
||||
</div>
|
||||
@@ -163,7 +165,7 @@ export function DashboardHome() {
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="flex min-h-60 items-center justify-center p-6 text-sm text-muted-foreground">
|
||||
暂无首页概览数据
|
||||
{t("dashboardHome.empty")}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
|
||||
type SummaryCardsProps = {
|
||||
summary: DashboardOverview["summary"]
|
||||
@@ -24,8 +25,8 @@ type SummaryCardsProps = {
|
||||
|
||||
type SummaryCardItem = {
|
||||
key: keyof DashboardOverview["summary"]
|
||||
title: string
|
||||
description: string
|
||||
titleKey: string
|
||||
descriptionKey: string
|
||||
link: string
|
||||
icon: typeof BotMessageSquareIcon
|
||||
format?: (value: number) => string
|
||||
@@ -34,36 +35,36 @@ type SummaryCardItem = {
|
||||
const cards: SummaryCardItem[] = [
|
||||
{
|
||||
key: "todayNewConversations",
|
||||
title: "今日新增会话",
|
||||
description: "今日进入系统的新增咨询量",
|
||||
titleKey: "dashboardHome.summaryTodayNewConversations",
|
||||
descriptionKey: "dashboardHome.summaryTodayNewConversationsDescription",
|
||||
link: "/dashboard/conversations",
|
||||
icon: BotMessageSquareIcon,
|
||||
},
|
||||
{
|
||||
key: "processingConversations",
|
||||
title: "当前处理中",
|
||||
description: "正在由 AI 或人工接待的会话",
|
||||
titleKey: "dashboardHome.summaryProcessingConversations",
|
||||
descriptionKey: "dashboardHome.summaryProcessingConversationsDescription",
|
||||
link: "/dashboard/conversations",
|
||||
icon: WavesIcon,
|
||||
},
|
||||
{
|
||||
key: "pendingDispatchConversations",
|
||||
title: "待分配会话",
|
||||
description: "仍在待接入池中等待分配",
|
||||
titleKey: "dashboardHome.summaryPendingDispatchConversations",
|
||||
descriptionKey: "dashboardHome.summaryPendingDispatchConversationsDescription",
|
||||
link: "/dashboard/conversations",
|
||||
icon: CircleDashedIcon,
|
||||
},
|
||||
{
|
||||
key: "onlineAgents",
|
||||
title: "在线客服",
|
||||
description: "近 15 分钟内仍有活跃心跳的客服",
|
||||
titleKey: "dashboardHome.summaryOnlineAgents",
|
||||
descriptionKey: "dashboardHome.summaryOnlineAgentsDescription",
|
||||
link: "/dashboard/agents",
|
||||
icon: HeadsetIcon,
|
||||
},
|
||||
{
|
||||
key: "aiServiceRate",
|
||||
title: "AI 接待占比",
|
||||
description: "当前活跃会话中 AI 参与服务比例",
|
||||
titleKey: "dashboardHome.summaryAiServiceRate",
|
||||
descriptionKey: "dashboardHome.summaryAiServiceRateDescription",
|
||||
link: "/dashboard/ai-agents",
|
||||
icon: SparklesIcon,
|
||||
format: (value: number) => `${value.toFixed(1)}%`,
|
||||
@@ -71,6 +72,8 @@ const cards: SummaryCardItem[] = [
|
||||
]
|
||||
|
||||
export function SummaryCards({ summary }: SummaryCardsProps) {
|
||||
const t = useI18n()
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
|
||||
{cards.map((item) => {
|
||||
@@ -86,8 +89,8 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
|
||||
<Card className="h-full transition-colors hover:border-primary/40">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-sm font-medium">{item.title}</CardTitle>
|
||||
<CardDescription>{item.description}</CardDescription>
|
||||
<CardTitle className="text-sm font-medium">{t(item.titleKey)}</CardTitle>
|
||||
<CardDescription>{t(item.descriptionKey)}</CardDescription>
|
||||
</div>
|
||||
<div className="rounded-full bg-primary/10 p-2 text-primary">
|
||||
<Icon className="size-4" />
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -25,18 +26,24 @@ function getLoadTone(loadRate: number) {
|
||||
}
|
||||
|
||||
export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
|
||||
const t = useI18n()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>客服组负载</CardTitle>
|
||||
<CardTitle>{t("dashboardHome.teamLoad")}</CardTitle>
|
||||
<CardDescription>
|
||||
在线 {agentStats.onlineAgents}，忙碌 {agentStats.busyAgents}，离线 {agentStats.offlineAgents}
|
||||
{t("dashboardHome.teamLoadDescription", {
|
||||
online: agentStats.onlineAgents,
|
||||
busy: agentStats.busyAgents,
|
||||
offline: agentStats.offlineAgents,
|
||||
})}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{agentStats.teamLoads.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
暂无客服组数据
|
||||
{t("dashboardHome.noTeamData")}
|
||||
</div>
|
||||
) : (
|
||||
agentStats.teamLoads.map((item) => (
|
||||
@@ -46,20 +53,27 @@ export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-medium">{item.teamName}</div>
|
||||
{item.hasScheduleNow ? (
|
||||
<Badge variant="secondary">排班中</Badge>
|
||||
<Badge variant="secondary">{t("dashboardHome.scheduled")}</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">无当前排班</Badge>
|
||||
<Badge variant="outline">{t("dashboardHome.notScheduled")}</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
总客服 {item.totalAgents}，在线 {item.onlineAgents}，忙碌 {item.busyAgents}，离线{" "}
|
||||
{item.offlineAgents}
|
||||
{t("dashboardHome.teamStats", {
|
||||
total: item.totalAgents,
|
||||
online: item.onlineAgents,
|
||||
busy: item.busyAgents,
|
||||
offline: item.offlineAgents,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-semibold">{item.loadRate.toFixed(1)}%</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
负载 {item.processingConversations}/{item.maxConcurrentCapacity || 0}
|
||||
{t("dashboardHome.load", {
|
||||
processing: item.processingConversations,
|
||||
capacity: item.maxConcurrentCapacity || 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,19 +87,19 @@ export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
|
||||
|
||||
<div className="mt-4 grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="rounded-xl bg-muted/40 px-3 py-2">
|
||||
<div className="text-muted-foreground">待接入</div>
|
||||
<div className="text-muted-foreground">{t("dashboardHome.waiting")}</div>
|
||||
<div className="mt-1 text-lg font-semibold">{item.waitingConversations}</div>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted/40 px-3 py-2">
|
||||
<div className="text-muted-foreground">处理中</div>
|
||||
<div className="text-muted-foreground">{t("dashboardHome.processing")}</div>
|
||||
<div className="mt-1 text-lg font-semibold">{item.processingConversations}</div>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted/40 px-3 py-2">
|
||||
<div className="text-muted-foreground">并发容量</div>
|
||||
<div className="text-muted-foreground">{t("dashboardHome.capacity")}</div>
|
||||
<div className="mt-1 text-lg font-semibold">{item.maxConcurrentCapacity}</div>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted/40 px-3 py-2">
|
||||
<div className="text-muted-foreground">忙碌客服</div>
|
||||
<div className="text-muted-foreground">{t("dashboardHome.busyAgents")}</div>
|
||||
<div className="mt-1 text-lg font-semibold">{item.busyAgents}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
ChartTooltipContent,
|
||||
type ChartConfig,
|
||||
} from "@/components/ui/chart"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
|
||||
type TrendPanelProps = {
|
||||
title: string
|
||||
@@ -24,33 +25,37 @@ type TrendPanelProps = {
|
||||
distribution: DashboardStatusDistributionItem[]
|
||||
}
|
||||
|
||||
const trendConfig = {
|
||||
newCount: {
|
||||
label: "新增",
|
||||
color: "hsl(24 95% 53%)",
|
||||
},
|
||||
closedCount: {
|
||||
label: "关闭",
|
||||
color: "hsl(190 95% 39%)",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
const distributionConfig = {
|
||||
count: {
|
||||
label: "数量",
|
||||
theme: {
|
||||
light: "hsl(222 47% 11%)",
|
||||
dark: "hsl(210 40% 98%)",
|
||||
},
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export function TrendPanel({
|
||||
title,
|
||||
description,
|
||||
trend,
|
||||
distribution,
|
||||
}: TrendPanelProps) {
|
||||
const t = useI18n()
|
||||
const trendConfig = {
|
||||
newCount: {
|
||||
label: t("dashboardHome.chartNew"),
|
||||
color: "hsl(24 95% 53%)",
|
||||
},
|
||||
closedCount: {
|
||||
label: t("dashboardHome.chartClosed"),
|
||||
color: "hsl(190 95% 39%)",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
const distributionConfig = {
|
||||
count: {
|
||||
label: t("dashboardHome.chartCount"),
|
||||
theme: {
|
||||
light: "hsl(222 47% 11%)",
|
||||
dark: "hsl(210 40% 98%)",
|
||||
},
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
const localizedDistribution = distribution.map((item) => ({
|
||||
...item,
|
||||
label: getStatusLabel(item.status, item.label, t),
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 xl:grid-cols-[1.5fr_0.9fr]">
|
||||
<Card>
|
||||
@@ -87,12 +92,12 @@ export function TrendPanel({
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>状态分布</CardTitle>
|
||||
<CardDescription>当前状态数量分布</CardDescription>
|
||||
<CardTitle>{t("dashboardHome.statusDistribution")}</CardTitle>
|
||||
<CardDescription>{t("dashboardHome.statusDistributionDescription")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ChartContainer config={distributionConfig} className="h-72 w-full">
|
||||
<BarChart data={distribution} layout="vertical" margin={{ left: 20 }}>
|
||||
<BarChart data={localizedDistribution} layout="vertical" margin={{ left: 20 }}>
|
||||
<CartesianGrid horizontal={false} />
|
||||
<YAxis
|
||||
type="category"
|
||||
@@ -115,3 +120,22 @@ export function TrendPanel({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getStatusLabel(
|
||||
status: number,
|
||||
fallback: string,
|
||||
t: (key: string) => string
|
||||
) {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return t("dashboardHome.statusAiServing")
|
||||
case 2:
|
||||
return t("dashboardHome.statusPending")
|
||||
case 3:
|
||||
return t("dashboardHome.statusActive")
|
||||
case 4:
|
||||
return t("dashboardHome.statusClosed")
|
||||
default:
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user