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/llm-intro/LinearAttentionDemo.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="linear-attention-demo">
     <div class="mode-switch">
-      <button 
+      <button
         :class="{ active: mode === 'standard' }"
         @click="mode = 'standard'"
       >
         标准 Attention (网状连接)
       </button>
-      <button 
-        :class="{ active: mode === 'linear' }"
-        @click="mode = 'linear'"
-      >
+      <button :class="{ active: mode === 'linear' }" @click="mode = 'linear'">
         线性 Attention (接力传递)
       </button>
     </div>
@@ -18,7 +15,14 @@
     <div class="visual-area">
       <div class="control-panel">
         <div class="label">参与者数量 (N): {{ nValue }}</div>
-        <input type="range" v-model="nValue" min="3" max="12" step="1" class="slider">
+        <input
+          type="range"
+          v-model="nValue"
+          min="3"
+          max="12"
+          step="1"
+          class="slider"
+        />
       </div>
 
       <div class="viz-canvas-container">
@@ -26,112 +30,149 @@
         <svg class="viz-svg" viewBox="0 0 400 300">
           <!-- STANDARD MODE: Mesh / Web -->
           <g v-if="mode === 'standard'">
-             <!-- Active Query Animation -->
-             <g class="active-query-scan">
-                <!-- Current processing node (last one) -->
-                <circle 
-                   :cx="circleNodes[circleNodes.length-1].x" 
-                   :cy="circleNodes[circleNodes.length-1].y" 
-                   r="16" 
-                   fill="none" 
-                   stroke="var(--vp-c-brand)" 
-                   stroke-width="3"
-                   opacity="0.5"
-                >
-                  <animate attributeName="r" values="12;20;12" dur="2s" repeatCount="indefinite" />
-                  <animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite" />
-                </circle>
-                
-                <!-- Scanning rays from last node to all others -->
-                <line 
-                  v-for="(node, idx) in circleNodes.slice(0, circleNodes.length-1)"
-                  :key="'ray'+idx"
-                  :x1="circleNodes[circleNodes.length-1].x" 
-                  :y1="circleNodes[circleNodes.length-1].y"
-                  :x2="node.x" 
-                  :y2="node.y"
-                  stroke="var(--vp-c-brand)" 
-                  stroke-width="2"
-                  stroke-dasharray="4"
-                  class="scanning-ray"
-                >
-                  <animate attributeName="stroke-dashoffset" values="20;0" dur="1s" repeatCount="indefinite" />
-                </line>
-             </g>
+            <!-- Active Query Animation -->
+            <g class="active-query-scan">
+              <!-- Current processing node (last one) -->
+              <circle
+                :cx="circleNodes[circleNodes.length - 1].x"
+                :cy="circleNodes[circleNodes.length - 1].y"
+                r="16"
+                fill="none"
+                stroke="var(--vp-c-brand)"
+                stroke-width="3"
+                opacity="0.5"
+              >
+                <animate
+                  attributeName="r"
+                  values="12;20;12"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  values="0.8;0;0.8"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+              </circle>
 
