From 262376e603e0a8f03f935fcdff969b1f3140f25b Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Mon, 5 Oct 2026 19:13:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E9=80=89=E4=B8=AD=E9=AB=98=E4=BA=AE=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=BA=E5=87=AD=E6=8D=AE=E5=88=97=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E7=B2=BE=E8=87=B4=E7=BC=A9=E7=95=A5=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复侧边栏导航选中高亮丢失：在 MainLayout 的 getSelectedKey 路由映射中补齐 /platform-rock 与 /platform-products，确保进入页面时左侧「商品管理」父菜单自动展开，「Rock发货与库存风控」高亮激活，并增加品牌蓝内嵌发光细条指示；
2. 凭证列新增商品微光缩略图：在 Rock 管理表格的「发货结果图片」列左侧加入 44x44 的圆角立绘小缩略图，支持悬浮微光放大动效与点击一键弹出深海蓝发货凭据大图预览。
---
 frontend/src/index.css              |   1 +
 frontend/src/layouts/MainLayout.tsx |   2 +
 frontend/src/pages/PlatformRock.tsx | 100 ++++++++++++++++++++--------
 3 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 182b3e4..dcc9d58 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -362,6 +362,7 @@ a:hover {
   color: #2563eb !important;
   background: #eff6ff !important;
   font-weight: 700;
+  box-shadow: inset 3px 0 0 #2563eb;
 }
 
 .app-sidebar--collapsed .app-sidebar__brand {
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 961b482..3d5cfaa 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -169,6 +169,8 @@ const merchantSections: SidebarSection[] = [
 function getSelectedKey(pathname: string, search: string) {
   if (pathname === '/') return 'dashboard'
   if (pathname.startsWith('/merchant-products')) return 'merchant-products'
+  if (pathname.startsWith('/platform-products')) return 'platform-products'
+  if (pathname.startsWith('/platform-rock')) return 'platform-rock'
   if (pathname.startsWith('/merchant-orders')) return 'fulfillment-orders'
   if (pathname.startsWith('/merchant-wallet')) return 'merchant-wallet'
   if (pathname.startsWith('/merchant-recharge')) return 'merchant-recharge'
diff --git a/frontend/src/pages/PlatformRock.tsx b/frontend/src/pages/PlatformRock.tsx
index f612d77..395aa0a 100644
--- a/frontend/src/pages/PlatformRock.tsx
+++ b/frontend/src/pages/PlatformRock.tsx
@@ -407,45 +407,91 @@ export default function PlatformRock() {
     {
       title: '发货结果图片',
       key: 'voucher',
-      width: 200,
+      width: 240,
       render: (_, record) => {
         if (record.status !== 'redeemed' && !record.upstream_fulfill_id) {
           return <Text type="secondary">-</Text>
         }
         const isCopying = copyingVoucherId === record.id
+        const isRockBlue = record.target_skin?.includes('蓝')
+        const sku = isRockBlue ? 'rock_blue_sportswear' : 'rock_black_tshirt'
+        const imgSrc = `/images/products/${sku}.webp`
+
         return (
-          <Space direction="vertical" size={4} style={{ width: '100%' }}>
-            <Space size={6}>
-              <Button
-                size="small"
-                type="primary"
-                icon={<CopyOutlined />}
-                loading={isCopying}
-                onClick={() => handleCopyVoucher(record)}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            {/* 商品缩略图：鼠标悬浮微放、点击快速预览高清大图凭据 */}
+            <Tooltip title="点击预览深海蓝发货凭据大图">
+              <div
+                onClick={() => handlePreviewVoucher(record)}
                 style={{
-                  background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
-                  borderColor: '#059669',
-                  boxShadow: '0 1px 2px rgba(16, 185, 129, 0.2)',
-                  fontSize: 12,
-                  fontWeight: 500,
+                  width: 44,
+                  height: 44,
+                  flexShrink: 0,
+                  borderRadius: 8,
+                  border: '1px solid #e2e8f0',
+                  background: '#f8fafc',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  overflow: 'hidden',
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'scale(1.08)'
+                  e.currentTarget.style.borderColor = '#93c5fd'
+                  e.currentTarget.style.boxShadow = '0 3px 8px rgba(37,99,235,0.2)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'scale(1)'
+                  e.currentTarget.style.borderColor = '#e2e8f0'
+                  e.currentTarget.style.boxShadow = '0 1px 3px rgba(0,0,0,0.06)'
                 }}
               >
-                复制结果图
-              </Button>
-              <Tooltip title="查看高清深海蓝发货凭据">
+                <img
+                  src={imgSrc}
+                  alt={record.target_skin || '道具'}
+                  style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 2 }}
+                />
+              </div>
+            </Tooltip>
+
+            {/* 操作按钮与商品徽章 */}
+            <Space direction="vertical" size={3}>
+              <Space size={4}>
                 <Button
                   size="small"
-                  icon={<EyeOutlined />}
-                  onClick={() => handlePreviewVoucher(record)}
-                />
-              </Tooltip>
+                  type="primary"
+                  icon={<CopyOutlined />}
+                  loading={isCopying}
+                  onClick={() => handleCopyVoucher(record)}
+                  style={{
+                    background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
+                    borderColor: '#059669',
+                    boxShadow: '0 1px 2px rgba(16, 185, 129, 0.2)',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    padding: '0 8px',
+                  }}
+                >
+                  复制结果图
+                </Button>
+                <Tooltip title="查看高清发货凭据大图">
+                  <Button
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => handlePreviewVoucher(record)}
+                  />
+                </Tooltip>
+              </Space>
+              <div>
+                <Tag color="cyan" style={{ fontSize: 11, margin: 0 }}>
+                  {record.target_skin || '黑色ROCK长袖T恤'}
+                </Tag>
+              </div>
             </Space>
-            <div>
-              <Tag color="cyan" style={{ fontSize: 11, margin: 0 }}>
-                {record.target_skin || '黑色ROCK长袖T恤'}
-              </Tag>
-            </div>
-          </Space>
+          </div>
         )
       },
     },