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/prompt-engineering/ChainOfThoughtDemo.vue

@@ -1,12 +1,24 @@
 <template>
-  <el-card class="cot-demo-card" shadow="hover">
+  <el-card
+    class="cot-demo-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="controls-header">
         <div class="control-group">
           <span class="label">任务场景：</span>
-          <el-select v-model="currentTask" style="width: 200px">
-            <el-option label="代码审查 (Code Review)" value="debug" />
-            <el-option label="行程规划 (Travel Plan)" value="travel" />
+          <el-select
+            v-model="currentTask"
+            style="width: 200px"
+          >
+            <el-option
+              label="代码审查 (Code Review)"
+              value="debug"
+            />
+            <el-option
+              label="行程规划 (Travel Plan)"
+              value="travel"
+            />
           </el-select>
         </div>
         
@@ -28,22 +40,30 @@
     <div class="demo-content">
       <el-row :gutter="20">
         <!-- Left: Prompt Input -->
-        <el-col :xs="24" :md="10">
-          <el-card shadow="never" class="prompt-panel">
+        <el-col
+          :xs="24"
+          :md="10"
+        >
+          <el-card
+            shadow="never"
+            class="prompt-panel"
+          >
             <template #header>
               <div class="panel-header">
                 <el-icon><EditPen /></el-icon>
                 <span>输入提示词 (Prompt)</span>
               </div>
             </template>
-            <div class="prompt-text">{{ currentScenario.prompt }}</div>
+            <div class="prompt-text">
+              {{ currentScenario.prompt }}
+            </div>
             <div class="action-area">
               <el-button 
                 type="primary" 
                 :loading="isPlaying"
-                @click="runSimulation" 
-                class="run-btn"
+                class="run-btn" 
                 size="large"
+                @click="runSimulation"
               >
                 {{ isPlaying ? '生成中...' : '开始生成' }}
               </el-button>
@@ -52,19 +72,34 @@
         </el-col>
 
         <!-- Right: AI Output Process -->
-        <el-col :xs="24" :md="14">
-          <el-card shadow="never" class="output-panel">
+        <el-col
+          :xs="24"
+          :md="14"
+        >
+          <el-card
+            shadow="never"
+            class="output-panel"
+          >
             <template #header>
               <div class="panel-header">
                 <div class="left">
                   <el-icon><Cpu /></el-icon>
                   <span>AI 思考与输出</span>
                 </div>
-                <el-tag :type="statusType" effect="dark" size="small">{{ statusText }}</el-tag>
+                <el-tag
+                  :type="statusType"
+                  effect="dark"
+                  size="small"
+                >
+                  {{ statusText }}
+                </el-tag>
               </div>
             </template>
             
-            <div class="output-container" ref="outputContainer">
+            <div
+              ref="outputContainer"
+              class="output-container"
+            >
               <el-empty 
                 v-if="!hasRun && !isPlaying" 
                 description="点击“开始生成”观察 AI 如何处理任务..." 
@@ -80,9 +115,17 @@
                   :timestamp="currentStepIndex === index ? 'Thinking...' : ''"
                   placement="top"
                 >
-                  <h4 class="step-title">{{ step.title }}</h4>
-                  <div class="step-content" v-if="step.content">
-                    {{ step.displayedContent }}<span v-if="currentStepIndex === index" class="typing-cursor">|</span>
+                  <h4 class="step-title">
+                    {{ step.title }}
+                  </h4>
+                  <div
+                    v-if="step.content"
+                    class="step-content"
+                  >
+                    {{ step.displayedContent }}<span
+                      v-if="currentStepIndex === index"
+                      class="typing-cursor"
+                    >|</span>
                   </div>
                 </el-timeline-item>
               </el-timeline>
@@ -93,7 +136,10 @@
     </div>
 
     <!-- Insight/Analysis Section -->
-    <div class="insight-section" v-if="hasRun || isPlaying">
+    <div
+      v-if="hasRun || isPlaying"
+      class="insight-section"
+    >
       <el-alert
         :type="currentMode === 'direct' ? 'warning' : 'success'"
         :closable="false"

docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue

@@ -8,17 +8,33 @@
   - 看提示词和输出如何变化
 -->
 <template>
-  <el-card class="few-shot-card" shadow="hover">
+  <el-card
+    class="few-shot-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">示例的力量：让风格“跟你走”</h3>
-          <p class="subtitle">你不是让 AI 更聪明，而是让它更像你要的样子。</p>
+          <h3 class="title">
+            示例的力量：让风格“跟你走”
+          </h3>
+          <p class="subtitle">
+            你不是让 AI 更聪明，而是让它更像你要的样子。
+          </p>
         </div>
         <div class="controls">
-          <el-select v-model="tone" style="width: 140px">
-            <el-option label="随意口语" value="casual" />
-            <el-option label="正式书面" value="formal" />
+          <el-select
+            v-model="tone"
+            style="width: 140px"
+          >
+            <el-option
+              label="随意口语"
+              value="casual"
+            />
+            <el-option
+              label="正式书面"
+              value="formal"
+            />
           </el-select>
           <el-switch
             v-model="withExamples"
@@ -32,20 +48,32 @@
     </template>
 
     <div class="grid-layout">
