feat: rebuild review detail decision surface

src/features/reviews/review-workbench-detail.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import { EmptyState } from "@/components/ui/empty-state";
-import { PageHeader } from "@/components/ui/page-header";
+import { MetricChip } from "@/components/ui/metric-chip";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { ReviewActionPanel } from "@/features/reviews/components/review-action-panel";
 import { ReviewImagePanel } from "@/features/reviews/components/review-image-panel";
@@ -340,61 +340,48 @@ export function ReviewWorkbenchDetailScreen({
   }
 
   return (
-    <section className="space-y-8">
-      <PageHeader
-        eyebrow="Review detail"
-        title={`订单 #${orderDetail.orderId}`}
-        description="审核详情页只处理单个订单，列表筛选和切单行为统一留在审核工作台首页。"
-        meta={`更新于 ${formatTimestamp(orderDetail.updatedAt)}`}
-        actions={
-          <Link
-            href="/reviews/workbench"
-            className="inline-flex min-h-11 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--surface)] px-4 text-sm font-medium text-[var(--ink-strong)] transition hover:bg-[var(--surface-muted)]"
-          >
-            返回审核列表
-          </Link>
-        }
-      />
+    <section className="space-y-5">
+      <div className="sticky top-0 z-10 -mx-4 border-b border-[var(--border-soft)] bg-[rgba(255,250,242,0.95)] px-4 py-4 backdrop-blur md:-mx-6 md:px-6">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+          <div className="space-y-2">
+            <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-[var(--ink-faint)]">
+              Review detail
+            </p>
+            <div className="flex flex-wrap items-center gap-2">
+              <h1 className="text-2xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
+                订单 #{orderDetail.orderId}
+              </h1>
+              <StatusBadge status={orderDetail.status} />
+              <StatusBadge variant="workflowStep" status={orderDetail.currentStep} />
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <MetricChip
+                label="workflow"
+                value={orderDetail.workflowId ?? "暂未分配"}
+              />
+              <MetricChip label="step" value={orderDetail.currentStepLabel} />
+              <MetricChip
+                label="revision"
+                value={orderDetail.pendingManualConfirm ? "修订待确认" : "无待确认修订"}
+              />
+            </div>
+          </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-[24px] border border-[var(--border-soft)] bg-[var(--surface)] px-4 py-4">
-          <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.2em] text-[var(--ink-faint)]">
-            Order status
-          </p>
-          <div className="mt-3">
-            <StatusBadge status={orderDetail.status} />
-          </div>
-        </div>
-        <div className="rounded-[24px] border border-[var(--border-soft)] bg-[var(--surface)] px-4 py-4">
-          <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.2em] text-[var(--ink-faint)]">
-            Workflow
-          </p>
-          <p className="mt-3 text-lg font-semibold tracking-[-0.02em] text-[var(--ink-strong)]">
-            {orderDetail.workflowId ?? "暂未分配"}
-          </p>
-        </div>
-        <div className="rounded-[24px] border border-[var(--border-soft)] bg-[var(--surface)] px-4 py-4">
-          <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.2em] text-[var(--ink-faint)]">
-            Current step
-          </p>
-          <div className="mt-3 flex flex-wrap items-center gap-2">
-            <StatusBadge variant="workflowStep" status={orderDetail.currentStep} />
-            <span className="text-sm text-[var(--ink-muted)]">
-              {orderDetail.currentStepLabel}
-            </span>
-          </div>
-        </div>
-        <div className="rounded-[24px] border border-[var(--border-soft)] bg-[var(--surface)] px-4 py-4">
-          <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.2em] text-[var(--ink-faint)]">
-            Workflow status
-          </p>
-          <div className="mt-3">
-            <StatusBadge status={workflowDetail.status} />
+          <div className="flex flex-col items-start gap-2 xl:items-end">
+            <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--ink-faint)]">
+              更新于 {formatTimestamp(orderDetail.updatedAt)}
+            </p>
+            <Link
+              href="/reviews/workbench"
+              className="inline-flex h-9 items-center justify-center rounded-md border border-[var(--border-strong)] bg-[var(--surface)] px-3 text-sm font-medium text-[var(--ink-strong)] transition hover:bg-[var(--surface-muted)]"
+            >
+              返回审核列表
+            </Link>
           </div>
         </div>
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
+      <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
         <ReviewImagePanel
           error={contextError}
           isLoading={isLoadingContext}
@@ -403,7 +390,16 @@ export function ReviewWorkbenchDetailScreen({
           onSelectAsset={setSelectedAssetId}
         />
 
-        <div className="grid gap-6">
+        <div className="grid gap-4 xl:sticky xl:top-24 xl:self-start">
+          <ReviewActionPanel
+            key={`${orderDetail.orderId}-${submissionResult?.decision ?? "idle"}`}
+            isSubmitting={isSubmitting}
+            order={orderDetail}
+            selectedAsset={selectedAsset}
+            submissionError={submissionError}
+            submissionResult={submissionResult}
+            onSubmit={handleSubmit}
+          />
           <ReviewRevisionPanel
             isSubmitting={isSubmitting}
             order={orderDetail}
@@ -415,15 +411,6 @@ export function ReviewWorkbenchDetailScreen({
             onRegisterRevision={handleRegisterRevision}
             onConfirmRevision={handleConfirmRevision}
           />
-          <ReviewActionPanel
-            key={`${orderDetail.orderId}-${submissionResult?.decision ?? "idle"}`}
-            isSubmitting={isSubmitting}
-            order={orderDetail}
-            selectedAsset={selectedAsset}
-            submissionError={submissionError}
-            submissionResult={submissionResult}
-            onSubmit={handleSubmit}
-          />
           <ReviewWorkflowSummary
             error={contextError}
             isLoading={isLoadingContext}