feat: add manual fulfillment order creation

2026-08-11 11:49:58 +08:00
parent 2264851d5d
commit b686a82e60
12 changed files with 278 additions and 121 deletions
@@ -7,6 +7,7 @@ import type {
  ApiCredential,
  CallbackCredential,
  CallbackSubscription,
+  CreateManualOrderResult,
  CreateTestOrderResult,
  DeliveryBindResult,
  DeliveryOrderInfo,
@@ -66,6 +67,14 @@ export const merchantApi = {
    note?: string
    order_status?: 'paid' | 'ship_failed' | 'cancelled'
  }) => request.post('/merchant/orders/test', data).then((r) => r.data.data as CreateTestOrderResult),
+  createManualOrder: (data: {
+    client_order_no: string
+    sku: string
+    quantity: number
+    buyer_reference?: string
+    game_account?: string
+    note?: string
+  }) => request.post('/merchant/orders/manual', data).then((r) => r.data.data as CreateManualOrderResult),
  getDeliveryLink: (orderNo: string) =>
    request.get(`/merchant/orders/${encodeURIComponent(orderNo)}/delivery-link`).then((r) => r.data.data as DeliveryLinkResult),
  revokeDeliveryLink: (orderNo: string) =>
@@ -2,33 +2,24 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import {
  Button,
-  Descriptions,
  Form,
  Input,
  InputNumber,
  Modal,
  Select,
-  Space,
  Tabs,
-  Tag,
  Typography,
  message,
 } from 'antd'
-import {
-  CopyOutlined,
-  LinkOutlined,
-  ReloadOutlined,
-} from '@ant-design/icons'
+import { ReloadOutlined } from '@ant-design/icons'
 import { useAuth } from '../store/auth'
 import { merchantApi } from '../api'
-import { formatDateTime } from '../utils/time'
 import { PageHeader } from '../components/PageHeader'
 import type {
  ApiClient,
  ApiCredential,
  CallbackCredential,
  CallbackSubscription,
-  CreateTestOrderResult,
  FulfillmentOrder,
  Merchant,
  MerchantMember,
@@ -48,7 +39,6 @@ import {
  roleText,
  scopeOptions,
  tabFromSearch,
-  testOrderStatusOptions,
 } from './merchantCenterUtils'
 import type { MerchantCenterProps, MerchantCenterTab } from './merchantCenterUtils'
 import {
@@ -71,6 +61,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
  const [activeTab, setActiveTab] = useState<MerchantCenterTab>(routeTab ?? 'products')
  const [products, setProducts] = useState<PageResult<MerchantProduct>>({ list: [], total: 0, page: 1, size: 10 })
  const [orders, setOrders] = useState<PageResult<FulfillmentOrder>>({ list: [], total: 0, page: 1, size: 10 })
+  const [orderSource, setOrderSource] = useState<'api' | 'manual'>('api')
  const [ledger, setLedger] = useState<PageResult<WalletLedgerEntry>>({ list: [], total: 0, page: 1, size: 10 })
  const [wallet, setWallet] = useState<WalletAccount | null>(null)
  const [apiClients, setApiClients] = useState<ApiClient[]>([])
@@ -81,24 +72,24 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
  const [apiCredential, setApiCredential] = useState<ApiCredential | null>(null)
  const [callbackCredential, setCallbackCredential] = useState<CallbackCredential | null>(null)
  const [memberOpen, setMemberOpen] = useState(false)
-  const [testOrderOpen, setTestOrderOpen] = useState(false)
-  const [testOrderProducts, setTestOrderProducts] = useState<MerchantProduct[]>([])
-  const [testOrderProductsLoading, setTestOrderProductsLoading] = useState(false)
-  const [testOrderResult, setTestOrderResult] = useState<CreateTestOrderResult | null>(null)
+  const [manualOrderOpen, setManualOrderOpen] = useState(false)
+  const [manualOrderSubmitting, setManualOrderSubmitting] = useState(false)
+  const [manualOrderProducts, setManualOrderProducts] = useState<MerchantProduct[]>([])
+  const [manualOrderProductsLoading, setManualOrderProductsLoading] = useState(false)
  const [walletFilterForm] = Form.useForm()
  const [apiClientForm] = Form.useForm()
  const [callbackForm] = Form.useForm()
  const [memberForm] = Form.useForm()
-  const [testOrderForm] = Form.useForm()
+  const [manualOrderForm] = Form.useForm()

  const canManage = merchantRole === 'owner' || merchantRole === 'operator'
  const canFinance = merchantRole === 'owner' || merchantRole === 'finance'
  const enabledFeatures = useMemo(() => new Set(featuresToList(merchant?.features)), [merchant?.features])
  const hasFeature = useCallback((feature: string) => !merchant || enabledFeatures.has(feature), [enabledFeatures, merchant])
-  const testOrderProductOptions = useMemo(() => testOrderProducts.map((item) => ({
+  const manualOrderProductOptions = useMemo(() => manualOrderProducts.map((item) => ({
    value: item.sku,
    label: productOptionLabel(item),
-  })), [testOrderProducts])
+  })), [manualOrderProducts])

  const copyDeliveryLink = useCallback((orderNo: string) => {
    merchantApi.getDeliveryLink(orderNo)
@@ -117,10 +108,6 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
      ...prev,
      list: prev.list.map((item) => item.order_no === orderNo ? { ...item, ...patch } : item),
    }))
-    setTestOrderResult((prev) => prev?.order.order_no === orderNo ? {
-      ...prev,
-      order: { ...prev.order, ...patch },
-    } : prev)
  }, [])

  const revokeDeliveryLink = useCallback((orderNo: string) => {
@@ -157,10 +144,10 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
    setProducts(data)
  }, [products.page, products.size])

