dukang/apps/admin-web/src/pages/ThirdPartyLogsPage.tsx

import { useState } from 'react';
import { Button, Descriptions, Drawer, Form, Input, Select, Table, Tag, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { request } from '../lib/api';
import { fmtTime } from '../lib/constants';
import { useAdminList } from '../lib/useAdminList';

type Row = {
  id: string;
  provider: string;
  scene: string;
  refType: string | null;
  refId: string | null;
  requestUrl?: string | null;
  requestBody?: Record<string, unknown> | null;
  responseBody?: Record<string, unknown> | null;
  externalNo?: string | null;
  amount?: string | null;
  status: string;
  errorMessage?: string | null;
  createdAt: string;
};

const PROVIDER_OPTIONS = [
  { value: 'WECHAT_AUTH', label: 'WECHAT_AUTH' },
  { value: 'WECHAT_PAY', label: 'WECHAT_PAY' },
  { value: 'WECHAT_MAP', label: 'WECHAT_MAP' },
  { value: 'ALIYUN_OSS', label: 'ALIYUN_OSS' },
  { value: 'ALIYUN_SMS', label: 'ALIYUN_SMS' },
  { value: 'MOCK_SMS', label: 'MOCK_SMS' },
  { value: 'XFX', label: '小飞侠 (XFX)' },
  { value: 'LOGISTICS', label: 'LOGISTICS' },
];

const STATUS_COLOR: Record<string, string> = {
  SUCCESS: 'success',
  FAILED: 'error',
  PENDING: 'processing',
};

function summarizeJson(json: Record<string, unknown> | null | undefined) {
  if (!json || Object.keys(json).length === 0) return '—';
  const text = JSON.stringify(json);
  return text.length > 60 ? `${text.slice(0, 60)}…` : text;
}

function JsonBlock({ value }: { value: unknown }) {
  if (value == null) return <span>—</span>;
  return (
    <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all', fontSize: 12 }}>
      {JSON.stringify(value, null, 2)}
    </pre>
  );
}

export default function ThirdPartyLogsPage() {
  const [filters, setFilters] = useState<Record<string, string>>({});
  const { data, loading, page, pageSize, setPage, setPageSize } = useAdminList<Row>(
    '/common/third-party-logs',
    () => {
      const qs = new URLSearchParams();
      if (filters.provider) qs.set('provider', filters.provider);
      if (filters.scene) qs.set('scene', filters.scene);
      if (filters.refId) qs.set('refId', filters.refId);
      return qs;
    },
    [filters],
  );
  const [detail, setDetail] = useState<Record<string, unknown> | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  const columns: ColumnsType<Row> = [
    { title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
    { title: 'Provider', dataIndex: 'provider', width: 120 },
    { title: '场景', dataIndex: 'scene', width: 120 },
    {
      title: '关联',
      width: 120,
      render: (_, r) => (r.refType && r.refId ? `${r.refType}#${r.refId}` : '—'),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (v: string) => <Tag color={STATUS_COLOR[v] ?? 'default'}>{v}</Tag>,
    },
    {
      title: '错误信息',
      dataIndex: 'errorMessage',
      ellipsis: true,
      render: (v: string | null | undefined) => v || '—',
    },
    {
      title: '请求摘要',
      ellipsis: true,
      render: (_, r) => summarizeJson(r.requestBody),
    },
    { title: '外部单号', dataIndex: 'externalNo', width: 140, render: (v) => v || '—' },
    {
      title: '操作',
      width: 80,
      render: (_, row) => (
        <Button
          type="link"
          size="small"
          onClick={async () => {
            setDetail(await request(`/common/third-party-logs/${row.id}`));
            setDrawerOpen(true);
          }}
        >
          详情
        </Button>
      ),
    },
  ];

  return (
    <div>
      <Typography.Title level={4}>第三方日志</Typography.Title>
      <Form
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={(v) => {
          setFilters(v);
          setPage(1);
        }}
      >
        <Form.Item name="provider" label="Provider">
          <Select allowClear placeholder="全部" style={{ width: 160 }} options={PROVIDER_OPTIONS} />
        </Form.Item>
        <Form.Item name="scene" label="场景">
          <Input allowClear placeholder="JSSDK_CONFIG / LOGIN" style={{ width: 160 }} />
        </Form.Item>
        <Form.Item name="refId" label="关联ID">
          <Input allowClear style={{ width: 120 }} />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          筛选
        </Button>
      </Form>
      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        scroll={{ x: 1200 }}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />
      <Drawer title="第三方日志详情" width={640} open={drawerOpen} onClose={() => setDrawerOpen(false)}>
        {detail && (
          <Descriptions column={1} bordered size="small">
            <Descriptions.Item label="ID">{String(detail.id)}</Descriptions.Item>
            <Descriptions.Item label="Provider">{String(detail.provider)}</Descriptions.Item>
            <Descriptions.Item label="场景">{String(detail.scene)}</Descriptions.Item>
            <Descriptions.Item label="状态">
              <Tag color={STATUS_COLOR[String(detail.status)] ?? 'default'}>{String(detail.status)}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="关联">
              {detail.refType ? `${String(detail.refType)}#${String(detail.refId)}` : '—'}
            </Descriptions.Item>
            <Descriptions.Item label="外部单号">{String(detail.externalNo ?? '—')}</Descriptions.Item>
            <Descriptions.Item label="金额">{detail.amount != null ? String(detail.amount) : '—'}</Descriptions.Item>
            <Descriptions.Item label="请求 URL">{String(detail.requestUrl ?? '—')}</Descriptions.Item>
            <Descriptions.Item label="错误信息">
              {detail.errorMessage ? (
                <Typography.Text type="danger" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                  {String(detail.errorMessage)}
                </Typography.Text>
              ) : (
                '—'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="时间">{fmtTime(String(detail.createdAt))}</Descriptions.Item>
            <Descriptions.Item label="请求体">
              <JsonBlock value={detail.requestBody} />
            </Descriptions.Item>
            <Descriptions.Item label="响应体">
              <JsonBlock value={detail.responseBody} />
            </Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>
    </div>
  );
}