fix: resolve all ESLint errors in Vue components

Fixed 22 ESLint errors across 26 Vue component files:
- Removed TypeScript type annotations from ReadingProgress.vue (converted to JS)
- Removed unused variables, imports, and duplicate function declarations
- Fixed HTML parsing errors (invalid attribute names, unclosed tags)
- Added missing :key directives to v-for loops
- Fixed duplicate object keys (backgroundImage)
- Replaced special characters in comments to avoid parsing issues
- Fixed malformed HTML tags (v-else", 003e attributes)

All warnings were left unchanged as requested. Build now passes with 0 errors.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

docs/.vitepress/theme/components/ReadingProgress.vue

@@ -35,21 +35,21 @@
   </Transition>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 
 const progress = ref(0)
 const showProgress = ref(false)
 const showArrow = ref(false)
-// 圆周长 = 2 * PI * r, r=24
+// Circle circumference = 2 * PI * r, where r=24
 const circumference = 2 * Math.PI * 24
-let scrollTimer: number | null = null
+let scrollTimer = null
 
 // 拖拽相关状态
 const isDragging = ref(false)
 const startY = ref(0)
 const startProgress = ref(0)
-let dragRafId: number | null = null
+let dragRafId = null
 
 const updateProgress = () => {
   // 拖拽时不更新进度，避免冲突
@@ -79,7 +79,7 @@ const updateProgress = () => {
 }
 
 // 开始拖拽
-const startDrag = (e: MouseEvent | TouchEvent) => {
+const startDrag = (e) => {
   e.preventDefault()
   
   isDragging.value = true
@@ -94,7 +94,7 @@ const startDrag = (e: MouseEvent | TouchEvent) => {
 }
 
 // 拖拽中
-const onDrag = (e: MouseEvent | TouchEvent) => {
+const onDrag = (e) => {
   if (!isDragging.value) return
   e.preventDefault()
   
@@ -150,7 +150,7 @@ const endDrag = () => {
 }
 
 // 点击回到顶部
-const handleClick = (e: MouseEvent) => {
+const handleClick = (e) => {
   // 如果是拖拽结束后的点击，不触发回到顶部
   if (isDragging.value) return
   

docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue

@@ -153,7 +153,7 @@
 
     <div class="info-box">
       <span class="icon">💡</span>
-      <strong>核心指标：</strong>命中率应该 > 80%，响应时间 < 10ms，内存使用 < 80%。如果命中率突然下降，可能是缓存穿透或雪崩；如果响应时间变长，可能是缓存满了。
+      <strong>核心指标：</strong>命中率应该 &gt; 80%，响应时间 &lt; 10ms，内存使用 &lt; 80%。如果命中率突然下降，可能是缓存穿透或雪崩；如果响应时间变长，可能是缓存满了。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue

@@ -253,27 +253,6 @@ const resetDemo = () => {
 const uploadProgress = computed(() => {
   return Math.round((stats.value.uploadedChunks / stats.value.totalChunks) * 100)
 })
-
-// 方法
-const selectMethod = (id) => {
-  selectedMethod.value = id
-  resetDemo()
-}
-
-const simulateCacheHit = () => {
-  resetDemo()
-  currentStep.value = 4
-}
-
-const simulateCacheMiss = () => {
-  resetDemo()
-  currentStep.value = 4
-}
-
-const resetDemo = () => {
-  currentStep.value = 0
-  parallelActive.value = 0
-}
 </script>
 
 <style scoped>

docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue

@@ -69,7 +69,7 @@
             :key="device.name"
             class="device"
             :class="device.type"
-            003e
+          >
             <div
             class="device-icon"
             @mouseenter="hoverDevice = device.name"
@@ -214,11 +214,10 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 const viewMode = ref('full')
 const showDetails = ref(false)

docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue

@@ -83,7 +83,7 @@
             </div>
 
             <div
-              v-for="(task, idx) in tasks"
+              v-for="task in tasks"
               :key="task.id"
               class="thread-row"
             >
@@ -165,7 +165,6 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 
-const comparisonMode = ref('memory')
 const coroutineCount = ref(1000)
 const isRunning = ref(false)
 const showDetails = ref(false)

docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue

@@ -91,7 +91,7 @@
 
         <div class="task-timeline">
           <div
-            v-for="(task, idx) in demoTasks"
+            v-for="task in demoTasks"
             :key="task.id"
             class="task-row"
           >
@@ -184,7 +184,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const demoMode = ref('concurrent')
 const isRunning = ref(false)

docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue

@@ -276,47 +276,9 @@ const insightDescription = computed(() => {
 })
 
 // 方法
-function addThread() {
-  // 模拟添加线程
-}
-
-function killThread() {
-  // 模拟结束线程
-}
-
-function simulateCrash() {
-  // 模拟崩溃
-}
-
 function reset() {
   coroutineCount.value = 1000
 }
-
-function startSimulation() {
-  // 开始模拟
-}
-
-function toggleSimulation() {
-  // 切换模拟状态
-}
-
-function pauseSimulation() {
-  // 暂停模拟
-}
-
-function runSimulation() {
-  // 运行模拟
-}
-
-function stateText(state) {
-  const texts = {
-    ready: '就绪',
-    running: '运行中',
-    blocked: '阻塞',
-    completed: '已完成'
-  }
-  return texts[state] || state
-}
 </script>
 
 <style scoped>

docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue

@@ -219,7 +219,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const isRunning = ref(false)
 const simulationSpeed = ref(2)

docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue

@@ -167,7 +167,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const gmpDescription = 'G (Goroutine): 待执行的任务。M (Machine): 操作系统线程，执行 G 的载体。P (Processor): 逻辑处理器，提供执行上下文。G 先放入 P 的本地队列，P 与 M 绑定后，M 从 P 获取 G 执行。当本地队列空时，会从全局队列或其他 P 偷任务。'
 

docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue

@@ -145,26 +145,6 @@ const currentInfo = computed(() => {
   }
 })
 
-function createProcess() {
-  if (processes.value.length >= 4) return
-
-  const id = processes.value.length + 1
-  const size = 20 + Math.random() * 10
-
-  processes.value.push({
-    id,
-    pid: pidCounter++,
-    size,
-    color: colors[id - 1],
-    codeSize: Math.floor(size * 0.15),
-    dataSize: Math.floor(size * 0.1),
-    heapSize: Math.floor(size * 0.6),
-    stackSize: Math.floor(size * 0.15),
-    crashed: false,
-    active: true
-  })
-}
-
 function killProcess() {
   if (processes.value.length === 0) return
   processes.value.pop()

docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue

@@ -164,7 +164,6 @@ async function startSimulation() {
   isRunning.value = true
 
   const startTime = Date.now()
-  const taskCount = pendingTasks.value.length
   const baseSwitchCost = model.value === 'process' ? 10 : model.value === 'thread' ? 2 : 1
 
   // 模拟任务处理

docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue

@@ -176,7 +176,6 @@ const startTime = ref(null)
 
 let animationId = null
 let currentThreadIndex = 0
-let timeQuantum = 50 // 时间片长度
 
 const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff']
 

docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue

@@ -27,11 +27,9 @@ const currentCost = computed(() => (totalTokens.value / 1000 * costPer1kTokens).
 const systemHeight = computed(() => (systemPromptTokens / windowLimit) * 100)
 const inputHeight = computed(() => (currentInputTokens / windowLimit) * 100)
 // History 高度展示逻辑：
-// 我们希望展示“总高度”，即使超过 100%。
+// 我们希望展示"总高度"，即使超过 100%。
 // 父容器会限制显示区域，溢出部分通过视觉暗示。
 const historyHeight = computed(() => (historyTokens.value / windowLimit) * 100)
-
-const totalHeight = computed(() => systemHeight.value + historyHeight.value + inputHeight.value)
 </script>
 
 <template>

docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceActionDemo.vue

@@ -9,7 +9,7 @@
 -->
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed } from 'vue'
 
 const scenarios = {
   coding: {
@@ -142,16 +142,6 @@ const prevStep = () => {
     currentStepIndex.value--
   }
 }
-
-// Visual helpers
-const getLayerStyle = (layerId) => {
-  const isActive = (layer) => {
-    // Logic to highlight active layer based on step action could go here
-    // For now, simple static colors
-    return true
-  }
-  return {}
-}
 </script>
 
 <template>

docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue

@@ -190,7 +190,6 @@ const startIndex = () => {
   indexStep.value = 0
   indexSteps.value = ['根节点', '中间节点', '叶子节点']
 
-  const steps = ['根节点 (1-100)', '中间节点 (1-10)', '叶子节点 (找到 7)']
   let currentStep = 0
 
   const interval = setInterval(() => {

docs/.vitepress/theme/components/appendix/database-intro/DatabaseIndexDemo.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const searchQuery = ref(55)
 const isSearching = ref(false)

docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue

@@ -67,7 +67,7 @@
           <!-- 数据区域 -->
           <g class="data-areas">
             <polygon
-              v-for="(tool, toolIndex) in bundlers"
+              v-for="tool in bundlers"
               :key="tool.id"
               :points="getDataPoints(tool.scores)"
               :fill="tool.color"

docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue

@@ -233,7 +233,7 @@
       </div>
       <div class="timeline-bar">
         <div
-          v-for="(step, index) in timelineSteps"
+          v-for="step in timelineSteps"
           :key="step.name"
           class="timeline-segment"
           :class="{ active: currentStep === step.name }"

docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue

@@ -440,7 +440,7 @@ server {
   }
 ]
 
-const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentConfig.value))
+const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentAuth.value))
 </script>
 
 <style scoped>

docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue

@@ -75,6 +75,7 @@
           />
           <circle
             v-for="(c, i) in main"
+            :key="i"
             :cx="60 + i * 50"
             cy="40"
             r="8"
@@ -82,6 +83,7 @@
           />
           <circle
             v-for="(c, i) in feat"
+            :key="i"
             :cx="180 + i * 50"
             cy="80"
             r="8"

docs/.vitepress/theme/components/appendix/image-gen-intro/LoRADemo.vue

@@ -285,7 +285,7 @@
         <p>
           <span class="icon">💡</span>
           <strong>LoRA 原理：</strong>
-          LoRA 通过在原始权重矩阵旁边添加低秩矩阵来进行微调，只训练少量参数（通常 < 1%），就能实现特定风格或角色的学习。相比完整微调，LoRA 文件小、训练快、可组合使用。
+          LoRA 通过在原始权重矩阵旁边添加低秩矩阵来进行微调，只训练少量参数（通常 &lt; 1%），就能实现特定风格或角色的学习。相比完整微调，LoRA 文件小、训练快、可组合使用。
         </p>
       </div>
     </el-card>

docs/.vitepress/theme/components/appendix/javascript-intro/ScopeDemo.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const activeScope = ref('global')
 const explanation = ref('')
@@ -65,7 +65,7 @@ updateExplanation()
       <!-- 作用域层级图 -->
       <div class="scope-levels">
         <div
-          v-for="(scope, index) in scopes"
+          v-for="scope in scopes"
           :key="scope.id"
           class="level"
           :class="{ active: activeScope === scope.id, dimmed: activeScope !== scope.id }"

docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue

@@ -59,7 +59,7 @@
           <div class="health-indicator">
             <span v-if="server.status === 'healthy'">✅</span>
             <span v-else-if="server.status === 'unhealthy'">❌</span>
-            <span v-else">🔄</span>
+            <span v-else>🔄</span>
           </div>
         </div>
       </div>

docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue

@@ -179,7 +179,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 
 const currentStrategy = ref('performance')
 const totalTraffic = ref(1000)

docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue

@@ -63,7 +63,7 @@
 
       <div class="spans">
         <div
-          v-for="(span, index) in spans"
+          v-for="span in spans"
           :key="span.id"
           class="span-row"
         >

docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue

@@ -135,7 +135,6 @@ const getPatchStyle = (n) => {
   const isPatchified = currentStep.value >= 2
 
   return {
-    backgroundImage: complexBg,
     backgroundPosition: `${posX}px ${posY}px`,
     backgroundSize: '280px 280px',
     // In Step 0, patches are hidden to show pure container background