From fe5041191fb31811bc0a11f554dd4f8351f82542 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 21 Jun 2026 10:09:52 +0800
Subject: [PATCH] refactor: standardize card styles and improve layout across
 dashboard components

---
 web/app/dashboard/_components/alert-list.tsx  |  6 +--
 .../dashboard/_components/dashboard-home.tsx  | 38 +++++++++----------
 .../dashboard/_components/summary-cards.tsx   | 12 +++---
 .../dashboard/_components/team-load-panel.tsx | 14 +++----
 web/app/dashboard/_components/trend-panel.tsx |  4 +-
 .../dashboard/ai-agents/_components/edit.tsx  |  6 +--
 web/app/dashboard/channels/page.tsx           |  2 +-
 web/app/dashboard/layout.tsx                  |  8 ++--
 web/app/dashboard/permissions/page.tsx        |  2 +-
 .../roles/_components/assign-permissions.tsx  |  2 +-
 web/app/dashboard/roles/page.tsx              |  2 +-
 .../_components/initial-password-dialog.tsx   |  2 +-
 .../users/_components/reset-password.tsx      |  2 +-
 web/app/dashboard/users/page.tsx              |  2 +-
 web/components/dashboard-page.tsx             | 17 +++++++--
 web/components/dashboard-placeholder.tsx      | 22 +++++------
 web/components/nav-user.tsx                   | 14 +++++++
 web/components/site-header.tsx                |  8 ----
 web/messages/en-US.json                       |  1 +
 web/messages/zh-CN.json                       |  1 +
 20 files changed, 91 insertions(+), 74 deletions(-)

