fix(ui): 修复侧边栏选中高亮状态并为凭据列添加商品精致缩略图
1. 修复侧边栏导航选中高亮丢失:在 MainLayout 的 getSelectedKey 路由映射中补齐 /platform-rock 与 /platform-products,确保进入页面时左侧「商品管理」父菜单自动展开,「Rock发货与库存风控」高亮激活,并增加品牌蓝内嵌发光细条指示; 2. 凭证列新增商品微光缩略图:在 Rock 管理表格的「发货结果图片」列左侧加入 44x44 的圆角立绘小缩略图,支持悬浮微光放大动效与点击一键弹出深海蓝发货凭据大图预览。
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user