@yuku123/z-frontend-common 0.2.9 → 1.0.0

package/src/components/MockPlatform/RecordingsTab.jsx

@@ -1,397 +0,0 @@
-import {useEffect, useState} from 'react'
-import {
-    Alert,
-    Button,
-    Checkbox,
-    Descriptions,
-    Drawer,
-    Form,
-    Input,
-    message,
-    Modal,
-    Popconfirm,
-    Space,
-    Table,
-    Tabs,
-    Tag,
-    Typography
-} from 'antd'
-import {
-    CheckCircleOutlined,
-    DeleteOutlined,
-    ExportOutlined,
-    ImportOutlined,
-    PlayCircleOutlined,
-    ReloadOutlined,
-    StopOutlined,
-    VideoCameraOutlined
-} from '@ant-design/icons'
-import {mockPlatformApi} from '@/services/api'
-
-const {Text} = Typography
-
-const STATUS_COLORS = {
-    IDLE: 'default', RECORDING: 'red', STOPPED: 'green', EXPIRED: 'gray',
-}
-
-/**
- * 录制回放 Tab - 录制真实流量，转换为 Mock 集合
- */
-export default function RecordingsTab() {
-    const [recordings, setRecordings] = useState([])
-    const [loading, setLoading] = useState(false)
-    const [startOpen, setStartOpen] = useState(false)
-    const [playbackOpen, setPlaybackOpen] = useState(false)
-    const [exportOpen, setExportOpen] = useState(false)
-    const [detailOpen, setDetailOpen] = useState(false)
-    const [detail, setDetail] = useState(null)
-    const [detailRequests, setDetailRequests] = useState([])
-    const [form] = Form.useForm()
-    const [playbackForm] = Form.useForm()
-    const [exportForm] = Form.useForm()
-    const [exportDrafts, setExportDrafts] = useState([])
-    const [exportLoading, setExportLoading] = useState(false)
-    const [selectedDrafts, setSelectedDrafts] = useState([])
-
-    useEffect(() => {
-        loadRecordings()
-    }, [])
-
-    const loadRecordings = async () => {
-        setLoading(true)
-        try {
-            const res = await mockPlatformApi.recordings.list()
-            setRecordings(Array.isArray(res) ? res : [])
-        } catch (e) {
-            message.warning('加载录制列表失败')
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const handleStart = async () => {
-        try {
-            const values = await form.validateFields()
-            await mockPlatformApi.recordings.start(values.recordingCode, values.recordingName, values.targetUrl)
-            message.success('录制已开启')
-            setStartOpen(false)
-            form.resetFields()
-            loadRecordings()
-        } catch (e) {
-            if (!e?.errorFields) message.error('开启失败')
-        }
-    }
-
-    const handleStop = async (code) => {
-        try {
-            await mockPlatformApi.recordings.stop(code)
-            message.success('录制已停止')
-            loadRecordings()
-        } catch (e) {
-            message.error('停止失败')
-        }
-    }
-
-    const handleDelete = async (code) => {
-        try {
-            await mockPlatformApi.recordings.delete(code)
-            message.success('删除成功')
-            loadRecordings()
-        } catch (e) {
-            message.error('删除失败')
-        }
-    }
-
-    const handleDetail = async (record) => {
-        try {
-            const requests = await mockPlatformApi.recordings.requests(record.recordingCode)
-            setDetail(record)
-            setDetailRequests(Array.isArray(requests) ? requests : [])
-            setDetailOpen(true)
-        } catch (e) {
-            message.error('加载失败')
-        }
-    }
-
-    const handleImport = async (record) => {
-        Modal.confirm({
-            title: '导入录制为 Mock',
-            content: `将把录制 "${record.recordingCode}" 转换为 Mock endpoints 并入库。`,
-            okText: '确认导入',
-            onOk: async () => {
-                try {
-                    const res = await mockPlatformApi.recordings.import(record.recordingCode, 'default')
-                    message.success(`导入成功: ${res?.imported || 0} 个 Mock endpoint`)
-                } catch (e) {
-                    message.error('导入失败')
-                }
-            },
-        })
-    }
-
-    const handlePlayback = async () => {
-        try {
-            const values = await playbackForm.validateFields()
-            const res = await mockPlatformApi.recordings.playback(detail.recordingCode, values.targetUrl)
-            Modal.info({
-                title: '回放结果',
-                width: 700,
-                content: (
-                    <div>
-                        <Text>总数: {res?.[0]?.total || 0} 通过: {res?.[0]?.pass || 0} 失败: {res?.[0]?.fail || 0}</Text>
-                        <pre style={{
-                            marginTop: 12,
-                            background: '#f5f5f5',
-                            padding: 12,
-                            maxHeight: 400,
-                            overflow: 'auto',
-                            fontSize: 12
-                        }}>
-              {JSON.stringify(res, null, 2)}
-            </pre>
-                    </div>
-                )
-            })
-            setPlaybackOpen(false)
-        } catch (e) {
-            if (!e?.errorFields) message.error('回放失败')
-        }
-    }
-
-    const handleOpenExport = async () => {
-        try {
-            setExportLoading(true)
-            // 先取项目编码（可空）
-            const values = await exportForm.validateFields().catch(() => ({}))
-            const res = await mockPlatformApi.recordings.export(detail.recordingCode, values?.projectCode)
-            const drafts = Array.isArray(res?.drafts) ? res.drafts : []
-            setExportDrafts(drafts)
-            setSelectedDrafts(drafts.map(d => d.mockCode || d.id))
-            setExportOpen(true)
-        } catch (e) {
-            if (!e?.errorFields) message.error('生成草稿失败')
-        } finally {
-            setExportLoading(false)
-        }
-    }
-
-    const handleConfirmImport = async () => {
-        try {
-            const values = await exportForm.validateFields().catch(() => ({}))
-            const codes = selectedDrafts
-            if (codes.length === 0) {
-                message.warning('请至少选择一个 Mock')
-                return
-            }
-            const res = await mockPlatformApi.recordings.import(
-                detail.recordingCode,
-                values?.envCode,
-                values?.projectCode
-            )
-            message.success(`已导入 ${res?.imported || codes.length} 个 Mock`)
-            setExportOpen(false)
-            loadRecordings()
-        } catch (e) {
-            message.error('导入失败：' + (e?.message || '未知错误'))
-        }
-    }
-
-    const columns = [
-        {
-            title: '编码', dataIndex: 'recordingCode', key: 'recordingCode', width: 180,
-            render: (v) => <Text code>{v}</Text>
-        },
-        {title: '名称', dataIndex: 'recordingName', key: 'recordingName', width: 200},
-        {
-            title: '状态', dataIndex: 'recordStatus', key: 'recordStatus', width: 110,
-            render: (v) => <Tag color={STATUS_COLORS[v]}>{v}</Tag>
-        },
-        {title: '请求数', dataIndex: 'totalRequests', key: 'totalRequests', width: 90, align: 'center'},
-        {
-            title: '目标 URL', dataIndex: 'targetUrl', key: 'targetUrl', ellipsis: true,
-            render: (v) => v ? <Text copyable={{text: v}}>{v}</Text> : '-'
-        },
-        {title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 170},
-        {title: '结束时间', dataIndex: 'endTime', key: 'endTime', width: 170},
-        {
-            title: '操作', key: 'action', width: 280, fixed: 'right',
-            render: (_, record) => (
-                <Space size="small">
-                    <Button size="small" type="link" icon={<VideoCameraOutlined/>}
-                            onClick={() => handleDetail(record)}>详情</Button>
-                    {record.recordStatus === 'RECORDING' && (
-                        <Button size="small" type="link" danger icon={<StopOutlined/>}
-                                onClick={() => handleStop(record.recordingCode)}>停止</Button>
-                    )}
-                    {record.recordStatus === 'STOPPED' && (
-                        <Button size="small" type="link" icon={<ImportOutlined/>}
-                                onClick={() => handleImport(record)}>导入为 Mock</Button>
-                    )}
-                    <Popconfirm title={`删除录制 ${record.recordingCode}?`}
-                                onConfirm={() => handleDelete(record.recordingCode)}>
-                        <Button size="small" type="link" danger icon={<DeleteOutlined/>}/>
-                    </Popconfirm>
-                </Space>
-            )
-        },
-    ]
-
-    return (
-        <div>
-            <Alert type="info" showIcon style={{marginBottom: 16}}
-                   title="流量录制与回放"
-                   description={
-                       <div>
-                           <div>• 开启录制后，所有 <Text code>/api/mock/&#123;envCode&#125;/**</Text> 请求会被捕获到数据库
-                           </div>
-                           <div>• 停止录制后，可一键转为 Mock endpoints（用于离线测试）</div>
-                           <div>• 支持回放录制到目标服务（验证录制有效 / 跨环境验证）</div>
-                       </div>
-                   }
-            />
-
-            <Space style={{marginBottom: 16}}>
-                <Button icon={<ReloadOutlined/>} onClick={loadRecordings}>刷新</Button>
-                <Button type="primary" icon={<VideoCameraOutlined/>}
-                        onClick={() => setStartOpen(true)}>开启录制</Button>
-            </Space>
-
-            <Table
-                dataSource={recordings}
-                columns={columns}
-                rowKey="id"
-                loading={loading}
-                pagination={{pageSize: 10}}
-                scroll={{x: 1300}}
-                size="small"
-            />
-
-            <Modal
-                title="开启录制"
-                open={startOpen}
-                onCancel={() => setStartOpen(false)}
-                onOk={handleStart}
-                okText="开启" cancelText="取消"
-            >
-                <Form form={form} layout="vertical" style={{marginTop: 16}}>
-                    <Form.Item name="recordingCode" label="录制编码" rules={[{required: true}]}>
-                        <Input placeholder="prod-trace-2026-06"/>
-                    </Form.Item>
-                    <Form.Item name="recordingName" label="录制名称" rules={[{required: true}]}>
-                        <Input placeholder="生产环境订单流程"/>
-                    </Form.Item>
-                    <Form.Item name="targetUrl" label="目标服务地址">
-                        <Input placeholder="http://prod-api.example.com"/>
-                    </Form.Item>
-                </Form>
-            </Modal>
-
-            <Drawer
-                title={<Space><VideoCameraOutlined/>录制详情: {detail?.recordingCode}</Space>}
-                open={detailOpen}
-                onClose={() => setDetailOpen(false)}
-                width={800}
-            >
-                {detail && (
-                    <div>
-                        <Descriptions column={2} size="small" bordered style={{marginBottom: 16}}>
-                            <Descriptions.Item label="编码">{detail.recordingCode}</Descriptions.Item>
-                            <Descriptions.Item label="名称">{detail.recordingName}</Descriptions.Item>
-                            <Descriptions.Item label="状态">
-                                <Tag color={STATUS_COLORS[detail.recordStatus]}>{detail.recordStatus}</Tag>
-                            </Descriptions.Item>
-                            <Descriptions.Item label="请求数">{detail.totalRequests}</Descriptions.Item>
-                            <Descriptions.Item label="目标 URL" span={2}>
-                                <Text copyable>{detail.targetUrl}</Text>
-                            </Descriptions.Item>
-                            <Descriptions.Item label="开始">{detail.startTime}</Descriptions.Item>
-                            <Descriptions.Item label="结束">{detail.endTime || '(录制中)'}</Descriptions.Item>
-                        </Descriptions>
-
-                        <Space style={{marginBottom: 16}}>
-                            <Button icon={<PlayCircleOutlined/>} onClick={() => setPlaybackOpen(true)}
-                                    disabled={detail.recordStatus !== 'STOPPED'}>回放</Button>
-                            <Button icon={<ExportOutlined/>} onClick={handleOpenExport} loading={exportLoading}
-                                    disabled={detail.recordStatus !== 'STOPPED'}>导出 Mock 草稿</Button>
-                            <Button type="primary" icon={<ImportOutlined/>} onClick={() => handleImport(detail)}
-                                    disabled={detail.recordStatus !== 'STOPPED'}>导入为 Mock</Button>
-                        </Space>
-
-                        <Text strong>请求列表 (共 {detailRequests.length} 条):</Text>
-                        <Table
-                            style={{marginTop: 8}}
-                            dataSource={detailRequests}
-                            columns={[
-                                {title: '#', dataIndex: 'sequence', key: 'sequence', width: 50},
-                                {
-                                    title: '方法', dataIndex: 'requestMethod', key: 'requestMethod', width: 80,
-                                    render: (v) => <Tag color="blue">{v}</Tag>
-                                },
-                                {
-                                    title: 'URL', dataIndex: 'requestUrl', key: 'requestUrl', ellipsis: true,
-                                    render: (v) => <Text code>{v}</Text>
-                                },
-                                {
-                                    title: '响应', dataIndex: 'responseStatus', key: 'responseStatus', width: 80,
-                                    render: (v) => <Tag color={v >= 400 ? 'red' : 'green'}>{v}</Tag>
-                                },
-                                {
-                                    title: '耗时', dataIndex: 'responseTime', key: 'responseTime', width: 80,
-                                    render: (v) => `${v || 0}ms`
-                                },
-                            ]}
-                            pagination={{pageSize: 10}} size="small" rowKey="id"
-                        />
-                    </div>
-                )}
-            </Drawer>
-
-            <Modal title="回放录制" open={playbackOpen}
-                   onCancel={() => setPlaybackOpen(false)} onOk={handlePlayback}>
-                <Form form={playbackForm} layout="vertical" style={{marginTop: 16}}>
-                    <Form.Item name="targetUrl" label="目标服务地址" rules={[{required: true}]}>
-                        <Input placeholder="http://staging-api.example.com"/>
-                    </Form.Item>
-                </Form>
-            </Modal>
-
-            <Modal title="导出 Mock 草稿" open={exportOpen}
-                   onCancel={() => setExportOpen(false)} onOk={handleConfirmImport}
-                   okText={`导入 ${selectedDrafts.length} 个`} width={900}>
-                <Form form={exportForm} layout="vertical" style={{marginTop: 8}}>
-                    <Space size={16} style={{width: '100%'}}>
-                        <Form.Item name="projectCode" label="项目编码" style={{flex: 1, marginBottom: 8}}>
-                            <Input placeholder="default"/>
-                        </Form.Item>
-                        <Form.Item name="envCode" label="目标环境" style={{flex: 1, marginBottom: 8}}>
-                            <Input placeholder="default"/>
-                        </Form.Item>
-                    </Space>
-                </Form>
-                <Alert type="info" showIcon style={{marginBottom: 12}}
-                       title={`从录制中识别出 ${exportDrafts.length} 个去重后的 Mock endpoint，已默认全选`}/>
-                <Table
-                    size="small"
-                    dataSource={exportDrafts}
-                    rowKey={r => r.mockCode || r.id}
-                    pagination={{pageSize: 8}}
-                    scroll={{y: 300}}
-                    rowSelection={{
-                        selectedRowKeys: selectedDrafts,
-                        onChange: (keys) => setSelectedDrafts(keys),
-                    }}
-                    columns={[
-                        {title: '方法', dataIndex: 'method', width: 80,
-                            render: v => <Tag color="blue">{v}</Tag>},
-                        {title: 'URL 模式', dataIndex: 'urlPattern', ellipsis: true,
-                            render: v => <Text code>{v}</Text>},
-                        {title: '状态码', dataIndex: 'statusCode', width: 80},
-                        {title: '响应模板', dataIndex: 'responseTemplate', ellipsis: true,
-                            render: v => <Text type="secondary" style={{fontSize: 11}}>{(v || '').slice(0, 80)}</Text>},
-                        {title: '请求数', dataIndex: 'requestCount', width: 80, align: 'center'},
-                    ]}
-                />
-            </Modal>
-        </div>
-    )
-}

package/src/components/MockPlatform/RequestLogsTab.jsx

@@ -1,239 +0,0 @@
-import {useEffect, useState} from 'react'
-import {
-    Alert,
-    Button,
-    Card,
-    Col,
-    Descriptions,
-    Drawer,
-    Input,
-    message,
-    Popconfirm,
-    Row,
-    Select,
-    Space,
-    Statistic,
-    Table,
-    Tag,
-    Typography
-} from 'antd'
-import {DeleteOutlined, EyeOutlined, ReloadOutlined, SearchOutlined} from '@ant-design/icons'
-import {mockPlatformApi} from '@/services/api'
-
-const {Text} = Typography
-
-const STATUS_COLORS = {MOCK: 'green', PROXY: 'blue', '404': 'red', '502': 'orange'}
-
-/**
- * 请求日志 Tab - 查看每一次 Mock 请求/响应
- */
-export default function RequestLogsTab() {
-    const [logs, setLogs] = useState([])
-    const [stats, setStats] = useState(null)
-    const [loading, setLoading] = useState(false)
-    const [detail, setDetail] = useState(null)
-    const [detailOpen, setDetailOpen] = useState(false)
-    const [filterPath, setFilterPath] = useState('')
-    const [filterMatched, setFilterMatched] = useState()
-
-    useEffect(() => {
-        loadData()
-    }, [])
-
-    const loadData = async () => {
-        setLoading(true)
-        try {
-            const [logsRes, statsRes] = await Promise.all([
-                mockPlatformApi.requestLogs.list({
-                    path: filterPath || undefined,
-                    matched: filterMatched,
-                    limit: 100,
-                }),
-                mockPlatformApi.requestLogs.stats().catch(() => null),
-            ])
-            setLogs(Array.isArray(logsRes) ? logsRes : [])
-            setStats(statsRes)
-        } catch (e) {
-            message.warning('加载失败')
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const handleDetail = (record) => {
-        setDetail(record)
-        setDetailOpen(true)
-    }
-
-    const handleClear = async () => {
-        try {
-            await mockPlatformApi.requestLogs.clear(1000)
-            message.success('已清理')
-            loadData()
-        } catch (e) {
-            message.error('清理失败')
-        }
-    }
-
-    const columns = [
-        {
-            title: '时间', dataIndex: 'createTime', key: 'createTime', width: 170,
-            render: (v) => v ? new Date(v).toLocaleString() : '-'
-        },
-        {
-            title: '环境', dataIndex: 'envCode', key: 'envCode', width: 100,
-            render: (v) => <Tag>{v}</Tag>
-        },
-        {
-            title: '方法', dataIndex: 'requestMethod', key: 'requestMethod', width: 80,
-            render: (v) => <Tag color="blue">{v}</Tag>
-        },
-        {
-            title: '路径', dataIndex: 'requestPath', key: 'requestPath', ellipsis: true,
-            render: (v) => <Text code>{v}</Text>
-        },
-        {
-            title: '状态', dataIndex: 'responseStatus', key: 'responseStatus', width: 90, align: 'center',
-            render: (v) => v ? <Tag color={v >= 400 ? 'red' : 'green'}>{v}</Tag> : '-'
-        },
-        {
-            title: '匹配', dataIndex: 'matched', key: 'matched', width: 90, align: 'center',
-            render: (v) => v === 1 ? <Tag color="green">命中</Tag> : <Tag color="red">未匹配</Tag>
-        },
-        {
-            title: '回退', dataIndex: 'fallbackType', key: 'fallbackType', width: 100,
-            render: (v) => v ? <Tag color={STATUS_COLORS[v]}>{v}</Tag> : '-'
-        },
-        {
-            title: '耗时', dataIndex: 'durationMs', key: 'durationMs', width: 80, align: 'center',
-            render: (v) => `${v || 0}ms`
-        },
-        {
-            title: 'Mock', dataIndex: 'mockCode', key: 'mockCode', width: 160, ellipsis: true,
-            render: (v) => v ? <Text code>{v}</Text> : '-'
-        },
-        {
-            title: '操作', key: 'action', width: 80,
-            render: (_, record) => (
-                <Button size="small" type="link" icon={<EyeOutlined/>}
-                        onClick={() => handleDetail(record)}>详情</Button>
-            )
-        },
-    ]
-
-    return (
-        <div>
-            <Alert type="info" showIcon style={{marginBottom: 16}}
-                   title="Mock 请求日志 - 排查未匹配请求"
-                   description="每一次请求都会留痕。包括请求/响应体、是否匹配 Mock、回退类型、耗时、场景状态等。便于排查“为什么这个请求没有 Mock 命中”问题。"
-            />
-
-            {stats && (
-                <Row gutter={16} style={{marginBottom: 16}}>
-                    <Col span={6}><Card><Statistic title="总请求数" value={stats.total || 0}/></Card></Col>
-                    <Col span={6}><Card><Statistic title="Mock 命中" value={stats.matched || 0}
-                                                   styles={{content: {color: '#52c41a'}}}/></Card></Col>
-                    <Col span={6}><Card><Statistic title="未匹配" value={stats.unmatched || 0}
-                                                   styles={{content: {color: '#ff4d4f'}}}/></Card></Col>
-                    <Col span={6}><Card><Statistic title="命中率"
-                                                   value={`${stats.total > 0 ? Math.round((stats.matched / stats.total) * 100) : 0}%`}/></Card></Col>
-                </Row>
-            )}
-
-            <Space style={{marginBottom: 16}}>
-                <Input
-                    placeholder="搜索路径" prefix={<SearchOutlined/>} allowClear
-                    style={{width: 240}} value={filterPath}
-                    onChange={(e) => setFilterPath(e.target.value)}
-                    onPressEnter={loadData}
-                />
-                <Select
-                    placeholder="匹配状态" allowClear style={{width: 140}}
-                    value={filterMatched}
-                    onChange={setFilterMatched}
-                    options={[
-                        {value: 1, label: '已命中'},
-                        {value: 0, label: '未匹配'},
-                    ]}
-                />
-                <Button icon={<ReloadOutlined/>} onClick={loadData}>查询</Button>
-                <Popconfirm title="确认清理，保留最近 1000 条?" onConfirm={handleClear}>
-                    <Button icon={<DeleteOutlined/>} danger>清理</Button>
-                </Popconfirm>
-            </Space>
-
-            <Table
-                dataSource={logs}
-                columns={columns}
-                rowKey="id"
-                loading={loading}
-                pagination={{pageSize: 20}}
-                scroll={{x: 1300}}
-                size="small"
-            />
-
-            <Drawer
-                title="请求详情"
-                open={detailOpen}
-                onClose={() => setDetailOpen(false)}
-                width={750}
-            >
-                {detail && (
-                    <div>
-                        <Descriptions column={2} size="small" bordered style={{marginBottom: 16}}>
-                            <Descriptions.Item label="环境">{detail.envCode}</Descriptions.Item>
-                            <Descriptions.Item label="方法"><Tag
-                                color="blue">{detail.requestMethod}</Tag></Descriptions.Item>
-                            <Descriptions.Item label="路径" span={2}><Text
-                                code>{detail.requestPath}</Text></Descriptions.Item>
-                            <Descriptions.Item label="状态码">
-                                <Tag
-                                    color={detail.responseStatus >= 400 ? 'red' : 'green'}>{detail.responseStatus}</Tag>
-                            </Descriptions.Item>
-                            <Descriptions.Item label="耗时">{detail.durationMs}ms</Descriptions.Item>
-                            <Descriptions.Item label="匹配">
-                                {detail.matched === 1 ? <Tag color="green">命中</Tag> : <Tag color="red">未匹配</Tag>}
-                            </Descriptions.Item>
-                            <Descriptions.Item label="回退">{detail.fallbackType || '-'}</Descriptions.Item>
-                            <Descriptions.Item label="Mock" span={2}>{detail.mockCode || '-'}</Descriptions.Item>
-                            <Descriptions.Item label="场景状态"
-                                               span={2}>{detail.scenarioState || '-'}</Descriptions.Item>
-                            <Descriptions.Item label="客户端 IP">{detail.clientIp || '-'}</Descriptions.Item>
-                            <Descriptions.Item label="User-Agent" ellipsis>{detail.userAgent || '-'}</Descriptions.Item>
-                            <Descriptions.Item label="时间" span={2}>
-                                {detail.createTime ? new Date(detail.createTime).toLocaleString() : '-'}
-                            </Descriptions.Item>
-                        </Descriptions>
-
-                        <Text strong>请求头:</Text>
-                        <pre style={{
-                            background: '#f5f5f5', padding: 12, borderRadius: 4,
-                            maxHeight: 150, overflow: 'auto', fontSize: 12, fontFamily: 'monospace',
-                            whiteSpace: 'pre-wrap',
-                        }}>
-              {detail.requestHeaders || '(无)'}
-            </pre>
-
-                        <Text strong style={{marginTop: 12, display: 'block'}}>请求体:</Text>
-                        <pre style={{
-                            background: '#f5f5f5', padding: 12, borderRadius: 4,
-                            maxHeight: 200, overflow: 'auto', fontSize: 12, fontFamily: 'monospace',
-                            whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                        }}>
-              {detail.requestBody || '(无)'}
-            </pre>
-
-                        <Text strong style={{marginTop: 12, display: 'block'}}>响应体:</Text>
-                        <pre style={{
-                            background: '#f5f5f5', padding: 12, borderRadius: 4,
-                            maxHeight: 300, overflow: 'auto', fontSize: 12, fontFamily: 'monospace',
-                            whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                        }}>
-              {detail.responseBody || '(无)'}
-            </pre>
-                    </div>
-                )}
-            </Drawer>
-        </div>
-    )
-}