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/prompt-engineering/PromptComparisonDemo.vue

@@ -1,201 +1,204 @@
+<!--
+  PromptComparisonDemo.vue
+  “清晰 vs 模糊”对比：把一个提示词拆成四块（任务/上下文/要求/输出），并展示哪些块缺失会导致输出跑偏。
+-->
 <template>
-  <div class="prompt-comparison">
-    <div class="comparison-container">
-      <!-- Bad Prompt -->
-      <div class="prompt-card bad">
-        <div class="card-header">
-          <span class="card-icon">❌</span>
-          <span class="card-title">模糊提示词</span>
-        </div>
-        <div class="card-body">
-          <div class="prompt-text">"写个文章"</div>
-          <div class="result-box">
-            <div class="result-label">AI 输出：</div>
-            <div class="result-content">
-              好的，这是一篇关于某个主题的文章...
-              <br><br>
-              <span class="result-comment">❓ 不清楚要写什么主题、风格、长度</span>
-            </div>
-          </div>
-        </div>
+  <div class="cmp">
+    <div class="header">
+      <div>
+        <div class="title">清晰 vs 模糊：差的不是“废话”，而是“缺项”</div>
+        <div class="subtitle">勾选你想补充的信息，看看输出会怎么变。</div>
       </div>
-
-      <!-- Good Prompt -->
-      <div class="prompt-card good">
-        <div class="card-header">
-          <span class="card-icon">✅</span>
-          <span class="card-title">清晰提示词</span>
-        </div>
-        <div class="card-body">
-          <div class="prompt-text">
-            "请以<strong>技术博客</strong>的形式，写一篇关于<strong>提示词工程</strong>的文章。
-            目标读者：<strong>初学者</strong>。字数：<strong>800-1000 字</strong>。
-            包含<strong>3 个实用技巧</strong>和<strong>代码示例</strong>。"
-          </div>
-          <div class="result-box">
-            <div class="result-label">AI 输出：</div>
-            <div class="result-content">
-              # 提示词工程入门指南
-              <br><br>
-              作为 AI 时代的核心技能...
-              <br><br>
-              <span class="result-comment success">✨ 符合所有要求，输出精准</span>
-            </div>
-          </div>
-        </div>
+      <div class="task">
+        <select v-model="task">
+          <option value="blog">写一段技术博客开头</option>
+          <option value="json">把内容输出成 JSON</option>
+        </select>
       </div>
     </div>
 
-    <div class="key-points">
-      <div class="point">
-        <span class="point-icon">🎯</span>
-        <span><strong>明确目标</strong>：说明要做什么（写文章、写代码、分析）</span>
+    <div class="options">
+      <label><input type="checkbox" v-model="useRole" /> 角色（你是谁）</label>
+      <label><input type="checkbox" v-model="useAudience" /> 受众（写给谁）</label>
+      <label><input type="checkbox" v-model="useConstraints" /> 约束（长度/要点数）</label>
+      <label><input type="checkbox" v-model="useFormat" /> 输出格式（JSON/列表）</label>
+    </div>
+
+    <div class="grid">
+      <div class="panel">
+        <div class="panel-title">你给 AI 的提示词</div>
+        <pre><code>{{ prompt }}</code></pre>
+        <div class="checklist">
+          <div class="item" v-for="i in checklist" :key="i.text">
+            <span :class="['dot', i.ok ? 'ok' : 'bad']"></span>
+            <span>{{ i.text }}</span>
+          </div>
+        </div>
       </div>
-      <div class="point">
-        <span class="point-icon">📋</span>
-        <span><strong>提供细节</strong>：主题、风格、长度、格式等具体要求</span>
-      </div>
-      <div class="point">
-        <span class="point-icon">👥</span>
-        <span><strong>指定受众</strong>：说明目标读者（初学者/专家/儿童等）</span>
+      <div class="panel">
+        <div class="panel-title">AI 输出（示意）</div>
+        <div class="output">{{ output }}</div>
+        <div class="warn" v-if="warnings.length">
+          <div class="warn-title">可能的问题</div>
+          <ul>
+            <li v-for="w in warnings" :key="w">{{ w }}</li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-.prompt-comparison {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
-  background: var(--vp-c-bg-soft);
-  margin: 20px 0;
-}
+<script setup>
+import { computed, ref } from 'vue'
 
-.comparison-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 20px;
-}
+const task = ref('blog')
+const useRole = ref(false)
+const useAudience = ref(true)
+const useConstraints = ref(true)
+const useFormat = ref(false)
 