-      <el-card shadow="never" class="panel">
+      <el-card
+        shadow="never"
+        class="panel"
+      >
         <template #header>
-          <div class="panel-header">提示词 / Prompt</div>
+          <div class="panel-header">
+            提示词 / Prompt
+          </div>
         </template>
         <div class="code-block">
           <pre><code>{{ prompt }}</code></pre>
         </div>
       </el-card>
 
-      <el-card shadow="never" class="panel">
+      <el-card
+        shadow="never"
+        class="panel"
+      >
         <template #header>
-          <div class="panel-header">AI 输出（示意）</div>
+          <div class="panel-header">
+            AI 输出（示意）
+          </div>
         </template>
-        <div class="output-content">{{ output }}</div>
+        <div class="output-content">
+          {{ output }}
+        </div>
         <el-alert
           :title="hint"
           :type="withExamples ? 'success' : 'warning'"
@@ -56,13 +84,30 @@
       </el-card>
     </div>
 
-    <div class="examples-section" v-if="withExamples">
-      <el-divider content-position="left">示例（AI 会“照着学”）</el-divider>
+    <div
+      v-if="withExamples"
+      class="examples-section"
+    >
+      <el-divider content-position="left">
+        示例（AI 会“照着学”）
+      </el-divider>
       <el-row :gutter="12">
-        <el-col :span="8" v-for="e in examples" :key="e.in">
-          <el-card shadow="hover" class="example-item" :body-style="{ padding: '12px' }">
-            <div class="ex-in">输入：{{ e.in }}</div>
-            <div class="ex-out">输出：{{ e.out }}</div>
+        <el-col
+          v-for="e in examples"
+          :key="e.in"
+          :span="8"
+        >
+          <el-card
+            shadow="hover"
+            class="example-item"
+            :body-style="{ padding: '12px' }"
+          >
+            <div class="ex-in">
+              输入：{{ e.in }}
+            </div>
+            <div class="ex-out">
+              输出：{{ e.out }}
+            </div>
           </el-card>
         </el-col>
       </el-row>

docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue

@@ -3,43 +3,81 @@
   “清晰 vs 模糊”对比：把一个提示词拆成四块（任务/上下文/要求/输出），并展示哪些块缺失会导致输出跑偏。
 -->
 <template>
-  <el-card class="cmp-card" shadow="hover">
+  <el-card
+    class="cmp-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">清晰 vs 模糊：差的不是“废话”，而是“缺项”</h3>
-          <p class="subtitle">勾选你想补充的信息，看看输出会怎么变。</p>
+          <h3 class="title">
+            清晰 vs 模糊：差的不是“废话”，而是“缺项”
+          </h3>
+          <p class="subtitle">
+            勾选你想补充的信息，看看输出会怎么变。
+          </p>
         </div>
         <div class="task-select">
-          <el-select v-model="task" placeholder="选择任务" style="width: 200px">
-            <el-option label="写一段技术博客开头" value="blog" />
-            <el-option label="把内容输出成 JSON" value="json" />
+          <el-select
+            v-model="task"
+            placeholder="选择任务"
+            style="width: 200px"
+          >
+            <el-option
+              label="写一段技术博客开头"
+              value="blog"
+            />
+            <el-option
+              label="把内容输出成 JSON"
+              value="json"
+            />
           </el-select>
         </div>
       </div>
     </template>
 
     <div class="options-container">
-      <el-checkbox v-model="useRole" label="角色（你是谁）" border />
-      <el-checkbox v-model="useAudience" label="受众（写给谁）" border />
+      <el-checkbox
+        v-model="useRole"
+        label="角色（你是谁）"
+        border
+      />
+      <el-checkbox
+        v-model="useAudience"
+        label="受众（写给谁）"
+        border
+      />
       <el-checkbox
         v-model="useConstraints"
         label="约束（长度/要点数）"
         border
       />
-      <el-checkbox v-model="useFormat" label="输出格式（JSON/列表）" border />
+      <el-checkbox
+        v-model="useFormat"
+        label="输出格式（JSON/列表）"
+        border
+      />
     </div>
 
     <div class="grid-layout">
-      <el-card shadow="never" class="panel input-panel">
+      <el-card
+        shadow="never"
+        class="panel input-panel"
+      >
         <template #header>
-          <div class="panel-header">你给 AI 的提示词</div>
+          <div class="panel-header">
+            你给 AI 的提示词
+          </div>
         </template>
         <div class="code-block">
           <pre><code>{{ prompt }}</code></pre>
         </div>
         <div class="checklist">
-          <div class="check-item" v-for="i in checklist" :key="i.text">
+          <div
+            v-for="i in checklist"
+            :key="i.text"
+            class="check-item"
+          >
             <el-tag
               :type="i.ok ? 'success' : 'danger'"
               size="small"
@@ -53,13 +91,23 @@
         </div>
       </el-card>
 
-      <el-card shadow="never" class="panel output-panel">
+      <el-card
+        shadow="never"
+        class="panel output-panel"
+      >
         <template #header>
-          <div class="panel-header">AI 输出（示意）</div>
+          <div class="panel-header">
+            AI 输出（示意）
+          </div>
         </template>
