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/component-state-management/ComponentHierarchyDemo.vue

@@ -12,66 +12,126 @@
 
     <div class="demo-content">
       <div class="tree-container">
-        <div class="tree-node root-node" :class="{ active: selectedNode === 'app' }" @click="selectNode('app')">
-          <div class="node-icon">👑</div>
+        <div
+          class="tree-node root-node"
+          :class="{ active: selectedNode === 'app' }"
+          @click="selectNode('app')"
+        >
+          <div class="node-icon">
+            👑
+          </div>
           <div class="node-info">
-            <div class="node-label">App (根组件)</div>
-            <div class="node-desc">CEO - 管理全局</div>
+            <div class="node-label">
+              App (根组件)
+            </div>
+            <div class="node-desc">
+              CEO - 管理全局
+            </div>
           </div>
         </div>
 
         <div class="tree-children">
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'header' }" @click="selectNode('header')">
-              <div class="node-icon">📌</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'header' }"
+              @click="selectNode('header')"
+            >
+              <div class="node-icon">
+                📌
+              </div>
               <div class="node-info">
-                <div class="node-label">Header</div>
-                <div class="node-desc">导航栏部门</div>
+                <div class="node-label">
+                  Header
+                </div>
+                <div class="node-desc">
+                  导航栏部门
+                </div>
               </div>
             </div>
           </div>
 
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'main' }" @click="selectNode('main')">
-              <div class="node-icon">📄</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'main' }"
+              @click="selectNode('main')"
+            >
+              <div class="node-icon">
+                📄
+              </div>
               <div class="node-info">
-                <div class="node-label">Main Content</div>
-                <div class="node-desc">主内容部门</div>
+                <div class="node-label">
+                  Main Content
+                </div>
+                <div class="node-desc">
+                  主内容部门
+                </div>
               </div>
             </div>
 
             <div class="tree-children">
               <div class="tree-branch">
-                <div class="connector"></div>
-                <div class="tree-node" :class="{ active: selectedNode === 'sidebar' }" @click="selectNode('sidebar')">
-                  <div class="node-icon">📑</div>
+                <div class="connector" />
+                <div
+                  class="tree-node"
+                  :class="{ active: selectedNode === 'sidebar' }"
+                  @click="selectNode('sidebar')"
+                >
+                  <div class="node-icon">
+                    📑
+                  </div>
                   <div class="node-info">
-                    <div class="node-label">Sidebar</div>
-                    <div class="node-desc">侧边栏小组</div>
+                    <div class="node-label">
+                      Sidebar
+                    </div>
+                    <div class="node-desc">
+                      侧边栏小组
+                    </div>
                   </div>
                 </div>
               </div>
 
               <div class="tree-branch">
-                <div class="connector"></div>
-                <div class="tree-node" :class="{ active: selectedNode === 'productlist' }" @click="selectNode('productlist')">
-                  <div class="node-icon">🛍️</div>
+                <div class="connector" />
+                <div
+                  class="tree-node"
+                  :class="{ active: selectedNode === 'productlist' }"
+                  @click="selectNode('productlist')"
+                >
+                  <div class="node-icon">
+                    🛍️
+                  </div>
                   <div class="node-info">
-                    <div class="node-label">ProductList</div>
-                    <div class="node-desc">商品列表组</div>
+                    <div class="node-label">
+                      ProductList
+                    </div>
+                    <div class="node-desc">
+                      商品列表组
+                    </div>
                   </div>
                 </div>
 
                 <div class="tree-children">
                   <div class="tree-branch">
-                    <div class="connector"></div>
-                    <div class="tree-node leaf" :class="{ active: selectedNode === 'productcard' }" @click="selectNode('productcard')">
-                      <div class="node-icon">🏷️</div>
+                    <div class="connector" />
+                    <div
+                      class="tree-node leaf"
+                      :class="{ active: selectedNode === 'productcard' }"
+                      @click="selectNode('productcard')"
+                    >
+                      <div class="node-icon">
+                        🏷️
+                      </div>
                       <div class="node-info">
-                        <div class="node-label">ProductCard</div>
-                        <div class="node-desc">商品卡片员工</div>
+                        <div class="node-label">
+                          ProductCard
+                        </div>
+                        <div class="node-desc">
+                          商品卡片员工
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -81,12 +141,22 @@
           </div>
 
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'footer' }" @click="selectNode('footer')">
-              <div class="node-icon">🔻</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'footer' }"
+              @click="selectNode('footer')"
+            >
+              <div class="node-icon">
+                🔻
+              </div>
               <div class="node-info">
