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/AgentTaskFlowDemo.vue

@@ -1,421 +1,117 @@
+<!--
+  AgentTaskFlowDemo.vue
+  任务执行流：像看“回放”一样看 Agent 一步步完成一个任务。
+-->
 <template>
-  <div class="agent-task-flow-demo">
-    <div class="task-input">
-      <div class="input-label">🎯 用户任务</div>
-      <div class="input-content">"搜索并总结最新的 AI 技术文章"</div>
-    </div>
-
-    <div class="flow-timeline">
-      <div class="timeline-line"></div>
-
-      <div
-        v-for="(step, index) in steps"
-        :key="index"
-        class="timeline-item"
-        :class="{ active: currentStep === index, completed: currentStep > index }"
-      >
-        <div class="timeline-dot"></div>
-        <div class="timeline-content">
-          <div class="step-number">步骤 {{ index + 1 }}</div>
-          <div class="step-title">{{ step.title }}</div>
-          <div class="step-description">{{ step.description }}</div>
-
-          <div v-if="step.code" class="step-code">
-            <div class="code-label">执行代码</div>
-            <pre><code>{{ step.code }}</code></pre>
-          </div>
-
-          <div v-if="step.result" class="step-result">
-            <div class="result-label">执行结果</div>
-            <div class="result-content">{{ step.result }}</div>
-          </div>
-        </div>
+  <div class="flow">
+    <div class="header">
+      <div>
+        <div class="title">任务回放：Agent 怎么一步步做完？</div>
+        <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>
       </div>
     </div>
 
-    <div class="flow-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 - 1" class="control-btn">
-        下一步 →
-      </button>
-      <button @click="reset" class="control-btn">
-        ↺ 重置
+    <div class="timeline">
+      <button
+        v-for="(s, i) in steps"
+        :key="s.title"
+        :class="['t', { active: i === step }]"
+        @click="step = i"
+      >
+        <span class="n">{{ i + 1 }}</span>
+        <span class="txt">{{ s.title }}</span>
       </button>
     </div>
 
-    <div class="flow-explanation">
-      <div class="explanation-card">
-        <h4>{{ steps[currentStep].title }}</h4>
-        <p>{{ steps[currentStep].explanation }}</p>
-
-        <div class="tips">
-          <div class="tip-icon">💡</div>
-          <div>{{ steps[currentStep].tip }}</div>
-        </div>
+    <div class="grid">
+      <div class="panel">
+        <div class="panel-title">当前步骤</div>
+        <div class="panel-body">{{ steps[step].desc }}</div>
+      </div>
+      <div class="panel">
+        <div class="panel-title">工具调用（示意）</div>
+        <pre><code>{{ steps[step].tool }}</code></pre>
+      </div>
+      <div class="panel">
+        <div class="panel-title">结果（示意）</div>
+        <pre><code>{{ steps[step].result }}</code></pre>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onUnmounted } from 'vue'
+import { ref } from 'vue'
 
