From 7e183c0cdc120fa58fd802361c2efe973699fed1 Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Mon, 23 Mar 2026 09:59:35 +0800
Subject: [PATCH] =?UTF-8?q?R29-1=20R29-6:=20=E9=87=8D=E6=9E=84=E6=B5=B7?=
 =?UTF-8?q?=E9=9F=B3=E8=BE=BE=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=A3=B3=E5=B1=82?=
 =?UTF-8?q?=E4=B8=8E=E9=AB=98=E9=A2=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/auth/AuthContext.tsx               |  49 +-
 .../src/components/common/EmptyStateCard.tsx  |  12 +-
 client/src/components/common/PageHeader.tsx   |  22 +-
 client/src/components/navigation/NavLinks.tsx | 116 ++-
 client/src/components/navigation/Sidebar.tsx  |  17 +-
 client/src/components/navigation/Topbar.tsx   |  68 +-
 .../components/patterns/DetailSideMeta.tsx    |  10 +
 .../patterns/EntityOverviewHero.tsx           |  24 +
 .../src/components/patterns/ListWorkspace.tsx |  22 +
 client/src/components/patterns/MetricCard.tsx |  47 ++
 .../src/components/patterns/PageScaffold.tsx  |   6 +
 .../src/components/patterns/SectionPanel.tsx  |  29 +
 .../src/components/patterns/WorkbenchHero.tsx |  24 +
 client/src/components/shell/AppBrand.tsx      |  13 +
 client/src/components/ui/button.tsx           |  13 +-
 client/src/design/theme.css                   |  25 +
 client/src/design/tokens.ts                   |  41 +
 client/src/design/types.ts                    |  33 +
 client/src/features/navigation/schema.ts      |  41 +
 client/src/features/portal/schema.ts          |  13 +
 client/src/index.css                          | 149 +++-
 client/src/layouts/AppShellLayout.tsx         |  31 +-
 client/src/layouts/AuthLayout.tsx             |  33 +-
 client/src/pages/LeaveRequestPage.tsx         | 573 ++++++-------
 client/src/pages/LoginPage.tsx                | 224 +++---
 client/src/pages/PortalHomePage.tsx           | 369 ++++-----
 client/src/pages/ProfilePage.tsx              | 241 +++---
 client/src/pages/ProjectDetailPage.tsx        | 759 +++++++++---------
 client/src/pages/ProjectsPage.tsx             | 112 ++-
 client/src/pages/ReimbursementsPage.tsx       | 286 ++++---
 client/src/pages/TodosPage.tsx                | 184 +++--
 client/src/pages/WeeklyReportsPage.tsx        | 161 ++--
 ...0-00-r29-frontend-design-system-rework.csv |  10 +
 33 files changed, 2193 insertions(+), 1564 deletions(-)
 create mode 100644 client/src/components/patterns/DetailSideMeta.tsx
 create mode 100644 client/src/components/patterns/EntityOverviewHero.tsx
 create mode 100644 client/src/components/patterns/ListWorkspace.tsx
 create mode 100644 client/src/components/patterns/MetricCard.tsx
 create mode 100644 client/src/components/patterns/PageScaffold.tsx
 create mode 100644 client/src/components/patterns/SectionPanel.tsx
 create mode 100644 client/src/components/patterns/WorkbenchHero.tsx
 create mode 100644 client/src/components/shell/AppBrand.tsx
 create mode 100644 client/src/design/theme.css
 create mode 100644 client/src/design/tokens.ts
 create mode 100644 client/src/design/types.ts
 create mode 100644 client/src/features/navigation/schema.ts
 create mode 100644 client/src/features/portal/schema.ts
 create mode 100644 issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv

diff --git a/client/src/auth/AuthContext.tsx b/client/src/auth/AuthContext.tsx
index b363e259..313af91f 100644
--- a/client/src/auth/AuthContext.tsx
+++ b/client/src/auth/AuthContext.tsx
@@ -143,6 +143,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
   const [state, setState] = useState<AuthState>(EMPTY_STATE);
   const [offlineAccessMode, setOfflineAccessMode] = useState(false);
   const tokenRef = useRef<string | null>(null);
+  const bootstrapPromiseRef = useRef<Promise<string | null> | null>(null);
 
   useEffect(() => {
     tokenRef.current = state.accessToken;
@@ -195,18 +196,28 @@ export function AuthProvider({ children }: PropsWithChildren) {
       return;
     }
 
-    try {
-      const refreshed = await refreshSession();
-      const me = await fetchCurrentEmployee(refreshed.accessToken);
-      const mustChangePassword = readMustChangePasswordFromStorage();
-      commitAuthenticatedUser(refreshed.accessToken, me, mustChangePassword);
-    } catch {
-      if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
-        activateOfflineSnapshot(offlineSnapshot);
-        return;
-      }
-      clearSession();
+    if (!bootstrapPromiseRef.current) {
+      bootstrapPromiseRef.current = (async () => {
+        try {
+          const refreshed = await refreshSession();
+          const me = await fetchCurrentEmployee(refreshed.accessToken);
+          const mustChangePassword = readMustChangePasswordFromStorage();
+          commitAuthenticatedUser(refreshed.accessToken, me, mustChangePassword);
+          return refreshed.accessToken;
+        } catch {
+          if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
+            activateOfflineSnapshot(offlineSnapshot);
+            return null;
+          }
+          clearSession();
+          return null;
+        } finally {
+          bootstrapPromiseRef.current = null;
+        }
+      })();
     }
+
+    await bootstrapPromiseRef.current;
   }, [activateOfflineSnapshot, clearSession, commitAuthenticatedUser]);
 
   const login = useCallback(
@@ -241,8 +252,22 @@ export function AuthProvider({ children }: PropsWithChildren) {
     configureHttpAuth({
       getAccessToken: () => tokenRef.current,
       refreshAccessToken: async () => {
+        if (bootstrapPromiseRef.current) {
+          const bootstrappedToken = await bootstrapPromiseRef.current;
+          if (bootstrappedToken) {
+            return bootstrappedToken;
+          }
+        }
+
         try {
           const refreshed = await refreshSession();
+          if (!state.me) {
+            const me = await fetchCurrentEmployee(refreshed.accessToken);
+            const mustChangePassword = readMustChangePasswordFromStorage();
+            commitAuthenticatedUser(refreshed.accessToken, me, mustChangePassword);
+            return refreshed.accessToken;
+          }
+
           tokenRef.current = refreshed.accessToken;
           setOfflineAccessMode(false);
           setState((previous) => ({
@@ -258,7 +283,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
       },
       clearSession,
     });
-  }, [clearSession]);
+  }, [clearSession, commitAuthenticatedUser, state.me]);
 
   useEffect(() => {
     void bootstrapByRefresh();
diff --git a/client/src/components/common/EmptyStateCard.tsx b/client/src/components/common/EmptyStateCard.tsx
index 6663fa55..8ca8f055 100644
--- a/client/src/components/common/EmptyStateCard.tsx
+++ b/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>
   );
 }
diff --git a/client/src/components/common/PageHeader.tsx b/client/src/components/common/PageHeader.tsx
index 226f0e85..ec44de7b 100644
--- a/client/src/components/common/PageHeader.tsx
+++ b/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>
   );
 }
diff --git a/client/src/components/navigation/NavLinks.tsx b/client/src/components/navigation/NavLinks.tsx
index dc5bd484..07b19f3b 100644
--- a/client/src/components/navigation/NavLinks.tsx
+++ b/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>
   );
diff --git a/client/src/components/navigation/Sidebar.tsx b/client/src/components/navigation/Sidebar.tsx
index 7ea94c22..a846a32c 100644
--- a/client/src/components/navigation/Sidebar.tsx
+++ b/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>
diff --git a/client/src/components/navigation/Topbar.tsx b/client/src/components/navigation/Topbar.tsx
index 80294d4c..cb6fd1dd 100644
--- a/client/src/components/navigation/Topbar.tsx
+++ b/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>
diff --git a/client/src/components/patterns/DetailSideMeta.tsx b/client/src/components/patterns/DetailSideMeta.tsx
new file mode 100644
index 00000000..3401874b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/patterns/EntityOverviewHero.tsx b/client/src/components/patterns/EntityOverviewHero.tsx
new file mode 100644
index 00000000..2a41decb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/patterns/ListWorkspace.tsx b/client/src/components/patterns/ListWorkspace.tsx
new file mode 100644
index 00000000..9f349755
--- /dev/null
+++ b/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>;
+}
diff --git a/client/src/components/patterns/MetricCard.tsx b/client/src/components/patterns/MetricCard.tsx
new file mode 100644
index 00000000..1690933a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/patterns/PageScaffold.tsx b/client/src/components/patterns/PageScaffold.tsx
new file mode 100644
index 00000000..42ffd67b
--- /dev/null
+++ b/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>;
+}
diff --git a/client/src/components/patterns/SectionPanel.tsx b/client/src/components/patterns/SectionPanel.tsx
new file mode 100644
index 00000000..488419d0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/patterns/WorkbenchHero.tsx b/client/src/components/patterns/WorkbenchHero.tsx
new file mode 100644
index 00000000..6f86fe82
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/shell/AppBrand.tsx b/client/src/components/shell/AppBrand.tsx
new file mode 100644
index 00000000..82c86e5b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index e9928622..236853f6 100644
--- a/client/src/components/ui/button.tsx
+++ b/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";
-
diff --git a/client/src/design/theme.css b/client/src/design/theme.css
new file mode 100644
index 00000000..400d5049
--- /dev/null
+++ b/client/src/design/theme.css
@@ -0,0 +1,25 @@
+:root {
+  --color-bg-canvas: #f5f7fa;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-subtle: #fafafb;
+  --color-bg-primary-soft: #f2f5f8;
+  --color-text-primary: #111827;
+  --color-text-secondary: #667085;
+  --color-text-tertiary: #98a2b3;
+  --color-border-default: #e4e7ec;
+  --color-border-strong: #d0d5dd;
+  --color-accent-primary: #111827;
+  --color-accent-primary-hover: #1f2937;
+  --color-success: #067647;
+  --color-warning: #b54708;
+  --color-danger: #b42318;
+  --color-info: #155eef;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-panel: 1rem;
+  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
+  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
+  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
+}
diff --git a/client/src/design/tokens.ts b/client/src/design/tokens.ts
new file mode 100644
index 00000000..0b23eed6
--- /dev/null
+++ b/client/src/design/tokens.ts
@@ -0,0 +1,41 @@
+export const semanticTokens = {
+  colors: {
+    bgCanvas: "#f5f7fa",
+    bgSurface: "#ffffff",
+    bgSurfaceSubtle: "#fafafb",
+    bgPrimarySoft: "#f2f5f8",
+    textPrimary: "#111827",
+    textSecondary: "#667085",
+    textTertiary: "#98a2b3",
+    borderDefault: "#e4e7ec",
+    borderStrong: "#d0d5dd",
+    accentPrimary: "#111827",
+    accentPrimaryHover: "#1f2937",
+    success: "#067647",
+    warning: "#b54708",
+    danger: "#b42318",
+    info: "#155eef",
+  },
+  radius: {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.25rem",
+    panel: "1rem",
+  },
+  shadow: {
+    xs: "0 1px 2px rgba(16, 24, 40, 0.04)",
+    sm: "0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04)",
+    md: "0 8px 24px rgba(16, 24, 40, 0.08)",
+  },
+  spacing: {
+    pageX: "1.5rem",
+    pageY: "1.5rem",
+    cardX: "1.25rem",
+    cardY: "1.25rem",
+    sectionGap: "1.5rem",
+    clusterGap: "1rem",
+  },
+} as const;
+
+export type SemanticTokens = typeof semanticTokens;
diff --git a/client/src/design/types.ts b/client/src/design/types.ts
new file mode 100644
index 00000000..5fe2897b
--- /dev/null
+++ b/client/src/design/types.ts
@@ -0,0 +1,33 @@
+export type AppDensity = "comfortable" | "compact";
+
+export type PageScaffoldMeta = {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  breadcrumb?: Array<{ label: string; href?: string }>;
+  statusTag?: { label: string; tone: "neutral" | "success" | "warning" | "danger" };
+  primaryAction?: { label: string; onClick: () => void };
+  secondaryActions?: Array<{ label: string; onClick: () => void }>;
+};
+
+export type NavBadge = {
+  value: string | number;
+  tone: "neutral" | "warning" | "danger";
+};
+
+export type NavItemMeta = {
+  key: string;
+  href: string;
+  label: string;
+  icon: string;
+  group: "primary" | "admin" | "backup";
+  priority: number;
+  badge?: NavBadge | null;
+  mobileVisible: boolean;
+};
+
+export type PortalSectionSchema = {
+  heroCards: string[];
+  summaryBlocks: string[];
+  supportBlocks: string[];
+};
diff --git a/client/src/features/navigation/schema.ts b/client/src/features/navigation/schema.ts
new file mode 100644
index 00000000..3b834560
--- /dev/null
+++ b/client/src/features/navigation/schema.ts
@@ -0,0 +1,41 @@
+export const MAIN_NAV_ORDER = ["/portal", "/team", "/leave-requests", "/reimbursements", "/assets", "/weekly-reports", "/todos", "/announcements", "/projects"];
+export const ADMIN_NAV_ORDER = ["/system/workspace", "/people", "/system/workflow-definitions", "/system/settings", "/system/feature-flags", "/audit-logs"];
+export 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 PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [
+  { path: "/portal", title: "Portal", group: "工作台" },
+  { path: "/announcements", title: "公告", group: "主导航" },
+  { path: "/team", title: "团队", group: "主导航" },
+  { path: "/projects", title: "项目", group: "主导航" },
+  { path: "/contracts-registry", title: "合同台账", group: "备用模块" },
+  { path: "/weekly-reports", title: "周报", group: "主导航" },
+  { path: "/todos", title: "待办", group: "主导航" },
+  { path: "/reimbursements/", title: "报销详情", group: "主导航" },
+  { path: "/reimbursements", title: "报销", group: "主导航" },
+  { path: "/leave-requests", title: "请假", group: "主导航" },
+  { path: "/assets", title: "资产", group: "主导航" },
+  { path: "/workflow/tasks/", title: "审批详情", group: "备用模块" },
+  { path: "/workflow/tasks", title: "审批待办", group: "备用模块" },
+  { path: "/settings/profile", title: "个人设置", group: "账号设置" },
+  { path: "/system/workspace", title: "工作区设置", group: "管理入口" },
+  { path: "/people", title: "人员管理", group: "管理入口" },
+  { path: "/system/workflow-definitions", title: "流程定义", group: "管理入口" },
+  { path: "/system/settings", title: "系统设置", group: "管理入口" },
+  { path: "/system/feature-flags", title: "功能开关", group: "管理入口" },
+  { path: "/audit-logs", title: "审计日志", group: "管理入口" },
+];
+
+export function resolvePageMeta(pathname: string) {
+  const matched = [...PAGE_TITLES].sort((left, right) => right.path.length - left.path.length)
+    .find((item) => pathname === item.path || pathname.startsWith(item.path));
+
+  if (matched) {
+    return matched;
+  }
+
+  if (pathname === "/") {
+    return { title: "Portal", group: "工作台" };
+  }
+
+  return { title: pathname, group: "工作台" };
+}
diff --git a/client/src/features/portal/schema.ts b/client/src/features/portal/schema.ts
new file mode 100644
index 00000000..d435255f
--- /dev/null
+++ b/client/src/features/portal/schema.ts
@@ -0,0 +1,13 @@
+import type { PortalSectionSchema } from "../../design/types";
+
+export const employeePortalSchema: PortalSectionSchema = {
+  heroCards: ["my_todos", "today_presence", "my_weekly_report", "my_projects"],
+  summaryBlocks: ["applications_assets", "announcements"],
+  supportBlocks: ["recent_visits", "quick_links"],
+};
+
+export const managerPortalSchema: PortalSectionSchema = {
+  heroCards: ["pending_approvals", "team_presence", "weekly_missing", "weekly_help"],
+  summaryBlocks: ["management_focus", "announcements"],
+  supportBlocks: ["project_and_people", "adoption_summary"],
+};
diff --git a/client/src/index.css b/client/src/index.css
index 281474a4..e966baf8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,82 +1,162 @@
 /*
-  Style tokens source (single-direction sync):
-  - Extracted from Stitch MCP AI-generated Design Preview (B2B SaaS Theme)
+  Design tokens source:
+  - aligned to R29 semantic workbench system
 */
 
 @import "@material-symbols/font-400/outlined.css";
 @import "./styles/mobile-touch.css";