-        <div class="output-content">{{ output }}</div>
+        <div class="output-content">
+          {{ output }}
+        </div>
 
-        <div v-if="warnings.length" class="warnings-section">
+        <div
+          v-if="warnings.length"
+          class="warnings-section"
+        >
           <el-alert
             v-for="w in warnings"
             :key="w"
@@ -70,7 +118,11 @@
             style="margin-top: 8px"
           />
         </div>
-        <el-empty v-else description="完美！没有明显问题。" :image-size="60" />
+        <el-empty
+          v-else
+          description="完美！没有明显问题。"
+          :image-size="60"
+        />
       </el-card>
     </div>
   </el-card>

docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="quick-start-demo-container">
-    <el-card class="quick-start-card" shadow="hover">
+    <el-card
+      class="quick-start-card"
+      shadow="hover"
+    >
       <template #header>
         <div class="header-content">
           <div class="title-group">
-            <div class="title">🕹️ 互动体验：提示词进化论</div>
-            <div class="subtitle">不要一次性写好，试着像搭积木一样优化你的指令。</div>
+            <div class="title">
+              🕹️ 互动体验：提示词进化论
+            </div>
+            <div class="subtitle">
+              不要一次性写好，试着像搭积木一样优化你的指令。
+            </div>
           </div>
           <div class="controls">
             <span class="label">选择任务：</span>
-            <el-select v-model="taskId" @change="reset" style="width: 160px" size="large">
+            <el-select
+              v-model="taskId"
+              style="width: 160px"
+              size="large"
+              @change="reset"
+            >
               <el-option
                 v-for="t in tasks"
                 :key="t.id"
@@ -25,23 +37,34 @@
       <div class="game-area">
         <!-- 左侧：提示词构建 -->
         <div class="prompt-builder">
-          <div class="section-title">你的指令 (Prompt)</div>
+          <div class="section-title">
+            你的指令 (Prompt)
+          </div>
           
           <div class="prompt-box">
             <!-- 基础层 -->
-            <div class="block base" :class="{ active: true }">
+            <div
+              class="block base"
+              :class="{ active: true }"
+            >
               <span class="icon">📝</span>
               <span class="text">{{ basePrompt }}</span>
             </div>
 
             <!-- 进阶层：清晰指令 -->
-            <div v-if="level >= 1" class="block clear animate-in">
+            <div
+              v-if="level >= 1"
+              class="block clear animate-in"
+            >
               <span class="icon">🎯</span>
               <span class="text">{{ clearPromptAddon }}</span>
             </div>
 
             <!-- 专家层：结构化 -->
-            <div v-if="level >= 2" class="block pro animate-in">
+            <div
+              v-if="level >= 2"
+              class="block pro animate-in"
+            >
               <span class="icon">🧠</span>
               <span class="text">{{ proPromptAddon }}</span>
             </div>
@@ -50,24 +73,34 @@
           <!-- 升级按钮 -->
           <div class="upgrade-controls">
             <div class="level-info">
-              <el-tag :type="levelColor" effect="dark" size="small" style="margin-bottom: 4px;">Level {{ level }}</el-tag>
-              <span class="level-desc" :style="{ color: levelColorCode }">{{ levelLabel }}</span>
+              <el-tag
+                :type="levelColor"
+                effect="dark"
+                size="small"
+                style="margin-bottom: 4px;"
+              >
+                Level {{ level }}
+              </el-tag>
+              <span
+                class="level-desc"
+                :style="{ color: levelColorCode }"
+              >{{ levelLabel }}</span>
             </div>
             
             <div class="actions">
               <el-button-group>
                 <el-button 
                   :disabled="level === 0"
-                  @click="downgrade"
                   icon="Minus"
+                  @click="downgrade"
                 >
                   ➖ 降级
                 </el-button>
                 <el-button 
                   type="primary" 
                   :disabled="level === 2"
-                  @click="upgrade"
                   icon="Plus"
+                  @click="upgrade"
                 >
                   升级 ➕
                 </el-button>
@@ -79,8 +112,8 @@
             type="primary" 
             size="large" 
             :loading="isRunning"
-            @click="run"
             style="width: 100%; font-weight: bold; font-size: 1.1rem;"
+            @click="run"
           >
             {{ isRunning ? '生成中...' : '🚀 发送给 AI' }}
           </el-button>
@@ -91,8 +124,14 @@
           <div class="section-title">
             <span>AI 回复 (Output)</span>
             <!-- 历史记录切换 -->
-            <div class="history-tabs" v-if="hasAnyHistory">
-              <el-radio-group v-model="viewLevel" size="small">
+            <div
+              v-if="hasAnyHistory"
+              class="history-tabs"
+            >
+              <el-radio-group
+                v-model="viewLevel"
+                size="small"
+              >
                 <el-radio-button 
                   v-for="l in availableLevels" 
                   :key="l" 
@@ -106,8 +145,14 @@
 
           <div class="chat-window">
             <!-- 空状态 -->
-            <div v-if="!hasRun && !hasAnyHistory" class="empty-state">
-              <el-empty description="点击左侧“发送”按钮，看看 AI 会怎么回。" :image-size="100" />
+            <div
+              v-if="!hasRun && !hasAnyHistory"
+              class="empty-state"
+            >
+              <el-empty
+                description="点击左侧“发送”按钮，看看 AI 会怎么回。"
+                :image-size="100"
+              />
             </div>
 
             <!-- 内容区域 -->
