重构前端 Wave0-2 体验基线（05-28-frontend-ux-redesign）

client/src/components/common/PageHeader.tsx

@@ -13,16 +13,16 @@ type PageHeaderProps = {
 
 export function PageHeader({ title, subtitle, actions, eyebrow, meta, className }: PageHeaderProps) {
   return (
-    <header className={cn("flex flex-col gap-4 md:flex-row md:items-end md:justify-between", className)}>
+    <header className={cn("page-header-shell", className)}>
       <div className="min-w-0 max-w-3xl">
         {eyebrow ? (
-          <div className="text-xs font-bold uppercase text-primary">{eyebrow}</div>
+          <div className="page-header-shell__eyebrow">{eyebrow}</div>
         ) : null}
-        <h1 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)] md:text-3xl">{title}</h1>
-        {subtitle ? <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</p> : null}
+        <h1 className="page-header-shell__title">{title}</h1>
+        {subtitle ? <p className="page-header-shell__subtitle">{subtitle}</p> : null}
         {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
       </div>
-      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+      {actions ? <div className="page-header-shell__actions">{actions}</div> : null}
     </header>
   );
 }

client/src/components/navigation/NavLinks.tsx

@@ -56,6 +56,31 @@ const LEGACY_ACCESSIBLE_LABELS: Record<string, string> = {
   "/assets": "资产台账",
 };
 
+const WORK_NAV_ORDER = ["/portal", "/workflow/tasks", "/reimbursements", "/todos"];
+const BUSINESS_NAV_ORDER = [
+  "/projects",
+  "/contracts-registry",
+  "/purchase-requests",
+  "/assets",
+  "/weekly-reports",
+  "/team",
+  "/announcements",
+  "/leave-requests",
+  "/attendance",
+  "/wecom-approval-archive",
+];
+const FINANCE_NAV_ORDER = ["/payment-batches", "/ap-operations", "/invoice-pool", "/budgets", "/inventory-checks"];
+const MANAGEMENT_NAV_ORDER = [
+  "/people",
+  "/organization",
+  "/system/workspace",
+  "/system/workflow-definitions",
+  "/system/settings",
+  "/system/feature-flags",
+  "/audit-logs",
+];
+const MORE_NAV_ORDER = ["/travel-requests", "/dashboard", "/settings/profile", "/system/cutover", "/system/integrations/erp"];
+
 type ResolvedNavItem = {
   key?: string;
   href: string;
@@ -75,10 +100,8 @@ function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
       onClick={() => onNavigate?.()}
       className={({ isActive }) =>
         cn(
-          "group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition duration-150",
-          isActive
-            ? "bg-primary/10 text-primary ring-1 ring-primary/10"
-            : "text-[var(--color-text-secondary)] hover:bg-slate-50 hover:text-[var(--color-text-primary)]",
+          "group nav-link-item",
+          isActive ? "nav-link-item--active" : "nav-link-item--idle",
         )
       }
     >
@@ -86,10 +109,8 @@ function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
         <>
           <span
             className={cn(
-              "flex size-9 items-center justify-center rounded-lg border text-[20px] transition-colors",
-              isActive
-                ? "border-primary/15 bg-white text-primary"
-                : "border-slate-200 bg-white text-[var(--color-text-tertiary)] group-hover:border-slate-300 group-hover:text-primary",
+              "nav-link-item__icon",
+              isActive ? "nav-link-item__icon--active" : "nav-link-item__icon--idle",
             )}
           >
             <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
@@ -101,17 +122,14 @@ function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
   );
 }
 
