优化PC核心工作流视觉 Wave2（05-27-pc-core-workflow-visual-wave2）

client/src/pages/ReimbursementsPage.tsx

@@ -363,7 +363,7 @@ export function ReimbursementsPage() {
     <ListWorkspace>
       <WorkspaceHeader
         title="我的报销"
-        subtitle="草稿、审批和付款状态。"
+        subtitle="单据、金额、状态。"
         actions={
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             {canCreateExpense ? (
@@ -461,21 +461,21 @@ export function ReimbursementsPage() {
         </p>
       ) : null}
 
-      <StatStrip columns={4}>
+      <StatStrip columns={4} className="ops-status-strip">
         <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" ? "全范围" : "仅自己"} />
       </StatStrip>
 
-      <FilterBar className="space-y-4">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <FilterBar className="ops-command-bar space-y-3 !p-3 md:!p-3.5">
+        <div className="ops-command-bar__row">
           <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">
+            <TabsList className="ops-command-bar__tabs !h-auto !justify-start !bg-slate-50">
               {[
                 { value: "draft", label: "草稿" },
                 { value: "reviewing", label: "审批中" },
@@ -495,10 +495,10 @@ export function ReimbursementsPage() {
             </TabsList>
           </Tabs>
 
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="ops-command-bar__actions">
             {showProxyOwnerSelector ? (
               <select
-                className="select-sm h-10"
+                className="select-sm"
                 data-testid="reimbursements-owner-select"
                 onChange={(event) => setProxyOwnerEmployeeId(event.target.value)}
                 value={proxyOwnerEmployeeId}
@@ -518,6 +518,7 @@ export function ReimbursementsPage() {
               <>
                 <Button
                   data-testid="reimbursements-scope-own"
+                  size="sm"
                   variant={scope === "own" ? "default" : "secondary"}
                   onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
                   type="button"
@@ -526,13 +527,14 @@ export function ReimbursementsPage() {
                 </Button>
                 <Button
                   data-testid="reimbursements-scope-all"
+                  size="sm"
                   variant={scope === "all" ? "default" : "secondary"}
                   onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
                   type="button"
                 >
                   全范围
                 </Button>
-                <Button asChild variant="secondary" type="button">
+                <Button asChild size="sm" variant="secondary" type="button">
                   <Link to="/reimbursements/dashboard">统计分析</Link>
                 </Button>
               </>
@@ -542,6 +544,7 @@ export function ReimbursementsPage() {
               <DropdownMenuTrigger asChild>
                 <Button
                   data-testid="reimbursements-export"
+                  size="sm"
                   variant="secondary"
                   type="button"
                   disabled={exportMutation.isPending}
@@ -567,6 +570,7 @@ export function ReimbursementsPage() {
 
             {canShowBatchEntry ? (
               <Button
+                size="sm"
                 variant={batchMode ? "default" : "secondary"}
                 onClick={() => {
                   setBatchMode((current) => !current);
@@ -584,7 +588,7 @@ export function ReimbursementsPage() {
         </div>
 
         {batchMode ? (
-          <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+          <div className="ops-inline-alert border-amber-200 bg-amber-50 text-amber-800">
             仅勾选你可处理的审批中报销；驳回需填写理由。
           </div>
         ) : null}
@@ -710,7 +714,7 @@ export function ReimbursementsPage() {
             )}
           </div>
 
-          <PrimaryTable className="hidden md:block">
+          <PrimaryTable className="hidden md:block ops-table-focus">
             <table className="w-full border-collapse text-left" data-testid="reimbursements-table">
               <thead className="table-header">
                 <tr>
@@ -782,13 +786,18 @@ export function ReimbursementsPage() {
                         <td className="table-td">{item.reimbursementDate ?? "-"}</td>
                         <td className="table-td">
                           <div className="flex flex-wrap gap-2">
-                            <Link
-                              to={`/reimbursements/${item.id}`}
-                              className={["draft", "rejected"].includes(item.status) ? "btn-primary" : "btn-secondary"}
-                              data-testid="reimbursement-detail-link"
+                            <Button
+                              asChild
+                              size="sm"
+                              variant={["draft", "rejected"].includes(item.status) ? "default" : "secondary"}
                             >
-                              {["draft", "rejected"].includes(item.status) ? "编辑" : "详情"}
-                            </Link>
+                              <Link
+                                to={`/reimbursements/${item.id}`}
+                                data-testid="reimbursement-detail-link"
+                              >
+                                {["draft", "rejected"].includes(item.status) ? "编辑" : "详情"}
+                              </Link>
+                            </Button>
                             {canDeleteDraft ? (
                               <Button
                                 disabled={deleteMutation.isPending}