@@ -122,24 +167,50 @@
               >
                 <template #title>
                   正在查看 Level {{ viewLevel }} 的历史记录 (当前是 L{{ level }})
-                  <el-button link type="primary" @click="viewLevel = level" style="padding: 0; vertical-align: baseline;">回到当前</el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    style="padding: 0; vertical-align: baseline;"
+                    @click="viewLevel = level"
+                  >
+                    回到当前
+                  </el-button>
                 </template>
               </el-alert>
 
-              <div class="message-bubble" :class="{ typing: isRunning && viewLevel === level }">
-                <div class="avatar">🤖</div>
+              <div
+                class="message-bubble"
+                :class="{ typing: isRunning && viewLevel === level }"
+              >
+                <div class="avatar">
+                  🤖
+                </div>
                 <div class="content">
-                  <div v-if="isRunning && viewLevel === level" class="typing-indicator">
-                    <span></span><span></span><span></span>
+                  <div
+                    v-if="isRunning && viewLevel === level"
+                    class="typing-indicator"
+                  >
+                    <span /><span /><span />
                   </div>
-                  <div v-else class="markdown-body" v-html="renderMarkdown(getOutputForLevel(viewLevel))"></div>
+                  <div
+                    v-else
+                    class="markdown-body"
+                    v-html="renderMarkdown(getOutputForLevel(viewLevel))"
+                  />
                 </div>
               </div>
               
               <!-- 点评气泡 -->
-              <div v-if="(!isRunning || viewLevel !== level) && getOutputForLevel(viewLevel)" class="feedback-bubble animate-pop">
-                <div class="feedback-title">💡 {{ getFeedbackForLevel(viewLevel).title }}</div>
-                <div class="feedback-text">{{ getFeedbackForLevel(viewLevel).text }}</div>
+              <div
+                v-if="(!isRunning || viewLevel !== level) && getOutputForLevel(viewLevel)"
+                class="feedback-bubble animate-pop"
+              >
+                <div class="feedback-title">
+                  💡 {{ getFeedbackForLevel(viewLevel).title }}
+                </div>
+                <div class="feedback-text">
+                  {{ getFeedbackForLevel(viewLevel).text }}
+                </div>
               </div>
             </div>
           </div>

docs/.vitepress/theme/components/appendix/prompt-engineering/PromptRobustnessDemo.vue

@@ -4,30 +4,61 @@
   场景：策划团建活动
 -->
 <template>
-  <el-card class="robustness-card" shadow="hover">
+  <el-card
+    class="robustness-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">让 AI 更“稳”：拒绝瞎猜，学会反问与自查</h3>
-          <p class="subtitle">面对模糊指令，AI 应该“不懂就问”而不是“一本正经胡说”。</p>
+          <h3 class="title">
+            让 AI 更“稳”：拒绝瞎猜，学会反问与自查
+          </h3>
+          <p class="subtitle">
+            面对模糊指令，AI 应该“不懂就问”而不是“一本正经胡说”。
+          </p>
         </div>
       </div>
     </template>
 
     <div class="controls-section">
-      <el-row :gutter="20" align="middle">
-        <el-col :span="12" :xs="24">
+      <el-row
+        :gutter="20"
+        align="middle"
+      >
+        <el-col
+          :span="12"
+          :xs="24"
+        >
           <div class="input-display">
             <span class="label">你的指令：</span>
-            <el-tag type="info" size="large" effect="plain">“帮我策划一个团建活动。”</el-tag>
+            <el-tag
+              type="info"
+              size="large"
+              effect="plain"
+            >
+              “帮我策划一个团建活动。”
+            </el-tag>
           </div>
         </el-col>
-        <el-col :span="12" :xs="24">
+        <el-col
+          :span="12"
+          :xs="24"
+        >
           <div class="mode-switch">
-            <el-radio-group v-model="mode" @change="resetState">
-              <el-radio-button label="raw">直接生成</el-radio-button>
-              <el-radio-button label="clarify">允许提问</el-radio-button>
-              <el-radio-button label="verify">要求自检</el-radio-button>
+            <el-radio-group
+              v-model="mode"
+              @change="resetState"
+            >
+              <el-radio-button label="raw">
+                直接生成
+              </el-radio-button>
+              <el-radio-button label="clarify">
+                允许提问
+              </el-radio-button>
+              <el-radio-button label="verify">
+                要求自检
+              </el-radio-button>
             </el-radio-group>
           </div>
         </el-col>
@@ -36,69 +67,146 @@
 
     <div class="simulation-area">
       <!-- 模式 1: 直接生成 -->
-      <div v-if="mode === 'raw'" class="scenario raw">
+      <div
+        v-if="mode === 'raw'"
+        class="scenario raw"
+      >
         <div class="chat-bubble ai">
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content">
+          <el-card
+            shadow="never"
+            class="bubble-content"
+          >
             <p>好的！为您推荐以下活动：</p>
             <ol>
               <li>豪华游艇出海派对（人均 5000）</li>
               <li>也就是去楼下吃个火锅（人均 100）</li>
               <li>徒步穿越无人区（高风险）</li>
             </ol>
