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

<!--
  FrameworkComparisonDemo.vue
  框架对比（更直观）：选择关注点，表格高亮适配度。
-->
<template>
  <div class="cmp">
    <div class="header">
      <div>
        <div class="title">主流框架对比（先看“适配度”）</div>
        <div class="subtitle">先选你的关注点，再看推荐。</div>
      </div>
      <div class="focus">
        <button
          v-for="f in focuses"
          :key="f.id"
          :class="['chip', { active: focus === f.id }]"
          @click="focus = f.id"
        >
          {{ f.label }}
        </button>
      </div>
    </div>

    <div class="table">
      <div class="row head">
        <div>框架</div>
        <div>上手</div>
        <div>可控</div>
        <div>多 Agent</div>
        <div>适合做什么</div>
      </div>
      <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>
        <div>{{ fw.multi }}</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>
  </div>
</template>

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

const focuses = [
  { id: 'start', label: '快速上手' },
  { id: 'control', label: '可控可调试' },
  { id: 'team', label: '多 Agent 协作' }
]

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: '角色分工清晰的团队协作任务'
  }
]

const best = computed(() => {
  if (focus.value === 'start') return 'CrewAI'
  if (focus.value === 'team') return 'AutoGen'
  return 'LangChain / LangGraph'
})

const reason = computed(() => {
  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);
}

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