diff --git a/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.test.tsx b/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.test.tsx
index c693ed66..5347dca5 100644
--- a/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.test.tsx
+++ b/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.test.tsx
@@ -103,21 +103,25 @@ describe('BomCostingWorkbenchClient', () => {
     expect(screen.queryByText('成本构成')).not.toBeInTheDocument()
   })
 
-  it('左侧图片按主图、当前 SKU 图和详情图分组切换', async () => {
+  it('主图在左、SKU 图在右、详情图在下并共同切换中间动态图片', async () => {
     mockCaseResponse(detail())
     render(<BomCostingWorkbenchClient initialCapabilities={capabilities} initialCases={[summary()]} />)
     await screen.findByText('约 ¥1,350.00')
 
-    expect(screen.getByRole('tab', { name: '主图 1' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: '当前 SKU 图 1' })).toHaveAttribute('aria-selected', 'true')
-    expect(screen.getByRole('tab', { name: '详情图 1' })).toBeInTheDocument()
+    expect(screen.getByLabelText('主图缩略图')).toBeInTheDocument()
+    expect(screen.getByLabelText('当前 SKU 图缩略图')).toBeInTheDocument()
+    expect(screen.getByLabelText('详情图缩略图')).toBeInTheDocument()
+    expect(screen.queryByRole('tab')).not.toBeInTheDocument()
     expect(screen.getByRole('img', { name: '黑胡桃色 120cm SKU 图' })).toBeInTheDocument()
 
-    fireEvent.click(screen.getByRole('tab', { name: '主图 1' }))
+    fireEvent.click(screen.getByRole('button', { name: '查看主图 1' }))
     expect(screen.getByRole('img', { name: '商品主图' })).toBeInTheDocument()
 
-    fireEvent.click(screen.getByRole('tab', { name: '详情图 1' }))
+    fireEvent.click(screen.getByRole('button', { name: '查看详情图 1' }))
     expect(screen.getByRole('img', { name: '商品详情图 1' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '查看当前 SKU 图 1' }))
+    expect(screen.getByRole('img', { name: '黑胡桃色 120cm SKU 图' })).toBeInTheDocument()
   })
 
   it('整件临时价的详情只展示结构事实，不展示另一套结构金额', async () => {
diff --git a/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.tsx b/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.tsx
index d3675fe4..7a5e457d 100644
--- a/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.tsx
+++ b/furniture-3d-system/src/app/bom-costing/BomCostingWorkbenchClient.tsx
@@ -54,10 +54,9 @@ type RecalculationMode =
 
 type ProductImageKind = BomCostingSourceAssetDetail['kind']
 
-const PRODUCT_IMAGE_KINDS: ProductImageKind[] = ['MAIN', 'SKU', 'DETAIL']
 const PRODUCT_IMAGE_KIND_LABELS: Record<ProductImageKind, string> = {
   MAIN: '主图',
-  SKU: '当前 SKU 图',
+  SKU: 'SKU 图',
   DETAIL: '详情图',
 }
 
@@ -477,16 +476,16 @@ function ResultCanvas({
     SKU: skuAssets,
     DETAIL: detailAssets,
   }
-  const [preferredImageKind, setPreferredImageKind] = useState<ProductImageKind>('SKU')
-  const activeImageKind = imageGroups[preferredImageKind].length > 0
-    ? preferredImageKind
-    : PRODUCT_IMAGE_KINDS.find((kind) => imageGroups[kind].length > 0) ?? preferredImageKind
-  const galleryAssets = imageGroups[activeImageKind]
-  const [selectedAssetId, setSelectedAssetId] = useState('')
-  const selectedAsset = galleryAssets.find((asset) => asset.id === selectedAssetId) ??
-    galleryAssets[0] ?? null
+  const displayAssets = [...skuAssets, ...mainAssets, ...detailAssets]
+  const [selectedAssetSelection, setSelectedAssetSelection] = useState({ skuId: '', assetId: '' })
+  const selectedAssetId = selectedAssetSelection.skuId === selectedSku.id
+    ? selectedAssetSelection.assetId
+    : ''
+  const selectedAsset = displayAssets.find((asset) => asset.id === selectedAssetId) ??
+    skuAssets[0] ?? mainAssets[0] ?? detailAssets[0] ?? null
+  const selectedAssetGroup = selectedAsset ? imageGroups[selectedAsset.kind] : []
   const selectedAssetIndex = selectedAsset
-    ? galleryAssets.findIndex((asset) => asset.id === selectedAsset.id)
+    ? selectedAssetGroup.findIndex((asset) => asset.id === selectedAsset.id)
     : -1
   const [detailsOpen, setDetailsOpen] = useState(false)
   const [advancedOpen, setAdvancedOpen] = useState(false)
@@ -517,6 +516,9 @@ function ResultCanvas({
   const latestRun = detail.analysisRuns?.[0] ?? null
   const canResume = latestRun?.revision > 1 && latestRun.status === 'FAILED'
   const selectedAssetIdSet = new Set(selectedAssetIds)
+  const selectDisplayedAsset = (assetId: string) => {
+    setSelectedAssetSelection({ skuId: selectedSku.id, assetId })
+  }
 
   const toggleAsset = (assetId: string) => {
     setSelectedAssetIds((current) => current.includes(assetId)
@@ -573,86 +575,107 @@ function ResultCanvas({
         ) : null}
 
         <div className="grid flex-1 items-center gap-8 lg:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)] lg:gap-12">
-          <section id="bom-product-gallery" className="min-w-0">
-            <div className="mb-3 flex items-end justify-between gap-4 border-b border-black/[0.08]">
-              <div className="flex min-w-0 gap-4 overflow-x-auto" role="tablist" aria-label="商品图片分类">
-                {PRODUCT_IMAGE_KINDS.map((kind) => {
-                  const assets = imageGroups[kind]
-                  const active = activeImageKind === kind
-                  return (
+          <section id="bom-product-gallery" className="min-w-0" aria-label="商品图片">
+            <div className="grid grid-cols-[48px_minmax(0,1fr)_48px] items-start gap-2 sm:grid-cols-[64px_minmax(0,1fr)_64px] sm:gap-3">
+              <aside className="min-w-0" aria-label="主图缩略图">
+                <div className="mb-2 text-center text-[10px] font-semibold text-[#687376] sm:text-[11px]">
+                  主图 <span className="tabular-nums text-[#8a9395]">{mainAssets.length}</span>
+                </div>
+                <div className="flex max-h-[280px] flex-col gap-2 overflow-y-auto sm:max-h-[420px]">
+                  {mainAssets.map((asset, index) => (
                     <button
-                      key={kind}
+                      key={asset.id}
                       type="button"
-                      role="tab"
-                      aria-selected={active}
-                      aria-controls="bom-product-gallery-panel"
-                      disabled={assets.length === 0}
-                      onClick={() => {
-                        setPreferredImageKind(kind)
-                        setSelectedAssetId(assets[0]?.id ?? '')
-                      }}
+                      onClick={() => selectDisplayedAsset(asset.id)}
+                      aria-label={`查看主图 ${index + 1}`}
+                      aria-pressed={selectedAsset?.id === asset.id}
                       className={cn(
-                        'flex h-9 shrink-0 items-center gap-1.5 border-b-2 px-0 text-[11px] font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#526a70] focus-visible:ring-offset-2',
-                        active
-                          ? 'border-[#526a70] text-[#2f3d40]'
-                          : 'border-transparent text-[#6f797b] hover:text-[#3f4d50]',
-                        assets.length === 0 && 'cursor-not-allowed text-[#a3aaac] hover:text-[#a3aaac]',
+                        'relative aspect-square w-full shrink-0 overflow-hidden border bg-[#f2f4f3] outline-none focus-visible:ring-2 focus-visible:ring-[#526a70] focus-visible:ring-offset-2',
+                        selectedAsset?.id === asset.id ? 'border-[#526a70]' : 'border-black/[0.08] hover:border-black/25',
                       )}
                     >
-                      <span>{PRODUCT_IMAGE_KIND_LABELS[kind]}</span>
-                      <span className="tabular-nums text-[10px] text-current/70">{assets.length}</span>
+                      <Image src={asset.storedUrl!} alt="" fill sizes="64px" unoptimized className="object-contain" />
                     </button>
-                  )
-                })}
+                  ))}
+                  {mainAssets.length === 0 ? <span className="py-3 text-center text-[11px] text-[#a3aaac]">—</span> : null}
+                </div>
+              </aside>
+
+              <div className="min-w-0">
+                <div className="relative aspect-[4/3] min-h-[280px] overflow-hidden bg-[#f2f4f3] sm:min-h-[420px]">
+                  {selectedAsset?.storedUrl ? (
+                    <>
+                      <Image
+                        src={selectedAsset.storedUrl}
+                        alt={selectedAsset.kind === 'MAIN'
+                          ? '商品主图'
+                          : selectedAsset.kind === 'SKU'
+                            ? `${selectedSku.name} SKU 图`
+                            : `商品详情图 ${selectedAssetIndex + 1}`}
+                        fill
+                        sizes="(min-width: 1024px) 54vw, 74vw"
+                        priority
+                        unoptimized
+                        className="object-contain"
+                      />
+                      <span className="absolute right-2 top-2 bg-white/90 px-2 py-1 text-[10px] font-semibold text-[#526064] shadow-sm backdrop-blur-sm">
+                        {PRODUCT_IMAGE_KIND_LABELS[selectedAsset.kind]} {selectedAssetIndex + 1}/{selectedAssetGroup.length}
+                      </span>
+                    </>
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-[12px] text-[#7a8486]">暂无商品图片</div>
+                  )}
+                </div>
               </div>
-              {galleryAssets.length > 0 ? (
-                <span className="mb-2.5 shrink-0 text-[10px] tabular-nums text-[#7a8486]">
-                  {selectedAssetIndex + 1} / {galleryAssets.length}
-                </span>
-              ) : null}
+
+              <aside className="min-w-0" aria-label="当前 SKU 图缩略图">
+                <div className="mb-2 text-center text-[10px] font-semibold text-[#687376] sm:text-[11px]">
+                  SKU <span className="tabular-nums text-[#8a9395]">{skuAssets.length}</span>
+                </div>
+                <div className="flex max-h-[280px] flex-col gap-2 overflow-y-auto sm:max-h-[420px]">
+                  {skuAssets.map((asset, index) => (
+                    <button
+                      key={asset.id}
+                      type="button"
+                      onClick={() => selectDisplayedAsset(asset.id)}
+                      aria-label={`查看当前 SKU 图 ${index + 1}`}
+                      aria-pressed={selectedAsset?.id === asset.id}
+                      className={cn(
+                        'relative aspect-square w-full shrink-0 overflow-hidden border bg-[#f2f4f3] outline-none focus-visible:ring-2 focus-visible:ring-[#526a70] focus-visible:ring-offset-2',
+                        selectedAsset?.id === asset.id ? 'border-[#526a70]' : 'border-black/[0.08] hover:border-black/25',
+                      )}
+                    >
+                      <Image src={asset.storedUrl!} alt="" fill sizes="64px" unoptimized className="object-contain" />
+                    </button>
+                  ))}
+                  {skuAssets.length === 0 ? <span className="py-3 text-center text-[11px] text-[#a3aaac]">—</span> : null}
+                </div>
+              </aside>
             </div>
 
-            <div
-              id="bom-product-gallery-panel"
-              role="tabpanel"
-              aria-label={PRODUCT_IMAGE_KIND_LABELS[activeImageKind]}
-              className="relative aspect-[4/3] min-h-[280px] overflow-hidden bg-[#f2f4f3] sm:min-h-[420px]"
-            >
-              {selectedAsset?.storedUrl ? (
-                <Image
-                  src={selectedAsset.storedUrl}
-                  alt={selectedAsset.kind === 'MAIN'
-                    ? '商品主图'
-                    : selectedAsset.kind === 'SKU'
-                      ? `${selectedSku.name} SKU 图`
-                      : `商品详情图 ${selectedAssetIndex + 1}`}
-                  fill
-                  sizes="(min-width: 1024px) 62vw, 100vw"
-                  priority
-                  unoptimized
-                  className="object-contain"
-                />
-              ) : (
-                <div className="flex h-full items-center justify-center text-[12px] text-[#7a8486]">暂无商品图片</div>
-              )}
-            </div>
-            {galleryAssets.length > 1 ? (
-              <div className="mt-3 flex gap-2 overflow-x-auto pb-1" aria-label={`${PRODUCT_IMAGE_KIND_LABELS[activeImageKind]}缩略图`}>
-                {galleryAssets.map((asset, index) => (
-                  <button
-                    key={asset.id}
-                    type="button"
-                    onClick={() => setSelectedAssetId(asset.id)}
-                    aria-label={`查看${PRODUCT_IMAGE_KIND_LABELS[activeImageKind]} ${index + 1}`}
-                    aria-pressed={selectedAsset?.id === asset.id}
-                    className={cn(
-                      'relative h-14 w-14 shrink-0 overflow-hidden border bg-[#f2f4f3] outline-none focus-visible:ring-2 focus-visible:ring-[#526a70]',
-                      selectedAsset?.id === asset.id ? 'border-[#526a70]' : 'border-black/[0.08]',
-                    )}
-                  >
-                    <Image src={asset.storedUrl!} alt="" fill sizes="56px" unoptimized className="object-contain" />
-                  </button>
-                ))}
+            {detailAssets.length > 0 ? (
+              <div className="mt-3" aria-label="详情图缩略图">
+                <div className="mb-2 flex items-center gap-1.5 text-[10px] font-semibold text-[#687376] sm:text-[11px]">
+                  <span>详情图</span>
+                  <span className="tabular-nums text-[#8a9395]">{detailAssets.length}</span>
+                </div>
+                <div className="flex gap-2 overflow-x-auto pb-1">
+                  {detailAssets.map((asset, index) => (
+                    <button
+                      key={asset.id}
+                      type="button"
+                      onClick={() => selectDisplayedAsset(asset.id)}
+                      aria-label={`查看详情图 ${index + 1}`}
+                      aria-pressed={selectedAsset?.id === asset.id}
+                      className={cn(
+                        'relative h-14 w-14 shrink-0 overflow-hidden border bg-[#f2f4f3] outline-none focus-visible:ring-2 focus-visible:ring-[#526a70] focus-visible:ring-offset-2',
+                        selectedAsset?.id === asset.id ? 'border-[#526a70]' : 'border-black/[0.08] hover:border-black/25',
+                      )}
+                    >
+                      <Image src={asset.storedUrl!} alt="" fill sizes="56px" unoptimized className="object-contain" />
+                    </button>
+                  ))}
+                </div>
               </div>
             ) : null}
           </section>