-            <div class="note">（AI 内心：你不说预算和人数，我就随便猜了...）</div>
+            <div class="note">
+              （AI 内心：你不说预算和人数，我就随便猜了...）
+            </div>
           </el-card>
         </div>
-        <el-alert title="结果不可控：AI 只能盲猜，方案可能完全不靠谱" type="error" show-icon :closable="false" />
+        <el-alert
+          title="结果不可控：AI 只能盲猜，方案可能完全不靠谱"
+          type="error"
+          show-icon
+          :closable="false"
+        />
       </div>
 
       <!-- 模式 2: 澄清问题 -->
-      <div v-if="mode === 'clarify'" class="scenario clarify">
+      <div
+        v-if="mode === 'clarify'"
+        class="scenario clarify"
+      >
         <div class="chat-bubble ai">
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content">
+          <el-card
+            shadow="never"
+            class="bubble-content"
+          >
             <p>收到。为了给出精准建议，我需要确认 3 点：</p>
-            <el-form label-position="top" size="small" class="questions-form">
+            <el-form
+              label-position="top"
+              size="small"
+              class="questions-form"
+            >
               <el-row :gutter="12">
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="1. 人数规模？">
                     <el-select v-model="answers.count">
-                      <el-option label="10人小团队" value="10" />
-                      <el-option label="100人大大公司" value="100" />
+                      <el-option
+                        label="10人小团队"
+                        value="10"
+                      />
+                      <el-option
+                        label="100人大大公司"
+                        value="100"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="2. 人均预算？">
                     <el-select v-model="answers.budget">
-                      <el-option label="低（<200元）" value="low" />
-                      <el-option label="高（>1000元）" value="high" />
+                      <el-option
+                        label="低（<200元）"
+                        value="low"
+                      />
+                      <el-option
+                        label="高（>1000元）"
+                        value="high"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="3. 偏好？">
                     <el-select v-model="answers.type">
-                      <el-option label="轻松吃喝" value="relax" />
-                      <el-option label="户外运动" value="active" />
+                      <el-option
+                        label="轻松吃喝"
+                        value="relax"
+                      />
+                      <el-option
+                        label="户外运动"
+                        value="active"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-button type="primary" @click="generatePlan" style="margin-top: 8px">生成方案</el-button>
+              <el-button
+                type="primary"
+                style="margin-top: 8px"
+                @click="generatePlan"
+              >
+                生成方案
+              </el-button>
             </el-form>
           </el-card>
         </div>
         
-        <div v-if="planResult" class="chat-bubble ai result fade-in">
+        <div
+          v-if="planResult"
+          class="chat-bubble ai result fade-in"
+        >
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content plan-result">
+          <el-card
+            shadow="never"
+            class="bubble-content plan-result"
+          >
             <p>基于您的要求（{{ answerSummary }}），推荐方案：</p>
             <div class="plan-card">
               <h3>{{ planResult.title }}</h3>
@@ -109,47 +217,122 @@
       </div>
 
       <!-- 模式 3: 自我修正 -->
-      <div v-if="mode === 'verify'" class="scenario verify">
-        <el-alert type="info" show-icon :closable="false" style="margin-bottom: 20px">
+      <div
+        v-if="mode === 'verify'"
+        class="scenario verify"
+      >
+        <el-alert
+          type="info"
+          show-icon
+          :closable="false"
+          style="margin-bottom: 20px"
+        >
           <template #title>
             指令升级：策划一个活动，<strong>必须包含素食选项</strong>，且<strong>总预算不超过 2000 元</strong>。
           </template>
         </el-alert>
         
-        <el-steps :active="verifyStep" align-center finish-status="success" style="margin-bottom: 24px">
-          <el-step title="初次生成" :icon="Edit" />
-          <el-step title="自我检查" :icon="View" />
-          <el-step title="修正输出" :icon="CircleCheck" />
+        <el-steps
+          :active="verifyStep"
+          align-center
+          finish-status="success"
+          style="margin-bottom: 24px"
+        >
+          <el-step
+            title="初次生成"
+            :icon="Edit"
+          />
+          <el-step
+            title="自我检查"
+            :icon="View"
+          />
+          <el-step
+            title="修正输出"
+            :icon="CircleCheck"
+          />
         </el-steps>
 
         <div class="monitor-log">
           <el-collapse-transition>
-            <div v-if="verifyStep >= 1" class="log-item">
-              <el-tag size="small" type="info">生成草稿</el-tag>
+            <div
+              v-if="verifyStep >= 1"
+              class="log-item"
+            >
+              <el-tag
+                size="small"
+                type="info"
+              >
+                生成草稿
+              </el-tag>
               <span class="log-text">“全牛宴烧烤，预计花费 3000 元...”</span>
             </div>
           </el-collapse-transition>
           <el-collapse-transition>
-            <div v-if="verifyStep >= 2" class="log-item check-fail">
-              <el-tag size="small" type="danger">自检发现</el-tag>
+            <div
+              v-if="verifyStep >= 2"
+              class="log-item check-fail"
+            >
+              <el-tag
+                size="small"
+                type="danger"
+              >
+                自检发现
+              </el-tag>
               <div class="check-list">
