579 lines
19 KiB
TypeScript
579 lines
19 KiB
TypeScript
import { BugOutlined, CopyOutlined, LinkOutlined } from '@ant-design/icons'
|
||
import {
|
||
Alert,
|
||
App,
|
||
Button,
|
||
Card,
|
||
Col,
|
||
Divider,
|
||
Form,
|
||
Input,
|
||
Result,
|
||
Row,
|
||
Select,
|
||
Space,
|
||
Typography,
|
||
} from 'antd'
|
||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||
import { useMemo, useState } from 'react'
|
||
import { Link } from 'react-router'
|
||
|
||
import PageHeader from '@/components/admin/PageHeader'
|
||
import {
|
||
buildOpen91QueryDevMock,
|
||
createAffiliateDashDevMock,
|
||
createFeifeiDevMock,
|
||
createKuaishouIndustryVoucherDevMock,
|
||
createLewanDevMock,
|
||
fetchDevMockStatus,
|
||
type DevMockCreateResult,
|
||
type DevMockKuaishouIndustryVoucherResult,
|
||
type DevMockOpen91QueryResult,
|
||
} from '@/services/admin'
|
||
|
||
export default function AdminDevMockPage() {
|
||
const { message } = App.useApp()
|
||
const [lastCreate, setLastCreate] = useState<DevMockCreateResult | null>(null)
|
||
const [lastVoucherCreate, setLastVoucherCreate] =
|
||
useState<DevMockKuaishouIndustryVoucherResult | null>(null)
|
||
const [lastQuery, setLastQuery] = useState<DevMockOpen91QueryResult | null>(null)
|
||
|
||
const statusQuery = useQuery({
|
||
queryKey: ['admin-dev-mock-status'],
|
||
queryFn: () => fetchDevMockStatus(),
|
||
retry: false,
|
||
})
|
||
|
||
const status = statusQuery.data?.data
|
||
const enabled = Boolean(status?.enabled)
|
||
|
||
const lewanMutation = useMutation({
|
||
mutationFn: createLewanDevMock,
|
||
onSuccess: (response) => {
|
||
setLastCreate(response.data)
|
||
message.success('lewan mock 已生成')
|
||
},
|
||
onError: (error) => {
|
||
message.error(error instanceof Error ? error.message : '生成失败')
|
||
},
|
||
})
|
||
|
||
const feifeiMutation = useMutation({
|
||
mutationFn: createFeifeiDevMock,
|
||
onSuccess: (response) => {
|
||
setLastCreate(response.data)
|
||
message.success('feifei mock 已生成')
|
||
},
|
||
onError: (error) => {
|
||
message.error(error instanceof Error ? error.message : '生成失败')
|
||
},
|
||
})
|
||
|
||
const affiliateDashMutation = useMutation({
|
||
mutationFn: createAffiliateDashDevMock,
|
||
onSuccess: (response) => {
|
||
setLastCreate(response.data)
|
||
message.success('affiliate-dash mock 已生成')
|
||
},
|
||
onError: (error) => {
|
||
message.error(error instanceof Error ? error.message : '生成失败')
|
||
},
|
||
})
|
||
|
||
const voucherMutation = useMutation({
|
||
mutationFn: createKuaishouIndustryVoucherDevMock,
|
||
onSuccess: (response) => {
|
||
setLastVoucherCreate(response.data)
|
||
message.success(`已生成 ${response.data.createdCount} 条电子凭证 Mock`)
|
||
},
|
||
onError: (error) => {
|
||
message.error(error instanceof Error ? error.message : '生成失败')
|
||
},
|
||
})
|
||
|
||
const open91Mutation = useMutation({
|
||
mutationFn: buildOpen91QueryDevMock,
|
||
onSuccess: (response) => {
|
||
setLastQuery(response.data)
|
||
message.success('91 查单请求已生成')
|
||
},
|
||
onError: (error) => {
|
||
message.error(error instanceof Error ? error.message : '生成失败')
|
||
},
|
||
})
|
||
|
||
const defaultOrderNo = useMemo(() => lastCreate?.orderNo || '', [lastCreate?.orderNo])
|
||
|
||
if (statusQuery.isLoading) {
|
||
return (
|
||
<section className="page-stack">
|
||
<PageHeader title="开发 Mock" description="加载中…" />
|
||
</section>
|
||
)
|
||
}
|
||
|
||
if (statusQuery.error || !enabled) {
|
||
return (
|
||
<section className="page-stack">
|
||
<PageHeader title="开发 Mock" description="仅开发环境可用。" />
|
||
<Result
|
||
status="403"
|
||
title="当前环境未开启开发 Mock"
|
||
subTitle={
|
||
statusQuery.error instanceof Error
|
||
? statusQuery.error.message
|
||
: '生产环境默认关闭。本地开发请使用 docker-compose.dev 或设置 ENABLE_DEV_MOCK=1。'
|
||
}
|
||
/>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<section className="page-stack">
|
||
<PageHeader
|
||
title="开发 Mock"
|
||
description="一键造单、测领取页与 91 查单，无需真实 91 / 快手 / feifei 环境。"
|
||
extra={
|
||
<Typography.Text type="secondary">NODE_ENV={status?.nodeEnv || '-'}</Typography.Text>
|
||
}
|
||
/>
|
||
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
icon={<BugOutlined />}
|
||
message="Mock 会写入开发库真实订单/任务，但 lewan 兑换走 mock 成功路径，feifei 不调用真实平台下单。"
|
||
description="建议 UID 与默认角色一致：lewan 默认 10001，feifei 默认 166909256。"
|
||
/>
|
||
|
||
<Row gutter={[16, 16]}>
|
||
<Col xs={24} xl={12}>
|
||
<Card title="1. lewan 领取（强制 UID）" bordered={false}>
|
||
<LewanMockForm
|
||
defaultUid={status?.defaultUid || '10001'}
|
||
loading={lewanMutation.isPending}
|
||
onSubmit={(values) => lewanMutation.mutate(values)}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={12}>
|
||
<Card title="2. feifei 领取（拼 UID 到 H5）" bordered={false}>
|
||
<FeifeiMockForm
|
||
loading={feifeiMutation.isPending}
|
||
onSubmit={(values) => feifeiMutation.mutate(values)}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={12}>
|
||
<Card title="3. affiliate-dash 领取（mock 二维码/提交发货）" bordered={false}>
|
||
<AffiliateDashMockForm
|
||
loading={affiliateDashMutation.isPending}
|
||
onSubmit={(values) => affiliateDashMutation.mutate(values)}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={12}>
|
||
<Card title="4. 快手电子凭证测试数据" bordered={false}>
|
||
<KuaishouIndustryVoucherMockForm
|
||
loading={voucherMutation.isPending}
|
||
onSubmit={(values) => voucherMutation.mutate(values)}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24}>
|
||
<Card title="5. 模拟 91 查单（open-91/query）" bordered={false}>
|
||
<Form
|
||
layout="inline"
|
||
initialValues={{ orderNo: defaultOrderNo, execute: '1' }}
|
||
key={defaultOrderNo}
|
||
onFinish={(values) =>
|
||
open91Mutation.mutate({
|
||
orderNo: values.orderNo,
|
||
execute: values.execute === '1',
|
||
})
|
||
}
|
||
>
|
||
<Form.Item
|
||
label="orderNo"
|
||
name="orderNo"
|
||
rules={[{ required: true, message: '填写上方生成的订单号' }]}
|
||
>
|
||
<Input style={{ width: 280 }} placeholder="MOCK91…" />
|
||
</Form.Item>
|
||
<Form.Item label="执行" name="execute">
|
||
<Select
|
||
style={{ width: 180 }}
|
||
options={[
|
||
{ value: '1', label: '生成并请求本机' },
|
||
{ value: '0', label: '仅生成请求体' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={open91Mutation.isPending}>
|
||
模拟 91 查单
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
<Typography.Paragraph type="secondary" style={{ marginTop: 12, marginBottom: 0 }}>
|
||
对应日志：POST /api/v1/open/91/orders/query。需配置 KAQUAN91_SECRET（32 位）。
|
||
</Typography.Paragraph>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
{lastCreate ? (
|
||
<Card
|
||
title="最近生成结果"
|
||
extra={
|
||
<Space>
|
||
<Link to={`/admin/orders/${lastCreate.orderId}`}>订单 #{lastCreate.orderId}</Link>
|
||
<Link to={`/admin/tasks/${lastCreate.taskId}`}>任务 #{lastCreate.taskId}</Link>
|
||
</Space>
|
||
}
|
||
>
|
||
<Row gutter={[16, 12]}>
|
||
<Col xs={24} md={12}>
|
||
<Typography.Text type="secondary">平台</Typography.Text>
|
||
<div>
|
||
<Typography.Text strong>{lastCreate.platform}</Typography.Text>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Typography.Text type="secondary">步骤 / UID</Typography.Text>
|
||
<div>
|
||
<Typography.Text strong>
|
||
{lastCreate.step} / {lastCreate.expectedUid}
|
||
</Typography.Text>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Typography.Text type="secondary">91 订单号</Typography.Text>
|
||
<div>
|
||
<Typography.Text copyable>{lastCreate.orderNo}</Typography.Text>
|
||
</div>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Typography.Text type="secondary">商品</Typography.Text>
|
||
<div>{lastCreate.productName}</div>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Typography.Text type="secondary">领取链接</Typography.Text>
|
||
<div>
|
||
<Typography.Link href={lastCreate.claimUrl} target="_blank" rel="noreferrer">
|
||
<LinkOutlined /> {lastCreate.claimUrl}
|
||
</Typography.Link>
|
||
</div>
|
||
<Space style={{ marginTop: 8 }} wrap>
|
||
<Button
|
||
icon={<CopyOutlined />}
|
||
onClick={async () => {
|
||
await navigator.clipboard.writeText(lastCreate.claimUrl)
|
||
message.success('已复制领取链接')
|
||
}}
|
||
>
|
||
复制链接
|
||
</Button>
|
||
<Button type="primary" href={lastCreate.claimUrl} target="_blank">
|
||
打开领取页
|
||
</Button>
|
||
</Space>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Alert
|
||
type="success"
|
||
showIcon
|
||
message="操作提示"
|
||
description={
|
||
<ul style={{ margin: 0, paddingLeft: 18 }}>
|
||
{lastCreate.tips.map((tip) => (
|
||
<li key={tip}>{tip}</li>
|
||
))}
|
||
<li>{lastCreate.open91QueryHint}</li>
|
||
</ul>
|
||
}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
) : null}
|
||
|
||
{lastVoucherCreate ? (
|
||
<Card
|
||
title="最近生成的电子凭证 Mock"
|
||
extra={<Link to="/admin/kuaishou-industry">查看电子凭证</Link>}
|
||
>
|
||
<Typography.Paragraph type="secondary">
|
||
已为店铺 {lastVoucherCreate.sellerId} 写入 {lastVoucherCreate.createdCount} 条测试券码。
|
||
</Typography.Paragraph>
|
||
<Space direction="vertical" size={4}>
|
||
{lastVoucherCreate.vouchers.map((voucher) => (
|
||
<Typography.Text key={voucher.voucherCode} copyable>
|
||
{voucher.status} · {voucher.voucherCode} · {voucher.oid}
|
||
</Typography.Text>
|
||
))}
|
||
</Space>
|
||
</Card>
|
||
) : null}
|
||
|
||
{lastQuery ? (
|
||
<Card title="91 查单结果">
|
||
<Typography.Paragraph>
|
||
<Typography.Text type="secondary">Endpoint：</Typography.Text>
|
||
<Typography.Text code copyable>
|
||
{lastQuery.endpoint}
|
||
</Typography.Text>
|
||
</Typography.Paragraph>
|
||
<Typography.Paragraph>
|
||
<Typography.Text type="secondary">Request：</Typography.Text>
|
||
</Typography.Paragraph>
|
||
<pre className="dev-mock-pre">{JSON.stringify(lastQuery.requestBody, null, 2)}</pre>
|
||
<Typography.Paragraph>
|
||
<Typography.Text type="secondary">curl：</Typography.Text>
|
||
<Typography.Text code copyable>
|
||
{lastQuery.curl}
|
||
</Typography.Text>
|
||
</Typography.Paragraph>
|
||
{lastQuery.response ? (
|
||
<>
|
||
<Divider />
|
||
<Typography.Paragraph>
|
||
<Typography.Text type="secondary">Response：</Typography.Text>
|
||
</Typography.Paragraph>
|
||
<pre className="dev-mock-pre">{JSON.stringify(lastQuery.response, null, 2)}</pre>
|
||
</>
|
||
) : null}
|
||
</Card>
|
||
) : null}
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function LewanMockForm({
|
||
defaultUid,
|
||
loading,
|
||
onSubmit,
|
||
}: {
|
||
defaultUid: string
|
||
loading: boolean
|
||
onSubmit: (values: Record<string, unknown>) => void
|
||
}) {
|
||
const [form] = Form.useForm()
|
||
const step = Form.useWatch('step', form)
|
||
const uidRequired = step !== 'uid'
|
||
|
||
return (
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
step: 'uid',
|
||
uid: defaultUid || '10001',
|
||
productNo: '套餐_1----3676797936',
|
||
}}
|
||
onFinish={onSubmit}
|
||
>
|
||
<Form.Item
|
||
label="页面步骤"
|
||
name="step"
|
||
tooltip="uid=只到填编号第一步；binding=已预填编号且角色匹配；confirm/result=后续步骤"
|
||
>
|
||
<Select
|
||
options={[
|
||
{ value: 'uid', label: 'uid · 待填 UID（第一步）' },
|
||
{ value: 'binding', label: 'binding · 绑定且 UID 已匹配（推荐）' },
|
||
{ value: 'confirm', label: 'confirm · 待确认兑换' },
|
||
{ value: 'result', label: 'result · 已完成' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="游戏 UID"
|
||
name="uid"
|
||
required={uidRequired}
|
||
rules={
|
||
uidRequired
|
||
? [{ required: true, whitespace: true, message: '后续步骤请填写游戏 UID' }]
|
||
: []
|
||
}
|
||
extra={
|
||
step === 'uid'
|
||
? '「待填 UID」步骤可不填，打开领取页会停留在第一步让用户填写'
|
||
: '后续步骤用于模拟已提交的编号，建议与默认角色一致（如 10001）'
|
||
}
|
||
>
|
||
<Input allowClear placeholder={defaultUid || '10001'} />
|
||
</Form.Item>
|
||
<Form.Item label="91 商品 productNo" name="productNo">
|
||
<Input placeholder="套餐_1----3676797936" />
|
||
</Form.Item>
|
||
<Form.Item label="订单号 orderNo（可空自动生成）" name="orderNo">
|
||
<Input placeholder="留空自动 MOCK91…" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading} block>
|
||
生成 lewan Mock
|
||
</Button>
|
||
</Form>
|
||
)
|
||
}
|
||
|
||
function FeifeiMockForm({
|
||
loading,
|
||
onSubmit,
|
||
}: {
|
||
loading: boolean
|
||
onSubmit: (values: Record<string, unknown>) => void
|
||
}) {
|
||
const [form] = Form.useForm()
|
||
const step = Form.useWatch('step', form)
|
||
const uidRequired = step !== 'uid'
|
||
|
||
return (
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
step: 'uid',
|
||
uid: '166909256',
|
||
productName: '套装-浪漫天命',
|
||
}}
|
||
onFinish={onSubmit}
|
||
>
|
||
<Form.Item label="页面步骤" name="step">
|
||
<Select
|
||
options={[
|
||
{ value: 'uid', label: 'uid · 待填 UID（第一步）' },
|
||
{ value: 'ready', label: 'ready · 已填 UID，可打开 H5（推荐）' },
|
||
{ value: 'completed', label: 'completed · 模拟成功' },
|
||
{ value: 'failed', label: 'failed · 模拟失败' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="游戏 UID"
|
||
name="uid"
|
||
required={uidRequired}
|
||
rules={
|
||
uidRequired
|
||
? [{ required: true, whitespace: true, message: '后续步骤请填写游戏 UID' }]
|
||
: []
|
||
}
|
||
extra={
|
||
step === 'uid'
|
||
? '「待填 UID」步骤可不填，打开领取页会停留在第一步让用户填写'
|
||
: '后续步骤用于模拟已提交的编号'
|
||
}
|
||
>
|
||
<Input allowClear placeholder="166909256" />
|
||
</Form.Item>
|
||
<Form.Item label="商品名" name="productName">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item label="H5 链接（可空用 mock 地址）" name="h5Url">
|
||
<Input placeholder="http://skin-exchange.../h5/bind?code=..." />
|
||
</Form.Item>
|
||
<Form.Item label="订单号 orderNo（可空）" name="orderNo">
|
||
<Input placeholder="留空自动 MOCKFF…" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading} block>
|
||
生成 feifei Mock
|
||
</Button>
|
||
</Form>
|
||
)
|
||
}
|
||
|
||
function AffiliateDashMockForm({
|
||
loading,
|
||
onSubmit,
|
||
}: {
|
||
loading: boolean
|
||
onSubmit: (values: Record<string, unknown>) => void
|
||
}) {
|
||
const [form] = Form.useForm()
|
||
const step = Form.useWatch('step', form)
|
||
const uidRequired = step !== 'uid'
|
||
|
||
return (
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
step: 'bind',
|
||
uid: '166909256',
|
||
productName: '幸运币90个',
|
||
productSku: 'lucky_coin_x90',
|
||
}}
|
||
onFinish={onSubmit}
|
||
>
|
||
<Form.Item label="页面步骤" name="step">
|
||
<Select
|
||
options={[
|
||
{ value: 'uid', label: 'uid · 待填 UID（第一步）' },
|
||
{ value: 'bind', label: 'bind · 已填 UID + mock 绑定二维码（第二步，推荐）' },
|
||
{ value: 'submitted', label: 'submitted · 已绑定待提交发货（第三步）' },
|
||
{ value: 'completed', label: 'completed · 模拟发货成功（第四步）' },
|
||
{ value: 'failed', label: 'failed · 模拟发货失败' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="游戏 UID"
|
||
name="uid"
|
||
required={uidRequired}
|
||
rules={
|
||
uidRequired
|
||
? [{ required: true, whitespace: true, message: '后续步骤请填写游戏 UID' }]
|
||
: []
|
||
}
|
||
extra={
|
||
step === 'uid'
|
||
? '「待填 UID」步骤可不填，打开领取页会停留在第一步让用户填写'
|
||
: '后续步骤用于模拟已提交的编号'
|
||
}
|
||
>
|
||
<Input allowClear placeholder="166909256" />
|
||
</Form.Item>
|
||
<Form.Item label="商品名" name="productName">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item label="affiliate-dash sku（可空）" name="productSku">
|
||
<Input placeholder="lucky_coin_x90" />
|
||
</Form.Item>
|
||
<Form.Item label="订单号 orderNo（可空）" name="orderNo">
|
||
<Input placeholder="留空自动 MOCKAD…" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading} block>
|
||
生成 affiliate-dash Mock
|
||
</Button>
|
||
</Form>
|
||
)
|
||
}
|
||
|
||
function KuaishouIndustryVoucherMockForm({
|
||
loading,
|
||
onSubmit,
|
||
}: {
|
||
loading: boolean
|
||
onSubmit: (values: { sellerId?: string }) => void
|
||
}) {
|
||
return (
|
||
<Form layout="vertical" onFinish={onSubmit}>
|
||
<Form.Item
|
||
label="店铺 ID（可空）"
|
||
name="sellerId"
|
||
extra="留空时使用快手行业配置中的首个启用店铺；会生成 6 条不同状态的券码。"
|
||
>
|
||
<Input allowClear placeholder="留空自动选择测试店铺" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading} block>
|
||
生成电子凭证 Mock
|
||
</Button>
|
||
</Form>
|
||
)
|
||
}
|