delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update docs and components, fix DLQ demo bug

Browse Source
This commit is contained in:
sanbuphy
2026-01-18 12:21:49 +08:00
parent 26ed39e1eb
commit e41063a1cd
159 changed files with 54236 additions and 2525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue
+79 -16
View File
@@ -107,11 +107,25 @@ const current = ref(modules[0])
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; }
.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;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.diagram {
background: var(--vp-c-bg);
@@ -135,18 +149,67 @@ const current = ref(modules[0])
text-align: left;
}
.node.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
.icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); }
.name { font-weight: 800; }
.node.active {
border-color: var(--vp-c-brand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
}
.name {
font-weight: 800;
}
.pipes { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--vp-c-divider); }
.pipe { color: var(--vp-c-text-2); font-size: 13px; line-height: 1.5; }
.pipe.small { font-size: 12px; color: var(--vp-c-text-3); }
.pipes {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed var(--vp-c-divider);
}
.pipe {
color: var(--vp-c-text-2);
font-size: 13px;
line-height: 1.5;
}
.pipe.small {
font-size: 12px;
color: var(--vp-c-text-3);
}
.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.panel-title { font-weight: 800; }
.panel-body { color: var(--vp-c-text-2); line-height: 1.6; }
.io-title { font-weight: 700; margin-bottom: 6px; }
pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; }
.panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel-title {
font-weight: 800;
}
.panel-body {
color: var(--vp-c-text-2);
line-height: 1.6;
}
.io-title {
font-weight: 700;
margin-bottom: 6px;
}
pre {
margin: 0;
background: #0b1221;
color: #e5e7eb;
border-radius: 10px;
padding: 12px;
font-family: var(--vp-font-family-mono);
font-size: 13px;
overflow-x: auto;
white-space: pre-wrap;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue
+107 -24
View File
@@ -15,10 +15,19 @@
</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 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
>
</div>
<div class="grid">
@@ -77,32 +86,106 @@ const enabledList = computed(() => {
})
const advice = computed(() => {
if (!maxSteps.value && !confirm.value) return '先加“最大步数”和“二次确认”，这是最低成本的安全感。'
if (score.value <= 35) return '很稳了：可以开始做更复杂的任务，但记得加日志与监控。'
if (!maxSteps.value && !confirm.value)
return '先加“最大步数”和“二次确认”，这是最低成本的安全感。'
if (score.value <= 35)
return '很稳了：可以开始做更复杂的任务，但记得加日志与监控。'
if (score.value <= 60) return '还不错：建议再加预算或沙箱，避免极端情况。'
return '风险偏高：建议优先补护栏，再让 Agent 真去执行。'
})
</script>
<style scoped>
.risk { 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; align-items: center; }
.title { font-weight: 800; }
.subtitle { color: var(--vp-c-text-2); font-size: 13px; }
.score { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 999px; padding: 8px 12px; font-weight: 900; }
.score.good { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); }
.score.mid { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); }
.score.bad { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
.risk {
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;
align-items: center;
}
.title {
font-weight: 800;
}
.subtitle {
color: var(--vp-c-text-2);
font-size: 13px;
}
.score {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 999px;
padding: 8px 12px;
font-weight: 900;
}
.score.good {
color: #22c55e;
border-color: rgba(34, 197, 94, 0.4);
}
.score.mid {
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.4);
}
.score.bad {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.4);
}
.controls { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.toggle { display: flex; gap: 8px; align-items: center; }
input { accent-color: var(--vp-c-brand); }
.controls {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 10px 12px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.toggle {
display: flex;
gap: 8px;
align-items: center;
}
input {
accent-color: var(--vp-c-brand);
}
.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: 900; margin-bottom: 6px; }
.v { color: var(--vp-c-text-2); line-height: 1.6; }
.note { margin-top: 6px; color: var(--vp-c-text-3); font-size: 12px; }
ul { margin: 0; padding-left: 18px; color: var(--vp-c-text-2); line-height: 1.6; }
.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: 900;
margin-bottom: 6px;
}
.v {
color: var(--vp-c-text-2);
line-height: 1.6;
}
.note {
margin-top: 6px;
color: var(--vp-c-text-3);
font-size: 12px;
}
ul {
margin: 0;
padding-left: 18px;
color: var(--vp-c-text-2);
line-height: 1.6;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue
+74 -15
View File
@@ -77,21 +77,80 @@ const current = ref(trends[0])
</script>
<style scoped>
.future { 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; }
.future {
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;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.chip.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
}
.chip.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.p-title { font-weight: 900; margin-bottom: 6px; }
.p-body { color: var(--vp-c-text-2); line-height: 1.6; margin-bottom: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.card { background: var(--vp-c-bg-soft); border: 1px dashed var(--vp-c-divider); border-radius: 12px; padding: 10px; }
.k { font-weight: 900; margin-bottom: 4px; }
.v { color: var(--vp-c-text-2); line-height: 1.6; }
.panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.p-title {
font-weight: 900;
margin-bottom: 6px;
}
.p-body {
color: var(--vp-c-text-2);
line-height: 1.6;
margin-bottom: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
}
.card {
background: var(--vp-c-bg-soft);
border: 1px dashed var(--vp-c-divider);
border-radius: 12px;
padding: 10px;
}
.k {
font-weight: 900;
margin-bottom: 4px;
}
.v {
color: var(--vp-c-text-2);
line-height: 1.6;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue
+61 -13
View File
@@ -99,19 +99,67 @@ const current = computed(() => levels[level.value])
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; }
.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; }
.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; }
.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>
docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue
+110 -20
View File
@@ -10,8 +10,20 @@
<div class="subtitle">点步骤，看“工具调用”和“中间结果”。</div>
</div>
<div class="actions">
<button class="btn" @click="step = Math.max(0, step - 1)" :disabled="step === 0">上一步</button>
<button class="btn primary" @click="step = Math.min(steps.length - 1, step + 1)" :disabled="step === steps.length - 1">下一步</button>
<button
class="btn"
@click="step = Math.max(0, step - 1)"
:disabled="step === 0"
>
上一步
</button>
<button
class="btn primary"
@click="step = Math.min(steps.length - 1, step + 1)"
:disabled="step === steps.length - 1"
>
下一步
</button>
</div>
</div>
@@ -94,24 +106,102 @@ const steps = [
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; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.btn.primary { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.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;
}
.actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
}
.btn.primary {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.t { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; text-align: left; }
.t.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
.n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); font-weight: 800; }
.txt { font-weight: 800; }
.timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.t {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 10px;
display: flex;
gap: 10px;
align-items: center;
cursor: pointer;
text-align: left;
}
.t.active {
border-color: var(--vp-c-brand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.n {
width: 26px;
height: 26px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
font-weight: 800;
}
.txt {
font-weight: 800;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.panel-title { font-weight: 700; margin-bottom: 6px; }
.panel-body { color: var(--vp-c-text-2); line-height: 1.6; }
pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.panel-title {
font-weight: 700;
margin-bottom: 6px;
}
.panel-body {
color: var(--vp-c-text-2);
line-height: 1.6;
}
pre {
margin: 0;
background: #0b1221;
color: #e5e7eb;
border-radius: 10px;
padding: 12px;
font-family: var(--vp-font-family-mono);
font-size: 13px;
overflow-x: auto;
white-space: pre-wrap;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue
+88 -18
View File
@@ -13,7 +13,9 @@
</div>
<div class="actions">
<button class="btn" @click="reset">重置</button>
<button class="btn primary" @click="nextRound">下一轮 ({{ round }}/3)</button>
<button class="btn primary" @click="nextRound">
下一轮 ({{ round }}/3)
</button>
</div>
</div>
@@ -124,12 +126,35 @@ const reset = () => {
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; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.btn.primary { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
.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;
}
.actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
}
.btn.primary {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
}
.cycle {
display: grid;
@@ -147,17 +172,62 @@ const reset = () => {
cursor: pointer;
text-align: left;
}
.step.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
.icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); }
.name { font-weight: 800; }
.step.active {
border-color: var(--vp-c-brand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
}
.name {
font-weight: 800;
}
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.panel-title { font-weight: 700; margin-bottom: 6px; }
.panel-body { color: var(--vp-c-text-2); line-height: 1.6; }
.panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.panel-title {
font-weight: 700;
margin-bottom: 6px;
}
.panel-body {
color: var(--vp-c-text-2);
line-height: 1.6;
}
.log { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.log-title { font-weight: 700; margin-bottom: 8px; }
pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; }
.log {
background: var(--vp-c-bg);
border: 1px dashed var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.log-title {
font-weight: 700;
margin-bottom: 8px;
}
pre {
margin: 0;
background: #0b1221;
color: #e5e7eb;
border-radius: 10px;
padding: 12px;
font-family: var(--vp-font-family-mono);
font-size: 13px;
overflow-x: auto;
white-space: pre-wrap;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue
+115 -23
View File
@@ -29,7 +29,11 @@
<div>多 Agent</div>
<div>适合做什么</div>
</div>
<div v-for="fw in frameworks" :key="fw.name" :class="['row', { best: fw.name === best }]">
<div
v-for="fw in frameworks"
:key="fw.name"
:class="['row', { best: fw.name === best }]"
>
<div class="name">{{ fw.name }}</div>
<div>{{ fw.learn }}</div>
<div>{{ fw.control }}</div>
@@ -57,9 +61,27 @@ const focuses = [
const focus = ref('control')
const frameworks = [
{ name: 'LangChain / LangGraph', learn: '中', control: '高', multi: '中', use: '可控的工具调用、工作流、企业集成' },
{ name: 'AutoGen', learn: '中', control: '中', multi: '高', use: '多 Agent 对话协作、编程/分析助手' },
{ name: 'CrewAI', learn: '低', control: '中', multi: '高', use: '角色分工清晰的团队协作任务' }
{
name: 'LangChain / LangGraph',
learn: '中',
control: '高',
multi: '中',
use: '可控的工具调用、工作流、企业集成'
},
{
name: 'AutoGen',
learn: '中',
control: '中',
multi: '高',
use: '多 Agent 对话协作、编程/分析助手'
},
{
name: 'CrewAI',
learn: '低',
control: '中',
multi: '高',
use: '角色分工清晰的团队协作任务'
}
]
const best = computed(() => {
@@ -69,30 +91,100 @@ const best = computed(() => {
})
const reason = computed(() => {
if (focus.value === 'start') return '概念更直观（角色+任务），适合先跑通一个最小团队。'
if (focus.value === 'team') return '多 Agent 对话与协作是强项，适合需要分工的场景。'
if (focus.value === 'start')
return '概念更直观（角色+任务），适合先跑通一个最小团队。'
if (focus.value === 'team')
return '多 Agent 对话与协作是强项，适合需要分工的场景。'
return '把流程“画成图/写成步骤”，更利于调试、上线与长期维护。'
})
</script>
<style scoped>
.cmp { 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; }
.focus { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.chip.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.cmp {
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;
}
.focus {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
}
.chip.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.table { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; overflow: hidden; }
.row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr 2.1fr; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--vp-c-divider); align-items: center; }
.row.head { border-top: none; font-weight: 800; color: var(--vp-c-text-2); background: var(--vp-c-bg-soft); }
.name { font-weight: 800; }
.use { color: var(--vp-c-text-2); }
.row.best { outline: 2px solid var(--vp-c-brand); outline-offset: -2px; background: rgba(0, 0, 0, 0.02); }
.table {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
overflow: hidden;
}
.row {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr 2.1fr;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--vp-c-divider);
align-items: center;
}
.row.head {
border-top: none;
font-weight: 800;
color: var(--vp-c-text-2);
background: var(--vp-c-bg-soft);
}
.name {
font-weight: 800;
}
.use {
color: var(--vp-c-text-2);
}
.row.best {
outline: 2px solid var(--vp-c-brand);
outline-offset: -2px;
background: rgba(0, 0, 0, 0.02);
}
.rec { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.rec-title { font-weight: 800; margin-bottom: 6px; }
.rec-body { color: var(--vp-c-text-2); line-height: 1.6; }
.rec {
background: var(--vp-c-bg);
border: 1px dashed var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.rec-title {
font-weight: 800;
margin-bottom: 6px;
}
.rec-body {
color: var(--vp-c-text-2);
line-height: 1.6;
}
</style>
docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue
+94 -17
View File
@@ -14,21 +14,42 @@
<div class="q">
<div class="q-title">1) 你更在乎什么？</div>
<div class="opts">
<button v-for="o in q1" :key="o.id" :class="['opt', { active: a1 === o.id }]" @click="a1 = o.id">{{ o.label }}</button>
<button
v-for="o in q1"
:key="o.id"
:class="['opt', { active: a1 === o.id }]"
@click="a1 = o.id"
>
{{ o.label }}
</button>
</div>
</div>
<div class="q">
<div class="q-title">2) 你的任务像哪种？</div>
<div class="opts">
<button v-for="o in q2" :key="o.id" :class="['opt', { active: a2 === o.id }]" @click="a2 = o.id">{{ o.label }}</button>
<button
v-for="o in q2"
:key="o.id"
:class="['opt', { active: a2 === o.id }]"
@click="a2 = o.id"
>
{{ o.label }}
</button>
</div>
</div>
<div class="q">
<div class="q-title">3) 需要多 Agent 分工吗？</div>
<div class="opts">
<button v-for="o in q3" :key="o.id" :class="['opt', { active: a3 === o.id }]" @click="a3 = o.id">{{ o.label }}</button>
<button
v-for="o in q3"
:key="o.id"
:class="['opt', { active: a3 === o.id }]"
@click="a3 = o.id"
>
{{ o.label }}
</button>
</div>
</div>
@@ -104,20 +125,76 @@ const rec = computed(() => {
</script>
<style scoped>
.sel { 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; }
.sel {
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;
}
.q { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.q-title { font-weight: 800; margin-bottom: 8px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.opt.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.q {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.q-title {
font-weight: 800;
margin-bottom: 8px;
}
.opts {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.opt {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
}
.opt.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.result { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 12px; padding: 12px; }
.r-title { font-weight: 900; margin-bottom: 6px; }
.r-body { color: var(--vp-c-text-2); line-height: 1.6; margin-bottom: 6px; }
.r-note, .r-next { color: var(--vp-c-text-2); line-height: 1.6; }
.result {
background: var(--vp-c-bg);
border: 1px dashed var(--vp-c-divider);
border-radius: 12px;
padding: 12px;
}
.r-title {
font-weight: 900;
margin-bottom: 6px;
}
.r-body {
color: var(--vp-c-text-2);
line-height: 1.6;
margin-bottom: 6px;
}
.r-note,
.r-next {
color: var(--vp-c-text-2);
line-height: 1.6;
}
</style>