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>
This commit is contained in:
sanbuphy
2026-02-18 17:38:10 +08:00
parent 8b01686e68
commit 0eba9e87e9
456 changed files with 28450 additions and 9677 deletions
@@ -20,15 +20,18 @@
</div>
<div class="controls">
<button class="control-btn" @click="simulateBuild">
<button
class="control-btn"
@click="simulateBuild"
>
🔄 重新构建
</button>
<div class="toggle-group">
<label class="toggle-label">
<input
type="checkbox"
v-model="showHash"
type="checkbox"
@change="updateFileNames"
>
<span class="toggle-text">启用 Hash</span>
@@ -57,16 +60,25 @@
}"
@click="selectFile(file)"
>
<div class="file-icon" :class="file.type">
<div
class="file-icon"
:class="file.type"
>
{{ getFileIcon(file.type) }}
</div>
<div class="file-info">
<div class="file-name-row">
<span class="file-base">{{ file.baseName }}</span>
<span v-if="showHash" class="file-hash">.{{ file.hash }}</span>
<span
v-if="showHash"
class="file-hash"
>.{{ file.hash }}</span>
<span class="file-ext">.{{ file.ext }}</span>
<span v-if="file.changed" class="changed-badge">更新</span>
<span
v-if="file.changed"
class="changed-badge"
>更新</span>
</div>
<div class="file-meta">
<span class="file-size">{{ formatSize(file.size) }}</span>
@@ -90,15 +102,15 @@
<div class="cache-visualization">
<div class="cache-legend">
<div class="legend-item">
<span class="legend-color hit"></span>
<span class="legend-color hit" />
<span>缓存命中 (Hash 匹配)</span>
</div>
<div class="legend-item">
<span class="legend-color miss"></span>
<span class="legend-color miss" />
<span>缓存未命中 (Hash 变化)</span>
</div>
<div class="legend-item">
<span class="legend-color new"></span>
<span class="legend-color new" />
<span>新文件 (无缓存)</span>
</div>
</div>
@@ -111,9 +123,18 @@
:class="block.status"
:style="{ animationDelay: `${index * 0.05}s` }"
>
<div class="block-icon">{{ block.icon }}</div>
<div class="block-name">{{ block.name }}</div>
<div v-if="block.hash" class="block-hash">{{ block.hash }}</div>
<div class="block-icon">
{{ block.icon }}
</div>
<div class="block-name">
{{ block.name }}
</div>
<div
v-if="block.hash"
class="block-hash"
>
{{ block.hash }}
</div>
</div>
</div>
</div>
@@ -122,16 +143,28 @@
<h4>📊 缓存策略效果</h4>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">{{ cacheHitRate }}%</div>
<div class="stat-label">缓存命中率</div>
<div class="stat-value">
{{ cacheHitRate }}%
</div>
<div class="stat-label">
缓存命中率
</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ bandwidthSaved }}</div>
<div class="stat-label">节省带宽</div>
<div class="stat-value">
{{ bandwidthSaved }}
</div>
<div class="stat-label">
节省带宽
</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ loadTime }}</div>
<div class="stat-label">平均加载时间</div>
<div class="stat-value">
{{ loadTime }}
</div>
<div class="stat-label">
平均加载时间
</div>
</div>
</div>
</div>
@@ -139,16 +172,27 @@
</div>
<!-- 文件详情 -->
<div v-if="selectedFile" class="file-details">
<div
v-if="selectedFile"
class="file-details"
>
<div class="detail-header">
<span class="detail-icon" :class="selectedFile.type">
<span
class="detail-icon"
:class="selectedFile.type"
>
{{ getFileIcon(selectedFile.type) }}
</span>
<div class="detail-title-wrap">
<span class="detail-title">{{ selectedFile.name }}</span>
<span class="detail-path">dist/{{ selectedFile.path }}</span>
</div>
<button class="close-btn" @click="selectedFile = null">×</button>
<button
class="close-btn"
@click="selectedFile = null"
>
×
</button>
</div>
<div class="detail-content">
@@ -174,7 +218,10 @@
</div>
</div>
<div class="detail-section" v-if="selectedFile.dependencies?.length">
<div
v-if="selectedFile.dependencies?.length"
class="detail-section"
>
<h4>🔗 依赖的模块 ({{ selectedFile.dependencies.length }})</h4>
<div class="deps-tags">
<span
@@ -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>
@@ -32,9 +32,15 @@
</div>
<!-- 雷达图对比视图 -->
<div v-if="currentView === 'radar'" class="radar-view">
<div
v-if="currentView === 'radar'"
class="radar-view"
>
<div class="radar-container">
<svg viewBox="0 0 400 400" class="radar-chart">
<svg
viewBox="0 0 400 400"
class="radar-chart"
>
<!-- 背景网格 -->
<g class="grid">
<polygon
@@ -104,7 +110,10 @@
@mouseenter="highlightedTool = tool.id"
@mouseleave="highlightedTool = null"
>
<span class="legend-color" :style="{ background: tool.borderColor }"></span>
<span
class="legend-color"
:style="{ background: tool.borderColor }"
/>
<span class="legend-name">{{ tool.name }}</span>
<span class="legend-desc">{{ tool.shortDesc }}</span>
</div>
@@ -112,21 +121,33 @@
</div>
<!-- 表格对比视图 -->
<div v-else-if="currentView === 'table'" class="table-view">
<div
v-else-if="currentView === 'table'"
class="table-view"
>
<table class="comparison-table">
<thead>
<tr>
<th>对比维度</th>
<th v-for="tool in bundlers" :key="tool.id">
<th
v-for="tool in bundlers"
:key="tool.id"
>
<span class="tool-header">
<span class="tool-icon" :style="{ background: tool.borderColor }">{{ tool.icon }}</span>
<span
class="tool-icon"
:style="{ background: tool.borderColor }"
>{{ tool.icon }}</span>
{{ tool.name }}
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(dim, dimIndex) in dimensions" :key="dim.key">
<tr
v-for="(dim, dimIndex) in dimensions"
:key="dim.key"
>
<td class="dim-name">
<span class="dim-icon">{{ dim.icon }}</span>
{{ dim.name }}
@@ -143,7 +164,7 @@
width: `${tool.scores[dimIndex] * 10}%`,
background: tool.borderColor
}"
></div>
/>
<span class="score-value">{{ tool.scores[dimIndex] }}/10</span>
</div>
</td>
@@ -153,7 +174,10 @@
</div>
<!-- 场景推荐视图 -->
<div v-else-if="currentView === 'recommend'" class="recommend-view">
<div
v-else-if="currentView === 'recommend'"
class="recommend-view"
>
<div class="scenario-list">
<div
v-for="scenario in scenarios"
@@ -173,7 +197,10 @@
<span class="expand-icon">{{ expandedScenario === scenario.id ? '▼' : '▶' }}</span>
</div>
<div v-if="expandedScenario === scenario.id" class="scenario-content">
<div
v-if="expandedScenario === scenario.id"
class="scenario-content"
>
<div class="recommendation">
<div class="best-choice">
<span class="choice-label">🏆 首选推荐</span>
@@ -184,11 +211,16 @@
>
{{ getTool(scenario.bestChoice).icon }} {{ getTool(scenario.bestChoice).name }}
</span>
<p class="choice-reason">{{ scenario.bestReason }}</p>
<p class="choice-reason">
{{ scenario.bestReason }}
</p>
</div>
</div>
<div v-if="scenario.alternative" class="alternative">
<div
v-if="scenario.alternative"
class="alternative"
>
<span class="choice-label">🥈 备选方案</span>
<div class="choice-content">
<span
@@ -197,7 +229,9 @@
>
{{ getTool(scenario.alternative).icon }} {{ getTool(scenario.alternative).name }}
</span>
<p class="choice-reason">{{ scenario.altReason }}</p>
<p class="choice-reason">
{{ scenario.altReason }}
</p>
</div>
</div>
</div>
@@ -211,8 +245,8 @@
<span class="icon">💡</span>
<strong>选择建议</strong>
{{ currentView === 'radar' ? '雷达图展示了各工具在多个维度的能力分布,面积越大代表综合能力越强。' :
currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分,方便精确对比。' :
'根据你的项目类型和团队情况,选择最适合的工具往往比选择"最好"的工具更重要。' }}
currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分,方便精确对比。' :
'根据你的项目类型和团队情况,选择最适合的工具往往比选择"最好"的工具更重要。' }}
</p>
</div>
</div>
@@ -15,7 +15,9 @@
<div class="demo-content">
<!-- 左侧路由配置 -->
<div class="routes-panel">
<div class="panel-title">🚦 路由配置</div>
<div class="panel-title">
🚦 路由配置
</div>
<div class="routes-list">
<div
v-for="route in routes"
@@ -25,14 +27,27 @@
@click="navigateTo(route)"
>
<div class="route-info">
<div class="route-path">{{ route.path }}</div>
<div class="route-name">{{ route.name }}</div>
<div class="route-path">
{{ route.path }}
</div>
<div class="route-name">
{{ route.name }}
</div>
</div>
<div class="route-load-info">
<span v-if="route.loading" class="loading-badge">加载中...</span>
<span v-else-if="route.loaded" class="loaded-badge">已缓存</span>
<span v-else class="lazy-badge">按需加载</span>
<span
v-if="route.loading"
class="loading-badge"
>加载中...</span>
<span
v-else-if="route.loaded"
class="loaded-badge"
>已缓存</span>
<span
v-else
class="lazy-badge"
>按需加载</span>
</div>
<div class="route-size">
@@ -44,7 +59,9 @@
<!-- 右侧加载可视化 -->
<div class="load-panel">
<div class="panel-title">📊 加载分析</div>
<div class="panel-title">
📊 加载分析
</div>
<div class="load-visualization">
<!-- 初始加载 -->
@@ -91,7 +108,9 @@
</div>
</div>
<p class="lazy-tip">💡 点击上方模块可模拟按需加载</p>
<p class="lazy-tip">
💡 点击上方模块可模拟按需加载
</p>
</div>
<!-- 优化效果 -->
@@ -101,7 +120,9 @@
<span class="summary-value original">{{ formatSize(totalSize) }}</span>
</div>
<div class="summary-arrow"></div>
<div class="summary-arrow">
</div>
<div class="summary-item">
<span class="summary-label">首屏加载</span>
@@ -7,31 +7,75 @@
</div>
<div class="graph-container">
<svg class="graph-svg" viewBox="0 0 500 300">
<svg
class="graph-svg"
viewBox="0 0 500 300"
>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="18" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="var(--vp-c-text-3)" />
<marker
id="arrow"
markerWidth="8"
markerHeight="6"
refX="18"
refY="3"
orient="auto"
>
<polygon
points="0 0, 8 3, 0 6"
fill="var(--vp-c-text-3)"
/>
</marker>
</defs>
<line v-for="edge in edges" :key="edge.id"
:x1="getNode(edge.source).x" :y1="getNode(edge.source).y"
:x2="getNode(edge.target).x" :y2="getNode(edge.target).y"
stroke="var(--vp-c-text-3)" stroke-width="1.5" marker-end="url(#arrow)"
<line
v-for="edge in edges"
:key="edge.id"
:x1="getNode(edge.source).x"
:y1="getNode(edge.source).y"
:x2="getNode(edge.target).x"
:y2="getNode(edge.target).y"
stroke="var(--vp-c-text-3)"
stroke-width="1.5"
marker-end="url(#arrow)"
/>
<g v-for="node in nodes" :key="node.id" :transform="`translate(${node.x}, ${node.y})`">
<circle :r="node.r" :fill="node.color" stroke="white" stroke-width="2" />
<text y="4" text-anchor="middle" fill="white" font-size="12">{{ node.icon }}</text>
<text :y="node.r + 14" text-anchor="middle" fill="var(--vp-c-text-1)" font-size="10">{{ node.name }}</text>
<g
v-for="node in nodes"
:key="node.id"
:transform="`translate(${node.x}, ${node.y})`"
>
<circle
:r="node.r"
:fill="node.color"
stroke="white"
stroke-width="2"
/>
<text
y="4"
text-anchor="middle"
fill="white"
font-size="12"
>{{ node.icon }}</text>
<text
:y="node.r + 14"
text-anchor="middle"
fill="var(--vp-c-text-1)"
font-size="10"
>{{ node.name }}</text>
</g>
</svg>
</div>
<div class="legend">
<div class="legend-item"><span class="dot entry"></span>入口文件</div>
<div class="legend-item"><span class="dot module"></span>模块</div>
<div class="legend-item"><span class="arrow"></span>依赖关系</div>
<div class="legend-item">
<span class="dot entry" />入口文件
</div>
<div class="legend-item">
<span class="dot module" />模块
</div>
<div class="legend-item">
<span class="arrow"></span>依赖关系
</div>
</div>
<div class="info-box">
@@ -21,7 +21,11 @@
<span class="title">传统刷新</span>
</div>
<div class="card-body">
<div class="step" v-for="(step, i) in noHmrSteps" :key="i">
<div
v-for="(step, i) in noHmrSteps"
:key="i"
class="step"
>
<span class="step-num">{{ i + 1 }}</span>
<span class="step-text">{{ step }}</span>
</div>
@@ -32,7 +36,9 @@
</div>
</div>
<div class="vs-divider">VS</div>
<div class="vs-divider">
VS
</div>
<div class="method-card hmr">
<div class="card-header">
@@ -40,7 +46,11 @@
<span class="title">HMR 热更新</span>
</div>
<div class="card-body">
<div class="step" v-for="(step, i) in hmrSteps" :key="i">
<div
v-for="(step, i) in hmrSteps"
:key="i"
class="step"
>
<span class="step-num">{{ i + 1 }}</span>
<span class="step-text">{{ step }}</span>
</div>
@@ -56,12 +66,21 @@
<div class="flow-diagram">
<h4>HMR 工作流程</h4>
<div class="flow-steps">
<div class="flow-step" v-for="(step, i) in flowSteps" :key="i">
<div
v-for="(step, i) in flowSteps"
:key="i"
class="flow-step"
>
<div class="step-box">
<span class="step-icon">{{ step.icon }}</span>
<span class="step-label">{{ step.label }}</span>
</div>
<div v-if="i < flowSteps.length - 1" class="step-arrow"></div>
<div
v-if="i < flowSteps.length - 1"
class="step-arrow"
>
</div>
</div>
</div>
</div>
@@ -79,10 +98,16 @@
</tr>
</thead>
<tbody>
<tr v-for="tool in hmrTools" :key="tool.name">
<tr
v-for="tool in hmrTools"
:key="tool.name"
>
<td><strong>{{ tool.name }}</strong></td>
<td>
<span class="badge" :class="tool.supportClass">{{ tool.support }}</span>
<span
class="badge"
:class="tool.supportClass"
>{{ tool.support }}</span>
</td>
<td>{{ tool.speed }}</td>
<td>{{ tool.feature }}</td>
@@ -15,7 +15,9 @@
<div class="demo-content">
<div class="code-comparison">
<div class="code-panel source">
<div class="panel-title">📄 源代码 (Source)</div>
<div class="panel-title">
📄 源代码 (Source)
</div>
<pre class="code-block"><code>function calculateSum(a, b) {
// 计算两个数的和
const result = a + b;
@@ -28,14 +30,20 @@ console.log('总和:', sum);</code></pre>
</div>
<div class="mapping-arrows">
<div class="arrow" v-for="i in 5" :key="i">
<span class="line"></span>
<div
v-for="i in 5"
:key="i"
class="arrow"
>
<span class="line" />
<span class="point"></span>
</div>
</div>
<div class="code-panel minified">
<div class="panel-title">🔧 压缩后 (Minified)</div>
<div class="panel-title">
🔧 压缩后 (Minified)
</div>
<pre class="code-block"><code>function n(n,r){var t=n+r;return console.log("结果:",t),t}var r=n(10,20);console.log("总和:",r);
// sourceMappingURL=app.js.map (指向映射文件)</code></pre>
</div>
@@ -20,7 +20,9 @@
<div class="demo-content">
<!-- 源代码面板 -->
<div class="source-panel">
<div class="panel-title">📦 utils.js (源代码)</div>
<div class="panel-title">
📦 utils.js (源代码)
</div>
<div class="code-block">
<div
v-for="(func, index) in functions"
@@ -36,7 +38,9 @@
<!-- 控制面板 -->
<div class="control-panel">
<div class="panel-title">🎛 选择需要的功能</div>
<div class="panel-title">
🎛 选择需要的功能
</div>
<div class="function-toggles">
<label
v-for="(func, index) in functions"
@@ -44,7 +48,10 @@
class="toggle-item"
:class="{ active: func.used }"
>
<input type="checkbox" v-model="func.used" />
<input
v-model="func.used"
type="checkbox"
>
<span class="toggle-name">{{ func.name }}</span>
<span class="toggle-size">{{ func.size }}B</span>
</label>
@@ -55,7 +62,9 @@
<span class="stat-label">原始大小</span>
<span class="stat-value original">{{ originalSize }}B</span>
</div>
<div class="stat-arrow"></div>
<div class="stat-arrow">
</div>
<div class="stat-item">
<span class="stat-label">Tree Shaking </span>
<span class="stat-value optimized">{{ optimizedSize }}B</span>