delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(docs): simplify deployment demo components

Browse Source
This commit is contained in:
sanbuphy
2026-02-14 01:00:26 +08:00
parent d174ceea32
commit f9c4ae9320
25 changed files with 819 additions and 8613 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
+128 -228
View File
@@ -1,300 +1,200 @@
<script setup>
import { ref, computed } from 'vue'
const currentStep = ref(0)
const steps = [
{ id: 'code', title: '写代码', desc: '小明在厨房开发新咖啡配方', icon: '☕' },
{ id: 'build', title: '构建打包', desc: '准备原材料，清洗咖啡豆', icon: '📦' },
{ id: 'test', title: '测试验证', desc: '小明自己先品尝确认没问题', icon: '🧪' },
{ id: 'deploy', title: '部署上线', desc: '把咖啡上架到门店售卖', icon: '🚀' },
{ id: 'monitor', title: '监控维护', desc: '观察顾客反馈，持续优化', icon: '📊' }
]
const stepProgress = computed(() => ((currentStep.value + 1) / steps.length) * 100)
</script>
<template>
<div class="deployment-overview">
<div class="demo-header">
<h3>服务上线全流程</h3>
<p class="subtitle">从小明咖啡店看部署流程</p>
</div>
<div class="intro-text">
<p>
就像小明要推出一款新咖啡，需要经过<strong>配方研发</strong>→<strong>材料准备</strong>→<strong>试喝确认</strong>→<strong>上架售卖</strong>→<strong>收集反馈</strong>，
软件上线也需要完整的流程保障质量。
</p>
<span class="icon">🚀</span>
<span class="title">服务上线全流程</span>
<span class="subtitle">从代码到用户眼中的网页</span>
</div>
<div class="demo-content">
<!-- 进度条 -->
<div class="progress-section">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: `${stepProgress}%` }"></div>
<div class="service-flow">
<div class="flow-step" :class="{ active: currentStep >= 1 }">
<div class="step-icon">📦</div>
<div class="step-title">Build</div>
<div class="tech-term">源码→可执行文件</div>
</div>
<div class="progress-label">{{ currentStep + 1 }} / {{ steps.length }}</div>
</div>
<!-- 步骤卡片 -->
<div class="steps-container">
<div
v-for="(step, index) in steps"
:key="step.id"
class="step-card"
:class="{ active: currentStep === index, completed: index < currentStep }"
@click="currentStep = index"
>
<div class="step-icon">{{ step.icon }}</div>
<div class="step-title">{{ step.title }}</div>
<div class="step-desc">{{ step.desc }}</div>
<!-- 状态指示 -->
<div class="step-status">
<span v-if="index < currentStep" class="status-icon completed">✓</span>
<span v-else-if="index === currentStep" class="status-icon active">●</span>
<span v-else class="status-icon pending">○</span>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 2 }">
<div class="step-icon">🖥️</div>
<div class="step-title">Server</div>
<div class="tech-term">24h运行的电脑</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 3 }">
<div class="step-icon">�</div>
<div class="step-title">Deploy</div>
<div class="tech-term">代码放到服务器</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 4 }">
<div class="step-icon">🔀</div>
<div class="step-title">Nginx</div>
<div class="tech-term">接收请求分发响应</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 5 }">
<div class="step-icon">�</div>
<div class="step-title">DNS</div>
<div class="tech-term">域名→IP地址</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 6 }">
<div class="step-icon">�</div>
<div class="step-title">HTTPS</div>
<div class="tech-term">加密数据传输</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 7 }">
<div class="step-icon">⚡</div>
<div class="step-title">CDN</div>
<div class="tech-term">就近访问加速</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 8 }">
<div class="step-icon">🔄</div>
<div class="step-title">CI/CD</div>
<div class="tech-term">自动化部署流程</div>
</div>
<span class="flow-arrow">→</span>
<div class="flow-step" :class="{ active: currentStep >= 9 }">
<div class="step-icon">�</div>
<div class="step-title">Monitor</div>
<div class="tech-term">监控运行状态</div>
</div>
</div>
<!-- 当前步骤详情 -->
<div class="step-detail">
<h4>{{ steps[currentStep].title }}</h4>
<p>{{ steps[currentStep].desc }}</p>
<div class="detail-analogy">
<div class="analogy-label">💡 技术对应</div>
<div class="analogy-content">
<span v-if="currentStep === 0">编写代码：开发新功能</span>
<span v-if="currentStep === 1">构建打包：Webpack/Vite 编译资源</span>
<span v-if="currentStep === 2">测试验证：单元测试、集成测试</span>
<span v-if="currentStep === 3">部署上线：推送到服务器/云平台</span>
<span v-if="currentStep === 4">监控维护：日志、性能监控、告警</span>
</div>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心原则</strong>：小步快跑 → 先上线MVP → 逐步完善
</div>
</div>
<div class="info-box">
<p>💡 <strong>关键要点</strong>：每个环节都不可或缺。跳过测试就上线，就像没试喝就卖咖啡，可能让顾客喝到难喝的咖啡（Bug）！</p>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentStep = ref(0)
</script>
<style scoped>
.deployment-overview {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
background-color: var(--vp-c-bg-soft);
max-height: 600px;
overflow-y: auto;
background: var(--vp-c-bg-soft);
padding: 0.75rem;
margin: 1rem 0;
}
.demo-header {
padding: 1.25rem;
background: var(--vp-c-bg);
border-bottom: 1px solid var(--vp-c-divider);
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.demo-header h3 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
color: var(--vp-c-text-1);
.demo-header .icon {
font-size: 1.25rem;
}
.subtitle {
margin: 0;
font-size: 0.9rem;
.demo-header .title {
font-weight: bold;
font-size: 1rem;
}
.demo-header .subtitle {
color: var(--vp-c-text-2);
font-size: 0.85rem;
margin-left: 0.5rem;
}
.intro-text {
padding: 1rem 1.25rem;
font-size: 0.9rem;
font-size: 0.85rem;
color: var(--vp-c-text-2);
line-height: 1.6;
border-bottom: 1px solid var(--vp-c-divider);
line-height: 1.5;
margin-bottom: 0.75rem;
padding: 0.5rem;
background: var(--vp-c-bg);
border-radius: 6px;
}
.intro-text strong {
color: var(--vp-c-brand-1);
font-weight: 500;
}
.demo-content {
padding: 1.25rem;
margin-bottom: 0.5rem;
}
.progress-section {
.service-flow {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
gap: 0.25rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.progress-bar {
flex: 1;
height: 8px;
background: var(--vp-c-bg-alt);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
transition: width 0.3s ease;
border-radius: 4px;
}
.progress-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--vp-c-brand);
min-width: 3rem;
text-align: right;
}
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.step-card {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
min-height: 120px;
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.25rem;
padding: 0.5rem;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
min-width: 85px;
}
.step-card:hover {
border-color: var(--vp-c-brand-soft);
transform: translateY(-2px);
.flow-step:hover {
border-color: var(--vp-c-brand);
}
.step-card.active {
.flow-step.active {
border-color: var(--vp-c-brand);
background: var(--vp-c-brand-soft);
}
.step-card.completed {
border-color: var(--vp-c-brand-delta);
opacity: 0.8;
}
.step-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.step-title {
font-weight: 600;
font-size: 0.95rem;
font-size: 0.75rem;
color: var(--vp-c-text-1);
margin-bottom: 0.25rem;
text-align: center;
white-space: nowrap;
}
.step-desc {
font-size: 0.8rem;
.tech-term {
font-size: 0.6rem;
color: var(--vp-c-text-2);
line-height: 1.3;
text-align: center;
white-space: normal;
line-height: 1.2;
}
.step-status {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.status-icon {
font-size: 0.9rem;
}
.status-icon.completed {
color: var(--vp-c-brand-delta);
}
.status-icon.active {
color: var(--vp-c-brand);
}
.status-icon.pending {
.flow-arrow {
font-size: 1rem;
color: var(--vp-c-text-3);
}
.step-detail {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1.25rem;
border: 1px solid var(--vp-c-divider);
}
.step-detail h4 {
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
color: var(--vp-c-brand);
}
.step-detail p {
margin: 0 0 1rem 0;
font-size: 0.95rem;
color: var(--vp-c-text-2);
line-height: 1.6;
}
.detail-analogy {
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 0.75rem;
border-left: 3px solid var(--vp-c-brand);
}
.analogy-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
margin-bottom: 0.25rem;
}
.analogy-content {
font-size: 0.9rem;
color: var(--vp-c-brand-1);
font-family: var(--vp-font-family-mono);
flex-shrink: 0;
}
.info-box {
padding: 1rem 1.25rem;
margin: 0;
background: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-divider);
font-size: 0.9rem;
background: var(--vp-c-bg-alt);
padding: 0.5rem;
border-radius: 6px;
font-size: 0.8rem;
color: var(--vp-c-text-2);
line-height: 1.6;
margin-top: 0.5rem;
}
.info-box p {
margin: 0;
}
@media (max-width: 640px) {
.steps-container {
grid-template-columns: repeat(2, 1fr);
}
.step-card {
min-height: 100px;
padding: 0.75rem;
}
.step-icon {
font-size: 1.5rem;
}
.info-box .icon {
margin-right: 0.25rem;
}
</style>