docs: add hands-on terminal lab and update intro content

docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue

@@ -0,0 +1,652 @@
+<template>
+  <div class="terminal-hands-on">
+    <div class="lab-container">
+      <!-- Left Panel: Task Guide -->
+      <div class="task-panel">
+        <div class="panel-header">
+          <span class="panel-title">🎯 实操任务 ({{ currentTaskIndex + 1 }}/{{ tasks.length }})</span>
+          <div class="os-selector">
+            <select v-model="currentOS" @change="resetCurrentTask">
+              <option value="mac">macOS</option>
+              <option value="win-ps">Windows PowerShell</option>
+              <option value="win-cmd">Windows CMD</option>
+              <option value="linux">Linux</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="task-content">
+          <h3>{{ currentTask.title }}</h3>
+          <p class="task-desc">{{ currentTask.description }}</p>
+          
+          <div class="ai-helper">
+            <div class="ai-header" @click="toggleAi" :class="{ active: isAiOpen }">
+              <span class="ai-icon">🤖</span>
+              <span class="ai-title">不知道怎么写？问问 AI</span>
+              <span class="ai-arrow">▼</span>
+            </div>
+            <div class="ai-chat" v-if="isAiOpen">
+              <div class="chat-bubble user">
+                {{ currentTask.aiQuery }}
+              </div>
+              <div class="chat-bubble ai">
+                <p>{{ currentTask.aiResponse[currentOS] || currentTask.aiResponse.common }}</p>
+                <button class="copy-btn" @click="copyCommand(currentTask.expectedCmd[currentOS] || currentTask.expectedCmd.common)">
+                  复制命令
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="expected-result" v-if="!isTaskCompleted">
+            <span class="label">预期目标：</span>
+            <span class="value">{{ currentTask.goal }}</span>
+          </div>
+          
+          <div class="success-message" v-if="isTaskCompleted">
+            <span class="icon">🎉</span>
+            <span>太棒了！任务完成！</span>
+            <button class="next-btn" @click="nextTask" v-if="currentTaskIndex < tasks.length - 1">下一关</button>
+            <button class="reset-btn" @click="resetAll" v-else>重新开始</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Panel: Terminal Emulator -->
+      <div class="terminal-panel" :class="currentOS">
+        <div class="terminal-header">
+          <div class="dots">
+            <span class="dot red"></span>
+            <span class="dot yellow"></span>
+            <span class="dot green"></span>
+          </div>
+          <div class="title">{{ terminalTitle }}</div>
+        </div>
+        <div class="terminal-body" ref="terminalBody" @click="focusInput">
+          <div v-for="(line, index) in history" :key="index" class="line">
+            <span v-if="line.type === 'input'" class="prompt">{{ line.prompt }}</span>
+            <span :class="line.type">{{ line.content }}</span>
+          </div>
+          
+          <div class="line input-line" v-if="!isTaskCompleted || currentTaskIndex < tasks.length - 1">
+            <span class="prompt">{{ prompt }}</span>
+            <input 
+              ref="cmdInput"
+              v-model="inputCmd" 
+              @keydown.enter="executeCommand"
+              @keydown.tab.prevent
+              type="text" 
+              spellcheck="false"
+              autocomplete="off"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue'
+
+const currentOS = ref('win-cmd')
+const currentTaskIndex = ref(0)
+const isAiOpen = ref(false)
+const inputCmd = ref('')
+const history = ref([])
+const cmdInput = ref(null)
+const terminalBody = ref(null)
+
+// System Configurations
+const osConfig = {
+  'mac': { prompt: 'user@MacBook ~ % ', title: 'user — -zsh' },
+  'win-ps': { prompt: 'PS C:\\Users\\User> ', title: 'Windows PowerShell' },
+  'win-cmd': { prompt: 'C:\\Users\\User> ', title: 'Command Prompt' },
+  'linux': { prompt: 'user@localhost:~$ ', title: 'user@localhost: ~' }
+}
+
+const prompt = computed(() => osConfig[currentOS.value].prompt)
+const terminalTitle = computed(() => osConfig[currentOS.value].title)
+
+// Tasks Definition
+const tasks = [
+  {
+    title: '第一步：看看这里有什么',
+    description: '在对文件进行操作之前，我们首先需要知道当前目录下有哪些文件。',
+    goal: '列出当前目录下的所有文件。',
+    aiQuery: '我想查看当前目录下的文件，应该用什么命令？',
+    aiResponse: {
+      'mac': '在 macOS 和 Linux 中，查看文件列表使用 `ls` 命令 (List)。',
+      'linux': '在 macOS 和 Linux 中，查看文件列表使用 `ls` 命令 (List)。',
+      'win-ps': '在 PowerShell 中，你可以使用 `ls` 或 `dir` 命令。',
+      'win-cmd': '在 Windows CMD 中，查看文件列表使用 `dir` 命令 (Directory)。',
+      'common': '通常使用 ls 或 dir。'
+    },
+    expectedCmd: {
+      'mac': 'ls', 'linux': 'ls', 'win-ps': 'ls', 'win-cmd': 'dir'
+    },
+    validate: (cmd, os) => {
+      const valid = os === 'win-cmd' ? ['dir'] : ['ls', 'dir', 'll']
+      return valid.includes(cmd.trim().toLowerCase())
+    },
+    output: (os) => {
+      if (os === 'win-cmd' || os === 'win-ps') {
+        return `
+    Directory: C:\\Users\\User
+
+Mode                 LastWriteTime         Length Name
+----                 -------------         ------ ----
+d----           1/15/2026  9:00 AM                Documents
+d----           1/15/2026  9:00 AM                Downloads
+-a---           1/15/2026  9:00 AM            128 todo.txt`
+      }
+      return `Documents  Downloads  todo.txt`
+    }
+  },
+  {
+    title: '第二步：创建一个新家',
+    description: '文件太多会很乱，我们创建一个专门的文件夹来存放今天的练习文件。',
+    goal: '创建一个名为 "demo" 的文件夹。',
+    aiQuery: '怎么创建一个新的文件夹？名字叫 demo。',
+    aiResponse: {
+      'common': '创建文件夹（目录）的命令是 `mkdir` (Make Directory)。你可以输入 `mkdir demo`。'
+    },
+    expectedCmd: {
+      'common': 'mkdir demo'
+    },
+    validate: (cmd) => cmd.trim() === 'mkdir demo',
+    output: () => '' // mkdir usually has no output on success
+  },
+  {
+    title: '第三步：进入新家',
+    description: '文件夹建好了，但我们现在还在外面。我们需要“走”进去。',
+    goal: '进入 "demo" 文件夹。',
+    aiQuery: '怎么进入刚才建好的 demo 文件夹？',
+    aiResponse: {
+      'common': '切换目录使用 `cd` 命令 (Change Directory)。输入 `cd demo` 即可。'
+    },
+    expectedCmd: {
+      'common': 'cd demo'
+    },
+    validate: (cmd) => cmd.trim() === 'cd demo',
+    output: () => '' // cd usually has no output, but prompt changes
+  },
+  {
+    title: '第四步：新建一个文件',
+    description: '现在我们在 demo 文件夹里了。来创建一个简单的文本文件吧。',
+    goal: '创建一个名为 "hello.txt" 的文件。',
+    aiQuery: '我想新建一个空文件叫 hello.txt，怎么做？',
+    aiResponse: {
+      'mac': '在 Mac/Linux 上，使用 `touch hello.txt` 可以快速创建一个空文件。',
+      'linux': '在 Mac/Linux 上，使用 `touch hello.txt` 可以快速创建一个空文件。',
+      'win-ps': '在 PowerShell 中，可以使用 `ni hello.txt` 或 `echo "" > hello.txt`。',
+      'win-cmd': '在 CMD 中，可以使用 `type nul > hello.txt` 或 `echo. > hello.txt`。',
+    },
+    expectedCmd: {
+      'mac': 'touch hello.txt',
+      'linux': 'touch hello.txt',
+      'win-ps': 'ni hello.txt',
+      'win-cmd': 'type nul > hello.txt'
+    },
+    validate: (cmd, os) => {
+      if (cmd.includes('touch') || cmd.includes('echo') || cmd.includes('ni') || cmd.includes('type')) {
+        return cmd.includes('hello.txt')
+      }
+      return false
+    },
+    output: () => ''
+  },
+  {
+    title: '第五步：安装程序',
+    description: '终端不仅能管理文件，还能安装软件。比如我们想安装一个 Python 库 "requests"。',
+    goal: '使用 pip 安装 requests 库。',
+    aiQuery: '怎么用命令行安装 python 的 requests 库？',
+    aiResponse: {
+      'common': '安装 Python 库通常使用 `pip` (Python Package Installer)。命令是 `pip install requests`。'
+    },
+    expectedCmd: {
+      'common': 'pip install requests'
+    },
+    validate: (cmd) => cmd.trim() === 'pip install requests',
+    output: () => `
+Downloading/unpacking requests
+  Downloading requests-2.31.0-py3-none-any.whl (62kB): 62kB downloaded
+Installing collected packages: requests
+Successfully installed requests
+Cleaning up...`
+  },
+  {
+    title: '第六步：打扫战场',
+    description: '练习结束了，我们把刚才创建的文件删除掉，保持环境整洁。',
+    goal: '删除 "hello.txt" 文件。',
+    aiQuery: '我不想要 hello.txt 了，怎么删除它？',
+    aiResponse: {
+      'mac': '删除文件使用 `rm` 命令 (Remove)。小心，这个操作通常不可撤销！输入 `rm hello.txt`。',
+      'linux': '删除文件使用 `rm` 命令 (Remove)。小心，这个操作通常不可撤销！输入 `rm hello.txt`。',
+      'win-ps': '在 PowerShell 中使用 `rm` 或 `del`。输入 `rm hello.txt`。',
+      'win-cmd': '在 CMD 中使用 `del` 命令 (Delete)。输入 `del hello.txt`。',
+    },
+    expectedCmd: {
+      'mac': 'rm hello.txt',
+      'linux': 'rm hello.txt',
+      'win-ps': 'rm hello.txt',
+      'win-cmd': 'del hello.txt'
+    },
+    validate: (cmd, os) => {
+      const c = cmd.trim()
+      return c === 'rm hello.txt' || c === 'del hello.txt'
+    },
+    output: () => ''
+  }
+]
+
+const currentTask = computed(() => tasks[currentTaskIndex.value])
+const isTaskCompleted = ref(false)
+
+const toggleAi = () => {
+  isAiOpen.value = !isAiOpen.value
+}
+
+const copyCommand = (cmd) => {
+  inputCmd.value = cmd
+  focusInput()
+}
+
+const focusInput = () => {
+  if (cmdInput.value) {
+    cmdInput.value.focus()
+  }
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (terminalBody.value) {
+      terminalBody.value.scrollTop = terminalBody.value.scrollHeight
+    }
+  })
+}
+
+const executeCommand = () => {
+  const cmd = inputCmd.value
+  if (!cmd.trim()) return
+
+  // 1. Add to history
+  let currentPrompt = prompt.value
+  // Special handling for prompt update simulation (hacky way)
+  if (currentTaskIndex.value >= 2 && currentTaskIndex.value < 6 && history.value.length > 0) {
+     // If we are inside demo folder
+     if (currentOS.value === 'mac') currentPrompt = 'user@MacBook demo % '
+     else if (currentOS.value === 'linux') currentPrompt = 'user@localhost:~/demo$ '
+     else if (currentOS.value === 'win-ps') currentPrompt = 'PS C:\\Users\\User\\demo> '
+     else currentPrompt = 'C:\\Users\\User\\demo> '
+  }
+
+  history.value.push({ type: 'input', prompt: currentPrompt, content: cmd })
+  inputCmd.value = ''
+
+  // 2. Process Command
+  // Check if it matches current task requirement
+  if (!isTaskCompleted.value && currentTask.value.validate(cmd, currentOS.value)) {
+    // Success
+    const out = currentTask.value.output(currentOS.value)
+    if (out) {
+      history.value.push({ type: 'output', content: out })
+    }
+    isTaskCompleted.value = true
+  } else {
+    // Failure or just random command
+    // Simple mock responses for common commands if not matching task
+    if (cmd.trim() === 'ls' || cmd.trim() === 'dir') {
+       if (currentTaskIndex.value < 2) {
+         // Initial state
+         history.value.push({ type: 'output', content: tasks[0].output(currentOS.value) })
+       } else if (currentTaskIndex.value >= 2) {
+         // Inside demo
+         if (currentTaskIndex.value === 3) history.value.push({ type: 'output', content: '' }) // empty
+         else history.value.push({ type: 'output', content: 'hello.txt' })
+       }
+    } else if (cmd.trim() === 'clear' || cmd.trim() === 'cls') {
+      history.value = []
+    } else if (!isTaskCompleted.value) {
+      history.value.push({ type: 'error', content: `Command not found or not matching task: ${cmd}` })
+      history.value.push({ type: 'info', content: `💡 提示：试试点击左侧的“问问 AI”？` })
+    }
+  }
+
+  scrollToBottom()
+}
+
+const nextTask = () => {
+  if (currentTaskIndex.value < tasks.length - 1) {
+    currentTaskIndex.value++
+    isTaskCompleted.value = false
+    isAiOpen.value = false
+    // Clear history to keep it clean? Or keep it? Let's keep it but maybe add a separator
+    history.value.push({ type: 'info', content: `--- 进入下一关: ${currentTask.value.title} ---` })
+    scrollToBottom()
+  }
+}
+
+const resetCurrentTask = () => {
+  isTaskCompleted.value = false
+  inputCmd.value = ''
+  isAiOpen.value = false
+  history.value = []
+}
+
+const resetAll = () => {
+  currentTaskIndex.value = 0
+  resetCurrentTask()
+}
+
+watch(currentOS, () => {
+  // When OS changes, prompt changes, reset history to look consistent
+  resetCurrentTask()
+})
+</script>
+
+<style scoped>
+.terminal-hands-on {
+  margin: 2rem 0;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+
+.lab-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+@media (max-width: 768px) {
+  .lab-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Left Panel */
+.task-panel {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--vp-c-divider);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.panel-title {
+  font-weight: bold;
+  color: var(--vp-c-brand);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.os-selector select {
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.task-content h3 {
+  margin: 0 0 10px 0;
+  font-size: 1.2rem;
+  color: var(--vp-c-text-1);
+}
+
+.task-desc {
+  color: var(--vp-c-text-2);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+/* AI Helper */
+.ai-helper {
+  margin-bottom: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.ai-header {
+  padding: 10px 15px;
+  background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: background 0.2s;
+}
+
+.ai-header:hover {
+  background: linear-gradient(to right, rgba(16, 185, 129, 0.2), transparent);
+}
+
+.ai-header.active .ai-arrow {
+  transform: rotate(180deg);
+}
+
+.ai-arrow {
+  margin-left: auto;
+  font-size: 0.8rem;
+  transition: transform 0.2s;
+}
+
+.ai-chat {
+  padding: 15px;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
+}
+
+.chat-bubble {
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  margin-bottom: 10px;
+  max-width: 90%;
+}
+
+.chat-bubble.user {
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-2);
+  margin-left: auto;
+  border-bottom-right-radius: 2px;
+}
+
+.chat-bubble.ai {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-dark);
+  margin-right: auto;
+  border-bottom-left-radius: 2px;
+}
+
+.copy-btn {
+  margin-top: 5px;
+  font-size: 0.8rem;
+  padding: 2px 8px;
+  border: 1px solid var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.copy-btn:hover {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+/* Result & Success */
+.expected-result {
+  margin-top: auto;
+  padding: 10px;
+  background: var(--vp-c-bg-mute);
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.expected-result .label {
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+}
+
+.success-message {
+  margin-top: auto;
+  padding: 15px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  border-radius: 8px;
+  color: #10b981;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.next-btn, .reset-btn {
+  margin-left: auto;
+  padding: 6px 16px;
+  background: #10b981;
+  color: white;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: transform 0.1s;
+}
+
+.next-btn:hover, .reset-btn:hover {
+  transform: scale(1.05);
+  background: #059669;
+}
+
+/* Right Panel: Terminal */
+.terminal-panel {
+  background: #1e1e1e;
+  color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+}
+
+.terminal-panel.win-cmd { background: #0c0c0c; color: #cccccc; font-family: 'Consolas', monospace; }
+.terminal-panel.win-ps { background: #012456; color: #ffffff; font-family: 'Consolas', monospace; }
+.terminal-panel.mac, .terminal-panel.linux { background: #2b2b2b; color: #f0f0f0; }
+
+.terminal-header {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27c93f; }
+
+.terminal-panel.win-cmd .dot, .terminal-panel.win-ps .dot { border-radius: 0; background: #ccc; }
+
+.terminal-header .title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  pointer-events: none;
+}
+
+.terminal-body {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+  cursor: text;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.line {
+  white-space: pre-wrap;
+  word-break: break-all;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.prompt {
+  margin-right: 8px;
+  color: #87d700;
+  font-weight: bold;
+}
+
+.terminal-panel.win-cmd .prompt { color: #cccccc; }
+.terminal-panel.win-ps .prompt { color: #ffffff; }
+
+.input-line {
+  display: flex;
+  align-items: center;
+}
+
+.input-line input {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  flex: 1;
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+
+.line.output {
+  color: inherit;
+  opacity: 0.9;
+  margin-bottom: 4px;
+}
+
+.line.error {
+  color: #ff5f56;
+}
+
+.line.info {
+  color: #27c93f;
+  margin: 8px 0;
+  font-style: italic;
+  opacity: 0.7;
+}
+</style>

docs/.vitepress/theme/index.js

@@ -22,10 +22,33 @@ import AdvancedTUIDemo from './components/appendix/terminal-intro/AdvancedTUIDem
 import ArchitectureDemo from './components/appendix/terminal-intro/ArchitectureDemo.vue'
 import TerminalDefinition from './components/appendix/terminal-intro/TerminalDefinition.vue'
 import TerminalOSDemo from './components/appendix/terminal-intro/TerminalOSDemo.vue'
+import TerminalHandsOn from './components/appendix/terminal-intro/TerminalHandsOn.vue'
+import TokenizationDemo from './components/appendix/llm-intro/TokenizationDemo.vue'
+import NextTokenPrediction from './components/appendix/llm-intro/NextTokenPrediction.vue'
+import TokenizerToMatrix from './components/appendix/llm-intro/TokenizerToMatrix.vue'
+import EmbeddingDemo from './components/appendix/llm-intro/EmbeddingDemo.vue'
+import TrainingInferenceDemo from './components/appendix/llm-intro/TrainingInferenceDemo.vue'
+import RNNvsTransformer from './components/appendix/llm-intro/RNNvsTransformer.vue'
+import PatchifyDemo from './components/appendix/vlm-intro/PatchifyDemo.vue'
+import ProjectorDemo from './components/appendix/vlm-intro/ProjectorDemo.vue'
+import VLMInferenceDemo from './components/appendix/vlm-intro/VLMInferenceDemo.vue'
+import LinearProjectionDemo from './components/appendix/vlm-intro/LinearProjectionDemo.vue'
+import PositionalEmbeddingDemo from './components/appendix/vlm-intro/PositionalEmbeddingDemo.vue'
+import AttentionDemo from './components/appendix/vlm-intro/AttentionDemo.vue'
+import TrainingPipelineDemo from './components/appendix/vlm-intro/TrainingPipelineDemo.vue'
+import ModelArchitectureComparisonDemo from './components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue'
+import ThinkingModelDemo from './components/appendix/llm-intro/ThinkingModelDemo.vue'
+import MoEDemo from './components/appendix/llm-intro/MoEDemo.vue'
+import LinearAttentionDemo from './components/appendix/llm-intro/LinearAttentionDemo.vue'
+import LlmQuickStartDemo from './components/appendix/llm-intro/LlmQuickStartDemo.vue'
+import FeatureAlignmentDemo from './components/appendix/vlm-intro/FeatureAlignmentDemo.vue'
+import VlmQuickStartDemo from './components/appendix/vlm-intro/VlmQuickStartDemo.vue'
 
 import EscapeParserDemo from './components/appendix/terminal-intro/EscapeParserDemo.vue'
 import CookedRawDemo from './components/appendix/terminal-intro/CookedRawDemo.vue'
 
+import ViTOutputDemo from './components/appendix/vlm-intro/ViTOutputDemo.vue'
+
 export default {
   extends: DefaultTheme,
   Layout,
@@ -47,6 +70,28 @@ export default {
     app.component('ArchitectureDemo', ArchitectureDemo)
     app.component('TerminalDefinition', TerminalDefinition)
     app.component('TerminalOSDemo', TerminalOSDemo)
+    app.component('TerminalHandsOn', TerminalHandsOn)
+    app.component('TokenizationDemo', TokenizationDemo)
+    app.component('NextTokenPrediction', NextTokenPrediction)
+    app.component('TokenizerToMatrix', TokenizerToMatrix)
+    app.component('EmbeddingDemo', EmbeddingDemo)
+    app.component('TrainingInferenceDemo', TrainingInferenceDemo)
+    app.component('RNNvsTransformer', RNNvsTransformer)
+    app.component('PatchifyDemo', PatchifyDemo)
+    app.component('ProjectorDemo', ProjectorDemo)
+    app.component('VLMInferenceDemo', VLMInferenceDemo)
+    app.component('LinearProjectionDemo', LinearProjectionDemo)
+    app.component('PositionalEmbeddingDemo', PositionalEmbeddingDemo)
+    app.component('AttentionDemo', AttentionDemo)
+    app.component('ViTOutputDemo', ViTOutputDemo)
+    app.component('TrainingPipelineDemo', TrainingPipelineDemo)
+    app.component('ModelArchitectureComparisonDemo', ModelArchitectureComparisonDemo)
+    app.component('ThinkingModelDemo', ThinkingModelDemo)
+    app.component('MoEDemo', MoEDemo)
+    app.component('LinearAttentionDemo', LinearAttentionDemo)
+    app.component('LlmQuickStartDemo', LlmQuickStartDemo)
+    app.component('FeatureAlignmentDemo', FeatureAlignmentDemo)
+    app.component('VlmQuickStartDemo', VlmQuickStartDemo)
   },
   setup() {
     const route = useRoute()

docs/zh-cn/appendix/terminal-intro.md

@@ -24,7 +24,23 @@
 
 :::
 
-### 0.1 为什么要放弃鼠标？(Why CLI?)
+### 0.1 实操演练：先玩玩看 (Hands-on Lab)
+
+光说不练假把式。在你了解枯燥的原理之前，我们先亲手体验一下“敲命令”的感觉。
+
+> 💡 **提示**：为了安全和方便，推荐你在下方的**网页模拟器**中操作。如果你有信心，也可以按照第 0 章的方法打开你电脑上真实的终端，跟随步骤一起练习（效果是一样的）。
+
+在这个练习中，你将学会：
+1.  查看当前有什么文件。
+2.  创建文件夹和文件。
+3.  删除它们。
+4.  **学会向 AI 提问**：当你忘记命令时，如何让 AI 告诉你答案。
+
+*请在下方选择你常用的操作系统，然后跟随引导开始操作：*
+
+<TerminalHandsOn />
+
+### 0.2 为什么要放弃鼠标？(Why CLI?)
 
 你可能会问：*“现在的图形界面（GUI）这么好用，鼠标点点就行，为什么还要对着黑底白字的窗口敲复杂的命令？”*
 
@@ -237,10 +253,6 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
 
 通过理解这些底层原理，你不再只是死记硬背命令，而是能真正理解每一次敲击键盘背后发生的逻辑流转。
 
-*最后，请在这个模拟的 Web 终端中，综合体验上述所有概念：*
-
-<WebTerminal />
-
 ## 附录：常用术语表 (Vocabulary)
 
 | 术语 | 英文 | 解释 |