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
@@ -102,7 +102,9 @@ const stop = () => {
|
||||
<h4>调用栈</h4>
|
||||
<div class="stack-container">
|
||||
<div class="stack-base">
|
||||
<div class="stack-label">栈底</div>
|
||||
<div class="stack-label">
|
||||
栈底
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-frames">
|
||||
@@ -114,18 +116,27 @@ const stop = () => {
|
||||
:class="{ 'active': frame.active }"
|
||||
:style="{ bottom: `${index * 60}px` }"
|
||||
>
|
||||
<div class="frame-function">{{ frame.function }}()</div>
|
||||
<div class="frame-code">{{ frame.code }}</div>
|
||||
<div class="frame-function">
|
||||
{{ frame.function }}()
|
||||
</div>
|
||||
<div class="frame-code">
|
||||
{{ frame.code }}
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<div v-if="callStack.length === 0" class="empty-stack">
|
||||
<div
|
||||
v-if="callStack.length === 0"
|
||||
class="empty-stack"
|
||||
>
|
||||
栈为空
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-top">
|
||||
<div class="stack-label">栈顶</div>
|
||||
<div class="stack-label">
|
||||
栈顶
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -145,7 +156,10 @@ const stop = () => {
|
||||
<div class="output-section">
|
||||
<h4>输出</h4>
|
||||
<div class="output-container">
|
||||
<div v-if="output.length === 0" class="empty-output">
|
||||
<div
|
||||
v-if="output.length === 0"
|
||||
class="empty-output"
|
||||
>
|
||||
等待输出...
|
||||
</div>
|
||||
<transition-group name="output">
|
||||
@@ -162,16 +176,32 @@ const stop = () => {
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<button @click="play" :disabled="isAnimating" class="btn-play">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-play"
|
||||
@click="play"
|
||||
>
|
||||
{{ isAnimating ? '执行中...' : '▶ 自动演示' }}
|
||||
</button>
|
||||
<button @click="nextStep" :disabled="isAnimating || currentStep >= codeSteps.length" class="btn-step">
|
||||
<button
|
||||
:disabled="isAnimating || currentStep >= codeSteps.length"
|
||||
class="btn-step"
|
||||
@click="nextStep"
|
||||
>
|
||||
⏭ 单步执行
|
||||
</button>
|
||||
<button @click="stop" :disabled="!isAnimating" class="btn-stop">
|
||||
<button
|
||||
:disabled="!isAnimating"
|
||||
class="btn-stop"
|
||||
@click="stop"
|
||||
>
|
||||
⏸ 停止
|
||||
</button>
|
||||
<button @click="reset" :disabled="isAnimating" class="btn-reset">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-reset"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -133,15 +133,15 @@ const stop = () => {
|
||||
<h4>对象引用关系</h4>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-color unmarked"></span>
|
||||
<span class="legend-color unmarked" />
|
||||
<span>未标记</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color marked"></span>
|
||||
<span class="legend-color marked" />
|
||||
<span>已标记(可达)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color collected"></span>
|
||||
<span class="legend-color collected" />
|
||||
<span>已回收</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,8 +151,12 @@ const stop = () => {
|
||||
<!-- 根对象 -->
|
||||
<div class="root-object">
|
||||
<div class="object-box root">
|
||||
<div class="object-icon">🌳</div>
|
||||
<div class="object-name">Root</div>
|
||||
<div class="object-icon">
|
||||
🌳
|
||||
</div>
|
||||
<div class="object-name">
|
||||
Root
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -167,22 +171,53 @@ const stop = () => {
|
||||
'collected': obj.collected
|
||||
}"
|
||||
>
|
||||
<div class="object-box" :style="{ borderColor: obj.color }">
|
||||
<div class="object-icon" :style="{ background: obj.color }">
|
||||
<div
|
||||
class="object-box"
|
||||
:style="{ borderColor: obj.color }"
|
||||
>
|
||||
<div
|
||||
class="object-icon"
|
||||
:style="{ background: obj.color }"
|
||||
>
|
||||
{{ obj.collected ? '💀' : '📦' }}
|
||||
</div>
|
||||
<div class="object-name">{{ obj.name }}</div>
|
||||
<div v-if="obj.marked" class="object-status">✓ 可达</div>
|
||||
<div v-if="obj.collected" class="object-status collected">✗ 回收</div>
|
||||
<div class="object-name">
|
||||
{{ obj.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="obj.marked"
|
||||
class="object-status"
|
||||
>
|
||||
✓ 可达
|
||||
</div>
|
||||
<div
|
||||
v-if="obj.collected"
|
||||
class="object-status collected"
|
||||
>
|
||||
✗ 回收
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引用连线 (用SVG绘制) -->
|
||||
<svg class="connections" viewBox="0 0 600 400">
|
||||
<svg
|
||||
class="connections"
|
||||
viewBox="0 0 600 400"
|
||||
>
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#a0aec0" />
|
||||
<marker
|
||||
id="arrowhead"
|
||||
markerWidth="10"
|
||||
markerHeight="7"
|
||||
refX="9"
|
||||
refY="3.5"
|
||||
orient="auto"
|
||||
>
|
||||
<polygon
|
||||
points="0 0, 10 3.5, 0 7"
|
||||
fill="#a0aec0"
|
||||
/>
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- Root -> obj1 -->
|
||||
@@ -240,16 +275,32 @@ const stop = () => {
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<button @click="play" :disabled="isAnimating" class="btn-play">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-play"
|
||||
@click="play"
|
||||
>
|
||||
{{ isAnimating ? '执行中...' : '▶ 自动演示' }}
|
||||
</button>
|
||||
<button @click="nextStep" :disabled="isAnimating || currentStep >= steps.length" class="btn-step">
|
||||
<button
|
||||
:disabled="isAnimating || currentStep >= steps.length"
|
||||
class="btn-step"
|
||||
@click="nextStep"
|
||||
>
|
||||
⏭ 单步执行
|
||||
</button>
|
||||
<button @click="stop" :disabled="!isAnimating" class="btn-stop">
|
||||
<button
|
||||
:disabled="!isAnimating"
|
||||
class="btn-stop"
|
||||
@click="stop"
|
||||
>
|
||||
⏸ 停止
|
||||
</button>
|
||||
<button @click="reset" :disabled="isAnimating" class="btn-reset">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-reset"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
@@ -297,28 +348,36 @@ const stop = () => {
|
||||
<h4>实际应用技巧</h4>
|
||||
<div class="tips-grid">
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">💡</div>
|
||||
<div class="tip-icon">
|
||||
💡
|
||||
</div>
|
||||
<div class="tip-content">
|
||||
<strong>及时解除引用</strong>
|
||||
<p>对象不再使用时,将其设为 null</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">🔒</div>
|
||||
<div class="tip-icon">
|
||||
🔒
|
||||
</div>
|
||||
<div class="tip-content">
|
||||
<strong>避免意外的全局变量</strong>
|
||||
<p>使用 const/let 代替 var</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">🧹</div>
|
||||
<div class="tip-icon">
|
||||
🧹
|
||||
</div>
|
||||
<div class="tip-content">
|
||||
<strong>清理事件监听</strong>
|
||||
<p>组件销毁时移除所有监听器</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">📊</div>
|
||||
<div class="tip-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="tip-content">
|
||||
<strong>定期检查内存</strong>
|
||||
<p>用 DevTools Memory 面板监控</p>
|
||||
|
||||
@@ -98,9 +98,9 @@ const resetAll = () => {
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
:key="scenario.value"
|
||||
@click="activeScenario = scenario.value"
|
||||
:class="{ 'active': activeScenario === scenario.value }"
|
||||
class="scenario-tab"
|
||||
@click="activeScenario = scenario.value"
|
||||
>
|
||||
<span class="tab-icon">{{ scenario.icon }}</span>
|
||||
<span class="tab-label">{{ scenario.label }}</span>
|
||||
@@ -119,10 +119,16 @@ const resetAll = () => {
|
||||
:class="{ 'warning': memoryUsage > 70, 'danger': memoryUsage > 90 }"
|
||||
:style="{ width: `${memoryUsage}%` }"
|
||||
>
|
||||
<span v-if="memoryUsage > 10" class="memory-text">{{ memoryUsage }}%</span>
|
||||
<span
|
||||
v-if="memoryUsage > 10"
|
||||
class="memory-text"
|
||||
>{{ memoryUsage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="memoryUsage > 90" class="memory-alert">
|
||||
<div
|
||||
v-if="memoryUsage > 90"
|
||||
class="memory-alert"
|
||||
>
|
||||
⚠️ 内存占用过高!可能导致页面卡顿或崩溃
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,7 +136,10 @@ const resetAll = () => {
|
||||
<!-- 场景内容 -->
|
||||
<div class="scenario-content">
|
||||
<!-- 全局变量场景 -->
|
||||
<div v-if="activeScenario === 'global-vars'" class="scenario-panel">
|
||||
<div
|
||||
v-if="activeScenario === 'global-vars'"
|
||||
class="scenario-panel"
|
||||
>
|
||||
<h4>全局变量泄漏</h4>
|
||||
|
||||
<div class="scenario-description">
|
||||
@@ -139,10 +148,16 @@ const resetAll = () => {
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button @click="addGlobalVariable" class="btn-add">
|
||||
<button
|
||||
class="btn-add"
|
||||
@click="addGlobalVariable"
|
||||
>
|
||||
➕ 添加全局变量
|
||||
</button>
|
||||
<button @click="clearGlobalVariables" class="btn-clear">
|
||||
<button
|
||||
class="btn-clear"
|
||||
@click="clearGlobalVariables"
|
||||
>
|
||||
🗑️ 清空全局变量
|
||||
</button>
|
||||
</div>
|
||||
@@ -161,10 +176,16 @@ const resetAll = () => {
|
||||
<span class="item-time">{{ item.timestamp }}</span>
|
||||
<span class="item-size">{{ item.data.length }} 项数据</span>
|
||||
</div>
|
||||
<div v-if="globalMemory.length === 0" class="empty-state">
|
||||
<div
|
||||
v-if="globalMemory.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
暂无全局变量
|
||||
</div>
|
||||
<div v-if="globalMemory.length > 5" class="more-items">
|
||||
<div
|
||||
v-if="globalMemory.length > 5"
|
||||
class="more-items"
|
||||
>
|
||||
... 还有 {{ globalMemory.length - 5 }} 项
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,7 +202,10 @@ function addItem() {
|
||||
</div>
|
||||
|
||||
<!-- 事件监听场景 -->
|
||||
<div v-if="activeScenario === 'event-listeners'" class="scenario-panel">
|
||||
<div
|
||||
v-if="activeScenario === 'event-listeners'"
|
||||
class="scenario-panel"
|
||||
>
|
||||
<h4>事件监听器泄漏</h4>
|
||||
|
||||
<div class="scenario-description">
|
||||
@@ -190,10 +214,16 @@ function addItem() {
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button @click="addEventListener" class="btn-add">
|
||||
<button
|
||||
class="btn-add"
|
||||
@click="addEventListener"
|
||||
>
|
||||
➕ 添加事件监听
|
||||
</button>
|
||||
<button @click="removeAllListeners" class="btn-clear">
|
||||
<button
|
||||
class="btn-clear"
|
||||
@click="removeAllListeners"
|
||||
>
|
||||
🗑️ 移除所有监听
|
||||
</button>
|
||||
</div>
|
||||
@@ -208,16 +238,24 @@ function addItem() {
|
||||
:key="listener.id"
|
||||
class="listener-item"
|
||||
>
|
||||
<div class="listener-icon">🎯</div>
|
||||
<div class="listener-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="listener-info">
|
||||
<span class="listener-id">监听器 #{{ listener.id }}</span>
|
||||
<span class="listener-status">活跃中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="eventListeners.length === 0" class="empty-state">
|
||||
<div
|
||||
v-if="eventListeners.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
暂无事件监听器
|
||||
</div>
|
||||
<div v-if="eventListeners.length > 5" class="more-items">
|
||||
<div
|
||||
v-if="eventListeners.length > 5"
|
||||
class="more-items"
|
||||
>
|
||||
... 还有 {{ eventListeners.length - 5 }} 个监听器
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,7 +278,10 @@ button.removeEventListener('click', handler)</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- 闭包场景 -->
|
||||
<div v-if="activeScenario === 'closures'" class="scenario-panel">
|
||||
<div
|
||||
v-if="activeScenario === 'closures'"
|
||||
class="scenario-panel"
|
||||
>
|
||||
<h4>闭包引用泄漏</h4>
|
||||
|
||||
<div class="scenario-description">
|
||||
@@ -249,10 +290,16 @@ button.removeEventListener('click', handler)</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button @click="createClosure" class="btn-add">
|
||||
<button
|
||||
class="btn-add"
|
||||
@click="createClosure"
|
||||
>
|
||||
➕ 创建闭包
|
||||
</button>
|
||||
<button @click="clearClosures" class="btn-clear">
|
||||
<button
|
||||
class="btn-clear"
|
||||
@click="clearClosures"
|
||||
>
|
||||
🗑️ 清空闭包
|
||||
</button>
|
||||
</div>
|
||||
@@ -267,17 +314,25 @@ button.removeEventListener('click', handler)</code></pre>
|
||||
:key="item.id"
|
||||
class="closure-item"
|
||||
>
|
||||
<div class="closure-icon">🔒</div>
|
||||
<div class="closure-icon">
|
||||
🔒
|
||||
</div>
|
||||
<div class="closure-info">
|
||||
<span class="closure-id">闭包 #{{ item.id }}</span>
|
||||
<span class="closure-time">{{ item.timestamp }}</span>
|
||||
<span class="closure-size">持有 {{ item.data.length }} 项数据</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="closureItems.length === 0" class="empty-state">
|
||||
<div
|
||||
v-if="closureItems.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
暂无闭包
|
||||
</div>
|
||||
<div v-if="closureItems.length > 5" class="more-items">
|
||||
<div
|
||||
v-if="closureItems.length > 5"
|
||||
class="more-items"
|
||||
>
|
||||
... 还有 {{ closureItems.length - 5 }} 个闭包
|
||||
</div>
|
||||
</div>
|
||||
@@ -306,7 +361,10 @@ handler = null // 释放引用</code></pre>
|
||||
|
||||
<!-- 重置按钮 -->
|
||||
<div class="global-actions">
|
||||
<button @click="resetAll" class="btn-reset">
|
||||
<button
|
||||
class="btn-reset"
|
||||
@click="resetAll"
|
||||
>
|
||||
🔄 重置所有场景
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -63,9 +63,9 @@ const reset = () => {
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
@click="activeTab = tab.value"
|
||||
:class="{ 'active': activeTab === tab.value }"
|
||||
class="tab-btn"
|
||||
@click="activeTab = tab.value"
|
||||
>
|
||||
<span class="tab-icon">{{ tab.icon }}</span>
|
||||
<span class="tab-label">{{ tab.label }}</span>
|
||||
@@ -74,7 +74,10 @@ const reset = () => {
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- 浏览器环境 -->
|
||||
<div v-if="activeTab === 'browser'" class="environment-content">
|
||||
<div
|
||||
v-if="activeTab === 'browser'"
|
||||
class="environment-content"
|
||||
>
|
||||
<h4>浏览器环境</h4>
|
||||
|
||||
<div class="api-grid">
|
||||
@@ -83,9 +86,15 @@ const reset = () => {
|
||||
:key="api.name"
|
||||
class="api-card"
|
||||
>
|
||||
<div class="api-name">{{ api.name }}</div>
|
||||
<div class="api-description">{{ api.description }}</div>
|
||||
<div class="api-example">{{ api.example }}</div>
|
||||
<div class="api-name">
|
||||
{{ api.name }}
|
||||
</div>
|
||||
<div class="api-description">
|
||||
{{ api.description }}
|
||||
</div>
|
||||
<div class="api-example">
|
||||
{{ api.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +111,10 @@ const reset = () => {
|
||||
</div>
|
||||
|
||||
<!-- Node.js 环境 -->
|
||||
<div v-if="activeTab === 'nodejs'" class="environment-content">
|
||||
<div
|
||||
v-if="activeTab === 'nodejs'"
|
||||
class="environment-content"
|
||||
>
|
||||
<h4>Node.js 环境</h4>
|
||||
|
||||
<div class="api-grid">
|
||||
@@ -111,9 +123,15 @@ const reset = () => {
|
||||
:key="api.name"
|
||||
class="api-card"
|
||||
>
|
||||
<div class="api-name">{{ api.name }}</div>
|
||||
<div class="api-description">{{ api.description }}</div>
|
||||
<div class="api-example">{{ api.example }}</div>
|
||||
<div class="api-name">
|
||||
{{ api.name }}
|
||||
</div>
|
||||
<div class="api-description">
|
||||
{{ api.description }}
|
||||
</div>
|
||||
<div class="api-example">
|
||||
{{ api.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -154,7 +172,10 @@ const reset = () => {
|
||||
<div class="result-content">
|
||||
{{ browserResult || '点击"在浏览器运行"查看结果' }}
|
||||
</div>
|
||||
<button @click="runInBrowser" class="run-btn">
|
||||
<button
|
||||
class="run-btn"
|
||||
@click="runInBrowser"
|
||||
>
|
||||
在浏览器运行
|
||||
</button>
|
||||
</div>
|
||||
@@ -167,13 +188,20 @@ const reset = () => {
|
||||
<div class="result-content">
|
||||
{{ nodeResult || '需要在 Node.js 环境中运行' }}
|
||||
</div>
|
||||
<button @click="runInNode" class="run-btn" disabled>
|
||||
<button
|
||||
class="run-btn"
|
||||
disabled
|
||||
@click="runInNode"
|
||||
>
|
||||
需要终端运行
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="reset" class="reset-btn">
|
||||
<button
|
||||
class="reset-btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
@@ -183,7 +211,9 @@ const reset = () => {
|
||||
<p><strong>核心区别:</strong></p>
|
||||
<p>浏览器运行时专注于用户界面和网页交互,提供 DOM、BOM、fetch 等前端专用 API。</p>
|
||||
<p>Node.js 运行时专注于服务器端开发,提供文件系统、HTTP 服务器、进程管理等后端专用 API。</p>
|
||||
<p class="highlight">同样的 JavaScript 语法,但能用的 API 完全不同——这就是"环境判断"的重要性。</p>
|
||||
<p class="highlight">
|
||||
同样的 JavaScript 语法,但能用的 API 完全不同——这就是"环境判断"的重要性。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,10 +115,22 @@ const stop = () => {
|
||||
}"
|
||||
>
|
||||
<span class="item-number">{{ item.id }}</span>
|
||||
<span class="item-code" :class="`type-${item.type}`">{{ item.code }}</span>
|
||||
<span v-if="item.type === 'sync'" class="item-tag">同步</span>
|
||||
<span v-else-if="item.type === 'micro'" class="item-tag micro">微任务</span>
|
||||
<span v-else-if="item.type === 'macro'" class="item-tag macro">宏任务</span>
|
||||
<span
|
||||
class="item-code"
|
||||
:class="`type-${item.type}`"
|
||||
>{{ item.code }}</span>
|
||||
<span
|
||||
v-if="item.type === 'sync'"
|
||||
class="item-tag"
|
||||
>同步</span>
|
||||
<span
|
||||
v-else-if="item.type === 'micro'"
|
||||
class="item-tag micro"
|
||||
>微任务</span>
|
||||
<span
|
||||
v-else-if="item.type === 'macro'"
|
||||
class="item-tag macro"
|
||||
>宏任务</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,10 +141,16 @@ const stop = () => {
|
||||
<div class="stack-panel">
|
||||
<h4>调用栈 (正在执行)</h4>
|
||||
<div class="stack-content">
|
||||
<div v-if="currentStep < executionSteps.length" class="current-action">
|
||||
<div
|
||||
v-if="currentStep < executionSteps.length"
|
||||
class="current-action"
|
||||
>
|
||||
{{ executionSteps[currentStep]?.description }}
|
||||
</div>
|
||||
<div v-else class="current-action done">
|
||||
<div
|
||||
v-else
|
||||
class="current-action done"
|
||||
>
|
||||
执行完成
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,12 +170,27 @@ const stop = () => {
|
||||
class="task-item micro"
|
||||
:class="{ 'ready': task.status === 'ready' }"
|
||||
>
|
||||
<div class="task-code">{{ task.code }}</div>
|
||||
<div v-if="task.status === 'ready'" class="task-status">✅ 就绪</div>
|
||||
<div v-else class="task-status">⏳ 等待</div>
|
||||
<div class="task-code">
|
||||
{{ task.code }}
|
||||
</div>
|
||||
<div
|
||||
v-if="task.status === 'ready'"
|
||||
class="task-status"
|
||||
>
|
||||
✅ 就绪
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="task-status"
|
||||
>
|
||||
⏳ 等待
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="microTaskQueue.length === 0" class="empty-queue">
|
||||
<div
|
||||
v-if="microTaskQueue.length === 0"
|
||||
class="empty-queue"
|
||||
>
|
||||
队列为空
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,12 +210,27 @@ const stop = () => {
|
||||
class="task-item macro"
|
||||
:class="{ 'ready': task.status === 'ready' }"
|
||||
>
|
||||
<div class="task-code">{{ task.code }}</div>
|
||||
<div v-if="task.status === 'ready'" class="task-status">✅ 就绪</div>
|
||||
<div v-else class="task-status">⏳ 等待</div>
|
||||
<div class="task-code">
|
||||
{{ task.code }}
|
||||
</div>
|
||||
<div
|
||||
v-if="task.status === 'ready'"
|
||||
class="task-status"
|
||||
>
|
||||
✅ 就绪
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="task-status"
|
||||
>
|
||||
⏳ 等待
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="macroTaskQueue.length === 0" class="empty-queue">
|
||||
<div
|
||||
v-if="macroTaskQueue.length === 0"
|
||||
class="empty-queue"
|
||||
>
|
||||
队列为空
|
||||
</div>
|
||||
</div>
|
||||
@@ -193,7 +241,10 @@ const stop = () => {
|
||||
<div class="output-section">
|
||||
<h4>输出日志 (执行顺序)</h4>
|
||||
<div class="output-log">
|
||||
<div v-if="outputLog.length === 0" class="empty-log">
|
||||
<div
|
||||
v-if="outputLog.length === 0"
|
||||
class="empty-log"
|
||||
>
|
||||
等待输出...
|
||||
</div>
|
||||
<transition-group name="output">
|
||||
@@ -211,16 +262,32 @@ const stop = () => {
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<button @click="play" :disabled="isAnimating" class="btn-play">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-play"
|
||||
@click="play"
|
||||
>
|
||||
{{ isAnimating ? '执行中...' : '▶ 自动演示' }}
|
||||
</button>
|
||||
<button @click="nextStep" :disabled="isAnimating || currentStep >= executionSteps.length" class="btn-step">
|
||||
<button
|
||||
:disabled="isAnimating || currentStep >= executionSteps.length"
|
||||
class="btn-step"
|
||||
@click="nextStep"
|
||||
>
|
||||
⏭ 单步执行
|
||||
</button>
|
||||
<button @click="stop" :disabled="!isAnimating" class="btn-stop">
|
||||
<button
|
||||
:disabled="!isAnimating"
|
||||
class="btn-stop"
|
||||
@click="stop"
|
||||
>
|
||||
⏸ 停止
|
||||
</button>
|
||||
<button @click="reset" :disabled="isAnimating" class="btn-reset">
|
||||
<button
|
||||
:disabled="isAnimating"
|
||||
class="btn-reset"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user