From ce423bd90b71b9c49a3b07e065ed460549d8a935 Mon Sep 17 00:00:00 2001
From: hailin <wbwang_hailin@kingdee.com>
Date: Thu, 2 Jul 2026 15:52:23 +0800
Subject: [PATCH] style: elevate enterprise admin visual foundation

---
 frontend/src/components/app/AppFilterBar.tsx  | 12 +++++---
 frontend/src/components/app/AppPage.tsx       |  4 +--
 frontend/src/components/app/AppPageHeader.tsx | 17 ++++++-----
 frontend/src/components/app/AppSection.tsx    |  4 +--
 frontend/src/components/app/AppSidebar.tsx    | 29 ++++++++++++-------
 frontend/src/components/app/AppTopbar.tsx     | 12 ++++----
 frontend/src/components/ui/card.tsx           |  2 +-
 .../src/features/tickets/TicketFilterBar.tsx  |  2 +-
 .../features/tickets/TicketMetricCards.tsx    | 22 +++++++-------
 frontend/src/styles/globals.css               | 26 ++++++++---------
 frontend/tailwind.config.ts                   | 13 ++++++++-
 11 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/app/AppFilterBar.tsx b/frontend/src/components/app/AppFilterBar.tsx
index 697fea7..4fe13cc 100644
--- a/frontend/src/components/app/AppFilterBar.tsx
+++ b/frontend/src/components/app/AppFilterBar.tsx
@@ -1,5 +1,7 @@
 import type * as React from 'react'
 
