test-repo/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue

<!--
  FewShotDemo.vue
  Few-shot 速懂：不给示例 vs 给示例，AI 的“风格”会不会稳定？

  交互：
  - 选择目标风格（随意/正式）
  - 选择是否提供示例
  - 看提示词和输出如何变化
-->
<template>
  <div class="few">
    <div class="header">
      <div>
        <div class="title">示例的力量：让风格“跟你走”</div>
        <div class="subtitle">你不是让 AI 更聪明，而是让它更像你要的样子。</div>
      </div>
      <div class="controls">
        <select v-model="tone">
          <option value="casual">随意口语</option>
          <option value="formal">正式书面</option>
        </select>
        <button :class="['toggle', { active: withExamples }]" @click="withExamples = !withExamples">
          {{ withExamples ? '已提供示例' : '不提供示例' }}
        </button>
      </div>
    </div>

    <div class="grid">
      <div class="panel">
        <div class="panel-title">提示词 / Prompt</div>
        <pre><code>{{ prompt }}</code></pre>
      </div>
      <div class="panel">
        <div class="panel-title">AI 输出（示意）</div>
        <div class="output">{{ output }}</div>
        <div class="hint">{{ hint }}</div>
      </div>
    </div>

    <div class="examples" v-if="withExamples">
      <div class="examples-title">示例（AI 会“照着学”）</div>
      <div class="examples-grid">
        <div class="ex" v-for="e in examples" :key="e.in">
          <div class="in">输入：{{ e.in }}</div>
          <div class="out">输出：{{ e.out }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const tone = ref('casual')
const withExamples = ref(true)

const examples = computed(() => {
  if (tone.value === 'casual') {
    return [
      { in: '你好', out: 'Hi～' },
      { in: '谢谢', out: '谢啦！' },
      { in: '再见', out: '拜拜～' }
    ]
  }
  return [
    { in: '你好', out: '您好。' },
    { in: '谢谢', out: '非常感谢。' },
    { in: '再见', out: '再见，祝您一切顺利。' }
  ]
})

const prompt = computed(() => {
  const base = '将中文翻译成英文。'
  const task = '输入：我很好'
  if (!withExamples.value) return `${base}\n${task}`
  const lines = [base, '示例：']
  for (const e of examples.value) {
    lines.push(`- ${e.in} -> ${e.out}`)
  }
  lines.push(task)
  return lines.join('\n')
})

const output = computed(() => {
  if (!withExamples.value) {
    return tone.value === 'casual' ? "I'm fine." : 'I am fine.'
  }
  return tone.value === 'casual' ? "I'm good!" : 'I am doing well.'
})

const hint = computed(() => {
  if (!withExamples.value) return '没有示例：AI 可能随便选一种语气。'
  return '有示例：AI 更容易“保持同一种语气”。'
})
</script>

<style scoped>
.few {
  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; }
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
select { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 8px 10px; background: var(--vp-c-bg); color: var(--vp-c-text-1); }
.toggle { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.toggle.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.grid { 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: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.panel-title { font-weight: 700; }
pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 8px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; }
.output { white-space: pre-wrap; line-height: 1.6; }
.hint { color: var(--vp-c-text-2); font-size: 13px; }

.examples { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 10px; padding: 12px; }
.examples-title { font-weight: 700; margin-bottom: 8px; }
.examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ex { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 10px; background: var(--vp-c-bg-soft); }
.in { color: var(--vp-c-text-2); font-size: 13px; }
.out { font-weight: 700; margin-top: 4px; }
</style>