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/browser-rendering-pipeline/CompositeDemo.vue

@@ -28,7 +28,9 @@
 
       <div class="composite-result">
         <div class="result-box">
-          <div class="result-title">合成结果</div>
+          <div class="result-title">
+            合成结果
+          </div>
           <div class="result-display">
             <div
               v-for="layer in layers"
@@ -44,7 +46,10 @@
       </div>
 
       <div class="control-panel">
-        <button class="action-btn" @click="toggleAnimation">
+        <button
+          class="action-btn"
+          @click="toggleAnimation"
+        >
           {{ isAnimating ? '⏸ 暂停动画' : '▶️ 开始动画' }}
         </button>
       </div>

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue

@@ -13,7 +13,9 @@
     <div class="demo-content">
       <div class="trees-container">
         <div class="tree-section">
-          <div class="tree-title">DOM树</div>
+          <div class="tree-title">
+            DOM树
+          </div>
           <div class="tree dom-tree">
             <div class="tree-node">
               <span class="node-tag">&lt;html&gt;</span>
@@ -47,10 +49,14 @@
           </div>
         </div>
 
-        <div class="plus-sign">+</div>
+        <div class="plus-sign">
+          +
+        </div>
 
         <div class="tree-section">
-          <div class="tree-title">CSSOM树</div>
+          <div class="tree-title">
+            CSSOM树
+          </div>
           <div class="tree cssom-tree">
             <div class="tree-node">
               <span class="node-tag">body</span>
@@ -84,10 +90,14 @@
           </div>
         </div>
 
-        <div class="equal-sign">=</div>
+        <div class="equal-sign">
+          =
+        </div>
 
         <div class="tree-section">
-          <div class="tree-title">渲染树</div>
+          <div class="tree-title">
+            渲染树
+          </div>
           <div class="tree render-tree">
             <div class="tree-node">
               <span class="node-tag render-node">div</span>
@@ -103,11 +113,11 @@
 
       <div class="legend">
         <div class="legend-item">
-          <span class="legend-dot highlight-node"></span>
+          <span class="legend-dot highlight-node" />
           <span class="legend-text">可见节点</span>
         </div>
         <div class="legend-item">
-          <span class="legend-dot hidden-node"></span>
+          <span class="legend-dot hidden-node" />
           <span class="legend-text">不可见节点（不包含在渲染树中）</span>
         </div>
       </div>

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue

@@ -10,13 +10,25 @@
       <div class="control-panel">
         <div class="control-group">
           <label>选择要修改的属性：</label>
-          <select v-model="selectedProperty" @change="resetDemo">
-            <option value="transform">transform: translateY() (只触发合成)</option>
-            <option value="width">width (触发重排)</option>
-            <option value="marginLeft">margin-left (触发重排)</option>
+          <select
+            v-model="selectedProperty"
+            @change="resetDemo"
+          >
+            <option value="transform">
+              transform: translateY() (只触发合成)
+            </option>
+            <option value="width">
+              width (触发重排)
+            </option>
+            <option value="marginLeft">
+              margin-left (触发重排)
+            </option>
           </select>
         </div>
-        <button class="toggle-btn" @click="toggleAnimation">
+        <button
+          class="toggle-btn"
+          @click="toggleAnimation"
+        >
           {{ isAnimating ? '停止动画' : '开始动画' }}
         </button>
       </div>
@@ -38,11 +50,17 @@
         <div class="stats-panel">
           <div class="stat-item">
             <span class="stat-label">触发阶段：</span>
-            <span class="stat-value" :class="statClass">{{ currentStage }}</span>
+            <span
+              class="stat-value"
+              :class="statClass"
+            >{{ currentStage }}</span>
           </div>
           <div class="stat-item">
             <span class="stat-label">性能影响：</span>
-            <span class="stat-value" :class="performanceClass">{{ performanceImpact }}</span>
+            <span
+              class="stat-value"
+              :class="performanceClass"
+            >{{ performanceImpact }}</span>
           </div>
           <div class="stat-item">
             <span class="stat-label">是否影响其他元素：</span>

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue

