fix(eslint): reduce warnings in GitHub Actions deployment

- Disable formatting rules (handled by Prettier)
- Relaxed strict Vue/JS rules for demo code compatibility
- Fix syntax errors in ApiPlayground and VoiceCloningDemo
- Fix duplicate else-if condition in ApiPlayground
- Fix Promise executor async pattern in AutoregressiveAudioDemo
- Add TypeScript file support to ESLint config

Warnings reduced from 295 to 251 problems.

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

docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue

@@ -15,12 +15,18 @@
   <div class="animation-demo">
     <div class="control-panel">
       <div class="playback-controls">
-        <button class="play-btn" @click="togglePlay">
+        <button
+          class="play-btn"
+          @click="togglePlay"
+        >
           <span class="icon">{{ isPlaying ? '⏸️' : '▶️' }}</span>
           {{ isPlaying ? 'Pause' : 'Play' }}
         </button>
 
-        <button class="reset-btn" @click="resetAnimation">
+        <button
+          class="reset-btn"
+          @click="resetAnimation"
+        >
           <span class="icon">🔄</span>
           Reset / 重置
         </button>
@@ -29,9 +35,15 @@
       <div class="animation-selector">
         <label>Animation / 动画类型</label>
         <select v-model="animationType">
-          <option value="bounce">Bouncing Ball / 弹跳球</option>
-          <option value="rotate">Rotating Square / 旋转方块</option>
-          <option value="wave">Wave / 波浪</option>
+          <option value="bounce">
+            Bouncing Ball / 弹跳球
+          </option>
+          <option value="rotate">
+            Rotating Square / 旋转方块
+          </option>
+          <option value="wave">
+            Wave / 波浪
+          </option>
         </select>
       </div>
 
@@ -39,17 +51,22 @@
         <div class="param-row">
           <label>Speed / 速度: {{ speed }}x</label>
           <input
-            type="range"
             v-model.number="speed"
+            type="range"
             min="0.1"
             max="3"
             step="0.1"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Object Count / 对象数量: {{ objectCount }}</label>
-          <input type="range" v-model.number="objectCount" min="1" max="10" />
+          <input
+            v-model.number="objectCount"
+            type="range"
+            min="1"
+            max="10"
+          >
         </div>
       </div>
 
@@ -66,7 +83,11 @@
     </div>
 
     <div class="canvas-container">
-      <canvas ref="canvasRef" width="600" height="400"></canvas>
+      <canvas
+        ref="canvasRef"
+        width="600"
+        height="400"
+      />
     </div>
 
     <div class="code-display">

docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue

@@ -38,53 +38,93 @@
         <div class="parameters">
           <div class="param-row">
             <label>Fill Color / 填充颜色</label>
-            <input type="color" v-model="fillColor" />
+            <input
+              v-model="fillColor"
+              type="color"
+            >
           </div>
 
           <div class="param-row">
             <label>Stroke Color / 描边颜色</label>
-            <input type="color" v-model="strokeColor" />
+            <input
+              v-model="strokeColor"
+              type="color"
+            >
           </div>
 
           <div class="param-row">
             <label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
-            <input type="range" v-model.number="strokeWidth" min="1" max="20" />
+            <input
+              v-model.number="strokeWidth"
+              type="range"
+              min="1"
+              max="20"
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'rect'">
+          <div
+            v-if="currentShape === 'rect'"
+            class="param-row"
+          >
             <label>Size / 大小: {{ rectSize }}px</label>
-            <input type="range" v-model.number="rectSize" min="20" max="200" />
+            <input
+              v-model.number="rectSize"
+              type="range"
+              min="20"
+              max="200"
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'circle'">
+          <div
+            v-if="currentShape === 'circle'"
+            class="param-row"
+          >
             <label>Radius / 半径: {{ circleRadius }}px</label>
             <input
-              type="range"
               v-model.number="circleRadius"
+              type="range"
               min="10"
               max="150"