+@import "./design/theme.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
+  html {
+    color-scheme: light;
+  }
+
   body {
-    @apply bg-zinc-50 font-sans text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white;
+    background: var(--color-bg-canvas);
+    color: var(--color-text-primary);
+    @apply font-sans antialiased selection:bg-zinc-900 selection:text-white;
   }
 
   #root {
     @apply min-h-screen flex flex-col;
   }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
 }
 
 @layer components {
-
-  /* Layout */
   .layout-container {
     @apply mx-auto w-full px-4 sm:px-6 lg:px-8;
   }
 
-  /* Buttons */
-  .btn-primary {
-    @apply flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900 text-white rounded-lg text-sm font-bold hover:bg-zinc-800 transition-all shadow-sm;
+  .page-scaffold {
+    @apply space-y-6;
   }
 
-  .btn-secondary {
-    @apply flex items-center justify-center gap-2 px-3 py-2 bg-white border border-zinc-200 rounded-lg text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors shadow-sm;
+  .workbench-hero {
+    background: linear-gradient(135deg, rgba(17, 24, 39, 0.03), rgba(255, 255, 255, 0.96));
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xs);
+    @apply flex flex-col gap-4 px-6 py-6 md:flex-row md:items-end md:justify-between;
   }
 
-  .btn-ghost {
-    @apply text-zinc-400 hover:text-zinc-600 p-1 rounded-md transition-colors;
+  .workbench-hero__eyebrow {
+    @apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
+  }
+
+  .workbench-hero__title {
+    @apply mt-2 text-3xl font-semibold tracking-tight text-zinc-900;
+  }
+
+  .workbench-hero__subtitle {
+    @apply mt-2 max-w-3xl text-sm leading-6 text-zinc-600;
   }
 
-  /* Cards */
   .card-std {
-    @apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 transition-all;
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-panel);
+    box-shadow: var(--shadow-sm);
   }
 
   .card-title {
-    @apply text-sm font-medium text-zinc-500 mb-1;
+    @apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
+  }
+
+  .card-desc {
+    @apply mt-2 text-sm leading-6 text-zinc-600;
   }
 
   .card-value {
-    @apply text-3xl font-bold text-zinc-900 tracking-tight;
+    @apply text-3xl font-semibold tracking-tight text-zinc-900;
+  }
+
+  .section-panel {
+    @apply p-6;
+  }
+
+  .section-panel__header {
+    @apply flex flex-wrap items-start justify-between gap-3;
+  }
+
+  .section-panel__title {
+    @apply text-base font-semibold text-zinc-900;
+  }
+
+  .section-panel__desc {
+    @apply mt-1 text-sm text-zinc-500;
+  }
+
+  .section-panel__body {
+    @apply mt-5;
+  }
+
+  .metric-card {
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xs);
+    @apply block px-5 py-5 transition-colors hover:bg-zinc-50;
+  }
+
+  .metric-card--warning {
+    @apply border-amber-200 bg-amber-50 hover:bg-amber-100;
+  }
+
+  .metric-card--danger {
+    @apply border-red-200 bg-red-50 hover:bg-red-100;
+  }
+
+  .metric-card__title {
+    @apply text-sm font-medium text-zinc-500;
+  }
+
+  .metric-card__value {
+    @apply mt-2 text-2xl font-semibold tracking-tight text-zinc-900;
+  }
+
+  .metric-card__note {
+    @apply mt-2 text-sm text-zinc-500;
+  }
+
+  .info-chip {
+    @apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600;
+  }
+
+  .surface-muted {
+    @apply rounded-2xl border border-zinc-200 bg-zinc-50;
   }
 
-  /* Forms */
   .input-std {
-    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+    @apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
   }
 
   .select-std {
-    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+    @apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
   }
 
   .select-sm {
-    @apply h-8 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+    @apply h-8 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
   }
 
-  /* Tables */
   .table-container {
-    @apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 overflow-hidden;
+    @apply overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm;
   }
 
   .table-header {
-    @apply bg-zinc-50/50 border-b border-zinc-100;
+    @apply border-b border-zinc-100 bg-zinc-50/70;
   }
 
   .table-th {
-    @apply px-6 py-4 text-xs font-bold text-zinc-500 text-left;
+    @apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500;
   }
 
   .table-row {
@@ -88,23 +168,30 @@
   }
 
   .table-td-strong {
-    @apply px-6 py-4 text-sm font-bold text-zinc-900;
+    @apply px-6 py-4 text-sm font-semibold text-zinc-900;
+  }
+
+  .page-shell-grid {
+    @apply grid gap-6 xl:grid-cols-[minmax(0,1fr),360px];
+  }
+
+  .detail-shell-grid {
+    @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
   }
 
-  /* Badges */
   .badge-success {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
+    @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
   }
 
   .badge-warning {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10;
+    @apply inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/10;
   }
 
   .badge-error {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10;
+    @apply inline-flex items-center rounded-full bg-red-50 px-2.5 py-0.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/10;
   }
 
   .badge-neutral {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-zinc-100 text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
+    @apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/layouts/AppShellLayout.tsx b/client/src/layouts/AppShellLayout.tsx
index dc9ae010..2960b9c7 100644
--- a/client/src/layouts/AppShellLayout.tsx
+++ b/client/src/layouts/AppShellLayout.tsx
@@ -1,32 +1,11 @@
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { NAV_ITEMS } from "../components/navigation/NavLinks";
 import { ErrorBoundary } from "../components/common/ErrorBoundary";
 import { Sidebar } from "../components/navigation/Sidebar";
 import { Topbar } from "../components/navigation/Topbar";
+import { resolvePageMeta } from "../features/navigation/schema";
 import { writeRecentVisit } from "../lib/recentVisits";
 
-const EXTRA_TITLE_ENTRIES = [
-  { path: "/notifications", title: "通知中心" },
-  { path: "/reimbursements/", title: "报销详情" },
-  { path: "/workflow/tasks/", title: "审批详情" },
-  { path: "/people/", title: "员工档案" },
-];
-
-function resolveVisitTitle(pathname: string) {
-  const candidates = [
-    ...NAV_ITEMS.map((item) => ({ path: item.to, title: item.label })),
-    ...EXTRA_TITLE_ENTRIES,
-  ].sort((left, right) => right.path.length - left.path.length);
-
-  const matched = candidates.find((item) => pathname === item.path || pathname.startsWith(item.path));
-  if (matched) {
-    return matched.title;
-  }
-
-  return pathname === "/" ? "Portal" : pathname;
-}
-
 export function AppShellLayout() {
   const location = useLocation();
 
@@ -35,17 +14,17 @@ export function AppShellLayout() {
     if (!pathname || pathname === "/login" || pathname.startsWith("/mobile/")) {
       return;
     }
-    writeRecentVisit(pathname, resolveVisitTitle(pathname));
+    writeRecentVisit(pathname, resolvePageMeta(pathname).title);
   }, [location.pathname]);
 
   return (
-    <div className="flex min-h-screen bg-zinc-50">
+    <div className="flex min-h-screen bg-[var(--color-bg-canvas)]">
       <Sidebar />
 
-      <main className="flex-1 flex flex-col min-w-0 lg:ml-64">
+      <main className="flex min-w-0 flex-1 flex-col lg:ml-72">
         <Topbar />
 
-        <div className="flex-1 p-4 sm:p-8">
+        <div className="flex-1 px-4 py-6 sm:px-8 sm:py-8">
           <div className="layout-container max-w-none">
             <ErrorBoundary>
               <Outlet />
diff --git a/client/src/layouts/AuthLayout.tsx b/client/src/layouts/AuthLayout.tsx
index e8dabd5f..99916169 100644
--- a/client/src/layouts/AuthLayout.tsx
+++ b/client/src/layouts/AuthLayout.tsx
@@ -1,10 +1,37 @@
 import { Outlet } from "react-router-dom";
+import { AppBrand } from "../components/shell/AppBrand";
 
 export function AuthLayout() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-primary-50 via-background-light to-zinc-100 p-6">
-      <div className="w-full max-w-md">
-        <Outlet />
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(17,24,39,0.08),_transparent_34%),linear-gradient(180deg,_#f8fafc_0%,_#f3f4f6_100%)] px-6 py-10 lg:px-10 lg:py-14">
+      <div className="mx-auto grid min-h-[calc(100vh-5rem)] max-w-6xl items-center gap-8 lg:grid-cols-[minmax(0,1.05fr),minmax(420px,0.95fr)]">
+        <section className="hidden rounded-[2rem] border border-zinc-200 bg-white/75 p-10 shadow-sm backdrop-blur lg:block">
+          <AppBrand />
+          <div className="mt-8 space-y-6">
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">统一入口</div>
+              <h1 className="mt-2 text-4xl font-semibold tracking-tight text-zinc-900">让员工先找到今天要做什么</h1>
+              <p className="mt-3 max-w-xl text-base leading-7 text-zinc-600">
+                企业微信负责进入和提醒，真正的审批、项目、周报与留痕都在 OA 内完成。
+              </p>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="surface-muted px-5 py-5">
+                <div className="text-sm font-semibold text-zinc-900">主路径稳定</div>
+                <div className="mt-2 text-sm leading-6 text-zinc-600">Portal、团队、请假、报销、资产、周报、待办、公告、项目保持稳定结构。</div>
+              </div>
+              <div className="surface-muted px-5 py-5">
+                <div className="text-sm font-semibold text-zinc-900">入口可回退</div>
+                <div className="mt-2 text-sm leading-6 text-zinc-600">企业微信免登失败时仍可使用账号密码，不让员工猜测下一步。</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="mx-auto w-full max-w-xl">
+          <Outlet />
+        </section>
       </div>
     </div>
   );
diff --git a/client/src/pages/LeaveRequestPage.tsx b/client/src/pages/LeaveRequestPage.tsx
index 2b00f9ff..1664b193 100644
--- a/client/src/pages/LeaveRequestPage.tsx
+++ b/client/src/pages/LeaveRequestPage.tsx
@@ -21,6 +21,9 @@ import { PageHeader } from "../components/common/PageHeader";
 import { Pagination } from "../components/common/Pagination";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { TableSkeleton } from "../components/common/TableSkeleton";
+import { ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -129,6 +132,18 @@ export function LeaveRequestPage() {
     return (leaveTypesQuery.data?.items ?? []).find((item) => item.id === leaveTypeId) ?? null;
   }, [leaveTypeId, leaveTypesQuery.data?.items]);
 
+  const balanceSummary = useMemo(() => {
+    return (balancesQuery.data?.items ?? []).reduce(
+      (acc, item) => {
+        acc.available += item.available;
+        acc.reserved += item.reserved;
+        acc.used += item.used;
+        return acc;
+      },
+      { available: 0, reserved: 0, used: 0 },
+    );
+  }, [balancesQuery.data?.items]);
+
   const createMutation = useMutation({
     mutationFn: async () => {
       if (!leaveTypeId) {
@@ -218,303 +233,317 @@ export function LeaveRequestPage() {
   const totalPages = Math.max(1, Math.ceil((requestsQuery.data?.total ?? 0) / PAGE_SIZE));
 
   return (
-    <div className="space-y-6">
+    <ListWorkspace>
       <PageHeader
         title="请假申请"
         subtitle="支持假种选择、半天粒度请假、额度冻结与撤回释放。"
       />
 
-      <div className="space-y-3">
-        <h3 className="text-base font-semibold text-zinc-900">额度概览</h3>
-        {balancesQuery.isLoading ? (
-          <div className="grid gap-4 md:grid-cols-3">
-            <CardSkeleton lines={4} />
-            <CardSkeleton lines={4} />
-            <CardSkeleton lines={4} />
-          </div>
-        ) : null}
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard title="可用额度" value={balanceSummary.available.toFixed(1)} note="按当前启用假种汇总" />
+        <MetricCard title="已冻结" value={balanceSummary.reserved.toFixed(1)} note="审批中申请会占用额度" tone={balanceSummary.reserved > 0 ? "warning" : "neutral"} />
+        <MetricCard title="已使用" value={balanceSummary.used.toFixed(1)} note="通过后计入已使用" />
+        <MetricCard title="本次预估" value={requestedDaysPreview ?? "-"} note="创建草稿前可先预览天数" tone={requestedDaysPreview ? "warning" : "neutral"} />
+      </section>
 
-        {balancesQuery.isError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {resolveError(balancesQuery.error)}
-          </p>
-        ) : null}
+      <div className="page-shell-grid">
+        <SectionPanel title="新建请假草稿" description="先填写时间段与假种，再补充附件和说明。">
+          <div className="space-y-4">
+            {formError ? (
+              <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+                {formError}
+              </p>
+            ) : null}
 
-        {!balancesQuery.isLoading && !balancesQuery.isError ? (
-          <div className="grid gap-4 md:grid-cols-3">
-            {(balancesQuery.data?.items ?? []).length ? (
-              balancesQuery.data?.items.map((item) => (
-                <div className="card-std space-y-2 p-5" key={item.leaveType.id}>
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <p className="text-base font-semibold text-zinc-900">{item.leaveType.name}</p>
-                      <p className="text-xs text-zinc-500">{item.periodStart} ~ {item.periodEnd}</p>
-                    </div>
-                    <StatusBadge status={item.leaveType.enabled ? "active" : "archived"} label={item.leaveType.enabled ? "启用" : "停用"} />
-                  </div>
-                  <div className="grid grid-cols-2 gap-3 text-sm">
-                    <div>
-                      <p className="text-zinc-500">可用</p>
-                      <p className="text-xl font-semibold text-zinc-900">{item.available}</p>
-                    </div>
-                    <div>
-                      <p className="text-zinc-500">已冻结</p>
-                      <p className="text-xl font-semibold text-zinc-900">{item.reserved}</p>
-                    </div>
-                    <div>
-                      <p className="text-zinc-500">已使用</p>
-                      <p className="text-xl font-semibold text-zinc-900">{item.used}</p>
-                    </div>
-                    <div>
-                      <p className="text-zinc-500">授予额度</p>
-                      <p className="text-xl font-semibold text-zinc-900">{item.policy.annualQuotaDays}</p>
-                    </div>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="card-std p-6 text-sm text-zinc-500 md:col-span-3">
-                暂无可用假种，请联系 HR 初始化请假类型与策略。
+            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+              <div className="space-y-2">
+                <Label htmlFor="leave-type">假期类型</Label>
+                <select
+                  className="select-std"
+                  id="leave-type"
+                  value={leaveTypeId}
+                  onChange={(event) => setLeaveTypeId(event.target.value)}
+                >
+                  <option value="">请选择</option>
+                  {(leaveTypesQuery.data?.items ?? []).map((item) => (
+                    <option key={item.id} value={item.id}>
+                      {item.name}
+                    </option>
+                  ))}
+                </select>
               </div>
-            )}
+
+              <div className="space-y-2">
+                <Label htmlFor="leave-start-date">开始日期</Label>
+                <Input id="leave-start-date" type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="leave-start-session">开始时段</Label>
+                <select
+                  className="select-std"
+                  id="leave-start-session"
+                  value={startSession}
+                  onChange={(event) => setStartSession(event.target.value as LeaveSession)}
+                >
+                  <option value="am">上午</option>
+                  <option value="pm">下午</option>
+                </select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="leave-end-date">结束日期</Label>
+                <Input id="leave-end-date" type="date" value={endDate} onChange={(event) => setEndDate(event.target.value)} />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="leave-end-session">结束时段</Label>
+                <select
+                  className="select-std"
+                  id="leave-end-session"
+                  value={endSession}
+                  onChange={(event) => setEndSession(event.target.value as LeaveSession)}
+                >
+                  <option value="am">上午</option>
+                  <option value="pm">下午</option>
+                </select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="leave-attachment">附件</Label>
+                <Input
+                  id="leave-attachment"
+                  type="file"
+                  accept={selectedLeaveType?.attachmentMimeTypes?.join(",") || undefined}
+                  onChange={(event) => {
+                    const nextFile = event.target.files?.[0] ?? null;
+                    setAttachmentFile(nextFile);
+                  }}
+                />
+                <p className="text-xs text-zinc-500">
+                  {selectedLeaveType?.requiresAttachment
+                    ? `当前假种要求上传附件（允许：${selectedLeaveType.attachmentMimeTypes.join(", ") || "默认文档/图片"}）`
+                    : "附件为可选项"}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="leave-reason">请假说明</Label>
+              <Textarea
+                id="leave-reason"
+                rows={3}
+                value={reason}
+                onChange={(event) => setReason(event.target.value)}
+                placeholder="请输入请假原因、备注或补充说明"
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-700">
+              <div>
+                预计请假天数：<span className="font-semibold text-zinc-900">{requestedDaysPreview ?? "-"}</span>
+              </div>
+              <Button type="button" disabled={createMutation.isPending} onClick={() => createMutation.mutate()}>
+                {createMutation.isPending ? "创建中..." : "创建草稿"}
+              </Button>
+            </div>
           </div>
-        ) : null}
+        </SectionPanel>
+
+        <SectionPanel title="额度概览" description="假种可用额度、冻结与已使用情况按自然周期汇总。">
+          <div className="space-y-4">
+            {balancesQuery.isLoading ? (
+              <div className="grid gap-4">
+                <CardSkeleton lines={4} />
+                <CardSkeleton lines={4} />
+                <CardSkeleton lines={4} />
+              </div>
+            ) : null}
+
+            {balancesQuery.isError ? (
+              <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+                {resolveError(balancesQuery.error)}
+              </p>
+            ) : null}
+
+            {!balancesQuery.isLoading && !balancesQuery.isError ? (
+              <div className="grid gap-4">
+                {(balancesQuery.data?.items ?? []).length ? (
+                  balancesQuery.data?.items.map((item) => (
+                    <div className="card-std space-y-2 p-5" key={item.leaveType.id}>
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <p className="text-base font-semibold text-zinc-900">{item.leaveType.name}</p>
+                          <p className="text-xs text-zinc-500">{item.periodStart} ~ {item.periodEnd}</p>
+                        </div>
+                        <StatusBadge status={item.leaveType.enabled ? "active" : "archived"} label={item.leaveType.enabled ? "启用" : "停用"} />
+                      </div>
+                      <div className="grid grid-cols-2 gap-3 text-sm">
+                        <div>
+                          <p className="text-zinc-500">可用</p>
+                          <p className="text-xl font-semibold text-zinc-900">{item.available}</p>
+                        </div>
+                        <div>
+                          <p className="text-zinc-500">已冻结</p>
+                          <p className="text-xl font-semibold text-zinc-900">{item.reserved}</p>
+                        </div>
+                        <div>
+                          <p className="text-zinc-500">已使用</p>
+                          <p className="text-xl font-semibold text-zinc-900">{item.used}</p>
+                        </div>
+                        <div>
+                          <p className="text-zinc-500">授予额度</p>
+                          <p className="text-xl font-semibold text-zinc-900">{item.policy.annualQuotaDays}</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-xl border border-dashed border-zinc-200 bg-zinc-50 px-4 py-8 text-sm text-zinc-500">
+                    暂无可用假种，请联系 HR 初始化请假类型与策略。
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </div>
+        </SectionPanel>
       </div>
 
-      <div className="card-std space-y-4 p-6">
-        <h3 className="text-base font-semibold text-zinc-900">新建请假草稿</h3>
-
-        {formError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {formError}
-          </p>
-        ) : null}
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          <div className="space-y-2">
-            <Label htmlFor="leave-type">假期类型</Label>
-            <select
-              className="select-std"
-              id="leave-type"
-              value={leaveTypeId}
-              onChange={(event) => setLeaveTypeId(event.target.value)}
-            >
-              <option value="">请选择</option>
-              {(leaveTypesQuery.data?.items ?? []).map((item) => (
-                <option key={item.id} value={item.id}>
-                  {item.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="leave-start-date">开始日期</Label>
-            <Input id="leave-start-date" type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="leave-start-session">开始时段</Label>
-            <select
-              className="select-std"
-              id="leave-start-session"
-              value={startSession}
-              onChange={(event) => setStartSession(event.target.value as LeaveSession)}
-            >
-              <option value="am">上午</option>
-              <option value="pm">下午</option>
-            </select>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="leave-end-date">结束日期</Label>
-            <Input id="leave-end-date" type="date" value={endDate} onChange={(event) => setEndDate(event.target.value)} />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="leave-end-session">结束时段</Label>
-            <select
-              className="select-std"
-              id="leave-end-session"
-              value={endSession}
-              onChange={(event) => setEndSession(event.target.value as LeaveSession)}
-            >
-              <option value="am">上午</option>
-              <option value="pm">下午</option>
-            </select>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="leave-attachment">附件</Label>
-            <Input
-              id="leave-attachment"
-              type="file"
-              accept={selectedLeaveType?.attachmentMimeTypes?.join(",") || undefined}
-              onChange={(event) => {
-                const nextFile = event.target.files?.[0] ?? null;
-                setAttachmentFile(nextFile);
-              }}
-            />
-            <p className="text-xs text-zinc-500">
-              {selectedLeaveType?.requiresAttachment
-                ? `当前假种要求上传附件（允许：${selectedLeaveType.attachmentMimeTypes.join(", ") || "默认文档/图片"}）`
-                : "附件为可选项"}
-            </p>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="leave-reason">请假说明</Label>
-          <Textarea
-            id="leave-reason"
-            rows={3}
-            value={reason}
-            onChange={(event) => setReason(event.target.value)}
-            placeholder="请输入请假原因、备注或补充说明"
-          />
-        </div>
-
-        <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-700">
-          <div>
-            预计请假天数：<span className="font-semibold text-zinc-900">{requestedDaysPreview ?? "-"}</span>
-          </div>
-          <Button type="button" disabled={createMutation.isPending} onClick={() => createMutation.mutate()}>
-            {createMutation.isPending ? "创建中..." : "创建草稿"}
-          </Button>
-        </div>
-      </div>
-
-      <div className="card-std space-y-4 p-6">
-        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <h3 className="text-base font-semibold text-zinc-900">请假记录</h3>
-          <div className="flex flex-wrap gap-2">
-            {canViewAll ? (
+      <SectionPanel title="请假记录" description="支持按状态和范围收敛列表，草稿与驳回单可再次提交。">
+        <div className="space-y-4">
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div className="text-sm text-zinc-500">最近一次筛选会保留在当前页面状态中。</div>
+            <div className="flex flex-wrap gap-2">
+              {canViewAll ? (
+                <select
+                  className="select-std"
+                  value={scope}
+                  onChange={(event) => {
+                    setScope(event.target.value as "own" | "all");
+                    setPage(1);
+                  }}
+                >
+                  <option value="own">只看我的</option>
+                  <option value="all">查看全员</option>
+                </select>
+              ) : null}
               <select
                 className="select-std"
-                value={scope}
+                value={statusFilter}
                 onChange={(event) => {
-                  setScope(event.target.value as "own" | "all");
+                  setStatusFilter(event.target.value as LeaveRequestStatus | "");
                   setPage(1);
                 }}
               >
-                <option value="own">只看我的</option>
-                <option value="all">查看全员</option>
+                <option value="">全部状态</option>
+                <option value="draft">草稿</option>
+                <option value="reviewing">审批中</option>
+                <option value="approved">已通过</option>
+                <option value="rejected">已驳回</option>
+                <option value="cancelled">已取消</option>
               </select>
-            ) : null}
-            <select
-              className="select-std"
-              value={statusFilter}
-              onChange={(event) => {
-                setStatusFilter(event.target.value as LeaveRequestStatus | "");
-                setPage(1);
-              }}
-            >
-              <option value="">全部状态</option>
-              <option value="draft">草稿</option>
-              <option value="reviewing">审批中</option>
-              <option value="approved">已通过</option>
-              <option value="rejected">已驳回</option>
-              <option value="cancelled">已取消</option>
-            </select>
-            <Button type="button" variant="secondary" onClick={() => queryClient.invalidateQueries({ queryKey: ["leave", "requests"] })}>
-              刷新
-            </Button>
+              <Button type="button" variant="secondary" onClick={() => queryClient.invalidateQueries({ queryKey: ["leave", "requests"] })}>
+                刷新
+              </Button>
+            </div>
           </div>
-        </div>
 
-        {requestsQuery.isLoading ? <TableSkeleton columns={7} rows={5} /> : null}
+          {requestsQuery.isLoading ? <TableSkeleton columns={7} rows={5} /> : null}
 
-        {requestsQuery.isError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {resolveError(requestsQuery.error)}
-          </p>
-        ) : null}
+          {requestsQuery.isError ? (
+            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+              {resolveError(requestsQuery.error)}
+            </p>
+          ) : null}
 
-        {!requestsQuery.isLoading && !requestsQuery.isError ? (
-          <div className="rounded-lg border border-zinc-200">
-            <Table>
-              <TableHeader>
-                <tr>
-                  <TableHead>假种 / 申请人</TableHead>
-                  <TableHead>时间段</TableHead>
-                  <TableHead>天数</TableHead>
-                  <TableHead>状态</TableHead>
-                  <TableHead>附件</TableHead>
-                  <TableHead>更新时间</TableHead>
-                  <TableHead className="w-44">操作</TableHead>
-                </tr>
-              </TableHeader>
-              <TableBody>
-                {(requestsQuery.data?.items ?? []).length ? (
-                  requestsQuery.data?.items.map((item) => {
-                    const isOwner = item.ownerId === me?.id;
-                    const canSubmit = isOwner && ["draft", "rejected"].includes(item.status);
-                    const canWithdraw = isOwner && item.status === "reviewing";
+          {!requestsQuery.isLoading && !requestsQuery.isError ? (
+            <>
+              <PrimaryTable>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>假种 / 申请人</TableHead>
+                      <TableHead>时间段</TableHead>
+                      <TableHead>天数</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead>附件</TableHead>
+                      <TableHead>更新时间</TableHead>
+                      <TableHead className="w-44">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(requestsQuery.data?.items ?? []).length ? (
+                      requestsQuery.data?.items.map((item) => {
+                        const isOwner = item.ownerId === me?.id;
+                        const canSubmit = isOwner && ["draft", "rejected"].includes(item.status);
+                        const canWithdraw = isOwner && item.status === "reviewing";
 
-                    return (
-                      <TableRow key={item.id}>
-                        <TableCell>
-                          <div className="font-medium text-zinc-900">{item.leaveType?.name ?? "-"}</div>
-                          <div className="text-xs text-zinc-500">
-                            {item.owner?.name ?? "-"}
-                            {item.owner?.employeeNo ? ` (${item.owner.employeeNo})` : ""}
-                          </div>
-                        </TableCell>
-                        <TableCell>{formatRangeLabel(item)}</TableCell>
-                        <TableCell>{item.requestedDays}</TableCell>
-                        <TableCell><StatusBadge status={item.status} /></TableCell>
-                        <TableCell className="text-xs text-zinc-500">
-                          {item.attachment?.originalName ?? "-"}
-                        </TableCell>
-                        <TableCell>{item.updatedAt ? new Date(item.updatedAt).toLocaleString() : "-"}</TableCell>
-                        <TableCell>
-                          <div className="flex flex-wrap gap-2">
-                            <Button
-                              size="sm"
-                              type="button"
-                              disabled={!canSubmit || submitMutation.isPending}
-                              onClick={() => submitMutation.mutate(item.id)}
-                            >
-                              提交
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="secondary"
-                              type="button"
-                              disabled={!canWithdraw || withdrawMutation.isPending}
-                              onClick={() =>
-                                setWithdrawTarget({
-                                  id: item.id,
-                                  label: `${item.leaveType?.name ?? "请假"} · ${formatRangeLabel(item)}`,
-                                })
-                              }
-                            >
-                              撤回
-                            </Button>
-                          </div>
+                        return (
+                          <TableRow key={item.id}>
+                            <TableCell>
+                              <div className="font-medium text-zinc-900">{item.leaveType?.name ?? "-"}</div>
+                              <div className="text-xs text-zinc-500">
+                                {item.owner?.name ?? "-"}
+                                {item.owner?.employeeNo ? ` (${item.owner.employeeNo})` : ""}
+                              </div>
+                            </TableCell>
+                            <TableCell>{formatRangeLabel(item)}</TableCell>
+                            <TableCell>{item.requestedDays}</TableCell>
+                            <TableCell><StatusBadge status={item.status} /></TableCell>
+                            <TableCell className="text-xs text-zinc-500">
+                              {item.attachment?.originalName ?? "-"}
+                            </TableCell>
+                            <TableCell>{item.updatedAt ? new Date(item.updatedAt).toLocaleString() : "-"}</TableCell>
+                            <TableCell>
+                              <div className="flex flex-wrap gap-2">
+                                <Button
+                                  size="sm"
+                                  type="button"
+                                  disabled={!canSubmit || submitMutation.isPending}
+                                  onClick={() => submitMutation.mutate(item.id)}
+                                >
+                                  提交
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  variant="secondary"
+                                  type="button"
+                                  disabled={!canWithdraw || withdrawMutation.isPending}
+                                  onClick={() =>
+                                    setWithdrawTarget({
+                                      id: item.id,
+                                      label: `${item.leaveType?.name ?? "请假"} · ${formatRangeLabel(item)}`,
+                                    })
+                                  }
+                                >
+                                  撤回
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        );
+                      })
+                    ) : (
+                      <TableRow>
+                        <TableCell className="py-4 text-zinc-500" colSpan={7}>
+                          暂无请假记录
                         </TableCell>
                       </TableRow>
-                    );
-                  })
-                ) : (
-                  <TableRow>
-                    <TableCell className="py-4 text-zinc-500" colSpan={7}>
-                      暂无请假记录
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        ) : null}
+                    )}
+                  </TableBody>
+                </Table>
+              </PrimaryTable>
 
-        <Pagination
-          page={page}
-          totalPages={totalPages}
-          onPageChange={setPage}
-          testIdPrefix="leave-requests"
-        />
-      </div>
+              <Pagination
+                page={page}
+                totalPages={totalPages}
+                onPageChange={setPage}
+                testIdPrefix="leave-requests"
+              />
+            </>
+          ) : null}
+        </div>
+      </SectionPanel>
 
       <ConfirmDialog
         open={Boolean(withdrawTarget)}
@@ -531,6 +560,6 @@ export function LeaveRequestPage() {
           await withdrawMutation.mutateAsync(withdrawTarget.id);
         }}
       />
-    </div>
+    </ListWorkspace>
   );
 }
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
index fa09a196..cdb8cda4 100644
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -88,7 +88,7 @@ export function LoginPage() {
       } else if (err instanceof TypeError) {
         setError("无法连接后端服务，请确认 server 已启动（http://127.0.0.1:3000）。");
       } else {
-        setError("登录失败，请稍后重试");
+        setError("登录失败，请稍后重试。");
       }
     } finally {
       setSubmitting(false);
@@ -102,125 +102,135 @@ export function LoginPage() {
     window.location.assign(buildWecomLoginUrl(wecomEntry.loginUrl, redirectTo));
   }
 
+  function renderPasswordPanel(testId: string, primary: boolean) {
+    return (
+      <div className="space-y-4 rounded-[1.5rem] border border-zinc-200 bg-white p-6 shadow-sm" data-testid={testId}>
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">{primary ? "推荐入口" : "回退入口"}</div>
+          <h2 className="mt-2 text-xl font-semibold tracking-tight text-zinc-900">使用账号密码登录</h2>
+          <p className="mt-2 text-sm leading-6 text-zinc-600">
+            {primary
+              ? "适合桌面浏览器直接登录；若企业微信入口暂未开放，也可正常使用。"
+              : "企业微信免登失败、未绑定或超时时，可改用账号密码继续进入。"}
+          </p>
+        </div>
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="login-identifier">账号</Label>
+            <Input
+              autoComplete="username"
+              data-testid="login-identifier"
+              id="login-identifier"
+              onChange={(event) => setIdentifier(event.target.value)}
+              placeholder="邮箱或手机号"
+              value={identifier}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="login-password">密码</Label>
+            <Input
+              autoComplete="current-password"
+              data-testid="login-password"
+              id="login-password"
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder="请输入密码"
+              type="password"
+              value={password}
+            />
+          </div>
+
+          {error ? <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">{error}</div> : null}
+
+          <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit" variant={primary ? "default" : "secondary"}>
+            {submitting ? "登录中..." : "登录并进入工作台"}
+          </Button>
+        </form>
+      </div>
+    );
+  }
+
   return (
-    <div className="card-std overflow-hidden border-primary-100 p-0">
-      <div className="border-b border-zinc-200 bg-gradient-to-br from-primary-50 via-white to-zinc-50 p-6">
-        <p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
-        <h1 className="mt-2 text-2xl font-bold text-zinc-900">登录工作台</h1>
-        <p className="mt-2 text-sm text-secondary">审批、项目、周报和团队状态统一在 OA 完成。</p>
-        <div className="mt-4 rounded-xl border border-zinc-200 bg-white/90 px-4 py-3 text-sm text-zinc-600">
+    <div className="card-std overflow-hidden border-zinc-200 p-0 shadow-md">
+      <div className="border-b border-zinc-200 bg-gradient-to-br from-zinc-50 via-white to-zinc-100 px-6 py-6 sm:px-8 sm:py-7">
+        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">统一入口</div>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight text-zinc-900">登录海音达工作台</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-600">
+          企业微信负责进入与提醒，真正的审批、项目、周报和团队留痕都在海音达工作台内完成。
+        </p>
+        <div className="mt-4 rounded-2xl border border-zinc-200 bg-white/90 px-4 py-3 text-sm text-zinc-600">
           {isWecomContext
-            ? "当前在企业微信中打开，推荐直接使用企业微信进入工作台。"
-            : "桌面浏览器可直接使用账号密码登录；企业微信仅作为入口与提醒。"}
+            ? "当前在企业微信中打开，推荐直接使用企业微信进入工作台；失败时可随时回退到账号密码登录。"
+            : "当前为浏览器场景，推荐直接使用账号密码登录；企业微信入口会作为次级入口提供。"}
         </div>
       </div>
 
-      <div className="space-y-5 p-6">
+      <div className="space-y-5 px-6 py-6 sm:px-8 sm:py-7">
         {wecomNotice ? (
-          <div className={`rounded-xl border px-4 py-3 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
+          <div className={`rounded-2xl border px-4 py-3 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
             <div className="font-medium">{wecomNotice.title}</div>
-            <div className="mt-1">{wecomNotice.description}</div>
+            <div className="mt-1 leading-6">{wecomNotice.description}</div>
           </div>
         ) : null}
 
-        {primaryMode === "wecom" && wecomEntry?.loginUrl ? (
-          <div className="space-y-3 rounded-2xl border border-primary-100 bg-primary-50/70 p-5" data-testid="login-wecom-primary-panel">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-primary">推荐入口</p>
-              <h2 className="mt-1 text-lg font-semibold text-zinc-900">使用企业微信进入工作台</h2>
-              <p className="mt-1 text-sm text-zinc-600">在企业微信工作台打开时，优先使用免登入口；失败时仍可回退到账号密码登录。</p>
-            </div>
-            <Button className="w-full" data-testid="wecom-entry-primary" type="button" onClick={handleWecomLogin}>
-              使用企业微信进入工作台
-            </Button>
-            <p className="text-xs text-zinc-500">若当前企业微信账号尚未绑定，请先使用账号密码登录，再到个人设置完成绑定。</p>
-          </div>
-        ) : null}
-
-        <div className="space-y-4 rounded-2xl border border-zinc-200 p-5" data-testid={primaryMode === "password" ? "login-password-primary-panel" : "login-password-secondary-panel"}>
-          <div>
-            <h2 className="text-lg font-semibold text-zinc-900">账号密码登录</h2>
-            <p className="mt-1 text-sm text-zinc-500">
-              {primaryMode === "password"
-                ? "使用公司邮箱或手机号登录，复杂填写与审批仍建议在 Web OA 内完成。"
-                : "企业微信不可用时，可改用账号密码登录。"}
-            </p>
-            <p className="mt-1 text-xs text-zinc-500">忘记密码：请联系管理员重置。</p>
-          </div>
-
-          <form className="space-y-4" onSubmit={handleSubmit}>
-            <div className="space-y-1">
-              <Label htmlFor="identifier">账号</Label>
-              <Input
-                autoComplete="username"
-                data-testid="login-identifier"
-                id="identifier"
-                onChange={(event) => setIdentifier(event.target.value)}
-                placeholder="邮箱或手机号"
-                value={identifier}
-              />
-            </div>
-
-            <div className="space-y-1">
-              <Label htmlFor="password">密码</Label>
-              <Input
-                autoComplete="current-password"
-                data-testid="login-password"
-                id="password"
-                onChange={(event) => setPassword(event.target.value)}
-                placeholder="请输入密码"
-                type="password"
-                value={password}
-              />
-            </div>
-
-            {error ? (
-              <p
-                className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
-                data-testid="login-error"
-              >
-                {error}
-              </p>
-            ) : null}
-
-            <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit" variant={primaryMode === "password" ? "default" : "secondary"}>
-              {submitting ? "登录中..." : "登录"}
-            </Button>
-          </form>
-        </div>
-
-        {((primaryMode !== "wecom" && wecomEntry?.loginUrl) || oidcProvider) ? (
-          <div className="space-y-3 rounded-2xl border border-zinc-200 bg-zinc-50 p-4">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">其他入口</p>
-              <p className="mt-1 text-sm text-zinc-600">企业微信负责打开 OA 和接收提醒，实际业务仍在 OA 内完成。</p>
-            </div>
-            {primaryMode !== "wecom" && wecomEntry?.loginUrl ? (
-              <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
+        <div className="grid gap-4">
+          {primaryMode === "wecom" && wecomEntry?.loginUrl ? (
+            <div className="rounded-[1.5rem] border border-primary-100 bg-primary-50/70 p-6" data-testid="login-wecom-primary-panel">
+              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">推荐入口</div>
+              <h2 className="mt-2 text-xl font-semibold tracking-tight text-zinc-900">使用企业微信进入工作台</h2>
+              <p className="mt-2 text-sm leading-6 text-zinc-600">当前是企业微信场景，优先使用免登入口；若未绑定或回调失效，仍可切换为账号密码登录。</p>
+              <Button className="mt-5 w-full" data-testid="wecom-entry-primary" type="button" onClick={handleWecomLogin}>
                 使用企业微信进入工作台
               </Button>
-            ) : null}
-            {oidcProvider ? (
-              <Button
-                className="w-full"
-                type="button"
-                variant="secondary"
-                onClick={() => {
-                  window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
-                }}
-              >
-                使用{oidcProvider.label}
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
+            </div>
+          ) : null}
 
-        {isWecomContext && !wecomEntry?.loginUrl && !wecomConfigQuery.isLoading ? (
-          <div className={`rounded-xl border px-4 py-3 text-sm ${noticeClasses(wecomStatus.tone)}`}>
-            <div className="font-medium">企业微信入口当前不可用</div>
-            <div className="mt-1">{wecomStatus.description}</div>
-          </div>
-        ) : null}
+          {renderPasswordPanel(
+            primaryMode === "password" ? "login-password-primary-panel" : "login-password-secondary-panel",
+            primaryMode === "password",
+          )}
+
+          {((primaryMode !== "wecom" && wecomEntry?.loginUrl) || oidcProvider) ? (
+            <div className="rounded-[1.5rem] border border-zinc-200 bg-zinc-50/70 p-6">
+              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">补充入口</div>
+              <h2 className="mt-2 text-lg font-semibold text-zinc-900">其他进入方式</h2>
+              <p className="mt-2 text-sm leading-6 text-zinc-600">入口失败时请优先选择可理解、可回退的方式继续进入。</p>
+              <div className="mt-4 grid gap-3">
+                {primaryMode !== "wecom" && wecomEntry?.loginUrl ? (
+                  <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
+                    使用企业微信进入工作台
+                  </Button>
+                ) : null}
+
+                {oidcProvider ? (
+                  <Button
+                    className="w-full"
+                    type="button"
+                    variant="secondary"
+                    onClick={() => {
+                      window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
+                    }}
+                  >
+                    使用{oidcProvider.label}
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="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">企业微信入口状态：{wecomStatus.label}</div>
+          <div className="mt-1 leading-6">{wecomStatus.description}</div>
+          {wecomStatus.reasonLabels.length ? (
+            <ul className="mt-2 list-disc space-y-1 pl-5 text-xs text-zinc-500">
+              {wecomStatus.reasonLabels.map((label) => (
+                <li key={label}>{label}</li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
       </div>
     </div>
   );
diff --git a/client/src/pages/PortalHomePage.tsx b/client/src/pages/PortalHomePage.tsx
index dedec2b1..a0c9ca3a 100644
--- a/client/src/pages/PortalHomePage.tsx
+++ b/client/src/pages/PortalHomePage.tsx
@@ -1,13 +1,18 @@
 import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { fetchPortalHome, type PortalHomePayload } from "../api/portal";
-import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
-import { PageHeader } from "../components/common/PageHeader";
-import { readRecentVisits } from "../lib/recentVisits";
+import { isApiError } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
+import { EmptyStateCard } from "../components/common/EmptyStateCard";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { PageScaffold } from "../components/patterns/PageScaffold";
+import { SectionPanel } from "../components/patterns/SectionPanel";
+import { WorkbenchHero } from "../components/patterns/WorkbenchHero";
 import { Button } from "../components/ui/button";
+import { employeePortalSchema, managerPortalSchema } from "../features/portal/schema";
+import { readRecentVisits } from "../lib/recentVisits";
 
 type SummaryItem = {
   key: string;
@@ -22,14 +27,10 @@ function isSummaryItem(item: SummaryItem | null): item is SummaryItem {
   return Boolean(item);
 }
 
-function cardClasses(severity?: "normal" | "warning" | "high") {
-  if (severity === "high") {
-    return "card-std border-red-200 bg-red-50 p-5";
-  }
-  if (severity === "warning") {
-    return "card-std border-amber-200 bg-amber-50 p-5";
-  }
-  return "card-std p-5";
+function severityTone(severity?: "normal" | "warning" | "high") {
+  if (severity === "high") return "danger" as const;
+  if (severity === "warning") return "warning" as const;
+  return "neutral" as const;
 }
 
 function pickCards(cards: PortalHomePayload["cards"], keys: string[]) {
@@ -42,101 +43,59 @@ function compactCards(cards: PortalHomePayload["cards"], excludedKeys: string[])
 }
 
 function formatWeeklyStatus(payload: PortalHomePayload["weeklyReport"]) {
-  if (!payload) {
-    return "未启用";
-  }
+  if (!payload) return "未启用";
   return payload.status === "submitted" ? "已提交" : "待填写";
 }
 
-function renderAnnouncementLink(item: PortalHomePayload["announcements"][number]) {
-  if (!item.href) {
-    return null;
-  }
-  return (
-    <a
-      href={item.href}
-      className="mt-2 inline-flex text-sm font-medium text-primary hover:underline"
-      rel="noreferrer"
-      target="_blank"
-    >
-      查看详情
-    </a>
-  );
-}
-
 function SummaryPanel({ title, items }: { title: string; items: SummaryItem[] }) {
   if (!items.length) {
-    return null;
+    return <EmptyStateCard title={title} description="暂无需要优先处理的摘要信息。" />;
   }
 
   return (
-    <div className="card-std space-y-3 p-6">
-      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
-      <div className="space-y-2 text-sm">
+    <SectionPanel title={title} description="优先看结论与下一步，再进入对应模块处理。">
+      <div className="space-y-3">
         {items.map((item) => (
           <Link
             key={item.key}
             to={item.href}
             className={item.tone === "warning"
-              ? "block rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 hover:bg-amber-100"
-              : "block rounded-xl border border-zinc-200 px-4 py-3 hover:bg-zinc-50"}
+              ? "block rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4 hover:bg-amber-100"
+              : "block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50"}
           >
             <div className="flex items-center justify-between gap-3">
-              <span className="font-medium text-zinc-900">{item.label}</span>
-              <span className="text-sm font-semibold text-zinc-900">{item.value}</span>
+              <div className="font-medium text-zinc-900">{item.label}</div>
+              <div className="text-sm font-semibold text-zinc-900">{item.value}</div>
             </div>
-            {item.note ? <div className="mt-1 text-xs text-zinc-500">{item.note}</div> : null}
+            {item.note ? <div className="mt-2 text-sm leading-6 text-zinc-500">{item.note}</div> : null}
           </Link>
         ))}
       </div>
-    </div>
+    </SectionPanel>
   );
 }
 
-function SecondaryCardsPanel({ title, cards }: { title: string; cards: PortalHomePayload["cards"] }) {
-  if (!cards.length) {
-    return null;
-  }
-
+function AnnouncementsPanel({ announcements }: { announcements: PortalHomePayload["announcements"] }) {
   return (
-    <div className="card-std space-y-3 p-6">
-      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
-      <div className="grid gap-3 sm:grid-cols-2">
-        {cards.map((card) => (
-          <Link
-            key={card.key}
-            to={card.href}
-            className={card.severity === "high"
-              ? "rounded-xl border border-red-200 bg-red-50 px-4 py-3 hover:bg-red-100"
-              : card.severity === "warning"
-                ? "rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 hover:bg-amber-100"
-                : "rounded-xl border border-zinc-200 px-4 py-3 hover:bg-zinc-50"}
-          >
-            <div className="text-xs uppercase tracking-wide text-zinc-500">{card.title}</div>
-            <div className="mt-2 text-lg font-semibold text-zinc-900">{card.value}</div>
-          </Link>
-        ))}
+    <SectionPanel
+      title="公告"
+      description="公告保留在第二阅读层，不与今日任务卡竞争。"
+      actions={<Link to="/announcements" className="text-sm font-medium text-primary hover:underline">查看全部</Link>}
+    >
+      <div className="space-y-3">
+        {announcements.length ? announcements.slice(0, 4).map((item) => (
+          <div key={item.id} className="rounded-2xl border border-zinc-200 bg-white px-4 py-4">
+            <div className="font-medium text-zinc-900">{item.title}</div>
+            <div className="mt-2 text-sm leading-6 text-zinc-600">{item.summary}</div>
+            {item.href ? (
+              <a className="mt-3 inline-flex text-sm font-medium text-primary hover:underline" href={item.href} rel="noreferrer" target="_blank">
+                查看详情
+              </a>
+            ) : null}
+          </div>
+        )) : <EmptyStateCard title="暂无公告" description="当前没有需要广播的公告。" />}
       </div>
-    </div>
-  );
-}
-
-function QuickLinksPanel({ items }: { items: PortalHomePayload["quickLinks"] }) {
-  if (!items.length) {
-    return null;
-  }
-
-  return (
-    <div className="card-std space-y-3 p-6">
-      <h3 className="text-base font-semibold text-zinc-900">常用入口</h3>
-      <div className="grid gap-2">
-        {items.map((item) => (
-          <Link key={item.key} to={item.href} className="rounded-xl border border-zinc-200 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">
-            {item.title}
-          </Link>
-        ))}
-      </div>
-    </div>
+    </SectionPanel>
   );
 }
 
@@ -144,77 +103,91 @@ function RecentVisitsPanel() {
   const recentVisits = readRecentVisits();
 
   return (
-    <div className="card-std space-y-3 p-6">
-      <h3 className="text-base font-semibold text-zinc-900">最近访问</h3>
-      <div className="space-y-2 text-sm">
-        {recentVisits.length ? recentVisits.map((item) => (
-          <Link key={item.path} to={item.path} className="block rounded-xl border border-zinc-200 px-3 py-2 hover:bg-zinc-50">
-            <div className="font-medium text-zinc-900">{item.title}</div>
-            <div className="text-xs text-zinc-500">{item.path}</div>
-          </Link>
-        )) : <div className="text-zinc-500">暂无最近访问</div>}
-      </div>
-    </div>
-  );
-}
-
-function AnnouncementsPanel({ announcements }: { announcements: PortalHomePayload["announcements"] }) {
-  return (
-    <div className="card-std space-y-3 p-6">
-      <div className="flex items-center justify-between gap-3">
-        <h3 className="text-base font-semibold text-zinc-900">公告</h3>
-        <Link to="/announcements" className="text-sm text-primary hover:underline">查看全部</Link>
-      </div>
+    <SectionPanel title="继续工作" description="保留最近访问路径，帮助快速回到上一次处理中断的位置。">
       <div className="space-y-3">
-        {announcements.length ? announcements.slice(0, 4).map((item) => (
-          <div key={item.id} className="rounded-xl border border-zinc-200 p-3">
+        {recentVisits.length ? recentVisits.map((item) => (
+          <Link key={item.path} to={item.path} className="block rounded-2xl border border-zinc-200 bg-white px-4 py-4 hover:bg-zinc-50">
             <div className="font-medium text-zinc-900">{item.title}</div>
-            <div className="mt-1 text-sm text-zinc-600">{item.summary}</div>
-            {renderAnnouncementLink(item)}
-          </div>
-        )) : <div className="rounded-xl border border-dashed border-zinc-200 px-4 py-6 text-sm text-zinc-500">暂无公告，后续可由管理员在公告模块统一发布通知。</div>}
+            <div className="mt-1 text-xs text-zinc-500">{item.path}</div>
+          </Link>
+        )) : <EmptyStateCard title="暂无最近访问" description="开始使用后，最近处理过的页面会显示在这里。" />}
       </div>
-    </div>
+    </SectionPanel>
   );
 }
 
-function AdoptionSummaryPanel({ adoptionSummary }: { adoptionSummary: PortalHomePayload["adoptionSummary"] }) {
+function QuickLinksPanel({ items }: { items: PortalHomePayload["quickLinks"] }) {
+  return (
+    <SectionPanel title="常用入口" description="只保留高频入口，避免把所有模块堆成超市。">
+      <div className="grid gap-3 sm:grid-cols-2">
+        {items.length ? items.map((item) => (
+          <Link key={item.key} to={item.href} className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm font-medium text-zinc-700 hover:bg-zinc-50">
+            {item.title}
+          </Link>
+        )) : <EmptyStateCard title="暂无常用入口" description="工作区尚未配置推荐入口。" />}
+      </div>
+    </SectionPanel>
+  );
+}
+
+function SecondaryCardsPanel({ title, description, cards }: { title: string; description: string; cards: PortalHomePayload["cards"] }) {
+  if (!cards.length) {
+    return <EmptyStateCard title={title} description="暂无需要额外关注的统计项。" />;
+  }
+
+  return (
+    <SectionPanel title={title} description={description}>
+      <div className="grid gap-3 sm:grid-cols-2">
+        {cards.map((card) => (
+          <MetricCard
+            key={card.key}
+            title={card.title}
+            value={card.value}
+            href={card.href}
+            note="进入详情页处理"
+            tone={severityTone(card.severity)}
+          />
+        ))}
+      </div>
+    </SectionPanel>
+  );
+}
+
+function AdoptionSummaryPanel({ adoptionSummary }: { adoptionSummary: NonNullable<PortalHomePayload["adoptionSummary"]> | null }) {
   if (!adoptionSummary) {
     return null;
   }
 
   return (
     <details className="card-std p-6" open>
-      <summary className="cursor-pointer list-none">
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <h3 className="text-base font-semibold text-zinc-900">试点观测摘要</h3>
-            <p className="mt-1 text-sm text-zinc-500">仅管理员默认展开，用于观察登录、周报和状态覆盖率。</p>
-          </div>
-          <span className="text-xs uppercase tracking-wide text-zinc-400">展开 / 收起</span>
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-left">
+        <div>
+          <div className="text-base font-semibold text-zinc-900">试点观测摘要</div>
+          <div className="mt-1 text-sm text-zinc-500">只给管理员默认展开，用于观察习惯是否已形成。</div>
         </div>
+        <span className="text-xs uppercase tracking-[0.18em] text-zinc-400">展开 / 收起</span>
       </summary>
-      <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-xl border border-zinc-200 px-4 py-3 text-sm">
+      <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
           <div className="text-zinc-500">近 7 天登录覆盖率</div>
-          <div className="mt-1 text-xl font-semibold text-zinc-900">{adoptionSummary.login7dRate}%</div>
+          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.login7dRate}%</div>
         </div>
-        <div className="rounded-xl border border-zinc-200 px-4 py-3 text-sm">
+        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
           <div className="text-zinc-500">周报提交率</div>
-          <div className="mt-1 text-xl font-semibold text-zinc-900">{adoptionSummary.weeklySubmissionRate}%</div>
+          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.weeklySubmissionRate}%</div>
         </div>
-        <div className="rounded-xl border border-zinc-200 px-4 py-3 text-sm">
+        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
           <div className="text-zinc-500">团队状态覆盖率</div>
-          <div className="mt-1 text-xl font-semibold text-zinc-900">{adoptionSummary.presenceCoverageRate}%</div>
+          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.presenceCoverageRate}%</div>
         </div>
-        <div className="rounded-xl border border-zinc-200 px-4 py-3 text-sm">
+        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-sm">
           <div className="text-zinc-500">当前公告数</div>
-          <div className="mt-1 text-xl font-semibold text-zinc-900">{adoptionSummary.announcementCount}</div>
+          <div className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900">{adoptionSummary.announcementCount}</div>
         </div>
       </div>
-      <div className="mt-4 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm">
+      <div className="mt-4 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-sm text-zinc-600">
         <div className="font-medium text-zinc-900">本周观测提示</div>
-        <ul className="mt-2 list-disc space-y-1 pl-5 text-zinc-600">
+        <ul className="mt-2 list-disc space-y-1 pl-5">
           {adoptionSummary.hints.map((hint) => (
             <li key={hint}>{hint}</li>
           ))}
@@ -238,23 +211,16 @@ export function PortalHomePage() {
     const message = isApiError(portalQuery.error)
       ? `${portalQuery.error.code}: ${mapApiErrorMessage(portalQuery.error.code, portalQuery.error.details, portalQuery.error.message)}`
       : "Portal 加载失败";
-    return (
-      <div className="space-y-6">
-        <PageHeader title="Portal" subtitle="小团队统一入口与高频待办概览。" />
-        <div className="card-std p-6 text-sm text-red-600">{message}</div>
-      </div>
-    );
+    return <div className="card-std p-6 text-sm text-red-600">{message}</div>;
   }
 
   const payload = portalQuery.data;
-  const primaryCardKeys = isManagerView
-    ? ["pending_approvals", "team_presence", "weekly_missing", "weekly_help"]
-    : ["my_todos", "today_presence", "my_weekly_report", "my_projects"];
-  const primaryCards = pickCards(payload.cards, primaryCardKeys);
+  const portalSchema = isManagerView ? managerPortalSchema : employeePortalSchema;
+  const primaryCards = pickCards(payload.cards, portalSchema.heroCards);
   const primaryCardKeySet = primaryCards.map((card) => card.key);
   const secondaryCards = compactCards(payload.cards, primaryCardKeySet);
 
-  const employeeSummaryCandidates: Array<SummaryItem | null> = [
+  const employeeSummaryItems = ([
     {
       key: "expense",
       href: "/reimbursements",
@@ -283,10 +249,9 @@ export function PortalHomePage() {
           tone: payload.todayPresence.status === "leave" ? "warning" as const : "normal" as const,
         }
       : null,
-  ];
-  const employeeSummaryItems = employeeSummaryCandidates.filter(isSummaryItem);
+  ] as Array<SummaryItem | null>).filter(isSummaryItem);
 
-  const managerSummaryCandidates: Array<SummaryItem | null> = [
+  const managerSummaryItems = ([
     {
       key: "team-summary",
       href: payload.teamPresence?.href ?? "/team",
@@ -325,87 +290,69 @@ export function PortalHomePage() {
           tone: payload.peopleLifecycle.offboardingCount > 0 || payload.peopleLifecycle.assetReturnPendingCount > 0 ? "warning" as const : "normal" as const,
         }
       : null,
-    payload.riskSummary
-      ? {
-          key: "risk-summary",
-          href: payload.riskSummary.href,
-          label: "待复核风险",
-          value: `${payload.riskSummary.openCount} 项`,
-          note: "仅展示脱敏摘要，详细处理仍在 OA 内完成。",
-          tone: payload.riskSummary.openCount > 0 ? "warning" as const : "normal" as const,
-        }
-      : null,
-  ];
-  const managerSummaryItems = managerSummaryCandidates.filter(isSummaryItem);
-
-  const headerSubtitle = isManagerView
-    ? `你好，${payload.greeting.name}。先看今天最重要的管理动作。`
-    : `你好，${payload.greeting.name}。先处理今天要做的几件事。`;
+  ] as Array<SummaryItem | null>).filter(isSummaryItem);
 
   return (
-    <div className="space-y-6">
-      <PageHeader title="Portal" subtitle={headerSubtitle} />
+    <PageScaffold>
+      <WorkbenchHero
+        eyebrow={isManagerView ? "管理工作台" : "个人工作台"}
+        title={`你好，${payload.greeting.name}`}
+        subtitle={isManagerView
+          ? "先处理审批、团队状态和周报缺口，再进入项目与组织协同。"
+          : "先处理今天必须完成的事，再继续查看项目、周报和公告。"}
+        actions={
+          !payload.workspace.persisted && canSetupWorkspace ? (
+            <Button asChild variant="secondary" type="button">
+              <Link to="/system/workspace">完成工作区设置</Link>
+            </Button>
+          ) : null
+        }
+      />
 
-      {!payload.workspace.persisted && canSetupWorkspace ? (
-        <div className="card-std flex items-center justify-between gap-3 border-amber-200 bg-amber-50 p-4">
-          <div>
-            <div className="font-medium text-zinc-900">工作区尚未初始化</div>
-            <div className="text-sm text-zinc-600">建议先完成小团队模式的导航与模块设置，再邀请全员使用。</div>
-          </div>
-          <Button asChild type="button">
-            <Link to="/system/workspace">去初始化</Link>
-          </Button>
-        </div>
-      ) : null}
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <div className="grid gap-4 xl:grid-cols-4">
         {primaryCards.map((card) => (
-          <Link
+          <MetricCard
             key={card.key}
-            to={card.href}
-            aria-label={`portal-card-${card.key}`}
-            className={cardClasses(card.severity)}
-          >
-            <div className="text-sm text-zinc-500">{card.title}</div>
-            <div className="mt-2 text-2xl font-bold text-zinc-900">{card.value}</div>
-          </Link>
+            ariaLabel={`portal-card-${card.key}`}
+            href={card.href}
+            note={card.key === "my_weekly_report"
+              ? formatWeeklyStatus(payload.weeklyReport)
+              : card.key === "today_presence"
+                ? payload.todayPresence?.note ?? "更新今日状态"
+                : card.key === "team_presence"
+                  ? payload.teamPresence ? `请假 ${payload.teamPresence.leave}，未更新 ${payload.teamPresence.unspecified}` : "团队状态板待启用"
+                  : undefined}
+            title={card.title}
+            tone={severityTone(card.severity)}
+            value={card.value}
+          />
         ))}
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-2">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr),minmax(0,0.9fr)]">
         <SummaryPanel title={isManagerView ? "今日管理重点" : "我的申请与资产"} items={isManagerView ? managerSummaryItems : employeeSummaryItems} />
         <AnnouncementsPanel announcements={payload.announcements} />
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-3">
-        <QuickLinksPanel items={payload.quickLinks} />
-        <RecentVisitsPanel />
-        <SecondaryCardsPanel title={isManagerView ? "其他提醒" : "更多事项"} cards={secondaryCards} />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
+        {isManagerView ? (
+          <SecondaryCardsPanel
+            title="项目跟进与组织协同"
+            description="把需要继续跟进的项目、人员与风险放到第二层。"
+            cards={secondaryCards}
+          />
+        ) : (
+          <RecentVisitsPanel />
+        )}
+
+        {isManagerView ? (
+          <AdoptionSummaryPanel adoptionSummary={payload.adoptionSummary} />
+        ) : (
+          <QuickLinksPanel items={payload.quickLinks} />
+        )}
       </div>
 
-      {payload.adoptionSummary ? <AdoptionSummaryPanel adoptionSummary={payload.adoptionSummary} /> : null}
-
-      {!isManagerView && payload.projectSummary ? (
-        <div className="card-std space-y-3 p-6">
-          <h3 className="text-base font-semibold text-zinc-900">项目与周报概览</h3>
-          <div className="grid gap-3 md:grid-cols-3">
-            <Link to={payload.projectSummary.href} className="rounded-xl border border-zinc-200 px-4 py-3 hover:bg-zinc-50">
-              <div className="text-xs uppercase tracking-wide text-zinc-500">我的项目</div>
-              <div className="mt-1 text-lg font-semibold text-zinc-900">{payload.projectSummary.myCount}</div>
-            </Link>
-            <Link to={payload.projectSummary.href} className="rounded-xl border border-zinc-200 px-4 py-3 hover:bg-zinc-50">
-              <div className="text-xs uppercase tracking-wide text-zinc-500">今日待跟进</div>
-              <div className="mt-1 text-lg font-semibold text-zinc-900">{payload.projectSummary.followUpDueTodayCount}</div>
-            </Link>
-            <Link to={payload.weeklyReport?.href ?? "/weekly-reports"} className="rounded-xl border border-zinc-200 px-4 py-3 hover:bg-zinc-50">
-              <div className="text-xs uppercase tracking-wide text-zinc-500">本周周报</div>
-              <div className="mt-1 text-lg font-semibold text-zinc-900">{formatWeeklyStatus(payload.weeklyReport)}</div>
-            </Link>
-          </div>
-        </div>
-      ) : null}
-    </div>
+      {isManagerView ? <QuickLinksPanel items={payload.quickLinks} /> : null}
+    </PageScaffold>
   );
 }
-
-export default PortalHomePage;
diff --git a/client/src/pages/ProfilePage.tsx b/client/src/pages/ProfilePage.tsx
index 22beec62..610e8449 100644
--- a/client/src/pages/ProfilePage.tsx
+++ b/client/src/pages/ProfilePage.tsx
@@ -1,8 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 import { fetchWecomConfig, startWecomBind, unbindWecom } from "../api/auth";
-import { PageHeader } from "../components/common/PageHeader";
 import { useAuth } from "../auth/AuthContext";
+import { PageHeader } from "../components/common/PageHeader";
+import { SectionPanel } from "../components/patterns/SectionPanel";
+import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import {
   resolveWecomBindNotice,
@@ -27,6 +29,12 @@ function maskExternalUserId(value: string) {
   return `${value.slice(0, 4)}****${value.slice(-4)}`;
 }
 
+function statusTone(status?: string) {
+  if (status === "active") return "badge-success";
+  if (status === "inactive") return "badge-warning";
+  return "badge-neutral";
+}
+
 export function ProfilePage() {
   const { me, permissions } = useAuth();
   const [searchParams] = useSearchParams();
@@ -35,12 +43,14 @@ export function ProfilePage() {
     queryFn: () => fetchWecomConfig(),
     staleTime: 60_000,
   });
+
   const bindMutation = useMutation({
     mutationFn: async () => startWecomBind("/settings/profile"),
     onSuccess: (payload) => {
       window.location.assign(payload.loginUrl);
     },
   });
+
   const unbindMutation = useMutation({
     mutationFn: () => unbindWecom(),
     onSuccess: () => {
@@ -53,115 +63,136 @@ export function ProfilePage() {
   const isBound = Boolean(me?.wecomBinding?.externalUserId);
 
   return (
-    <div>
-      <PageHeader title="个人设置" subtitle="维护个人信息、权限摘要和企业微信绑定状态。" />
+    <PageScaffold>
+      <PageHeader
+        title="个人设置"
+        eyebrow="账号与入口"
+        subtitle="维护个人资料、角色摘要与企业微信绑定状态。复杂业务仍在海音达工作台内完成，企业微信只负责进入与提醒。"
+        meta={<span className={statusTone(me?.status)}>{me?.status === "active" ? "账号正常" : "账号状态待确认"}</span>}
+      />
 
-      <section className="card-std">
-        <h3 className="card-title">个人信息</h3>
-        <dl className="grid gap-3 text-sm text-zinc-700 md:grid-cols-2">
-          <div>
-            <dt className="text-secondary">姓名</dt>
-            <dd className="font-medium text-zinc-900">{me?.name ?? "-"}</dd>
-          </div>
-          <div>
-            <dt className="text-secondary">员工号</dt>
-            <dd className="font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
-          </div>
-          <div>
-            <dt className="text-secondary">邮箱</dt>
-            <dd className="font-medium text-zinc-900">{me?.email ?? "-"}</dd>
-          </div>
-          <div>
-            <dt className="text-secondary">手机号</dt>
-            <dd className="font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
-          </div>
-          <div>
-            <dt className="text-secondary">部门 ID</dt>
-            <dd className="font-medium text-zinc-900">{me?.departmentId ?? "-"}</dd>
-          </div>
-          <div>
-            <dt className="text-secondary">直属上级 ID</dt>
-            <dd className="font-medium text-zinc-900">{me?.directManagerId ?? "-"}</dd>
-          </div>
-        </dl>
-      </section>
-
-      <section className="card-std mt-4 space-y-4">
-        <div>
-          <h3 className="card-title">企业微信绑定</h3>
-          <p className="text-sm text-zinc-500">绑定后可从企业微信工作台直接进入 OA；企业微信只做入口与提醒，不承接第二套业务录入。</p>
-        </div>
-
-        {bindNotice ? (
-          <div className={`rounded-xl border px-4 py-3 text-sm ${noticeClasses(bindNotice.tone)}`} data-testid="profile-wecom-notice">
-            <div className="font-medium">{bindNotice.title}</div>
-            <div className="mt-1">{bindNotice.description}</div>
-          </div>
-        ) : null}
-
-        <div className="grid gap-4 md:grid-cols-2">
-          <div className="rounded-2xl border border-zinc-200 p-4">
-            <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">接入状态</div>
-            <div className="mt-2 text-lg font-semibold text-zinc-900">{wecomStatus.label}</div>
-            <div className="mt-1 text-sm text-zinc-600">{wecomStatus.description}</div>
-            {wecomStatus.reasonLabels.length ? (
-              <ul className="mt-3 list-disc space-y-1 pl-5 text-xs text-zinc-500">
-                {wecomStatus.reasonLabels.map((label) => (
-                  <li key={label}>{label}</li>
-                ))}
-              </ul>
-            ) : null}
-          </div>
-
-          <div className="rounded-2xl border border-zinc-200 p-4">
-            <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">当前绑定状态</div>
-            <div className="mt-2 text-lg font-semibold text-zinc-900">{isBound ? "已绑定" : "未绑定"}</div>
-            <div className="mt-1 text-sm text-zinc-600">
-              {isBound
-                ? "已完成绑定，下次可从企业微信工作台直接进入 OA。"
-                : "未绑定时，企业微信登录会回退到账号密码登录。"}
-            </div>
-            {isBound ? (
-              <div className="mt-3 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500">
-                绑定标识：{maskExternalUserId(me?.wecomBinding?.externalUserId ?? "")}<br />
-                绑定时间：{me?.wecomBinding?.createdAt ? new Date(me.wecomBinding.createdAt).toLocaleString() : "-"}
+      <div className="page-shell-grid">
+        <div className="space-y-6">
+          <SectionPanel title="基本信息" description="员工可直接理解的个人资料与联系方式。">
+            <dl className="grid gap-4 text-sm text-zinc-700 md:grid-cols-2">
+              <div>
+                <dt className="text-zinc-500">姓名</dt>
+                <dd className="mt-1 font-medium text-zinc-900">{me?.name ?? "-"}</dd>
               </div>
-            ) : null}
-          </div>
+              <div>
+                <dt className="text-zinc-500">员工号</dt>
+                <dd className="mt-1 font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
+              </div>
+              <div>
+                <dt className="text-zinc-500">邮箱</dt>
+                <dd className="mt-1 font-medium text-zinc-900">{me?.email ?? "-"}</dd>
+              </div>
+              <div>
+                <dt className="text-zinc-500">手机号</dt>
+                <dd className="mt-1 font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
+              </div>
+            </dl>
+          </SectionPanel>
+
+          <SectionPanel title="企业微信绑定" description="绑定后可从企业微信工作台直接进入海音达工作台；消息只做提醒与回流，不承接第二套业务录入。">
+            <div className="space-y-4" data-testid="profile-wecom-card">
+              {bindNotice ? (
+                <div className={`rounded-2xl border px-4 py-3 text-sm ${noticeClasses(bindNotice.tone)}`} data-testid="profile-wecom-notice">
+                  <div className="font-medium">{bindNotice.title}</div>
+                  <div className="mt-1">{bindNotice.description}</div>
+                </div>
+              ) : null}
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="surface-muted px-4 py-4">
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">接入状态</div>
+                  <div className="mt-2 text-lg font-semibold text-zinc-900">{wecomStatus.label}</div>
+                  <div className="mt-2 text-sm leading-6 text-zinc-600">{wecomStatus.description}</div>
+                  {wecomStatus.reasonLabels.length ? (
+                    <ul className="mt-3 list-disc space-y-1 pl-5 text-xs text-zinc-500">
+                      {wecomStatus.reasonLabels.map((label) => (
+                        <li key={label}>{label}</li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </div>
+
+                <div className="surface-muted px-4 py-4">
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">当前绑定状态</div>
+                  <div className="mt-2 text-lg font-semibold text-zinc-900">{isBound ? "已绑定" : "未绑定"}</div>
+                  <div className="mt-2 text-sm leading-6 text-zinc-600">
+                    {isBound ? "下次可直接从企业微信工作台进入海音达工作台。" : "未绑定时，企业微信登录会自动回退到账号密码登录。"}
+                  </div>
+                  {isBound ? (
+                    <div className="mt-3 rounded-xl border border-zinc-200 bg-white px-3 py-3 text-xs text-zinc-500">
+                      <div>绑定标识：{maskExternalUserId(me?.wecomBinding?.externalUserId ?? "")}</div>
+                      <div className="mt-1">绑定时间：{me?.wecomBinding?.createdAt ? new Date(me.wecomBinding.createdAt).toLocaleString() : "-"}</div>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  disabled={!wecomConfigQuery.data?.bindEnabled || bindMutation.isPending}
+                  onClick={() => bindMutation.mutate()}
+                >
+                  {isBound ? "重新绑定企业微信" : "立即绑定企业微信"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  disabled={!isBound || unbindMutation.isPending}
+                  onClick={() => unbindMutation.mutate()}
+                >
+                  解绑
+                </Button>
+              </div>
+            </div>
+          </SectionPanel>
         </div>
 
-        <div className="flex flex-wrap gap-2">
-          <Button
-            type="button"
-            disabled={!wecomConfigQuery.data?.bindEnabled || bindMutation.isPending}
-            onClick={() => bindMutation.mutate()}
-          >
-            {isBound ? "重新绑定企业微信" : "立即绑定企业微信"}
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={!isBound || unbindMutation.isPending}
-            onClick={() => unbindMutation.mutate()}
-          >
-            解绑
-          </Button>
-        </div>
-      </section>
+        <div className="space-y-6">
+          <SectionPanel title="组织信息" description="对员工展示可理解的说明，不直接暴露内部标识字段。">
+            <div className="space-y-4 text-sm text-zinc-600">
+              <div className="surface-muted px-4 py-4">
+                <div className="font-medium text-zinc-900">组织归属</div>
+                <div className="mt-2 leading-6">部门与直属汇报关系由管理员统一维护，当前个人页只展示员工可理解的设置入口，避免把内部 ID 直接暴露给员工。</div>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="rounded-2xl border border-zinc-200 px-4 py-4">
+                  <div className="text-zinc-500">部门维护状态</div>
+                  <div className="mt-2 font-medium text-zinc-900">{me?.departmentId ? "已关联组织" : "待管理员维护"}</div>
+                </div>
+                <div className="rounded-2xl border border-zinc-200 px-4 py-4">
+                  <div className="text-zinc-500">直属汇报关系</div>
+                  <div className="mt-2 font-medium text-zinc-900">{me?.directManagerId ? "已维护" : "待管理员维护"}</div>
+                </div>
+              </div>
+            </div>
+          </SectionPanel>
 
-      <section className="card-std mt-4">
-        <h3 className="card-title">权限列表</h3>
-        <div className="flex flex-wrap gap-2">
-          {permissions.map((permission) => (
-            <span
-              className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary"
-              key={permission}
-            >
-              {permission}
-            </span>
-          ))}
+          <SectionPanel title="账号状态与角色" description="角色与权限保持透明，但不让设置页变成技术字段堆叠。">
+            <div className="space-y-4 text-sm text-zinc-600">
+              <div className="flex flex-wrap gap-2">
+                <span className={statusTone(me?.status)}>{me?.status === "active" ? "active" : me?.status ?? "unknown"}</span>
+                {(me?.roleCodes ?? []).map((role) => (
+                  <span className="badge-neutral" key={role}>{role}</span>
+                ))}
+              </div>
+              <div>
+                <div className="text-sm font-medium text-zinc-900">权限摘要</div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {permissions.map((permission) => (
+                    <span className="badge-neutral" key={permission}>{permission}</span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </SectionPanel>
         </div>
-      </section>
-    </div>
+      </div>
+    </PageScaffold>
   );
 }
diff --git a/client/src/pages/ProjectDetailPage.tsx b/client/src/pages/ProjectDetailPage.tsx
index 80616cdf..b8ada761 100644
--- a/client/src/pages/ProjectDetailPage.tsx
+++ b/client/src/pages/ProjectDetailPage.tsx
@@ -5,8 +5,12 @@ import { fetchEmployees } from "../api/employees";
 import { archiveProject, createConfidentialDocumentRef, createProjectCommunicationLog, createProjectDelivery, createProjectMember, createProjectMilestone, createProjectRisk, createProjectTask, fetchProject, fetchProjectClosureChecklist, fetchProjectCommunicationLogs, fetchProjectDeliveries, fetchProjectDocumentRefs, fetchProjectExpensesSummary, fetchProjectMembers, fetchProjectMilestones, fetchProjectRisks, fetchProjectTasks, fetchProjectTravelSummary, fetchProjectWeeklyReports, patchProject, patchProjectClosureChecklistItem, patchProjectCommunicationLog, patchProjectMember, patchProjectMilestone, patchProjectRisk, patchProjectTask, type ConfidentialityLevel, type DocumentStorageType, type ProjectCommunicationChannel, type ProjectClosureChecklistStatus, type ProjectDeliveryRecordType, type ProjectMilestoneStatus, type ProjectRiskLevel, type ProjectStatus, type ProjectTaskPriority, type ProjectTaskStatus } from "../api/projects";
 import { fetchContractsRegistry } from "../api/contractsRegistry";
 import { mapApiErrorMessage } from "../api/errorMessages";
+import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
+import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { PageScaffold } from "../components/patterns/PageScaffold";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { isApiError } from "../api/types";
-import { PageHeader } from "../components/common/PageHeader";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -486,10 +490,19 @@ export function ProjectDetailPage() {
   const riskItems = risksQuery.data?.items ?? detail.risks;
 
   return (
-    <div className="space-y-6">
-      <PageHeader
+    <PageScaffold>
+      <EntityOverviewHero
         title={`${detail.projectNo} · ${detail.name}`}
-        subtitle="项目主档、成员、里程碑、任务、风险、费用、周报与资料引用统一查看。"
+        subtitle="项目概览、执行、留痕与归档在同一工作台内查看和处理。"
+        meta={
+          <>
+            <StatusBadge status={detail.status} />
+            {detail.isConfidential ? <span className="badge-warning">涉密项目</span> : null}
+            <span className="info-chip">客户：{detail.clientAlias || detail.clientName}</span>
+            <span className="info-chip">负责人：{detail.owner?.name ?? "-"}</span>
+            <span className="info-chip">项目经理：{detail.manager?.name ?? "-"}</span>
+          </>
+        }
         actions={
           <div className="flex flex-wrap gap-2">
             <Button asChild variant="secondary" type="button">
@@ -505,14 +518,14 @@ export function ProjectDetailPage() {
         }
       />
 
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">成员</div><div className="mt-2 text-2xl font-bold">{counts?.members ?? 0}</div></div>
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">里程碑</div><div className="mt-2 text-2xl font-bold">{counts?.milestones ?? 0}</div></div>
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">任务</div><div className="mt-2 text-2xl font-bold">{counts?.tasks ?? 0}</div></div>
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">风险</div><div className="mt-2 text-2xl font-bold">{counts?.risks ?? 0}</div></div>
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">报销合计</div><div className="mt-2 text-2xl font-bold">{expensesQuery.data?.totalAmount ?? "0.00"}</div></div>
-        <div className="card-std p-4"><div className="text-sm text-zinc-500">差旅合计</div><div className="mt-2 text-2xl font-bold">{travelQuery.data?.totalAmount ?? "0.00"}</div></div>
-      </div>
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
+        <MetricCard title="成员" value={counts?.members ?? 0} note="执行角色与观察者" />
+        <MetricCard title="里程碑" value={counts?.milestones ?? 0} note="用于跟踪关键节点" />
+        <MetricCard title="任务" value={counts?.tasks ?? 0} note="按优先级与状态推进" />
+        <MetricCard title="风险" value={counts?.risks ?? 0} note="高风险建议指定责任人" tone={(counts?.risks ?? 0) > 0 ? "warning" : "neutral"} />
+        <MetricCard title="报销合计" value={expensesQuery.data?.totalAmount ?? "0.00"} note="当前项目已关联报销" />
+        <MetricCard title="差旅合计" value={travelQuery.data?.totalAmount ?? "0.00"} note="当前项目已关联差旅" />
+      </section>
 
       {(detail.status === "completed" || detail.status === "archived") && detail.closureSummary.pendingCount > 0 ? (
         <div className="card-std border-amber-200 bg-amber-50 p-4" data-testid="project-closure-warning">
@@ -655,379 +668,375 @@ export function ProjectDetailPage() {
         </div>
       ) : null}
 
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr),minmax(0,0.8fr)]">
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center gap-3">
-            <h3 className="text-base font-semibold text-zinc-900">项目主档</h3>
-            <StatusBadge status={detail.status} />
-            {detail.isConfidential ? <span className="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">涉密项目</span> : null}
-          </div>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label>项目名称</Label>
-              <Input value={projectForm.name} onChange={(event) => setProjectForm((prev) => ({ ...prev, name: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>客户名称</Label>
-              <Input value={projectForm.clientName} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientName: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>客户简称</Label>
-              <Input value={projectForm.clientAlias} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientAlias: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>状态</Label>
-              <select className="select-std" value={projectForm.status} onChange={(event) => setProjectForm((prev) => ({ ...prev, status: event.target.value as ProjectStatus }))}>
-                {PROJECT_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
-              </select>
-            </div>
-            <div className="space-y-2">
-              <Label>开始日期</Label>
-              <Input type="date" value={projectForm.startsAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>目标完成</Label>
-              <Input type="date" value={projectForm.targetEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, targetEndAt: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>实际完成</Label>
-              <Input type="date" value={projectForm.actualEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, actualEndAt: event.target.value }))} />
-            </div>
-            <div className="space-y-2">
-              <Label>项目经理</Label>
-              <select className="select-std" value={projectForm.managerEmployeeId} onChange={(event) => setProjectForm((prev) => ({ ...prev, managerEmployeeId: event.target.value }))}>
-                <option value="">未指定</option>
-                {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
-              </select>
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label>项目摘要</Label>
-            <Textarea value={projectForm.summary} onChange={(event) => setProjectForm((prev) => ({ ...prev, summary: event.target.value }))} />
-          </div>
-          <label className="flex items-center gap-2 text-sm text-zinc-700">
-            <input type="checkbox" checked={projectForm.isConfidential} onChange={(event) => setProjectForm((prev) => ({ ...prev, isConfidential: event.target.checked }))} />
-            项目包含涉密资料，正文与附件保持离线管理
-          </label>
-          <div className="flex justify-end">
-            <Button type="button" disabled={saveProjectMutation.isPending} onClick={() => saveProjectMutation.mutate()}>
-              {saveProjectMutation.isPending ? "保存中..." : "保存主档"}
-            </Button>
-          </div>
-        </div>
-
-        <div className="card-std space-y-3 p-6 text-sm">
-          <h3 className="text-base font-semibold text-zinc-900">项目摘要</h3>
-          <div>负责人：{detail.owner?.name ?? "-"}</div>
-          <div>项目经理：{detail.manager?.name ?? "-"}</div>
-          <div>周报关联：{counts?.weeklyReports ?? 0}</div>
-          <div>合同台账：{counts?.contracts ?? 0}</div>
-          <div>交付记录：{counts?.deliveries ?? 0}</div>
-          <div>资料引用：{counts?.documentRefs ?? 0}</div>
-          <div className="rounded-lg border border-zinc-200 p-3 text-zinc-600">
-            项目相关的出差、报销、待办、周报都可以在当前项目下汇总查看；涉密正文与附件仍不进 OA。
-          </div>
-        </div>
-      </div>
-
-      <div className="grid gap-6 xl:grid-cols-2">
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between">
-            <h3 className="text-base font-semibold text-zinc-900">成员</h3>
-            <div className="text-sm text-zinc-500">当前 {memberItems.length} 人</div>
-          </div>
-          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,120px]">
-            <select className="select-std" value={memberEmployeeId} onChange={(event) => setMemberEmployeeId(event.target.value)}>
-              <option value="">选择成员</option>
-              {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
-            </select>
-            <select className="select-std" value={memberRole} onChange={(event) => setMemberRole(event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number])}>
-              {MEMBER_ROLE_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
-            </select>
-            <Button type="button" disabled={addMemberMutation.isPending || !memberEmployeeId} onClick={() => addMemberMutation.mutate()}>
-              添加成员
-            </Button>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>成员</TableHead><TableHead>角色</TableHead><TableHead>加入时间</TableHead><TableHead>操作</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {memberItems.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.employee?.name ?? item.employeeId}</TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.role} onChange={(event) => patchMemberMutation.mutate({ memberId: item.id, role: event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number] })}>
-                      {MEMBER_ROLE_OPTIONS.map((role) => <option key={role} value={role}>{role}</option>)}
-                    </select>
-                  </TableCell>
-                  <TableCell>{item.joinedAt ? item.joinedAt.slice(0, 10) : "-"}</TableCell>
-                  <TableCell>
-                    {item.leftAt ? "已移出" : (
-                      <Button size="sm" variant="secondary" type="button" onClick={() => patchMemberMutation.mutate({ memberId: item.id, leftAt: new Date().toISOString().slice(0, 10) })}>移出</Button>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between">
-            <h3 className="text-base font-semibold text-zinc-900">里程碑</h3>
-            <div className="text-sm text-zinc-500">逾期请及时调整状态</div>
-          </div>
-          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,120px]">
-            <Input value={milestoneTitle} onChange={(event) => setMilestoneTitle(event.target.value)} placeholder="里程碑标题" />
-            <Input type="date" value={milestoneDueDate} onChange={(event) => setMilestoneDueDate(event.target.value)} />
-            <select className="select-std" value={milestoneStatus} onChange={(event) => setMilestoneStatus(event.target.value as ProjectMilestoneStatus)}>
-              {MILESTONE_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
-            </select>
-            <Button type="button" disabled={addMilestoneMutation.isPending || !milestoneTitle.trim()} onClick={() => addMilestoneMutation.mutate()}>新增</Button>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>标题</TableHead><TableHead>截止日期</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {milestoneItems.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.title}</TableCell>
-                  <TableCell>{item.dueDate ?? "-"}</TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.status} onChange={(event) => patchMilestoneMutation.mutate({ milestoneId: item.id, status: event.target.value as ProjectMilestoneStatus })}>
-                      {MILESTONE_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
-                    </select>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-
-      <div className="grid gap-6 xl:grid-cols-2">
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">任务</h3><div className="text-sm text-zinc-500">支持高优先级与阻塞状态</div></div>
-          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,160px,120px]">
-            <Input value={taskTitle} onChange={(event) => setTaskTitle(event.target.value)} placeholder="任务标题" />
-            <select className="select-std" value={taskAssigneeId} onChange={(event) => setTaskAssigneeId(event.target.value)}>
-              <option value="">未指派</option>
-              {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
-            </select>
-            <select className="select-std" value={taskPriority} onChange={(event) => setTaskPriority(event.target.value as ProjectTaskPriority)}>
-              {TASK_PRIORITY_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
-            </select>
-            <Input type="date" value={taskDueDate} onChange={(event) => setTaskDueDate(event.target.value)} />
-            <Button type="button" disabled={addTaskMutation.isPending || !taskTitle.trim()} onClick={() => addTaskMutation.mutate()}>新增</Button>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>任务</TableHead><TableHead>负责人</TableHead><TableHead>优先级</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {taskItems.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>
-                    <div className="font-medium text-zinc-900">{item.title}</div>
-                    <div className="text-xs text-zinc-500">截止：{item.dueDate ?? "-"}</div>
-                  </TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.assigneeEmployeeId ?? ""} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { assigneeEmployeeId: event.target.value || null } })}>
-                      <option value="">未指派</option>
-                      {employeeOptions.map((employee) => <option key={employee.id} value={employee.id}>{employee.name}</option>)}
-                    </select>
-                  </TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.priority} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { priority: event.target.value as ProjectTaskPriority } })}>
-                      {TASK_PRIORITY_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
-                    </select>
-                  </TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.status} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { status: event.target.value as ProjectTaskStatus } })}>
-                      {TASK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
-                    </select>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">风险</h3><div className="text-sm text-zinc-500">问题与阻塞统一留痕</div></div>
-          <div className="space-y-3">
-            <Input value={riskTitle} onChange={(event) => setRiskTitle(event.target.value)} placeholder="风险标题" />
-            <Textarea value={riskDetail} onChange={(event) => setRiskDetail(event.target.value)} placeholder="风险详情、影响与当前处理动作" />
-            <div className="grid gap-3 md:grid-cols-[160px,160px,minmax(0,1fr),120px]">
-              <select className="select-std" value={riskLevel} onChange={(event) => setRiskLevel(event.target.value as ProjectRiskLevel)}>
-                {RISK_LEVEL_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
-              </select>
-              <select className="select-std" value={riskOwnerId} onChange={(event) => setRiskOwnerId(event.target.value)}>
-                <option value="">未指定责任人</option>
-                {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
-              </select>
-              <div className="text-sm text-zinc-500 flex items-center">高优项目建议每个风险都指定责任人。</div>
-              <Button type="button" disabled={addRiskMutation.isPending || !riskTitle.trim() || !riskDetail.trim()} onClick={() => addRiskMutation.mutate()}>登记</Button>
-            </div>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>风险</TableHead><TableHead>等级</TableHead><TableHead>责任人</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {riskItems.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>
-                    <div className="font-medium text-zinc-900">{item.title}</div>
-                    <div className="text-xs text-zinc-500">{item.detail}</div>
-                  </TableCell>
-                  <TableCell>{item.level}</TableCell>
-                  <TableCell>{item.owner?.name ?? "-"}</TableCell>
-                  <TableCell>
-                    <select className="select-std h-9" value={item.status} onChange={(event) => patchRiskMutation.mutate({ riskId: item.id, status: event.target.value })}>
-                      {RISK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
-                    </select>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-
-      <div className="grid gap-6 xl:grid-cols-2">
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">执行面板</h3><div className="text-sm text-zinc-500">人、事、费、周报统一查看</div></div>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="rounded-lg border border-zinc-200 p-4">
-              <div className="text-sm text-zinc-500">报销</div>
-              <div className="mt-1 text-xl font-semibold text-zinc-900">{expensesQuery.data?.totalAmount ?? "0.00"}</div>
-              <div className="mt-2 space-y-2 text-sm">
-                {(expensesQuery.data?.items ?? []).slice(0, 5).map((item) => (
-                  <Link key={item.id} to={`/reimbursements/${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
-                    {item.formNumber} · {item.totalAmount}
-                  </Link>
-                ))}
+      <div className="detail-shell-grid">
+        <div className="space-y-6">
+          <SectionPanel title="概览与主档" description="先看主信息，再统一维护时间、负责人和涉密属性。">
+            <div className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>项目名称</Label>
+                  <Input value={projectForm.name} onChange={(event) => setProjectForm((prev) => ({ ...prev, name: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>客户名称</Label>
+                  <Input value={projectForm.clientName} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientName: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>客户简称</Label>
+                  <Input value={projectForm.clientAlias} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientAlias: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>状态</Label>
+                  <select className="select-std" value={projectForm.status} onChange={(event) => setProjectForm((prev) => ({ ...prev, status: event.target.value as ProjectStatus }))}>
+                    {PROJECT_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+                  </select>
+                </div>
+                <div className="space-y-2">
+                  <Label>开始日期</Label>
+                  <Input type="date" value={projectForm.startsAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>目标完成</Label>
+                  <Input type="date" value={projectForm.targetEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, targetEndAt: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>实际完成</Label>
+                  <Input type="date" value={projectForm.actualEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, actualEndAt: event.target.value }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label>项目经理</Label>
+                  <select className="select-std" value={projectForm.managerEmployeeId} onChange={(event) => setProjectForm((prev) => ({ ...prev, managerEmployeeId: event.target.value }))}>
+                    <option value="">未指定</option>
+                    {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
+                  </select>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label>项目摘要</Label>
+                <Textarea value={projectForm.summary} onChange={(event) => setProjectForm((prev) => ({ ...prev, summary: event.target.value }))} />
+              </div>
+              <label className="flex items-center gap-2 text-sm text-zinc-700">
+                <input type="checkbox" checked={projectForm.isConfidential} onChange={(event) => setProjectForm((prev) => ({ ...prev, isConfidential: event.target.checked }))} />
+                项目包含涉密资料，正文与附件保持离线管理
+              </label>
+              <div className="flex justify-end">
+                <Button type="button" disabled={saveProjectMutation.isPending} onClick={() => saveProjectMutation.mutate()}>
+                  {saveProjectMutation.isPending ? "保存中..." : "保存主档"}
+                </Button>
               </div>
             </div>
-            <div className="rounded-lg border border-zinc-200 p-4">
-              <div className="text-sm text-zinc-500">差旅</div>
-              <div className="mt-1 text-xl font-semibold text-zinc-900">{travelQuery.data?.totalAmount ?? "0.00"}</div>
-              <div className="mt-2 space-y-2 text-sm">
-                {(travelQuery.data?.items ?? []).slice(0, 5).map((item) => (
-                  <Link key={item.id} to={`/travel-requests?tab=requests&id=${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
-                    {item.requestNo} · {item.estimatedAmount}
-                  </Link>
-                ))}
+          </SectionPanel>
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <SectionPanel title="执行 · 成员" description={`当前 ${memberItems.length} 人`}>
+              <div className="space-y-4">
+                <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,120px]">
+                  <select className="select-std" value={memberEmployeeId} onChange={(event) => setMemberEmployeeId(event.target.value)}>
+                    <option value="">选择成员</option>
+                    {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
+                  </select>
+                  <select className="select-std" value={memberRole} onChange={(event) => setMemberRole(event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number])}>
+                    {MEMBER_ROLE_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+                  </select>
+                  <Button type="button" disabled={addMemberMutation.isPending || !memberEmployeeId} onClick={() => addMemberMutation.mutate()}>
+                    添加成员
+                  </Button>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>成员</TableHead><TableHead>角色</TableHead><TableHead>加入时间</TableHead><TableHead>操作</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {memberItems.map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>{item.employee?.name ?? item.employeeId}</TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.role} onChange={(event) => patchMemberMutation.mutate({ memberId: item.id, role: event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number] })}>
+                            {MEMBER_ROLE_OPTIONS.map((role) => <option key={role} value={role}>{role}</option>)}
+                          </select>
+                        </TableCell>
+                        <TableCell>{item.joinedAt ? item.joinedAt.slice(0, 10) : "-"}</TableCell>
+                        <TableCell>
+                          {item.leftAt ? "已移出" : (
+                            <Button size="sm" variant="secondary" type="button" onClick={() => patchMemberMutation.mutate({ memberId: item.id, leftAt: new Date().toISOString().slice(0, 10) })}>移出</Button>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
               </div>
-            </div>
-            <div className="rounded-lg border border-zinc-200 p-4">
-              <div className="text-sm text-zinc-500">项目周报</div>
-              <div className="mt-1 text-xl font-semibold text-zinc-900">{weeklyQuery.data?.items.length ?? 0}</div>
-              <div className="mt-2 space-y-2 text-sm">
-                {(weeklyQuery.data?.items ?? []).slice(0, 5).map((item) => (
-                  <Link key={item.id} to="/weekly-reports" className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
-                    {item.employee?.name ?? "成员"} · {item.weekStart ?? "-"}
-                  </Link>
-                ))}
+            </SectionPanel>
+
+            <SectionPanel title="执行 · 里程碑" description="逾期请及时调整状态。">
+              <div className="space-y-4">
+                <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,120px]">
+                  <Input value={milestoneTitle} onChange={(event) => setMilestoneTitle(event.target.value)} placeholder="里程碑标题" />
+                  <Input type="date" value={milestoneDueDate} onChange={(event) => setMilestoneDueDate(event.target.value)} />
+                  <select className="select-std" value={milestoneStatus} onChange={(event) => setMilestoneStatus(event.target.value as ProjectMilestoneStatus)}>
+                    {MILESTONE_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+                  </select>
+                  <Button type="button" disabled={addMilestoneMutation.isPending || !milestoneTitle.trim()} onClick={() => addMilestoneMutation.mutate()}>新增</Button>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>标题</TableHead><TableHead>截止日期</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {milestoneItems.map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>{item.title}</TableCell>
+                        <TableCell>{item.dueDate ?? "-"}</TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.status} onChange={(event) => patchMilestoneMutation.mutate({ milestoneId: item.id, status: event.target.value as ProjectMilestoneStatus })}>
+                            {MILESTONE_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                          </select>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
               </div>
-            </div>
-            <div className="rounded-lg border border-zinc-200 p-4">
-              <div className="text-sm text-zinc-500">合同台账</div>
-              <div className="mt-1 text-xl font-semibold text-zinc-900">{contractsQuery.data?.items.length ?? 0}</div>
-              <div className="mt-2 space-y-2 text-sm">
-                {(contractsQuery.data?.items ?? []).slice(0, 5).map((item) => (
-                  <div key={item.id} className="rounded-lg border border-zinc-100 px-3 py-2">
-                    {item.contractNo} · {item.counterpartyName}
+            </SectionPanel>
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <SectionPanel title="执行 · 任务" description="支持高优先级与阻塞状态。">
+              <div className="space-y-4">
+                <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,160px,120px]">
+                  <Input value={taskTitle} onChange={(event) => setTaskTitle(event.target.value)} placeholder="任务标题" />
+                  <select className="select-std" value={taskAssigneeId} onChange={(event) => setTaskAssigneeId(event.target.value)}>
+                    <option value="">未指派</option>
+                    {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
+                  </select>
+                  <select className="select-std" value={taskPriority} onChange={(event) => setTaskPriority(event.target.value as ProjectTaskPriority)}>
+                    {TASK_PRIORITY_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+                  </select>
+                  <Input type="date" value={taskDueDate} onChange={(event) => setTaskDueDate(event.target.value)} />
+                  <Button type="button" disabled={addTaskMutation.isPending || !taskTitle.trim()} onClick={() => addTaskMutation.mutate()}>新增</Button>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>任务</TableHead><TableHead>负责人</TableHead><TableHead>优先级</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {taskItems.map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-zinc-900">{item.title}</div>
+                          <div className="text-xs text-zinc-500">截止：{item.dueDate ?? "-"}</div>
+                        </TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.assigneeEmployeeId ?? ""} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { assigneeEmployeeId: event.target.value || null } })}>
+                            <option value="">未指派</option>
+                            {employeeOptions.map((employee) => <option key={employee.id} value={employee.id}>{employee.name}</option>)}
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.priority} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { priority: event.target.value as ProjectTaskPriority } })}>
+                            {TASK_PRIORITY_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.status} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { status: event.target.value as ProjectTaskStatus } })}>
+                            {TASK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                          </select>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </SectionPanel>
+
+            <SectionPanel title="执行 · 风险" description="问题与阻塞统一留痕。">
+              <div className="space-y-4">
+                <div className="space-y-3">
+                  <Input value={riskTitle} onChange={(event) => setRiskTitle(event.target.value)} placeholder="风险标题" />
+                  <Textarea value={riskDetail} onChange={(event) => setRiskDetail(event.target.value)} placeholder="风险详情、影响与当前处理动作" />
+                  <div className="grid gap-3 md:grid-cols-[160px,160px,minmax(0,1fr),120px]">
+                    <select className="select-std" value={riskLevel} onChange={(event) => setRiskLevel(event.target.value as ProjectRiskLevel)}>
+                      {RISK_LEVEL_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
+                    </select>
+                    <select className="select-std" value={riskOwnerId} onChange={(event) => setRiskOwnerId(event.target.value)}>
+                      <option value="">未指定责任人</option>
+                      {employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
+                    </select>
+                    <div className="text-sm text-zinc-500 flex items-center">高优项目建议每个风险都指定责任人。</div>
+                    <Button type="button" disabled={addRiskMutation.isPending || !riskTitle.trim() || !riskDetail.trim()} onClick={() => addRiskMutation.mutate()}>登记</Button>
                   </div>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>风险</TableHead><TableHead>等级</TableHead><TableHead>责任人</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {riskItems.map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-zinc-900">{item.title}</div>
+                          <div className="text-xs text-zinc-500">{item.detail}</div>
+                        </TableCell>
+                        <TableCell>{item.level}</TableCell>
+                        <TableCell>{item.owner?.name ?? "-"}</TableCell>
+                        <TableCell>
+                          <select className="select-std h-9" value={item.status} onChange={(event) => patchRiskMutation.mutate({ riskId: item.id, status: event.target.value })}>
+                            {RISK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                          </select>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </SectionPanel>
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <SectionPanel title="留痕 · 交付记录" description="现场、验收、交接统一留痕。">
+              <div className="space-y-4">
+                <div className="space-y-3">
+                  <Input value={deliveryTitle} onChange={(event) => setDeliveryTitle(event.target.value)} placeholder="记录标题" />
+                  <Textarea value={deliverySummary} onChange={(event) => setDeliverySummary(event.target.value)} placeholder="记录摘要" />
+                  <div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
+                    <select className="select-std" value={deliveryType} onChange={(event) => setDeliveryType(event.target.value as ProjectDeliveryRecordType)}>
+                      {DELIVERY_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{recordTypeLabel(item)}</option>)}
+                    </select>
+                    <Input type="date" value={deliveryOccurredAt} onChange={(event) => setDeliveryOccurredAt(event.target.value)} />
+                    <Button type="button" disabled={addDeliveryMutation.isPending || !deliveryTitle.trim() || !deliverySummary.trim()} onClick={() => addDeliveryMutation.mutate()}>新增</Button>
+                  </div>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>标题</TableHead><TableHead>类型</TableHead><TableHead>时间</TableHead><TableHead>责任人</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {(deliveriesQuery.data?.items ?? []).map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-zinc-900">{item.title}</div>
+                          <div className="text-xs text-zinc-500">{item.summary}</div>
+                        </TableCell>
+                        <TableCell>{recordTypeLabel(item.recordType)}</TableCell>
+                        <TableCell>{item.occurredAt ? item.occurredAt.slice(0, 10) : "-"}</TableCell>
+                        <TableCell>{item.owner?.name ?? "-"}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </SectionPanel>
+
+            <SectionPanel title="归档与合规 · 涉密资料引用" description="只登记目录、链接和归档位置，正文与附件仍离线管理。">
+              <div className="space-y-4">
+                <div className="space-y-3">
+                  <Input value={docTitle} onChange={(event) => setDocTitle(event.target.value)} placeholder="资料标题" />
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <Input value={docNo} onChange={(event) => setDocNo(event.target.value)} placeholder="文档编号（可选）" />
+                    <Input value={docOfflineArchiveNo} onChange={(event) => setDocOfflineArchiveNo(event.target.value)} placeholder="离线档案号（可选）" />
+                  </div>
+                  <Input value={docStoragePath} onChange={(event) => setDocStoragePath(event.target.value)} placeholder="NAS / Git / 文件盘路径或引用地址" />
+                  <div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
+                    <select className="select-std" value={docConfidentiality} onChange={(event) => setDocConfidentiality(event.target.value as ConfidentialityLevel)}>
+                      {CONFIDENTIALITY_OPTIONS.map((item) => <option key={item} value={item}>{confidentialityLabel(item)}</option>)}
+                    </select>
+                    <select className="select-std" value={docStorageType} onChange={(event) => setDocStorageType(event.target.value as DocumentStorageType)}>
+                      {STORAGE_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{storageTypeLabel(item)}</option>)}
+                    </select>
+                    <Button type="button" disabled={addDocRefMutation.isPending || !docTitle.trim() || !docStoragePath.trim()} onClick={() => addDocRefMutation.mutate()}>登记</Button>
+                  </div>
+                </div>
+                <Table>
+                  <TableHeader><TableRow><TableHead>资料</TableHead><TableHead>密级</TableHead><TableHead>存储</TableHead><TableHead>路径</TableHead></TableRow></TableHeader>
+                  <TableBody>
+                    {(docsQuery.data?.items ?? []).map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-zinc-900">{item.title}</div>
+                          <div className="text-xs text-zinc-500">{item.documentNo ?? item.offlineArchiveNo ?? "无编号"}</div>
+                        </TableCell>
+                        <TableCell>{confidentialityLabel(item.confidentialityLevel)}</TableCell>
+                        <TableCell>{storageTypeLabel(item.storageType)}</TableCell>
+                        <TableCell className="max-w-[280px] truncate">{item.storagePath}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </SectionPanel>
+          </div>
+
+          <SectionPanel title="留痕 · 项目周报关联" description="按项目查看每周进展、风险与下一步动作。">
+            <Table>
+              <TableHeader><TableRow><TableHead>成员</TableHead><TableHead>周起始</TableHead><TableHead>进展</TableHead><TableHead>下一步</TableHead></TableRow></TableHeader>
+              <TableBody>
+                {(weeklyQuery.data?.items ?? []).map((item) => (
+                  <TableRow key={item.id}>
+                    <TableCell>{item.employee?.name ?? "-"}</TableCell>
+                    <TableCell>{item.weekStart ?? "-"}</TableCell>
+                    <TableCell>{item.progressText || item.riskText || "-"}</TableCell>
+                    <TableCell>{item.nextStepText || "-"}</TableCell>
+                  </TableRow>
                 ))}
+              </TableBody>
+            </Table>
+          </SectionPanel>
+        </div>
+
+        <div className="space-y-6">
+          <DetailSideMeta title="项目摘要" description="优先帮助项目负责人判断当前状态、关联量和下一步动作。">
+            <div>负责人：{detail.owner?.name ?? "-"}</div>
+            <div>项目经理：{detail.manager?.name ?? "-"}</div>
+            <div>周报关联：{counts?.weeklyReports ?? 0}</div>
+            <div>合同台账：{counts?.contracts ?? 0}</div>
+            <div>交付记录：{counts?.deliveries ?? 0}</div>
+            <div>资料引用：{counts?.documentRefs ?? 0}</div>
+            <div className="rounded-lg border border-zinc-200 p-3 text-zinc-600">
+              项目相关的出差、报销、待办、周报都可以在当前项目下汇总查看；涉密正文与附件仍不进 OA。
+            </div>
+          </DetailSideMeta>
+
+          <SectionPanel title="执行摘要" description="人、事、费、周报统一查看，帮助快速切回具体页面。">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="rounded-lg border border-zinc-200 p-4">
+                <div className="text-sm text-zinc-500">报销</div>
+                <div className="mt-1 text-xl font-semibold text-zinc-900">{expensesQuery.data?.totalAmount ?? "0.00"}</div>
+                <div className="mt-2 space-y-2 text-sm">
+                  {(expensesQuery.data?.items ?? []).slice(0, 5).map((item) => (
+                    <Link key={item.id} to={`/reimbursements/${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
+                      {item.formNumber} · {item.totalAmount}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+              <div className="rounded-lg border border-zinc-200 p-4">
+                <div className="text-sm text-zinc-500">差旅</div>
+                <div className="mt-1 text-xl font-semibold text-zinc-900">{travelQuery.data?.totalAmount ?? "0.00"}</div>
+                <div className="mt-2 space-y-2 text-sm">
+                  {(travelQuery.data?.items ?? []).slice(0, 5).map((item) => (
+                    <Link key={item.id} to={`/travel-requests?tab=requests&id=${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
+                      {item.requestNo} · {item.estimatedAmount}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+              <div className="rounded-lg border border-zinc-200 p-4">
+                <div className="text-sm text-zinc-500">项目周报</div>
+                <div className="mt-1 text-xl font-semibold text-zinc-900">{weeklyQuery.data?.items.length ?? 0}</div>
+                <div className="mt-2 space-y-2 text-sm">
+                  {(weeklyQuery.data?.items ?? []).slice(0, 5).map((item) => (
+                    <Link key={item.id} to="/weekly-reports" className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
+                      {item.employee?.name ?? "成员"} · {item.weekStart ?? "-"}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+              <div className="rounded-lg border border-zinc-200 p-4">
+                <div className="text-sm text-zinc-500">合同台账</div>
+                <div className="mt-1 text-xl font-semibold text-zinc-900">{contractsQuery.data?.items.length ?? 0}</div>
+                <div className="mt-2 space-y-2 text-sm">
+                  {(contractsQuery.data?.items ?? []).slice(0, 5).map((item) => (
+                    <div key={item.id} className="rounded-lg border border-zinc-100 px-3 py-2">
+                      {item.contractNo} · {item.counterpartyName}
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">交付记录</h3><div className="text-sm text-zinc-500">现场、验收、交接留痕</div></div>
-          <div className="space-y-3">
-            <Input value={deliveryTitle} onChange={(event) => setDeliveryTitle(event.target.value)} placeholder="记录标题" />
-            <Textarea value={deliverySummary} onChange={(event) => setDeliverySummary(event.target.value)} placeholder="记录摘要" />
-            <div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
-              <select className="select-std" value={deliveryType} onChange={(event) => setDeliveryType(event.target.value as ProjectDeliveryRecordType)}>
-                {DELIVERY_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{recordTypeLabel(item)}</option>)}
-              </select>
-              <Input type="date" value={deliveryOccurredAt} onChange={(event) => setDeliveryOccurredAt(event.target.value)} />
-              <Button type="button" disabled={addDeliveryMutation.isPending || !deliveryTitle.trim() || !deliverySummary.trim()} onClick={() => addDeliveryMutation.mutate()}>新增</Button>
-            </div>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>标题</TableHead><TableHead>类型</TableHead><TableHead>时间</TableHead><TableHead>责任人</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {(deliveriesQuery.data?.items ?? []).map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>
-                    <div className="font-medium text-zinc-900">{item.title}</div>
-                    <div className="text-xs text-zinc-500">{item.summary}</div>
-                  </TableCell>
-                  <TableCell>{recordTypeLabel(item.recordType)}</TableCell>
-                  <TableCell>{item.occurredAt ? item.occurredAt.slice(0, 10) : "-"}</TableCell>
-                  <TableCell>{item.owner?.name ?? "-"}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+          </SectionPanel>
         </div>
       </div>
-
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">涉密资料引用</h3><div className="text-sm text-zinc-500">只登记目录 / 链接 / 归档位置</div></div>
-          <div className="space-y-3">
-            <Input value={docTitle} onChange={(event) => setDocTitle(event.target.value)} placeholder="资料标题" />
-            <div className="grid gap-3 md:grid-cols-2">
-              <Input value={docNo} onChange={(event) => setDocNo(event.target.value)} placeholder="文档编号（可选）" />
-              <Input value={docOfflineArchiveNo} onChange={(event) => setDocOfflineArchiveNo(event.target.value)} placeholder="离线档案号（可选）" />
-            </div>
-            <Input value={docStoragePath} onChange={(event) => setDocStoragePath(event.target.value)} placeholder="NAS / Git / 文件盘路径或引用地址" />
-            <div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
-              <select className="select-std" value={docConfidentiality} onChange={(event) => setDocConfidentiality(event.target.value as ConfidentialityLevel)}>
-                {CONFIDENTIALITY_OPTIONS.map((item) => <option key={item} value={item}>{confidentialityLabel(item)}</option>)}
-              </select>
-              <select className="select-std" value={docStorageType} onChange={(event) => setDocStorageType(event.target.value as DocumentStorageType)}>
-                {STORAGE_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{storageTypeLabel(item)}</option>)}
-              </select>
-              <Button type="button" disabled={addDocRefMutation.isPending || !docTitle.trim() || !docStoragePath.trim()} onClick={() => addDocRefMutation.mutate()}>登记</Button>
-            </div>
-          </div>
-          <Table>
-            <TableHeader><TableRow><TableHead>资料</TableHead><TableHead>密级</TableHead><TableHead>存储</TableHead><TableHead>路径</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {(docsQuery.data?.items ?? []).map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>
-                    <div className="font-medium text-zinc-900">{item.title}</div>
-                    <div className="text-xs text-zinc-500">{item.documentNo ?? item.offlineArchiveNo ?? "无编号"}</div>
-                  </TableCell>
-                  <TableCell>{confidentialityLabel(item.confidentialityLevel)}</TableCell>
-                  <TableCell>{storageTypeLabel(item.storageType)}</TableCell>
-                  <TableCell className="max-w-[280px] truncate">{item.storagePath}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="card-std space-y-4 p-6">
-          <div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">项目周报关联</h3><div className="text-sm text-zinc-500">按项目查看每周进展</div></div>
-          <Table>
-            <TableHeader><TableRow><TableHead>成员</TableHead><TableHead>周起始</TableHead><TableHead>进展</TableHead><TableHead>下一步</TableHead></TableRow></TableHeader>
-            <TableBody>
-              {(weeklyQuery.data?.items ?? []).map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.employee?.name ?? "-"}</TableCell>
-                  <TableCell>{item.weekStart ?? "-"}</TableCell>
-                  <TableCell>{item.progressText || item.riskText || "-"}</TableCell>
-                  <TableCell>{item.nextStepText || "-"}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </div>
+    </PageScaffold>
   );
 }
 
diff --git a/client/src/pages/ProjectsPage.tsx b/client/src/pages/ProjectsPage.tsx
index e1e09ada..4f8a9ce1 100644
--- a/client/src/pages/ProjectsPage.tsx
+++ b/client/src/pages/ProjectsPage.tsx
@@ -14,6 +14,9 @@ import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
 import { StatusBadge } from "../components/common/StatusBadge";
+import { FilterBar, ListWorkspace } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -94,6 +97,22 @@ export function ProjectsPage() {
     [employeesQuery.data?.items, me?.id],
   );
 
+  const projectItems = listQuery.data?.items ?? [];
+  const projectStats = useMemo(() => {
+    return projectItems.reduce(
+      (acc, item) => {
+        acc.total += 1;
+        if (item.status === "active") {
+          acc.active += 1;
+        }
+        acc.overdueMilestones += item.counts.overdueMilestones;
+        acc.openRisks += item.counts.openRisks;
+        return acc;
+      },
+      { total: 0, active: 0, overdueMilestones: 0, openRisks: 0 },
+    );
+  }, [projectItems]);
+
   const createMutation = useMutation({
     mutationFn: () =>
       createProject({
@@ -141,7 +160,7 @@ export function ProjectsPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <ListWorkspace>
       <PageHeader
         title="项目"
         subtitle="轻项目主档、成员、里程碑、任务与风险统一在 OA 内跟进。"
@@ -154,9 +173,16 @@ export function ProjectsPage() {
         }
       />
 
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),360px]">
-        <div className="space-y-4">
-          <div className="card-std grid gap-3 p-4 md:grid-cols-[minmax(0,1fr),180px,140px]">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard title="当前项目" value={projectStats.total} note={mine ? "已切换到我的项目" : "当前筛选结果"} />
+        <MetricCard title="进行中" value={projectStats.active} note="优先跟进活跃项目" />
+        <MetricCard title="逾期里程碑" value={projectStats.overdueMilestones} note="建议先处理延期事项" tone={projectStats.overdueMilestones > 0 ? "warning" : "neutral"} />
+        <MetricCard title="未关闭风险" value={projectStats.openRisks} note="问题留痕建议绑定责任人" tone={projectStats.openRisks > 0 ? "danger" : "neutral"} />
+      </section>
+
+      <div className="page-shell-grid">
+        <div className="space-y-6">
+          <FilterBar className="grid gap-3 md:grid-cols-[minmax(0,1fr),180px,160px]">
             <Input placeholder="搜索项目编号、项目名、客户名" value={q} onChange={(event) => updateSearch({ q: event.target.value })} />
             <select className="select-std" value={status} onChange={(event) => updateSearch({ status: event.target.value })}>
               {STATUS_OPTIONS.map((item) => (
@@ -166,48 +192,56 @@ export function ProjectsPage() {
               ))}
             </select>
             <Button type="button" variant={mine ? "default" : "secondary"} onClick={() => updateSearch({ mine: !mine })}>
-              {mine ? "只看我的" : "查看全部"}
+              {mine ? "只看我的" : "切换到我的"}
             </Button>
-          </div>
+          </FilterBar>
 
-          {listQuery.isLoading ? <div className="card-std p-6 text-sm text-zinc-500">项目加载中...</div> : null}
-          {listQuery.isError ? <div className="card-std p-6 text-sm text-red-600">{resolveError(listQuery.error, "加载项目失败")}</div> : null}
+          <SectionPanel
+            title="项目列表"
+            description={projectItems.length ? `当前筛出 ${projectItems.length} 个项目` : "按项目名、客户或状态快速缩小范围"}
+          >
+            <div className="space-y-4">
+              {listQuery.isLoading ? <div className="text-sm text-zinc-500">项目加载中...</div> : null}
+              {listQuery.isError ? <div className="text-sm text-red-600">{resolveError(listQuery.error, "加载项目失败")}</div> : null}
 
-          <div className="grid gap-4">
-            {(listQuery.data?.items ?? []).map((item) => (
-              <Link key={item.id} to={`/projects/${item.id}`} className="card-std block space-y-3 p-5 hover:border-primary/40">
-                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-                  <div>
-                    <div className="flex items-center gap-3">
-                      <div className="text-lg font-semibold text-zinc-900">{item.projectNo}</div>
-                      <StatusBadge status={item.status} />
-                      {item.isConfidential ? <span className="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">涉密</span> : null}
+              <div className="grid gap-4">
+                {projectItems.map((item) => (
+                  <Link key={item.id} to={`/projects/${item.id}`} className="card-std block space-y-3 p-5 hover:border-primary/40">
+                    <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                      <div>
+                        <div className="flex items-center gap-3">
+                          <div className="text-lg font-semibold text-zinc-900">{item.projectNo}</div>
+                          <StatusBadge status={item.status} />
+                          {item.isConfidential ? <span className="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">涉密</span> : null}
+                        </div>
+                        <div className="mt-1 text-base text-zinc-900">{item.name}</div>
+                        <div className="mt-1 text-sm text-zinc-500">客户：{item.clientAlias || item.clientName}</div>
+                      </div>
+                      <div className="text-sm text-zinc-500">
+                        <div>负责人：{item.owner?.name ?? "-"}</div>
+                        <div>项目经理：{item.manager?.name ?? "-"}</div>
+                        <div>目标完成：{item.targetEndAt ?? "-"}</div>
+                      </div>
                     </div>
-                    <div className="mt-1 text-base text-zinc-900">{item.name}</div>
-                    <div className="mt-1 text-sm text-zinc-500">客户：{item.clientAlias || item.clientName}</div>
+                    <div className="text-sm text-zinc-600">{item.summary || "暂无项目摘要"}</div>
+                    <div className="text-sm text-zinc-500">{summaryLine(item)}</div>
+                  </Link>
+                ))}
+                {!listQuery.isLoading && !projectItems.length ? (
+                  <div className="rounded-xl border border-dashed border-zinc-200 bg-zinc-50 px-4 py-8 text-sm text-zinc-500">
+                    当前没有符合筛选条件的项目。
                   </div>
-                  <div className="text-sm text-zinc-500">
-                    <div>负责人：{item.owner?.name ?? "-"}</div>
-                    <div>项目经理：{item.manager?.name ?? "-"}</div>
-                    <div>目标完成：{item.targetEndAt ?? "-"}</div>
-                  </div>
-                </div>
-                <div className="text-sm text-zinc-600">{item.summary || "暂无项目摘要"}</div>
-                <div className="text-sm text-zinc-500">{summaryLine(item)}</div>
-              </Link>
-            ))}
-            {!listQuery.isLoading && !(listQuery.data?.items ?? []).length ? (
-              <div className="card-std p-6 text-sm text-zinc-500">当前没有符合筛选条件的项目。</div>
-            ) : null}
-          </div>
+                ) : null}
+              </div>
+            </div>
+          </SectionPanel>
         </div>
 
-        <div className="card-std space-y-4 p-6">
-          <h3 className="text-base font-semibold text-zinc-900">新建项目</h3>
+        <SectionPanel title="新建项目" description="先建主档，再补成员、里程碑与风险。">
           {!canManageProjects ? (
             <div className="text-sm text-zinc-500">你当前只有查看权限，项目创建入口仅对老板 / 管理员 / 项目管理角色开放。</div>
           ) : (
-            <>
+            <div className="space-y-4">
               <div className="space-y-2">
                 <Label>项目名称</Label>
                 <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="例如：深圳某客户现场实施" />
@@ -256,11 +290,11 @@ export function ProjectsPage() {
               >
                 {createMutation.isPending ? "创建中..." : "创建项目"}
               </Button>
-            </>
+            </div>
           )}
-        </div>
+        </SectionPanel>
       </div>
-    </div>
+    </ListWorkspace>
   );
 }
 
diff --git a/client/src/pages/ReimbursementsPage.tsx b/client/src/pages/ReimbursementsPage.tsx
index 59fb669f..51e1ad0a 100644
--- a/client/src/pages/ReimbursementsPage.tsx
+++ b/client/src/pages/ReimbursementsPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "../api/types";
@@ -11,15 +11,21 @@ import { hasPermission } from "../auth/permissions";
 import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
 import { PageHeader } from "../components/common/PageHeader";
-import { TableSkeleton } from "../components/common/TableSkeleton";
-import { StatusBadge } from "../components/common/StatusBadge";
 import { Pagination } from "../components/common/Pagination";
+import { StatusBadge } from "../components/common/StatusBadge";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
 import { Button } from "../components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
 
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(value);
+}
+
 export function ReimbursementsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { permissions, me } = useAuth();
@@ -47,6 +53,20 @@ export function ReimbursementsPage() {
     queryFn: () => fetchMyDelegations("active"),
   });
 
+  const items = listQuery.data?.items ?? [];
+  const stats = useMemo(() => {
+    return items.reduce(
+      (acc, item) => {
+        acc.currentPageCount += 1;
+        acc.currentPageAmount += Number(item.totalAmount ?? 0);
+        if (item.status === "reviewing") acc.reviewing += 1;
+        if (item.status === "paid") acc.paid += 1;
+        return acc;
+      },
+      { currentPageCount: 0, currentPageAmount: 0, reviewing: 0, paid: 0 },
+    );
+  }, [items]);
+
   const createMutation = useMutation({
     mutationFn: () =>
       createReimbursement({
@@ -87,7 +107,7 @@ export function ReimbursementsPage() {
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
 
   return (
-    <div className="space-y-6">
+    <ListWorkspace>
       <PageHeader
         title="我的报销"
         subtitle="报销列表、详情与提交/撤回/支付动作入口。"
@@ -167,86 +187,62 @@ export function ReimbursementsPage() {
         </p>
       ) : null}
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-        <div className="card-std">
-          <p className="card-title">待我审批</p>
-          <div className="flex items-end justify-between">
-            <h3 className="card-value">12</h3>
-            <div className="flex items-center text-emerald-600 text-xs font-bold mb-1">
-              <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
-              2.4%
-            </div>
-          </div>
-        </div>
-        <div className="card-std">
-          <p className="card-title">已报销总额</p>
-          <div className="flex items-end justify-between">
-            <h3 className="card-value">¥124,500</h3>
-            <div className="flex items-center text-emerald-600 text-xs font-bold mb-1">
-              <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
-              5.1%
-            </div>
-          </div>
-        </div>
-        <div className="card-std">
-          <p className="card-title">异常警报</p>
-          <div className="flex items-end justify-between">
-            <h3 className="card-value">2</h3>
-            <div className="flex items-center text-red-500 text-xs font-bold mb-1">
-              <span className="material-symbols-outlined text-[16px]">arrow_downward</span>
-              1.2%
-            </div>
-          </div>
-        </div>
-      </div>
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard title="当前列表" value={stats.currentPageCount} note={`共 ${listQuery.data?.total ?? 0} 条记录`} />
+        <MetricCard title="当前金额" value={formatCurrency(stats.currentPageAmount)} note="按当前页与筛选统计" />
+        <MetricCard title="审批中" value={stats.reviewing} note="待继续推进的报销单" tone={stats.reviewing > 0 ? "warning" : "neutral"} />
+        <MetricCard title="已支付" value={stats.paid} note={`当前范围：${scope === "all" ? "全范围" : "仅自己"}`} />
+      </section>
 
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
-        <Tabs
-          data-testid="reimbursements-status-tabs"
-          value={status}
-          onValueChange={(value) => setSearchParams({ status: value, page: "1", scope })}
-        >
-          <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
-            {[
-              { value: "draft", label: "草稿" },
-              { value: "reviewing", label: "审批中" },
-              { value: "approved", label: "已通过" },
-              { value: "paid", label: "已支付" },
-              { value: "rejected", label: "已驳回" },
-              { value: "cancelled", label: "已取消" },
-            ].map((item) => (
-              <TabsTrigger
-                data-testid={`reimbursements-tab-${item.value}`}
-                key={item.value}
-                value={item.value}
+      <FilterBar className="space-y-4">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <Tabs
+            data-testid="reimbursements-status-tabs"
+            value={status}
+            onValueChange={(value) => setSearchParams({ status: value, page: "1", scope })}
+          >
+            <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
+              {[
+                { value: "draft", label: "草稿" },
+                { value: "reviewing", label: "审批中" },
+                { value: "approved", label: "已通过" },
+                { value: "paid", label: "已支付" },
+                { value: "rejected", label: "已驳回" },
+                { value: "cancelled", label: "已取消" },
+              ].map((item) => (
+                <TabsTrigger
+                  data-testid={`reimbursements-tab-${item.value}`}
+                  key={item.value}
+                  value={item.value}
+                >
+                  {item.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {canViewAll ? (
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                data-testid="reimbursements-scope-own"
+                variant={scope === "own" ? "default" : "secondary"}
+                onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
+                type="button"
               >
-                {item.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-
-        {canViewAll ? (
-          <div className="flex flex-wrap items-center gap-2">
-            <Button
-              data-testid="reimbursements-scope-own"
-              variant={scope === "own" ? "default" : "secondary"}
-              onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
-              type="button"
-            >
-              仅自己
-            </Button>
-            <Button
-              data-testid="reimbursements-scope-all"
-              variant={scope === "all" ? "default" : "secondary"}
-              onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
-              type="button"
-            >
-              全范围
-            </Button>
-          </div>
-        ) : null}
-      </div>
+                仅自己
+              </Button>
+              <Button
+                data-testid="reimbursements-scope-all"
+                variant={scope === "all" ? "default" : "secondary"}
+                onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
+                type="button"
+              >
+                全范围
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </FilterBar>
 
       {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}
 
@@ -263,71 +259,73 @@ export function ReimbursementsPage() {
       ) : null}
 
       {!listQuery.isLoading && !listQuery.isError ? (
-        <div className="table-container mt-4">
-          <table className="w-full text-left border-collapse" data-testid="reimbursements-table">
-            <thead className="table-header">
-              <tr>
-                <th className="table-th">单号</th>
-                <th className="table-th">状态</th>
-                <th className="table-th">金额</th>
-                <th className="table-th">报销人</th>
-                <th className="table-th">日期</th>
-                <th className="table-th w-24">操作</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-zinc-50">
-              {(listQuery.data?.items ?? []).length ? (
-                listQuery.data?.items.map((item) => (
-                  <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
-                    <td className="table-td">
-                      <div className="font-semibold text-zinc-900">{item.formNumber || item.id}</div>
-                      {item.formNumber && item.formNumber !== item.id && (
-                        <div className="text-xs text-zinc-500">{item.id}</div>
-                      )}
-                      {item.project ? <div className="text-xs text-zinc-500">项目：{item.project.projectNo} · {item.project.name}</div> : null}
-                    </td>
-                    <td className="table-td"><StatusBadge status={item.status} /></td>
-                    <td className="table-td-strong">
-                      {item.totalAmount != null
-                        ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(Number(item.totalAmount))
-                        : "-"}
-                    </td>
-                    <td className="table-td">
-                      <div className="flex items-center gap-2">
-                        <div className="size-6 rounded-full bg-zinc-100 flex items-center justify-center text-[10px] font-bold text-zinc-700 uppercase">
-                          {(item.owner?.name ?? "U").charAt(0)}
+        <>
+          <PrimaryTable>
+            <table className="w-full text-left border-collapse" data-testid="reimbursements-table">
+              <thead className="table-header">
+                <tr>
+                  <th className="table-th">单号</th>
+                  <th className="table-th">状态</th>
+                  <th className="table-th">金额</th>
+                  <th className="table-th">报销人</th>
+                  <th className="table-th">日期</th>
+                  <th className="table-th w-24">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-50">
+                {items.length ? (
+                  items.map((item) => (
+                    <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
+                      <td className="table-td">
+                        <div className="font-semibold text-zinc-900">{item.formNumber || item.id}</div>
+                        {item.formNumber && item.formNumber !== item.id && (
+                          <div className="text-xs text-zinc-500">{item.id}</div>
+                        )}
+                        {item.project ? <div className="text-xs text-zinc-500">项目：{item.project.projectNo} · {item.project.name}</div> : null}
+                      </td>
+                      <td className="table-td"><StatusBadge status={item.status} /></td>
+                      <td className="table-td-strong">
+                        {item.totalAmount != null
+                          ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(Number(item.totalAmount))
+                          : "-"}
+                      </td>
+                      <td className="table-td">
+                        <div className="flex items-center gap-2">
+                          <div className="size-6 rounded-full bg-zinc-100 flex items-center justify-center text-[10px] font-bold text-zinc-700 uppercase">
+                            {(item.owner?.name ?? "U").charAt(0)}
+                          </div>
+                          <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
                         </div>
-                        <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
-                      </div>
-                    </td>
-                    <td className="table-td">{item.reimbursementDate ?? "-"}</td>
-                    <td className="table-td">
-                      <Link to={`/reimbursements/${item.id}`} className="btn-ghost" data-testid="reimbursement-detail-link">
-                        <span className="material-symbols-outlined text-[18px]">more_horiz</span>
-                      </Link>
+                      </td>
+                      <td className="table-td">{item.reimbursementDate ?? "-"}</td>
+                      <td className="table-td">
+                        <Link to={`/reimbursements/${item.id}`} className="btn-ghost" data-testid="reimbursement-detail-link">
+                          <span className="material-symbols-outlined text-[18px]">more_horiz</span>
+                        </Link>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
+                      暂无数据
                     </td>
                   </tr>
-                ))
-              ) : (
-                <tr>
-                  <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
-                    暂无数据
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      ) : null}
+                )}
+              </tbody>
+            </table>
+          </PrimaryTable>
 
-      <div className="mt-4">
-        <Pagination
-          page={page}
-          totalPages={totalPages}
-          onPageChange={(p) => setSearchParams({ status, scope, page: String(p) })}
-          testIdPrefix="reimbursements"
-        />
-      </div>
-    </div>
+          <div className="mt-4">
+            <Pagination
+              page={page}
+              totalPages={totalPages}
+              onPageChange={(p) => setSearchParams({ status, scope, page: String(p) })}
+              testIdPrefix="reimbursements"
+            />
+          </div>
+        </>
+      ) : null}
+    </ListWorkspace>
   );
 }
diff --git a/client/src/pages/TodosPage.tsx b/client/src/pages/TodosPage.tsx
index 68e1db3a..f8a28f1f 100644
--- a/client/src/pages/TodosPage.tsx
+++ b/client/src/pages/TodosPage.tsx
@@ -1,8 +1,11 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { cancelTodo, completeTodo, createTodo, fetchTodos } from "../api/todos";
 import { fetchProjects } from "../api/projects";
 import { PageHeader } from "../components/common/PageHeader";
+import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
@@ -32,6 +35,20 @@ export function TodosPage() {
     queryFn: () => fetchProjects({}),
   });
 
+  const todoItems = todosQuery.data?.items ?? [];
+  const todoStats = useMemo(() => {
+    return todoItems.reduce(
+      (acc, item) => {
+        acc.total += 1;
+        if (item.status === "todo") acc.todo += 1;
+        if (item.status === "doing") acc.doing += 1;
+        if (item.status === "done") acc.done += 1;
+        return acc;
+      },
+      { total: 0, todo: 0, doing: 0, done: 0 },
+    );
+  }, [todoItems]);
+
   const createMutation = useMutation({
     mutationFn: () => createTodo({ title, description: description || undefined, projectId: projectId || null }),
     onSuccess: async () => {
@@ -72,69 +89,116 @@ export function TodosPage() {
   });
 
   return (
-    <div className="space-y-6">
+    <ListWorkspace>
       <PageHeader title="待办" subtitle="员工维护个人待办，老板看高优先级和未完成项。支持直接挂到项目。" />
 
-      <div className="card-std p-6 space-y-4">
-        <div className="grid gap-3 md:grid-cols-4">
-          <Input placeholder="待办标题" value={title} onChange={(event) => setTitle(event.target.value)} />
-          <Input placeholder="补充说明（可选）" value={description} onChange={(event) => setDescription(event.target.value)} />
-          <select className="select-std" value={projectId} onChange={(event) => setProjectId(event.target.value)}>
-            <option value="">不关联项目</option>
-            {(projectsQuery.data?.items ?? []).map((item) => (
-              <option key={item.id} value={item.id}>
-                {item.projectNo} · {item.name}
-              </option>
-            ))}
-          </select>
-          <div className="flex gap-2">
-            <select className="select-std" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as typeof statusFilter)}>
-              <option value="">全部状态</option>
-              <option value="todo">todo</option>
-              <option value="doing">doing</option>
-              <option value="done">done</option>
-              <option value="cancelled">cancelled</option>
-            </select>
-            <Button type="button" onClick={() => createMutation.mutate()} disabled={createMutation.isPending || !title.trim()}>新建待办</Button>
-          </div>
-        </div>
-      </div>
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard title="全部待办" value={todoStats.total} note="当前筛选结果" />
+        <MetricCard title="待处理" value={todoStats.todo} note="建议优先清空新增事项" tone={todoStats.todo > 0 ? "warning" : "neutral"} />
+        <MetricCard title="进行中" value={todoStats.doing} note="重点跟进阻塞项" />
+        <MetricCard title="已完成" value={todoStats.done} note="已完成项会持续留痕" />
+      </section>
 
-      <div className="card-std p-6">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>标题</TableHead>
-              <TableHead>项目</TableHead>
-              <TableHead>负责人</TableHead>
-              <TableHead>优先级</TableHead>
-              <TableHead>状态</TableHead>
-              <TableHead>操作</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {(todosQuery.data?.items ?? []).map((item) => (
-              <TableRow key={item.id}>
-                <TableCell>
-                  <div className="font-medium text-zinc-900">{item.title}</div>
-                  <div className="text-xs text-zinc-500">{item.description ?? "-"}</div>
-                </TableCell>
-                <TableCell>{item.project ? `${item.project.projectNo} · ${item.project.name}` : "-"}</TableCell>
-                <TableCell>{item.assignee?.name ?? "-"}</TableCell>
-                <TableCell>{item.priority}</TableCell>
-                <TableCell>{item.status}</TableCell>
-                <TableCell>
-                  <div className="flex gap-2">
-                    <Button size="sm" type="button" disabled={completeMutation.isPending || item.status === "done"} onClick={() => completeMutation.mutate(item.id)}>完成</Button>
-                    <Button size="sm" variant="secondary" type="button" disabled={cancelMutation.isPending || item.status === "cancelled"} onClick={() => cancelMutation.mutate(item.id)}>取消</Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+      <div className="page-shell-grid">
+        <div className="space-y-6">
+          <FilterBar className="flex flex-wrap items-center justify-between gap-3">
+            <div className="text-sm text-zinc-500">按状态筛选后，列表只保留当前关注的工作项。</div>
+            <div className="flex flex-wrap items-center gap-2">
+              <select className="select-std w-[180px]" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as typeof statusFilter)}>
+                <option value="">全部状态</option>
+                <option value="todo">todo</option>
+                <option value="doing">doing</option>
+                <option value="done">done</option>
+                <option value="cancelled">cancelled</option>
+              </select>
+              <Button type="button" variant="secondary" onClick={() => queryClient.invalidateQueries({ queryKey: ["todos"] })}>
+                刷新列表
+              </Button>
+            </div>
+          </FilterBar>
+
+          <SectionPanel title="待办列表" description={todoItems.length ? `当前共 ${todoItems.length} 条待办` : "暂无待办，建议从当前周计划或项目动作拆出任务。"}>
+            {todosQuery.isError ? <div className="mb-4 text-sm text-red-600">{errorMessage(todosQuery.error, "加载待办失败")}</div> : null}
+            <PrimaryTable>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>标题</TableHead>
+                    <TableHead>项目</TableHead>
+                    <TableHead>负责人</TableHead>
+                    <TableHead>优先级</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {todosQuery.isLoading ? (
+                    <TableRow>
+                      <TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
+                        待办加载中...
+                      </TableCell>
+                    </TableRow>
+                  ) : todoItems.length ? (
+                    todoItems.map((item) => (
+                      <TableRow key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-zinc-900">{item.title}</div>
+                          <div className="text-xs text-zinc-500">{item.description ?? "-"}</div>
+                        </TableCell>
+                        <TableCell>{item.project ? `${item.project.projectNo} · ${item.project.name}` : "-"}</TableCell>
+                        <TableCell>{item.assignee?.name ?? "-"}</TableCell>
+                        <TableCell>{item.priority}</TableCell>
+                        <TableCell>{item.status}</TableCell>
+                        <TableCell>
+                          <div className="flex gap-2">
+                            <Button size="sm" type="button" disabled={completeMutation.isPending || item.status === "done"} onClick={() => completeMutation.mutate(item.id)}>
+                              完成
+                            </Button>
+                            <Button size="sm" variant="secondary" type="button" disabled={cancelMutation.isPending || item.status === "cancelled"} onClick={() => cancelMutation.mutate(item.id)}>
+                              取消
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
+                        当前没有符合条件的待办。
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </PrimaryTable>
+          </SectionPanel>
+        </div>
+
+        <SectionPanel title="新增待办" description="建议把周报计划、项目跟进或临时事项都拆成清晰动作。">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Input placeholder="待办标题" value={title} onChange={(event) => setTitle(event.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Input placeholder="补充说明（可选）" value={description} onChange={(event) => setDescription(event.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <select className="select-std" value={projectId} onChange={(event) => setProjectId(event.target.value)}>
+                <option value="">不关联项目</option>
+                {(projectsQuery.data?.items ?? []).map((item) => (
+                  <option key={item.id} value={item.id}>
+                    {item.projectNo} · {item.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <Button type="button" onClick={() => createMutation.mutate()} disabled={createMutation.isPending || !title.trim()}>
+              {createMutation.isPending ? "新建中..." : "新建待办"}
+            </Button>
+          </div>
+        </SectionPanel>
       </div>
-    </div>
+    </ListWorkspace>
   );
 }
 
diff --git a/client/src/pages/WeeklyReportsPage.tsx b/client/src/pages/WeeklyReportsPage.tsx
index 2cf66c76..5d339774 100644
--- a/client/src/pages/WeeklyReportsPage.tsx
+++ b/client/src/pages/WeeklyReportsPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createTodo } from "../api/todos";
 import { fetchProjects } from "../api/projects";
@@ -6,6 +6,9 @@ import { fetchTeamWeeklyReports, fetchMyWeeklyReport, submitMyWeeklyReport, upda
 import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
+import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
@@ -73,6 +76,11 @@ export function WeeklyReportsPage() {
       nextStepText: item.nextStepText.trim() || undefined,
     }));
 
+  const linkedProjectCount = useMemo(
+    () => projectLinks.filter((item) => item.projectId).length,
+    [projectLinks],
+  );
+
   const saveMutation = useMutation({
     mutationFn: () => updateMyWeeklyReport({ weekStart: weekStart || undefined, ...draft, projectLinks: normalizedProjectLinks }),
     onSuccess: async () => {
@@ -119,40 +127,54 @@ export function WeeklyReportsPage() {
   });
 
   return (
-    <div className="space-y-6">
+    <ListWorkspace>
       <PageHeader title="周报" subtitle="固定三段结构：本周完成、当前阻塞、下周计划，可按项目拆分进展。" />
 
-      <div className="card-std p-6 space-y-4">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="text-sm text-zinc-500">选择周起始日（默认自动按周一归档）</div>
-          <input className="input-std" type="date" value={weekStart} onChange={(event) => setWeekStart(event.target.value)} />
+      <FilterBar className="flex flex-wrap items-center justify-between gap-3">
+        <div className="space-y-1">
+          <div className="text-sm font-medium text-zinc-900">按周归档</div>
+          <div className="text-sm text-zinc-500">默认按周一归档；提交后会同步更新 Portal 与项目摘要。</div>
         </div>
+        <input className="input-std w-[220px]" type="date" value={weekStart} onChange={(event) => setWeekStart(event.target.value)} />
+      </FilterBar>
 
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <label className="text-sm text-zinc-500">本周完成</label>
-            <Textarea value={draft.highlightsText} onChange={(event) => setDraft((prev) => ({ ...prev, highlightsText: event.target.value }))} />
-          </div>
-          <div className="grid gap-2">
-            <label className="text-sm text-zinc-500">当前阻塞</label>
-            <Textarea value={draft.blockersText} onChange={(event) => setDraft((prev) => ({ ...prev, blockersText: event.target.value }))} />
-          </div>
-          <div className="grid gap-2">
-            <label className="text-sm text-zinc-500">下周计划</label>
-            <Textarea value={draft.nextWeekText} onChange={(event) => setDraft((prev) => ({ ...prev, nextWeekText: event.target.value }))} />
-          </div>
-          <label className="flex items-center gap-2 text-sm text-zinc-700">
-            <input type="checkbox" checked={draft.needsHelp} onChange={(event) => setDraft((prev) => ({ ...prev, needsHelp: event.target.checked }))} />
-            需要老板/管理员协助
-          </label>
-        </div>
-      </div>
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard title="当前状态" value={report?.status === "submitted" ? "已提交" : "待完善"} note={report?.submittedAt ? `提交于 ${new Date(report.submittedAt).toLocaleString()}` : "保存后可继续补充"} tone={report?.status === "submitted" ? "neutral" : "warning"} />
+        <MetricCard title="关联项目" value={linkedProjectCount} note={`共 ${projectsQuery.data?.items.length ?? 0} 个我的项目可选`} />
+        <MetricCard title="需协助" value={draft.needsHelp ? "是" : "否"} note="勾选后会在管理首页高亮" tone={draft.needsHelp ? "warning" : "neutral"} />
+        <MetricCard title="团队缺口" value={canViewTeam ? (teamQuery.data?.summary.missingCount ?? 0) : "-"} note={canViewTeam ? `待协助 ${teamQuery.data?.summary.needsHelpCount ?? 0}` : "仅管理员可见"} tone={canViewTeam && (teamQuery.data?.summary.missingCount ?? 0) > 0 ? "warning" : "neutral"} />
+      </section>
 
-      <div className="card-std p-6 space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-semibold text-zinc-900">项目关联</h3>
-          <Button type="button" variant="secondary" onClick={() => setProjectLinks((prev) => [...prev, emptyProjectLink()])}>新增项目进展</Button>
+      <SectionPanel title="本周周报" description="先写本周完成，再补当前阻塞和下周计划。">
+        <div className="space-y-4">
+          {reportQuery.isLoading ? <div className="text-sm text-zinc-500">周报加载中...</div> : null}
+          {reportQuery.isError ? <div className="text-sm text-red-600">{errorMessage(reportQuery.error, "加载周报失败")}</div> : null}
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <label className="text-sm text-zinc-500">本周完成</label>
+              <Textarea value={draft.highlightsText} onChange={(event) => setDraft((prev) => ({ ...prev, highlightsText: event.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <label className="text-sm text-zinc-500">当前阻塞</label>
+              <Textarea value={draft.blockersText} onChange={(event) => setDraft((prev) => ({ ...prev, blockersText: event.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <label className="text-sm text-zinc-500">下周计划</label>
+              <Textarea value={draft.nextWeekText} onChange={(event) => setDraft((prev) => ({ ...prev, nextWeekText: event.target.value }))} />
+            </div>
+            <label className="flex items-center gap-2 text-sm text-zinc-700">
+              <input type="checkbox" checked={draft.needsHelp} onChange={(event) => setDraft((prev) => ({ ...prev, needsHelp: event.target.checked }))} />
+              需要老板/管理员协助
+            </label>
+          </div>
         </div>
+      </SectionPanel>
+
+      <SectionPanel
+        title="项目关联"
+        description="项目进展、风险与下一步动作建议按项目拆开写。"
+        actions={<Button type="button" variant="secondary" onClick={() => setProjectLinks((prev) => [...prev, emptyProjectLink()])}>新增项目进展</Button>}
+      >
         <div className="space-y-4">
           {projectLinks.map((item, index) => (
             <div key={`${item.projectId}-${index}`} className="rounded-lg border border-zinc-200 p-4 space-y-3">
@@ -170,47 +192,58 @@ export function WeeklyReportsPage() {
               <Textarea placeholder="下一步动作" value={item.nextStepText} onChange={(event) => setProjectLinks((prev) => prev.map((entry, entryIndex) => entryIndex === index ? { ...entry, nextStepText: event.target.value } : entry))} />
             </div>
           ))}
+          <div className="flex flex-wrap justify-end gap-2">
+            <Button type="button" variant="secondary" onClick={() => createTodoMutation.mutate()} disabled={createTodoMutation.isPending}>转成待办</Button>
+            <Button type="button" variant="secondary" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>保存草稿</Button>
+            <Button type="button" onClick={() => submitMutation.mutate()} disabled={submitMutation.isPending}>提交周报</Button>
+          </div>
         </div>
-        <div className="flex flex-wrap justify-end gap-2">
-          <Button type="button" variant="secondary" onClick={() => createTodoMutation.mutate()} disabled={createTodoMutation.isPending}>转成待办</Button>
-          <Button type="button" variant="secondary" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>保存草稿</Button>
-          <Button type="button" onClick={() => submitMutation.mutate()} disabled={submitMutation.isPending}>提交周报</Button>
-        </div>
-      </div>
+      </SectionPanel>
 
       {canViewTeam ? (
-        <div className="card-std p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-base font-semibold text-zinc-900">团队汇总</h3>
-            <div className="text-sm text-zinc-500">
-              未提交 {teamQuery.data?.summary.missingCount ?? 0} · 需协助 {teamQuery.data?.summary.needsHelpCount ?? 0}
-            </div>
+        <SectionPanel title="团队汇总" description="帮助老板和管理员先看到未提交与需协助人员。">
+          <div className="mb-4 grid gap-3 md:grid-cols-4">
+            <MetricCard title="团队人数" value={teamQuery.data?.summary.totalEmployees ?? 0} />
+            <MetricCard title="已提交" value={teamQuery.data?.summary.submittedCount ?? 0} />
+            <MetricCard title="未提交" value={teamQuery.data?.summary.missingCount ?? 0} tone={(teamQuery.data?.summary.missingCount ?? 0) > 0 ? "warning" : "neutral"} />
+            <MetricCard title="需协助" value={teamQuery.data?.summary.needsHelpCount ?? 0} tone={(teamQuery.data?.summary.needsHelpCount ?? 0) > 0 ? "warning" : "neutral"} />
           </div>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>成员</TableHead>
-                <TableHead>状态</TableHead>
-                <TableHead>需协助</TableHead>
-                <TableHead>关联项目</TableHead>
-                <TableHead>摘要</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {(teamQuery.data?.items ?? []).map((item) => (
-                <TableRow key={item.employee.id}>
-                  <TableCell>{item.employee.name}</TableCell>
-                  <TableCell>{item.report?.status ?? "missing"}</TableCell>
-                  <TableCell>{item.report?.needsHelp ? "是" : "否"}</TableCell>
-                  <TableCell>{item.report?.projectLinks?.map((link) => link.project?.name ?? link.projectId).join(" / ") || "-"}</TableCell>
-                  <TableCell>{item.report?.highlightsText || item.report?.nextWeekText || item.report?.blockersText || "-"}</TableCell>
+          {teamQuery.isError ? <div className="mb-4 text-sm text-red-600">{errorMessage(teamQuery.error, "加载团队周报失败")}</div> : null}
+          <PrimaryTable>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>成员</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>需协助</TableHead>
+                  <TableHead>关联项目</TableHead>
+                  <TableHead>摘要</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+              </TableHeader>
+              <TableBody>
+                {teamQuery.isLoading ? (
+                  <TableRow>
+                    <TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={5}>
+                      团队周报加载中...
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  (teamQuery.data?.items ?? []).map((item) => (
+                    <TableRow key={item.employee.id}>
+                      <TableCell>{item.employee.name}</TableCell>
+                      <TableCell>{item.report?.status ?? "missing"}</TableCell>
+                      <TableCell>{item.report?.needsHelp ? "是" : "否"}</TableCell>
+                      <TableCell>{item.report?.projectLinks?.map((link) => link.project?.name ?? link.projectId).join(" / ") || "-"}</TableCell>
+                      <TableCell>{item.report?.highlightsText || item.report?.nextWeekText || item.report?.blockersText || "-"}</TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </PrimaryTable>
+        </SectionPanel>
       ) : null}
-    </div>
+    </ListWorkspace>
   );
 }
 
diff --git a/issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv b/issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv
new file mode 100644
index 00000000..1e4e0305
--- /dev/null
+++ b/issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv
@@ -0,0 +1,10 @@
+ID,Title,Description,Acceptance,Test_Method,Tools,Dev_Status,Review1_Status,Regression_Status,Files,Dependencies,Notes
+R29-0,执行合同建档与IA冻结,为前端设计系统与工作台体验重构建立执行合同并冻结主导航首页层级与视觉方向,Issue CSV 校验通过 且主导航首页层级与设计方向冻结,python3 /home/shunli/.codex/skills/plan/scripts/validate_issues_csv.py issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv,manual,DONE,DONE,DONE,issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv,[],none
+R29-1,设计系统基础层,建立语义 token theme scaffold 与基础页面模式并统一按钮页头空状态语义,存在 client/src/design 基础层 且 index.css button pageHeader emptyState 接入新语义体系,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/design/*|client/src/index.css|client/src/components/ui/button.tsx|client/src/components/common/PageHeader.tsx|client/src/components/common/EmptyStateCard.tsx,"[""R29-0""]",不改后端 API
+R29-2,壳层导航与顶栏重构,重构 AppShell Sidebar NavLinks Topbar 形成稳定工作台壳层并固定主导航与管理入口,主导航稳定为九项 管理入口单独分区 备用模块折叠 顶栏结构统一,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/layouts/AppShellLayout.tsx|client/src/components/navigation/Sidebar.tsx|client/src/components/navigation/NavLinks.tsx|client/src/components/navigation/Topbar.tsx|client/src/components/shell/*|client/src/features/navigation/*,"[""R29-1""]",不新增业务路由
+R29-3,登录与个人设置重构,重构登录页与个人设置页的入口体验状态卡与分组结构,登录页主次 CTA 清晰 且 Profile 改为账号与入口设置页 不再直出内部 ID,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/pages/LoginPage.tsx|client/src/layouts/AuthLayout.tsx|client/src/pages/ProfilePage.tsx|client/src/lib/wecomEntry.ts,"[""R29-1"",""R29-2""]",保留现有企微接口
+R29-4,Portal首页重构,重构 Portal 首页为角色化工作台并建立主卡摘要区参考区分层,员工与管理员首页均符合四主卡两摘要区规则 且公告和最近访问降级展示,cd client && npm run typecheck && npm run build && cd ../client && npm run test:e2e:smoke,manual,DONE,DONE,DONE,client/src/pages/PortalHomePage.tsx|client/src/api/portal.ts|client/src/features/portal/*|client/src/components/patterns/*,"[""R29-2"",""R29-3""]",不改 portal API 结构
+R29-5,高频列表页模板化,抽象列表页模式并先应用到报销请假周报待办项目列表页,列表页具备统一 header filter stats table empty 结构 且交互层级一致,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/components/patterns/*|client/src/pages/ReimbursementsPage.tsx|client/src/pages/LeaveRequestPage.tsx|client/src/pages/WeeklyReportsPage.tsx|client/src/pages/TodosPage.tsx|client/src/pages/ProjectsPage.tsx,"[""R29-1"",""R29-4""]",已完成 Projects/Todos/Weekly/Reimbursements/Leave 列表页首批迁移
+R29-6,项目与高频详情页工作台化,建立详情工作台模式并优先重构项目详情报销详情审批详情三类页面,项目详情形成概览执行留痕归档四区 且详情页不再是连续超长表单,cd client && npm run typecheck && npm run build && cd ../client && npm run test:e2e:full,manual,DOING,TODO,TODO,client/src/components/patterns/*|client/src/pages/ProjectDetailPage.tsx|client/src/pages/ReimbursementDetailPage.tsx|client/src/pages/WorkflowTaskDetailPage.tsx,"[""R29-5""]",已完成 ProjectDetailPage 工作台骨架重组；ReimbursementDetail/WorkflowTaskDetail 待迁移
+R29-7,视觉QA自动化与文档收口,补充视觉回归与 UX E2E 并更新发布试点手册,新增 visual-shell visual-portal 用例 且 login portal live smoke 用例完成适配 文档写入设计 QA 检查单,cd client && npm run typecheck && npm run test:e2e:smoke && npm run test:e2e:full,manual,DONE,DONE,DONE,client/tests/e2e/login-portal-ux.spec.ts|client/tests/e2e/wecom-entry.spec.ts|client/tests/e2e/live-smoke.spec.ts|client/tests/e2e/visual-shell.spec.ts|client/tests/e2e/visual-portal.spec.ts|deploy/trialrun/checklist.md|deploy/trialrun/runbook.md|docs/admin-handbook.md,"[""R29-4"",""R29-6""]",视觉快照只覆盖关键页面
+R29-8,回归验证与收口,执行前端构建与关键 E2E 回归并同步合同状态,client typecheck build smoke 和 full E2E 通过 且 R29 issue 状态同步完成,cd client && npm run typecheck && npm run build && npm run test:e2e:smoke && npm run test:e2e:full,manual,DOING,TODO,TODO,issues/2026-03-23_00-10-00-r29-frontend-design-system-rework.csv|client/*,"[""R29-7""]",typecheck/build/smoke-local 通过；full-local 首轮仅 procurement-flow 失败，定向复跑通过，待继续观察稳定性