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
+119
-47
@@ -2,11 +2,22 @@
|
||||
<div class="availability-zone-demo">
|
||||
<!-- 控制面板 -->
|
||||
<div class="control-panel">
|
||||
<el-radio-group v-model="viewMode" size="small">
|
||||
<el-radio-button label="normal">正常运行</el-radio-button>
|
||||
<el-radio-button label="az-failure">单 AZ 故障</el-radio-button>
|
||||
<el-radio-button label="maintenance">维护模式</el-radio-button>
|
||||
<el-radio-button label="scaling">弹性扩容</el-radio-button>
|
||||
<el-radio-group
|
||||
v-model="viewMode"
|
||||
size="small"
|
||||
>
|
||||
<el-radio-button label="normal">
|
||||
正常运行
|
||||
</el-radio-button>
|
||||
<el-radio-button label="az-failure">
|
||||
单 AZ 故障
|
||||
</el-radio-button>
|
||||
<el-radio-button label="maintenance">
|
||||
维护模式
|
||||
</el-radio-button>
|
||||
<el-radio-button label="scaling">
|
||||
弹性扩容
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-switch
|
||||
@@ -20,65 +31,108 @@
|
||||
<div class="architecture-container">
|
||||
<!-- 流量入口层 -->
|
||||
<div class="layer entry-layer">
|
||||
<div class="layer-title">🚪 流量入口层</div>
|
||||
<div class="layer-title">
|
||||
🚪 流量入口层
|
||||
</div>
|
||||
<div class="entry-components">
|
||||
<div class="component dns">
|
||||
<div class="component-icon">📖</div>
|
||||
<div class="component-name">DNS 解析</div>
|
||||
<div class="component-icon">
|
||||
📖
|
||||
</div>
|
||||
<div class="component-name">
|
||||
DNS 解析
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<div class="component cdn">
|
||||
<div class="component-icon">🌐</div>
|
||||
<div class="component-name">CDN 加速</div>
|
||||
<div class="component-icon">
|
||||
🌐
|
||||
</div>
|
||||
<div class="component-name">
|
||||
CDN 加速
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<div class="component waf">
|
||||
<div class="component-icon">🛡️</div>
|
||||
<div class="component-name">WAF 防护</div>
|
||||
<div class="component-icon">
|
||||
🛡️
|
||||
</div>
|
||||
<div class="component-name">
|
||||
WAF 防护
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流量分发层 -->
|
||||
<div class="layer distribution-layer">
|
||||
<div class="layer-title">⚖️ 流量分发层 (SLB)</div>
|
||||
<div class="slb-cluster"
|
||||
:class="{ 'failover-active': viewMode === 'az-failure' }">
|
||||
<div class="slb-instance primary"
|
||||
:class="{ failed: viewMode === 'az-failure' }">
|
||||
<div class="layer-title">
|
||||
⚖️ 流量分发层 (SLB)
|
||||
</div>
|
||||
<div
|
||||
class="slb-cluster"
|
||||
:class="{ 'failover-active': viewMode === 'az-failure' }"
|
||||
>
|
||||
<div
|
||||
class="slb-instance primary"
|
||||
:class="{ failed: viewMode === 'az-failure' }"
|
||||
>
|
||||
<div class="instance-header">
|
||||
<span class="status-indicator"
|
||||
:class="viewMode === 'az-failure' ? 'offline' : 'online'"></span>
|
||||
<span
|
||||
class="status-indicator"
|
||||
:class="viewMode === 'az-failure' ? 'offline' : 'online'"
|
||||
/>
|
||||
<span class="instance-name">SLB-A (主)</span>
|
||||
</div>
|
||||
<div class="instance-meta">可用区 A</div>
|
||||
<div class="instance-meta">
|
||||
可用区 A
|
||||
</div>
|
||||
|
||||
<!-- 流量动画 -->
|
||||
<div class="traffic-flow" v-if="showTraffic && viewMode !== 'az-failure'">
|
||||
<div class="flow-dot"></div>
|
||||
<div
|
||||
v-if="showTraffic && viewMode !== 'az-failure'"
|
||||
class="traffic-flow"
|
||||
>
|
||||
<div class="flow-dot" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="failover-arrow" v-if="viewMode === 'az-failure'">
|
||||
<div
|
||||
v-if="viewMode === 'az-failure'"
|
||||
class="failover-arrow"
|
||||
>
|
||||
<span class="failover-text">故障转移</span>
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-line" />
|
||||
</div>
|
||||
|
||||
<div class="slb-instance secondary"
|
||||
:class="{ 'taking-over': viewMode === 'az-failure' }">
|
||||
<div
|
||||
class="slb-instance secondary"
|
||||
:class="{ 'taking-over': viewMode === 'az-failure' }"
|
||||
>
|
||||
<div class="instance-header">
|
||||
<span class="status-indicator"
|
||||
:class="viewMode === 'az-failure' ? 'online' : 'standby'"></span>
|
||||
<span
|
||||
class="status-indicator"
|
||||
:class="viewMode === 'az-failure' ? 'online' : 'standby'"
|
||||
/>
|
||||
<span class="instance-name">SLB-B (备)</span>
|
||||
</div>
|
||||
<div class="instance-meta">可用区 B</div>
|
||||
<div class="instance-meta">
|
||||
可用区 B
|
||||
</div>
|
||||
|
||||
<div class="traffic-flow" v-if="showTraffic && viewMode === 'az-failure'">
|
||||
<div class="flow-dot"></div>
|
||||
<div
|
||||
v-if="showTraffic && viewMode === 'az-failure'"
|
||||
class="traffic-flow"
|
||||
>
|
||||
<div class="flow-dot" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,7 +140,9 @@
|
||||
|
||||
<!-- 可用区层 -->
|
||||
<div class="layer azs-layer">
|
||||
<div class="layer-title">🏢 可用区层 (Multi-AZ)</div>
|
||||
<div class="layer-title">
|
||||
🏢 可用区层 (Multi-AZ)
|
||||
</div>
|
||||
<div class="azs-grid">
|
||||
<div
|
||||
v-for="az in availabilityZones"
|
||||
@@ -106,8 +162,10 @@
|
||||
<span class="az-id">{{ az.id }}</span>
|
||||
</div>
|
||||
<div class="az-status">
|
||||
<span class="status-badge"
|
||||
:class="getAzStatusClass(az)">
|
||||
<span
|
||||
class="status-badge"
|
||||
:class="getAzStatusClass(az)"
|
||||
>
|
||||
{{ getAzStatusText(az) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -126,17 +184,29 @@
|
||||
</div>
|
||||
|
||||
<!-- 维护模式遮罩 -->
|
||||
<div class="maintenance-overlay" v-if="viewMode === 'maintenance' && az.id === 'az-a'">
|
||||
<div
|
||||
v-if="viewMode === 'maintenance' && az.id === 'az-a'"
|
||||
class="maintenance-overlay"
|
||||
>
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-icon">🔧</div>
|
||||
<div class="overlay-text">维护中</div>
|
||||
<div class="overlay-icon">
|
||||
🔧
|
||||
</div>
|
||||
<div class="overlay-text">
|
||||
维护中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹性扩容动画 -->
|
||||
<div class="scaling-indicator" v-if="viewMode === 'scaling'">
|
||||
<div class="scaling-dot"></div>
|
||||
<div class="scaling-text">扩容中</div>
|
||||
<div
|
||||
v-if="viewMode === 'scaling'"
|
||||
class="scaling-indicator"
|
||||
>
|
||||
<div class="scaling-dot" />
|
||||
<div class="scaling-text">
|
||||
扩容中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,22 +215,24 @@
|
||||
|
||||
<!-- 状态说明 -->
|
||||
<div class="status-legend">
|
||||
<div class="legend-title">状态说明：</div>
|
||||
<div class="legend-title">
|
||||
状态说明：
|
||||
</div>
|
||||
<div class="legend-items">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot healthy"></span>
|
||||
<span class="legend-dot healthy" />
|
||||
<span>健康运行</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot standby"></span>
|
||||
<span class="legend-dot standby" />
|
||||
<span>待机中</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot degraded"></span>
|
||||
<span class="legend-dot degraded" />
|
||||
<span>降级/故障</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot maintenance"></span>
|
||||
<span class="legend-dot maintenance" />
|
||||
<span>维护中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user