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
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="auto-scaling-demo">
|
||||
<div class="header">
|
||||
<div class="title">自动扩缩容</div>
|
||||
<div class="subtitle">基于CPU、内存、QPS的智能弹性伸缩</div>
|
||||
<div class="title">
|
||||
自动扩缩容
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
基于CPU、内存、QPS的智能弹性伸缩
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 指标选择器 -->
|
||||
<div class="metric-selector">
|
||||
<div class="selector-label">扩容指标：</div>
|
||||
<div class="selector-label">
|
||||
扩容指标：
|
||||
</div>
|
||||
<div class="selector-buttons">
|
||||
<button
|
||||
v-for="metric in metrics"
|
||||
@@ -27,14 +33,17 @@
|
||||
<div class="dashboard-header">
|
||||
<span class="dashboard-title">实时监控</span>
|
||||
<span class="refresh-indicator">
|
||||
<span class="live-dot"></span>
|
||||
<span class="live-dot" />
|
||||
实时
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<!-- CPU使用率 -->
|
||||
<div class="metric-card" :class="{ warning: cpuUsage > 70, danger: cpuUsage > 90 }">
|
||||
<div
|
||||
class="metric-card"
|
||||
:class="{ warning: cpuUsage > 70, danger: cpuUsage > 90 }"
|
||||
>
|
||||
<div class="metric-header">
|
||||
<span class="metric-icon">💻</span>
|
||||
<span class="metric-name">CPU使用率</span>
|
||||
@@ -44,7 +53,10 @@
|
||||
<span class="value-unit">%</span>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar" :style="{ width: cpuUsage + '%', background: getUsageColor(cpuUsage) }"></div>
|
||||
<div
|
||||
class="progress-bar"
|
||||
:style="{ width: cpuUsage + '%', background: getUsageColor(cpuUsage) }"
|
||||
/>
|
||||
</div>
|
||||
<div class="metric-threshold">
|
||||
<span>扩容阈值: 70%</span>
|
||||
@@ -53,7 +65,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 内存使用率 -->
|
||||
<div class="metric-card" :class="{ warning: memoryUsage > 75, danger: memoryUsage > 90 }">
|
||||
<div
|
||||
class="metric-card"
|
||||
:class="{ warning: memoryUsage > 75, danger: memoryUsage > 90 }"
|
||||
>
|
||||
<div class="metric-header">
|
||||
<span class="metric-icon">🧠</span>
|
||||
<span class="metric-name">内存使用率</span>
|
||||
@@ -63,7 +78,10 @@
|
||||
<span class="value-unit">%</span>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar" :style="{ width: memoryUsage + '%', background: getUsageColor(memoryUsage) }"></div>
|
||||
<div
|
||||
class="progress-bar"
|
||||
:style="{ width: memoryUsage + '%', background: getUsageColor(memoryUsage) }"
|
||||
/>
|
||||
</div>
|
||||
<div class="metric-threshold">
|
||||
<span>扩容阈值: 75%</span>
|
||||
@@ -82,7 +100,10 @@
|
||||
<span class="value-unit">req/s</span>
|
||||
</div>
|
||||
<div class="metric-chart">
|
||||
<svg viewBox="0 0 200 40" class="sparkline">
|
||||
<svg
|
||||
viewBox="0 0 200 40"
|
||||
class="sparkline"
|
||||
>
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="var(--vp-c-brand)"
|
||||
@@ -123,7 +144,10 @@
|
||||
{{ i }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="scaleReason" class="scale-reason">
|
||||
<div
|
||||
v-if="scaleReason"
|
||||
class="scale-reason"
|
||||
>
|
||||
<span class="reason-icon">{{ scaleReason.includes('扩容') ? '📈' : '📉' }}</span>
|
||||
<span class="reason-text">{{ scaleReason }}</span>
|
||||
</div>
|
||||
@@ -144,46 +168,70 @@
|
||||
class="history-item"
|
||||
:class="{ scaleOut: record.type === '缩容' }"
|
||||
>
|
||||
<div class="item-icon">{{ record.type === '扩容' ? '📈' : '📉' }}</div>
|
||||
<div class="item-icon">
|
||||
{{ record.type === '扩容' ? '📈' : '📉' }}
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<div class="item-action">
|
||||
{{ record.type }}: {{ record.from }} → {{ record.to }} 实例
|
||||
</div>
|
||||
<div class="item-reason">{{ record.reason }}</div>
|
||||
<div class="item-reason">
|
||||
{{ record.reason }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-time">
|
||||
{{ record.time }}
|
||||
</div>
|
||||
<div class="item-time">{{ record.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最佳实践 -->
|
||||
<div class="best-practices">
|
||||
<div class="practices-title">自动扩缩容最佳实践</div>
|
||||
<div class="practices-title">
|
||||
自动扩缩容最佳实践
|
||||
</div>
|
||||
<div class="practices-grid">
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">⏱️</div>
|
||||
<div class="practice-title">冷却时间</div>
|
||||
<div class="practice-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="practice-title">
|
||||
冷却时间
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
设置适当的冷却时间（通常3-5分钟），避免扩缩容操作过于频繁导致的震荡
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">📊</div>
|
||||
<div class="practice-title">多指标综合</div>
|
||||
<div class="practice-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="practice-title">
|
||||
多指标综合
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
不要依赖单一指标，结合CPU、内存、QPS、连接数等多维度进行综合判断
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">🎯</div>
|
||||
<div class="practice-title">目标利用率</div>
|
||||
<div class="practice-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="practice-title">
|
||||
目标利用率
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
设置合理的资源目标利用率（如70%），预留足够的缓冲应对突发流量
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">⚡</div>
|
||||
<div class="practice-title">快速扩容</div>
|
||||
<div class="practice-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="practice-title">
|
||||
快速扩容
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
扩容操作应该比缩容更激进，确保系统能快速应对流量增长
|
||||
</div>
|
||||
|
||||
+182
-53
@@ -1,17 +1,30 @@
|
||||
<template>
|
||||
<div class="blue-green-deployment-demo">
|
||||
<div class="header">
|
||||
<div class="title">蓝绿部署</div>
|
||||
<div class="subtitle">零停机发布的经典策略，两套环境瞬间切换</div>
|
||||
<div class="title">
|
||||
蓝绿部署
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
零停机发布的经典策略，两套环境瞬间切换
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 部署状态控制 -->
|
||||
<div class="deployment-control">
|
||||
<div class="status-display">
|
||||
<div class="status-item" :class="{ active: currentEnv === 'blue' }">
|
||||
<div class="status-icon">🔵</div>
|
||||
<div class="status-label">蓝环境</div>
|
||||
<div class="status-version">v{{ blueVersion }}</div>
|
||||
<div
|
||||
class="status-item"
|
||||
:class="{ active: currentEnv === 'blue' }"
|
||||
>
|
||||
<div class="status-icon">
|
||||
🔵
|
||||
</div>
|
||||
<div class="status-label">
|
||||
蓝环境
|
||||
</div>
|
||||
<div class="status-version">
|
||||
v{{ blueVersion }}
|
||||
</div>
|
||||
<div class="status-traffic">
|
||||
{{ currentEnv === 'blue' ? '100%' : '0%' }} 流量
|
||||
</div>
|
||||
@@ -20,28 +33,46 @@
|
||||
<div class="switch-control">
|
||||
<button
|
||||
class="switch-btn"
|
||||
@click="toggleEnvironment"
|
||||
:disabled="isSwitching"
|
||||
:class="{ switching: isSwitching }"
|
||||
@click="toggleEnvironment"
|
||||
>
|
||||
<span v-if="!isSwitching">
|
||||
{{ currentEnv === 'blue' ? '切换到绿环境 →' : '← 切换到蓝环境' }}
|
||||
</span>
|
||||
<span v-else class="switching-text">
|
||||
<span class="spinner"></span>
|
||||
<span
|
||||
v-else
|
||||
class="switching-text"
|
||||
>
|
||||
<span class="spinner" />
|
||||
切换中...
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="progress-bar" v-if="isSwitching">
|
||||
<div class="progress-fill" :style="{ width: switchProgress + '%' }"></div>
|
||||
<div
|
||||
v-if="isSwitching"
|
||||
class="progress-bar"
|
||||
>
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: switchProgress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item" :class="{ active: currentEnv === 'green' }">
|
||||
<div class="status-icon">🟢</div>
|
||||
<div class="status-label">绿环境</div>
|
||||
<div class="status-version">v{{ greenVersion }}</div>
|
||||
<div
|
||||
class="status-item"
|
||||
:class="{ active: currentEnv === 'green' }"
|
||||
>
|
||||
<div class="status-icon">
|
||||
🟢
|
||||
</div>
|
||||
<div class="status-label">
|
||||
绿环境
|
||||
</div>
|
||||
<div class="status-version">
|
||||
v{{ greenVersion }}
|
||||
</div>
|
||||
<div class="status-traffic">
|
||||
{{ currentEnv === 'green' ? '100%' : '0%' }} 流量
|
||||
</div>
|
||||
@@ -52,24 +83,40 @@
|
||||
<!-- 架构可视化 -->
|
||||
<div class="architecture-view">
|
||||
<div class="layer users">
|
||||
<div class="layer-title">用户流量</div>
|
||||
<div class="layer-title">
|
||||
用户流量
|
||||
</div>
|
||||
<div class="users-row">
|
||||
<div v-for="i in 5" :key="i" class="user-avatar" :class="{ active: isUserActive(i) }">
|
||||
<div
|
||||
v-for="i in 5"
|
||||
:key="i"
|
||||
class="user-avatar"
|
||||
:class="{ active: isUserActive(i) }"
|
||||
>
|
||||
👤
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="layer load-balancer">
|
||||
<div class="lb-box">
|
||||
<div class="lb-icon">⚖️</div>
|
||||
<div class="lb-icon">
|
||||
⚖️
|
||||
</div>
|
||||
<div class="lb-info">
|
||||
<div class="lb-title">负载均衡器</div>
|
||||
<div class="lb-title">
|
||||
负载均衡器
|
||||
</div>
|
||||
<div class="lb-status">
|
||||
当前指向:
|
||||
<span class="env-badge" :class="currentEnv">
|
||||
<span
|
||||
class="env-badge"
|
||||
:class="currentEnv"
|
||||
>
|
||||
{{ currentEnv === 'blue' ? '🔵 蓝环境' : '🟢 绿环境' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -77,12 +124,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="arrow-down">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="layer environments">
|
||||
<div class="env-row">
|
||||
<!-- 蓝环境 -->
|
||||
<div class="env-box" :class="{ active: currentEnv === 'blue', standby: currentEnv === 'green' }">
|
||||
<div
|
||||
class="env-box"
|
||||
:class="{ active: currentEnv === 'blue', standby: currentEnv === 'green' }"
|
||||
>
|
||||
<div class="env-header">
|
||||
<span class="env-icon">🔵</span>
|
||||
<span class="env-name">蓝环境</span>
|
||||
@@ -90,10 +142,18 @@
|
||||
</div>
|
||||
<div class="env-content">
|
||||
<div class="server-list">
|
||||
<div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('blue', i) }">
|
||||
<div
|
||||
v-for="i in 3"
|
||||
:key="i"
|
||||
class="server-item"
|
||||
:class="{ busy: isServerBusy('blue', i) }"
|
||||
>
|
||||
<span class="server-icon">🖥️</span>
|
||||
<span class="server-name">B{{ i }}</span>
|
||||
<span class="server-status" :class="getServerStatus('blue', i)">
|
||||
<span
|
||||
class="server-status"
|
||||
:class="getServerStatus('blue', i)"
|
||||
>
|
||||
{{ getServerStatus('blue', i) === 'healthy' ? '●' : '○' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -102,18 +162,27 @@
|
||||
<div class="env-footer">
|
||||
<div class="traffic-indicator">
|
||||
<span class="indicator-label">流量:</span>
|
||||
<span class="indicator-value" :class="{ active: currentEnv === 'blue' }">
|
||||
<span
|
||||
class="indicator-value"
|
||||
:class="{ active: currentEnv === 'blue' }"
|
||||
>
|
||||
{{ currentEnv === 'blue' ? '100%' : '0%' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-badge" :class="currentEnv === 'blue' ? 'active' : 'standby'">
|
||||
<div
|
||||
class="status-badge"
|
||||
:class="currentEnv === 'blue' ? 'active' : 'standby'"
|
||||
>
|
||||
{{ currentEnv === 'blue' ? '生产环境' : '待命' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 绿环境 -->
|
||||
<div class="env-box" :class="{ active: currentEnv === 'green', standby: currentEnv === 'blue' }">
|
||||
<div
|
||||
class="env-box"
|
||||
:class="{ active: currentEnv === 'green', standby: currentEnv === 'blue' }"
|
||||
>
|
||||
<div class="env-header">
|
||||
<span class="env-icon">🟢</span>
|
||||
<span class="env-name">绿环境</span>
|
||||
@@ -121,10 +190,18 @@
|
||||
</div>
|
||||
<div class="env-content">
|
||||
<div class="server-list">
|
||||
<div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('green', i) }">
|
||||
<div
|
||||
v-for="i in 3"
|
||||
:key="i"
|
||||
class="server-item"
|
||||
:class="{ busy: isServerBusy('green', i) }"
|
||||
>
|
||||
<span class="server-icon">🖥️</span>
|
||||
<span class="server-name">G{{ i }}</span>
|
||||
<span class="server-status" :class="getServerStatus('green', i)">
|
||||
<span
|
||||
class="server-status"
|
||||
:class="getServerStatus('green', i)"
|
||||
>
|
||||
{{ getServerStatus('green', i) === 'healthy' ? '●' : '○' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -133,11 +210,17 @@
|
||||
<div class="env-footer">
|
||||
<div class="traffic-indicator">
|
||||
<span class="indicator-label">流量:</span>
|
||||
<span class="indicator-value" :class="{ active: currentEnv === 'green' }">
|
||||
<span
|
||||
class="indicator-value"
|
||||
:class="{ active: currentEnv === 'green' }"
|
||||
>
|
||||
{{ currentEnv === 'green' ? '100%' : '0%' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-badge" :class="currentEnv === 'green' ? 'active' : 'standby'">
|
||||
<div
|
||||
class="status-badge"
|
||||
:class="currentEnv === 'green' ? 'active' : 'standby'"
|
||||
>
|
||||
{{ currentEnv === 'green' ? '生产环境' : '待命' }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,37 +231,81 @@
|
||||
|
||||
<!-- 部署流程说明 -->
|
||||
<div class="deployment-process">
|
||||
<div class="process-title">蓝绿部署流程</div>
|
||||
<div class="process-title">
|
||||
蓝绿部署流程
|
||||
</div>
|
||||
<div class="process-steps">
|
||||
<div class="step" :class="{ active: deploymentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: deploymentStep >= 1 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">绿环境部署</div>
|
||||
<div class="step-desc">在绿环境部署新版本，进行冒烟测试</div>
|
||||
<div class="step-title">
|
||||
绿环境部署
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
在绿环境部署新版本，进行冒烟测试
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">→</div>
|
||||
<div class="step" :class="{ active: deploymentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: deploymentStep >= 2 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">切换流量</div>
|
||||
<div class="step-desc">将负载均衡器指向绿环境，流量瞬间切换</div>
|
||||
<div class="step-title">
|
||||
切换流量
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
将负载均衡器指向绿环境，流量瞬间切换
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">→</div>
|
||||
<div class="step" :class="{ active: deploymentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: deploymentStep >= 3 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">监控观察</div>
|
||||
<div class="step-desc">观察绿环境运行状态，确认无异常</div>
|
||||
<div class="step-title">
|
||||
监控观察
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
观察绿环境运行状态，确认无异常
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">→</div>
|
||||
<div class="step" :class="{ active: deploymentStep >= 4 }">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: deploymentStep >= 4 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">蓝环境升级</div>
|
||||
<div class="step-desc">在蓝环境部署新版本，为下次切换做准备</div>
|
||||
<div class="step-title">
|
||||
蓝环境升级
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
在蓝环境部署新版本，为下次切换做准备
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,7 +313,9 @@
|
||||
|
||||
<!-- 优缺点分析 -->
|
||||
<div class="pros-cons-analysis">
|
||||
<div class="analysis-title">蓝绿部署优缺点</div>
|
||||
<div class="analysis-title">
|
||||
蓝绿部署优缺点
|
||||
</div>
|
||||
<div class="analysis-grid">
|
||||
<div class="analysis-card pros">
|
||||
<div class="card-header">
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="canary-release-demo">
|
||||
<div class="header">
|
||||
<div class="title">金丝雀发布</div>
|
||||
<div class="subtitle">灰度发布策略，小流量先行验证新版本</div>
|
||||
<div class="title">
|
||||
金丝雀发布
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
灰度发布策略，小流量先行验证新版本
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流量分配控制 -->
|
||||
@@ -15,24 +19,24 @@
|
||||
<div class="slider-container">
|
||||
<div class="version-labels">
|
||||
<span class="version-label stable">
|
||||
<span class="dot blue"></span>
|
||||
<span class="dot blue" />
|
||||
稳定版 v{{ stableVersion }}
|
||||
</span>
|
||||
<span class="percentage stable">{{ 100 - canaryPercentage }}%</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="canaryPercentage"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
step="5"
|
||||
class="traffic-slider"
|
||||
/>
|
||||
>
|
||||
|
||||
<div class="version-labels">
|
||||
<span class="version-label canary">
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot yellow" />
|
||||
金丝雀 v{{ canaryVersion }}
|
||||
</span>
|
||||
<span class="percentage canary">{{ canaryPercentage }}%</span>
|
||||
@@ -66,7 +70,9 @@
|
||||
|
||||
<div class="traffic-pipeline">
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-label">用户请求</div>
|
||||
<div class="stage-label">
|
||||
用户请求
|
||||
</div>
|
||||
<div class="request-bubbles">
|
||||
<div
|
||||
v-for="(req, index) in requestQueue"
|
||||
@@ -80,12 +86,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-arrow">→</div>
|
||||
<div class="pipeline-arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-label">负载均衡器</div>
|
||||
<div class="stage-label">
|
||||
负载均衡器
|
||||
</div>
|
||||
<div class="lb-diagram">
|
||||
<div class="lb-icon">⚖️</div>
|
||||
<div class="lb-icon">
|
||||
⚖️
|
||||
</div>
|
||||
<div class="routing-logic">
|
||||
<div class="logic-line">
|
||||
<span class="logic-label">Canary:</span>
|
||||
@@ -95,13 +107,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-arrow">→</div>
|
||||
<div class="pipeline-arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-label">后端服务</div>
|
||||
<div class="stage-label">
|
||||
后端服务
|
||||
</div>
|
||||
<div class="backend-pods">
|
||||
<div class="pod-group stable">
|
||||
<div class="pod-label">稳定版 v{{ stableVersion }}</div>
|
||||
<div class="pod-label">
|
||||
稳定版 v{{ stableVersion }}
|
||||
</div>
|
||||
<div class="pods-row">
|
||||
<div
|
||||
v-for="i in 3"
|
||||
@@ -115,7 +133,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pod-group canary">
|
||||
<div class="pod-label">金丝雀 v{{ canaryVersion }}</div>
|
||||
<div class="pod-label">
|
||||
金丝雀 v{{ canaryVersion }}
|
||||
</div>
|
||||
<div class="pods-row">
|
||||
<div
|
||||
v-for="i in 2"
|
||||
@@ -135,7 +155,9 @@
|
||||
|
||||
<!-- 金丝雀发布策略 -->
|
||||
<div class="canary-strategy">
|
||||
<div class="strategy-title">金丝雀发布最佳实践</div>
|
||||
<div class="strategy-title">
|
||||
金丝雀发布最佳实践
|
||||
</div>
|
||||
|
||||
<div class="strategy-grid">
|
||||
<div class="strategy-card">
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="health-check-demo">
|
||||
<div class="header">
|
||||
<div class="title">健康检查机制</div>
|
||||
<div class="subtitle">主动探测、被动感知与智能阈值</div>
|
||||
<div class="title">
|
||||
健康检查机制
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
主动探测、被动感知与智能阈值
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模式选择器 -->
|
||||
@@ -23,9 +27,15 @@
|
||||
<div class="visualization-area">
|
||||
<!-- 负载均衡器 -->
|
||||
<div class="lb-node">
|
||||
<div class="lb-icon">⚖️</div>
|
||||
<div class="lb-label">负载均衡器</div>
|
||||
<div class="lb-status">{{ currentModeData.label }}</div>
|
||||
<div class="lb-icon">
|
||||
⚖️
|
||||
</div>
|
||||
<div class="lb-label">
|
||||
负载均衡器
|
||||
</div>
|
||||
<div class="lb-status">
|
||||
{{ currentModeData.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线和健康检查标记 -->
|
||||
@@ -40,7 +50,12 @@
|
||||
checking: server.status === 'checking'
|
||||
}"
|
||||
>
|
||||
<div class="health-packet" v-if="server.showPacket">{{ server.packetType }}</div>
|
||||
<div
|
||||
v-if="server.showPacket"
|
||||
class="health-packet"
|
||||
>
|
||||
{{ server.packetType }}
|
||||
</div>
|
||||
<div class="health-indicator">
|
||||
<span v-if="server.status === 'healthy'">✅</span>
|
||||
<span v-else-if="server.status === 'unhealthy'">❌</span>
|
||||
@@ -62,28 +77,55 @@
|
||||
}"
|
||||
>
|
||||
<div class="server-header">
|
||||
<div class="server-icon">🖥️</div>
|
||||
<div class="server-info">
|
||||
<div class="server-name">Server {{ index + 1 }}</div>
|
||||
<div class="server-ip">{{ server.ip }}</div>
|
||||
<div class="server-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="status-badge" :class="server.status">
|
||||
<div class="server-info">
|
||||
<div class="server-name">
|
||||
Server {{ index + 1 }}
|
||||
</div>
|
||||
<div class="server-ip">
|
||||
{{ server.ip }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="status-badge"
|
||||
:class="server.status"
|
||||
>
|
||||
{{ server.status === 'healthy' ? '健康' : server.status === 'unhealthy' ? '故障' : '检查中' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-metrics">
|
||||
<div class="metric">
|
||||
<div class="metric-label">响应时间</div>
|
||||
<div class="metric-value" :class="{ warning: server.responseTime > 100 }">{{ server.responseTime }}ms</div>
|
||||
<div class="metric-label">
|
||||
响应时间
|
||||
</div>
|
||||
<div
|
||||
class="metric-value"
|
||||
:class="{ warning: server.responseTime > 100 }"
|
||||
>
|
||||
{{ server.responseTime }}ms
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-label">失败率</div>
|
||||
<div class="metric-value" :class="{ danger: server.errorRate > 5 }">{{ server.errorRate }}%</div>
|
||||
<div class="metric-label">
|
||||
失败率
|
||||
</div>
|
||||
<div
|
||||
class="metric-value"
|
||||
:class="{ danger: server.errorRate > 5 }"
|
||||
>
|
||||
{{ server.errorRate }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-label">连续成功</div>
|
||||
<div class="metric-value">{{ server.consecutiveSuccess }}/3</div>
|
||||
<div class="metric-label">
|
||||
连续成功
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
{{ server.consecutiveSuccess }}/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,34 +140,58 @@
|
||||
<span class="card-title">{{ currentModeData.name }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="description">{{ currentModeData.description }}</p>
|
||||
<p class="description">
|
||||
{{ currentModeData.description }}
|
||||
</p>
|
||||
|
||||
<div class="config-section">
|
||||
<div class="section-title">关键配置参数</div>
|
||||
<div class="section-title">
|
||||
关键配置参数
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div
|
||||
v-for="param in currentModeData.params"
|
||||
:key="param.name"
|
||||
class="config-item"
|
||||
>
|
||||
<div class="config-name">{{ param.name }}</div>
|
||||
<div class="config-value">{{ param.value }}</div>
|
||||
<div class="config-desc">{{ param.desc }}</div>
|
||||
<div class="config-name">
|
||||
{{ param.name }}
|
||||
</div>
|
||||
<div class="config-value">
|
||||
{{ param.value }}
|
||||
</div>
|
||||
<div class="config-desc">
|
||||
{{ param.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<div class="pros-cons-title">✅ 优点</div>
|
||||
<div class="pros-cons-title">
|
||||
✅ 优点
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="pro in currentModeData.pros" :key="pro">{{ pro }}</li>
|
||||
<li
|
||||
v-for="pro in currentModeData.pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<div class="pros-cons-title">❌ 缺点</div>
|
||||
<div class="pros-cons-title">
|
||||
❌ 缺点
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="con in currentModeData.cons" :key="con">{{ con }}</li>
|
||||
<li
|
||||
v-for="con in currentModeData.cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+91
-28
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="load-balancer-types-demo">
|
||||
<div class="header">
|
||||
<div class="title">负载均衡器类型</div>
|
||||
<div class="subtitle">从四层到七层，从硬件到软件的演进</div>
|
||||
<div class="title">
|
||||
负载均衡器类型
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
从四层到七层，从硬件到软件的演进
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 层级选择器 -->
|
||||
@@ -29,17 +33,28 @@
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div class="single-server">
|
||||
<div class="server-icon">🖥️</div>
|
||||
<div class="server-label">Web Server</div>
|
||||
<div class="server-load">
|
||||
<div class="load-bar" :style="{ width: '95%' }"></div>
|
||||
<div class="server-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="server-label">
|
||||
Web Server
|
||||
</div>
|
||||
<div class="server-load">
|
||||
<div
|
||||
class="load-bar"
|
||||
:style="{ width: '95%' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="load-text">
|
||||
负载: 95% 🔥
|
||||
</div>
|
||||
<div class="load-text">负载: 95% 🔥</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-arrow">→</div>
|
||||
<div class="comparison-arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<div class="comparison-panel highlighted">
|
||||
<div class="panel-header">
|
||||
@@ -60,10 +75,17 @@
|
||||
class="server-node"
|
||||
:class="{ active: activeServer === index }"
|
||||
>
|
||||
<div class="server-icon-small">🖥️</div>
|
||||
<div class="server-id">S{{ index + 1 }}</div>
|
||||
<div class="server-icon-small">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="server-id">
|
||||
S{{ index + 1 }}
|
||||
</div>
|
||||
<div class="server-load-mini">
|
||||
<div class="load-bar-mini" :style="{ width: server.load + '%' }"></div>
|
||||
<div
|
||||
class="load-bar-mini"
|
||||
:style="{ width: server.load + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,21 +101,38 @@
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="detail-section">
|
||||
<div class="section-title">工作原理</div>
|
||||
<p class="section-desc">{{ currentLayerData.principle }}</p>
|
||||
<div class="section-title">
|
||||
工作原理
|
||||
</div>
|
||||
<p class="section-desc">
|
||||
{{ currentLayerData.principle }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<div class="section-title">典型产品</div>
|
||||
<div class="section-title">
|
||||
典型产品
|
||||
</div>
|
||||
<div class="product-tags">
|
||||
<span v-for="product in currentLayerData.products" :key="product" class="product-tag">
|
||||
<span
|
||||
v-for="product in currentLayerData.products"
|
||||
:key="product"
|
||||
class="product-tag"
|
||||
>
|
||||
{{ product }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<div class="section-title">适用场景</div>
|
||||
<div class="section-title">
|
||||
适用场景
|
||||
</div>
|
||||
<ul class="scenario-list">
|
||||
<li v-for="scenario in currentLayerData.scenarios" :key="scenario">{{ scenario }}</li>
|
||||
<li
|
||||
v-for="scenario in currentLayerData.scenarios"
|
||||
:key="scenario"
|
||||
>
|
||||
{{ scenario }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,14 +140,26 @@
|
||||
|
||||
<!-- 性能对比 -->
|
||||
<div class="performance-comparison">
|
||||
<div class="comparison-title">性能对比一览</div>
|
||||
<div class="comparison-title">
|
||||
性能对比一览
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="table-header">
|
||||
<div class="th">类型</div>
|
||||
<div class="th">处理层</div>
|
||||
<div class="th">性能</div>
|
||||
<div class="th">灵活性</div>
|
||||
<div class="th">成本</div>
|
||||
<div class="th">
|
||||
类型
|
||||
</div>
|
||||
<div class="th">
|
||||
处理层
|
||||
</div>
|
||||
<div class="th">
|
||||
性能
|
||||
</div>
|
||||
<div class="th">
|
||||
灵活性
|
||||
</div>
|
||||
<div class="th">
|
||||
成本
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in comparisonData"
|
||||
@@ -116,19 +167,31 @@
|
||||
class="table-row"
|
||||
:class="{ active: currentLayer === row.key }"
|
||||
>
|
||||
<div class="td type">{{ row.type }}</div>
|
||||
<div class="td">{{ row.layer }}</div>
|
||||
<div class="td type">
|
||||
{{ row.type }}
|
||||
</div>
|
||||
<div class="td">
|
||||
{{ row.layer }}
|
||||
</div>
|
||||
<div class="td">
|
||||
<div class="rating-bar">
|
||||
<div class="rating-fill" :style="{ width: row.performance + '%' }"></div>
|
||||
<div
|
||||
class="rating-fill"
|
||||
:style="{ width: row.performance + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="td">
|
||||
<div class="rating-bar">
|
||||
<div class="rating-fill" :style="{ width: row.flexibility + '%' }"></div>
|
||||
<div
|
||||
class="rating-fill"
|
||||
:style="{ width: row.flexibility + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="td cost">{{ row.cost }}</div>
|
||||
<div class="td cost">
|
||||
{{ row.cost }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="multi-region-demo">
|
||||
<div class="header">
|
||||
<div class="title">多区域部署</div>
|
||||
<div class="subtitle">异地多活架构，就近服务与容灾备份</div>
|
||||
<div class="title">
|
||||
多区域部署
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
异地多活架构，就近服务与容灾备份
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全球地图 -->
|
||||
@@ -11,11 +15,11 @@
|
||||
<span class="map-title">全球部署视图</span>
|
||||
<span class="map-legend">
|
||||
<span class="legend-item">
|
||||
<span class="legend-dot active"></span>
|
||||
<span class="legend-dot active" />
|
||||
主节点
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="legend-dot standby"></span>
|
||||
<span class="legend-dot standby" />
|
||||
备节点
|
||||
</span>
|
||||
</span>
|
||||
@@ -38,9 +42,15 @@
|
||||
:style="{ top: region.y + '%', left: region.x + '%' }"
|
||||
@click="selectedRegion = region.id"
|
||||
>
|
||||
<div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
|
||||
<div class="node-label">{{ region.name }}</div>
|
||||
<div class="node-delay">{{ region.delay }}ms</div>
|
||||
<div class="node-icon">
|
||||
{{ region.isPrimary ? '📡' : '📶' }}
|
||||
</div>
|
||||
<div class="node-label">
|
||||
{{ region.name }}
|
||||
</div>
|
||||
<div class="node-delay">
|
||||
{{ region.delay }}ms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,9 +68,15 @@
|
||||
:style="{ top: region.y + '%', left: region.x + '%' }"
|
||||
@click="selectedRegion = region.id"
|
||||
>
|
||||
<div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
|
||||
<div class="node-label">{{ region.name }}</div>
|
||||
<div class="node-delay">{{ region.delay }}ms</div>
|
||||
<div class="node-icon">
|
||||
{{ region.isPrimary ? '📡' : '📶' }}
|
||||
</div>
|
||||
<div class="node-label">
|
||||
{{ region.name }}
|
||||
</div>
|
||||
<div class="node-delay">
|
||||
{{ region.delay }}ms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,18 +94,38 @@
|
||||
:style="{ top: region.y + '%', left: region.x + '%' }"
|
||||
@click="selectedRegion = region.id"
|
||||
>
|
||||
<div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
|
||||
<div class="node-label">{{ region.name }}</div>
|
||||
<div class="node-delay">{{ region.delay }}ms</div>
|
||||
<div class="node-icon">
|
||||
{{ region.isPrimary ? '📡' : '📶' }}
|
||||
</div>
|
||||
<div class="node-label">
|
||||
{{ region.name }}
|
||||
</div>
|
||||
<div class="node-delay">
|
||||
{{ region.delay }}ms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线路 -->
|
||||
<svg class="connection-lines" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<svg
|
||||
class="connection-lines"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
|
||||
<polygon points="0 0, 3 1.5, 0 3" fill="var(--vp-c-brand)" />
|
||||
<marker
|
||||
id="arrowhead"
|
||||
markerWidth="3"
|
||||
markerHeight="3"
|
||||
refX="2"
|
||||
refY="1.5"
|
||||
orient="auto"
|
||||
>
|
||||
<polygon
|
||||
points="0 0, 3 1.5, 0 3"
|
||||
fill="var(--vp-c-brand)"
|
||||
/>
|
||||
</marker>
|
||||
</defs>
|
||||
<line
|
||||
@@ -109,42 +145,75 @@
|
||||
</div>
|
||||
|
||||
<!-- 区域详情 -->
|
||||
<div class="region-details" v-if="selectedRegionData">
|
||||
<div
|
||||
v-if="selectedRegionData"
|
||||
class="region-details"
|
||||
>
|
||||
<div class="details-header">
|
||||
<div class="region-title">
|
||||
<span class="region-icon">{{ selectedRegionData.isPrimary ? '📡' : '📶' }}</span>
|
||||
<span class="region-name">{{ selectedRegionData.name }}</span>
|
||||
<span class="region-badge" :class="{ primary: selectedRegionData.isPrimary, standby: !selectedRegionData.isPrimary }">
|
||||
<span
|
||||
class="region-badge"
|
||||
:class="{ primary: selectedRegionData.isPrimary, standby: !selectedRegionData.isPrimary }"
|
||||
>
|
||||
{{ selectedRegionData.isPrimary ? '主节点' : '备节点' }}
|
||||
</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="selectedRegion = null">×</button>
|
||||
<button
|
||||
class="close-btn"
|
||||
@click="selectedRegion = null"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">延迟</div>
|
||||
<div class="detail-value">{{ selectedRegionData.delay }}ms</div>
|
||||
<div class="detail-label">
|
||||
延迟
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ selectedRegionData.delay }}ms
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">在线实例</div>
|
||||
<div class="detail-value">{{ selectedRegionData.instances }}个</div>
|
||||
<div class="detail-label">
|
||||
在线实例
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ selectedRegionData.instances }}个
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">当前QPS</div>
|
||||
<div class="detail-value">{{ selectedRegionData.qps }}/s</div>
|
||||
<div class="detail-label">
|
||||
当前QPS
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ selectedRegionData.qps }}/s
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">数据同步延迟</div>
|
||||
<div class="detail-value">{{ selectedRegionData.syncDelay }}ms</div>
|
||||
<div class="detail-label">
|
||||
数据同步延迟
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ selectedRegionData.syncDelay }}ms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details-actions">
|
||||
<button class="action-btn primary" v-if="!selectedRegionData.isPrimary">
|
||||
<button
|
||||
v-if="!selectedRegionData.isPrimary"
|
||||
class="action-btn primary"
|
||||
>
|
||||
提升为主节点
|
||||
</button>
|
||||
<button class="action-btn danger" v-if="selectedRegionData.isPrimary">
|
||||
<button
|
||||
v-if="selectedRegionData.isPrimary"
|
||||
class="action-btn danger"
|
||||
>
|
||||
切换流量
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
@@ -155,27 +224,53 @@
|
||||
|
||||
<!-- 架构优势 -->
|
||||
<div class="architecture-benefits">
|
||||
<div class="benefits-title">多区域部署优势</div>
|
||||
<div class="benefits-title">
|
||||
多区域部署优势
|
||||
</div>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">⚡</div>
|
||||
<div class="benefit-title">就近服务</div>
|
||||
<div class="benefit-desc">用户请求自动路由到最近的区域，降低网络延迟，提升访问速度</div>
|
||||
<div class="benefit-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="benefit-title">
|
||||
就近服务
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
用户请求自动路由到最近的区域，降低网络延迟，提升访问速度
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🛡️</div>
|
||||
<div class="benefit-title">容灾备份</div>
|
||||
<div class="benefit-desc">单区域故障时自动切换流量，确保服务高可用，数据多副本保存</div>
|
||||
<div class="benefit-icon">
|
||||
🛡️
|
||||
</div>
|
||||
<div class="benefit-title">
|
||||
容灾备份
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
单区域故障时自动切换流量，确保服务高可用，数据多副本保存
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🌍</div>
|
||||
<div class="benefit-title">全球覆盖</div>
|
||||
<div class="benefit-desc">支持跨区域部署，满足不同地区的合规要求和数据主权法规</div>
|
||||
<div class="benefit-icon">
|
||||
🌍
|
||||
</div>
|
||||
<div class="benefit-title">
|
||||
全球覆盖
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
支持跨区域部署，满足不同地区的合规要求和数据主权法规
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">📈</div>
|
||||
<div class="benefit-title">负载均衡</div>
|
||||
<div class="benefit-desc">跨区域流量调度，避免单点过载，实现全局资源优化配置</div>
|
||||
<div class="benefit-icon">
|
||||
📈
|
||||
</div>
|
||||
<div class="benefit-title">
|
||||
负载均衡
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
跨区域流量调度，避免单点过载，实现全局资源优化配置
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+83
-25
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="session-persistence-demo">
|
||||
<div class="header">
|
||||
<div class="title">会话保持机制</div>
|
||||
<div class="subtitle">Cookie、IP哈希与粘性会话的技术对比</div>
|
||||
<div class="title">
|
||||
会话保持机制
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Cookie、IP哈希与粘性会话的技术对比
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
<div class="scenario-selector">
|
||||
<div class="scenario-label">应用场景：</div>
|
||||
<div class="scenario-label">
|
||||
应用场景：
|
||||
</div>
|
||||
<div class="scenario-buttons">
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
@@ -48,9 +54,18 @@
|
||||
:class="{ active: activeUser === user.id }"
|
||||
@click="activeUser = user.id"
|
||||
>
|
||||
<div class="avatar-icon">{{ user.avatar }}</div>
|
||||
<div class="user-name">{{ user.name }}</div>
|
||||
<div v-if="hasSessionCookie" class="cookie-badge">🍪</div>
|
||||
<div class="avatar-icon">
|
||||
{{ user.avatar }}
|
||||
</div>
|
||||
<div class="user-name">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="hasSessionCookie"
|
||||
class="cookie-badge"
|
||||
>
|
||||
🍪
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,8 +73,12 @@
|
||||
<!-- 请求流程 -->
|
||||
<div class="request-flow">
|
||||
<div class="flow-step">
|
||||
<div class="step-label">请求</div>
|
||||
<div class="step-arrow">↓</div>
|
||||
<div class="step-label">
|
||||
请求
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
↓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 负载均衡器 -->
|
||||
@@ -72,16 +91,29 @@
|
||||
<div class="mechanism-display">
|
||||
<span class="display-icon">{{ currentMechanismData.icon }}</span>
|
||||
<div class="display-info">
|
||||
<div class="display-name">{{ currentMechanismData.name }}</div>
|
||||
<div class="display-desc">{{ currentMechanismData.shortDesc }}</div>
|
||||
<div class="display-name">
|
||||
{{ currentMechanismData.name }}
|
||||
</div>
|
||||
<div class="display-desc">
|
||||
{{ currentMechanismData.shortDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 会话表 -->
|
||||
<div v-if="currentMechanism === 'cookie' || currentMechanism === 'sticky'" class="session-table">
|
||||
<div class="table-title">会话映射表</div>
|
||||
<div
|
||||
v-if="currentMechanism === 'cookie' || currentMechanism === 'sticky'"
|
||||
class="session-table"
|
||||
>
|
||||
<div class="table-title">
|
||||
会话映射表
|
||||
</div>
|
||||
<div class="table-rows">
|
||||
<div v-for="mapping in sessionMappings" :key="mapping.session" class="table-row">
|
||||
<div
|
||||
v-for="mapping in sessionMappings"
|
||||
:key="mapping.session"
|
||||
class="table-row"
|
||||
>
|
||||
<span class="session-id">{{ mapping.session }}</span>
|
||||
<span class="mapping-arrow">→</span>
|
||||
<span class="server-name">{{ mapping.server }}</span>
|
||||
@@ -89,8 +121,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- IP哈希环 -->
|
||||
<div v-if="currentMechanism === 'iphash'" class="hash-ring">
|
||||
<div class="ring-title">IP哈希环</div>
|
||||
<div
|
||||
v-if="currentMechanism === 'iphash'"
|
||||
class="hash-ring"
|
||||
>
|
||||
<div class="ring-title">
|
||||
IP哈希环
|
||||
</div>
|
||||
<div class="ring-visual">
|
||||
<div
|
||||
v-for="(server, index) in hashRingServers"
|
||||
@@ -109,7 +146,9 @@
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-arrow">↓</div>
|
||||
<div class="step-arrow">
|
||||
↓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 后端服务器 -->
|
||||
@@ -120,15 +159,27 @@
|
||||
class="backend-server"
|
||||
:class="{ target: isTargetServer(server.id) }"
|
||||
>
|
||||
<div class="server-icon">🖥️</div>
|
||||
<div class="server-info">
|
||||
<div class="server-name">{{ server.name }}</div>
|
||||
<div class="server-ip">{{ server.ip }}</div>
|
||||
<div class="server-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="server-status" :class="server.status">
|
||||
<div class="server-info">
|
||||
<div class="server-name">
|
||||
{{ server.name }}
|
||||
</div>
|
||||
<div class="server-ip">
|
||||
{{ server.ip }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="server-status"
|
||||
:class="server.status"
|
||||
>
|
||||
{{ server.status === 'healthy' ? '✓' : '✗' }}
|
||||
</div>
|
||||
<div v-if="isTargetServer(server.id)" class="selected-indicator">
|
||||
<div
|
||||
v-if="isTargetServer(server.id)"
|
||||
class="selected-indicator"
|
||||
>
|
||||
选中
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,9 +187,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 响应流程 -->
|
||||
<div class="response-flow" v-if="currentMechanism === 'cookie'">
|
||||
<div
|
||||
v-if="currentMechanism === 'cookie'"
|
||||
class="response-flow"
|
||||
>
|
||||
<div class="flow-step">
|
||||
<div class="step-arrow">↑</div>
|
||||
<div class="step-arrow">
|
||||
↑
|
||||
</div>
|
||||
</div>
|
||||
<div class="set-cookie-box">
|
||||
<div class="cookie-header">
|
||||
@@ -154,7 +210,9 @@
|
||||
|
||||
<!-- 机制对比表 -->
|
||||
<div class="mechanism-comparison">
|
||||
<div class="comparison-title">三种会话保持机制对比</div>
|
||||
<div class="comparison-title">
|
||||
三种会话保持机制对比
|
||||
</div>
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-card">
|
||||
<div class="card-header">
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="weighted-routing-demo">
|
||||
<div class="header">
|
||||
<div class="title">加权路由策略</div>
|
||||
<div class="subtitle">按性能、成本、地理位置智能分配流量</div>
|
||||
<div class="title">
|
||||
加权路由策略
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
按性能、成本、地理位置智能分配流量
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 策略选择器 -->
|
||||
<div class="strategy-selector">
|
||||
<div class="strategy-label">加权策略：</div>
|
||||
<div class="strategy-label">
|
||||
加权策略：
|
||||
</div>
|
||||
<div class="strategy-buttons">
|
||||
<button
|
||||
v-for="strategy in strategies"
|
||||
@@ -26,16 +32,20 @@
|
||||
<div class="visualization">
|
||||
<!-- 流量进入 -->
|
||||
<div class="traffic-incoming">
|
||||
<div class="traffic-label">总流量</div>
|
||||
<div class="traffic-value">{{ totalTraffic }} req/s</div>
|
||||
<div class="traffic-label">
|
||||
总流量
|
||||
</div>
|
||||
<div class="traffic-value">
|
||||
{{ totalTraffic }} req/s
|
||||
</div>
|
||||
<div class="traffic-slider">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="totalTraffic"
|
||||
type="range"
|
||||
min="100"
|
||||
max="10000"
|
||||
step="100"
|
||||
/>
|
||||
>
|
||||
<div class="slider-labels">
|
||||
<span>100</span>
|
||||
<span>5000</span>
|
||||
@@ -46,7 +56,9 @@
|
||||
|
||||
<!-- 权重分配可视化 -->
|
||||
<div class="weight-allocation">
|
||||
<div class="allocation-title">权重分配</div>
|
||||
<div class="allocation-title">
|
||||
权重分配
|
||||
</div>
|
||||
<div class="allocation-bars">
|
||||
<div
|
||||
v-for="(server, index) in weightedServers"
|
||||
@@ -54,10 +66,16 @@
|
||||
class="allocation-item"
|
||||
>
|
||||
<div class="server-info">
|
||||
<div class="server-icon">🖥️</div>
|
||||
<div class="server-icon">
|
||||
🖥️
|
||||
</div>
|
||||
<div class="server-details">
|
||||
<div class="server-name">{{ server.name }}</div>
|
||||
<div class="server-specs">{{ server.specs }}</div>
|
||||
<div class="server-name">
|
||||
{{ server.name }}
|
||||
</div>
|
||||
<div class="server-specs">
|
||||
{{ server.specs }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weight-bar-container">
|
||||
@@ -76,13 +94,13 @@
|
||||
</div>
|
||||
<div class="weight-control">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="server.weight"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
class="weight-slider"
|
||||
/>
|
||||
>
|
||||
<span class="weight-label">权重: {{ server.weight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,7 +109,9 @@
|
||||
|
||||
<!-- 实时流量动画 -->
|
||||
<div class="traffic-animation">
|
||||
<div class="animation-title">实时流量</div>
|
||||
<div class="animation-title">
|
||||
实时流量
|
||||
</div>
|
||||
<div class="traffic-flows">
|
||||
<div
|
||||
v-for="(flow, index) in trafficFlows"
|
||||
@@ -99,7 +119,10 @@
|
||||
class="flow-item"
|
||||
:style="{ animationDelay: flow.delay + 's' }"
|
||||
>
|
||||
<div class="flow-packet" :style="{ background: flow.color }"></div>
|
||||
<div
|
||||
class="flow-packet"
|
||||
:style="{ background: flow.color }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-indicators">
|
||||
@@ -117,7 +140,9 @@
|
||||
|
||||
<!-- 策略详情对比 -->
|
||||
<div class="strategy-comparison">
|
||||
<div class="comparison-title">加权策略对比</div>
|
||||
<div class="comparison-title">
|
||||
加权策略对比
|
||||
</div>
|
||||
<div class="comparison-grid">
|
||||
<div
|
||||
v-for="strategy in strategies"
|
||||
@@ -130,11 +155,20 @@
|
||||
<span class="card-name">{{ strategy.name }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-desc">{{ strategy.description }}</p>
|
||||
<p class="card-desc">
|
||||
{{ strategy.description }}
|
||||
</p>
|
||||
<div class="use-cases">
|
||||
<div class="use-case-title">适用场景：</div>
|
||||
<div class="use-case-title">
|
||||
适用场景：
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="useCase in strategy.useCases" :key="useCase">{{ useCase }}</li>
|
||||
<li
|
||||
v-for="useCase in strategy.useCases"
|
||||
:key="useCase"
|
||||
>
|
||||
{{ useCase }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user