三房日志详情补充

2026-07-06 21:11:23 +08:00
parent 9d221cfcd2
commit d5fdf626fe
1 changed files with 138 additions and 21 deletions
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Descriptions, Drawer, Form, Input, Table, Typography } from 'antd';
+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';
@@ -9,13 +9,48 @@ type Row = {
  id: string;
  provider: string;
  scene: string;
-  refType: string;
-  refId: string;
-  externalNo?: 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_SMS', label: 'ALIYUN_SMS' },
+  { value: 'MOCK_SMS', label: 'MOCK_SMS' },
+  { value: 'XIAOFEIXIA', label: 'XIAOFEIXIA' },
+];
+
+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>(
@@ -23,6 +58,7 @@ export default function ThirdPartyLogsPage() {
    () => {
      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;
    },
@@ -32,19 +68,46 @@ export default function ThirdPartyLogsPage() {
  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: 140, render: (_, r) => `${r.refType}#${r.refId}` },
-    { title: '外部单号', dataIndex: 'externalNo', width: 180 },
-    { title: '状态', dataIndex: 'status', width: 90 },
-    { title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
    {
-      title: '操作', width: 80,
+      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>
+        <Button
+          type="link"
+          size="small"
+          onClick={async () => {
+            setDetail(await request(`/common/third-party-logs/${row.id}`));
+            setDrawerOpen(true);
+          }}
+        >
+          详情
+        </Button>
      ),
    },
  ];
@@ -52,21 +115,75 @@ export default function ThirdPartyLogsPage() {
  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"><Input allowClear placeholder="WECHAT_PAY" /></Form.Item>
-        <Form.Item name="refId" label="关联ID"><Input allowClear /></Form.Item>
-        <Button type="primary" htmlType="submit">筛选</Button>
+      <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: 900 }}
-        pagination={{ current: page, pageSize, total: data?.total ?? 0, showSizeChanger: true, onChange: (p, ps) => { setPage(p); setPageSize(ps); } }} />
-      <Drawer title="日志详情" width={520} open={drawerOpen} onClose={() => setDrawerOpen(false)}>
+      <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="状态">{String(detail.status)}</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>