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
@@ -15,152 +15,278 @@
|
||||
|
||||
<div class="architecture-diagram">
|
||||
<!-- 基础架构 -->
|
||||
<div v-if="currentView === 0" class="basic-architecture">
|
||||
<div
|
||||
v-if="currentView === 0"
|
||||
class="basic-architecture"
|
||||
>
|
||||
<div class="user-node">
|
||||
<div class="node-icon">👤</div>
|
||||
<div class="node-label">用户</div>
|
||||
<div class="node-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="node-label">
|
||||
用户
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="domain-node">
|
||||
<div class="node-icon">🌐</div>
|
||||
<div class="node-label">域名</div>
|
||||
<div class="node-desc">example.com</div>
|
||||
<div class="node-icon">
|
||||
🌐
|
||||
</div>
|
||||
<div class="node-label">
|
||||
域名
|
||||
</div>
|
||||
<div class="node-desc">
|
||||
example.com
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓ DNS 解析</div>
|
||||
<div class="arrow-down">
|
||||
↓ DNS 解析
|
||||
</div>
|
||||
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">服务器</div>
|
||||
<div class="node-desc">IP: 1.2.3.4</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
服务器
|
||||
</div>
|
||||
<div class="node-desc">
|
||||
IP: 1.2.3.4
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="web-node">
|
||||
<div class="node-icon">🌍</div>
|
||||
<div class="node-label">Web 应用</div>
|
||||
<div class="node-icon">
|
||||
🌍
|
||||
</div>
|
||||
<div class="node-label">
|
||||
Web 应用
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CDN 架构 -->
|
||||
<div v-if="currentView === 1" class="cdn-architecture">
|
||||
<div
|
||||
v-if="currentView === 1"
|
||||
class="cdn-architecture"
|
||||
>
|
||||
<div class="user-nodes">
|
||||
<div class="user-node china">
|
||||
<div class="node-icon">🇨🇳</div>
|
||||
<div class="node-label">中国用户</div>
|
||||
<div class="node-icon">
|
||||
🇨🇳
|
||||
</div>
|
||||
<div class="node-label">
|
||||
中国用户
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-node usa">
|
||||
<div class="node-icon">🇺🇸</div>
|
||||
<div class="node-label">美国用户</div>
|
||||
<div class="node-icon">
|
||||
🇺🇸
|
||||
</div>
|
||||
<div class="node-label">
|
||||
美国用户
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-group">
|
||||
<div class="arrow-left">↙</div>
|
||||
<div class="arrow-right">↘</div>
|
||||
<div class="arrow-left">
|
||||
↙
|
||||
</div>
|
||||
<div class="arrow-right">
|
||||
↘
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cdn-nodes">
|
||||
<div class="cdn-node">
|
||||
<div class="node-icon">📡</div>
|
||||
<div class="node-label">CDN 北京节点</div>
|
||||
<div class="node-icon">
|
||||
📡
|
||||
</div>
|
||||
<div class="node-label">
|
||||
CDN 北京节点
|
||||
</div>
|
||||
</div>
|
||||
<div class="cdn-node">
|
||||
<div class="node-icon">📡</div>
|
||||
<div class="node-label">CDN 纽约节点</div>
|
||||
<div class="node-icon">
|
||||
📡
|
||||
</div>
|
||||
<div class="node-label">
|
||||
CDN 纽约节点
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓ 缓存未命中</div>
|
||||
<div class="arrow-down">
|
||||
↓ 缓存未命中
|
||||
</div>
|
||||
|
||||
<div class="origin-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">源服务器</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
源服务器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 负载均衡 -->
|
||||
<div v-if="currentView === 2" class="loadbalancer-architecture">
|
||||
<div
|
||||
v-if="currentView === 2"
|
||||
class="loadbalancer-architecture"
|
||||
>
|
||||
<div class="user-node">
|
||||
<div class="node-icon">👥</div>
|
||||
<div class="node-label">用户请求</div>
|
||||
<div class="node-icon">
|
||||
👥
|
||||
</div>
|
||||
<div class="node-label">
|
||||
用户请求
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="lb-node">
|
||||
<div class="node-icon">⚖️</div>
|
||||
<div class="node-label">负载均衡器</div>
|
||||
<div class="node-icon">
|
||||
⚖️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
负载均衡器
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-group">
|
||||
<div class="arrow-1">↖</div>
|
||||
<div class="arrow-2">↑</div>
|
||||
<div class="arrow-3">↗</div>
|
||||
<div class="arrow-1">
|
||||
↖
|
||||
</div>
|
||||
<div class="arrow-2">
|
||||
↑
|
||||
</div>
|
||||
<div class="arrow-3">
|
||||
↗
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-nodes">
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">服务器 1</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
服务器 1
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">服务器 2</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
服务器 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">服务器 3</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
服务器 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 完整架构 -->
|
||||
<div v-if="currentView === 3" class="full-architecture">
|
||||
<div
|
||||
v-if="currentView === 3"
|
||||
class="full-architecture"
|
||||
>
|
||||
<div class="user-nodes">
|
||||
<div class="user-node">
|
||||
<div class="node-icon">👤</div>
|
||||
<div class="node-label">用户</div>
|
||||
<div class="node-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="node-label">
|
||||
用户
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="dns-node">
|
||||
<div class="node-icon">🔍</div>
|
||||
<div class="node-label">DNS</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="dns-node">
|
||||
<div class="node-icon">
|
||||
🔍
|
||||
</div>
|
||||
<div class="node-label">
|
||||
DNS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="cdn-lb-row">
|
||||
<div class="cdn-node">
|
||||
<div class="node-icon">📡</div>
|
||||
<div class="node-label">CDN</div>
|
||||
<div class="node-icon">
|
||||
📡
|
||||
</div>
|
||||
<div class="node-label">
|
||||
CDN
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-node">
|
||||
<div class="node-icon">⚖️</div>
|
||||
<div class="node-label">LB</div>
|
||||
<div class="node-icon">
|
||||
⚖️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
LB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="server-cluster">
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">Web 1</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
Web 1
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-node">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">Web 2</div>
|
||||
<div class="node-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="node-label">
|
||||
Web 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-node">
|
||||
<div class="node-icon">💾</div>
|
||||
<div class="node-label">Database</div>
|
||||
<div class="node-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="node-label">
|
||||
Database
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,54 +294,74 @@
|
||||
</div>
|
||||
|
||||
<div class="info-cards">
|
||||
<div class="info-card" v-if="currentView === 0">
|
||||
<div class="card-title">🌐 域名 (Domain)</div>
|
||||
<div
|
||||
v-if="currentView === 0"
|
||||
class="info-card"
|
||||
>
|
||||
<div class="card-title">
|
||||
🌐 域名 (Domain)
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<strong>什么是域名？</strong>
|
||||
<br />域名是网站的地址，如 example.com，便于记忆和访问。 <br /><br />
|
||||
<br>域名是网站的地址，如 example.com，便于记忆和访问。 <br><br>
|
||||
<strong>域名注册</strong>
|
||||
<br />• 注册商：GoDaddy、Namecheap、阿里云 <br />•
|
||||
选择后缀：.com、.cn、.org、.io <br />• 价格：$10-50/年
|
||||
<br>• 注册商：GoDaddy、Namecheap、阿里云 <br>•
|
||||
选择后缀：.com、.cn、.org、.io <br>• 价格：$10-50/年
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" v-if="currentView === 1">
|
||||
<div class="card-title">📡 CDN (内容分发网络)</div>
|
||||
<div
|
||||
v-if="currentView === 1"
|
||||
class="info-card"
|
||||
>
|
||||
<div class="card-title">
|
||||
📡 CDN (内容分发网络)
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<strong>什么是 CDN？</strong>
|
||||
<br />将内容缓存到全球各地的节点，用户就近访问。 <br /><br />
|
||||
<br>将内容缓存到全球各地的节点，用户就近访问。 <br><br>
|
||||
<strong>优势</strong>
|
||||
<br />• 加速访问：就近获取内容 <br />• 减轻负载：减少源站压力 <br />•
|
||||
提高可用性：节点故障自动切换 <br /><br />
|
||||
<br>• 加速访问：就近获取内容 <br>• 减轻负载：减少源站压力 <br>•
|
||||
提高可用性：节点故障自动切换 <br><br>
|
||||
<strong>常见 CDN</strong>
|
||||
<br />• Cloudflare、AWS CloudFront、阿里云 CDN
|
||||
<br>• Cloudflare、AWS CloudFront、阿里云 CDN
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" v-if="currentView === 2">
|
||||
<div class="card-title">⚖️ 负载均衡 (Load Balancer)</div>
|
||||
<div
|
||||
v-if="currentView === 2"
|
||||
class="info-card"
|
||||
>
|
||||
<div class="card-title">
|
||||
⚖️ 负载均衡 (Load Balancer)
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<strong>什么是负载均衡？</strong>
|
||||
<br />将请求分发到多台服务器，提高并发能力。 <br /><br />
|
||||
<br>将请求分发到多台服务器，提高并发能力。 <br><br>
|
||||
<strong>负载均衡算法</strong>
|
||||
<br />• 轮询 (Round Robin) <br />• 最少连接 (Least Connections)
|
||||
<br />• IP 哈希 (IP Hash) <br /><br />
|
||||
<br>• 轮询 (Round Robin) <br>• 最少连接 (Least Connections)
|
||||
<br>• IP 哈希 (IP Hash) <br><br>
|
||||
<strong>常见工具</strong>
|
||||
<br />• Nginx、HAProxy、AWS ELB
|
||||
<br>• Nginx、HAProxy、AWS ELB
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" v-if="currentView === 3">
|
||||
<div class="card-title">🏗️ 完整部署架构</div>
|
||||
<div
|
||||
v-if="currentView === 3"
|
||||
class="info-card"
|
||||
>
|
||||
<div class="card-title">
|
||||
🏗️ 完整部署架构
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<strong>现代 Web 应用架构</strong>
|
||||
<br /><br />
|
||||
<br><br>
|
||||
1. 用户通过域名访问
|
||||
<br />2. DNS 解析到 CDN 或负载均衡器 <br />3. CDN 缓存静态资源
|
||||
<br />4. 负载均衡器分发请求 <br />5. Web 服务器处理动态请求 <br />6.
|
||||
数据库存储持久化数据 <br /><br />
|
||||
<br>2. DNS 解析到 CDN 或负载均衡器 <br>3. CDN 缓存静态资源
|
||||
<br>4. 负载均衡器分发请求 <br>5. Web 服务器处理动态请求 <br>6.
|
||||
数据库存储持久化数据 <br><br>
|
||||
<strong>监控和运维</strong>
|
||||
<br />• 日志收集、性能监控、自动备份
|
||||
<br>• 日志收集、性能监控、自动备份
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user