sanbuphy
0eba9e87e9
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
734 lines
26 KiB
Vue
734 lines
26 KiB
Vue
<template>
|
||
<div class="agent-chat-demo">
|
||
<div class="header">
|
||
<div class="title">
|
||
🤖 Agent 初体验：从"能说"到"能做"
|
||
</div>
|
||
<div class="subtitle">
|
||
体验 Agent 如何自动调用工具完成任务
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景选择 -->
|
||
<div class="scenario-tabs">
|
||
<button
|
||
v-for="s in scenarios"
|
||
:key="s.id"
|
||
:class="['tab-btn', { active: currentScenario === s.id }]"
|
||
@click="selectScenario(s.id)"
|
||
>
|
||
<span>{{ s.icon }}</span>
|
||
<span>{{ s.name }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 聊天窗口 -->
|
||
<div class="chat-window">
|
||
<!-- 用户消息 -->
|
||
<div class="message user">
|
||
<div class="avatar">
|
||
👤
|
||
</div>
|
||
<div class="bubble">
|
||
{{ currentScenarioData.query }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LLM 回复（对比） -->
|
||
<div class="message llm">
|
||
<div class="avatar">
|
||
🤖
|
||
</div>
|
||
<div class="bubble llm-bubble">
|
||
<div class="llm-label">
|
||
普通 LLM
|
||
</div>
|
||
<div class="llm-content">
|
||
{{ currentScenarioData.llmResponse }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Agent 回复 -->
|
||
<div class="message agent">
|
||
<div class="avatar agent-avatar">
|
||
🦾
|
||
</div>
|
||
<div class="bubble agent-bubble">
|
||
<div class="agent-label">
|
||
Agent 智能体
|
||
</div>
|
||
|
||
<!-- 思考过程（可折叠） -->
|
||
<div
|
||
v-if="showThinking"
|
||
class="thinking-section"
|
||
>
|
||
<div
|
||
class="thinking-header"
|
||
@click="toggleThinking"
|
||
>
|
||
<span>🧠 思考过程</span>
|
||
<span class="toggle-icon">{{ thinkingExpanded ? '▼' : '▶' }}</span>
|
||
</div>
|
||
<div
|
||
v-if="thinkingExpanded"
|
||
class="thinking-content"
|
||
>
|
||
<div class="thought-item">
|
||
{{ currentScenarioData.thinking }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具调用（可折叠） -->
|
||
<div
|
||
v-if="showTools"
|
||
ref="toolsSection"
|
||
class="tools-section"
|
||
>
|
||
<div
|
||
class="tools-header"
|
||
@click="toggleTools"
|
||
>
|
||
<span>🔧 工具调用 ({{ currentScenarioData.tools.length }}个)</span>
|
||
<span class="toggle-icon">{{ toolsExpanded ? '▼' : '▶' }}</span>
|
||
</div>
|
||
<div
|
||
v-if="toolsExpanded"
|
||
class="tools-list"
|
||
>
|
||
<div
|
||
v-for="(tool, idx) in currentScenarioData.tools"
|
||
:key="idx"
|
||
:ref="el => setToolRef(el, idx)"
|
||
class="tool-item"
|
||
:class="{ completed: toolExecuted > idx, executing: toolExecuting === idx }"
|
||
>
|
||
<div class="tool-status">
|
||
<span v-if="toolExecuted > idx">✅</span>
|
||
<span
|
||
v-else-if="toolExecuting === idx"
|
||
class="spinner"
|
||
>⏳</span>
|
||
<span v-else>⏸️</span>
|
||
</div>
|
||
<div class="tool-info">
|
||
<div class="tool-name">
|
||
{{ tool.name }}
|
||
</div>
|
||
<div
|
||
v-if="toolExecuted > idx || toolExecuting === idx"
|
||
class="tool-detail"
|
||
>
|
||
<code class="tool-params">{{ tool.params }}</code>
|
||
<div
|
||
v-if="toolExecuted > idx"
|
||
class="tool-result"
|
||
>
|
||
{{ tool.result }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最终回复 -->
|
||
<div
|
||
v-if="showResponse"
|
||
class="final-response"
|
||
>
|
||
<div class="response-header">
|
||
💬 最终回复
|
||
</div>
|
||
<div class="response-content">
|
||
{{ currentScenarioData.agentResponse }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 执行按钮 -->
|
||
<button
|
||
v-if="!isExecuting && !executionComplete"
|
||
class="execute-btn"
|
||
@click="startExecution"
|
||
>
|
||
▶ 让 Agent 执行
|
||
</button>
|
||
<button
|
||
v-else-if="executionComplete"
|
||
class="execute-btn reset"
|
||
@click="reset"
|
||
>
|
||
🔄 重置对话
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心区别 -->
|
||
<div class="insight-bar">
|
||
<span class="insight-label">💡 核心区别：</span>
|
||
<span class="insight-text">{{ currentScenarioData.insight }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick } from 'vue'
|
||
|
||
const scenarios = [
|
||
{
|
||
id: 'weather',
|
||
icon: '🌤️',
|
||
name: '查天气',
|
||
query: '北京今天天气怎么样？适合穿什么衣服？',
|
||
llmResponse: '我无法获取实时天气信息。北京一般在春季比较温和，建议穿薄外套。',
|
||
thinking: '用户想知道北京今天的天气和穿衣建议。我需要：1) 查询实时天气 2) 根据温度给出穿衣建议',
|
||
tools: [
|
||
{ name: 'weather_api', params: '{"city": "北京", "date": "today"}', result: '☀️ 晴，15-25°C，空气质量良' }
|
||
],
|
||
agentResponse: '北京今天天气晴朗，15-25°C，空气质量良。建议穿薄外套或长袖T恤，早晚温差较大，可以带件薄外套。',
|
||
insight: 'Agent 调用天气 API 获取实时数据，LLM 只能基于训练数据推测。'
|
||
},
|
||
{
|
||
id: 'calculate',
|
||
icon: '🧮',
|
||
name: '复杂计算',
|
||
query: '帮我算一下：如果贷款100万，年利率4.2%，30年等额本息，每月还多少？总利息多少？',
|
||
llmResponse: '根据公式计算，月供大约5000元左右，总利息约80万。这只是估算，建议用专业计算器。',
|
||
thinking: '这是房贷计算问题，需要用到等额本息公式。月供 = 贷款本金 × 月利率 × (1+月利率)^还款月数 / [(1+月利率)^还款月数 - 1]',
|
||
tools: [
|
||
{ name: 'calculator', params: '{"principal": 1000000, "rate": 0.042, "years": 30}', result: '月供: ¥4,890.19, 总利息: ¥760,468.40' }
|
||
],
|
||
agentResponse: '计算结果：\n• 每月还款：¥4,890.19\n• 还款总额：¥1,760,468.40\n• 总利息：¥760,468.40\n\n30年下来利息约占本金的76%。',
|
||
insight: 'Agent 调用计算器确保 100% 准确，LLM 心算可能出错。'
|
||
},
|
||
{
|
||
id: 'stock',
|
||
icon: '📈',
|
||
name: '股票分析',
|
||
query: '分析一下特斯拉股票最近的表现，并预测明天走势',
|
||
llmResponse: '我无法获取实时股票数据。特斯拉是知名电动车公司，股价波动较大，建议查看专业财经网站。',
|
||
thinking: '用户需要特斯拉股票的近期表现分析和预测。我需要：1) 获取最新股价 2) 获取历史数据 3) 进行技术分析',
|
||
tools: [
|
||
{ name: 'stock_api', params: '{"symbol": "TSLA", "period": "1mo"}', result: '当前价: $248.50, 月涨幅: +12.3%, 成交量: 1.2亿' },
|
||
{ name: 'news_search', params: '{"query": "Tesla stock news", "limit": 5}', result: '找到5条相关新闻：财报超预期、新车型发布...' },
|
||
{ name: 'technical_analysis', params: '{"data": "TSLA_price_data", "indicators": ["MA", "RSI"]}', result: 'RSI: 68(接近超买), MA20: $235, 趋势: 上升' }
|
||
],
|
||
agentResponse: '特斯拉(TSLA)最近表现：\n📈 月涨幅 +12.3%，现报 $248.50\n📊 技术指标：RSI 68(接近超买)，站上20日均线\n📰 消息面：财报超预期、新车型发布利好\n\n预测：短期可能回调，中长期看好。',
|
||
insight: 'Agent 串联多个工具（股价+新闻+技术分析）完成复杂分析任务。'
|
||
},
|
||
{
|
||
id: 'travel',
|
||
icon: '✈️',
|
||
name: '旅行规划',
|
||
query: '帮我规划一个3天2晚的东京旅行，预算1万人民币，包含机票、酒店、景点',
|
||
llmResponse: '东京是个好地方！我可以给你一些建议：浅草寺、东京塔、银座购物区都很值得去。预算1万可能有点紧张，建议提前预订。',
|
||
thinking: '用户需要完整的东京3天2晚旅行规划。我需要：1) 查询机票价格 2) 搜索酒店 3) 推荐景点 4) 规划路线 5) 计算总预算',
|
||
tools: [
|
||
{ name: 'flight_search', params: '{"from": "上海", "to": "东京", "depart": "2024-03-15", "return": "2024-03-17"}', result: '往返机票: ¥3,200 (春秋航空)' },
|
||
{ name: 'hotel_search', params: '{"city": "东京", "checkin": "2024-03-15", "nights": 2, "budget": 3000}', result: '新宿华盛顿酒店: ¥1,200/晚, 评分4.5' },
|
||
{ name: 'attractions_search', params: '{"city": "东京", "days": 3}', result: '推荐景点: 浅草寺、东京塔、涩谷十字路口、明治神宫、秋叶原' },
|
||
{ name: 'route_planner', params: '{"spots": ["浅草寺", "东京塔", "涩谷", "秋叶原"], "days": 3}', result: 'Day1: 浅草寺→东京塔, Day2: 涩谷→明治神宫, Day3: 秋叶原→银座' },
|
||
{ name: 'budget_calculator', params: '{"flight": 3200, "hotel": 2400, "food": 1500, "transport": 500, "tickets": 800}', result: '总预算: ¥8,400 (剩余¥1,600用于购物)' }
|
||
],
|
||
agentResponse: '✈️ 东京3天2晚行程规划\n\n📅 Day1: 浅草寺→东京塔\n📅 Day2: 涩谷→明治神宫\n📅 Day3: 秋叶原→银座\n\n💰 预算明细：\n• 往返机票: ¥3,200\n• 酒店2晚: ¥2,400\n• 餐饮: ¥1,500\n• 交通: ¥500\n• 门票: ¥800\n• 总计: ¥8,400 (剩余¥1,600购物)',
|
||
insight: 'Agent 调用5个工具完成机票、酒店、景点、路线、预算的完整规划。'
|
||
},
|
||
{
|
||
id: 'shopping',
|
||
icon: '🛒',
|
||
name: '智能购物',
|
||
query: '我想买一台5000元左右的笔记本电脑，主要用于编程和轻度游戏，推荐几款并对比',
|
||
llmResponse: '5000元预算可以买到不错的笔记本。推荐联想小新Pro、华为MateBook、小米RedmiBook。具体配置建议16GB内存、512GB SSD。',
|
||
thinking: '用户需要5000元价位的编程+游戏笔记本推荐。我需要：1) 搜索当前热门机型 2) 获取详细规格参数 3) 查询实时价格 4) 查看用户评价 5) 进行性能对比',
|
||
tools: [
|
||
{ name: 'product_search', params: '{"category": "laptop", "budget": 5000, "usage": "programming,gaming"}', result: '找到6款: 联想小新Pro16、ThinkBook14+、华为MateBook14、RedmiBook Pro15、荣耀MagicBook14、机械革命极光Pro' },
|
||
{ name: 'specs_query', params: '{"products": ["联想小新Pro16", "ThinkBook14+", "华为MateBook14"]}', result: '小新Pro16: R7-7840HS/16G/1TB/2.5K; ThinkBook14+: i5-13500H/16G/512G/2.8K; MateBook14: i5-1340P/16G/512G/2K触控' },
|
||
{ name: 'price_compare', params: '{"products": ["联想小新Pro16", "ThinkBook14+", "华为MateBook14"]}', result: '小新Pro16: ¥4,999; ThinkBook14+: ¥5,299; MateBook14: ¥5,499' },
|
||
{ name: 'reviews_search', params: '{"products": ["联想小新Pro16", "ThinkBook14+"], "source": "jd,tmall"}', result: '小新Pro16: 好评率96%, praised for screen and performance; ThinkBook14+: 好评率94%, praised for build quality' },
|
||
{ name: 'benchmark_compare', params: '{"products": ["联想小新Pro16", "ThinkBook14+"], "tests": ["cpu", "gpu", "battery"]}', result: 'CPU: 小新Pro16(R7) > ThinkBook14+(i5); GPU: 两者均为核显; 续航: ThinkBook14+ 8h > 小新Pro16 6.5h' }
|
||
],
|
||
agentResponse: '💻 5000元笔记本推荐对比\n\n🥇 首选: 联想小新Pro16\n• 配置: R7-7840HS/16G/1TB/2.5K 120Hz\n• 价格: ¥4,999\n• 优势: 性能强、屏幕好、存储大\n• 适合: 编程+轻度游戏\n\n🥈 备选: ThinkBook14+\n• 配置: i5-13500H/16G/512G/2.8K\n• 价格: ¥5,299\n• 优势: 做工好、续航长、接口全\n• 适合: 商务办公+编程',
|
||
insight: 'Agent 调用5个工具完成搜索、查规格、比价格、看评价、跑分对比的完整购物决策。'
|
||
},
|
||
{
|
||
id: 'report',
|
||
icon: '📊',
|
||
name: '研究报告',
|
||
query: '帮我生成一份2024年新能源汽车行业分析报告，包含市场规模、主要玩家、技术趋势',
|
||
llmResponse: '新能源汽车行业正在快速发展。特斯拉、比亚迪是行业领导者。市场规模预计持续增长，电池技术是关键。建议查阅专业行业报告获取详细数据。',
|
||
thinking: '用户需要一份完整的新能源汽车行业分析报告。我需要：1) 查询最新市场数据 2) 搜索主要厂商信息 3) 获取技术发展趋势 4) 查找政策法规 5) 生成数据可视化 6) 整理成报告格式',
|
||
tools: [
|
||
{ name: 'market_data', params: '{"industry": "NEV", "year": 2024, "metrics": ["size", "growth", "penetration"]}', result: '2024年全球NEV销量: 1,700万辆(+35%), 中国占比60%, 渗透率: 全球18%, 中国35%' },
|
||
{ name: 'company_search', params: '{"industry": "NEV", "ranking": "top10"}', result: 'TOP5: 比亚迪(302万辆)、特斯拉(181万辆)、大众(77万辆)、吉利(68万辆)、上汽(63万辆)' },
|
||
{ name: 'tech_trends', params: '{"field": "NEV", "technologies": ["battery", "autonomous", "charging"]}', result: '电池: 固态电池量产在即, 能量密度>400Wh/kg; 智驾: L2+普及率>50%, L4开始商用; 充电: 800V高压平台普及, 5分钟补能200km' },
|
||
{ name: 'policy_search', params: '{"region": "global", "topic": "NEV_policy", "year": 2024}', result: '中国: 购置税减免延续至2027年; 欧盟: 2035年禁售燃油车; 美国: IRA法案补贴本土化生产' },
|
||
{ name: 'data_visualization', params: '{"type": "chart", "data": "NEV_market_share", "chart_type": "pie"}', result: '生成市场份额饼图: 比亚迪35%, 特斯拉21%, 其他44%' },
|
||
{ name: 'report_generator', params: '{"title": "2024新能源汽车行业分析报告", "sections": ["market", "players", "tech", "policy"], "format": "markdown"}', result: '报告已生成: 12页, 包含6个图表, 3个数据表格' }
|
||
],
|
||
agentResponse: '📊 2024新能源汽车行业分析报告\n\n📈 市场规模\n• 全球销量: 1,700万辆 (+35%)\n• 中国市场占比: 60%\n• 全球渗透率: 18% (中国35%)\n\n🏆 主要玩家\n1. 比亚迪: 302万辆 (35%)\n2. 特斯拉: 181万辆 (21%)\n3. 大众: 77万辆\n\n🔋 技术趋势\n• 固态电池能量密度>400Wh/kg\n• L2+智驾普及率超50%\n• 800V高压快充普及\n\n📋 报告已生成: 12页完整分析',
|
||
insight: 'Agent 调用6个工具完成数据收集、分析、可视化和报告生成的完整研究流程。'
|
||
},
|
||
{
|
||
id: 'code-run',
|
||
icon: '💻',
|
||
name: '代码执行',
|
||
query: '生成一个1-100的随机数列表，找出其中的质数，并计算平均值',
|
||
llmResponse: '我可以写出代码，但无法实际执行。质数是指只能被1和自身整除的数，比如2,3,5,7...',
|
||
thinking: '用户需要：1) 生成随机数列表 2) 筛选质数 3) 计算平均值。我需要在沙箱中执行Python代码',
|
||
tools: [
|
||
{ name: 'python_executor', params: '{"code": "import random; nums = [random.randint(1,100) for _ in range(20)]; primes = [n for n in nums if all(n%i!=0 for i in range(2,int(n**0.5)+1)) and n>1]; print(f\"随机数: {nums}\"); print(f\"质数: {primes}\"); print(f\"平均值: {sum(nums)/len(nums):.2f}\")"}', result: '随机数: [42, 17, 89, 23, 56, 71, 34, 91, 13, 67...]\n质数: [17, 89, 23, 71, 13, 67, 47, 79]\n平均值: 52.35' }
|
||
],
|
||
agentResponse: '执行结果：\n🎲 生成20个随机数：42, 17, 89, 23, 56, 71...\n🔢 其中质数：17, 89, 23, 71, 13, 67, 47, 79 (共8个)\n📊 所有数平均值：52.35',
|
||
insight: 'Agent 在沙箱中实际执行代码，LLM 只能推理无法验证结果。'
|
||
},
|
||
{
|
||
id: 'data-analysis',
|
||
icon: '📉',
|
||
name: '数据分析',
|
||
query: '分析一下我们公司上季度的销售数据，找出增长最快的产品线和地区',
|
||
llmResponse: '我无法访问您公司的内部销售数据。建议您使用Excel或专业BI工具进行分析，关注同比和环比增长率。',
|
||
thinking: '用户需要分析公司销售数据。我需要：1) 连接数据库获取销售数据 2) 按产品线分组统计 3) 按地区分组统计 4) 计算增长率 5) 生成可视化图表 6) 输出分析报告',
|
||
tools: [
|
||
{ name: 'database_query', params: '{"table": "sales", "period": "Q4_2023", "fields": ["product", "region", "amount", "quantity"]}', result: '获取Q4销售记录: 15,230条, 涵盖12个产品线, 8个地区' },
|
||
{ name: 'data_groupby', params: '{"data": "sales_q4", "group": "product", "agg": ["sum", "count", "avg"]}', result: '产品线统计: 电子产品¥2.1M(+45%), 服装¥1.8M(+12%), 家居¥1.2M(+28%)...' },
|
||
{ name: 'data_groupby', params: '{"data": "sales_q4", "group": "region", "agg": ["sum", "growth"]}', result: '地区统计: 华东¥3.2M(+38%), 华南¥2.1M(+52%), 华北¥1.5M(+15%)...' },
|
||
{ name: 'growth_calculator', params: '{"current": "Q4_2023", "previous": "Q3_2023", "dimensions": ["product", "region"]}', result: '增长最快产品线: 电子产品+45%; 增长最快地区: 华南+52%' },
|
||
{ name: 'chart_generator', params: '{"type": "bar", "data": "product_growth", "title": "产品线增长率对比"}', result: '生成柱状图: 电子产品45%, 家居28%, 服装12%' },
|
||
{ name: 'chart_generator', params: '{"type": "map", "data": "region_sales", "title": "地区销售热力图"}', result: '生成中国地图热力图: 华东、华南为深色高值区' }
|
||
],
|
||
agentResponse: '📊 Q4销售数据分析报告\n\n🏆 增长最快产品线\n1. 电子产品: +45% (¥2.1M)\n2. 家居用品: +28% (¥1.2M)\n3. 服装: +12% (¥1.8M)\n\n🌍 增长最快地区\n1. 华南: +52% (¥2.1M)\n2. 华东: +38% (¥3.2M)\n3. 西南: +22% (¥0.8M)\n\n💡 建议: 加大电子产品投入，重点拓展华南市场',
|
||
insight: 'Agent 调用6个工具完成数据查询、分组统计、增长率计算、可视化的完整分析流程。'
|
||
}
|
||
]
|
||
|
||
const currentScenario = ref('weather')
|
||
const isExecuting = ref(false)
|
||
const executionComplete = ref(false)
|
||
const toolExecuting = ref(-1)
|
||
const toolExecuted = ref(0)
|
||
const showThinking = ref(false)
|
||
const showTools = ref(false)
|
||
const showResponse = ref(false)
|
||
const thinkingExpanded = ref(true)
|
||
const toolsExpanded = ref(true)
|
||
const toolsSection = ref(null)
|
||
const toolRefs = ref([])
|
||
|
||
const currentScenarioData = computed(() => scenarios.find(s => s.id === currentScenario.value))
|
||
|
||
const setToolRef = (el, idx) => {
|
||
if (el) {
|
||
toolRefs.value[idx] = el
|
||
}
|
||
}
|
||
|
||
const selectScenario = (id) => {
|
||
currentScenario.value = id
|
||
reset()
|
||
}
|
||
|
||
const startExecution = async () => {
|
||
isExecuting.value = true
|
||
executionComplete.value = false
|
||
toolExecuting.value = -1
|
||
toolExecuted.value = 0
|
||
showThinking.value = true
|
||
showTools.value = false
|
||
showResponse.value = false
|
||
thinkingExpanded.value = true
|
||
toolsExpanded.value = true
|
||
|
||
// 显示思考
|
||
await wait(800)
|
||
|
||
// 显示工具调用
|
||
showTools.value = true
|
||
toolsExpanded.value = true
|
||
|
||
await nextTick()
|
||
|
||
const tools = currentScenarioData.value.tools
|
||
|
||
for (let i = 0; i < tools.length; i++) {
|
||
toolExecuting.value = i
|
||
|
||
// 滚动到当前执行的工具
|
||
await nextTick()
|
||
const toolEl = toolRefs.value[i]
|
||
if (toolEl && toolsSection.value) {
|
||
toolEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||
}
|
||
|
||
await wait(1000)
|
||
toolExecuted.value = i + 1
|
||
toolExecuting.value = -1
|
||
await wait(300)
|
||
}
|
||
|
||
// 显示最终回复
|
||
await wait(500)
|
||
showResponse.value = true
|
||
isExecuting.value = false
|
||
executionComplete.value = true
|
||
}
|
||
|
||
const reset = () => {
|
||
isExecuting.value = false
|
||
executionComplete.value = false
|
||
toolExecuting.value = -1
|
||
toolExecuted.value = 0
|
||
showThinking.value = false
|
||
showTools.value = false
|
||
showResponse.value = false
|
||
}
|
||
|
||
const toggleThinking = () => {
|
||
thinkingExpanded.value = !thinkingExpanded.value
|
||
}
|
||
|
||
const toggleTools = () => {
|
||
toolsExpanded.value = !toolsExpanded.value
|
||
}
|
||
|
||
const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.agent-chat-demo {
|
||
background: var(--vp-c-bg-soft);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
background: linear-gradient(120deg, var(--vp-c-brand), #9c27b0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 12px;
|
||
color: var(--vp-c-text-2);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 场景标签 */
|
||
.scenario-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tab-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 14px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 20px;
|
||
background: var(--vp-c-bg);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
background: var(--vp-c-bg-alt);
|
||
}
|
||
|
||
.tab-btn.active {
|
||
border-color: var(--vp-c-brand);
|
||
background: var(--vp-c-brand-soft);
|
||
color: var(--vp-c-brand-dark);
|
||
}
|
||
|
||
/* 聊天窗口 */
|
||
.chat-window {
|
||
background: var(--vp-c-bg);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* 消息 */
|
||
.message {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.message.user {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
background: var(--vp-c-bg-soft);
|
||
border: 1px solid var(--vp-c-divider);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar.agent-avatar {
|
||
background: var(--vp-c-brand-soft);
|
||
border-color: var(--vp-c-brand);
|
||
}
|
||
|
||
.bubble {
|
||
max-width: 75%;
|
||
padding: 12px 14px;
|
||
border-radius: 14px;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.message.user .bubble {
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
|
||
.message.llm .bubble {
|
||
background: #f3f4f6;
|
||
border: 1px solid #e5e7eb;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
|
||
.message.agent .bubble {
|
||
background: var(--vp-c-bg-soft);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-bottom-left-radius: 4px;
|
||
max-width: 85%;
|
||
}
|
||
|
||
.llm-label, .agent-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.agent-label {
|
||
color: var(--vp-c-brand);
|
||
}
|
||
|
||
.llm-content {
|
||
color: #6b7280;
|
||
}
|
||
|
||
/* 思考过程 */
|
||
.thinking-section {
|
||
margin-bottom: 10px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.thinking-header, .tools-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background: var(--vp-c-bg);
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.thinking-header:hover, .tools-header:hover {
|
||
background: var(--vp-c-bg-alt);
|
||
}
|
||
|
||
.toggle-icon {
|
||
font-size: 10px;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.thinking-content {
|
||
padding: 10px 12px;
|
||
background: #fef3c7;
|
||
font-size: 12px;
|
||
color: #92400e;
|
||
}
|
||
|
||
.thought-item {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 工具调用 */
|
||
.tools-section {
|
||
margin-bottom: 10px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tools-list {
|
||
padding: 10px;
|
||
background: var(--vp-c-bg);
|
||
}
|
||
|
||
.tool-item {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
background: var(--vp-c-bg-soft);
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.tool-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.tool-item.completed {
|
||
border-color: #86efac;
|
||
background: #f0fdf4;
|
||
}
|
||
|
||
.tool-item.executing {
|
||
border-color: var(--vp-c-brand);
|
||
background: var(--vp-c-brand-soft);
|
||
}
|
||
|
||
.tool-status {
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.spinner {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.tool-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.tool-name {
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.tool-params {
|
||
display: block;
|
||
background: #1e1e1e;
|
||
color: #d4d4d4;
|
||
padding: 6px 8px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
font-family: monospace;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.tool-result {
|
||
font-size: 11px;
|
||
color: #16a34a;
|
||
padding: 6px 8px;
|
||
background: #dcfce7;
|
||
border-radius: 4px;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 最终回复 */
|
||
.final-response {
|
||
margin-top: 10px;
|
||
padding: 12px;
|
||
background: #dcfce7;
|
||
border: 1px solid #86efac;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.response-header {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #166534;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.response-content {
|
||
font-size: 13px;
|
||
color: #166534;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 执行按钮 */
|
||
.execute-btn {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
padding: 10px;
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.execute-btn:hover {
|
||
background: var(--vp-c-brand-dark);
|
||
}
|
||
|
||
.execute-btn.reset {
|
||
background: #6b7280;
|
||
}
|
||
|
||
.execute-btn.reset:hover {
|
||
background: #4b5563;
|
||
}
|
||
|
||
/* 核心区别 */
|
||
.insight-bar {
|
||
margin-top: 16px;
|
||
padding: 12px 16px;
|
||
background: var(--vp-c-brand-soft);
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.insight-label {
|
||
font-weight: 600;
|
||
color: var(--vp-c-brand-dark);
|
||
}
|
||
|
||
.insight-text {
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
</style>
|