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
@@ -7,10 +7,16 @@
|
||||
class="step"
|
||||
:class="{ active: currentStep >= index, completed: currentStep > index }"
|
||||
>
|
||||
<div class="step-num">{{ index + 1 }}</div>
|
||||
<div class="step-num">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div class="step-title">
|
||||
{{ step.title }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,18 +24,26 @@
|
||||
<div class="action-panel">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="nextStep"
|
||||
:disabled="currentStep >= steps.length"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ currentStep >= steps.length ? '已完成' : '下一步' }}
|
||||
</button>
|
||||
<button class="action-btn outline" @click="reset">
|
||||
<button
|
||||
class="action-btn outline"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="currentStep > 0" class="code-preview">
|
||||
<div class="code-title">{{ steps[currentStep - 1].codeTitle }}</div>
|
||||
<div
|
||||
v-if="currentStep > 0"
|
||||
class="code-preview"
|
||||
>
|
||||
<div class="code-title">
|
||||
{{ steps[currentStep - 1].codeTitle }}
|
||||
</div>
|
||||
<pre><code>{{ steps[currentStep - 1].code }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<div class="aws-vs-aliyun-demo">
|
||||
<div class="demo-header">
|
||||
<h4>AWS vs 阿里云 核心差异</h4>
|
||||
<p class="demo-desc">点击切换查看不同维度的对比</p>
|
||||
<p class="demo-desc">
|
||||
点击切换查看不同维度的对比
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="comparison-tabs">
|
||||
@@ -18,13 +20,23 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-content">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div :key="activeTab" class="tab-content">
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
:key="activeTab"
|
||||
class="tab-content"
|
||||
>
|
||||
<div class="vs-cards">
|
||||
<div class="vs-card aws-card">
|
||||
<div class="card-header">
|
||||
<div class="logo">AWS</div>
|
||||
<div class="subtitle">Amazon Web Services</div>
|
||||
<div class="logo">
|
||||
AWS
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Amazon Web Services
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div
|
||||
@@ -39,13 +51,19 @@
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">
|
||||
<div class="vs-text">VS</div>
|
||||
<div class="vs-text">
|
||||
VS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-card aliyun-card">
|
||||
<div class="card-header">
|
||||
<div class="logo aliyun-logo">阿里云</div>
|
||||
<div class="subtitle">Alibaba Cloud</div>
|
||||
<div class="logo aliyun-logo">
|
||||
阿里云
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Alibaba Cloud
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div
|
||||
@@ -61,8 +79,12 @@
|
||||
</div>
|
||||
|
||||
<div class="verdict-box">
|
||||
<div class="verdict-title">💡 选型建议</div>
|
||||
<div class="verdict-text">{{ currentComparison.verdict }}</div>
|
||||
<div class="verdict-title">
|
||||
💡 选型建议
|
||||
</div>
|
||||
<div class="verdict-text">
|
||||
{{ currentComparison.verdict }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@@ -8,18 +8,31 @@
|
||||
:class="{ active: selectedEvent === index }"
|
||||
@click="selectedEvent = index"
|
||||
>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-dot" />
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">{{ event.year }}</div>
|
||||
<div class="timeline-title">{{ event.title }}</div>
|
||||
<div class="timeline-year">
|
||||
{{ event.year }}
|
||||
</div>
|
||||
<div class="timeline-title">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedEventData" class="event-detail">
|
||||
<div class="detail-year">{{ selectedEventData.year }}</div>
|
||||
<div class="detail-title">{{ selectedEventData.title }}</div>
|
||||
<div class="detail-desc">{{ selectedEventData.description }}</div>
|
||||
<div
|
||||
v-if="selectedEventData"
|
||||
class="event-detail"
|
||||
>
|
||||
<div class="detail-year">
|
||||
{{ selectedEventData.year }}
|
||||
</div>
|
||||
<div class="detail-title">
|
||||
{{ selectedEventData.title }}
|
||||
</div>
|
||||
<div class="detail-desc">
|
||||
{{ selectedEventData.description }}
|
||||
</div>
|
||||
<div class="detail-impact">
|
||||
<span class="impact-label">影响:</span>
|
||||
<span class="impact-text">{{ selectedEventData.impact }}</span>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<div class="cloud-services-map-demo">
|
||||
<div class="demo-header">
|
||||
<h4>云计算服务版图全景图</h4>
|
||||
<p class="demo-desc">点击各个板块查看 AWS 与阿里云的对应服务</p>
|
||||
<p class="demo-desc">
|
||||
点击各个板块查看 AWS 与阿里云的对应服务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="map-container">
|
||||
@@ -12,8 +14,12 @@
|
||||
:class="{ active: activeLayer === 'compute' }"
|
||||
@click="setActiveLayer('compute')"
|
||||
>
|
||||
<div class="layer-icon">⚙️</div>
|
||||
<div class="layer-title">计算服务</div>
|
||||
<div class="layer-icon">
|
||||
⚙️
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
计算服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">EC2/ECS</span>
|
||||
<span class="service-tag">Lambda/函数计算</span>
|
||||
@@ -26,8 +32,12 @@
|
||||
:class="{ active: activeLayer === 'storage' }"
|
||||
@click="setActiveLayer('storage')"
|
||||
>
|
||||
<div class="layer-icon">💾</div>
|
||||
<div class="layer-title">存储服务</div>
|
||||
<div class="layer-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
存储服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">S3/OSS</span>
|
||||
<span class="service-tag">EBS/云盘</span>
|
||||
@@ -40,8 +50,12 @@
|
||||
:class="{ active: activeLayer === 'network' }"
|
||||
@click="setActiveLayer('network')"
|
||||
>
|
||||
<div class="layer-icon">🌐</div>
|
||||
<div class="layer-title">网络服务</div>
|
||||
<div class="layer-icon">
|
||||
🌐
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
网络服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">VPC/专有网络</span>
|
||||
<span class="service-tag">ELB/SLB</span>
|
||||
@@ -54,8 +68,12 @@
|
||||
:class="{ active: activeLayer === 'security' }"
|
||||
@click="setActiveLayer('security')"
|
||||
>
|
||||
<div class="layer-icon">🔒</div>
|
||||
<div class="layer-title">安全服务</div>
|
||||
<div class="layer-icon">
|
||||
🔒
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
安全服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">IAM/RAM</span>
|
||||
<span class="service-tag">KMS/密钥管理</span>
|
||||
@@ -68,8 +86,12 @@
|
||||
:class="{ active: activeLayer === 'database' }"
|
||||
@click="setActiveLayer('database')"
|
||||
>
|
||||
<div class="layer-icon">🗄️</div>
|
||||
<div class="layer-title">数据库服务</div>
|
||||
<div class="layer-icon">
|
||||
🗄️
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
数据库服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">RDS/PolarDB</span>
|
||||
<span class="service-tag">DynamoDB/Tablestore</span>
|
||||
@@ -82,8 +104,12 @@
|
||||
:class="{ active: activeLayer === 'middleware' }"
|
||||
@click="setActiveLayer('middleware')"
|
||||
>
|
||||
<div class="layer-icon">🔧</div>
|
||||
<div class="layer-title">中间件服务</div>
|
||||
<div class="layer-icon">
|
||||
🔧
|
||||
</div>
|
||||
<div class="layer-title">
|
||||
中间件服务
|
||||
</div>
|
||||
<div class="layer-services">
|
||||
<span class="service-tag">MQ/RocketMQ</span>
|
||||
<span class="service-tag">ElastiCache/Redis</span>
|
||||
@@ -92,26 +118,46 @@
|
||||
</div>
|
||||
|
||||
<!-- 详情面板 -->
|
||||
<div v-if="activeLayer" class="detail-panel">
|
||||
<div
|
||||
v-if="activeLayer"
|
||||
class="detail-panel"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<h5>{{ layerDetails[activeLayer].title }}</h5>
|
||||
<button class="close-btn" @click="activeLayer = null">×</button>
|
||||
<button
|
||||
class="close-btn"
|
||||
@click="activeLayer = null"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="comparison-table">
|
||||
<div class="table-header">
|
||||
<div class="col aws">AWS</div>
|
||||
<div class="col aliyun">阿里云</div>
|
||||
<div class="col desc">功能描述</div>
|
||||
<div class="col aws">
|
||||
AWS
|
||||
</div>
|
||||
<div class="col aliyun">
|
||||
阿里云
|
||||
</div>
|
||||
<div class="col desc">
|
||||
功能描述
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in layerDetails[activeLayer].services"
|
||||
:key="index"
|
||||
class="table-row"
|
||||
>
|
||||
<div class="col aws">{{ item.aws }}</div>
|
||||
<div class="col aliyun">{{ item.aliyun }}</div>
|
||||
<div class="col desc">{{ item.desc }}</div>
|
||||
<div class="col aws">
|
||||
{{ item.aws }}
|
||||
</div>
|
||||
<div class="col aliyun">
|
||||
{{ item.aliyun }}
|
||||
</div>
|
||||
<div class="col desc">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,15 +8,28 @@
|
||||
:class="{ active: selectedService === service.id }"
|
||||
@click="selectService(service.id)"
|
||||
>
|
||||
<div class="service-icon">{{ service.icon }}</div>
|
||||
<div class="service-name">{{ service.name }}</div>
|
||||
<div class="service-examples">{{ service.examples }}</div>
|
||||
<div class="service-icon">
|
||||
{{ service.icon }}
|
||||
</div>
|
||||
<div class="service-name">
|
||||
{{ service.name }}
|
||||
</div>
|
||||
<div class="service-examples">
|
||||
{{ service.examples }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedServiceData" class="service-detail">
|
||||
<div class="detail-title">{{ selectedServiceData.name }}</div>
|
||||
<div class="detail-desc">{{ selectedServiceData.description }}</div>
|
||||
<div
|
||||
v-if="selectedServiceData"
|
||||
class="service-detail"
|
||||
>
|
||||
<div class="detail-title">
|
||||
{{ selectedServiceData.name }}
|
||||
</div>
|
||||
<div class="detail-desc">
|
||||
{{ selectedServiceData.description }}
|
||||
</div>
|
||||
<div class="detail-compare">
|
||||
<div class="compare-item">
|
||||
<span class="label">AWS:</span>
|
||||
|
||||
@@ -43,7 +43,9 @@
|
||||
</div>
|
||||
|
||||
<div class="result-panel">
|
||||
<div class="result-title">配置结果</div>
|
||||
<div class="result-title">
|
||||
配置结果
|
||||
</div>
|
||||
<div class="result-grid">
|
||||
<div class="result-item">
|
||||
<span class="label">配置</span>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<div class="compute-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>计算服务选型指南</h4>
|
||||
<p class="demo-desc">拖动滑块调整场景参数，获取最佳计算方案</p>
|
||||
<p class="demo-desc">
|
||||
拖动滑块调整场景参数，获取最佳计算方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scenario-sliders">
|
||||
@@ -13,7 +15,7 @@
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
>
|
||||
<div class="slider-labels">
|
||||
<span>波动大</span>
|
||||
<span>非常稳定</span>
|
||||
@@ -27,7 +29,7 @@
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
>
|
||||
<div class="slider-labels">
|
||||
<span>很低</span>
|
||||
<span>接近100%</span>
|
||||
@@ -41,7 +43,7 @@
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
>
|
||||
<div class="slider-labels">
|
||||
<span>几分钟</span>
|
||||
<span>持续运行</span>
|
||||
@@ -55,7 +57,7 @@
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
>
|
||||
<div class="slider-labels">
|
||||
<span>平稳</span>
|
||||
<span>大起大落</span>
|
||||
@@ -76,18 +78,28 @@
|
||||
class="solution-card"
|
||||
:class="{ 'top-pick': index === 0 }"
|
||||
>
|
||||
<div class="solution-rank" :class="{ 'rank-1': index === 0 }">
|
||||
<div
|
||||
class="solution-rank"
|
||||
:class="{ 'rank-1': index === 0 }"
|
||||
>
|
||||
{{ index === 0 ? '👑' : index + 1 }}
|
||||
</div>
|
||||
<div class="solution-content">
|
||||
<div class="solution-name">{{ solution.name }}</div>
|
||||
<div class="solution-name">
|
||||
{{ solution.name }}
|
||||
</div>
|
||||
<div class="solution-services">
|
||||
<span class="service-tag aws">{{ solution.aws }}</span>
|
||||
<span class="vs-mini">vs</span>
|
||||
<span class="service-tag aliyun">{{ solution.aliyun }}</span>
|
||||
</div>
|
||||
<div class="solution-reason">{{ solution.reason }}</div>
|
||||
<div class="solution-savings" v-if="solution.savings">
|
||||
<div class="solution-reason">
|
||||
{{ solution.reason }}
|
||||
</div>
|
||||
<div
|
||||
v-if="solution.savings"
|
||||
class="solution-savings"
|
||||
>
|
||||
💰 预计节省: {{ solution.savings }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<div class="database-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>数据库选型助手</h4>
|
||||
<p class="demo-desc">根据您的业务特点，推荐最适合的数据库方案</p>
|
||||
<p class="demo-desc">
|
||||
根据您的业务特点，推荐最适合的数据库方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="db-selection">
|
||||
@@ -19,7 +21,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCategory" class="db-comparison">
|
||||
<div
|
||||
v-if="selectedCategory"
|
||||
class="db-comparison"
|
||||
>
|
||||
<div class="comparison-header">
|
||||
<span class="aws-badge">AWS</span>
|
||||
<span class="vs-text">对比</span>
|
||||
@@ -29,29 +34,45 @@
|
||||
<div class="db-cards">
|
||||
<div class="db-card">
|
||||
<div class="db-header aws">
|
||||
<div class="db-name">{{ currentCategory.aws }}</div>
|
||||
<div class="db-name">
|
||||
{{ currentCategory.aws }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="db-body">
|
||||
<div class="feature-list">
|
||||
<div v-for="(feat, i) in currentCategory.awsFeatures" :key="i" class="feature">
|
||||
<div
|
||||
v-for="(feat, i) in currentCategory.awsFeatures"
|
||||
:key="i"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="price-tag">{{ currentCategory.awsPrice }}</div>
|
||||
<div class="price-tag">
|
||||
{{ currentCategory.awsPrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="db-card">
|
||||
<div class="db-header aliyun">
|
||||
<div class="db-name">{{ currentCategory.aliyun }}</div>
|
||||
<div class="db-name">
|
||||
{{ currentCategory.aliyun }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="db-body">
|
||||
<div class="feature-list">
|
||||
<div v-for="(feat, i) in currentCategory.aliyunFeatures" :key="i" class="feature">
|
||||
<div
|
||||
v-for="(feat, i) in currentCategory.aliyunFeatures"
|
||||
:key="i"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="price-tag aliyun">{{ currentCategory.aliyunPrice }}</div>
|
||||
<div class="price-tag aliyun">
|
||||
{{ currentCategory.aliyunPrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,35 +8,61 @@
|
||||
:class="{ active: currentStep === index, completed: currentStep > index }"
|
||||
@click="currentStep = index"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-info">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-time">{{ step.time }}</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-time">
|
||||
{{ step.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentStepData" class="step-detail">
|
||||
<div
|
||||
v-if="currentStepData"
|
||||
class="step-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-step">步骤 {{ currentStep + 1 }}</span>
|
||||
<span class="detail-name">{{ currentStepData.name }}</span>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="detail-desc">{{ currentStepData.description }}</div>
|
||||
<div class="detail-desc">
|
||||
{{ currentStepData.description }}
|
||||
</div>
|
||||
<div class="detail-tasks">
|
||||
<div class="tasks-title">具体操作：</div>
|
||||
<div class="tasks-title">
|
||||
具体操作：
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(task, i) in currentStepData.tasks" :key="i">{{ task }}</li>
|
||||
<li
|
||||
v-for="(task, i) in currentStepData.tasks"
|
||||
:key="i"
|
||||
>
|
||||
{{ task }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow-actions">
|
||||
<button class="action-btn" @click="prevStep" :disabled="currentStep === 0">
|
||||
<button
|
||||
class="action-btn"
|
||||
:disabled="currentStep === 0"
|
||||
@click="prevStep"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button class="action-btn primary" @click="nextStep" :disabled="currentStep >= steps.length - 1">
|
||||
<button
|
||||
class="action-btn primary"
|
||||
:disabled="currentStep >= steps.length - 1"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ currentStep >= steps.length - 1 ? '完成' : '下一步' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,66 +2,120 @@
|
||||
<div class="k8s-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>Kubernetes 服务生态全景</h4>
|
||||
<p class="demo-desc">探索 AWS 和阿里云上的 K8s 服务及配套生态</p>
|
||||
<p class="demo-desc">
|
||||
探索 AWS 和阿里云上的 K8s 服务及配套生态
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="k8s-architecture">
|
||||
<div class="arch-layer control-plane">
|
||||
<div class="layer-title">控制平面</div>
|
||||
<div class="layer-title">
|
||||
控制平面
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="service-box">
|
||||
<div class="service-name">EKS / ACK</div>
|
||||
<div class="service-desc">托管 Kubernetes 控制平面</div>
|
||||
<div class="service-name">
|
||||
EKS / ACK
|
||||
</div>
|
||||
<div class="service-desc">
|
||||
托管 Kubernetes 控制平面
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arch-layer worker-nodes">
|
||||
<div class="layer-title">工作节点</div>
|
||||
<div class="layer-title">
|
||||
工作节点
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="node-types">
|
||||
<div class="node-box">
|
||||
<div class="node-icon">💻</div>
|
||||
<div class="node-name">EC2/ECS</div>
|
||||
<div class="node-desc">标准计算节点</div>
|
||||
<div class="node-icon">
|
||||
💻
|
||||
</div>
|
||||
<div class="node-name">
|
||||
EC2/ECS
|
||||
</div>
|
||||
<div class="node-desc">
|
||||
标准计算节点
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-box">
|
||||
<div class="node-icon">⚡</div>
|
||||
<div class="node-name">Fargate/ECI</div>
|
||||
<div class="node-desc">Serverless 节点</div>
|
||||
<div class="node-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="node-name">
|
||||
Fargate/ECI
|
||||
</div>
|
||||
<div class="node-desc">
|
||||
Serverless 节点
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-box">
|
||||
<div class="node-icon">🎯</div>
|
||||
<div class="node-name">Spot/抢占式</div>
|
||||
<div class="node-desc">低成本竞价节点</div>
|
||||
<div class="node-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="node-name">
|
||||
Spot/抢占式
|
||||
</div>
|
||||
<div class="node-desc">
|
||||
低成本竞价节点
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arch-layer addons">
|
||||
<div class="layer-title">插件生态</div>
|
||||
<div class="layer-title">
|
||||
插件生态
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="addon-grid">
|
||||
<div class="addon-card">
|
||||
<div class="addon-name">Ingress/Nginx</div>
|
||||
<div class="addon-aws">AWS Load Balancer</div>
|
||||
<div class="addon-aliyun">ALB Ingress</div>
|
||||
<div class="addon-name">
|
||||
Ingress/Nginx
|
||||
</div>
|
||||
<div class="addon-aws">
|
||||
AWS Load Balancer
|
||||
</div>
|
||||
<div class="addon-aliyun">
|
||||
ALB Ingress
|
||||
</div>
|
||||
</div>
|
||||
<div class="addon-card">
|
||||
<div class="addon-name">Storage</div>
|
||||
<div class="addon-aws">EBS/EFS CSI</div>
|
||||
<div class="addon-aliyun">云盘/NAS CSI</div>
|
||||
<div class="addon-name">
|
||||
Storage
|
||||
</div>
|
||||
<div class="addon-aws">
|
||||
EBS/EFS CSI
|
||||
</div>
|
||||
<div class="addon-aliyun">
|
||||
云盘/NAS CSI
|
||||
</div>
|
||||
</div>
|
||||
<div class="addon-card">
|
||||
<div class="addon-name">Monitoring</div>
|
||||
<div class="addon-aws">CloudWatch/AMP</div>
|
||||
<div class="addon-aliyun">ARMS/Prometheus</div>
|
||||
<div class="addon-name">
|
||||
Monitoring
|
||||
</div>
|
||||
<div class="addon-aws">
|
||||
CloudWatch/AMP
|
||||
</div>
|
||||
<div class="addon-aliyun">
|
||||
ARMS/Prometheus
|
||||
</div>
|
||||
</div>
|
||||
<div class="addon-card">
|
||||
<div class="addon-name">Service Mesh</div>
|
||||
<div class="addon-aws">App Mesh</div>
|
||||
<div class="addon-aliyun">Service Mesh ASM</div>
|
||||
<div class="addon-name">
|
||||
Service Mesh
|
||||
</div>
|
||||
<div class="addon-aws">
|
||||
App Mesh
|
||||
</div>
|
||||
<div class="addon-aliyun">
|
||||
Service Mesh ASM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,16 @@
|
||||
<div class="network-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>网络架构可视化配置</h4>
|
||||
<p class="demo-desc">拖拽组件构建您的云上网络架构</p>
|
||||
<p class="demo-desc">
|
||||
拖拽组件构建您的云上网络架构
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="network-builder">
|
||||
<div class="components-panel">
|
||||
<div class="panel-title">可用组件</div>
|
||||
<div class="panel-title">
|
||||
可用组件
|
||||
</div>
|
||||
<div class="component-list">
|
||||
<div
|
||||
v-for="component in networkComponents"
|
||||
@@ -28,10 +32,19 @@
|
||||
@drop="onDrop"
|
||||
@dragover.prevent
|
||||
>
|
||||
<div v-if="canvasItems.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🏗️</div>
|
||||
<div class="empty-text">拖拽左侧组件到此处</div>
|
||||
<div class="empty-subtext">开始构建您的网络架构</div>
|
||||
<div
|
||||
v-if="canvasItems.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
<div class="empty-icon">
|
||||
🏗️
|
||||
</div>
|
||||
<div class="empty-text">
|
||||
拖拽左侧组件到此处
|
||||
</div>
|
||||
<div class="empty-subtext">
|
||||
开始构建您的网络架构
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -42,25 +55,46 @@
|
||||
:style="itemStyle(index)"
|
||||
@click="selectItem(item)"
|
||||
>
|
||||
<div class="item-icon">{{ item.icon }}</div>
|
||||
<div class="item-name">{{ item.name }}</div>
|
||||
<button class="remove-btn" @click.stop="removeItem(index)">×</button>
|
||||
<div class="item-icon">
|
||||
{{ item.icon }}
|
||||
</div>
|
||||
<div class="item-name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<button
|
||||
class="remove-btn"
|
||||
@click.stop="removeItem(index)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedItem" class="config-panel">
|
||||
<div
|
||||
v-if="selectedItem"
|
||||
class="config-panel"
|
||||
>
|
||||
<div class="config-header">
|
||||
<span class="config-icon">{{ selectedItem.icon }}</span>
|
||||
<span class="config-title">{{ selectedItem.name }} 配置</span>
|
||||
<button class="close-config" @click="selectedItem = null">×</button>
|
||||
<button
|
||||
class="close-config"
|
||||
@click="selectedItem = null"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="config-content">
|
||||
<div class="config-section">
|
||||
<div class="section-title">AWS 配置</div>
|
||||
<div class="service-name">{{ selectedItem.awsService }}</div>
|
||||
<div class="section-title">
|
||||
AWS 配置
|
||||
</div>
|
||||
<div class="service-name">
|
||||
{{ selectedItem.awsService }}
|
||||
</div>
|
||||
<div class="config-options">
|
||||
<div
|
||||
v-for="(option, idx) in selectedItem.awsOptions"
|
||||
@@ -73,11 +107,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-divider"></div>
|
||||
<div class="config-divider" />
|
||||
|
||||
<div class="config-section">
|
||||
<div class="section-title aliyun-title">阿里云配置</div>
|
||||
<div class="service-name aliyun-service">{{ selectedItem.aliyunService }}</div>
|
||||
<div class="section-title aliyun-title">
|
||||
阿里云配置
|
||||
</div>
|
||||
<div class="service-name aliyun-service">
|
||||
{{ selectedItem.aliyunService }}
|
||||
</div>
|
||||
<div class="config-options">
|
||||
<div
|
||||
v-for="(option, idx) in selectedItem.aliyunOptions"
|
||||
|
||||
@@ -4,38 +4,70 @@
|
||||
<div class="config-row">
|
||||
<span class="label">实例规格</span>
|
||||
<select v-model="config.spec">
|
||||
<option value="small">1核2G (入门)</option>
|
||||
<option value="medium">2核4G (标准)</option>
|
||||
<option value="large">4核8G (高性能)</option>
|
||||
<option value="small">
|
||||
1核2G (入门)
|
||||
</option>
|
||||
<option value="medium">
|
||||
2核4G (标准)
|
||||
</option>
|
||||
<option value="large">
|
||||
4核8G (高性能)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<span class="label">运行时长</span>
|
||||
<input type="range" v-model.number="config.hours" min="1" max="24" />
|
||||
<input
|
||||
v-model.number="config.hours"
|
||||
type="range"
|
||||
min="1"
|
||||
max="24"
|
||||
>
|
||||
<span class="value">{{ config.hours }} 小时/天</span>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<span class="label">运行天数</span>
|
||||
<input type="range" v-model.number="config.days" min="1" max="31" />
|
||||
<input
|
||||
v-model.number="config.days"
|
||||
type="range"
|
||||
min="1"
|
||||
max="31"
|
||||
>
|
||||
<span class="value">{{ config.days }} 天/月</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<div class="result-header">月度成本对比</div>
|
||||
<div class="result-header">
|
||||
月度成本对比
|
||||
</div>
|
||||
<div class="result-cards">
|
||||
<div class="result-card">
|
||||
<div class="model">按需付费</div>
|
||||
<div class="price">${{ costs.ondemand }}/月</div>
|
||||
<div class="model">
|
||||
按需付费
|
||||
</div>
|
||||
<div class="price">
|
||||
${{ costs.ondemand }}/月
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-card recommended">
|
||||
<div class="model">预留实例</div>
|
||||
<div class="price">${{ costs.reserved }}/月</div>
|
||||
<div class="saving">省 {{ savings }}%</div>
|
||||
<div class="model">
|
||||
预留实例
|
||||
</div>
|
||||
<div class="price">
|
||||
${{ costs.reserved }}/月
|
||||
</div>
|
||||
<div class="saving">
|
||||
省 {{ savings }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="model">抢占式</div>
|
||||
<div class="price">${{ costs.spot }}/月</div>
|
||||
<div class="model">
|
||||
抢占式
|
||||
</div>
|
||||
<div class="price">
|
||||
${{ costs.spot }}/月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<div class="pricing-model-demo">
|
||||
<div class="demo-header">
|
||||
<h4>云服务器计费模式计算器</h4>
|
||||
<p class="demo-desc">输入您的使用场景，对比不同计费模式的成本</p>
|
||||
<p class="demo-desc">
|
||||
输入您的使用场景，对比不同计费模式的成本
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="calculator-inputs">
|
||||
@@ -12,14 +14,23 @@
|
||||
<div class="input-group">
|
||||
<label>实例规格</label>
|
||||
<select v-model="config.instanceType">
|
||||
<option v-for="type in instanceTypes" :key="type.value" :value="type.value">
|
||||
<option
|
||||
v-for="type in instanceTypes"
|
||||
:key="type.value"
|
||||
:value="type.value"
|
||||
>
|
||||
{{ type.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>数量 (台)</label>
|
||||
<input v-model.number="config.quantity" type="number" min="1" max="100" />
|
||||
<input
|
||||
v-model.number="config.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,12 +40,22 @@
|
||||
<div class="input-grid">
|
||||
<div class="input-group">
|
||||
<label>每日运行时长 (小时)</label>
|
||||
<input v-model.number="config.dailyHours" type="range" min="1" max="24" />
|
||||
<input
|
||||
v-model.number="config.dailyHours"
|
||||
type="range"
|
||||
min="1"
|
||||
max="24"
|
||||
>
|
||||
<span class="range-value">{{ config.dailyHours }} 小时</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>每月运行天数</label>
|
||||
<input v-model.number="config.monthlyDays" type="range" min="1" max="31" />
|
||||
<input
|
||||
v-model.number="config.monthlyDays"
|
||||
type="range"
|
||||
min="1"
|
||||
max="31"
|
||||
>
|
||||
<span class="range-value">{{ config.monthlyDays }} 天</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,9 +64,17 @@
|
||||
<div class="input-section">
|
||||
<h5>计费偏好</h5>
|
||||
<div class="billing-options">
|
||||
<label v-for="option in billingOptions" :key="option.value" class="option-card"
|
||||
:class="{ active: config.billingType === option.value }">
|
||||
<input type="radio" v-model="config.billingType" :value="option.value" />
|
||||
<label
|
||||
v-for="option in billingOptions"
|
||||
:key="option.value"
|
||||
class="option-card"
|
||||
:class="{ active: config.billingType === option.value }"
|
||||
>
|
||||
<input
|
||||
v-model="config.billingType"
|
||||
type="radio"
|
||||
:value="option.value"
|
||||
>
|
||||
<span class="option-icon">{{ option.icon }}</span>
|
||||
<span class="option-name">{{ option.label }}</span>
|
||||
<span class="option-desc">{{ option.desc }}</span>
|
||||
@@ -57,18 +86,35 @@
|
||||
<div class="cost-comparison">
|
||||
<h5>成本对比分析</h5>
|
||||
<div class="comparison-chart">
|
||||
<div v-for="model in costComparison" :key="model.type" class="chart-bar"
|
||||
:class="{ recommended: model.recommended }">
|
||||
<div class="bar-label">{{ model.label }}</div>
|
||||
<div
|
||||
v-for="model in costComparison"
|
||||
:key="model.type"
|
||||
class="chart-bar"
|
||||
:class="{ recommended: model.recommended }"
|
||||
>
|
||||
<div class="bar-label">
|
||||
{{ model.label }}
|
||||
</div>
|
||||
<div class="bar-visual">
|
||||
<div class="bar-fill" :style="{ height: model.percentage + '%' }"
|
||||
:class="model.type"></div>
|
||||
<div
|
||||
class="bar-fill"
|
||||
:style="{ height: model.percentage + '%' }"
|
||||
:class="model.type"
|
||||
/>
|
||||
</div>
|
||||
<div class="bar-value">
|
||||
<span class="amount">{{ model.cost }}</span>
|
||||
<span v-if="model.savings" class="savings">省 {{ model.savings }}</span>
|
||||
<span
|
||||
v-if="model.savings"
|
||||
class="savings"
|
||||
>省 {{ model.savings }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="model.recommended"
|
||||
class="recommend-badge"
|
||||
>
|
||||
推荐
|
||||
</div>
|
||||
<div v-if="model.recommended" class="recommend-badge">推荐</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,7 +125,11 @@
|
||||
<span class="rec-title">优化建议</span>
|
||||
</div>
|
||||
<div class="rec-content">
|
||||
<div v-for="(tip, index) in optimizationTips" :key="index" class="tip-item">
|
||||
<div
|
||||
v-for="(tip, index) in optimizationTips"
|
||||
:key="index"
|
||||
class="tip-item"
|
||||
>
|
||||
<span class="tip-num">{{ index + 1 }}</span>
|
||||
<span class="tip-text">{{ tip }}</span>
|
||||
</div>
|
||||
|
||||
@@ -2,31 +2,52 @@
|
||||
<div class="provider-comparison">
|
||||
<div class="compare-table">
|
||||
<div class="table-header">
|
||||
<div class="col feature">对比项</div>
|
||||
<div class="col provider">AWS</div>
|
||||
<div class="col provider">阿里云</div>
|
||||
<div class="col provider">腾讯云</div>
|
||||
<div class="col feature">
|
||||
对比项
|
||||
</div>
|
||||
<div class="col provider">
|
||||
AWS
|
||||
</div>
|
||||
<div class="col provider">
|
||||
阿里云
|
||||
</div>
|
||||
<div class="col provider">
|
||||
腾讯云
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in compareData"
|
||||
:key="row.feature"
|
||||
class="table-row"
|
||||
>
|
||||
<div class="col feature">{{ row.feature }}</div>
|
||||
<div class="col provider" :class="{ highlight: row.awsHighlight }">
|
||||
<div class="col feature">
|
||||
{{ row.feature }}
|
||||
</div>
|
||||
<div
|
||||
class="col provider"
|
||||
:class="{ highlight: row.awsHighlight }"
|
||||
>
|
||||
{{ row.aws }}
|
||||
</div>
|
||||
<div class="col provider" :class="{ highlight: row.aliyunHighlight }">
|
||||
<div
|
||||
class="col provider"
|
||||
:class="{ highlight: row.aliyunHighlight }"
|
||||
>
|
||||
{{ row.aliyun }}
|
||||
</div>
|
||||
<div class="col provider" :class="{ highlight: row.tencentHighlight }">
|
||||
<div
|
||||
class="col provider"
|
||||
:class="{ highlight: row.tencentHighlight }"
|
||||
>
|
||||
{{ row.tencent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selection-guide">
|
||||
<div class="guide-title">💡 选择建议</div>
|
||||
<div class="guide-title">
|
||||
💡 选择建议
|
||||
</div>
|
||||
<div class="guide-items">
|
||||
<div class="guide-item">
|
||||
<span class="scenario">出海业务</span>
|
||||
|
||||
@@ -16,9 +16,15 @@
|
||||
|
||||
<div class="latency-table">
|
||||
<div class="table-header">
|
||||
<div class="col region">云厂商地域</div>
|
||||
<div class="col latency">延迟</div>
|
||||
<div class="col rating">推荐度</div>
|
||||
<div class="col region">
|
||||
云厂商地域
|
||||
</div>
|
||||
<div class="col latency">
|
||||
延迟
|
||||
</div>
|
||||
<div class="col rating">
|
||||
推荐度
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in latencyData"
|
||||
@@ -26,14 +32,21 @@
|
||||
class="table-row"
|
||||
:class="{ best: item.rating === '⭐⭐⭐' }"
|
||||
>
|
||||
<div class="col region">{{ item.region }}</div>
|
||||
<div class="col region">
|
||||
{{ item.region }}
|
||||
</div>
|
||||
<div class="col latency">
|
||||
<div class="latency-bar">
|
||||
<div class="bar-fill" :style="{ width: item.percent + '%' }"></div>
|
||||
<div
|
||||
class="bar-fill"
|
||||
:style="{ width: item.percent + '%' }"
|
||||
/>
|
||||
<span class="latency-value">{{ item.latency }}ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col rating">{{ item.rating }}</div>
|
||||
<div class="col rating">
|
||||
{{ item.rating }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,11 +2,15 @@
|
||||
<div class="security-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>安全服务架构配置器</h4>
|
||||
<p class="demo-desc">选择您的业务场景，一键生成安全防护方案</p>
|
||||
<p class="demo-desc">
|
||||
选择您的业务场景，一键生成安全防护方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scenario-selector">
|
||||
<div class="selector-title">选择业务场景</div>
|
||||
<div class="selector-title">
|
||||
选择业务场景
|
||||
</div>
|
||||
<div class="scenario-cards">
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
@@ -21,7 +25,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedScenarioData" class="security-architecture">
|
||||
<div
|
||||
v-if="selectedScenarioData"
|
||||
class="security-architecture"
|
||||
>
|
||||
<div class="architecture-header">
|
||||
<span class="header-icon">🏗️</span>
|
||||
<span class="header-title">推荐安全架构</span>
|
||||
@@ -39,18 +46,28 @@
|
||||
<span class="service-name">{{ selectedScenarioData.edge.aws }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.edge.awsFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.edge.awsFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs-mini">VS</div>
|
||||
<div class="vs-mini">
|
||||
VS
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-header aliyun">
|
||||
<span class="service-name">{{ selectedScenarioData.edge.aliyun }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.edge.aliyunFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.edge.aliyunFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,18 +86,28 @@
|
||||
<span class="service-name">{{ selectedScenarioData.app.aws }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.app.awsFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.app.awsFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs-mini">VS</div>
|
||||
<div class="vs-mini">
|
||||
VS
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-header aliyun">
|
||||
<span class="service-name">{{ selectedScenarioData.app.aliyun }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.app.aliyunFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.app.aliyunFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,18 +126,28 @@
|
||||
<span class="service-name">{{ selectedScenarioData.data.aws }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.data.awsFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.data.awsFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs-mini">VS</div>
|
||||
<div class="vs-mini">
|
||||
VS
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-header aliyun">
|
||||
<span class="service-name">{{ selectedScenarioData.data.aliyun }}</span>
|
||||
</div>
|
||||
<div class="service-features">
|
||||
<div v-for="(feat, idx) in selectedScenarioData.data.aliyunFeatures" :key="idx" class="feature">
|
||||
<div
|
||||
v-for="(feat, idx) in selectedScenarioData.data.aliyunFeatures"
|
||||
:key="idx"
|
||||
class="feature"
|
||||
>
|
||||
✓ {{ feat }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,9 +157,15 @@
|
||||
</div>
|
||||
|
||||
<div class="security-recommendations">
|
||||
<div class="rec-title">💡 安全建议</div>
|
||||
<div class="rec-title">
|
||||
💡 安全建议
|
||||
</div>
|
||||
<div class="rec-list">
|
||||
<div v-for="(rec, idx) in selectedScenarioData.recommendations" :key="idx" class="rec-item">
|
||||
<div
|
||||
v-for="(rec, idx) in selectedScenarioData.recommendations"
|
||||
:key="idx"
|
||||
class="rec-item"
|
||||
>
|
||||
<span class="rec-num">{{ idx + 1 }}</span>
|
||||
<span class="rec-text">{{ rec }}</span>
|
||||
</div>
|
||||
|
||||
@@ -2,17 +2,29 @@
|
||||
<div class="service-selection-demo">
|
||||
<div class="demo-header">
|
||||
<h4>云服务选型决策树</h4>
|
||||
<p class="demo-desc">回答几个简单问题，获取最适合您的云服务方案</p>
|
||||
<p class="demo-desc">
|
||||
回答几个简单问题，获取最适合您的云服务方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!result" class="decision-flow">
|
||||
<div
|
||||
v-if="!result"
|
||||
class="decision-flow"
|
||||
>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: progress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-number">问题 {{ currentStep + 1 }}/{{ questions.length }}</div>
|
||||
<h5 class="question-text">{{ currentQuestion.text }}</h5>
|
||||
<div class="question-number">
|
||||
问题 {{ currentStep + 1 }}/{{ questions.length }}
|
||||
</div>
|
||||
<h5 class="question-text">
|
||||
{{ currentQuestion.text }}
|
||||
</h5>
|
||||
|
||||
<div class="options-list">
|
||||
<button
|
||||
@@ -29,7 +41,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="result-panel">
|
||||
<div
|
||||
v-else
|
||||
class="result-panel"
|
||||
>
|
||||
<div class="result-header">
|
||||
<span class="result-icon">🎯</span>
|
||||
<h5>推荐方案</h5>
|
||||
@@ -37,32 +52,51 @@
|
||||
|
||||
<div class="recommendation-cards">
|
||||
<div class="rec-card primary">
|
||||
<div class="rec-badge">最佳匹配</div>
|
||||
<div class="rec-icon">{{ result.primary.icon }}</div>
|
||||
<div class="rec-title">{{ result.primary.name }}</div>
|
||||
<div class="rec-badge">
|
||||
最佳匹配
|
||||
</div>
|
||||
<div class="rec-icon">
|
||||
{{ result.primary.icon }}
|
||||
</div>
|
||||
<div class="rec-title">
|
||||
{{ result.primary.name }}
|
||||
</div>
|
||||
<div class="rec-services">
|
||||
<span class="service aws">{{ result.primary.aws }}</span>
|
||||
<span class="vs">vs</span>
|
||||
<span class="service aliyun">{{ result.primary.aliyun }}</span>
|
||||
</div>
|
||||
<div class="rec-reason">{{ result.primary.reason }}</div>
|
||||
<div class="rec-reason">
|
||||
{{ result.primary.reason }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rec-card secondary">
|
||||
<div class="rec-badge alt">备选</div>
|
||||
<div class="rec-icon">{{ result.secondary.icon }}</div>
|
||||
<div class="rec-title">{{ result.secondary.name }}</div>
|
||||
<div class="rec-badge alt">
|
||||
备选
|
||||
</div>
|
||||
<div class="rec-icon">
|
||||
{{ result.secondary.icon }}
|
||||
</div>
|
||||
<div class="rec-title">
|
||||
{{ result.secondary.name }}
|
||||
</div>
|
||||
<div class="rec-services">
|
||||
<span class="service aws">{{ result.secondary.aws }}</span>
|
||||
<span class="vs">vs</span>
|
||||
<span class="service aliyun">{{ result.secondary.aliyun }}</span>
|
||||
</div>
|
||||
<div class="rec-reason">{{ result.secondary.reason }}</div>
|
||||
<div class="rec-reason">
|
||||
{{ result.secondary.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-actions">
|
||||
<button class="restart-btn" @click="restart">
|
||||
<button
|
||||
class="restart-btn"
|
||||
@click="restart"
|
||||
>
|
||||
<span>↺</span> 重新测试
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,11 +2,15 @@
|
||||
<div class="storage-services-demo">
|
||||
<div class="demo-header">
|
||||
<h4>存储服务选型助手</h4>
|
||||
<p class="demo-desc">根据您的使用场景，推荐最适合的存储方案</p>
|
||||
<p class="demo-desc">
|
||||
根据您的使用场景，推荐最适合的存储方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scenario-selector">
|
||||
<div class="selector-title">选择您的主要使用场景：</div>
|
||||
<div class="selector-title">
|
||||
选择您的主要使用场景：
|
||||
</div>
|
||||
<div class="scenario-grid">
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
@@ -15,14 +19,23 @@
|
||||
:class="{ active: selectedScenario === scenario.id }"
|
||||
@click="selectScenario(scenario.id)"
|
||||
>
|
||||
<div class="scenario-icon">{{ scenario.icon }}</div>
|
||||
<div class="scenario-name">{{ scenario.name }}</div>
|
||||
<div class="scenario-desc">{{ scenario.shortDesc }}</div>
|
||||
<div class="scenario-icon">
|
||||
{{ scenario.icon }}
|
||||
</div>
|
||||
<div class="scenario-name">
|
||||
{{ scenario.name }}
|
||||
</div>
|
||||
<div class="scenario-desc">
|
||||
{{ scenario.shortDesc }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedScenario" class="recommendation-result">
|
||||
<div
|
||||
v-if="selectedScenario"
|
||||
class="recommendation-result"
|
||||
>
|
||||
<div class="result-header">
|
||||
<span class="result-icon">🎯</span>
|
||||
<span class="result-title">推荐方案</span>
|
||||
@@ -31,55 +44,91 @@
|
||||
<div class="storage-comparison">
|
||||
<div class="provider-card aws">
|
||||
<div class="provider-header">
|
||||
<div class="provider-logo">AWS</div>
|
||||
<div class="provider-service">{{ currentScenario.awsService }}</div>
|
||||
<div class="provider-logo">
|
||||
AWS
|
||||
</div>
|
||||
<div class="provider-service">
|
||||
{{ currentScenario.awsService }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="provider-features">
|
||||
<div v-for="(feature, idx) in currentScenario.awsFeatures" :key="idx" class="feature-item">
|
||||
<div
|
||||
v-for="(feature, idx) in currentScenario.awsFeatures"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
>
|
||||
<span class="check">✓</span>
|
||||
<span>{{ feature }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="provider-pricing">
|
||||
<div class="price-label">定价模式</div>
|
||||
<div class="price-value">{{ currentScenario.awsPricing }}</div>
|
||||
<div class="price-label">
|
||||
定价模式
|
||||
</div>
|
||||
<div class="price-value">
|
||||
{{ currentScenario.awsPricing }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">
|
||||
<div class="vs-line"></div>
|
||||
<div class="vs-badge">VS</div>
|
||||
<div class="vs-line"></div>
|
||||
<div class="vs-line" />
|
||||
<div class="vs-badge">
|
||||
VS
|
||||
</div>
|
||||
<div class="vs-line" />
|
||||
</div>
|
||||
|
||||
<div class="provider-card aliyun">
|
||||
<div class="provider-header">
|
||||
<div class="provider-logo aliyun-logo">阿里云</div>
|
||||
<div class="provider-service">{{ currentScenario.aliyunService }}</div>
|
||||
<div class="provider-logo aliyun-logo">
|
||||
阿里云
|
||||
</div>
|
||||
<div class="provider-service">
|
||||
{{ currentScenario.aliyunService }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="provider-features">
|
||||
<div v-for="(feature, idx) in currentScenario.aliyunFeatures" :key="idx" class="feature-item">
|
||||
<div
|
||||
v-for="(feature, idx) in currentScenario.aliyunFeatures"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
>
|
||||
<span class="check aliyun-check">✓</span>
|
||||
<span>{{ feature }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="provider-pricing">
|
||||
<div class="price-label">定价模式</div>
|
||||
<div class="price-value">{{ currentScenario.aliyunPricing }}</div>
|
||||
<div class="price-label">
|
||||
定价模式
|
||||
</div>
|
||||
<div class="price-value">
|
||||
{{ currentScenario.aliyunPricing }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decision-guide">
|
||||
<div class="guide-title">🤔 如何选择？</div>
|
||||
<div class="guide-title">
|
||||
🤔 如何选择？
|
||||
</div>
|
||||
<div class="guide-content">
|
||||
<div class="guide-item">
|
||||
<div class="guide-condition">选择 AWS 如果：</div>
|
||||
<div class="guide-reason">{{ currentScenario.chooseAwsWhen }}</div>
|
||||
<div class="guide-condition">
|
||||
选择 AWS 如果：
|
||||
</div>
|
||||
<div class="guide-reason">
|
||||
{{ currentScenario.chooseAwsWhen }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<div class="guide-condition">选择阿里云如果：</div>
|
||||
<div class="guide-reason">{{ currentScenario.chooseAliyunWhen }}</div>
|
||||
<div class="guide-condition">
|
||||
选择阿里云如果：
|
||||
</div>
|
||||
<div class="guide-reason">
|
||||
{{ currentScenario.chooseAliyunWhen }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,13 +8,22 @@
|
||||
:class="{ active: selectedType === type.id }"
|
||||
@click="selectedType = type.id"
|
||||
>
|
||||
<div class="type-icon">{{ type.icon }}</div>
|
||||
<div class="type-name">{{ type.name }}</div>
|
||||
<div class="type-example">{{ type.example }}</div>
|
||||
<div class="type-icon">
|
||||
{{ type.icon }}
|
||||
</div>
|
||||
<div class="type-name">
|
||||
{{ type.name }}
|
||||
</div>
|
||||
<div class="type-example">
|
||||
{{ type.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedTypeData" class="type-detail">
|
||||
<div
|
||||
v-if="selectedTypeData"
|
||||
class="type-detail"
|
||||
>
|
||||
<div class="detail-row">
|
||||
<span class="label">特点</span>
|
||||
<span class="value">{{ selectedTypeData.features }}</span>
|
||||
|
||||
Reference in New Issue
Block a user