-                <div class="fail-item"><el-icon color="#f56c6c"><Close /></el-icon> 包含素食？否（全是肉）</div>
-                <div class="fail-item"><el-icon color="#f56c6c"><Close /></el-icon> 预算&lt;2000？否（3000超标）</div>
+                <div class="fail-item">
+                  <el-icon color="#f56c6c">
+                    <Close />
+                  </el-icon> 包含素食？否（全是肉）
+                </div>
+                <div class="fail-item">
+                  <el-icon color="#f56c6c">
+                    <Close />
+                  </el-icon> 预算&lt;2000？否（3000超标）
+                </div>
               </div>
             </div>
           </el-collapse-transition>
           <el-collapse-transition>
-            <div v-if="verifyStep >= 3" class="log-item success">
-              <el-tag size="small" type="success">修正后</el-tag>
+            <div
+              v-if="verifyStep >= 3"
+              class="log-item success"
+            >
+              <el-tag
+                size="small"
+                type="success"
+              >
+                修正后
+              </el-tag>
               <span class="log-text">“田园蔬菜自助 + 少量烤肉，预计花费 1800 元。” ✅</span>
             </div>
           </el-collapse-transition>
         </div>
         
-        <div class="actions" style="text-align: center; margin-top: 20px;">
-          <el-button v-if="verifyStep === 0" type="primary" @click="runVerify" size="large">开始运行</el-button>
-          <el-button v-else-if="verifyStep === 3" @click="verifyStep = 0">重置演示</el-button>
-          <el-button v-else loading disabled>处理中...</el-button>
+        <div
+          class="actions"
+          style="text-align: center; margin-top: 20px;"
+        >
+          <el-button
+            v-if="verifyStep === 0"
+            type="primary"
+            size="large"
+            @click="runVerify"
+          >
+            开始运行
+          </el-button>
+          <el-button
+            v-else-if="verifyStep === 3"
+            @click="verifyStep = 0"
+          >
+            重置演示
+          </el-button>
+          <el-button
+            v-else
+            loading
+            disabled
+          >
+            处理中...
+          </el-button>
         </div>
       </div>
     </div>

docs/.vitepress/theme/components/appendix/prompt-engineering/PromptSecurityDemo.vue

@@ -3,23 +3,35 @@
   演示 Prompt Injection 攻击原理及防御方法
 -->
 <template>
-  <el-card class="security-card" shadow="hover">
+  <el-card
+    class="security-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">防御 Prompt Injection（注入攻击）</h3>
-          <p class="subtitle">当用户输入包含恶意指令时，如何防止 AI “被带跑”？</p>
+          <h3 class="title">
+            防御 Prompt Injection（注入攻击）
+          </h3>
+          <p class="subtitle">
+            当用户输入包含恶意指令时，如何防止 AI “被带跑”？
+          </p>
         </div>
       </div>
     </template>
 
     <el-row :gutter="20">
       <!-- 左侧：设置区 -->
-      <el-col :md="12" :xs="24">
+      <el-col
+        :md="12"
+        :xs="24"
+      >
         <div class="panel settings">
           <div class="section">
             <div class="section-header">
-              <div class="section-title">1. 系统设定 (System Prompt)</div>
+              <div class="section-title">
+                1. 系统设定 (System Prompt)
+              </div>
               <el-switch
                 v-model="isSecure"
                 active-text="防御模式"
@@ -29,7 +41,11 @@
               />
             </div>
             
-            <el-card shadow="never" class="code-box system" :class="{ secure: isSecure }">
+            <el-card
+              shadow="never"
+              class="code-box system"
+              :class="{ secure: isSecure }"
+            >
               <template v-if="!isSecure">
                 你是一个翻译助手。<br>
                 请把用户的输入翻译成英文。
@@ -41,18 +57,35 @@
               </template>
             </el-card>
             <div class="mode-desc">
-              <el-tag :type="isSecure ? 'success' : 'danger'" size="small">
+              <el-tag
+                :type="isSecure ? 'success' : 'danger'"
+                size="small"
+              >
                 {{ isSecure ? '✅ 已开启防御 (使用分隔符)' : '❌ 未防御 (容易被攻击)' }}
               </el-tag>
             </div>
           </div>
 
           <div class="section">
-            <div class="section-title">2. 用户输入 (User Input)</div>
+            <div class="section-title">
+              2. 用户输入 (User Input)
+            </div>
             <div class="input-presets">
               <el-button-group>
-                <el-button size="small" @click="setInput('normal')">正常文本</el-button>
-                <el-button size="small" type="danger" plain @click="setInput('attack')">攻击指令</el-button>
+                <el-button
+                  size="small"
+                  @click="setInput('normal')"
+                >
+                  正常文本
+                </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  plain
+                  @click="setInput('attack')"
+                >
+                  攻击指令
+                </el-button>
               </el-button-group>
             </div>
             <el-input
@@ -81,13 +114,27 @@
       </el-col>
 
       <!-- 右侧：执行结果 -->
-      <el-col :md="12" :xs="24">
+      <el-col
+        :md="12"
+        :xs="24"
+      >
         <div class="panel result">
