fix(ui): 修复侧边栏选中高亮状态并为凭据列添加商品精致缩略图

1. 修复侧边栏导航选中高亮丢失:在 MainLayout 的 getSelectedKey 路由映射中补齐 /platform-rock 与 /platform-products,确保进入页面时左侧「商品管理」父菜单自动展开,「Rock发货与库存风控」高亮激活,并增加品牌蓝内嵌发光细条指示;
2. 凭证列新增商品微光缩略图:在 Rock 管理表格的「发货结果图片」列左侧加入 44x44 的圆角立绘小缩略图,支持悬浮微光放大动效与点击一键弹出深海蓝发货凭据大图预览。
This commit is contained in:
yml2213
2026-10-05 19:13:59 +08:00
parent 604c9d1912
commit 262376e603
3 changed files with 76 additions and 27 deletions
+1
View File
@@ -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 {
+2
View File
@@ -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'
+73 -27
View File
@@ -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>
)
},
},