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>
2026-02-20 01:03:38 +08:00
parent 8078ee201c
commit 66b2ba6e45
26 changed files with 29 additions and 124 deletions
@@ -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
  
@@ -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>
@@ -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>
@@ -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)
@@ -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)
@@ -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)
@@ -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>
@@ -219,7 +219,7 @@
 </template>

 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'

 const isRunning = ref(false)
 const simulationSpeed = ref(2)
@@ -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 偷任务。'

@@ -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()
@@ -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

  // 模拟任务处理
@@ -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']

@@ -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>
@@ -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>
@@ -190,7 +190,6 @@ const startIndex = () => {
  indexStep.value = 0
  indexSteps.value = ['根节点', '中间节点', '叶子节点']

-  const steps = ['根节点 (1-100)', '中间节点 (1-10)', '叶子节点 (找到 7)']
  let currentStep = 0

  const interval = setInterval(() => {
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'

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