-          <div class="section-title">3. AI 执行结果</div>
+          <div class="section-title">
+            3. AI 执行结果
+          </div>
           <div class="terminal-container">
             <div class="terminal">
-              <div v-if="loading" class="typing">AI 正在思考...</div>
-              <div v-else class="output" :class="resultType">
+              <div
+                v-if="loading"
+                class="typing"
+              >
+                AI 正在思考...
+              </div>
+              <div
+                v-else
+                class="output"
+                :class="resultType"
+              >
                 {{ output || '等待执行...' }}
               </div>
             </div>
@@ -104,10 +151,10 @@
           
           <el-button 
             type="primary" 
-            @click="runSimulation" 
             :loading="loading" 
-            class="btn-run"
+            class="btn-run" 
             size="large"
+            @click="runSimulation"
           >
             执行 Prompt
           </el-button>

docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue

@@ -1,10 +1,17 @@
 <template>
-  <el-card class="templates-card" shadow="hover">
+  <el-card
+    class="templates-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div class="header-left">
-          <h3 class="title">常见场景模板（标签切换，可直接复制）</h3>
-          <p class="subtitle">选一个场景 → 复制 → 把占位符替换成你的内容。</p>
+          <h3 class="title">
+            常见场景模板（标签切换，可直接复制）
+          </h3>
+          <p class="subtitle">
+            选一个场景 → 复制 → 把占位符替换成你的内容。
+          </p>
         </div>
         <div class="header-right">
           <el-input
@@ -17,8 +24,8 @@
           <el-button 
             type="primary" 
             :icon="copied ? Check : CopyDocument" 
-            @click="copy(active.template)" 
-            :disabled="!active"
+            :disabled="!active" 
+            @click="copy(active.template)"
           >
             {{ copied ? '已复制' : '复制模板' }}
           </el-button>
@@ -46,7 +53,10 @@
       />
     </div>
 
-    <div v-if="active" class="content-area">
+    <div
+      v-if="active"
+      class="content-area"
+    >
       <el-alert
         :title="active.desc"
         type="info"
@@ -55,12 +65,23 @@
         class="desc-alert"
       />
       
-      <el-card shadow="never" class="code-card">
+      <el-card
+        shadow="never"
+        class="code-card"
+      >
         <pre class="code-block"><code>{{ active.template }}</code></pre>
       </el-card>
 
-      <div v-if="active.note" class="note-section">
-        <el-tag type="warning" size="small">Note</el-tag>
+      <div
+        v-if="active.note"
+        class="note-section"
+      >
+        <el-tag
+          type="warning"
+          size="small"
+        >
+          Note
+        </el-tag>
         <span class="note-text">{{ active.note }}</span>
       </div>
     </div>

docs/.vitepress/theme/components/appendix/prompt-engineering/TrainingProcessDemo.vue

@@ -1,26 +1,48 @@
 <template>
-  <el-card class="training-card" shadow="hover">
+  <el-card
+    class="training-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
-        <h3 class="title">从训练数据看模型行为</h3>
+        <h3 class="title">
+          从训练数据看模型行为
+        </h3>
         <div class="mode-switch-container">
-          <el-radio-group v-model="mode" size="large">
-            <el-radio-button label="pretrain">1. 预训练 (Pre-training)</el-radio-button>
-            <el-radio-button label="finetune">2. 微调 (Fine-tuning)</el-radio-button>
+          <el-radio-group
+            v-model="mode"
+            size="large"
+          >
+            <el-radio-button label="pretrain">
+              1. 预训练 (Pre-training)
+            </el-radio-button>
+            <el-radio-button label="finetune">
+              2. 微调 (Fine-tuning)
+            </el-radio-button>
           </el-radio-group>
         </div>
       </div>
     </template>
 
     <!-- PRE-TRAINING MODE -->
-    <div v-if="mode === 'pretrain'" class="demo-content">
-      <el-card shadow="never" class="concept-card">
+    <div
+      v-if="mode === 'pretrain'"
+      class="demo-content"
+    >
+      <el-card
+        shadow="never"
+        class="concept-card"
+      >
         <div class="concept-content">
-          <div class="icon">📚</div>
+          <div class="icon">
+            📚
+          </div>
           <div class="info">
             <h4>博览群书 (Reading the Web)</h4>
             <p>核心目标：<strong>预测下一个 Token</strong></p>
-            <p class="sub">模型阅读了海量文本，它的本能是"把句子接下去"。</p>
+            <p class="sub">
+              模型阅读了海量文本，它的本能是"把句子接下去"。
+            </p>
           </div>
         </div>
       </el-card>
@@ -28,12 +50,12 @@
       <div class="interactive-area">
         <div class="editor-window">
           <div class="window-header">
-            <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
+            <span class="dot red" /><span class="dot yellow" /><span class="dot green" />
             <span class="window-title">Next Token Predictor</span>
           </div>
           <div class="editor-content">
             <span class="text-gray">Source: Wikipedia / Books</span>
-            <br/><br/>
+            <br><br>
             <p>
               Natural selection, proposed by Darwin in 
               <span class="highlight">{{ currentPrediction || '...' }}</span>
@@ -42,17 +64,32 @@
         </div>
 
         <div class="controls">
