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
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="alert-flow-demo">
|
||||
<div class="header">
|
||||
<div class="title">告警流程 (Alerting Flow)</div>
|
||||
<div class="subtitle">从发现异常到通知运维的自动化流程</div>
|
||||
<div class="title">
|
||||
告警流程 (Alerting Flow)
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
从发现异常到通知运维的自动化流程
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
@@ -29,18 +33,40 @@
|
||||
{ active: step.active, completed: step.completed }
|
||||
]"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div v-if="step.details" class="step-details">{{ step.details }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">
|
||||
{{ step.title }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="step.details"
|
||||
class="step-details"
|
||||
>
|
||||
{{ step.details }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="index < steps.length - 1"
|
||||
class="step-arrow"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
<div v-if="index < steps.length - 1" class="step-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-info" v-if="currentAlert">
|
||||
<div class="alert-header" :class="'level-' + currentAlert.level">
|
||||
<div
|
||||
v-if="currentAlert"
|
||||
class="alert-info"
|
||||
>
|
||||
<div
|
||||
class="alert-header"
|
||||
:class="'level-' + currentAlert.level"
|
||||
>
|
||||
<span class="alert-icon">⚠️</span>
|
||||
<span class="alert-title">告警详情</span>
|
||||
<span class="alert-level">{{ currentAlert.levelName }}</span>
|
||||
@@ -70,7 +96,9 @@
|
||||
</div>
|
||||
|
||||
<div class="level-guide">
|
||||
<div class="guide-title">告警级别说明</div>
|
||||
<div class="guide-title">
|
||||
告警级别说明
|
||||
</div>
|
||||
<div class="levels">
|
||||
<div class="level-item">
|
||||
<span class="level-badge p0">P0</span>
|
||||
|
||||
@@ -5,35 +5,59 @@
|
||||
<template>
|
||||
<div class="capacity-demo">
|
||||
<div class="header">
|
||||
<div class="title">容量规划计算器 (Capacity Planning)</div>
|
||||
<div class="subtitle">估算系统需要多少台服务器才能满足需求</div>
|
||||
<div class="title">
|
||||
容量规划计算器 (Capacity Planning)
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
估算系统需要多少台服务器才能满足需求
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calculator">
|
||||
<div class="input-section">
|
||||
<div class="section-title">📊 业务指标</div>
|
||||
<div class="section-title">
|
||||
📊 业务指标
|
||||
</div>
|
||||
<div class="input-grid">
|
||||
<div class="input-group">
|
||||
<label>日活用户 (DAU)</label>
|
||||
<input v-model.number="dau" type="number" min="1" step="1000" />
|
||||
<input
|
||||
v-model.number="dau"
|
||||
type="number"
|
||||
min="1"
|
||||
step="1000"
|
||||
>
|
||||
<span class="unit">人</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>人均请求/天</label>
|
||||
<input v-model.number="requestsPerUser" type="number" min="1" />
|
||||
<input
|
||||
v-model.number="requestsPerUser"
|
||||
type="number"
|
||||
min="1"
|
||||
>
|
||||
<span class="unit">次</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>高峰时段占比</label>
|
||||
<input v-model.number="peakRatio" type="number" min="1" max="100" />
|
||||
<input
|
||||
v-model.number="peakRatio"
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
>
|
||||
<span class="unit">%</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>单机 QPS 能力</label>
|
||||
<input v-model.number="serverQps" type="number" min="1" />
|
||||
<input
|
||||
v-model.number="serverQps"
|
||||
type="number"
|
||||
min="1"
|
||||
>
|
||||
<span class="unit">次/秒</span>
|
||||
</div>
|
||||
|
||||
@@ -45,54 +69,72 @@
|
||||
min="1"
|
||||
max="3"
|
||||
step="0.1"
|
||||
/>
|
||||
>
|
||||
<span class="unit">倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
💡
|
||||
<span class="tip-text"
|
||||
>通常高峰期流量是平均流量的 2-3 倍，建议预留 50-100%
|
||||
冗余应对突发流量</span
|
||||
>
|
||||
<span class="tip-text">通常高峰期流量是平均流量的 2-3 倍，建议预留 50-100%
|
||||
冗余应对突发流量</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-title">📈 容量评估结果</div>
|
||||
<div class="section-title">
|
||||
📈 容量评估结果
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-label">日均总请求量</div>
|
||||
<div class="result-label">
|
||||
日均总请求量
|
||||
</div>
|
||||
<div class="result-value">
|
||||
{{ totalRequests.toLocaleString() }} 次/天
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card highlight">
|
||||
<div class="result-label">高峰期 QPS (目标)</div>
|
||||
<div class="result-value">{{ targetQPS.toLocaleString() }} 次/秒</div>
|
||||
<div class="result-label">
|
||||
高峰期 QPS (目标)
|
||||
</div>
|
||||
<div class="result-value">
|
||||
{{ targetQPS.toLocaleString() }} 次/秒
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-label">理论所需服务器</div>
|
||||
<div class="result-value">{{ minServers }} 台</div>
|
||||
<div class="result-label">
|
||||
理论所需服务器
|
||||
</div>
|
||||
<div class="result-value">
|
||||
{{ minServers }} 台
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card highlight">
|
||||
<div class="result-label">推荐配置 (含冗余)</div>
|
||||
<div class="result-value large">{{ recommendedServers }} 台</div>
|
||||
<div class="result-label">
|
||||
推荐配置 (含冗余)
|
||||
</div>
|
||||
<div class="result-value large">
|
||||
{{ recommendedServers }} 台
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cost-estimate">
|
||||
<div class="cost-title">💰 月成本估算 (云服务器)</div>
|
||||
<div class="cost-title">
|
||||
💰 月成本估算 (云服务器)
|
||||
</div>
|
||||
<div class="cost-options">
|
||||
<div
|
||||
class="cost-option"
|
||||
v-for="option in costOptions"
|
||||
:key="option.name"
|
||||
class="cost-option"
|
||||
>
|
||||
<div class="option-name">{{ option.name }}</div>
|
||||
<div class="option-name">
|
||||
{{ option.name }}
|
||||
</div>
|
||||
<div class="option-price">
|
||||
¥{{ option.price.toLocaleString() }}/月
|
||||
</div>
|
||||
@@ -103,32 +145,50 @@
|
||||
</div>
|
||||
|
||||
<div class="planning-tips">
|
||||
<div class="tips-title">🎯 容量规划要点</div>
|
||||
<div class="tips-title">
|
||||
🎯 容量规划要点
|
||||
</div>
|
||||
<div class="tips-grid">
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">1️⃣</div>
|
||||
<div class="tip-title">以峰值为核心</div>
|
||||
<div class="tip-icon">
|
||||
1️⃣
|
||||
</div>
|
||||
<div class="tip-title">
|
||||
以峰值为核心
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
不能按平均流量规划，必须按高峰期流量（通常是平均的 2-3 倍）来准备
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">2️⃣</div>
|
||||
<div class="tip-title">预留冗余空间</div>
|
||||
<div class="tip-icon">
|
||||
2️⃣
|
||||
</div>
|
||||
<div class="tip-title">
|
||||
预留冗余空间
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
至少预留 50% 冗余，用于应对突发流量、服务器故障、维护窗口
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">3️⃣</div>
|
||||
<div class="tip-title">定期压测验证</div>
|
||||
<div class="tip-icon">
|
||||
3️⃣
|
||||
</div>
|
||||
<div class="tip-title">
|
||||
定期压测验证
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
每季度进行压力测试，验证实际容量是否满足预估
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">4️⃣</div>
|
||||
<div class="tip-title">弹性扩缩容</div>
|
||||
<div class="tip-icon">
|
||||
4️⃣
|
||||
</div>
|
||||
<div class="tip-title">
|
||||
弹性扩缩容
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
结合云服务的自动扩缩容，在高峰期自动增加实例
|
||||
</div>
|
||||
@@ -137,7 +197,9 @@
|
||||
</div>
|
||||
|
||||
<div class="formula-section">
|
||||
<div class="formula-title">📐 计算公式</div>
|
||||
<div class="formula-title">
|
||||
📐 计算公式
|
||||
</div>
|
||||
<div class="formula-list">
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">日均请求量：</span>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="incident-demo">
|
||||
<div class="header">
|
||||
<div class="title">故障响应流程 (Incident Response)</div>
|
||||
<div class="subtitle">专业团队如何处理线上故障</div>
|
||||
<div class="title">
|
||||
故障响应流程 (Incident Response)
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
专业团队如何处理线上故障
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
@@ -19,27 +23,47 @@
|
||||
]"
|
||||
@click="activePhase = index"
|
||||
>
|
||||
<div class="phase-marker">{{ index + 1 }}</div>
|
||||
<div class="phase-marker">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">{{ phase.title }}</div>
|
||||
<div class="phase-time">{{ phase.time }}</div>
|
||||
<div class="phase-desc">{{ phase.desc }}</div>
|
||||
<div v-if="activePhase === index" class="phase-actions">
|
||||
<div class="action-title">关键动作：</div>
|
||||
<div class="phase-title">
|
||||
{{ phase.title }}
|
||||
</div>
|
||||
<div class="phase-time">
|
||||
{{ phase.time }}
|
||||
</div>
|
||||
<div class="phase-desc">
|
||||
{{ phase.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="activePhase === index"
|
||||
class="phase-actions"
|
||||
>
|
||||
<div class="action-title">
|
||||
关键动作：
|
||||
</div>
|
||||
<ul class="action-list">
|
||||
<li v-for="action in phase.actions" :key="action">
|
||||
<li
|
||||
v-for="action in phase.actions"
|
||||
:key="action"
|
||||
>
|
||||
{{ action }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="phase.tools" class="tools-section">
|
||||
<div class="tools-title">常用工具：</div>
|
||||
<div
|
||||
v-if="phase.tools"
|
||||
class="tools-section"
|
||||
>
|
||||
<div class="tools-title">
|
||||
常用工具：
|
||||
</div>
|
||||
<div class="tools-list">
|
||||
<span
|
||||
v-for="tool in phase.tools"
|
||||
:key="tool"
|
||||
class="tool-tag"
|
||||
>{{ tool }}</span
|
||||
>
|
||||
>{{ tool }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,32 +71,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="incident-meta" v-if="activePhase === phases.length - 1">
|
||||
<div class="meta-title">📋 故障复盘报告 (Post-mortem)</div>
|
||||
<div
|
||||
v-if="activePhase === phases.length - 1"
|
||||
class="incident-meta"
|
||||
>
|
||||
<div class="meta-title">
|
||||
📋 故障复盘报告 (Post-mortem)
|
||||
</div>
|
||||
<div class="meta-content">
|
||||
<div class="meta-section">
|
||||
<div class="meta-label">故障等级：</div>
|
||||
<div class="meta-value level-p1">P1 - 高优先级</div>
|
||||
<div class="meta-label">
|
||||
故障等级：
|
||||
</div>
|
||||
<div class="meta-value level-p1">
|
||||
P1 - 高优先级
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta-section">
|
||||
<div class="meta-label">影响范围：</div>
|
||||
<div class="meta-value">约 15% 用户无法访问订单服务</div>
|
||||
<div class="meta-label">
|
||||
影响范围：
|
||||
</div>
|
||||
<div class="meta-value">
|
||||
约 15% 用户无法访问订单服务
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta-section">
|
||||
<div class="meta-label">故障时长：</div>
|
||||
<div class="meta-value">23 分钟</div>
|
||||
<div class="meta-label">
|
||||
故障时长：
|
||||
</div>
|
||||
<div class="meta-value">
|
||||
23 分钟
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta-section">
|
||||
<div class="meta-label">根本原因：</div>
|
||||
<div class="meta-value">数据库连接池配置过小，高峰期连接耗尽</div>
|
||||
<div class="meta-label">
|
||||
根本原因：
|
||||
</div>
|
||||
<div class="meta-value">
|
||||
数据库连接池配置过小，高峰期连接耗尽
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta-section">
|
||||
<div class="meta-label">改进措施：</div>
|
||||
<div class="meta-label">
|
||||
改进措施：
|
||||
</div>
|
||||
<div class="meta-value">
|
||||
1. 增加连接池大小至 200
|
||||
<br />
|
||||
<br>
|
||||
2. 添加连接池监控告警
|
||||
<br />
|
||||
<br>
|
||||
3. 优化慢查询，减少连接占用时间
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,32 +127,50 @@
|
||||
</div>
|
||||
|
||||
<div class="best-practices">
|
||||
<div class="practice-title">🎯 故障处理最佳实践</div>
|
||||
<div class="practice-title">
|
||||
🎯 故障处理最佳实践
|
||||
</div>
|
||||
<div class="practice-grid">
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">⚡</div>
|
||||
<div class="practice-name">快速响应</div>
|
||||
<div class="practice-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="practice-name">
|
||||
快速响应
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
建立 15 分钟响应机制，P0 故障立即电话通知
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">📢</div>
|
||||
<div class="practice-name">信息同步</div>
|
||||
<div class="practice-icon">
|
||||
📢
|
||||
</div>
|
||||
<div class="practice-name">
|
||||
信息同步
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
定期向用户和内部同步故障进展，避免猜测
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">🔍</div>
|
||||
<div class="practice-name">保留现场</div>
|
||||
<div class="practice-icon">
|
||||
🔍
|
||||
</div>
|
||||
<div class="practice-name">
|
||||
保留现场
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
故障现场数据（日志、监控）完整留存，便于分析
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">📝</div>
|
||||
<div class="practice-name">blameless 文化</div>
|
||||
<div class="practice-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="practice-name">
|
||||
blameless 文化
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
复盘对事不对人，聚焦流程改进而非个人责任
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="monitoring-dashboard">
|
||||
<div class="header">
|
||||
<div class="title">实时监控面板 (Monitoring Dashboard)</div>
|
||||
<div class="subtitle">运维的"眼睛" - 让系统状态一目了然</div>
|
||||
<div class="title">
|
||||
实时监控面板 (Monitoring Dashboard)
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
运维的"眼睛" - 让系统状态一目了然
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
@@ -22,7 +26,10 @@
|
||||
|
||||
<div class="dashboard-content">
|
||||
<!-- 基础设施监控 -->
|
||||
<div v-if="activeTab === 'infra'" class="metrics-grid">
|
||||
<div
|
||||
v-if="activeTab === 'infra'"
|
||||
class="metrics-grid"
|
||||
>
|
||||
<div
|
||||
v-for="metric in infraMetrics"
|
||||
:key="metric.name"
|
||||
@@ -30,9 +37,7 @@
|
||||
>
|
||||
<div class="metric-header">
|
||||
<span class="metric-name">{{ metric.name }}</span>
|
||||
<span class="metric-value"
|
||||
>{{ metric.value }}{{ metric.unit }}</span
|
||||
>
|
||||
<span class="metric-value">{{ metric.value }}{{ metric.unit }}</span>
|
||||
</div>
|
||||
<div class="metric-chart">
|
||||
<div
|
||||
@@ -41,7 +46,7 @@
|
||||
width: metric.value + '%',
|
||||
background: getColor(metric.value, metric.threshold)
|
||||
}"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="metric-status"
|
||||
@@ -53,7 +58,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 应用监控 -->
|
||||
<div v-if="activeTab === 'app'" class="metrics-grid">
|
||||
<div
|
||||
v-if="activeTab === 'app'"
|
||||
class="metrics-grid"
|
||||
>
|
||||
<div class="metric-card large">
|
||||
<div class="metric-header">
|
||||
<span class="metric-name">QPS (每秒请求数)</span>
|
||||
@@ -65,7 +73,7 @@
|
||||
:key="index"
|
||||
class="qps-bar"
|
||||
:style="{ height: height + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -97,7 +105,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 业务监控 -->
|
||||
<div v-if="activeTab === 'business'" class="metrics-grid">
|
||||
<div
|
||||
v-if="activeTab === 'business'"
|
||||
class="metrics-grid"
|
||||
>
|
||||
<div
|
||||
v-for="metric in businessMetrics"
|
||||
:key="metric.name"
|
||||
@@ -107,7 +118,10 @@
|
||||
<span class="metric-name">{{ metric.name }}</span>
|
||||
<span class="metric-value">{{ metric.value }}</span>
|
||||
</div>
|
||||
<div class="trend" :class="metric.trend">
|
||||
<div
|
||||
class="trend"
|
||||
:class="metric.trend"
|
||||
>
|
||||
{{
|
||||
metric.trend === 'up'
|
||||
? '📈 上升'
|
||||
@@ -116,22 +130,24 @@
|
||||
: '➡️ 持平'
|
||||
}}
|
||||
</div>
|
||||
<div class="metric-desc">{{ metric.desc }}</div>
|
||||
<div class="metric-desc">
|
||||
{{ metric.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="item">
|
||||
<span class="dot normal"></span>
|
||||
<span class="dot normal" />
|
||||
<span>正常 (Normal)</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="dot warning"></span>
|
||||
<span class="dot warning" />
|
||||
<span>警告 (Warning)</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="dot critical"></span>
|
||||
<span class="dot critical" />
|
||||
<span>严重 (Critical)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="trace-demo">
|
||||
<div class="header">
|
||||
<div class="title">分布式链路追踪 (Distributed Tracing)</div>
|
||||
<div class="subtitle">一个请求在微服务间流转的完整路径</div>
|
||||
<div class="title">
|
||||
分布式链路追踪 (Distributed Tracing)
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
一个请求在微服务间流转的完整路径
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
@@ -58,8 +62,14 @@
|
||||
</div>
|
||||
|
||||
<div class="spans">
|
||||
<div v-for="(span, index) in spans" :key="span.id" class="span-row">
|
||||
<div class="span-service">{{ span.service }}</div>
|
||||
<div
|
||||
v-for="(span, index) in spans"
|
||||
:key="span.id"
|
||||
class="span-row"
|
||||
>
|
||||
<div class="span-service">
|
||||
{{ span.service }}
|
||||
</div>
|
||||
<div class="span-timeline">
|
||||
<div
|
||||
class="span-bar"
|
||||
@@ -74,24 +84,40 @@
|
||||
}"
|
||||
>
|
||||
<div class="span-details">
|
||||
<div class="span-name">{{ span.name }}</div>
|
||||
<div class="span-time">{{ span.duration }}ms</div>
|
||||
<div class="span-name">
|
||||
{{ span.name }}
|
||||
</div>
|
||||
<div class="span-time">
|
||||
{{ span.duration }}ms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span-status">
|
||||
<span v-if="span.status === 'error'" class="status-error">✗</span>
|
||||
<span v-else-if="span.duration > 200" class="status-warning"
|
||||
>⚠</span
|
||||
>
|
||||
<span v-else class="status-success">✓</span>
|
||||
<span
|
||||
v-if="span.status === 'error'"
|
||||
class="status-error"
|
||||
>✗</span>
|
||||
<span
|
||||
v-else-if="span.duration > 200"
|
||||
class="status-warning"
|
||||
>⚠</span>
|
||||
<span
|
||||
v-else
|
||||
class="status-success"
|
||||
>✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span-detail" v-if="selectedSpan">
|
||||
<div class="detail-header">Span 详情</div>
|
||||
<div
|
||||
v-if="selectedSpan"
|
||||
class="span-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
Span 详情
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-row">
|
||||
<span class="label">服务名：</span>
|
||||
@@ -107,11 +133,17 @@
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">状态：</span>
|
||||
<span class="value" :class="selectedSpan.status">{{
|
||||
<span
|
||||
class="value"
|
||||
:class="selectedSpan.status"
|
||||
>{{
|
||||
selectedSpan.status
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-if="selectedSpan.error" class="detail-row">
|
||||
<div
|
||||
v-if="selectedSpan.error"
|
||||
class="detail-row"
|
||||
>
|
||||
<span class="label">错误信息：</span>
|
||||
<span class="value error">{{ selectedSpan.error }}</span>
|
||||
</div>
|
||||
@@ -120,21 +152,23 @@
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="color-box success"></span>
|
||||
<span class="color-box success" />
|
||||
<span>正常 (≤200ms)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="color-box warning"></span>
|
||||
<span class="color-box warning" />
|
||||
<span>慢调用 (>200ms)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="color-box error"></span>
|
||||
<span class="color-box error" />
|
||||
<span>错误</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<div class="tip-title">💡 观察要点</div>
|
||||
<div class="tip-title">
|
||||
💡 观察要点
|
||||
</div>
|
||||
<ul class="tip-list">
|
||||
<li>点击"性能瓶颈"查看数据库查询慢导致的延迟</li>
|
||||
<li>点击"错误追踪"查看库存服务异常如何影响整个链路</li>
|
||||
|
||||
Reference in New Issue
Block a user