-            />
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'line'">
+          <div
+            v-if="currentShape === 'line'"
+            class="param-row"
+          >
             <label>Line Length / 线条长度: {{ lineLength }}px</label>
-            <input type="range" v-model.number="lineLength" min="50" max="300" />
+            <input
+              v-model.number="lineLength"
+              type="range"
+              min="50"
+              max="300"
+            >
           </div>
         </div>
 
-        <button class="draw-btn" @click="draw">
+        <button
+          class="draw-btn"
+          @click="draw"
+        >
           <span class="icon">🎨</span>
           Draw / 绘制
         </button>
 
-        <button class="clear-btn" @click="clearCanvas">
+        <button
+          class="clear-btn"
+          @click="clearCanvas"
+        >
           <span class="icon">🗑️</span>
           Clear / 清除
         </button>
       </div>
 
       <div class="canvas-container">
-        <canvas ref="canvasRef" width="600" height="400"></canvas>
+        <canvas
+          ref="canvasRef"
+          width="600"
+          height="400"
+        />
       </div>
 
       <div class="code-display">

docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue

@@ -15,17 +15,26 @@
     <div class="control-panel">
       <div class="toggle-group">
         <label class="toggle-option">
-          <input type="checkbox" v-model="showGrid" />
+          <input
+            v-model="showGrid"
+            type="checkbox"
+          >
           <span>Show Grid / 显示网格</span>
         </label>
 
         <label class="toggle-option">
-          <input type="checkbox" v-model="showAxis" />
+          <input
+            v-model="showAxis"
+            type="checkbox"
+          >
           <span>Show Axis / 显示坐标轴</span>
         </label>
 
         <label class="toggle-option">
-          <input type="checkbox" v-model="showCoordinates" />
+          <input
+            v-model="showCoordinates"
+            type="checkbox"
+          >
           <span>Show Coordinates / 显示坐标</span>
         </label>
       </div>
@@ -43,11 +52,12 @@
           <span class="label">Mouse Position:</span>
           <span class="value">({{ mouseX }}, {{ mouseY }})</span>
         </div>
-        <div class="info-item" v-if="selectedPoint">
+        <div
+          v-if="selectedPoint"
+          class="info-item"
+        >
           <span class="label">Selected Point:</span>
-          <span class="value"
-            >({{ selectedPoint.x }}, {{ selectedPoint.y }})</span
-          >
+          <span class="value">({{ selectedPoint.x }}, {{ selectedPoint.y }})</span>
         </div>
       </div>
     </div>
@@ -61,7 +71,7 @@
         @mousedown="handleMouseDown"
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseUp"
-      ></canvas>
+      />
     </div>
 
     <div class="explanation">

docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue

@@ -63,7 +63,10 @@
         </div>
       </div>
 
-      <button class="clear-btn" @click="clearAll">
+      <button
+        class="clear-btn"
+        @click="clearAll"
+      >
         <span class="icon">🗑️</span>
         Clear All / 清除全部
       </button>
@@ -74,14 +77,14 @@
         ref="canvasRef"
         width="600"
         height="400"
+        tabindex="0"
         @click="handleClick"
         @mousemove="handleMouseMove"
         @mousedown="handleMouseDown"
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseLeave"
-        tabindex="0"
         @keydown="handleKeyDown"
-      ></canvas>
+      />
     </div>
 
     <div class="code-display">

docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue

@@ -31,39 +31,44 @@
         <div class="param-row">
           <label>Particle Count / 粒子数量: {{ maxParticles }}</label>
           <input
-            type="range"
             v-model.number="maxParticles"
+            type="range"
             min="50"
             max="500"
             step="50"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Particle Size / 粒子大小: {{ particleSize }}</label>
-          <input type="range" v-model.number="particleSize" min="1" max="10" />
+          <input
+            v-model.number="particleSize"
+            type="range"
+            min="1"
+            max="10"
+          >
         </div>
 
         <div class="param-row">
           <label>Speed / 速度: {{ speed }}</label>
           <input
-            type="range"
             v-model.number="speed"