diff --git a/web/app/dashboard/_components/alert-list.tsx b/web/app/dashboard/_components/alert-list.tsx
index 4ffd41d..fffd391 100644
--- a/web/app/dashboard/_components/alert-list.tsx
+++ b/web/app/dashboard/_components/alert-list.tsx
@@ -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">
diff --git a/web/app/dashboard/_components/dashboard-home.tsx b/web/app/dashboard/_components/dashboard-home.tsx
index e299a68..d1e0bd1 100644
--- a/web/app/dashboard/_components/dashboard-home.tsx
+++ b/web/app/dashboard/_components/dashboard-home.tsx
@@ -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>
diff --git a/web/app/dashboard/_components/summary-cards.tsx b/web/app/dashboard/_components/summary-cards.tsx
index 01a1418..dd42612 100644
--- a/web/app/dashboard/_components/summary-cards.tsx
+++ b/web/app/dashboard/_components/summary-cards.tsx
@@ -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>
diff --git a/web/app/dashboard/_components/team-load-panel.tsx b/web/app/dashboard/_components/team-load-panel.tsx
index a358a1c..ad2b8bf 100644
--- a/web/app/dashboard/_components/team-load-panel.tsx
+++ b/web/app/dashboard/_components/team-load-panel.tsx
@@ -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>
diff --git a/web/app/dashboard/_components/trend-panel.tsx b/web/app/dashboard/_components/trend-panel.tsx
index 209db4d..f18adfa 100644
--- a/web/app/dashboard/_components/trend-panel.tsx
+++ b/web/app/dashboard/_components/trend-panel.tsx
@@ -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>
diff --git a/web/app/dashboard/ai-agents/_components/edit.tsx b/web/app/dashboard/ai-agents/_components/edit.tsx
index 00c611c..8ac111a 100644
--- a/web/app/dashboard/ai-agents/_components/edit.tsx
+++ b/web/app/dashboard/ai-agents/_components/edit.tsx
@@ -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"
diff --git a/web/app/dashboard/channels/page.tsx b/web/app/dashboard/channels/page.tsx
index 3155dc1..70c51eb 100644
--- a/web/app/dashboard/channels/page.tsx
+++ b/web/app/dashboard/channels/page.tsx
@@ -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>
diff --git a/web/app/dashboard/layout.tsx b/web/app/dashboard/layout.tsx
index 84d3522..d975b1e 100644
--- a/web/app/dashboard/layout.tsx
+++ b/web/app/dashboard/layout.tsx
@@ -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>
diff --git a/web/app/dashboard/permissions/page.tsx b/web/app/dashboard/permissions/page.tsx
index 152848c..4aebd5b 100644
--- a/web/app/dashboard/permissions/page.tsx
+++ b/web/app/dashboard/permissions/page.tsx
@@ -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>
diff --git a/web/app/dashboard/roles/_components/assign-permissions.tsx b/web/app/dashboard/roles/_components/assign-permissions.tsx
index 545d0f7..31e0384 100644
--- a/web/app/dashboard/roles/_components/assign-permissions.tsx
+++ b/web/app/dashboard/roles/_components/assign-permissions.tsx
@@ -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")}
diff --git a/web/app/dashboard/roles/page.tsx b/web/app/dashboard/roles/page.tsx
index b313bc1..72ebd3a 100644
--- a/web/app/dashboard/roles/page.tsx
+++ b/web/app/dashboard/roles/page.tsx
@@ -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>
diff --git a/web/app/dashboard/users/_components/initial-password-dialog.tsx b/web/app/dashboard/users/_components/initial-password-dialog.tsx
index 6b65fd7..1e9dd69 100644
--- a/web/app/dashboard/users/_components/initial-password-dialog.tsx
+++ b/web/app/dashboard/users/_components/initial-password-dialog.tsx
@@ -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>
diff --git a/web/app/dashboard/users/_components/reset-password.tsx b/web/app/dashboard/users/_components/reset-password.tsx
index 28c40ff..ade90e1 100644
--- a/web/app/dashboard/users/_components/reset-password.tsx
+++ b/web/app/dashboard/users/_components/reset-password.tsx
@@ -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>
diff --git a/web/app/dashboard/users/page.tsx b/web/app/dashboard/users/page.tsx
index 9c5fdbc..7c9222e 100644
--- a/web/app/dashboard/users/page.tsx
+++ b/web/app/dashboard/users/page.tsx
@@ -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>
diff --git a/web/components/dashboard-page.tsx b/web/components/dashboard-page.tsx
index e15d59f..f77b3c8 100644
--- a/web/components/dashboard-page.tsx
+++ b/web/components/dashboard-page.tsx
@@ -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}
diff --git a/web/components/dashboard-placeholder.tsx b/web/components/dashboard-placeholder.tsx
index b5db2f8..5b5a27a 100644
--- a/web/components/dashboard-placeholder.tsx
+++ b/web/components/dashboard-placeholder.tsx
@@ -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>
diff --git a/web/components/nav-user.tsx b/web/components/nav-user.tsx
index 0f7772a..e4ddec9 100644
--- a/web/components/nav-user.tsx
+++ b/web/components/nav-user.tsx
@@ -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={() => {
diff --git a/web/components/site-header.tsx b/web/components/site-header.tsx
index 0b01d99..5330ad6 100644
--- a/web/components/site-header.tsx
+++ b/web/components/site-header.tsx
@@ -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>
   )
diff --git a/web/messages/en-US.json b/web/messages/en-US.json
index 0d79e73..df79cd6 100644
--- a/web/messages/en-US.json
+++ b/web/messages/en-US.json
@@ -2343,6 +2343,7 @@
     "permissions": "Permissions",
     "dashboardHome": "Dashboard",
     "notifications": "Notifications",
+    "preferences": "Preferences",
     "changePassword": "Change Password",
     "signOut": "Sign Out"
   },
diff --git a/web/messages/zh-CN.json b/web/messages/zh-CN.json
index 49dba23..b33688e 100644
--- a/web/messages/zh-CN.json
+++ b/web/messages/zh-CN.json
@@ -2343,6 +2343,7 @@
     "permissions": "权限管理",
     "dashboardHome": "后台总览",
     "notifications": "通知中心",
+    "preferences": "偏好设置",
     "changePassword": "修改密码",
     "signOut": "退出登录"
   },