-          <el-button type="primary" size="large" @click="predictNext" :loading="isPredicting">
+          <el-button
+            type="primary"
+            size="large"
+            :loading="isPredicting"
+            @click="predictNext"
+          >
             {{ isPredicting ? '计算概率中...' : '预测下一个词 (Predict)' }}
           </el-button>
         </div>
 
         <el-collapse-transition>
-          <div v-if="predictions.length > 0" class="predictions-panel">
+          <div
+            v-if="predictions.length > 0"
+            class="predictions-panel"
+          >
             <h5>概率分布 (Top 3 Candidates)</h5>
             <div class="chart-container">
-              <div v-for="(item, index) in predictions" :key="index" class="bar-row" @click="selectPrediction(item)">
-                <div class="label">{{ item.token }}</div>
+              <div
+                v-for="(item, index) in predictions"
+                :key="index"
+                class="bar-row"
+                @click="selectPrediction(item)"
+              >
+                <div class="label">
+                  {{ item.token }}
+                </div>
                 <div class="bar-container">
                   <el-progress 
                     :percentage="item.prob" 
@@ -63,21 +100,33 @@
                 </div>
               </div>
             </div>
-            <p class="hint">👆 点击预测词填入（模型只是在根据统计学规律"瞎蒙"）</p>
+            <p class="hint">
+              👆 点击预测词填入（模型只是在根据统计学规律"瞎蒙"）
+            </p>
           </div>
         </el-collapse-transition>
       </div>
     </div>
 
     <!-- FINE-TUNING MODE -->
-    <div v-if="mode === 'finetune'" class="demo-content">
-      <el-card shadow="never" class="concept-card">
+    <div
+      v-if="mode === 'finetune'"
+      class="demo-content"
+    >
+      <el-card
+        shadow="never"
+        class="concept-card"
+      >
         <div class="concept-content">
-          <div class="icon">🎓</div>
+          <div class="icon">
+            🎓
+          </div>
           <div class="info">
             <h4>学习规矩 (Instruction Tuning)</h4>
             <p>核心目标：<strong>听懂指令 (Follow Instructions)</strong></p>
-            <p class="sub">通过 (问题 → 标准答案) 数据对，教会模型"像个助手一样说话"。</p>
+            <p class="sub">
+              通过 (问题 → 标准答案) 数据对，教会模型"像个助手一样说话"。
+            </p>
           </div>
         </div>
       </el-card>
@@ -85,18 +134,33 @@
       <div class="interactive-area">
         <div class="chat-window">
           <div class="message user">
-            <div class="avatar">👤</div>
-            <div class="bubble">我如何退货？</div>
+            <div class="avatar">
+              👤
+            </div>
+            <div class="bubble">
+              我如何退货？
+            </div>
           </div>
           
           <el-collapse-transition>
-            <div v-if="ftState === 'base'" class="message ai base-model">
-              <div class="avatar">🤖</div>
+            <div
+              v-if="ftState === 'base'"
+              class="message ai base-model"
+            >
+              <div class="avatar">
+                🤖
+              </div>
               <div class="bubble">
-                <el-tag type="info" size="small" class="badge">预训练模型 (Base Model)</el-tag>
+                <el-tag
+                  type="info"
+                  size="small"
+                  class="badge"
+                >
+                  预训练模型 (Base Model)
+                </el-tag>
                 <div class="bubble-text">
                   退货是指消费者将购买的商品退回给卖家的过程。在电子商务中，退货率通常在 20% 左右。根据《消费者权益保护法》...
-                  <br/><br/>
+                  <br><br>
                   <small>❌ (它在背书，不是在回答你)</small>
                 </div>
               </div>
@@ -104,10 +168,21 @@
           </el-collapse-transition>
 
           <el-collapse-transition>
-            <div v-if="ftState === 'tuned'" class="message ai tuned-model">
-              <div class="avatar">✨</div>
+            <div
+              v-if="ftState === 'tuned'"
+              class="message ai tuned-model"
+            >
+              <div class="avatar">
+                ✨
+              </div>
               <div class="bubble">
-                <el-tag type="success" size="small" class="badge">微调模型 (Instruct Model)</el-tag>
+                <el-tag
+                  type="success"
+                  size="small"
+                  class="badge"
+                >
+                  微调模型 (Instruct Model)
+                </el-tag>
                 <div class="bubble-text">
                   办理退货很简单，请按以下步骤操作：
                   <ol>
@@ -123,11 +198,20 @@
         </div>
 
         <div class="controls center-controls">
-          <el-radio-group v-model="ftState" size="large">
-            <el-radio-button label="base">原始模型 (Base)</el-radio-button>
-            <el-radio-button label="tuned">微调后 (Instruct)</el-radio-button>
+          <el-radio-group
+            v-model="ftState"
+            size="large"
+          >
+            <el-radio-button label="base">
+              原始模型 (Base)
+            </el-radio-button>
+            <el-radio-button label="tuned">
+              微调后 (Instruct)
+            </el-radio-button>
           </el-radio-group>
-          <p class="hint">切换开关，观察模型行为的巨大差异</p>
+          <p class="hint">
+            切换开关，观察模型行为的巨大差异
+          </p>
         </div>
       </div>
     </div>