refactor: standardize card styles and improve layout across dashboard components

This commit is contained in:
mlogclub
2026-06-21 10:09:52 +08:00
parent ff2e2e3962
commit fe5041191f
20 changed files with 91 additions and 74 deletions
+3 -3
View File
@@ -32,14 +32,14 @@ export function AlertList({ alerts }: AlertListProps) {
const t = useI18n()
return (
<Card>
<Card className="rounded-md shadow-none">
<CardHeader>
<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">
<div className="rounded-md 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">{t("dashboardHome.noRiskTitle")}</div>
<div className="mt-1 text-sm text-muted-foreground">
@@ -49,7 +49,7 @@ export function AlertList({ alerts }: AlertListProps) {
) : (
alerts.map((item) => (
<Link key={item.id} href={item.link} className="block">
<div className="rounded-2xl border p-4 transition-colors hover:border-primary/40">
<div className="rounded-md border p-4 transition-colors hover:border-primary/40">
<div className="flex items-start justify-between gap-3">
<div>
<div className="flex items-center gap-2">
@@ -22,8 +22,8 @@ function LoadingCards() {
return (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
{Array.from({ length: 6 }).map((_, index) => (
<Card key={index}>
<CardContent className="space-y-3 p-6">
<Card key={index} className="rounded-md shadow-none">
<CardContent className="space-y-3 p-4">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-8 w-20" />
<Skeleton className="h-4 w-full" />
@@ -72,7 +72,7 @@ export function DashboardHome() {
]
return (
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
<div className="flex flex-1 flex-col gap-4 p-4 lg:p-5">
<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">{t("dashboardHome.title")}</h1>
@@ -82,7 +82,7 @@ export function DashboardHome() {
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="rounded-xl border bg-muted/30 p-1">
<div className="rounded-md border bg-background p-1">
{rangeOptions.map((item) => (
<Button
key={item.value}
@@ -122,37 +122,37 @@ export function DashboardHome() {
<div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
<TeamLoadPanel agentStats={data.agentStats} />
<Card>
<CardContent className="grid gap-4 p-6 sm:grid-cols-2">
<div className="rounded-2xl border bg-muted/30 p-4">
<Card className="rounded-md shadow-none">
<CardContent className="grid gap-3 p-4 sm:grid-cols-2">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.enabledAiAgents")}</div>
<div className="mt-2 text-3xl font-semibold">{data.aiStats.enabledAiAgents}</div>
<div className="mt-1 text-2xl font-semibold">{data.aiStats.enabledAiAgents}</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.enabledChannels")}</div>
<div className="mt-2 text-3xl font-semibold">{data.aiStats.enabledChannels}</div>
<div className="mt-1 text-2xl font-semibold">{data.aiStats.enabledChannels}</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayKnowledgeRetrieves")}</div>
<div className="mt-2 text-3xl font-semibold">
<div className="mt-1 text-2xl font-semibold">
{data.aiStats.todayKnowledgeRetrieves}
</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayKnowledgeRetrieveFailRate")}</div>
<div className="mt-2 text-3xl font-semibold">
<div className="mt-1 text-2xl font-semibold">
{data.aiStats.todayKnowledgeRetrieveFailRate.toFixed(1)}%
</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.todaySkillRunFailCount")}</div>
<div className="mt-2 text-3xl font-semibold">
<div className="mt-1 text-2xl font-semibold">
{data.aiStats.todaySkillRunFailCount}
</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="rounded-md border bg-background px-3 py-2.5">
<div className="text-sm text-muted-foreground">{t("dashboardHome.todayAiHandoffCount")}</div>
<div className="mt-2 text-3xl font-semibold">
<div className="mt-1 text-2xl font-semibold">
{data.aiStats.todayAiHandoffCount}
</div>
</div>
@@ -163,7 +163,7 @@ export function DashboardHome() {
<AlertList alerts={data.alerts} />
</>
) : (
<Card>
<Card className="rounded-md shadow-none">
<CardContent className="flex min-h-60 items-center justify-center p-6 text-sm text-muted-foreground">
{t("dashboardHome.empty")}
</CardContent>
@@ -75,7 +75,7 @@ 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">
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
{cards.map((item) => {
const Icon = item.icon
const rawValue = summary[item.key]
@@ -86,18 +86,18 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
return (
<Link key={item.key} href={item.link}>
<Card className="h-full transition-colors hover:border-primary/40">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
<Card className="h-full rounded-md shadow-none transition-colors hover:border-primary/40">
<CardHeader className="flex flex-row items-start justify-between space-y-0 p-4 pb-2">
<div className="space-y-1">
<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">
<div className="rounded-md bg-muted p-2 text-muted-foreground">
<Icon className="size-4" />
</div>
</CardHeader>
<CardContent>
<div className="text-3xl font-semibold tracking-tight">{value}</div>
<CardContent className="px-4 pb-4">
<div className="text-2xl font-semibold tracking-tight">{value}</div>
</CardContent>
</Card>
</Link>
@@ -29,7 +29,7 @@ export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
const t = useI18n()
return (
<Card>
<Card className="rounded-md shadow-none">
<CardHeader>
<CardTitle>{t("dashboardHome.teamLoad")}</CardTitle>
<CardDescription>
@@ -42,12 +42,12 @@ export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
</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">
<div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
{t("dashboardHome.noTeamData")}
</div>
) : (
agentStats.teamLoads.map((item) => (
<div key={item.teamId} className="rounded-2xl border p-4">
<div key={item.teamId} className="rounded-md border p-4">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<div className="flex items-center gap-2">
@@ -86,19 +86,19 @@ export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
</div>
<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="rounded-md bg-muted/35 px-3 py-2">
<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="rounded-md bg-muted/35 px-3 py-2">
<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="rounded-md bg-muted/35 px-3 py-2">
<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="rounded-md bg-muted/35 px-3 py-2">
<div className="text-muted-foreground">{t("dashboardHome.busyAgents")}</div>
<div className="mt-1 text-lg font-semibold">{item.busyAgents}</div>
</div>
@@ -58,7 +58,7 @@ export function TrendPanel({
return (
<div className="grid gap-4 xl:grid-cols-[1.5fr_0.9fr]">
<Card>
<Card className="rounded-md shadow-none">
<CardHeader>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
@@ -90,7 +90,7 @@ export function TrendPanel({
</CardContent>
</Card>
<Card>
<Card className="rounded-md shadow-none">
<CardHeader>
<CardTitle>{t("dashboardHome.statusDistribution")}</CardTitle>
<CardDescription>{t("dashboardHome.statusDistributionDescription")}</CardDescription>
@@ -844,7 +844,7 @@ function EditDialogBody({
</Field>
</div>
<div className="rounded-lg border bg-muted/10 p-4">
<div className="rounded-md border bg-muted/10 p-3">
<div className="mb-1 text-sm font-medium">{t("aiAgent.teams")}</div>
<div className="mb-4 text-xs text-muted-foreground">
{t("aiAgent.currentHandoffMode", { mode: selectedHandoffModeLabel })}
@@ -1270,7 +1270,7 @@ function SectionCard({
const [open, setOpen] = useState(defaultOpen);
return (
<section className="rounded-lg border bg-card p-5">
<section className="border-t pt-4">
<button
type="button"
className="flex w-full items-start justify-between gap-4 text-left"
@@ -1285,7 +1285,7 @@ function SectionCard({
</div>
) : null}
</div>
<span className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-full border bg-muted/30 text-muted-foreground transition-colors hover:bg-muted/50">
<span className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md border bg-muted/30 text-muted-foreground transition-colors hover:bg-muted/50">
<ChevronDownIcon
className={`size-4 transition-transform duration-200 ${
open ? "rotate-180" : "rotate-0"
+1 -1
View File
@@ -115,7 +115,7 @@ export default function DashboardChannelsPage() {
label: t("channel.columnChannel"),
render: (item) => (
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted">
<div className="flex size-10 items-center justify-center rounded-md bg-muted">
<ChannelIcon channelType={item.channelType} />
</div>
<div>
+4 -4
View File
@@ -35,9 +35,9 @@ export default function DashboardLayout({
if (!ready || !session) {
return (
<div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f1e8_0%,#f8faf5_46%,#e8f7f2_100%)] p-6">
<div className="flex min-h-screen items-center justify-center bg-background p-6">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
<div className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
<Loader2Icon className="size-5 animate-spin" />
</div>
<div className="space-y-1">
@@ -63,9 +63,9 @@ export default function DashboardLayout({
>
<NotificationProvider>
<AppSidebar variant="inset" />
<SidebarInset className="overflow-hidden border border-border/65 shadow-[0_18px_50px_rgba(20,83,69,0.09)] dark:shadow-none">
<SidebarInset className="overflow-hidden border-l border-border/70 bg-background">
<SiteHeader />
<div className="@container/main flex min-h-0 flex-1 flex-col gap-2 overflow-auto">
<div className="@container/main flex min-h-0 flex-1 flex-col overflow-auto">
{children}
</div>
</SidebarInset>
+1 -1
View File
@@ -58,7 +58,7 @@ export default function DashboardPermissionsPage() {
label: t("permission.columnPermission"),
render: (item) => (
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
<div className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
<KeyRoundIcon className="size-4" />
</div>
<div>
@@ -191,7 +191,7 @@ function AssignPermissionsDrawerBody({
const value = field.value || [];
return (
<div className="flex-1 min-h-0 space-y-4 overflow-y-auto rounded-xl border p-3">
<div className="flex-1 min-h-0 space-y-4 overflow-y-auto rounded-md border p-3">
{loading ? (
<div className="py-8 text-center text-sm text-muted-foreground">
{t("role.loadingPermissions")}
+1 -1
View File
@@ -123,7 +123,7 @@ function SortableRoleRow({
</TableCell>
<TableCell>
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
<div className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
<ShieldCheckIcon className="size-4" />
</div>
<div className="font-medium">{displayName}</div>
@@ -56,7 +56,7 @@ export function InitialPasswordDialog({
{t("user.initialPasswordDescription", { username: username || "-" })}
</DialogDescription>
</DialogHeader>
<div className="rounded-xl border bg-muted/40 p-4">
<div className="rounded-md border bg-muted/35 p-4">
<div className="text-xs text-muted-foreground">{t("user.initialPassword")}</div>
<div className="mt-2 break-all font-mono text-base">{password}</div>
</div>
@@ -86,7 +86,7 @@ export function ResetPasswordDialogs({
{t("user.resetSuccessDescription", { username: item?.username || "-" })}
</DialogDescription>
</DialogHeader>
<div className="rounded-xl border bg-muted/40 p-4">
<div className="rounded-md border bg-muted/35 p-4">
<div className="text-xs text-muted-foreground">{t("user.newPassword")}</div>
<div className="mt-2 break-all font-mono text-base">{password}</div>
</div>
+1 -1
View File
@@ -352,7 +352,7 @@ export default function DashboardUsersPage() {
<TableRow key={item.id}>
<TableCell>
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
<div className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
<UserRoundIcon className="size-4" />
</div>
<div>
+13 -4
View File
@@ -1,10 +1,12 @@
"use client"
import type { ReactNode } from "react"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { TableCell, TableRow } from "@/components/ui/table"
import { useI18n } from "@/i18n/provider"
import { getPageTitleKey } from "@/lib/navigation"
export function DashboardPage({
className,
@@ -13,8 +15,15 @@ export function DashboardPage({
className?: string
children: ReactNode
}) {
const t = useI18n()
const pathname = usePathname()
const title = t(getPageTitleKey(pathname))
return (
<div className={cn("flex flex-1 flex-col gap-5 p-4 lg:p-6", className)}>
<div className={cn("flex flex-1 flex-col gap-4 p-4 lg:p-5", className)}>
<div className="flex min-h-8 items-center">
<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
</div>
{children}
</div>
)
@@ -32,7 +41,7 @@ export function DashboardToolbar({
return (
<div
className={cn(
"flex flex-col gap-3 rounded-lg border border-border/70 bg-card/95 p-3 shadow-[0_1px_2px_rgba(15,23,42,0.04)] lg:flex-row lg:items-center lg:justify-between dark:shadow-none",
"flex flex-col gap-3 border-b border-border/70 bg-background pb-3 lg:flex-row lg:items-center lg:justify-between",
className
)}
>
@@ -56,8 +65,8 @@ export function DashboardTableShell({
children: ReactNode
}) {
return (
<div className={cn("space-y-4", className)}>
<div className="overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-[0_1px_2px_rgba(15,23,42,0.035)] dark:shadow-none">
<div className={cn("space-y-3", className)}>
<div className="overflow-hidden rounded-md border border-border/70 bg-card text-card-foreground">
{children}
</div>
{pagination ? <div>{pagination}</div> : null}
+11 -11
View File
@@ -28,25 +28,25 @@ export function DashboardPlaceholder({
const t = useI18n()
return (
<div className="flex flex-1 flex-col gap-6 p-4 pt-4 lg:p-6 lg:pt-6">
<Card className="border-dashed">
<CardHeader className="gap-3">
<span className="text-xs font-medium tracking-[0.24em] uppercase text-muted-foreground">
<div className="flex flex-1 flex-col gap-4 p-4 lg:p-5">
<Card className="rounded-md border-dashed shadow-none">
<CardHeader className="gap-2 p-4">
<span className="text-xs font-medium uppercase text-muted-foreground">
{eyebrow}
</span>
<CardTitle className="text-3xl">{title}</CardTitle>
<CardTitle className="text-xl">{title}</CardTitle>
<CardDescription className="max-w-2xl text-sm leading-6">
{description}
</CardDescription>
</CardHeader>
<CardContent className="grid gap-4 md:grid-cols-[1.2fr_0.8fr]">
<div className="rounded-2xl border bg-muted/40 p-5">
<CardContent className="grid gap-3 p-4 pt-0 md:grid-cols-[1.2fr_0.8fr]">
<div className="rounded-md border bg-muted/30 p-4">
<p className="text-sm font-medium">{t("placeholder.nextSteps")}</p>
<div className="mt-4 grid gap-3">
<div className="mt-3 grid gap-2">
{nextSteps.map((item) => (
<div
key={item}
className="flex items-start gap-3 rounded-xl bg-background p-3"
className="flex items-start gap-3 rounded-md bg-background p-3"
>
<Clock3Icon className="mt-0.5 size-4 text-muted-foreground" />
<p className="text-sm">{item}</p>
@@ -54,14 +54,14 @@ export function DashboardPlaceholder({
))}
</div>
</div>
<div className="flex flex-col justify-between rounded-2xl border bg-background p-5">
<div className="flex flex-col justify-between rounded-md border bg-background p-4">
<div>
<p className="text-sm font-medium">{t("placeholder.status")}</p>
<p className="mt-2 text-sm leading-6 text-muted-foreground">
{t("placeholder.statusDescription")}
</p>
</div>
<Button variant="outline" className="mt-6 justify-between">
<Button variant="outline" className="mt-5 justify-between">
{t("placeholder.nextPhase")}
<ArrowUpRightIcon />
</Button>
+14
View File
@@ -6,7 +6,10 @@ import { useState } from "react"
import { useAuth } from "@/components/auth-provider"
import { useI18n } from "@/i18n/provider"
import { ChangePasswordDialog } from "@/components/change-password-dialog"
import { LocaleSwitcher } from "@/components/locale-switcher"
import { useNotifications } from "@/components/notification-provider"
import { PaletteToggle } from "@/components/palette-toggle"
import { ThemeToggle } from "@/components/theme-toggle"
import { Badge } from "@/components/ui/badge"
import {
Avatar,
@@ -96,6 +99,17 @@ export function NavUser({
</DropdownMenuLabel>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel className="px-2 py-1.5 text-xs font-normal text-muted-foreground">
{t("nav.preferences")}
</DropdownMenuLabel>
<div className="flex items-center gap-2 px-2 pb-2">
<LocaleSwitcher />
<PaletteToggle />
<ThemeToggle />
</div>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() => {
-8
View File
@@ -3,13 +3,10 @@
import { useEffect, useRef } from "react"
import { usePathname } from "next/navigation"
import { LocaleSwitcher } from "@/components/locale-switcher"
import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
import { useI18n } from "@/i18n/provider"
import { getPageTitleKey } from "@/lib/navigation"
import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
import { PaletteToggle } from "@/components/palette-toggle"
import { ThemeToggle } from "@/components/theme-toggle"
import {
Breadcrumb,
BreadcrumbItem,
@@ -77,11 +74,6 @@ export function SiteHeader() {
</Breadcrumb>
</div>
</div>
<div className="flex items-center justify-end gap-2">
<LocaleSwitcher />
<PaletteToggle />
<ThemeToggle />
</div>
</div>
</header>
)
+1
View File
@@ -2343,6 +2343,7 @@
"permissions": "Permissions",
"dashboardHome": "Dashboard",
"notifications": "Notifications",
"preferences": "Preferences",
"changePassword": "Change Password",
"signOut": "Sign Out"
},
+1
View File
@@ -2343,6 +2343,7 @@
"permissions": "权限管理",
"dashboardHome": "后台总览",
"notifications": "通知中心",
"preferences": "偏好设置",
"changePassword": "修改密码",
"signOut": "退出登录"
},