feat: enhance demo components with consistent styling and info boxes

- Add standardized header and info box components to all demo files
- Improve visual consistency with theme colors and spacing
- Add max-height and overflow-y for better content containment
- Update package.json build script with --force flag
- Add .gitignore entries for REFACTORING files
- Fix table formatting in audio-intro.md

docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="access-key-management-demo">
     <div class="demo-header">
-      <h4>访问密钥（AK/SK）生命周期管理</h4>
-      <p class="intro-text">模拟 AK/SK 的创建、使用和轮换流程</p>
+      <span class="icon">🔑</span>
+      <span class="title">访问密钥管理</span>
+      <span class="subtitle">理解 AK/SK 生命周期和轮换流程</span>
     </div>
 
     <div class="demo-content">
@@ -88,7 +89,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 安全提示：</strong>访问密钥泄露是云安全事件的主要原因之一。建议优先使用 IAM 角色替代访问密钥，如果必须使用，请务必定期轮换。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>访问密钥泄露是云安全事件的主要原因之一。建议优先使用 IAM 角色替代访问密钥，如果必须使用，请务必定期轮换。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="best-practices-demo">
     <div class="demo-header">
-      <h4>云账号权限管理最佳实践清单</h4>
-      <p class="intro-text">点击查看详细的实施指南和代码示例</p>
+      <span class="icon">✅</span>
+      <span class="title">权限管理最佳实践</span>
+      <span class="subtitle">理解云账号安全管理的核心原则</span>
     </div>
 
     <div class="demo-content">
@@ -52,7 +53,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 实施建议：</strong>按照优先级从 P0 开始逐步实施最佳实践。每个改进都能显著提升账号安全性，不要试图一次性完成所有改进。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>按照优先级从 P0 开始逐步实施最佳实践。每个改进都能显著提升账号安全性，不要试图一次性完成所有改进。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="cross-account-access-demo">
     <div class="demo-header">
-      <h4>跨账号访问流程演示</h4>
-      <p class="intro-text">角色扮演（AssumeRole）获取临时凭证</p>
+      <span class="icon">🔗</span>
+      <span class="title">跨账号访问</span>
+      <span class="subtitle">理解跨账号访问的 AssumeRole 机制</span>
     </div>
 
     <div class="demo-content">