-             <!-- Background Mesh -->
-             <g class="connections">
-               <line 
-                 v-for="(link, idx) in meshLinks" 
-                 :key="idx"
-                 :x1="link.x1" :y1="link.y1"
-                 :x2="link.x2" :y2="link.y2"
-                 class="connection-line"
-                 :style="{ animationDelay: idx * 0.05 + 's' }"
-               />
-             </g>
-             <!-- Draw Nodes -->
-             <circle 
-               v-for="(node, idx) in circleNodes" 
-               :key="idx"
-               :cx="node.x" :cy="node.y" 
-               r="12" 
-               class="node-circle standard"
-               :class="{ 'current-node': idx === circleNodes.length - 1 }"
-             />
-             <text 
-               v-for="(node, idx) in circleNodes" 
-               :key="'t'+idx"
-               :x="node.x" :y="node.y" 
-               dy="4"
-               text-anchor="middle"
-               class="node-text"
-             >{{ idx + 1 }}</text>
+              <!-- Scanning rays from last node to all others -->
+              <line
+                v-for="(node, idx) in circleNodes.slice(
+                  0,
+                  circleNodes.length - 1
+                )"
+                :key="'ray' + idx"
+                :x1="circleNodes[circleNodes.length - 1].x"
+                :y1="circleNodes[circleNodes.length - 1].y"
+                :x2="node.x"
+                :y2="node.y"
+                stroke="var(--vp-c-brand)"
+                stroke-width="2"
+                stroke-dasharray="4"
+                class="scanning-ray"
+              >
+                <animate
+                  attributeName="stroke-dashoffset"
+                  values="20;0"
+                  dur="1s"
+                  repeatCount="indefinite"
+                />
+              </line>
+            </g>
+
+            <!-- Background Mesh -->
+            <g class="connections">
+              <line
+                v-for="(link, idx) in meshLinks"
+                :key="idx"
+                :x1="link.x1"
+                :y1="link.y1"
+                :x2="link.x2"
+                :y2="link.y2"
+                class="connection-line"
+                :style="{ animationDelay: idx * 0.05 + 's' }"
+              />
+            </g>
+            <!-- Draw Nodes -->
+            <circle
+              v-for="(node, idx) in circleNodes"
+              :key="idx"
+              :cx="node.x"
+              :cy="node.y"
+              r="12"
+              class="node-circle standard"
+              :class="{ 'current-node': idx === circleNodes.length - 1 }"
+            />
+            <text
+              v-for="(node, idx) in circleNodes"
+              :key="'t' + idx"
+              :x="node.x"
+              :y="node.y"
+              dy="4"
+              text-anchor="middle"
+              class="node-text"
+            >
+              {{ idx + 1 }}
+            </text>
           </g>
 
           <!-- LINEAR MODE: Relay / Chain -->
           <g v-else>
-             <!-- Relay Path -->
-             <line 
-                x1="40" y1="150" 
-                :x2="40 + (nValue - 1) * 60" y2="150" 
-                class="relay-track" 
-             />
-             
-             <!-- Passing Message Animation -->
-             <circle 
-               cx="0" cy="0" r="8" 
-               class="message-token"
-             >
-                <animateMotion 
-                   :path="relayPath" 
-                   dur="2s" 
-                   repeatCount="indefinite"
-                />
-             </circle>
+            <!-- Relay Path -->
+            <line
+              x1="40"
+              y1="150"
+              :x2="40 + (nValue - 1) * 60"
+              y2="150"
+              class="relay-track"
+            />
 
-             <!-- Nodes -->
-             <g v-for="(node, idx) in linearNodes" :key="idx">
-                <circle 
-                  :cx="node.x" :cy="node.y" 
-                  r="12" 
-                  class="node-circle linear"
-                />
-                <text 
-                  :x="node.x" :y="node.y" 
-                  dy="4"
-                  text-anchor="middle"
-                  class="node-text"
-                >{{ idx + 1 }}</text>
-                <!-- State Box (Memory) -->
-                <rect 
-                   :x="node.x - 15" :y="node.y + 20" 
-                   width="30" height="20" 
-                   rx="4"
-                   class="memory-box"
-                />
-                <text :x="node.x" :y="node.y + 34" text-anchor="middle" font-size="8" fill="white">Mem</text>
-             </g>
+            <!-- Passing Message Animation -->
+            <circle cx="0" cy="0" r="8" class="message-token">
+              <animateMotion
+                :path="relayPath"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+            </circle>
+
+            <!-- Nodes -->
+            <g v-for="(node, idx) in linearNodes" :key="idx">
+              <circle
+                :cx="node.x"
+                :cy="node.y"
+                r="12"
+                class="node-circle linear"
+              />
+              <text
+                :x="node.x"
+                :y="node.y"
+                dy="4"
+                text-anchor="middle"
+                class="node-text"
+              >
+                {{ idx + 1 }}
+              </text>
+              <!-- State Box (Memory) -->
+              <rect
+                :x="node.x - 15"
+                :y="node.y + 20"
+                width="30"
+                height="20"
+                rx="4"
+                class="memory-box"
+              />
+              <text
+                :x="node.x"
+                :y="node.y + 34"
+                text-anchor="middle"
+                font-size="8"
+                fill="white"
+              >
+                Mem
+              </text>
+            </g>
           </g>
         </svg>
       </div>