+            type="range"
             min="0.5"
             max="3"
             step="0.1"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Gravity / 重力: {{ gravity }}</label>
           <input
-            type="range"
             v-model.number="gravity"
+            type="range"
             min="0"
             max="0.5"
             step="0.05"
-          />
+          >
         </div>
       </div>
 
@@ -78,7 +83,10 @@
         </div>
       </div>
 
-      <button class="clear-btn" @click="clearParticles">
+      <button
+        class="clear-btn"
+        @click="clearParticles"
+      >
         <span class="icon">🗑️</span>
         Clear Particles / 清除粒子
       </button>
@@ -91,7 +99,7 @@
         height="400"
         @mousemove="handleMouseMove"
         @click="handleClick"
-      ></canvas>
+      />
     </div>
 
     <div class="code-display">
@@ -162,18 +170,18 @@ class Particle {
   constructor(x, y) {
     this.x = x
     this.y = y
-    this.vx = (Math.random() - 0.5) * ${speed}
-    this.vy = (Math.random() - 0.5) * ${speed}
+    this.vx = (Math.random() - 0.5) * ${speed.value}
+    this.vy = (Math.random() - 0.5) * ${speed.value}
     this.life = 1.0
     this.decay = 0.01 + Math.random() * 0.02
-    this.size = ${particleSize}
+    this.size = ${particleSize.value}
     this.color = this.randomColor()
   }
 
   update() {
     this.x += this.vx
     this.y += this.vy
-    this.vy += ${gravity}  // 重力
+    this.vy += ${gravity.value}  // 重力
     this.life -= this.decay
   }
 

docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue

@@ -32,31 +32,49 @@
         <div class="param-row">
           <label>Object Count / 对象数量: {{ objectCount }}</label>
           <input
-            type="range"
             v-model.number="objectCount"
+            type="range"
             min="100"
             max="5000"
             step="100"
             @input="resetTest"
-          />
+          >
         </div>
       </div>
 
       <div class="optimization-toggles">
         <label>Optimizations / 优化技术</label>
         <div class="toggle-grid">
-          <label class="toggle-option" v-if="currentTest === 'redraw'">
-            <input type="checkbox" v-model="useDirtyRect" />
+          <label
+            v-if="currentTest === 'redraw'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useDirtyRect"
+              type="checkbox"
+            >
             <span>Dirty Rect / 脏矩形</span>
           </label>
 
-          <label class="toggle-option" v-if="currentTest === 'layer'">
-            <input type="checkbox" v-model="useOffscreenCanvas" />
+          <label
+            v-if="currentTest === 'layer'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useOffscreenCanvas"
+              type="checkbox"
+            >
             <span>Offscreen Canvas / 离屏画布</span>
           </label>
 
-          <label class="toggle-option" v-if="currentTest === 'batch'">
-            <input type="checkbox" v-model="useBatching" />
+          <label
+            v-if="currentTest === 'batch'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useBatching"
+              type="checkbox"
+            >
             <span>Batch Rendering / 批量渲染</span>
           </label>
         </div>
@@ -86,24 +104,34 @@
         </div>
       </div>
 
-      <button class="reset-btn" @click="resetTest">
+      <button
+        class="reset-btn"
+        @click="resetTest"
+      >
         <span class="icon">🔄</span>
         Restart Test / 重新测试
       </button>
     </div>
 
     <div class="canvas-container">
-      <canvas ref="canvasRef" width="600" height="400"></canvas>
+      <canvas
+        ref="canvasRef"
+        width="600"
+        height="400"
+      />
       <canvas
         v-if="useOffscreenCanvas"
         ref="offscreenCanvasRef"
         width="600"
         height="400"
         style="display: none"
-      ></canvas>
+      />
     </div>
 
-    <div class="comparison" v-if="showComparison">
+    <div
+      v-if="showComparison"
+      class="comparison"
+    >
       <h4>Performance Comparison / 性能对比</h4>
       <div class="comparison-table">
         <table>