diff --git a/furniture-3d-system/src/app/intake/non-integrated/workspaces/ai-white-background/NonIntegratedAiWhiteBackgroundPanel.tsx b/furniture-3d-system/src/app/intake/non-integrated/workspaces/ai-white-background/NonIntegratedAiWhiteBackgroundPanel.tsx
index 92e362f1..9f6c3490 100644
--- a/furniture-3d-system/src/app/intake/non-integrated/workspaces/ai-white-background/NonIntegratedAiWhiteBackgroundPanel.tsx
+++ b/furniture-3d-system/src/app/intake/non-integrated/workspaces/ai-white-background/NonIntegratedAiWhiteBackgroundPanel.tsx
@@ -1,15 +1,24 @@
 "use client";
 
 import { useState } from "react";
-import { AlertCircle, ImageIcon, Sparkles, UploadCloud, X } from "lucide-react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  ImageIcon,
+  Maximize2,
+  RefreshCcw,
+  Sparkles,
+  UploadCloud,
+  X,
+} from "lucide-react";
 import Button from "@/components/ui/Button";
 import Select from "@/components/ui/Select";
 import { cn } from "@/lib/utils";
 import {
   AI_WHITE_BACKGROUND_VIEW_KEYS,
   AI_WHITE_BACKGROUND_VIEW_LABELS,
-  type AiWhiteBackgroundTargetFinishOption,
   type AiWhiteBackgroundSessionStatus,
+  type AiWhiteBackgroundTargetFinishOption,
   type AiWhiteBackgroundUploadManifest,
   type AiWhiteBackgroundViewKey,
 } from "./nonIntegratedAiWhiteBackground";
@@ -74,31 +83,36 @@ function getSessionStatusMeta(status: AiWhiteBackgroundSessionStatus | null) {
   if (status === "uploaded") {
     return {
       label: "已上传",
-      className: "bg-[#eef7f2] text-[#2f6b51]",
+      className: "bg-[#e6f3fb] text-[#39565d]",
+      dotClassName: "bg-[#47646b]",
     };
   }
   if (status === "generated") {
     return {
       label: "已生成",
-      className: "bg-black/[0.035] text-apple-label-primary",
+      className: "bg-[#eef7f2] text-[#2f6b51]",
+      dotClassName: "bg-[#2f6b51]",
     };
   }
   if (status === "upload_failed") {
     return {
       label: "上传失败",
-      className: "bg-[#fff3f5] text-[#a5485a]",
+      className: "bg-[#fff1ef] text-[#9a403d]",
+      dotClassName: "bg-[#a83836]",
     };
   }
   if (status === "draft") {
     return {
       label: "待生成",
-      className: "bg-black/[0.035] text-apple-label-secondary",
+      className: "bg-[#f1f4f5] text-[#5a6062]",
+      dotClassName: "bg-[#8a9496]",
     };
   }
 
   return {
     label: "未开始",
-    className: "bg-black/[0.035] text-apple-label-secondary",
+    className: "bg-[#f1f4f5] text-[#5a6062]",
+    dotClassName: "bg-[#adb3b5]",
   };
 }
 
@@ -106,7 +120,8 @@ function getManifestStatusMeta(manifest: AiWhiteBackgroundUploadManifest | null)
   if (!manifest) {
     return {
       label: "未上传素材库",
-      className: "bg-black/[0.035] text-apple-label-secondary",
+      className: "bg-[#f1f4f5] text-[#5a6062]",
+      dotClassName: "bg-[#adb3b5]",
     };
   }
 
@@ -114,30 +129,35 @@ function getManifestStatusMeta(manifest: AiWhiteBackgroundUploadManifest | null)
     return {
       label: "素材库生效中",
       className: "bg-[#eef7f2] text-[#2f6b51]",
+      dotClassName: "bg-[#2f6b51]",
     };
   }
   if (manifest.status === "cleanup_pending") {
     return {
       label: "清理中",
-      className: "bg-[#fff7e8] text-[#8a6538]",
+      className: "bg-[#fff7e8] text-[#725737]",
+      dotClassName: "bg-[#b6905d]",
     };
   }
   if (manifest.status === "cleaned") {
     return {
       label: "已清理",
-      className: "bg-black/[0.035] text-apple-label-secondary",
+      className: "bg-[#f1f4f5] text-[#5a6062]",
+      dotClassName: "bg-[#8a9496]",
     };
   }
   if (manifest.status === "cleanup_failed") {
     return {
       label: "清理失败",
-      className: "bg-[#fff3f5] text-[#a5485a]",
+      className: "bg-[#fff1ef] text-[#9a403d]",
+      dotClassName: "bg-[#a83836]",
     };
   }
 
   return {
     label: "待人工复核",
-    className: "bg-[#fff7e8] text-[#8a6538]",
+    className: "bg-[#fff7e8] text-[#725737]",
+    dotClassName: "bg-[#b6905d]",
   };
 }
 
