@yuku123/z-agent-frontend-component 0.1.1

package/src/pages/trace/components/Timeline.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import {Empty, Tag, Tooltip} from 'antd';
+import {
+    BulbOutlined,
+    CodeOutlined,
+    FileSearchOutlined,
+    MailOutlined,
+    PlayCircleOutlined,
+    StopOutlined,
+    ThunderboltOutlined,
+} from '@ant-design/icons';
+
+/**
+ * Timeline 组件 (FEATURE013 T7)
+ *
+ * <p>按 sequence 排序展示该 trace 的所有 span. 每个 span 一行:
+ * <ul>
+ *   <li>序号 + 类型图标 + 类型 Tag</li>
+ *   <li>span 名称 + 耗时</li>
+ *   <li>content 摘要 (think 文本 / tool_call 参数 / retrieve chunks)</li>
+ *   <li>attributes 详情 (折叠展开)</li>
+ * </ul>
+ */
+const TYPE_META = {
+    think: {color: 'gold', icon: <BulbOutlined/>, label: '思考'},
+    llm_call: {color: 'blue', icon: <ThunderboltOutlined/>, label: 'LLM'},
+    tool_call: {color: 'orange', icon: <CodeOutlined/>, label: '工具'},
+    retrieve: {color: 'green', icon: <FileSearchOutlined/>, label: 'RAG'},
+    observe: {color: 'purple', icon: <MailOutlined/>, label: '观察'},
+    step: {color: 'default', icon: <PlayCircleOutlined/>, label: '步骤'},
+    flow_node: {color: 'cyan', icon: <PlayCircleOutlined/>, label: 'Flow节点'},
+};
+
+const STATUS_META = {
+    RUNNING: {color: 'processing', icon: <PlayCircleOutlined/>},
+    SUCCESS: {color: 'success', icon: <PlayCircleOutlined/>},
+    FAILURE: {color: 'error', icon: <StopOutlined/>},
+    ERROR: {color: 'error', icon: <StopOutlined/>},
+    PENDING: {color: 'default', icon: null},
+};
+
+const Timeline = ({spans = []}) => {
+    if (!spans.length) {
+        return (
+            <Empty
+                description="暂无 span 数据"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+            />
+        );
+    }
+
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
+            {spans.map((span, idx) => {
+                const meta = TYPE_META[span.spanType] || {color: 'default', icon: null, label: span.spanType};
+                const statusMeta = STATUS_META[span.status] || STATUS_META.PENDING;
+                // 解析 attributes
+                let attrs = null;
+                if (span.attributes) {
+                    try { attrs = typeof span.attributes === 'string' ? JSON.parse(span.attributes) : span.attributes; } catch { /* ignore */ }
+                }
+                const isError = span.status === 'FAILURE' || span.status === 'ERROR';
+                return (
+                    <div
+                        key={span.spanId || idx}
+                        style={{
+                            border: '1px solid #f0f0f0',
+                            borderLeft: `3px solid ${isError ? '#ff4d4f' : '#1677ff'}`,
+                            borderRadius: 6,
+                            padding: '10px 12px',
+                            background: '#fafafa',
+                        }}
+                    >
+                        {/* Header 行 */}
+                        <div style={{
+                            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6,
+                        }}>
+                            <span style={{
+                                width: 22, height: 22, borderRadius: 11, background: '#1677ff',
+                                color: '#fff', display: 'inline-flex', alignItems: 'center',
+                                justifyContent: 'center', fontSize: 11, fontWeight: 600,
+                            }}>{idx + 1}</span>
+                            <Tag color={meta.color} icon={meta.icon}>{meta.label}</Tag>
+                            <Tag color={statusMeta.color} icon={statusMeta.icon}>{span.status}</Tag>
+                            <span style={{fontSize: 12, color: '#666'}}>{span.name}</span>
+                            <div style={{flex: 1}}/>
+                            <Tooltip title="耗时">
+                                <Tag>{span.durationMs != null ? `${span.durationMs}ms` : '—'}</Tag>
+                            </Tooltip>
+                            <span style={{fontSize: 11, color: '#999'}}>
+                                #{span.sequence}
+                            </span>
+                        </div>
+                        {/* Content 行 */}
+                        {span.content && (
+                            <div style={{
+                                fontSize: 12,
+                                color: '#333',
+                                background: '#fff',
+                                padding: '6px 8px',
+                                borderRadius: 4,
+                                border: '1px dashed #e8e8e8',
+                                marginBottom: attrs ? 6 : 0,
+                                whiteSpace: 'pre-wrap',
+                                wordBreak: 'break-word',
+                                maxHeight: 120,
+                                overflow: 'auto',
+                            }}>
+                                {truncate(span.content, 500)}
+                            </div>
+                        )}
+                        {/* Attributes 详情 */}
+                        {attrs && Object.keys(attrs).length > 0 && (
+                            <details style={{fontSize: 11, color: '#888'}}>
+                                <summary style={{cursor: 'pointer', userSelect: 'none'}}>
+                                    查看 attributes ({Object.keys(attrs).length})
+                                </summary>
+                                <pre style={{
+                                    background: '#fff', padding: 6, marginTop: 4,
+                                    borderRadius: 4, maxHeight: 150, overflow: 'auto',
+                                }}>{JSON.stringify(attrs, null, 2)}</pre>
+                            </details>
+                        )}
+                        {/* Error message */}
+                        {span.errorMessage && (
+                            <div style={{marginTop: 6, fontSize: 12, color: '#ff4d4f'}}>
+                                ❌ {span.errorMessage}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+function truncate(s, max) {
+    if (!s) return s;
+    return s.length > max ? s.substring(0, max) + '…' : s;
+}
+
+export default Timeline;

package/src/pages/trace/components/ToolCallTree.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {Empty, Tag} from 'antd';
+import {BranchesOutlined} from '@ant-design/icons';
+
+/**
+ * ToolCallTree 组件 (FEATURE013 T7)
+ *
+ * <p>树形展示 tool_call 类型 span, 按 parent_span_id 嵌套.
+ * 每个节点展示: 工具名 / 参数 / 结果 / 耗时 / 状态.
+ */
+const ToolCallTree = ({spans = []}) => {
+    // 过滤出 tool_call / llm_call 类型
+    const callSpans = spans.filter(s =>
+        s.spanType === 'tool_call' || s.spanType === 'llm_call',
+    );
+    if (!callSpans.length) {
+        return (
+            <Empty
+                description="本次执行没有工具/LLM 调用"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+            />
+        );
+    }
+
+    // 构建 map
+    const byId = new Map(callSpans.map(s => [s.spanId, s]));
+    // 找根节点 (parent_span_id 不在 callSpans 里 或为 null)
+    const roots = callSpans.filter(s => !s.parentSpanId || !byId.has(s.parentSpanId));
+
+    const renderNode = (span, depth) => {
+        let args = null, result = null;
+        try {
+            const attrs = span.attributes
+                ? (typeof span.attributes === 'string' ? JSON.parse(span.attributes) : span.attributes)
+                : null;
+            if (attrs) {
+                args = attrs.arguments || attrs.argumentsJson || attrs.tool_input;
+                result = attrs.tool_result || attrs.result || attrs.output;
+            }
+        } catch { /* ignore */ }
+
+        const children = callSpans.filter(s => s.parentSpanId === span.spanId);
+
+        return (
+            <div key={span.spanId} style={{
+                marginLeft: depth * 20, marginBottom: 8,
+                borderLeft: depth > 0 ? '2px solid #d9d9d9' : 'none',
+                paddingLeft: depth > 0 ? 12 : 0,
+            }}>
+                <div style={{
+                    background: '#fff',
+                    border: '1px solid #e8e8e8',
+                    borderRadius: 6,
+                    padding: '8px 12px',
+                    borderLeft: `3px solid ${span.spanType === 'tool_call' ? '#fa8c16' : '#1677ff'}`,
+                }}>
+                    <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4}}>
+                        <BranchesOutlined/>
+                        <Tag color={span.spanType === 'tool_call' ? 'orange' : 'blue'}>
+                            {span.spanType === 'tool_call' ? 'Tool' : 'LLM'}
+                        </Tag>
+                        <span style={{fontWeight: 600}}>{span.name}</span>
+                        <Tag color={
+                            span.status === 'SUCCESS' ? 'success' :
+                            span.status === 'FAILURE' ? 'error' : 'default'
+                        }>{span.status}</Tag>
+                        <div style={{flex: 1}}/>
+                        <span style={{fontSize: 11, color: '#999'}}>
+                            {span.durationMs != null ? `${span.durationMs}ms` : ''}
+                        </span>
+                    </div>
+                    {args && (
+                        <details>
+                            <summary style={{cursor: 'pointer', fontSize: 12, color: '#666'}}>
+                                📥 入参
+                            </summary>
+                            <pre style={{
+                                background: '#fafafa', padding: 6, marginTop: 4,
+                                borderRadius: 4, fontSize: 11, maxHeight: 100, overflow: 'auto',
+                            }}>{typeof args === 'string' ? args : JSON.stringify(args, null, 2)}</pre>
+                        </details>
+                    )}
+                    {result && (
+                        <details>
+                            <summary style={{cursor: 'pointer', fontSize: 12, color: '#666'}}>
+                                📤 结果
+                            </summary>
+                            <pre style={{
+                                background: '#f6ffed', padding: 6, marginTop: 4,
+                                borderRadius: 4, fontSize: 11, maxHeight: 150, overflow: 'auto',
+                            }}>{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}</pre>
+                        </details>
+                    )}
+                    {span.errorMessage && (
+                        <div style={{fontSize: 12, color: '#ff4d4f', marginTop: 4}}>
+                            ❌ {span.errorMessage}
+                        </div>
+                    )}
+                </div>
+                {children.length > 0 && (
+                    <div style={{marginTop: 6}}>
+                        {children.map(c => renderNode(c, depth + 1))}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div>
+            {roots.map(r => renderNode(r, 0))}
+        </div>
+    );
+};
+
+export default ToolCallTree;

package/src/pages/trace/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Outlet} from 'react-router-dom';
+
+/**
+ * Agent Trace 路由壳子 (FEATURE013 T7)
+ * 子路由:
+ *   - /ai/trace/debug  -> DebugPlayground (默认重定向)
+ */
+const TraceIndex = () => {
+    return <Outlet/>;
+};
+
+export default TraceIndex;

package/src/pages/usage/index.jsx

@@ -0,0 +1,352 @@
+import {useEffect, useState} from 'react'
+import {Card, Col, Row, Select, Statistic, Table, Tabs, Tag, Typography} from 'antd'
+import {BarChartOutlined, DollarOutlined, RocketOutlined} from '@ant-design/icons'
+import request from '@/api/request'
+import ReactECharts from 'echarts-for-react'
+
+const {Text} = Typography
+const {TabPane} = Tabs
+
+const UsageDashboard = () => {
+    const [overview, setOverview] = useState(null)
+    const [byApp, setByApp] = useState([])
+    const [byUser, setByUser] = useState([])
+    const [trend, setTrend] = useState([])
+    const [records, setRecords] = useState([])
+    const [loading, setLoading] = useState(false)
+
+    // 维度筛选
+    const [appFilter, setAppFilter] = useState(null)
+    const [providerFilter, setProviderFilter] = useState(null)
+    const [modelFilter, setModelFilter] = useState(null)
+    const [providers, setProviders] = useState([])
+    const [models, setModels] = useState([])
+    const [apps, setApps] = useState([])
+
+    // 加载维度下拉数据
+    useEffect(() => {
+        // 加载供应商
+        request('/llm-center/provider/list').then(res => {
+            const list = Array.isArray(res) ? res : (res?.data || [])
+            setProviders(list)
+        }).catch(() => {
+        })
+
+        // 加载模型（支持按供应商过滤）
+        loadModels(null)
+
+        // 加载应用列表
+        request('/agent/app/page', {method: 'POST', body: JSON.stringify({current: 1, size: 100})}).then(res => {
+            const list = Array.isArray(res) ? res : (res?.records || res?.data || [])
+            setApps(list)
+        }).catch(() => {
+        })
+    }, [])
+
+    const loadModels = (providerCode) => {
+        request('/llm-center/model/list', {params: {providerCode}}).then(res => {
+            const list = Array.isArray(res) ? res : (res?.data || [])
+            setModels(list)
+        }).catch(() => {
+        })
+    }
+
+    const handleProviderChange = (val) => {
+        setProviderFilter(val)
+        setModelFilter(null)
+        loadModels(val)
+    }
+
+    const buildFilterParams = () => ({
+        appCode: appFilter,
+        providerCode: providerFilter,
+        modelCode: modelFilter,
+    })
+
+    const fetchOverview = async () => {
+        try {
+            const res = await request('/llm-gateway/usage/overview', {
+                method: 'GET',
+                params: buildFilterParams()
+            })
+            setOverview(res?.data || res || null)
+        } catch (e) {
+            console.warn('Usage overview API unavailable:', e?.message)
+            setOverview(null)
+        }
+    }
+
+    const fetchByApp = async () => {
+        try {
+            const res = await request('/llm-gateway/usage/by-app', {method: 'GET'})
+            setByApp(Array.isArray(res) ? res : (res?.data || []))
+        } catch (e) {
+            console.warn('Usage by-app API unavailable:', e?.message)
+            setByApp([])
+        }
+    }
+
+    const fetchByUser = async () => {
+        try {
+            const res = await request('/llm-gateway/usage/by-user', {
+                method: 'GET',
+                params: buildFilterParams()
+            })
+            setByUser(Array.isArray(res) ? res : (res?.data || []))
+        } catch (e) {
+            console.warn('Usage by-user API unavailable:', e?.message)
+            setByUser([])
+        }
+    }
+
+    const fetchTrend = async () => {
+        try {
+            const res = await request('/llm-gateway/usage/trend', {
+                method: 'GET',
+                params: {...buildFilterParams(), days: 7}
+            })
+            setTrend(Array.isArray(res) ? res : (res?.data || []))
+        } catch (e) {
+            console.warn('Usage trend API unavailable:', e?.message)
+            setTrend([])
+        }
+    }
+
+    const fetchRecords = async () => {
+        setLoading(true)
+        try {
+            const res = await request('/llm-gateway/usage/records', {
+                method: 'GET',
+                params: {...buildFilterParams(), page: 1, size: 20}
+            })
+            const records = Array.isArray(res) ? res : (res?.records || res?.data || [])
+            setRecords(records)
+        } catch (e) {
+            console.warn('Usage records API unavailable:', e?.message)
+            setRecords([])
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        fetchOverview()
+        fetchByApp()
+        fetchByUser()
+        fetchTrend()
+        fetchRecords()
+    }, [appFilter, providerFilter, modelFilter])
+
+    // 趋势图配置
+    const trendOption = {
+        tooltip: {trigger: 'axis'},
+        legend: {data: ['Token消耗', '调用次数']},
+        xAxis: {
+            type: 'category',
+            data: trend.map(t => t.date)
+        },
+        yAxis: [
+            {type: 'value', name: 'Tokens', position: 'left'},
+            {type: 'value', name: '调用次数', position: 'right'}
+        ],
+        series: [
+            {
+                name: 'Token消耗',
+                type: 'bar',
+                data: trend.map(t => t.dailyTokens)
+            },
+            {
+                name: '调用次数',
+                type: 'line',
+                yAxisIndex: 1,
+                data: trend.map(t => t.dailyCalls)
+            }
+        ]
+    }
+
+    const appColumns = [
+        {title: '应用编码', dataIndex: 'appCode'},
+        {title: '调用次数', dataIndex: 'totalCalls', render: v => v?.toLocaleString()},
+        {title: '输入Token', dataIndex: 'inputTokens', render: v => v?.toLocaleString()},
+        {title: '输出Token', dataIndex: 'outputTokens', render: v => v?.toLocaleString()},
+        {title: '总Token', dataIndex: 'totalTokens', render: v => v?.toLocaleString()},
+        {
+            title: '费用',
+            dataIndex: 'totalCost',
+            render: v => <Text style={{color: '#faad14'}}>¥{v?.toFixed(4) || '0'}</Text>
+        }
+    ]
+
+    const userColumns = [
+        {title: '用户ID', dataIndex: 'userId'},
+        {title: '调用次数', dataIndex: 'totalCalls', render: v => v?.toLocaleString()},
+        {title: '总Token', dataIndex: 'totalTokens', render: v => v?.toLocaleString()},
+        {
+            title: '费用',
+            dataIndex: 'totalCost',
+            render: v => <Text style={{color: '#faad14'}}>¥{v?.toFixed(4) || '0'}</Text>
+        }
+    ]
+
+    const recordColumns = [
+        {title: '时间', dataIndex: 'gmtCreate', width: 160},
+        {title: '应用', dataIndex: 'appCode', render: v => <Tag color="blue">{v || '-'}</Tag>},
+        {title: '用户', dataIndex: 'userName'},
+        {title: '供应商', dataIndex: 'providerCode', render: v => <Tag color="purple">{v || '-'}</Tag>},
+        {title: '模型', dataIndex: 'modelCode', render: v => <Tag>{v || '-'}</Tag>},
+        {title: '输入Token', dataIndex: 'inputTokens', render: v => v?.toLocaleString()},
+        {title: '输出Token', dataIndex: 'outputTokens', render: v => v?.toLocaleString()},
+        {title: '延迟', dataIndex: 'latencyMs', render: v => v ? `${v}ms` : '-'},
+        {
+            title: '状态',
+            dataIndex: 'status',
+            render: v => <Tag color={v === 'SUCCESS' ? 'green' : 'red'}>{v || '-'}</Tag>
+        },
+        {
+            title: '费用',
+            dataIndex: 'totalCost',
+            render: v => <Text style={{color: '#faad14'}}>¥{v || 0}</Text>
+        }
+    ]
+
+    return (
+        <div>
+            {/* 维度筛选栏 */}
+            <div style={{
+                display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap',
+                background: '#fff', padding: '12px 16px', borderRadius: 10,
+                boxShadow: '0 1px 4px rgba(0,0,0,0.06)', marginBottom: 16
+            }}>
+                <span style={{fontWeight: 600, color: '#333', marginRight: 4}}>维度筛选：</span>
+                <Select
+                    placeholder="筛选应用"
+                    allowClear
+                    style={{width: 180}}
+                    value={appFilter}
+                    onChange={setAppFilter}
+                    options={apps.map(a => ({value: a.appCode, label: a.appName || a.appCode}))}
+                />
+                <Select
+                    placeholder="筛选供应商"
+                    allowClear
+                    style={{width: 180}}
+                    value={providerFilter}
+                    onChange={handleProviderChange}
+                    options={providers.map(p => ({value: p.providerCode, label: p.providerName}))}
+                />
+                <Select
+                    placeholder="筛选模型"
+                    allowClear
+                    style={{width: 180}}
+                    value={modelFilter}
+                    onChange={setModelFilter}
+                    options={models.map(m => ({value: m.modelCode, label: m.modelName}))}
+                />
+                {(appFilter || providerFilter || modelFilter) && (
+                    <a onClick={() => {
+                        setAppFilter(null);
+                        setProviderFilter(null);
+                        setModelFilter(null)
+                    }} style={{fontSize: 12}}>
+                        清空筛选
+                    </a>
+                )}
+            </div>
+
+            {/* 统计卡片 */}
+            <Row gutter={16} style={{marginBottom: 16}}>
+                <Col span={6}>
+                    <Card size="small" style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Statistic
+                            title={<span style={{color: '#666', fontSize: 13}}>累计 Token</span>}
+                            value={overview?.totalTokens || 0}
+                            prefix={<RocketOutlined style={{color: '#667eea'}}/>}
+                            formatter={v => v?.toLocaleString()}
+                            valueStyle={{color: '#333', fontSize: 22, fontWeight: 700}}
+                        />
+                    </Card>
+                </Col>
+                <Col span={6}>
+                    <Card size="small" style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Statistic
+                            title={<span style={{color: '#666', fontSize: 13}}>累计费用</span>}
+                            value={overview?.totalCost || 0}
+                            prefix={<DollarOutlined style={{color: '#faad14'}}/>}
+                            valueStyle={{color: '#333', fontSize: 22, fontWeight: 700}}
+                        />
+                    </Card>
+                </Col>
+                <Col span={6}>
+                    <Card size="small" style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Statistic
+                            title={<span style={{color: '#666', fontSize: 13}}>今日 Token</span>}
+                            value={overview?.todayTokens || 0}
+                            prefix={<BarChartOutlined style={{color: '#52c41a'}}/>}
+                            formatter={v => v?.toLocaleString()}
+                            valueStyle={{color: '#333', fontSize: 22, fontWeight: 700}}
+                        />
+                    </Card>
+                </Col>
+                <Col span={6}>
+                    <Card size="small" style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Statistic
+                            title={<span style={{color: '#666', fontSize: 13}}>今日费用</span>}
+                            value={overview?.todayCost || 0}
+                            prefix={<DollarOutlined style={{color: '#faad14'}}/>}
+                            precision={4}
+                            suffix="元"
+                            valueStyle={{color: '#333', fontSize: 22, fontWeight: 700}}
+                        />
+                    </Card>
+                </Col>
+            </Row>
+
+            <Tabs defaultActiveKey="trend">
+                <TabPane tab="用量趋势" key="trend">
+                    <Card style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <ReactECharts option={trendOption} style={{height: 300}}/>
+                    </Card>
+                </TabPane>
+
+                <TabPane tab="按应用统计" key="byApp">
+                    <Card style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Table
+                            columns={appColumns}
+                            dataSource={byApp}
+                            rowKey="appCode"
+                            pagination={false}
+                            locale={{emptyText: '暂无数据'}}
+                        />
+                    </Card>
+                </TabPane>
+
+                <TabPane tab="按用户统计" key="byUser">
+                    <Card style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Table
+                            columns={userColumns}
+                            dataSource={byUser}
+                            rowKey="userId"
+                            pagination={false}
+                            locale={{emptyText: '暂无数据'}}
+                        />
+                    </Card>
+                </TabPane>
+
+                <TabPane tab="调用明细" key="records">
+                    <Card style={{borderRadius: 10, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'}}>
+                        <Table
+                            columns={recordColumns}
+                            dataSource={records}
+                            loading={loading}
+                            rowKey="id"
+                            pagination={{pageSize: 20, showSizeChanger: false}}
+                            locale={{emptyText: '暂无数据'}}
+                        />
+                    </Card>
+                </TabPane>
+            </Tabs>
+        </div>
+    )
+}
+
+export default UsageDashboard