-                <div class="node-label">Footer</div>
-                <div class="node-desc">页脚部门</div>
+                <div class="node-label">
+                  Footer
+                </div>
+                <div class="node-desc">
+                  页脚部门
+                </div>
               </div>
             </div>
           </div>
@@ -94,18 +164,32 @@
       </div>
 
       <Transition name="fade">
-        <div v-if="selectedNodeInfo" class="node-details">
+        <div
+          v-if="selectedNodeInfo"
+          class="node-details"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ selectedNodeInfo.icon }}</span>
             <span class="detail-title">{{ selectedNodeInfo.title }}</span>
           </div>
-          <p class="detail-desc">{{ selectedNodeInfo.description }}</p>
-          <div v-if="selectedNodeInfo.props || selectedNodeInfo.events" class="detail-info">
-            <div v-if="selectedNodeInfo.props" class="info-section">
+          <p class="detail-desc">
+            {{ selectedNodeInfo.description }}
+          </p>
+          <div
+            v-if="selectedNodeInfo.props || selectedNodeInfo.events"
+            class="detail-info"
+          >
+            <div
+              v-if="selectedNodeInfo.props"
+              class="info-section"
+            >
               <strong>📥 接收:</strong>
               <span class="prop-tags">{{ selectedNodeInfo.props.join(', ') }}</span>
             </div>
-            <div v-if="selectedNodeInfo.events" class="info-section">
+            <div
+              v-if="selectedNodeInfo.events"
+              class="info-section"
+            >
               <strong>📤 触发:</strong>
               <span class="prop-tags">{{ selectedNodeInfo.events.join(', ') }}</span>
             </div>
@@ -113,7 +197,10 @@
         </div>
       </Transition>
 
-      <div v-if="!selectedNode" class="hint-text">
+      <div
+        v-if="!selectedNode"
+        class="hint-text"
+      >
         👆 点击上方任意节点，查看职责说明
       </div>
     </div>

docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue

@@ -12,8 +12,12 @@
 
     <div class="demo-content">
       <div class="bus-center">
-        <div class="bus-icon">📻</div>
-        <div class="bus-label">广播站 (Event Bus)</div>
+        <div class="bus-icon">
+          📻
+        </div>
+        <div class="bus-label">
+          广播站 (Event Bus)
+        </div>
       </div>
 
       <div class="components-grid">
@@ -24,19 +28,36 @@
           :class="{ active: comp.isActive }"
           @click="sendEvent(comp)"
         >
-          <div class="comp-icon">{{ comp.icon }}</div>
-          <div class="comp-name">{{ comp.name }}</div>
-          <div class="comp-status" :class="{ listening: comp.isListening }">
+          <div class="comp-icon">
+            {{ comp.icon }}
+          </div>
+          <div class="comp-name">
+            {{ comp.name }}
+          </div>
+          <div
+            class="comp-status"
+            :class="{ listening: comp.isListening }"
+          >
             {{ comp.isListening ? '📻 收音中' : '🔇 未开机' }}
           </div>
         </div>
       </div>
 
       <Transition name="fade">
-        <div v-if="logs.length > 0" class="event-log">
-          <div class="log-title">📨 消息记录</div>
+        <div
+          v-if="logs.length > 0"
+          class="event-log"
+        >
+          <div class="log-title">
+            📨 消息记录
+          </div>
           <div class="log-list">
-            <div v-for="(log, index) in logs.slice(0, 5)" :key="index" class="log-item" :class="log.type">
+            <div
+              v-for="(log, index) in logs.slice(0, 5)"
+              :key="index"
+              class="log-item"
+              :class="log.type"
+            >
               <span class="log-type">{{ log.type === 'emit' ? '🎤 广播' : '📻 收听' }}</span>
               <span class="log-text">{{ log.text }}</span>
             </div>

docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue

@@ -48,8 +48,18 @@
       </div>
 
       <div class="interaction-area">
-        <input v-model="newTodoText" placeholder="输入待办事项..." @keyup.enter="addTodo" class="todo-input" />
-        <button @click="addTodo" class="add-btn">➕ 添加</button>
+        <input
+          v-model="newTodoText"
+          placeholder="输入待办事项..."
+          class="todo-input"
+          @keyup.enter="addTodo"
+        >
+        <button
+          class="add-btn"
+          @click="addTodo"
+        >
+          ➕ 添加
+        </button>
       </div>
     </div>
 

docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue

@@ -12,7 +12,9 @@
 
     <div class="demo-content">
       <div class="component-box parent">
-        <div class="component-label">👨 父组件 (寄件人)</div>
+        <div class="component-label">
+          👨 父组件 (寄件人)
+        </div>
         <div class="data-display">
           <div class="data-row">
             <span class="key">包裹内容:</span>
@@ -20,7 +22,10 @@
           </div>
           <div class="data-row">
             <span class="key">包装颜色:</span>
-            <span class="value" :class="theme">{{ theme === 'light' ? '亮色' : '暗色' }}</span>
+            <span
+              class="value"
+              :class="theme"
+            >{{ theme === 'light' ? '亮色' : '暗色' }}</span>
           </div>
         </div>
         <div class="props-output">
@@ -32,25 +37,42 @@
         </div>
       </div>
 
-      <div class="flow-arrow" :class="{ active: isFlowing }">
-        <div class="arrow-body">▼</div>
-        <div class="flow-text">{{ isFlowing ? '快递派送中...' : 'Props 单向传递' }}</div>
+      <div
+        class="flow-arrow"
+        :class="{ active: isFlowing }"
+      >
+        <div class="arrow-body">
+          ▼
+        </div>
+        <div class="flow-text">
+          {{ isFlowing ? '快递派送中...' : 'Props 单向传递' }}
+        </div>
       </div>
 
       <div class="component-box child">
-        <div class="component-label">👦 子组件 (收件人)</div>
+        <div class="component-label">
+          👦 子组件 (收件人)
+        </div>
         <div class="props-display">
-          <div class="label">📬 接收包裹:</div>
+          <div class="label">
+            📬 接收包裹:
+          </div>
           <div class="prop-item">
             <span class="prop-name">user</span>
             <span class="prop-value">{{ user.name }} ({{ user.age }}岁)</span>
           </div>
           <div class="prop-item">
             <span class="prop-name">theme</span>
-            <span class="prop-value" :class="theme">{{ theme === 'light' ? '亮色' : '暗色' }}</span>
+            <span
+              class="prop-value"
+              :class="theme"
+            >{{ theme === 'light' ? '亮色' : '暗色' }}</span>
           </div>
         </div>
-        <button class="emit-btn" @click="handleEmit">
+        <button
+          class="emit-btn"
+          @click="handleEmit"
+        >
           📞 打电话给爸爸改名字
         </button>
       </div>
@@ -59,11 +81,27 @@
     <div class="interaction-area">
       <div class="control-group">
         <label>📝 修改包裹内容：</label>
-        <input v-model="user.name" placeholder="收件人姓名" @input="triggerFlow" />
-        <input v-model.number="user.age" type="number" placeholder="年龄" @input="triggerFlow" />
-        <select v-model="theme" @change="triggerFlow">
-          <option value="light">亮色包装</option>
-          <option value="dark">暗色包装</option>
+        <input
+          v-model="user.name"
+          placeholder="收件人姓名"
+          @input="triggerFlow"
+        >
+        <input
+          v-model.number="user.age"
+          type="number"
+          placeholder="年龄"
+          @input="triggerFlow"
+        >
+        <select
+          v-model="theme"
+          @change="triggerFlow"
+        >
+          <option value="light">
+            亮色包装
+          </option>
+          <option value="dark">
+            暗色包装
+          </option>
         </select>
       </div>
     </div>

docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue

@@ -13,38 +13,66 @@
     <div class="demo-content">
       <div class="counter-display">
         <span class="counter-label">当前库存：</span>
-        <span class="counter-value" :class="{ changed: countChanged }">{{ count }}</span>
+        <span
+          class="counter-value"
+          :class="{ changed: countChanged }"
+        >{{ count }}</span>
         <span class="counter-unit">本书</span>
       </div>
 
       <div class="action-buttons">
-        <button class="action-btn" @click="dispatchAction('INCREMENT')">
+        <button
+          class="action-btn"
+          @click="dispatchAction('INCREMENT')"
+        >
           <span class="btn-icon">➕</span>
           进货 (+1)
         </button>
-        <button class="action-btn" @click="dispatchAction('DECREMENT')">
+        <button
+          class="action-btn"
+          @click="dispatchAction('DECREMENT')"
+        >
           <span class="btn-icon">➖</span>
           出货 (-1)
         </button>