@@ -14,19 +14,28 @@
       <div class="event-loop-flow">
         <div class="flow-container">
           <div class="flow-section main-thread">
-            <div class="section-title">主线程（执行栈）</div>
+            <div class="section-title">
+              主线程（执行栈）
+            </div>
             <div class="execution-box">
-              <div class="exec-item" :class="{ active: currentStep === 'script' }">
+              <div
+                class="exec-item"
+                :class="{ active: currentStep === 'script' }"
+              >
                 <span class="exec-label">同步代码</span>
               </div>
             </div>
           </div>
 
           <div class="flow-section task-queues">
-            <div class="section-title">任务队列</div>
+            <div class="section-title">
+              任务队列
+            </div>
             <div class="queues-container">
               <div class="queue-box micro">
-                <div class="queue-title">微任务队列（优先级高）</div>
+                <div class="queue-title">
+                  微任务队列（优先级高）
+                </div>
                 <div class="queue-items">
                   <div
                     v-for="task in microTasks"
@@ -40,7 +49,9 @@
               </div>
 
               <div class="queue-box macro">
-                <div class="queue-title">宏任务队列（优先级低）</div>
+                <div class="queue-title">
+                  宏任务队列（优先级低）
+                </div>
                 <div class="queue-items">
                   <div
                     v-for="task in macroTasks"
@@ -58,7 +69,9 @@
       </div>
 
       <div class="code-example">
-        <div class="example-title">代码示例</div>
+        <div class="example-title">
+          代码示例
+        </div>
         <pre class="code-block"><code>console.log('1')
 
 setTimeout(() => console.log('2'), 0)  // 宏任务
@@ -71,7 +84,10 @@ console.log('4')
       </div>
 
       <div class="control-panel">
-        <button class="run-btn" @click="runDemo">
+        <button
+          class="run-btn"
+          @click="runDemo"
+        >
           {{ isRunning ? '🔄 运行中...' : '▶️ 运行演示' }}
         </button>
       </div>

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue

@@ -19,21 +19,39 @@
             <div class="layer-header">
               <span class="layer-icon">{{ layer.icon }}</span>
               <span class="layer-name">{{ layer.name }}</span>
-              <span v-if="layer.isPromoted" class="promoted-badge">GPU层</span>
+              <span
+                v-if="layer.isPromoted"
+                class="promoted-badge"
+              >GPU层</span>
             </div>
             <div class="layer-content">
-              <div v-if="layer.id === 'background'" class="background-box"></div>
-              <div v-if="layer.id === 'card'" class="card-box">
-                <div class="card-title">卡片</div>
+              <div
+                v-if="layer.id === 'background'"
+                class="background-box"
+              />
+              <div
+                v-if="layer.id === 'card'"
+                class="card-box"
+              >
+                <div class="card-title">
+                  卡片
+                </div>
+              </div>
+              <div
+                v-if="layer.id === 'button'"
+                class="button-box"
+              >
+                按钮
               </div>
-              <div v-if="layer.id === 'button'" class="button-box">按钮</div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="properties-panel">
-        <div class="panel-title">触发新层的 CSS 属性：</div>
+        <div class="panel-title">
+          触发新层的 CSS 属性：
+        </div>
         <div class="property-list">
           <div
             v-for="prop in promotedProperties"

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue

@@ -13,7 +13,9 @@
     <div class="demo-content">
       <div class="performance-comparison">
         <div class="comparison-section">
-          <div class="section-title">❌ 不好的做法</div>
+          <div class="section-title">
+            ❌ 不好的做法
+          </div>
           <div class="code-block">
             <div class="code-line">
               <span class="code-comment">// 触发重排和重绘</span>