+import { Card, CardContent } from '@/components/ui/card'
+
 type AppFilterBarProps = {
   children: React.ReactNode
   actions?: React.ReactNode
@@ -7,9 +9,11 @@ type AppFilterBarProps = {
 
 export function AppFilterBar({ children, actions }: AppFilterBarProps) {
   return (
-    <div className="flex flex-col gap-3 rounded-lg border border-border bg-surface p-3 lg:flex-row lg:items-center lg:justify-between">
-      <div className="grid flex-1 gap-3 md:grid-cols-2 xl:grid-cols-4">{children}</div>
-      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
-    </div>
+    <Card className="py-0">
+      <CardContent className="flex flex-col gap-3 p-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="grid flex-1 gap-3 md:grid-cols-2 xl:grid-cols-4">{children}</div>
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+      </CardContent>
+    </Card>
   )
 }
diff --git a/frontend/src/components/app/AppPage.tsx b/frontend/src/components/app/AppPage.tsx
index 96ec379..1e95d3b 100644
--- a/frontend/src/components/app/AppPage.tsx
+++ b/frontend/src/components/app/AppPage.tsx
@@ -16,8 +16,8 @@ const maxWidthClass: Record<NonNullable<AppPageProps['maxWidth']>, string> = {
 
 export function AppPage({ children, className, contentClassName, maxWidth = '7xl' }: AppPageProps) {
   return (
-    <main className={cn('min-h-screen bg-background px-4 py-4 text-foreground sm:px-6 lg:py-6', className)}>
-      <div className={cn('mx-auto flex flex-col gap-4', maxWidthClass[maxWidth], contentClassName)}>
+    <main className={cn('min-h-screen bg-background px-4 py-5 text-foreground sm:px-6 lg:px-8 lg:py-7', className)}>
+      <div className={cn('mx-auto flex flex-col gap-5', maxWidthClass[maxWidth], contentClassName)}>
         {children}
       </div>
     </main>
diff --git a/frontend/src/components/app/AppPageHeader.tsx b/frontend/src/components/app/AppPageHeader.tsx
index 2eee90f..329c010 100644
--- a/frontend/src/components/app/AppPageHeader.tsx
+++ b/frontend/src/components/app/AppPageHeader.tsx
@@ -9,15 +9,18 @@ type AppPageHeaderProps = {
 
 export function AppPageHeader({ title, description, meta, actions }: AppPageHeaderProps) {
   return (
-    <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-      <div>
-        <div className="flex flex-wrap items-center gap-2">
-          <h1 className="text-xl font-semibold tracking-normal text-foreground">{title}</h1>
-          {meta}
+    <div className="rounded-lg border border-border/80 bg-surface px-4 py-4 shadow-sm ring-1 ring-border/40">
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+        <div className="min-w-0">
+          <div className="mb-2 h-1 w-10 rounded-full bg-primary" />
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="text-xl font-semibold tracking-normal text-foreground">{title}</h1>
+            {meta}
+          </div>
+          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
         </div>
-        {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
       </div>
-      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
     </div>
   )
 }
diff --git a/frontend/src/components/app/AppSection.tsx b/frontend/src/components/app/AppSection.tsx
index 567d65c..8ccb6cd 100644
--- a/frontend/src/components/app/AppSection.tsx
+++ b/frontend/src/components/app/AppSection.tsx
@@ -12,14 +12,14 @@ type AppSectionProps = {
 export function AppSection({ title, description, action, children }: AppSectionProps) {
   return (
     <Card>
-      <CardHeader className="flex flex-row items-start justify-between gap-3">
+      <CardHeader className="flex flex-row items-start justify-between gap-3 border-b border-border/70 pb-3">
         <div>
           <CardTitle className="text-sm">{title}</CardTitle>
           {description ? <CardDescription>{description}</CardDescription> : null}
         </div>
         {action}
       </CardHeader>
-      <CardContent>{children}</CardContent>
+      <CardContent className="pt-0">{children}</CardContent>
     </Card>
   )
 }
diff --git a/frontend/src/components/app/AppSidebar.tsx b/frontend/src/components/app/AppSidebar.tsx
index b26fcc5..bd34ca8 100644
--- a/frontend/src/components/app/AppSidebar.tsx
+++ b/frontend/src/components/app/AppSidebar.tsx
@@ -65,9 +65,16 @@ type SidebarNavContentProps = {
 
 function SidebarBrand() {
   return (
-    <div className="border-b border-border px-5 py-4">
-      <p className="text-sm font-semibold text-foreground">AI 工单平台</p>
-      <p className="mt-1 text-xs text-muted-foreground">企业技术支持工作台</p>
+    <div className="border-b border-sidebar-border px-5 py-5">
+      <div className="flex items-center gap-3">
+        <div className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground shadow-sm">
+          <Bot className="size-5" />
+        </div>
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-sidebar-foreground">AI 工单平台</p>
+          <p className="mt-0.5 truncate text-xs text-sidebar-foreground/60">企业服务治理中台</p>
+        </div>
+      </div>
     </div>
   )
 }
@@ -77,7 +84,7 @@ function SidebarNavContent({ groups, currentHash, onNavigate }: SidebarNavConten
     <nav className="flex flex-col gap-5 p-4">
       {groups.map((group) => (
         <div key={group.code} className="grid gap-1.5">
-          <p className="px-2 text-xs font-medium text-muted-foreground">{group.title}</p>
+          <p className="px-2 text-xs font-medium text-sidebar-foreground/50">{group.title}</p>
           <div className="grid gap-1">
             {visibleChildren(group).map((item) => {
               const Icon = getIcon(item.icon)
@@ -85,16 +92,16 @@ function SidebarNavContent({ groups, currentHash, onNavigate }: SidebarNavConten
               return (
                 <a
                   className={cn(
-                    'flex h-9 items-center gap-2 rounded-md px-2.5 text-sm text-muted-foreground transition-colors',
-                    'hover:bg-muted hover:text-foreground',
-                    active && 'bg-muted text-foreground'
+                    'flex h-9 items-center gap-2 rounded-md px-2.5 text-sm text-sidebar-foreground/70 transition-colors',
+                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                    active && 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
                   )}
                   href={item.path}
                   key={item.code}
                   onClick={onNavigate}
                 >
-                  <Icon className="size-4" />
-                  <span>{item.title}</span>
+                  <Icon className="size-4 shrink-0" />
+                  <span className="truncate">{item.title}</span>
                 </a>
               )
             })}
@@ -117,12 +124,12 @@ export function AppSidebar({ mobileOpen = false, onMobileOpenChange }: AppSideba
 
   return (
     <>
-      <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface lg:block">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl lg:block">
         <SidebarBrand />
         <SidebarNavContent groups={groups} currentHash={currentHash} />
       </aside>
       <Sheet open={mobileOpen} onOpenChange={onMobileOpenChange}>
-        <SheetContent side="left" className="w-80 gap-0 p-0 lg:hidden">
+        <SheetContent side="left" className="w-80 gap-0 border-sidebar-border bg-sidebar p-0 text-sidebar-foreground lg:hidden">
           <SheetHeader className="sr-only">
             <SheetTitle>移动端导航</SheetTitle>
           </SheetHeader>
diff --git a/frontend/src/components/app/AppTopbar.tsx b/frontend/src/components/app/AppTopbar.tsx
index fdbd390..86213aa 100644
--- a/frontend/src/components/app/AppTopbar.tsx
+++ b/frontend/src/components/app/AppTopbar.tsx
@@ -13,7 +13,7 @@ export function AppTopbar({ onMobileMenuClick }: AppTopbarProps) {
   const { logout, user } = useAuth()
 
   return (
-    <header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-border bg-surface/95 px-6 backdrop-blur">
+    <header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-border/80 bg-surface/95 px-4 shadow-sm backdrop-blur sm:px-6 lg:px-8">
       <div className="flex min-w-0 items-center gap-2 text-sm">
         <Button
           variant="ghost"
@@ -24,23 +24,23 @@ export function AppTopbar({ onMobileMenuClick }: AppTopbarProps) {
         >
           <Menu data-icon="inline-start" />
         </Button>
-        <span className="font-medium text-foreground">AI 工单平台</span>
-        <ChevronRight className="size-4 text-muted-foreground" />
+        <span className="hidden font-medium text-foreground sm:inline">企业服务治理中台</span>
+        <ChevronRight className="hidden size-4 text-muted-foreground sm:block" />
         <span className="truncate text-muted-foreground">当前工作区</span>
       </div>
       <div className="flex items-center gap-3">
-        <Badge variant="info">本地环境</Badge>
+        <Badge variant="outline" className="hidden sm:inline-flex">本地环境</Badge>
         <Separator orientation="vertical" className="h-5" />
         <Button variant="ghost" size="icon" aria-label="通知">
           <Bell data-icon="inline-start" />
         </Button>
-        <Button variant="ghost" className="gap-2">
+        <Button variant="ghost" className="hidden gap-2 sm:inline-flex">
           <UserRound data-icon="inline-start" />
           <span>{user?.display_name || user?.username || '当前用户'}</span>
         </Button>
         <Button variant="outline" className="gap-2" onClick={() => void logout()}>
           <LogOut data-icon="inline-start" />
-          <span>退出</span>
+          <span className="hidden sm:inline">退出</span>
         </Button>
       </div>
     </header>
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index 1b393b0..4436c0b 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "flex flex-col gap-4 overflow-hidden rounded-lg border border-border bg-card py-4 text-sm text-card-foreground shadow-sm",
+        "flex flex-col gap-4 overflow-hidden rounded-lg border border-border/80 bg-card py-4 text-sm text-card-foreground shadow-sm ring-1 ring-border/40",
         className
       )}
       {...props}
diff --git a/frontend/src/features/tickets/TicketFilterBar.tsx b/frontend/src/features/tickets/TicketFilterBar.tsx
index a7c631c..ebbef51 100644
--- a/frontend/src/features/tickets/TicketFilterBar.tsx
+++ b/frontend/src/features/tickets/TicketFilterBar.tsx
@@ -32,7 +32,7 @@ export function TicketFilterBar({
     <AppFilterBar
       actions={
         <Button variant="outline" onClick={onReset}>
-          <RotateCcw className="size-4" />
+          <RotateCcw data-icon="inline-start" />
           重置筛选
         </Button>
       }
diff --git a/frontend/src/features/tickets/TicketMetricCards.tsx b/frontend/src/features/tickets/TicketMetricCards.tsx
index 5a6f1a4..c08cbe9 100644
--- a/frontend/src/features/tickets/TicketMetricCards.tsx
+++ b/frontend/src/features/tickets/TicketMetricCards.tsx
@@ -1,5 +1,6 @@
 import { AlertTriangle, Clock3, Flame, RotateCcw } from 'lucide-react'
 
+import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 import type { Ticket } from './types'
@@ -11,25 +12,25 @@ type TicketMetricCardsProps = {
 const metricConfig = [
   {
     label: '待处理',
-    description: '需要分派或开始处理',
+    badge: '分派',
     icon: Clock3,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'pending').length
   },
   {
     label: '处理中',
-    description: '技术支持正在跟进',
+    badge: '跟进',
     icon: RotateCcw,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'in_progress').length
   },
   {
     label: '待确认',
-    description: '等待业务侧确认结果',
+    badge: '确认',
     icon: AlertTriangle,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'pending_confirm').length
   },
   {
     label: '高优先级',
-    description: '高或紧急优先级',
+    badge: '风险',
     icon: Flame,
     value: (tickets: Ticket[]) =>
       tickets.filter((ticket) => ticket.priority === 'high' || ticket.priority === 'urgent').length
@@ -42,18 +43,19 @@ export function TicketMetricCards({ tickets }: TicketMetricCardsProps) {
       {metricConfig.map((metric) => {
         const Icon = metric.icon
         return (
-          <Card key={metric.label}>
+          <Card key={metric.label} className="relative">
             <CardHeader className="grid grid-cols-[minmax(0,1fr)_auto] items-start">
-              <div>
+              <div className="min-w-0">
                 <CardTitle className="text-sm">{metric.label}</CardTitle>
-                <p className="mt-1 text-xs text-muted-foreground">{metric.description}</p>
+                <Badge variant="outline" className="mt-2">{metric.badge}</Badge>
               </div>
-              <div className="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary ring-1 ring-primary/15">
                 <Icon className="size-4" />
               </div>
             </CardHeader>
-            <CardContent>
-              <p className="text-2xl font-semibold text-foreground">{metric.value(tickets)}</p>
+            <CardContent className="grid gap-2">
+              <p className="text-3xl font-semibold tabular-nums text-foreground">{metric.value(tickets)}</p>
+              <p className="text-xs text-muted-foreground">当前列表范围</p>
             </CardContent>
           </Card>
         )
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 2f7974b..290d9ab 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -4,13 +4,13 @@
 
 @layer base {
   :root {
-    --background: 210 20% 98%;
-    --foreground: 222 25% 12%;
+    --background: 213 24% 97%;
+    --foreground: 222 28% 11%;
     --surface: 0 0% 100%;
-    --muted: 210 18% 94%;
-    --muted-foreground: 215 12% 42%;
-    --border: 214 18% 86%;
-    --primary: 213 52% 32%;
+    --muted: 214 22% 93%;
+    --muted-foreground: 215 14% 38%;
+    --border: 214 18% 84%;
+    --primary: 214 56% 30%;
     --primary-foreground: 0 0% 100%;
     --success: 151 55% 36%;
     --warning: 38 86% 48%;
@@ -19,7 +19,7 @@
     --ai-accent: 186 52% 36%;
     --radius: 0.5rem;
     --card: 0 0% 100%;
-    --card-foreground: 222 25% 12%;
+    --card-foreground: 222 28% 11%;
     --popover: 0 0% 100%;
     --popover-foreground: 222 25% 12%;
     --secondary: 210 18% 94%;
@@ -29,13 +29,13 @@
     --destructive: 0 70% 50%;
     --input: 214 18% 86%;
     --ring: 213 52% 32%;
-    --sidebar: 0 0% 100%;
-    --sidebar-foreground: 222 25% 12%;
-    --sidebar-primary: 213 52% 32%;
+    --sidebar: 222 32% 13%;
+    --sidebar-foreground: 214 24% 92%;
+    --sidebar-primary: 186 52% 42%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 210 18% 94%;
-    --sidebar-accent-foreground: 222 25% 12%;
-    --sidebar-border: 214 18% 86%;
+    --sidebar-accent: 219 26% 20%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 219 24% 24%;
     --sidebar-ring: 213 52% 32%;
   }
 
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index ed36ea6..517fd03 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -41,7 +41,18 @@ const config: Config = {
         warning: 'hsl(var(--warning))',
         danger: 'hsl(var(--danger))',
         info: 'hsl(var(--info))',
-        ai: 'hsl(var(--ai-accent))'
+        ai: 'hsl(var(--ai-accent))',
+        'ai-accent': 'hsl(var(--ai-accent))',
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
+        }
       },
       borderRadius: {
         lg: 'var(--radius)',