-function renderSection(title: string, description: string, items: ResolvedNavItem[], onNavigate?: () => void) {
+function renderSection(title: string, items: ResolvedNavItem[], onNavigate?: () => void) {
   if (!items.length) {
     return null;
   }
 
   return (
-    <section className="space-y-2">
-      <div className="px-3">
-        <div className="text-[11px] font-bold uppercase tracking-[0.2em] text-primary/70">{title}</div>
-        <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{description}</div>
-      </div>
+    <section className="nav-section">
+      <div className="nav-section__label">{title}</div>
       <div className="space-y-1.5">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </section>
   );
@@ -126,10 +144,10 @@ function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void)
     <details className="rounded-2xl border border-slate-200 bg-slate-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-[var(--color-text-primary)]">
         <div>
-          <div>备用模块</div>
-          <div className="mt-0.5 text-xs font-normal text-[var(--color-text-secondary)]">默认收起，不干扰主路径</div>
+          <div>更多</div>
+          <div className="mt-0.5 text-xs font-normal text-[var(--color-text-secondary)]">低频入口和历史模块</div>
         </div>
-        <span className="text-xs font-medium text-[var(--color-text-tertiary)]">按需展开</span>
+        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">expand_more</span>
       </summary>
       <div className="mt-3 space-y-1.5 pb-1">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </details>
@@ -186,6 +204,41 @@ function normalizeSections(sections: { main: NavigationItem[]; admin: Navigation
   };
 }
 
+function regroupSections(sections: { main: ResolvedNavItem[]; admin: ResolvedNavItem[]; backup: ResolvedNavItem[] }) {
+  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);
+    }
+  }
+
+  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));
+
+  return {
+    work: take(WORK_NAV_ORDER),
+    business: take(BUSINESS_NAV_ORDER),
+    finance: take(FINANCE_NAV_ORDER),
+    management: take(MANAGEMENT_NAV_ORDER),
+    more: [
+      ...take(MORE_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 { me, permissions } = useAuth();
   const navigationQuery = useQuery({
@@ -197,12 +250,15 @@ export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const sections = navigationQuery.data?.sections
     ? normalizeSections(navigationQuery.data.sections)
     : buildFallbackItems(permissions, me?.roleCodes ?? []);
+  const groupedSections = regroupSections(sections);
 
   return (
     <nav className="space-y-5">
-      {renderSection("主导航", "今日工作与高频协同。", sections.main, onNavigate)}
-      {renderSection("管理入口", "仅管理员与负责人使用。", sections.admin, onNavigate)}
-      {renderBackupSection(sections.backup, onNavigate)}
+      {renderSection("工作", groupedSections.work, onNavigate)}
+      {renderSection("业务", groupedSections.business, onNavigate)}
+      {renderSection("财务", groupedSections.finance, onNavigate)}
+      {renderSection("管理", groupedSections.management, onNavigate)}
+      {renderBackupSection(groupedSections.more, onNavigate)}
     </nav>
   );
 }

client/src/components/navigation/Sidebar.tsx

@@ -3,15 +3,15 @@ import { NavLinks } from "./NavLinks";
 
 export function Sidebar() {
   return (
-    <aside className="fixed inset-y-0 z-20 hidden w-72 overflow-hidden border-r border-slate-200 bg-white/96 shadow-[8px_0_24px_rgba(15,23,42,0.045)] lg:flex lg:flex-col">
+    <aside className="app-shell-sidebar fixed inset-y-0 z-20 hidden w-72 overflow-hidden border-r border-slate-200 lg:flex lg:flex-col">
       <div className="border-b border-slate-200 px-6 py-5">
         <AppBrand />
-        <div className="mt-4 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-3 text-sm text-[var(--color-text-secondary)]">
+        <div className="sidebar-focus-card mt-4 text-[var(--color-text-secondary)]">
           <div className="flex items-center gap-2 font-semibold text-[var(--color-text-primary)]">
             <span className="size-2 rounded-full bg-primary" />
-            今日工作台
+            今日优先
           </div>
-          <div className="mt-1.5 leading-6">待处理、团队状态和常用入口。</div>
+          <div className="mt-1.5 leading-6">先处理待办，再进入报销、项目和财务流程。</div>
         </div>
       </div>
 

client/src/components/navigation/Topbar.tsx

@@ -135,8 +135,8 @@ export function Topbar() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-slate-200/80 bg-white/94 px-4 py-3 shadow-[0_4px_14px_rgba(15,23,42,0.035)] sm:px-8">
-        <div className="flex items-center justify-between gap-4">
+      <header className="app-topbar sticky top-0 z-10 px-4 py-2.5 sm:px-8">
+        <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-3">
             <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
               <DialogTrigger asChild>
@@ -164,9 +164,11 @@ export function Topbar() {
             </Dialog>
 
             <div className="min-w-0">
-              <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary/70">{pageMeta.group}</div>
-              <div className="mt-1 flex flex-wrap items-center gap-2">
-                <p className="truncate text-lg font-semibold text-[var(--color-text-primary)]">{pageMeta.title}</p>
+              <div className="flex flex-wrap items-center gap-2">
+                <p className="truncate text-base font-semibold text-[var(--color-text-primary)] md:text-lg">{pageMeta.title}</p>
+                <span className="hidden rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-[var(--color-text-secondary)] sm:inline-flex">
+                  {pageMeta.group}
+                </span>
                 {wecomEntry ? (
                   <span
                     className="badge-neutral border-primary-200 bg-primary-50 text-primary"
@@ -176,7 +178,7 @@ export function Topbar() {
                   </span>
                 ) : null}
               </div>
-              <div className="mt-1 text-sm text-[var(--color-text-secondary)]">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
+              <div className="mt-0.5 text-xs text-[var(--color-text-secondary)]">{me ? `${me.name} · 当前工作区` : "海音达 OA"}</div>
             </div>
           </div>
 
@@ -187,10 +189,11 @@ export function Topbar() {
               type="button"
               onClick={() => setSearchOpen(true)}
               data-testid="global-search-trigger"
-              className="hidden md:inline-flex"
+              className="app-command-button hidden md:inline-flex"
             >
               <span className="material-symbols-outlined mr-1 text-[18px]">search</span>
               搜索
+              <span className="ml-2 rounded bg-white px-1.5 py-0.5 text-[11px] text-slate-500">Ctrl K</span>
             </Button>
 
             <Button
@@ -199,7 +202,7 @@ export function Topbar() {
               type="button"
               onClick={() => setSearchOpen(true)}
               data-testid="global-search-trigger-mobile"
-              className="md:hidden"
+              className="app-command-button md:hidden"
               aria-label="打开搜索"
             >
               <span className="material-symbols-outlined text-[18px]">search</span>
@@ -213,7 +216,7 @@ export function Topbar() {
                   aria-label="通知"
                   type="button"
                   data-testid="notifications-bell"
-                  className="relative"
+                  className="app-command-button relative"
                 >
                   <BellIcon />
                   {unreadCount > 0 ? (

client/src/components/patterns/ListWorkspace.tsx

@@ -21,14 +21,14 @@ export function ListWorkspace({ className, children }: WorkspaceChildrenProps) {
 
 export function WorkspaceHeader({ eyebrow, title, subtitle, meta, actions, className }: WorkspaceHeaderProps) {
   return (
-    <header className={cn("flex flex-col gap-3 md:flex-row md:items-end md:justify-between", className)}>
+    <header className={cn("page-header-shell", className)}>
       <div className="min-w-0 max-w-3xl">
-        {eyebrow ? <div className="text-xs font-bold uppercase text-primary">{eyebrow}</div> : null}
-        <h1 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)] md:text-[1.65rem]">{title}</h1>
-        {subtitle ? <div className="mt-1.5 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</div> : null}
+        {eyebrow ? <div className="page-header-shell__eyebrow">{eyebrow}</div> : null}
+        <h1 className="page-header-shell__title">{title}</h1>
+        {subtitle ? <div className="page-header-shell__subtitle">{subtitle}</div> : null}
         {meta ? <div className="mt-2.5 flex flex-wrap gap-2">{meta}</div> : null}
       </div>
-      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 md:justify-end">{actions}</div> : null}
+      {actions ? <div className="page-header-shell__actions">{actions}</div> : null}
     </header>
   );
 }

client/src/features/navigation/schema.ts

@@ -4,27 +4,27 @@ export const BACKUP_NAV_ORDER = ["/attendance", "/wecom-approval-archive", "/con
 
 const PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [
   { path: "/portal", title: "工作台", group: "工作台" },
-  { path: "/announcements", title: "公告", group: "主导航" },
-  { path: "/team", title: "团队", group: "主导航" },
-  { path: "/attendance", title: "考勤", group: "备用模块" },
-  { path: "/wecom-approval-archive", title: "企微审批历史", group: "备用模块" },
-  { path: "/projects", title: "项目", group: "主导航" },
-  { path: "/contracts-registry", title: "合同台账", group: "备用模块" },
-  { path: "/purchase-requests", title: "采购申请", group: "备用模块" },
-  { path: "/travel-requests", title: "差旅申请", group: "备用模块" },
-  { path: "/budgets", title: "预算管理", group: "备用模块" },
-  { path: "/payment-batches", title: "付款批次", group: "备用模块" },
-  { path: "/ap-operations", title: "应付作业", group: "备用模块" },
-  { path: "/invoice-pool", title: "票据中心", group: "备用模块" },
-  { path: "/inventory-checks", 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: "/announcements", title: "公告", group: "业务" },
+  { path: "/team", title: "团队", group: "业务" },
+  { path: "/attendance", title: "考勤", group: "业务" },
+  { path: "/wecom-approval-archive", title: "企微审批历史", group: "业务" },
+  { path: "/projects", title: "项目", group: "业务" },
+  { path: "/contracts-registry", title: "合同台账", group: "业务" },
+  { path: "/purchase-requests", title: "采购申请", group: "业务" },
+  { path: "/travel-requests", title: "差旅申请", group: "更多" },
+  { path: "/budgets", title: "预算管理", group: "财务" },
+  { path: "/payment-batches", title: "付款批次", group: "财务" },
+  { path: "/ap-operations", title: "应付作业", group: "财务" },
+  { path: "/invoice-pool", title: "票据中心", group: "财务" },
+  { path: "/inventory-checks", 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: "/mobile/assets/scan", title: "移动资产扫描", group: "移动工作台" },
   { path: "/mobile/approvals", title: "移动审批", group: "移动工作台" },
   { path: "/mobile/wecom-approval-archive", title: "移动企微审批历史", group: "移动工作台" },
@@ -36,17 +36,17 @@ const PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [
   { path: "/mobile/reimbursements", title: "移动报销", group: "移动工作台" },
   { path: "/mobile", title: "移动首页", group: "移动工作台" },
   { path: "/settings/profile", title: "个人设置", group: "账号设置" },
-  { path: "/system/workspace", title: "工作区设置", group: "管理入口" },
-  { path: "/people", title: "人员管理", group: "管理入口" },
-  { path: "/organization", title: "组织架构", group: "管理入口" },
-  { path: "/system/approval-rules", title: "审批规则", group: "管理入口" },
-  { path: "/system/workflow-definitions", title: "流程定义", group: "管理入口" },
-  { path: "/system/settings", title: "系统设置", group: "管理入口" },
-  { path: "/system/feature-flags", title: "功能开关", group: "管理入口" },
-  { path: "/system/cutover", title: "切换控制台", group: "管理入口" },
-  { path: "/system/integrations/erp", title: "ERP 集成", group: "管理入口" },
-  { path: "/dashboard", title: "数据看板", group: "备用模块" },
-  { path: "/audit-logs", title: "审计日志", group: "管理入口" },
+  { path: "/system/workspace", title: "工作区设置", group: "管理" },
+  { path: "/people", title: "人员管理", group: "管理" },
+  { path: "/organization", title: "组织架构", group: "管理" },
+  { path: "/system/approval-rules", title: "审批规则", group: "管理" },
+  { path: "/system/workflow-definitions", title: "流程定义", group: "管理" },
+  { path: "/system/settings", title: "系统设置", group: "管理" },
+  { path: "/system/feature-flags", title: "功能开关", group: "管理" },
+  { path: "/system/cutover", title: "切换控制台", group: "更多" },
+  { path: "/system/integrations/erp", title: "ERP 集成", group: "更多" },
+  { path: "/dashboard", title: "数据看板", group: "更多" },
+  { path: "/audit-logs", title: "审计日志", group: "管理" },
 ];
 
 export function resolvePageMeta(pathname: string) {

client/src/index.css

@@ -23,7 +23,8 @@
   body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
-    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 16rem, #eef2f6 100%);
+    background:
+      linear-gradient(180deg, #f8fafc 0%, #f3f6f8 22rem, #eef2f6 100%);
     background-attachment: fixed;
     color: var(--color-text-primary);
     @apply font-sans antialiased selection:bg-primary selection:text-white;
@@ -40,8 +41,24 @@
 }
 
 @layer components {
+  .app-shell {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76)),
+      var(--color-bg-canvas);
+  }
+
+  .app-shell-sidebar {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 10px 0 26px rgba(15, 23, 42, 0.052);
+  }
+
+  .app-shell-main {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(241, 245, 249, 0.36));
+  }
+
   .layout-container {
-    @apply mx-auto w-full px-0 sm:px-1 lg:px-2;
+    @apply mx-auto w-full max-w-[1680px] px-0 sm:px-1 lg:px-2;
   }
 
   .page-scaffold {
@@ -49,6 +66,92 @@
     @apply space-y-4 md:space-y-5;
   }
 
+  .page-header-shell {
+    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
+    @apply flex flex-col gap-3 pb-3 md:flex-row md:items-end md:justify-between;
+  }
+
+  .page-header-shell__eyebrow {
+    color: var(--color-accent-primary);
+    @apply text-xs font-bold uppercase;
+  }
+
+  .page-header-shell__title {
+    color: var(--color-text-primary);
+    @apply mt-1 text-2xl font-semibold md:text-[1.7rem];
+  }
+
+  .page-header-shell__subtitle {
+    color: var(--color-text-secondary);
+    @apply mt-1.5 max-w-3xl text-sm leading-6;
+  }
+
+  .page-header-shell__actions {
+    @apply flex shrink-0 flex-wrap items-center gap-2 md:justify-end;
+  }
+
+  .app-topbar {
+    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
+    background: rgba(255, 255, 255, 0.93);
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
+    backdrop-filter: blur(16px);
+  }
+
+  .app-command-button {
+    border-color: rgba(203, 213, 225, 0.96);
+    background: rgba(248, 250, 252, 0.92);
+    @apply border;
+  }
+
+  .sidebar-focus-card {
+    border: 1px solid rgba(203, 213, 225, 0.88);
+    background:
+      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.88));
+    @apply overflow-hidden rounded-lg px-3.5 py-3 text-sm;
+  }
+
+  .nav-section {
+    @apply space-y-1.5;
+  }
+
+  .nav-section__label {
+    color: var(--color-text-tertiary);
+    @apply px-3 text-[11px] font-bold uppercase;
+  }
+
+  .nav-link-item {
+    @apply flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm transition duration-150;
+  }
+
+  .nav-link-item--active {
+    background: rgba(0, 57, 138, 0.08);
+    color: var(--color-accent-primary);
+    box-shadow: inset 3px 0 0 var(--color-accent-primary);
+  }
+
+  .nav-link-item--idle {
+    color: var(--color-text-secondary);
+    @apply hover:bg-slate-50 hover:text-slate-950;
+  }
+
+  .nav-link-item__icon {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-md text-[19px] transition-colors;
+  }
+
+  .nav-link-item--active .nav-link-item__icon {
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--color-accent-primary);
+  }
+
+  .nav-link-item--idle .nav-link-item__icon {
+    background: rgba(241, 245, 249, 0.82);
+    color: var(--color-text-tertiary);
+  }
+
+  .nav-link-item--idle:hover .nav-link-item__icon {
+    color: var(--color-accent-primary);
+  }
+
   .auth-shell {
     background:
       radial-gradient(circle at 20% 12%, rgba(0, 57, 138, 0.10), transparent 26rem),
@@ -321,6 +424,28 @@
     @apply block px-3.5 py-3.5 transition duration-150 hover:border-slate-300 hover:bg-white;
   }
 
+  .ux-step-list {
+    @apply grid gap-2;
+  }
+
+  .ux-step-item {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(248, 250, 252, 0.84);
+    @apply flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm;
+  }
+
+  .ux-step-item__index {
+    background: rgba(0, 57, 138, 0.08);
+    color: var(--color-accent-primary);
+    @apply flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold;
+  }
+
+  .ux-command-note {
+    border-color: rgba(203, 213, 225, 0.9);
+    background: rgba(248, 250, 252, 0.82);
+    @apply rounded-lg border px-3 py-2 text-xs leading-5 text-slate-600;
+  }
+
   .metric-card::before {
     position: absolute;
     inset: 0 auto 0 0;

client/src/layouts/AppShellLayout.tsx

@@ -59,11 +59,11 @@ export function AppShellLayout() {
   }
 
   return (
-    <div className="relative flex min-h-screen overflow-hidden bg-[var(--color-bg-canvas)]">
+    <div className="app-shell relative flex min-h-screen overflow-hidden">
       {isMobileRoute ? null : <Sidebar />}
 
       <main
-        className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "hyb-mobile-shell overflow-hidden" : "lg:ml-72"}`}
+        className={`app-shell-main flex min-w-0 flex-1 flex-col ${isMobileRoute ? "hyb-mobile-shell overflow-hidden" : "lg:ml-72"}`}
         style={isMobileRoute ? { height: "var(--mobile-viewport-height, 100vh)", maxHeight: "var(--mobile-viewport-height, 100vh)", minHeight: "var(--mobile-viewport-height, 100vh)" } : undefined}
       >
         {isMobileRoute ? null : <Topbar />}

client/src/pages/ForgotPasswordPage.tsx

@@ -115,7 +115,7 @@ export function ForgotPasswordPage() {
   return (
     <AuthPanel
       title="找回密码"
-      subtitle="使用账号邮箱接收验证码"
+      subtitle="用企业邮箱验证码重置"
       data-testid="forgot-password-page"
       footer={(
         <Link className="font-medium text-primary hover:underline" to="/login">
@@ -123,6 +123,17 @@ export function ForgotPasswordPage() {
         </Link>
       )}
     >
+      <div className="ux-step-list mb-5">
+        <div className="ux-step-item">
+          <span className="ux-step-item__index">1</span>
+          <span>输入账号绑定的企业邮箱，系统发送 6 位验证码。</span>
+        </div>
+        <div className="ux-step-item">
+          <span className="ux-step-item__index">2</span>
+          <span>填写验证码和新密码；验证码 10 分钟内有效。</span>
+        </div>
+      </div>
+
       <form className="space-y-4" onSubmit={handleRequestCode}>
         <div className="space-y-2">
           <Label htmlFor="forgot-password-email">邮箱</Label>

client/src/pages/LoginPage.tsx

@@ -366,8 +366,14 @@ export function LoginPage() {
   }
 
   return (
-    <AuthPanel title="登录工作台" subtitle={showWecomPrimary ? "企业微信优先入口" : "账号、邮箱或企业微信"}>
+    <AuthPanel title="海音达 OA" subtitle={showWecomPrimary ? "企业微信环境优先免登" : "选择一种方式进入工作台"}>
       <div className="space-y-4">
+        {!showWecomPrimary ? (
+          <div className="ux-command-note">
+            员工日常建议用企业邮箱验证码；固定办公电脑可使用账号密码。企业微信免登需要从企业微信工作台打开。
+          </div>
+        ) : null}
+
         {wecomNotice ? (
           <div className={`rounded-lg border px-3.5 py-2.5 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
             <div className="font-medium">{wecomNotice.title}</div>
@@ -406,7 +412,7 @@ export function LoginPage() {
               type="button"
               onClick={() => selectLoginMode("password")}
             >
-              密码登录
+              账号密码
             </button>
             <button
               aria-pressed={loginMode === "email_code"}
@@ -430,7 +436,7 @@ export function LoginPage() {
           <div className="space-y-3">
             <div className="flex items-center gap-3 text-xs text-slate-400">
               <span className="h-px flex-1 bg-slate-100" />
-              <span>其他登录方式</span>
+              <span>企业入口</span>
               <span className="h-px flex-1 bg-slate-100" />
             </div>
 

client/src/pages/NotificationsPage.tsx

@@ -4,11 +4,10 @@ import { toast } from "sonner";
 import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../api/notifications";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
-import { PageHeader } from "../components/common/PageHeader";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
-import { PageScaffold } from "../components/patterns/PageScaffold";
+import { FilterBar, ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { resolveNotificationTargetLink } from "../lib/notificationLinks";
 import { resolveErrorMessage } from "../lib/resolveErrorMessage";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
@@ -79,10 +78,11 @@ export function NotificationsPage() {
   const notificationItems = listQuery.data?.items ?? [];
 
   return (
-    <PageScaffold>
-      <PageHeader
-        title="通知"
-        subtitle="事件、待办和业务直达入口。"
+    <ListWorkspace>
+      <WorkspaceHeader
+        eyebrow="通知"
+        title="通知中心"
+        subtitle="这里是事件收件箱；需要处理的事项会直达业务详情或审批任务。"
         actions={
           <>
             <Button
@@ -95,13 +95,13 @@ export function NotificationsPage() {
               全部标为已读
             </Button>
             <Button asChild variant="secondary" data-testid="notifications-back">
-              <Link to="/dashboard">返回仪表盘</Link>
+              <Link to="/portal">返回工作台</Link>
             </Button>
           </>
         }
       />
 
-      <div className="card-std space-y-4 p-4 md:p-5">
+      <FilterBar className="ops-command-bar !p-3 md:!p-3.5">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-col gap-3 md:flex-row md:items-center">
             <Tabs
@@ -128,7 +128,7 @@ export function NotificationsPage() {
               <span>类型</span>
               <select
                 data-testid="notifications-type-filter"
-                className="h-10 min-w-40 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 shadow-sm outline-none transition focus:border-zinc-300 focus:ring-2 focus:ring-zinc-100"
+                className="select-sm min-w-40"
                 value={selectedType}
                 onChange={(event) =>
                   updateFilters({
@@ -151,20 +151,21 @@ export function NotificationsPage() {
             <span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
           </div>
         </div>
+      </FilterBar>
 
-        {listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}
+      {listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}
 
-        {listQuery.isError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {isApiError(listQuery.error)
-              ? `${listQuery.error.code}: ${mapApiErrorMessage(
-                  listQuery.error.code,
-                  listQuery.error.details,
-                  listQuery.error.message,
-                )}`
-              : "加载通知失败"}
-          </p>
-        ) : null}
+      {listQuery.isError ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          {isApiError(listQuery.error)
+            ? `${listQuery.error.code}: ${mapApiErrorMessage(
+                listQuery.error.code,
+                listQuery.error.details,
+                listQuery.error.message,
+              )}`
+            : "加载通知失败"}
+        </p>
+      ) : null}
 
         {!listQuery.isLoading && !listQuery.isError ? (
           <>
@@ -275,7 +276,6 @@ export function NotificationsPage() {
           }
           testIdPrefix="notifications"
         />
-      </div>
-    </PageScaffold>
+    </ListWorkspace>
   );
 }

client/src/pages/PortalHomePage.tsx

@@ -691,7 +691,8 @@ function QuickActionsPanel({
 }) {
   return (
     <SectionPanel
-      title="常用"
+      title="常用动作"
+      description={layout === "rail" ? "从这里开始当天的主要操作。" : undefined}
       className={layout === "rail" ? "portal-panel-fill" : undefined}
     >
       <div className={layout === "rail" ? "portal-action-stack" : "grid gap-3 sm:grid-cols-2 xl:grid-cols-4"}>
@@ -718,7 +719,8 @@ function TodoAggregatePanel({ items }: { items: TodoAggregateItem[] }) {
 
   return (
     <SectionPanel
-      title="待处理"
+      title="今天先处理"
+      description="审批、TODO 和异常提醒集中在这里。"
       className="portal-panel-fill"
     >
       <div className="space-y-3">
@@ -1121,12 +1123,12 @@ export function PortalHomePage() {
         title={`你好，${payload.greeting.name}`}
         className="workbench-hero--compact"
         subtitle={roleCapabilities.canUseFinance
-          ? "付款、风险、审批。"
-          : roleCapabilities.canManageSystem
-            ? "配置、审计、通知。"
+              ? "付款、风险、审批。"
+            : roleCapabilities.canManageSystem
+            ? "先看待处理，再进入配置、审计和通知。"
             : isManagerView
-              ? "审批、团队、周报。"
-              : "待办、申请、考勤。"}
+              ? "先处理审批，再看团队状态和周报缺口。"
+              : "先看待办，再提交申请、补材料或查看状态。"}
         actions={
           !payload.workspace.persisted && canSetupWorkspace ? (
             <Button asChild variant="secondary" type="button">

client/src/pages/ReimbursementDetailPage.tsx

@@ -976,7 +976,7 @@ export function ReimbursementDetailPage() {
       {downloadReasonDialog}
       <EntityOverviewHero
         title={`报销详情 ${displayCode}`}
-        subtitle="状态、票据、审批和付款集中处理。"
+        subtitle="先确认当前状态和下一步，再处理明细、发票、附件和审批记录。"
         meta={(
           <>
             <StatusBadge status={detail.status} />
@@ -992,7 +992,7 @@ export function ReimbursementDetailPage() {
               <Link to={`/reimbursements/${detail.id}/print`}>打印 / PDF</Link>
             </Button>
             <Button asChild variant="secondary" data-testid="reimbursement-back">
-              <Link to="/reimbursements">返回列表</Link>
+              <Link to="/reimbursements">报销列表</Link>
             </Button>
             {canRemindPendingWorkflow && pendingTaskId ? (
               <Button
@@ -1022,7 +1022,7 @@ export function ReimbursementDetailPage() {
 
       <div className="detail-workspace-grid">
         <div className="space-y-5">
-          <SectionPanel title="办理摘要">
+          <SectionPanel title="当前状态与下一步" description="提交、付款、附件和审批依据集中在本页处理。">
             <div className="space-y-4" data-testid="reimbursement-overview">
               <StatStrip columns={4} className="ops-status-strip">
                 <MetricCard
@@ -1168,8 +1168,8 @@ export function ReimbursementDetailPage() {
             <div className="space-y-4 text-sm">
               <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                 <div className="space-y-1">
-                  <h3 className="text-base font-semibold text-zinc-900">附件材料</h3>
-                  <p className="text-xs text-zinc-500">支付截图、合同、订单或情况说明，不参与发票识别。</p>
+                  <h3 className="text-base font-semibold text-zinc-900">补充附件</h3>
+                  <p className="text-xs text-zinc-500">合同、订单、支付截图或情况说明；敏感附件下载会要求填写用途。</p>
                 </div>
                 {canEditItems ? (
                   <div className="flex flex-col gap-2 md:flex-row md:items-center">
@@ -1245,14 +1245,14 @@ export function ReimbursementDetailPage() {
             </div>
           </SectionPanel>
 
-          <SectionPanel title="明细与票据">
+          <SectionPanel title="明细与发票" description="明细决定金额，发票决定提交完整性。">
             <div className="space-y-4">
               <div className="space-y-4" data-testid="reimbursement-items">
-        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <div className="space-y-1">
-            <h3 className="text-base font-semibold text-zinc-900">报销明细</h3>
-            <p className="text-xs text-zinc-500">明细变更会自动重算总金额。</p>
-          </div>
+                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                  <div className="space-y-1">
+                    <h3 className="text-base font-semibold text-zinc-900">报销明细</h3>
+                    <p className="text-xs text-zinc-500">明细变更会自动重算总金额。</p>
+                  </div>
 
           {canEditItems ? (
             <Button
@@ -1399,6 +1399,7 @@ export function ReimbursementDetailPage() {
                 <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                   <div className="space-y-1">
                     <h3 className="text-base font-semibold text-zinc-900">发票</h3>
+                    <p className="mt-1 text-xs text-zinc-500">提交前至少添加 1 张发票；重复或不可用发票会给出原因。</p>
                   </div>
                   {canOpenInvoiceBindDialog ? (
                     <Button

client/src/pages/ReimbursementsPage.tsx

@@ -29,7 +29,7 @@ import { Pagination } from "../components/common/Pagination";
 import { ActionConfirmDialog } from "../components/common/ActionConfirmDialog";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { TableSkeleton } from "../components/common/TableSkeleton";
-import { FilterBar, ListWorkspace, PrimaryTable, StatStrip, WorkspaceHeader } from "../components/patterns/ListWorkspace";
+import { FilterBar, ListWorkspace, PrimaryTable, StatStrip, WorkspaceHeader, WorkspaceNotice } from "../components/patterns/ListWorkspace";
 import { MetricCard } from "../components/patterns/MetricCard";
 import { Button } from "../components/ui/button";
 import {
@@ -362,8 +362,9 @@ export function ReimbursementsPage() {
   return (
     <ListWorkspace>
       <WorkspaceHeader
-        title="我的报销"
-        subtitle="单据、金额、状态。"
+        eyebrow="报销"
+        title={scope === "all" ? "报销列表" : "我的报销"}
+        subtitle="先看状态和金额，再继续编辑、查看详情、导出或批量处理。"
         actions={
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             {canCreateExpense ? (
@@ -594,6 +595,16 @@ export function ReimbursementsPage() {
         ) : null}
       </FilterBar>
 
+      {status === "draft" ? (
+        <WorkspaceNotice title="草稿可以继续编辑或删除" tone="neutral">
+          提交后的单据进入审批链；已通过、已支付单据不再提供删除入口。
+        </WorkspaceNotice>
+      ) : status === "reviewing" ? (
+        <WorkspaceNotice title="审批中单据以详情页为主" tone="neutral">
+          查看当前节点、票据、附件和审批历史后再处理；有批量权限时只会选择你可处理的待办。
+        </WorkspaceNotice>
+      ) : null}
+
       {listQuery.isLoading ? <TableSkeleton columns={batchMode ? 7 : 6} rows={5} /> : null}
 
       {listQuery.isError ? (

client/src/pages/WorkflowTasksPage.tsx

@@ -21,6 +21,7 @@ import {
   StatStrip,
   WorkspaceEmptyState,
   WorkspaceHeader,
+  WorkspaceNotice,
 } from "../components/patterns/ListWorkspace";
 import { MetricCard } from "../components/patterns/MetricCard";
 import { Button } from "../components/ui/button";
@@ -209,7 +210,7 @@ export function WorkflowTasksPage() {
       <WorkspaceHeader
         eyebrow="审批"
         title="审批中心"
-        subtitle="任务、节点、业务状态。"
+        subtitle="先看待处理，再进入详情核对依据；快速通过前仍会弹出确认。"
       />
 
       <div data-testid="workflow-task-summary">
@@ -272,19 +273,25 @@ export function WorkflowTasksPage() {
         </div>
       </FilterBar>
 
-        {query.isLoading ? <TableSkeleton columns={7} rows={5} /> : null}
+      {status === "pending" ? (
+        <WorkspaceNotice title="处理原则" tone="neutral">
+          先看业务编号、申请人、金额/天数和当前节点；需要查看附件、审批历史或驳回原因时进入详情页。
+        </WorkspaceNotice>
+      ) : null}
 
-        {query.isError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {isApiError(query.error)
-              ? `${query.error.code}: ${mapApiErrorMessage(
-                  query.error.code,
-                  query.error.details,
-                  query.error.message,
-                )}`
-              : "加载待办失败，请稍后重试"}
-          </p>
-        ) : null}
+      {query.isLoading ? <TableSkeleton columns={7} rows={5} /> : null}
+
+      {query.isError ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          {isApiError(query.error)
+            ? `${query.error.code}: ${mapApiErrorMessage(
+                query.error.code,
+                query.error.details,
+                query.error.message,
+              )}`
+            : "加载待办失败，请稍后重试"}
+        </p>
+      ) : null}
 
         {!query.isLoading && !query.isError ? (
           <>
@@ -347,7 +354,7 @@ export function WorkflowTasksPage() {
                   </article>
                 ))
               ) : (
-                <WorkspaceEmptyState />
+                <WorkspaceEmptyState>当前筛选下没有审批任务。</WorkspaceEmptyState>
               )}
             </div>
 
@@ -410,7 +417,7 @@ export function WorkflowTasksPage() {
                   ) : (
                     <TableRow>
                       <TableCell className="px-6 py-8 text-center text-zinc-500" colSpan={8}>
-                        暂无数据
+                        当前筛选下没有审批任务
                       </TableCell>
                     </TableRow>
                   )}

client/tests/e2e/login-portal-ux.spec.ts

@@ -530,11 +530,11 @@ test("Portal 员工视角优先显示今日动作顺序", async ({ page }) => {
   await expect(page.getByRole("tab", { name: "公告" })).toBeVisible();
   await expect(page.getByRole("heading", { name: "常用" })).toBeVisible();
   await expect(page.getByRole("heading", { name: "团队状态" })).toBeVisible();
-  await expect(page.getByRole("heading", { name: "待处理" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "今天先处理" })).toBeVisible();
   await expect(page.getByRole("heading", { name: "通知" })).toBeVisible();
 });
 
-test("Portal 管理视角重排正确，备用模块默认折叠", async ({ page }) => {
+test("Portal 管理视角重排正确，更多入口默认折叠", async ({ page }) => {
   await mockPasswordLogin(page);
   await mockNavigation(page, "manager");
   await mockPortalHome(page, "manager");
@@ -558,9 +558,10 @@ test("Portal 管理视角重排正确，备用模块默认折叠", async ({ page
 
   await expect(page.locator("summary").filter({ hasText: "角色重点" })).toBeVisible();
   await expect(page.getByText("试点观测摘要")).toBeVisible();
-  await expect(page.getByRole("link", { name: "采购申请" })).not.toBeVisible();
-  await page.locator("summary").filter({ hasText: "备用模块" }).click();
   await expect(page.getByRole("link", { name: "采购申请" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "差旅申请" })).not.toBeVisible();
+  await page.locator("summary").filter({ hasText: "更多" }).click();
+  await expect(page.getByRole("link", { name: "差旅申请" })).toBeVisible();
 });
 
 test("Portal 新员工引导先显示欢迎弹窗，再显示快速上手清单", async ({ page }) => {