test-repo/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue

<!--
  FrameworkSelectionDemo.vue
  框架选择小向导：回答 3 个问题，给出推荐 + 适配理由 + 你需要注意什么。
-->
<template>
  <div class="sel">
    <div class="header">
      <div>
        <div class="title">三问选框架</div>
        <div class="subtitle">目标：先跑通一个最小 Agent，再逐步增强。</div>
      </div>
    </div>

    <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>
      </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>
      </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>
      </div>
    </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>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const q1 = [
  { id: 'easy', label: '快速上手' },
  { id: 'stable', label: '可控可上线' },
  { id: 'team', label: '团队协作' }
]
const q2 = [
  { id: 'workflow', label: '有明确流程（步骤/图）' },
  { id: 'chat', label: '偏对话与协商' },
  { id: 'explore', label: '探索式试错' }
]
const q3 = [
  { id: 'no', label: '不需要' },
  { id: 'maybe', label: '可能需要' },
  { id: 'yes', label: '必须需要' }
]

const a1 = ref('stable')
const a2 = ref('workflow')
const a3 = ref('maybe')

const rec = computed(() => {
  // Multi-agent first
  if (a3.value === 'yes' || a1.value === 'team') {
    if (a2.value === 'chat') {
      return {
        name: 'AutoGen',
        reason: '多 Agent 对话协作是强项，适合“互相讨论、分工协作”。',
        note: '先把角色边界写清楚，否则容易重复劳动或互怼。',
        next: '从 2 个 Agent 开始：研究员 + 执行者。'
      }
    }
    return {
      name: 'CrewAI',
      reason: '角色+任务模型很直观，适合“分工明确”的团队工作流。',
      note: '先把输入/输出格式定死，避免多人输出难合并。',
      next: '先搭 2-3 个角色：Researcher/Writer/Reviewer。'
    }
  }

  // Single-agent / controllable workflow
  if (a1.value === 'stable' || a2.value === 'workflow') {
    return {
      name: 'LangChain / LangGraph',
      reason: '更适合把 Agent 写成“可控流程”，便于调试、上线、加护栏。',
      note: '别一上来做大系统，先把 1 个工具调用跑通。',
      next: '用 LangGraph 画一个 3-5 节点的小图。'
    }
  }

  // Easy start
  return {
    name: 'CrewAI',
    reason: '上手快、概念直观，适合先做出一个“能跑”的 demo。',
    note: 'demo 能跑不代表可上线，后续要补安全与可观测。',
    next: '先做一个“研究+写作”的最小团队。'
  }
})
</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;
}

.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;
}
</style>