@@ -65,7 +66,8 @@ s3_client = boto3.client(
     </div>
 
     <div class="info-box">
-      <strong>💡 跨账号访问优势：</strong>通过角色扮演实现跨账号访问，无需在每个账号创建 IAM 用户，临时凭证自动过期，更安全更易管理。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过角色扮演实现跨账号访问，无需在每个账号创建 IAM 用户，临时凭证自动过期，更安全更易管理。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="iam-structure">
-    <div class="structure-layers">
+    <div class="demo-header">
+      <span class="icon">🏗️</span>
+      <span class="title">IAM 五大核心概念</span>
+      <span class="subtitle">云上权限管理的基础构件</span>
+    </div>
+
+    <div class="demo-content">
+      <div class="structure-layers">
       <div 
         v-for="(layer, index) in layers" 
         :key="index"
@@ -14,21 +21,27 @@
           <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 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 class="info-box">
+        <span class="icon">💡</span>
+        <strong>核心思想：</strong>IAM 就像公司的门禁系统——根账号是老板（拥有所有钥匙），用户是员工（有特定权限），角色是临时访客证（有时效），策略是"谁能进哪些门"的规则。
       </div>
     </div>
   </div>
@@ -113,9 +126,39 @@ function selectLayer(index) {
 .iam-structure {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
+  background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.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;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .structure-layers {
@@ -221,4 +264,23 @@ function selectLayer(index) {
 .detail-examples li:last-child {
   margin-bottom: 0;
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>

docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="iam-ram-comparison-demo">
     <div class="demo-header">
-      <h4>AWS IAM vs 阿里云 RAM 对比</h4>
-      <p class="intro-text">点击各个模块查看详细对比</p>
+      <span class="icon">🔐</span>
+      <span class="title">IAM vs RAM 对比</span>
+      <span class="subtitle">理解不同云厂商的权限管理服务</span>
     </div>
 
     <div class="demo-content">
@@ -80,7 +81,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 提示：</strong>IAM 和 RAM 的核心概念基本一致，只是术语和实现细节略有不同。掌握一个平台后，可以快速迁移到另一个平台。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>IAM 和 RAM 的核心概念基本一致，只是术语和实现细节略有不同。掌握一个平台后，可以快速迁移到另一个平台。
     </div>
   </div>
 </template>
@@ -163,31 +165,24 @@ function selectFeature(platform, index) {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
   border-radius: 8px;
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
   max-height: 600px;
   overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-weight: 800;
-  color: var(--vp-c-text-1);
-}
+.demo-header .icon { font-size: 1.25rem; }
+.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 {
-  margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
-}
+.demo-content { margin-bottom: 0.75rem; }
 
 .comparison-container {
   display: grid;
@@ -214,7 +209,7 @@ function selectFeature(platform, index) {
 }
 
 .platform-header.ram {
-  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
+  background: var(--vp-c-bg-soft);
 }
 
 .platform-header .logo {
@@ -234,9 +229,7 @@ function selectFeature(platform, index) {
   color: var(--vp-c-text-2);
 }
 
-.features-list {
-  padding: 0.75rem;
-}
+.features-list { padding: 0.75rem; }
 
 .feature-item {
   display: flex;
@@ -258,9 +251,7 @@ function selectFeature(platform, index) {
   transform: translateX(4px);
 }
 
-.feature-icon {
-  font-size: 1.2rem;
-}
+.feature-icon { font-size: 1.2rem; }
 
 .feature-content {
   display: flex;
@@ -289,13 +280,11 @@ function selectFeature(platform, index) {
   padding: 1rem;
 }
 
-.detail-card {
-  text-align: center;
-}
+.detail-card { text-align: center; }
 
 .detail-card h6 {
   margin: 0 0 1rem 0;
-  font-size: 1.1rem;
+  font-size: 1rem;
   color: var(--vp-c-brand-1);
 }
 
@@ -324,18 +313,13 @@ function selectFeature(platform, index) {
   color: var(--vp-c-text-1);
 }
 
-.aws-detail .label {
-  color: var(--vp-c-brand-1);
-}
-
-.ram-detail .label {
-  color: var(--vp-c-brand-delta);
-}
+.aws-detail .label { color: var(--vp-c-brand-1); }
+.ram-detail .label { color: var(--vp-c-brand-delta); }
 
 .aws-detail p,
 .ram-detail p {
   margin: 0 0 0.5rem 0;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   line-height: 1.4;
   color: var(--vp-c-text-2);
 }
@@ -347,7 +331,7 @@ function selectFeature(platform, index) {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
-  font-size: 0.65rem;
+  font-size: 0.6rem;
   word-break: break-all;
   color: var(--vp-c-text-2);
 }
@@ -363,19 +347,17 @@ function selectFeature(platform, index) {
 }
 
 .info-box {
-  padding: 0.75rem;
   background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  border-left: 4px solid var(--vp-c-brand);
+  padding: 0.75rem;
   border-radius: 6px;
-  font-size: 0.9rem;
-  line-height: 1.6;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
 }
 
-.info-box strong {
-  color: var(--vp-c-text-1);
-}
+.info-box .icon { flex-shrink: 0; }
 
 @media (max-width: 1024px) {
   .comparison-container {
@@ -383,16 +365,8 @@ function selectFeature(platform, index) {
     gap: 1rem;
   }
 
-  .comparison-details {
-    order: -1;
-  }
-
-  .comparison-row {
-    flex-direction: column;
-  }
-
-  .vs-divider {
-    padding: 0.5rem 0;
-  }
+  .comparison-details { order: -1; }
+  .comparison-row { flex-direction: column; }
+  .vs-divider { padding: 0.5rem 0; }
 }
 </style>

docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="identity-provider-demo">
     <div class="demo-header">
-      <h4>身份提供商(IdP)集成流程</h4>
-      <p class="intro-text">点击步骤查看 SSO 单点登录流程</p>
+      <span class="icon">🔐</span>
+      <span class="title">身份提供商集成</span>
+      <span class="subtitle">理解企业 SSO 单点登录流程</span>
     </div>
 
     <div class="demo-content">
@@ -38,7 +39,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 SSO 优势：</strong>通过企业 IdP 统一管理用户身份，避免在每个云平台单独创建账号，提高安全性和管理效率。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过企业 IdP 统一管理用户身份，避免在每个云平台单独创建账号，提高安全性和管理效率。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="mfa-security-demo">
     <div class="demo-header">
-      <h4>MFA 多因素认证模拟</h4>
-      <p class="intro-text">体验 MFA 双因素认证流程</p>
+      <span class="icon">🔐</span>
+      <span class="title">多因素认证</span>
+      <span class="subtitle">理解 MFA 双因素认证流程</span>
     </div>
 
     <div class="demo-content">
@@ -50,7 +51,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 MFA 安全价值：</strong>启用 MFA 可降低 99.9% 的账号被盗风险。即使密码泄露，攻击者没有你的 MFA 设备也无法登录。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>启用 MFA 可降低 99.9% 的账号被盗风险。即使密码泄露，攻击者没有你的 MFA 设备也无法登录。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="permission-hierarchy-demo">
     <div class="demo-header">
-      <h4>权限层级结构</h4>
-      <p class="intro-text">点击层级查看详细权限范围</p>
+      <span class="icon">🏛️</span>
+      <span class="title">权限层级结构</span>
+      <span class="subtitle">理解不同权限级别的范围差异</span>
     </div>
 
     <div class="demo-content">
@@ -61,7 +62,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 最小权限原则：</strong>始终授予用户完成工作所需的最小权限。从低权限开始，根据实际需求逐步提升，而不是一开始就授予高权限。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>最小权限原则——始终授予用户完成工作所需的最小权限。从低权限开始，根据实际需求逐步提升，而不是一开始就授予高权限。
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="policy-editor-demo">
+    <div class="demo-header">
+      <span class="icon">📋</span>
+      <span class="title">策略编辑器</span>
+      <span class="subtitle">理解 IAM 策略的 JSON 结构</span>
+    </div>
+
     <div class="editor-layout">
       <div class="editor-panel">
         <div class="panel-title">策略编辑器</div>
@@ -42,6 +48,11 @@
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>策略由 Effect、Action、Resource、Condition 四个核心元素组成，理解这四个元素的作用是编写 IAM 策略的基础。
+    </div>
   </div>
 </template>
 

docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="role-policy-demo">
     <div class="demo-header">
-      <h4>角色与策略关系可视化</h4>
-      <p class="intro-text">拖动查看角色如何关联多个策略</p>
+      <span class="icon">🎭</span>
+      <span class="title">角色与策略</span>
+      <span class="subtitle">理解角色如何关联多个策略</span>
     </div>
 
     <div class="demo-content">
@@ -80,7 +81,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 策略叠加：</strong>一个角色可以附加多个策略，最终的权限是所有策略的叠加结果。Deny 策略优先级高于 Allow。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>策略叠加——一个角色可以附加多个策略，最终的权限是所有策略的叠加结果。Deny 策略优先级高于 Allow。
     </div>
   </div>
 </template>