feat: 更新附录交互组件和文档

docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue

@@ -1,333 +1,392 @@
 <template>
-  <div class="filesystem-demo">
-    <div class="demo-wrapper">
-      <!-- 文件树：逻辑视角 -->
-      <div class="logical-view">
-        <div class="view-title">
-          <span>📁 你的视角 (文件系统)</span>
-          <span class="subtitle">漂亮、整洁的目录树</span>
-        </div>
-
-        <div class="file-tree">
-          <div class="tree-node folder expanded">
-            <span class="icon">💾</span> D盘 (根目录)
+  <div class="demo">
+    <div class="title">📁 你看到的文件 vs 硬盘上的碎片</div>
+    
+    <div class="scene">
+      <!-- 文件视图 -->
+      <div class="file-view">
+        <div class="view-label">📂 你看到的（文件夹）</div>
+        <div class="folder-tree">
+          <div class="folder">
+            <span class="folder-icon">📁</span>
+            <span>照片</span>
           </div>
-          <div class="tree-children">
-            <div class="tree-node folder expanded">
-              <span class="icon">📂</span> 照片
+          <div class="files">
+            <div 
+              class="file-item"
+              :class="{ active: currentFile === 'pet' }"
+            >
+              <span class="file-icon">🖼️</span>
+              <span>宠物.jpg</span>
+              <span class="file-size">2.5MB</span>
             </div>
-            <div class="tree-children">
-              <div
-                class="tree-node file"
-                :class="{ active: activeFile === 'pet' }"
-                @click="selectFile('pet')"
-              >
-                <span class="icon">🖼️</span> 宠物.jpg
-                <span class="size-badge">3 块</span>
-              </div>
-              <div
-                class="tree-node file"
-                :class="{ active: activeFile === 'vacation' }"
-                @click="selectFile('vacation')"
-              >
-                <span class="icon">🖼️</span> 旅游.png
-                <span class="size-badge">2 块</span>
-              </div>
-            </div>
-
-            <div class="tree-node folder expanded">
-              <span class="icon">📂</span> 工作
-            </div>
-            <div class="tree-children">
-              <div
-                class="tree-node file"
-                :class="{ active: activeFile === 'doc' }"
-                @click="selectFile('doc')"
-              >
-                <span class="icon">📄</span> 总结.docx
-                <span class="size-badge">4 块</span>
-              </div>
+            <div 
+              class="file-item"
+              :class="{ active: currentFile === 'trip' }"
+            >
+              <span class="file-icon">🖼️</span>
+              <span>旅游.png</span>
+              <span class="file-size">1.8MB</span>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 翻译官动画 -->
-      <div class="translator">
-        <div class="arrow"></div>
-        <div class="badge">文件系统账本<br />(inode表)</div>
-        <div class="arrow"></div>
-      </div>
-
-      <!-- 磁盘块：物理视角 -->
-      <div class="physical-view">
-        <div class="view-title">
-          <span>🖨️ 硬盘的视角 (物理存储)</span>
-          <span class="subtitle">无序、零散的数据块</span>
-        </div>
-
-        <div class="disk-grid">
-          <div
-            v-for="block in 24"
-            :key="block"
-            class="disk-block"
-            :class="[getBlockOwner(block), { active: isBlockActive(block) }]"
+      <!-- 读取动画 -->
+      <div class="read-animation" v-if="isReading">
+        <div class="read-text">正在读取...</div>
+        <div class="read-blocks">
+          <div 
+            v-for="(block, idx) in readingBlocks" 
+            :key="idx"
+            class="read-block"
+            :class="{ read: idx <= readProgress }"
+            :style="{ animationDelay: idx * 0.1 + 's' }"
           >
             {{ block }}
           </div>
         </div>
       </div>
+
+      <!-- 硬盘视图 -->
+      <div class="disk-view">
+        <div class="view-label">💾 硬盘实际存储（数据块）</div>
+        <div class="disk-grid">
+          <div
+            v-for="n in 12"
+            :key="n"
+            class="disk-block"
+            :class="[
+              getBlockType(n),
+              { 
+                active: isReading && currentBlocks.includes(n),
+                reading: isReading && currentBlocks.indexOf(n) === readProgress
+              }
+            ]"
+          >
+            <span class="block-num">{{ n }}</span>
+            <span class="block-content">{{ getBlockContent(n) }}</span>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div class="explanation-box" v-if="activeFile">
-      <span v-if="activeFile === 'pet'">
-        💡 宠物.jpg 其实被切碎分别放在了第 3、8、14
-        块。文件系统帮你做好了翻译，你只需双击它！
-      </span>
-      <span v-if="activeFile === 'vacation'">
-        💡 旅游.png 放在了第 5、6 块。
-      </span>
-      <span v-if="activeFile === 'doc'">
-        💡 总结.docx 被分散存放在 10、11、18、22
-        块，如果没有文件系统，你得自己背下这些数字才能打开文件。
-      </span>
-    </div>
-    <div class="explanation-box default" v-else>
-      ☝️ 试着点击左侧的文件，看看它们在硬盘里到底长什么样。
+    <div class="explain">
+      <strong>💡 原理：</strong>文件系统把文件切成碎片存在硬盘各处（如宠物.jpg存在第3、7、11块），然后用"账本"记录位置。你看到的整齐文件夹只是账本上的记录。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 
-const activeFile = ref(null)
+const currentFile = ref('')
+const isReading = ref(false)
+const readProgress = ref(-1)
+const currentBlocks = ref([])
 
