feat: comprehensive documentation and demo updates

- 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

docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue

@@ -1,372 +1,163 @@
+<!--
+  AgentWorkflowDemo.vue
+  Agent 核心循环（更像“先玩后讲”的演示）：
+  - 点步骤：看这一轮 Agent “在干什么”
+  - 点“下一轮”：看它如何反复迭代直到完成
+-->
 <template>
-  <div class="agent-workflow-demo">
-    <div class="workflow-container">
-      <div class="cycle-diagram">
-        <div class="center-label">Agent 核心循环</div>
-
-        <div
-          v-for="(step, index) in steps"
-          :key="step.name"
-          class="cycle-step"
-          :class="{
-            active: currentStep === index,
-            completed: currentStep > index
-          }"
-          :style="getStepPosition(index)"
-        >
-          <div class="step-icon">{{ step.icon }}</div>
-          <div class="step-name">{{ step.name }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
-        </div>
-
-        <svg class="arrows" v-if="currentStep < steps.length">
-          <circle cx="200" cy="200" r="130" fill="none" :stroke="arrowColor" stroke-width="2" stroke-dasharray="5,5">
-            <animate
-              v-if="isPlaying"
-              attributeName="stroke-dashoffset"
-              from="0"
-              to="-20"
-              dur="1s"
-              repeatCount="indefinite"
-            />
-          </circle>
-        </svg>
+  <div class="workflow">
+    <div class="header">
+      <div>
+        <div class="title">先玩一下：Agent 不是“聊天”，是“循环行动”</div>
+        <div class="subtitle">它会反复：观察 → 计划 → 用工具 → 检查结果。</div>
       </div>
-
-      <div class="step-details">
-        <div class="current-action">
-          <div class="action-label">当前步骤</div>
-          <div class="action-content">
-            <span class="action-icon">{{ steps[currentStep]?.icon }}</span>
-            <span class="action-text">{{ steps[currentStep]?.name }}</span>
-          </div>
-        </div>
-
-        <div class="step-explanation">
-          <h4>{{ steps[currentStep]?.name }}</h4>
-          <p>{{ steps[currentStep]?.detail }}</p>
-
-          <div v-if="currentStep > 0 && currentStep <= steps.length" class="example-box">
-            <div class="example-title">📝 示例</div>
-            <div class="example-content">{{ steps[currentStep]?.example }}</div>
-          </div>
-        </div>
+      <div class="actions">
+        <button class="btn" @click="reset">重置</button>
+        <button class="btn primary" @click="nextRound">下一轮 ({{ round }}/3)</button>
       </div>
     </div>
 
-    <div class="controls">
-      <button @click="prevStep" :disabled="currentStep === 0" class="control-btn">
-        ← 上一步
-      </button>
-      <button @click="togglePlay" class="control-btn primary">
-        {{ isPlaying ? '⏸ 暂停' : '▶ 自动播放' }}
-      </button>
-      <button @click="nextStep" :disabled="currentStep === steps.length" class="control-btn">
-        下一步 →
-      </button>
-      <button @click="reset" class="control-btn">
-        ↺ 重置
+    <div class="cycle">
+      <button
+        v-for="s in steps"
+        :key="s.id"
+        :class="['step', { active: currentStep === s.id }]"
+        @click="currentStep = s.id"
+      >
+        <span class="icon">{{ s.icon }}</span>
+        <span class="name">{{ s.name }}</span>
       </button>
     </div>
+
+    <div class="panels">
+      <div class="panel">
+        <div class="panel-title">任务</div>
+        <div class="panel-body">
+          帮我找 3 篇 “Agent” 入门文章，并输出：标题 + 一句话总结。
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-title">这一轮发生了什么？</div>
+        <div class="panel-body">{{ detail }}</div>
+      </div>
+    </div>
+
+    <div class="log">
+      <div class="log-title">Agent 运行日志（示意）</div>
+      <pre><code>{{ logText }}</code></pre>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-const currentStep = ref(0)
-const isPlaying = ref(false)
-let playInterval = null
+import { computed, ref } from 'vue'
 
 const steps = [
+  { id: 'observe', name: '观察', icon: '👀' },
+  { id: 'plan', name: '计划', icon: '🧩' },
+  { id: 'act', name: '行动', icon: '🔧' },
+  { id: 'check', name: '检查', icon: '✅' }
+]
+
+const round = ref(1)
+const currentStep = ref('observe')
+
+const scenarios = [
   {
-    name: '感知',
-    icon: '👁️',
-    desc: 'Perceive',
-    detail: 'Agent 从环境中接收信息，包括用户输入、文件内容、网页数据等。',
-    example: '用户说：帮我搜索最新的 AI 文章'
+    observe: '看到用户目标：要 3 篇入门文章 + 简短总结。',
+    plan: '计划：1) 搜索关键词 2) 打开前几条 3) 抽取标题与要点。',
+    act: '调用工具：web_search(query="agent introduction")。',
+    check: '检查：结果里有 3 条可用链接，还缺“每条一句话总结”。'
   },
   {
-    name: '决策',
-    icon: '🤔',
-    desc: 'Reason',
-    detail: '分析当前状态，制定行动计划，选择合适的工具来完成任务。',
-    example: '分析：需要搜索 → 应该使用 web_search 工具'
+    observe: '拿到链接列表，准备逐条打开并提取要点。',
+    plan: '计划：依次 read_page 3 次，把内容压缩成一句话。',
+    act: '调用工具：read_page(url=...) × 3。',
+    check: '检查：信息够了，但标题格式不统一，需要整理输出。'
   },
   {
-    name: '行动',
-    icon: '🔧',
-    desc: 'Act',
-    detail: '执行决策，调用工具，修改文件，发送请求等具体操作。',
-    example: '执行：web_search("AI 文章 2024")'
-  },
-  {
-    name: '观察',
-    icon: '👀',
-    desc: 'Observe',
-    detail: '查看行动结果，评估是否达成目标，决定是继续还是结束。',
-    example: '观察：找到 10 篇相关文章 → 继续阅读'
+    observe: '材料齐全：标题 + 文章要点都已提取。',
+    plan: '计划：统一格式，输出 Markdown 列表。',
+    act: '组织输出：每条“标题 - 一句话总结”。',
+    check: '完成：满足“3 条 + 一句话总结 + 可直接复制”。'
   }
 ]
 
-const arrowColor = computed(() => {
-  if (currentStep.value === 0) return 'var(--vp-c-divider)'
-  return 'var(--vp-c-brand)'
+const current = computed(() => scenarios[round.value - 1])
+
+const detail = computed(() => current.value[currentStep.value])
+
+const logText = computed(() => {
+  const logs = []
+  for (let i = 0; i < round.value; i++) {
+    logs.push(`--- Round ${i + 1} ---`)
+    logs.push(`OBS: ${scenarios[i].observe}`)
+    logs.push(`PLAN: ${scenarios[i].plan}`)
+    logs.push(`ACT: ${scenarios[i].act}`)
+    logs.push(`CHECK: ${scenarios[i].check}`)
+    logs.push('')
+  }
+  return logs.join('\n')
 })
 
-const getStepPosition = (index) => {
-  const positions = [
-    { top: '10%', left: '50%', transform: 'translateX(-50%)' },    // Top
-    { right: '10%', top: '50%', transform: 'translateY(-50%)' },  // Right
-    { bottom: '10%', left: '50%', transform: 'translateX(-50%)' }, // Bottom
-    { left: '10%', top: '50%', transform: 'translateY(-50%)' }    // Left
-  ]
-  return positions[index]
-}
-
-const nextStep = () => {
-  if (currentStep.value < steps.length) {
-    currentStep.value++
-  }
-}
-
-const prevStep = () => {
-  if (currentStep.value > 0) {
-    currentStep.value--
-  }
-}
-
-const togglePlay = () => {
-  isPlaying.value = !isPlaying.value
-  if (isPlaying.value) {
-    playInterval = setInterval(() => {
-      if (currentStep.value < steps.length) {
-        currentStep.value++
-      } else {
-        currentStep.value = 0
-      }
-    }, 2000)
-  } else {
-    clearInterval(playInterval)
-  }
+const nextRound = () => {
+  if (round.value >= 3) return
+  round.value++
+  currentStep.value = 'observe'
 }
 
 const reset = () => {
-  currentStep.value = 0
-  isPlaying.value = false
-  clearInterval(playInterval)
+  round.value = 1
+  currentStep.value = 'observe'
 }
-
-onUnmounted(() => {
-  clearInterval(playInterval)
-})
 </script>
 
 <style scoped>
-.agent-workflow-demo {
+.workflow {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 24px;
   background: var(--vp-c-bg-soft);
-  margin: 24px 0;
-}
-
-.workflow-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  margin-bottom: 24px;
-}
-
-@media (max-width: 768px) {
-  .workflow-container {
-    grid-template-columns: 1fr;
-  }
-}
-
-.cycle-diagram {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.center-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-weight: bold;
-  font-size: 1.1rem;
-  color: var(--vp-c-brand);
-  text-align: center;
-  white-space: nowrap;
-}
-
-.cycle-step {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  border: 2px solid var(--vp-c-divider);
-  transition: all 0.3s ease;
-  min-width: 100px;
-}
-
-.cycle-step.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-  box-shadow: 0 0 20px rgba(66, 153, 225, 0.3);
-  transform: scale(1.1) !important;
-  z-index: 10;
-}
-
-.cycle-step.completed {
-  border-color: var(--vp-c-brand);
-  opacity: 0.7;
-}
-
-.step-icon {
-  font-size: 2rem;
-}
-
-.step-name {
-  font-weight: bold;
-  color: var(--vp-c-text-1);
-}
-
-.step-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.arrows {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.step-details {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.current-action {
-  padding: 20px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  border-left: 4px solid var(--vp-c-brand);
-}
-
-.action-label {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.action-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: var(--vp-c-text-1);
-}
-
-.action-icon {
-  font-size: 1.8rem;
-}
-
-.step-explanation {
-  flex: 1;
-  padding: 20px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-}
-
-.step-explanation h4 {
-  margin: 0 0 12px 0;
-  color: var(--vp-c-brand);
-  font-size: 1.2rem;
-}
-
-.step-explanation p {
-  margin: 0 0 16px 0;
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
-}
-
-.example-box {
   padding: 16px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  border-left: 4px solid var(--vp-c-brand);
-}
-
-.example-title {
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.example-content {
-  font-family: monospace;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.controls {
+  margin: 20px 0;
   display: flex;
+  flex-direction: column;
   gap: 12px;
-  justify-content: center;
-  flex-wrap: wrap;
 }
 
-.control-btn {
-  padding: 10px 20px;
-  border: 2px solid var(--vp-c-divider);
+.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;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+}
+.step {
   background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 10px 12px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
   cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 600;
-  transition: all 0.2s;
+  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; }
 
-.control-btn:hover:not(:disabled) {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-}
+.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; }
 
-.control-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.control-btn.primary {
-  background: var(--vp-c-brand);
-  color: white;
-  border-color: var(--vp-c-brand);
-}
-
-.control-btn.primary:hover:not(:disabled) {
-  background: var(--vp-c-brand-dark);
-  border-color: var(--vp-c-brand-dark);
-}
+.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>
+