@@ -139,16 +180,21 @@
       <div class="stats-panel">
         <div class="stat-item">
           <div class="stat-label">连接/操作次数</div>
-          <div class="stat-value" :class="mode === 'standard' ? 'text-red' : 'text-green'">
+          <div
+            class="stat-value"
+            :class="mode === 'standard' ? 'text-red' : 'text-green'"
+          >
             {{ connectionCount }}
           </div>
         </div>
         <div class="stat-desc">
           <span v-if="mode === 'standard'">
-            每个人都要找其他人。<br>N={{ nValue }} 时，连接数高达 {{ nValue * nValue }}！
+            每个人都要找其他人。<br />N={{ nValue }} 时，连接数高达
+            {{ nValue * nValue }}！
           </span>
           <span v-else>
-            每个人只传给下一个人。<br>N={{ nValue }} 时，操作数仅为 {{ nValue }}。
+            每个人只传给下一个人。<br />N={{ nValue }} 时，操作数仅为
+            {{ nValue }}。
           </span>
         </div>
       </div>
@@ -158,13 +204,13 @@
       <div class="analogy-title">💡 核心区别：要不要回头看？</div>
       <div v-if="mode === 'standard'">
         <b>回看模式 (Retrospective)</b>：
-        <br>想象你在考试。每做一道新题，你都要<b>把之前做过的所有题目再检查一遍</b>，确认有没有关联。
-        <br>题目越多，你需要检查的次数就越多，最后累死在检查上。
+        <br />想象你在考试。每做一道新题，你都要<b>把之前做过的所有题目再检查一遍</b>，确认有没有关联。
+        <br />题目越多，你需要检查的次数就越多，最后累死在检查上。
       </div>
       <div v-else>
-        <b>状态模式 (Recurrent)</b>：
-        <br>想象你在跑步。你不需要记得前 100 步每一步踩在哪，你只需要知道<b>现在的速度和位置</b>（State）。
-        <br>跑第 1000 步和跑第 1 步一样轻松，因为你不需要回头。
+        <b>状态模式 (Recurrent)</b>： <br />想象你在跑步。你不需要记得前 100
+        步每一步踩在哪，你只需要知道<b>现在的速度和位置</b>（State）。
+        <br />跑第 1000 步和跑第 1 步一样轻松，因为你不需要回头。
       </div>
     </div>
   </div>
@@ -182,7 +228,7 @@ const circleNodes = computed(() => {
   const centerX = 200
   const centerY = 150
   const radius = 100
-  
+
   for (let i = 0; i < nValue.value; i++) {
     const angle = (i / nValue.value) * 2 * Math.PI - Math.PI / 2
     nodes.push({
@@ -216,7 +262,7 @@ const linearNodes = computed(() => {
   const startX = 40
   const gap = 60
   const y = 150
-  
+
   for (let i = 0; i < nValue.value; i++) {
     nodes.push({
       x: startX + i * gap,
@@ -229,9 +275,9 @@ const linearNodes = computed(() => {
 // SVG Path for animation in Linear Mode
 const relayPath = computed(() => {
   const nodes = linearNodes.value
-  if (nodes.length < 2) return ""
+  if (nodes.length < 2) return ''
   // Start from first node, go to last node
-  return `M ${nodes[0].x} ${nodes[0].y} L ${nodes[nodes.length-1].x} ${nodes[nodes.length-1].y}`
+  return `M ${nodes[0].x} ${nodes[0].y} L ${nodes[nodes.length - 1].x} ${nodes[nodes.length - 1].y}`
 })
 
 const connectionCount = computed(() => {
@@ -341,7 +387,9 @@ const connectionCount = computed(() => {
 }
 
 @keyframes fadeInLine {
-  to { opacity: 0.3; }
+  to {
+    opacity: 0.3;
+  }
 }
 
 .relay-track {
@@ -371,8 +419,12 @@ const connectionCount = computed(() => {
   font-family: monospace;
 }
 
-.text-red { color: var(--vp-c-red); }
-.text-green { color: var(--vp-c-green); }
+.text-red {
+  color: var(--vp-c-red);
+}
+.text-green {
+  color: var(--vp-c-green);
+}
 
 .stat-desc {
   color: var(--vp-c-text-2);