-  const loadOrders = useCallback(async (page = orders.page, size = orders.size) => {
-    const data = await merchantApi.orders({ page, size })
+  const loadOrders = useCallback(async (page = orders.page, size = orders.size, source = orderSource) => {
+    const data = await merchantApi.orders({ page, size, order_source: source })
    setOrders(data)
-  }, [orders.page, orders.size])
+  }, [orderSource, orders.page, orders.size])

  const loadWallet = useCallback(async (
    page = ledger.page,
@@ -286,21 +273,25 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
    })
  }, [loadWallet, merchantRole, walletFilterForm])

-  const openTestOrderCreate = () => {
-    testOrderForm.resetFields()
-    testOrderForm.setFieldsValue({
-      buyer_reference: '测试买家',
-      note: '联调测试订单',
-      order_status: 'paid',
+  const newManualClientOrderNo = () => {
+    const suffix = window.crypto?.randomUUID?.().replaceAll('-', '') || `${Date.now()}${Math.random().toString(36).slice(2)}`
+    return `manual-${suffix.slice(0, 32)}`
+  }
+
+  const openManualOrderCreate = () => {
+    manualOrderForm.resetFields()
+    manualOrderForm.setFieldsValue({
+      client_order_no: newManualClientOrderNo(),
+      quantity: 1,
    })
-    setTestOrderOpen(true)
-    setTestOrderProductsLoading(true)
+    setManualOrderOpen(true)
+    setManualOrderProductsLoading(true)
    merchantApi.products({ page: 1, size: 100 })
      .then((data) => {
        const activeProducts = (data.list || []).filter((item) => item.status === 'active')
-        setTestOrderProducts(activeProducts)
+        setManualOrderProducts(activeProducts)
        if (activeProducts.length > 0) {
-          testOrderForm.setFieldsValue({ sku: activeProducts[0].sku })
+          manualOrderForm.setFieldsValue({ sku: activeProducts[0].sku })
        } else {
          message.warning('没有可用商品')
        }
@@ -308,27 +299,37 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
      .catch((e) => {
        message.error(e instanceof Error ? e.message : '商品加载失败')
      })
-      .finally(() => setTestOrderProductsLoading(false))
+      .finally(() => setManualOrderProductsLoading(false))
  }

-  const submitTestOrder = async () => {
-    const values = await testOrderForm.validateFields()
+  const submitManualOrder = async () => {
+    const values = await manualOrderForm.validateFields()
+    setManualOrderSubmitting(true)
    try {
-      const result = await merchantApi.createTestOrder({
+      const result = await merchantApi.createManualOrder({
+        client_order_no: values.client_order_no,
        sku: values.sku,
+        quantity: values.quantity,
        buyer_reference: values.buyer_reference,
+        game_account: values.game_account,
        note: values.note,
-        order_status: values.order_status,
      })
-      setTestOrderOpen(false)
-      setTestOrderResult(result)
-      message.success('测试订单已创建')
-      loadOrders()
+      setManualOrderOpen(false)
+      setOrderSource('manual')
+      message.success(result.idempotent ? '已找到已有手动订单，未重复扣款' : '手动订单已创建，余额与库存已扣减')
+      await loadOrders(1, orders.size, 'manual')
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败')
+    } finally {
+      setManualOrderSubmitting(false)
    }
  }

+  const changeOrderSource = (source: 'api' | 'manual') => {
+    setOrderSource(source)
+    loadOrders(1, orders.size, source).catch((e) => message.error(e instanceof Error ? e.message : '订单加载失败'))
+  }
+
  const submitAPIClient = async () => {
    const values = await apiClientForm.validateFields()
    try {
@@ -425,7 +426,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
      <ProductsTab loading={loading} products={products} canManage={canManage} onToggleProduct={openProductToggle} onLoadProducts={loadProducts} />
    ) },
    { key: 'orders', label: '发货订单', disabled: !hasFeature('orders'), children: (
-      <OrdersTab loading={loading} orders={orders} canManage={canManage} onCreateTestOrder={openTestOrderCreate} onLoadOrders={loadOrders} onCopyLink={copyDeliveryLink} onOpenLink={openDeliveryLink} onRevokeLink={revokeDeliveryLink} onRestoreLink={restoreDeliveryLink} />
+      <OrdersTab loading={loading} orders={orders} orderSource={orderSource} canManage={canManage} onCreateManualOrder={openManualOrderCreate} onOrderSourceChange={changeOrderSource} onLoadOrders={loadOrders} onCopyLink={copyDeliveryLink} onOpenLink={openDeliveryLink} onRevokeLink={revokeDeliveryLink} onRestoreLink={restoreDeliveryLink} />
    ) },
    { key: 'wallet', label: '钱包', disabled: !hasFeature('wallet'), children: (
      <WalletTab loading={loading} wallet={wallet} canFinance={canFinance} ledger={ledger} form={walletFilterForm} onFilter={handleWalletFilter} onResetFilter={handleWalletFilterReset} onLoadLedger={handleLoadLedger} />
@@ -483,21 +484,27 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
        />
      )}

-      <Modal title="创建测试订单" open={testOrderOpen} onOk={submitTestOrder} onCancel={() => setTestOrderOpen(false)} destroyOnClose width={560}>
-        <Form form={testOrderForm} layout="vertical" style={{ marginTop: 16 }}>
-          <Form.Item name="sku" label="商品皮肤" rules={[{ required: true, message: '请选择商品' }]}>
+      <Modal title="创建手动订单" open={manualOrderOpen} confirmLoading={manualOrderSubmitting} onOk={submitManualOrder} onCancel={() => setManualOrderOpen(false)} destroyOnClose width={560}>
+        <Form form={manualOrderForm} layout="vertical" style={{ marginTop: 16 }}>
+          <Form.Item name="client_order_no" label="商户单号" rules={[{ required: true, message: '请输入商户单号' }, { max: 96, message: '商户单号最长 96 个字符' }]}>
+            <Input maxLength={96} />
+          </Form.Item>
+          <Form.Item name="sku" label="商品" rules={[{ required: true, message: '请选择商品' }]}>
            <Select
              showSearch
-              loading={testOrderProductsLoading}
+              loading={manualOrderProductsLoading}
              optionFilterProp="label"
-              options={testOrderProductOptions}
+              options={manualOrderProductOptions}
            />
          </Form.Item>
-          <Form.Item name="buyer_reference" label="买家名称" rules={[{ max: 128 }]}>
-            <Input />
+          <Form.Item name="quantity" label="数量" rules={[{ required: true, message: '请输入数量' }]}>
+            <InputNumber min={1} precision={0} style={{ width: '100%' }} />
          </Form.Item>
-          <Form.Item name="order_status" label="订单状态" rules={[{ required: true }]}>
-            <Select options={testOrderStatusOptions} />
+          <Form.Item name="game_account" label="充值账号 / 游戏 UID" rules={[{ max: 128, message: '账号最长 128 个字符' }]}>
+            <Input maxLength={128} placeholder="用于后续发货时预填" />
+          </Form.Item>
+          <Form.Item name="buyer_reference" label="买家标识" rules={[{ max: 128, message: '买家标识最长 128 个字符' }]}>
+            <Input maxLength={128} />
          </Form.Item>
          <Form.Item name="note" label="备注" rules={[{ max: 512 }]}>
            <Input.TextArea rows={3} />
@@ -505,60 +512,6 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
        </Form>
      </Modal>

-      <Modal
-        title="测试订单"
-        open={!!testOrderResult}
-        onCancel={() => setTestOrderResult(null)}
-        footer={(
-          <Space>
-            <Button onClick={() => setTestOrderResult(null)}>关闭</Button>
-            {testOrderResult?.order.delivery_link_revoked_at ? (
-              <Button onClick={() => restoreDeliveryLink(testOrderResult?.order.order_no || '')}>取消作废</Button>
-            ) : (
-              <>
-                <Button
-                  icon={<CopyOutlined />}
-                  onClick={() => copyDeliveryLink(testOrderResult?.order.order_no || '')}
-                >
-                  复制发货链接
-                </Button>
-                <Button type="primary" icon={<LinkOutlined />} onClick={() => openDeliveryLink(testOrderResult?.order.order_no || '')}>
-                  打开发货页
-                </Button>
-                <Button danger onClick={() => revokeDeliveryLink(testOrderResult?.order.order_no || '')}>作废链接</Button>
-              </>
-            )}
-          </Space>
-        )}
-      >
-        {testOrderResult && (
-          <Descriptions size="small" bordered column={1} style={{ marginTop: 16 }}>
-            <Descriptions.Item label="订单号">
-              <Typography.Text copyable>{testOrderResult.order.order_no}</Typography.Text>
-            </Descriptions.Item>
-            <Descriptions.Item label="SKU">
-              <Typography.Text code>{testOrderResult.order.product_sku}</Typography.Text>
-            </Descriptions.Item>
-            <Descriptions.Item label="可发货">
-              <Tag color={testOrderResult.can_ship ? 'green' : 'red'}>
-                {testOrderResult.can_ship ? 'can_ship=true' : 'can_ship=false'}
-              </Tag>
-            </Descriptions.Item>
-            {!testOrderResult.can_ship && (
-              <Descriptions.Item label="不可发货原因">
-                <Typography.Text type="secondary">{testOrderResult.cannot_ship_reason || '-'}</Typography.Text>
-              </Descriptions.Item>
-            )}
-            <Descriptions.Item label="链接有效期">
-              {testOrderResult.order.delivery_link_revoked_at ? <Tag color="red">已作废</Tag> : formatDateTime(testOrderResult.order.delivery_link_expires_at)}
-            </Descriptions.Item>
-            <Descriptions.Item label="链接状态">
-              <Typography.Text type="secondary">由后端签名生成，可复制、打开或作废。</Typography.Text>
-            </Descriptions.Item>
-          </Descriptions>
-        )}
-      </Modal>
-
      <Modal title="新增 API 密钥" open={apiClientOpen} onOk={submitAPIClient} onCancel={() => setApiClientOpen(false)} destroyOnClose>
        <Form form={apiClientForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
@@ -1,4 +1,4 @@
-import { Button, Card, Col, Form, Input, Popconfirm, Row, Select, Space, Table, Tag, Typography, message } from 'antd'
+import { Button, Card, Col, Form, Input, Popconfirm, Row, Select, Space, Table, Tabs, Tag, Typography, message } from 'antd'
 import type { FormInstance } from 'antd'
 import {
  ClockCircleOutlined,
@@ -168,8 +168,10 @@ export function ProductsTab({
 export function OrdersTab({
  loading,
  orders,
+  orderSource,
  canManage,
-  onCreateTestOrder,
+  onCreateManualOrder,
+  onOrderSourceChange,
  onLoadOrders,
  onCopyLink,
  onOpenLink,
@@ -178,8 +180,10 @@ export function OrdersTab({
 }: {
  loading: boolean
  orders: PageResult<FulfillmentOrder>
+  orderSource: 'api' | 'manual'
  canManage: boolean
-  onCreateTestOrder: () => void
+  onCreateManualOrder: () => void
+  onOrderSourceChange: (source: 'api' | 'manual') => void
  onLoadOrders: (page?: number, size?: number) => void
  onCopyLink: (orderNo: string) => void
  onOpenLink: (orderNo: string) => void
@@ -232,12 +236,17 @@ export function OrdersTab({

  return (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
-      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
-        <Typography.Text type="secondary">发货链接由后端生成并带签名，用户只填写游戏 UID。</Typography.Text>
+      <Space wrap style={{ width: '100%', justifyContent: 'space-between' }}>
+        <Tabs
+          activeKey={orderSource}
+          onChange={(key) => onOrderSourceChange(key as 'api' | 'manual')}
+          items={[{ key: 'api', label: 'API 订单' }, { key: 'manual', label: '手动订单' }]}
+          style={{ minWidth: 220 }}
+        />
        {canManage && (
          <Space>
-            <Button type="primary" icon={<PlusOutlined />} onClick={onCreateTestOrder}>
-              创建测试订单
+            <Button type="primary" icon={<PlusOutlined />} onClick={onCreateManualOrder}>
+              创建手动订单
            </Button>
          </Space>
        )}
@@ -109,6 +109,7 @@ export interface FulfillmentOrder {
  amount: number
  currency: string
  order_status: string
+  order_source: 'api' | 'manual' | 'test'
  buyer_reference: string
  provider_order_no: string
  failure_reason: string
@@ -125,6 +126,13 @@ export interface CreateTestOrderResult {
  cannot_ship_reason?: string
 }

+export interface CreateManualOrderResult {
+  order: FulfillmentOrder
+  idempotent: boolean
+  can_ship: boolean
+  cannot_ship_reason?: string
+}
+
 export interface DeliveryProduct {
  name: string
  sku: string