102 lines
5.5 KiB
TypeScript
102 lines
5.5 KiB
TypeScript
import React from 'react';
|
|
|
|
/**
|
|
* D7. AI Agent管理面板 - 平台管理员的AI Agent运营监控
|
|
*
|
|
* Agent会话统计、常见问题Top10、响应质量监控、模型配置
|
|
*/
|
|
|
|
const agentStats = [
|
|
{ label: '今日会话数', value: '3,456', change: '+18%', color: 'var(--color-primary)' },
|
|
{ label: '平均响应时间', value: '1.2s', change: '-0.3s', color: 'var(--color-success)' },
|
|
{ label: '用户满意度', value: '94.5%', change: '+2.1%', color: 'var(--color-info)' },
|
|
{ label: '人工接管率', value: '3.2%', change: '-0.5%', color: 'var(--color-warning)' },
|
|
];
|
|
|
|
const topQuestions = [
|
|
{ question: '如何购买券？', count: 234, category: '使用指引' },
|
|
{ question: '推荐高折扣券', count: 189, category: '智能推券' },
|
|
{ question: '我的券快过期了', count: 156, category: '到期管理' },
|
|
{ question: '如何出售我的券？', count: 134, category: '交易指引' },
|
|
{ question: '退款怎么操作？', count: 98, category: '售后服务' },
|
|
];
|
|
|
|
const agentModules = [
|
|
{ name: '智能推券', status: 'active', accuracy: '92%', desc: '根据用户画像推荐券' },
|
|
{ name: '比价分析', status: 'active', accuracy: '96%', desc: '三因子定价模型分析' },
|
|
{ name: '投资教育', status: 'active', accuracy: '89%', desc: '券投资知识科普' },
|
|
{ name: '客服对话', status: 'active', accuracy: '91%', desc: '常见问题自动应答' },
|
|
{ name: '发行方助手', status: 'active', accuracy: '94%', desc: '发券建议/定价优化' },
|
|
{ name: '风险预警', status: 'beta', accuracy: '87%', desc: '异常交易智能预警' },
|
|
];
|
|
|
|
export const AgentPanelPage: React.FC = () => {
|
|
return (
|
|
<div>
|
|
<h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>AI Agent 管理</h1>
|
|
|
|
{/* Stats */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
|
|
{agentStats.map(s => (
|
|
<div key={s.label} style={{
|
|
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
|
border: '1px solid var(--color-border-light)', padding: 20,
|
|
}}>
|
|
<div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
|
|
<div style={{ font: 'var(--text-h1)', color: s.color }}>{s.value}</div>
|
|
<div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 4 }}>{s.change}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
|
|
{/* Top Questions */}
|
|
<div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
|
|
<h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>热门问题 Top 5</h2>
|
|
{topQuestions.map((q, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<span style={{
|
|
width: 24, height: 24, borderRadius: '50%', background: 'var(--color-primary-surface)',
|
|
color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
font: 'var(--text-caption)', fontWeight: 700,
|
|
}}>{i + 1}</span>
|
|
<div style={{ flex: 1, marginLeft: 12 }}>
|
|
<div style={{ font: 'var(--text-body)' }}>{q.question}</div>
|
|
<span style={{
|
|
padding: '1px 6px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)',
|
|
background: 'var(--color-primary-surface)', color: 'var(--color-primary)',
|
|
}}>{q.category}</span>
|
|
</div>
|
|
<span style={{ font: 'var(--text-label)', color: 'var(--color-primary)' }}>{q.count}次</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Agent Modules */}
|
|
<div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
|
|
<h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>Agent 模块</h2>
|
|
{agentModules.map((m, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<span style={{ font: 'var(--text-label)' }}>{m.name}</span>
|
|
<span style={{
|
|
padding: '1px 6px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
|
|
background: m.status === 'active' ? 'var(--color-success-light)' : 'var(--color-warning-light)',
|
|
color: m.status === 'active' ? 'var(--color-success)' : 'var(--color-warning)',
|
|
}}>{m.status === 'active' ? '运行中' : 'Beta'}</span>
|
|
</div>
|
|
<div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{m.desc}</div>
|
|
</div>
|
|
<div style={{ textAlign: 'right' }}>
|
|
<div style={{ font: 'var(--text-label)', color: 'var(--color-success)' }}>{m.accuracy}</div>
|
|
<div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>准确率</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|