-        <button class="action-btn reset" @click="dispatchAction('RESET')">
+        <button
+          class="action-btn reset"
+          @click="dispatchAction('RESET')"
+        >
           <span class="btn-icon">🔄</span>
           重置库存
         </button>
       </div>
 
       <Transition name="fade">
-        <div v-if="flowStage" class="flow-stages">
-          <div class="flow-stage" :class="{ active: flowStage === 'action' }">
+        <div
+          v-if="flowStage"
+          class="flow-stages"
+        >
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'action' }"
+          >
             <span class="stage-icon">📝</span>
             <span class="stage-text">Action: {{ currentAction.type }}</span>
           </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-stage" :class="{ active: flowStage === 'reducer' }">
+          <div class="flow-arrow">
+            →
+          </div>
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'reducer' }"
+          >
             <span class="stage-icon">⚙️</span>
             <span class="stage-text">Reducer 处理中...</span>
           </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-stage" :class="{ active: flowStage === 'store' }">
+          <div class="flow-arrow">
+            →
+          </div>
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'store' }"
+          >
             <span class="stage-icon">📦</span>
             <span class="stage-text">Store 已更新</span>
           </div>

docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue

@@ -13,10 +13,18 @@
     <div class="demo-content">
       <div class="comparison-table">
         <div class="table-header">
-          <div class="header-col first">工具</div>
-          <div class="header-col">难度</div>
-          <div class="header-col">大小</div>
-          <div class="header-col">框架</div>
+          <div class="header-col first">
+            工具
+          </div>
+          <div class="header-col">
+            难度
+          </div>
+          <div class="header-col">
+            大小
+          </div>
+          <div class="header-col">
+            框架
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -32,12 +40,18 @@
             </div>
             <div class="row-col">
               <div class="curve-bar">
-                <div class="curve-fill" :style="{ width: lib.learningCurve + '%', background: getCurveColor(lib.learningCurve) }"></div>
+                <div
+                  class="curve-fill"
+                  :style="{ width: lib.learningCurve + '%', background: getCurveColor(lib.learningCurve) }"
+                />
               </div>
               <span class="curve-label">{{ getCurveLabel(lib.learningCurve) }}</span>
             </div>
             <div class="row-col">
-              <span class="size-badge" :class="getSizeClass(lib.bundleSize)">{{ lib.bundleSize }}</span>
+              <span
+                class="size-badge"
+                :class="getSizeClass(lib.bundleSize)"
+              >{{ lib.bundleSize }}</span>
             </div>
             <div class="row-col">
               <span class="framework-text">{{ lib.framework }}</span>
@@ -47,29 +61,46 @@
       </div>
 
       <Transition name="fade">
-        <div v-if="selectedLibrary" class="library-detail">
+        <div
+          v-if="selectedLibrary"
+          class="library-detail"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ selectedLibrary.icon }}</span>
             <div class="detail-title">
               <h5>{{ selectedLibrary.name }}</h5>
-              <p class="tagline">{{ selectedLibrary.tagline }}</p>
+              <p class="tagline">
+                {{ selectedLibrary.tagline }}
+              </p>
             </div>
           </div>
 
           <div class="detail-grid">
             <div class="detail-section compact">
-              <div class="section-title">🎯 适用场景</div>
-              <div class="section-content">{{ selectedLibrary.scenarios.join('、') }}</div>
+              <div class="section-title">
+                🎯 适用场景
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.scenarios.join('、') }}
+              </div>
             </div>
 
             <div class="detail-section compact">
-              <div class="section-title green">✅ 优点</div>
-              <div class="section-content">{{ selectedLibrary.pros.slice(0, 2).join('；') }}</div>
+              <div class="section-title green">
+                ✅ 优点
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.pros.slice(0, 2).join('；') }}
+              </div>
             </div>
 
             <div class="detail-section compact">
-              <div class="section-title red">❌ 缺点</div>
-              <div class="section-content">{{ selectedLibrary.cons.slice(0, 2).join('；') }}</div>
+              <div class="section-title red">
+                ❌ 缺点
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.cons.slice(0, 2).join('；') }}
+              </div>
             </div>
           </div>
         </div>

docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue

@@ -12,7 +12,11 @@
 
     <div class="demo-content">
       <div class="comparison-cards">
-        <div class="card vuex-card" :class="{ active: activeTab === 'vuex' }" @click="activeTab = 'vuex'">
+        <div
+          class="card vuex-card"
+          :class="{ active: activeTab === 'vuex' }"
+          @click="activeTab = 'vuex'"
+        >
           <div class="card-header">
             <span class="card-icon">🌿</span>
             <span class="card-title">Vuex</span>
