fix(distribution-admin): 优化商品与账号展示页面表格列宽、中文化及防换行体验
This commit is contained in:
yml2213
@@ -70,6 +70,17 @@ const TX_OPTIONS = [
|
||||
{ label: '出租中 (租赁履约)', value: 'rented' },
|
||||
]
|
||||
|
||||
const MAIN_LISTING_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
published: { label: '主站在售', color: 'green' },
|
||||
rented: { label: '在租中', color: 'cyan' },
|
||||
completed: { label: '已售出/结单', color: 'blue' },
|
||||
offline: { label: '主站下架', color: 'default' },
|
||||
closed: { label: '已关闭', color: 'error' },
|
||||
abnormal: { label: '异常冻结', color: 'error' },
|
||||
sealed: { label: '已封存', color: 'magenta' },
|
||||
draft: { label: '草稿', color: 'warning' },
|
||||
}
|
||||
|
||||
function formatGameName(name?: string) {
|
||||
if (!name) return '默认游戏'
|
||||
const lower = name.toLowerCase().trim()
|
||||
@@ -431,7 +442,7 @@ export default function Accounts() {
|
||||
const kw = keyword.trim().toLowerCase()
|
||||
const matchTitle = item.title && item.title.toLowerCase().includes(kw)
|
||||
const matchNo = item.listing_no && item.listing_no.toLowerCase().includes(kw)
|
||||
const matchGame = item.game_name && item.game_name.toLowerCase().includes(kw)
|
||||
const matchGame = (item.game_name && item.game_name.toLowerCase().includes(kw)) || formatGameName(item.game_name).includes(kw)
|
||||
const matchRegion = item.server_region && item.server_region.toLowerCase().includes(kw)
|
||||
const matchPlatform = item.login_platform && item.login_platform.toLowerCase().includes(kw)
|
||||
const matchId = String(item.account_id).includes(kw) || String(item.listing_id).includes(kw)
|
||||
@@ -675,6 +686,7 @@ export default function Accounts() {
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
dataSource={filteredItems}
|
||||
scroll={{ x: 1200 }}
|
||||
locale={{
|
||||
emptyText: (
|
||||
<Empty
|
||||
@@ -715,22 +727,37 @@ export default function Accounts() {
|
||||
{
|
||||
title: '商品编号',
|
||||
dataIndex: 'listing_no',
|
||||
width: 140,
|
||||
width: 170,
|
||||
render: (v: string | undefined, row: AccountDisplay) => (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Typography.Text copyable strong>
|
||||
{v || `#${row.listing_id}`}
|
||||
</Typography.Text>
|
||||
{row.in_transaction ? (
|
||||
<Tag color="warning" style={{ margin: 0 }}>
|
||||
出租中
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag color="green" style={{ margin: 0 }}>
|
||||
在售空闲
|
||||
</Tag>
|
||||
)}
|
||||
</Space>
|
||||
<div style={{ whiteSpace: 'nowrap' }}>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', marginBottom: 4 }}>
|
||||
<Typography.Text
|
||||
copyable={{ text: v || String(row.listing_id), tooltips: ['复制商品编号', '已复制'] }}
|
||||
strong
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: '#1677ff',
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{v || `#${row.listing_id}`}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div>
|
||||
{row.in_transaction ? (
|
||||
<Tag color="warning" style={{ margin: 0, fontSize: 11 }}>
|
||||
出租中
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag color="green" style={{ margin: 0, fontSize: 11 }}>
|
||||
在售空闲
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -761,28 +788,32 @@ export default function Accounts() {
|
||||
{
|
||||
title: '账号信息',
|
||||
dataIndex: 'title',
|
||||
minWidth: 240,
|
||||
width: 260,
|
||||
render: (_: unknown, row: AccountDisplay) => (
|
||||
<div>
|
||||
<Typography.Text strong style={{ display: 'block', fontSize: 14 }}>
|
||||
<Typography.Text
|
||||
strong
|
||||
style={{ fontSize: 14, lineHeight: '20px', display: 'block' }}
|
||||
ellipsis={{ tooltip: row.title }}
|
||||
>
|
||||
{row.title || `账号 #${row.account_id}`}
|
||||
</Typography.Text>
|
||||
<Space size={4} style={{ marginTop: 4 }}>
|
||||
<Space size={4} style={{ marginTop: 4 }} wrap>
|
||||
<Tag color="blue">{formatGameName(row.game_name)}</Tag>
|
||||
{row.server_region && <Tag>{row.server_region}</Tag>}
|
||||
{row.login_platform && <Tag>{row.login_platform}</Tag>}
|
||||
{row.login_platform && <Tag color="cyan">{row.login_platform}</Tag>}
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '段位 / 资产',
|
||||
width: 140,
|
||||
width: 130,
|
||||
render: (_: unknown, row: AccountDisplay) => (
|
||||
<div>
|
||||
<div>{row.rank_level ? <Tag color="purple">{row.rank_level}</Tag> : '-'}</div>
|
||||
{row.haf_coin_amount !== undefined && row.haf_coin_amount > 0 && (
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12, whiteSpace: 'nowrap', display: 'block', marginTop: 2 }}>
|
||||
哈夫币: {row.haf_coin_amount.toLocaleString()}
|
||||
</Typography.Text>
|
||||
)}
|
||||
@@ -791,21 +822,21 @@ export default function Accounts() {
|
||||
},
|
||||
{
|
||||
title: '租金 / 押金',
|
||||
width: 170,
|
||||
width: 150,
|
||||
render: (_: unknown, row: AccountDisplay) => {
|
||||
const finalPrice = row.site_price_cent || row.price_cent
|
||||
const hasMarkup = row.shelf_ratio_delta && row.shelf_ratio_delta > 0
|
||||
return (
|
||||
<div>
|
||||
<Typography.Text strong style={{ color: '#cf1322', fontSize: 15 }}>
|
||||
<Typography.Text strong style={{ color: '#cf1322', fontSize: 15, whiteSpace: 'nowrap', display: 'block' }}>
|
||||
{formatMoney(finalPrice)}
|
||||
</Typography.Text>
|
||||
<div style={{ fontSize: 12, color: '#666' }}>
|
||||
<div style={{ fontSize: 12, color: '#888', whiteSpace: 'nowrap', marginTop: 2 }}>
|
||||
押金: {formatMoney(row.deposit_amount_cent)}
|
||||
</div>
|
||||
{hasMarkup && (
|
||||
<div style={{ fontSize: 11, color: '#389e0d', marginTop: 2 }}>
|
||||
含提价溢价: +{formatMoney(row.markup_amount_cent)}
|
||||
<div style={{ fontSize: 11, color: '#389e0d', marginTop: 2, whiteSpace: 'nowrap' }}>
|
||||
含加价: +{formatMoney(row.markup_amount_cent)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -815,7 +846,7 @@ export default function Accounts() {
|
||||
{
|
||||
title: '加价比例',
|
||||
dataIndex: 'shelf_ratio_delta',
|
||||
width: 120,
|
||||
width: 110,
|
||||
render: (v: number | undefined) => {
|
||||
if (v && v > 0) {
|
||||
return (
|
||||
@@ -830,12 +861,11 @@ export default function Accounts() {
|
||||
{
|
||||
title: '主站状态',
|
||||
dataIndex: 'listing_status',
|
||||
width: 100,
|
||||
render: (v: string | undefined) => (
|
||||
<Tag color={v === 'published' ? 'green' : 'default'}>
|
||||
{v === 'published' ? '主站在售' : v || '未知'}
|
||||
</Tag>
|
||||
),
|
||||
width: 110,
|
||||
render: (v: string | undefined) => {
|
||||
const conf = MAIN_LISTING_STATUS_MAP[v || ''] || { label: v || '未知', color: 'default' }
|
||||
return <Tag color={conf.color}>{conf.label}</Tag>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '分销展示',
|
||||
@@ -849,13 +879,15 @@ export default function Accounts() {
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
width: 110,
|
||||
fixed: 'right' as const,
|
||||
render: (_: unknown, row: AccountDisplay) => (
|
||||
<Space size={2}>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
style={{ padding: 0 }}
|
||||
onClick={() => handleOpenMarkup(row)}
|
||||
>
|
||||
加价
|
||||
@@ -864,6 +896,7 @@ export default function Accounts() {
|
||||
type="link"
|
||||
size="small"
|
||||
danger={row.display_status === 'enabled'}
|
||||
style={{ padding: 0 }}
|
||||
onClick={() => toggle(row)}
|
||||
>
|
||||
{row.display_status === 'enabled' ? '下架' : '展示'}
|
||||
@@ -918,7 +951,7 @@ export default function Accounts() {
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Typography.Text type="secondary">游戏区服：</Typography.Text>
|
||||
<span>{targetAccount.game_name || '-'} / {targetAccount.server_region || '-'}</span>
|
||||
<span>{formatGameName(targetAccount.game_name) || '-'} / {targetAccount.server_region || '-'}</span>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Typography.Text type="secondary">哈夫币资产：</Typography.Text>
|
||||
|
||||
Reference in New Issue
Block a user