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:
+68
-21
@@ -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
|
||||
|
||||
+32
-9
@@ -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>
|
||||
|
||||
|
||||
+49
-15
@@ -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>
|
||||
|
||||
+30
-9
@@ -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>
|
||||
|
||||
+58
-14
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user