-const currentStep = ref(0)
-const isPlaying = ref(false)
-let playInterval = null
+const step = ref(0)
 
 const steps = [
   {
-    title: '理解任务',
-    description: 'Agent 分析用户需求，明确目标',
-    code: null,
-    result: null,
-    explanation: 'Agent 首先理解用户的意图，识别出这是一个需要搜索和总结的任务。它会分析关键词： "搜索"、"最新"、"AI 技术"、"文章"、"总结"。',
-    tip: '好的任务理解是成功的一半。Agent 需要识别出核心需求和约束条件。'
+    title: '理解目标',
+    desc: '把用户需求拆成“可交付”的输出结构。',
+    tool: 'LLM: parse_goal({ task, constraints, output_format })',
+    result: '目标：找 3 篇文章；输出：标题 + 一句话总结（Markdown 列表）'
   },
   {
-    title: '制定计划',
-    description: '分解任务，制定执行步骤',
-    code: `plan = [
-  "搜索关键词：'AI 技术 2024'",
-  "筛选前 5 篇文章",
-  "阅读每篇文章摘要",
-  "生成综合总结"
-]`,
-    result: '✅ 计划已制定：4 个步骤',
-    explanation: 'Agent 将复杂任务分解为可执行的小步骤。这个计划会动态调整，比如如果搜索结果质量不高，可能会重新搜索。',
-    tip: '任务分解是 Agent 的核心能力。复杂任务必须拆解为可管理的步骤。'
+    title: '搜索',
+    desc: '先用搜索工具拿到候选链接。',
+    tool: 'tool:web_search({ query: \"agent introduction\" })',
+    result: '- link1\n- link2\n- link3\n- link4 ...'
   },
   {
-    title: '执行搜索',
-    description: '调用搜索工具，获取文章列表',
-    code: `results = web_search(
-  query="AI 技术 2024",
-  max_results=10,
-  time_range="last_month"
-)`,
-    result: '✅ 找到 15 篇相关文章',
-    explanation: 'Agent 调用 web_search 工具，使用合适的搜索关键词和参数。搜索结果会被保存到短期记忆中，供后续步骤使用。',
-    tip: '工具调用需要选择合适的参数。Agent 会根据任务需求动态调整。'
+    title: '读取页面',
+    desc: '打开前三个链接，取出核心段落。',
+    tool: 'tool:read_page({ url: link1/link2/link3 })',
+    result: '每篇文章的核心段落（已截取）'
   },
   {
-    title: '筛选结果',
-    description: '根据相关性筛选最佳文章',
-    code: `top_articles = filter_by_relevance(
-  results,
-  top_n=5,
-  criteria=["date", "citations", "source"]
-)`,
-    result: '✅ 筛选出 5 篇高质量文章',
-    explanation: '不是所有搜索结果都有用。Agent 会根据日期、引用数、来源权威性等指标筛选出最有价值的文章。',
-    tip: '信息筛选能力决定了 Agent 的输出质量。需要多维度的评估标准。'
+    title: '压缩与整理',
+    desc: '把每篇文章压缩成“一句话总结”，统一格式。',
+    tool: 'LLM: summarize_each({ paragraphs, max_len: 25 })',
+    result: '- 标题A：一句话…\n- 标题B：一句话…\n- 标题C：一句话…'
   },
   {
-    title: '阅读内容',
-    description: '读取并理解每篇文章的内容',
-    code: `for article in top_articles:
-  content = read_page(article.url)
-  summary = extract_key_points(content)
-  memory.store(article.id, summary)`,
-    result: '✅ 已阅读 5 篇文章，提取关键信息',
-    explanation: 'Agent 依次阅读每篇文章，提取关键信息并存储到记忆系统中。这样可以在生成总结时快速检索相关信息。',
-    tip: '记忆管理很重要。只保留关键信息，避免上下文膨胀。'
-  },
-  {
-    title: '生成总结',
-    description: '综合所有信息，生成最终报告',
-    code: `summary = generate_report(
-  memories=memory.get_all(),
-  format="markdown",
-  style="concise"
-)
-
-summary.add_references(top_articles)`,
-    result: '✅ 总结已完成，包含 5 个参考文献',
-    explanation: 'Agent 从记忆中检索所有关键信息，生成一份结构化的总结报告，并附上参考文献，确保信息的可追溯性。',
-    tip: '输出质量取决于信息的整合能力。结构化输出更易读、更专业。'
+    title: '自检与交付',
+    desc: '检查是否满足“3 条 + 一句话 + 格式正确”，再输出。',
+    tool: 'LLM: self_check({ checklist })',
+    result: '✅ 满足要求；输出已就绪'
   }
 ]