@@ -20,15 +24,27 @@
           </div>
           <div class="card-body">
             <div class="feature-list">
-              <div class="feature-item">✅ 选项式 API</div>
-              <div class="feature-item">✅ State / Mutations / Actions 分离</div>
-              <div class="feature-item">❌ 样板代码较多</div>
-              <div class="feature-item">❌ TypeScript 支持较弱</div>
+              <div class="feature-item">
+                ✅ 选项式 API
+              </div>
+              <div class="feature-item">
+                ✅ State / Mutations / Actions 分离
+              </div>
+              <div class="feature-item">
+                ❌ 样板代码较多
+              </div>
+              <div class="feature-item">
+                ❌ TypeScript 支持较弱
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="card pinia-card" :class="{ active: activeTab === 'pinia' }" @click="activeTab = 'pinia'">
+        <div
+          class="card pinia-card"
+          :class="{ active: activeTab === 'pinia' }"
+          @click="activeTab = 'pinia'"
+        >
           <div class="card-header">
             <span class="card-icon">🍍</span>
             <span class="card-title">Pinia</span>
@@ -36,18 +52,35 @@
           </div>
           <div class="card-body">
             <div class="feature-list">
-              <div class="feature-item">✅ 组合式 API</div>
-              <div class="feature-item">✅ 去除 Mutations，简化代码</div>
-              <div class="feature-item">✅ 完美 TypeScript 支持</div>
-              <div class="feature-item">✅ 自动代码分割</div>
+              <div class="feature-item">
+                ✅ 组合式 API
+              </div>
+              <div class="feature-item">
+                ✅ 去除 Mutations，简化代码
+              </div>
+              <div class="feature-item">
+                ✅ 完美 TypeScript 支持
+              </div>
+              <div class="feature-item">
+                ✅ 自动代码分割
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <Transition name="fade" mode="out-in">
-        <div v-if="activeTab === 'vuex'" key="vuex" class="code-example">
-          <div class="code-title">Vuex 代码示例</div>
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          v-if="activeTab === 'vuex'"
+          key="vuex"
+          class="code-example"
+        >
+          <div class="code-title">
+            Vuex 代码示例
+          </div>
           <pre class="code-block"><code>// store/index.js
 export default createStore({
   state: { count: 0 },
@@ -64,8 +97,14 @@ export default createStore({
 })</code></pre>
         </div>
 
-        <div v-else-if="activeTab === 'pinia'" key="pinia" class="code-example">
-          <div class="code-title">Pinia 代码示例</div>
+        <div
+          v-else-if="activeTab === 'pinia'"
+          key="pinia"
+          class="code-example"
+        >
+          <div class="code-title">
+            Pinia 代码示例
+          </div>
           <pre class="code-block"><code>// stores/counter.js
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0)

docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue

@@ -24,9 +24,18 @@
         </button>
       </div>
 
-      <Transition name="fade" mode="out-in">
-        <div :key="activeTab" class="tab-content">
-          <div v-if="activeTab === 'zustand'" class="feature-showcase">
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          :key="activeTab"
+          class="tab-content"
+        >
+          <div
+            v-if="activeTab === 'zustand'"
+            class="feature-showcase"
+          >
             <div class="feature-card">
               <span class="feature-icon">📦</span>
               <span class="feature-title">单一 Store</span>
@@ -44,7 +53,10 @@
             </div>
           </div>
 
-          <div v-if="activeTab === 'zustand'" class="code-example">
+          <div
+            v-if="activeTab === 'zustand'"
+            class="code-example"
+          >
             <pre class="code-block"><code>// Zustand Store
 import { create } from 'zustand'
 
@@ -62,7 +74,10 @@ function BearCounter() {
 }</code></pre>
           </div>
 
-          <div v-if="activeTab === 'jotai'" class="feature-showcase">
+          <div
+            v-if="activeTab === 'jotai'"
+            class="feature-showcase"
+          >
             <div class="feature-card">
               <span class="feature-icon">⚛️</span>
               <span class="feature-title">原子化</span>
@@ -80,7 +95,10 @@ function BearCounter() {
             </div>
           </div>
 
-          <div v-if="activeTab === 'jotai'" class="code-example">
+          <div
+            v-if="activeTab === 'jotai'"
+            class="code-example"
+          >
             <pre class="code-block"><code>// Jotai Atom
 import { atom } from 'jotai'