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

docs/.vitepress/theme/components/appendix/data-encoding/AudioEncodingDemo.vue

@@ -9,8 +9,8 @@
       <div class="slider-group">
         <label>采样频率：{{ sampleRate }} 次/秒</label>
         <input 
-          type="range" 
           v-model="sliderValue" 
+          type="range" 
           min="1" 
           max="50" 
           step="1"

docs/.vitepress/theme/components/appendix/data-encoding/ImageEncodingDemo.vue

@@ -31,7 +31,7 @@
           </span>
         </div>
         
-        <div class="inspection-box" v-if="hoveredPixel">
+        <div v-if="hoveredPixel" class="inspection-box">
           <div class="preview-color" :style="{ backgroundColor: hoveredPixel.color }"></div>
           <div class="preview-info">
             <div class="info-row">
@@ -44,7 +44,7 @@
             </div>
           </div>
         </div>
-        <div class="inspection-box empty" v-else>
+        <div v-else class="inspection-box empty">
           将鼠标悬停在左侧画布的方块上
         </div>
       </div>

docs/.vitepress/theme/components/appendix/data-encoding/StoragePyramidDemo.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div class="detail-panel" v-if="currentLayer">
+    <div v-if="currentLayer" class="detail-panel">
       <div class="detail-header">
         <span class="detail-icon">{{ currentLayer.icon }}</span>
         <span class="detail-name">{{ currentLayer.name }}</span>