@@ -22,30 +24,39 @@
               <span class="code-keyword">function</span> <span class="code-func">animate</span>() {
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.width = <span class="code-string">'100px'</span>
+              <span class="code-indent" />element.style.width = <span class="code-string">'100px'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.height = <span class="code-string">'100px'</span>
+              <span class="code-indent" />element.style.height = <span class="code-string">'100px'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
+              <span class="code-indent" /><span class="code-func">requestAnimationFrame</span>(animate)
             </div>
             <div class="code-line">
               }
             </div>
           </div>
           <div class="performance-meter bad">
-            <div class="meter-label">性能开销</div>
+            <div class="meter-label">
+              性能开销
+            </div>
             <div class="meter-bar">
-              <div class="meter-fill bad-fill" style="width: 90%"></div>
+              <div
+                class="meter-fill bad-fill"
+                style="width: 90%"
+              />
             </div>
           </div>
         </div>
 
-        <div class="vs-divider">VS</div>
+        <div class="vs-divider">
+          VS
+        </div>
 
         <div class="comparison-section">
-          <div class="section-title good">✅ 优化做法</div>
+          <div class="section-title good">
+            ✅ 优化做法
+          </div>
           <div class="code-block">
             <div class="code-line">
               <span class="code-comment">/* 只触发合成 */</span>
@@ -54,26 +65,33 @@
               <span class="code-keyword">function</span> <span class="code-func">animate</span>() {
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.transform = <span class="code-string">'translate3d(0,0,0)'</span>
+              <span class="code-indent" />element.style.transform = <span class="code-string">'translate3d(0,0,0)'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
+              <span class="code-indent" /><span class="code-func">requestAnimationFrame</span>(animate)
             </div>
             <div class="code-line">
               }
             </div>
           </div>
           <div class="performance-meter good">
-            <div class="meter-label">性能开销</div>
+            <div class="meter-label">
+              性能开销
+            </div>
             <div class="meter-bar">
-              <div class="meter-fill good-fill" style="width: 15%"></div>
+              <div
+                class="meter-fill good-fill"
+                style="width: 15%"
+              />
             </div>
           </div>
         </div>
       </div>
 
       <div class="optimization-tips">
-        <div class="tips-title">黄金法则：</div>
+        <div class="tips-title">
+          黄金法则：
+        </div>
         <div class="tips-list">
           <div class="tip-item">
             <span class="tip-icon">1️⃣</span>

docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue

@@ -18,30 +18,53 @@
         :class="{ active: activeStage === stage.id }"
         @click="activeStage = activeStage === stage.id ? null : stage.id"
       >
-        <div class="stage-icon">{{ stage.icon }}</div>
-        <div class="stage-name">{{ stage.name }}</div>
-        <div class="stage-simple">{{ stage.simple }}</div>
-        <div v-if="i < stages.length - 1" class="arrow">→</div>
+        <div class="stage-icon">
+          {{ stage.icon }}
+        </div>
+        <div class="stage-name">
+          {{ stage.name }}
+        </div>
+        <div class="stage-simple">
+          {{ stage.simple }}
+        </div>
+        <div
+          v-if="i < stages.length - 1"
+          class="arrow"
+        >
+          →
+        </div>
       </div>
     </div>
 
     <Transition name="fade">
-      <div v-if="activeStage" class="stage-detail">
+      <div
+        v-if="activeStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ currentStage?.icon }}</span>
           <span class="detail-title">{{ currentStage?.name }}</span>
         </div>
         <div class="detail-content">
-          <p class="detail-desc">{{ currentStage?.detailDesc }}</p>
+          <p class="detail-desc">
+            {{ currentStage?.detailDesc }}
+          </p>
           <div class="detail-example">
-            <div class="example-label">🌰 举个例子：</div>
-            <div class="example-content">{{ currentStage?.example }}</div>
+            <div class="example-label">
+              🌰 举个例子：
+            </div>
+            <div class="example-content">
+              {{ currentStage?.example }}
+            </div>
           </div>
         </div>
       </div>
     </Transition>
 
-    <div v-if="!activeStage" class="hint-text">
+    <div
+      v-if="!activeStage"
+      class="hint-text"
+    >
       👆 点击上方任意阶段，查看详细解释
     </div>