-@media (max-width: 768px) {
-  .comparison-container {
-    grid-template-columns: 1fr;
+const prompt = computed(() => {
+  if (task.value === 'blog') {
+    const lines = []
+    if (useRole.value) lines.push('你是资深前端工程师。')
+    lines.push('请写一段技术博客的开头，主题：提示词工程。')
+    if (useAudience.value) lines.push('目标读者：零基础新手。')
+    if (useConstraints.value) lines.push('要求：80-120 字，口语化，带一个生活类比。')
+    if (useFormat.value) lines.push('输出：只输出一段文字，不要标题。')
+    return lines.join('\n')
   }
-}
 
-.prompt-card {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  overflow: hidden;
-}
+  // json task
+  const lines = []
+  if (useRole.value) lines.push('你是信息抽取助手。')
+  lines.push('从下面这段文字中提取关键信息。')
+  if (useAudience.value) lines.push('用途：给产品经理快速阅读。')
+  if (useConstraints.value) lines.push('要求：提取 3-5 个关键词 + 1 句摘要。')
+  if (useFormat.value) {
+    lines.push('输出格式（JSON）：')
+    lines.push('{')
+    lines.push('  "summary": "...",')
+    lines.push('  "keywords": ["..."]')
+    lines.push('}')
+  }
+  lines.push('输入：')
+  lines.push('“提示词工程能显著提升模型输出质量，但需要清晰任务、约束和格式。”')
+  return lines.join('\n')
+})
 
-.prompt-card.bad {
-  border-color: #ef4444;
-}
+const checklist = computed(() => [
+  { text: '任务清晰（要做什么）', ok: true },
+  { text: '角色（用什么口吻）', ok: useRole.value },
+  { text: '受众/用途（给谁用）', ok: useAudience.value },
+  { text: '约束（长度/数量/范围）', ok: useConstraints.value },
+  { text: '输出格式（如何交付）', ok: useFormat.value }
+])
 
-.prompt-card.good {
-  border-color: #22c55e;
-}
+const warnings = computed(() => {
+  const w = []
+  if (!useAudience.value) w.push('语气可能过专业或太泛')
+  if (!useConstraints.value) w.push('长度/结构可能不稳定')
+  if (task.value === 'json' && !useFormat.value) w.push('可能输出成一大段话，不是 JSON')
+  if (task.value === 'blog' && !useFormat.value) w.push('可能加标题/分段，超出预期')
+  return w
+})
 
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 15px;
-  background: var(--vp-c-bg-mute);
-}
+const output = computed(() => {
+  if (task.value === 'blog') {
+    if (warnings.value.length >= 2) {
+      return '提示词工程是一种与 AI 沟通的方法，它可以帮助你获得更好的输出......（可能偏长/风格不稳）'
+    }
+    return '把 AI 当成新来的同事：你说得越清楚，它越不容易跑偏。提示词工程就是把“要做什么、给谁、怎么交付”一次说明白。'
+  }
 
-.bad .card-header {
-  background: rgba(239, 68, 68, 0.1);
-}
+  // json
+  if (!useFormat.value) {
+    return '这段文字主要讲提示词工程的重要性，并强调需要清晰任务、约束和格式……（但不是 JSON）'
+  }
+  return `{\n  \"summary\": \"提示词工程能提升输出质量，关键在于清晰任务、约束与格式。\",\n  \"keywords\": [\"提示词工程\", \"任务清晰\", \"约束\", \"格式\"]\n}`
+})
+</script>
 
-.good .card-header {
-  background: rgba(34, 197, 94, 0.1);
-}
-
-.card-icon {
-  font-size: 1.3rem;
-}
-
-.card-title {
-  font-weight: bold;
-  font-size: 0.95rem;
-  color: var(--vp-c-text-1);
-}
-
-.card-body {
-  padding: 15px;
-}
-
-.prompt-text {
-  background: var(--vp-c-bg-soft);
+<style scoped>
+.cmp {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 12px;
-  font-family: monospace;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-1);
-  margin-bottom: 15px;
-  line-height: 1.6;
-}
-
-.result-box {
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  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; }
+
+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);
+}
+
+.options {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 14px;
+}
+
+.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;
-}
-
-.result-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  margin-bottom: 8px;
-}
-
-.result-content {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.result-comment {
-  display: block;
-  margin-top: 10px;
-  padding: 8px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-}
-
-.result-comment:not(.success) {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-}
-
-.result-comment.success {
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
-}
-
-.key-points {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-.point {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  background: var(--vp-c-bg);
+.panel-title { font-weight: 700; }
+pre {
+  margin: 0;
+  background: #0b1221;
+  color: #e5e7eb;
+  border-radius: 8px;
   padding: 12px;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+  overflow-x: auto;
+  white-space: pre-wrap;
 }
 
-.point-icon {
-  font-size: 1.3rem;
-}
+.checklist { display: grid; gap: 6px; }
+.item { display: flex; gap: 8px; align-items: center; color: var(--vp-c-text-2); font-size: 13px; }
+.dot { width: 10px; height: 10px; border-radius: 50%; }
+.dot.ok { background: #22c55e; }
+.dot.bad { background: #ef4444; }
+
+.output { white-space: pre-wrap; line-height: 1.6; }
+.warn { border-top: 1px dashed var(--vp-c-divider); padding-top: 10px; }
+.warn-title { font-weight: 700; margin-bottom: 6px; }
+ul { margin: 0; padding-left: 18px; color: var(--vp-c-text-2); }
 </style>
+