fix(eslint): reduce warnings in GitHub Actions deployment
- 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>
This commit is contained in:
sanbuphy
@@ -6,8 +6,12 @@
|
||||
<div class="arch">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 由哪些模块拼起来？</div>
|
||||
<div class="subtitle">点一下模块，看它“负责什么”。</div>
|
||||
<div class="title">
|
||||
Agent 由哪些模块拼起来？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点一下模块，看它“负责什么”。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,21 +28,33 @@
|
||||
</button>
|
||||
|
||||
<div class="pipes">
|
||||
<div class="pipe">用户目标 → 计划 → 工具调用 → 结果 → 再计划…</div>
|
||||
<div class="pipe small">（记忆会贯穿整个过程）</div>
|
||||
<div class="pipe">
|
||||
用户目标 → 计划 → 工具调用 → 结果 → 再计划…
|
||||
</div>
|
||||
<div class="pipe small">
|
||||
（记忆会贯穿整个过程）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">{{ current.icon }} {{ current.name }}</div>
|
||||
<div class="panel-body">{{ current.desc }}</div>
|
||||
<div class="panel-title">
|
||||
{{ current.icon }} {{ current.name }}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ current.desc }}
|
||||
</div>
|
||||
|
||||
<div class="io">
|
||||
<div class="io-title">典型输入</div>
|
||||
<div class="io-title">
|
||||
典型输入
|
||||
</div>
|
||||
<pre><code>{{ current.input }}</code></pre>
|
||||
</div>
|
||||
<div class="io">
|
||||
<div class="io-title">典型输出</div>
|
||||
<div class="io-title">
|
||||
典型输出
|
||||
</div>
|
||||
<pre><code>{{ current.output }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,31 +8,46 @@
|
||||
<div class="risk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 的挑战：没护栏就容易“翻车”</div>
|
||||
<div class="subtitle">打开这些护栏，风险会明显下降。</div>
|
||||
<div class="title">
|
||||
Agent 的挑战：没护栏就容易“翻车”
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
打开这些护栏，风险会明显下降。
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="score"
|
||||
:class="scoreClass"
|
||||
>
|
||||
风险分数：{{ score }}/100
|
||||
</div>
|
||||
<div class="score" :class="scoreClass">风险分数：{{ score }}/100</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="maxSteps" />
|
||||
最大迭代次数（防死循环）</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="budget" /> 预算上限（防烧钱）</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="confirm" /> 危险操作二次确认</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="sandbox" /> 沙箱执行（隔离系统）</label
|
||||
<label class="toggle"><input
|
||||
v-model="maxSteps"
|
||||
type="checkbox"
|
||||
>
|
||||
最大迭代次数（防死循环）</label>
|
||||
<label class="toggle"><input
|
||||
v-model="budget"
|
||||
type="checkbox"
|
||||
> 预算上限（防烧钱）</label>
|
||||
<label class="toggle"><input
|
||||
v-model="confirm"
|
||||
type="checkbox"
|
||||
> 危险操作二次确认</label>
|
||||
<label class="toggle"><input
|
||||
v-model="sandbox"
|
||||
type="checkbox"
|
||||
> 沙箱执行（隔离系统）</label>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">常见风险</div>
|
||||
<div class="k">
|
||||
常见风险
|
||||
</div>
|
||||
<ul>
|
||||
<li>重复尝试 → 死循环</li>
|
||||
<li>乱用工具 → 误删/误发</li>
|
||||
@@ -41,13 +56,23 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">你现在开启了什么？</div>
|
||||
<div class="v">{{ enabledList }}</div>
|
||||
<div class="note">建议：最少也要有“最大步数 + 确认”。</div>
|
||||
<div class="k">
|
||||
你现在开启了什么？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ enabledList }}
|
||||
</div>
|
||||
<div class="note">
|
||||
建议：最少也要有“最大步数 + 确认”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">一句话建议</div>
|
||||
<div class="v">{{ advice }}</div>
|
||||
<div class="k">
|
||||
一句话建议
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ advice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="future">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 的未来：更稳、更强、更协作</div>
|
||||
<div class="subtitle">点一个趋势，看它意味着什么。</div>
|
||||
<div class="title">
|
||||
Agent 的未来：更稳、更强、更协作
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点一个趋势，看它意味着什么。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,16 +27,28 @@
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="p-title">{{ current.label }}</div>
|
||||
<div class="p-body">{{ current.desc }}</div>
|
||||
<div class="p-title">
|
||||
{{ current.label }}
|
||||
</div>
|
||||
<div class="p-body">
|
||||
{{ current.desc }}
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">会带来什么？</div>
|
||||
<div class="v">{{ current.impact }}</div>
|
||||
<div class="k">
|
||||
会带来什么？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.impact }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">你现在能做什么准备？</div>
|
||||
<div class="v">{{ current.prepare }}</div>
|
||||
<div class="k">
|
||||
你现在能做什么准备？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.prepare }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,35 +6,68 @@
|
||||
<div class="levels">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 能力分级（从聊天到协作）</div>
|
||||
<div class="subtitle">拖动看看：等级越高，越像“能独立干活的同事”。</div>
|
||||
<div class="title">
|
||||
Agent 能力分级（从聊天到协作）
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
拖动看看：等级越高，越像“能独立干活的同事”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge">
|
||||
当前：{{ current.name }}
|
||||
</div>
|
||||
<div class="badge">当前：{{ current.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<input type="range" min="0" max="5" step="1" v-model.number="level" />
|
||||
<input
|
||||
v-model.number="level"
|
||||
type="range"
|
||||
min="0"
|
||||
max="5"
|
||||
step="1"
|
||||
>
|
||||
<div class="ticks">
|
||||
<span v-for="n in 6" :key="n">{{ n - 1 }}</span>
|
||||
<span
|
||||
v-for="n in 6"
|
||||
:key="n"
|
||||
>{{ n - 1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">能做什么</div>
|
||||
<div class="k">
|
||||
能做什么
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="x in current.can" :key="x">{{ x }}</li>
|
||||
<li
|
||||
v-for="x in current.can"
|
||||
:key="x"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">容易出的问题</div>
|
||||
<div class="k">
|
||||
容易出的问题
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="x in current.risk" :key="x">{{ x }}</li>
|
||||
<li
|
||||
v-for="x in current.risk"
|
||||
:key="x"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">典型任务</div>
|
||||
<div class="v">{{ current.example }}</div>
|
||||
<div class="k">
|
||||
典型任务
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="memory-demo">
|
||||
<div class="header">
|
||||
<div class="title">💾 Agent 的记忆系统</div>
|
||||
<div class="title">
|
||||
💾 Agent 的记忆系统
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
@@ -10,29 +12,52 @@
|
||||
v-for="action in quickActions"
|
||||
:key="action"
|
||||
class="action-btn"
|
||||
@click="sendMessage(action)"
|
||||
:disabled="isTyping"
|
||||
@click="sendMessage(action)"
|
||||
>
|
||||
{{ action }}
|
||||
</button>
|
||||
<button class="action-btn reset" @click="resetConversation">🔄 重置</button>
|
||||
<button
|
||||
class="action-btn reset"
|
||||
@click="resetConversation"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主区域 -->
|
||||
<div class="main-area">
|
||||
<!-- 对话区 -->
|
||||
<div class="chat-box">
|
||||
<div class="box-header">💬 对话</div>
|
||||
<div class="messages" ref="chatContainer">
|
||||
<div v-for="(msg, i) in messages.slice(-4)" :key="i" class="msg-row" :class="msg.role">
|
||||
<div class="box-header">
|
||||
💬 对话
|
||||
</div>
|
||||
<div
|
||||
ref="chatContainer"
|
||||
class="messages"
|
||||
>
|
||||
<div
|
||||
v-for="(msg, i) in messages.slice(-4)"
|
||||
:key="i"
|
||||
class="msg-row"
|
||||
:class="msg.role"
|
||||
>
|
||||
<span class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</span>
|
||||
<span class="text">{{ msg.content }}</span>
|
||||
</div>
|
||||
<div v-if="isTyping" class="msg-row assistant typing">
|
||||
<div
|
||||
v-if="isTyping"
|
||||
class="msg-row assistant typing"
|
||||
>
|
||||
<span class="avatar">🤖</span>
|
||||
<span class="dots"><span></span><span></span><span></span></span>
|
||||
<span class="dots"><span /><span /><span /></span>
|
||||
</div>
|
||||
<div
|
||||
v-if="messages.length === 0"
|
||||
class="empty-msg"
|
||||
>
|
||||
点击上方按钮开始对话
|
||||
</div>
|
||||
<div v-if="messages.length === 0" class="empty-msg">点击上方按钮开始对话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,11 +69,20 @@
|
||||
<span class="count">{{ shortTermMemory.length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(item, i) in shortTermMemory.slice(-3)" :key="i" class="mem-item">
|
||||
<div
|
||||
v-for="(item, i) in shortTermMemory.slice(-3)"
|
||||
:key="i"
|
||||
class="mem-item"
|
||||
>
|
||||
<span class="role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<span class="content">{{ truncate(item.content, 20) }}</span>
|
||||
</div>
|
||||
<div v-if="shortTermMemory.length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="shortTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,11 +92,20 @@
|
||||
<span class="count">{{ Object.keys(workingMemory).length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(v, k) in workingMemory" :key="k" class="mem-item kv">
|
||||
<div
|
||||
v-for="(v, k) in workingMemory"
|
||||
:key="k"
|
||||
class="mem-item kv"
|
||||
>
|
||||
<span class="key">{{ k }}</span>
|
||||
<span class="value">{{ v }}</span>
|
||||
</div>
|
||||
<div v-if="Object.keys(workingMemory).length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="Object.keys(workingMemory).length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,18 +115,30 @@
|
||||
<span class="count">{{ longTermMemory.length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(item, i) in longTermMemory.slice(-2)" :key="i" class="mem-item">
|
||||
<div
|
||||
v-for="(item, i) in longTermMemory.slice(-2)"
|
||||
:key="i"
|
||||
class="mem-item"
|
||||
>
|
||||
<span class="tag">{{ item.category }}</span>
|
||||
<span class="content">{{ item.content }}</span>
|
||||
</div>
|
||||
<div v-if="longTermMemory.length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="longTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆操作提示 -->
|
||||
<div v-if="lastOp" class="op-bar">
|
||||
<div
|
||||
v-if="lastOp"
|
||||
class="op-bar"
|
||||
>
|
||||
<span>{{ lastOp.icon }}</span>
|
||||
<span>{{ lastOp.text }}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,121 @@
|
||||
<template>
|
||||
<div class="memory-principle">
|
||||
<div class="header">
|
||||
<div class="title">🧠 Agent 记忆系统原理：如何让 AI "记得"你</div>
|
||||
<div class="subtitle">理解短期记忆、工作记忆、长期记忆的协同工作机制</div>
|
||||
<div class="title">
|
||||
🧠 Agent 记忆系统原理：如何让 AI "记得"你
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
理解短期记忆、工作记忆、长期记忆的协同工作机制
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆类型概览 -->
|
||||
<div class="memory-overview">
|
||||
<div class="overview-title">📊 三层记忆架构</div>
|
||||
<div class="overview-title">
|
||||
📊 三层记忆架构
|
||||
</div>
|
||||
<div class="memory-cards">
|
||||
<div class="memory-card short-term" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div class="card-icon">⏱️</div>
|
||||
<div class="card-name">短期记忆</div>
|
||||
<div class="card-desc">当前对话上下文</div>
|
||||
<div class="card-lifetime">⚡ 会话级</div>
|
||||
<div
|
||||
class="memory-card short-term"
|
||||
:class="{ active: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="card-name">
|
||||
短期记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
当前对话上下文
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
⚡ 会话级
|
||||
</div>
|
||||
</div>
|
||||
<div class="memory-card working" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div class="card-icon">📝</div>
|
||||
<div class="card-name">工作记忆</div>
|
||||
<div class="card-desc">任务相关变量</div>
|
||||
<div class="card-lifetime">🔄 任务级</div>
|
||||
<div
|
||||
class="memory-card working"
|
||||
:class="{ active: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="card-name">
|
||||
工作记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
任务相关变量
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
🔄 任务级
|
||||
</div>
|
||||
</div>
|
||||
<div class="memory-card long-term" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div class="card-icon">💾</div>
|
||||
<div class="card-name">长期记忆</div>
|
||||
<div class="card-desc">用户偏好与知识</div>
|
||||
<div class="card-lifetime">♾️ 持久化</div>
|
||||
<div
|
||||
class="memory-card long-term"
|
||||
:class="{ active: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="card-name">
|
||||
长期记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
用户偏好与知识
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
♾️ 持久化
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交互演示区 -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">🎮 交互演示：观察记忆如何工作</div>
|
||||
<div class="demo-title">
|
||||
🎮 交互演示：观察记忆如何工作
|
||||
</div>
|
||||
|
||||
<!-- 对话区 -->
|
||||
<div class="chat-area">
|
||||
<div class="chat-header">
|
||||
<span>💬 对话窗口</span>
|
||||
<button class="reset-btn" @click="resetDemo">🔄 重置</button>
|
||||
<button
|
||||
class="reset-btn"
|
||||
@click="resetDemo"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="messages" ref="messageContainer">
|
||||
<div v-for="(msg, idx) in messages" :key="idx" class="message" :class="msg.role">
|
||||
<div class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
|
||||
<div
|
||||
ref="messageContainer"
|
||||
class="messages"
|
||||
>
|
||||
<div
|
||||
v-for="(msg, idx) in messages"
|
||||
:key="idx"
|
||||
class="message"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="avatar">
|
||||
{{ msg.role === 'user' ? '👤' : '🤖' }}
|
||||
</div>
|
||||
<div class="bubble">
|
||||
<div class="msg-text">{{ msg.text }}</div>
|
||||
<div v-if="msg.memoryOps && msg.memoryOps.length" class="memory-ops">
|
||||
<div v-for="(op, i) in msg.memoryOps" :key="i" class="memory-op" :class="op.type">
|
||||
<div class="msg-text">
|
||||
{{ msg.text }}
|
||||
</div>
|
||||
<div
|
||||
v-if="msg.memoryOps && msg.memoryOps.length"
|
||||
class="memory-ops"
|
||||
>
|
||||
<div
|
||||
v-for="(op, i) in msg.memoryOps"
|
||||
:key="i"
|
||||
class="memory-op"
|
||||
:class="op.type"
|
||||
>
|
||||
<span class="op-icon">{{ op.icon }}</span>
|
||||
<span class="op-text">{{ op.text }}</span>
|
||||
</div>
|
||||
@@ -71,115 +140,214 @@
|
||||
|
||||
<!-- 记忆状态面板 -->
|
||||
<div class="memory-panels">
|
||||
<div class="panel-title">📂 记忆状态实时监控</div>
|
||||
<div class="panel-title">
|
||||
📂 记忆状态实时监控
|
||||
</div>
|
||||
|
||||
<!-- 短期记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">⏱️</span>
|
||||
<span class="panel-name">短期记忆</span>
|
||||
<span class="panel-count">{{ shortTermMemory.length }} 条</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="shortTermMemory.length === 0" class="empty">暂无对话记录</div>
|
||||
<div v-for="(item, idx) in shortTermMemory.slice(-5)" :key="idx" class="memory-item">
|
||||
<span class="item-role" :class="item.role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<div
|
||||
v-if="shortTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无对话记录
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, idx) in shortTermMemory.slice(-5)"
|
||||
:key="idx"
|
||||
class="memory-item"
|
||||
>
|
||||
<span
|
||||
class="item-role"
|
||||
:class="item.role"
|
||||
>{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<span class="item-text">{{ truncate(item.content, 25) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 保存最近的对话轮次，超出上下文窗口会被遗忘</div>
|
||||
<div class="panel-footer">
|
||||
💡 保存最近的对话轮次，超出上下文窗口会被遗忘
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">📝</span>
|
||||
<span class="panel-name">工作记忆</span>
|
||||
<span class="panel-count">{{ Object.keys(workingMemory).length }} 个变量</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="Object.keys(workingMemory).length === 0" class="empty">暂无任务变量</div>
|
||||
<div v-for="(value, key) in workingMemory" :key="key" class="memory-item working-item">
|
||||
<div
|
||||
v-if="Object.keys(workingMemory).length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无任务变量
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, key) in workingMemory"
|
||||
:key="key"
|
||||
class="memory-item working-item"
|
||||
>
|
||||
<span class="item-key">{{ key }}:</span>
|
||||
<span class="item-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 临时存储任务相关变量，任务结束后清除</div>
|
||||
<div class="panel-footer">
|
||||
💡 临时存储任务相关变量，任务结束后清除
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 长期记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">💾</span>
|
||||
<span class="panel-name">长期记忆</span>
|
||||
<span class="panel-count">{{ longTermMemory.length }} 条知识</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="longTermMemory.length === 0" class="empty">暂无持久化知识</div>
|
||||
<div v-for="(item, idx) in longTermMemory" :key="idx" class="memory-item long-item">
|
||||
<span class="item-type" :class="item.type">{{ item.type }}</span>
|
||||
<div
|
||||
v-if="longTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无持久化知识
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, idx) in longTermMemory"
|
||||
:key="idx"
|
||||
class="memory-item long-item"
|
||||
>
|
||||
<span
|
||||
class="item-type"
|
||||
:class="item.type"
|
||||
>{{ item.type }}</span>
|
||||
<span class="item-content">{{ item.key }} = {{ truncate(item.value, 20) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 跨会话持久保存，需要显式写入</div>
|
||||
<div class="panel-footer">
|
||||
💡 跨会话持久保存，需要显式写入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆流转示意 -->
|
||||
<div class="memory-flow">
|
||||
<div class="flow-title">🔄 记忆流转机制</div>
|
||||
<div class="flow-title">
|
||||
🔄 记忆流转机制
|
||||
</div>
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-step">
|
||||
<div class="step-box user-input">
|
||||
<div class="step-icon">👤</div>
|
||||
<div class="step-text">用户输入</div>
|
||||
<div class="step-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="step-text">
|
||||
用户输入
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-box">
|
||||
<div class="step-icon">⏱️</div>
|
||||
<div class="step-text">短期记忆</div>
|
||||
<div class="step-desc">自动记录对话</div>
|
||||
<div class="step-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="step-text">
|
||||
短期记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
自动记录对话
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-box">
|
||||
<div class="step-icon">🧠</div>
|
||||
<div class="step-text">LLM 处理</div>
|
||||
<div class="step-desc">理解+决策</div>
|
||||
<div class="step-icon">
|
||||
🧠
|
||||
</div>
|
||||
<div class="step-text">
|
||||
LLM 处理
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
理解+决策
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-branch">
|
||||
<div class="branch-option">
|
||||
<div class="branch-arrow">⬇️</div>
|
||||
<div class="branch-arrow">
|
||||
⬇️
|
||||
</div>
|
||||
<div class="step-box small">
|
||||
<div class="step-icon">📝</div>
|
||||
<div class="step-text">工作记忆</div>
|
||||
<div class="step-desc">临时变量</div>
|
||||
<div class="step-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="step-text">
|
||||
工作记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
临时变量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="branch-option">
|
||||
<div class="branch-arrow">⬇️</div>
|
||||
<div class="branch-arrow">
|
||||
⬇️
|
||||
</div>
|
||||
<div class="step-box small">
|
||||
<div class="step-icon">💾</div>
|
||||
<div class="step-text">长期记忆</div>
|
||||
<div class="step-desc">持久化存储</div>
|
||||
<div class="step-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="step-text">
|
||||
长期记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
持久化存储
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-arrow">➡️</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-box agent-output">
|
||||
<div class="step-icon">🤖</div>
|
||||
<div class="step-text">Agent 回复</div>
|
||||
<div class="step-icon">
|
||||
🤖
|
||||
</div>
|
||||
<div class="step-text">
|
||||
Agent 回复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,9 +355,15 @@
|
||||
|
||||
<!-- 核心机制解释 -->
|
||||
<div class="mechanism-section">
|
||||
<div class="mechanism-title">⚙️ 核心机制详解</div>
|
||||
<div class="mechanism-title">
|
||||
⚙️ 核心机制详解
|
||||
</div>
|
||||
<div class="mechanism-grid">
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">⏱️</span>
|
||||
<span class="card-title">短期记忆 (Short-term)</span>
|
||||
@@ -217,7 +391,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📝</span>
|
||||
<span class="card-title">工作记忆 (Working)</span>
|
||||
@@ -245,7 +423,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">💾</span>
|
||||
<span class="card-title">长期记忆 (Long-term)</span>
|
||||
@@ -277,34 +459,60 @@
|
||||
|
||||
<!-- 最佳实践 -->
|
||||
<div class="best-practices">
|
||||
<div class="practices-title">💡 记忆系统最佳实践</div>
|
||||
<div class="practices-title">
|
||||
💡 记忆系统最佳实践
|
||||
</div>
|
||||
<div class="practices-list">
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">1️⃣</div>
|
||||
<div class="practice-icon">
|
||||
1️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">短期记忆优化</div>
|
||||
<div class="practice-desc">定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩</div>
|
||||
<div class="practice-title">
|
||||
短期记忆优化
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">2️⃣</div>
|
||||
<div class="practice-icon">
|
||||
2️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">工作记忆管理</div>
|
||||
<div class="practice-desc">任务开始时初始化，结束时清理；避免存储大量中间结果</div>
|
||||
<div class="practice-title">
|
||||
工作记忆管理
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
任务开始时初始化，结束时清理；避免存储大量中间结果
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">3️⃣</div>
|
||||
<div class="practice-icon">
|
||||
3️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">长期记忆构建</div>
|
||||
<div class="practice-desc">定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好</div>
|
||||
<div class="practice-title">
|
||||
长期记忆构建
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">4️⃣</div>
|
||||
<div class="practice-icon">
|
||||
4️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">记忆一致性</div>
|
||||
<div class="practice-desc">长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆</div>
|
||||
<div class="practice-title">
|
||||
记忆一致性
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+193
-55
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="multi-tool-principle">
|
||||
<div class="header">
|
||||
<div class="title">🔧 多工具调用原理：Agent 如何"串联"工具完成任务</div>
|
||||
<div class="subtitle">理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制</div>
|
||||
<div class="title">
|
||||
🔧 多工具调用原理：Agent 如何"串联"工具完成任务
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -20,24 +24,40 @@
|
||||
|
||||
<!-- 用户意图 -->
|
||||
<div class="intent-box">
|
||||
<div class="intent-label">👤 用户意图</div>
|
||||
<div class="intent-text">{{ currentData.intent }}</div>
|
||||
<div class="intent-label">
|
||||
👤 用户意图
|
||||
</div>
|
||||
<div class="intent-text">
|
||||
{{ currentData.intent }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 执行流程可视化 -->
|
||||
<div class="execution-flow">
|
||||
<div class="flow-title">🔄 工具调用执行流程</div>
|
||||
<div class="flow-title">
|
||||
🔄 工具调用执行流程
|
||||
</div>
|
||||
|
||||
<!-- 思考阶段 -->
|
||||
<div class="phase thinking-phase" :class="{ active: currentPhase >= 0 }">
|
||||
<div
|
||||
class="phase thinking-phase"
|
||||
:class="{ active: currentPhase >= 0 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">🧠</span>
|
||||
<span class="phase-name">思考规划</span>
|
||||
<span class="phase-status">{{ currentPhase > 0 ? '✅ 完成' : currentPhase === 0 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 0" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 0"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="thought-steps">
|
||||
<div v-for="(step, idx) in currentData.planningSteps" :key="idx" class="thought-step">
|
||||
<div
|
||||
v-for="(step, idx) in currentData.planningSteps"
|
||||
:key="idx"
|
||||
class="thought-step"
|
||||
>
|
||||
<span class="step-num">{{ idx + 1 }}</span>
|
||||
<span class="step-text">{{ step }}</span>
|
||||
</div>
|
||||
@@ -46,13 +66,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 工具执行阶段 -->
|
||||
<div class="phase tools-phase" :class="{ active: currentPhase >= 1 }">
|
||||
<div
|
||||
class="phase tools-phase"
|
||||
:class="{ active: currentPhase >= 1 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">🔧</span>
|
||||
<span class="phase-name">工具执行</span>
|
||||
<span class="phase-status">{{ currentPhase > 1 ? '✅ 完成' : currentPhase === 1 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 1" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 1"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="tools-chain">
|
||||
<div
|
||||
v-for="(tool, idx) in currentData.tools"
|
||||
@@ -64,28 +90,53 @@
|
||||
pending: currentTool < idx
|
||||
}"
|
||||
>
|
||||
<div class="node-connector" v-if="idx > 0">
|
||||
<div class="connector-line" :class="{ active: currentTool >= idx }"></div>
|
||||
<div
|
||||
v-if="idx > 0"
|
||||
class="node-connector"
|
||||
>
|
||||
<div
|
||||
class="connector-line"
|
||||
:class="{ active: currentTool >= idx }"
|
||||
/>
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<div class="node-icon">{{ tool.icon }}</div>
|
||||
<div class="node-name">{{ tool.name }}</div>
|
||||
<div class="node-icon">
|
||||
{{ tool.icon }}
|
||||
</div>
|
||||
<div class="node-name">
|
||||
{{ tool.name }}
|
||||
</div>
|
||||
<div class="node-status">
|
||||
<span v-if="currentTool > idx" class="status-done">✓</span>
|
||||
<span v-else-if="currentTool === idx" class="status-running">
|
||||
<span class="pulse"></span>
|
||||
<span
|
||||
v-if="currentTool > idx"
|
||||
class="status-done"
|
||||
>✓</span>
|
||||
<span
|
||||
v-else-if="currentTool === idx"
|
||||
class="status-running"
|
||||
>
|
||||
<span class="pulse" />
|
||||
</span>
|
||||
<span v-else class="status-wait">○</span>
|
||||
<span
|
||||
v-else
|
||||
class="status-wait"
|
||||
>○</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工具详情 -->
|
||||
<div v-if="currentTool >= idx" class="tool-detail-popup">
|
||||
<div
|
||||
v-if="currentTool >= idx"
|
||||
class="tool-detail-popup"
|
||||
>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">输入:</span>
|
||||
<code class="detail-code">{{ tool.input }}</code>
|
||||
</div>
|
||||
<div v-if="currentTool > idx" class="detail-row">
|
||||
<div
|
||||
v-if="currentTool > idx"
|
||||
class="detail-row"
|
||||
>
|
||||
<span class="detail-label">输出:</span>
|
||||
<span class="detail-output">{{ truncate(tool.output, 50) }}</span>
|
||||
</div>
|
||||
@@ -94,34 +145,57 @@
|
||||
</div>
|
||||
|
||||
<!-- 数据流转示意 -->
|
||||
<div v-if="currentPhase === 1" class="data-flow-hint">
|
||||
<div class="flow-arrow">⬇️ 数据在工具间流转，上一步的输出成为下一步的输入</div>
|
||||
<div
|
||||
v-if="currentPhase === 1"
|
||||
class="data-flow-hint"
|
||||
>
|
||||
<div class="flow-arrow">
|
||||
⬇️ 数据在工具间流转，上一步的输出成为下一步的输入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果整合阶段 -->
|
||||
<div class="phase result-phase" :class="{ active: currentPhase >= 2 }">
|
||||
<div
|
||||
class="phase result-phase"
|
||||
:class="{ active: currentPhase >= 2 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">📝</span>
|
||||
<span class="phase-name">结果整合</span>
|
||||
<span class="phase-status">{{ currentPhase > 2 ? '✅ 完成' : currentPhase === 2 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 2" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 2"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="integration-steps">
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 0 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 0 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 0 ? '✓' : '○' }}</span>
|
||||
<span>收集所有工具输出</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 1 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 1 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 1 ? '✓' : '○' }}</span>
|
||||
<span>去重与验证</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 2 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 2 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 2 ? '✓' : '○' }}</span>
|
||||
<span>结构化整理</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 3 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 3 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 3 ? '✓' : '○' }}</span>
|
||||
<span>生成自然语言回复</span>
|
||||
</div>
|
||||
@@ -130,15 +204,23 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终输出 -->
|
||||
<div class="phase output-phase" :class="{ active: currentPhase >= 3 }">
|
||||
<div
|
||||
class="phase output-phase"
|
||||
:class="{ active: currentPhase >= 3 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">💬</span>
|
||||
<span class="phase-name">最终输出</span>
|
||||
<span class="phase-status">{{ currentPhase >= 3 ? '✅ 完成' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 3" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 3"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="final-output">
|
||||
<div class="output-bubble">{{ currentData.finalOutput }}</div>
|
||||
<div class="output-bubble">
|
||||
{{ currentData.finalOutput }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,57 +228,113 @@
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<button v-if="!isRunning && currentPhase === -1" class="control-btn primary" @click="startDemo">
|
||||
<button
|
||||
v-if="!isRunning && currentPhase === -1"
|
||||
class="control-btn primary"
|
||||
@click="startDemo"
|
||||
>
|
||||
▶ 开始演示
|
||||
</button>
|
||||
<button v-else-if="isRunning" class="control-btn" disabled>
|
||||
<button
|
||||
v-else-if="isRunning"
|
||||
class="control-btn"
|
||||
disabled
|
||||
>
|
||||
⏳ 执行中...
|
||||
</button>
|
||||
<button v-else class="control-btn secondary" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="control-btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重新演示
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 原理说明 -->
|
||||
<div class="principle-explanation">
|
||||
<div class="explanation-title">📚 核心原理</div>
|
||||
<div class="explanation-title">
|
||||
📚 核心原理
|
||||
</div>
|
||||
<div class="explanation-grid">
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🧩</div>
|
||||
<div class="card-title">任务分解</div>
|
||||
<div class="card-desc">Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用</div>
|
||||
<div class="card-icon">
|
||||
🧩
|
||||
</div>
|
||||
<div class="card-title">
|
||||
任务分解
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🔗</div>
|
||||
<div class="card-title">链式调用</div>
|
||||
<div class="card-desc">工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入</div>
|
||||
<div class="card-icon">
|
||||
🔗
|
||||
</div>
|
||||
<div class="card-title">
|
||||
链式调用
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🔄</div>
|
||||
<div class="card-title">动态调整</div>
|
||||
<div class="card-desc">根据中间结果，Agent 可以动态决定下一步调用哪个工具</div>
|
||||
<div class="card-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="card-title">
|
||||
动态调整
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
根据中间结果，Agent 可以动态决定下一步调用哪个工具
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🎯</div>
|
||||
<div class="card-title">结果整合</div>
|
||||
<div class="card-desc">将所有工具输出整合为连贯、有用的最终回复</div>
|
||||
<div class="card-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="card-title">
|
||||
结果整合
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
将所有工具输出整合为连贯、有用的最终回复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与 LLM 对比 -->
|
||||
<div class="comparison-section">
|
||||
<div class="comparison-title">⚖️ 为什么需要多工具调用？</div>
|
||||
<div class="comparison-title">
|
||||
⚖️ 为什么需要多工具调用？
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="comparison-row header">
|
||||
<div class="col scenario">场景</div>
|
||||
<div class="col llm">普通 LLM</div>
|
||||
<div class="col agent">Agent + 多工具</div>
|
||||
<div class="col scenario">
|
||||
场景
|
||||
</div>
|
||||
<div class="col llm">
|
||||
普通 LLM
|
||||
</div>
|
||||
<div class="col agent">
|
||||
Agent + 多工具
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, idx) in comparisons" :key="idx" class="comparison-row">
|
||||
<div class="col scenario">{{ item.scenario }}</div>
|
||||
<div class="col llm">{{ item.llm }}</div>
|
||||
<div class="col agent">{{ item.agent }}</div>
|
||||
<div
|
||||
v-for="(item, idx) in comparisons"
|
||||
:key="idx"
|
||||
class="comparison-row"
|
||||
>
|
||||
<div class="col scenario">
|
||||
{{ item.scenario }}
|
||||
</div>
|
||||
<div class="col llm">
|
||||
{{ item.llm }}
|
||||
</div>
|
||||
<div class="col agent">
|
||||
{{ item.agent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="planning-demo">
|
||||
<div class="header">
|
||||
<div class="title">📋 Agent 的规划能力</div>
|
||||
<div class="title">
|
||||
📋 Agent 的规划能力
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务选择 -->
|
||||
@@ -14,7 +16,10 @@
|
||||
>
|
||||
<span>{{ task.icon }}</span>
|
||||
<span>{{ task.name }}</span>
|
||||
<span class="complexity" :class="task.complexity">{{ task.complexityLabel }}</span>
|
||||
<span
|
||||
class="complexity"
|
||||
:class="task.complexity"
|
||||
>{{ task.complexityLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -34,9 +39,16 @@
|
||||
class="step-node"
|
||||
:class="{ completed: stepStatus[index] === 'completed', running: stepStatus[index] === 'running' }"
|
||||
>
|
||||
<div class="node-circle">{{ index + 1 }}</div>
|
||||
<div class="node-name">{{ step.name }}</div>
|
||||
<div v-if="index < currentTaskData.steps.length - 1" class="node-line"></div>
|
||||
<div class="node-circle">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="node-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index < currentTaskData.steps.length - 1"
|
||||
class="node-line"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,46 +57,91 @@
|
||||
<div class="log-box">
|
||||
<div class="box-header">
|
||||
<span>📝 执行日志</span>
|
||||
<span v-if="executionStatus === 'running'" class="status running">执行中</span>
|
||||
<span v-else-if="executionStatus === 'completed'" class="status completed">已完成</span>
|
||||
<span
|
||||
v-if="executionStatus === 'running'"
|
||||
class="status running"
|
||||
>执行中</span>
|
||||
<span
|
||||
v-else-if="executionStatus === 'completed'"
|
||||
class="status completed"
|
||||
>已完成</span>
|
||||
</div>
|
||||
<div class="log-content">
|
||||
<div v-if="logs.length === 0" class="empty">点击"开始执行"查看过程</div>
|
||||
<div v-for="(log, i) in logs.slice(-4)" :key="i" class="log-line" :class="log.type">
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
点击"开始执行"查看过程
|
||||
</div>
|
||||
<div
|
||||
v-for="(log, i) in logs.slice(-4)"
|
||||
:key="i"
|
||||
class="log-line"
|
||||
:class="log.type"
|
||||
>
|
||||
<span class="time">{{ log.time }}</span>
|
||||
<span class="icon">{{ log.icon }}</span>
|
||||
<span class="msg" v-html="log.message"></span>
|
||||
<span
|
||||
class="msg"
|
||||
v-html="log.message"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentThought" class="thought-box">
|
||||
<div class="box-header">🧠 正在思考</div>
|
||||
<div class="thought-content">{{ currentThought }}</div>
|
||||
<div
|
||||
v-if="currentThought"
|
||||
class="thought-box"
|
||||
>
|
||||
<div class="box-header">
|
||||
🧠 正在思考
|
||||
</div>
|
||||
<div class="thought-content">
|
||||
{{ currentThought }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制栏 -->
|
||||
<div class="control-bar">
|
||||
<button v-if="executionStatus === 'idle'" class="ctrl-btn primary" @click="startExecution">
|
||||
<button
|
||||
v-if="executionStatus === 'idle'"
|
||||
class="ctrl-btn primary"
|
||||
@click="startExecution"
|
||||
>
|
||||
▶ 开始执行
|
||||
</button>
|
||||
<button v-else-if="executionStatus === 'running'" class="ctrl-btn" disabled>
|
||||
<button
|
||||
v-else-if="executionStatus === 'running'"
|
||||
class="ctrl-btn"
|
||||
disabled
|
||||
>
|
||||
⏳ 执行中...
|
||||
</button>
|
||||
<button v-else class="ctrl-btn" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="ctrl-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
|
||||
<div v-if="executionStatus === 'completed'" class="stats">
|
||||
<div
|
||||
v-if="executionStatus === 'completed'"
|
||||
class="stats"
|
||||
>
|
||||
<span class="stat">{{ currentTaskData.steps.length }} 步骤</span>
|
||||
<span class="stat">{{ executionTime }}s</span>
|
||||
<span class="stat">{{ toolCalls }} 调用</span>
|
||||
</div>
|
||||
|
||||
<div class="step-dots">
|
||||
<span v-for="n in currentTaskData.steps.length" :key="n" :class="['dot', { active: stepStatus[n-1] === 'completed' }]"></span>
|
||||
<span
|
||||
v-for="n in currentTaskData.steps.length"
|
||||
:key="n"
|
||||
:class="['dot', { active: stepStatus[n-1] === 'completed' }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="agent-chat-demo">
|
||||
<div class="header">
|
||||
<div class="title">🤖 Agent 初体验：从"能说"到"能做"</div>
|
||||
<div class="subtitle">体验 Agent 如何自动调用工具完成任务</div>
|
||||
<div class="title">
|
||||
🤖 Agent 初体验：从"能说"到"能做"
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
体验 Agent 如何自动调用工具完成任务
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -22,43 +26,78 @@
|
||||
<div class="chat-window">
|
||||
<!-- 用户消息 -->
|
||||
<div class="message user">
|
||||
<div class="avatar">👤</div>
|
||||
<div class="bubble">{{ currentScenarioData.query }}</div>
|
||||
<div class="avatar">
|
||||
👤
|
||||
</div>
|
||||
<div class="bubble">
|
||||
{{ currentScenarioData.query }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LLM 回复（对比） -->
|
||||
<div class="message llm">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="avatar">
|
||||
🤖
|
||||
</div>
|
||||
<div class="bubble llm-bubble">
|
||||
<div class="llm-label">普通 LLM</div>
|
||||
<div class="llm-content">{{ currentScenarioData.llmResponse }}</div>
|
||||
<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="avatar agent-avatar">
|
||||
🦾
|
||||
</div>
|
||||
<div class="bubble agent-bubble">
|
||||
<div class="agent-label">Agent 智能体</div>
|
||||
<div class="agent-label">
|
||||
Agent 智能体
|
||||
</div>
|
||||
|
||||
<!-- 思考过程（可折叠） -->
|
||||
<div v-if="showThinking" class="thinking-section">
|
||||
<div class="thinking-header" @click="toggleThinking">
|
||||
<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
|
||||
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">
|
||||
<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-if="toolsExpanded"
|
||||
class="tools-list"
|
||||
>
|
||||
<div
|
||||
v-for="(tool, idx) in currentScenarioData.tools"
|
||||
:key="idx"
|
||||
@@ -68,14 +107,27 @@
|
||||
>
|
||||
<div class="tool-status">
|
||||
<span v-if="toolExecuted > idx">✅</span>
|
||||
<span v-else-if="toolExecuting === idx" class="spinner">⏳</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">
|
||||
<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
|
||||
v-if="toolExecuted > idx"
|
||||
class="tool-result"
|
||||
>
|
||||
{{ tool.result }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,16 +135,31 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终回复 -->
|
||||
<div v-if="showResponse" class="final-response">
|
||||
<div class="response-header">💬 最终回复</div>
|
||||
<div class="response-content">{{ currentScenarioData.agentResponse }}</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">
|
||||
<button
|
||||
v-if="!isExecuting && !executionComplete"
|
||||
class="execute-btn"
|
||||
@click="startExecution"
|
||||
>
|
||||
▶ 让 Agent 执行
|
||||
</button>
|
||||
<button v-else-if="executionComplete" class="execute-btn reset" @click="reset">
|
||||
<button
|
||||
v-else-if="executionComplete"
|
||||
class="execute-btn reset"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置对话
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -6,21 +6,25 @@
|
||||
<div class="flow">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">任务回放：Agent 怎么一步步做完？</div>
|
||||
<div class="subtitle">点步骤，看“工具调用”和“中间结果”。</div>
|
||||
<div class="title">
|
||||
任务回放：Agent 怎么一步步做完？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点步骤，看“工具调用”和“中间结果”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
class="btn"
|
||||
@click="step = Math.max(0, step - 1)"
|
||||
:disabled="step === 0"
|
||||
@click="step = Math.max(0, step - 1)"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="step = Math.min(steps.length - 1, step + 1)"
|
||||
:disabled="step === steps.length - 1"
|
||||
@click="step = Math.min(steps.length - 1, step + 1)"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
@@ -41,15 +45,23 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<div class="panel-title">当前步骤</div>
|
||||
<div class="panel-body">{{ steps[step].desc }}</div>
|
||||
<div class="panel-title">
|
||||
当前步骤
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ steps[step].desc }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">工具调用（示意）</div>
|
||||
<div class="panel-title">
|
||||
工具调用（示意）
|
||||
</div>
|
||||
<pre><code>{{ steps[step].tool }}</code></pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">结果（示意）</div>
|
||||
<div class="panel-title">
|
||||
结果（示意）
|
||||
</div>
|
||||
<pre><code>{{ steps[step].result }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="tool-use-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔧 揭秘：Agent 如何调用工具？</div>
|
||||
<div class="title">
|
||||
🔧 揭秘：Agent 如何调用工具？
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -24,35 +26,73 @@
|
||||
</div>
|
||||
|
||||
<!-- 横向流程 -->
|
||||
<div ref="flowRowRef" class="flow-row">
|
||||
<div
|
||||
ref="flowRowRef"
|
||||
class="flow-row"
|
||||
>
|
||||
<!-- 步骤1: 理解 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 1 }">
|
||||
<div class="card-num">1</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
1
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">分析需求</div>
|
||||
<div v-if="currentStep >= 1" class="card-content">
|
||||
<div class="card-title">
|
||||
分析需求
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 1"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="intent-box">
|
||||
<div class="intent-label">用户想要：</div>
|
||||
<div class="intent-value">{{ currentData.intent.type }}</div>
|
||||
<div class="intent-label">
|
||||
用户想要：
|
||||
</div>
|
||||
<div class="intent-value">
|
||||
{{ currentData.intent.type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="extract-box">
|
||||
<div class="extract-label">提取信息：</div>
|
||||
<div class="extract-label">
|
||||
提取信息：
|
||||
</div>
|
||||
<div class="extract-tags">
|
||||
<span v-for="(e, i) in currentData.intent.entities" :key="i" class="entity">{{ e }}</span>
|
||||
<span
|
||||
v-for="(e, i) in currentData.intent.entities"
|
||||
:key="i"
|
||||
class="entity"
|
||||
>{{ e }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 2 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤2: 选工具 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 2 }">
|
||||
<div class="card-num">2</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
2
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">选择工具</div>
|
||||
<div v-if="currentStep >= 2" class="card-content">
|
||||
<div class="card-title">
|
||||
选择工具
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 2"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="tool-list">
|
||||
<div
|
||||
v-for="tool in currentData.availableTools.slice(0, 2)"
|
||||
@@ -62,34 +102,67 @@
|
||||
>
|
||||
<span>{{ tool.icon }}</span>
|
||||
<span class="tool-name">{{ tool.name }}</span>
|
||||
<span v-if="tool.selected" class="check">✓</span>
|
||||
<span
|
||||
v-if="tool.selected"
|
||||
class="check"
|
||||
>✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 3 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤3: 构造参数 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 3 }">
|
||||
<div class="card-num">3</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
3
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">构造参数</div>
|
||||
<div v-if="currentStep >= 3" class="card-content">
|
||||
<div class="card-title">
|
||||
构造参数
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 3"
|
||||
class="card-content"
|
||||
>
|
||||
<code class="params-code">{{ JSON.stringify(currentData.finalParams.params) }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 4 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤4: 执行 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 4 }">
|
||||
<div class="card-num">4</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
4
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">执行返回</div>
|
||||
<div v-if="currentStep >= 4" class="card-content">
|
||||
<div class="card-title">
|
||||
执行返回
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 4"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="exec-flow">
|
||||
<span class="from">Agent</span>
|
||||
<span class="arrow">→</span>
|
||||
@@ -103,25 +176,44 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终结果 -->
|
||||
<div v-if="currentStep >= 4" class="final-result">
|
||||
<div
|
||||
v-if="currentStep >= 4"
|
||||
class="final-result"
|
||||
>
|
||||
<span class="result-label">💬 回复：</span>
|
||||
<span class="result-text">{{ currentData.finalResponse }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 控制栏 -->
|
||||
<div class="control-bar">
|
||||
<button v-if="currentStep === 0" class="ctrl-btn primary" @click="nextStep">
|
||||
<button
|
||||
v-if="currentStep === 0"
|
||||
class="ctrl-btn primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
▶ 开始演示
|
||||
</button>
|
||||
<button v-else-if="currentStep < 4" class="ctrl-btn primary" @click="nextStep">
|
||||
<button
|
||||
v-else-if="currentStep < 4"
|
||||
class="ctrl-btn primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
下一步 →
|
||||
</button>
|
||||
<button v-else class="ctrl-btn" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="ctrl-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
|
||||
<div class="step-dots">
|
||||
<span v-for="n in 4" :key="n" :class="['dot', { active: currentStep >= n }]"></span>
|
||||
<span
|
||||
v-for="n in 4"
|
||||
:key="n"
|
||||
:class="['dot', { active: currentStep >= n }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,12 +8,24 @@
|
||||
<div class="workflow">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">先玩一下：Agent 不是“聊天”，是“循环行动”</div>
|
||||
<div class="subtitle">它会反复：观察 → 计划 → 用工具 → 检查结果。</div>
|
||||
<div class="title">
|
||||
先玩一下：Agent 不是“聊天”，是“循环行动”
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
它会反复：观察 → 计划 → 用工具 → 检查结果。
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button class="btn primary" @click="nextRound">
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="nextRound"
|
||||
>
|
||||
下一轮 ({{ round }}/3)
|
||||
</button>
|
||||
</div>
|
||||
@@ -33,19 +45,27 @@
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-title">任务</div>
|
||||
<div class="panel-title">
|
||||
任务
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
帮我找 3 篇 “Agent” 入门文章，并输出：标题 + 一句话总结。
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">这一轮发生了什么？</div>
|
||||
<div class="panel-body">{{ detail }}</div>
|
||||
<div class="panel-title">
|
||||
这一轮发生了什么？
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ detail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log">
|
||||
<div class="log-title">Agent 运行日志（示意）</div>
|
||||
<div class="log-title">
|
||||
Agent 运行日志（示意）
|
||||
</div>
|
||||
<pre><code>{{ logText }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="cmp">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">主流框架对比（先看“适配度”）</div>
|
||||
<div class="subtitle">先选你的关注点，再看推荐。</div>
|
||||
<div class="title">
|
||||
主流框架对比（先看“适配度”）
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
先选你的关注点，再看推荐。
|
||||
</div>
|
||||
</div>
|
||||
<div class="focus">
|
||||
<button
|
||||
@@ -34,17 +38,25 @@
|
||||
:key="fw.name"
|
||||
:class="['row', { best: fw.name === best }]"
|
||||
>
|
||||
<div class="name">{{ fw.name }}</div>
|
||||
<div class="name">
|
||||
{{ fw.name }}
|
||||
</div>
|
||||
<div>{{ fw.learn }}</div>
|
||||
<div>{{ fw.control }}</div>
|
||||
<div>{{ fw.multi }}</div>
|
||||
<div class="use">{{ fw.use }}</div>
|
||||
<div class="use">
|
||||
{{ fw.use }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rec">
|
||||
<div class="rec-title">此刻更推荐：{{ best }}</div>
|
||||
<div class="rec-body">{{ reason }}</div>
|
||||
<div class="rec-title">
|
||||
此刻更推荐：{{ best }}
|
||||
</div>
|
||||
<div class="rec-body">
|
||||
{{ reason }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,13 +6,19 @@
|
||||
<div class="sel">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">三问选框架</div>
|
||||
<div class="subtitle">目标：先跑通一个最小 Agent，再逐步增强。</div>
|
||||
<div class="title">
|
||||
三问选框架
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
目标：先跑通一个最小 Agent，再逐步增强。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">1) 你更在乎什么？</div>
|
||||
<div class="q-title">
|
||||
1) 你更在乎什么？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q1"
|
||||
@@ -26,7 +32,9 @@
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">2) 你的任务像哪种？</div>
|
||||
<div class="q-title">
|
||||
2) 你的任务像哪种？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q2"
|
||||
@@ -40,7 +48,9 @@
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">3) 需要多 Agent 分工吗？</div>
|
||||
<div class="q-title">
|
||||
3) 需要多 Agent 分工吗？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q3"
|
||||
@@ -54,10 +64,18 @@
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<div class="r-title">推荐：{{ rec.name }}</div>
|
||||
<div class="r-body">{{ rec.reason }}</div>
|
||||
<div class="r-note"><strong>注意：</strong>{{ rec.note }}</div>
|
||||
<div class="r-next"><strong>下一步：</strong>{{ rec.next }}</div>
|
||||
<div class="r-title">
|
||||
推荐：{{ rec.name }}
|
||||
</div>
|
||||
<div class="r-body">
|
||||
{{ rec.reason }}
|
||||
</div>
|
||||
<div class="r-note">
|
||||
<strong>注意：</strong>{{ rec.note }}
|
||||
</div>
|
||||
<div class="r-next">
|
||||
<strong>下一步：</strong>{{ rec.next }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user