-// 映射关系伪造
-const fileMap = {
-  pet: [3, 8, 14],
-  vacation: [5, 6],
-  doc: [10, 11, 18, 22]
+// 文件存储位置
+const fileLocations = {
+  pet: [3, 7, 11],    // 宠物.jpg 存在第3、7、11块
+  trip: [5, 6]        // 旅游.png 存在第5、6块
 }
 
-const selectFile = (file) => {
-  activeFile.value = file
+// 每块的内容
+const blockContents = {
+  3: '宠-1',
+  7: '宠-2', 
+  11: '宠-3',
+  5: '旅-1',
+  6: '旅-2'
 }
 
-const getBlockOwner = (block) => {
-  for (const [key, blocks] of Object.entries(fileMap)) {
-    if (blocks.includes(block)) return `owner-${key}`
-  }
+let timer = null
+let phase = 0
+
+const getBlockType = (n) => {
+  if (fileLocations.pet.includes(n)) return 'pet'
+  if (fileLocations.trip.includes(n)) return 'trip'
   return 'empty'
 }
 
-const isBlockActive = (block) => {
-  if (!activeFile.value) return false
-  return fileMap[activeFile.value].includes(block)
+const getBlockContent = (n) => {
+  return blockContents[n] || ''
 }
+
+const readingBlocks = computed(() => {
+  return currentBlocks.value.map(b => blockContents[b] || '')
+})
+
+const runDemo = () => {
+  switch(phase) {
+    case 0: // 开始读取宠物.jpg
+      currentFile.value = 'pet'
+      currentBlocks.value = fileLocations.pet
+      isReading.value = true
+      readProgress.value = -1
+      phase = 1
+      break
+    case 1: // 逐块读取
+      if (readProgress.value < currentBlocks.value.length - 1) {
+        readProgress.value++
+      } else {
+        phase = 2
+      }
+      break
+    case 2: // 读取完成，暂停
+      isReading.value = false
+      phase = 3
+      break
+    case 3: // 开始读取旅游.png
+      currentFile.value = 'trip'
+      currentBlocks.value = fileLocations.trip
+      isReading.value = true
+      readProgress.value = -1
+      phase = 4
+      break
+    case 4: // 逐块读取
+      if (readProgress.value < currentBlocks.value.length - 1) {
+        readProgress.value++
+      } else {
+        phase = 5
+      }
+      break
+    case 5: // 重置
+      isReading.value = false
+      currentFile.value = ''
+      currentBlocks.value = []
+      phase = 0
+      break
+  }
+}
+
+onMounted(() => {
+  timer = setInterval(runDemo, 800)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 </script>
 
 <style scoped>
-.filesystem-demo {
-  background: var(--vp-c-bg-soft);
+.demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
-}
-
-.demo-wrapper {
-  display: flex;
-  align-items: stretch;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-@media (max-width: 768px) {
-  .demo-wrapper {
-    flex-direction: column;
-  }
-  .translator {
-    transform: rotate(90deg);
-    margin: 1rem 0;
-  }
-}
-
-.logical-view,
-.physical-view {
-  flex: 1;
-  background: var(--vp-c-bg-alt);
-  border-radius: 10px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.view-title {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px dashed var(--vp-c-divider);
-}
-.view-title span {
-  font-weight: bold;
-  font-size: 0.95rem;
-}
-.view-title .subtitle {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  font-weight: normal;
-  margin-top: 0.2rem;
-}
-
-/* File Tree Styles */
-.file-tree {
-  font-size: 0.9rem;
-}
-.tree-node {
-  padding: 0.4rem 0.5rem;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.tree-node:hover {
-  background: var(--vp-c-bg-mute);
-}
-.tree-node.file.active {
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand-1);
-  font-weight: bold;
-}
-.tree-children {
-  padding-left: 1.5rem;
-  border-left: 1px dashed var(--vp-c-divider);
-  margin-left: 0.6rem;
-}
-.size-badge {
-  margin-left: auto;
-  font-size: 0.7rem;
-  background: var(--vp-c-bg-mute);
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  color: var(--vp-c-text-2);
-}
-.tree-node.active .size-badge {
-  background: var(--vp-c-brand-1);
-  color: white;
-}
-
-/* Translator */
-.translator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-.translator .badge {
-  background: var(--vp-c-brand-1);
-  color: white;
-  padding: 0.5rem 1rem;
   border-radius: 8px;
-  font-size: 0.8rem;
-  font-weight: bold;
-  text-align: center;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
-}
-.arrow {
-  width: 2px;
-  height: 20px;
-  background: var(--vp-c-divider);
-  position: relative;
-}
-.arrow::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: -4px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: var(--vp-c-divider) transparent transparent transparent;
+  background: var(--vp-c-bg-soft);
+  padding: 16px;
+  margin: 1rem 0;
 }
 
-/* Disk Grid */
-.disk-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.4rem;
+.title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+  text-align: center;
 }
-.disk-block {
-  aspect-ratio: 1;
+
+.scene {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.file-view, .disk-view {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 6px;
+  padding: 10px;
 }
 
-.disk-block.owner-pet {
-  background: rgba(16, 185, 129, 0.1);
-  border-color: rgba(16, 185, 129, 0.3);
+.view-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
 }
-.disk-block.owner-vacation {
-  background: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
+
+.folder-tree {
+  padding-left: 8px;
 }
-.disk-block.owner-doc {
-  background: rgba(245, 158, 11, 0.1);
-  border-color: rgba(245, 158, 11, 0.3);
+
+.folder {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.folder-icon {
+  font-size: 16px;
+}
+
+.files {
+  padding-left: 20px;
+  border-left: 1px dashed var(--vp-c-divider);
+  margin-left: 8px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  transition: all 0.3s;
+}
+
+.file-item.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.file-icon {
+  font-size: 14px;
+}
+
+.file-size {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+}
+
+.file-item.active .file-size {
+  color: var(--vp-c-brand);
+}
+
+.read-animation {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+}
+
+.read-text {
+  font-size: 11px;
+  color: var(--vp-c-brand);
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.read-blocks {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+}
+
+.read-block {
+  width: 32px;
+  height: 24px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: var(--vp-c-text-3);
+  transition: all 0.2s;
+}
+
+.read-block.read {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+  animation: pulse 0.3s ease;
+}
+
+.disk-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+}
+
+.disk-block {
+  aspect-ratio: 1;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.disk-block.empty {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-3);
+}
+
+.disk-block.pet {
+  background: #16a34a22;
+  border-color: #16a34a55;
+  color: #16a34a;
+}
+
+.disk-block.trip {
+  background: #3b82f622;
+  border-color: #3b82f655;
+  color: #3b82f6;
 }
 
 .disk-block.active {
+  box-shadow: 0 0 8px currentColor;
+}
+
+.disk-block.reading {
   transform: scale(1.1);
+  font-weight: 600;
+  animation: glow 0.5s ease infinite alternate;
+}
+
+.disk-block.pet.reading {
+  background: #16a34a;
   color: white;
-  font-weight: bold;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  z-index: 2;
-}
-.disk-block.owner-pet.active {
-  background: var(--vp-c-success-1);
-  border-color: var(--vp-c-success-1);
-}
-.disk-block.owner-vacation.active {
-  background: var(--vp-c-brand-1);
-  border-color: var(--vp-c-brand-1);
-}
-.disk-block.owner-doc.active {
-  background: var(--vp-c-warning-1);
-  border-color: var(--vp-c-warning-1);
 }
 
-.explanation-box {
-  padding: 1rem;
-  background: rgba(16, 185, 129, 0.1);
-  border-left: 4px solid var(--vp-c-success-1);
-  border-radius: 0 8px 8px 0;
-  font-size: 0.95rem;
-  animation: fadeIn 0.3s;
+.disk-block.trip.reading {
+  background: #3b82f6;
+  color: white;
 }
-.explanation-box.default {
-  background: var(--vp-c-bg-alt);
-  border-left-color: var(--vp-c-text-3);
+
+.block-num {
+  font-size: 8px;
+  opacity: 0.6;
+  position: absolute;
+  top: 2px;
+  left: 3px;
+}
+
+.block-content {
+  font-weight: 600;
+}
+
+.explain {
+  font-size: 12px;
   color: var(--vp-c-text-2);
+  line-height: 1.5;
+  padding: 10px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+.explain strong { color: var(--vp-c-text-1); }
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+@keyframes glow {
+  from { box-shadow: 0 0 5px currentColor; }
+  to { box-shadow: 0 0 15px currentColor; }
 }
 </style>