sanbuphy
73f4788d7e
- Update READMEs and docs across multiple languages - Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics - Add new appendix sections for Database and IDE intros - Update VitePress config, theme, and utility scripts - Clean up unused assets and components
118 lines
3.9 KiB
Vue
118 lines
3.9 KiB
Vue
<!--
|
||
AgentLevelDemo.vue
|
||
Agent 分级（L0-L5）交互：拖动等级，看到“能做什么/不能做什么/典型任务”。
|
||
-->
|
||
<template>
|
||
<div class="levels">
|
||
<div class="header">
|
||
<div>
|
||
<div class="title">Agent 能力分级（从聊天到协作）</div>
|
||
<div class="subtitle">拖动看看：等级越高，越像“能独立干活的同事”。</div>
|
||
</div>
|
||
<div class="badge">当前：{{ current.name }}</div>
|
||
</div>
|
||
|
||
<div class="slider">
|
||
<input type="range" min="0" max="5" step="1" v-model.number="level" />
|
||
<div class="ticks">
|
||
<span v-for="n in 6" :key="n">{{ n - 1 }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<div class="k">能做什么</div>
|
||
<ul>
|
||
<li v-for="x in current.can" :key="x">{{ x }}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<div class="k">容易出的问题</div>
|
||
<ul>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
|
||
const level = ref(2)
|
||
|
||
const levels = [
|
||
{
|
||
name: 'L0：纯对话',
|
||
can: ['回答问题', '写文本/代码（但不执行）'],
|
||
risk: ['只能“说”，不能“做”', '需要你手动分步骤'],
|
||
example: '解释概念、写一段文案'
|
||
},
|
||
{
|
||
name: 'L1：单工具',
|
||
can: ['调用一个固定工具', '把结果解释给你'],
|
||
risk: ['工具用错参数', '缺少复杂规划'],
|
||
example: '只会查一次搜索/只会跑一次代码'
|
||
},
|
||
{
|
||
name: 'L2：多工具',
|
||
can: ['在多个工具间选择', '按需要组合调用'],
|
||
risk: ['选择工具不稳', '权限与安全需要控制'],
|
||
example: '搜索 + 打开网页 + 摘要'
|
||
},
|
||
{
|
||
name: 'L3：多步骤执行',
|
||
can: ['先计划后执行', '完成一串步骤', '记录中间结果'],
|
||
risk: ['步骤漏/顺序错', '成本上升（更多调用）'],
|
||
example: '读代码 → 改代码 → 跑测试 → 出报告'
|
||
},
|
||
{
|
||
name: 'L4：自我纠错',
|
||
can: ['失败后换策略', '用检查点避免跑偏'],
|
||
risk: ['可能反复尝试（需要上限）', '更依赖监控与日志'],
|
||
example: '测试失败后自动定位并尝试修复'
|
||
},
|
||
{
|
||
name: 'L5：多 Agent 协作',
|
||
can: ['多个角色分工', '并行处理任务', '合并结果'],
|
||
risk: ['协作成本更高', '需要清晰协议与仲裁机制'],
|
||
example: '研究员找资料 + 工程师实现 + 编辑写总结'
|
||
}
|
||
]
|
||
|
||
const current = computed(() => levels[level.value])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.levels {
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
background: var(--vp-c-bg-soft);
|
||
padding: 16px;
|
||
margin: 20px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
||
.title { font-weight: 800; }
|
||
.subtitle { color: var(--vp-c-text-2); font-size: 13px; }
|
||
.badge { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 999px; padding: 8px 12px; font-weight: 800; }
|
||
|
||
.slider { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 10px 12px; }
|
||
input[type='range'] { width: 100%; }
|
||
.ticks { display: flex; justify-content: space-between; color: var(--vp-c-text-2); font-size: 12px; margin-top: 6px; }
|
||
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
|
||
.card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; }
|
||
.k { font-weight: 800; margin-bottom: 6px; }
|
||
.v { color: var(--vp-c-text-2); line-height: 1.6; }
|
||
ul { margin: 0; padding-left: 18px; color: var(--vp-c-text-2); line-height: 1.6; }
|
||
</style>
|
||
|