refactor(web): 拆分 PlatformRock 大屏为容器 + 9 个子组件（1306 → 最大 335 行）
- PlatformRock.tsx 335 行：保留全部 state、loadData/loadTokens、useEffect、 handler 与顶层布局；默认导出名不变，App.tsx 的 lazy 导入未改 - platformRock/ 子目录：tokenColumns 329、RockStrategyCard 267、 PurchaseTokenModal 183、RockTokenTable 156、RockMetricCards 124、 VoucherPreviewModal 95、RockTokenFilterBar 76、UidEditModal 47、types.ts 6 state 归属与更新时机、请求次数与参数、useEffect 依赖语义均未改变；子组件 props 显式声明类型，无 any；行级异步 handler 随表格下沉，state setter 经显式类型 props 传入。 验证： - SSR 快照 renderToString 拆分前后字节一致（40920 bytes） - jsdom 交互差分：拆分前后 23 个检查点的 DOM 快照与 API 调用日志完全一致 （覆盖采购、UID 修正、解冻、释放、熔断、筛选/搜索/翻页、保存配置、连通性测试） - 原文件应保留的 230 行代码逐字命中
This commit is contained in:
yml2213
+84
-1055
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,183 @@
|
||||
import { Button, Col, Divider, InputNumber, Modal, Row, Space } from 'antd'
|
||||
import { ShoppingCartOutlined } from '@ant-design/icons'
|
||||
import type { RockStats } from '../../api'
|
||||
|
||||
export interface PurchaseTokenModalProps {
|
||||
open: boolean
|
||||
stats: RockStats | null
|
||||
purchaseCount: number
|
||||
purchasing: boolean
|
||||
maxPurchasable: number
|
||||
upstreamPoints: number
|
||||
estimatedCost: number
|
||||
isPointsInsufficient: boolean
|
||||
onPurchaseCountChange: (value: number) => void
|
||||
onCancel: () => void
|
||||
onConfirm: (count: number) => void
|
||||
}
|
||||
|
||||
export function PurchaseTokenModal({
|
||||
open,
|
||||
stats,
|
||||
purchaseCount,
|
||||
purchasing,
|
||||
maxPurchasable,
|
||||
upstreamPoints,
|
||||
estimatedCost,
|
||||
isPointsInsufficient,
|
||||
onPurchaseCountChange,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: PurchaseTokenModalProps) {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<ShoppingCartOutlined style={{ color: '#2563eb' }} />
|
||||
<span>手动采购通用黑色 Token (0666.pro)</span>
|
||||
</Space>
|
||||
}
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={onCancel}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
icon={<ShoppingCartOutlined />}
|
||||
loading={purchasing}
|
||||
disabled={isPointsInsufficient || purchaseCount <= 0}
|
||||
onClick={() => onConfirm(purchaseCount)}
|
||||
style={{
|
||||
background: isPointsInsufficient
|
||||
? undefined
|
||||
: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
|
||||
}}
|
||||
>
|
||||
确认采购 {purchaseCount} 个 ({estimatedCost} 点)
|
||||
</Button>,
|
||||
]}
|
||||
destroyOnClose
|
||||
width={500}
|
||||
>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
{/* 账户与资产概览 */}
|
||||
<div
|
||||
style={{
|
||||
background: '#f8fafc',
|
||||
border: '1px solid #e2e8f0',
|
||||
borderRadius: 8,
|
||||
padding: '12px 16px',
|
||||
marginBottom: 18,
|
||||
}}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<div style={{ fontSize: 12, color: '#64748b' }}>0666.pro 采购商户</div>
|
||||
<div style={{ fontSize: 15, fontWeight: 600, color: '#0f172a', marginTop: 2 }}>
|
||||
{stats?.username || '正常商户'}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ fontSize: 12, color: '#64748b' }}>当前实时积分余额</div>
|
||||
<div style={{ fontSize: 15, fontWeight: 700, color: '#7c3aed', marginTop: 2 }}>
|
||||
{upstreamPoints.toFixed(1)} 点
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider style={{ margin: '10px 0' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#64748b' }}>
|
||||
<span>采购单价：<strong style={{ color: '#0f172a' }}>21 点 / 个</strong></span>
|
||||
<span>最大可采购：<strong style={{ color: '#2563eb' }}>{maxPurchasable} 个</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 采购数量输入 */}
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<div style={{ fontWeight: 600, marginBottom: 8, color: '#0f172a' }}>
|
||||
采购数量：
|
||||
</div>
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={maxPurchasable > 0 ? maxPurchasable : 10000}
|
||||
value={purchaseCount}
|
||||
onChange={(val) => onPurchaseCountChange(val || 1)}
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="个 Token"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 快捷数量选择胶囊 */}
|
||||
<div style={{ marginBottom: 18 }}>
|
||||
<div style={{ fontSize: 12, color: '#64748b', marginBottom: 8 }}>快捷选择：</div>
|
||||
<Space wrap size={[8, 8]}>
|
||||
{[10, 20, 50, 100].map((num) => (
|
||||
<Button
|
||||
key={num}
|
||||
size="small"
|
||||
type={purchaseCount === num ? 'primary' : 'default'}
|
||||
onClick={() => onPurchaseCountChange(num)}
|
||||
disabled={maxPurchasable > 0 && num > maxPurchasable}
|
||||
>
|
||||
{num} 个
|
||||
</Button>
|
||||
))}
|
||||
{maxPurchasable > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
type={purchaseCount === maxPurchasable ? 'primary' : 'dashed'}
|
||||
onClick={() => onPurchaseCountChange(maxPurchasable)}
|
||||
style={{ color: '#2563eb', borderColor: '#bfdbfe' }}
|
||||
>
|
||||
全部可购 ({maxPurchasable} 个)
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 实时消耗与结余试算 */}
|
||||
<div
|
||||
style={{
|
||||
background: isPointsInsufficient ? '#fef2f2' : '#f0fdf4',
|
||||
border: `1px solid ${isPointsInsufficient ? '#fecaca' : '#bbf7d0'}`,
|
||||
borderRadius: 8,
|
||||
padding: '12px 16px',
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ color: isPointsInsufficient ? '#991b1b' : '#166534' }}>
|
||||
本次采购消耗积分：
|
||||
</span>
|
||||
<strong style={{ color: isPointsInsufficient ? '#dc2626' : '#16a34a', fontSize: 16 }}>
|
||||
{estimatedCost} 点
|
||||
</strong>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: 6,
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
<span style={{ color: isPointsInsufficient ? '#b91c1c' : '#15803d' }}>
|
||||
{isPointsInsufficient
|
||||
? '⚠️ 账户积分不足，请先充值或减少采购数量'
|
||||
: '采购后预计剩余积分：'}
|
||||
</span>
|
||||
{!isPointsInsufficient && (
|
||||
<span style={{ color: '#64748b' }}>
|
||||
{(upstreamPoints - estimatedCost).toFixed(1)} 点
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Col, Row, Tag } from 'antd'
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
FireOutlined,
|
||||
ShoppingCartOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import type { RockStats } from '../../api'
|
||||
|
||||
export interface RockMetricCardsProps {
|
||||
stats: RockStats | null
|
||||
availableStock: number
|
||||
warningStock: number
|
||||
isStockLow: boolean
|
||||
hasMismatch: boolean
|
||||
upstreamPoints: number
|
||||
maxPurchasable: number
|
||||
onOpenPurchase: (count: number) => void
|
||||
}
|
||||
|
||||
export function RockMetricCards({
|
||||
stats,
|
||||
availableStock,
|
||||
warningStock,
|
||||
isStockLow,
|
||||
hasMismatch,
|
||||
upstreamPoints,
|
||||
maxPurchasable,
|
||||
onOpenPurchase,
|
||||
}: RockMetricCardsProps) {
|
||||
return (
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<div className="metric-card-box">
|
||||
<div className="metric-card-header">
|
||||
<span className="metric-card-title">可用通用库存 (Available)</span>
|
||||
<div className={`metric-card-icon ${isStockLow ? 'metric-card-icon--rose' : ''}`}>
|
||||
<ShoppingCartOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card-value" style={{ color: isStockLow ? '#e11d48' : '#0f172a' }}>
|
||||
{availableStock}
|
||||
<span style={{ fontSize: 13, fontWeight: 500, marginLeft: 4, color: '#64748b' }}>个</span>
|
||||
</div>
|
||||
<div className="metric-card-footer">
|
||||
<span>警戒水位: {warningStock} 个</span>
|
||||
{isStockLow ? (
|
||||
<Tag color="error" style={{ margin: 0, borderRadius: 4 }}>库存紧缺</Tag>
|
||||
) : (
|
||||
<span style={{ color: '#10b981', fontWeight: 600 }}>储备充足</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<div className="metric-card-box">
|
||||
<div className="metric-card-header">
|
||||
<span className="metric-card-title">绑定错误阻断 (Mismatch)</span>
|
||||
<div className={`metric-card-icon ${hasMismatch ? 'metric-card-icon--rose' : ''}`}>
|
||||
<ExclamationCircleOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card-value" style={{ color: hasMismatch ? '#e11d48' : '#0f172a' }}>
|
||||
{stats?.mismatch_stock ?? 0}
|
||||
<span style={{ fontSize: 13, fontWeight: 500, marginLeft: 4, color: '#64748b' }}>个</span>
|
||||
</div>
|
||||
<div className="metric-card-footer">
|
||||
<span>{hasMismatch ? 'UID强一致校验拦截保护' : '暂无异常阻断'}</span>
|
||||
{hasMismatch ? (
|
||||
<Tag color="error" style={{ margin: 0, borderRadius: 4 }}>需核对处理</Tag>
|
||||
) : (
|
||||
<span style={{ color: '#10b981', fontWeight: 600 }}>状态正常</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<div className="metric-card-box">
|
||||
<div className="metric-card-header">
|
||||
<span className="metric-card-title">已履约交付 (Redeemed)</span>
|
||||
<div className="metric-card-icon metric-card-icon--emerald">
|
||||
<CheckCircleOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card-value">
|
||||
{stats?.redeemed_stock ?? 0}
|
||||
<span style={{ fontSize: 13, fontWeight: 500, marginLeft: 4, color: '#64748b' }}>个</span>
|
||||
</div>
|
||||
<div className="metric-card-footer">
|
||||
<span>当前扫码中</span>
|
||||
<span style={{ fontWeight: 600, color: '#2563eb' }}>{stats?.using_stock ?? 0} 个</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<div className="metric-card-box">
|
||||
<div className="metric-card-header">
|
||||
<span className="metric-card-title">0666.pro 账号积分</span>
|
||||
<div className="metric-card-icon metric-card-icon--purple">
|
||||
<FireOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card-value" style={{ color: '#7c3aed' }}>
|
||||
{upstreamPoints.toFixed(1)}
|
||||
<span style={{ fontSize: 13, fontWeight: 500, marginLeft: 4, color: '#64748b' }}>点</span>
|
||||
</div>
|
||||
<div className="metric-card-footer">
|
||||
<span>账号: {stats?.username || '未同步'}</span>
|
||||
<a
|
||||
onClick={() => onOpenPurchase(maxPurchasable > 0 ? Math.min(50, maxPurchasable) : 10)}
|
||||
style={{ fontWeight: 600, color: '#2563eb', cursor: 'pointer' }}
|
||||
title="点击快速打开手动采购弹窗"
|
||||
>
|
||||
约可采购 {maxPurchasable} 个 ➔
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Row,
|
||||
Space,
|
||||
Switch,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from 'antd'
|
||||
import type { FormInstance } from 'antd'
|
||||
import {
|
||||
ControlOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
KeyOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from '@ant-design/icons'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export interface RockStrategyCardProps {
|
||||
form: FormInstance
|
||||
autoDelivery: boolean
|
||||
testingConn: boolean
|
||||
savingConfig: boolean
|
||||
onToggleAutoDelivery: (checked: boolean) => void
|
||||
onTestConnection: () => void
|
||||
onSaveConfig: () => void
|
||||
}
|
||||
|
||||
export function RockStrategyCard({
|
||||
form,
|
||||
autoDelivery,
|
||||
testingConn,
|
||||
savingConfig,
|
||||
onToggleAutoDelivery,
|
||||
onTestConnection,
|
||||
onSaveConfig,
|
||||
}: RockStrategyCardProps) {
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
borderRadius: 12,
|
||||
border: '1px solid #e2e8f0',
|
||||
boxShadow: 'var(--shadow-sm)',
|
||||
}}
|
||||
styles={{ body: { padding: '20px 24px' } }}
|
||||
>
|
||||
{/* 通道状态与软熔断横幅 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '14px 18px',
|
||||
borderRadius: 8,
|
||||
marginBottom: 20,
|
||||
background: autoDelivery ? '#f0fdf4' : '#fef2f2',
|
||||
border: autoDelivery ? '1px solid #bbf7d0' : '1px solid #fecaca',
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 18,
|
||||
background: autoDelivery ? '#dcfce7' : '#fee2e2',
|
||||
color: autoDelivery ? '#16a34a' : '#dc2626',
|
||||
}}
|
||||
>
|
||||
{autoDelivery ? <SafetyCertificateOutlined /> : <ControlOutlined />}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<strong style={{ fontSize: 14, color: autoDelivery ? '#166534' : '#991b1b' }}>
|
||||
{autoDelivery
|
||||
? '自动发货通道正常运转 (Active)'
|
||||
: '自动发货已全局软熔断 (Kill Switch Engaged)'}
|
||||
</strong>
|
||||
<Tag color={autoDelivery ? 'success' : 'error'} style={{ borderRadius: 10 }}>
|
||||
{autoDelivery ? '反代履约中' : '已转交人工打手'}
|
||||
</Tag>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: autoDelivery ? '#15803d' : '#b91c1c', marginTop: 2 }}>
|
||||
{autoDelivery
|
||||
? '和平精英「黑色 ROCK 长袖」与「蓝色运动服」开启 0666.pro 全自动反代发货，UID 强一致安全门禁全面守护。'
|
||||
: '两款商品已彻底切断上游 0666.pro 自动发货通道，所有新订单均保留在待发货状态，由人工接单平台处理。'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Space size="middle">
|
||||
<Switch
|
||||
checked={autoDelivery}
|
||||
onChange={onToggleAutoDelivery}
|
||||
checkedChildren="开启"
|
||||
unCheckedChildren="熔断"
|
||||
style={{
|
||||
backgroundColor: autoDelivery ? '#16a34a' : '#dc2626',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
danger={autoDelivery}
|
||||
type={autoDelivery ? 'default' : 'primary'}
|
||||
onClick={() => onToggleAutoDelivery(!autoDelivery)}
|
||||
>
|
||||
{autoDelivery ? '一键紧急熔断' : '恢复自动发货'}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 策略表单 */}
|
||||
<Form form={form} layout="vertical" autoComplete="off">
|
||||
{/* 阻断浏览器对凭据配置项的强制账密自动填充 (Honeypot) */}
|
||||
<div style={{ position: 'absolute', top: -9999, left: -9999, width: 0, height: 0, overflow: 'hidden' }} aria-hidden="true">
|
||||
<input type="text" name="chrome_prevent_autofill_username" tabIndex={-1} autoComplete="username" />
|
||||
<input type="password" name="chrome_prevent_autofill_password" tabIndex={-1} autoComplete="current-password" />
|
||||
</div>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} lg={12}>
|
||||
<div
|
||||
style={{
|
||||
background: '#f8fafc',
|
||||
padding: '16px 18px',
|
||||
borderRadius: 10,
|
||||
border: '1px solid #f1f5f9',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
|
||||
<KeyOutlined style={{ color: '#2563eb', fontSize: 16 }} />
|
||||
<strong style={{ fontSize: 14, color: '#0f172a' }}>0666.pro 采购认证凭据</strong>
|
||||
</div>
|
||||
|
||||
<Form.Item name="base_url" label="上游平台接口地址 (Base URL)" style={{ marginBottom: 14 }}>
|
||||
<Input
|
||||
placeholder="https://0666.pro"
|
||||
autoComplete="off"
|
||||
name="upstream_base_url"
|
||||
id="upstream_base_url"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="bearer_token"
|
||||
label={
|
||||
<Space>
|
||||
<span>上游商户 Bearer Token (yd_token)</span>
|
||||
<Tooltip title="0666.pro 采用无密码架构，直接从网页 localStorage 提取 64 位十六进制 Token 即可">
|
||||
<ExclamationCircleOutlined style={{ color: '#94a3b8' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
style={{ marginBottom: 12 }}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder="粘贴 64 位十六进制 Bearer Token"
|
||||
autoComplete="new-password"
|
||||
name="upstream_bearer_token"
|
||||
id="upstream_bearer_token"
|
||||
addonAfter={
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={onTestConnection}
|
||||
loading={testingConn}
|
||||
style={{ padding: '0 4px', height: 'auto' }}
|
||||
>
|
||||
测试连通性
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: '#eff6ff',
|
||||
border: '1px dashed #bfdbfe',
|
||||
borderRadius: 6,
|
||||
padding: '8px 12px',
|
||||
fontSize: 12,
|
||||
color: '#1e40af',
|
||||
}}
|
||||
>
|
||||
💡 <strong>极简提取指引：</strong>登录 0666.pro 网页后，按 F12 打开控制台，在 Console 执行{' '}
|
||||
<Text code copyable={{ text: "localStorage.getItem('yd_token')" }}>
|
||||
localStorage.getItem('yd_token')
|
||||
</Text>{' '}
|
||||
即可一键复制。
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={12}>
|
||||
<div
|
||||
style={{
|
||||
background: '#f8fafc',
|
||||
padding: '16px 18px',
|
||||
borderRadius: 10,
|
||||
border: '1px solid #f1f5f9',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
|
||||
<ThunderboltOutlined style={{ color: '#7c3aed', fontSize: 16 }} />
|
||||
<strong style={{ fontSize: 14, color: '#0f172a' }}>库存风控与自动补货策略</strong>
|
||||
</div>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="token_warning_stock" label="库存告警安全水位">
|
||||
<InputNumber min={1} max={500} style={{ width: '100%' }} addonAfter="个" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="auto_purchase_enabled" label="自动补货触发开关" valuePropName="checked">
|
||||
<Switch checkedChildren="开启自动补货" unCheckedChildren="关闭" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="auto_purchase_count" label="单次自动补货数量">
|
||||
<InputNumber min={5} max={200} style={{ width: '100%' }} addonAfter="个" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="purchase_cooldown_minutes" label="补货防抖冷却时间">
|
||||
<InputNumber min={1} max={60} style={{ width: '100%' }} addonAfter="分钟" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider style={{ margin: '18px 0 16px 0' }} />
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={onSaveConfig}
|
||||
loading={savingConfig}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
|
||||
minWidth: 130,
|
||||
}}
|
||||
>
|
||||
保存策略配置
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Badge, Button, Card, Col, Input, Radio, Row, Space, Typography } from 'antd'
|
||||
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
|
||||
import type { RockStats } from '../../api'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export interface RockTokenFilterBarProps {
|
||||
stats: RockStats | null
|
||||
searchKeyword: string
|
||||
filterStatus: string
|
||||
totalTokens: number
|
||||
loadingTokens: boolean
|
||||
onSearchKeywordChange: (value: string) => void
|
||||
onFilterStatusChange: (value: string) => void
|
||||
onRefresh: () => void
|
||||
}
|
||||
|
||||
export function RockTokenFilterBar({
|
||||
stats,
|
||||
searchKeyword,
|
||||
filterStatus,
|
||||
totalTokens,
|
||||
loadingTokens,
|
||||
onSearchKeywordChange,
|
||||
onFilterStatusChange,
|
||||
onRefresh,
|
||||
}: RockTokenFilterBarProps) {
|
||||
return (
|
||||
<Card
|
||||
styles={{ body: { padding: '16px 20px' } }}
|
||||
style={{ marginBottom: 16, borderRadius: 10, border: '1px solid #e2e8f0' }}
|
||||
>
|
||||
<Row gutter={[16, 12]} align="middle" justify="space-between">
|
||||
<Col xs={24} md={16}>
|
||||
<Space size="middle" wrap>
|
||||
<Input
|
||||
placeholder="搜索 0666 编号 / 提取码 / 订单号 / UID"
|
||||
prefix={<SearchOutlined style={{ color: '#94a3b8' }} />}
|
||||
value={searchKeyword}
|
||||
onChange={(e) => onSearchKeywordChange(e.target.value)}
|
||||
onPressEnter={onRefresh}
|
||||
style={{ width: 340 }}
|
||||
allowClear
|
||||
/>
|
||||
<Radio.Group
|
||||
value={filterStatus}
|
||||
onChange={(e) => {
|
||||
onFilterStatusChange(e.target.value)
|
||||
}}
|
||||
buttonStyle="solid"
|
||||
>
|
||||
<Radio.Button value="all">全部</Radio.Button>
|
||||
<Radio.Button value="available">可用</Radio.Button>
|
||||
<Radio.Button value="using">使用中</Radio.Button>
|
||||
<Radio.Button value="bound">已绑定</Radio.Button>
|
||||
<Radio.Button value="redeemed">已发货</Radio.Button>
|
||||
<Radio.Button value="mismatch">
|
||||
<Badge count={stats?.mismatch_stock ?? 0} offset={[6, -2]} size="small">
|
||||
<span>绑定错误</span>
|
||||
</Badge>
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Button icon={<ReloadOutlined />} onClick={onRefresh} loading={loadingTokens}>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xs={24} md={8} style={{ textAlign: 'right' }}>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
共检索到 <strong style={{ color: '#0f172a' }}>{totalTokens}</strong> 条库存记录
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
import { Table, message } from 'antd'
|
||||
import type { RockTokenItem } from '../../api'
|
||||
import { rockApi } from '../../api'
|
||||
import { generateVoucherDataURL, copyVoucherDataUrlToClipboard } from '../../utils/voucher'
|
||||
import { formatDateTime } from '../../utils/time'
|
||||
import { buildTokenColumns } from './tokenColumns'
|
||||
import type { UidEditState } from './types'
|
||||
|
||||
export interface RockTokenTableProps {
|
||||
tokens: RockTokenItem[]
|
||||
loadingTokens: boolean
|
||||
page: number
|
||||
pageSize: number
|
||||
totalTokens: number
|
||||
copyingVoucherId: number | null
|
||||
setCopyingVoucherId: Dispatch<SetStateAction<number | null>>
|
||||
setPreviewVoucherUrl: Dispatch<SetStateAction<string>>
|
||||
setPreviewVoucherOpen: Dispatch<SetStateAction<boolean>>
|
||||
onEditUid: (state: UidEditState) => void
|
||||
onPageChange: (page: number, pageSize: number) => void
|
||||
onReloadData: () => void
|
||||
onReloadTokens: () => void
|
||||
}
|
||||
|
||||
export function RockTokenTable({
|
||||
tokens,
|
||||
loadingTokens,
|
||||
page,
|
||||
pageSize,
|
||||
totalTokens,
|
||||
copyingVoucherId,
|
||||
setCopyingVoucherId,
|
||||
setPreviewVoucherUrl,
|
||||
setPreviewVoucherOpen,
|
||||
onEditUid,
|
||||
onPageChange,
|
||||
onReloadData,
|
||||
onReloadTokens,
|
||||
}: RockTokenTableProps) {
|
||||
// 人工重置解冻 Mismatch Token
|
||||
const handleResetToken = async (id: number) => {
|
||||
try {
|
||||
await rockApi.resetToken(id)
|
||||
message.success('已解除绑定异常，重置为可用库存')
|
||||
onReloadData()
|
||||
onReloadTokens()
|
||||
} catch (e) {
|
||||
message.error('重置失败: ' + (e instanceof Error ? e.message : '未知错误'))
|
||||
}
|
||||
}
|
||||
|
||||
// 买家未扫码绑定时，把占用中的提货链接放回库存
|
||||
const handleReleaseToken = async (id: number) => {
|
||||
try {
|
||||
await rockApi.releaseToken(id)
|
||||
message.success('已释放回可用库存，该提货链接可以再次分配')
|
||||
onReloadData()
|
||||
onReloadTokens()
|
||||
} catch (e) {
|
||||
message.error('释放失败: ' + (e instanceof Error ? e.message : '未知错误'))
|
||||
}
|
||||
}
|
||||
|
||||
// 复制/生成发货凭证图片
|
||||
const handleCopyVoucher = async (record: RockTokenItem) => {
|
||||
setCopyingVoucherId(record.id)
|
||||
try {
|
||||
const isRockBlue = record.target_skin?.includes('蓝')
|
||||
const sku = isRockBlue ? 'rock_blue_sportswear' : 'rock_black_tshirt'
|
||||
const productName = record.target_skin || (isRockBlue ? '蓝色运动服上衣' : '黑色ROCK长袖T恤')
|
||||
const channel = record.actual_channel || record.region || '安卓-微信'
|
||||
const timeStr = record.redeemed_at || record.bound_at || record.created_at
|
||||
const cleanRole = (record.actual_role_name || '').trim()
|
||||
|
||||
const dataURL = await generateVoucherDataURL({
|
||||
productName,
|
||||
productSKU: sku,
|
||||
roleName: cleanRole && cleanRole !== '-' ? cleanRole : '',
|
||||
roleUID: record.expected_uid || record.actual_role_id || '-',
|
||||
channel,
|
||||
currencyText: '幸运币 x 10',
|
||||
redeemedAt: timeStr ? formatDateTime(timeStr) : formatDateTime(new Date().toISOString()),
|
||||
})
|
||||
|
||||
const copied = await copyVoucherDataUrlToClipboard(dataURL)
|
||||
if (copied) {
|
||||
message.success('发货结果图片已复制到剪贴板！可直接在微信/QQ聊天框粘贴 (Ctrl+V)')
|
||||
} else {
|
||||
setPreviewVoucherUrl(dataURL)
|
||||
setPreviewVoucherOpen(true)
|
||||
message.info('已生成凭据图片，已为您打开预览窗口，支持直接保存或右键复制')
|
||||
}
|
||||
} catch (e) {
|
||||
message.error('生成凭证失败: ' + (e instanceof Error ? e.message : '未知错误'))
|
||||
} finally {
|
||||
setCopyingVoucherId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePreviewVoucher = async (record: RockTokenItem) => {
|
||||
try {
|
||||
const isRockBlue = record.target_skin?.includes('蓝')
|
||||
const sku = isRockBlue ? 'rock_blue_sportswear' : 'rock_black_tshirt'
|
||||
const productName = record.target_skin || (isRockBlue ? '蓝色运动服上衣' : '黑色ROCK长袖T恤')
|
||||
const channel = record.actual_channel || record.region || '安卓-微信'
|
||||
const timeStr = record.redeemed_at || record.bound_at || record.created_at
|
||||
const cleanRole = (record.actual_role_name || '').trim()
|
||||
|
||||
const dataURL = await generateVoucherDataURL({
|
||||
productName,
|
||||
productSKU: sku,
|
||||
roleName: cleanRole && cleanRole !== '-' ? cleanRole : '',
|
||||
roleUID: record.expected_uid || record.actual_role_id || '-',
|
||||
channel,
|
||||
currencyText: '幸运币 x 10',
|
||||
redeemedAt: timeStr ? formatDateTime(timeStr) : formatDateTime(new Date().toISOString()),
|
||||
})
|
||||
|
||||
setPreviewVoucherUrl(dataURL)
|
||||
setPreviewVoucherOpen(true)
|
||||
} catch (e) {
|
||||
message.error('生成凭证失败: ' + (e instanceof Error ? e.message : '未知错误'))
|
||||
}
|
||||
}
|
||||
|
||||
const columns = buildTokenColumns({
|
||||
copyingVoucherId,
|
||||
onCopyVoucher: handleCopyVoucher,
|
||||
onPreviewVoucher: handlePreviewVoucher,
|
||||
onEditUid,
|
||||
onResetToken: handleResetToken,
|
||||
onReleaseToken: handleReleaseToken,
|
||||
})
|
||||
|
||||
return (
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={tokens}
|
||||
loading={loadingTokens}
|
||||
scroll={{ x: 1100 }}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total: totalTokens,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
showTotal: (total) => `共 ${total} 条库存记录`,
|
||||
onChange: (p, ps) => {
|
||||
onPageChange(p, ps)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Input, Modal } from 'antd'
|
||||
import type { UidEditState } from './types'
|
||||
|
||||
export interface UidEditModalProps {
|
||||
uidEdit: UidEditState | null
|
||||
savingUid: boolean
|
||||
onValueChange: (value: string) => void
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function UidEditModal({
|
||||
uidEdit,
|
||||
savingUid,
|
||||
onValueChange,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: UidEditModalProps) {
|
||||
return (
|
||||
<Modal
|
||||
title="修改买家填写的 UID"
|
||||
open={Boolean(uidEdit)}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
confirmLoading={savingUid}
|
||||
onOk={() => void onConfirm()}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose
|
||||
>
|
||||
<p style={{ marginTop: 0, color: '#64748b' }}>
|
||||
提货号继续留在原订单上，不会放回库存。改成扫码 UID 后，绑定阻断会解除。
|
||||
</p>
|
||||
{uidEdit?.scanned ? (
|
||||
<p>
|
||||
扫码角色：{uidEdit.roleName ? `「${uidEdit.roleName}」` : ''} {uidEdit.scanned}
|
||||
</p>
|
||||
) : null}
|
||||
<Input
|
||||
value={uidEdit?.value || ''}
|
||||
maxLength={15}
|
||||
placeholder="买家游戏 UID"
|
||||
onChange={(event) => onValueChange(event.target.value.replace(/\D/g, '').slice(0, 15))}
|
||||
onPressEnter={() => void onConfirm()}
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Button, Modal, Space, Typography, message } from 'antd'
|
||||
import { CopyOutlined, DownloadOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
|
||||
import { copyVoucherDataUrlToClipboard } from '../../utils/voucher'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export interface VoucherPreviewModalProps {
|
||||
open: boolean
|
||||
previewVoucherUrl: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function VoucherPreviewModal({
|
||||
open,
|
||||
previewVoucherUrl,
|
||||
onClose,
|
||||
}: VoucherPreviewModalProps) {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<SafetyCertificateOutlined style={{ color: '#10b981' }} />
|
||||
<span>发货到账存证凭据 (高清预览)</span>
|
||||
</Space>
|
||||
}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
footer={[
|
||||
<Button key="close" onClick={onClose}>
|
||||
关闭
|
||||
</Button>,
|
||||
<Button
|
||||
key="download"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => {
|
||||
if (!previewVoucherUrl) return
|
||||
const link = document.createElement('a')
|
||||
link.href = previewVoucherUrl
|
||||
link.download = `发货凭证_${Date.now()}.png`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('凭据图片已下载')
|
||||
}}
|
||||
>
|
||||
下载凭证图
|
||||
</Button>,
|
||||
<Button
|
||||
key="copy"
|
||||
type="primary"
|
||||
icon={<CopyOutlined />}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
|
||||
borderColor: '#059669',
|
||||
}}
|
||||
onClick={async () => {
|
||||
if (!previewVoucherUrl) return
|
||||
const copied = await copyVoucherDataUrlToClipboard(previewVoucherUrl)
|
||||
if (copied) {
|
||||
message.success('发货结果图片已复制到剪贴板！可直接在聊天窗粘贴 (Ctrl+V)')
|
||||
} else {
|
||||
message.info('请右键下方图片选择「复制图片」')
|
||||
}
|
||||
}}
|
||||
>
|
||||
复制图片到剪贴板
|
||||
</Button>,
|
||||
]}
|
||||
width={420}
|
||||
destroyOnClose
|
||||
centered
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '12px 0' }}>
|
||||
{previewVoucherUrl ? (
|
||||
<img
|
||||
src={previewVoucherUrl}
|
||||
alt="发货凭证大图"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: 520,
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.25)',
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ padding: 40, color: '#94a3b8' }}>正在生成高清凭据图...</div>
|
||||
)}
|
||||
<div style={{ marginTop: 12, fontSize: 12, color: '#64748b' }}>
|
||||
💡 提示：点击「复制图片到剪贴板」后，可直接在微信/QQ等客服聊天窗口按 <Text code>Ctrl + V</Text> 发送。
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
import { Button, Popconfirm, Space, Tag, Tooltip, Typography } from 'antd'
|
||||
import { CopyOutlined, EyeOutlined, UndoOutlined } from '@ant-design/icons'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import type { RockTokenItem } from '../../api'
|
||||
import type { UidEditState } from './types'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export interface TokenColumnHandlers {
|
||||
copyingVoucherId: number | null
|
||||
onCopyVoucher: (record: RockTokenItem) => void
|
||||
onPreviewVoucher: (record: RockTokenItem) => void
|
||||
onEditUid: (state: UidEditState) => void
|
||||
onResetToken: (id: number) => void
|
||||
onReleaseToken: (id: number) => void
|
||||
}
|
||||
|
||||
export function buildTokenColumns({
|
||||
copyingVoucherId,
|
||||
onCopyVoucher,
|
||||
onPreviewVoucher,
|
||||
onEditUid,
|
||||
onResetToken,
|
||||
onReleaseToken,
|
||||
}: TokenColumnHandlers): ColumnsType<RockTokenItem> {
|
||||
return [
|
||||
{
|
||||
title: '0666 编号 / 提取码',
|
||||
dataIndex: 'upstream_token_id',
|
||||
width: 250,
|
||||
render: (_, record) => (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Text
|
||||
copyable={record.upstream_token_id ? { text: record.upstream_token_id } : false}
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
0666 #{record.upstream_token_id || '-'}
|
||||
</Text>
|
||||
<Text
|
||||
copyable={record.redeem_code ? { text: record.redeem_code } : false}
|
||||
type="secondary"
|
||||
style={{ fontSize: 12, fontFamily: 'monospace' }}
|
||||
>
|
||||
{record.redeem_code || '-'}
|
||||
</Text>
|
||||
<Text type="secondary" style={{ fontSize: 11 }}>本地 #{record.id}</Text>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '规格与适用范围',
|
||||
dataIndex: 'color',
|
||||
width: 150,
|
||||
render: (_, record) => (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Tag color="geekblue" style={{ borderRadius: 4, fontWeight: 500 }}>
|
||||
通用黑色 Token
|
||||
</Tag>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{record.region || 'Q/V区通用 · 自动分发'}
|
||||
</Text>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '库存状态',
|
||||
dataIndex: 'status',
|
||||
width: 140,
|
||||
render: (status) => {
|
||||
switch (status) {
|
||||
case 'available':
|
||||
return (
|
||||
<Tag color="success" style={{ fontWeight: 600, padding: '2px 8px' }}>
|
||||
● 可用库存
|
||||
</Tag>
|
||||
)
|
||||
case 'using':
|
||||
return (
|
||||
<Tag color="processing" style={{ fontWeight: 600, padding: '2px 8px' }}>
|
||||
● 扫码使用中
|
||||
</Tag>
|
||||
)
|
||||
case 'bound':
|
||||
return (
|
||||
<Tag color="cyan" style={{ fontWeight: 600, padding: '2px 8px' }}>
|
||||
● 已授权绑定
|
||||
</Tag>
|
||||
)
|
||||
case 'redeemed':
|
||||
return (
|
||||
<Tag color="purple" style={{ fontWeight: 600, padding: '2px 8px' }}>
|
||||
● 已交付发货
|
||||
</Tag>
|
||||
)
|
||||
case 'mismatch':
|
||||
return (
|
||||
<Tag color="error" style={{ fontWeight: 600, padding: '2px 8px', border: '1px solid #ff4d4f' }}>
|
||||
⚠️ 绑定错误 (阻断)
|
||||
</Tag>
|
||||
)
|
||||
default:
|
||||
return <Tag>{status}</Tag>
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '关联业务工单',
|
||||
dataIndex: 'assigned_order_no',
|
||||
width: 220,
|
||||
render: (orderNo, record) => {
|
||||
if (!orderNo) {
|
||||
return <Text type="secondary">-</Text>
|
||||
}
|
||||
return (
|
||||
<Space direction="vertical" size={3}>
|
||||
{/* 系统履约工单号 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Text
|
||||
code
|
||||
copyable={{ text: orderNo }}
|
||||
style={{ fontWeight: 600, color: '#1d4ed8', fontSize: 12 }}
|
||||
title="系统履约工单号"
|
||||
>
|
||||
{orderNo}
|
||||
</Text>
|
||||
</div>
|
||||
{/* 创建订单时的商户单号 */}
|
||||
{record.client_order_no ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
|
||||
<span style={{ color: '#64748b' }}>商户:</span>
|
||||
<Text
|
||||
copyable={{ text: record.client_order_no }}
|
||||
type="secondary"
|
||||
style={{ fontFamily: 'monospace', fontSize: 12 }}
|
||||
title="创建订单时的商户单号 (ClientOrderNo)"
|
||||
>
|
||||
{record.client_order_no}
|
||||
</Text>
|
||||
</div>
|
||||
) : null}
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '预期 UID vs 扫码角色 (风控门禁)',
|
||||
width: 250,
|
||||
render: (_, record) => {
|
||||
const isMismatch = record.status === 'mismatch'
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: isMismatch ? '6px 10px' : '0',
|
||||
background: isMismatch ? '#fff1f0' : 'transparent',
|
||||
borderRadius: isMismatch ? 6 : 0,
|
||||
border: isMismatch ? '1px dashed #ffa39e' : 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
|
||||
<span style={{ color: '#64748b' }}>预期 UID:</span>
|
||||
<Text strong style={{ color: '#0f172a' }}>{record.expected_uid || '-'}</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, marginTop: 2 }}>
|
||||
<span style={{ color: '#64748b' }}>扫码反查:</span>
|
||||
<Text type={isMismatch ? 'danger' : undefined} strong={isMismatch}>
|
||||
{record.actual_role_name ? `${record.actual_role_name} (${record.actual_role_id || '-'})` : '-'}
|
||||
</Text>
|
||||
</div>
|
||||
{isMismatch && record.mismatch_reason && (
|
||||
<div style={{ marginTop: 4 }}>
|
||||
<Tooltip title={record.mismatch_reason}>
|
||||
<Tag color="error" style={{ fontSize: 11, margin: 0, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{record.mismatch_reason}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发货结果图片',
|
||||
key: 'voucher',
|
||||
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 (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
{/* 商品缩略图：鼠标悬浮微放、点击快速预览高清大图凭据 */}
|
||||
<Tooltip title="点击预览深海蓝发货凭据大图">
|
||||
<div
|
||||
onClick={() => onPreviewVoucher(record)}
|
||||
style={{
|
||||
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)'
|
||||
}}
|
||||
>
|
||||
<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"
|
||||
type="primary"
|
||||
icon={<CopyOutlined />}
|
||||
loading={isCopying}
|
||||
onClick={() => onCopyVoucher(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={() => onPreviewVoucher(record)}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
<div>
|
||||
<Tag color="cyan" style={{ fontSize: 11, margin: 0 }}>
|
||||
{record.target_skin || '黑色ROCK长袖T恤'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 168,
|
||||
fixed: 'right',
|
||||
render: (_, record) => {
|
||||
if (record.status === 'mismatch') {
|
||||
return (
|
||||
<Space direction="vertical" size={4}>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() =>
|
||||
onEditUid({
|
||||
id: record.id,
|
||||
value: record.actual_role_id || record.expected_uid || '',
|
||||
scanned: record.actual_role_id || '',
|
||||
roleName: record.actual_role_name || '',
|
||||
})
|
||||
}
|
||||
>
|
||||
修改 UID
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定解冻重置该 Token？"
|
||||
description="重置后将清除原订单绑定与错误标记，重新释放为可用通用库存。已扫码的链接放回库存后，其他订单领走就会废掉。"
|
||||
okText="确认解冻"
|
||||
cancelText="取消"
|
||||
onConfirm={() => onResetToken(record.id)}
|
||||
>
|
||||
<Button size="small" danger ghost icon={<UndoOutlined />}>
|
||||
解冻重置
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
if (record.status === 'using' && !record.bound_at && !record.actual_role_id) {
|
||||
return (
|
||||
<Popconfirm
|
||||
title="释放这条未绑定的提货链接？"
|
||||
description="仅在买家没有扫码绑定时可以释放。系统会先向上游确认；确认未绑定后，链接回到可用库存，可以分给下一单。请先确认该订单已退款。原发货页若仍打开，买家再次获取二维码会重新占用一条库存。"
|
||||
okText="确认释放"
|
||||
cancelText="取消"
|
||||
onConfirm={() => onReleaseToken(record.id)}
|
||||
>
|
||||
<Button size="small" icon={<UndoOutlined />}>
|
||||
释放回库存
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
)
|
||||
}
|
||||
return <Text type="secondary">-</Text>
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface UidEditState {
|
||||
id: number
|
||||
value: string
|
||||
scanned: string
|
||||
roleName: string
|
||||
}
|
||||
Reference in New Issue
Block a user