R29-1 R29-6: 重构海音达工作台壳层与高频页面

client/src/components/common/EmptyStateCard.tsx

@@ -4,14 +4,16 @@ type EmptyStateCardProps = {
   title: string;
   description: string;
   footer?: ReactNode;
+  icon?: ReactNode;
 };
 
-export function EmptyStateCard({ title, description, footer }: EmptyStateCardProps) {
+export function EmptyStateCard({ title, description, footer, icon }: EmptyStateCardProps) {
   return (
-    <section className="card-std p-8">
-      <h3 className="card-title">{title}</h3>
-      <p className="card-desc">{description}</p>
-      {footer ? <div className="mt-4">{footer}</div> : null}
+    <section className="card-std p-8 text-center">
+      {icon ? <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-500">{icon}</div> : null}
+      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
+      <p className="card-desc mx-auto max-w-xl">{description}</p>
+      {footer ? <div className="mt-5 flex justify-center">{footer}</div> : null}
     </section>
   );
 }

client/src/components/common/PageHeader.tsx

@@ -1,20 +1,26 @@
 import type { ReactNode } from "react";
 
+import { cn } from "../../lib/utils";
+
 type PageHeaderProps = {
   title: string;
   subtitle?: string;
   actions?: ReactNode;
+  eyebrow?: string;
+  meta?: ReactNode;
+  className?: string;
 };
 
-export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+export function PageHeader({ title, subtitle, actions, eyebrow, meta, className }: PageHeaderProps) {
   return (
-    <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight text-zinc-900">{title}</h2>
-        {subtitle ? <p className="mt-1 text-sm font-medium text-zinc-500">{subtitle}</p> : null}
+    <header className={cn("flex flex-wrap items-start justify-between gap-4", className)}>
+      <div className="min-w-0 max-w-3xl">
+        {eyebrow ? <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">{eyebrow}</div> : null}
+        <h2 className="mt-1 text-[2rem] font-semibold tracking-tight text-zinc-900">{title}</h2>
+        {subtitle ? <p className="mt-2 text-sm leading-6 text-zinc-600">{subtitle}</p> : null}
+        {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
       </div>
-
-      {actions ? <div className="shrink-0">{actions}</div> : null}
-    </div>
+      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
+    </header>
   );
 }

client/src/components/navigation/NavLinks.tsx

@@ -3,6 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchSystemNavigation, type NavigationItem } from "../../api/workspace";
 import { useAuth } from "../../auth/AuthContext";
 import { hasAnyPermission } from "../../auth/permissions";
+import {
+  ADMIN_NAV_ORDER,
+  BACKUP_NAV_ORDER,
+  MAIN_NAV_ORDER,
+} from "../../features/navigation/schema";
 import { cn } from "../../lib/utils";
 
 export type NavItem = {
@@ -38,15 +43,11 @@ export const NAV_ITEMS: NavItem[] = [
   { to: "/invoice-pool", label: "票据中心", icon: "receipt_long", anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"] },
   { to: "/inventory-checks", label: "资产盘点", icon: "inventory", anyOf: ["asset.inventory"] },
   { to: "/system/cutover", label: "切换控制台", icon: "swap_calls", anyOf: ["system.settings"] },
-  { to: "/system/integrations/erp", label: "ERP 集成", icon: "hub", anyOf: ["integration.manage"] },
+  { to: "/system/integrations/erp", label: "外部系统桥接", icon: "hub", anyOf: ["integration.manage"] },
   { to: "/dashboard", label: "仪表盘", icon: "dashboard", anyOf: ["report.dashboard.view"] },
   { to: "/settings/profile", label: "个人设置", icon: "manage_accounts" },
 ];
 
-const MAIN_NAV_ORDER = ["/portal", "/team", "/leave-requests", "/reimbursements", "/assets", "/weekly-reports", "/todos", "/announcements", "/projects"];
-const ADMIN_NAV_ORDER = ["/system/workspace", "/people", "/system/workflow-definitions", "/system/settings", "/system/feature-flags", "/audit-logs"];
-const BACKUP_NAV_ORDER = ["/workflow/tasks", "/contracts-registry", "/purchase-requests", "/travel-requests", "/budgets", "/payment-batches", "/ap-operations", "/invoice-pool", "/inventory-checks", "/system/cutover", "/system/integrations/erp", "/dashboard", "/settings/profile"];
-
 const LEGACY_ACCESSIBLE_LABELS: Record<string, string> = {
   "/reimbursements": "我的报销",
   "/workflow/tasks": "待我处理",
@@ -61,38 +62,56 @@ type ResolvedNavItem = {
 };
 
 function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
+  const accessibleLabel = LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label;
+
   return (
     <NavLink
       key={item.key ?? item.href}
       to={item.href}
-      aria-label={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
-      title={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
+      aria-label={accessibleLabel}
+      title={accessibleLabel}
       onClick={() => onNavigate?.()}
       className={({ isActive }) =>
         cn(
-          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+          "group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm transition-colors",
           isActive
-            ? "bg-zinc-100 font-bold text-zinc-900"
-            : "font-medium text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+            ? "bg-zinc-900 text-white shadow-sm"
+            : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
         )
       }
     >
-      <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
-      <span>{item.label}</span>
+      {({ isActive }) => (
+        <>
+          <span
+            className={cn(
+              "flex size-9 items-center justify-center rounded-xl border text-[20px] transition-colors",
+              isActive
+                ? "border-white/15 bg-white/10 text-white"
+                : "border-zinc-200 bg-white text-zinc-500 group-hover:border-zinc-300 group-hover:text-zinc-900",
+            )}
+          >
+            <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+          </span>
+          <span className="min-w-0 flex-1 truncate font-medium">{item.label}</span>
+        </>
+      )}
     </NavLink>
   );
 }
 
-function renderSection(title: string, items: ResolvedNavItem[], onNavigate?: () => void) {
+function renderSection(title: string, description: string, items: ResolvedNavItem[], onNavigate?: () => void) {
   if (!items.length) {
     return null;
   }
 
   return (
-    <div className="space-y-1">
-      <div className="px-3 pt-2 text-[11px] font-semibold uppercase tracking-wide text-zinc-400">{title}</div>
-      {items.map((item) => renderNavItem(item, onNavigate))}
-    </div>
+    <section className="space-y-2">
+      <div className="px-3">
+        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">{title}</div>
+        <div className="mt-1 text-xs text-zinc-500">{description}</div>
+      </div>
+      <div className="space-y-1.5">{items.map((item) => renderNavItem(item, onNavigate))}</div>
+    </section>
   );
 }
 
@@ -102,14 +121,15 @@ function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void)
   }
 
   return (
-    <details className="rounded-xl border border-zinc-200 bg-zinc-50/80 px-2 py-2">
-      <summary className="flex cursor-pointer list-none items-center justify-between px-2 py-1 text-sm font-semibold text-zinc-700">
-        <span>备用模块</span>
+    <details className="rounded-2xl border border-zinc-200 bg-zinc-50/80 px-3 py-3">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-2 py-1.5 text-sm font-semibold text-zinc-700">
+        <div>
+          <div>备用模块</div>
+          <div className="mt-0.5 text-xs font-normal text-zinc-500">默认收起，不干扰主路径</div>
+        </div>
         <span className="text-xs font-medium text-zinc-400">按需展开</span>
       </summary>
-      <div className="mt-2 space-y-1 pb-1">
-        {items.map((item) => renderNavItem(item, onNavigate))}
-      </div>
+      <div className="mt-3 space-y-1.5 pb-1">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </details>
   );
 }
@@ -130,6 +150,7 @@ function buildFallbackItems(permissions: string[]) {
 function normalizeSections(sections: { main: NavigationItem[]; admin: NavigationItem[]; backup: NavigationItem[] }) {
   const allItems = [...sections.main, ...sections.admin, ...sections.backup];
   const byHref = new Map<string, ResolvedNavItem>();
+
   for (const item of allItems) {
     if (!byHref.has(item.href)) {
       byHref.set(item.href, item);
@@ -137,38 +158,45 @@ function normalizeSections(sections: { main: NavigationItem[]; admin: Navigation
   }
 
   const used = new Set<string>();
-  const take = (hrefs: string[]) => hrefs
-    .map((href) => {
-      const item = byHref.get(href);
-      if (item) {
-        used.add(href);
-      }
-      return item;
-    })
-    .filter((item): item is ResolvedNavItem => Boolean(item));
+  const take = (hrefs: string[]) =>
+    hrefs
+      .map((href) => {
+        const item = byHref.get(href);
+        if (item) {
+          used.add(href);
+        }
+        return item;
+      })
+      .filter((item): item is ResolvedNavItem => Boolean(item));
 
-  const main = take(MAIN_NAV_ORDER);
-  const admin = take(ADMIN_NAV_ORDER);
-  const backup = [
-    ...take(BACKUP_NAV_ORDER),
-    ...allItems.filter((item) => !used.has(item.href)).map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
-  ];
-
-  return { main, admin, backup };
+  return {
+    main: take(MAIN_NAV_ORDER),
+    admin: take(ADMIN_NAV_ORDER),
+    backup: [
+      ...take(BACKUP_NAV_ORDER),
+      ...allItems
+        .filter((item) => !used.has(item.href))
+        .map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
+    ],
+  };
 }
 
 export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const { permissions } = useAuth();
-  const navigationQuery = useQuery({ queryKey: ["system-navigation"], queryFn: fetchSystemNavigation, staleTime: 60_000 });
+  const navigationQuery = useQuery({
+    queryKey: ["system-navigation"],
+    queryFn: fetchSystemNavigation,
+    staleTime: 60_000,
+  });
 
   const sections = navigationQuery.data?.sections
     ? normalizeSections(navigationQuery.data.sections)
     : buildFallbackItems(permissions);
 
   return (
-    <nav className="space-y-4">
-      {renderSection("主导航", sections.main, onNavigate)}
-      {renderSection("管理入口", sections.admin, onNavigate)}
+    <nav className="space-y-5">
+      {renderSection("主导航", "优先处理今日工作与高频协同。", sections.main, onNavigate)}
+      {renderSection("管理入口", "仅管理员与负责人使用。", sections.admin, onNavigate)}
       {renderBackupSection(sections.backup, onNavigate)}
     </nav>
   );

client/src/components/navigation/Sidebar.tsx

@@ -1,19 +1,18 @@
+import { AppBrand } from "../shell/AppBrand";
 import { NavLinks } from "./NavLinks";
 
 export function Sidebar() {
   return (
-    <aside className="fixed inset-y-0 z-20 hidden w-64 overflow-hidden border-r border-zinc-200 bg-white lg:flex lg:flex-col">
-      <div className="border-b border-zinc-200 p-6">
-        <div className="flex items-center gap-3">
-          <div className="flex size-8 items-center justify-center rounded-lg bg-zinc-900 text-lg font-bold text-white">H</div>
-          <div>
-            <div className="font-bold tracking-tight text-zinc-900">海音达工作台</div>
-            <div className="text-xs text-zinc-500">企业微信入口 + OA 主平台</div>
-          </div>
+    <aside className="fixed inset-y-0 z-20 hidden w-72 overflow-hidden border-r border-zinc-200 bg-white/95 backdrop-blur lg:flex lg:flex-col">
+      <div className="border-b border-zinc-200 px-6 py-6">
+        <AppBrand />
+        <div className="mt-4 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
+          <div className="font-medium text-zinc-900">统一工作台</div>
+          <div className="mt-1">先看今天要做什么，再进入具体模块处理。</div>
         </div>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5">
         <NavLinks />
       </div>
     </aside>

client/src/components/navigation/Topbar.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { fetchNotifications } from "../../api/notifications";
 import { useAuth } from "../../auth/AuthContext";
+import { resolvePageMeta } from "../../features/navigation/schema";
 import { isWecomWebView } from "../../lib/runtimeContext";
 import { GlobalSearchDialog } from "../GlobalSearchDialog";
+import { AppBrand } from "../shell/AppBrand";
 import { Button } from "../ui/button";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
 import {
@@ -18,14 +20,7 @@ import { NavLinks } from "./NavLinks";
 
 function MenuIcon() {
   return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="20"
-      viewBox="0 0 24 24"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
       <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
     </svg>
   );
@@ -33,14 +28,7 @@ function MenuIcon() {
 
 function BellIcon() {
   return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="20"
-      viewBox="0 0 24 24"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M15 17H9m9-2V11a6 6 0 10-12 0v4l-2 2h16l-2-2z"
         stroke="currentColor"
@@ -54,9 +42,11 @@ function BellIcon() {
 
 export function Topbar() {
   const { me, logout } = useAuth();
+  const location = useLocation();
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const wecomEntry = isWecomWebView();
+  const pageMeta = resolvePageMeta(location.pathname);
 
   const unreadQuery = useQuery({
     enabled: Boolean(me),
@@ -70,9 +60,9 @@ export function Topbar() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-4 py-3 sm:px-8">
+      <header className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/90 px-4 py-4 backdrop-blur sm:px-8">
         <div className="flex items-center justify-between gap-4">
-          <div className="flex min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-center gap-3">
             <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
               <DialogTrigger asChild>
                 <Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
@@ -80,13 +70,10 @@ export function Topbar() {
                 </Button>
               </DialogTrigger>
 
-              <DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] rounded-none rounded-r-xl p-0">
-                <div className="flex h-full flex-col">
-                  <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-4">
-                    <div>
-                      <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">主业务平台</p>
-                      <p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
-                    </div>
+              <DialogContent className="left-0 top-0 h-full w-80 max-w-[84vw] rounded-none rounded-r-3xl border-r border-zinc-200 p-0">
+                <div className="flex h-full flex-col bg-white">
+                  <div className="flex items-start justify-between border-b border-zinc-200 px-5 py-5">
+                    <AppBrand />
                     <DialogClose asChild>
                       <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
                         ✕
@@ -94,7 +81,7 @@ export function Topbar() {
                     </DialogClose>
                   </div>
 
-                  <div className="flex-1 overflow-auto p-4">
+                  <div className="flex-1 overflow-auto px-4 py-5">
                     <NavLinks onNavigate={() => setMobileNavOpen(false)} />
                   </div>
                 </div>
@@ -102,19 +89,23 @@ export function Topbar() {
             </Dialog>
 
             <div className="min-w-0">
-              <p className="text-sm text-zinc-500">欢迎回来</p>
-              <div className="flex flex-wrap items-center gap-2">
-                <p className="truncate text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
+              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">{pageMeta.group}</div>
+              <div className="mt-1 flex flex-wrap items-center gap-2">
+                <p className="truncate text-lg font-semibold tracking-tight text-zinc-900">{pageMeta.title}</p>
                 {wecomEntry ? (
-                  <span className="rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary" data-testid="topbar-wecom-entry-badge">
+                  <span
+                    className="badge-neutral border-primary-200 bg-primary-50 text-primary"
+                    data-testid="topbar-wecom-entry-badge"
+                  >
                     当前通过企业微信进入
                   </span>
                 ) : null}
               </div>
+              <div className="mt-1 text-sm text-zinc-500">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
             </div>
           </div>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 sm:gap-3">
             <Button
               size="sm"
               variant="secondary"
@@ -139,14 +130,7 @@ export function Topbar() {
               <span className="material-symbols-outlined text-[18px]">search</span>
             </Button>
 
-            <Button
-              asChild
-              size="icon"
-              variant="secondary"
-              aria-label="通知"
-              type="button"
-              data-testid="notifications-bell"
-            >
+            <Button asChild size="icon" variant="secondary" aria-label="通知" type="button" data-testid="notifications-bell">
               <Link className="relative" to="/notifications">
                 <BellIcon />
                 {unreadCount > 0 ? (
@@ -159,12 +143,12 @@ export function Topbar() {
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="secondary" type="button">
+                <Button data-testid="topbar-profile-trigger" variant="secondary" type="button" className="max-w-[160px] truncate">
                   {me?.name ?? "账号"}
                 </Button>
               </DropdownMenuTrigger>
 
-              <DropdownMenuContent align="end">
+              <DropdownMenuContent align="end" className="w-48">
                 <DropdownMenuItem asChild className="cursor-pointer">
                   <Link to="/settings/profile">个人设置</Link>
                 </DropdownMenuItem>

client/src/components/patterns/DetailSideMeta.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { SectionPanel } from "./SectionPanel";
+
+export function DetailSideMeta({ title, description, children }: { title: string; description?: string; children: ReactNode }) {
+  return (
+    <SectionPanel title={title} description={description}>
+      <div className="space-y-3 text-sm text-zinc-600">{children}</div>
+    </SectionPanel>
+  );
+}

client/src/components/patterns/EntityOverviewHero.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+export function EntityOverviewHero({
+  title,
+  subtitle,
+  meta,
+  actions,
+}: {
+  title: string;
+  subtitle?: string;
+  meta?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <section className="workbench-hero">
+      <div>
+        <h1 className="workbench-hero__title">{title}</h1>
+        {subtitle ? <p className="workbench-hero__subtitle">{subtitle}</p> : null}
+        {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
+      </div>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </section>
+  );
+}

client/src/components/patterns/ListWorkspace.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+export function ListWorkspace({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={cn("page-scaffold", className)}>{children}</div>;
+}
+
+export function FilterBar({ className, children }: { className?: string; children: ReactNode }) {
+  return <section className={cn("card-std p-4 md:p-5", className)}>{children}</section>;
+}
+
+export function StatStrip({ className, children }: { className?: string; children: ReactNode }) {
+  return <section className={cn("grid gap-4 md:grid-cols-3", className)}>{children}</section>;
+}
+
+export function ActionToolbar({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={cn("flex flex-wrap items-center justify-between gap-3", className)}>{children}</div>;
+}
+
+export function PrimaryTable({ className, children }: { className?: string; children: ReactNode }) {
+  return <section className={cn("card-std p-0 overflow-hidden", className)}>{children}</section>;
+}

client/src/components/patterns/MetricCard.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { cn } from "../../lib/utils";
+
+export function MetricCard({
+  title,
+  value,
+  note,
+  href,
+  tone = "neutral",
+  ariaLabel,
+}: {
+  title: string;
+  value: ReactNode;
+  note?: ReactNode;
+  href?: string;
+  tone?: "neutral" | "warning" | "danger";
+  ariaLabel?: string;
+}) {
+  const content = (
+    <>
+      <div className="metric-card__title">{title}</div>
+      <div className="metric-card__value">{value}</div>
+      {note ? <div className="metric-card__note">{note}</div> : null}
+    </>
+  );
+
+  const className = cn(
+    "metric-card",
+    tone === "warning" && "metric-card--warning",
+    tone === "danger" && "metric-card--danger",
+  );
+
+  if (href) {
+    return (
+      <Link to={href} aria-label={ariaLabel} className={className}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div aria-label={ariaLabel} className={className}>
+      {content}
+    </div>
+  );
+}

client/src/components/patterns/PageScaffold.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+export function PageScaffold({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={cn("page-scaffold", className)}>{children}</div>;
+}

client/src/components/patterns/SectionPanel.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+export function SectionPanel({
+  title,
+  description,
+  actions,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={cn("card-std section-panel", className)}>
+      <div className="section-panel__header">
+        <div>
+          <h3 className="section-panel__title">{title}</h3>
+          {description ? <p className="section-panel__desc">{description}</p> : null}
+        </div>
+        {actions ? <div className="shrink-0">{actions}</div> : null}
+      </div>
+      <div className="section-panel__body">{children}</div>
+    </section>
+  );
+}

client/src/components/patterns/WorkbenchHero.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+export function WorkbenchHero({
+  eyebrow,
+  title,
+  subtitle,
+  actions,
+}: {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <section className="workbench-hero">
+      <div>
+        {eyebrow ? <div className="workbench-hero__eyebrow">{eyebrow}</div> : null}
+        <h1 className="workbench-hero__title">{title}</h1>
+        {subtitle ? <p className="workbench-hero__subtitle">{subtitle}</p> : null}
+      </div>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </section>
+  );
+}

client/src/components/shell/AppBrand.tsx

@@ -0,0 +1,13 @@
+export function AppBrand({ compact = false }: { compact?: boolean }) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className={`flex items-center justify-center rounded-2xl bg-[var(--color-accent-primary)] font-bold text-white shadow-sm ${compact ? "size-9 text-base" : "size-11 text-lg"}`}>
+        H
+      </div>
+      <div>
+        <div className="text-sm font-semibold tracking-tight text-zinc-900">海音达工作台</div>
+        <div className="text-xs text-zinc-500">企业微信入口 + 工作台主平台</div>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/button.tsx

@@ -4,21 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary-light",
-        secondary: "border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50",
+        default: "bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)] shadow-sm",
+        secondary: "border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 shadow-sm",
         outline: "border border-zinc-200 bg-transparent text-zinc-900 hover:bg-zinc-50",
-        destructive: "bg-red-600 text-white hover:bg-red-700",
+        destructive: "bg-red-600 text-white hover:bg-red-700 shadow-sm",
         ghost: "bg-transparent text-zinc-700 hover:bg-zinc-100",
         link: "bg-transparent text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-11 px-4",
-        sm: "h-10 rounded-md px-3 text-xs",
-        lg: "h-12 rounded-xl px-6 text-base",
+        sm: "h-10 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-2xl px-6 text-base",
         icon: "h-11 w-11 p-0",
       },
     },
@@ -48,4 +48,3 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 Button.displayName = "Button";
-