|
|
|
@@ -0,0 +1,247 @@
|
|
|
|
|
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;
|
|
|
|
|
scene: string;
|
|
|
|
|
status: string;
|
|
|
|
|
actorType: string | null;
|
|
|
|
|
actorId: string | null;
|
|
|
|
|
clientApp: string | null;
|
|
|
|
|
bizType: string | null;
|
|
|
|
|
mediaType: string | null;
|
|
|
|
|
fileName: string | null;
|
|
|
|
|
fileSize: number | null;
|
|
|
|
|
mimeType: string | null;
|
|
|
|
|
ossKey: string | null;
|
|
|
|
|
url: string | null;
|
|
|
|
|
bucket: string | null;
|
|
|
|
|
mock: boolean | null;
|
|
|
|
|
errorMessage?: string | null;
|
|
|
|
|
createdAt: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const SCENE_OPTIONS = [
|
|
|
|
|
{ value: 'UPLOAD_PUT_OBJECT', label: '服务端上传' },
|
|
|
|
|
{ value: 'UPLOAD_TOKEN', label: '直传凭证' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const STATUS_OPTIONS = [
|
|
|
|
|
{ value: 'SUCCESS', label: 'SUCCESS' },
|
|
|
|
|
{ value: 'FAILED', label: 'FAILED' },
|
|
|
|
|
{ value: 'PENDING', label: 'PENDING' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const CLIENT_APP_OPTIONS = [
|
|
|
|
|
{ value: 'HQ_WEB', label: 'HQ WebAdmin' },
|
|
|
|
|
{ value: 'USER_H5', label: 'C 端 H5' },
|
|
|
|
|
{ value: 'USER_MINI', label: 'C 端小程序' },
|
|
|
|
|
{ value: 'SHOP_H5', label: '门店 H5' },
|
|
|
|
|
{ value: 'PARTNER_H5', label: '合伙人 H5' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
|
|
|
SUCCESS: 'success',
|
|
|
|
|
FAILED: 'error',
|
|
|
|
|
PENDING: 'processing',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function formatFileSize(size: number | null | undefined) {
|
|
|
|
|
if (size == null || size <= 0) return '—';
|
|
|
|
|
if (size < 1024) return `${size} B`;
|
|
|
|
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
|
|
|
|
return `${(size / 1024 / 1024).toFixed(2)} MB`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 OssUploadLogsPage() {
|
|
|
|
|
const [filters, setFilters] = useState<Record<string, string>>({});
|
|
|
|
|
const { data, loading, page, pageSize, setPage, setPageSize } = useAdminList<Row>(
|
|
|
|
|
'/admin/logs/oss',
|
|
|
|
|
() => {
|
|
|
|
|
const qs = new URLSearchParams();
|
|
|
|
|
if (filters.scene) qs.set('scene', filters.scene);
|
|
|
|
|
if (filters.status) qs.set('status', filters.status);
|
|
|
|
|
if (filters.bizType) qs.set('bizType', filters.bizType);
|
|
|
|
|
if (filters.clientApp) qs.set('clientApp', filters.clientApp);
|
|
|
|
|
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: '场景',
|
|
|
|
|
dataIndex: 'scene',
|
|
|
|
|
width: 120,
|
|
|
|
|
render: (v: string) => SCENE_OPTIONS.find((o) => o.value === v)?.label ?? v,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
width: 90,
|
|
|
|
|
render: (v: string) => <Tag color={STATUS_COLOR[v] ?? 'default'}>{v}</Tag>,
|
|
|
|
|
},
|
|
|
|
|
{ title: '端', dataIndex: 'clientApp', width: 110, render: (v) => v || '—' },
|
|
|
|
|
{
|
|
|
|
|
title: '操作者',
|
|
|
|
|
width: 120,
|
|
|
|
|
render: (_, r) => (r.actorType && r.actorId ? `${r.actorType}#${r.actorId}` : '—'),
|
|
|
|
|
},
|
|
|
|
|
{ title: '业务类型', dataIndex: 'bizType', width: 120, render: (v) => v || '—' },
|
|
|
|
|
{ title: '文件名', dataIndex: 'fileName', ellipsis: true, render: (v) => v || '—' },
|
|
|
|
|
{
|
|
|
|
|
title: '大小',
|
|
|
|
|
dataIndex: 'fileSize',
|
|
|
|
|
width: 90,
|
|
|
|
|
render: (v: number | null) => formatFileSize(v),
|
|
|
|
|
},
|
|
|
|
|
{ title: 'OSS Key', dataIndex: 'ossKey', ellipsis: true, width: 160, render: (v) => v || '—' },
|
|
|
|
|
{
|
|
|
|
|
title: 'Mock',
|
|
|
|
|
dataIndex: 'mock',
|
|
|
|
|
width: 70,
|
|
|
|
|
render: (v: boolean | null) => (v == null ? '—' : v ? '是' : '否'),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '错误',
|
|
|
|
|
dataIndex: 'errorMessage',
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
render: (v: string | null | undefined) => v || '—',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
width: 80,
|
|
|
|
|
fixed: 'right',
|
|
|
|
|
render: (_, row) => (
|
|
|
|
|
<Button
|
|
|
|
|
type="link"
|
|
|
|
|
size="small"
|
|
|
|
|
onClick={async () => {
|
|
|
|
|
setDetail(await request(`/admin/logs/oss/${row.id}`));
|
|
|
|
|
setDrawerOpen(true);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
详情
|
|
|
|
|
</Button>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Typography.Title level={4}>OSS 上传日志</Typography.Title>
|
|
|
|
|
<Typography.Paragraph type="secondary">
|
|
|
|
|
记录各端经 <code>/common/resources/upload</code> 的文件上传与直传凭证申请。
|
|
|
|
|
</Typography.Paragraph>
|
|
|
|
|
<Form
|
|
|
|
|
layout="inline"
|
|
|
|
|
style={{ marginBottom: 16 }}
|
|
|
|
|
onFinish={(v) => {
|
|
|
|
|
setFilters(v);
|
|
|
|
|
setPage(1);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Form.Item name="scene" label="场景">
|
|
|
|
|
<Select allowClear placeholder="全部" style={{ width: 140 }} options={SCENE_OPTIONS} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name="status" label="状态">
|
|
|
|
|
<Select allowClear placeholder="全部" style={{ width: 120 }} options={STATUS_OPTIONS} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name="bizType" label="业务类型">
|
|
|
|
|
<Input allowClear placeholder="COVER / STORE_TITLE" style={{ width: 150 }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name="clientApp" label="端">
|
|
|
|
|
<Select allowClear placeholder="全部" style={{ width: 140 }} options={CLIENT_APP_OPTIONS} />
|
|
|
|
|
</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: 1400 }}
|
|
|
|
|
pagination={{
|
|
|
|
|
current: page,
|
|
|
|
|
pageSize,
|
|
|
|
|
total: data?.total ?? 0,
|
|
|
|
|
showSizeChanger: true,
|
|
|
|
|
onChange: (p, ps) => {
|
|
|
|
|
setPage(p);
|
|
|
|
|
setPageSize(ps);
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<Drawer title="OSS 上传日志详情" 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="场景">{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="端">{String(detail.clientApp ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="操作者">
|
|
|
|
|
{detail.actorType ? `${String(detail.actorType)}#${String(detail.actorId)}` : '—'}
|
|
|
|
|
</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="业务类型">{String(detail.bizType ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="媒体类型">{String(detail.mediaType ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="文件名">{String(detail.fileName ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="大小">{formatFileSize(detail.fileSize as number | null)}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="MIME">{String(detail.mimeType ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="Bucket">{String(detail.bucket ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="OSS Key">{String(detail.ossKey ?? '—')}</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="URL">
|
|
|
|
|
{detail.url ? (
|
|
|
|
|
<Typography.Link href={String(detail.url)} target="_blank" rel="noreferrer">
|
|
|
|
|
{String(detail.url)}
|
|
|
|
|
</Typography.Link>
|
|
|
|
|
) : (
|
|
|
|
|
'—'
|
|
|
|
|
)}
|
|
|
|
|
</Descriptions.Item>
|
|
|
|
|
<Descriptions.Item label="Mock">{detail.mock == null ? '—' : detail.mock ? '是' : '否'}</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>
|
|
|
|
|
);
|
|
|
|
|
}
|