@@ -156,6 +176,62 @@ function getTargetFinishLabel(finish: AiWhiteBackgroundTargetFinishOption) {
     .join(" · ");
 }
 
+function StatChip({
+  label,
+  value,
+  tone = "neutral",
+}: {
+  label: string;
+  value: string;
+  tone?: "neutral" | "success" | "warning";
+}) {
+  return (
+    <div className="grid min-w-[86px] gap-0.5 rounded-[6px] bg-white/72 px-3 py-2 shadow-[0_1px_0_rgba(173,179,181,0.18)] ring-1 ring-[#adb3b5]/15">
+      <span className="sr-only">
+        {label} {value}
+      </span>
+      <span className="text-[10px] font-black uppercase tracking-[0.16em] text-[#5a6062]/64">
+        {label}
+      </span>
+      <span
+        className={cn(
+          "font-mono text-[15px] font-black leading-5",
+          tone === "success" && "text-[#2f6b51]",
+          tone === "warning" && "text-[#725737]",
+          tone === "neutral" && "text-[#2d3335]",
+        )}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function StatusPill({
+  label,
+  value,
+  className,
+  dotClassName,
+}: {
+  label: string;
+  value: string;
+  className: string;
+  dotClassName: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-7 items-center gap-2 rounded-[6px] px-2.5 text-[11px] font-bold",
+        className,
+      )}
+    >
+      <span className={cn("h-1.5 w-1.5 rounded-full", dotClassName)} />
+      <span className="text-[#5a6062]/72">{label}</span>
+      <span className="text-current">{value}</span>
+    </span>
+  );
+}
+
 function AiWhiteBackgroundImagePreviewDialog({
   src,
   alt,
@@ -167,29 +243,34 @@ function AiWhiteBackgroundImagePreviewDialog({
 }) {
   return (
     <div
-      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/65 p-4"
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-[#0c0f10]/72 p-4 backdrop-blur-[10px]"
       role="dialog"
       aria-label={alt}
       onClick={onClose}
     >
       <div
-        className="relative flex max-h-[88vh] w-full max-w-5xl flex-col rounded-[18px] bg-white p-4 shadow-[0_28px_80px_rgba(15,23,42,0.32)]"
+        className="relative flex max-h-[88vh] w-full max-w-5xl flex-col overflow-hidden rounded-[8px] bg-[#f8f9fa] shadow-[0_24px_72px_rgba(12,15,16,0.35)] ring-1 ring-white/18"
         onClick={(event) => event.stopPropagation()}
       >
-        <div className="mb-3 flex items-center justify-between gap-3">
-          <p className="min-w-0 truncate text-sm font-apple-medium text-[#2d3335]">
-            {alt}
-          </p>
+        <div className="flex h-12 items-center justify-between gap-3 bg-white/82 px-4">
+          <div className="min-w-0">
+            <p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#5a6062]/62">
+              Source Preview
+            </p>
+            <p className="truncate text-[13px] font-black text-[#2d3335]">
+              {alt}
+            </p>
+          </div>
           <button
             type="button"
             aria-label="关闭预览"
             onClick={onClose}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black/[0.04] text-[#5a6062] transition hover:bg-black/[0.08] hover:text-[#2d3335]"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[6px] bg-[#ebeef0] text-[#5a6062] transition hover:bg-[#dee3e6] hover:text-[#2d3335]"
           >
             <X className="h-4 w-4" />
           </button>
         </div>
-        <div className="overflow-hidden rounded-[14px] bg-[#f5f6f7]">
+        <div className="m-3 overflow-hidden rounded-[7px] bg-[#ebeef0]">
           {src.trim() ? (
             <>
               {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -200,7 +281,7 @@ function AiWhiteBackgroundImagePreviewDialog({
               />
             </>
           ) : (
-            <div className="flex min-h-[320px] items-center justify-center px-6 text-sm text-[#5a6062]">
+            <div className="flex min-h-[320px] items-center justify-center px-6 text-sm font-semibold text-[#5a6062]">
               原图加载失败
             </div>
           )}
@@ -221,7 +302,7 @@ function AiWhiteBackgroundCardImage({
 }) {
   if (!file.dataUrl.trim()) {
     return (
-      <div className="flex h-full w-full items-center justify-center px-4 text-[11px] text-[#5a6062]/72">
+      <div className="flex h-full w-full items-center justify-center px-4 text-[11px] font-semibold text-[#5a6062]/72">
         源图加载失败
       </div>
     );
@@ -304,153 +385,148 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
     : null;
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-2">
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="rounded-full bg-black/[0.035] px-2.5 py-1 text-[11px] font-medium text-[#2d3335]">
-          {styleLabel}
-        </span>
-        <span className="rounded-full bg-black/[0.035] px-2.5 py-1 font-mono text-[11px] font-semibold text-[#5a6062]">
-          {styleKey}
-        </span>
-        <span
-          className={cn(
-            "rounded-full px-2.5 py-1 text-[11px] font-medium",
-            sessionMeta.className,
-          )}
-        >
-          会话：{sessionMeta.label}
-        </span>
-        <span
-          className={cn(
-            "rounded-full px-2.5 py-1 text-[11px] font-medium",
-            manifestMeta.className,
-          )}
-        >
-          素材库：{manifestMeta.label}
-        </span>
-        <span className="rounded-full bg-black/[0.035] px-2.5 py-1 text-[11px] text-[#5a6062]">
-          可生成 {availableSourceViewCount}/8
-        </span>
-        <span className="rounded-full bg-black/[0.035] px-2.5 py-1 text-[11px] text-[#5a6062]">
-          已生成 {generatedCount}/8
-        </span>
-        <span className="rounded-full bg-black/[0.035] px-2.5 py-1 text-[11px] text-[#5a6062]">
-          已上传 {uploadedCount}/8
-        </span>
-      </div>
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-[8px] bg-[#f8f9fa] text-[#2d3335]">
+      <header className="shrink-0 bg-[#f1f4f5] px-3 py-3 sm:px-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-[220px] flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="rounded-[5px] bg-[#47646b] px-2 py-1 text-[10px] font-black uppercase tracking-[0.16em] text-[#eefbff]">
+                AI White Studio
+              </span>
+              <StatusPill
+                label="会话"
+                value={sessionMeta.label}
+                className={sessionMeta.className}
+                dotClassName={sessionMeta.dotClassName}
+              />
+              <StatusPill
+                label="素材库"
+                value={manifestMeta.label}
+                className={manifestMeta.className}
+                dotClassName={manifestMeta.dotClassName}
+              />
+            </div>
+            <div className="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+              <h2 className="text-[18px] font-black leading-6 tracking-[-0.01em] text-[#2d3335]">
+                AI 白底图工坊
+              </h2>
+              <span className="text-[12px] font-bold text-[#5a6062]">
+                {styleLabel}
+              </span>
+              <span className="rounded-[4px] bg-white/72 px-2 py-0.5 font-mono text-[11px] font-black text-[#5a6062] ring-1 ring-[#adb3b5]/15">
+                {styleKey}
+              </span>
+            </div>
+          </div>
 
-      <div
-        data-testid="ai-white-background-grid"
-        className="grid min-h-[220px] flex-1 grid-cols-3 grid-rows-3 gap-2"
-      >
-          {AI_WHITE_BACKGROUND_VIEW_KEYS.map((viewKey) => {
-            const generatedFile = generatedFiles[viewKey];
-            const sourceFile = sourceFilesByView[viewKey];
-            const sourceReady = sourceReadyByView[viewKey];
-            const displayedImageFile = isImageUploadFile(generatedFile)
-              ? generatedFile
-              : isImageUploadFile(sourceFile)
-                ? sourceFile
-                : null;
-            const isShowingGeneratedFile =
-              generatedFile != null && displayedImageFile?.id === generatedFile.id;
-            const previewLabel = isShowingGeneratedFile
-              ? `${AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}原图`
-              : `${AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}源图`;
-            const hoverPreviewLabel = isShowingGeneratedFile
-              ? "点击查看原图"
-              : "点击查看源图";
-            const cardStatusLabel = generatedFile
-              ? "已生成"
-              : sourceReady
-                ? "可生成"
-                : "缺源图";
-            const isViewGenerating = generatingViewKeySet.has(viewKey);
+          <div className="flex flex-wrap gap-2">
+            <StatChip
+              label="可生成"
+              value={`${availableSourceViewCount}/8`}
+              tone={availableSourceViewCount > 0 ? "success" : "warning"}
+            />
+            <StatChip
+              label="已生成"
+              value={`${generatedCount}/8`}
+              tone={generatedCount > 0 ? "success" : "neutral"}
+            />
+            <StatChip
+              label="已上传"
+              value={`${uploadedCount}/8`}
+              tone={uploadedCount > 0 ? "success" : "neutral"}
+            />
+          </div>
+        </div>
+      </header>
 
-            return (
-              <article
-                key={viewKey}
-                className={cn(
-                  "group flex min-h-0 h-full flex-col rounded-[16px] p-2.5 transition shadow-[0_8px_18px_rgba(20,24,28,0.03)]",
-                  generatedFile
-                    ? "bg-white"
-                    : sourceReady
-                      ? "bg-white/82"
-                      : "bg-black/[0.02]",
-                )}
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <p className="truncate text-[12px] font-apple-semibold text-[#2d3335]">
-                    {AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}
-                  </p>
-                  <span
-                    className={cn(
-                      "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
-                      generatedFile
-                        ? "bg-[#eef7f2] text-[#2f6b51]"
-                        : sourceReady
-                          ? "bg-black/[0.035] text-apple-label-secondary"
-                          : "bg-white/72 text-apple-label-tertiary",
-                    )}
-                  >
-                    {cardStatusLabel}
-                  </span>
-                </div>
+      <div className="grid min-h-0 flex-1 gap-3 overflow-hidden p-3 xl:grid-cols-[minmax(0,1fr)_336px]">
+        <section className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[8px] bg-[#f1f4f5] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.62)]">
+          <div className="mb-3 flex shrink-0 items-center justify-between gap-3">
+            <div className="min-w-0">
+              <p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#5a6062]/64">
+                Generated Views
+              </p>
+              <p className="truncate text-[13px] font-black text-[#2d3335]">
+                九视图生成面板
+              </p>
+            </div>
+            <span className="rounded-[5px] bg-white/72 px-2.5 py-1 font-mono text-[11px] font-black text-[#5a6062] ring-1 ring-[#adb3b5]/15">
+              {generatedCount}/8
+            </span>
+          </div>
 
-                <div
+          <div
+            data-testid="ai-white-background-grid"
+            className="grid min-h-0 flex-1 auto-rows-[minmax(168px,1fr)] grid-cols-1 gap-2 overflow-y-auto pr-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4"
+          >
+            {AI_WHITE_BACKGROUND_VIEW_KEYS.map((viewKey) => {
+              const generatedFile = generatedFiles[viewKey];
+              const sourceFile = sourceFilesByView[viewKey];
+              const sourceReady = sourceReadyByView[viewKey];
+              const displayedImageFile = isImageUploadFile(generatedFile)
+                ? generatedFile
+                : isImageUploadFile(sourceFile)
+                  ? sourceFile
+                  : null;
+              const isShowingGeneratedFile =
+                generatedFile != null && displayedImageFile?.id === generatedFile.id;
+              const previewLabel = isShowingGeneratedFile
+                ? `${AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}原图`
+                : `${AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}源图`;
+              const hoverPreviewLabel = isShowingGeneratedFile
+                ? "点击查看原图"
+                : "点击查看源图";
+              const cardStatusLabel = generatedFile
+                ? "已生成"
+                : sourceReady
+                  ? "可生成"
+                  : "缺源图";
+              const isViewGenerating = generatingViewKeySet.has(viewKey);
+
+              return (
+                <article
+                  key={viewKey}
                   className={cn(
-                    "mt-2 flex aspect-[5/4] min-h-0 items-center justify-center overflow-hidden rounded-[12px]",
-                    displayedImageFile
-                      ? "bg-white"
-                      : "bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.96),rgba(243,245,246,0.9))]",
+                    "group flex min-h-0 flex-col rounded-[7px] bg-white/92 p-2.5 shadow-[0_4px_20px_rgba(45,51,53,0.055)] ring-1 ring-[#adb3b5]/15 transition",
+                    generatedFile && "bg-white",
+                    !generatedFile && sourceReady && "bg-[#ffffff]/86",
+                    !generatedFile && !sourceReady && "bg-[#ebeef0]/72",
                   )}
                 >
-                  {displayedImageFile ? (
-                    <button
-                      type="button"
-                      className="relative h-full w-full cursor-zoom-in overflow-hidden rounded-[12px] text-left"
-                      aria-label={`查看${previewLabel}`}
-                      onClick={() =>
-                        setPreviewImage({
-                          src: displayedImageFile.dataUrl,
-                          alt: previewLabel,
-                        })
-                      }
-                    >
-                      <AiWhiteBackgroundCardImage
-                        file={displayedImageFile}
-                        alt={displayedImageFile.name}
-                        className="h-full w-full object-contain transition duration-200 group-hover:scale-[1.01]"
-                      />
-                      {isShowingGeneratedFile ? null : (
-                        <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-[rgba(255,255,255,0.92)] px-2 py-0.5 text-[10px] font-medium text-[#725737] shadow-[0_6px_16px_rgba(20,24,28,0.06)]">
-                          源图
-                        </span>
-                      )}
-                      <span className="pointer-events-none absolute inset-x-3 bottom-3 rounded-full bg-white/88 px-2.5 py-1 text-center text-[10px] font-medium text-[#2d3335] opacity-0 shadow-[0_8px_18px_rgba(20,24,28,0.08)] transition group-hover:opacity-100">
-                        {hoverPreviewLabel}
-                      </span>
-                    </button>
-                  ) : (
-                    <div className="flex items-center justify-center px-4">
-                      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white/92 ring-1 ring-black/[0.05]">
-                        {sourceReady ? (
-                          <Sparkles className="h-4.5 w-4.5 text-[#5a6062]/62" />
-                        ) : (
-                          <ImageIcon className="h-4.5 w-4.5 text-[#5a6062]/42" />
-                        )}
-                      </div>
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-[12px] font-black text-[#2d3335]">
+                        {AI_WHITE_BACKGROUND_VIEW_LABELS[viewKey]}
+                      </p>
+                      <p className="mt-0.5 text-[10px] font-semibold text-[#5a6062]/58">
+                        {isShowingGeneratedFile ? "Generated output" : "Source reference"}
+                      </p>
                     </div>
-                  )}
-                </div>
+                    <span
+                      className={cn(
+                        "inline-flex h-5 shrink-0 items-center rounded-[4px] px-1.5 text-[10px] font-bold",
+                        generatedFile && "bg-[#eef7f2] text-[#2f6b51]",
+                        !generatedFile && sourceReady && "bg-[#e6f3fb] text-[#39565d]",
+                        !generatedFile && !sourceReady && "bg-[#f1f4f5] text-[#8a9496]",
+                      )}
+                    >
+                      {cardStatusLabel}
+                    </span>
+                  </div>
 
-                {displayedImageFile ? (
-                  <div className="mt-2 flex min-h-[28px] items-start justify-between gap-2 text-[10px] leading-4 text-[#5a6062]/45">
-                    <span className="line-clamp-2 flex-1">{displayedImageFile.name}</span>
-                    {isShowingGeneratedFile ? (
+                  <div
+                    className={cn(
+                      "mt-2 flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-[6px]",
+                      displayedImageFile
+                        ? "bg-[#f8f9fa]"
+                        : "bg-[linear-gradient(135deg,#ffffff_0%,#ebeef0_100%)]",
+                    )}
+                  >
+                    {displayedImageFile ? (
                       <button
                         type="button"
-                        className="shrink-0 rounded-full bg-black/[0.035] px-2 py-0.5 text-[10px] text-[#2d3335] transition hover:bg-black/[0.06]"
+                        className="relative h-full min-h-[106px] w-full cursor-zoom-in overflow-hidden rounded-[6px] text-left"
+                        aria-label={`查看${previewLabel}`}
                         onClick={() =>
                           setPreviewImage({
                             src: displayedImageFile.dataUrl,
@@ -458,182 +534,255 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
                           })
                         }
                       >
-                        查看原图
+                        <AiWhiteBackgroundCardImage
+                          file={displayedImageFile}
+                          alt={displayedImageFile.name}
+                          className="h-full w-full object-contain transition duration-200 group-hover:scale-[1.012]"
+                        />
+                        <span className="pointer-events-none absolute left-2 top-2 inline-flex h-6 items-center gap-1 rounded-[5px] bg-white/88 px-2 text-[10px] font-black text-[#2d3335] shadow-[0_4px_12px_rgba(45,51,53,0.08)]">
+                          {isShowingGeneratedFile ? (
+                            <CheckCircle2 className="h-3 w-3 text-[#2f6b51]" />
+                          ) : (
+                            <ImageIcon className="h-3 w-3 text-[#725737]" />
+                          )}
+                          {isShowingGeneratedFile ? "生成图" : "源图"}
+                        </span>
+                        <span className="pointer-events-none absolute inset-x-2 bottom-2 inline-flex h-7 items-center justify-center gap-1 rounded-[5px] bg-[#0c0f10]/72 px-2 text-[10px] font-bold text-white opacity-0 backdrop-blur transition group-hover:opacity-100">
+                          <Maximize2 className="h-3 w-3" />
+                          {hoverPreviewLabel}
+                        </span>
                       </button>
                     ) : (
-                      <span className="shrink-0 rounded-full bg-[#f5efe5] px-2 py-0.5 text-[10px] text-[#7b6241]">
-                        源图
-                      </span>
+                      <div className="flex min-h-[106px] items-center justify-center px-4">
+                        <div className="grid place-items-center gap-2 text-center">
+                          <div className="flex h-10 w-10 items-center justify-center rounded-[6px] bg-white/78 text-[#5a6062] shadow-[0_4px_16px_rgba(45,51,53,0.05)] ring-1 ring-[#adb3b5]/15">
+                            {sourceReady ? (
+                              <Sparkles className="h-4.5 w-4.5" />
+                            ) : (
+                              <ImageIcon className="h-4.5 w-4.5 opacity-60" />
+                            )}
+                          </div>
+                          <p className="text-[10px] font-semibold text-[#5a6062]/62">
+                            {sourceReady ? "等待生成" : "等待补源图"}
+                          </p>
+                        </div>
+                      </div>
                     )}
                   </div>
-                ) : (
-                  <div className="mt-2 min-h-[28px]" />
-                )}
 
-                <Button
-                  type="button"
-                  size="small"
-                  variant={generatedFile ? "gray" : "filled"}
-                  className="mt-2 h-[30px] w-full rounded-[10px] text-[11px]"
-                  loading={isViewGenerating}
-                  disabled={
-                    !canOperateAiWhiteBackground ||
-                    !selectedBarcode ||
-                    !sourceReady ||
-                    targetFinishTextureMissing ||
-                    isBulkGenerating ||
-                    isViewGenerating
-                  }
-                  onClick={() => void onGenerate([viewKey])}
-                >
-                  {generatedFile ? "重生成" : sourceReady ? "生成" : "待补源图"}
-                </Button>
-              </article>
-            );
-          })}
+                  <div className="mt-2 min-h-[34px]">
+                    {displayedImageFile ? (
+                      <div className="flex items-start justify-between gap-2 text-[10px] leading-4 text-[#5a6062]/58">
+                        <span className="line-clamp-2 min-w-0 flex-1 font-semibold">
+                          {displayedImageFile.name}
+                        </span>
+                        {isShowingGeneratedFile ? (
+                          <button
+                            type="button"
+                            className="shrink-0 rounded-[4px] bg-[#f1f4f5] px-2 py-0.5 text-[10px] font-black text-[#2d3335] transition hover:bg-[#e5e9eb]"
+                            onClick={() =>
+                              setPreviewImage({
+                                src: displayedImageFile.dataUrl,
+                                alt: previewLabel,
+                              })
+                            }
+                          >
+                            原图
+                          </button>
+                        ) : (
+                          <span className="shrink-0 rounded-[4px] bg-[#fff7e8] px-2 py-0.5 text-[10px] font-black text-[#725737]">
+                            源图
+                          </span>
+                        )}
+                      </div>
+                    ) : null}
+                  </div>
+
+                  <Button
+                    type="button"
+                    size="small"
+                    variant={generatedFile ? "gray" : "filled"}
+                    className="mt-2 h-8 w-full !min-h-8 rounded-[6px] px-2 text-[11px] font-black"
+                    loading={isViewGenerating}
+                    disabled={
+                      !canOperateAiWhiteBackground ||
+                      !selectedBarcode ||
+                      !sourceReady ||
+                      targetFinishTextureMissing ||
+                      isBulkGenerating ||
+                      isViewGenerating
+                    }
+                    onClick={() => void onGenerate([viewKey])}
+                  >
+                    {generatedFile ? (
+                      <>
+                        <RefreshCcw className="h-3.5 w-3.5" />
+                        重新生成
+                      </>
+                    ) : sourceReady ? (
+                      <>
+                        <Sparkles className="h-3.5 w-3.5" />
+                        生成
+                      </>
+                    ) : (
+                      "待补源图"
+                    )}
+                  </Button>
+                </article>
+              );
+            })}
+          </div>
+        </section>
 
         <aside
           data-testid="ai-white-background-control-card"
-          className="flex min-h-0 h-full flex-col rounded-[16px] bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(245,247,248,0.92))] p-3 shadow-[0_8px_18px_rgba(20,24,28,0.03)]"
+          className="flex min-h-0 flex-col overflow-hidden rounded-[8px] bg-white/92 shadow-[0_4px_20px_rgba(45,51,53,0.06)] ring-1 ring-[#adb3b5]/15"
         >
-          <div className="space-y-2">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <p className="text-[12px] font-apple-semibold text-[#2d3335]">
+          <div className="border-b border-[#adb3b5]/15 bg-[#f8f9fa] px-4 py-3">
+            <p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#5a6062]/64">
+              Inspector
+            </p>
+            <div className="mt-1 flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="truncate text-[14px] font-black text-[#2d3335]">
                   AI 白底图
                 </p>
-                <p className="mt-1 text-[10px] leading-4 text-[#5a6062]/72">
+                <p className="mt-1 text-[11px] font-semibold leading-4 text-[#5a6062]/72">
                   {statusText}
                 </p>
               </div>
               <span
                 className={cn(
-                  "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
+                  "inline-flex h-6 shrink-0 items-center rounded-[5px] px-2 font-mono text-[11px] font-black",
                   manifestMeta.className,
                 )}
               >
                 {uploadedCount}/8
               </span>
             </div>
+          </div>
 
-            <div className="space-y-1.5">
-              <label className="block text-[10px] font-black uppercase tracking-[0.16em] text-[#5a6062]/45">
-                目标条码
-              </label>
-              <select
-                data-testid="ai-white-background-barcode"
-                value={selectedBarcode}
-                onChange={(event) =>
-                  onSelectedBarcodeChange(event.target.value.trim().toUpperCase())
-                }
-                disabled={
-                  !canOperateAiWhiteBackground ||
-                  barcodeOptions.length === 0
-                }
-                className="h-9 w-full rounded-[10px] bg-white/88 px-3 text-sm text-[#2d3335] outline-none ring-1 ring-black/[0.05] transition focus:ring-black/[0.12] disabled:cursor-not-allowed disabled:text-[#5a6062]/35"
-              >
-                {barcodeOptions.length === 0 ? (
-                  <option value="">当前没有可用条码</option>
-                ) : null}
-                {barcodeOptions.map((option) => (
-                  <option key={option.barcode} value={option.barcode}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div className="space-y-1.5">
-              <div className="flex items-end gap-2">
-                <Select
-                  label="目标花色"
-                  searchable
-                  searchPlaceholder="搜索花色名称、分类或编码"
-                  emptyText="基础资料库暂无匹配花色"
-                  placeholder={
-                    defaultTargetColor.trim()
-                      ? `不改色（默认：${defaultTargetColor.trim()}）`
-                      : "不改色 / 选择目标花色"
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+            <div className="grid gap-3">
+              <div className="space-y-1.5">
+                <label className="block text-[10px] font-black uppercase tracking-[0.18em] text-[#5a6062]/62">
+                  目标条码
+                </label>
+                <select
+                  data-testid="ai-white-background-barcode"
+                  value={selectedBarcode}
+                  onChange={(event) =>
+                    onSelectedBarcodeChange(event.target.value.trim().toUpperCase())
                   }
-                  value={targetFinishId}
-                  onChange={(event) => onTargetFinishChange(event.target.value)}
                   disabled={
                     !canOperateAiWhiteBackground ||
-                    hasAnyGenerationInFlight ||
-                    targetFinishOptions.length === 0
+                    barcodeOptions.length === 0
                   }
-                  options={targetFinishOptions.map((finish) => ({
-                    value: finish.id,
-                    label: getTargetFinishLabel(finish),
-                  }))}
-                  size="small"
-                  tone="obsidian"
-                  containerClassName="min-w-0 flex-1 space-y-1.5"
-                  className="h-9 min-h-9 rounded-[10px] bg-white/88 px-3 text-sm text-[#2d3335] ring-1 ring-black/[0.05] hover:bg-white focus:ring-black/[0.12] disabled:cursor-not-allowed"
-                />
-                <span
-                  aria-hidden="true"
-                  className="mb-0 h-9 w-9 shrink-0 overflow-hidden rounded-[10px] bg-[#f3f4f6] ring-1 ring-black/[0.06]"
-                  style={{
-                    backgroundColor:
-                      !selectedTargetFinishPreviewUrl &&
-                      isHexColor(selectedTargetFinish?.color ?? effectiveTargetColor)
-                        ? (selectedTargetFinish?.color ?? effectiveTargetColor)
-                        : "#f3f4f6",
-                  }}
+                  className="h-10 w-full rounded-[6px] bg-[#f1f4f5] px-3 text-[13px] font-semibold text-[#2d3335] outline-none ring-1 ring-[#adb3b5]/20 transition focus:bg-white focus:ring-[#47646b]/40 disabled:cursor-not-allowed disabled:text-[#5a6062]/35"
                 >
-                  {selectedTargetFinishPreviewUrl ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={selectedTargetFinishPreviewUrl}
-                      alt=""
-                      className="h-full w-full object-cover"
-                    />
+                  {barcodeOptions.length === 0 ? (
+                    <option value="">当前没有可用条码</option>
                   ) : null}
-                </span>
+                  {barcodeOptions.map((option) => (
+                    <option key={option.barcode} value={option.barcode}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
               </div>
-              {targetFinishDisabledReason ? (
-                <p className="text-[10px] leading-4 text-[#9a6a32]">
-                  {targetFinishDisabledReason}
-                </p>
+
+              <div className="space-y-1.5">
+                <div className="flex items-end gap-2">
+                  <Select
+                    label="目标花色"
+                    searchable
+                    searchPlaceholder="搜索花色名称、分类或编码"
+                    emptyText="基础资料库暂无匹配花色"
+                    placeholder={
+                      defaultTargetColor.trim()
+                        ? `不改色（默认：${defaultTargetColor.trim()}）`
+                        : "不改色 / 选择目标花色"
+                    }
+                    value={targetFinishId}
+                    onChange={(event) => onTargetFinishChange(event.target.value)}
+                    disabled={
+                      !canOperateAiWhiteBackground ||
+                      hasAnyGenerationInFlight ||
+                      targetFinishOptions.length === 0
+                    }
+                    options={targetFinishOptions.map((finish) => ({
+                      value: finish.id,
+                      label: getTargetFinishLabel(finish),
+                    }))}
+                    size="small"
+                    tone="obsidian"
+                    containerClassName="min-w-0 flex-1 space-y-1.5 [&>label]:mb-0 [&>label]:text-[10px] [&>label]:font-black [&>label]:uppercase [&>label]:tracking-[0.18em] [&>label]:text-[#5a6062]/62"
+                    className="h-10 min-h-10 rounded-[6px] bg-[#f1f4f5] px-3 text-[13px] font-semibold text-[#2d3335] ring-1 ring-[#adb3b5]/20 hover:bg-[#ebeef0] focus:ring-[#47646b]/40 disabled:cursor-not-allowed"
+                  />
+                  <span
+                    aria-hidden="true"
+                    className="mb-0 h-10 w-10 shrink-0 overflow-hidden rounded-[6px] bg-[#dee3e6] ring-1 ring-[#adb3b5]/22"
+                    style={{
+                      backgroundColor:
+                        !selectedTargetFinishPreviewUrl &&
+                        isHexColor(selectedTargetFinish?.color ?? effectiveTargetColor)
+                          ? (selectedTargetFinish?.color ?? effectiveTargetColor)
+                          : "#dee3e6",
+                    }}
+                  >
+                    {selectedTargetFinishPreviewUrl ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={selectedTargetFinishPreviewUrl}
+                        alt=""
+                        className="h-full w-full object-cover"
+                      />
+                    ) : null}
+                  </span>
+                </div>
+                {targetFinishDisabledReason ? (
+                  <p className="text-[11px] font-semibold leading-4 text-[#725737]">
+                    {targetFinishDisabledReason}
+                  </p>
+                ) : null}
+              </div>
+
+              {operationDisabledReason ? (
+                <div className="rounded-[6px] bg-[#f1f4f5] px-3 py-2 text-[11px] font-semibold leading-4 text-[#5a6062] ring-1 ring-[#adb3b5]/15">
+                  {operationDisabledReason}
+                </div>
               ) : null}
-            </div>
 
-            {operationDisabledReason ? (
-              <div className="rounded-[12px] border border-[#e0e4e5] bg-white/78 px-3 py-2 text-[10px] leading-4 text-[#5a6062]">
-                {operationDisabledReason}
-              </div>
-            ) : null}
-
-            {missingSourceSlotLabels.length > 0 ? (
-              <div className="rounded-[12px] bg-[#f7efe2] px-2.5 py-2 text-[#7c6748]">
-                <div className="flex items-start gap-2">
-                  <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#b6905d]" />
-                  <div className="min-w-0">
-                    <p className="text-[10px] font-medium">待补角度</p>
-                    <div className="mt-1 flex flex-wrap gap-1">
-                      {missingSourceSlotLabels.map((label) => (
-                        <span
-                          key={label}
-                          className="rounded-full bg-white/72 px-1.5 py-0.5 text-[10px] leading-4 text-[#87653f]"
-                        >
-                          {label}
-                        </span>
-                      ))}
+              {missingSourceSlotLabels.length > 0 ? (
+                <div className="rounded-[6px] bg-[#fff7e8] px-3 py-2 text-[#725737] ring-1 ring-[#b6905d]/18">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#b6905d]" />
+                    <div className="min-w-0">
+                      <p className="text-[11px] font-black">待补角度</p>
+                      <div className="mt-1.5 flex flex-wrap gap-1">
+                        {missingSourceSlotLabels.map((label) => (
+                          <span
+                            key={label}
+                            className="rounded-[4px] bg-white/74 px-1.5 py-0.5 text-[10px] font-bold leading-4 text-[#725737]"
+                          >
+                            {label}
+                          </span>
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            ) : null}
+              ) : null}
 
-            {!canUploadToMaterialLibrary && uploadDisabledReason ? (
-              <div className="rounded-[12px] border border-[#f1d7c1] bg-[#fff8f2] px-3 py-2 text-[10px] leading-4 text-[#8a6538]">
-                {uploadDisabledReason}
-              </div>
-            ) : null}
+              {!canUploadToMaterialLibrary && uploadDisabledReason ? (
+                <div className="rounded-[6px] bg-[#fff7e8] px-3 py-2 text-[11px] font-semibold leading-4 text-[#725737] ring-1 ring-[#b6905d]/18">
+                  {uploadDisabledReason}
+                </div>
+              ) : null}
+            </div>
           </div>
 
-          <div className="mt-auto grid gap-2 pt-3">
+          <div className="grid shrink-0 gap-2 border-t border-[#adb3b5]/15 bg-[#f8f9fa] px-4 py-3">
             <Button
               type="button"
               size="small"
@@ -645,7 +794,7 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
                 targetFinishTextureMissing ||
                 hasAnyGenerationInFlight
               }
-              className="h-9 rounded-[10px] text-[11px]"
+              className="h-10 !min-h-10 rounded-[6px] text-[12px] font-black"
               onClick={() => void onGenerate()}
             >
               <Sparkles className="h-3.5 w-3.5" />
@@ -663,7 +812,7 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
                 !canUploadToMaterialLibrary ||
                 isUploading
               }
-              className="h-9 rounded-[10px] text-[11px]"
+              className="h-10 !min-h-10 rounded-[6px] text-[12px] font-black"
               onClick={() => void onUpload()}
             >
               <UploadCloud className="h-3.5 w-3.5" />
@@ -683,7 +832,7 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
                   currentManifest.status === "cleanup_pending" ||
                   cleaningManifestId === currentManifest.manifestId
                 }
-                className="h-8 rounded-[10px] text-[11px]"
+                className="h-9 !min-h-9 rounded-[6px] text-[11px] font-black"
                 onClick={() => void onCleanup(currentManifest)}
               >
                 清理当前上传清单
@@ -692,6 +841,7 @@ export default function NonIntegratedAiWhiteBackgroundPanel({
           </div>
         </aside>
       </div>
+
       {previewImage ? (
         <AiWhiteBackgroundImagePreviewDialog
           src={previewImage.src}