-
-const nextStep = () => {
-  if (currentStep.value < steps.length - 1) {
-    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 - 1) {
-        currentStep.value++
-      } else {
-        currentStep.value = 0
-      }
-    }, 2500)
-  } else {
-    clearInterval(playInterval)
-  }
-}
-
-const reset = () => {
-  currentStep.value = 0
-  isPlaying.value = false
-  clearInterval(playInterval)
-}
-
-onUnmounted(() => {
-  clearInterval(playInterval)
-})
 </script>
 
 <style scoped>
-.agent-task-flow-demo {
+.flow {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 24px;
   background: var(--vp-c-bg-soft);
-  margin: 24px 0;
-}
-
-.task-input {
-  background: var(--vp-c-brand);
-  color: white;
-  padding: 20px;
-  border-radius: 12px;
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.input-label {
-  font-size: 0.9rem;
-  opacity: 0.9;
-  margin-bottom: 8px;
-}
-
-.input-content {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-
-.flow-timeline {
-  position: relative;
-  padding: 20px 0;
-  margin-bottom: 24px;
-}
-
-.timeline-line {
-  position: absolute;
-  left: 24px;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: var(--vp-c-divider);
-  border-radius: 2px;
-}
-
-.timeline-item {
-  position: relative;
-  padding-left: 60px;
-  padding-bottom: 32px;
-  opacity: 0.5;
-  transition: all 0.3s;
-}
-
-.timeline-item.active {
-  opacity: 1;
-}
-
-.timeline-item.completed {
-  opacity: 0.7;
-}
-
-.timeline-dot {
-  position: absolute;
-  left: 10px;
-  top: 0;
-  width: 32px;
-  height: 32px;
-  background: var(--vp-c-bg);
-  border: 4px solid var(--vp-c-divider);
-  border-radius: 50%;
-  transition: all 0.3s;
-  z-index: 1;
-}
-
-.timeline-item.active .timeline-dot {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand);
-  box-shadow: 0 0 20px rgba(66, 153, 225, 0.5);
-}
-
-.timeline-item.completed .timeline-dot {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand);
-}
-
-.timeline-content {
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 20px;
-  border: 2px solid var(--vp-c-divider);
-  transition: all 0.3s;
-}
-
-.timeline-item.active .timeline-content {
-  border-color: var(--vp-c-brand);
-  box-shadow: 0 4px 20px rgba(66, 153, 225, 0.2);
-}
-
-.step-number {
-  font-size: 0.85rem;
-  color: var(--vp-c-brand);
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.step-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: var(--vp-c-text-1);
-  margin-bottom: 8px;
-}
-
-.step-description {
-  color: var(--vp-c-text-2);
-  margin-bottom: 16px;
-}
-
-.step-code {
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 12px;
-}
-
-.code-label {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.step-code pre {
-  margin: 0;
-}
-
-.step-code code {
-  font-family: 'Monaco', 'Courier New', monospace;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-1);
-  line-height: 1.6;
-}
-
-.step-result {
-  background: rgba(66, 153, 225, 0.1);
-  border-left: 4px solid var(--vp-c-brand);
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.result-label {
-  font-size: 0.8rem;
-  color: var(--vp-c-brand);
-  margin-bottom: 4px;
-  font-weight: 600;
-}
-
-.result-content {
-  color: var(--vp-c-text-1);
-  font-family: monospace;
-  font-size: 0.9rem;
-}
-
-.flow-controls {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-}
-
-.control-btn {
-  padding: 10px 20px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.control-btn:hover:not(:disabled) {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-}
-
-.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);
-}
-
-.flow-explanation {
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 24px;
-}
-
-.explanation-card h4 {
-  margin: 0 0 12px 0;
-  color: var(--vp-c-brand);
-  font-size: 1.3rem;
-}
-
-.explanation-card p {
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
-  margin-bottom: 16px;
-}
-
-.tips {
-  display: flex;
-  gap: 12px;
   padding: 16px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  border-left: 4px solid var(--vp-c-brand);
+  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; }
+.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; }
 
-.tip-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
+.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; }
 
-.tips > div:last-child {
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
+.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>
+