From 99d608d2a0b0936bd1a4adb062b3f0f718cf355e Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Wed, 11 Feb 2026 09:45:45 +0800
Subject: [PATCH] feat(docs): add interactive cloud services demo components

Add 10 new Vue components for cloud services documentation with interactive demos including:
- Cloud services overview and provider comparison
- Pricing calculator and region latency visualization
- Compute instance configurator and storage type explorer
- API call workflow and deployment process steps
- IAM structure and policy editor demos
---
 .../appendix/cloud-iam/IAMStructure.vue       |  224 ++++
 .../appendix/cloud-iam/PolicyEditorDemo.vue   |  211 ++++
 .../appendix/cloud-services/ApiCallDemo.vue   |  230 ++++
 .../cloud-services/CloudHistoryDemo.vue       |  183 +++
 .../cloud-services/CloudServicesOverview.vue  |  203 ++++
 .../cloud-services/ComputeInstanceDemo.vue    |  206 ++++
 .../cloud-services/DeployWorkflowDemo.vue     |  286 +++++
 .../cloud-services/PricingCalculator.vue      |  223 ++++
 .../cloud-services/ProviderComparison.vue     |  193 ++++
 .../cloud-services/RegionLatencyDemo.vue      |  241 ++++
 .../cloud-services/StorageTypeDemo.vue        |  163 +++
 docs/.vitepress/theme/index.js                |   30 +
 docs/zh-cn/appendix/cloud-services.md         | 1013 +++--------------
 13 files changed, 2529 insertions(+), 877 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue

diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
new file mode 100644
index 0000000..37d1c1b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="iam-structure">
+    <div class="structure-layers">
+      <div 
+        v-for="(layer, index) in layers" 
+        :key="index"
+        class="layer"
+        :class="{ active: selectedLayer === index }"
+        @click="selectLayer(index)"
+      >
+        <div class="layer-icon">{{ layer.icon }}</div>
+        <div class="layer-content">
+          <div class="layer-name">{{ layer.name }}</div>
+          <div class="layer-desc">{{ layer.shortDesc }}</div>
+        </div>
+      </div>
+    </div>
+    
+    <div v-if="selectedLayerData" class="layer-detail">
+      <div class="detail-header">
+        <span class="detail-icon">{{ selectedLayerData.icon }}</span>
+        <span class="detail-name">{{ selectedLayerData.name }}</span>
+      </div>
+      <div class="detail-desc">{{ selectedLayerData.description }}</div>
+      <div class="detail-examples">
+        <div class="example-title">示例：</div>
+        <ul>
+          <li v-for="(example, i) in selectedLayerData.examples" :key="i">
+            {{ example }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedLayer = ref(0)
+
+const layers = [
+  {
+    icon: '👑',
+    name: '根账号',
+    shortDesc: '最高权限',
+    description: '云账号的所有者，拥有全部资源的完全控制权限。建议仅用于初始设置，日常操作使用子账号。',
+    examples: [
+      '创建/删除 IAM 用户',
+      '管理账单和支付方式',
+      '关闭账号',
+      '恢复已删除资源'
+    ]
+  },
+  {
+    icon: '👤',
+    name: 'IAM 用户',
+    shortDesc: '个人身份',
+    description: '为具体人员（如员工）创建的长期凭证，用于日常登录和操作云服务。',
+    examples: [
+      '开发人员账号',
+      '运维人员账号',
+      '只读审计账号',
+      'API 调用账号'
+    ]
+  },
+  {
+    icon: '👥',
+    name: '用户组',
+    shortDesc: '批量管理',
+    description: '将多个用户归为一组，统一分配权限，简化管理。',
+    examples: [
+      '开发组（开发权限）',
+      '运维组（运维权限）',
+      '财务组（账单权限）',
+      '审计组（只读权限）'
+    ]
+  },
+  {
+    icon: '🎭',
+    name: '角色',
+    shortDesc: '临时授权',
+    description: '一种临时身份，可以被切换或赋予其他账号/服务，具有时效性更安全。',
+    examples: [
+      '跨账号访问角色',
+      '服务角色（如 Lambda）',
+      '临时运维角色',
+      '第三方登录角色'
+    ]
+  },
+  {
+    icon: '📋',
+    name: '策略',
+    shortDesc: '权限规则',
+    description: '定义"谁可以对什么资源执行什么操作"的规则文档，以 JSON 格式编写。',
+    examples: [
+      '允许访问 S3 存储桶',
+      '禁止删除 EC2 实例',
+      '只允许查看 RDS',
+      '允许特定时间段访问'
+    ]
+  }
+]
+
+const selectedLayerData = computed(() => layers[selectedLayer.value])
+
+function selectLayer(index) {
+  selectedLayer.value = index
+}
+</script>
+
+<style scoped>
+.iam-structure {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.structure-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.layer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.layer:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.layer.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.layer-icon {
+  font-size: 1.25rem;
+  width: 32px;
+  text-align: center;
+}
+
+.layer-content {
+  flex: 1;
+}
+
+.layer-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.15rem;
+}
+
+.layer-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.layer-detail {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.detail-icon {
+  font-size: 1.25rem;
+}
+
+.detail-name {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.detail-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+  line-height: 1.5;
+}
+
+.detail-examples {
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+}
+
+.example-title {
+  font-weight: 500;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+.detail-examples ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.detail-examples li {
+  margin-bottom: 0.25rem;
+}
+
+.detail-examples li:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
new file mode 100644
index 0000000..dc9d157
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="policy-editor-demo">
+    <div class="editor-layout">
+      <div class="editor-panel">
+        <div class="panel-title">策略编辑器</div>
+        <div class="action-list">
+          <div 
+            v-for="action in actions" 
+            :key="action.id"
+            class="action-item"
+          >
+            <label class="checkbox">
+              <input 
+                type="checkbox" 
+                v-model="selectedActions"
+                :value="action.id"
+              >
+              <span>{{ action.name }}</span>
+            </label>
+            <span class="action-desc">{{ action.desc }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="preview-panel">
+        <div class="panel-title">生成的策略</div>
+        <pre><code>{{ generatedPolicy }}</code></pre>
+      </div>
+    </div>
+    
+    <div class="effect-preview">
+      <div class="effect-title">权限效果预览</div>
+      <div class="effect-list">
+        <div 
+          v-for="effect in effectList" 
+          :key="effect.action"
+          class="effect-item"
+          :class="effect.allowed ? 'allowed' : 'denied'"
+        >
+          <span class="effect-icon">{{ effect.allowed ? '✓' : '✗' }}</span>
+          <span class="effect-text">{{ effect.name }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedActions = ref(['describe', 'start'])
+
+const actions = [
+  { id: 'describe', name: '查看实例', desc: 'DescribeInstances', resource: 'ecs:Describe*' },
+  { id: 'start', name: '启动实例', desc: 'StartInstance', resource: 'ecs:StartInstance' },
+  { id: 'stop', name: '停止实例', desc: 'StopInstance', resource: 'ecs:StopInstance' },
+  { id: 'reboot', name: '重启实例', desc: 'RebootInstance', resource: 'ecs:RebootInstance' },
+  { id: 'create', name: '创建实例', desc: 'CreateInstance', resource: 'ecs:CreateInstance' },
+  { id: 'delete', name: '删除实例', desc: 'DeleteInstance', resource: 'ecs:DeleteInstance' }
+]
+
+const generatedPolicy = computed(() => {
+  const selected = actions.filter(a => selectedActions.value.includes(a.id))
+  const actionList = selected.map(a => a.resource)
+  
+  return JSON.stringify({
+    Version: "1",
+    Statement: [
+      {
+        Effect: "Allow",
+        Action: actionList,
+        Resource: "*"
+      }
+    ]
+  }, null, 2)
+})
+
+const effectList = computed(() => {
+  return actions.map(action => ({
+    name: action.name,
+    action: action.id,
+    allowed: selectedActions.value.includes(action.id)
+  }))
+})
+</script>
+
+<style scoped>
+.policy-editor-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.editor-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.editor-panel,
+.preview-panel {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.checkbox input {
+  cursor: pointer;
+}
+
+.action-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+}
+
+.preview-panel pre {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.preview-panel code {
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-text-1);
+}
+
+.effect-preview {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.effect-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+}
+
+.effect-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.effect-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+.effect-item.allowed {
+  background: rgba(34, 197, 94, 0.1);
+  color: #16a34a;
+}
+
+.effect-item.denied {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+}
+
+.effect-icon {
+  font-weight: 600;
+}
+
+@media (max-width: 640px) {
+  .editor-layout {
+    grid-template-columns: 1fr;
+  }
+  
+  .effect-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
new file mode 100644
index 0000000..3833b91
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="api-call-demo">
+    <div class="flow-steps">
+      <div 
+        v-for="(step, index) in steps" 
+        :key="index"
+        class="step"
+        :class="{ active: currentStep >= index, completed: currentStep > index }"
+      >
+        <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>
+      </div>
+    </div>
+    
+    <div class="action-panel">
+      <button 
+        class="action-btn" 
+        @click="nextStep"
+        :disabled="currentStep >= steps.length"
+      >
+        {{ currentStep >= steps.length ? '已完成' : '下一步' }}
+      </button>
+      <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>
+      <pre><code>{{ steps[currentStep - 1].code }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentStep = ref(0)
+
+const steps = [
+  {
+    title: '获取 AccessKey',
+    desc: '在控制台创建 AccessKey ID 和 Secret',
+    codeTitle: '配置凭证',
+    code: `// 环境变量设置
+export ALIYUN_ACCESS_KEY_ID=your_key_id
+export ALIYUN_ACCESS_KEY_SECRET=your_secret`
+  },
+  {
+    title: '安装 SDK',
+    desc: '安装对应语言的云服务 SDK',
+    codeTitle: '安装依赖',
+    code: `# Python
+pip install alibabacloud-ecs20140526
+
+# Node.js
+npm install @alicloud/ecs20140526`
+  },
+  {
+    title: '编写调用代码',
+    desc: '使用 SDK 调用云服务 API',
+    codeTitle: '调用示例',
+    code: `from alibabacloud_ecs20140526 import models as ecs_models
+
+# 创建客户端
+client = create_client()
+
+# 调用 API
+response = client.describe_instances(
+  ecs_models.DescribeInstancesRequest()
+)
+
+print(response.body)`
+  },
+  {
+    title: '处理响应',
+    desc: '解析 API 返回的数据',
+    codeTitle: '处理结果',
+    code: `// 解析响应
+instances = response.body.instances.instance
+
+for inst in instances:
+    print(f"ID: {inst.instance_id}")
+    print(f"状态: {inst.status}")
+    print(f"IP: {inst.public_ip_address}")`
+  }
+]
+
+function nextStep() {
+  if (currentStep.value < steps.length) {
+    currentStep.value++
+  }
+}
+
+function reset() {
+  currentStep.value = 0
+}
+</script>
+
+<style scoped>
+.api-call-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 6px;
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.step.active {
+  opacity: 1;
+  background: var(--vp-c-bg);
+}
+
+.step.completed {
+  opacity: 0.7;
+}
+
+.step-num {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step.active .step-num {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.step.completed .step-num {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.15rem;
+}
+
+.step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.action-panel {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.action-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 4px;
+  background: var(--vp-c-brand);
+  color: white;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-btn.outline {
+  background: transparent;
+  color: var(--vp-c-brand);
+}
+
+.code-preview {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.code-title {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+pre {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+code {
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-text-1);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
new file mode 100644
index 0000000..2cd9e5c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="cloud-history-demo">
+    <div class="timeline">
+      <div 
+        v-for="(event, index) in events" 
+        :key="index"
+        class="timeline-item"
+        :class="{ active: selectedEvent === index }"
+        @click="selectedEvent = index"
+      >
+        <div class="timeline-dot"></div>
+        <div class="timeline-content">
+          <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 class="detail-impact">
+        <span class="impact-label">影响:</span>
+        <span class="impact-text">{{ selectedEventData.impact }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedEvent = ref(3)
+
+const events = [
+  {
+    year: '1960s',
+    title: '概念萌芽',
+    description: 'J.C.R. Licklider 提出"星际计算机网络"设想，是云计算概念的最早雏形。',
+    impact: '奠定了分布式计算的理论基础'
+  },
+  {
+    year: '1990s',
+    title: '虚拟化技术',
+    description: 'VMware 推出 x86 虚拟化技术，允许在一台物理机上运行多个虚拟机。',
+    impact: '为云计算的资源池化提供了技术基础'
+  },
+  {
+    year: '2006',
+    title: 'AWS 诞生',
+    description: 'Amazon 推出 EC2 和 S3，标志着现代云计算服务的正式诞生。',
+    impact: '开创了公有云服务的商业模式'
+  },
+  {
+    year: '2009',
+    title: '阿里云成立',
+    description: '阿里巴巴成立阿里云，成为中国最早的云计算服务商。',
+    impact: '推动了中国云计算市场的发展'
+  },
+  {
+    year: '2010s',
+    title: '云原生时代',
+    description: 'Docker、Kubernetes 等技术兴起，微服务架构成为主流。',
+    impact: '改变了应用开发和部署的方式'
+  },
+  {
+    year: '2020s',
+    title: 'AI 云时代',
+    description: '大模型和 AI 服务成为云厂商的核心竞争力，Serverless 普及。',
+    impact: '云计算进入智能化新阶段'
+  }
+]
+
+const selectedEventData = computed(() => events[selectedEvent.value])
+</script>
+
+<style scoped>
+.cloud-history-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.timeline {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.timeline-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 80px;
+}
+
+.timeline-item:hover {
+  background: var(--vp-c-bg);
+}
+
+.timeline-item.active {
+  background: var(--vp-c-brand-soft);
+}
+
+.timeline-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  transition: all 0.2s;
+}
+
+.timeline-item.active .timeline-dot {
+  background: var(--vp-c-brand);
+}
+
+.timeline-content {
+  text-align: center;
+}
+
+.timeline-year {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.timeline-title {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.event-detail {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.detail-year {
+  font-size: 0.8rem;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.detail-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.detail-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.detail-impact {
+  font-size: 0.8rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.impact-label {
+  color: var(--vp-c-text-2);
+  margin-right: 0.5rem;
+}
+
+.impact-text {
+  font-weight: 500;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
new file mode 100644
index 0000000..c1a6e3c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="cloud-services-overview">
+    <div class="services-grid">
+      <div 
+        v-for="service in services" 
+        :key="service.id"
+        class="service-card"
+        :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>
+    </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>
+          <span class="value">{{ selectedServiceData.aws }}</span>
+        </div>
+        <div class="compare-item">
+          <span class="label">阿里云:</span>
+          <span class="value">{{ selectedServiceData.aliyun }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedService = ref(null)
+
+const services = [
+  { 
+    id: 'compute', 
+    icon: '⚙️', 
+    name: '计算', 
+    examples: 'EC2 / ECS',
+    description: '提供虚拟服务器和计算能力，是云服务的基础',
+    aws: 'Amazon EC2',
+    aliyun: 'ECS 云服务器'
+  },
+  { 
+    id: 'storage', 
+    icon: '💾', 
+    name: '存储', 
+    examples: 'S3 / OSS',
+    description: '对象存储服务，用于存放图片、文档等文件',
+    aws: 'Amazon S3',
+    aliyun: 'OSS 对象存储'
+  },
+  { 
+    id: 'network', 
+    icon: '🌐', 
+    name: '网络', 
+    examples: 'VPC / 专有网络',
+    description: '构建隔离的虚拟网络环境',
+    aws: 'Amazon VPC',
+    aliyun: '专有网络 VPC'
+  },
+  { 
+    id: 'database', 
+    icon: '🗄️', 
+    name: '数据库', 
+    examples: 'RDS / PolarDB',
+    description: '托管的关系型数据库服务',
+    aws: 'Amazon RDS',
+    aliyun: 'RDS 关系型数据库'
+  },
+  { 
+    id: 'security', 
+    icon: '🔒', 
+    name: '安全', 
+    examples: 'IAM / RAM',
+    description: '身份认证和访问控制服务',
+    aws: 'AWS IAM',
+    aliyun: 'RAM 访问控制'
+  },
+  { 
+    id: 'middleware', 
+    icon: '🔧', 
+    name: '中间件', 
+    examples: 'MQ / RocketMQ',
+    description: '消息队列和缓存服务',
+    aws: 'Amazon MQ',
+    aliyun: 'RocketMQ'
+  }
+]
+
+const selectedServiceData = computed(() => 
+  services.find(s => s.id === selectedService.value)
+)
+
+function selectService(id) {
+  selectedService.value = selectedService.value === id ? null : id
+}
+</script>
+
+<style scoped>
+.cloud-services-overview {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.service-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.service-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.service-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.service-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.service-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+
+.service-examples {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.service-detail {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.detail-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.detail-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+}
+
+.detail-compare {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.compare-item {
+  background: var(--vp-c-bg);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.compare-item .label {
+  color: var(--vp-c-text-2);
+  margin-right: 0.5rem;
+}
+
+.compare-item .value {
+  font-weight: 500;
+}
+
+@media (max-width: 640px) {
+  .services-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .detail-compare {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
new file mode 100644
index 0000000..8f2d003
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="compute-instance-demo">
+    <div class="config-panel">
+      <div class="config-row">
+        <label>地域</label>
+        <div class="options">
+          <button 
+            v-for="region in regions" 
+            :key="region.id"
+            :class="{ active: config.region === region.id }"
+            @click="config.region = region.id"
+          >
+            {{ region.name }}
+          </button>
+        </div>
+      </div>
+      <div class="config-row">
+        <label>规格</label>
+        <div class="options">
+          <button 
+            v-for="spec in specs" 
+            :key="spec.id"
+            :class="{ active: config.spec === spec.id }"
+            @click="config.spec = spec.id"
+          >
+            {{ spec.name }}
+          </button>
+        </div>
+      </div>
+      <div class="config-row">
+        <label>镜像</label>
+        <div class="options">
+          <button 
+            v-for="image in images" 
+            :key="image.id"
+            :class="{ active: config.image === image.id }"
+            @click="config.image = image.id"
+          >
+            {{ image.name }}
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="result-panel">
+      <div class="result-title">配置结果</div>
+      <div class="result-grid">
+        <div class="result-item">
+          <span class="label">配置</span>
+          <span class="value">{{ selectedSpec?.name }} / {{ selectedImage?.name }}</span>
+        </div>
+        <div class="result-item">
+          <span class="label">预估价格</span>
+          <span class="value price">¥{{ price }}/月</span>
+        </div>
+        <div class="result-item">
+          <span class="label">适用场景</span>
+          <span class="value">{{ selectedSpec?.scene }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const config = ref({
+  region: 'hangzhou',
+  spec: 'medium',
+  image: 'ubuntu'
+})
+
+const regions = [
+  { id: 'hangzhou', name: '华东-杭州' },
+  { id: 'beijing', name: '华北-北京' },
+  { id: 'shenzhen', name: '华南-深圳' },
+  { id: 'singapore', name: '亚太-新加坡' }
+]
+
+const specs = [
+  { id: 'small', name: '1核2G', scene: '测试环境、个人博客', price: 89 },
+  { id: 'medium', name: '2核4G', scene: '中小型应用、开发环境', price: 199 },
+  { id: 'large', name: '4核8G', scene: '生产环境、中型网站', price: 399 },
+  { id: 'xlarge', name: '8核16G', scene: '大型应用、数据库', price: 799 }
+]
+
+const images = [
+  { id: 'ubuntu', name: 'Ubuntu 22.04' },
+  { id: 'centos', name: 'CentOS 7.9' },
+  { id: 'windows', name: 'Windows Server' },
+  { id: 'alpine', name: 'Alpine Linux' }
+]
+
+const selectedSpec = computed(() => specs.find(s => s.id === config.value.spec))
+const selectedImage = computed(() => images.find(i => i.id === config.value.image))
+const price = computed(() => selectedSpec.value?.price || 0)
+</script>
+
+<style scoped>
+.compute-instance-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.config-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.config-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.config-row label {
+  width: 50px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.options button {
+  padding: 0.35rem 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.options button:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.options button.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+
+.result-title {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.result-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.result-item {
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.result-item .label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.result-item .value {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.result-item .price {
+  color: var(--vp-c-brand);
+}
+
+@media (max-width: 640px) {
+  .result-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .config-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .config-row label {
+    width: auto;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
new file mode 100644
index 0000000..b36aea9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="deploy-workflow-demo">
+    <div class="workflow-steps">
+      <div
+        v-for="(step, index) in steps"
+        :key="index"
+        class="step-card"
+        :class="{ active: currentStep === index, completed: currentStep > index }"
+        @click="currentStep = index"
+      >
+        <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>
+      </div>
+    </div>
+
+    <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-tasks">
+          <div class="tasks-title">具体操作：</div>
+          <ul>
+            <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>
+      <button class="action-btn primary" @click="nextStep" :disabled="currentStep >= steps.length - 1">
+        {{ currentStep >= steps.length - 1 ? '完成' : '下一步' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentStep = ref(0)
+
+const steps = [
+  {
+    name: '准备代码',
+    time: '5分钟',
+    description: '将网站代码打包成可部署的格式',
+    tasks: [
+      '整理 HTML/CSS/JS 文件',
+      '压缩图片和静态资源',
+      '检查文件路径是否正确'
+    ]
+  },
+  {
+    name: '创建存储桶',
+    time: '2分钟',
+    description: '在对象存储服务中创建存储空间',
+    tasks: [
+      '登录云控制台',
+      '进入对象存储 OSS/S3',
+      '点击"创建 Bucket"',
+      '设置 Bucket 名称和地域'
+    ]
+  },
+  {
+    name: '上传文件',
+    time: '3分钟',
+    description: '将网站文件上传到存储桶',
+    tasks: [
+      '进入 Bucket 管理页面',
+      '点击"上传文件"',
+      '选择本地网站文件',
+      '等待上传完成'
+    ]
+  },
+  {
+    name: '配置 CDN',
+    time: '5分钟',
+    description: '配置内容分发网络加速访问',
+    tasks: [
+      '进入 CDN 控制台',
+      '添加加速域名',
+      '配置源站为存储桶',
+      '等待 CDN 部署完成'
+    ]
+  },
+  {
+    name: '域名绑定',
+    time: '10分钟',
+    description: '将自定义域名绑定到 CDN',
+    tasks: [
+      '添加域名解析记录',
+      '配置 CNAME 到 CDN',
+      '申请 SSL 证书',
+      '测试 HTTPS 访问'
+    ]
+  }
+]
+
+const currentStepData = computed(() => steps[currentStep.value])
+
+function nextStep() {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+function prevStep() {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+</script>
+
+<style scoped>
+.deploy-workflow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.workflow-steps {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+}
+
+.step-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 120px;
+}
+
+.step-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.step-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.step-card.completed {
+  border-color: #22c55e;
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-card.active .step-number {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.step-card.completed .step-number {
+  background: #22c55e;
+  color: white;
+}
+
+.step-info {
+  flex: 1;
+}
+
+.step-name {
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+.step-time {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.step-detail {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-step {
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.detail-name {
+  font-weight: 600;
+}
+
+.detail-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+}
+
+.tasks-title {
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+}
+
+.detail-tasks ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.detail-tasks li {
+  margin-bottom: 0.2rem;
+}
+
+.workflow-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-btn.primary {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.action-btn.primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue b/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
new file mode 100644
index 0000000..02ed012
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="pricing-calculator">
+    <div class="config-section">
+      <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>
+        </select>
+      </div>
+      <div class="config-row">
+        <span class="label">运行时长</span>
+        <input type="range" v-model.number="config.hours" 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" />
+        <span class="value">{{ config.days }} 天/月</span>
+      </div>
+    </div>
+
+    <div class="result-section">
+      <div class="result-header">月度成本对比</div>
+      <div class="result-cards">
+        <div class="result-card">
+          <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>
+        <div class="result-card">
+          <div class="model">抢占式</div>
+          <div class="price">${{ costs.spot }}/月</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tip-box">
+      <span class="tip-icon">💡</span>
+      <span class="tip-text">{{ recommendation }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const config = ref({
+  spec: 'medium',
+  hours: 12,
+  days: 22
+})
+
+const specPrices = {
+  small: { ondemand: 0.08, reserved: 45, spot: 0.024 },
+  medium: { ondemand: 0.16, reserved: 89, spot: 0.048 },
+  large: { ondemand: 0.32, reserved: 179, spot: 0.096 }
+}
+
+const costs = computed(() => {
+  const price = specPrices[config.value.spec]
+  const monthlyHours = config.value.hours * config.value.days
+
+  return {
+    ondemand: Math.round(price.ondemand * monthlyHours),
+    reserved: price.reserved,
+    spot: Math.round(price.spot * monthlyHours)
+  }
+})
+
+const savings = computed(() => {
+  const save = costs.value.ondemand - costs.value.reserved
+  return Math.round((save / costs.value.ondemand) * 100)
+})
+
+const recommendation = computed(() => {
+  if (config.value.days < 15) {
+    return '当前使用频率较低，建议选择按需付费'
+  } else if (savings.value > 30) {
+    return `当前使用负载稳定，切换预留实例可省 ${savings.value}%`
+  } else {
+    return '根据当前配置，预留实例更具成本优势'
+  }
+})
+</script>
+
+<style scoped>
+.pricing-calculator {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+  background: var(--vp-c-bg-soft);
+}
+
+.config-section {
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.config-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.config-row:last-child {
+  margin-bottom: 0;
+}
+
+.config-row .label {
+  width: 70px;
+  color: var(--vp-c-text-2);
+  flex-shrink: 0;
+}
+
+.config-row select {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  font-size: 0.85rem;
+}
+
+.config-row input[type="range"] {
+  flex: 1;
+  min-width: 80px;
+}
+
+.config-row .value {
+  width: 85px;
+  text-align: right;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.result-header {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.result-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.result-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.result-card.recommended {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.result-card .model {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+}
+
+.result-card .price {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.result-card .saving {
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+  margin-top: 0.25rem;
+}
+
+.tip-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+.tip-icon {
+  font-size: 1rem;
+}
+
+.tip-text {
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 640px) {
+  .result-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .config-row {
+    flex-wrap: wrap;
+  }
+
+  .config-row .label {
+    width: 100%;
+  }
+
+  .config-row .value {
+    width: auto;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
new file mode 100644
index 0000000..9839e22
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
@@ -0,0 +1,193 @@
+<template>
+  <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>
+      <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 }">
+          {{ row.aws }}
+        </div>
+        <div class="col provider" :class="{ highlight: row.aliyunHighlight }">
+          {{ row.aliyun }}
+        </div>
+        <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-items">
+        <div class="guide-item">
+          <span class="scenario">出海业务</span>
+          <span class="recommend">→ AWS</span>
+        </div>
+        <div class="guide-item">
+          <span class="scenario">国内电商</span>
+          <span class="recommend">→ 阿里云</span>
+        </div>
+        <div class="guide-item">
+          <span class="scenario">游戏/社交</span>
+          <span class="recommend">→ 腾讯云</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const compareData = [
+  {
+    feature: '全球覆盖',
+    aws: '⭐⭐⭐⭐⭐',
+    aliyun: '⭐⭐⭐',
+    tencent: '⭐⭐⭐',
+    awsHighlight: true
+  },
+  {
+    feature: '国内速度',
+    aws: '⭐⭐⭐',
+    aliyun: '⭐⭐⭐⭐⭐',
+    tencent: '⭐⭐⭐⭐⭐',
+    aliyunHighlight: true,
+    tencentHighlight: true
+  },
+  {
+    feature: '文档中文',
+    aws: '⭐⭐⭐',
+    aliyun: '⭐⭐⭐⭐⭐',
+    tencent: '⭐⭐⭐⭐⭐',
+    aliyunHighlight: true,
+    tencentHighlight: true
+  },
+  {
+    feature: '价格优势',
+    aws: '⭐⭐⭐',
+    aliyun: '⭐⭐⭐⭐',
+    tencent: '⭐⭐⭐⭐⭐',
+    tencentHighlight: true
+  },
+  {
+    feature: '生态丰富',
+    aws: '⭐⭐⭐⭐⭐',
+    aliyun: '⭐⭐⭐⭐',
+    tencent: '⭐⭐⭐⭐',
+    awsHighlight: true
+  }
+]
+</script>
+
+<style scoped>
+.provider-comparison {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.compare-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 100px 1fr 1fr 1fr;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.table-header {
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.table-row {
+  font-size: 0.85rem;
+  padding: 0.4rem 0;
+}
+
+.col {
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+}
+
+.col.feature {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.col.provider {
+  text-align: center;
+  background: var(--vp-c-bg);
+}
+
+.col.provider.highlight {
+  background: var(--vp-c-brand-soft);
+  font-weight: 500;
+}
+
+.selection-guide {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.guide-title {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.guide-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.guide-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--vp-c-bg);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.guide-item .scenario {
+  color: var(--vp-c-text-2);
+}
+
+.guide-item .recommend {
+  font-weight: 500;
+  color: var(--vp-c-brand);
+}
+
+@media (max-width: 640px) {
+  .table-header,
+  .table-row {
+    grid-template-columns: 80px 1fr 1fr 1fr;
+    font-size: 0.75rem;
+  }
+  
+  .col {
+    padding: 0.3rem 0.4rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
new file mode 100644
index 0000000..ef1f24c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="region-latency-demo">
+    <div class="user-location">
+      <label>你的位置:</label>
+      <div class="location-options">
+        <button
+          v-for="loc in locations"
+          :key="loc.id"
+          :class="{ active: userLocation === loc.id }"
+          @click="userLocation = loc.id"
+        >
+          {{ loc.name }}
+        </button>
+      </div>
+    </div>
+
+    <div class="latency-table">
+      <div class="table-header">
+        <div class="col region">云厂商地域</div>
+        <div class="col latency">延迟</div>
+        <div class="col rating">推荐度</div>
+      </div>
+      <div
+        v-for="item in latencyData"
+        :key="item.region"
+        class="table-row"
+        :class="{ best: item.rating === '⭐⭐⭐' }"
+      >
+        <div class="col region">{{ item.region }}</div>
+        <div class="col latency">
+          <div class="latency-bar">
+            <div class="bar-fill" :style="{ width: item.percent + '%' }"></div>
+            <span class="latency-value">{{ item.latency }}ms</span>
+          </div>
+        </div>
+        <div class="col rating">{{ item.rating }}</div>
+      </div>
+    </div>
+
+    <div class="recommendation">
+      <span class="rec-icon">💡</span>
+      <span class="rec-text">{{ recommendation }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const userLocation = ref('beijing')
+
+const locations = [
+  { id: 'beijing', name: '北京' },
+  { id: 'shanghai', name: '上海' },
+  { id: 'guangzhou', name: '广州' },
+  { id: 'chengdu', name: '成都' }
+]
+
+const latencyMap = {
+  beijing: [
+    { region: '华北-北京', latency: 15, rating: '⭐⭐⭐' },
+    { region: '华东-上海', latency: 35, rating: '⭐⭐' },
+    { region: '华南-广州', latency: 55, rating: '⭐' },
+    { region: '亚太-新加坡', latency: 85, rating: '⭐' }
+  ],
+  shanghai: [
+    { region: '华东-上海', latency: 12, rating: '⭐⭐⭐' },
+    { region: '华北-北京', latency: 38, rating: '⭐⭐' },
+    { region: '华南-广州', latency: 45, rating: '⭐⭐' },
+    { region: '亚太-新加坡', latency: 75, rating: '⭐' }
+  ],
+  guangzhou: [
+    { region: '华南-广州', latency: 10, rating: '⭐⭐⭐' },
+    { region: '华东-上海', latency: 42, rating: '⭐⭐' },
+    { region: '华北-北京', latency: 58, rating: '⭐' },
+    { region: '亚太-新加坡', latency: 45, rating: '⭐⭐' }
+  ],
+  chengdu: [
+    { region: '华东-上海', latency: 40, rating: '⭐⭐' },
+    { region: '华北-北京', latency: 48, rating: '⭐⭐' },
+    { region: '华南-广州', latency: 52, rating: '⭐' },
+    { region: '西南-成都', latency: 8, rating: '⭐⭐⭐' }
+  ]
+}
+
+const latencyData = computed(() => {
+  const data = latencyMap[userLocation.value] || latencyMap.beijing
+  const maxLatency = Math.max(...data.map(d => d.latency))
+  return data.map(d => ({
+    ...d,
+    percent: (d.latency / maxLatency) * 100
+  }))
+})
+
+const recommendation = computed(() => {
+  const best = latencyData.value.find(d => d.rating === '⭐⭐⭐')
+  return `建议选择 ${best?.region}，延迟最低 (${best?.latency}ms)`
+})
+</script>
+
+<style scoped>
+.region-latency-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.user-location {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.user-location label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.location-options {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.location-options button {
+  padding: 0.35rem 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.location-options button:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.location-options button.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+
+.latency-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 100px 1fr 60px;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+}
+
+.table-header {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg);
+}
+
+.table-row {
+  font-size: 0.85rem;
+  background: var(--vp-c-bg);
+}
+
+.table-row.best {
+  background: var(--vp-c-brand-soft);
+}
+
+.col.region {
+  font-weight: 500;
+}
+
+.latency-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 10px;
+  overflow: hidden;
+  padding: 2px;
+}
+
+.bar-fill {
+  height: 100%;
+  background: var(--vp-c-brand);
+  border-radius: 8px;
+  transition: width 0.3s;
+}
+
+.latency-value {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  min-width: 45px;
+}
+
+.recommendation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+.rec-icon {
+  font-size: 1rem;
+}
+
+.rec-text {
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 640px) {
+  .user-location {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .table-header,
+  .table-row {
+    grid-template-columns: 80px 1fr 50px;
+    font-size: 0.75rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue
new file mode 100644
index 0000000..873b3f8
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="storage-type-demo">
+    <div class="type-cards">
+      <div 
+        v-for="type in storageTypes" 
+        :key="type.id"
+        class="type-card"
+        :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>
+    </div>
+    
+    <div v-if="selectedTypeData" class="type-detail">
+      <div class="detail-row">
+        <span class="label">特点</span>
+        <span class="value">{{ selectedTypeData.features }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="label">适用场景</span>
+        <span class="value">{{ selectedTypeData.scenarios }}</span>
+      </div>
+      <div class="detail-row">
+        <span class="label">计费方式</span>
+        <span class="value">{{ selectedTypeData.pricing }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedType = ref('object')
+
+const storageTypes = [
+  {
+    id: 'object',
+    icon: '📦',
+    name: '对象存储',
+    example: 'S3 / OSS',
+    features: '海量存储、高可靠、低成本',
+    scenarios: '图片、视频、备份、静态网站',
+    pricing: '按存储容量 + 请求次数'
+  },
+  {
+    id: 'block',
+    icon: '💽',
+    name: '块存储',
+    example: 'EBS / 云盘',
+    features: '低延迟、高性能、可挂载',
+    scenarios: '数据库、文件系统、操作系统',
+    pricing: '按容量 + IOPS'
+  },
+  {
+    id: 'file',
+    icon: '📁',
+    name: '文件存储',
+    example: 'EFS / NAS',
+    features: '共享访问、POSIX 兼容',
+    scenarios: '共享文件、内容管理、HPC',
+    pricing: '按容量 + 吞吐'
+  },
+  {
+    id: 'archive',
+    icon: '🗃️',
+    name: '归档存储',
+    example: 'Glacier / 归档',
+    features: '极低成本、取回慢',
+    scenarios: '冷数据、合规备份、长期归档',
+    pricing: '按容量，取回额外收费'
+  }
+]
+
+const selectedTypeData = computed(() => 
+  storageTypes.find(t => t.id === selectedType.value)
+)
+</script>
+
+<style scoped>
+.storage-type-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.type-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.type-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.type-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.type-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.type-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.type-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.15rem;
+}
+
+.type-example {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.type-detail {
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-row {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.85rem;
+}
+
+.detail-row .label {
+  color: var(--vp-c-text-2);
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.detail-row .value {
+  flex: 1;
+}
+
+@media (max-width: 640px) {
+  .type-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 5bbe248..daaf8ac 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -350,6 +350,21 @@ import ServiceSelectionDemo from './components/appendix/cloud-services/ServiceSe
 import DatabaseServicesDemo from './components/appendix/cloud-services/DatabaseServicesDemo.vue'
 import K8sServicesDemo from './components/appendix/cloud-services/K8sServicesDemo.vue'
 
+// Cloud Services Simple Components (new)
+import CloudServicesOverview from './components/appendix/cloud-services/CloudServicesOverview.vue'
+import ProviderComparison from './components/appendix/cloud-services/ProviderComparison.vue'
+import PricingCalculator from './components/appendix/cloud-services/PricingCalculator.vue'
+import ComputeInstanceDemo from './components/appendix/cloud-services/ComputeInstanceDemo.vue'
+import StorageTypeDemo from './components/appendix/cloud-services/StorageTypeDemo.vue'
+import ApiCallDemo from './components/appendix/cloud-services/ApiCallDemo.vue'
+import CloudHistoryDemo from './components/appendix/cloud-services/CloudHistoryDemo.vue'
+import DeployWorkflowDemo from './components/appendix/cloud-services/DeployWorkflowDemo.vue'
+import RegionLatencyDemo from './components/appendix/cloud-services/RegionLatencyDemo.vue'
+
+// Cloud IAM Simple Components (new)
+import IAMStructure from './components/appendix/cloud-iam/IAMStructure.vue'
+import PolicyEditorDemo from './components/appendix/cloud-iam/PolicyEditorDemo.vue'
+
 // Gateway Proxy Components
 import ReverseProxyDemo from './components/appendix/gateway-proxy/ReverseProxyDemo.vue'
 import ApiGatewayDemo from './components/appendix/gateway-proxy/ApiGatewayDemo.vue'
@@ -784,6 +799,21 @@ export default {
     app.component('DatabaseServicesDemo', DatabaseServicesDemo)
     app.component('K8sServicesDemo', K8sServicesDemo)
 
+    // Cloud Services Simple Components Registration (new)
+    app.component('CloudServicesOverview', CloudServicesOverview)
+    app.component('ProviderComparison', ProviderComparison)
+    app.component('PricingCalculator', PricingCalculator)
+    app.component('ComputeInstanceDemo', ComputeInstanceDemo)
+    app.component('StorageTypeDemo', StorageTypeDemo)
+    app.component('ApiCallDemo', ApiCallDemo)
+    app.component('CloudHistoryDemo', CloudHistoryDemo)
+    app.component('DeployWorkflowDemo', DeployWorkflowDemo)
+    app.component('RegionLatencyDemo', RegionLatencyDemo)
+
+    // Cloud IAM Simple Components Registration (new)
+    app.component('IAMStructure', IAMStructure)
+    app.component('PolicyEditorDemo', PolicyEditorDemo)
+
     // Cloud IAM Components Registration
     app.component('IamRamComparisonDemo', IamRamComparisonDemo)
     app.component('IdentityProviderDemo', IdentityProviderDemo)
diff --git a/docs/zh-cn/appendix/cloud-services.md b/docs/zh-cn/appendix/cloud-services.md
index fead9bd..5bdd7b1 100644
--- a/docs/zh-cn/appendix/cloud-services.md
+++ b/docs/zh-cn/appendix/cloud-services.md
@@ -1,11 +1,11 @@
-# 云服务厂商入门指南
+# 云服务厂商入门指南 (Cloud Services Guide)
 
-> 💡 **学习指南**：云服务厂商不是"买服务器的网站"，而是"像水电公司一样提供计算能力的基础设施"。本章节会围绕一个核心问题展开：**从零开始，如何理解并使用云服务？** 我们会用真实场景、生动类比和实战步骤，帮你建立云服务的完整认知地图。
+> **学习指南**：云服务厂商不是"买服务器的网站"，而是"像水电公司一样提供计算能力的基础设施"。本章节会围绕一个核心问题展开：**从零开始，如何理解并使用云服务？** 我们会用真实场景、生动类比和实战步骤，帮你建立云服务的完整认知地图。
 
 在开始之前，建议你先了解：
 
-- **基础网络概念**：如果你还不熟悉 IP 地址、端口、域名等概念，建议先阅读 [网络基础知识](./web-basics.md)
-- **API 是什么**：如果你对 API 还不了解，可以先看 [API 入门](./api-intro.md)
+- **基础网络概念**：如果你还不熟悉 IP 地址、端口、域名等概念，建议先阅读 [网络基础知识](/zh-cn/appendix/computer-networks)
+- **API 是什么**：如果你对 API 还不了解，可以先看 [API 入门](/zh-cn/appendix/api-intro)
 
 ---
 
@@ -15,990 +15,249 @@
 
 小明在 2010 年创业，想做一个网站。他经历了什么？
 
-1. **买服务器**：花 2 万块钱买了一台戴尔服务器
-2. **找机房**：联系 IDC 机房，每个月付 3000 元托管费
-3. **装系统**：自己安装 Linux、配置环境
-4. **担心硬件**：硬盘坏了要自己换，机器过热要自己解决
-5. **流量暴增**：用户突然多了，系统撑不住了，又要买新服务器
+他先花 2 万块钱买了一台戴尔服务器，然后联系 IDC 机房，每个月付 3000 元托管费。接着自己安装 Linux、配置环境，还要担心硬件问题——硬盘坏了要自己换，机器过热要自己解决。最痛苦的是，当用户突然多了，系统撑不住了，他又要买新服务器。一年后，小明花了 5 万，服务器利用率却只有 10%。
 
-一年后，小明花了 5 万，服务器利用率却只有 10%。
+而小红的公司在 2024 年创业，她是怎么做的？
 
----
-
-小红的公司在 2024 年创业，她是怎么做的？
-
-1. **打开云服务商网站**：注册账号
-2. **点几下鼠标**：创建一台云服务器（2 分钟完成）
-3. **按量付费**：用多少付多少，不用不花钱
-4. **自动扩容**：流量大了，点一下升级配置
-5. **全球部署**：想开美国分部？换个地域就行
-
-一个月后，小红花了 500 元，服务器利用率 80%。
+她打开云服务商网站，注册账号，点几下鼠标就创建了一台云服务器，2 分钟完成。用多少付多少，不用不花钱。流量大了，点一下升级配置。想开美国分部？换个地域就行。一个月后，小红花了 500 元，服务器利用率 80%。
 
 **直觉上，我们会以为是："云服务就是租服务器"。**
 
 但云服务的本质远不止于此——它是一场**计算能力的革命**。
 
-**从传统托管到云服务的演变**：
-
-> 过去：买服务器 → 找机房 → 装系统 → 担心硬件 → 流量暴增时束手无策
->
-> 现在：注册账号 → 点几下鼠标 → 按需付费 → 自动扩容 → 全球部署
+过去，企业要经历买服务器、找机房、装系统、担心硬件、流量暴增时束手无策的漫长过程。现在，只需要注册账号、点几下鼠标、按需付费、自动扩容、全球部署。这种转变，就像从自家挖井取水，变成了打开水龙头就有自来水。
 
 ---
 
-## 1. 什么是云服务厂商？（概念篇）
+## 1. 什么是云服务厂商？
 
-### 1.1 一句话定义
+### 1.1 像水电公司一样的计算服务
 
-> 云服务厂商，就是**把计算能力、存储能力、网络能力包装成标准化的服务**，像自来水公司提供水、电力公司提供电一样，通过互联网提供给用户使用的公司。
+云服务厂商的本质，是**把计算能力、存储能力、网络能力包装成标准化的服务**，像自来水公司提供水、电力公司提供电一样，通过互联网提供给用户使用。
 
-**关键特点**：
-- ✅ **按需使用**：用多少买多少，不用不花钱
-- ✅ **随时扩容**：需要更多资源？点一下就行
-- ✅ **按秒计费**：有些服务甚至按秒计费，极其灵活
-- ✅ **全球覆盖**：在几十个国家都有数据中心
-- ✅ **自助服务**：24 小时都能操作，不需要人工审批
+这种模式的聪明之处在于**按需使用**。你不需要提前购买大量硬件，只需要根据实际使用量付费。需要更多资源？点一下就行。有些服务甚至按秒计费，极其灵活。而且云服务厂商在几十个国家都有数据中心，你可以在全球范围内部署应用，所有操作都是自助服务，24 小时都能进行，不需要人工审批。
 
-### 1.2 云服务 VS 传统托管
+### 1.2 云服务与传统托管的区别
 
-| 对比维度 | 传统 IDC 托管 | 云服务 |
-|---------|-------------|--------|
-| **启动时间** | 几天到几周（买硬件、上架） | 几分钟（点几下鼠标） |
-| **成本模式** | 固定成本（一次性买服务器） | 可变成本（按使用量付费） |
-| **扩容难度** | 需要买新服务器、上架、配置 | 点一下升级配置 |
-| **维护责任** | 自己换硬盘、修网络 | 厂商全管，你只管用 |
-| **地理覆盖** | 只能在一个地方 | 全球几十个地域 |
-| **技术门槛** | 需要懂硬件、网络、运维 | 开发者就能用 |
+传统 IDC 托管就像自己买发电机发电。你需要先买硬件（服务器），然后找地方放（机房托管），还要自己维护（装系统、修硬件）。如果电力不够用了，你得再买一台发电机。这个过程可能需要几天到几周，成本是固定的，不管用不用都要付钱。
 
-### 1.3 云服务的"三巨头"分类
+云服务则像接入电网。你不需要买发电机，只需要拉一根电线（注册账号），然后按用电量付费。需要更多电力？换个更大功率的套餐就行，几分钟搞定。这种模式下，成本是可变的，用多少付多少，而且云厂商负责所有硬件维护，你只需要关注自己的业务。
 
-就像餐厅有不同的经营模式，云服务也有三种：
+### 1.3 公有云、私有云与混合云
 
-| 类型 | 特点 | 典型代表 | 适用场景 |
-|------|------|---------|---------|
-| **公有云** | 谁都能用，资源共享 | AWS、阿里云、Azure | 绝大多数企业和个人 |
-| **私有云** | 自己搭，独享资源 | OpenStack、VMware | 大型企业、政府、银行 |
-| **混合云** | 公有 + 私有结合 | 各厂商都有解决方案 | 既需要合规又需要弹性的场景 |
+就像餐厅有不同的经营模式，云服务也有三种类型。
 
-👉 **本书重点讲公有云**，因为它最常用、最适合学习。
+**公有云**就像公共餐厅，谁都能用，资源共享。AWS、阿里云、Azure 都是公有云，适合绝大多数企业和个人。这是本书的重点，因为它最常用、最适合学习。
+
+**私有云**就像私人厨房，自己搭建，独享资源。OpenStack、VMware 是典型代表，适合大型企业、政府、银行这些对数据安全要求极高的场景。
+
+**混合云**则是两者结合，一部分业务用公有云，一部分用私有云。各厂商都有解决方案，适合既需要合规又需要弹性的场景。
+
+👇 **动手点点看**：
+点击下方的服务卡片，了解云服务的六大核心类别。
+
+<CloudServicesOverview />
 
 ---
 
-## 2. 著名的云服务厂商有哪些？（格局篇）
+## 2. 著名的云服务厂商有哪些？
 
-### 2.1 国际三巨头（AWS、Azure、Google Cloud）
+### 2.1 国际三巨头：AWS、Azure、Google Cloud
 
-**国际三巨头对比**：
+在全球云服务市场，有三家厂商占据了主导地位。
 
-| 特性 | AWS | Azure | Google Cloud |
-|------|-----|-------|--------------|
-| **市场份额** | 32% (第一) | 23% (第二) | 10% (第三) |
-| **服务种类** | 200+ (最全) | 100+ | 100+ |
-| **技术优势** | 成熟稳定 | 企业集成 | Kubernetes、AI |
-| **价格** | 偏高 | 中等 | 相对便宜 |
-| **适合场景** | 出海、初创 | 传统企业 | 容器化、AI |
+**AWS（Amazon Web Services）** 是亚马逊 2006 年推出的云服务，全球市场份额第一，约 32%。它就像云服务界的"百货商店"，服务种类最全，有 200 多种服务，功能最成熟稳定，文档和社区资源也最丰富。价格虽然偏高，但性价比很好，特别适合出海企业、初创公司和大型互联网公司。
 
-#### **AWS（Amazon Web Services）**
+**Microsoft Azure** 是微软 2010 年推出的云服务，全球市场份额第二，约 23%。它最大的优势是与 Windows、Office 生态深度集成，企业级客户资源丰富，混合云能力强，对 .NET 开发者特别友好。如果你的公司已经在用微软技术栈，Azure 是自然而然的选择。
 
-- **出身**：亚马逊 2006 年推出的云服务
-- **地位**：全球市场份额第一（约 32%）
-- **特点**：
-  - 服务种类最全（200+ 种服务）
-  - 功能最成熟稳定
-  - 文档和社区资源丰富
-  - 价格偏高，但性价比好
-- **适合**：出海企业、初创公司、大型互联网公司
+**Google Cloud Platform (GCP)** 是谷歌 2011 年推出的云服务，全球市场份额第三，约 10%。它在 Kubernetes、数据分析、AI 领域领先，技术创新能力强，价格相对便宜。但市场份额较小，生态不如前两家完善，适合技术驱动型公司、容器化应用和 AI 项目。
 
-#### **Microsoft Azure**
+### 2.2 国内三巨头：阿里云、腾讯云、华为云
 
-- **出身**：微软 2010 年推出的云服务
-- **地位**：全球市场份额第二（约 23%）
-- **特点**：
-  - 与 Windows、Office 生态深度集成
-  - 企业级客户资源丰富
-  - 混合云能力强
-  - 对 .NET 开发者友好
-- **适合**：传统企业、微软技术栈公司
+在中国云服务市场，同样有三家主要厂商。
 
-#### **Google Cloud Platform (GCP)**
+**阿里云** 是阿里巴巴 2009 年成立的云计算部门，中国市场份额第一，约 40%。作为国内最早、最成熟的云服务商，阿里云服务种类齐全，电商、双十一技术积累深厚。虽然价格相对较高，但稳定性和功能完整性都是一流的，特别适合国内企业和电商相关项目。
 
-- **出身**：谷歌 2011 年推出的云服务
-- **地位**：全球市场份额第三（约 10%）
-- **特点**：
-  - 在 Kubernetes、数据分析、AI 领域领先
-  - 技术创新能力强
-  - 价格相对便宜
-  - 市场份额较小，生态不如前两家
-- **适合**：技术驱动型公司、容器化应用、AI 项目
+**腾讯云** 是腾讯 2013 年成立的云服务部门，中国市场份额第二，约 15%。它在游戏、音视频能力强，与微信、QQ 生态结合好，价格相对便宜，近几年发展迅速。如果你做游戏、社交或直播类项目，腾讯云是不错的选择。
 
-### 2.2 国内三巨头（阿里云、腾讯云、华为云）
+**华为云** 是华为 2015 年成立的云服务部门，中国市场份额第三，约 10%。它硬件技术积累强，政府和企业客户资源丰富，安全合规能力强，AI 芯片（昇腾）有特色。适合政府项目、大型国企和制造业。
 
-#### **阿里云**
+### 2.3 如何选择云服务商？
 
-- **出身**：阿里巴巴 2009 年成立的云计算部门
-- **地位**：中国市场份额第一（约 40%）
-- **特点**：
-  - 国内最早、最成熟
-  - 服务种类齐全
-  - 电商、双十一技术积累深厚
-  - 价格相对较高
-- **适合**：国内企业、电商相关项目
+选择云服务商就像选择租房，要考虑位置、价格、配套设施等多个因素。
 
-#### **腾讯云**
+**首先看目标市场**。你的用户主要在哪里？如果用户在中国，选阿里云或腾讯云；如果用户在海外，选 AWS 或 Azure；如果是全球业务，选有多地域覆盖的厂商。
 
-- **出身**：腾讯 2013 年成立的云服务部门
-- **地位**：中国市场份额第二（约 15%）
-- **特点**：
-  - 游戏、音视频能力强
-  - 与微信、QQ 生态结合好
-  - 价格相对便宜
-  - 近几年发展迅速
-- **适合**：游戏、社交、直播类项目
+**其次看技术栈**。你用的是什么技术？如果用微软技术，选 Azure；如果用 Kubernetes、大数据，选 Google Cloud；如果是通用场景，AWS 是个稳妥的选择。
 
-#### **华为云**
+**再看成本**。小项目试水可以选便宜的，比如腾讯云或 UCloud；大规模生产则要看总体成本，AWS 长期可能更省钱。
 
-- **出身**：华为 2015 年成立的云服务部门
-- **地位**：中国市场份额第三（约 10%）
-- **特点**：
-  - 硬件技术积累强
-  - 政府和企业客户资源丰富
-  - 安全合规能力强
-  - AI 芯片（昇腾）有特色
-- **适合**：政府项目、大型国企、制造业
+**最后看生态**。如果你已经在用其他服务，比如 GitHub、Office 365，选同生态的厂商会更方便。
 
-### 2.3 其他值得关注的厂商
-
-| 厂商 | 特色 | 适合场景 |
-|------|------|---------|
-| **百度智能云** | AI 能力强（文心一言） | AI 应用、自动驾驶 |
-| **字节火山引擎** | 视频云、推荐算法 | 短视频、直播 |
-| **京东云** | 电商、物流技术 | 供应链相关项目 |
-| **天翼云 / 移动云** | 运营商背景 | 政府项目、合规要求高 |
-| **UCloud / 青云** | 中立云厂商 | 不想绑定大厂的创业公司 |
-
-### 2.4 怎么选云服务商？
-
-**选型决策流程**：
-
-```
-问题1：你的用户主要在哪里？
-├─ 中国 → 阿里云 / 腾讯云
-└─ 海外 → AWS / Azure
-
-问题2：你的技术栈是什么？
-├─ .NET → Azure
-├─ Kubernetes / 大数据 → Google Cloud
-└─ 通用 → AWS
-
-问题3：你的项目阶段？
-├─ 测试 / 试水 → 按需付费
-└─ 生产环境 → 包年包月（省 30-60%）
-```
-
-**选型原则**：
-
-1. **看目标市场**
-   - 用户在中国 → 选阿里云、腾讯云
-   - 用户在海外 → 选 AWS、Azure
-   - 全球业务 → 选有多地域的厂商
-
-2. **看技术栈**
-   - 用微软技术 → 选 Azure
-   - 用 Kubernetes、大数据 → 选 GCP
-   - 用 AI/ML → 看 AWS、GCP、百度云
-
-3. **看成本**
-   - 小项目试水 → 选便宜的（腾讯云、UCloud）
-   - 大规模生产 → 看总体成本（AWS 长期可能更省钱）
-
-4. **看生态**
-   - 已用其他服务（如 GitHub、Office 365）→ 选同生态的
-
-**现实建议**：
-> 初学者/小项目：选阿里云或腾讯云（文档是中文，客服在国内）
->
-> 出海项目：选 AWS（最成熟、全球覆盖最好）
->
-> 大企业：可能需要多云策略（不同业务用不同云）
+现实建议是：初学者或小项目选阿里云或腾讯云，因为文档是中文，客服在国内；出海项目选 AWS，因为它最成熟、全球覆盖最好；大企业可能需要多云策略，不同业务用不同云。
 
 ---
 
-## 3. 一般怎么用云服务？（实战篇）
+## 3. 一般怎么用云服务？
 
 ### 3.1 从注册到上线的完整流程
 
-#### **第一步：注册账号**
+使用云服务的第一步是注册账号。这个过程就像在银行开户，需要验证你的身份。打开云服务商官网，点击"免费注册"，填写邮箱和密码，验证手机号，然后上传身份证或企业资质进行实名认证，最后绑定支付方式。整个过程大约需要 10 到 20 分钟。
 
-**注册流程**：
+注册完成后，你需要了解几个核心概念。**地域（Region）** 是云服务的数据中心所在地区，比如华东（杭州）、美东（弗吉尼亚）、亚太（新加坡）。选择原则是离你的用户越近越好，因为延迟更低。**可用区（Availability Zone, AZ）** 是一个地域内的多个数据中心，相互隔离，提高可用性。如果一个可用区挂了，另一个还能用。**实例（Instance）** 就是一台虚拟服务器，比如一台 2 核 4G 的云服务器，计费方式是按时长或按量。
 
-| 步骤 | 操作 | 说明 |
-|------|------|------|
-| 1 | 打开官网 | 如 `https://www.aliyun.com/` |
-| 2 | 点击"免费注册" | 填写邮箱、密码 |
-| 3 | 验证手机号 | 输入短信验证码 |
-| 4 | 实名认证 | 上传身份证或企业资质 |
-| 5 | 绑定支付 | 信用卡或支付宝 |
+### 3.2 创建第一台云服务器
 
-⏱️ **预计耗时**：10-20 分钟
+创建云服务器的过程就像组装一台电脑，但是是在网页上点选配置。首先选择付费模式，测试环境用按量付费，长期运行用包年包月。然后选择地域，选离你最近的，比如华东-杭州。实例规格方面，2 核 4G 对于测试环境够用了。镜像选择操作系统，比如 CentOS 7.9 或 Ubuntu 20.04。存储用 40GB 系统盘，网络用默认 VPC 网络，带宽按使用流量付费比较省钱。最后设置 root 用户密码，记得保存好。整个过程大约 5 分钟，实例创建完成后等待 1 到 2 分钟即可使用。
 
-**需要准备什么**：
-- ✅ 邮箱地址（建议用企业邮箱）
-- ✅ 手机号码（用于验证）
-- ✅ 信用卡或支付宝（用于实名认证和付费）
+👇 **动手点点看**：
+选择配置，了解不同规格的价格和适用场景。
 
-**注册过程**：
-1. 打开云服务商官网（如 `https://aws.amazon.com/cn/` 或 `https://www.aliyun.com/`）
-2. 点击"免费注册"
-3. 填写邮箱、密码
-4. 验证手机号
-5. 实名认证（上传身份证或企业资质）
-6. 绑定支付方式
+<ComputeInstanceDemo />
 
-⏱️ **耗时**：约 10-20 分钟
+### 3.3 连接云服务器并部署应用
 
-#### **第二步：了解基础概念**
+连接 Linux 服务器推荐使用 SSH。用密码登录的方式是 `ssh root@你的服务器公网IP`，然后输入密码。用密钥登录更安全，方式是 `ssh -i 你的私钥.pem root@你的服务器公网IP`。
 
-在使用云服务之前，必须理解几个核心概念：
+连接上服务器后，你就可以部署应用了。首先更新系统，CentOS 用 `sudo yum update -y`，Ubuntu 用 `sudo apt update && sudo apt upgrade -y`。然后安装必要软件，比如 Node.js。接着上传代码，可以用 git 或 scp。最后安装依赖并启动应用。
 
-**云服务核心概念**：
+### 3.4 常见使用场景
 
-| 概念 | 通俗解释 | 例子 |
-|------|---------|------|
-| **地域 (Region)** | 数据中心在哪个城市 | 华东（杭州）、美东（弗吉尼亚） |
-| **可用区 (AZ)** | 一个城市内的多个数据中心 | 华东 1 可用区 A、B、C |
-| **实例 (Instance)** | 一台虚拟服务器 | 2 核 4G 的云服务器 |
-| **镜像 (Image)** | 操作系统模板 | CentOS 7.9、Ubuntu 20.04 |
+**托管个人网站或博客** 需要云服务器加域名，1 核 2G 足够，成本约 50 到 100 元每月，技术栈可以用 Nginx 加静态文件或 WordPress。
 
-👉 **选择原则**：地域离用户越近，延迟越低
+**部署 API 后端** 需要云服务器加数据库，2 核 4G 起步，成本约 200 到 500 元每月，技术栈可以用 Node.js 或 Python 配合 MySQL 或 PostgreSQL。
 
-**地域（Region）**：
-- 是什么：云服务的数据中心所在地区
-- 例子：华东（杭州）、美东（弗吉尼亚）、亚太（新加坡）
-- 选择原则：离你的用户越近越好（延迟更低）
+**存储图片或视频** 推荐用对象存储，按存储量和流量计费，成本几元到几百元每月不等。优势是不用管硬盘，自动备份，还可以配合 CDN 加速。
 
-**可用区（Availability Zone, AZ）**：
-- 是什么：一个地域内的多个数据中心，相互隔离
-- 例子：华东 1 可用区 A、华东 1 可用区 B
-- 作用：提高可用性（一个可用区挂了，另一个还能用）
+👇 **动手点点看**：
+了解不同类型的云存储服务及其适用场景。
 
-**实例（Instance）**：
-- 是什么：一台虚拟服务器
-- 例子：一台 2 核 4G 的云服务器
-- 计费：按时长（按小时/月）或按量（按秒/按请求数）
-
-#### **第三步：创建第一台云服务器**
-
-**创建云服务器配置清单**：
-
-```
-配置项          推荐选择（测试环境）
-─────────────────────────────────────
-付费模式        按量付费（不用可关）
-地域            华东-杭州（或离你最近的）
-实例规格        2 核 4G（够用）
-镜像            Ubuntu 20.04 或 CentOS 7.9
-存储            40GB 系统盘（默认）
-网络            默认 VPC 网络
-带宽            按使用流量付费（省钱）
-密码            设置并牢记 root 密码
-```
-
-⏱️ **创建耗时**：1-2 分钟
-
-**实战：在阿里云创建一台云服务器（ECS）**
-
-1. **登录控制台**
-   - 注册成功后，登录云控制台
-
-2. **找到 ECS 服务**
-   - 搜索"云服务器 ECS"或在产品列表中找到
-
-3. **点击"创建实例"**
-
-4. **选择配置**
-   ```
-   - 付费模式：按量付费（测试）或 包年包月（长期）
-   - 地域：选择离你最近的（如华东-杭州）
-   - 实例规格：2 核 4G（测试够用了）
-   - 镜像：选择操作系统（如 CentOS 7.9 或 Ubuntu 20.04）
-   - 存储：40GB 系统盘（默认够用）
-   - 网络：默认 VPC 网络即可
-   - 带宽：按使用流量付费（测试省钱）
-   ```
-
-5. **设置密码**
-   - 设置 root 用户密码（记得保存！）
-
-6. **确认订单并启动**
-   - 检查配置无误后，点击"确认订单"
-   - 等待 1-2 分钟，实例创建完成
-
-⏱️ **耗时**：约 5 分钟
-
-#### **第四步：连接云服务器**
-
-**Linux 服务器（推荐使用 SSH）**：
-
-```bash
-# 方式1：用密码登录
-ssh root@你的服务器公网IP
-# 输入密码（密码不会显示，直接输完回车）
-
-# 方式2：用密钥登录（更安全，推荐）
-ssh -i 你的私钥.pem root@你的服务器公网IP
-```
-
-**Windows 服务器**：
-
-- 使用远程桌面（RDP）
-- 输入：`你的服务器公网IP:3389`
-- 用户名：`Administrator`
-- 密码：你设置的密码
-
-#### **第五步：部署你的应用**
-
-```bash
-# 1. 更新系统
-sudo yum update -y  # CentOS
-# 或
-sudo apt update && sudo apt upgrade -y  # Ubuntu
-
-# 2. 安装必要软件（以安装 Node.js 为例）
-curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
-sudo yum install -y nodejs
-
-# 3. 上传代码（可以用 git 或 scp）
-git clone https://github.com/yourusername/yourproject.git
-cd yourproject
-
-# 4. 安装依赖
-npm install
-
-# 5. 启动应用
-npm start
-```
-
-### 3.2 常见使用场景
-
-#### **场景 1：托管个人网站 / 博客**
-
-- **需要的服务**：云服务器（ECS）+ 域名
-- **配置建议**：1 核 2G 足够
-- **成本**：约 50-100 元/月
-- **技术栈**：Nginx + 静态文件 / WordPress
-
-#### **场景 2：部署 API 后端**
-
-- **需要的服务**：云服务器 + 数据库（RDS）
-- **配置建议**：2 核 4G 起步
-- **成本**：约 200-500 元/月
-- **技术栈**：Node.js/Python + MySQL/PostgreSQL
-
-#### **场景 3：存储图片 / 视频**
-
-- **需要的服务**：对象存储（OSS/S3）
-- **配置建议**：按存储量和流量计费
-- **成本**：几元到几百元/月不等
-- **优势**：不用自己管硬盘，自动备份，CDN 加速
-
-#### **场景 4：使用 AI 服务**
-
-- **需要的服务**：API 调用（如通义千问、文心一言）
-- **配置建议**：按调用次数计费
-- **成本**：几分钱到几元/千次调用
-- **优势**：不用自己买 GPU，直接调用 API
+<StorageTypeDemo />
 
 ---
 
-## 4. 如何购买和调用 API？（计费篇）
+## 4. 如何购买和调用 API？
 
 ### 4.1 云服务的计费模式
 
-**云服务计费模式对比**：
+云服务的计费方式有很多种，理解它们能帮你省很多钱。
 
-| 计费模式 | 类比 | 适合场景 | 节省潜力 |
-|---------|------|---------|----------|
-| **按需付费** | 单买票 | 测试环境、短期项目 | %（基准） |
-| **包年包月** | 月票/年票 | 长期稳定负载 | 30-60% |
-| **竞价实例** | 候补票 | 容错批处理任务 | 60-90% |
-| **Serverless** | 计程车 | 事件驱动、流量波动大 | 视场景 40-70% |
+**按需付费（Pay-as-you-go）** 就像单买电影票，用多少付多少，不用不花钱。适合测试环境、流量不稳定的项目。云服务器按小时计费，对象存储按 GB 加请求次数计费，AI API 按调用次数计费。
 
-云服务的计费方式有很多种，理解它们能帮你省很多钱：
+**包年包月或预留实例** 就像买月票或年票，承诺使用一定时长，享受折扣，通常能省 30% 到 60%。适合长期稳定运行的生产环境。比如一台 2 核 4G 服务器，按需 200 元每月，包 1 年可能只要 140 元每月。
 
-#### **按需付费（Pay-as-you-go）**
+**竞价实例或抢占式实例** 就像候补票，价格很低，最多能省 90%，但可能被强制回收。适合批处理任务、容错性高的任务，比如数据处理、渲染任务。风险是云厂商资源紧张时会强制收回实例。
 
-- **特点**：用多少付多少，不用不花钱
-- **适用**：测试环境、流量不稳定的项目
-- **例子**：
-  - 云服务器：按小时计费
-  - 对象存储：按 GB + 请求次数计费
-  - AI API：按调用次数计费
+**Serverless 按调用次数** 就像计程车，不用关心服务器，只关心调用次数。计费方式是调用次数加计算时间加流量，适合 API 接口、事件驱动任务。比如阿里云函数计算，前 100 万次调用免费，超出后 1.33 元每百万次。
 
-#### **包年包月 / 预留实例**
+👇 **动手点点看**：
+使用计费计算器，对比不同计费模式的成本差异。
 
-- **特点**：承诺使用一定时长（1 年/3 年），享受折扣
-- **折扣**：通常 30-60% off
-- **适用**：长期稳定运行的生产环境
-- **例子**：一台 2 核 4G 服务器
-  - 按需：200 元/月
-  - 包 1 年：140 元/月（省 30%）
-
-#### **竞价实例 / 抢占式实例**
-
-- **特点**：价格很低（最多能省 90%），但可能被强制回收
-- **适用**：批处理任务、容错性高的任务
-- **例子**：数据处理任务、渲染任务
-- **风险**：云厂商资源紧张时，会强制收回实例
-
-#### **Serverless 按调用次数**
-
-- **特点**：不用关心服务器，只关心调用次数
-- **计费**：调用次数 + 计算时间 + 流量
-- **适用**：API 接口、事件驱动任务
-- **例子**：阿里云函数计算
-  - 前 100 万次调用：免费
-  - 超出后：1.33 元/百万次
+<PricingCalculator />
 
 ### 4.2 购买 API 调用的完整流程
 
-以**调用通义千问 API** 为例：
+以调用通义千问 API 为例，整个流程分为四步。
 
-**购买 API 调用流程**：
+**第一步是开通服务**。打开云厂商的 AI 开放平台或机器学习平台 PAI，找到通义千问或 DashScope，点击"立即开通"或"免费试用"，大约 2 分钟完成。
 
-```
-1. 开通服务 → 进入 AI 开放平台，点击"立即开通"
-2. 获取密钥 → 进入 API-KEY 管理，创建密钥（只显示一次！）
-3. 配置权限 → 创建 RAM 用户，授予最小权限
-4. 调用测试 → 用 Python 或 JavaScript 发起第一次调用
-```
+**第二步是获取 API Key**。进入控制台的 API-KEY 管理，点击"创建我的 API-KEY"，复制并保存这个 Key。重要提示：API Key 只显示一次，请立即保存。
 
-⚠️ **重要提示**：API Key 只显示一次，请立即保存！
+**第三步是配置权限**。进入访问控制（RAM）或权限管理（IAM），创建一个用户或角色，只授权需要的权限，比如只能调用通义千问，不能删除服务器。这是最小权限原则。
 
-#### **步骤 1：开通 API 服务**
-
-1. 打开云厂商的"AI 开放平台"或"机器学习平台 PAI"
-2. 找到"通义千问"或"DashScope"
-3. 点击"立即开通"或"免费试用"
-
-⏱️ **耗时**：约 2 分钟
-
-#### **步骤 2：获取 API Key**
-
-1. 进入控制台的"API-KEY 管理"
-2. 点击"创建我的 API-KEY"
-3. **重要**：复制并保存这个 Key（只显示一次！）
-
-```python
-# 示例：你的 API Key 长这样
-sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-```
-
-#### **步骤 3：配置权限（IAM）**
-
-**API Key 安全最佳实践**：
-
-| 安全实践 | 说明 | 示例 |
-|---------|------|------|
-| **环境变量** | 从环境变量读取密钥 | `os.environ['API_KEY']` |
-| **最小权限** | 只授予必要的权限 | 只能调用 AI API，不能删除服务器 |
-| **定期轮换** | 定期更换密钥 | 每 90 天轮换一次 |
-| **监控告警** | 监控异常调用 | 调用频率异常时立即通知 |
-
-❌ **不要做**：
-- 把密钥写在代码里
-- 把密钥提交到 GitHub
-- 在公网传输明文密钥
-
-在调用 API 之前，需要确保你的 API Key 有正确的权限：
-
-1. 进入"访问控制（RAM）"或"权限管理（IAM）"
-2. 创建一个"用户"或"角色"
-3. 给这个用户/角色授权：
-   - 只授权需要的权限（最小权限原则）
-   - 例如：只能调用通义千问，不能删除服务器
-
-4. 生成 AccessKey ID 和 AccessKey Secret
-
-#### **步骤 4：调用 API**
-
-**Python 示例**：
-
-```python
-import requests
-import json
-
-# 你的 API Key（需要从云厂商控制台获取）
-API_KEY = "sk-your-api-key-here"
-
-# API 地址（以通义千问为例）
-url = "https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation"
-
-# 请求头
-headers = {
-    "Authorization": f"Bearer {API_KEY}",
-    "Content-Type": "application/json"
-}
-
-# 请求体
-data = {
-    "model": "qwen-turbo",
-    "input": {
-        "messages": [
-            {"role": "user", "content": "你好，请介绍一下你自己"}
-        ]
-    },
-    "parameters": {
-        "result_format": "message"
-    }
-}
-
-# 发送请求
-response = requests.post(url, headers=headers, json=data)
-
-# 处理响应
-if response.status_code == 200:
-    result = response.json()
-    print(result["output"]["choices"][0]["message"]["content"])
-else:
-    print(f"请求失败：{response.status_code}, {response.text}")
-```
-
-**JavaScript 示例**：
-
-```javascript
-const fetch = require('node-fetch');
-
-const API_KEY = 'sk-your-api-key-here';
-const url = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation';
-
-async function callQwen() {
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Authorization': `Bearer ${API_KEY}`,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      model: 'qwen-turbo',
-      input: {
-        messages: [
-          { role: 'user', content: '你好，请介绍一下你自己' }
-        ]
-      },
-      parameters: {
-        result_format: 'message'
-      }
-    })
-  });
-
-  const result = await response.json();
-  console.log(result.output.choices[0].message.content);
-}
-
-callQwen();
-```
-
-### 4.3 计费陷阱与省钱技巧
-
-#### **常见计费陷阱**
-
-**常见计费陷阱与解决方案**：
-
-| 陷阱 | 问题 | 后果 | 解决方案 |
-|------|------|------|----------|
-| **忘记关实例** | 测试完忘记关云服务器 | 一个月后收到几千元账单 | 设置自动释放时间 |
-| **流量超了** | 以为是"包年包月"，实际是"按流量计费" | 一个视频火了，流量费几千元 | 明确计费模式，使用 CDN |
-| **免费额度用完** | 以为一直免费，实际有上限 | 额度用完后开始按高价计费 | 设置费用告警 |
-| **请求爆炸** | 代码 Bug，无限循环调用 API | 一晚上产生几百万次调用 | 设置请求频率限制 |
-
-1. **忘记关实例**
-   - 问题：测试完忘记关云服务器，还在计费
-   - 后果：一个月后收到几千元账单
-   - 解决：设置自动释放时间，或用按量付费+定时关机
-
-2. **流量超了**
-   - 问题：以为带宽是"包年包月"，结果是"按流量计费"
-   - 后果：一个视频火了，流量费几千元
-   - 解决：明确计费模式，使用 CDN 降低流量成本
-
-3. **免费额度用完**
-   - 问题：以为一直免费，其实免费额度有上限
-   - 后果：免费额度用完后开始按高价计费
-   - 解决：设置费用告警，超过一定额度立刻通知
-
-4. **请求次数爆炸**
-   - 问题：代码 Bug，无限循环调用 API
-   - 后果：一晚上产生几百万次调用，账单几千元
-   - 解决：设置请求频率限制和费用上限
-
-#### **省钱技巧**
-
-1. **使用免费额度**
-   - 大部分云服务都有免费试用
-   - 例如：阿里云新用户 3 个月免费
-   - AWS 12 个月免费 tier
-
-2. **购买预留实例**
-   - 长期运行的服务，买包年包月
-   - 能省 30-60%
-
-3. **使用竞价实例**
-   - 批处理任务用竞价实例
-   - 能省 70-90%
-
-4. **合理选择存储类型**
-   - 热数据用标准存储
-   - 冷数据用低频访问或归档存储
-   - 能省 50-80%
-
-5. **设置费用告警**
-   - 云厂商都支持设置"预算告警"
-   - 超过某个金额立刻发邮件/短信通知
+**第四步是调用测试**。用 Python 或 JavaScript 发起第一次调用，验证 API 是否正常工作。
 
 ---
 
-## 5. 权限管理（IAM）是什么？怎么起源？（安全篇）
+## 5. 实战：从零开始部署一个网站
 
-### 5.1 为什么需要权限管理？
+### 5.1 场景与方案选择
 
-想象一下这个场景：
+假设你是一个前端开发者，想部署一个个人博客网站。需求是静态网站（HTML/CSS/JS），有自己的域名，全球访问速度快，成本尽量低。
 
-**场景对比：为什么需要权限管理？**
+有三种方案可选。云服务器方案成本中等，难度中等，适合需要后端服务的场景。对象存储加 CDN 方案成本低，难度低，适合纯静态网站，这是我们的推荐方案。Serverless 方案成本极低，难度中等，适合动态内容。
 
-| 场景 | 没有权限管理 | 有权限管理（IAM） |
-|------|-------------|-----------------|
-| **操作权限** | 开发者 A 不小心删除了生产数据库 | 开发者 A 只能操作测试环境 |
-| **离职管理** | 开发者 B 离职后还能继续访问 | 开发者 B 离职后账号立即被禁用 |
-| **操作追溯** | 不知道谁在什么时候做了什么 | 所有操作都有日志记录 |
+推荐对象存储加 CDN 的原因是：成本最低（可能免费），配置最简单，速度最快（CDN 加速）。
 
-**结论**：权限管理不是"可有可无"，而是**云安全的第一道防线**。
+👇 **动手点点看**：
+按照步骤指引，了解部署网站的完整流程。
 
-### 5.2 权限管理的起源
+<DeployWorkflowDemo />
 
-#### **早期：单机时代（1980s-1990s）**
+### 5.2 实施步骤
 
-- **场景**：一台服务器，几个人共用
-- **权限管理**：
-  - 操作系统用户：`root`, `user1`, `user2`
-  - 文件权限：`chmod 755 file.txt`
-- **问题**：只能控制"谁能访问这台机器"
+**第一步：准备网站文件**。创建一个简单的 index.html：
 
-#### **网络时代（2000s）**
-
-- **场景**：多台服务器，很多应用
-- **权限管理**：
-  - 每台服务器单独设置用户
-  - 用 LDAP/Active Directory 统一管理
-- **问题**：配置复杂，容易出错
-
-#### **云计算时代（2010s-至今）**
-
-- **场景**：成千上万台服务器，几百个开发者
-- **新问题**：
-  - 服务器数量动态变化
-  - 开发者需要访问不同的服务
-  - 需要细粒度的权限控制（谁能做什么）
-- **解决方案**：**IAM（Identity and Access Management）**
-
-### 5.3 IAM 的核心概念
-
-**IAM 核心概念**：
-
-| 概念 | 定义 | 例子 |
-|------|------|------|
-| **用户 (User)** | 代表一个人或应用 | `alice@company.com` |
-| **组 (Group)** | 多个用户的集合 | `developers` 组 |
-| **角色 (Role)** | 临时身份，可被应用调用 | `EC2-to-S3-Read-Only` |
-| **策略 (Policy)** | 定义权限规则的 JSON 文档 | 允许读取 S3，禁止删除 |
-
-#### **用户（User）**
-
-- 是什么：代表一个"人"或"应用"
-- 例子：`alice@company.com`, `backend-service`
-- 作用：可以登录、拥有自己的密码/密钥
-
-#### **组（Group）**
-
-- 是什么：多个用户的集合
-- 例子：`developers` 组, `admins` 组
-- 作用：批量授权（给组授权，组内所有用户自动继承）
-
-#### **角色（Role）**
-
-- 是什么：一种"临时身份"，可以被应用或服务调用
-- 例子：`EC2-to-S3-Read-Only` 角色
-- 作用：
-  - 你的服务器（EC2）需要访问 S3
-  - 不需要存储密钥，而是"扮演"一个角色
-  - 更安全，密钥不会泄露
-
-#### **策略（Policy）**
-
-- 是什么：定义"能做什么、不能做什么"的规则
-- 格式：JSON 文档
-- 例子：
-
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:Get*",
-        "s3:List*"
-      ],
-      "Resource": "arn:aws:s3:::my-bucket/*"
-    },
-    {
-      "Effect": "Deny",
-      "Action": "s3:Delete*",
-      "Resource": "*"
-    }
-  ]
-}
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>我的博客</title>
+</head>
+<body>
+  <h1>欢迎来到我的博客</h1>
+  <p>这是我的第一篇文章。</p>
+</body>
+</html>
 ```
 
-**解读**：
-- 允许读取（Get）和列出（List）`my-bucket` 里的所有文件
-- 禁止删除（Delete）任何地方的文件
+**第二步：创建对象存储 Bucket**。登录云控制台，找到对象存储（OSS/S3），点击"创建 Bucket"。配置名称（比如 my-blog-2024，全局唯一），选择地域（离你最近的），权限设置为公共读（网站需要被访问）。
 
-### 5.4 权限管理的最佳实践
+**第三步：上传文件**。进入 Bucket，点击"上传文件"，选择 index.html，等待上传完成。
 
-**权限管理最佳实践**：
+**第四步：配置静态网站托管**。进入 Bucket 设置，找到"静态页面"或"网站托管"，启用功能，设置默认首页为 index.html，保存配置。
 
-| 原则 | 说明 | 正确做法 | 错误做法 |
-|------|------|---------|---------|
-| **最小权限** | 只授予必要的权限 | 只给读取开发环境 S3 的权限 | 给开发者管理员权限 |
-| **职责分离** | 不要把所有权力给一个人 | 开发人员创建服务器，财务查看账单 | 一个人既能创建服务器又能计费 |
-| **定期审计** | 定期检查权限 | 每季度检查一次用户权限 | 离职员工账号仍然活跃 |
-| **启用 MFA** | 多因素认证 | 登录时需要密码+手机验证码 | 只使用密码登录 |
-| **使用角色** | 用 Role 代替密钥 | EC2 绑定角色自动获取凭证 | 把密钥写在代码里 |
+**第五步：绑定域名（可选）**。购买域名（如阿里云万网），添加 CNAME 记录指向 Bucket 域名，在 Bucket 中绑定自定义域名，配置 HTTPS。
 
-#### **原则 1：最小权限原则（Least Privilege）**
+**第六步：配置 CDN（推荐）**。开通 CDN 服务，添加加速域名，选择源站（你的 Bucket），等待 CDN 生效（几分钟到几小时）。
 
-- **含义**：只授予完成任务所需的**最小权限**
-- **例子**：
-  - ❌ 错误：给开发者"管理员"权限
-  - ✅ 正确：给开发者"只能读取开发环境的 S3"权限
+### 5.3 成本估算
 
-#### **原则 2：职责分离**
-
-- **含义**：不要把所有权力给一个人
-- **例子**：
-  - ❌ 错误：一个人既能创建服务器，又能计费
-  - ✅ 正确：开发人员能创建服务器，财务人员能查看账单
-
-#### **原则 3：定期审计**
-
-- **含义**：定期检查谁有什么权限
-- **例子**：
-  - 每季度检查一次用户权限
-  - 离职员工的账号立即禁用
-  - 长期不用的账号删除
-
-#### **原则 4：启用 MFA（多因素认证）**
-
-- **含义**：登录时不仅需要密码，还需要手机验证码
-- **重要性**：防止密码泄露后账号被盗
-- **例子**：
-  ```
-  登录流程：
-  1. 输入密码
-  2. 打开手机认证器（如 Google Authenticator）
-  3. 输入 6 位动态验证码
-  4. 验证通过，登录成功
-  ```
-
-#### **原则 5：使用角色而不是密钥**
-
-- **含义**：服务器访问云资源时，用 Role，不要硬编码密钥
-- **问题**：密钥可能泄露
-- **例子**：
-
-```python
-# ❌ 错误：硬编码密钥
-AWS_ACCESS_KEY = "AKIAIOSFODNN7EXAMPLE"
-AWS_SECRET_KEY = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
-
-# ✅ 正确：使用角色（自动获取临时凭证）
-# EC2 实例绑定了某个角色后，SDK 会自动使用这个角色
-import boto3
-s3 = boto3.client('s3')  # 自动使用实例角色
-```
-
-### 5.5 实战：创建一个受限用户
-
-**实战：创建受限用户（5 步）**：
-
-```
-步骤 1：创建用户
-├─ 进入 IAM/RAM 控制台
-├─ 点击"创建用户"
-└─ 用户名：developer-test
-
-步骤 2：创建自定义策略
-├─ 选择 JSON 编辑模式
-├─ 输入权限规则（只允许读写 dev-bucket）
-└─ 命名策略：S3DevBucketReadWrite
-
-步骤 3：附加策略到用户
-├─ 在用户详情页点击"添加权限"
-└─ 搜索并勾选刚创建的策略
-
-步骤 4：生成访问密钥
-├─ 点击"创建访问密钥"
-└─ ⚠️ 立即复制密钥（只显示一次！）
-
-步骤 5：测试权限
-├─ 测试访问 dev-bucket（应该成功）
-└─ 测试访问 prod-bucket（应该失败）
-```
-
-#### **步骤 1：创建用户**
-
-1. 进入"IAM"或"RAM"控制台
-2. 点击"创建用户"
-3. 用户名：`developer-test`
-4. 访问方式：选择"编程访问"（会生成 AccessKey）
-
-#### **步骤 2：创建自定义策略**
-
-1. 点击"权限"→"创建策略"
-2. 选择"JSON"编辑模式
-3. 输入以下策略：
-
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:GetObject",
-        "s3:PutObject",
-        "s3:DeleteObject",
-        "s3:ListBucket"
-      ],
-      "Resource": [
-        "arn:aws:s3:::dev-bucket",
-        "arn:aws:s3:::dev-bucket/*"
-      ]
-    }
-  ]
-}
-```
-
-4. 命名策略：`S3DevBucketReadWrite`
-
-#### **步骤 3：将策略附加到用户**
-
-1. 在用户详情页，点击"添加权限"
-2. 选择"附加现有策略"
-3. 搜索并勾选 `S3DevBucketReadWrite`
-4. 点击"添加权限"
-
-#### **步骤 4：生成访问密钥**
-
-1. 在用户详情页，点击"创建访问密钥"
-2. **重要**：立即复制 `Access Key ID` 和 `Secret Access Key`（只显示一次！）
-
-#### **步骤 5：测试权限**
-
-```python
-import boto3
-
-# 使用刚才创建的密钥
-s3 = boto3.client(
-    's3',
-    aws_access_key_id='YOUR_ACCESS_KEY',
-    aws_secret_access_key='YOUR_SECRET_KEY'
-)
-
-# 测试：应该成功
-s3.list_objects_v2(Bucket='dev-bucket')
-
-# 测试：应该失败（因为策略只允许 dev-bucket）
-try:
-    s3.list_objects_v2(Bucket='prod-bucket')
-except Exception as e:
-    print(f"访问被拒绝（符合预期）：{e}")
-```
-
-### 5.6 常见错误与安全风险
-
-**常见安全错误与风险**：
-
-| 错误类型 | 错误做法 | 后果 | 正确做法 |
-|---------|---------|------|----------|
-| **硬编码密钥** | 把密钥写在代码里 | 代码上传 GitHub 后泄露 | 从环境变量读取 |
-| **过度授权** | 给所有人管理员权限 | 任何人都能删除资源 | 遵循最小权限原则 |
-| **不启用 MFA** | 只使用密码登录 | 密码泄露后账号被盗 | 启用多因素认证 |
-| **不审计** | 离职员工账号仍活跃 | 前员工可以继续访问 | 离职立即禁用账号 |
-
-**代码示例对比**：
-
-```python
-# ❌ 危险：密钥泄露风险
-AWS_KEY = "AKIAIOSFODNN7EXAMPLE"
-SECRET = "wJalrXUtnFEMI/K7MDENG..."
-
-# ✅ 安全：从环境变量读取
-import os
-AWS_KEY = os.environ['AWS_ACCESS_KEY_ID']
-SECRET = os.environ['AWS_SECRET_ACCESS_KEY']
-```
-
-**后果**：代码上传到 GitHub 后，密钥泄露，黑客可以用你的账号挖矿、删除数据。
+月度成本估算：对象存储 0 到 5 元（按存储量计费），CDN 流量 0 到 10 元（按流量计，有免费额度），域名 5 到 10 元（按年折算）。总计 5 到 25 元每月，小网站可能完全免费。
 
 ---
 
-## 6. 总结：云服务的本质
+## 6. 总结与下一步
 
-通过本章的学习，我们可以得出几个核心结论：
+### 6.1 核心要点回顾
 
-**从实践来看**：
-- 云服务不是"租服务器"，而是"购买计算能力的基础设施服务"
-- 选对云服务商可以省 30-50% 的成本
-- 权限管理是云安全的第一道防线，必须重视
+云服务的本质可以概括为：云服务厂商是计算能力的水电公司，提供按需使用、全球部署、自助服务的能力。使用流程是选择厂商、注册账号、创建资源、配置权限、监控成本。
 
-**从成本视角看**：
-- 按需付费适合测试和流量不稳定的项目
-- 包年包月适合长期运行的生产环境
-- 设置费用告警，避免意外高额账单
+关键决策点包括：选厂商要看市场、技术栈、成本；选计费模式要在按需、包年包月、Serverless 之间权衡；配权限要遵循最小权限原则，启用 MFA，定期审计；控成本要监控用量，使用折扣，及时释放不需要的资源。
 
-**从安全视角看**：
-- 永远不要把密钥写在代码里
-- 遵循最小权限原则
-- 启用 MFA，定期审计权限
+### 6.2 学习路径建议
 
-**下一步建议**：
-1. 选择一个云服务商（建议国内选阿里云/腾讯云，海外选 AWS）
-2. 注册账号，创建第一台云服务器
-3. 学习基础的 Linux 操作命令
-4. 了解并实践 IAM 权限管理
-5. 尝试调用一个 AI API（如通义千问）
+第一周学习理论基础，了解云服务基本概念，注册一个云账号，创建第一台云服务器。第二周动手实践，部署一个静态网站，配置域名和 CDN，学习基础 Linux 命令。第三周学习进阶技能，包括权限管理（IAM）、监控和告警、成本优化。第四周进行项目实战，部署一个完整的应用，配置数据库和存储，实现自动扩容。
+
+### 6.3 推荐资源
+
+官方文档包括阿里云文档中心、AWS 中文文档、腾讯云文档。学习平台有阿里云大学、AWS 免费套餐、腾讯云实验室。社区资源有云原生社区、Serverless 中文网、InfoQ 云计算专栏。
 
 ---
 
-## 名词对照表
+## 7. 名词对照表
 
 | 英文术语 | 中文对照 | 解释 |
-|----------|----------|------|
-| **Cloud Service Provider** | 云服务厂商 | 提供云计算服务的公司，如 AWS、阿里云 |
-| **Region** | 地域 | 云服务的数据中心所在地区，如华东-杭州 |
-| **Availability Zone (AZ)** | 可用区 | 一个地域内的多个数据中心，相互隔离 |
+| :--- | :--- | :--- |
+| **Cloud Provider** | 云服务厂商 | 提供云计算服务的公司，如 AWS、阿里云 |
+| **Region** | 地域 | 数据中心所在的地理区域 |
+| **Availability Zone** | 可用区 | 一个地域内的独立数据中心 |
 | **Instance** | 实例 | 一台虚拟服务器 |
-| **ECS** | 弹性计算服务 | 阿里云的云服务器服务 |
-| **EC2** | Elastic Compute Cloud | AWS 的云服务器服务 |
-| **OSS** | 对象存储服务 | 阿里云的对象存储 |
-| **S3** | Simple Storage Service | AWS 的对象存储 |
-| **IAM** | 身份与访问管理 | 权限管理服务，控制谁能做什么 |
-| **RAM** | Resource Access Management | 阿里云的权限管理服务 |
-| **AccessKey** | 访问密钥 | 用于 API 调用的身份凭证 |
-| **MFA** | 多因素认证 | 需要密码+验证码的登录方式 |
-| **Policy** | 策略 | 定义权限规则的 JSON 文档 |
-| **Role** | 角色 | 可以被应用或服务调用的临时身份 |
+| **Image/AMI** | 镜像 | 预配置的操作系统模板 |
 | **VPC** | 虚拟私有云 | 隔离的虚拟网络环境 |
+| **IAM/RAM** | 身份与访问管理 | 权限管理系统 |
+| **User** | 用户 | 一个具体的身份 |
+| **Group** | 用户组 | 用户的集合 |
+| **Role** | 角色 | 临时身份 |
+| **Policy** | 策略 | 定义权限的 JSON 文档 |
+| **API Key** | API 密钥 | 调用 API 的凭证 |
+| **AccessKey** | 访问密钥 | 编程访问的凭证（ID + Secret） |
+| **MFA** | 多因素认证 | 需要密码加验证码的登录方式 |
 | **CDN** | 内容分发网络 | 全球加速服务，缓存静态资源 |
+| **OSS/S3** | 对象存储 | 存储文件的服务 |
+| **ECS/EC2** | 云服务器 | 虚拟主机服务 |
+| **RDS** | 关系型数据库服务 | 托管的数据库 |
+| **Serverless** | 无服务器 | 不用管理服务器的计算模式 |
+| **Pay-as-you-go** | 按需付费 | 用多少付多少的计费模式 |
+| **Reserved Instance** | 预留实例 | 包年包月的计费模式 |
+| **Spot Instance** | 抢占式实例 | 低价但可能被回收的实例 |