From 7c70c370727e095cc1cca9c7a5448c75bba2b9cd Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Fri, 6 Feb 2026 03:34:50 +0800
Subject: [PATCH] feat(docs): add interactive demo components for technical
 appendices

Add placeholder Vue components for visualizing technical concepts across multiple domains including frontend routing, browser rendering, cache design, queue design, database principles, API design, cloud services, and backend evolution. These components provide interactive educational content for the documentation.

Update documentation structure to include new appendix sections and enhance existing content with visual components. Remove unused 'codex' dependency from package.json.
---
 CLAUDE.md                                     |    2 +-
 docs/.vitepress/config.mjs                    |   48 +
 .../appendix/api-design/DocumentationDemo.vue |   50 +
 .../appendix/api-design/ErrorHandlingDemo.vue |   97 +
 .../appendix/api-design/HttpMethodsDemo.vue   |  428 ++++
 .../api-design/RequestStructureDemo.vue       |  145 ++
 .../appendix/api-design/ResourceAnalogy.vue   |  103 +
 .../api-design/ResponseStructureDemo.vue      |   50 +
 .../appendix/api-design/RestfulDesignDemo.vue |  365 ++++
 .../appendix/api-design/StatusCodeDemo.vue    |  618 ++++++
 .../api-design/VersioningStrategyDemo.vue     |   50 +
 .../ArchitectureComparisonDemo.vue            |  283 +++
 .../backend-evolution/ContainerDockerDemo.vue |  271 +++
 .../backend-evolution/DeploymentFlowDemo.vue  |  255 +++
 .../backend-evolution/EvolutionIntroDemo.vue  |  282 +++
 .../backend-evolution/KubernetesDemo.vue      |  444 +++++
 .../backend-evolution/MicroservicesDemo.vue   |  362 ++++
 .../backend-evolution/MonolithDemo.vue        |  381 ++++
 .../backend-evolution/PhysicalServerDemo.vue  |  475 +++++
 .../backend-evolution/ScalingStrategyDemo.vue |  238 +++
 .../backend-evolution/ServerlessDemo.vue      |  435 +++++
 .../TechStackTimelineDemo.vue                 |  250 +++
 .../MemoryManagementDemo.vue                  |   83 +
 .../CleanArchitectureDemo.vue                 |  534 +++++
 .../ControllerLayerDemo.vue                   |  340 ++++
 .../DependencyDirectionDemo.vue               |  319 +++
 .../DomainModelDemo.vue                       |  501 +++++
 .../DtoFlowDemo.vue                           |  338 ++++
 .../LayeredArchitectureDemo.vue               |  352 ++++
 .../RepositoryLayerDemo.vue                   | 1036 ++++++++++
 .../ServiceLayerDemo.vue                      |  698 +++++++
 .../CompositeDemo.vue                         |   50 +
 .../DomToRenderTreeDemo.vue                   |   50 +
 .../LayoutReflowDemo.vue                      |   50 +
 .../MacroMicroTaskDemo.vue                    |   50 +
 .../PaintLayerDemo.vue                        |   50 +
 .../RenderingPerformanceDemo.vue              |   50 +
 .../RenderingPipelineDemo.vue                 |  403 ++++
 .../CacheArchitectureOverview.vue             |   50 +
 .../cache-design/CacheHierarchyDemo.vue       |   50 +
 .../CacheMonitoringDashboardDemo.vue          |   51 +
 .../CachePatternComparisonDemo.vue            |   51 +
 .../EcommerceCacheArchitectureDemo.vue        |   51 +
 .../cloud-iam/AccessKeyManagementDemo.vue     |  505 +++++
 .../appendix/cloud-iam/BestPracticesDemo.vue  |  461 +++++
 .../cloud-iam/CrossAccountAccessDemo.vue      |  196 ++
 .../cloud-iam/IamRamComparisonDemo.vue        |  368 ++++
 .../cloud-iam/IdentityProviderDemo.vue        |  362 ++++
 .../appendix/cloud-iam/MfaSecurityDemo.vue    |  350 ++++
 .../cloud-iam/PermissionHierarchyDemo.vue     |  359 ++++
 .../appendix/cloud-iam/RolePolicyDemo.vue     |  470 +++++
 .../cloud-services/AwsVsAliyunDemo.vue        |  356 ++++
 .../cloud-services/CloudServicesMapDemo.vue   |  590 ++++++
 .../cloud-services/ComputeServicesDemo.vue    |  463 +++++
 .../cloud-services/DatabaseServicesDemo.vue   |  289 +++
 .../cloud-services/K8sServicesDemo.vue        |  223 +++
 .../cloud-services/MonitoringServicesDemo.vue |    0
 .../cloud-services/NetworkServicesDemo.vue    |  637 ++++++
 .../cloud-services/PricingModelDemo.vue       |  181 ++
 .../cloud-services/SecurityServicesDemo.vue   |  511 +++++
 .../cloud-services/ServiceSelectionDemo.vue   |  214 ++
 .../cloud-services/StorageServicesDemo.vue    |  489 +++++
 .../cloud-storage-cdn/AccessAnalyticsDemo.vue |   50 +
 .../cloud-storage-cdn/CachePolicyDemo.vue     |   50 +
 .../cloud-storage-cdn/CdnAccelerationDemo.vue |  696 +++++++
 .../EdgeNodeDistributionDemo.vue              |   50 +
 .../HttpsOptimizationDemo.vue                 |   50 +
 .../cloud-storage-cdn/ObjectStorageDemo.vue   |  590 ++++++
 .../TrafficSchedulingDemo.vue                 |   50 +
 .../cloud-storage-cdn/UploadProcessDemo.vue   |  612 ++++++
 .../cloud-topology/AvailabilityZoneDemo.vue   |  580 ++++++
 .../cloud-topology/ComputeTopologyDemo.vue    |  803 ++++++++
 .../cloud-topology/DisasterRecoveryDemo.vue   |  764 ++++++++
 .../cloud-topology/NetworkFlowDemo.vue        |  651 ++++++
 .../cloud-topology/ResourceTopologyDemo.vue   |  400 ++++
 .../cloud-topology/StorageTopologyDemo.vue    |  875 +++++++++
 .../cloud-topology/SubnetDesignDemo.vue       |  508 +++++
 .../cloud-topology/VpcArchitectureDemo.vue    |  529 +++++
 .../ComponentHierarchyDemo.vue                |  347 ++++
 .../EventBusDemo.vue                          |  599 ++++++
 .../MobxReactivityDemo.vue                    |  639 ++++++
 .../PropsFlowDemo.vue                         |  587 ++++++
 .../ReduxFlowDemo.vue                         |  540 +++++
 .../StateManagementComparisonDemo.vue         |  544 ++++++
 .../VuexPiniaDemo.vue                         |  546 ++++++
 .../ZustandJotaiDemo.vue                      |  823 ++++++++
 .../concurrency-models/AsyncAwaitDemo.vue     |  401 ++++
 .../ConcurrentVsParallelDemo.vue              |  481 +++++
 .../CoroutineLightweightDemo.vue              |  417 ++++
 .../concurrency-models/EventLoopDemo.vue      |  505 +++++
 .../GoroutineGreenThreadDemo.vue              |  439 +++++
 .../ProcessIsolationDemo.vue                  |  324 +++
 .../ProcessThreadCoroutineDemo.vue            |  308 +++
 .../ThreadSchedulingDemo.vue                  |  518 +++++
 .../context-engineering/AgentContextFlow.vue  |  461 +++--
 .../appendix/database-intro/BPlusTreeDemo.vue |   50 +
 .../database-intro/DatabaseEvolutionDemo.vue  |   50 +
 .../database-intro/DatabaseRelationDemo.vue   |   50 +
 .../database-intro/QueryOptimizationDemo.vue  |   50 +
 .../database-intro/TransactionACIDDemo.vue    |   50 +
 .../AssetFingerprintDemo.vue                  |  863 ++++++++
 .../BuildPipelineDemo.vue                     |  588 ++++++
 .../BundlerComparisonDemo.vue                 |  760 ++++++++
 .../CodeSplittingDemo.vue                     |  532 +++++
 .../DependencyGraphDemo.vue                   |  840 ++++++++
 .../frontend-engineering/HotReloadDemo.vue    |  429 ++++
 .../frontend-engineering/SourceMapDemo.vue    |  295 +++
 .../frontend-engineering/TreeShakingDemo.vue  |  336 ++++
 .../frontend-evolution/JQueryVsStateDemo.vue  | 1170 +++++------
 .../frontend-evolution/ResponsiveGridDemo.vue |  779 ++++----
 .../frontend-evolution/SliceRequestDemo.vue   | 1024 +++++-----
 .../frontend-routing/DynamicRoutesDemo.vue    |  366 ++++
 .../frontend-routing/HashVsHistoryDemo.vue    |  445 +++++
 .../frontend-routing/MpaRoutingDemo.vue       |  176 ++
 .../frontend-routing/NestedRoutesDemo.vue     |  492 +++++
 .../frontend-routing/RouteGuardsDemo.vue      |  333 ++++
 .../frontend-routing/RouteMatchingDemo.vue    |  607 ++++++
 .../RouterArchitectureDemo.vue                |  139 ++
 .../frontend-routing/RoutingModesDemo.vue     |  426 ++++
 .../frontend-routing/SpaNavigationDemo.vue    |  108 +
 .../appendix/frontend-routing/index.js        |   10 +
 .../appendix/gateway-proxy/ApiGatewayDemo.vue |  421 ++++
 .../gateway-proxy/AuthMiddlewareDemo.vue      |  686 +++++++
 .../gateway-proxy/LoadBalancingDemo.vue       |  854 ++++++++
 .../gateway-proxy/NginxArchitectureDemo.vue   |  522 +++++
 .../gateway-proxy/RateLimitingDemo.vue        | 1096 +++++++++++
 .../gateway-proxy/ReverseProxyDemo.vue        |  378 ++++
 .../gateway-proxy/RoutingRulesDemo.vue        |  570 ++++++
 .../gateway-proxy/SslTerminationDemo.vue      |  723 +++++++
 .../image-gen-intro/DiffusionProcessDemo.vue  |  512 +++--
 .../image-gen-intro/FlowMatchingDemo.vue      |  526 +++--
 .../ImageGenQuickStartDemo.vue                |  671 ++-----
 .../image-gen-intro/LatentSpaceViz.vue        |  494 ++---
 .../image-gen-intro/PromptVisualizer.vue      |  301 ++-
 .../load-balancing/AutoScalingDemo.vue        |  778 ++++++++
 .../BlueGreenDeploymentDemo.vue               |  924 +++++++++
 .../load-balancing/CanaryReleaseDemo.vue      |  686 +++++++
 .../load-balancing/HealthCheckDemo.vue        |  691 +++++++
 .../load-balancing/LoadBalancerTypesDemo.vue  |  680 +++++++
 .../load-balancing/MultiRegionDemo.vue        |  597 ++++++
 .../load-balancing/SessionPersistenceDemo.vue |  938 +++++++++
 .../load-balancing/WeightedRoutingDemo.vue    |  709 +++++++
 .../appendix/queue-design/IdempotenceDemo.vue |   50 +
 .../queue-design/MQArchitectureDemo.vue       |   50 +
 .../queue-design/MQComparisonDemo.vue         |   50 +
 .../queue-design/ProducerConsumerDemo.vue     |   50 +
 .../appendix/queue-design/ReliabilityDemo.vue |   50 +
 docs/.vitepress/theme/index.js                |  272 +++
 docs/zh-cn/appendix/api-design.md             |  989 ++++++++++
 docs/zh-cn/appendix/backend-evolution.md      |  429 ++--
 docs/zh-cn/appendix/backend-languages.md      | 1611 ++++++++-------
 .../appendix/backend-layered-architecture.md  |  989 ++++++++++
 .../appendix/browser-rendering-pipeline.md    |  883 +++++++++
 docs/zh-cn/appendix/cache-design.md           | 1389 +++++--------
 docs/zh-cn/appendix/cloud-iam.md              |  761 ++++++++
 docs/zh-cn/appendix/cloud-services.md         |  329 ++++
 docs/zh-cn/appendix/cloud-storage-cdn.md      | 1733 ++++++++++++++++
 .../appendix/component-state-management.md    | 1737 +++++++++++++++++
 docs/zh-cn/appendix/concurrency-models.md     |  886 +++++++++
 docs/zh-cn/appendix/context-engineering.md    |    2 +
 docs/zh-cn/appendix/database-intro.md         |  313 ++-
 docs/zh-cn/appendix/frontend-engineering.md   |  772 ++++++++
 docs/zh-cn/appendix/frontend-routing.md       |  575 ++++++
 docs/zh-cn/appendix/gateway-proxy.md          | 1490 ++++++++++++++
 docs/zh-cn/appendix/image-gen-intro.md        |  195 +-
 docs/zh-cn/appendix/load-balancing.md         |  481 +++++
 docs/zh-cn/appendix/queue-design.md           | 1544 +++++++--------
 .../index.md                                  |    2 +
 .../1.1-introduction-to-ai-ide/index.md       |   17 +-
 package-lock.json                             |  594 +-----
 package.json                                  |    1 -
 171 files changed, 69830 insertions(+), 6689 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/MonitoringServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/frontend-routing/index.js
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
 create mode 100644 docs/zh-cn/appendix/api-design.md
 create mode 100644 docs/zh-cn/appendix/backend-layered-architecture.md
 create mode 100644 docs/zh-cn/appendix/browser-rendering-pipeline.md
 create mode 100644 docs/zh-cn/appendix/cloud-iam.md
 create mode 100644 docs/zh-cn/appendix/cloud-services.md
 create mode 100644 docs/zh-cn/appendix/cloud-storage-cdn.md
 create mode 100644 docs/zh-cn/appendix/component-state-management.md
 create mode 100644 docs/zh-cn/appendix/concurrency-models.md
 create mode 100644 docs/zh-cn/appendix/frontend-engineering.md
 create mode 100644 docs/zh-cn/appendix/frontend-routing.md
 create mode 100644 docs/zh-cn/appendix/gateway-proxy.md
 create mode 100644 docs/zh-cn/appendix/load-balancing.md

diff --git a/CLAUDE.md b/CLAUDE.md
index 68ec47d..4b9ed16 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is **Easy-Vibe**, an educational curriculum for learning AI Vibe Coding from zero to advanced levels. It's a documentation-based project using **VitePress** to serve educational content about AI-assisted software development.
+**Easy-Vibe** is an educational curriculum for learning AI Vibe Coding from zero to advanced levels. It's a documentation-based project using **VitePress** to serve educational content about AI-assisted software development.
 
 The curriculum follows a progressive four-stage structure:
 
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 11a3c41..01a2e47 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -606,6 +606,22 @@ export default defineConfig({
                 {
                   text: '浏览器调试器',
                   link: '/zh-cn/appendix/browser-devtools'
+                },
+                {
+                  text: '浏览器渲染原理',
+                  link: '/zh-cn/appendix/browser-rendering-pipeline'
+                },
+                {
+                  text: '前端路由原理',
+                  link: '/zh-cn/appendix/frontend-routing'
+                },
+                {
+                  text: '组件状态管理',
+                  link: '/zh-cn/appendix/component-state-management'
+                },
+                {
+                  text: '前端工程化',
+                  link: '/zh-cn/appendix/frontend-engineering'
                 }
               ]
             },
@@ -617,18 +633,50 @@ export default defineConfig({
                   text: '后端进化史',
                   link: '/zh-cn/appendix/backend-evolution'
                 },
+                {
+                  text: '后端分层架构',
+                  link: '/zh-cn/appendix/backend-layered-architecture'
+                },
                 {
                   text: '后端编程语言',
                   link: '/zh-cn/appendix/backend-languages'
                 },
+                {
+                  text: '并发编程模型',
+                  link: '/zh-cn/appendix/concurrency-models'
+                },
+                {
+                  text: '接口设计规范',
+                  link: '/zh-cn/appendix/api-design'
+                },
                 { text: '数据库原理', link: '/zh-cn/appendix/database-intro' },
                 { text: '系统缓存设计', link: '/zh-cn/appendix/cache-design' },
                 { text: '消息队列设计', link: '/zh-cn/appendix/queue-design' },
                 { text: '鉴权原理与实战', link: '/zh-cn/appendix/auth-design' },
+                { text: '网关与反向代理', link: '/zh-cn/appendix/gateway-proxy' },
+                { text: '负载均衡策略', link: '/zh-cn/appendix/load-balancing' },
                 { text: '埋点设计', link: '/zh-cn/appendix/tracking-design' },
                 { text: '线上运维', link: '/zh-cn/appendix/operations' }
               ]
             },
+            {
+              text: '云计算与服务',
+              collapsed: false,
+              items: [
+                {
+                  text: '云服务基础',
+                  link: '/zh-cn/appendix/cloud-services'
+                },
+                {
+                  text: 'IAM 权限管理',
+                  link: '/zh-cn/appendix/cloud-iam'
+                },
+                {
+                  text: '对象存储与 CDN',
+                  link: '/zh-cn/appendix/cloud-storage-cdn'
+                }
+              ]
+            },
             {
               text: '通用技能',
               collapsed: false,
diff --git a/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
new file mode 100644
index 0000000..ea59c4f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        文档演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('API文档演示')
+const description = ref('展示RESTful API文档的编写规范和最佳实践，包括Swagger、OpenAPI等工具的使用')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
new file mode 100644
index 0000000..ecc0d11
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>错误处理演示</h4>
+      <p class="hint">展示RESTful API中的错误处理机制</p>
+    </div>
+    <div class="demo-content">
+      <div class="error-types">
+        <div class="error-item">
+          <span class="code">400</span>
+          <span class="name">Bad Request</span>
+          <span class="desc">请求参数错误</span>
+        </div>
+        <div class="error-item">
+          <span class="code">401</span>
+          <span class="name">Unauthorized</span>
+          <span class="desc">未授权访问</span>
+        </div>
+        <div class="error-item">
+          <span class="code">404</span>
+          <span class="name">Not Found</span>
+          <span class="desc">资源不存在</span>
+        </div>
+        <div class="error-item">
+          <span class="code">500</span>
+          <span class="name">Server Error</span>
+          <span class="desc">服务器内部错误</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.error-types {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.error-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border-left: 4px solid #f56c6c;
+}
+
+.error-item .code {
+  font-family: monospace;
+  font-weight: 600;
+  color: #f56c6c;
+  font-size: 16px;
+  min-width: 50px;
+}
+
+.error-item .name {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  min-width: 120px;
+}
+
+.error-item .desc {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
new file mode 100644
index 0000000..895009a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
@@ -0,0 +1,428 @@
+<!--
+  HttpMethodsDemo.vue - HTTP 方法对比演示组件
+  展示 GET/POST/PUT/PATCH/DELETE 的区别和使用场景
+-->
+<template>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">🎯</span>
+      <span class="title">HTTP 方法：用正确的姿势操作资源</span>
+    </div>
+
+    <div class="content">
+      <!-- HTTP 方法选择器 -->
+      <div class="method-selector">
+        <button
+          v-for="method in methods"
+          :key="method.name"
+          class="method-btn"
+          :class="[method.name, { active: selectedMethod === method.name }]"
+          @click="selectedMethod = method.name"
+        >
+          {{ method.name }}
+        </button>
+      </div>
+
+      <!-- 当前方法详情 -->
+      <div class="method-detail" v-if="currentMethod">
+        <div class="detail-header">
+          <span class="http-badge" :class="currentMethod.name">{{ currentMethod.name }}</span>
+          <span class="method-desc">{{ currentMethod.description }}</span>
+        </div>
+
+        <div class="properties">
+          <div class="property" :class="{ yes: currentMethod.idempotent }">
+            <span class="prop-icon">{{ currentMethod.idempotent ? '✅' : '❌' }}</span>
+            <span class="prop-label">幂等性</span>
+            <span class="prop-hint">{{ currentMethod.idempotent ? '多次执行结果相同' : '每次执行可能产生不同结果' }}</span>
+          </div>
+          <div class="property" :class="{ yes: currentMethod.safe }">
+            <span class="prop-icon">{{ currentMethod.safe ? '✅' : '❌' }}</span>
+            <span class="prop-label">安全性</span>
+            <span class="prop-hint">{{ currentMethod.safe ? '不修改服务器状态' : '可能会修改服务器状态' }}</span>
+          </div>
+          <div class="property has-body">
+            <span class="prop-icon">{{ currentMethod.hasBody ? '✅' : '❌' }}</span>
+            <span class="prop-label">请求体</span>
+            <span class="prop-hint">{{ currentMethod.hasBody ? '可以携带请求体数据' : '通常不携带请求体' }}</span>
+          </div>
+        </div>
+
+        <div class="example-section">
+          <div class="example-title">📝 使用示例</div>
+          <div class="example-content">
+            <div class="example-item" v-for="(example, idx) in currentMethod.examples" :key="idx">
+              <div class="example-scenario">{{ example.scenario }}</div>
+              <div class="example-request">
+                <span class="http-method" :class="currentMethod.name">{{ currentMethod.name }}</span>
+                <span class="request-url">{{ example.url }}</span>
+              </div>
+              <div class="example-body" v-if="example.body">
+                <pre><code>{{ JSON.stringify(example.body, null, 2) }}</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const methods = [
+  {
+    name: 'GET',
+    description: '获取资源',
+    idempotent: true,
+    safe: true,
+    hasBody: false,
+    examples: [
+      {
+        scenario: '获取用户列表',
+        url: '/api/v1/users?page=1&page_size=20'
+      },
+      {
+        scenario: '获取单个用户详情',
+        url: '/api/v1/users/123'
+      }
+    ]
+  },
+  {
+    name: 'POST',
+    description: '创建资源',
+    idempotent: false,
+    safe: false,
+    hasBody: true,
+    examples: [
+      {
+        scenario: '创建新用户',
+        url: '/api/v1/users',
+        body: {
+          name: '张三',
+          email: 'zhangsan@example.com',
+          phone: '13800138000'
+        }
+      },
+      {
+        scenario: '提交订单',
+        url: '/api/v1/orders',
+        body: {
+          user_id: 123,
+          items: [
+            { product_id: 'P001', quantity: 2 },
+            { product_id: 'P002', quantity: 1 }
+          ],
+          shipping_address: {...}
+        }
+      }
+    ]
+  },
+  {
+    name: 'PUT',
+    description: '全量更新资源',
+    idempotent: true,
+    safe: false,
+    hasBody: true,
+    examples: [
+      {
+        scenario: '更新用户全部信息（替换）',
+        url: '/api/v1/users/123',
+        body: {
+          id: 123,
+          name: '张三（已更新）',
+          email: 'zhangsan_new@example.com',
+          phone: '13900139000',
+          avatar: 'https://...',
+          status: 'active'
+        }
+      }
+    ]
+  },
+  {
+    name: 'PATCH',
+    description: '部分更新资源',
+    idempotent: false,
+    safe: false,
+    hasBody: true,
+    examples: [
+      {
+        scenario: '仅修改用户邮箱',
+        url: '/api/v1/users/123',
+        body: {
+          email: 'newemail@example.com'
+        }
+      },
+      {
+        scenario: '更新多个字段',
+        url: '/api/v1/users/123',
+        body: {
+          phone: '13800138000',
+          avatar: 'https://...'
+        }
+      }
+    ]
+  },
+  {
+    name: 'DELETE',
+    description: '删除资源',
+    idempotent: true,
+    safe: false,
+    hasBody: false,
+    examples: [
+      {
+        scenario: '删除单个用户',
+        url: '/api/v1/users/123'
+      },
+      {
+        scenario: '批量删除（通过查询参数）',
+        url: '/api/v1/users?ids=1,2,3,4,5'
+      }
+    ]
+  }
+]
+
+const selectedMethod = ref('GET')
+const currentMethod = computed(() =>
+  methods.find(m => m.name === selectedMethod.value)
+)
+</script>
+
+<style scoped>
+.demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.method-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.method-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.method-btn:hover {
+  transform: translateY(-1px);
+}
+
+.method-btn.active {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* HTTP 方法颜色 */
+.method-btn.GET, .http-method.GET { border-color: #22c55e; color: #16a34a; }
+.method-btn.GET.active, .http-badge.GET { background: #22c55e; color: white; }
+
+.method-btn.POST, .http-method.POST { border-color: #3b82f6; color: #2563eb; }
+.method-btn.POST.active, .http-badge.POST { background: #3b82f6; color: white; }
+
+.method-btn.PUT, .http-method.PUT { border-color: #f59e0b; color: #d97706; }
+.method-btn.PUT.active, .http-badge.PUT { background: #f59e0b; color: white; }
+
+.method-btn.PATCH, .http-method.PATCH { border-color: #8b5cf6; color: #7c3aed; }
+.method-btn.PATCH.active, .http-badge.PATCH { background: #8b5cf6; color: white; }
+
+.method-btn.DELETE, .http-method.DELETE { border-color: #ef4444; color: #dc2626; }
+.method-btn.DELETE.active, .http-badge.DELETE { background: #ef4444; color: white; }
+
+.method-detail {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.http-badge {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.method-desc {
+  font-size: 15px;
+  color: var(--vp-c-text-2);
+}
+
+.properties {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.property {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  opacity: 0.6;
+  transition: all 0.2s ease;
+}
+
+.property.yes {
+  opacity: 1;
+  border-color: #22c55e;
+  background: #f0fdf4;
+}
+
+.property.has-body {
+  opacity: 1;
+}
+
+.property.has-body:not(.yes) {
+  border-color: #f59e0b;
+  background: #fffbeb;
+}
+
+.prop-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.prop-label {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 2px;
+}
+
+.prop-hint {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  text-align: center;
+}
+
+.example-section {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.example-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+}
+
+.example-item {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.example-item:last-child {
+  margin-bottom: 0;
+}
+
+.example-scenario {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
+}
+
+.example-request {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.http-method {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 700;
+  font-size: 11px;
+  background: var(--vp-c-bg);
+}
+
+.request-url {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+
+.example-body {
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.example-body pre {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.4;
+  overflow-x: auto;
+}
+
+.example-body code {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 640px) {
+  .properties {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
new file mode 100644
index 0000000..b934ffd
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>HTTP 请求结构解析</h4>
+      <p class="hint">详解 HTTP 请求的组成部分</p>
+    </div>
+    <div class="demo-content">
+      <div class="structure-box">
+        <div class="section request-line">
+          <div class="label">请求行</div>
+          <div class="content">
+            <code>GET /api/users/123 HTTP/1.1</code>
+          </div>
+          <div class="explain">
+            <span>方法</span> + <span>路径</span> + <span>协议版本</span>
+          </div>
+        </div>
+
+        <div class="section headers">
+          <div class="label">请求头</div>
+          <div class="content header-list">
+            <div><code>Host: api.example.com</code></div>
+            <div><code>Content-Type: application/json</code></div>
+            <div><code>Authorization: Bearer token123</code></div>
+          </div>
+          <div class="explain">元信息：域名、数据格式、认证等</div>
+        </div>
+
+        <div class="section body">
+          <div class="label">请求体 (可选)</div>
+          <div class="content">
+            <pre>{
+  "name": "张三",
+  "email": "zhangsan@example.com"
+}</pre>
+          </div>
+          <div class="explain">POST/PUT 请求携带的数据</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 纯静态展示组件
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.structure-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid var(--vp-c-brand);
+}
+
+.section.headers {
+  border-left-color: #67c23a;
+}
+
+.section.body {
+  border-left-color: #e6a23c;
+}
+
+.label {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.content {
+  background: #1e1e1e;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+}
+
+.content code {
+  color: #d4d4d4;
+  font-family: 'Fira Code', monospace;
+  font-size: 13px;
+}
+
+.content pre {
+  margin: 0;
+  color: #d4d4d4;
+  font-family: 'Fira Code', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.header-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.explain {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.explain span {
+  display: inline-block;
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin: 0 2px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue b/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
new file mode 100644
index 0000000..30ed491
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>RESTful 资源类比</h4>
+      <p class="hint">通过生活中的类比理解 RESTful 资源概念</p>
+    </div>
+    <div class="demo-content">
+      <div class="analogy-box">
+        <div class="analogy-item">
+          <div class="icon">📚</div>
+          <div class="text">
+            <strong>资源 = 图书</strong>
+            <p>每本书有唯一的 ISBN（资源标识）</p>
+          </div>
+        </div>
+        <div class="analogy-item">
+          <div class="icon">🏪</div>
+          <div class="text">
+            <strong>URL = 书架位置</strong>
+            <p>/library/books/123 表示第 123 号书</p>
+          </div>
+        </div>
+        <div class="analogy-item">
+          <div class="icon">📝</div>
+          <div class="text">
+            <strong>HTTP 方法 = 操作</strong>
+            <p>GET(查看)、POST(借书)、PUT(修改)、DELETE(还书)</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 静态组件，无需逻辑
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.analogy-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.analogy-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+}
+
+.icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.text {
+  flex: 1;
+}
+
+.text strong {
+  display: block;
+  color: var(--vp-c-text-1);
+  margin-bottom: 4px;
+}
+
+.text p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
new file mode 100644
index 0000000..7144057
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        响应结构演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('HTTP响应结构演示')
+const description = ref('展示HTTP响应的结构，包括状态行、响应头和响应体')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
new file mode 100644
index 0000000..0a7f26f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="restful-design-demo">
+    <div class="header">
+      <div class="title">RESTful API 设计核心原则</div>
+      <div class="subtitle">
+        REST（Representational State Transfer）是一种架构风格，让接口设计像自然资源一样直观
+      </div>
+    </div>
+
+    <div class="principles-grid">
+      <div
+        v-for="principle in principles"
+        :key="principle.id"
+        class="principle-card"
+        :class="{ active: selectedPrinciple === principle.id }"
+        @click="selectedPrinciple = principle.id"
+      >
+        <div class="principle-icon">{{ principle.icon }}</div>
+        <div class="principle-name">{{ principle.name }}</div>
+        <div class="principle-brief">{{ principle.brief }}</div>
+      </div>
+    </div>
+
+    <div class="detail-panel">
+      <div class="detail-header">
+        <span class="detail-title">{{ activePrinciple.name }}</span>
+        <span class="detail-tag">{{ activePrinciple.tag }}</span>
+      </div>
+
+      <div class="detail-content">
+        <div class="explanation">
+          <h4>核心概念</h4>
+          <p>{{ activePrinciple.explanation }}</p>
+        </div>
+
+        <div class="comparison">
+          <h4>对比示例</h4>
+          <div class="code-comparison">
+            <div class="code-block bad">
+              <div class="code-label">传统方式（不推荐）</div>
+              <pre><code>{{ activePrinciple.badExample }}</code></pre>
+            </div>
+            <div class="code-block good">
+              <div class="code-label">RESTful 方式（推荐）</div>
+              <pre><code>{{ activePrinciple.goodExample }}</code></pre>
+            </div>
+          </div>
+        </div>
+
+        <div class="tips">
+          <h4>设计要点</h4>
+          <ul>
+            <li v-for="(tip, index) in activePrinciple.tips" :key="index">{{ tip }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const principles = [
+  {
+    id: 'resource',
+    name: '资源导向',
+    icon: '📦',
+    brief: 'URL 表示资源，而非动作',
+    tag: '核心原则',
+    explanation: '将系统中的实体抽象为资源（Resource），每个资源对应唯一的 URL。资源是名词，而不是动词或动作。',
+    badExample: `GET /getUserById?id=123
+GET /deleteOrder?orderId=456
+POST /createProduct`,
+    goodExample: `GET /users/123
+DELETE /orders/456
+POST /products`,
+    tips: [
+      '使用名词复数形式（/users 而非 /user）',
+      '避免在 URL 中出现动词（get、create、delete 等）',
+      '资源层级用路径表示（/users/123/orders）',
+      '资源名使用小写字母，多个单词用连字符（/order-items）'
+    ]
+  },
+  {
+    id: 'method',
+    name: 'HTTP 方法',
+    icon: '🎯',
+    brief: '用 HTTP 方法表达操作语义',
+    tag: '动作表达',
+    explanation: '使用标准的 HTTP 方法（GET、POST、PUT、DELETE 等）来表示对资源的操作类型，让接口语义更加清晰。',
+    badExample: `POST /users/query   // 查询用户
+POST /users/create  // 创建用户
+POST /users/update  // 更新用户
+POST /users/delete  // 删除用户`,
+    goodExample: `GET    /users      // 查询用户列表
+POST   /users      // 创建用户
+GET    /users/123 // 查询单个用户
+PUT    /users/123 // 全量更新用户
+PATCH  /users/123 // 部分更新用户
+DELETE /users/123 // 删除用户`,
+    tips: [
+      'GET 用于获取资源，是幂等且安全的',
+      'POST 用于创建资源，返回 201 和新资源 URI',
+      'PUT 用于全量更新，替换整个资源',
+      'PATCH 用于部分更新，只修改指定字段',
+      'DELETE 用于删除资源，返回 204 或 200'
+    ]
+  },
+  {
+    id: 'stateless',
+    name: '无状态',
+    icon: '🔄',
+    brief: '每个请求独立，服务端不保存会话',
+    tag: '可扩展性',
+    explanation: '服务端不保存客户端的上下文状态，每个请求都必须包含服务端处理该请求所需的全部信息。这让系统更容易水平扩展。',
+    badExample: `// 服务端维护会话状态
+POST /login
+→ 服务端创建 session，返回 session_id cookie
+
+GET /profile
+→ 服务端根据 session_id 查找用户
+→ 如果会话过期，需要重新登录`,
+    goodExample: `// 无状态认证
+POST /auth/token
+→ 验证凭证，返回 JWT token
+
+GET /profile
+Authorization: Bearer <token>
+→ 服务端验证 token，提取用户信息
+→ 请求独立，可随时扩展到多台服务器`,
+    tips: [
+      '使用 JWT 或 API Key 进行无状态认证',
+      '避免在服务端存储会话状态',
+      '每个请求包含完整的认证信息',
+      '便于负载均衡和水平扩展',
+      '使用 Redis 等缓存共享必要的状态数据'
+    ]
+  },
+  {
+    id: 'representation',
+    name: '统一表现',
+    icon: '📋',
+    brief: '使用标准数据格式',
+    tag: '数据交换',
+    explanation: '资源的表示（Representation）应该使用标准的数据格式，通常是 JSON。客户端可以通过 Accept 头部请求不同的表示格式。',
+    badExample: `// 混合格式，字段不一致
+GET /users
+{
+  "user_list": [...],
+  "total_count": 100
+}
+
+GET /orders
+{
+  "data": [...],
+  "pagination": {
+    "total": 100,
+    "page": 1
+  }
+}`,
+    goodExample: `// 统一的响应结构
+GET /users
+{
+  "code": 200,
+  "message": "success",
+  "data": {
+    "items": [...],
+    "pagination": {
+      "total": 100,
+      "page": 1,
+      "page_size": 20
+    }
+  },
+  "timestamp": "2024-01-15T10:30:00Z"
+}`,
+    tips: [
+      '使用 JSON 作为默认数据格式',
+      '统一的响应结构（code、message、data）',
+      '支持字段过滤（fields=id,name,email）',
+      '日期使用 ISO 8601 格式',
+      '字段命名使用 camelCase 或 snake_case，保持一致'
+    ]
+  }
+]
+
+const selectedPrinciple = ref('resource')
+const activePrinciple = computed(() =>
+  principles.find(p => p.id === selectedPrinciple.value) || principles[0]
+)
+</script>
+
+<style scoped>
+.restful-design-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 800;
+  font-size: 1.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  margin-top: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.principles-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.principle-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.principle-card:hover {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.5);
+}
+
+.principle-card.active {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.8);
+  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.15);
+}
+
+.principle-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.principle-name {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.principle-brief {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.detail-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1.25rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-tag {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.detail-content h4 {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin: 1rem 0 0.5rem;
+}
+
+.explanation p {
+  color: var(--vp-c-text-2);
+  line-height: 1.7;
+}
+
+.code-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.code-block {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-block.bad {
+  border: 1px solid #ef4444;
+}
+
+.code-block.good {
+  border: 1px solid #22c55e;
+}
+
+.code-label {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+}
+
+.code-block.bad .code-label {
+  background: #ef4444;
+}
+
+.code-block.good .code-label {
+  background: #22c55e;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  font-size: 0.8rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.tips ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--vp-c-text-2);
+}
+
+.tips li {
+  margin: 0.4rem 0;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .principles-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .code-comparison {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
new file mode 100644
index 0000000..043490f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
@@ -0,0 +1,618 @@
+<!--
+  StatusCodeDemo.vue - HTTP 状态码演示组件
+  展示常见 HTTP 状态码的含义和使用场景
+-->
+<template>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">📡</span>
+      <span class="title">HTTP 状态码：服务器的"情绪表达"</span>
+    </div>
+
+    <div class="content">
+      <div class="category-tabs">
+        <button
+          v-for="category in categories"
+          :key="category.code"
+          class="category-btn"
+          :class="[category.class, { active: selectedCategory === category.code }]"
+          @click="selectedCategory = category.code"
+        >
+          <span class="category-code">{{ category.code }}xx</span>
+          <span class="category-name">{{ category.name }}</span>
+        </button>
+      </div>
+
+      <div class="status-codes" v-if="filteredCodes.length > 0">
+        <div
+          v-for="code in filteredCodes"
+          :key="code.number"
+          class="status-card"
+          :class="{ expanded: expandedCode === code.number }"
+          @click="toggleExpand(code.number)"
+        >
+          <div class="status-header">
+            <span class="status-number" :class="getCategoryClass(code.number)">{{ code.number }}</span>
+            <span class="status-name">{{ code.name }}</span>
+            <span class="expand-icon">{{ expandedCode === code.number ? '▼' : '▶' }}</span>
+          </div>
+
+          <div class="status-detail" v-show="expandedCode === code.number">
+            <div class="detail-section">
+              <h4>💡 含义解释</h4>
+              <p>{{ code.description }}</p>
+            </div>
+
+            <div class="detail-section">
+              <h4>📝 使用场景</h4>
+              <ul>
+                <li v-for="(scenario, idx) in code.scenarios" :key="idx">{{ scenario }}</li>
+              </ul>
+            </div>
+
+            <div class="detail-section" v-if="code.example">
+              <h4>💻 示例代码</h4>
+              <div class="code-example">
+                <div class="code-request">
+                  <span class="method-badge" :class="getCategoryClass(code.number)">{{ code.example.method }}</span>
+                  <code>{{ code.example.path }}</code>
+                </div>
+                <div class="code-response">
+                  <pre><code>{{ JSON.stringify(code.example.response, null, 2) }}</code></pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const categories = [
+  { code: '2', name: '成功', class: 'success' },
+  { code: '3', name: '重定向', class: 'redirect' },
+  { code: '4', name: '客户端错误', class: 'client-error' },
+  { code: '5', name: '服务器错误', class: 'server-error' }
+]
+
+const statusCodes = [
+  {
+    number: 200,
+    name: 'OK',
+    description: '请求已成功处理。这是最常用的成功状态码。',
+    scenarios: [
+      'GET 请求成功返回数据',
+      'POST 请求成功处理但未创建新资源',
+      'PUT/PATCH 更新成功'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/users/123',
+      response: {
+        code: 0,
+        data: {
+          id: 123,
+          name: '张三',
+          email: 'zhangsan@example.com'
+        }
+      }
+    }
+  },
+  {
+    number: 201,
+    name: 'Created',
+    description: '请求成功处理并创建了新的资源。通常用于 POST 请求。',
+    scenarios: [
+      '成功创建用户账号',
+      '成功创建订单',
+      '成功上传文件'
+    ],
+    example: {
+      method: 'POST',
+      path: '/api/v1/users',
+      response: {
+        code: 0,
+        data: {
+          id: 124,
+          name: '李四',
+          created_at: '2024-01-15T10:30:00Z'
+        }
+      }
+    }
+  },
+  {
+    number: 204,
+    name: 'No Content',
+    description: '请求成功处理，但响应中没有返回内容。',
+    scenarios: [
+      'DELETE 删除成功',
+      'PUT/PATCH 更新成功但无需返回数据',
+      '预检请求（OPTIONS）响应'
+    ],
+    example: {
+      method: 'DELETE',
+      path: '/api/v1/users/123',
+      response: null
+    }
+  },
+  {
+    number: 301,
+    name: 'Moved Permanently',
+    description: '请求的资源已永久移动到新的 URL。',
+    scenarios: [
+      'API 版本升级，旧版本废弃',
+      '网站重构，URL 结构变更',
+      '资源合并或重命名'
+    ]
+  },
+  {
+    number: 304,
+    name: 'Not Modified',
+    description: '资源自上次请求以来未被修改，客户端可使用缓存版本。',
+    scenarios: [
+      '客户端带有 If-None-Match 或 If-Modified-Since 头部',
+      '静态资源缓存优化',
+      '减少不必要的数据传输'
+    ]
+  },
+  {
+    number: 400,
+    name: 'Bad Request',
+    description: '请求语法错误或参数无效，服务器无法理解请求。',
+    scenarios: [
+      '请求体格式不正确（如 JSON 语法错误）',
+      '缺少必填参数',
+      '参数类型不匹配（字符串传数字）'
+    ],
+    example: {
+      method: 'POST',
+      path: '/api/v1/users',
+      response: {
+        code: 10001,
+        message: '参数校验失败',
+        errors: [
+          { field: 'email', message: '邮箱格式不正确' }
+        ]
+      }
+    }
+  },
+  {
+    number: 401,
+    name: 'Unauthorized',
+    description: '请求需要用户身份验证，但未提供或凭证无效。',
+    scenarios: [
+      '未登录就访问受保护资源',
+      'Token 过期或无效',
+      '缺少 Authorization 头部'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/user/profile',
+      response: {
+        code: 10018,
+        message: '认证令牌已过期，请重新登录'
+      }
+    }
+  },
+  {
+    number: 403,
+    name: 'Forbidden',
+    description: '服务器理解请求，但拒绝执行（权限不足）。',
+    scenarios: [
+      '已登录但访问了没有权限的资源',
+      '普通用户尝试访问管理员功能',
+      '账号被禁用或权限被撤销'
+    ],
+    example: {
+      method: 'DELETE',
+      path: '/api/v1/users/456',
+      response: {
+        code: 10021,
+        message: '权限不足，需要管理员权限才能删除用户'
+      }
+    }
+  },
+  {
+    number: 404,
+    name: 'Not Found',
+    description: '服务器找不到请求的资源。',
+    scenarios: [
+      'URL 拼写错误',
+      '资源已被删除或不存在',
+      'API 版本已废弃'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/users/99999',
+      response: {
+        code: 10002,
+        message: '用户不存在'
+      }
+    }
+  },
+  {
+    number: 409,
+    name: 'Conflict',
+    description: '请求与服务器当前状态冲突（如资源重复）。',
+    scenarios: [
+      '尝试创建已存在的用户（唯一约束冲突）',
+      '乐观锁版本号不匹配',
+      '并发修改导致的状态冲突'
+    ],
+    example: {
+      method: 'POST',
+      path: '/api/v1/users',
+      response: {
+        code: 10011,
+        message: '邮箱已被注册'
+      }
+    }
+  },
+  {
+    number: 422,
+    name: 'Unprocessable Entity',
+    description: '请求格式正确，但语义上有错误（验证失败）。',
+    scenarios: [
+      '请求体 JSON 格式正确，但字段值不符合业务规则',
+      '密码强度不足',
+      '余额不足无法完成支付'
+    ],
+    example: {
+      method: 'POST',
+      path: '/api/v1/orders',
+      response: {
+        code: 10014,
+        message: '订单金额不能为负数'
+      }
+    }
+  },
+  {
+    number: 429,
+    name: 'Too Many Requests',
+    description: '客户端发送请求过多，触发了限流。',
+    scenarios: [
+      '短时间内大量请求',
+      '超出 API 配额限制',
+      '触发防刷机制'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/data',
+      response: {
+        code: 10005,
+        message: '请求过于频繁，请 60 秒后重试'
+      }
+    }
+  },
+  {
+    number: 500,
+    name: 'Internal Server Error',
+    description: '服务器内部错误，无法完成请求。',
+    scenarios: [
+      '代码抛出未捕获的异常',
+      '数据库连接失败',
+      '依赖服务不可用'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/users',
+      response: {
+        code: 10000,
+        message: '服务器内部错误，请联系管理员'
+      }
+    }
+  },
+  {
+    number: 502,
+    name: 'Bad Gateway',
+    description: '网关或代理从上游服务器收到无效响应。',
+    scenarios: [
+      '反向代理（Nginx）无法连接到后端服务',
+      '后端服务崩溃或重启中',
+      '网关配置错误'
+    ]
+  },
+  {
+    number: 503,
+    name: 'Service Unavailable',
+    description: '服务器暂时无法处理请求（维护或过载）。',
+    scenarios: [
+      '服务器正在进行维护',
+      '服务器过载，触发熔断',
+      '依赖服务大面积故障'
+    ],
+    example: {
+      method: 'GET',
+      path: '/api/v1/status',
+      response: {
+        code: 10007,
+        message: '服务维护中，预计 10 分钟后恢复'
+      }
+    }
+  },
+  {
+    number: 504,
+    name: 'Gateway Timeout',
+    description: '网关或代理等待上游服务器响应超时。',
+    scenarios: [
+      '后端处理时间过长',
+      '网络延迟或丢包',
+      '数据库查询超时'
+    ]
+  }
+]
+
+const selectedCategory = ref('2')
+const expandedCode = ref(null)
+
+const filteredCodes = computed(() => {
+  const prefix = selectedCategory.value
+  return statusCodes.filter(code => {
+    const codePrefix = Math.floor(code.number / 100).toString()
+    return codePrefix === prefix
+  })
+})
+
+function getCategoryClass(number) {
+  const prefix = Math.floor(number / 100)
+  switch (prefix) {
+    case 2: return 'success'
+    case 3: return 'redirect'
+    case 4: return 'client-error'
+    case 5: return 'server-error'
+    default: return ''
+  }
+}
+
+function toggleExpand(number) {
+  expandedCode.value = expandedCode.value === number ? null : number
+}
+</script>
+
+<style scoped>
+.demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.category-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.category-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 100px;
+}
+
+.category-btn:hover {
+  transform: translateY(-2px);
+}
+
+.category-btn.active {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 分类颜色 */
+.category-btn.success, .status-number.success { border-color: #22c55e; color: #16a34a; }
+.category-btn.success.active { background: #22c55e; color: white; }
+
+.category-btn.redirect, .status-number.redirect { border-color: #3b82f6; color: #2563eb; }
+.category-btn.redirect.active { background: #3b82f6; color: white; }
+
+.category-btn.client-error, .status-number.client-error { border-color: #f59e0b; color: #d97706; }
+.category-btn.client-error.active { background: #f59e0b; color: white; }
+
+.category-btn.server-error, .status-number.server-error { border-color: #ef4444; color: #dc2626; }
+.category-btn.server-error.active { background: #ef4444; color: white; }
+
+.category-code {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.category-name {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.status-codes {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.status-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.status-card:hover {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.5);
+}
+
+.status-card.expanded {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.8);
+  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.status-number {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid;
+}
+
+.status-name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.expand-icon {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.status-detail {
+  padding: 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.detail-section {
+  margin-bottom: 16px;
+}
+
+.detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.detail-section h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 8px 0;
+}
+
+.detail-section p {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.detail-section ul {
+  margin: 0;
+  padding-left: 16px;
+}
+
+.detail-section li {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 4px 0;
+}
+
+.code-example {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-request {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.method-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 700;
+  font-size: 11px;
+  background: var(--vp-c-bg);
+  border: 1px solid;
+}
+
+.code-request code {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+
+.code-response {
+  padding: 12px;
+  background: var(--vp-c-bg);
+}
+
+.code-response pre {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code-response code {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 640px) {
+  .category-tabs {
+    flex-direction: column;
+  }
+
+  .category-btn {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .status-header {
+    flex-wrap: wrap;
+  }
+
+  .code-request {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
new file mode 100644
index 0000000..cdce418
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        版本策略演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('版本策略演示')
+const description = ref('展示API版本控制的策略，包括URL版本、Header版本、内容协商等方式')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
new file mode 100644
index 0000000..429024c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="architecture-comparison-demo">
+    <div class="demo-header">
+      <h4>🏗️ 架构演进对比</h4>
+      <p>四个时代的核心架构特征对比</p>
+    </div>
+
+    <div class="comparison-grid">
+      <div class="era-card" v-for="era in eras" :key="era.name" :class="{ active: selectedEra === era.name }" @click="selectedEra = era.name">
+        <div class="era-icon">{{ era.icon }}</div>
+        <div class="era-name">{{ era.name }}</div>
+        <div class="era-year">{{ era.year }}</div>
+        <div class="era-tag">{{ era.tag }}</div>
+      </div>
+    </div>
+
+    <div class="detail-panel" v-if="selectedEra">
+      <div class="detail-header">
+        <span class="detail-icon">{{ currentEra.icon }}</span>
+        <h5>{{ currentEra.name }} ({{ currentEra.year }})</h5>
+      </div>
+
+      <div class="detail-content">
+        <div class="feature-section">
+          <h6>🏗️ 架构特征</h6>
+          <ul>
+            <li v-for="(feat, i) in currentEra.features" :key="i">{{ feat }}</li>
+          </ul>
+        </div>
+
+        <div class="feature-section">
+          <h6>✅ 优点</h6>
+          <ul>
+            <li v-for="(pro, i) in currentEra.pros" :key="i">{{ pro }}</li>
+          </ul>
+        </div>
+
+        <div class="feature-section">
+          <h6>❌ 痛点</h6>
+          <ul>
+            <li v-for="(con, i) in currentEra.cons" :key="i">{{ con }}</li>
+          </ul>
+        </div>
+
+        <div class="tech-stack">
+          <h6>🔧 典型技术</h6>
+          <div class="tech-tags">
+            <span v-for="(tech, i) in currentEra.techs" :key="i" class="tech-tag">{{ tech }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedEra = ref('单体')
+
+const eras = [
+  { name: '物理机', icon: '🖥️', year: '1990s', tag: '单机' },
+  { name: '单体', icon: '🏢', year: '2000s', tag: '集中' },
+  { name: '微服务', icon: '🏭', year: '2010s', tag: '分布' },
+  { name: 'Serverless', icon: '☁️', year: '2020s+', tag: '无服' }
+]
+
+const eraDetails = {
+  '物理机': {
+    features: ['单机部署，无冗余', 'FTP 手动上传代码', '垂直扩展（买更强的机器）', '无服务治理概念'],
+    pros: ['部署简单，无需复杂配置', '单机性能好，无网络延迟', '易于调试和排查问题'],
+    cons: ['单点故障，服务不可用', '扩展困难，只能垂直扩容', '手动运维，效率低下'],
+    techs: ['Apache/Nginx', 'CGI/Perl', 'FTP/SFTP', '物理服务器']
+  },
+  '单体': {
+    features: ['单一代码库，统一技术栈', '共享数据库，事务一致性', '统一部署，整体发布', '进程内通信，无网络开销'],
+    pros: ['开发简单，易于上手', '测试方便，本地启动即可', '部署简单，一个包搞定'],
+    cons: ['代码耦合，牵一发而动全身', '技术栈单一，难以引入新技术', '团队扩张后协作困难'],
+    techs: ['Spring/Django/Rails', 'Tomcat/Gunicorn', 'MySQL/PostgreSQL', 'Maven/Gradle']
+  },
+  '微服务': {
+    features: ['服务拆分，独立部署', '技术栈异构，自由选择', '数据库独立，最终一致性', '服务间网络通信'],
+    pros: ['服务独立，团队自治', '技术栈灵活，选择最适合的', '故障隔离，不影响全局'],
+    cons: ['分布式复杂度，调试困难', '网络延迟，性能损耗', '运维成本激增'],
+    techs: ['Docker/Kubernetes', 'gRPC/REST', 'Kafka/RabbitMQ', 'Prometheus/Grafana']
+  },
+  'Serverless': {
+    features: ['函数粒度，事件驱动', '自动扩缩容，按需计费', '无服务器管理，平台托管', '冷启动，有延迟'],
+    pros: ['无需运维，专注业务', '自动扩展，应对流量高峰', '按调用付费，成本低'],
+    cons: ['冷启动延迟', '平台锁定，迁移困难', '调试困难，本地难复现'],
+    techs: ['AWS Lambda', 'Vercel/Cloudflare', 'Supabase/Firebase', 'EventBridge']
+  }
+}
+
+const currentEra = computed(() => {
+  const name = selectedEra.value
+  return {
+    icon: eras.find(e => e.name === name)?.icon || '🏗️',
+    name,
+    year: eras.find(e => e.name === name)?.year || '',
+    ...eraDetails[name]
+  }
+})
+</script>
+
+<style scoped>
+.architecture-comparison-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.era-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.era-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.era-card.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.era-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.era-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.era-year {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.5rem;
+}
+
+.era-tag {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 10px;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.detail-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-icon {
+  font-size: 1.5rem;
+}
+
+.detail-header h5 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.feature-section {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.feature-section h6 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-brand);
+}
+
+.feature-section ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.feature-section li {
+  margin-bottom: 0.4rem;
+  line-height: 1.5;
+}
+
+.feature-section li:last-child {
+  margin-bottom: 0;
+}
+
+.tech-stack {
+  grid-column: 1 / -1;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.tech-stack h6 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-brand);
+}
+
+.tech-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tech-tag {
+  padding: 0.25rem 0.75rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 768px) {
+  .comparison-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .detail-content {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
new file mode 100644
index 0000000..373038b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="container-docker-demo">
+    <div class="demo-header">
+      <h4>🐳 Docker 容器化演示</h4>
+      <p>理解容器如何让应用"一次打包，到处运行"</p>
+    </div>
+
+    <div class="docker-visualization">
+      <div class="layer traditional" :class="{ active: showTraditional }" @click="showTraditional = true; showDocker = false">
+        <h5>传统部署</h5>
+        <div class="server-stack">
+          <div class="layer-item app">应用 A</div>
+          <div class="layer-item conflict" v-if="showConflict">依赖冲突!</div>
+          <div class="layer-item deps">依赖库 v1.0</div>
+          <div class="layer-item os">操作系统</div>
+          <div class="layer-item hardware">物理服务器</div>
+        </div>
+      </div>
+
+      <div class="vs-divider">VS</div>
+
+      <div class="layer docker" :class="{ active: showDocker }" @click="showDocker = true; showTraditional = false">
+        <h5>Docker 容器</h5>
+        <div class="docker-stack">
+          <div class="containers">
+            <div class="container-box">
+              <div class="container-app">应用 A</div>
+              <div class="container-deps">依赖 v1.0</div>
+            </div>
+            <div class="container-box">
+              <div class="container-app">应用 B</div>
+              <div class="container-deps">依赖 v2.0</div>
+            </div>
+          </div>
+          <div class="docker-engine">Docker Engine</div>
+          <div class="host-os">宿主机操作系统</div>
+          <div class="hardware">物理服务器</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="benefits-grid">
+      <div class="benefit-card" v-for="benefit in benefits" :key="benefit.title">
+        <div class="benefit-icon">{{ benefit.icon }}</div>
+        <div class="benefit-title">{{ benefit.title }}</div>
+        <div class="benefit-desc">{{ benefit.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showTraditional = ref(true)
+const showDocker = ref(false)
+const showConflict = ref(false)
+
+const benefits = [
+  { icon: '📦', title: '环境一致性', desc: '开发、测试、生产环境完全一致，告别"在我机器上能跑"' },
+  { icon: '🚀', title: '快速部署', desc: '秒级启动，镜像分发，滚动更新无停机' },
+  { icon: '📊', title: '资源隔离', desc: 'CPU/内存限制，互不干扰，一台机器跑多个应用' },
+  { icon: '🔄', title: '版本管理', desc: '镜像版本化，随时回滚，灰度发布' }
+]
+</script>
+
+<style scoped>
+.container-docker-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.docker-visualization {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  align-items: stretch;
+}
+
+.layer {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.layer:hover,
+.layer.active {
+  border-color: var(--vp-c-brand);
+}
+
+.layer h5 {
+  margin: 0 0 1rem 0;
+  text-align: center;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-stack,
+.docker-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.layer-item {
+  padding: 0.6rem;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+}
+
+.layer-item.app {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.layer-item.deps {
+  background: var(--vp-c-bg-soft);
+  border: 1px dashed var(--vp-c-divider);
+}
+
+.layer-item.os,
+.layer-item.hardware {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+}
+
+.layer-item.conflict {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--vp-c-danger);
+  font-weight: 600;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.containers {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.container-box {
+  background: rgba(102, 126, 234, 0.1);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 6px;
+  padding: 0.5rem;
+  text-align: center;
+}
+
+.container-app {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.2rem;
+}
+
+.container-deps {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.docker-engine {
+  padding: 0.6rem;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #059669;
+}
+
+.host-os,
+.hardware {
+  padding: 0.6rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+  font-size: 0.9rem;
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.benefit-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.benefit-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.benefit-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.benefit-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.benefit-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .docker-visualization {
+    flex-direction: column;
+  }
+
+  .vs-divider {
+    justify-content: center;
+    padding: 0.5rem 0;
+  }
+
+  .benefits-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
new file mode 100644
index 0000000..cec6cca
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="deployment-flow-demo">
+    <div class="demo-header">
+      <h4>🚀 部署方式演进</h4>
+      <p>从手工部署到自动化流水线的变化</p>
+    </div>
+
+    <div class="flow-timeline">
+      <div
+        v-for="(step, idx) in steps"
+        :key="idx"
+        class="flow-step"
+        :class="{ active: currentStep === idx }"
+        @click="currentStep = idx"
+      >
+        <div class="step-connector" v-if="idx > 0">
+          <div class="connector-line"></div>
+        </div>
+        <div class="step-content">
+          <div class="step-icon">{{ step.icon }}</div>
+          <div class="step-era">{{ step.era }}</div>
+          <div class="step-title">{{ step.title }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="step-detail" v-if="currentStep !== null">
+      <h5>{{ steps[currentStep].title }}</h5>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">部署方式:</span>
+          <span class="value">{{ steps[currentStep].deploy }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">耗时:</span>
+          <span class="value">{{ steps[currentStep].time }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">风险:</span>
+          <span class="value">{{ steps[currentStep].risk }}</span>
+        </div>
+      </div>
+      <div class="tools-list">
+        <span class="tools-label">代表工具:</span>
+        <span v-for="tool in steps[currentStep].tools" :key="tool" class="tool-tag">{{ tool }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentStep = ref(1)
+
+const steps = [
+  {
+    icon: '👤',
+    era: '1990s',
+    title: '手工部署',
+    deploy: 'FTP 上传文件',
+    time: '30分钟-2小时',
+    risk: '人为错误率高',
+    tools: ['FTP', 'SSH', 'SCP']
+  },
+  {
+    icon: '📦',
+    era: '2000s',
+    title: '脚本部署',
+    deploy: '自动化脚本',
+    time: '10-30分钟',
+    risk: '脚本维护成本',
+    tools: ['Shell', 'Ansible', 'Puppet']
+  },
+  {
+    icon: '🔄',
+    era: '2010s',
+    title: 'CI/CD 流水线',
+    deploy: '自动化流水线',
+    time: '5-15分钟',
+    risk: '流水线配置复杂',
+    tools: ['Jenkins', 'GitLab CI', 'GitHub Actions']
+  },
+  {
+    icon: '🚀',
+    era: '2020s+',
+    title: 'GitOps',
+    deploy: '声明式部署',
+    time: '秒级',
+    risk: '学习曲线陡峭',
+    tools: ['ArgoCD', 'Flux', 'Kubernetes']
+  }
+]
+</script>
+
+<style scoped>
+.deployment-flow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.flow-timeline {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.flow-step {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.step-connector {
+  position: absolute;
+  left: -0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 2px;
+}
+
+.connector-line {
+  width: 100%;
+  height: 100%;
+  background: var(--vp-c-divider);
+}
+
+.step-content {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.5rem;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.flow-step:hover .step-content,
+.flow-step.active .step-content {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.step-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.step-era {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.125rem;
+}
+
+.step-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.step-detail {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.step-detail h5 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.value {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.tools-list {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.tools-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.tool-tag {
+  padding: 0.15rem 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 768px) {
+  .flow-timeline {
+    flex-wrap: wrap;
+  }
+
+  .flow-step {
+    flex: 0 0 calc(50% - 0.25rem);
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
new file mode 100644
index 0000000..7e1cb8a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="evolution-intro-demo">
+    <div class="intro-header">
+      <h3>后端架构进化之旅</h3>
+      <p>用一个餐厅的成长历程，理解后端架构的 30 年变迁</p>
+    </div>
+
+    <div class="timeline-cards">
+      <div
+        v-for="(stage, idx) in stages"
+        :key="idx"
+        class="stage-card"
+        :class="{ active: currentStage === idx }"
+        @click="currentStage = idx"
+      >
+        <div class="stage-era">{{ stage.era }}</div>
+        <div class="stage-icon">{{ stage.icon }}</div>
+        <div class="stage-name">{{ stage.name }}</div>
+        <div class="stage-arch">{{ stage.arch }}</div>
+      </div>
+    </div>
+
+    <div class="stage-detail">
+      <Transition name="fade" mode="out-in">
+        <div :key="currentStage" class="detail-panel">
+          <div class="detail-header">
+            <span class="detail-icon">{{ stages[currentStage].icon }}</span>
+            <h4>{{ stages[currentStage].restaurant }}</h4>
+          </div>
+          <div class="detail-content">
+            <div class="detail-section">
+              <h5>🍽️ 餐厅场景</h5>
+              <p>{{ stages[currentStage].scenario }}</p>
+            </div>
+            <div class="detail-section">
+              <h5>💻 后端映射</h5>
+              <p>{{ stages[currentStage].mapping }}</p>
+            </div>
+            <div class="detail-section">
+              <h5>⚡ 核心痛点</h5>
+              <ul>
+                <li v-for="(pain, i) in stages[currentStage].pains" :key="i">{{ pain }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentStage = ref(0)
+
+const stages = [
+  {
+    era: '1990s',
+    icon: '🏠',
+    name: '家庭小作坊',
+    arch: '物理服务器',
+    restaurant: '家庭小厨房',
+    scenario: '一位厨师在一间小厨房里，亲自去菜市场买菜、洗菜、切菜、炒菜、上菜。客人多了就忙不过来，只能让客人排队等。',
+    mapping: '一台物理服务器，处理所有请求：接收HTTP请求、读取文件、执行CGI脚本、返回响应。CPU和内存有限，请求多了只能排队。',
+    pains: [
+      '单机性能瓶颈：客人太多时，厨师根本忙不过来',
+      '垂直扩展成本高：买更贵的机器就像换更大的厨房，治标不治本',
+      '单点故障：厨师生病了，整个餐馆必须关门'
+    ]
+  },
+  {
+    era: '2000s',
+    icon: '🏢',
+    name: '大型中央厨房',
+    arch: '单体架构',
+    restaurant: '连锁餐厅中央厨房',
+    scenario: '建立了一个大型中央厨房，分工明确：有人专门洗菜、有人专门切菜、有人专门炒菜。但所有人都在一个大空间里工作，互相依赖。',
+    mapping: '单体应用架构：所有功能模块（用户、订单、支付）都在同一个进程中运行，共享同一个数据库，部署在一个大应用服务器上。',
+    pains: [
+      '牵一发而动全身：切菜师傅切到手，整个厨房都要停下来',
+      '技术债务累积：老员工（老代码）越来越多，新人很难接手',
+      '部署风险高：更新一个菜品（功能）可能影响整个菜单（系统）'
+    ]
+  },
+  {
+    era: '2010s',
+    icon: '🏭',
+    name: '专业化分工',
+    arch: '微服务架构',
+    restaurant: '餐饮集团多厨房',
+    scenario: '把中央厨房拆分成多个专业厨房：一个专门做中餐、一个专门做西餐、一个专门做甜点。每个厨房独立运营，通过标准化流程协作。',
+    mapping: '微服务架构：每个业务功能（用户服务、订单服务、支付服务）都是独立的进程，有自己的数据库，通过HTTP/gRPC通信。',
+    pains: [
+      '分布式复杂度：协调多个厨房比管理一个厨房难得多',
+      '网络依赖：中餐厨房需要西餐厨房的原料时，可能网络延迟或故障',
+      '运维成本激增：需要更多人手（运维工程师）来管理这么多厨房'
+    ]
+  },
+  {
+    era: '2020s+',
+    icon: '🍽️',
+    name: '外卖平台',
+    arch: 'Serverless',
+    restaurant: '外卖/云厨房',
+    scenario: '你不再自己开厨房，而是在外卖平台上注册。有订单时，平台调度附近的厨房为你制作食物。你只管设计菜品和推广，不用关心厨房在哪、有多少厨师。',
+    mapping: 'Serverless架构：开发者只写业务代码（函数），不关心服务器在哪、有多少台、怎么扩容。云平台自动调度资源，按实际执行时间付费。',
+    pains: [
+      '冷启动延迟：第一家店接单时可能需要热身（冷启动），客人要等',
+      '平台依赖：完全依赖外卖平台（云厂商），迁移成本高',
+      '资源限制：不能做太复杂的菜品（函数有时长和内存限制）'
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.evolution-intro-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 32px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.intro-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.intro-header h3 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 8px 0;
+}
+
+.intro-header p {
+  font-size: 14px;
+  opacity: 0.9;
+  margin: 0;
+}
+
+.timeline-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.stage-card {
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid transparent;
+  border-radius: 12px;
+  padding: 16px 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.stage-card:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.stage-card.active {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.stage-era {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-bottom: 4px;
+}
+
+.stage-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.stage-name {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.stage-arch {
+  font-size: 11px;
+  opacity: 0.7;
+}
+
+.stage-detail {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.detail-panel {
+  animation: fadeIn 0.4s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-icon {
+  font-size: 32px;
+}
+
+.detail-header h4 {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.detail-content {
+  display: grid;
+  gap: 16px;
+}
+
+.detail-section h5 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #ffd700;
+}
+
+.detail-section p {
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0;
+  opacity: 0.9;
+}
+
+.detail-section ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.detail-section li {
+  font-size: 13px;
+  line-height: 1.6;
+  margin-bottom: 4px;
+  opacity: 0.9;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.4s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+@media (max-width: 768px) {
+  .timeline-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stage-detail {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
new file mode 100644
index 0000000..58dd14b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
@@ -0,0 +1,444 @@
+<template>
+  <div class="kubernetes-demo">
+    <div class="demo-header">
+      <h4>☸️ Kubernetes 编排演示</h4>
+      <p>观察 K8s 如何自动调度容器、实现负载均衡和故障恢复</p>
+    </div>
+
+    <div class="k8s-architecture">
+      <div class="control-plane">
+        <div class="plane-title">控制平面 (Control Plane)</div>
+        <div class="components">
+          <div class="component" v-for="comp in controlPlane" :key="comp.name"
+               :class="{ active: activeComponent === comp.name }"
+               @click="activeComponent = comp.name">
+            <div class="comp-icon">{{ comp.icon }}</div>
+            <div class="comp-name">{{ comp.name }}</div>
+            <div class="comp-desc">{{ comp.desc }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="worker-nodes">
+        <div class="plane-title">工作节点 (Worker Nodes)</div>
+        <div class="nodes-container">
+          <div class="node" v-for="node in workerNodes" :key="node.name"
+               :class="{
+                 active: node.status === 'active',
+                 failed: node.status === 'failed',
+                 selected: selectedNode === node.name
+               }"
+               @click="selectNode(node.name)">
+            <div class="node-header">
+              <span class="node-icon">{{ node.icon }}</span>
+              <span class="node-name">{{ node.name }}</span>
+              <span class="node-status" :class="node.status">{{ node.statusText }}</span>
+            </div>
+            <div class="node-resources">
+              <div class="resource">
+                <span class="res-label">CPU:</span>
+                <div class="res-bar">
+                  <div class="res-fill" :style="{ width: node.cpu + '%' }" :class="{ high: node.cpu > 80 }"></div>
+                </div>
+                <span class="res-value">{{ node.cpu }}%</span>
+              </div>
+              <div class="resource">
+                <span class="res-label">内存:</span>
+                <div class="res-bar">
+                  <div class="res-fill" :style="{ width: node.memory + '%' }" :class="{ high: node.memory > 80 }"></div>
+                </div>
+                <span class="res-value">{{ node.memory }}%</span>
+              </div>
+            </div>
+            <div class="node-pods">
+              <div class="pods-label">运行 Pod: {{ node.pods }} 个</div>
+              <div class="pods-grid">
+                <div v-for="n in Math.min(node.pods, 8)" :key="n" class="pod-dot" :class="{
+                  running: node.status === 'active',
+                  pending: node.status === 'pending',
+                  failed: node.status === 'failed'
+                }"></div>
+                <div v-if="node.pods > 8" class="pod-more">+{{ node.pods - 8 }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="k8s-controls">
+      <button class="control-btn" @click="simulateScheduling" :disabled="isScheduling">{{ isScheduling ? '调度中...' : '🚀 模拟 Pod 调度' }}</button>
+      <button class="control-btn" @click="simulateScaling" :disabled="isScaling">{{ isScaling ? '扩容中...' : '📈 自动扩容' }}</button>
+      <button class="control-btn danger" @click="simulateFailure" :disabled="isFailing">{{ isFailing ? '故障注入中...' : '💥 模拟节点故障' }}</button>
+      <button class="control-btn" @click="resetCluster">🔄 重置集群</button>
+    </div>
+
+    <div class="k8s-logs" v-if="logs.length > 0">
+      <div class="log-entry" v-for="(log, idx) in logs.slice(-5)" :key="idx" :class="log.level">
+        <span class="log-time">{{ log.time }}</span>
+        <span class="log-message">{{ log.message }}</span>
+      </div>
+    </div>
+
+    <div class="demo-explanation">
+      <h5>💡 Kubernetes 核心概念</h5>
+      <ul>
+        <li><strong>Pod</strong>：最小的部署单元，一个 Pod 可以包含一个或多个容器</li>
+        <li><strong>Deployment</strong>：管理 Pod 的副本数量和滚动更新</li>
+        <li><strong>Service</strong>：提供稳定的网络访问入口，实现负载均衡</li>
+        <li><strong>Scheduler</strong>：根据资源需求和策略，自动将 Pod 调度到合适的节点</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const controlPlane = [
+  { name: 'API Server', icon: '🌐', desc: '集群的统一入口' },
+  { name: 'etcd', icon: '🗄️', desc: '分布式键值存储' },
+  { name: 'Scheduler', icon: '📋', desc: 'Pod 调度器' },
+  { name: 'Controller', icon: '🎮', desc: '控制器管理器' }
+]
+
+const workerNodes = reactive([
+  {
+    name: 'Node-1',
+    icon: '🖥️',
+    status: 'active',
+    statusText: '运行中',
+    cpu: 45,
+    memory: 60,
+    pods: 5
+  },
+  {
+    name: 'Node-2',
+    icon: '🖥️',
+    status: 'active',
+    statusText: '运行中',
+    cpu: 30,
+    memory: 40,
+    pods: 3
+  },
+  {
+    name: 'Node-3',
+    icon: '🖥️',
+    status: 'pending',
+    statusText: '准备中',
+    cpu: 0,
+    memory: 0,
+    pods: 0
+  }
+])
+
+const activeComponent = ref(null)
+const selectedNode = ref(null)
+const isScheduling = ref(false)
+const isScaling = ref(false)
+const isFailing = ref(false)
+const logs = ref([])
+
+const addLog = (message, level = 'info') => {
+  const now = new Date()
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+  logs.value.push({ time, message, level })
+  if (logs.value.length > 20) logs.value.shift()
+}
+
+const selectNode = (name) => {
+  selectedNode.value = selectedNode.value === name ? null : name
+}
+
+const simulateScheduling = async () => {
+  isScheduling.value = true
+  addLog('开始调度新 Pod...', 'info')
+
+  await new Promise(r => setTimeout(r, 800))
+  addLog('Scheduler: 评估节点资源...', 'info')
+
+  await new Promise(r => setTimeout(r, 800))
+  const targetNode = workerNodes.find(n => n.status === 'active' && n.cpu < 70)
+  if (targetNode) {
+    targetNode.pods++
+    targetNode.cpu += 10
+    addLog(`Pod 已调度到 ${targetNode.name}`, 'success')
+  } else {
+    addLog('警告: 没有合适的节点可调度', 'warning')
+  }
+
+  isScheduling.value = false
+}
+
+const simulateScaling = async () => {
+  isScaling.value = true
+  addLog('检测到高负载，开始水平扩容...', 'info')
+
+  const pendingNode = workerNodes.find(n => n.status === 'pending')
+  if (pendingNode) {
+    await new Promise(r => setTimeout(r, 1500))
+    pendingNode.status = 'active'
+    pendingNode.statusText = '运行中'
+    pendingNode.cpu = 20
+    pendingNode.memory = 30
+    addLog(`${pendingNode.name} 已启动并加入集群`, 'success')
+  } else {
+    addLog('已达到最大节点数', 'warning')
+  }
+
+  isScaling.value = false
+}
+
+const simulateFailure = async () => {
+  isFailing.value = true
+  const targetNode = workerNodes.find(n => n.status === 'active')
+
+  if (targetNode) {
+    addLog(`警告: ${targetNode.name} 失去连接!`, 'error')
+    targetNode.status = 'failed'
+    targetNode.statusText = '故障'
+
+    await new Promise(r => setTimeout(r, 1000))
+    addLog('Controller: 开始重新调度 Pod...', 'info')
+
+    await new Promise(r => setTimeout(r, 1500))
+    const healthyNode = workerNodes.find(n => n.status === 'active' && n.name !== targetNode.name)
+    if (healthyNode) {
+      healthyNode.pods += targetNode.pods
+      addLog(`Pod 已成功迁移到 ${healthyNode.name}`, 'success')
+    }
+
+    targetNode.pods = 0
+    targetNode.cpu = 0
+    targetNode.memory = 0
+  }
+
+  isFailing.value = false
+}
+
+const resetCluster = () => {
+  workerNodes.forEach((node, index) => {
+    if (index < 2) {
+      node.status = 'active'
+      node.statusText = '运行中'
+      node.cpu = 30 + index * 15
+      node.memory = 40 + index * 20
+      node.pods = 3 + index * 2
+    } else {
+      node.status = 'pending'
+      node.statusText = '准备中'
+      node.cpu = 0
+      node.memory = 0
+      node.pods = 0
+    }
+  })
+  logs.value = []
+  addLog('集群已重置', 'info')
+}
+</script>
+
+<style scoped>
+.container-docker-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.docker-visualization {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  align-items: stretch;
+}
+
+.layer {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.layer:hover,
+.layer.active {
+  border-color: var(--vp-c-brand);
+}
+
+.layer h5 {
+  margin: 0 0 1rem 0;
+  text-align: center;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-stack,
+.docker-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.layer-item {
+  padding: 0.6rem;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+}
+
+.layer-item.app {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.layer-item.deps {
+  background: var(--vp-c-bg-soft);
+  border: 1px dashed var(--vp-c-divider);
+}
+
+.layer-item.os,
+.layer-item.hardware {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+}
+
+.layer-item.conflict {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--vp-c-danger);
+  font-weight: 600;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.containers {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.container-box {
+  background: rgba(102, 126, 234, 0.1);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 6px;
+  padding: 0.5rem;
+  text-align: center;
+}
+
+.container-app {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.2rem;
+}
+
+.container-deps {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.docker-engine {
+  padding: 0.6rem;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #059669;
+}
+
+.host-os,
+.hardware {
+  padding: 0.6rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+  font-size: 0.9rem;
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.benefit-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.benefit-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.benefit-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.benefit-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.benefit-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .docker-visualization {
+    flex-direction: column;
+  }
+
+  .vs-divider {
+    justify-content: center;
+    padding: 0.5rem 0;
+  }
+
+  .benefits-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
new file mode 100644
index 0000000..4f814cd
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="microservices-demo">
+    <div class="demo-header">
+      <h4>🏭 微服务架构演示</h4>
+      <p>观察多个独立服务如何协作，以及服务间通信方式</p>
+    </div>
+
+    <div class="services-grid">
+      <div
+        v-for="service in services"
+        :key="service.name"
+        class="service-card"
+        :class="{ active: activeService === service.name, failed: service.status === 'failed' }"
+        @click="selectService(service.name)"
+      >
+        <div class="service-header">
+          <span class="service-icon">{{ service.icon }}</span>
+          <span class="service-name">{{ service.name }}</span>
+          <span class="service-status" :class="service.status">{{ service.statusText }}</span>
+        </div>
+        <div class="service-details">
+          <div class="detail-row">
+            <span class="label">端口:</span>
+            <span class="value">{{ service.port }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="label">数据库:</span>
+            <span class="value">{{ service.database }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="label">依赖:</span>
+            <span class="value deps">{{ service.dependencies.join(', ') || '无' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="communication-flow">
+      <h5>服务间通信链路</h5>
+      <div class="flow-visualization">
+        <div class="flow-step" v-for="(step, idx) in flowSteps" :key="idx"
+             :class="{ active: currentFlowStep === idx, completed: currentFlowStep > idx }">
+          <div class="step-number">{{ idx + 1 }}</div>
+          <div class="step-content">
+            <div class="step-service">{{ step.service }}</div>
+            <div class="step-action">{{ step.action }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="flow-controls">
+        <button class="flow-btn" @click="startFlow" :disabled="isFlowRunning">开始流程</button>
+        <button class="flow-btn" @click="resetFlow">重置</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const services = ref([
+  {
+    name: '用户服务',
+    icon: '👤',
+    status: 'healthy',
+    statusText: '健康',
+    port: '8081',
+    database: 'MySQL',
+    dependencies: []
+  },
+  {
+    name: '订单服务',
+    icon: '📦',
+    status: 'healthy',
+    statusText: '健康',
+    port: '8082',
+    database: 'PostgreSQL',
+    dependencies: ['用户服务']
+  },
+  {
+    name: '支付服务',
+    icon: '💳',
+    status: 'healthy',
+    statusText: '健康',
+    port: '8083',
+    database: 'MongoDB',
+    dependencies: ['用户服务', '订单服务']
+  },
+  {
+    name: '库存服务',
+    icon: '🏭',
+    status: 'healthy',
+    statusText: '健康',
+    port: '8084',
+    database: 'Redis',
+    dependencies: ['订单服务']
+  }
+])
+
+const activeService = ref(null)
+const currentFlowStep = ref(-1)
+const isFlowRunning = ref(false)
+
+const flowSteps = [
+  { service: '用户服务', action: '验证用户身份' },
+  { service: '订单服务', action: '创建订单记录' },
+  { service: '库存服务', action: '检查库存数量' },
+  { service: '支付服务', action: '处理支付请求' },
+  { service: '订单服务', action: '更新订单状态' }
+]
+
+const selectService = (name) => {
+  activeService.value = activeService.value === name ? null : name
+}
+
+const startFlow = async () => {
+  isFlowRunning.value = true
+  currentFlowStep.value = 0
+
+  for (let i = 0; i < flowSteps.length; i++) {
+    currentFlowStep.value = i
+    await new Promise(resolve => setTimeout(resolve, 1500))
+  }
+
+  isFlowRunning.value = false
+}
+
+const resetFlow = () => {
+  currentFlowStep.value = -1
+  isFlowRunning.value = false
+}
+</script>
+
+<style scoped>
+.microservices-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.service-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.service-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.service-card.active {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.service-card.failed {
+  border-color: var(--vp-c-danger);
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.service-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.service-icon {
+  font-size: 1.25rem;
+}
+
+.service-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  flex: 1;
+}
+
+.service-status {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 10px;
+}
+
+.service-status.healthy {
+  background: rgba(34, 197, 94, 0.2);
+  color: #16a34a;
+}
+
+.service-status.failed {
+  background: rgba(239, 68, 68, 0.2);
+  color: #dc2626;
+}
+
+.service-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+}
+
+.label {
+  color: var(--vp-c-text-3);
+}
+
+.value {
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.value.deps {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.communication-flow {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.communication-flow h5 {
+  margin: 0 0 1rem 0;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.flow-visualization {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.flow-step {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  transition: all 0.3s;
+}
+
+.flow-step.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.flow-step.completed {
+  border-color: var(--vp-c-success);
+  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;
+  color: var(--vp-c-text-2);
+}
+
+.flow-step.active .step-number {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.flow-step.completed .step-number {
+  background: var(--vp-c-success);
+  color: white;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-service {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.step-action {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.flow-controls {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.flow-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.flow-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.flow-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .service-header {
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
new file mode 100644
index 0000000..25c0e6f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="monolith-demo">
+    <div class="demo-header">
+      <h4>🏢 单体架构演示</h4>
+      <p>观察单体应用如何处理请求，以及模块间的依赖关系</p>
+    </div>
+
+    <div class="monolith-diagram">
+      <div class="monolith-box" :class="{ crashed: hasCrashed }">
+        <div class="monolith-header">单体应用进程</div>
+        <div class="modules-container">
+          <div
+            v-for="module in modules"
+            :key="module.name"
+            class="module-box"
+            :class="{ active: activeModule === module.name, crashed: crashedModule === module.name }"
+            @click="triggerModule(module.name)"
+          >
+            <div class="module-icon">{{ module.icon }}</div>
+            <div class="module-name">{{ module.name }}</div>
+            <div class="module-status" :class="module.status">{{ module.statusText }}</div>
+          </div>
+        </div>
+        <div class="shared-db">
+          <div class="db-icon">🗄️</div>
+          <div class="db-label">共享数据库</div>
+        </div>
+      </div>
+
+      <div class="request-flow">
+        <div
+          v-for="req in requests"
+          :key="req.id"
+          class="flow-request"
+          :class="req.status"
+        >
+          <span class="req-type">{{ req.type }}</span>
+          <span class="req-arrow">→</span>
+          <span class="req-target">{{ req.target }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="controls">
+      <button class="control-btn" @click="simulateNormalRequest">正常请求</button>
+      <button class="control-btn danger" @click="simulateCrash">模拟模块故障</button>
+      <button class="control-btn" @click="reset">重置</button>
+    </div>
+
+    <div class="demo-explanation">
+      <h5>💡 单体架构的特点</h5>
+      <ul>
+        <li><strong>共享进程空间</strong>：所有模块在同一个进程中运行，内存共享</li>
+        <li><strong>数据库耦合</strong>：所有模块共享同一个数据库，Schema变更影响全局</li>
+        <li><strong>级联故障</strong>：一个模块崩溃可能导致整个进程挂掉（雪崩效应）</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const modules = ref([
+  { name: '用户模块', icon: '👤', status: 'healthy', statusText: '健康' },
+  { name: '订单模块', icon: '📦', status: 'healthy', statusText: '健康' },
+  { name: '支付模块', icon: '💳', status: 'healthy', statusText: '健康' },
+  { name: '库存模块', icon: '🏭', status: 'healthy', statusText: '健康' }
+])
+
+const requests = ref([])
+const hasCrashed = ref(false)
+const crashedModule = ref(null)
+const activeModule = ref(null)
+const requestId = ref(0)
+
+const simulateNormalRequest = () => {
+  const targets = ['用户模块', '订单模块', '支付模块', '库存模块']
+  const target = targets[Math.floor(Math.random() * targets.length)]
+
+  activeModule.value = target
+  requestId.value++
+
+  requests.value.push({
+    id: requestId.value,
+    type: 'GET',
+    target: target,
+    status: 'active'
+  })
+
+  setTimeout(() => {
+    activeModule.value = null
+    if (requests.value.length > 5) {
+      requests.value.shift()
+    }
+  }, 1500)
+}
+
+const simulateCrash = () => {
+  const targetModule = '订单模块'
+  hasCrashed.value = true
+  crashedModule.value = targetModule
+
+  const module = modules.value.find(m => m.name === targetModule)
+  if (module) {
+    module.status = 'crashed'
+    module.statusText = '已崩溃'
+  }
+
+  // Cascade effect - other modules become unavailable
+  setTimeout(() => {
+    modules.value.forEach(m => {
+      if (m.name !== targetModule) {
+        m.status = 'affected'
+        m.statusText = '受影响'
+      }
+    })
+  }, 500)
+}
+
+const reset = () => {
+  hasCrashed.value = false
+  crashedModule.value = null
+  activeModule.value = null
+  requests.value = []
+
+  modules.value.forEach(m => {
+    m.status = 'healthy'
+    m.statusText = '健康'
+  })
+}
+</script>
+
+<style scoped>
+.monolith-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.monolith-diagram {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.monolith-box {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.monolith-box.crashed {
+  border-color: var(--vp-c-danger);
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.monolith-header {
+  text-align: center;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.modules-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.module-box {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.module-box:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.module-box.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.module-box.crashed {
+  border-color: var(--vp-c-danger);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.module-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.module-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.module-status {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+.module-status.healthy {
+  background: rgba(34, 197, 94, 0.2);
+  color: #16a34a;
+}
+
+.module-status.crashed {
+  background: rgba(239, 68, 68, 0.2);
+  color: #dc2626;
+}
+
+.module-status.affected {
+  background: rgba(245, 158, 11, 0.2);
+  color: #d97706;
+}
+
+.shared-db {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px dashed var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.db-icon {
+  font-size: 1.25rem;
+}
+
+.db-label {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.request-flow {
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.flow-request {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.75rem;
+}
+
+.flow-request.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.req-type {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+.req-arrow {
+  color: var(--vp-c-text-3);
+}
+
+.req-target {
+  color: var(--vp-c-text-2);
+}
+
+.controls {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.control-btn.danger {
+  border-color: var(--vp-c-danger);
+  color: var(--vp-c-danger);
+}
+
+.control-btn.danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.demo-explanation {
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.demo-explanation h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 0.75rem 0;
+}
+
+.demo-explanation ul {
+  margin: 0 0 1rem 0;
+  padding-left: 1.25rem;
+}
+
+.demo-explanation li {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 0.4rem;
+}
+
+.demo-explanation li strong {
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 768px) {
+  .monolith-diagram {
+    flex-direction: column;
+  }
+
+  .request-flow {
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
new file mode 100644
index 0000000..4e99281
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
@@ -0,0 +1,475 @@
+<template>
+  <div class="physical-server-demo">
+    <div class="demo-header">
+      <h4>🖥️ 物理服务器时代演示</h4>
+      <p>点击"发送请求"，观察早期 CGI 服务器的处理瓶颈</p>
+    </div>
+
+    <div class="demo-stage">
+      <div class="client-zone">
+        <div class="zone-title">👤 用户浏览器</div>
+        <div class="request-queue">
+          <div
+            v-for="(req, idx) in pendingRequests"
+            :key="req.id"
+            class="request-card"
+            :style="{ animationDelay: idx * 0.1 + 's' }"
+          >
+            <span class="req-method">{{ req.method }}</span>
+            <span class="req-path">{{ req.path }}</span>
+          </div>
+        </div>
+        <button
+          class="send-btn"
+          :disabled="isProcessing"
+          @click="sendRequest"
+        >
+          {{ isProcessing ? '处理中...' : '🚀 发起请求' }}
+        </button>
+      </div>
+
+      <div class="connection-zone">
+        <div class="network-line" :class="{ busy: isProcessing }">
+          <div class="packets">
+            <div
+              v-for="pkt in packets"
+              :key="pkt.id"
+              class="packet"
+              :class="pkt.type"
+              :style="{ top: pkt.top + 'px' }"
+            >
+              {{ pkt.type === 'req' ? '📤' : '📥' }}
+            </div>
+          </div>
+        </div>
+        <div class="latency-display" v-if="currentLatency > 0">
+          ⏱️ {{ currentLatency }}ms
+        </div>
+      </div>
+
+      <div class="server-zone">
+        <div class="zone-title">🖥️ CGI 服务器</div>
+        <div class="server-status">
+          <div
+            class="status-indicator"
+            :class="{ processing: isProcessing }"
+          >
+            <span class="status-dot"></span>
+            <span class="status-text">{{ serverStatus }}</span>
+          </div>
+          <div class="cpu-usage" v-if="isProcessing">
+            <div class="cpu-bar">
+              <div
+                class="cpu-fill"
+                :style="{ width: cpuUsage + '%' }"
+              ></div>
+            </div>
+            <span class="cpu-text">CPU: {{ cpuUsage }}%</span>
+          </div>
+        </div>
+        <div class="process-queue">
+          <div
+            v-for="proc in processQueue"
+            :key="proc.id"
+            class="process-item"
+          >
+            <span class="proc-name">{{ proc.name }}</span>
+            <div class="proc-progress">
+              <div
+                class="proc-bar"
+                :style="{ width: proc.progress + '%' }"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-explanation">
+      <h5>💡 早期的痛点在哪里？</h5>
+      <ul>
+        <li>
+          <strong>进程启动开销</strong>：每个请求都要启动新的 CGI
+          进程，就像每来一个客人都要重新搭一个厨房
+        </li>
+        <li>
+          <strong>资源无法复用</strong>：数据库连接每次都要重新建立，CPU
+          频繁在进程间切换
+        </li>
+        <li>
+          <strong>扩展困难</strong>：只能买更强的单机（垂直扩展），无法通过增加机器分担压力
+        </li>
+      </ul>
+      <p class="demo-conclusion">
+        这就是<strong>物理服务器 + CGI</strong>时代的核心问题：<span
+          class="highlight"
+          >进程级隔离带来了稳定性，但也带来了巨大的性能开销</span
+        >。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const isProcessing = ref(false)
+const currentLatency = ref(0)
+const cpuUsage = ref(0)
+const packets = ref([])
+const pendingRequests = ref([])
+const processQueue = ref([])
+const requestCounter = ref(0)
+const packetCounter = ref(0)
+
+const serverStatus = computed(() => {
+  if (isProcessing.value) return '处理中...'
+  return '等待请求'
+})
+
+const sendRequest = async () => {
+  if (isProcessing.value) return
+
+  isProcessing.value = true
+  requestCounter.value++
+  const requestId = requestCounter.value
+
+  // Add request to queue
+  pendingRequests.value.push({
+    id: requestId,
+    method: 'GET',
+    path: '/index.cgi'
+  })
+
+  // Simulate network latency
+  currentLatency.value = 0
+  const latencyInterval = setInterval(() => {
+    currentLatency.value += Math.floor(Math.random() * 50) + 20
+  }, 100)
+
+  // Simulate packet
+  const packetId = ++packetCounter.value
+  packets.value.push({
+    id: packetId,
+    type: 'req',
+    top: 20
+  })
+
+  // Add process to queue
+  processQueue.value.push({
+    id: requestId,
+    name: `CGI Process #${requestId}`,
+    progress: 0
+  })
+
+  // Simulate CPU usage fluctuation
+  const cpuInterval = setInterval(() => {
+    cpuUsage.value = Math.min(100, cpuUsage.value + Math.random() * 20 + 10)
+    processQueue.value.forEach(p => {
+      p.progress = Math.min(100, p.progress + Math.random() * 15 + 5)
+    })
+  }, 100)
+
+  // Simulate processing time
+  await new Promise(resolve => setTimeout(resolve, 2000))
+
+  clearInterval(latencyInterval)
+  clearInterval(cpuInterval)
+
+  // Cleanup
+  pendingRequests.value = pendingRequests.value.filter(r => r.id !== requestId)
+  packets.value = packets.value.filter(p => p.id !== packetId)
+  processQueue.value = processQueue.value.filter(p => p.id !== requestId)
+
+  cpuUsage.value = 0
+  currentLatency.value = 0
+  isProcessing.value = false
+}
+</script>
+
+<style scoped>
+.physical-server-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.demo-stage {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.client-zone,
+.server-zone {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.zone-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.75rem;
+  text-align: center;
+}
+
+.request-queue {
+  min-height: 60px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+  margin-bottom: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.request-card {
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  padding: 0.4rem 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.req-method {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+}
+
+.send-btn {
+  width: 100%;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.6rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.send-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.send-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.connection-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+}
+
+.network-line {
+  width: 3px;
+  height: 120px;
+  background: var(--vp-c-divider);
+  border-radius: 2px;
+  position: relative;
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}
+
+.network-line.busy {
+  opacity: 1;
+  background: var(--vp-c-brand);
+}
+
+.latency-display {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.server-status {
+  margin-bottom: 0.75rem;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vp-c-success);
+}
+
+.status-indicator.processing .status-dot {
+  background: var(--vp-c-danger);
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.status-text {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.cpu-usage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cpu-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.cpu-fill {
+  height: 100%;
+  background: var(--vp-c-danger);
+  border-radius: 3px;
+  transition: width 0.1s ease;
+}
+
+.cpu-text {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  min-width: 60px;
+  text-align: right;
+}
+
+.process-queue {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.process-item {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.proc-name {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.3rem;
+}
+
+.proc-progress {
+  height: 4px;
+  background: var(--vp-c-bg);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.proc-bar {
+  height: 100%;
+  background: var(--vp-c-brand);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+.demo-explanation {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.demo-explanation h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 0.75rem 0;
+}
+
+.demo-explanation ul {
+  margin: 0 0 1rem 0;
+  padding-left: 1.25rem;
+}
+
+.demo-explanation li {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 0.4rem;
+}
+
+.demo-explanation li strong {
+  color: var(--vp-c-text-1);
+}
+
+.demo-conclusion {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.highlight {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+@media (max-width: 768px) {
+  .demo-stage {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .connection-zone {
+    flex-direction: row;
+    height: 60px;
+  }
+
+  .network-line {
+    width: 100%;
+    height: 3px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
new file mode 100644
index 0000000..79d3457
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="scaling-strategy-demo">
+    <div class="demo-header">
+      <h4>📈 扩展策略对比</h4>
+      <p>垂直扩展 vs 水平扩展</p>
+    </div>
+
+    <div class="strategies">
+      <div class="strategy-card" :class="{ active: activeStrategy === 'vertical' }" @click="activeStrategy = 'vertical'">
+        <div class="strategy-icon">📦</div>
+        <div class="strategy-name">垂直扩展</div>
+        <div class="strategy-desc">买更强的机器</div>
+        <div class="visual-vertical">
+          <div class="server" :class="{ scale: activeStrategy === 'vertical' }">
+            <div class="cpu">CPU</div>
+            <div class="memory">内存</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="strategy-card" :class="{ active: activeStrategy === 'horizontal' }" @click="activeStrategy = 'horizontal'">
+        <div class="strategy-icon">🔄</div>
+        <div class="strategy-name">水平扩展</div>
+        <div class="strategy-desc">加更多机器</div>
+        <div class="visual-horizontal">
+          <div class="servers">
+            <div class="server-mini" v-for="n in 4" :key="n" :class="{ active: activeStrategy === 'horizontal' && n <= serverCount }" :style="{ animationDelay: (n * 0.1) + 's' }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="comparison-table">
+      <div class="table-row header">
+        <span>维度</span>
+        <span>垂直扩展</span>
+        <span>水平扩展</span>
+      </div>
+      <div class="table-row" v-for="item in comparisonData" :key="item.dim">
+        <span>{{ item.dim }}</span>
+        <span :class="{ better: item.verticalBetter }">{{ item.vertical }}</span>
+        <span :class="{ better: item.horizontalBetter }">{{ item.horizontal }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeStrategy = ref('horizontal')
+const serverCount = ref(3)
+
+const comparisonData = [
+  { dim: '成本', vertical: '硬件贵', horizontal: '机器多', verticalBetter: false, horizontalBetter: true },
+  { dim: '上限', vertical: '有瓶颈', horizontal: '理论上无限', verticalBetter: false, horizontalBetter: true },
+  { dim: '复杂度', vertical: '简单', horizontal: '需要分布式', verticalBetter: true, horizontalBetter: false },
+  { dim: '数据', vertical: '一致性好', horizontal: '需要同步', verticalBetter: true, horizontalBetter: false }
+]
+</script>
+
+<style scoped>
+.scaling-strategy-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.strategies {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.strategy-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;
+}
+
+.strategy-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.strategy-card.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.strategy-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.strategy-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.125rem;
+}
+
+.strategy-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.visual-vertical,
+.visual-horizontal {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.server {
+  width: 50px;
+  height: 40px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  transition: all 0.3s;
+}
+
+.server.scale {
+  transform: scale(1.2);
+  border-color: var(--vp-c-brand);
+}
+
+.cpu, .memory {
+  font-size: 0.5rem;
+  padding: 1px 3px;
+  background: var(--vp-c-bg);
+  border-radius: 2px;
+  color: var(--vp-c-text-2);
+}
+
+.servers {
+  display: flex;
+  gap: 4px;
+}
+
+.server-mini {
+  width: 20px;
+  height: 30px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 2px;
+  opacity: 0.3;
+  transition: all 0.3s;
+}
+
+.server-mini.active {
+  opacity: 1;
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+  animation: popIn 0.3s ease;
+}
+
+@keyframes popIn {
+  0% { transform: scale(0.8); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+.comparison-table {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1.2fr;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+}
+
+.table-row:not(.header):not(:last-child) {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.table-row.header {
+  background: var(--vp-c-bg-soft);
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.table-row span:first-child {
+  color: var(--vp-c-text-2);
+}
+
+.better {
+  color: var(--vp-c-success);
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .strategies {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-table .table-row {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
new file mode 100644
index 0000000..f63f4aa
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="serverless-demo">
+    <div class="demo-header">
+      <h4>⚡ Serverless 架构演示</h4>
+      <p>观察 Serverless 如何按需执行函数、自动扩缩容</p>
+    </div>
+
+    <div class="serverless-visualization">
+      <div class="function-grid">
+        <div v-for="func in functions" :key="func.name" class="function-card" :class="{ active: func.state === 'running', cold: func.state === 'cold', warming: func.state === 'warming' }" @click="triggerFunction(func.name)">
+          <div class="function-icon">{{ func.icon }}</div>
+          <div class="function-name">{{ func.name }}</div>
+          <div class="function-state" :class="func.state">{{ stateText(func.state) }}</div>
+          <div class="function-metrics" v-if="func.invocations > 0">
+            <span>调用: {{ func.invocations }}</span>
+            <span>平均: {{ func.avgDuration }}ms</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="auto-scaling-panel">
+        <div class="scaling-title">自动扩缩容状态</div>
+        <div class="scaling-metrics">
+          <div class="metric">
+            <span class="metric-label">并发请求:</span>
+            <span class="metric-value">{{ concurrentRequests }}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">运行实例:</span>
+            <span class="metric-value">{{ runningInstances }}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">冷启动:</span>
+            <span class="metric-value">{{ coldStarts }}</span>
+          </div>
+        </div>
+        <div class="scaling-chart">
+          <div v-for="(point, idx) in scalingHistory" :key="idx" class="chart-bar" :style="{ height: point + '%' }" :class="{ high: point > 70 }"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="traffic-simulator">
+      <div class="simulator-title">流量模拟器</div>
+      <div class="traffic-patterns">
+        <button v-for="pattern in trafficPatterns" :key="pattern.name" class="pattern-btn" :class="{ active: currentPattern === pattern.name }" @click="applyPattern(pattern)">
+          <span class="pattern-icon">{{ pattern.icon }}</span>
+          <span class="pattern-name">{{ pattern.name }}</span>
+          <span class="pattern-desc">{{ pattern.desc }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="demo-explanation">
+      <h5>💡 Serverless 核心特性</h5>
+      <ul>
+        <li><strong>按需执行</strong>：函数只在被调用时运行，不调用不产生费用</li>
+        <li><strong>自动扩缩容</strong>：从 0 到数千实例自动扩展，无需人工干预</li>
+        <li><strong>冷启动</strong>：长时间未调用后首次调用会有延迟，需要预热策略</li>
+        <li><strong>事件驱动</strong>：响应 HTTP 请求、消息队列、定时任务等多种事件源</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+
+const functions = reactive([
+  { name: '用户登录', icon: '🔐', state: 'cold', invocations: 0, avgDuration: 0 },
+  { name: '订单处理', icon: '📦', state: 'cold', invocations: 0, avgDuration: 0 },
+  { name: '图片处理', icon: '🖼️', state: 'cold', invocations: 0, avgDuration: 0 },
+  { name: '数据备份', icon: '💾', state: 'cold', invocations: 0, avgDuration: 0 }
+])
+
+const concurrentRequests = ref(0)
+const runningInstances = ref(0)
+const coldStarts = ref(0)
+const scalingHistory = ref([10, 15, 20, 25, 30, 35, 40, 35, 30, 25, 20, 15])
+const currentPattern = ref(null)
+const isFlowRunning = ref(false)
+
+const trafficPatterns = [
+  { name: '正常流量', icon: '📊', desc: '平稳的请求速率' },
+  { name: '突发流量', icon: '🚀', desc: '突然的流量激增' },
+  { name: '潮汐流量', icon: '🌊', desc: '周期性的高低峰' }
+]
+
+const stateText = (state) => {
+  const map = { cold: '冷状态', warming: '预热中', running: '运行中' }
+  return map[state] || state
+}
+
+const triggerFunction = async (name) => {
+  const fn = functions.find(f => f.name === name)
+  if (!fn) return
+
+  if (fn.state === 'cold') {
+    fn.state = 'warming'
+    coldStarts.value++
+    await new Promise(r => setTimeout(r, 800))
+  }
+
+  fn.state = 'running'
+  fn.invocations++
+  concurrentRequests.value++
+  runningInstances.value++
+
+  const duration = Math.floor(Math.random() * 150) + 50
+  fn.avgDuration = Math.floor((fn.avgDuration * (fn.invocations - 1) + duration) / fn.invocations)
+
+  await new Promise(r => setTimeout(r, duration))
+
+  concurrentRequests.value--
+  if (concurrentRequests.value === 0) {
+    runningInstances.value = 0
+  }
+
+  setTimeout(() => {
+    if (fn.invocations > 0) {
+      fn.state = 'cold'
+    }
+  }, 3000)
+}
+
+const applyPattern = (pattern) => {
+  currentPattern.value = pattern.name
+  // 模拟流量模式
+  if (pattern.name === '突发流量') {
+    for (let i = 0; i < 5; i++) {
+      setTimeout(() => {
+        const fn = functions[Math.floor(Math.random() * functions.length)]
+        triggerFunction(fn.name)
+      }, i * 200)
+    }
+  } else if (pattern.name === '潮汐流量') {
+    const interval = setInterval(() => {
+      const fn = functions[Math.floor(Math.random() * functions.length)]
+      triggerFunction(fn.name)
+    }, 500)
+    setTimeout(() => clearInterval(interval), 3000)
+  }
+}
+
+let interval
+onMounted(() => {
+  interval = setInterval(() => {
+    scalingHistory.value.shift()
+    const last = scalingHistory.value[scalingHistory.value.length - 1]
+    const variation = Math.floor(Math.random() * 20) - 10
+    const next = Math.max(10, Math.min(90, last + variation))
+    scalingHistory.value.push(next)
+  }, 2000)
+})
+
+onUnmounted(() => {
+  clearInterval(interval)
+})
+</script>
+
+<style scoped>
+.serverless-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.serverless-visualization {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.function-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.function-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.function-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.function-card.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.function-card.cold {
+  opacity: 0.7;
+}
+
+.function-card.warming {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.function-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.function-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.function-state {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 10px;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+.function-state.cold {
+  background: rgba(156, 163, 175, 0.2);
+  color: var(--vp-c-text-2);
+}
+
+.function-state.warming {
+  background: rgba(245, 158, 11, 0.2);
+  color: #d97706;
+}
+
+.function-state.running {
+  background: rgba(34, 197, 94, 0.2);
+  color: #16a34a;
+}
+
+.function-metrics {
+  display: flex;
+  justify-content: space-around;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 0.5rem;
+}
+
+.auto-scaling-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.scaling-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.scaling-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.metric {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+}
+
+.metric-label {
+  color: var(--vp-c-text-2);
+}
+
+.metric-value {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+.scaling-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 60px;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.chart-bar {
+  flex: 1;
+  background: var(--vp-c-brand);
+  border-radius: 1px;
+  transition: height 0.3s;
+  min-height: 2px;
+}
+
+.chart-bar.high {
+  background: var(--vp-c-warning);
+}
+
+.traffic-simulator {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.simulator-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.traffic-patterns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.pattern-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pattern-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.pattern-btn.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.pattern-icon {
+  font-size: 1.5rem;
+}
+
+.pattern-name {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+}
+
+.pattern-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.demo-explanation {
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.demo-explanation h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 0.75rem 0;
+}
+
+.demo-explanation ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.demo-explanation li {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 0.4rem;
+}
+
+.demo-explanation li strong {
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 768px) {
+  .serverless-visualization {
+    grid-template-columns: 1fr;
+  }
+
+  .function-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .traffic-patterns {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
new file mode 100644
index 0000000..f6b1591
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="tech-stack-timeline-demo">
+    <div class="demo-header">
+      <h4>📚 技术栈演进时间线</h4>
+      <p>每个时代的主流技术栈</p>
+    </div>
+
+    <div class="timeline">
+      <div
+        v-for="(era, idx) in eras"
+        :key="idx"
+        class="era-section"
+        :class="{ active: activeEra === idx }"
+        @click="activeEra = idx"
+      >
+        <div class="era-marker">
+          <div class="era-dot"></div>
+          <div class="era-line"></div>
+        </div>
+
+        <div class="era-content">
+          <div class="era-header">
+            <span class="era-icon">{{ era.icon }}</span>
+            <span class="era-name">{{ era.name }}</span>
+            <span class="era-period">{{ era.period }}</span>
+          </div>
+
+          <div class="tech-categories">
+            <div class="category" v-for="(cat, cIdx) in era.categories" :key="cIdx">
+              <div class="category-name">{{ cat.name }}</div>
+              <div class="tech-tags">
+                <span
+                  v-for="(tech, tIdx) in cat.techs"
+                  :key="tIdx"
+                  class="tech-tag"
+                  :class="{ highlight: tIdx === 0 }"
+                >
+                  {{ tech }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeEra = ref(0)
+
+const eras = [
+  {
+    icon: '🖥️',
+    name: '物理机时代',
+    period: '1990s',
+    categories: [
+      { name: 'Web服务器', techs: ['Apache', 'Nginx', 'IIS'] },
+      { name: '后端语言', techs: ['Perl', 'PHP', 'ASP'] },
+      { name: '数据库', techs: ['MySQL', 'PostgreSQL', 'Oracle'] },
+      { name: '部署方式', techs: ['FTP', 'SSH', '手动'] }
+    ]
+  },
+  {
+    icon: '🏢',
+    name: '单体架构',
+    period: '2000s',
+    categories: [
+      { name: '后端框架', techs: ['Spring', 'Django', 'Rails', 'Laravel'] },
+      { name: '前端技术', techs: ['jQuery', 'Bootstrap', 'JSP'] },
+      { name: '数据库', techs: ['MySQL', 'Redis', 'MongoDB'] },
+      { name: '构建工具', techs: ['Maven', 'Gradle', 'Ant'] }
+    ]
+  },
+  {
+    icon: '🏭',
+    name: '微服务',
+    period: '2010s',
+    categories: [
+      { name: '容器化', techs: ['Docker', 'Kubernetes', 'Helm'] },
+      { name: '服务框架', techs: ['Spring Cloud', 'gRPC', 'Dubbo'] },
+      { name: '数据存储', techs: ['Redis', 'MongoDB', 'Kafka', 'ES'] },
+      { name: '可观测', techs: ['Prometheus', 'Grafana', 'Jaeger'] }
+    ]
+  },
+  {
+    icon: '☁️',
+    name: 'Serverless',
+    period: '2020s+',
+    categories: [
+      { name: '函数计算', techs: ['Lambda', 'Vercel', 'Cloudflare'] },
+      { name: 'BaaS', techs: ['Supabase', 'Firebase', 'Auth0'] },
+      { name: '前端框架', techs: ['Next.js', 'Nuxt', 'SvelteKit'] },
+      { name: '数据库', techs: ['PlanetScale', 'Neon', 'Turso'] }
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.tech-stack-timeline-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  margin-bottom: 1rem;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.era-section {
+  display: flex;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.era-section:hover,
+.era-section.active {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.era-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 24px;
+}
+
+.era-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  border: 2px solid var(--vp-c-bg);
+  transition: all 0.2s;
+}
+
+.era-section.active .era-dot {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.era-line {
+  flex: 1;
+  width: 2px;
+  background: var(--vp-c-divider);
+  margin: 4px 0;
+}
+
+.era-content {
+  flex: 1;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+}
+
+.era-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.era-icon {
+  font-size: 1.25rem;
+}
+
+.era-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.era-period {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+
+.tech-categories {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.category {
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  padding: 0.5rem;
+}
+
+.category-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+}
+
+.tech-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tech-tag {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.35rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 3px;
+  color: var(--vp-c-text-2);
+}
+
+.tech-tag.highlight {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+@media (max-width: 768px) {
+  .tech-categories {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
new file mode 100644
index 0000000..58068a0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="memory-management-demo">
+    <div class="demo-header">
+      <h4>内存管理机制可视化</h4>
+    </div>
+    <div class="memory-models">
+      <div class="model-card" v-for="model in models" :key="model.name">
+        <div class="model-icon">{{ model.icon }}</div>
+        <div class="model-name">{{ model.name }}</div>
+        <div class="model-desc">{{ model.desc }}</div>
+        <div class="model-languages">
+          <span v-for="lang in model.languages" :key="lang" class="lang-tag">{{ lang }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const models = [
+  {
+    name: '垃圾回收 (GC)',
+    icon: '♻️',
+    desc: '运行时自动回收不再使用的内存',
+    languages: ['Java', 'Go', 'Python', 'Node.js']
+  },
+  {
+    name: '手动管理',
+    icon: '🔧',
+    desc: '开发者显式申请和释放内存',
+    languages: ['C', 'C++']
+  },
+  {
+    name: '所有权系统',
+    icon: '🔒',
+    desc: '编译时通过规则保证内存安全',
+    languages: ['Rust']
+  }
+]
+</script>
+
+<style scoped>
+.memory-management-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+.memory-models {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+.model-card {
+  padding: 16px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  text-align: center;
+  border: 1px solid var(--vp-c-divider);
+}
+.model-icon {
+  font-size: 2em;
+  margin-bottom: 8px;
+}
+.model-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.model-desc {
+  font-size: 0.9em;
+  color: var(--vp-c-text-2);
+  margin-bottom: 12px;
+}
+.lang-tag {
+  display: inline-block;
+  padding: 2px 6px;
+  margin: 2px;
+  background: var(--vp-c-bg-mute);
+  border-radius: 4px;
+  font-size: 0.8em;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
new file mode 100644
index 0000000..62d136f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
@@ -0,0 +1,534 @@
+<template>
+  <div class="clean-architecture-demo">
+    <div class="demo-header">
+      <h4>🏗️ 整洁架构（Clean Architecture）与分层架构</h4>
+      <p class="subtitle">分层架构是整洁架构的基础，理解两者的关系有助于构建更灵活的系统</p>
+    </div>
+
+    <!-- 架构对比 -->
+    <div class="architecture-comparison">
+      <div class="comparison-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          :class="['tab-btn', { active: currentTab === tab.id }]"
+          @click="currentTab = tab.id"
+        >
+          {{ tab.name }}
+        </button>
+      </div>
+
+      <div class="comparison-content">
+        <!-- 传统分层架构 -->
+        <div v-if="currentTab === 'layered'" class="tab-panel">
+          <div class="arch-diagram layered">
+            <div class="layer-box controller">
+              <div class="layer-title">Controller 层</div>
+              <div class="layer-desc">接收请求、参数校验</div>
+            </div>
+            <div class="arrow down">⬇️ 依赖</div>
+            <div class="layer-box service">
+              <div class="layer-title">Service 层</div>
+              <div class="layer-desc">业务逻辑、事务管理</div>
+            </div>
+            <div class="arrow down">⬇️ 依赖</div>
+            <div class="layer-box repository">
+              <div class="layer-title">Repository 层</div>
+              <div class="layer-desc">数据访问、ORM 映射</div>
+            </div>
+            <div class="arrow down">⬇️ 依赖</div>
+            <div class="layer-box domain">
+              <div class="layer-title">Domain 层</div>
+              <div class="layer-desc">实体定义、业务规则</div>
+            </div>
+          </div>
+
+          <div class="arch-characteristics">
+            <h5>📌 传统分层架构特点</h5>
+            <ul>
+              <li><strong>垂直依赖</strong>：上层直接依赖下层，依赖方向从上到下</li>
+              <li><strong>简单直观</strong>：结构清晰，易于理解和实现</li>
+              <li><strong>适合中小型项目</strong>：快速开发，上手简单</li>
+              <li><strong>潜在问题</strong>：底层变更可能影响上层，循环依赖风险</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 整洁架构 -->
+        <div v-else-if="currentTab === 'clean'" class="tab-panel">
+          <div class="arch-diagram clean">
+            <div class="clean-layers">
+              <div class="clean-layer framework">
+                <div class="layer-name">框架与驱动层</div>
+                <div class="layer-items">Web / DB / UI / 外部接口</div>
+              </div>
+              <div class="clean-layer interface">
+                <div class="layer-name">接口适配层</div>
+                <div class="layer-items">Controller / Gateway / Presenter</div>
+              </div>
+              <div class="clean-layer application">
+                <div class="layer-name">应用层</div>
+                <div class="layer-items">Service / UseCase / DTO</div>
+              </div>
+              <div class="clean-layer domain">
+                <div class="layer-name">领域层（核心）</div>
+                <div class="layer-items">Entity / ValueObject / DomainService</div>
+              </div>
+            </div>
+
+            <div class="dependency-rule">
+              <div class="rule-arrow">
+                <span class="arrow-line"></span>
+                <span class="arrow-head">◀ 依赖方向</span>
+              </div>
+              <div class="rule-text">
+                外层依赖内层，内层不依赖外层
+              </div>
+            </div>
+          </div>
+
+          <div class="arch-characteristics">
+            <h5>📌 整洁架构特点</h5>
+            <ul>
+              <li><strong>依赖倒置</strong>：依赖方向从外到内，通过接口隔离</li>
+              <li><strong>领域为核心</strong>：业务逻辑位于中心，独立于框架</li>
+              <li><strong>可测试性强</strong>：核心业务可脱离框架进行单元测试</li>
+              <li><strong>技术无关</strong>：可轻松切换数据库、框架等外部技术</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 对比总结 -->
+        <div v-else class="tab-panel">
+          <div class="comparison-table">
+            <table>
+              <thead>
+                <tr>
+                  <th>特性</th>
+                  <th>传统分层架构</th>
+                  <th>整洁架构</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>依赖方向</td>
+                  <td>从上到下</td>
+                  <td>从外到内</td>
+                </tr>
+                <tr>
+                  <td>核心业务位置</td>
+                  <td>Service 层</td>
+                  <td>Domain 层（中心）</td>
+                </tr>
+                <tr>
+                  <td>框架依赖</td>
+                  <td>较深（如 Spring）</td>
+                  <td>较浅（通过接口隔离）</td>
+                </tr>
+                <tr>
+                  <td>可测试性</td>
+                  <td>需要集成测试</td>
+                  <td>核心可单元测试</td>
+                </tr>
+                <tr>
+                  <td>学习曲线</td>
+                  <td>平缓</td>
+                  <td>较陡</td>
+                </tr>
+                <tr>
+                  <td>适用场景</td>
+                  <td>中小型项目、快速迭代</td>
+                  <td>大型复杂业务、长期维护</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="recommendation">
+            <h5>💡 选型建议</h5>
+            <div class="rec-grid">
+              <div class="rec-card">
+                <div class="rec-title">选择传统分层架构当...</div>
+                <ul>
+                  <li>项目规模较小，业务相对简单</li>
+                  <li>团队对 DDD 不熟悉</li>
+                  <li>需要快速上线，验证市场</li>
+                  <li>技术栈相对固定</li>
+                </ul>
+              </div>
+              <div class="rec-card recommended">
+                <div class="rec-title">选择整洁架构当...</div>
+                <ul>
+                  <li>业务复杂，领域模型丰富</li>
+                  <li>需要长期维护和演进</li>
+                  <li>需要频繁切换技术栈</li>
+                  <li>团队有较强的设计能力</li>
+                </ul>
+                <div class="rec-badge">推荐</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentTab = ref('layered')
+
+const tabs = [
+  { id: 'layered', name: '传统分层' },
+  { id: 'clean', name: '整洁架构' },
+  { id: 'comparison', name: '对比总结' }
+]
+</script>
+
+<style scoped>
+.clean-architecture-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.architecture-comparison {
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.comparison-tabs {
+  display: flex;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.tab-btn {
+  padding: 12px 24px;
+  border: none;
+  background: transparent;
+  color: #606266;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.tab-btn:hover {
+  color: #409eff;
+}
+
+.tab-btn.active {
+  color: #409eff;
+  background: white;
+  font-weight: 500;
+}
+
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #409eff;
+}
+
+.comparison-content {
+  padding: 20px;
+}
+
+.tab-panel {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Layered Architecture */
+.arch-diagram.layered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.layer-box {
+  width: 100%;
+  max-width: 400px;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+  border-left: 4px solid;
+}
+
+.layer-box.controller {
+  background: #f0f9ff;
+  border-left-color: #52c41a;
+}
+
+.layer-box.service {
+  background: #fff7e6;
+  border-left-color: #fa8c16;
+}
+
+.layer-box.repository {
+  background: #e6f7ff;
+  border-left-color: #1890ff;
+}
+
+.layer-box.domain {
+  background: #f6ffed;
+  border-left-color: #73d13d;
+}
+
+.layer-title {
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 4px;
+}
+
+.layer-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.arrow {
+  color: #909399;
+  font-size: 12px;
+  text-align: center;
+}
+
+.arch-characteristics {
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.arch-characteristics h5 {
+  margin: 0 0 12px 0;
+  color: #1a1a2e;
+  font-size: 14px;
+}
+
+.arch-characteristics ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.arch-characteristics li {
+  margin: 8px 0;
+  color: #595959;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Clean Architecture */
+.arch-diagram.clean {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.clean-layers {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+}
+
+.clean-layer {
+  padding: 12px 16px;
+  border-radius: 8px;
+  border-left: 4px solid;
+}
+
+.clean-layer.framework {
+  background: #f0f0f0;
+  border-left-color: #8c8c8c;
+}
+
+.clean-layer.interface {
+  background: #e6f7ff;
+  border-left-color: #1890ff;
+}
+
+.clean-layer.application {
+  background: #fff7e6;
+  border-left-color: #fa8c16;
+}
+
+.clean-layer.domain {
+  background: #f6ffed;
+  border-left-color: #52c41a;
+}
+
+.clean-layer .layer-name {
+  font-weight: 600;
+  color: #1a1a2e;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.clean-layer .layer-items {
+  font-size: 12px;
+  color: #666;
+}
+
+.dependency-rule {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  border: 2px dashed #1890ff;
+}
+
+.rule-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.rule-arrow .arrow-line {
+  width: 2px;
+  height: 20px;
+  background: #1890ff;
+}
+
+.rule-arrow .arrow-head {
+  color: #1890ff;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.rule-text {
+  color: #595959;
+  font-size: 13px;
+}
+
+/* Comparison Table */
+.comparison-table {
+  overflow-x: auto;
+}
+
+.comparison-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.comparison-table th {
+  background: #f5f7fa;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+
+.comparison-table tr:hover {
+  background: #fafafa;
+}
+
+/* Recommendation */
+.recommendation {
+  margin-top: 24px;
+}
+
+.recommendation h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+  text-align: center;
+}
+
+.rec-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.rec-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+  position: relative;
+}
+
+.rec-card.recommended {
+  background: #f6ffed;
+  border: 2px solid #52c41a;
+}
+
+.rec-badge {
+  position: absolute;
+  top: -10px;
+  right: 16px;
+  background: #52c41a;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.rec-title {
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.rec-card ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.rec-card li {
+  margin: 6px 0;
+  color: #595959;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .rec-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
new file mode 100644
index 0000000..438ee70
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="controller-layer-demo">
+    <div class="demo-header">
+      <h4>🎮 Controller 层：请求的"接待员"</h4>
+      <p class="subtitle">点击流程节点查看 Controller 如何接收和处理请求</p>
+    </div>
+
+    <div class="flow-container">
+      <!-- 请求发起 -->
+      <div class="flow-step">
+        <div class="step-icon">🌐</div>
+        <div class="step-content">
+          <div class="step-title">客户端发起请求</div>
+          <div class="step-code">
+            POST /api/users/register
+            Content-Type: application/json
+            {
+              "username": "张三",
+              "email": "zhangsan@example.com",
+              "password": "123456"
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-connector">⬇️ 请求到达</div>
+
+      <!-- Controller 接收 -->
+      <div
+        class="flow-step controller-step"
+        :class="{ active: showDetails === 'controller' }"
+        @click="toggleDetails('controller')"
+      >
+        <div class="step-icon">🎮</div>
+        <div class="step-content">
+          <div class="step-title">Controller 接收并解析请求</div>
+          <div class="step-code">
+            @RestController
+            @RequestMapping("/api/users")
+            public class UserController {
+
+              @PostMapping("/register")
+              public ResponseEntity&lt;UserDTO&gt; register(
+                @RequestBody @Valid UserRegisterRequest request
+              ) {
+                // 调用 Service 处理业务
+                UserDTO user = userService.register(request);
+                return ResponseEntity.ok(user);
+              }
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-connector">⬇️ 参数校验 + 调用</div>
+
+      <!-- 校验逻辑 -->
+      <div
+        class="flow-step validation-step"
+        :class="{ active: showDetails === 'validation' }"
+        @click="toggleDetails('validation')"
+      >
+        <div class="step-icon">✅</div>
+        <div class="step-content">
+          <div class="step-title">参数校验（Controller 的职责之一）</div>
+          <div class="step-code">
+            public class UserRegisterRequest {
+              @NotBlank(message = "用户名不能为空")
+              @Size(min = 2, max = 20, message = "用户名长度2-20")
+              private String username;
+
+              @Email(message = "邮箱格式不正确")
+              private String email;
+
+              @Size(min = 6, message = "密码至少6位")
+              private String password;
+            }
+          </div>
+          <div v-if="showDetails === 'validation'" class="detail-panel">
+            <h5>为什么校验要放在 Controller？</h5>
+            <ul>
+              <li>🛡️ 第一道防线：尽早拦截非法请求</li>
+              <li>📦 减轻下游压力：Service 层可以假设数据已清洗</li>
+              <li>🔧 关注点分离：Service 专注于业务，不处理格式验证</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-connector">⬇️ 返回结果</div>
+
+      <!-- 响应返回 -->
+      <div class="flow-step">
+        <div class="step-icon">📤</div>
+        <div class="step-content">
+          <div class="step-title">Controller 封装响应返回给客户端</div>
+          <div class="step-code">
+            HTTP/1.1 200 OK
+            Content-Type: application/json
+
+            {
+              "code": 200,
+              "message": "注册成功",
+              "data": {
+                "id": 10001,
+                "username": "张三",
+                "email": "zhangsan@example.com",
+                "createdAt": "2024-01-15T10:30:00Z"
+              }
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Controller 职责总结 -->
+    <div class="controller-summary">
+      <h5>🎯 Controller 的核心职责</h5>
+      <div class="duty-grid">
+        <div class="duty-item">
+          <div class="duty-icon">📡</div>
+          <div class="duty-title">接收请求</div>
+          <div class="duty-desc">映射 HTTP 请求到方法</div>
+        </div>
+        <div class="duty-item">
+          <div class="duty-icon">✅</div>
+          <div class="duty-title">参数校验</div>
+          <div class="duty-desc">基础格式和必填校验</div>
+        </div>
+        <div class="duty-item">
+          <div class="duty-icon">🔄</div>
+          <div class="duty-title">调用 Service</div>
+          <div class="duty-desc">将请求转发给业务层</div>
+        </div>
+        <div class="duty-item">
+          <div class="duty-icon">📦</div>
+          <div class="duty-title">封装响应</div>
+          <div class="duty-desc">统一响应格式返回</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showDetails = ref('')
+
+const toggleDetails = (section) => {
+  showDetails.value = showDetails.value === section ? '' : section
+}
+</script>
+
+<style scoped>
+.controller-layer-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.flow-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.flow-step {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.flow-step:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.flow-step.active {
+  border: 2px solid #409eff;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+.controller-step {
+  border-left: 4px solid #67c23a;
+}
+
+.validation-step {
+  border-left: 4px solid #e6a23c;
+}
+
+.step-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.step-code {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 6px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+  color: #333;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.arrow-connector {
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: #909399;
+  font-weight: 500;
+}
+
+.detail-panel {
+  margin-top: 12px;
+  padding: 16px;
+  background: #f0f7ff;
+  border-radius: 8px;
+  border-left: 4px solid #409eff;
+}
+
+.detail-panel h5 {
+  margin: 0 0 12px 0;
+  color: #1a1a2e;
+  font-size: 14px;
+}
+
+.detail-panel ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.detail-panel li {
+  margin: 6px 0;
+  color: #606266;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.controller-summary {
+  margin-top: 24px;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.controller-summary h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+  text-align: center;
+}
+
+.duty-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.duty-item {
+  text-align: center;
+  padding: 16px 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.duty-item:hover {
+  background: #e6f7ff;
+  transform: translateY(-2px);
+}
+
+.duty-icon {
+  font-size: 28px;
+  margin-bottom: 8px;
+}
+
+.duty-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.duty-desc {
+  color: #909399;
+  font-size: 11px;
+}
+
+@media (max-width: 768px) {
+  .duty-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .flow-step {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .step-content {
+    width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
new file mode 100644
index 0000000..66bd33e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="dependency-direction-demo">
+    <div class="demo-header">
+      <h4>🔄 依赖方向：分层架构的核心规则</h4>
+      <p class="subtitle">理解依赖方向，才能真正掌握分层架构</p>
+    </div>
+
+    <!-- 依赖方向可视化 -->
+    <div class="direction-visualization">
+      <div class="arch-diagram">
+        <!-- 外层 -->
+        <div class="layer outer">
+          <div class="layer-label">外层（UI / 外部系统）</div>
+          <div class="layer-box">Controller</div>
+        </div>
+
+        <!-- 依赖箭头 -->
+        <div class="dependency-arrow down">
+          <span class="arrow-line"></span>
+          <span class="arrow-head">▶️ 依赖</span>
+        </div>
+
+        <!-- 中层 -->
+        <div class="layer middle">
+          <div class="layer-label">中层（应用层）</div>
+          <div class="layer-box">Service</div>
+        </div>
+
+        <!-- 依赖箭头 -->
+        <div class="dependency-arrow down">
+          <span class="arrow-line"></span>
+          <span class="arrow-head">▶️ 依赖</span>
+        </div>
+
+        <!-- 内层 -->
+        <div class="layer inner">
+          <div class="layer-label">内层（领域层）</div>
+          <div class="layer-box">Domain / Repository</div>
+        </div>
+      </div>
+
+      <!-- 核心原则说明 -->
+      <div class="principle-box">
+        <div class="principle-title">🎯 核心原则：依赖倒置（DIP）</div>
+        <div class="principle-content">
+          <p><strong>上层模块不应该依赖下层模块的具体实现，而应该依赖于抽象。</strong></p>
+          <div class="rule-list">
+            <div class="rule-item">
+              <span class="rule-icon">✅</span>
+              <div class="rule-text">
+                <strong>Controller → Service 接口</strong>
+                <div class="rule-desc">Controller 只依赖 Service 的接口，不依赖实现类</div>
+              </div>
+            </div>
+            <div class="rule-item">
+              <span class="rule-icon">✅</span>
+              <div class="rule-text">
+                <strong>Service → Repository 接口</strong>
+                <div class="rule-desc">Service 只依赖 Repository 接口，不关心数据怎么存</div>
+              </div>
+            </div>
+            <div class="rule-item">
+              <span class="rule-icon">✅</span>
+              <div class="rule-text">
+                <strong>所有层依赖 Domain</strong>
+                <div class="rule-desc">Domain 是核心，被所有上层依赖，但 Domain 不依赖任何层</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 依赖方向示意图 -->
+    <div class="direction-diagram">
+      <h5>📊 依赖方向示意图</h5>
+      <div class="diagram-content">
+        <pre class="diagram-code">
+┌─────────────────────────────────────────────────────────────┐
+│  Controller Layer                                            │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  UserController                                       │  │
+│  │  - @Autowired private IUserService userService;      │  │
+│  │  ✅ 依赖接口，不依赖实现                              │  │
+│  └──────────────────────────────────────────────────────┘  │
+│                            │                                 │
+│                            ▼ 依赖（Dependency）               │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  Service Layer                                        │  │
+│  │  ┌────────────────────────────────────────────────┐  │  │
+│  │  │  UserServiceImpl                                │  │  │
+│  │  │  - @Autowired private UserRepository repository;  │  │  │
+│  │  │  ✅ 依赖 Repository 接口                         │  │  │
+│  │  └────────────────────────────────────────────────┘  │  │
+│  │                      │                              │  │
+│  │                      ▼ 依赖                          │  │
+│  │  ┌────────────────────────────────────────────────┐  │  │
+│  │  │  Repository Layer                               │  │  │
+│  │  │  ┌──────────────────────────────────────────┐   │  │  │
+│  │  │  │  UserRepository                          │   │  │  │
+│  │  │  │  - extends JpaRepository&lt;User, Long&gt;    │   │  │  │
+│  │  │  └──────────────────────────────────────────┘   │  │  │
+│  │  │                      │                         │  │  │
+│  │  │                      ▼ 依赖                     │  │  │
+│  │  │  ┌──────────────────────────────────────────┐   │  │  │
+│  │  │  │  Domain Layer (核心领域)                   │   │  │  │
+│  │  │  │  ┌────────────────────────────────────┐  │   │  │  │
+│  │  │  │  │  User (Entity)                     │  │   │  │  │
+│  │  │  │  │  - 不包含任何层依赖                  │  │   │  │  │
+│  │  │  │  │  - 被所有层依赖                      │  │   │  │  │
+│  │  │  │  └────────────────────────────────────┘  │   │  │  │
+│  │  │  └──────────────────────────────────────────┘   │  │  │
+│  │  └────────────────────────────────────────────────┘  │  │
+│  └──────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+        </pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Component logic can be added here if needed
+</script>
+
+<style scoped>
+.dependency-direction-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.direction-visualization {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.arch-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.layer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.layer-label {
+  font-size: 11px;
+  color: #909399;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.layer-box {
+  padding: 16px 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  font-weight: 500;
+  color: #303133;
+  text-align: center;
+  border-left: 4px solid #409eff;
+}
+
+.layer.outer .layer-box {
+  border-left-color: #67c23a;
+}
+
+.layer.middle .layer-box {
+  border-left-color: #e6a23c;
+}
+
+.layer.inner .layer-box {
+  border-left-color: #409eff;
+}
+
+.dependency-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.arrow-line {
+  width: 2px;
+  height: 12px;
+  background: #dcdfe6;
+}
+
+.arrow-head {
+  color: #909399;
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+.principle-box {
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f7ff 100%);
+  border-radius: 10px;
+  padding: 20px;
+  border-left: 4px solid #1890ff;
+}
+
+.principle-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 12px;
+}
+
+.principle-content p {
+  margin: 0 0 12px 0;
+  color: #595959;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rule-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.rule-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.rule-text {
+  flex: 1;
+}
+
+.rule-text strong {
+  color: #1a1a2e;
+  font-size: 13px;
+}
+
+.rule-desc {
+  color: #8c8c8c;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.direction-diagram {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.direction-diagram h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+  text-align: center;
+}
+
+.diagram-content {
+  overflow-x: auto;
+}
+
+.diagram-code {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #595959;
+  margin: 0;
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .model-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-tabs {
+    flex-direction: column;
+  }
+
+  .tab-btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
new file mode 100644
index 0000000..0006b9a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="domain-model-demo">
+    <div class="demo-header">
+      <h4>📦 Domain 层：领域模型设计</h4>
+      <p class="subtitle">Domain 是业务概念的载体，所有层的依赖基础</p>
+    </div>
+
+    <!-- 领域模型对比 -->
+    <div class="model-comparison">
+      <div class="comparison-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          :class="['tab-btn', { active: currentTab === tab.id }]"
+          @click="currentTab = tab.id"
+        >
+          {{ tab.name }}
+        </button>
+      </div>
+
+      <div class="comparison-content">
+        <!-- 贫血模型 vs 充血模型 -->
+        <div v-if="currentTab === 'comparison'" class="tab-panel">
+          <div class="model-cards">
+            <div class="model-card anemic">
+              <div class="card-header">
+                <span class="card-icon">📄</span>
+                <span class="card-title">贫血模型 (Anemic)</span>
+                <span class="card-badge">传统做法</span>
+              </div>
+              <div class="card-content">
+                <div class="code-section">
+                  <div class="code-label">Entity（只有 getter/setter）</div>
+                  <pre><code>@Entity
+public class Order {
+    @Id
+    private Long id;
+    private Long userId;
+    private BigDecimal totalAmount;
+    private OrderStatus status;
+    private LocalDateTime createdAt;
+
+    // 只有 getter/setter，没有业务逻辑
+    public Long getId() { return id; }
+    public void setId(Long id) { this.id = id; }
+    // ... 其他 getter/setter
+}</code></pre>
+                </div>
+
+                <div class="code-section">
+                  <div class="code-label">Service（所有业务逻辑都在这里）</div>
+                  <pre><code>@Service
+public class OrderService {
+
+    public void cancelOrder(Long orderId) {
+        Order order = orderRepository.findById(orderId)
+            .orElseThrow();
+
+        // 贫血模型：业务逻辑散落在 Service 里
+        if (order.getStatus() == OrderStatus.SHIPPED) {
+            throw new IllegalStateException("已发货订单不能取消");
+        }
+        if (order.getStatus() == OrderStatus.CANCELLED) {
+            throw new IllegalStateException("订单已取消");
+        }
+
+        // 修改状态
+        order.setStatus(OrderStatus.CANCELLED);
+        orderRepository.save(order);
+    }
+}</code></pre>
+                </div>
+
+                <div class="problems">
+                  <div class="problem-title">😫 贫血模型的问题</div>
+                  <ul>
+                    <li><strong>违背面向对象</strong>：对象只有数据没有行为，变成了 "数据结构"</li>
+                    <li><strong>逻辑分散</strong>：同样的业务规则可能在多个 Service 重复</li>
+                    <li><strong>难以维护</strong>：改一个规则要找所有用到的地方</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div class="model-card rich">
+              <div class="card-header">
+                <span class="card-icon">🧠</span>
+                <span class="card-title">充血模型 (Rich Domain)</span>
+                <span class="card-badge tag-green">推荐做法</span>
+              </div>
+              <div class="card-content">
+                <div class="code-section">
+                  <div class="code-label">Entity（包含业务逻辑）</div>
+                  <pre><code>@Entity
+public class Order {
+    @Id
+    private Long id;
+    private Long userId;
+    private BigDecimal totalAmount;
+    private OrderStatus status;
+    private LocalDateTime createdAt;
+
+    // 🎯 业务行为封装在实体里
+
+    /**
+     * 取消订单
+     */
+    public void cancel() {
+        // 状态校验内聚在方法里
+        if (this.status == OrderStatus.SHIPPED) {
+            throw new IllegalStateException("已发货订单不能取消");
+        }
+        if (this.status == OrderStatus.CANCELLED) {
+            throw new IllegalStateException("订单已取消");
+        }
+
+        this.status = OrderStatus.CANCELLED;
+        // 可以触发领域事件
+        registerEvent(new OrderCancelledEvent(this.id));
+    }
+
+    /**
+     * 支付订单
+     */
+    public void pay(Payment payment) {
+        if (this.status != OrderStatus.PENDING_PAYMENT) {
+            throw new IllegalStateException("订单状态不正确");
+        }
+        if (!payment.getAmount().equals(this.totalAmount)) {
+            throw new IllegalArgumentException("支付金额不匹配");
+        }
+
+        this.status = OrderStatus.PAID;
+        this.paymentTime = LocalDateTime.now();
+    }
+
+    // ... 其他业务方法
+}</code></pre>
+                </div>
+
+                <div class="code-section">
+                  <div class="code-label">Service（只做协调，不做业务判断）</div>
+                  <pre><code>@Service
+@RequiredArgsConstructor
+public class OrderService {
+
+    private final OrderRepository orderRepository;
+    private final DomainEventPublisher eventPublisher;
+
+    @Transactional
+    public void cancelOrder(Long orderId) {
+        // 1. 加载聚合根
+        Order order = orderRepository.findById(orderId)
+            .orElseThrow(() -> new OrderNotFoundException(orderId));
+
+        // 2. 💡 调用领域对象的业务方法
+        // 业务规则封装在 Order 里，Service 只做协调
+        order.cancel();
+
+        // 3. 保存变更
+        orderRepository.save(order);
+
+        // 4. 发布领域事件
+        order.getDomainEvents().forEach(eventPublisher::publish);
+        order.clearDomainEvents();
+    }
+}</code></pre>
+                </div>
+
+                <div class="benefits">
+                  <div class="benefit-title">😊 充血模型的优势</div>
+                  <ul>
+                    <li><strong>符合面向对象</strong>：数据和行为封装在一起，是真正的 "对象"</li>
+                    <li><strong>业务内聚</strong>：规则跟着对象走，改一处处处生效</li>
+                    <li><strong>可复用可测试</strong>：领域对象是纯内存对象，单元测试不需要数据库</li>
+                    <li><strong>表达力强</strong>：order.cancel() 比 orderService.cancel(order) 更自然</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 值对象 -->
+        <div v-else-if="currentTab === 'valueobject'" class="tab-panel">
+          <div class="value-object-content">
+            <div class="concept-intro">
+              <h5>💎 什么是值对象（Value Object）？</h5>
+              <p>值对象是没有唯一标识、不可变的对象，它描述了某种特征或属性。两个值对象如果所有属性相等，就被认为是同一个对象。</p>
+            </div>
+
+            <div class="vo-examples">
+              <div class="example-card">
+                <div class="example-title">📍 地址 Address</div>
+                <pre><code>// 值对象：不可变、无 ID
+public record Address(
+    String province,    // 省
+    String city,        // 市
+    String district,    // 区
+    String street,      // 街道
+    String zipCode      // 邮编
+) {
+    // 值对象的方法通常是转换或计算
+    public String toDisplayString() {
+        return String.format("%s%s%s%s",
+            province, city, district, street);
+    }
+
+    // 校验逻辑
+    public boolean isValid() {
+        return StringUtils.isNotBlank(province)
+            && StringUtils.isNotBlank(city);
+    }
+}
+
+// 使用：地址相等只要属性相同
+Address addr1 = new Address("广东", "深圳", "南山", "科技园", "518000");
+Address addr2 = new Address("广东", "深圳", "南山", "科技园", "518000");
+
+System.out.println(addr1.equals(addr2)); // true - 值对象比较的是值</code></pre>
+              </div>
+
+              <div class="example-card">
+                <div class="example-title">💰 金钱 Money</div>
+                <pre><code>// 金钱是经典的值对象
+public record Money(
+    BigDecimal amount,
+    Currency currency
+) {
+
+    // 工厂方法
+    public static Money of(BigDecimal amount, String currencyCode) {
+        return new Money(amount, Currency.getInstance(currencyCode));
+    }
+
+    public static Money yuan(BigDecimal amount) {
+        return new Money(amount, Currency.getInstance("CNY"));
+    }
+
+    // 值对象的核心：运算返回新的值对象
+    public Money add(Money other) {
+        if (!this.currency.equals(other.currency)) {
+            throw new IllegalArgumentException("Cannot add different currencies");
+        }
+        return new Money(this.amount.add(other.amount), this.currency);
+    }
+
+    public Money multiply(int factor) {
+        return new Money(this.amount.multiply(BigDecimal.valueOf(factor)), currency);
+    }
+
+    public boolean isGreaterThan(Money other) {
+        return this.amount.compareTo(other.amount) > 0;
+    }
+
+    // 格式化显示
+    public String toDisplayString() {
+        return currency.getSymbol() + amount.setScale(2, RoundingMode.HALF_UP);
+    }
+}
+
+// 使用示例
+Money price = Money.yuan(new BigDecimal("199.99"));
+Money shipping = Money.yuan(new BigDecimal("10.00"));
+Money discount = Money.yuan(new BigDecimal("20.00"));
+
+Money total = price.add(shipping).add(discount.negate());
+System.out.println(total.toDisplayString()); // ¥189.99</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentTab = ref('comparison')
+
+const tabs = [
+  { id: 'comparison', name: '贫血 vs 充血' },
+  { id: 'valueobject', name: '值对象设计' }
+]
+</script>
+
+<style scoped>
+.domain-model-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.model-comparison {
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.comparison-tabs {
+  display: flex;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.tab-btn {
+  padding: 12px 24px;
+  border: none;
+  background: transparent;
+  color: #606266;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.tab-btn:hover {
+  color: #409eff;
+}
+
+.tab-btn.active {
+  color: #409eff;
+  background: white;
+  font-weight: 500;
+}
+
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #409eff;
+}
+
+.comparison-content {
+  padding: 20px;
+}
+
+.tab-panel {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.model-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.model-card {
+  background: #f8f9fa;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid #e4e7ed;
+}
+
+.model-card.anemic {
+  border-left: 4px solid #ff4d4f;
+}
+
+.model-card.rich {
+  border-left: 4px solid #52c41a;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.card-icon {
+  font-size: 20px;
+}
+
+.card-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.card-badge {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: #ff4d4f;
+  color: white;
+  border-radius: 10px;
+  font-size: 11px;
+}
+
+.card-badge.tag-green {
+  background: #52c41a;
+}
+
+.card-content {
+  padding: 16px;
+}
+
+.code-section {
+  margin-bottom: 16px;
+}
+
+.code-label {
+  font-size: 11px;
+  color: #909399;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.code-section pre {
+  background: #2d2d2d;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.code-section code {
+  color: #f8f8f2;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+.problems, .benefits {
+  padding: 12px;
+  border-radius: 6px;
+  margin-top: 12px;
+}
+
+.problems {
+  background: #fff1f0;
+  border-left: 3px solid #ff4d4f;
+}
+
+.benefits {
+  background: #f6ffed;
+  border-left: 3px solid #52c41a;
+}
+
+.problem-title, .benefit-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.problem-title {
+  color: #cf1322;
+}
+
+.benefit-title {
+  color: #389e0d;
+}
+
+.problems ul, .benefits ul {
+  margin: 0;
+  padding-left: 16px;
+}
+
+.problems li, .benefits li {
+  margin: 6px 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #595959;
+}
+
+@media (max-width: 1024px) {
+  .model-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
new file mode 100644
index 0000000..d9ea59c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="dto-flow-demo">
+    <div class="demo-header">
+      <h4>🔄 DTO 流转：数据在不同层之间的转换</h4>
+      <p class="subtitle">DTO（Data Transfer Object）是层与层之间传递数据的载体</p>
+    </div>
+
+    <!-- 流程图 -->
+    <div class="flow-diagram">
+      <div class="flow-step">
+        <div class="step-title">Controller 层</div>
+        <div class="step-code">
+          <div class="code-line">
+            <span class="comment">// 接收 Request DTO</span>
+          </div>
+          <div class="code-line">
+            <span class="keyword">public</span> ResponseEntity&lt;UserDTO&gt; createUser(
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;@RequestBody <span class="highlight">@Valid UserCreateRequest request</span>
+          </div>
+          <div class="code-line">
+            ) { ... }
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-arrow">⬇️ 转换为 Service 需要的参数</div>
+
+      <div class="flow-step">
+        <div class="step-title">Service 层</div>
+        <div class="step-code">
+          <div class="code-line">
+            <span class="comment">// 业务处理</span>
+          </div>
+          <div class="code-line">
+            <span class="keyword">public</span> UserDTO createUser(UserCreateParam param) {
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="comment">// 转换为 Entity</span>
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;User user = <span class="highlight">param.toEntity()</span>;
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;userRepository.save(user);
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="keyword">return</span> <span class="highlight">UserDTO.from(user)</span>;
+          </div>
+          <div class="code-line">
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-arrow">⬇️ 转换为 Repository 需要的 Entity</div>
+
+      <div class="flow-step">
+        <div class="step-title">Repository 层</div>
+        <div class="step-code">
+          <div class="code-line">
+            <span class="comment">// 数据持久化</span>
+          </div>
+          <div class="code-line">
+            <span class="keyword">public interface</span> UserRepository
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="keyword">extends</span> JpaRepository&lt;<span class="highlight">User</span>, Long&gt; {
+          </div>
+          <div class="code-line">
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-arrow">⬆️ 返回 Entity，转换为 DTO</div>
+
+      <div class="flow-step">
+        <div class="step-title">返回给客户端</div>
+        <div class="step-code">
+          <div class="code-line">
+            <span class="comment">// Response DTO</span>
+          </div>
+          <div class="code-line">
+            {
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="string">"id"</span>: 10001,
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="string">"username"</span>: <span class="string">"张三"</span>,
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="string">"email"</span>: <span class="string">"zhangsan@example.com"</span>,
+          </div>
+          <div class="code-line">
+            &nbsp;&nbsp;<span class="string">"createdAt"</span>: <span class="string">"2024-01-15T10:30:00Z"</span>
+          </div>
+          <div class="code-line">
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 不同层 DTO 对比 -->
+    <div class="dto-comparison">
+      <h5>📋 不同层的 DTO 职责</h5>
+      <div class="comparison-table">
+        <div class="table-header">
+          <div class="col-layer">层级</div>
+          <div class="col-dto">DTO 类型</div>
+          <div class="col-purpose">职责</div>
+          <div class="col-example">示例</div>
+        </div>
+        <div class="table-row">
+          <div class="col-layer">
+            <span class="layer-tag controller">Controller</span>
+          </div>
+          <div class="col-dto">
+            Request / Response DTO
+          </div>
+          <div class="col-purpose">
+            定义 API 契约、参数校验、序列化
+          </div>
+          <div class="col-example">
+            <code>UserCreateRequest</code>
+          </div>
+        </div>
+        <div class="table-row">
+          <div class="col-layer">
+            <span class="layer-tag service">Service</span>
+          </div>
+          <div class="col-dto">
+            Param / Result DTO
+          </div>
+          <div class="col-purpose">
+            封装业务方法参数，解耦 Controller 与 Service
+          </div>
+          <div class="col-example">
+            <code>UserCreateParam</code>
+          </div>
+        </div>
+        <div class="table-row">
+          <div class="col-layer">
+            <span class="layer-tag repository">Repository</span>
+          </div>
+          <div class="col-dto">
+            Entity / DO
+          </div>
+          <div class="col-purpose">
+            映射数据库表结构，ORM 映射
+          </div>
+          <div class="col-example">
+            <code>UserEntity</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const viewMode = ref('conversion')
+</script>
+
+<style scoped>
+.dto-flow-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.flow-diagram {
+  background: white;
+  border-radius: 10px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.flow-step {
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+  border-left: 4px solid #409eff;
+}
+
+.flow-step:nth-child(odd) {
+  border-left-color: #67c23a;
+}
+
+.step-title {
+  padding: 12px 16px;
+  background: white;
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.step-code {
+  padding: 16px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.code-line {
+  padding: 2px 0;
+}
+
+.comment {
+  color: #6a9955;
+}
+
+.keyword {
+  color: #569cd6;
+}
+
+.highlight {
+  background: #fff3cd;
+  padding: 2px 4px;
+  border-radius: 3px;
+  color: #856404;
+}
+
+.string {
+  color: #ce9178;
+}
+
+.flow-arrow {
+  text-align: center;
+  padding: 12px;
+  color: #909399;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.dto-comparison {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.dto-comparison h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+  text-align: center;
+}
+
+.comparison-table {
+  overflow-x: auto;
+}
+
+.table-header, .table-row {
+  display: grid;
+  grid-template-columns: 100px 150px 1fr 120px;
+  gap: 12px;
+  padding: 12px;
+  align-items: center;
+}
+
+.table-header {
+  background: #f5f7fa;
+  border-radius: 8px;
+  font-weight: 600;
+  color: #303133;
+  font-size: 13px;
+}
+
+.table-row {
+  border-bottom: 1px solid #ebeef5;
+  font-size: 12px;
+  color: #606266;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.layer-tag {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.layer-tag.controller {
+  background: #f0f9ff;
+  color: #1890ff;
+}
+
+.layer-tag.service {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.layer-tag.repository {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+@media (max-width: 768px) {
+  .table-header, .table-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .table-header {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
new file mode 100644
index 0000000..ee65663
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="layered-architecture-demo">
+    <div class="architecture-container">
+      <!-- 客户端 -->
+      <div class="client-layer">
+        <div class="layer-box client">
+          <div class="layer-icon">🌐</div>
+          <div class="layer-title">客户端</div>
+          <div class="layer-desc">Web / App / 小程序</div>
+        </div>
+        <div class="arrow-down">⬇️ HTTP/HTTPS</div>
+      </div>
+
+      <!-- 后端分层 -->
+      <div class="backend-layers">
+        <!-- Controller 层 -->
+        <div
+          class="layer-box controller"
+          :class="{ active: activeLayer === 'controller' }"
+          @click="setActiveLayer('controller')"
+        >
+          <div class="layer-header">
+            <span class="layer-icon">🎮</span>
+            <span class="layer-name">Controller</span>
+            <span class="layer-badge">入口</span>
+          </div>
+          <div class="layer-content">
+            <div class="duty">职责：接收请求、参数校验、调用 Service</div>
+            <div class="tech">技术：Spring MVC / Gin / Echo</div>
+          </div>
+        </div>
+
+        <div class="arrow-down">⬇️ 调用</div>
+
+        <!-- Service 层 -->
+        <div
+          class="layer-box service"
+          :class="{ active: activeLayer === 'service' }"
+          @click="setActiveLayer('service')"
+        >
+          <div class="layer-header">
+            <span class="layer-icon">⚙️</span>
+            <span class="layer-name">Service</span>
+            <span class="layer-badge">业务核心</span>
+          </div>
+          <div class="layer-content">
+            <div class="duty">职责：业务逻辑编排、事务管理、跨模块协调</div>
+            <div class="tech">技术：纯代码逻辑 / 无框架依赖</div>
+          </div>
+        </div>
+
+        <div class="arrow-down">⬇️ 调用</div>
+
+        <!-- Repository 层 -->
+        <div
+          class="layer-box repository"
+          :class="{ active: activeLayer === 'repository' }"
+          @click="setActiveLayer('repository')"
+        >
+          <div class="layer-header">
+            <span class="layer-icon">🗄️</span>
+            <span class="layer-name">Repository</span>
+            <span class="layer-badge">数据访问</span>
+          </div>
+          <div class="layer-content">
+            <div class="duty">职责：数据持久化、查询封装、ORM 映射</div>
+            <div class="tech">技术：MyBatis / GORM / Hibernate</div>
+          </div>
+        </div>
+
+        <div class="arrow-down">⬇️ SQL</div>
+
+        <!-- Domain 层 -->
+        <div
+          class="layer-box domain"
+          :class="{ active: activeLayer === 'domain' }"
+          @click="setActiveLayer('domain')"
+        >
+          <div class="layer-header">
+            <span class="layer-icon">📦</span>
+            <span class="layer-name">Domain / Model</span>
+            <span class="layer-badge">领域模型</span>
+          </div>
+          <div class="layer-content">
+            <div class="duty">职责：实体定义、业务规则、值对象</div>
+            <div class="tech">技术：POJO / Struct / Class</div>
+          </div>
+        </div>
+
+        <div class="arrow-down">⬇️ 持久化</div>
+
+        <!-- 数据库 -->
+        <div class="layer-box database">
+          <div class="layer-icon">💾</div>
+          <div class="layer-title">数据库</div>
+          <div class="layer-desc">MySQL / PostgreSQL / MongoDB</div>
+        </div>
+      </div>
+
+      <!-- 右侧说明面板 -->
+      <div class="info-panel" v-if="activeLayer">
+        <h4>{{ layerInfo.title }}</h4>
+        <p>{{ layerInfo.description }}</p>
+        <div class="analogy">
+          <strong>💡 类比：</strong>{{ layerInfo.analogy }}
+        </div>
+        <div class="common-mistakes">
+          <strong>⚠️ 常见错误：</strong>
+          <ul>
+            <li v-for="mistake in layerInfo.mistakes" :key="mistake">{{ mistake }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部交互提示 -->
+    <div class="interaction-hint">
+      💡 点击各层查看详细说明 | 实际调用流向：从上到下，依赖从下到上
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeLayer = ref('')
+
+const setActiveLayer = (layer) => {
+  activeLayer.value = activeLayer.value === layer ? '' : layer
+}
+
+const layerInfo = computed(() => {
+  const infoMap = {
+    controller: {
+      title: 'Controller 层 - 请求的"门童"',
+      description: 'Controller 是系统的入口，负责接收 HTTP 请求、解析参数、进行基础校验，然后调用 Service 层处理业务。',
+      analogy: '就像餐厅的门童，负责迎接客人（接收请求）、检查预约（参数校验）、引导入座（路由到对应服务），但不负责做菜。',
+      mistakes: [
+        '在 Controller 里写业务逻辑（应该放在 Service）',
+        '直接操作数据库（应该调用 Repository）',
+        '不做参数校验，导致脏数据流入系统'
+      ]
+    },
+    service: {
+      title: 'Service 层 - 业务逻辑的"厨师"',
+      description: 'Service 是系统的核心，负责编排业务逻辑、管理事务、协调多个 Repository。这一层应该包含所有的业务规则和流程。',
+      analogy: '就像餐厅的厨师，负责按照菜谱（业务规则）做菜，需要协调各种食材（数据），把控菜品质量（业务正确性）。',
+      mistakes: [
+        'Service 之间互相调用，形成循环依赖',
+        '在 Service 里直接写 SQL（应该放在 Repository）',
+        '一个 Service 方法过长，包含多个业务场景（应该拆分成多个方法）'
+      ]
+    },
+    repository: {
+      title: 'Repository 层 - 数据的"仓管"',
+      description: 'Repository 负责与数据库交互，封装所有的 CRUD 操作。上层不需要关心具体的数据库类型和 SQL 语句。',
+      analogy: '就像餐厅的仓管员，负责从仓库（数据库）取食材、存放剩余食材，厨师（Service）只需要告诉他要什么，不需要知道仓库在哪。',
+      mistakes: [
+        '在 Repository 里写业务逻辑（应该只负责数据访问）',
+        '直接返回数据库实体给前端（应该转换为 DTO）',
+        '一个 Repository 操作多个表（应该拆分到不同 Repository）'
+      ]
+    },
+    domain: {
+      title: 'Domain 层 - 业务概念的"蓝图"',
+      description: 'Domain 定义了系统中的实体、值对象、业务规则。它是所有层的依赖基础，但不依赖任何其他层。',
+      analogy: '就像餐厅的菜单和菜品标准，定义了什么是"宫保鸡丁"、用什么食材、什么口味。所有厨师都要按照这个标准来做。',
+      mistakes: [
+        'Domain 对象里包含持久化注解（应该保持纯净）',
+        '在 Domain 里写业务逻辑（业务逻辑应该在 Service）',
+        'Domain 对象之间循环依赖'
+      ]
+    }
+  }
+  return infoMap[activeLayer.value] || {}
+})
+</script>
+
+<style scoped>
+.layered-architecture-demo {
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.architecture-container {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.client-layer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.backend-layers {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.layer-box {
+  padding: 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.layer-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.layer-box.active {
+  border-color: #409eff;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+/* 各层颜色主题 */
+.controller { border-left: 4px solid #67c23a; }
+.service { border-left: 4px solid #e6a23c; }
+.repository { border-left: 4px solid #409eff; }
+.domain { border-left: 4px solid #909399; }
+.client { border-left: 4px solid #f56c6c; }
+.database { border-left: 4px solid #8e44ad; }
+
+.layer-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.layer-icon {
+  font-size: 20px;
+}
+
+.layer-name {
+  font-weight: 600;
+  font-size: 15px;
+  color: #303133;
+}
+
+.layer-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  background: #f0f2f5;
+  color: #606266;
+}
+
+.layer-content {
+  padding-left: 30px;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.6;
+}
+
+.duty, .tech {
+  margin: 4px 0;
+}
+
+.arrow-down {
+  text-align: center;
+  padding: 6px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.info-panel {
+  width: 320px;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 20px;
+}
+
+.info-panel h4 {
+  margin: 0 0 12px 0;
+  color: #303133;
+  font-size: 16px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+}
+
+.info-panel p {
+  margin: 0 0 16px 0;
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.analogy, .common-mistakes {
+  margin: 12px 0;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.analogy {
+  background: #f0f9ff;
+  border-left: 3px solid #409eff;
+  color: #1d4ed8;
+}
+
+.common-mistakes {
+  background: #fff2f0;
+  border-left: 3px solid #ff4d4f;
+  color: #cf1322;
+}
+
+.common-mistakes ul {
+  margin: 6px 0 0 0;
+  padding-left: 16px;
+}
+
+.common-mistakes li {
+  margin: 4px 0;
+}
+
+.interaction-hint {
+  text-align: center;
+  padding: 16px;
+  margin-top: 16px;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: 8px;
+  color: #389e0d;
+  font-size: 13px;
+}
+
+@media (max-width: 1024px) {
+  .architecture-container {
+    flex-direction: column;
+  }
+
+  .info-panel {
+    width: 100%;
+    position: static;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
new file mode 100644
index 0000000..2c6f781
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
@@ -0,0 +1,1036 @@
+<template>
+  <div class="repository-layer-demo">
+    <div class="demo-header">
+      <h4>🗄️ Repository 层：数据的"仓库管理员"</h4>
+      <p class="subtitle">Repository 封装数据访问逻辑，让上层无需关心数据库细节</p>
+    </div>
+
+    <!-- 对比演示 -->
+    <div class="comparison-section">
+      <div class="comparison-header">
+        <div class="toggle-group">
+          <button
+            :class="['toggle-btn', { active: viewMode === 'bad' }]"
+            @click="viewMode = 'bad'"
+          >
+            ❌ 糟糕的做法
+          </button>
+          <button
+            :class="['toggle-btn', { active: viewMode === 'good' }]"
+            @click="viewMode = 'good'"
+          >
+            ✅ 优雅的做法
+          </button>
+        </div>
+      </div>
+
+      <div class="comparison-content">
+        <!-- 糟糕的做法 -->
+        <div v-if="viewMode === 'bad'" class="code-panel bad">
+          <div class="panel-header">
+            <span class="panel-title">😫 在 Service 里直接写 SQL</span>
+            <span class="panel-badge">耦合严重</span>
+          </div>
+
+          <pre class="code-block"><code>@Service
+public class OrderService {
+
+    @Autowired
+    private JdbcTemplate jdbcTemplate;  // 直接依赖底层 JDBC
+
+    public List&lt;Order&gt; getUserOrders(Long userId) {
+        // ❌ 问题1：SQL 硬编码在 Service 里
+        // ❌ 问题2：更换数据库需要改业务代码
+        // ❌ 问题3：无法单元测试，必须连真实数据库
+        String sql = "SELECT * FROM orders WHERE user_id = ? AND deleted = 0";
+
+        return jdbcTemplate.query(sql, (rs, rowNum) -> {
+            Order order = new Order();
+            order.setId(rs.getLong("id"));
+            order.setUserId(rs.getLong("user_id"));
+            order.setTotalAmount(rs.getBigDecimal("total_amount"));
+            // ... 更多字段映射
+            return order;
+        }, userId);
+    }
+
+    public void updateOrderStatus(Long orderId, OrderStatus status) {
+        // ❌ 问题4：到处重复 SQL 片段
+        String sql = "UPDATE orders SET status = ?, updated_at = NOW() WHERE id = ?";
+        jdbcTemplate.update(sql, status.name(), orderId);
+    }
+}
+</code></pre>
+
+
+          <div class="problems-list">
+            <h5>😰 这种做法的问题</h5>
+            <ul>
+              <li><strong>数据库耦合</strong>：业务代码里到处都是 SQL，换数据库等于重写</li>
+              <li><strong>难以测试</strong>：Service 必须连真实数据库才能跑，单元测试变成集成测试</li>
+              <li><strong>代码重复</strong>：同样的查询条件（如 deleted=0）在每个方法里重复写</li>
+              <li><strong>安全隐患</strong>：手写 SQL 容易漏掉防注入处理</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 优雅的做法 -->
+        <div v-else class="code-panel good">
+          <div class="panel-header">
+            <span class="panel-title">😊 使用 Repository 封装数据访问</span>
+            <span class="panel-badge">清晰解耦</span>
+          </div>
+
+
+          <pre class="code-block"><code>// ========== 1. 实体定义（Domain） ==========
+@Entity
+@Table(name = "orders")
+public class Order {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(name = "user_id", nullable = false)
+    private Long userId;
+
+    @Column(name = "total_amount")
+    private BigDecimal totalAmount;
+
+    @Enumerated(EnumType.STRING)
+    private OrderStatus status;
+
+    @Column(name = "deleted")
+    private Boolean deleted = false;
+
+    // getters and setters...
+}
+
+// ========== 2. Repository 接口定义 ==========
+@Repository
+public interface OrderRepository extends JpaRepository&lt;Order, Long&gt; {
+
+    // ✅ Spring Data 自动生成查询 - 简单查询
+    List&lt;Order&gt; findByUserIdAndDeletedFalse(Long userId);
+
+    // ✅ 自定义 JPQL 查询 - 复杂统计
+    @Query("""
+        SELECT new com.example.OrderStatistics(
+            o.userId,
+            COUNT(o),
+            SUM(o.totalAmount),
+            MAX(o.createdAt)
+        )
+        FROM Order o
+        WHERE o.createdAt BETWEEN :startDate AND :endDate
+          AND o.deleted = false
+        GROUP BY o.userId
+        HAVING COUNT(o) >= :minOrderCount
+        ORDER BY SUM(o.totalAmount) DESC
+        """)
+    List&lt;OrderStatistics&gt; findUserOrderStatistics(
+        @Param("startDate") LocalDateTime startDate,
+        @Param("endDate") LocalDateTime endDate,
+        @Param("minOrderCount") Long minOrderCount,
+        Pageable pageable
+    );
+
+    // ✅ 批量更新 - 修改状态
+    @Modifying
+    @Query("UPDATE Order o SET o.status = :newStatus, " +
+           "o.updatedAt = CURRENT_TIMESTAMP WHERE o.id IN :ids")
+    int batchUpdateStatus(
+        @Param("ids") List&lt;Long&gt; orderIds,
+        @Param("newStatus") OrderStatus newStatus
+    );
+}
+
+// ========== 3. Service 层（纯业务逻辑） ==========
+@Service
+public class OrderService {
+
+    @Autowired
+    private OrderRepository orderRepository;  // ✅ 依赖接口，不依赖具体实现
+
+    @Autowired
+    private UserRepository userRepository;
+
+    // ✅ 业务方法清晰简洁，不关心数据怎么存
+    public List&lt;OrderDTO&gt; getUserOrders(Long userId) {
+        // 可以在这里加业务校验
+        User user = userRepository.findById(userId)
+            .orElseThrow(() -> new UserNotFoundException(userId));
+
+        // 直接调用 Repository，SQL 藏在后面
+        List&lt;Order&gt; orders = orderRepository.findByUserIdAndDeletedFalse(userId);
+
+        // 转换为 DTO 返回
+        return orders.stream()
+            .map(OrderDTO::from)
+            .collect(Collectors.toList());
+    }
+}
+</code></pre>
+
+
+          <div class="benefits-list">
+            <h5>🎉 这样做的好处</h5>
+            <ul>
+              <li><strong>关注点分离</strong>：Service 专注于业务，Repository 专注于数据，各管一摊</li>
+              <li><strong>可测试性高</strong>：Service 只依赖 Repository 接口，单元测试可以用 Mock 对象替代真实数据库</li>
+              <li><strong>代码复用</strong>：通用的查询方法（如 findByUserId）定义一次，到处复用</li>
+              <li><strong>切换成本低</strong>：从 MySQL 换成 MongoDB，只需改 Repository 实现，Service 完全不动</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Repository 模式对比 -->
+    <div class="pattern-comparison">
+      <h5>📊 不同 Repository 实现方式对比</h5>
+
+      <div class="comparison-table">
+        <div class="table-header">
+          <div class="col-method">实现方式</div>
+          <div class="col-pros">优点</div>
+          <div class="col-cons">缺点</div>
+          <div class="col-scene">适用场景</div>
+        </div>
+
+        <div class="table-row">
+          <div class="col-method">
+            <strong>Spring Data JPA</strong>
+            <div class="method-tag">主流方案</div>
+          </div>
+          <div class="col-pros">
+            <ul>
+              <li>方法名自动推导查询</li>
+              <li>分页排序内置支持</li>
+              <li>事务管理集成</li>
+            </ul>
+          </div>
+          <div class="col-cons">
+            <ul>
+              <li>复杂查询性能一般</li>
+              <li>学习曲线较陡</li>
+            </ul>
+          </div>
+          <div class="col-scene">快速开发、标准 CRUD 业务</div>
+        </div>
+
+        <div class="table-row">
+          <div class="col-method">
+            <strong>MyBatis / MyBatis-Plus</strong>
+            <div class="method-tag tag-blue">国内主流</div>
+          </div>
+          <div class="col-pros">
+            <ul>
+              <li>SQL 完全可控</li>
+              <li>复杂查询性能优</li>
+              <li>动态 SQL 强大</li>
+            </ul>
+          </div>
+          <div class="col-cons">
+            <ul>
+              <li>需要手写 SQL</li>
+              <li>样板代码较多</li>
+            </ul>
+          </div>
+          <div class="col-scene">复杂查询、性能敏感业务</div>
+        </div>
+
+        <div class="table-row">
+          <div class="col-method">
+            <strong>Spring Data JDBC</strong>
+            <div class="method-tag tag-green">轻量</div>
+          </div>
+          <div class="col-pros">
+            <ul>
+              <li>简单轻量</li>
+              <li>无延迟加载</li>
+              <li>启动快速</li>
+            </ul>
+          </div>
+          <div class="col-cons">
+            <ul>
+              <li>无复杂映射</li>
+              <li>功能较简单</li>
+            </ul>
+          </div>
+          <div class="col-scene">微服务、简单聚合根场景</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const viewMode = ref('good')
+const currentScenario = ref('order')
+const expandedSteps = ref([1]) // 默认展开第二步
+
+const scenarios = [
+  { id: 'order', name: '下单流程' },
+  { id: 'refund', name: '退款处理' },
+  { id: 'report', name: '报表生成' }
+]
+
+const scenarioData = {
+  order: {
+    title: '🛒 电商下单流程',
+    description: '用户下单涉及库存扣减、订单创建、支付记录等多个操作，需要保证事务一致性',
+    steps: [
+      {
+        name: '参数校验与DTO转换',
+        layer: 'Controller',
+        code: `@PostMapping("/orders")
+public ResponseEntity<OrderDTO> createOrder(
+    @RequestBody @Valid CreateOrderRequest request
+) {
+    // 调用 Service
+    OrderDTO order = orderService.createOrder(request);
+    return ResponseEntity.ok(order);
+}`
+      },
+      {
+        name: '业务逻辑编排（事务管理）',
+        layer: 'Service',
+        code: `@Service
+@Transactional  // 关键：事务管理
+public class OrderService {
+
+    public OrderDTO createOrder(CreateOrderRequest request) {
+        // 1. 检查库存
+        inventoryService.checkAndDeduct(request.getSkuId(),
+                                      request.getQuantity());
+
+        // 2. 创建订单
+        Order order = new Order();
+        order.setUserId(request.getUserId());
+        order.setTotalAmount(calculateTotal(request));
+        orderRepository.save(order);
+
+        // 3. 创建支付记录
+        Payment payment = createPayment(order);
+        paymentRepository.save(payment);
+
+        // 任一失败都会回滚
+        return convertToDTO(order);
+    }
+}`,
+        subSteps: [
+          {
+            icon: '✅',
+            name: '检查并扣减库存',
+            desc: '确保库存充足，预先锁定',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '📝',
+            name: '创建订单记录',
+            desc: '生成订单主表数据',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '💳',
+            name: '创建支付记录',
+            desc: '初始化待支付状态',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '🔄',
+            name: '事务提交',
+            desc: '所有操作原子性提交',
+            status: 'success',
+            statusText: '已提交'
+          }
+        ]
+      },
+      {
+        name: '数据持久化',
+        layer: 'Repository',
+        code: `public interface OrderRepository extends JpaRepository<Order, Long> {
+    // 基本的 CRUD 已内置
+}
+
+// 实际执行：INSERT INTO orders (...) VALUES (...)`
+      }
+    ]
+  },
+  refund: {
+    title: '💰 退款处理流程',
+    description: '退款涉及订单状态变更、支付原路返回、库存回滚等操作',
+    steps: [
+      {
+        name: '接收退款申请',
+        layer: 'Controller',
+        code: `@PostMapping("/orders/{orderId}/refund")
+public ResponseEntity<RefundDTO> applyRefund(
+    @PathVariable Long orderId,
+    @RequestBody @Valid RefundRequest request
+) {
+    RefundDTO refund = refundService.processRefund(orderId, request);
+    return ResponseEntity.ok(refund);
+}`
+      },
+      {
+        name: '退款业务处理',
+        layer: 'Service',
+        code: `@Service
+@Transactional
+public class RefundService {
+
+    public RefundDTO processRefund(Long orderId, RefundRequest request) {
+        // 1. 验证订单状态
+        Order order = orderRepository.findById(orderId)
+            .orElseThrow(() -> new OrderNotFoundException("订单不存在"));
+
+        if (order.getStatus() != OrderStatus.PAID) {
+            throw new InvalidOrderStateException("订单状态不允许退款");
+        }
+
+        // 2. 计算退款金额
+        BigDecimal refundAmount = calculateRefundAmount(order, request);
+
+        // 3. 调用支付渠道退款
+        PaymentRefundResult result = paymentService.refund(
+            order.getPaymentNo(),
+            refundAmount,
+            request.getReason()
+        );
+
+        // 4. 更新订单状态
+        order.setStatus(OrderStatus.REFUNDING);
+        orderRepository.save(order);
+
+        // 5. 保存退款记录
+        RefundRecord record = new RefundRecord();
+        record.setOrderId(orderId);
+        record.setAmount(refundAmount);
+        record.setReason(request.getReason());
+        record.setStatus(RefundStatus.PROCESSING);
+        refundRecordRepository.save(record);
+
+        // 6. 异步恢复库存
+        inventoryService.restoreStockAsync(order.getItems());
+
+        return convertToDTO(record);
+    }
+}`,
+        subSteps: [
+          { icon: '🔍', name: '验证订单状态', desc: '检查订单是否存在且可退款', status: 'success', statusText: '通过' },
+          { icon: '💰', name: '计算退款金额', desc: '根据规则计算应退金额', status: 'success', statusText: '完成' },
+          { icon: '🏦', name: '调用支付渠道', desc: '请求第三方支付退款', status: 'success', statusText: '处理中' },
+          { icon: '📝', name: '更新订单状态', desc: '标记为退款中', status: 'success', statusText: '已更新' },
+          { icon: '📊', name: '保存退款记录', desc: '记录退款流水', status: 'success', statusText: '已保存' },
+          { icon: '🔄', name: '异步恢复库存', desc: '后台恢复商品库存', status: 'success', statusText: '已提交' }
+        ]
+      }
+    ]
+  },
+  report: {
+    title: '📊 报表生成流程',
+    description: '复杂的报表通常涉及多个数据源查询、数据聚合计算、异步导出等',
+    steps: [
+      {
+        name: '接收报表请求',
+        layer: 'Controller',
+        code: `@GetMapping("/reports/sales")
+public ResponseEntity<ReportTaskDTO> generateSalesReport(
+    @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
+    LocalDate startDate,
+    @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
+    LocalDate endDate,
+    @RequestParam(required = false) List<Long> regionIds
+) {
+    // 大报表采用异步生成
+    ReportTaskDTO task = reportService.createReportTask(
+        ReportType.SALES, startDate, endDate, regionIds
+    );
+    return ResponseEntity.accepted().body(task);
+}`
+      },
+      {
+        name: '复杂报表业务编排',
+        layer: 'Service',
+        code: `@Service
+public class ReportService {
+
+    @Async("reportExecutor")
+    public void generateReportAsync(Long taskId) {
+        ReportTask task = reportTaskRepository.findById(taskId)
+            .orElseThrow();
+
+        try {
+            task.setStatus(TaskStatus.RUNNING);
+            reportTaskRepository.save(task);
+
+            // 1. 从多个数据源聚合数据
+            SalesReportData data = aggregateSalesData(task);
+
+            // 2. 计算各项指标
+            calculateMetrics(data);
+
+            // 3. 生成图表数据
+            generateChartData(data);
+
+            // 4. 导出为 Excel
+            String fileUrl = exportToExcel(data, task);
+
+            task.setStatus(TaskStatus.COMPLETED);
+            task.setFileUrl(fileUrl);
+            task.setCompletedAt(LocalDateTime.now());
+
+        } catch (Exception e) {
+            task.setStatus(TaskStatus.FAILED);
+            task.setErrorMessage(e.getMessage());
+        }
+
+        reportTaskRepository.save(task);
+    }
+
+    private SalesReportData aggregateSalesData(ReportTask task) {
+        // 协调多个 Repository 查询数据
+        List<Order> orders = orderRepository
+            .findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
+
+        List<Payment> payments = paymentRepository
+            .findByPaidAtBetween(task.getStartDate(), task.getEndDate());
+
+        List<RefundRecord> refunds = refundRecordRepository
+            .findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
+
+        // 数据聚合逻辑...
+        return new SalesReportData(orders, payments, refunds);
+    }
+}`,
+        subSteps: [
+          { icon: '📥', name: '从多个数据源查询', desc: 'Orders/Payments/Refunds', status: 'success', statusText: '已查询' },
+          { icon: '🔄', name: '数据聚合与清洗', desc: '关联数据、处理缺失值', status: 'success', statusText: '已完成' },
+          { icon: '📊', name: '计算业务指标', desc: 'GMV、订单数、客单价等', status: 'success', statusText: '已计算' },
+          { icon: '📈', name: '生成图表数据', desc: '趋势图、占比图数据结构', status: 'success', statusText: '已生成' },
+          { icon: '📄', name: '导出 Excel 文件', desc: '生成并上传至 OSS', status: 'success', statusText: '已完成' }
+        ]
+      }
+    ]
+  }
+}
+
+const currentScenarioData = computed(() => scenarioData[currentScenario.value])
+
+const toggleStep = (index) => {
+  const i = expandedSteps.value.indexOf(index)
+  if (i > -1) {
+    expandedSteps.value.splice(i, 1)
+  } else {
+    expandedSteps.value.push(index)
+  }
+}
+
+const principles = [
+  {
+    id: 1,
+    icon: '🎯',
+    title: '单一职责',
+    desc: '一个 Service 类只负责一块业务领域',
+    example: 'UserService 只管用户，OrderService 只管订单'
+  },
+  {
+    id: 2,
+    icon: '🔄',
+    title: '事务边界',
+    desc: '在 Service 层声明式管理事务',
+    example: '@Transactional 放在 Service 方法上'
+  },
+  {
+    id: 3,
+    icon: '🔗',
+    title: '避免循环依赖',
+    desc: 'Service 之间不要互相调用',
+    example: 'A 调用 B，B 又调用 A 会导致循环'
+  },
+  {
+    id: 4,
+    icon: '📦',
+    title: 'DTO 转换',
+    desc: '返回前转换为 DTO，不暴露实体',
+    example: 'return new UserDTO(user)'
+  }
+]
+</script>
+
+<style scoped>
+.service-layer-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #fff9f0 0%, #fff0e6 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.scenario-selector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.selector-label {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.scenario-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.scenario-btn {
+  padding: 8px 16px;
+  border: 1px solid #dcdfe6;
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #606266;
+  transition: all 0.3s ease;
+}
+
+.scenario-btn:hover {
+  border-color: #e6a23c;
+  color: #e6a23c;
+}
+
+.scenario-btn.active {
+  background: #e6a23c;
+  border-color: #e6a23c;
+  color: white;
+}
+
+.flow-diagram {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.flow-header {
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.flow-title {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 6px;
+}
+
+.flow-desc {
+  font-size: 13px;
+  color: #909399;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.flow-step {
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-left: 4px solid #e6a23c;
+}
+
+.flow-step:hover {
+  background: #fff8f0;
+  transform: translateX(4px);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e6a23c;
+  color: white;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.step-info {
+  flex: 1;
+}
+
+.step-name {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.step-layer {
+  font-size: 12px;
+  color: #e6a23c;
+  margin-top: 2px;
+}
+
+.expand-icon {
+  color: #909399;
+  font-size: 12px;
+}
+
+.step-code {
+  padding: 0 16px 16px 56px;
+}
+
+.step-code pre {
+  margin: 0;
+  background: #2d2d2d;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.step-code code {
+  color: #f8f8f2;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.sub-steps {
+  padding: 0 16px 16px 56px;
+}
+
+.sub-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: white;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  border-left: 3px solid #dcdfe6;
+}
+
+.sub-step.success {
+  border-left-color: #67c23a;
+  background: #f6ffed;
+}
+
+.sub-step-icon {
+  font-size: 16px;
+}
+
+.sub-step-content {
+  flex: 1;
+}
+
+.sub-step-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.sub-step-desc {
+  font-size: 11px;
+  color: #909399;
+  margin-top: 2px;
+}
+
+.sub-step-status {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #f0f9ff;
+  color: #1890ff;
+}
+
+.sub-step.success .sub-step-status {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.comparison-section {
+  margin-bottom: 24px;
+}
+
+.comparison-header {
+  margin-bottom: 16px;
+}
+
+.toggle-group {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.toggle-btn {
+  padding: 10px 20px;
+  border: 2px solid #dcdfe6;
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  transition: all 0.3s ease;
+}
+
+.toggle-btn:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.toggle-btn.active {
+  background: #409eff;
+  border-color: #409eff;
+  color: white;
+}
+
+.comparison-content {
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.code-panel {
+  padding: 20px;
+}
+
+.code-panel.bad {
+  background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
+}
+
+.code-panel.good {
+  background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #303133;
+}
+
+.panel-badge {
+  padding: 4px 10px;
+  background: #ff4d4f;
+  color: white;
+  border-radius: 12px;
+  font-size: 11px;
+}
+
+.code-panel.good .panel-badge {
+  background: #52c41a;
+}
+
+.code-block {
+  background: #2d2d2d;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 0;
+  overflow-x: auto;
+}
+
+.code-block code {
+  color: #f8f8f2;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.problems-list, .benefits-list {
+  margin-top: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+}
+
+.problems-list h5 {
+  color: #cf1322;
+  margin: 0 0 12px 0;
+  font-size: 14px;
+}
+
+.benefits-list h5 {
+  color: #389e0d;
+  margin: 0 0 12px 0;
+  font-size: 14px;
+}
+
+.problems-list ul, .benefits-list ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.problems-list li, .benefits-list li {
+  margin: 8px 0;
+  color: #595959;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.pattern-comparison {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.pattern-comparison h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+  text-align: center;
+}
+
+.comparison-table {
+  overflow-x: auto;
+}
+
+.table-header, .table-row {
+  display: grid;
+  grid-template-columns: 140px 1fr 1fr 1fr;
+  gap: 12px;
+  padding: 12px;
+  align-items: start;
+}
+
+.table-header {
+  background: #f5f7fa;
+  border-radius: 8px;
+  font-weight: 600;
+  color: #303133;
+  font-size: 13px;
+}
+
+.table-row {
+  border-bottom: 1px solid #ebeef5;
+  font-size: 12px;
+  color: #606266;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.col-method strong {
+  color: #303133;
+  font-size: 13px;
+}
+
+.method-tag {
+  display: inline-block;
+  padding: 2px 6px;
+  background: #e6a23c;
+  color: white;
+  border-radius: 4px;
+  font-size: 10px;
+  margin-top: 4px;
+}
+
+.method-tag.tag-blue {
+  background: #409eff;
+}
+
+.method-tag.tag-green {
+  background: #67c23a;
+}
+
+.col-pros ul, .col-cons ul {
+  margin: 0;
+  padding-left: 16px;
+}
+
+.col-pros li, .col-cons li {
+  margin: 4px 0;
+}
+
+@media (max-width: 1024px) {
+  .table-header, .table-row {
+    grid-template-columns: 120px 1fr 1fr 1fr;
+    font-size: 11px;
+  }
+
+  .col-pros ul, .col-cons ul {
+    padding-left: 14px;
+  }
+}
+
+@media (max-width: 768px) {
+  .toggle-group {
+    flex-direction: column;
+  }
+
+  .toggle-btn {
+    width: 100%;
+  }
+
+  .table-header, .table-row {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .table-row {
+    padding: 16px;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
new file mode 100644
index 0000000..5398344
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
@@ -0,0 +1,698 @@
+<template>
+  <div class="service-layer-demo">
+    <div class="demo-header">
+      <h4>⚙️ Service 层：业务逻辑的"指挥家"</h4>
+      <p class="subtitle">Service 层编排业务逻辑，协调多个 Repository，管理事务边界</p>
+    </div>
+
+    <!-- 场景选择器 -->
+    <div class="scenario-selector">
+      <div class="selector-label">选择业务场景：</div>
+      <div class="scenario-buttons">
+        <button
+          v-for="scenario in scenarios"
+          :key="scenario.id"
+          :class="['scenario-btn', { active: currentScenario === scenario.id }]"
+          @click="currentScenario = scenario.id"
+        >
+          {{ scenario.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 流程图 -->
+    <div class="flow-diagram">
+      <div class="flow-header">
+        <span class="flow-title">{{ currentScenarioData.title }}</span>
+        <span class="flow-desc">{{ currentScenarioData.description }}</span>
+      </div>
+
+      <div class="flow-steps">
+        <div
+          v-for="(step, index) in currentScenarioData.steps"
+          :key="index"
+          class="flow-step"
+          :class="{ 'has-sub-steps': step.subSteps }"
+          @click="toggleStep(index)"
+        >
+          <div class="step-header">
+            <div class="step-number">{{ index + 1 }}</div>
+            <div class="step-info">
+              <div class="step-name">{{ step.name }}</div>
+              <div class="step-layer">{{ step.layer }}</div>
+            </div>
+            <div v-if="step.subSteps" class="expand-icon">
+              {{ expandedSteps.includes(index) ? '▼' : '▶' }}
+            </div>
+          </div>
+
+          <div v-if="step.code" class="step-code">
+            <pre><code>{{ step.code }}</code></pre>
+          </div>
+
+          <!-- 子步骤（事务管理） -->
+          <div v-if="step.subSteps && expandedSteps.includes(index)" class="sub-steps">
+            <div
+              v-for="(subStep, subIndex) in step.subSteps"
+              :key="subIndex"
+              class="sub-step"
+              :class="subStep.status"
+            >
+              <div class="sub-step-icon">{{ subStep.icon }}</div>
+              <div class="sub-step-content">
+                <div class="sub-step-name">{{ subStep.name }}</div>
+                <div class="sub-step-desc">{{ subStep.desc }}</div>
+              </div>
+              <div class="sub-step-status">{{ subStep.statusText }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Service 设计原则 -->
+    <div class="design-principles">
+      <h5>🎯 Service 层设计原则</h5>
+      <div class="principles-grid">
+        <div
+          v-for="principle in principles"
+          :key="principle.id"
+          class="principle-card"
+        >
+          <div class="principle-icon">{{ principle.icon }}</div>
+          <div class="principle-title">{{ principle.title }}</div>
+          <div class="principle-desc">{{ principle.desc }}</div>
+          <div class="principle-example">
+            <code>{{ principle.example }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentScenario = ref('order')
+const expandedSteps = ref([])
+
+const scenarios = [
+  { id: 'order', name: '下单流程' },
+  { id: 'refund', name: '退款处理' },
+  { id: 'report', name: '报表生成' }
+]
+
+const scenarioData = {
+  order: {
+    title: '🛒 电商下单流程',
+    description: '用户下单涉及库存扣减、订单创建、支付记录等多个操作，需要保证事务一致性',
+    steps: [
+      {
+        name: '参数校验与DTO转换',
+        layer: 'Controller',
+        code: `@PostMapping("/orders")
+public ResponseEntity&lt;OrderDTO&gt; createOrder(
+    @RequestBody @Valid CreateOrderRequest request
+) {
+    // 调用 Service
+    OrderDTO order = orderService.createOrder(request);
+    return ResponseEntity.ok(order);
+}`
+      },
+      {
+        name: '业务逻辑编排（事务管理）',
+        layer: 'Service',
+        code: `@Service
+@Transactional  // 关键：事务管理
+public class OrderService {
+
+    public OrderDTO createOrder(CreateOrderRequest request) {
+        // 1. 检查库存
+        inventoryService.checkAndDeduct(request.getSkuId(),
+                                      request.getQuantity());
+
+        // 2. 创建订单
+        Order order = new Order();
+        order.setUserId(request.getUserId());
+        order.setTotalAmount(calculateTotal(request));
+        orderRepository.save(order);
+
+        // 3. 创建支付记录
+        Payment payment = createPayment(order);
+        paymentRepository.save(payment);
+
+        // 任一失败都会回滚
+        return convertToDTO(order);
+    }
+}`,
+        subSteps: [
+          {
+            icon: '✅',
+            name: '检查并扣减库存',
+            desc: '确保库存充足，预先锁定',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '📝',
+            name: '创建订单记录',
+            desc: '生成订单主表数据',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '💳',
+            name: '创建支付记录',
+            desc: '初始化待支付状态',
+            status: 'success',
+            statusText: '成功'
+          },
+          {
+            icon: '🔄',
+            name: '事务提交',
+            desc: '所有操作原子性提交',
+            status: 'success',
+            statusText: '已提交'
+          }
+        ]
+      },
+      {
+        name: '数据持久化',
+        layer: 'Repository',
+        code: `public interface OrderRepository extends JpaRepository&lt;Order, Long&gt; {
+    // 基本的 CRUD 已内置
+}
+
+// 实际执行：INSERT INTO orders (...) VALUES (...)`
+      }
+    ]
+  },
+  refund: {
+    title: '💰 退款处理流程',
+    description: '退款涉及订单状态变更、支付原路返回、库存回滚等操作',
+    steps: [
+      {
+        name: '接收退款申请',
+        layer: 'Controller',
+        code: `@PostMapping("/orders/{orderId}/refund")
+public ResponseEntity&lt;RefundDTO&gt; applyRefund(
+    @PathVariable Long orderId,
+    @RequestBody @Valid RefundRequest request
+) {
+    RefundDTO refund = refundService.processRefund(orderId, request);
+    return ResponseEntity.ok(refund);
+}`
+      },
+      {
+        name: '退款业务处理',
+        layer: 'Service',
+        code: `@Service
+@Transactional
+public class RefundService {
+
+    public RefundDTO processRefund(Long orderId, RefundRequest request) {
+        // 1. 验证订单状态
+        Order order = orderRepository.findById(orderId)
+            .orElseThrow(() -> new OrderNotFoundException("订单不存在"));
+
+        if (order.getStatus() != OrderStatus.PAID) {
+            throw new InvalidOrderStateException("订单状态不允许退款");
+        }
+
+        // 2. 计算退款金额
+        BigDecimal refundAmount = calculateRefundAmount(order, request);
+
+        // 3. 调用支付渠道退款
+        PaymentRefundResult result = paymentService.refund(
+            order.getPaymentNo(),
+            refundAmount,
+            request.getReason()
+        );
+
+        // 4. 更新订单状态
+        order.setStatus(OrderStatus.REFUNDING);
+        orderRepository.save(order);
+
+        // 5. 保存退款记录
+        RefundRecord record = new RefundRecord();
+        record.setOrderId(orderId);
+        record.setAmount(refundAmount);
+        record.setReason(request.getReason());
+        record.setStatus(RefundStatus.PROCESSING);
+        refundRecordRepository.save(record);
+
+        // 6. 异步恢复库存
+        inventoryService.restoreStockAsync(order.getItems());
+
+        return convertToDTO(record);
+    }
+}`,
+        subSteps: [
+          { icon: '🔍', name: '验证订单状态', desc: '检查订单是否存在且可退款', status: 'success', statusText: '通过' },
+          { icon: '💰', name: '计算退款金额', desc: '根据规则计算应退金额', status: 'success', statusText: '完成' },
+          { icon: '🏦', name: '调用支付渠道', desc: '请求第三方支付退款', status: 'success', statusText: '处理中' },
+          { icon: '📝', name: '更新订单状态', desc: '标记为退款中', status: 'success', statusText: '已更新' },
+          { icon: '📊', name: '保存退款记录', desc: '记录退款流水', status: 'success', statusText: '已保存' },
+          { icon: '🔄', name: '异步恢复库存', desc: '后台恢复商品库存', status: 'success', statusText: '已提交' }
+        ]
+      }
+    ]
+  },
+  report: {
+    title: '📊 报表生成流程',
+    description: '复杂的报表通常涉及多个数据源查询、数据聚合计算、异步导出等',
+    steps: [
+      {
+        name: '接收报表请求',
+        layer: 'Controller',
+        code: `@GetMapping("/reports/sales")
+public ResponseEntity<ReportTaskDTO> generateSalesReport(
+    @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
+    LocalDate startDate,
+    @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
+    LocalDate endDate,
+    @RequestParam(required = false) List<Long> regionIds
+) {
+    // 大报表采用异步生成
+    ReportTaskDTO task = reportService.createReportTask(
+        ReportType.SALES, startDate, endDate, regionIds
+    );
+    return ResponseEntity.accepted().body(task);
+}`
+      },
+      {
+        name: '复杂报表业务编排',
+        layer: 'Service',
+        code: `@Service
+public class ReportService {
+
+    @Async("reportExecutor")
+    public void generateReportAsync(Long taskId) {
+        ReportTask task = reportTaskRepository.findById(taskId)
+            .orElseThrow();
+
+        try {
+            task.setStatus(TaskStatus.RUNNING);
+            reportTaskRepository.save(task);
+
+            // 1. 从多个数据源聚合数据
+            SalesReportData data = aggregateSalesData(task);
+
+            // 2. 计算各项指标
+            calculateMetrics(data);
+
+            // 3. 生成图表数据
+            generateChartData(data);
+
+            // 4. 导出为 Excel
+            String fileUrl = exportToExcel(data, task);
+
+            task.setStatus(TaskStatus.COMPLETED);
+            task.setFileUrl(fileUrl);
+            task.setCompletedAt(LocalDateTime.now());
+
+        } catch (Exception e) {
+            task.setStatus(TaskStatus.FAILED);
+            task.setErrorMessage(e.getMessage());
+        }
+
+        reportTaskRepository.save(task);
+    }
+
+    private SalesReportData aggregateSalesData(ReportTask task) {
+        // 协调多个 Repository 查询数据
+        List<Order> orders = orderRepository
+            .findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
+
+        List<Payment> payments = paymentRepository
+            .findByPaidAtBetween(task.getStartDate(), task.getEndDate());
+
+        List<RefundRecord> refunds = refundRecordRepository
+            .findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
+
+        // 数据聚合逻辑...
+        return new SalesReportData(orders, payments, refunds);
+    }
+}`,
+        subSteps: [
+          { icon: '📥', name: '从多个数据源查询', desc: 'Orders/Payments/Refunds', status: 'success', statusText: '已查询' },
+          { icon: '🔄', name: '数据聚合与清洗', desc: '关联数据、处理缺失值', status: 'success', statusText: '已完成' },
+          { icon: '📊', name: '计算业务指标', desc: 'GMV、订单数、客单价等', status: 'success', statusText: '已计算' },
+          { icon: '📈', name: '生成图表数据', desc: '趋势图、占比图数据结构', status: 'success', statusText: '已生成' },
+          { icon: '📄', name: '导出 Excel 文件', desc: '生成并上传至 OSS', status: 'success', statusText: '已完成' }
+        ]
+      }
+    ]
+  }
+}
+
+const currentScenarioData = computed(() => scenarioData[currentScenario.value])
+
+const toggleStep = (index) => {
+  const i = expandedSteps.value.indexOf(index)
+  if (i > -1) {
+    expandedSteps.value.splice(i, 1)
+  } else {
+    expandedSteps.value.push(index)
+  }
+}
+
+const principles = [
+  {
+    id: 1,
+    icon: '🎯',
+    title: '单一职责',
+    desc: '一个 Service 类只负责一块业务领域',
+    example: 'UserService 只管用户，OrderService 只管订单'
+  },
+  {
+    id: 2,
+    icon: '🔄',
+    title: '事务边界',
+    desc: '在 Service 层声明式管理事务',
+    example: '@Transactional 放在 Service 方法上'
+  },
+  {
+    id: 3,
+    icon: '🔗',
+    title: '避免循环依赖',
+    desc: 'Service 之间不要互相调用',
+    example: 'A 调用 B，B 又调用 A 会导致循环'
+  },
+  {
+    id: 4,
+    icon: '📦',
+    title: 'DTO 转换',
+    desc: '返回前转换为 DTO，不暴露实体',
+    example: 'return new UserDTO(user)'
+  }
+]
+</script>
+
+<style scoped>
+.service-layer-demo {
+  padding: 24px;
+  background: linear-gradient(135deg, #fff9f0 0%, #fff0e6 100%);
+  border-radius: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: #1a1a2e;
+  font-size: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.scenario-selector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.selector-label {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.scenario-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.scenario-btn {
+  padding: 8px 16px;
+  border: 1px solid #dcdfe6;
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #606266;
+  transition: all 0.3s ease;
+}
+
+.scenario-btn:hover {
+  border-color: #e6a23c;
+  color: #e6a23c;
+}
+
+.scenario-btn.active {
+  background: #e6a23c;
+  border-color: #e6a23c;
+  color: white;
+}
+
+.flow-diagram {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.flow-header {
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.flow-title {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 6px;
+}
+
+.flow-desc {
+  font-size: 13px;
+  color: #909399;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.flow-step {
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-left: 4px solid #e6a23c;
+}
+
+.flow-step:hover {
+  background: #fff8f0;
+  transform: translateX(4px);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e6a23c;
+  color: white;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.step-info {
+  flex: 1;
+}
+
+.step-name {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.step-layer {
+  font-size: 12px;
+  color: #e6a23c;
+  margin-top: 2px;
+}
+
+.expand-icon {
+  color: #909399;
+  font-size: 12px;
+}
+
+.step-code {
+  padding: 0 16px 16px 56px;
+}
+
+.step-code pre {
+  margin: 0;
+  background: #2d2d2d;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.step-code code {
+  color: #f8f8f2;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.sub-steps {
+  padding: 0 16px 16px 56px;
+}
+
+.sub-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: white;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  border-left: 3px solid #dcdfe6;
+}
+
+.sub-step.success {
+  border-left-color: #67c23a;
+  background: #f6ffed;
+}
+
+.sub-step-icon {
+  font-size: 16px;
+}
+
+.sub-step-content {
+  flex: 1;
+}
+
+.sub-step-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.sub-step-desc {
+  font-size: 11px;
+  color: #909399;
+  margin-top: 2px;
+}
+
+.sub-step-status {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #f0f9ff;
+  color: #1890ff;
+}
+
+.sub-step.success .sub-step-status {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.design-principles {
+  margin-top: 24px;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.design-principles h5 {
+  margin: 0 0 16px 0;
+  color: #1a1a2e;
+  font-size: 15px;
+}
+
+.principles-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.principle-card {
+  padding: 14px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 3px solid #e6a23c;
+}
+
+.principle-icon {
+  font-size: 20px;
+  margin-bottom: 6px;
+}
+
+.principle-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.principle-desc {
+  color: #606266;
+  font-size: 11px;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.principle-example {
+  background: #2d2d2d;
+  padding: 8px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.principle-example code {
+  color: #f8f8f2;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .principles-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .scenario-selector {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .step-code {
+    padding-left: 16px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
new file mode 100644
index 0000000..a57e5c3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        合成层演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('合成层演示')
+const description = ref('展示浏览器渲染的最后阶段，将各层合成最终页面')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
new file mode 100644
index 0000000..5b55f5a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        DOM到渲染树演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('DOM到渲染树演示')
+const description = ref('展示浏览器如何将DOM树和CSSOM树组合成渲染树的过程')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
new file mode 100644
index 0000000..b58b068
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        布局重排演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('布局重排演示')
+const description = ref('展示浏览器渲染过程中的布局计算和重排机制')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
new file mode 100644
index 0000000..98bff19
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        宏任务微任务演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('宏任务微任务演示')
+const description = ref('展示JavaScript事件循环中的宏任务和微任务执行顺序')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
new file mode 100644
index 0000000..fd1790e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        绘制层演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('绘制层演示')
+const description = ref('展示浏览器渲染过程中的绘制层合成机制')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
new file mode 100644
index 0000000..8789ed5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        渲染性能演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('渲染性能演示')
+const description = ref('展示浏览器渲染性能优化技巧和最佳实践')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
new file mode 100644
index 0000000..13cd313
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="demo-container">
+    <h4>浏览器渲染管线全景图</h4>
+    <p class="demo-description">点击每个阶段查看详情，观察数据如何在管线中流动</p>
+
+    <div class="pipeline-container">
+      <div class="pipeline-flow">
+        <div
+          v-for="(stage, index) in stages"
+          :key="stage.id"
+          class="stage-card"
+          :class="{
+            active: activeStage === index,
+            completed: activeStage > index,
+            pending: activeStage < index
+          }"
+          @click="selectStage(index)"
+        >
+          <div class="stage-icon">{{ stage.icon }}</div>
+          <div class="stage-name">{{ stage.name }}</div>
+          <div class="stage-time">{{ stage.time }}</div>
+        </div>
+
+        <div class="flow-arrows">
+          <div v-for="i in stages.length - 1" :key="i" class="flow-arrow">
+            <span class="arrow-line"></span>
+            <span class="arrow-head">▶</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="stage-detail" v-if="activeStage >= 0">
+        <div class="detail-header">
+          <span class="detail-icon">{{ stages[activeStage].icon }}</span>
+          <span class="detail-title">{{ stages[activeStage].name }}</span>
+        </div>
+        <div class="detail-content">
+          <p>{{ stages[activeStage].description }}</p>
+          <div class="detail-meta">
+            <div class="meta-item">
+              <span class="meta-label">输入:</span>
+              <span class="meta-value">{{ stages[activeStage].input }}</span>
+            </div>
+            <div class="meta-item">
+              <span class="meta-label">输出:</span>
+              <span class="meta-value">{{ stages[activeStage].output }}</span>
+            </div>
+            <div class="meta-item">
+              <span class="meta-label">耗时:</span>
+              <span class="meta-value">{{ stages[activeStage].time }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="simulation-controls">
+      <el-button type="primary" @click="startSimulation" :disabled="isSimulating">
+        {{ isSimulating ? '模拟中...' : '开始模拟' }}
+      </el-button>
+      <el-button @click="resetSimulation">重置</el-button>
+      <el-slider v-model="simulationSpeed" :min="1" :max="5" :step="1" style="width: 150px;" />
+    </div>
+
+    <div class="pipeline-stats" v-if="showStats">
+      <div class="stat-card">
+        <div class="stat-value">{{ totalTime }}ms</div>
+        <div class="stat-label">总耗时</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">{{ bottleneckStage }}</div>
+        <div class="stat-label">瓶颈阶段</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">{{ optimizationTip }}</div>
+        <div class="stat-label">优化建议</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const stages = [
+  {
+    id: 'html',
+    icon: '📄',
+    name: 'HTML解析',
+    time: '15ms',
+    description: '浏览器接收HTML字节流，进行词法分析和语法分析，构建DOM树。这是渲染管线的起点。',
+    input: 'HTML字节流',
+    output: 'DOM树'
+  },
+  {
+    id: 'css',
+    icon: '🎨',
+    name: 'CSS解析',
+    time: '12ms',
+    description: '解析CSS样式表，处理选择器优先级，构建CSSOM树。CSSOM与DOM是并行构建的。',
+    input: 'CSS字节流',
+    output: 'CSSOM树'
+  },
+  {
+    id: 'render',
+    icon: '🌳',
+    name: '构建渲染树',
+    time: '8ms',
+    description: '将DOM树和CSSOM树合并，生成渲染树。只包含可见节点，并计算每个节点的样式。',
+    input: 'DOM + CSSOM',
+    output: '渲染树'
+  },
+  {
+    id: 'layout',
+    icon: '📐',
+    name: '布局 (Reflow)',
+    time: '25ms',
+    description: '计算每个节点在视口中的精确位置和大小。这是最耗时的阶段之一，牵一发而动全身。',
+    input: '渲染树',
+    output: '几何信息'
+  },
+  {
+    id: 'paint',
+    icon: '✏️',
+    name: '绘制 (Paint)',
+    time: '18ms',
+    description: '将每个节点转换为屏幕上的实际像素。包括文本、颜色、图像、边框等视觉内容。',
+    input: '几何信息',
+    output: '绘制记录'
+  },
+  {
+    id: 'composite',
+    icon: '🔮',
+    name: '合成 (Composite)',
+    time: '5ms',
+    description: '将多个图层按照正确的层级顺序合并为最终图像。利用GPU加速，是现代浏览器的优化重点。',
+    input: '绘制记录',
+    output: '屏幕像素'
+  }
+]
+
+const activeStage = ref(0)
+const isSimulating = ref(false)
+const simulationSpeed = ref(3)
+const showStats = ref(false)
+
+const totalTime = computed(() => {
+  return stages.reduce((sum, stage) => sum + parseInt(stage.time), 0)
+})
+
+const bottleneckStage = computed(() => '布局阶段')
+const optimizationTip = computed(() => '减少DOM操作')
+
+function selectStage(index) {
+  activeStage.value = index
+}
+
+function startSimulation() {
+  isSimulating.value = true
+  showStats.value = true
+  activeStage.value = 0
+
+  const interval = setInterval(() => {
+    if (activeStage.value < stages.length - 1) {
+      activeStage.value++
+    } else {
+      clearInterval(interval)
+      isSimulating.value = false
+    }
+  }, (6 - simulationSpeed.value) * 800)
+}
+
+function resetSimulation() {
+  isSimulating.value = false
+  activeStage.value = 0
+  showStats.value = false
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 8px 0;
+  color: #303133;
+}
+
+.demo-description {
+  color: #606266;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.pipeline-container {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.pipeline-flow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  padding-bottom: 10px;
+}
+
+.stage-card {
+  flex-shrink: 0;
+  width: 100px;
+  padding: 12px 8px;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  background: white;
+  position: relative;
+  z-index: 1;
+}
+
+.stage-card:hover {
+  border-color: #409eff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+}
+
+.stage-card.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+.stage-card.completed {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.stage-icon {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+
+.stage-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 2px;
+}
+
+.stage-time {
+  font-size: 11px;
+  color: #909399;
+}
+
+.flow-arrows {
+  position: absolute;
+  top: 50%;
+  left: 50px;
+  right: 50px;
+  height: 2px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.flow-arrow {
+  display: flex;
+  align-items: center;
+  color: #c0c4cc;
+  font-size: 12px;
+}
+
+.arrow-line {
+  width: 30px;
+  height: 2px;
+  background: #dcdfe6;
+}
+
+.arrow-head {
+  margin-left: -5px;
+}
+
+.stage-detail {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.detail-icon {
+  font-size: 20px;
+}
+
+.detail-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.detail-content {
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.detail-content p {
+  margin: 0 0 12px 0;
+}
+
+.detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.meta-item {
+  display: flex;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.meta-label {
+  color: #909399;
+}
+
+.meta-value {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.simulation-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.pipeline-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #409eff;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #909399;
+}
+
+@media (max-width: 768px) {
+  .pipeline-flow {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .flow-arrows {
+    display: none;
+  }
+
+  .stage-card {
+    width: 100%;
+    max-width: 200px;
+  }
+
+  .detail-meta {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
new file mode 100644
index 0000000..caa4a6e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        缓存架构概览演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('缓存架构概览')
+const description = ref('展示缓存系统的整体架构，包括本地缓存、分布式缓存、CDN缓存等多级缓存架构')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
new file mode 100644
index 0000000..d64f78d
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        缓存层级演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('缓存层级演示')
+const description = ref('展示多级缓存的层级结构和数据流动过程')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
new file mode 100644
index 0000000..5026a34
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
@@ -0,0 +1,51 @@
+
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        缓存监控面板演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('缓存监控面板')
+const description = ref('可视化展示缓存系统的监控指标，包括命中率、响应时间、缓存大小等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
new file mode 100644
index 0000000..6f0c476
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
@@ -0,0 +1,51 @@
+
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        缓存模式对比演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('缓存模式对比')
+const description = ref('对比展示Cache-Aside、Read-Through、Write-Through、Write-Behind等不同缓存模式')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
new file mode 100644
index 0000000..f9474b5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
@@ -0,0 +1,51 @@
+
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        电商缓存架构演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('电商缓存架构演示')
+const description = ref('展示电商系统中的多级缓存架构设计，包括商品缓存、库存缓存、用户缓存等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
new file mode 100644
index 0000000..d530a33
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
@@ -0,0 +1,505 @@
+<template>
+  <div class="access-key-management-demo">
+    <div class="demo-header">
+      <h4>访问密钥（AK/SK）生命周期管理</h4>
+      <p class="demo-desc">模拟 AK/SK 的创建、使用和轮换流程</p>
+    </div>
+
+    <div class="lifecycle-container">
+      <!-- AK/SK Card -->
+      <div class="aksk-card">
+        <div class="card-header">
+          <span class="status-badge" :class="akStatus">{{ statusText }}</span>
+          <span class="age-indicator">已创建 {{ akAge }} 天</span>
+        </div>
+
+        <div class="credentials-display">
+          <div class="credential-row">
+            <span class="label">Access Key ID:</span>
+            <div class="value-container">
+              <span class="value">{{ maskedAK }}</span>
+              <button class="icon-btn" @click="toggleAKVisibility">
+                {{ showAK ? '🙈' : '👁️' }}
+              </button>
+            </div>
+          </div>
+
+          <div class="credential-row">
+            <span class="label">Secret Access Key:</span>
+            <div class="value-container">
+              <span class="value">{{ maskedSK }}</span>
+              <button class="icon-btn" @click="toggleSKVisibility">
+                {{ showSK ? '🙈' : '👁️' }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="usage-stats">
+          <div class="stat-item">
+            <span class="stat-value">{{ apiCalls }}</span>
+            <span class="stat-label">API 调用</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value">{{ lastUsed }}</span>
+            <span class="stat-label">最后使用</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="action-panel">
+        <button
+          class="action-btn primary"
+          @click="rotateKey"
+          :disabled="isRotating"
+        >
+          <span class="btn-icon">🔄</span>
+          <span class="btn-text">轮换密钥</span>
+        </button>
+
+        <button
+          class="action-btn warning"
+          @click="deactivateKey"
+          :disabled="akStatus === 'inactive'"
+        >
+          <span class="btn-icon">⏸️</span>
+          <span class="btn-text">{{ akStatus === 'inactive' ? '已禁用' : '禁用密钥' }}</span>
+        </button>
+
+        <button
+          class="action-btn danger"
+          @click="deleteKey"
+        >
+          <span class="btn-icon">🗑️</span>
+          <span class="btn-text">删除密钥</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Rotation Progress -->
+    <div class="rotation-progress" v-if="isRotating">
+      <div class="progress-bar">
+        <div class="progress-fill" :style="{ width: rotationProgress + '%' }"></div>
+      </div>
+      <span class="progress-text">{{ rotationStatus }}</span>
+    </div>
+
+    <!-- Best Practices -->
+    <div class="best-practices">
+      <h5>🔒 AK/SK 安全管理最佳实践</h5>
+      <ul>
+        <li v-for="(tip, i) in securityTips" :key="i">
+          <span class="tip-icon">{{ tip.icon }}</span>
+          <span class="tip-text">{{ tip.text }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// AK/SK Data
+const akId = ref('AKIAIOSFODNN7EXAMPLE')
+const skId = ref('wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY')
+const akStatus = ref('active')
+const akAge = ref(45)
+const apiCalls = ref(123456)
+const lastUsed = ref('2 小时前')
+
+// Visibility
+const showAK = ref(false)
+const showSK = ref(false)
+
+// Rotation
+const isRotating = ref(false)
+const rotationProgress = ref(0)
+const rotationStatus = ref('')
+
+// Computed
+const maskedAK = computed(() => {
+  if (showAK.value) return akId.value
+  return akId.value.substring(0, 8) + '...'
+})
+
+const maskedSK = computed(() => {
+  if (showSK.value) return skId.value
+  return '************************************'
+})
+
+const statusText = computed(() => {
+  const map = {
+    active: '活跃',
+    inactive: '已禁用',
+    rotating: '轮换中'
+  }
+  return map[akStatus.value] || akStatus.value
+})
+
+// Methods
+function toggleAKVisibility() {
+  showAK.value = !showAK.value
+}
+
+function toggleSKVisibility() {
+  showSK.value = !showSK.value
+}
+
+async function rotateKey() {
+  isRotating.value = true
+  rotationProgress.value = 0
+  rotationStatus.value = '生成新密钥对...'
+
+  // Step 1: Generate new key
+  await simulateProgress(30, '创建新 Access Key...')
+  const newAK = 'AKIA' + Math.random().toString(36).substring(2, 14).toUpperCase()
+
+  // Step 2: Update applications
+  await simulateProgress(60, '更新应用配置...')
+
+  // Step 3: Test new key
+  await simulateProgress(85, '验证新密钥...')
+
+  // Step 4: Disable old key
+  await simulateProgress(100, '禁用旧密钥...')
+
+  // Update data
+  akId.value = newAK
+  akAge.value = 0
+  apiCalls.value = 0
+  lastUsed.value = '刚刚'
+  isRotating.value = false
+  akStatus.value = 'active'
+}
+
+function simulateProgress(target, status) {
+  return new Promise((resolve) => {
+    rotationStatus.value = status
+    const interval = setInterval(() => {
+      rotationProgress.value += 1
+      if (rotationProgress.value >= target) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 20)
+  })
+}
+
+function deactivateKey() {
+  if (confirm('确定要禁用这个访问密钥吗？禁用后使用该密钥的应用将无法访问云服务。')) {
+    akStatus.value = 'inactive'
+  }
+}
+
+function deleteKey() {
+  if (confirm('警告：删除访问密钥是不可逆的操作！\n\n确定要删除这个密钥吗？')) {
+    alert('密钥已删除（演示模式）')
+  }
+}
+
+// Security Tips
+const securityTips = [
+  { icon: '🔄', text: '每 90 天轮换一次访问密钥' },
+  { icon: '🔒', text: '绝不将 AK/SK 硬编码在代码中' },
+  { icon: '👁️', text: '定期审计和监控密钥使用情况' },
+  { icon: '🗑️', text: '及时删除不再使用的访问密钥' },
+  { icon: '🛡️', text: '优先使用 IAM 角色替代访问密钥' }
+]
+</script>
+
+<style scoped>
+.access-key-management-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.lifecycle-container {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+/* AK/SK Card */
+.aksk-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-badge.active {
+  background: #4caf50;
+  color: white;
+}
+
+.status-badge.inactive {
+  background: #f44336;
+  color: white;
+}
+
+.age-indicator {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.credentials-display {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.credential-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.credential-row .label {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  text-transform: uppercase;
+}
+
+.value-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.value {
+  flex: 1;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.icon-btn {
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.2s;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.usage-stats {
+  display: flex;
+  gap: 16px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stat-value {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #4caf50;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  opacity: 0.7;
+}
+
+/* Action Panel */
+.action-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+  color: white;
+}
+
+.action-btn.primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
+}
+
+.action-btn.warning {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+  color: white;
+}
+
+.action-btn.warning:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3);
+}
+
+.action-btn.danger {
+  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+  color: white;
+}
+
+.action-btn.danger:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3);
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+}
+
+/* Rotation Progress */
+.rotation-progress {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.progress-bar {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  display: block;
+  text-align: center;
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+/* Best Practices */
+.best-practices {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.best-practices h5 {
+  margin: 0 0 16px 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.best-practices ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.best-practices li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.best-practices li:last-child {
+  border-bottom: none;
+}
+
+.tip-icon {
+  font-size: 1.2rem;
+}
+
+.tip-text {
+  font-size: 0.85rem;
+  opacity: 0.9;
+}
+
+@media (max-width: 768px) {
+  .lifecycle-container {
+    grid-template-columns: 1fr;
+  }
+
+  .action-panel {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .action-btn {
+    flex: 1;
+    min-width: 140px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
new file mode 100644
index 0000000..8fb6cae
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
@@ -0,0 +1,461 @@
+<template>
+  <div class="best-practices-demo">
+    <div class="demo-header">
+      <h4>云账号权限管理最佳实践清单</h4>
+      <p class="demo-desc">点击查看详细的实施指南和代码示例</p>
+    </div>
+
+    <div class="practices-grid">
+      <div
+        v-for="(practice, index) in bestPractices"
+        :key="index"
+        class="practice-card"
+        :class="{ expanded: expandedCard === index }"
+        @click="toggleCard(index)"
+      >
+        <div class="card-header">
+          <div class="icon-wrapper" :style="{ background: practice.color }">
+            <span class="icon">{{ practice.icon }}</span>
+          </div>
+          <div class="title-wrapper">
+            <h5>{{ practice.title }}</h5>
+            <span class="priority" :class="practice.priority">{{ practice.priorityText }}</span>
+          </div>
+          <div class="expand-icon">{{ expandedCard === index ? '−' : '+' }}</div>
+        </div>
+
+        <div class="card-body" v-if="expandedCard === index">
+          <p class="description">{{ practice.description }}</p>
+
+          <div class="checklist">
+            <h6>✓ 检查清单</h6>
+            <ul>
+              <li v-for="(item, i) in practice.checklist" :key="i">{{ item }}</li>
+            </ul>
+          </div>
+
+          <div class="code-example" v-if="practice.code">
+            <h6>代码示例</h6>
+            <pre><code>{{ practice.code }}</code></pre>
+          </div>
+
+          <div class="tools" v-if="practice.tools">
+            <h6>推荐工具</h6>
+            <div class="tool-tags">
+              <span v-for="(tool, i) in practice.tools" :key="i" class="tool-tag">{{ tool }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const expandedCard = ref(0)
+
+const bestPractices = [
+  {
+    icon: '👑',
+    title: '根账号保护',
+    priority: 'p0',
+    priorityText: 'P0 - 最高优先级',
+    color: '#f44336',
+    description: '根账号是云服务的所有者，拥有所有权限。必须实施最高级别的保护措施。',
+    checklist: [
+      '启用 MFA（推荐硬件 MFA 设备）',
+      '创建 IAM 管理员用户用于日常操作',
+      '删除或锁定根账号的访问密钥',
+      '配置根账号使用告警',
+      '设置账号恢复联系信息'
+    ],
+    code: `# AWS CLI - 创建管理员用户并禁用根账号 AK
+aws iam create-user --user-name AdminUser
+aws iam attach-user-policy --user-name AdminUser \
+  --policy-arn arn:aws:iam::aws:policy/AdministratorAccess
+
+# 删除根账号访问密钥（必须使用根账号登录控制台操作）`,
+    tools: ['硬件 MFA (YubiKey)', '虚拟 MFA (Google Authenticator)', 'AWS IAM', '阿里云 RAM']
+  },
+  {
+    icon: '👤',
+    title: '用户权限最小化',
+    priority: 'p0',
+    priorityText: 'P0 - 最高优先级',
+    color: '#ff9800',
+    description: '遵循最小权限原则，只授予用户完成工作所需的最低权限。',
+    checklist: [
+      '避免使用 AdministratorAccess 等全权限策略',
+      '使用 IAM 用户组批量管理权限',
+      '定期审查和删除未使用的 IAM 用户',
+      '为不同角色创建细粒度的自定义策略',
+      '使用 IAM Access Analyzer 识别过度宽松的权限'
+    ],
+    code: `{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": [
+        "s3:GetObject",
+        "s3:PutObject",
+        "s3:ListBucket"
+      ],
+      "Resource": [
+        "arn:aws:s3:::my-bucket",
+        "arn:aws:s3:::my-bucket/*"
+      ],
+      "Condition": {
+        "StringEquals": {
+          "aws:RequestedRegion": "ap-northeast-1"
+        }
+      }
+    }
+  ]
+}`,
+    tools: ['IAM Policy Simulator', 'IAM Access Analyzer', 'AWS CloudTrail', 'AWS Config']
+  },
+  {
+    icon: '🎭',
+    title: '优先使用 IAM 角色',
+    priority: 'p1',
+    priorityText: 'P1 - 高优先级',
+    color: '#4caf50',
+    description: 'IAM 角色没有长期凭证，通过临时凭证访问，大大降低凭证泄露风险。',
+    checklist: [
+      'EC2 实例使用实例角色(Instance Profile)',
+      'Lambda 函数使用执行角色',
+      'ECS 任务使用任务角色',
+      '跨账号访问使用角色扮演(AssumeRole)',
+      'CI/CD 流水线使用 OIDC 联邦身份'
+    ],
+    code: `import boto3
+
+# EC2 实例自动使用附加的实例角色
+# 无需提供任何凭证
+s3 = boto3.client('s3')
+
+# 跨账号角色扮演
+sts = boto3.client('sts')
+assumed_role = sts.assume_role(
+    RoleArn='arn:aws:iam::123456789012:role/CrossAccountRole',
+    RoleSessionName='MyApplication',
+    DurationSeconds=3600
+)
+
+# 使用临时凭证
+temp_creds = assumed_role['Credentials']
+s3_cross = boto3.client(
+    's3',
+    aws_access_key_id=temp_creds['AccessKeyId'],
+    aws_secret_access_key=temp_creds['SecretAccessKey'],
+    aws_session_token=temp_creds['SessionToken']
+)`,
+    tools: ['IAM Roles', 'AWS STS', 'EC2 Instance Profiles', 'Lambda Execution Roles']
+  },
+  {
+    icon: '🔑',
+    title: '访问密钥安全管理',
+    priority: 'p1',
+    priorityText: 'P1 - 高优先级',
+    color: '#2196f3',
+    description: '如果必须使用访问密钥(AK/SK)，需要实施严格的安全管理措施。',
+    checklist: [
+      '绝不将 AK/SK 硬编码在代码或配置文件中',
+      '使用环境变量或密钥管理服务(如 AWS Secrets Manager)',
+      '每 90 天轮换一次访问密钥',
+      '定期审查和删除未使用的访问密钥',
+      '启用 CloudTrail 记录所有 AK/SK 的使用情况'
+    ],
+    code: `# ❌ 错误做法 - 硬编码凭证
+import boto3
+
+s3 = boto3.client(
+    's3',
+    aws_access_key_id='AKIAIOSFODNN7EXAMPLE',
+    aws_secret_access_key='wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY'
+)
+
+# ✅ 正确做法 - 使用环境变量
+import boto3
+import os
+
+s3 = boto3.client(
+    's3',
+    aws_access_key_id=os.environ.get('AWS_ACCESS_KEY_ID'),
+    aws_secret_access_key=os.environ.get('AWS_SECRET_ACCESS_KEY')
+)
+
+# ✅ 正确做法 - 使用 AWS Secrets Manager
+import boto3
+import json
+
+secrets_client = boto3.client('secretsmanager')
+secret_value = secrets_client.get_secret_value(SecretId='my-app/credentials')
+credentials = json.loads(secret_value['SecretString'])
+
+s3 = boto3.client(
+    's3',
+    aws_access_key_id=credentials['access_key_id'],
+    aws_secret_access_key=credentials['secret_access_key']
+)`,
+    tools: ['AWS Secrets Manager', 'HashiCorp Vault', 'Azure Key Vault', 'GCP Secret Manager']
+  },
+  {
+    icon: '📊',
+    title: '监控与审计',
+    priority: 'p2',
+    priorityText: 'P2 - 中优先级',
+    color: '#9c27b0',
+    description: '建立全面的监控和审计机制，及时发现和响应安全事件。',
+    checklist: [
+      '启用 CloudTrail 记录所有 API 调用',
+      '配置关键操作的实时告警（根账号使用、策略变更等）',
+      '使用 IAM Access Analyzer 持续分析权限',
+      '定期审查 IAM 用户和权限配置',
+      '将日志存储到独立的审计账号，防止篡改'
+    ],
+    code: `# AWS CloudTrail 配置示例
+aws cloudtrail create-trail \
+  --name OrganizationTrail \
+  --s3-bucket-name my-cloudtrail-bucket \
+  --is-organization-trail \
+  --enable-log-file-validation \
+  --is-multi-region-trail
+
+# CloudWatch 告警配置 - 根账号使用
+aws cloudwatch put-metric-alarm \
+  --alarm-name RootAccountUsageAlarm \
+  --alarm-description "Alert when root account is used" \
+  --metric-name RootAccountUsage \
+  --namespace CloudTrailMetrics \
+  --statistic Sum \
+  --period 300 \
+  --evaluation-periods 1 \
+  --threshold 1 \
+  --comparison-operator GreaterThanOrEqualToThreshold
+
+# IAM Access Analyzer 创建分析器
+aws accessanalyzer create-analyzer \
+  --analyzer-name MyOrgAnalyzer \
+  --type ORGANIZATION`,
+    tools: ['AWS CloudTrail', 'AWS CloudWatch', 'IAM Access Analyzer', 'AWS Config', 'AWS Security Hub']
+  }
+]
+
+function toggleCard(index) {
+  expandedCard.value = expandedCard.value === index ? null : index
+}
+</script>
+
+<style scoped>
+.best-practices-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.practices-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.practice-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.practice-card:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.practice-card.expanded {
+  background: rgba(255, 255, 255, 0.95);
+  color: #333;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.title-wrapper {
+  flex: 1;
+}
+
+.title-wrapper h5 {
+  margin: 0 0 4px 0;
+  font-size: 1.1rem;
+}
+
+.priority {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.priority.p0 {
+  background: #f44336;
+  color: white;
+}
+
+.priority.p1 {
+  background: #ff9800;
+  color: white;
+}
+
+.priority.p2 {
+  background: #2196f3;
+  color: white;
+}
+
+.expand-icon {
+  font-size: 1.5rem;
+  font-weight: 300;
+  opacity: 0.7;
+}
+
+.card-body {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.description {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.checklist {
+  margin-bottom: 20px;
+}
+
+.checklist h6 {
+  margin: 0 0 12px 0;
+  font-size: 0.9rem;
+  color: #667eea;
+}
+
+.checklist ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.checklist li {
+  padding: 6px 0;
+  padding-left: 24px;
+  position: relative;
+  font-size: 0.9rem;
+}
+
+.checklist li:before {
+  content: '☐';
+  position: absolute;
+  left: 0;
+  color: #667eea;
+}
+
+.code-example {
+  margin-bottom: 20px;
+}
+
+.code-example h6 {
+  margin: 0 0 12px 0;
+  font-size: 0.9rem;
+  color: #667eea;
+}
+
+.code-example pre {
+  background: #1e1e1e;
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.code-example code {
+  color: #d4d4d4;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.tools h6 {
+  margin: 0 0 12px 0;
+  font-size: 0.9rem;
+  color: #667eea;
+}
+
+.tool-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tool-tag {
+  padding: 4px 12px;
+  background: #e3f2fd;
+  color: #1565c0;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .card-header {
+    flex-wrap: wrap;
+  }
+
+  .icon-wrapper {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+  }
+
+  .title-wrapper h5 {
+    font-size: 1rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
new file mode 100644
index 0000000..b5c5fa8
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="cross-account-access-demo">
+    <div class="demo-header">
+      <h4>跨账号访问流程演示</h4>
+      <p class="demo-desc">角色扮演（AssumeRole）获取临时凭证</p>
+    </div>
+
+    <div class="flow-diagram">
+      <div class="account-box source">
+        <div class="account-header">账号 A（源账号）</div>
+        <div class="account-content">
+          <div class="entity">IAM User / Application</div>
+          <div class="action">调用 sts:AssumeRole</div>
+        </div>
+      </div>
+
+      <div class="arrow">→</div>
+
+      <div class="account-box sts">
+        <div class="account-header">STS 服务</div>
+        <div class="account-content">
+          <div class="step">1. 验证源身份</div>
+          <div class="step">2. 检查信任策略</div>
+          <div class="step">3. 生成临时凭证</div>
+        </div>
+      </div>
+
+      <div class="arrow">→</div>
+
+      <div class="account-box target">
+        <div class="account-header">账号 B（目标账号）</div>
+        <div class="account-content">
+          <div class="entity">CrossAccountRole</div>
+          <div class="resource">访问 S3 / EC2 等资源</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="code-example">
+      <h5>Python 代码示例</h5>
+      <pre><code>import boto3
+
+# 在账号 A 中使用 IAM 用户凭证
+sts_client = boto3.client('sts')
+
+# 扮演账号 B 的角色
+assumed_role = sts_client.assume_role(
+    RoleArn='arn:aws:iam::123456789012:role/CrossAccountRole',
+    RoleSessionName='MySession',
+    DurationSeconds=3600
+)
+
+# 获取临时凭证
+credentials = assumed_role['Credentials']
+
+# 使用临时凭证访问账号 B 的资源
+s3_client = boto3.client(
+    's3',
+    aws_access_key_id=credentials['AccessKeyId'],
+    aws_secret_access_key=credentials['SecretAccessKey'],
+    aws_session_token=credentials['SessionToken']
+)</code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cross-account-access-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.flow-diagram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.account-box {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 16px;
+  min-width: 180px;
+  color: #333;
+}
+
+.account-header {
+  font-weight: 700;
+  font-size: 0.85rem;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #eee;
+}
+
+.account-content {
+  font-size: 0.8rem;
+}
+
+.entity {
+  background: #e3f2fd;
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  color: #1565c0;
+  font-weight: 500;
+}
+
+.action {
+  color: #666;
+  font-style: italic;
+}
+
+.step {
+  padding: 4px 0;
+  color: #666;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.step:last-child {
+  border-bottom: none;
+}
+
+.resource {
+  background: #e8f5e9;
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin-top: 8px;
+  color: #2e7d32;
+}
+
+.arrow {
+  font-size: 2rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.code-example {
+  background: #1e1e1e;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.code-example h5 {
+  margin: 0 0 12px 0;
+  color: #fff;
+  font-size: 0.9rem;
+}
+
+.code-example pre {
+  margin: 0;
+  overflow-x: auto;
+}
+
+.code-example code {
+  color: #d4d4d4;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .flow-diagram {
+    flex-direction: column;
+  }
+
+  .arrow {
+    transform: rotate(90deg);
+  }
+
+  .account-box {
+    min-width: auto;
+    width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
new file mode 100644
index 0000000..b6acf63
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="iam-ram-comparison-demo">
+    <div class="demo-header">
+      <h4>AWS IAM vs 阿里云 RAM 对比</h4>
+      <p class="demo-desc">点击各个模块查看详细对比</p>
+    </div>
+
+    <div class="comparison-container">
+      <!-- AWS IAM Column -->
+      <div class="platform-column aws-column">
+        <div class="platform-header aws">
+          <div class="logo">AWS</div>
+          <h5>IAM</h5>
+          <span class="subtitle">Identity and Access Management</span>
+        </div>
+
+        <div class="features-list">
+          <div
+            v-for="(feature, index) in awsFeatures"
+            :key="index"
+            class="feature-item"
+            :class="{ active: selectedFeature === `aws-${index}` }"
+            @click="selectFeature('aws', index)"
+          >
+            <div class="feature-icon">{{ feature.icon }}</div>
+            <div class="feature-content">
+              <span class="feature-name">{{ feature.name }}</span>
+              <span class="feature-desc">{{ feature.desc }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comparison Details -->
+      <div class="comparison-details" v-if="selectedFeatureData">
+        <div class="detail-card">
+          <h6>{{ selectedFeatureData.name }}</h6>
+          <div class="comparison-row">
+            <div class="aws-detail">
+              <span class="label">AWS IAM</span>
+              <p>{{ selectedFeatureData.awsDetail }}</p>
+              <code v-if="selectedFeatureData.awsExample">{{ selectedFeatureData.awsExample }}</code>
+            </div>
+            <div class="vs-divider">VS</div>
+            <div class="ram-detail">
+              <span class="label">阿里云 RAM</span>
+              <p>{{ selectedFeatureData.ramDetail }}</p>
+              <code v-if="selectedFeatureData.ramExample">{{ selectedFeatureData.ramExample }}</code>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Alibaba Cloud RAM Column -->
+      <div class="platform-column ram-column">
+        <div class="platform-header ram">
+          <div class="logo">阿里云</div>
+          <h5>RAM</h5>
+          <span class="subtitle">Resource Access Management</span>
+        </div>
+
+        <div class="features-list">
+          <div
+            v-for="(feature, index) in ramFeatures"
+            :key="index"
+            class="feature-item"
+            :class="{ active: selectedFeature === `ram-${index}` }"
+            @click="selectFeature('ram', index)"
+          >
+            <div class="feature-icon">{{ feature.icon }}</div>
+            <div class="feature-content">
+              <span class="feature-name">{{ feature.name }}</span>
+              <span class="feature-desc">{{ feature.desc }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedFeature = ref(null)
+
+const featureDetails = [
+  {
+    name: '用户管理',
+    awsDetail: '使用 IAM User，支持编程访问和控制台访问，可分配独立 AK/SK',
+    ramDetail: '使用 RAM 用户，功能与 IAM User 类似，支持子账号登录控制台',
+    awsExample: 'arn:aws:iam::123456789012:user/alice',
+    ramExample: 'acs:ram::123456789012:user/alice'
+  },
+  {
+    name: '用户组管理',
+    awsDetail: 'IAM Group 用于批量管理用户权限，一个用户可属于多个组',
+    ramDetail: 'RAM 用户组功能类似，支持按部门或项目分组管理',
+    awsExample: 'arn:aws:iam::123456789012:group/Developers',
+    ramExample: 'acs:ram::123456789012:group/Developers'
+  },
+  {
+    name: '角色与扮演',
+    awsDetail: 'IAM Role 支持跨账号访问和服务角色，使用 STS AssumeRole',
+    ramDetail: 'RAM 角色支持跨云账号访问和临时授权，使用 STS AssumeRole',
+    awsExample: 'arn:aws:iam::123456789012:role/CrossAccountRole',
+    ramExample: 'acs:ram::123456789012:role/CrossAccountRole'
+  },
+  {
+    name: '权限策略',
+    awsDetail: 'IAM Policy 使用 JSON 格式，支持 Action/Resource/Condition',
+    ramDetail: 'RAM Policy 语法类似，支持阿里云服务特定的 Action',
+    awsExample: '"Action": "s3:GetObject"',
+    ramExample: '"Action": "oss:GetObject"'
+  },
+  {
+    name: '身份联合',
+    awsDetail: '支持 SAML 2.0 和 OIDC，可与 AD、Okta 等 IdP 集成',
+    ramDetail: '支持 SAML 2.0 和企业 AD/LDAP，支持钉钉等国内 IdP',
+    awsExample: 'SAML Provider: arn:aws:iam::123:saml-provider/Okta',
+    ramExample: 'SAML Provider: acs:ram::123:saml-provider/DingTalk'
+  },
+  {
+    name: '访问密钥',
+    awsDetail: 'IAM User 可创建 AK/SK，支持定期轮换和访问分析',
+    ramDetail: 'RAM 用户支持 AccessKey，提供密钥使用分析和安全建议',
+    awsExample: 'AKIAIOSFODNN7EXAMPLE',
+    ramExample: 'LTAI...'
+  }
+]
+
+const awsFeatures = featureDetails.map((f, i) => ({
+  icon: ['👤', '👥', '🎭', '📋', '🔗', '🔑'][i],
+  name: f.name,
+  desc: f.awsDetail.slice(0, 30) + '...'
+}))
+
+const ramFeatures = featureDetails.map((f, i) => ({
+  icon: ['👤', '👥', '🎭', '📋', '🔗', '🔑'][i],
+  name: f.name,
+  desc: f.ramDetail.slice(0, 30) + '...'
+}))
+
+const selectedFeatureData = computed(() => {
+  if (!selectedFeature.value) return null
+  const [platform, index] = selectedFeature.value.split('-')
+  return featureDetails[parseInt(index)]
+})
+
+function selectFeature(platform, index) {
+  selectedFeature.value = `${platform}-${index}`
+}
+</script>
+
+<style scoped>
+.iam-ram-comparison-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.5rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.comparison-container {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.platform-column {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.platform-header {
+  padding: 16px;
+  text-align: center;
+}
+
+.platform-header.aws {
+  background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
+}
+
+.platform-header.ram {
+  background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
+}
+
+.platform-header .logo {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.platform-header h5 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.platform-header .subtitle {
+  font-size: 0.7rem;
+  opacity: 0.9;
+}
+
+.features-list {
+  padding: 12px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.feature-item:hover,
+.feature-item.active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateX(4px);
+}
+
+.feature-icon {
+  font-size: 1.2rem;
+}
+
+.feature-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.feature-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.feature-desc {
+  font-size: 0.7rem;
+  opacity: 0.8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.comparison-details {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 20px;
+  color: #333;
+}
+
+.detail-card {
+  text-align: center;
+}
+
+.detail-card h6 {
+  margin: 0 0 16px 0;
+  font-size: 1.1rem;
+  color: #667eea;
+}
+
+.comparison-row {
+  display: flex;
+  align-items: stretch;
+  gap: 16px;
+}
+
+.aws-detail,
+.ram-detail {
+  flex: 1;
+  padding: 12px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.aws-detail {
+  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
+}
+
+.ram-detail {
+  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
+}
+
+.aws-detail .label,
+.ram-detail .label {
+  display: block;
+  font-weight: 700;
+  font-size: 0.8rem;
+  margin-bottom: 6px;
+}
+
+.aws-detail .label {
+  color: #ff6f00;
+}
+
+.ram-detail .label {
+  color: #c2185b;
+}
+
+.aws-detail p,
+.ram-detail p {
+  margin: 0 0 8px 0;
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.aws-detail code,
+.ram-detail code {
+  display: block;
+  padding: 6px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  font-size: 0.65rem;
+  word-break: break-all;
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.9rem;
+  color: #999;
+  padding: 0 8px;
+}
+
+@media (max-width: 1024px) {
+  .comparison-container {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .comparison-details {
+    order: -1;
+  }
+
+  .comparison-row {
+    flex-direction: column;
+  }
+
+  .vs-divider {
+    padding: 8px 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
new file mode 100644
index 0000000..28be77c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="identity-provider-demo">
+    <div class="demo-header">
+      <h4>身份提供商(IdP)集成流程</h4>
+      <p class="demo-desc">点击步骤查看 SSO 单点登录流程</p>
+    </div>
+
+    <div class="sso-flow">
+      <div class="flow-step" v-for="(step, index) in steps" :key="index"
+           :class="{ active: currentStep === index, completed: currentStep > index }"
+           @click="goToStep(index)">
+        <div class="step-number">{{ index + 1 }}</div>
+        <div class="step-content">
+          <span class="step-title">{{ step.title }}</span>
+          <span class="step-desc">{{ step.desc }}</span>
+        </div>
+        <div class="step-arrow" v-if="index < steps.length - 1">→</div>
+      </div>
+    </div>
+
+    <div class="detail-panel" v-if="currentStepData">
+      <h5>{{ currentStepData.title }}</h5>
+      <p>{{ currentStepData.detail }}</p>
+
+      <div class="code-block" v-if="currentStepData.code">
+        <pre><code>{{ currentStepData.code }}</code></pre>
+      </div>
+
+      <div class="entity-flow" v-if="currentStepData.flow">
+        <div class="flow-row" v-for="(row, i) in currentStepData.flow" :key="i">
+          <span class="entity" :class="row.from.type">{{ row.from.name }}</span>
+          <span class="action">{{ row.action }}</span>
+          <span class="entity" :class="row.to.type">{{ row.to.name }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentStep = ref(0)
+
+const steps = [
+  { title: '用户访问应用', desc: '用户尝试访问企业应用' },
+  { title: '重定向到 IdP', desc: '应用将用户重定向到身份提供商' },
+  { title: '用户登录认证', desc: '用户在 IdP 输入企业账号密码' },
+  { title: '颁发 SAML 令牌', desc: 'IdP 验证成功后颁发 SAML Assertion' },
+  { title: '返回应用', desc: '携带令牌返回企业应用' },
+  { title: '换取云凭证', desc: '应用使用令牌换取云临时凭证' },
+  { title: '访问云资源', desc: '使用临时凭证访问云资源' }
+]
+
+const stepDetails = [
+  {
+    title: '用户访问企业应用',
+    detail: '用户打开浏览器，访问企业内部的业务系统（如 CRM、ERP 等）。此时用户尚未登录，应用检测到用户没有有效的会话。',
+    flow: [
+      { from: { name: '用户', type: 'user' }, action: '访问 →', to: { name: '企业应用', type: 'app' } }
+    ]
+  },
+  {
+    title: '应用重定向到 IdP',
+    detail: '应用发现用户未登录，生成 SAML Request，将用户浏览器重定向到企业的身份提供商（IdP，如 Azure AD、Okta 等）。',
+    code: `// SAML Request 示例
+<samlp:AuthnRequest xmlns:samlp="urn:oasis:names:tc:SAML:2.0:protocol"
+                    Destination="https://idp.example.com/saml/sso"
+                    ID="_1234567890"
+                    IssueInstant="2024-01-15T10:00:00Z">
+  <saml:Issuer xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion">
+    https://app.example.com
+  </saml:Issuer>
+</samlp:AuthnRequest>`,
+    flow: [
+      { from: { name: '企业应用', type: 'app' }, action: '重定向 →', to: { name: 'IdP', type: 'idp' } }
+    ]
+  },
+  {
+    title: '用户在 IdP 登录',
+    detail: '用户在 IdP 的登录页面输入企业账号和密码。IdP 验证用户身份，可能还需要进行 MFA 多因素认证。',
+    flow: [
+      { from: { name: '用户', type: 'user' }, action: '登录 →', to: { name: 'IdP', type: 'idp' } }
+    ]
+  },
+  {
+    title: 'IdP 颁发 SAML Assertion',
+    detail: '用户认证成功后，IdP 生成包含用户身份和属性的 SAML Assertion（断言），并使用 IdP 的私钥签名。',
+    code: `<!-- SAML Response 示例 -->
+<samlp:Response xmlns:samlp="urn:oasis:names:tc:SAML:2.0:protocol"
+                ID="_response123"
+                InResponseTo="_1234567890"
+                IssueInstant="2024-01-15T10:01:00Z">
+  <saml:Assertion xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion"
+                  ID="_assertion456"
+                  IssueInstant="2024-01-15T10:01:00Z">
+    <saml:Subject>
+      <saml:NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">
+        user@example.com
+      </saml:NameID>
+    </saml:Subject>
+    <saml:AttributeStatement>
+      <saml:Attribute Name="Role">
+        <saml:AttributeValue>Admin</saml:AttributeValue>
+      </saml:Attribute>
+    </saml:AttributeStatement>
+  </saml:Assertion>
+</samlp:Response>`,
+    flow: [
+      { from: { name: 'IdP', type: 'idp' }, action: '颁发令牌 →', to: { name: '用户浏览器', type: 'user' } }
+    ]
+  },
+  {
+    title: '返回企业应用',
+    detail: 'IdP 通过浏览器将 SAML Response POST 到企业应用。应用验证 SAML 断言的签名，确认用户身份，建立用户会话。',
+    flow: [
+      { from: { name: '用户浏览器', type: 'user' }, action: 'POST 令牌 →', to: { name: '企业应用', type: 'app' } }
+    ]
+  },
+  {
+    title: '换取云临时凭证',
+    detail: '企业应用使用 SAML Assertion 向云厂商的 STS 服务请求临时安全凭证。云服务验证 SAML 断言后，颁发临时 AK/SK/Token。',
+    code: `# Python 示例：使用 SAML 换取 AWS 临时凭证
+import boto3
+
+# 创建 STS 客户端
+sts = boto3.client('sts')
+
+# 使用 SAML 断言请求临时凭证
+response = sts.assume_role_with_saml(
+    RoleArn='arn:aws:iam::123456789012:role/SAML-Role',
+    PrincipalArn='arn:aws:iam::123456789012:saml-provider/Okta',
+    SAMLAssertion='VGhpcyBpcyBhIHRlc3QgU0FNTCBhc3NlcnRpb24=',
+    DurationSeconds=3600
+)
+
+# 获取临时凭证
+credentials = response['Credentials']
+print(f"Access Key: {credentials['AccessKeyId']}")
+print(f"Secret Key: {credentials['SecretAccessKey']}")
+print(f"Session Token: {credentials['SessionToken']}")`,
+    flow: [
+      { from: { name: '企业应用', type: 'app' }, action: 'AssumeRole →', to: { name: '云 STS', type: 'cloud' } }
+    ]
+  },
+  {
+    title: '访问云资源',
+    detail: '企业应用使用获取到的临时凭证，调用云服务的 API 访问资源（如 S3、EC2、数据库等）。临时凭证有过期时间，到期后需要重新获取。',
+    flow: [
+      { from: { name: '企业应用', type: 'app' }, action: '访问资源 →', to: { name: '云服务', type: 'cloud' } }
+    ]
+  }
+]
+
+const currentStepData = computed(() => {
+  if (currentStep.value === null) return null
+  return stepDetails[currentStep.value]
+})
+
+function goToStep(index) {
+  currentStep.value = index
+}
+</script>
+
+<style scoped>
+.identity-provider-demo {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.sso-flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.flow-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.flow-step:hover,
+.flow-step.active {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.02);
+}
+
+.flow-step.completed {
+  background: rgba(76, 175, 80, 0.3);
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.step-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.step-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.step-desc {
+  font-size: 0.6rem;
+  opacity: 0.8;
+  white-space: nowrap;
+}
+
+.step-arrow {
+  font-size: 1.2rem;
+  opacity: 0.6;
+}
+
+.detail-panel {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 20px;
+  color: #333;
+}
+
+.detail-panel h5 {
+  margin: 0 0 12px 0;
+  font-size: 1.1rem;
+  color: #1e3c72;
+}
+
+.detail-panel p {
+  margin: 0 0 16px 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.code-block {
+  background: #1e1e1e;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  overflow-x: auto;
+}
+
+.code-block pre {
+  margin: 0;
+}
+
+.code-block code {
+  color: #d4d4d4;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+.entity-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.flow-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 8px;
+  background: #f5f5f5;
+  border-radius: 6px;
+}
+
+.entity {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.entity.user {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.entity.app {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}
+
+.entity.idp {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.entity.cloud {
+  background: #fff3e0;
+  color: #ef6c00;
+}
+
+.action {
+  font-size: 0.75rem;
+  color: #666;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .sso-flow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .flow-step {
+    min-width: auto;
+  }
+
+  .step-arrow {
+    display: none;
+  }
+
+  .flow-row {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
new file mode 100644
index 0000000..ca91878
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="mfa-security-demo">
+    <div class="demo-header">
+      <h4>MFA 多因素认证模拟</h4>
+      <p class="demo-desc">体验 MFA 双因素认证流程</p>
+    </div>
+
+    <div class="mfa-flow">
+      <div class="auth-step" :class="{ active: step >= 1, completed: step > 1 }">
+        <div class="step-icon">🔐</div>
+        <div class="step-label">密码验证</div>
+      </div>
+      <div class="step-arrow">→</div>
+      <div class="auth-step" :class="{ active: step >= 2, completed: step > 2 }">
+        <div class="step-icon">📱</div>
+        <div class="step-label">MFA 验证</div>
+      </div>
+      <div class="step-arrow">→</div>
+      <div class="auth-step" :class="{ active: step >= 3 }">
+        <div class="step-icon">✅</div>
+        <div class="step-label">登录成功</div>
+      </div>
+    </div>
+
+    <div class="auth-panel" v-if="step === 1">
+      <h5>请输入密码</h5>
+      <input type="password" v-model="password" placeholder="输入密码" @keyup.enter="verifyPassword" />
+      <button @click="verifyPassword" :disabled="!password">验证密码</button>
+    </div>
+
+    <div class="auth-panel" v-if="step === 2">
+      <h5>MFA 验证</h5>
+      <div class="totp-display">
+        <span class="totp-code">{{ totpCode }}</span>
+        <div class="totp-timer">
+          <div class="timer-bar" :style="{ width: timerWidth + '%' }"></div>
+        </div>
+      </div>
+      <input type="text" v-model="userCode" placeholder="输入6位验证码" maxlength="6" @keyup.enter="verifyMFA" />
+      <button @click="verifyMFA" :disabled="userCode.length !== 6">验证</button>
+    </div>
+
+    <div class="success-message" v-if="step === 3">
+      <div class="success-icon">🎉</div>
+      <h5>登录成功！</h5>
+      <p>已通过 MFA 双因素认证</p>
+      <button @click="reset">重新演示</button>
+    </div>
+
+    <div class="security-tips">
+      <h5>💡 MFA 安全提示</h5>
+      <ul>
+        <li>启用 MFA 可降低 99.9% 的账号被盗风险</li>
+        <li>推荐使用 TOTP 应用（Google Authenticator、Microsoft Authenticator）</li>
+        <li>硬件安全密钥（如 YubiKey）提供最高级别的安全性</li>
+        <li>务必备份 MFA 恢复码，防止设备丢失无法登录</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const step = ref(1)
+const password = ref('')
+const userCode = ref('')
+const totpCode = ref('123456')
+const timerWidth = ref(100)
+let timerInterval = null
+
+function generateTOTP() {
+  return Math.floor(100000 + Math.random() * 900000).toString()
+}
+
+function startTimer() {
+  timerWidth.value = 100
+  if (timerInterval) clearInterval(timerInterval)
+  timerInterval = setInterval(() => {
+    timerWidth.value -= 1.67
+    if (timerWidth.value <= 0) {
+      totpCode.value = generateTOTP()
+      timerWidth.value = 100
+    }
+  }, 100)
+}
+
+function verifyPassword() {
+  if (password.value) {
+    step.value = 2
+    totpCode.value = generateTOTP()
+    startTimer()
+  }
+}
+
+function verifyMFA() {
+  if (userCode.value.length === 6) {
+    step.value = 3
+    if (timerInterval) clearInterval(timerInterval)
+  }
+}
+
+function reset() {
+  step.value = 1
+  password.value = ''
+  userCode.value = ''
+  if (timerInterval) clearInterval(timerInterval)
+}
+
+onMounted(() => {
+  if (step.value === 2) startTimer()
+})
+
+onUnmounted(() => {
+  if (timerInterval) clearInterval(timerInterval)
+})
+</script>
+
+<style scoped>
+.mfa-security-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.mfa-flow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.auth-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  opacity: 0.5;
+  transition: all 0.3s ease;
+}
+
+.auth-step.active {
+  opacity: 1;
+  background: rgba(76, 175, 80, 0.2);
+  border: 1px solid rgba(76, 175, 80, 0.5);
+}
+
+.auth-step.completed {
+  opacity: 1;
+  background: rgba(76, 175, 80, 0.3);
+}
+
+.step-icon {
+  font-size: 2rem;
+}
+
+.step-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.step-arrow {
+  font-size: 1.5rem;
+  opacity: 0.6;
+}
+
+.auth-panel {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.auth-panel h5 {
+  margin: 0 0 16px 0;
+  font-size: 1.1rem;
+}
+
+.auth-panel input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  color: white;
+  font-size: 1rem;
+  margin-bottom: 12px;
+  box-sizing: border-box;
+}
+
+.auth-panel input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.auth-panel button {
+  width: 100%;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-panel button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-panel button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
+}
+
+.totp-display {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.totp-code {
+  display: block;
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-family: monospace;
+  letter-spacing: 0.2em;
+  margin-bottom: 8px;
+}
+
+.totp-timer {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.timer-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
+  transition: width 0.1s linear;
+}
+
+.success-message {
+  background: rgba(76, 175, 80, 0.2);
+  border: 1px solid rgba(76, 175, 80, 0.5);
+  border-radius: 12px;
+  padding: 32px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.success-icon {
+  font-size: 4rem;
+  margin-bottom: 16px;
+}
+
+.success-message h5 {
+  margin: 0 0 8px 0;
+  font-size: 1.5rem;
+}
+
+.success-message p {
+  margin: 0 0 20px 0;
+  opacity: 0.8;
+}
+
+.success-message button {
+  padding: 12px 32px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.success-message button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.security-tips {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.security-tips h5 {
+  margin: 0 0 12px 0;
+  font-size: 1rem;
+}
+
+.security-tips ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.security-tips li {
+  padding: 6px 0;
+  font-size: 0.85rem;
+  opacity: 0.9;
+}
+
+@media (max-width: 768px) {
+  .mfa-flow {
+    flex-direction: column;
+  }
+
+  .step-arrow {
+    transform: rotate(90deg);
+  }
+
+  .lifecycle-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
new file mode 100644
index 0000000..f18dc28
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="permission-hierarchy-demo">
+    <div class="demo-header">
+      <h4>权限层级结构</h4>
+      <p class="demo-desc">点击层级查看详细权限范围</p>
+    </div>
+
+    <div class="hierarchy-container">
+      <div
+        v-for="(level, index) in hierarchyLevels"
+        :key="index"
+        class="level-row"
+        :class="{ active: selectedLevel === index }"
+        @click="selectLevel(index)"
+      >
+        <div class="level-icon">{{ level.icon }}</div>
+        <div class="level-content">
+          <span class="level-name">{{ level.name }}</span>
+          <span class="level-scope">{{ level.scope }}</span>
+        </div>
+        <div class="permission-badges">
+          <span
+            v-for="(perm, i) in level.permissions.slice(0, 3)"
+            :key="i"
+            class="badge"
+          >
+            {{ perm }}
+          </span>
+          <span v-if="level.permissions.length > 3" class="badge more">
+            +{{ level.permissions.length - 3 }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="detail-panel" v-if="selectedLevelData">
+      <h5>{{ selectedLevelData.name }} 详情</h5>
+      <div class="detail-section">
+        <span class="label">权限范围:</span>
+        <span class="value">{{ selectedLevelData.scope }}</span>
+      </div>
+      <div class="detail-section">
+        <span class="label">典型场景:</span>
+        <span class="value">{{ selectedLevelData.scenario }}</span>
+      </div>
+      <div class="detail-section permissions-list">
+        <span class="label">拥有权限:</span>
+        <div class="permissions-grid">
+          <span
+            v-for="(perm, i) in selectedLevelData.permissions"
+            :key="i"
+            class="perm-tag"
+            :class="perm.type"
+          >
+            {{ perm.name }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedLevel = ref(0)
+
+const hierarchyLevels = [
+  {
+    icon: '👑',
+    name: '根账号 (Root)',
+    scope: '全账号最高权限',
+    scenario: '账号所有者，拥有云服务的所有权限',
+    permissions: [
+      { name: '完全管理权限', type: 'full' },
+      { name: '账单管理', type: 'billing' },
+      { name: '组织架构管理', type: 'org' },
+      { name: '关闭账号', type: 'critical' },
+      { name: '恢复已删除资源', type: 'admin' }
+    ]
+  },
+  {
+    icon: '👤',
+    name: 'IAM 管理员',
+    scope: 'IAM 全权限',
+    scenario: '管理所有 IAM 用户、角色、策略',
+    permissions: [
+      { name: '创建/删除用户', type: 'user' },
+      { name: '创建/删除角色', type: 'role' },
+      { name: '管理策略', type: 'policy' },
+      { name: '查看凭证报告', type: 'audit' }
+    ]
+  },
+  {
+    icon: '👥',
+    name: '普通 IAM 用户',
+    scope: '受限权限',
+    scenario: '日常开发人员，只能访问特定资源',
+    permissions: [
+      { name: '只读访问 EC2', type: 'read' },
+      { name: '读写指定 S3 桶', type: 'limited' },
+      { name: '查看 CloudWatch 日志', type: 'read' },
+      { name: '无法创建 IAM 资源', type: 'deny' }
+    ]
+  },
+  {
+    icon: '🎭',
+    name: '临时角色 (Role)',
+    scope: '按策略定义',
+    scenario: '跨账号访问、服务角色、临时授权',
+    permissions: [
+      { name: '临时凭证 (1-12小时)', type: 'temp' },
+      { name: '按信任策略授权', type: 'conditional' },
+      { name: '可跨账号使用', type: 'cross' },
+      { name: '无长期凭证', type: 'secure' }
+    ]
+  },
+  {
+    icon: '🔑',
+    name: '服务账号 / 应用',
+    scope: 'API 访问权限',
+    scenario: '应用程序、CI/CD 流水线、自动化脚本',
+    permissions: [
+      { name: 'AK/SK 或临时凭证', type: 'api' },
+      { name: '特定服务 API 权限', type: 'service' },
+      { name: '无控制台访问', type: 'programmatic' },
+      { name: '建议定期轮换密钥', type: 'security' }
+    ]
+  }
+]
+
+const selectedLevelData = computed(() => {
+  if (selectedLevel.value === null) return null
+  return hierarchyLevels[selectedLevel.value]
+})
+
+function selectLevel(index) {
+  selectedLevel.value = index
+}
+</script>
+
+<style scoped>
+.permission-hierarchy-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.hierarchy-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.level-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.level-row:hover,
+.level-row.active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateX(8px);
+}
+
+.level-icon {
+  font-size: 1.6rem;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+}
+
+.level-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.level-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.level-scope {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.permission-badges {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  max-width: 150px;
+}
+
+.badge {
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  font-size: 0.65rem;
+  white-space: nowrap;
+}
+
+.badge.more {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.detail-panel {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 20px;
+  color: #333;
+}
+
+.detail-panel h5 {
+  margin: 0 0 16px 0;
+  font-size: 1.1rem;
+  color: #667eea;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #eee;
+}
+
+.detail-section {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.detail-section .label {
+  font-weight: 600;
+  color: #666;
+  min-width: 80px;
+  font-size: 0.85rem;
+}
+
+.detail-section .value {
+  color: #333;
+  font-size: 0.9rem;
+  flex: 1;
+}
+
+.permissions-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex: 1;
+}
+
+.perm-tag {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.perm-tag.full {
+  background: #f44336;
+  color: white;
+}
+
+.perm-tag.read,
+.perm-tag.user,
+.perm-tag.readonly {
+  background: #4caf50;
+  color: white;
+}
+
+.perm-tag.limited,
+.perm-tag.role,
+.perm-tag.limited {
+  background: #ff9800;
+  color: white;
+}
+
+.perm-tag.deny,
+.perm-tag.critical {
+  background: #9c27b0;
+  color: white;
+}
+
+.perm-tag.temp,
+.perm-tag.conditional,
+.perm-tag.service {
+  background: #2196f3;
+  color: white;
+}
+
+.perm-tag.admin,
+.perm-tag.org,
+.perm-tag.billing {
+  background: #673ab7;
+  color: white;
+}
+
+.perm-tag.api,
+.perm-tag.programmatic,
+.perm-tag.security {
+  background: #607d8b;
+  color: white;
+}
+
+.perm-tag.cross,
+.perm-tag.secure,
+.perm-tag.audit,
+.perm-tag.policy {
+  background: #795548;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .level-row {
+    flex-wrap: wrap;
+  }
+
+  .permission-badges {
+    width: 100%;
+    justify-content: flex-start;
+    max-width: none;
+    margin-top: 8px;
+  }
+
+  .detail-section {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
new file mode 100644
index 0000000..947463c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
@@ -0,0 +1,470 @@
+<template>
+  <div class="role-policy-demo">
+    <div class="demo-header">
+      <h4>角色与策略关系可视化</h4>
+      <p class="demo-desc">拖动查看角色如何关联多个策略</p>
+    </div>
+
+    <div class="visualization-container">
+      <!-- Central Role -->
+      <div class="central-role">
+        <div class="role-core" @click="toggleRoleDetails"
+             :class="{ expanded: showRoleDetails }">
+          <div class="role-icon">🎭</div>
+          <div class="role-info">
+            <span class="role-name">{{ roleName }}</span>
+            <span class="role-type">{{ roleType }}</span>
+          </div>
+          <div class="expand-icon">{{ showRoleDetails ? '▼' : '▶' }}</div>
+        </div>
+
+        <!-- Trust Policy -->
+        <div class="trust-policy" v-if="showRoleDetails">
+          <div class="policy-header">
+            <span class="policy-icon">🔐</span>
+            <span class="policy-title">信任策略 (Trust Policy)</span>
+          </div>
+          <div class="policy-content">
+            <div class="policy-item" v-for="(trust, i) in trustPolicy" :key="i">
+              <span class="principal">{{ trust.principal }}</span>
+              <span class="action">可执行: {{ trust.action }}</span>
+              <span class="condition" v-if="trust.condition">条件: {{ trust.condition }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Connection Lines (SVG) -->
+      <svg class="connection-lines" v-if="mounted">
+        <line
+          v-for="(line, index) in connectionLines"
+          :key="index"
+          :x1="line.x1"
+          :y1="line.y1"
+          :x2="line.x2"
+          :y2="line.y2"
+          :class="['connection-line', line.type, { active: hoveredPolicy === line.policyIndex }]"
+          @mouseenter="hoveredPolicy = line.policyIndex"
+          @mouseleave="hoveredPolicy = null"
+        />
+      </svg>
+
+      <!-- Attached Policies -->
+      <div class="attached-policies">
+        <div
+          v-for="(policy, index) in attachedPolicies"
+          :key="index"
+          class="policy-card"
+          :class="{ active: hoveredPolicy === index, selected: selectedPolicy === index }"
+          :style="getPolicyPosition(index)"
+          @mouseenter="hoveredPolicy = index"
+          @mouseleave="hoveredPolicy = null"
+          @click="selectPolicy(index)"
+        >
+          <div class="policy-header">
+            <span class="policy-icon">{{ policy.icon }}</span>
+            <span class="policy-name">{{ policy.name }}</span>
+          </div>
+
+          <div class="policy-permissions" v-if="selectedPolicy === index">
+            <div class="permission-item" v-for="(perm, i) in policy.permissions" :key="i">
+              <span class="perm-effect" :class="perm.effect">{{ perm.effect }}</span>
+              <span class="perm-action">{{ perm.action }}</span>
+              <span class="perm-resource">{{ perm.resource }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+// Role Data
+const roleName = ref('CrossAccountS3AccessRole')
+const roleType = ref('跨账号访问角色')
+const showRoleDetails = ref(false)
+
+const trustPolicy = ref([
+  { principal: '账号 A (123456789012)', action: 'sts:AssumeRole', condition: 'ExternalId 匹配' },
+  { principal: '特定 IAM 用户', action: 'sts:AssumeRole', condition: 'IP 白名单' }
+])
+
+// Policies Data
+const attachedPolicies = ref([
+  {
+    name: 'S3ReadWritePolicy',
+    icon: '📦',
+    permissions: [
+      { effect: 'Allow', action: 's3:GetObject', resource: 'arn:aws:s3:::bucket/*' },
+      { effect: 'Allow', action: 's3:PutObject', resource: 'arn:aws:s3:::bucket/*' },
+      { effect: 'Allow', action: 's3:ListBucket', resource: 'arn:aws:s3:::bucket' }
+    ]
+  },
+  {
+    name: 'CloudWatchLogsPolicy',
+    icon: '📊',
+    permissions: [
+      { effect: 'Allow', action: 'logs:CreateLogGroup', resource: '*' },
+      { effect: 'Allow', action: 'logs:CreateLogStream', resource: '*' },
+      { effect: 'Allow', action: 'logs:PutLogEvents', resource: '*' }
+    ]
+  },
+  {
+    name: 'DenySensitiveData',
+    icon: '🚫',
+    permissions: [
+      { effect: 'Deny', action: 's3:GetObject', resource: 'arn:aws:s3:::bucket/sensitive/*' },
+      { effect: 'Deny', action: 's3:DeleteObject', resource: 'arn:aws:s3:::bucket/*' }
+    ]
+  }
+])
+
+// State
+const hoveredPolicy = ref(null)
+const selectedPolicy = ref(0)
+const mounted = ref(false)
+const connectionLines = ref([])
+
+// Methods
+function toggleRoleDetails() {
+  showRoleDetails.value = !showRoleDetails.value
+}
+
+function selectPolicy(index) {
+  selectedPolicy.value = index
+}
+
+function selectFeature(platform, index) {
+  // For compatibility with other demos
+}
+
+function getPolicyPosition(index) {
+  const positions = [
+    { top: '0%', right: '0%' },
+    { top: '35%', right: '5%' },
+    { top: '70%', right: '0%' }
+  ]
+  return positions[index] || positions[0]
+}
+
+function calculateConnections() {
+  // Simplified connection calculation
+  connectionLines.value = attachedPolicies.value.map((_, index) => ({
+    x1: 50,
+    y1: 50,
+    x2: 80 + (index * 5),
+    y2: 20 + (index * 30),
+    type: index === 2 ? 'deny' : 'allow',
+    policyIndex: index
+  }))
+}
+
+// Lifecycle
+onMounted(() => {
+  nextTick(() => {
+    mounted.value = true
+    calculateConnections()
+  })
+})
+
+onUnmounted(() => {
+  mounted.value = false
+})
+</script>
+
+<style scoped>
+.role-policy-demo {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 24px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  min-height: 600px;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.4rem;
+}
+
+.demo-desc {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.visualization-container {
+  position: relative;
+  min-height: 500px;
+}
+
+/* Central Role */
+.central-role {
+  position: absolute;
+  left: 5%;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 280px;
+  z-index: 10;
+}
+
+.role-core {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.role-core:hover {
+  transform: scale(1.02);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+}
+
+.role-core.expanded {
+  border-radius: 16px 16px 0 0;
+}
+
+.role-icon {
+  font-size: 2.5rem;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.role-info {
+  text-align: center;
+}
+
+.role-name {
+  display: block;
+  color: #333;
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 4px;
+}
+
+.role-type {
+  display: block;
+  color: #666;
+  font-size: 0.8rem;
+}
+
+.expand-icon {
+  text-align: center;
+  margin-top: 8px;
+  color: #999;
+  font-size: 0.8rem;
+}
+
+/* Trust Policy */
+.trust-policy {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 0 0 16px 16px;
+  padding: 16px 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.policy-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.policy-icon {
+  font-size: 1.2rem;
+}
+
+.policy-title {
+  font-weight: 700;
+  color: #333;
+  font-size: 0.85rem;
+}
+
+.policy-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.policy-item {
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 6px;
+  padding: 8px;
+  font-size: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.principal {
+  font-weight: 600;
+  color: #667eea;
+}
+
+.action {
+  color: #4caf50;
+}
+
+.condition {
+  color: #ff9800;
+}
+
+/* Connection Lines SVG */
+.connection-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.connection-line {
+  stroke: rgba(255, 255, 255, 0.3);
+  stroke-width: 2;
+  fill: none;
+  pointer-events: stroke;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.connection-line.allow {
+  stroke: #4caf50;
+}
+
+.connection-line.deny {
+  stroke: #f44336;
+  stroke-dasharray: 5, 5;
+}
+
+.connection-line:hover,
+.connection-line.active {
+  stroke-width: 4;
+  opacity: 1;
+}
+
+/* Attached Policies */
+.attached-policies {
+  position: absolute;
+  right: 5%;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 240px;
+}
+
+.policy-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.policy-card:hover,
+.policy-card.active {
+  transform: translateX(-8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.policy-card.selected {
+  border: 2px solid #667eea;
+}
+
+.policy-card .policy-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.policy-card .policy-icon {
+  font-size: 1.4rem;
+}
+
+.policy-card .policy-name {
+  font-weight: 700;
+  color: #333;
+  font-size: 0.9rem;
+}
+
+.policy-permissions {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.permission-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  margin-bottom: 4px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  font-size: 0.7rem;
+}
+
+.perm-effect {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 600;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+}
+
+.perm-effect.Allow {
+  background: #4caf50;
+  color: white;
+}
+
+.perm-effect.Deny {
+  background: #f44336;
+  color: white;
+}
+
+.perm-action {
+  font-family: monospace;
+  color: #667eea;
+}
+
+.perm-resource {
+  color: #999;
+  font-size: 0.6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 1024px) {
+  .visualization-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .central-role,
+  .attached-policies {
+    position: static;
+    transform: none;
+    width: 100%;
+  }
+
+  .connection-lines {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
new file mode 100644
index 0000000..997d6db
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="aws-vs-aliyun-demo">
+    <div class="demo-header">
+      <h4>AWS vs 阿里云 核心差异</h4>
+      <p class="demo-desc">点击切换查看不同维度的对比</p>
+    </div>
+
+    <div class="comparison-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="tab-btn"
+        :class="{ active: activeTab === tab.key }"
+        @click="activeTab = tab.key"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div class="comparison-content">
+      <transition name="fade" mode="out-in">
+        <div :key="activeTab" class="tab-content">
+          <div class="vs-cards">
+            <div class="vs-card aws-card">
+              <div class="card-header">
+                <div class="logo">AWS</div>
+                <div class="subtitle">Amazon Web Services</div>
+              </div>
+              <div class="card-body">
+                <div
+                  v-for="(point, idx) in currentComparison.aws"
+                  :key="idx"
+                  class="point"
+                >
+                  <span class="check">✓</span>
+                  <span>{{ point }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="vs-divider">
+              <div class="vs-text">VS</div>
+            </div>
+
+            <div class="vs-card aliyun-card">
+              <div class="card-header">
+                <div class="logo aliyun-logo">阿里云</div>
+                <div class="subtitle">Alibaba Cloud</div>
+              </div>
+              <div class="card-body">
+                <div
+                  v-for="(point, idx) in currentComparison.aliyun"
+                  :key="idx"
+                  class="point"
+                >
+                  <span class="check aliyun-check">✓</span>
+                  <span>{{ point }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="verdict-box">
+            <div class="verdict-title">💡 选型建议</div>
+            <div class="verdict-text">{{ currentComparison.verdict }}</div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeTab = ref('global')
+
+const tabs = [
+  { key: 'global', label: '全球布局' },
+  { key: 'ecosystem', label: '生态体系' },
+  { key: 'pricing', label: '价格策略' },
+  { key: 'enterprise', label: '企业服务' },
+  { key: 'developer', label: '开发者体验' }
+]
+
+const comparisons = {
+  global: {
+    aws: [
+      '全球 30+ 区域，覆盖率最广',
+      '发达国家基础设施成熟',
+      '跨境数据合规经验丰富'
+    ],
+    aliyun: [
+      '亚太地区覆盖密度最高',
+      '中国大陆节点数量领先',
+      '一带一路区域布局积极'
+    ],
+    verdict: '出海欧美选 AWS，深耕亚太选阿里云。跨国企业可考虑双云或多云架构。'
+  },
+  ecosystem: {
+    aws: [
+      '服务种类最丰富（200+ 服务）',
+      '第三方 SaaS 集成度极高',
+      '开源生态支持最全面'
+    ],
+    aliyun: [
+      '阿里系产品无缝集成',
+      '电商/零售场景方案成熟',
+      '国产化替代支持完善'
+    ],
+    verdict: '技术栈复杂、需丰富组件选 AWS；阿里系业务、电商零售场景选阿里云。'
+  },
+  pricing: {
+    aws: [
+      '预留实例折扣力度大',
+      'Spot 竞价实例价格极低',
+      '免费额度相对保守'
+    ],
+    aliyun: [
+      '新用户优惠力度大',
+      '包年包月性价比高',
+      '学生/开发者福利多'
+    ],
+    verdict: '长期稳定负载选 AWS 预留实例；初创公司、预算敏感选阿里云新客优惠。'
+  },
+  enterprise: {
+    aws: [
+      '企业级支持体系成熟',
+      '合规认证最全面',
+      '混合云方案（Outposts）'
+    ],
+    aliyun: [
+      '本地化服务响应快',
+      '政府/央企合作深度高',
+      '专有云/混合云方案完善'
+    ],
+    verdict: '外企、强合规要求选 AWS；政企客户、需本地化支持选阿里云。'
+  },
+  developer: {
+    aws: [
+      '文档质量业界标杆',
+      '认证体系完善',
+      '社区活跃度最高'
+    ],
+    aliyun: [
+      '中文文档详尽',
+      '学习路径清晰',
+      '技术社区活跃度高'
+    ],
+    verdict: '英文好、追求国际认证选 AWS；中文开发者、喜欢中文资料选阿里云。'
+  }
+}
+
+const currentComparison = computed(() => comparisons[activeTab.value])
+</script>
+
+<style scoped>
+.aws-vs-aliyun-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #ff9900);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.comparison-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.tab-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #8892b0;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+.tab-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e6f1ff;
+}
+
+.tab-btn.active {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  border-color: transparent;
+  color: #fff;
+}
+
+.vs-cards {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.vs-card {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.aws-card {
+  border-top: 3px solid #ff9900;
+}
+
+.aliyun-card {
+  border-top: 3px solid #ff6a00;
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #ff9900;
+  margin-bottom: 4px;
+}
+
+.aliyun-logo {
+  color: #ff6a00;
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: #8892b0;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.point {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  line-height: 1.5;
+}
+
+.check {
+  color: #ff9900;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.aliyun-check {
+  color: #ff6a00;
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vs-text {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  color: #fff;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.verdict-box {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 44, 191, 0.1));
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.verdict-title {
+  font-weight: 600;
+  color: #00d4ff;
+  margin-bottom: 8px;
+  font-size: 0.9375rem;
+}
+
+.verdict-text {
+  color: #e6f1ff;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+@media (max-width: 768px) {
+  .vs-cards {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .vs-divider {
+    display: none;
+  }
+
+  .comparison-tabs {
+    gap: 6px;
+  }
+
+  .tab-btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
new file mode 100644
index 0000000..629c273
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
@@ -0,0 +1,590 @@
+<template>
+  <div class="cloud-services-map-demo">
+    <div class="demo-header">
+      <h4>云计算服务版图全景图</h4>
+      <p class="demo-desc">点击各个板块查看 AWS 与阿里云的对应服务</p>
+    </div>
+
+    <div class="map-container">
+      <!-- 计算层 -->
+      <div
+        class="service-layer compute-layer"
+        :class="{ active: activeLayer === 'compute' }"
+        @click="setActiveLayer('compute')"
+      >
+        <div class="layer-icon">⚙️</div>
+        <div class="layer-title">计算服务</div>
+        <div class="layer-services">
+          <span class="service-tag">EC2/ECS</span>
+          <span class="service-tag">Lambda/函数计算</span>
+        </div>
+      </div>
+
+      <!-- 存储层 -->
+      <div
+        class="service-layer storage-layer"
+        :class="{ active: activeLayer === 'storage' }"
+        @click="setActiveLayer('storage')"
+      >
+        <div class="layer-icon">💾</div>
+        <div class="layer-title">存储服务</div>
+        <div class="layer-services">
+          <span class="service-tag">S3/OSS</span>
+          <span class="service-tag">EBS/云盘</span>
+        </div>
+      </div>
+
+      <!-- 网络层 -->
+      <div
+        class="service-layer network-layer"
+        :class="{ active: activeLayer === 'network' }"
+        @click="setActiveLayer('network')"
+      >
+        <div class="layer-icon">🌐</div>
+        <div class="layer-title">网络服务</div>
+        <div class="layer-services">
+          <span class="service-tag">VPC/专有网络</span>
+          <span class="service-tag">ELB/SLB</span>
+        </div>
+      </div>
+
+      <!-- 安全层 -->
+      <div
+        class="service-layer security-layer"
+        :class="{ active: activeLayer === 'security' }"
+        @click="setActiveLayer('security')"
+      >
+        <div class="layer-icon">🔒</div>
+        <div class="layer-title">安全服务</div>
+        <div class="layer-services">
+          <span class="service-tag">IAM/RAM</span>
+          <span class="service-tag">KMS/密钥管理</span>
+        </div>
+      </div>
+
+      <!-- 数据库层 -->
+      <div
+        class="service-layer database-layer"
+        :class="{ active: activeLayer === 'database' }"
+        @click="setActiveLayer('database')"
+      >
+        <div class="layer-icon">🗄️</div>
+        <div class="layer-title">数据库服务</div>
+        <div class="layer-services">
+          <span class="service-tag">RDS/PolarDB</span>
+          <span class="service-tag">DynamoDB/Tablestore</span>
+        </div>
+      </div>
+
+      <!-- 中间件层 -->
+      <div
+        class="service-layer middleware-layer"
+        :class="{ active: activeLayer === 'middleware' }"
+        @click="setActiveLayer('middleware')"
+      >
+        <div class="layer-icon">🔧</div>
+        <div class="layer-title">中间件服务</div>
+        <div class="layer-services">
+          <span class="service-tag">MQ/RocketMQ</span>
+          <span class="service-tag">ElastiCache/Redis</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情面板 -->
+    <div v-if="activeLayer" class="detail-panel">
+      <div class="detail-header">
+        <h5>{{ layerDetails[activeLayer].title }}</h5>
+        <button class="close-btn" @click="activeLayer = null">×</button>
+      </div>
+      <div class="detail-content">
+        <div class="comparison-table">
+          <div class="table-header">
+            <div class="col aws">AWS</div>
+            <div class="col aliyun">阿里云</div>
+            <div class="col desc">功能描述</div>
+          </div>
+          <div
+            v-for="(item, index) in layerDetails[activeLayer].services"
+            :key="index"
+            class="table-row"
+          >
+            <div class="col aws">{{ item.aws }}</div>
+            <div class="col aliyun">{{ item.aliyun }}</div>
+            <div class="col desc">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeLayer = ref(null)
+
+const setActiveLayer = (layer) => {
+  activeLayer.value = layer
+}
+
+const layerDetails = {
+  compute: {
+    title: '计算服务对比',
+    services: [
+      {
+        aws: 'Amazon EC2',
+        aliyun: 'ECS 云服务器',
+        desc: '虚拟服务器，可完全控制计算资源'
+      },
+      {
+        aws: 'AWS Lambda',
+        aliyun: '函数计算 FC',
+        desc: '无服务器计算，按需运行代码'
+      },
+      {
+        aws: 'Amazon ECS/EKS',
+        aliyun: 'ACK 容器服务',
+        desc: '容器编排和管理服务'
+      },
+      {
+        aws: 'AWS Fargate',
+        aliyun: 'Serverless Kubernetes',
+        desc: '无服务器容器计算引擎'
+      },
+      {
+        aws: 'AWS Batch',
+        aliyun: '批量计算',
+        desc: '批量作业调度服务'
+      },
+      {
+        aws: 'AWS Elastic Beanstalk',
+        aliyun: 'EDAS',
+        desc: '应用部署和托管平台'
+      }
+    ]
+  },
+  storage: {
+    title: '存储服务对比',
+    services: [
+      {
+        aws: 'Amazon S3',
+        aliyun: 'OSS 对象存储',
+        desc: '海量、安全、低成本的对象存储'
+      },
+      {
+        aws: 'Amazon EBS',
+        aliyun: '云盘 ESSD',
+        desc: '块存储服务，为EC2/ECS提供持久存储'
+      },
+      {
+        aws: 'Amazon EFS',
+        aliyun: 'NAS 文件存储',
+        desc: '托管的弹性文件存储'
+      },
+      {
+        aws: 'Amazon Glacier',
+        aliyun: 'OSS 归档存储',
+        desc: '低成本长期归档存储'
+      },
+      {
+        aws: 'AWS Storage Gateway',
+        aliyun: '混合云存储阵列',
+        desc: '混合云存储服务'
+      },
+      {
+        aws: 'AWS Backup',
+        aliyun: '云备份服务',
+        desc: '集中式备份管理'
+      }
+    ]
+  },
+  network: {
+    title: '网络服务对比',
+    services: [
+      {
+        aws: 'Amazon VPC',
+        aliyun: '专有网络 VPC',
+        desc: '虚拟私有云网络环境'
+      },
+      {
+        aws: 'Elastic Load Balancing',
+        aliyun: 'SLB 负载均衡',
+        desc: '流量分发服务'
+      },
+      {
+        aws: 'Amazon CloudFront',
+        aliyun: 'CDN 内容分发',
+        desc: '全球内容分发网络'
+      },
+      {
+        aws: 'AWS Transit Gateway',
+        aliyun: '云企业网 CEN',
+        desc: '网络传输网关'
+      },
+      {
+        aws: 'AWS Direct Connect',
+        aliyun: '高速通道',
+        desc: '专线连接服务'
+      },
+      {
+        aws: 'AWS App Mesh',
+        aliyun: '服务网格 ASM',
+        desc: '微服务网格管理'
+      },
+      {
+        aws: 'AWS Global Accelerator',
+        aliyun: '全球加速 GA',
+        desc: '网络加速服务'
+      }
+    ]
+  },
+  security: {
+    title: '安全服务对比',
+    services: [
+      {
+        aws: 'AWS IAM',
+        aliyun: 'RAM 访问控制',
+        desc: '身份和访问管理服务'
+      },
+      {
+        aws: 'AWS KMS',
+        aliyun: 'KMS 密钥管理',
+        desc: '密钥管理服务'
+      },
+      {
+        aws: 'AWS WAF',
+        aliyun: 'WAF 防火墙',
+        desc: 'Web应用防火墙'
+      },
+      {
+        aws: 'AWS Shield',
+        aliyun: 'DDoS 防护',
+        desc: 'DDoS攻击防护'
+      },
+      {
+        aws: 'Amazon GuardDuty',
+        aliyun: '云安全中心',
+        desc: '智能威胁检测'
+      },
+      {
+        aws: 'AWS Certificate Manager',
+        aliyun: 'SSL 证书服务',
+        desc: 'SSL/TLS证书管理'
+      },
+      {
+        aws: 'AWS Secrets Manager',
+        aliyun: '凭据管家',
+        desc: '机密信息托管'
+      },
+      {
+        aws: 'Amazon Macie',
+        aliyun: '敏感数据保护',
+        desc: '敏感数据发现与保护'
+      }
+    ]
+  },
+  database: {
+    title: '数据库服务对比',
+    services: [
+      {
+        aws: 'Amazon RDS',
+        aliyun: 'RDS 关系型数据库',
+        desc: '托管的关系型数据库服务'
+      },
+      {
+        aws: 'Amazon Aurora',
+        aliyun: 'PolarDB',
+        desc: '云原生关系型数据库'
+      },
+      {
+        aws: 'Amazon DynamoDB',
+        aliyun: 'Tablestore',
+        desc: 'NoSQL键值和文档数据库'
+      },
+      {
+        aws: 'Amazon ElastiCache',
+        aliyun: '云数据库 Redis',
+        desc: '托管的内存缓存服务'
+      },
+      {
+        aws: 'Amazon DocumentDB',
+        aliyun: 'MongoDB 副本集',
+        desc: '兼容MongoDB的文档数据库'
+      },
+      {
+        aws: 'Amazon Keyspaces',
+        aliyun: 'Cassandra 服务',
+        desc: '托管的Cassandra兼容服务'
+      },
+      {
+        aws: 'Amazon Neptune',
+        aliyun: '图数据库 GDB',
+        desc: '全托管图数据库'
+      },
+      {
+        aws: 'Amazon QLDB',
+        aliyun: '区块链 BaaS',
+        desc: '全托管分类账数据库'
+      },
+      {
+        aws: 'Amazon Timestream',
+        aliyun: '时序数据库 TSDB',
+        desc: '全托管时序数据库'
+      }
+    ]
+  },
+  middleware: {
+    title: '中间件服务对比',
+    services: [
+      {
+        aws: 'Amazon MQ',
+        aliyun: '消息队列 MQ',
+        desc: '托管的消息代理服务'
+      },
+      {
+        aws: 'Amazon SQS',
+        aliyun: '消息服务 MNS',
+        desc: '全托管消息队列服务'
+      },
+      {
+        aws: 'Amazon SNS',
+        aliyun: '事件总线 EventBridge',
+        desc: '全托管发布/订阅服务'
+      },
+      {
+        aws: 'Amazon Kinesis',
+        aliyun: '实时计算 Flink',
+        desc: '实时数据流处理'
+      },
+      {
+        aws: 'AWS Step Functions',
+        aliyun: 'Serverless 工作流',
+        desc: '工作流编排服务'
+      },
+      {
+        aws: 'AWS AppSync',
+        aliyun: 'API 网关',
+        desc: '托管GraphQL服务'
+      },
+      {
+        aws: 'Amazon EventBridge',
+        aliyun: '事件总线',
+        desc: '无服务器事件总线'
+      }
+    ]
+  }
+}
+</script>
+
+<style scoped>
+.cloud-services-map-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.map-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.service-layer {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.service-layer:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.service-layer.active {
+  background: rgba(0, 212, 255, 0.15);
+  border-color: #00d4ff;
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+}
+
+.layer-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+}
+
+.layer-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  margin-bottom: 8px;
+  color: #e6f1ff;
+}
+
+.layer-services {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: center;
+}
+
+.service-tag {
+  background: rgba(123, 44, 191, 0.3);
+  color: #c084fc;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+}
+
+.service-layer.active .service-tag {
+  background: rgba(0, 212, 255, 0.3);
+  color: #00d4ff;
+}
+
+.detail-panel {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 16px;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-header h5 {
+  margin: 0;
+  color: #00d4ff;
+  font-size: 1.1rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #8892b0;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.comparison-table {
+  width: 100%;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 1.2fr 1.2fr 2fr;
+  gap: 12px;
+  padding: 10px 12px;
+  background: rgba(0, 212, 255, 0.1);
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  margin-bottom: 8px;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.2fr 2fr;
+  gap: 12px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 0.875rem;
+  transition: background 0.2s;
+}
+
+.table-row:hover {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+}
+
+.col.aws {
+  color: #ff9900;
+  font-weight: 500;
+}
+
+.col.aliyun {
+  color: #ff6a00;
+  font-weight: 500;
+}
+
+.col.desc {
+  color: #8892b0;
+}
+
+@media (max-width: 768px) {
+  .map-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .table-header,
+  .table-row {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .col.desc {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .map-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
new file mode 100644
index 0000000..4f0a7cb
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
@@ -0,0 +1,463 @@
+<template>
+  <div class="compute-services-demo">
+    <div class="demo-header">
+      <h4>计算服务选型指南</h4>
+      <p class="demo-desc">拖动滑块调整场景参数，获取最佳计算方案</p>
+    </div>
+
+    <div class="scenario-sliders">
+      <div class="slider-group">
+        <label>负载稳定性</label>
+        <input
+          v-model.number="scenario.stability"
+          type="range"
+          min="0"
+          max="100"
+        />
+        <div class="slider-labels">
+          <span>波动大</span>
+          <span>非常稳定</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <label>平均负载率</label>
+        <input
+          v-model.number="scenario.utilization"
+          type="range"
+          min="0"
+          max="100"
+        />
+        <div class="slider-labels">
+          <span>很低</span>
+          <span>接近100%</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <label>任务持续时间</label>
+        <input
+          v-model.number="scenario.duration"
+          type="range"
+          min="0"
+          max="100"
+        />
+        <div class="slider-labels">
+          <span>几分钟</span>
+          <span>持续运行</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <label>流量突发程度</label>
+        <input
+          v-model.number="scenario.burstiness"
+          type="range"
+          min="0"
+          max="100"
+        />
+        <div class="slider-labels">
+          <span>平稳</span>
+          <span>大起大落</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="recommendation-panel">
+      <div class="recommendation-title">
+        <span class="icon">🎯</span>
+        推荐方案
+      </div>
+
+      <div class="solution-cards">
+        <div
+          v-for="(solution, index) in recommendations"
+          :key="index"
+          class="solution-card"
+          :class="{ 'top-pick': index === 0 }"
+        >
+          <div class="solution-rank" :class="{ 'rank-1': index === 0 }">
+            {{ index === 0 ? '👑' : index + 1 }}
+          </div>
+          <div class="solution-content">
+            <div class="solution-name">{{ solution.name }}</div>
+            <div class="solution-services">
+              <span class="service-tag aws">{{ solution.aws }}</span>
+              <span class="vs-mini">vs</span>
+              <span class="service-tag aliyun">{{ solution.aliyun }}</span>
+            </div>
+            <div class="solution-reason">{{ solution.reason }}</div>
+            <div class="solution-savings" v-if="solution.savings">
+              💰 预计节省: {{ solution.savings }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scenario-presets">
+      <span class="preset-label">快速场景:</span>
+      <button
+        v-for="preset in presets"
+        :key="preset.name"
+        class="preset-btn"
+        @click="applyPreset(preset)"
+      >
+        {{ preset.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const scenario = ref({
+  stability: 50,
+  utilization: 60,
+  duration: 70,
+  burstiness: 30
+})
+
+const presets = [
+  {
+    name: '电商大促',
+    values: { stability: 20, utilization: 40, duration: 90, burstiness: 90 }
+  },
+  {
+    name: '企业内部系统',
+    values: { stability: 90, utilization: 70, duration: 95, burstiness: 10 }
+  },
+  {
+    name: '初创公司官网',
+    values: { stability: 40, utilization: 20, duration: 80, burstiness: 30 }
+  },
+  {
+    name: '数据处理任务',
+    values: { stability: 30, utilization: 95, duration: 10, burstiness: 80 }
+  },
+  {
+    name: 'SaaS 平台',
+    values: { stability: 60, utilization: 50, duration: 95, burstiness: 60 }
+  }
+]
+
+const applyPreset = (preset) => {
+  scenario.value = { ...preset.values }
+}
+
+const recommendations = computed(() => {
+  const s = scenario.value
+  const solutions = []
+
+  // 计算各方案得分
+  let serverlessScore = 0
+  let ec2Score = 0
+  let spotScore = 0
+  let reservedScore = 0
+
+  // Serverless (Lambda/FC)
+  if (s.duration < 30) serverlessScore += 30
+  if (s.burstiness > 70) serverlessScore += 25
+  if (s.utilization < 30) serverlessScore += 20
+  if (s.stability < 30) serverlessScore += 15
+
+  // Spot 实例
+  if (s.burstiness > 60) spotScore += 25
+  if (s.stability < 40) spotScore += 30
+  if (s.duration < 40) spotScore += 20
+  if (s.utilization < 50) spotScore += 15
+
+  // 预留实例
+  if (s.stability > 70) reservedScore += 35
+  if (s.duration > 80) reservedScore += 25
+  if (s.utilization > 60) reservedScore += 20
+  if (s.burstiness < 30) reservedScore += 10
+
+  // 按需实例 (兜底)
+  ec2Score = 40
+
+  // 排序并生成推荐
+  const scores = [
+    { type: 'serverless', score: serverlessScore, savings: '40-70%' },
+    { type: 'spot', score: spotScore, savings: '60-90%' },
+    { type: 'reserved', score: reservedScore, savings: '30-60%' },
+    { type: 'ondemand', score: ec2Score, savings: null }
+  ].sort((a, b) => b.score - a.score)
+
+  const solutionMap = {
+    serverless: {
+      name: '无服务器架构',
+      aws: 'AWS Lambda',
+      aliyun: '函数计算 FC',
+      reason: '流量波动大、任务短时，按调用计费最划算，自动扩缩容免运维'
+    },
+    spot: {
+      name: '竞价实例',
+      aws: 'EC2 Spot',
+      aliyun: '抢占式实例',
+      reason: '可容忍中断的计算任务，价格极低，适合批处理、渲染等场景'
+    },
+    reserved: {
+      name: '预留实例',
+      aws: 'Reserved Instances',
+      aliyun: '包年包月',
+      reason: '长期稳定负载，提前承诺使用时长换取大幅折扣，成本最优'
+    },
+    ondemand: {
+      name: '按需实例',
+      aws: 'EC2 On-Demand',
+      aliyun: '按量付费 ECS',
+      reason: '灵活性最高，按小时计费，适合测试环境或 unpredictable 负载'
+    }
+  }
+
+  return scores.slice(0, 3).map((s, idx) => ({
+    ...solutionMap[s.type],
+    savings: s.savings
+  }))
+})
+</script>
+
+<style scoped>
+.compute-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.scenario-sliders {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.slider-group {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.slider-group label {
+  display: block;
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.slider-group input[type='range'] {
+  width: 100%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  outline: none;
+  -webkit-appearance: none;
+  margin-bottom: 8px;
+}
+
+.slider-group input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: #8892b0;
+}
+
+.recommendation-panel {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.recommendation-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e6f1ff;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  font-size: 1.25rem;
+}
+
+.solution-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.solution-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  gap: 12px;
+  transition: all 0.3s ease;
+}
+
+.solution-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.solution-card.top-pick {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 44, 191, 0.15));
+  border-color: rgba(0, 212, 255, 0.3);
+}
+
+.solution-rank {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: #8892b0;
+  flex-shrink: 0;
+}
+
+.solution-rank.rank-1 {
+  background: linear-gradient(135deg, #ffd700, #ffaa00);
+  color: #1a1a2e;
+  font-size: 1.25rem;
+}
+
+.solution-content {
+  flex: 1;
+}
+
+.solution-name {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #e6f1ff;
+  margin-bottom: 6px;
+}
+
+.solution-services {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.service-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.service-tag.aws {
+  background: rgba(255, 153, 0, 0.2);
+  color: #ff9900;
+}
+
+.service-tag.aliyun {
+  background: rgba(255, 106, 0, 0.2);
+  color: #ff6a00;
+}
+
+.vs-mini {
+  color: #8892b0;
+  font-size: 0.75rem;
+}
+
+.solution-reason {
+  font-size: 0.875rem;
+  color: #8892b0;
+  line-height: 1.5;
+}
+
+.solution-savings {
+  margin-top: 8px;
+  font-size: 0.8125rem;
+  color: #00d4ff;
+  font-weight: 500;
+}
+
+.scenario-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.preset-label {
+  font-size: 0.875rem;
+  color: #8892b0;
+  margin-right: 8px;
+}
+
+.preset-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e6f1ff;
+  padding: 6px 14px;
+  border-radius: 16px;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  transition: all 0.2s ease;
+}
+
+.preset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+@media (max-width: 768px) {
+  .scenario-sliders {
+    grid-template-columns: 1fr;
+  }
+
+  .solution-card {
+    flex-direction: column;
+  }
+
+  .scenario-presets {
+    justify-content: flex-start;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
new file mode 100644
index 0000000..a60fe67
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="database-services-demo">
+    <div class="demo-header">
+      <h4>数据库选型助手</h4>
+      <p class="demo-desc">根据您的业务特点，推荐最适合的数据库方案</p>
+    </div>
+
+    <div class="db-selection">
+      <div class="db-categories">
+        <button
+          v-for="cat in categories"
+          :key="cat.id"
+          class="cat-btn"
+          :class="{ active: selectedCategory === cat.id }"
+          @click="selectCategory(cat.id)"
+        >
+          <span class="cat-icon">{{ cat.icon }}</span>
+          <span class="cat-name">{{ cat.name }}</span>
+        </button>
+      </div>
+
+      <div v-if="selectedCategory" class="db-comparison">
+        <div class="comparison-header">
+          <span class="aws-badge">AWS</span>
+          <span class="vs-text">对比</span>
+          <span class="aliyun-badge">阿里云</span>
+        </div>
+
+        <div class="db-cards">
+          <div class="db-card">
+            <div class="db-header aws">
+              <div class="db-name">{{ currentCategory.aws }}</div>
+            </div>
+            <div class="db-body">
+              <div class="feature-list">
+                <div v-for="(feat, i) in currentCategory.awsFeatures" :key="i" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+              <div class="price-tag">{{ currentCategory.awsPrice }}</div>
+            </div>
+          </div>
+
+          <div class="db-card">
+            <div class="db-header aliyun">
+              <div class="db-name">{{ currentCategory.aliyun }}</div>
+            </div>
+            <div class="db-body">
+              <div class="feature-list">
+                <div v-for="(feat, i) in currentCategory.aliyunFeatures" :key="i" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+              <div class="price-tag aliyun">{{ currentCategory.aliyunPrice }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedCategory = ref('relational')
+
+const categories = [
+  { id: 'relational', name: '关系型数据库', icon: '📊' },
+  { id: 'nosql', name: 'NoSQL 数据库', icon: '📦' },
+  { id: 'cache', name: '缓存服务', icon: '⚡' },
+  { id: 'analytics', name: '分析型数据库', icon: '📈' }
+]
+
+const categoryData = {
+  relational: {
+    aws: 'Amazon RDS / Aurora',
+    aliyun: 'RDS / PolarDB',
+    awsFeatures: ['MySQL/PostgreSQL/Oracle/SQL Server 支持', 'Aurora 5 倍性能提升', '自动故障转移和读副本', 'Serverless 自动扩缩容'],
+    aliyunFeatures: ['MySQL/SQL Server/PostgreSQL/Oracle 支持', 'PolarDB 计算存储分离', '秒级备份恢复', 'Oracle 语法兼容模式'],
+    awsPrice: '$0.017/小时起',
+    aliyunPrice: '¥0.12/小时起'
+  },
+  nosql: {
+    aws: 'Amazon DynamoDB',
+    aliyun: 'Tablestore',
+    awsFeatures: ['全托管 NoSQL 键值和文档数据库', '单表设计支持 PB 级规模', 'DAX 内存缓存加速', '全局表多区域复制'],
+    aliyunFeatures: ['分布式 NoSQL 数据库存储', '自动分片和负载均衡', '二级索引和全文检索', '毫秒级单点读写延迟'],
+    awsPrice: '按需 $1.25/百万次写',
+    aliyunPrice: '按量 0.4元/万次写'
+  },
+  cache: {
+    aws: 'Amazon ElastiCache',
+    aliyun: '云数据库 Redis',
+    awsFeatures: ['托管 Redis 和 Memcached', '集群模式自动分片', '只读副本和自动故障转移', '备份恢复和快照'],
+    aliyunFeatures: ['主从双节点架构', '自动故障切换', '读写分离能力', '数据持久化备份'],
+    awsPrice: '$0.012/小时起',
+    aliyunPrice: '¥0.08/小时起'
+  },
+  analytics: {
+    aws: 'Amazon Redshift',
+    aliyun: 'AnalyticDB',
+    awsFeatures: ['PB 级数据仓库', '列式存储和压缩', 'Spectrum 查询 S3 数据', '并发扩展和自动优化'],
+    aliyunFeatures: ['实时分析型数据库', 'MPP 大规模并行处理', '高并发低延迟查询', '自动索引和优化'],
+    awsPrice: '$0.25/小时起',
+    aliyunPrice: '¥2.0/小时起'
+  }
+}
+
+const selectCategory = (id) => {
+  selectedCategory.value = id
+}
+
+const currentCategory = computed(() => categoryData[selectedCategory.value])
+</script>
+
+<style scoped>
+.database-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.db-selection {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.db-categories {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.cat-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e6f1ff;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.cat-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.cat-btn.active {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  border-color: transparent;
+  color: #fff;
+}
+
+.cat-icon {
+  font-size: 1rem;
+}
+
+.comparison-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.aws-badge, .aliyun-badge {
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.aws-badge {
+  background: rgba(255, 153, 0, 0.2);
+  color: #ff9900;
+}
+
+.aliyun-badge {
+  background: rgba(255, 106, 0, 0.2);
+  color: #ff6a00;
+}
+
+.vs-text {
+  color: #8892b0;
+  font-size: 0.75rem;
+}
+
+.db-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.db-card {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.db-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.db-header.aws {
+  background: rgba(255, 153, 0, 0.1);
+}
+
+.db-header.aliyun {
+  background: rgba(255, 106, 0, 0.1);
+}
+
+.db-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e6f1ff;
+}
+
+.db-body {
+  padding: 16px;
+}
+
+.feature-list {
+  margin-bottom: 12px;
+}
+
+.feature {
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.price-tag {
+  background: rgba(0, 212, 255, 0.1);
+  color: #00d4ff;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.price-tag.aliyun {
+  color: #ff6a00;
+  background: rgba(255, 106, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+  .db-categories {
+    justify-content: center;
+  }
+
+  .db-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
new file mode 100644
index 0000000..1e253e7
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="k8s-services-demo">
+    <div class="demo-header">
+      <h4>Kubernetes 服务生态全景</h4>
+      <p class="demo-desc">探索 AWS 和阿里云上的 K8s 服务及配套生态</p>
+    </div>
+
+    <div class="k8s-architecture">
+      <div class="arch-layer control-plane">
+        <div class="layer-title">控制平面</div>
+        <div class="layer-content">
+          <div class="service-box">
+            <div class="service-name">EKS / ACK</div>
+            <div class="service-desc">托管 Kubernetes 控制平面</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="arch-layer worker-nodes">
+        <div class="layer-title">工作节点</div>
+        <div class="layer-content">
+          <div class="node-types">
+            <div class="node-box">
+              <div class="node-icon">💻</div>
+              <div class="node-name">EC2/ECS</div>
+              <div class="node-desc">标准计算节点</div>
+            </div>
+            <div class="node-box">
+              <div class="node-icon">⚡</div>
+              <div class="node-name">Fargate/ECI</div>
+              <div class="node-desc">Serverless 节点</div>
+            </div>
+            <div class="node-box">
+              <div class="node-icon">🎯</div>
+              <div class="node-name">Spot/抢占式</div>
+              <div class="node-desc">低成本竞价节点</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="arch-layer addons">
+        <div class="layer-title">插件生态</div>
+        <div class="layer-content">
+          <div class="addon-grid">
+            <div class="addon-card">
+              <div class="addon-name">Ingress/Nginx</div>
+              <div class="addon-aws">AWS Load Balancer</div>
+              <div class="addon-aliyun">ALB Ingress</div>
+            </div>
+            <div class="addon-card">
+              <div class="addon-name">Storage</div>
+              <div class="addon-aws">EBS/EFS CSI</div>
+              <div class="addon-aliyun">云盘/NAS CSI</div>
+            </div>
+            <div class="addon-card">
+              <div class="addon-name">Monitoring</div>
+              <div class="addon-aws">CloudWatch/AMP</div>
+              <div class="addon-aliyun">ARMS/Prometheus</div>
+            </div>
+            <div class="addon-card">
+              <div class="addon-name">Service Mesh</div>
+              <div class="addon-aws">App Mesh</div>
+              <div class="addon-aliyun">Service Mesh ASM</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Component logic here if needed
+</script>
+
+<style scoped>
+.k8s-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.k8s-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.arch-layer {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.layer-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #00d4ff;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.service-box {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 44, 191, 0.15));
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 10px;
+  padding: 16px;
+  text-align: center;
+}
+
+.service-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #e6f1ff;
+  margin-bottom: 4px;
+}
+
+.service-desc {
+  font-size: 0.8125rem;
+  color: #8892b0;
+}
+
+.node-types {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.node-box {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  padding: 14px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.node-icon {
+  font-size: 1.5rem;
+  margin-bottom: 6px;
+}
+
+.node-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #e6f1ff;
+  margin-bottom: 2px;
+}
+
+.node-desc {
+  font-size: 0.6875rem;
+  color: #8892b0;
+}
+
+.addon-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.addon-card {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.addon-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #e6f1ff;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.addon-aws, .addon-aliyun {
+  font-size: 0.75rem;
+  padding: 2px 0;
+}
+
+.addon-aws {
+  color: #ff9900;
+}
+
+.addon-aliyun {
+  color: #ff6a00;
+}
+
+@media (max-width: 768px) {
+  .node-types {
+    grid-template-columns: 1fr;
+  }
+
+  .addon-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/MonitoringServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/MonitoringServicesDemo.vue
new file mode 100644
index 0000000..e69de29
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
new file mode 100644
index 0000000..d6c0883
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
@@ -0,0 +1,637 @@
+<template>
+  <div class="network-services-demo">
+    <div class="demo-header">
+      <h4>网络架构可视化配置</h4>
+      <p class="demo-desc">拖拽组件构建您的云上网络架构</p>
+    </div>
+
+    <div class="network-builder">
+      <div class="components-panel">
+        <div class="panel-title">可用组件</div>
+        <div class="component-list">
+          <div
+            v-for="component in networkComponents"
+            :key="component.id"
+            class="component-item"
+            draggable="true"
+            @dragstart="onDragStart($event, component)"
+          >
+            <span class="component-icon">{{ component.icon }}</span>
+            <span class="component-name">{{ component.name }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="canvas-area">
+        <div
+          class="network-canvas"
+          @drop="onDrop"
+          @dragover.prevent
+        >
+          <div v-if="canvasItems.length === 0" class="empty-state">
+            <div class="empty-icon">🏗️</div>
+            <div class="empty-text">拖拽左侧组件到此处</div>
+            <div class="empty-subtext">开始构建您的网络架构</div>
+          </div>
+
+          <div
+            v-for="(item, index) in canvasItems"
+            :key="item.id"
+            class="canvas-item"
+            :class="item.type"
+            :style="itemStyle(index)"
+            @click="selectItem(item)"
+          >
+            <div class="item-icon">{{ item.icon }}</div>
+            <div class="item-name">{{ item.name }}</div>
+            <button class="remove-btn" @click.stop="removeItem(index)">×</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="selectedItem" class="config-panel">
+      <div class="config-header">
+        <span class="config-icon">{{ selectedItem.icon }}</span>
+        <span class="config-title">{{ selectedItem.name }} 配置</span>
+        <button class="close-config" @click="selectedItem = null">×</button>
+      </div>
+
+      <div class="config-content">
+        <div class="config-section">
+          <div class="section-title">AWS 配置</div>
+          <div class="service-name">{{ selectedItem.awsService }}</div>
+          <div class="config-options">
+            <div
+              v-for="(option, idx) in selectedItem.awsOptions"
+              :key="idx"
+              class="option-item"
+            >
+              <span class="option-check">✓</span>
+              <span>{{ option }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="config-divider"></div>
+
+        <div class="config-section">
+          <div class="section-title aliyun-title">阿里云配置</div>
+          <div class="service-name aliyun-service">{{ selectedItem.aliyunService }}</div>
+          <div class="config-options">
+            <div
+              v-for="(option, idx) in selectedItem.aliyunOptions"
+              :key="idx"
+              class="option-item"
+            >
+              <span class="option-check aliyun-check">✓</span>
+              <span>{{ option }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="config-footer">
+        <div class="price-compare">
+          <div class="price-item">
+            <span class="price-label">AWS:</span>
+            <span class="price-value">{{ selectedItem.awsPrice }}</span>
+          </div>
+          <div class="price-item">
+            <span class="price-label">阿里云:</span>
+            <span class="price-value aliyun-price">{{ selectedItem.aliyunPrice }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const canvasItems = ref([])
+const selectedItem = ref(null)
+let draggedItem = null
+
+const networkComponents = [
+  {
+    id: 'vpc',
+    name: '专有网络',
+    icon: '🏠',
+    type: 'network',
+    awsService: 'Amazon VPC',
+    aliyunService: '专有网络 VPC',
+    awsOptions: [
+      '自定义 IP 地址范围',
+      '多可用区子网划分',
+      '网络 ACL 和安全组',
+      'VPC 对等连接和 Transit Gateway'
+    ],
+    aliyunOptions: [
+      '自定义私网网段',
+      '交换机跨可用区部署',
+      '安全组和网络 ACL',
+      'VPC 互通和云企业网'
+    ],
+    awsPrice: '免费（子网内流量）',
+    aliyunPrice: '免费（同 VPC 内流量）'
+  },
+  {
+    id: 'cdn',
+    name: '内容分发',
+    icon: '🚀',
+    type: 'network',
+    awsService: 'Amazon CloudFront',
+    aliyunService: 'CDN 内容分发',
+    awsOptions: [
+      '全球 400+ 边缘节点',
+      '支持静态和动态内容加速',
+      'Lambda@Edge 边缘计算',
+      '与 AWS Shield 集成防护'
+    ],
+    aliyunOptions: [
+      '国内 2800+ 节点覆盖',
+      '全站加速和下载分发',
+      '边缘脚本和缓存优化',
+      '与 WAF 联动安全防护'
+    ],
+    awsPrice: 'HTTP: $0.085/GB 起',
+    aliyunPrice: 'HTTP: ¥0.15/GB 起'
+  },
+  {
+    id: 'lb',
+    name: '负载均衡',
+    icon: '⚖️',
+    type: 'network',
+    awsService: 'Elastic Load Balancing',
+    aliyunService: 'SLB 负载均衡',
+    awsOptions: [
+      'ALB/NLB/CLB 多种类型',
+      '自动健康检查和故障转移',
+      'SSL/TLS 终止和证书管理',
+      '与 Auto Scaling 集成'
+    ],
+    aliyunOptions: [
+      'ALB/NLB/CLB 全类型支持',
+      '主备和集群高可用模式',
+      'HTTPS 证书一键部署',
+      '与 ESS 弹性伸缩联动'
+    ],
+    awsPrice: 'ALB: $0.0225/小时 + LCU',
+    aliyunPrice: 'ALB: ¥0.15/小时 + LCU'
+  },
+  {
+    id: 'waf',
+    name: 'WAF 防火墙',
+    icon: '🛡️',
+    type: 'security',
+    awsService: 'AWS WAF',
+    aliyunService: 'Web 应用防火墙',
+    awsOptions: [
+      '托管规则和自定义规则',
+      '速率限制和 IP 黑名单',
+      '与 CloudFront/ALB 集成',
+      'Bot Control 机器人管理'
+    ],
+    aliyunOptions: [
+      '内置防护策略和自定义规则',
+      'CC 攻击防护和 IP 封禁',
+      '与 CDN/SLB 无缝集成',
+      '数据风控和爬虫管理'
+    ],
+    awsPrice: '$5/月 + $0.6/百万请求',
+    aliyunPrice: '¥980/月起 + 流量费'
+  },
+  {
+    id: 'nat',
+    name: 'NAT 网关',
+    icon: '🚪',
+    type: 'network',
+    awsService: 'NAT Gateway',
+    aliyunService: 'NAT 网关',
+    awsOptions: [
+      '自动高可用，无需管理',
+      '每个 AZ 独立部署',
+      '支持 SNAT 出网',
+      '流量监控和告警'
+    ],
+    aliyunOptions: [
+      '多可用区容灾',
+      '按规格选择带宽',
+      'SNAT/DNAT 支持',
+      '流量和连接数监控'
+    ],
+    awsPrice: '$0.045/小时 + $0.045/GB',
+    aliyunPrice: '¥0.35/小时 + 流量费'
+  }
+]
+
+const onDragStart = (event, component) => {
+  draggedItem = component
+  event.dataTransfer.effectAllowed = 'copy'
+}
+
+const onDrop = (event) => {
+  event.preventDefault()
+  if (draggedItem) {
+    canvasItems.value.push({
+      ...draggedItem,
+      id: `${draggedItem.id}-${Date.now()}`
+    })
+    draggedItem = null
+  }
+}
+
+const itemStyle = (index) => {
+  const positions = [
+    { top: '10%', left: '10%' },
+    { top: '10%', right: '10%' },
+    { bottom: '10%', left: '10%' },
+    { bottom: '10%', right: '10%' },
+    { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
+  ]
+  return positions[index % positions.length]
+}
+
+const selectItem = (item) => {
+  selectedItem.value = item
+}
+
+const removeItem = (index) => {
+  canvasItems.value.splice(index, 1)
+  if (selectedItem.value && !canvasItems.value.find(i => i.id === selectedItem.value.id)) {
+    selectedItem.value = null
+  }
+}
+</script>
+
+<style scoped>
+.network-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.network-builder {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.components-panel {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.component-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.component-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  cursor: grab;
+  transition: all 0.2s ease;
+}
+
+.component-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(4px);
+}
+
+.component-item:active {
+  cursor: grabbing;
+}
+
+.component-icon {
+  font-size: 1.25rem;
+}
+
+.component-name {
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+}
+
+.canvas-area {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  min-height: 400px;
+}
+
+.network-canvas {
+  position: relative;
+  width: 100%;
+  height: 400px;
+}
+
+.empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 12px;
+}
+
+.empty-text {
+  font-size: 1rem;
+  color: #e6f1ff;
+  margin-bottom: 4px;
+}
+
+.empty-subtext {
+  font-size: 0.8125rem;
+  color: #8892b0;
+}
+
+.canvas-item {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  padding: 12px 16px;
+  min-width: 120px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.canvas-item:hover {
+  background: rgba(255, 255, 255, 0.12);
+  transform: scale(1.05);
+}
+
+.canvas-item.network {
+  border-color: rgba(0, 212, 255, 0.4);
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.canvas-item.security {
+  border-color: rgba(255, 99, 99, 0.4);
+  background: rgba(255, 99, 99, 0.1);
+}
+
+.item-icon {
+  font-size: 1.5rem;
+  margin-bottom: 4px;
+}
+
+.item-name {
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  font-weight: 500;
+}
+
+.remove-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  background: #ff4444;
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 0.875rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.canvas-item:hover .remove-btn {
+  opacity: 1;
+}
+
+.config-panel {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.config-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.config-icon {
+  font-size: 1.25rem;
+}
+
+.config-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #e6f1ff;
+  flex: 1;
+}
+
+.close-config {
+  background: none;
+  border: none;
+  color: #8892b0;
+  font-size: 1.25rem;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-config:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.config-content {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.config-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.section-title {
+  font-size: 0.75rem;
+  color: #ff9900;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.aliyun-title {
+  color: #ff6a00;
+}
+
+.service-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.aliyun-service {
+  color: #e6f1ff;
+}
+
+.config-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  line-height: 1.4;
+}
+
+.option-check {
+  color: #ff9900;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.aliyun-check {
+  color: #ff6a00;
+}
+
+.config-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.config-footer {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.price-compare {
+  display: flex;
+  justify-content: space-around;
+  gap: 16px;
+}
+
+.price-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.price-label {
+  font-size: 0.8125rem;
+  color: #8892b0;
+}
+
+.price-value {
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  font-weight: 500;
+}
+
+.aliyun-price {
+  color: #ff6a00;
+}
+
+@media (max-width: 768px) {
+  .network-builder {
+    grid-template-columns: 1fr;
+  }
+
+  .components-panel {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .config-content {
+    grid-template-columns: 1fr;
+  }
+
+  .config-divider {
+    display: none;
+  }
+
+  .price-compare {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
new file mode 100644
index 0000000..a33334f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="pricing-model-demo">
+    <div class="demo-header">
+      <h4>云服务器计费模式计算器</h4>
+      <p class="demo-desc">输入您的使用场景，对比不同计费模式的成本</p>
+    </div>
+
+    <div class="calculator-inputs">
+      <div class="input-section">
+        <h5>基础配置</h5>
+        <div class="input-grid">
+          <div class="input-group">
+            <label>实例规格</label>
+            <select v-model="config.instanceType">
+              <option v-for="type in instanceTypes" :key="type.value" :value="type.value">
+                {{ type.label }}
+              </option>
+            </select>
+          </div>
+          <div class="input-group">
+            <label>数量 (台)</label>
+            <input v-model.number="config.quantity" type="number" min="1" max="100" />
+          </div>
+        </div>
+      </div>
+
+      <div class="input-section">
+        <h5>使用模式</h5>
+        <div class="input-grid">
+          <div class="input-group">
+            <label>每日运行时长 (小时)</label>
+            <input v-model.number="config.dailyHours" type="range" min="1" max="24" />
+            <span class="range-value">{{ config.dailyHours }} 小时</span>
+          </div>
+          <div class="input-group">
+            <label>每月运行天数</label>
+            <input v-model.number="config.monthlyDays" type="range" min="1" max="31" />
+            <span class="range-value">{{ config.monthlyDays }} 天</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="input-section">
+        <h5>计费偏好</h5>
+        <div class="billing-options">
+          <label v-for="option in billingOptions" :key="option.value" class="option-card"
+            :class="{ active: config.billingType === option.value }">
+            <input type="radio" v-model="config.billingType" :value="option.value" />
+            <span class="option-icon">{{ option.icon }}</span>
+            <span class="option-name">{{ option.label }}</span>
+            <span class="option-desc">{{ option.desc }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="cost-comparison">
+      <h5>成本对比分析</h5>
+      <div class="comparison-chart">
+        <div v-for="model in costComparison" :key="model.type" class="chart-bar"
+          :class="{ recommended: model.recommended }">
+          <div class="bar-label">{{ model.label }}</div>
+          <div class="bar-visual">
+            <div class="bar-fill" :style="{ height: model.percentage + '%' }"
+              :class="model.type"></div>
+          </div>
+          <div class="bar-value">
+            <span class="amount">{{ model.cost }}</span>
+            <span v-if="model.savings" class="savings">省 {{ model.savings }}</span>
+          </div>
+          <div v-if="model.recommended" class="recommend-badge">推荐</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="recommendation-panel">
+      <div class="rec-header">
+        <span class="rec-icon">💡</span>
+        <span class="rec-title">优化建议</span>
+      </div>
+      <div class="rec-content">
+        <div v-for="(tip, index) in optimizationTips" :key="index" class="tip-item">
+          <span class="tip-num">{{ index + 1 }}</span>
+          <span class="tip-text">{{ tip }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const config = ref({
+  instanceType: 'medium',
+  quantity: 2,
+  dailyHours: 12,
+  monthlyDays: 22,
+  billingType: 'ondemand'
+})
+
+const instanceTypes = [
+  { value: 'small', label: '小型 (2核4G)' },
+  { value: 'medium', label: '中型 (4核8G)' },
+  { value: 'large', label: '大型 (8核16G)' },
+  { value: 'xlarge', label: '超大型 (16核32G)' }
+]
+
+const billingOptions = [
+  { value: 'ondemand', label: '按需付费', icon: '⚡', desc: '按实际使用时长计费，灵活性最高' },
+  { value: 'reserved', label: '预留实例', icon: '📅', desc: '预付费用换取更低单价，适合长期稳定负载' },
+  { value: 'spot', label: '抢占式', icon: '💰', desc: '利用闲置资源，价格极低但可能被回收' }
+]
+
+const hourlyRates = {
+  small: { ondemand: 0.05, reserved: 0.03, spot: 0.015 },
+  medium: { ondemand: 0.10, reserved: 0.06, spot: 0.03 },
+  large: { ondemand: 0.20, reserved: 0.12, spot: 0.06 },
+  xlarge: { ondemand: 0.40, reserved: 0.24, spot: 0.12 }
+}
+
+const costComparison = computed(() => {
+  const rate = hourlyRates[config.value.instanceType]
+  const monthlyHours = config.value.dailyHours * config.value.monthlyDays * config.value.quantity
+
+  const costs = [
+    { type: 'ondemand', label: '按需付费', rate: rate.ondemand },
+    { type: 'reserved', label: '预留实例', rate: rate.reserved },
+    { type: 'spot', label: '抢占式', rate: rate.spot }
+  ]
+
+  const maxCost = Math.max(...costs.map(c => c.rate * monthlyHours))
+
+  return costs.map(c => {
+    const cost = c.rate * monthlyHours
+    const percentage = (cost / maxCost) * 100
+    const isRecommended = c.type === config.value.billingType
+    const savings = c.type === 'ondemand' ? null :
+      Math.round(((rate.ondemand - c.rate) / rate.ondemand) * 100) + '%'
+
+    return {
+      type: c.type,
+      label: c.label,
+      cost: '$' + cost.toFixed(2) + '/月',
+      percentage,
+      recommended: isRecommended,
+      savings
+    }
+  })
+})
+
+const optimizationTips = computed(() => {
+  const tips = []
+
+  if (config.value.dailyHours < 8) {
+    tips.push('每日运行时间较短，考虑使用抢占式实例降低成本')
+  }
+
+  if (config.value.monthlyDays > 25) {
+    tips.push('月度运行天数接近全月，预留实例可节省 30-60% 成本')
+  }
+
+  if (config.value.quantity > 5) {
+    tips.push('实例数量较多，建议混合使用预留实例和按需实例')
+  }
+
+  if (config.value.billingType === 'ondemand' && config.value.monthlyDays > 20) {
+    tips.push('当前使用按需付费但负载稳定，切换预留实例可显著降低成本')
+  }
+
+  if (tips.length === 0) {
+    tips.push('当前配置较为合理，建议定期监控实际使用率进行优化')
+  }
+
+  return tips
+})
+</script>
+
+<style scoped>
+/* Add styles here */
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
new file mode 100644
index 0000000..e91a68c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
@@ -0,0 +1,511 @@
+<template>
+  <div class="security-services-demo">
+    <div class="demo-header">
+      <h4>安全服务架构配置器</h4>
+      <p class="demo-desc">选择您的业务场景，一键生成安全防护方案</p>
+    </div>
+
+    <div class="scenario-selector">
+      <div class="selector-title">选择业务场景</div>
+      <div class="scenario-cards">
+        <button
+          v-for="scenario in scenarios"
+          :key="scenario.id"
+          class="scenario-btn"
+          :class="{ active: selectedScenario === scenario.id }"
+          @click="selectScenario(scenario.id)"
+        >
+          <span class="scenario-icon">{{ scenario.icon }}</span>
+          <span class="scenario-name">{{ scenario.name }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="selectedScenarioData" class="security-architecture">
+      <div class="architecture-header">
+        <span class="header-icon">🏗️</span>
+        <span class="header-title">推荐安全架构</span>
+      </div>
+
+      <div class="architecture-layers">
+        <div class="layer edge-layer">
+          <div class="layer-title">
+            <span class="layer-icon">🌐</span>
+            边缘防护层
+          </div>
+          <div class="layer-services">
+            <div class="service-card">
+              <div class="service-header aws">
+                <span class="service-name">{{ selectedScenarioData.edge.aws }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.edge.awsFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+            <div class="vs-mini">VS</div>
+            <div class="service-card">
+              <div class="service-header aliyun">
+                <span class="service-name">{{ selectedScenarioData.edge.aliyun }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.edge.aliyunFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="layer application-layer">
+          <div class="layer-title">
+            <span class="layer-icon">🔐</span>
+            应用安全层
+          </div>
+          <div class="layer-services">
+            <div class="service-card">
+              <div class="service-header aws">
+                <span class="service-name">{{ selectedScenarioData.app.aws }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.app.awsFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+            <div class="vs-mini">VS</div>
+            <div class="service-card">
+              <div class="service-header aliyun">
+                <span class="service-name">{{ selectedScenarioData.app.aliyun }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.app.aliyunFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="layer data-layer">
+          <div class="layer-title">
+            <span class="layer-icon">🗝️</span>
+            数据安全层
+          </div>
+          <div class="layer-services">
+            <div class="service-card">
+              <div class="service-header aws">
+                <span class="service-name">{{ selectedScenarioData.data.aws }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.data.awsFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+            <div class="vs-mini">VS</div>
+            <div class="service-card">
+              <div class="service-header aliyun">
+                <span class="service-name">{{ selectedScenarioData.data.aliyun }}</span>
+              </div>
+              <div class="service-features">
+                <div v-for="(feat, idx) in selectedScenarioData.data.aliyunFeatures" :key="idx" class="feature">
+                  ✓ {{ feat }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="security-recommendations">
+        <div class="rec-title">💡 安全建议</div>
+        <div class="rec-list">
+          <div v-for="(rec, idx) in selectedScenarioData.recommendations" :key="idx" class="rec-item">
+            <span class="rec-num">{{ idx + 1 }}</span>
+            <span class="rec-text">{{ rec }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedScenario = ref('web')
+
+const scenarios = [
+  { id: 'web', name: 'Web 应用', icon: '🌐' },
+  { id: 'api', name: 'API 服务', icon: '🔌' },
+  { id: 'mobile', name: '移动应用', icon: '📱' },
+  { id: 'enterprise', name: '企业系统', icon: '🏢' }
+]
+
+const scenarioData = {
+  web: {
+    edge: {
+      aws: 'CloudFront + WAF',
+      aliyun: 'CDN + WAF',
+      awsFeatures: ['全球 400+ 边缘节点', 'DDoS 防护和 Bot 管理', '自动 SSL/TLS 加密'],
+      aliyunFeatures: ['国内 2800+ 节点', 'CC 攻击防护和防爬虫', 'HTTPS 证书一键部署']
+    },
+    app: {
+      aws: 'AWS WAF + Shield',
+      aliyun: 'Web 应用防火墙',
+      awsFeatures: ['SQL 注入和 XSS 防护', '速率限制和 IP 黑名单', '托管规则和自定义规则'],
+      aliyunFeatures: ['OWASP Top 10 防护', '敏感数据防泄漏', '智能 CC 防护策略']
+    },
+    data: {
+      aws: 'KMS + Secrets Manager',
+      aliyun: 'KMS + 凭据管家',
+      awsFeatures: ['AES-256 加密算法', '自动密钥轮换', '与 AWS 服务原生集成'],
+      aliyunFeatures: ['国密算法支持', '密钥版本管理', 'RAM 细粒度权限控制']
+    },
+    recommendations: [
+      '启用 HTTPS 强制跳转，配置 HSTS 头部',
+      '设置 WAF 规则防御 SQL 注入、XSS 等常见攻击',
+      '启用 CDN 缓存静态资源，减少源站压力',
+      '配置敏感数据加密存储，使用 KMS 管理密钥'
+    ]
+  },
+  api: {
+    edge: {
+      aws: 'API Gateway + WAF',
+      aliyun: 'API 网关 + WAF',
+      awsFeatures: ['API 版本管理和流量控制', '缓存和节流策略', '请求/响应转换'],
+      aliyunFeatures: ['API 发布和生命周期管理', '流量控制和访问频次限制', '参数校验和Mock 数据']
+    },
+    app: {
+      aws: 'Cognito + IAM',
+      aliyun: '应用身份服务 + RAM',
+      awsFeatures: ['OAuth 2.0 和 OpenID Connect', '用户池和身份池', 'MFA 多因素认证'],
+      aliyunFeatures: ['OIDC 和 SAML 协议支持', '企业 AD/LDAP 集成', '实人认证和设备指纹']
+    },
+    data: {
+      aws: 'KMS + Parameter Store',
+      aliyun: 'KMS + 应用配置管理',
+      awsFeatures: ['API 密钥加密存储', '配置参数版本管理', '与 CloudFormation 集成'],
+      aliyunFeatures: ['敏感配置加密', '配置灰度发布', '配置变更审计']
+    },
+    recommendations: [
+      '实施 API 认证鉴权，使用 OAuth 2.0 或 API Key',
+      '配置 API 网关的速率限制，防止暴力破解',
+      '对敏感 API 实施 IP 白名单限制',
+      '加密存储 API 密钥和敏感配置'
+    ]
+  },
+  mobile: {
+    edge: {
+      aws: 'CloudFront + WAF',
+      aliyun: 'CDN + WAF',
+      awsFeatures: ['移动网络优化', 'HTTP/2 和 QUIC 支持', '智能压缩和图像优化'],
+      aliyunFeatures: ['移动加速方案', '弱网环境优化', '自适应码率调整']
+    },
+    app: {
+      aws: 'Cognito + Device Farm',
+      aliyun: '应用身份服务 + 移动测试',
+      awsFeatures: ['设备指纹识别', '设备风险评估', '越狱/Root 检测'],
+      aliyunFeatures: ['设备可信认证', '作弊设备识别', '安全键盘输入']
+    },
+    data: {
+      aws: 'KMS + S3',
+      aliyun: 'KMS + OSS',
+      awsFeatures: ['移动端数据加密', '本地缓存加密', '密钥安全存储'],
+      aliyunFeatures: ['国密 SM4 支持', '本地数据库加密', '密钥白盒保护']
+    },
+    recommendations: [
+      '实施设备绑定和设备指纹识别',
+      '检测越狱/Root 设备并限制访问',
+      '本地敏感数据加密存储',
+      '使用 HTTPS 证书绑定防止中间人攻击'
+    ]
+  },
+  enterprise: {
+    edge: {
+      aws: 'CloudFront + WAF + Shield Advanced',
+      aliyun: 'CDN + WAF + DDoS 高防',
+      awsFeatures: ['DDoS 攻击自动缓解', '24/7 DRT 团队支持', '成本保护保障'],
+      aliyunFeatures: ['T 级 DDoS 防护能力', 'CC 攻击智能清洗', '专家应急响应']
+    },
+    app: {
+      aws: 'IAM + SSO + Directory Service',
+      aliyun: 'RAM + IDaaS + 云 SSO',
+      awsFeatures: ['与企业 AD 集成', '单点登录 SSO', '临时凭证和权限边界'],
+      aliyunFeatures: ['LDAP/AD 目录同步', 'SaaS 应用集成', '细粒度权限管控']
+    },
+    data: {
+      aws: 'KMS + CloudHSM + Macie',
+      aliyun: 'KMS + 加密服务 + 敏感数据保护',
+      awsFeatures: ['FIPS 140-2 Level 3 HSM', '自动敏感数据发现', '密钥分级管理'],
+      aliyunFeatures: ['国密局认证 HSM', '敏感数据自动识别', '合规审计报告']
+    },
+    recommendations: [
+      '部署 DDoS 高防和 WAF 多层防护',
+      '实施统一身份管理和 SSO 单点登录',
+      '启用数据加密和敏感数据保护',
+      '建立安全审计和合规监控体系'
+    ]
+  }
+}
+
+const selectScenario = (id) => {
+  selectedScenario.value = id
+}
+
+const currentScenario = computed(() => scenarioData[selectedScenario.value])
+</script>
+
+<style scoped>
+.network-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.scenario-selector {
+  margin-bottom: 20px;
+}
+
+.selector-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+}
+
+.scenario-cards {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.scenario-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e6f1ff;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.scenario-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.scenario-btn.active {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  border-color: transparent;
+  color: #fff;
+}
+
+.scenario-icon {
+  font-size: 1rem;
+}
+
+.security-architecture {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.architecture-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.header-icon {
+  font-size: 1.25rem;
+}
+
+.header-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #e6f1ff;
+}
+
+.architecture-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.layer {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.layer-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+}
+
+.layer-icon {
+  font-size: 1.25rem;
+}
+
+.layer-services {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+.service-card {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.service-header {
+  padding: 10px 12px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.service-header.aws {
+  background: rgba(255, 153, 0, 0.2);
+  color: #ff9900;
+}
+
+.service-header.aliyun {
+  background: rgba(255, 106, 0, 0.2);
+  color: #ff6a00;
+}
+
+.service-features {
+  padding: 12px;
+}
+
+.feature {
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.feature:last-child {
+  border-bottom: none;
+}
+
+.vs-mini {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  color: #fff;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  font-size: 0.625rem;
+  font-weight: 700;
+  align-self: center;
+}
+
+.security-recommendations {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rec-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #00d4ff;
+  margin-bottom: 12px;
+}
+
+.rec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rec-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 10px 12px;
+  border-radius: 8px;
+  border-left: 3px solid #00d4ff;
+}
+
+.rec-num {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  color: #fff;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.rec-text {
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .scenario-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .layer-services {
+    grid-template-columns: 1fr;
+  }
+
+  .vs-mini {
+    display: none;
+  }
+
+  .config-content {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
new file mode 100644
index 0000000..5b2d357
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="service-selection-demo">
+    <div class="demo-header">
+      <h4>云服务选型决策树</h4>
+      <p class="demo-desc">回答几个简单问题，获取最适合您的云服务方案</p>
+    </div>
+
+    <div v-if="!result" class="decision-flow">
+      <div class="progress-bar">
+        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+      </div>
+
+      <div class="question-card">
+        <div class="question-number">问题 {{ currentStep + 1 }}/{{ questions.length }}</div>
+        <h5 class="question-text">{{ currentQuestion.text }}</h5>
+
+        <div class="options-list">
+          <button
+            v-for="option in currentQuestion.options"
+            :key="option.value"
+            class="option-btn"
+            @click="selectOption(option)"
+          >
+            <span class="option-icon">{{ option.icon }}</span>
+            <span class="option-text">{{ option.text }}</span>
+            <span class="option-desc">{{ option.desc }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="result-panel">
+      <div class="result-header">
+        <span class="result-icon">🎯</span>
+        <h5>推荐方案</h5>
+      </div>
+
+      <div class="recommendation-cards">
+        <div class="rec-card primary">
+          <div class="rec-badge">最佳匹配</div>
+          <div class="rec-icon">{{ result.primary.icon }}</div>
+          <div class="rec-title">{{ result.primary.name }}</div>
+          <div class="rec-services">
+            <span class="service aws">{{ result.primary.aws }}</span>
+            <span class="vs">vs</span>
+            <span class="service aliyun">{{ result.primary.aliyun }}</span>
+          </div>
+          <div class="rec-reason">{{ result.primary.reason }}</div>
+        </div>
+
+        <div class="rec-card secondary">
+          <div class="rec-badge alt">备选</div>
+          <div class="rec-icon">{{ result.secondary.icon }}</div>
+          <div class="rec-title">{{ result.secondary.name }}</div>
+          <div class="rec-services">
+            <span class="service aws">{{ result.secondary.aws }}</span>
+            <span class="vs">vs</span>
+            <span class="service aliyun">{{ result.secondary.aliyun }}</span>
+          </div>
+          <div class="rec-reason">{{ result.secondary.reason }}</div>
+        </div>
+      </div>
+
+      <div class="result-actions">
+        <button class="restart-btn" @click="restart">
+          <span>↺</span> 重新测试
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentStep = ref(0)
+const answers = ref([])
+
+const questions = [
+  {
+    text: '您的应用主要面向哪个地区？',
+    options: [
+      { value: 'global', icon: '🌍', text: '全球用户', desc: '需要覆盖多个国家和地区' },
+      { value: 'china', icon: '🇨🇳', text: '中国大陆', desc: '主要服务国内用户' },
+      { value: 'asia', icon: '🌏', text: '亚太区域', desc: '覆盖亚洲及太平洋地区' },
+      { value: 'us', icon: '🇺🇸', text: '北美/欧洲', desc: '主要服务欧美用户' }
+    ]
+  },
+  {
+    text: '您的应用对计算资源的需求如何？',
+    options: [
+      { value: 'serverless', icon: '⚡', text: '事件驱动/无服务器', desc: '按需运行，流量波动大' },
+      { value: 'webapp', icon: '🌐', text: 'Web 应用服务', desc: '需要 24/7 在线运行' },
+      { value: 'batch', icon: '📊', text: '批处理/计算任务', desc: '定时或按需批量执行' },
+      { value: 'hpc', icon: '🔬', text: '高性能计算', desc: '需要 GPU 或大规模集群' }
+    ]
+  },
+  {
+    text: '您对成本优化的优先级是？',
+    options: [
+      { value: 'lowest', icon: '💰', text: '极致成本优化', desc: '可以接受复杂配置换取最低价' },
+      { value: 'balanced', icon: '⚖️', text: '平衡型', desc: '在成本和易用性间找平衡' },
+      { value: 'stable', icon: '📈', text: '成本可预测', desc: '偏好固定成本，方便预算' },
+      { value: 'premium', icon: '💎', text: '性能优先', desc: '成本次之，追求最佳性能' }
+    ]
+  },
+  {
+    text: '您的数据存储需求主要是？',
+    options: [
+      { value: 'object', icon: '📦', text: '对象存储（文件/图片/视频）', desc: '海量非结构化数据' },
+      { value: 'database', icon: '🗄️', text: '数据库存储', desc: '结构化数据和事务处理' },
+      { value: 'cache', icon: '⚡', text: '缓存/会话存储', desc: '高性能临时数据存储' },
+      { value: 'mixed', icon: '🔀', text: '混合存储', desc: '多种存储类型组合' }
+    ]
+  }
+]
+
+const progress = computed(() => {
+  return ((currentStep.value + 1) / questions.length) * 100
+})
+
+const currentQuestion = computed(() => {
+  return questions[currentStep.value]
+})
+
+const selectOption = (option) => {
+  answers.value.push(option.value)
+  if (currentStep.value < questions.length - 1) {
+    currentStep.value++
+  }
+}
+
+const result = computed(() => {
+  if (answers.value.length < 4) return null
+
+  const [region, compute, cost, storage] = answers.value
+
+  // 计算推荐
+  let primary, secondary
+
+  if (compute === 'serverless') {
+    primary = {
+      icon: '⚡',
+      name: '无服务器架构',
+      aws: 'AWS Lambda + API Gateway',
+      aliyun: '函数计算 + API 网关',
+      reason: '事件驱动场景下，按调用计费，无需预置服务器资源'
+    }
+    secondary = {
+      icon: '🔲',
+      name: '容器服务',
+      aws: 'AWS Fargate',
+      aliyun: 'Serverless Kubernetes',
+      reason: '需要长时间运行但需要灵活扩缩容的场景'
+    }
+  } else if (compute === 'hpc') {
+    primary = {
+      icon: '🔬',
+      name: '高性能计算集群',
+      aws: 'AWS ParallelCluster',
+      aliyun: 'E-HPC + 超级计算集群',
+      reason: 'GPU 实例和高速互联网络，满足科学计算和 AI 训练需求'
+    }
+    secondary = {
+      icon: '⚡',
+      name: '弹性裸金属',
+      aws: 'EC2 Bare Metal',
+      aliyun: '弹性裸金属服务器',
+      reason: '需要物理机性能但希望云化管理的场景'
+    }
+  } else if (cost === 'lowest') {
+    primary = {
+      icon: '💰',
+      name: '抢占式实例',
+      aws: 'EC2 Spot Instances',
+      aliyun: '抢占式实例',
+      reason: '价格最低至按需实例的 10%，适合容错性高的批处理任务'
+    }
+    secondary = {
+      icon: '📅',
+      name: '预留实例',
+      aws: 'Reserved Instances',
+      aliyun: '包年包月',
+      reason: '长期稳定负载选择预留实例，可节省 30-60% 成本'
+    }
+  } else {
+    primary = {
+      icon: '☁️',
+      name: '云服务器 ECS',
+      aws: 'Amazon EC2',
+      aliyun: 'ECS 云服务器',
+      reason: '最通用的计算服务，支持多种计费模式和实例规格，生态完善'
+    }
+    secondary = {
+      icon: '📦',
+      name: '容器实例',
+      aws: 'AWS Fargate',
+      aliyun: 'ECI 容器实例',
+      reason: '无需管理服务器，直接运行容器，适合微服务架构'
+    }
+  }
+
+  return { primary, secondary }
+})
+
+const restart = () => {
+  currentStep.value = 0
+  answers.value = []
+}
+</script>
+
+<style scoped>
+/* Add styles here */
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
new file mode 100644
index 0000000..2f3c511
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="storage-services-demo">
+    <div class="demo-header">
+      <h4>存储服务选型助手</h4>
+      <p class="demo-desc">根据您的使用场景，推荐最适合的存储方案</p>
+    </div>
+
+    <div class="scenario-selector">
+      <div class="selector-title">选择您的主要使用场景：</div>
+      <div class="scenario-grid">
+        <button
+          v-for="scenario in scenarios"
+          :key="scenario.id"
+          class="scenario-card"
+          :class="{ active: selectedScenario === scenario.id }"
+          @click="selectScenario(scenario.id)"
+        >
+          <div class="scenario-icon">{{ scenario.icon }}</div>
+          <div class="scenario-name">{{ scenario.name }}</div>
+          <div class="scenario-desc">{{ scenario.shortDesc }}</div>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="selectedScenario" class="recommendation-result">
+      <div class="result-header">
+        <span class="result-icon">🎯</span>
+        <span class="result-title">推荐方案</span>
+      </div>
+
+      <div class="storage-comparison">
+        <div class="provider-card aws">
+          <div class="provider-header">
+            <div class="provider-logo">AWS</div>
+            <div class="provider-service">{{ currentScenario.awsService }}</div>
+          </div>
+          <div class="provider-features">
+            <div v-for="(feature, idx) in currentScenario.awsFeatures" :key="idx" class="feature-item">
+              <span class="check">✓</span>
+              <span>{{ feature }}</span>
+            </div>
+          </div>
+          <div class="provider-pricing">
+            <div class="price-label">定价模式</div>
+            <div class="price-value">{{ currentScenario.awsPricing }}</div>
+          </div>
+        </div>
+
+        <div class="vs-divider">
+          <div class="vs-line"></div>
+          <div class="vs-badge">VS</div>
+          <div class="vs-line"></div>
+        </div>
+
+        <div class="provider-card aliyun">
+          <div class="provider-header">
+            <div class="provider-logo aliyun-logo">阿里云</div>
+            <div class="provider-service">{{ currentScenario.aliyunService }}</div>
+          </div>
+          <div class="provider-features">
+            <div v-for="(feature, idx) in currentScenario.aliyunFeatures" :key="idx" class="feature-item">
+              <span class="check aliyun-check">✓</span>
+              <span>{{ feature }}</span>
+            </div>
+          </div>
+          <div class="provider-pricing">
+            <div class="price-label">定价模式</div>
+            <div class="price-value">{{ currentScenario.aliyunPricing }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="decision-guide">
+        <div class="guide-title">🤔 如何选择？</div>
+        <div class="guide-content">
+          <div class="guide-item">
+            <div class="guide-condition">选择 AWS 如果：</div>
+            <div class="guide-reason">{{ currentScenario.chooseAwsWhen }}</div>
+          </div>
+          <div class="guide-item">
+            <div class="guide-condition">选择阿里云如果：</div>
+            <div class="guide-reason">{{ currentScenario.chooseAliyunWhen }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedScenario = ref(null)
+
+const scenarios = [
+  {
+    id: 'website',
+    name: '静态网站托管',
+    icon: '🌐',
+    shortDesc: '托管 HTML/CSS/JS 等静态资源',
+    awsService: 'Amazon S3 + CloudFront',
+    aliyunService: 'OSS + CDN',
+    awsFeatures: [
+      '全球 400+ 边缘节点加速',
+      '自动压缩和 HTTP/2 支持',
+      '与 Route 53 无缝集成',
+      '支持静态网站托管配置'
+    ],
+    aliyunFeatures: [
+      '国内 2800+ 节点覆盖',
+      '智能压缩和 QUIC 协议支持',
+      '与万网域名一键绑定',
+      '实时日志分析和监控'
+    ],
+    awsPricing: '存储 $0.023/GB/月 + 流量 $0.085-0.12/GB',
+    aliyunPricing: '存储 ¥0.12/GB/月 + 流量 ¥0.24-0.80/GB',
+    chooseAwsWhen: '用户主要在海外，需要全球加速，或已使用 AWS 其他服务',
+    chooseAliyunWhen: '用户主要在中国大陆，需要备案支持，追求国内访问速度'
+  },
+  {
+    id: 'database',
+    name: '数据库存储',
+    icon: '🗄️',
+    shortDesc: '关系型和非关系型数据库',
+    awsService: 'Amazon RDS/Aurora',
+    aliyunService: 'RDS/PolarDB',
+    awsFeatures: [
+      'Aurora 性能是 MySQL 的 5 倍',
+      '自动故障转移和读副本',
+      '支持 6 种数据库引擎',
+      'Serverless 自动扩缩容'
+    ],
+    aliyunFeatures: [
+      'PolarDB 计算存储分离架构',
+      '一写多读，读写分离',
+      '秒级备份和恢复',
+      'Oracle 语法兼容模式'
+    ],
+    awsPricing: '按需 $0.017-0.68/小时，预留可省 40-60%',
+    aliyunPricing: '按量 ¥0.12-4.8/小时，包年包月更优惠',
+    chooseAwsWhen: '需要 Aurora 的高性能，或有多种数据库引擎需求',
+    chooseAliyunWhen: '需要 Oracle 兼容，或追求性价比和本地化支持'
+  },
+  {
+    id: 'backup',
+    name: '备份与归档',
+    icon: '💾',
+    shortDesc: '冷数据和长期归档存储',
+    awsService: 'Amazon S3 Glacier',
+    aliyunService: 'OSS 归档存储',
+    awsFeatures: [
+      'Glacier Deep Archive  cheapest',
+      '检索时间从分钟到小时可选',
+      'S3 生命周期策略自动迁移',
+      'WORM 合规保留策略'
+    ],
+    aliyunFeatures: [
+      '归档存储单价行业最低',
+      '解冻时间可配置',
+      '跨地域冗余存储',
+      '符合国内合规要求'
+    ],
+    awsPricing: 'Glacier $0.004/GB/月，Deep Archive $0.00099/GB/月',
+    aliyunPricing: '归档存储 ¥0.033/GB/月，冷归档更低',
+    chooseAwsWhen: '需要 Deep Archive 超低成本，或有复杂生命周期策略',
+    chooseAliyunWhen: '数据需在国内归档，或追求极致性价比'
+  },
+  {
+    id: 'media',
+    name: '媒体处理',
+    icon: '🎬',
+    shortDesc: '音视频存储和分发',
+    awsService: 'S3 + Elemental',
+    aliyunService: 'OSS + 媒体处理',
+    awsFeatures: [
+      'Elemental 专业级视频处理',
+      'MediaConvert 格式转码',
+      'MediaLive 直播流处理',
+      'CloudFront 低延迟分发'
+    ],
+    aliyunFeatures: [
+      '视频截帧、转码、水印',
+      '智能封面和内容审核',
+      '直播录制和时移回看',
+      'CDN 全球加速分发'
+    ],
+    awsPricing: '按使用量计费，转码 $0.007-0.1/分钟',
+    aliyunPricing: '按量计费，转码 ¥0.03-0.5/分钟',
+    chooseAwsWhen: '需要广播级专业处理，或全球直播分发',
+    chooseAliyunWhen: '需要智能内容审核，或国内视频处理'
+  }
+]
+
+const selectScenario = (id) => {
+  selectedScenario.value = id
+}
+
+const currentScenario = computed(() => {
+  return scenarios.find(s => s.id === selectedScenario.value)
+})
+</script>
+
+<style scoped>
+.storage-services-demo {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 12px;
+  padding: 24px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-desc {
+  margin: 0;
+  color: #8892b0;
+  font-size: 0.875rem;
+}
+
+.scenario-selector {
+  margin-bottom: 24px;
+}
+
+.selector-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+}
+
+.scenario-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.scenario-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 16px;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.scenario-card:hover {
+  background: rgba(255, 255, 255, 0.06);
+  transform: translateY(-2px);
+}
+
+.scenario-card.active {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 44, 191, 0.15));
+  border-color: rgba(0, 212, 255, 0.3);
+}
+
+.scenario-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+}
+
+.scenario-name {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: #e6f1ff;
+  margin-bottom: 4px;
+}
+
+.scenario-desc {
+  font-size: 0.75rem;
+  color: #8892b0;
+}
+
+.recommendation-result {
+  animation: slideUp 0.4s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.result-icon {
+  font-size: 1.25rem;
+}
+
+.result-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #e6f1ff;
+}
+
+.storage-comparison {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.provider-card {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.provider-card.aws {
+  border-top: 3px solid #ff9900;
+}
+
+.provider-card.aliyun {
+  border-top: 3px solid #ff6a00;
+}
+
+.provider-header {
+  text-align: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.provider-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #ff9900;
+}
+
+.provider-logo.aliyun-logo {
+  color: #ff6a00;
+}
+
+.provider-service {
+  font-size: 0.8125rem;
+  color: #8892b0;
+  margin-top: 4px;
+}
+
+.provider-features {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  line-height: 1.4;
+}
+
+.check {
+  color: #ff9900;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.aliyun-check {
+  color: #ff6a00;
+}
+
+.provider-pricing {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.price-label {
+  font-size: 0.75rem;
+  color: #8892b0;
+  margin-bottom: 4px;
+}
+
+.price-value {
+  font-size: 0.8125rem;
+  color: #e6f1ff;
+  font-weight: 500;
+}
+
+.vs-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.vs-line {
+  width: 1px;
+  flex: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.vs-badge {
+  background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+  color: #fff;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.75rem;
+}
+
+.decision-guide {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.guide-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #e6f1ff;
+  margin-bottom: 12px;
+}
+
+.guide-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.guide-item {
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  border-left: 3px solid #00d4ff;
+}
+
+.guide-condition {
+  font-size: 0.8125rem;
+  color: #00d4ff;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.guide-reason {
+  font-size: 0.875rem;
+  color: #e6f1ff;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .scenario-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .storage-comparison {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .vs-divider {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
new file mode 100644
index 0000000..b546b97
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        访问分析演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('访问分析演示')
+const description = ref('展示CDN和对象存储的访问统计分析，包括流量、带宽、访问热点等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
new file mode 100644
index 0000000..5894f0d
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        缓存策略演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('缓存策略演示')
+const description = ref('展示CDN和对象存储的缓存策略配置，包括缓存时间、刷新机制等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
new file mode 100644
index 0000000..f1983c9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
@@ -0,0 +1,696 @@
+<!--
+  CdnAccelerationDemo.vue
+  CDN 加速原理演示 - 展示边缘节点、源站、回源等概念
+-->
+<template>
+  <div class="cdn-acceleration-demo">
+    <div class="header">
+      <div class="title">CDN 加速原理</div>
+      <div class="subtitle">边缘节点、源站与回源的协同工作</div>
+    </div>
+
+    <div class="cdn-architecture">
+      <!-- 用户层 -->
+      <div class="layer users-layer">
+        <div class="layer-title">
+          <span class="icon">👥</span>
+          <span>全球用户</span>
+        </div>
+        <div class="users-map">
+          <div
+            v-for="user in users"
+            :key="user.id"
+            class="user-marker"
+            :class="{ active: activeUser === user.id, requesting: requestingUser === user.id }"
+            :style="{ left: user.x + '%', top: user.y + '%' }"
+            @click="selectUser(user)"
+          >
+            <div class="user-icon">{{ user.icon }}</div>
+            <div class="user-label">{{ user.name }}</div>
+          </div>
+
+          <!-- 请求动画线 -->
+          <div v-if="requestAnimation" class="request-line" :style="requestLineStyle"></div>
+        </div>
+      </div>
+
+      <!-- 边缘节点层 -->
+      <div class="layer edge-layer">
+        <div class="layer-title">
+          <span class="icon">🌐</span>
+          <span>CDN 边缘节点 (Edge Nodes)</span>
+          <span class="layer-status" :class="{ hit: cacheHit, miss: !cacheHit && showCacheStatus }">
+            {{ cacheStatusText }}
+          </span>
+        </div>
+
+        <div class="edge-nodes">
+          <div
+            v-for="node in edgeNodes"
+            :key="node.id"
+            class="edge-node"
+            :class="{ active: activeNode === node.id, serving: servingNode === node.id }"
+            @click="selectNode(node)"
+          >
+            <div class="node-icon">{{ node.icon }}</div>
+            <div class="node-info">
+              <div class="node-name">{{ node.name }}</div>
+              <div class="node-location">{{ node.location }}</div>
+            </div>
+            <div class="node-stats">
+              <div class="stat">
+                <span class="stat-label">缓存</span>
+                <span class="stat-value">{{ node.cacheSize }}</span>
+              </div>
+              <div class="stat">
+                <span class="stat-label">命中</span>
+                <span class="stat-value" :style="{ color: node.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+                  {{ node.hitRate }}%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 源站层 -->
+      <div class="layer origin-layer">
+        <div class="layer-title">
+          <span class="icon">🏢</span>
+          <span>源站 (Origin Server)</span>
+          <span class="layer-status" :class="{ active: showBackToSource }">
+            {{ backToSourceText }}
+          </span>
+        </div>
+
+        <div class="origin-servers">
+          <div class="origin-server">
+            <div class="server-icon">🗄️</div>
+            <div class="server-info">
+              <div class="server-name">对象存储源站</div>
+              <div class="server-address">bucket.oss-cn-beijing.aliyuncs.com</div>
+            </div>
+            <div class="server-status">
+              <span class="status-dot active"></span>
+              <span class="status-text">健康</span>
+            </div>
+          </div>
+
+          <div v-if="showBackToSource" class="back-to-source-flow">
+            <div class="flow-arrow">
+              <span>⬆️ 回源请求</span>
+            </div>
+            <div class="flow-detail">
+              <div class="flow-step">1. CDN 节点未命中缓存</div>
+              <div class="flow-step">2. 向源站发起回源请求</div>
+              <div class="flow-step">3. 源站返回文件内容</div>
+              <div class="flow-step">4. CDN 缓存并响应用户</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 交互控制区 -->
+    <div class="demo-controls">
+      <div class="controls-title">🎮 模拟演示</div>
+      <div class="controls-row">
+        <button class="control-btn" @click="simulateCacheHit">
+          <span>✅</span>
+          <span>模拟缓存命中</span>
+        </button>
+        <button class="control-btn" @click="simulateCacheMiss">
+          <span>❌</span>
+          <span>模拟缓存未命中（回源）</span>
+        </button>
+        <button class="control-btn reset" @click="resetDemo">
+          <span>🔄</span>
+          <span>重置</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="stats-panel">
+      <div class="stats-title">📊 访问统计</div>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value" :style="{ color: '#22c55e' }">{{ stats.cacheHit }}</div>
+          <div class="stat-label">缓存命中</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" :style="{ color: '#ef4444' }">{{ stats.cacheMiss }}</div>
+          <div class="stat-label">缓存未命中</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+            {{ stats.hitRate }}%
+          </div>
+          <div class="stat-label">命中率</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" :style="{ color: '#3b82f6' }">{{ stats.avgResponseTime }}ms</div>
+          <div class="stat-label">平均响应</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+
+// 用户数据
+const users = [
+  { id: 'user1', name: '北京用户', icon: '👤', x: 75, y: 35 },
+  { id: 'user2', name: '上海用户', icon: '👤', x: 80, y: 55 },
+  { id: 'user3', name: '广州用户', icon: '👤', x: 70, y: 75 },
+  { id: 'user4', name: '成都用户', icon: '👤', x: 50, y: 60 },
+  { id: 'user5', name: '海外用户', icon: '👤', x: 90, y: 25 }
+]
+
+// 边缘节点数据
+const edgeNodes = [
+  { id: 'node1', name: '北京节点', icon: '🌐', location: '华北', cacheSize: '2.5 TB', hitRate: 92 },
+  { id: 'node2', name: '上海节点', icon: '🌐', location: '华东', cacheSize: '3.1 TB', hitRate: 89 },
+  { id: 'node3', name: '广州节点', icon: '🌐', location: '华南', cacheSize: '1.8 TB', hitRate: 87 },
+  { id: 'node4', name: '成都节点', icon: '🌐', location: '西南', cacheSize: '1.2 TB', hitRate: 85 }
+]
+
+// 状态
+const activeUser = ref(null)
+const requestingUser = ref(null)
+const activeNode = ref(null)
+const servingNode = ref(null)
+const cacheHit = ref(false)
+const showCacheStatus = ref(false)
+const showBackToSource = ref(false)
+const requestAnimation = ref(false)
+
+// 统计
+const stats = reactive({
+  cacheHit: 0,
+  cacheMiss: 0,
+  hitRate: 0,
+  avgResponseTime: 0
+})
+
+// 计算属性
+const requestLineStyle = computed(() => {
+  if (!activeUser.value || !activeNode.value) return {}
+  // 这里简化处理，实际应该计算从用户到节点的线
+  return {}
+})
+
+const cacheStatusText = computed(() => {
+  if (!showCacheStatus.value) return ''
+  return cacheHit.value ? '✅ 缓存命中' : '❌ 未命中'
+})
+
+const backToSourceText = computed(() => {
+  if (!showBackToSource.value) return ''
+  return '📥 回源中...'
+})
+
+// 方法
+const selectUser = (user) => {
+  activeUser.value = user.id
+}
+
+const selectNode = (node) => {
+  activeNode.value = node.id
+}
+
+const simulateCacheHit = () => {
+  resetDemo()
+  stats.cacheHit++
+  updateStats()
+
+  // 模拟缓存命中流程
+  activeUser.value = 'user1'
+  requestingUser.value = 'user1'
+  activeNode.value = 'node1'
+  servingNode.value = 'node1'
+
+  setTimeout(() => {
+    showCacheStatus.value = true
+    cacheHit.value = true
+  }, 500)
+}
+
+const simulateCacheMiss = () => {
+  resetDemo()
+  stats.cacheMiss++
+  updateStats()
+
+  // 模拟缓存未命中（回源）流程
+  activeUser.value = 'user3'
+  requestingUser.value = 'user3'
+  activeNode.value = 'node3'
+  servingNode.value = 'node3'
+
+  setTimeout(() => {
+    showCacheStatus.value = true
+    cacheHit.value = false
+    showBackToSource.value = true
+  }, 500)
+}
+
+const updateStats = () => {
+  const total = stats.cacheHit + stats.cacheMiss
+  stats.hitRate = total > 0 ? Math.round((stats.cacheHit / total) * 100) : 0
+  // 模拟平均响应时间：命中约 20ms，未命中约 200ms
+  stats.avgResponseTime = total > 0
+    ? Math.round((stats.cacheHit * 20 + stats.cacheMiss * 200) / total)
+    : 0
+}
+
+const resetDemo = () => {
+  activeUser.value = null
+  requestingUser.value = null
+  activeNode.value = null
+  servingNode.value = null
+  cacheHit.value = false
+  showCacheStatus.value = false
+  showBackToSource.value = false
+  requestAnimation.value = false
+}
+</script>
+
+<style scoped>
+.cdn-acceleration-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.cdn-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.layer {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.layer-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.layer-title .icon {
+  font-size: 1.2rem;
+}
+
+.layer-status {
+  margin-left: auto;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.layer-status.hit {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.layer-status.miss {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.layer-status.active {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* 用户层 */
+.users-map {
+  position: relative;
+  height: 120px;
+  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  border-radius: 8px;
+  border: 1px solid #bae6fd;
+  overflow: hidden;
+}
+
+.user-marker {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  transform: translate(-50%, -50%);
+}
+
+.user-marker:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.user-marker.active {
+  z-index: 10;
+}
+
+.user-marker.requesting .user-icon {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+}
+
+.user-icon {
+  font-size: 1.5rem;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.user-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: #0369a1;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+
+/* 边缘节点层 */
+.edge-nodes {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 640px) {
+  .edge-nodes {
+    grid-template-columns: 1fr;
+  }
+}
+
+.edge-node {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.edge-node:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-1px);
+}
+
+.edge-node.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.edge-node.serving {
+  animation: servingPulse 1s ease-in-out;
+}
+
+@keyframes servingPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
+}
+
+.node-icon {
+  font-size: 1.5rem;
+}
+
+.node-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.node-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.node-location {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.node-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.7rem;
+  min-width: 60px;
+}
+
+.stat {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.stat-label {
+  color: var(--vp-c-text-2);
+}
+
+.stat-value {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+/* 源站层 */
+.origin-servers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.origin-server {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+}
+
+.server-icon {
+  font-size: 1.75rem;
+}
+
+.server-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.server-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: #92400e;
+}
+
+.server-address {
+  font-size: 0.75rem;
+  color: #b45309;
+  font-family: var(--vp-font-family-mono);
+}
+
+.server-status {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #15803d;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+  animation: statusPulse 2s infinite;
+}
+
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.back-to-source-flow {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-top: 0.5rem;
+}
+
+.flow-arrow {
+  text-align: center;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #dc2626;
+  margin-bottom: 0.5rem;
+}
+
+.flow-detail {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .flow-detail {
+    grid-template-columns: 1fr;
+  }
+}
+
+.flow-step {
+  font-size: 0.75rem;
+  color: #991b1b;
+  background: white;
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  border-left: 3px solid #dc2626;
+}
+
+/* 控制区 */
+.demo-controls {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-top: 1.5rem;
+}
+
+.controls-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.controls-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-btn:hover {
+  background: var(--vp-c-bg-mute);
+  border-color: var(--vp-c-brand);
+}
+
+.control-btn.reset {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #dc2626;
+}
+
+.control-btn.reset:hover {
+  background: #fee2e2;
+}
+
+/* 统计面板 */
+.stats-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.stats-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.stat-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
new file mode 100644
index 0000000..423a5c2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        边缘节点分布演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('边缘节点分布演示')
+const description = ref('展示CDN边缘节点在全球的分布情况和调度策略')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
new file mode 100644
index 0000000..a9c4d57
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        HTTPS优化演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('HTTPS优化演示')
+const description = ref('展示CDN的HTTPS优化技术，包括TLS握手优化、证书管理、HSTS等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
new file mode 100644
index 0000000..38ca274
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
@@ -0,0 +1,590 @@
+<!--
+  ObjectStorageDemo.vue
+  对象存储架构演示 - 展示桶、对象、元数据的核心概念
+-->
+<template>
+  <div class="object-storage-demo">
+    <div class="header">
+      <div class="title">对象存储架构</div>
+      <div class="subtitle">理解 Bucket、Object 和 Metadata 的关系</div>
+    </div>
+
+    <div class="storage-architecture">
+      <!-- 账户层 -->
+      <div class="account-layer">
+        <div class="account-icon">👤</div>
+        <div class="account-name">云账户 (Account)</div>
+        <div class="account-desc">管理权限、计费、全局配置</div>
+      </div>
+
+      <div class="connector">▼</div>
+
+      <!-- 桶层 -->
+      <div class="buckets-container">
+        <div class="section-title">
+          <span>📦</span>
+          <span>存储桶 (Buckets)</span>
+          <span class="section-desc">命名空间隔离，权限控制</span>
+        </div>
+
+        <div class="buckets-row">
+          <div
+            v-for="bucket in buckets"
+            :key="bucket.name"
+            class="bucket-card"
+            :class="{ active: selectedBucket === bucket.name }"
+            @click="selectBucket(bucket.name)"
+          >
+            <div class="bucket-icon">{{ bucket.icon }}</div>
+            <div class="bucket-name">{{ bucket.name }}</div>
+            <div class="bucket-meta">{{ bucket.objects }} 对象</div>
+            <div class="bucket-size">{{ bucket.size }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="connector">▼</div>
+
+      <!-- 对象层 -->
+      <div class="objects-container">
+        <div class="section-title">
+          <span>📄</span>
+          <span>对象 (Objects)</span>
+          <span class="section-desc">文件数据 + 元数据</span>
+        </div>
+
+        <div v-if="selectedBucket" class="objects-list">
+          <div
+            v-for="obj in currentObjects"
+            :key="obj.key"
+            class="object-item"
+            :class="{ selected: selectedObject === obj.key }"
+            @click="selectObject(obj)"
+          >
+            <div class="object-icon">{{ getFileIcon(obj.type) }}</div>
+            <div class="object-info">
+              <div class="object-key">{{ obj.key }}</div>
+              <div class="object-meta">{{ obj.size }} · {{ obj.lastModified }}</div>
+            </div>
+            <div class="object-arrow">▶</div>
+          </div>
+        </div>
+
+        <div v-else class="objects-placeholder">
+          点击上方存储桶查看对象列表
+        </div>
+      </div>
+
+      <div class="connector">▼</div>
+
+      <!-- 元数据层 -->
+      <div class="metadata-container">
+        <div class="section-title">
+          <span>🏷️</span>
+          <span>元数据 (Metadata)</span>
+          <span class="section-desc">系统元数据 + 自定义元数据</span>
+        </div>
+
+        <div v-if="selectedObject && currentMetadata" class="metadata-content">
+          <div class="metadata-section">
+            <div class="metadata-section-title">系统元数据 (System)</div>
+            <div class="metadata-list">
+              <div v-for="(value, key) in currentMetadata.system" :key="key" class="metadata-item">
+                <span class="metadata-key">{{ key }}:</span>
+                <span class="metadata-value">{{ value }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="metadata-section">
+            <div class="metadata-section-title">自定义元数据 (Custom)</div>
+            <div class="metadata-list">
+              <div v-for="(value, key) in currentMetadata.custom" :key="key" class="metadata-item">
+                <span class="metadata-key">{{ key }}:</span>
+                <span class="metadata-value">{{ value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="metadata-placeholder">
+          点击左侧对象查看详细元数据
+        </div>
+      </div>
+    </div>
+
+    <div class="architecture-summary">
+      <div class="summary-title">架构要点总结</div>
+      <div class="summary-grid">
+        <div class="summary-item">
+          <div class="summary-icon">📦</div>
+          <div class="summary-text">
+            <strong>Bucket（桶）</strong>
+            <span>全局命名空间，用于组织和隔离数据</span>
+          </div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-icon">📄</div>
+          <div class="summary-text">
+            <strong>Object（对象）</strong>
+            <span>键值对存储，包含数据、元数据和唯一 Key</span>
+          </div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-icon">🏷️</div>
+          <div class="summary-text">
+            <strong>Metadata（元数据）</strong>
+            <span>系统元数据 + 自定义标签，支持检索和管理</span>
+          </div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-icon">🔐</div>
+          <div class="summary-text">
+            <strong>Access Control（访问控制）</strong>
+            <span>Bucket Policy、ACL、STS 临时凭证多层权限</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 存储桶数据
+const buckets = [
+  {
+    name: 'myapp-images-prod',
+    icon: '🖼️',
+    objects: 12543,
+    size: '256 GB'
+  },
+  {
+    name: 'myapp-videos-prod',
+    icon: '🎬',
+    objects: 892,
+    size: '1.2 TB'
+  },
+  {
+    name: 'myapp-backups',
+    icon: '💾',
+    objects: 3456,
+    size: '500 GB'
+  }
+]
+
+// 对象数据
+const objectsData = {
+  'myapp-images-prod': [
+    { key: 'avatars/user123.jpg', type: 'image/jpeg', size: '156 KB', lastModified: '2024-01-15' },
+    { key: 'products/shoes-01.png', type: 'image/png', size: '2.3 MB', lastModified: '2024-01-14' },
+    { key: 'banners/sale-2024.webp', type: 'image/webp', size: '456 KB', lastModified: '2024-01-13' }
+  ],
+  'myapp-videos-prod': [
+    { key: 'tutorials/intro.mp4', type: 'video/mp4', size: '156 MB', lastModified: '2024-01-15' },
+    { key: 'ads/promo-2024.mp4', type: 'video/mp4', size: '234 MB', lastModified: '2024-01-14' }
+  ],
+  'myapp-backups': [
+    { key: 'db/daily-20240115.sql.gz', type: 'application/gzip', size: '456 MB', lastModified: '2024-01-15' },
+    { key: 'logs/access-20240114.log.gz', type: 'application/gzip', size: '123 MB', lastModified: '2024-01-14' }
+  ]
+}
+
+// 元数据
+const metadataData = {
+  'avatars/user123.jpg': {
+    system: {
+      'Content-Type': 'image/jpeg',
+      'Content-Length': '159745',
+      'Last-Modified': '2024-01-15T08:30:00Z',
+      'ETag': '"abc123def456"',
+      'x-oss-storage-class': 'Standard'
+    },
+    custom: {
+      'x-oss-meta-owner': 'user123',
+      'x-oss-meta-usage': 'avatar',
+      'x-oss-meta-uploaded-by': 'web-upload'
+    }
+  },
+  'products/shoes-01.png': {
+    system: {
+      'Content-Type': 'image/png',
+      'Content-Length': '2412555',
+      'Last-Modified': '2024-01-14T16:20:00Z',
+      'ETag': '"xyz789ghi012"',
+      'x-oss-storage-class': 'Standard'
+    },
+    custom: {
+      'x-oss-meta-product-id': 'shoes-01',
+      'x-oss-meta-category': 'footwear',
+      'x-oss-meta-price': '199.99'
+    }
+  }
+}
+
+// 状态
+const selectedBucket = ref(null)
+const selectedObject = ref(null)
+
+// 计算属性
+const currentObjects = computed(() => {
+  if (!selectedBucket.value) return []
+  return objectsData[selectedBucket.value] || []
+})
+
+const currentMetadata = computed(() => {
+  if (!selectedObject.value) return null
+  return metadataData[selectedObject.value] || null
+})
+
+// 方法
+const selectBucket = (name) => {
+  selectedBucket.value = name
+  selectedObject.value = null
+}
+
+const selectObject = (obj) => {
+  selectedObject.value = obj.key
+}
+
+const getFileIcon = (type) => {
+  if (type.startsWith('image/')) return '🖼️'
+  if (type.startsWith('video/')) return '🎬'
+  if (type.startsWith('audio/')) return '🎵'
+  if (type.includes('pdf')) return '📄'
+  if (type.includes('zip') || type.includes('gzip')) return '📦'
+  return '📄'
+}
+</script>
+
+<style scoped>
+.object-storage-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.storage-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.account-layer {
+  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
+  padding: 1rem;
+  border-radius: 10px;
+  text-align: center;
+  border: 2px solid #6366f1;
+}
+
+.account-icon {
+  font-size: 2rem;
+  margin-bottom: 0.25rem;
+}
+
+.account-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #4338ca;
+}
+
+.account-desc {
+  font-size: 0.75rem;
+  color: #6366f1;
+  margin-top: 0.25rem;
+}
+
+.connector {
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 1.25rem;
+}
+
+.buckets-container {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.section-desc {
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: var(--vp-c-text-2);
+  margin-left: auto;
+}
+
+.buckets-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.bucket-card {
+  flex: 1;
+  min-width: 140px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.bucket-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.bucket-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-dimm);
+}
+
+.bucket-icon {
+  font-size: 1.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.bucket-name {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+}
+
+.bucket-meta {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+.bucket-size {
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+  margin-top: 0.25rem;
+}
+
+.objects-container {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  min-height: 150px;
+}
+
+.objects-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.object-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.object-item:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.object-item.selected {
+  background: var(--vp-c-brand-soft);
+  border: 1px solid var(--vp-c-brand);
+}
+
+.object-icon {
+  font-size: 1.25rem;
+}
+
+.object-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.object-key {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.object-meta {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.object-arrow {
+  color: var(--vp-c-text-3);
+}
+
+.objects-placeholder {
+  text-align: center;
+  padding: 2rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.metadata-container {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  min-height: 150px;
+}
+
+.metadata-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .metadata-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.metadata-section {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.metadata-section-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.metadata-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.metadata-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  font-size: 0.75rem;
+}
+
+.metadata-key {
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+}
+
+.metadata-value {
+  color: var(--vp-c-text-1);
+  font-family: var(--vp-font-family-mono);
+  word-break: break-all;
+}
+
+.metadata-placeholder {
+  text-align: center;
+  padding: 2rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.architecture-summary {
+  background: var(--vp-c-bg);
+  border-radius: 10px;
+  padding: 1.25rem;
+  margin-top: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.summary-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 640px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.summary-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.summary-icon {
+  font-size: 1.5rem;
+}
+
+.summary-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.summary-text strong {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.summary-text span {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
new file mode 100644
index 0000000..6da61e1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        流量调度演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('流量调度演示')
+const description = ref('展示CDN的智能流量调度机制，包括负载均衡、就近访问、故障切换等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
new file mode 100644
index 0000000..f353d49
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
@@ -0,0 +1,612 @@
+<!--
+  UploadProcessDemo.vue
+  上传流程演示 - 展示直传、分片、断点续传等上传方式
+-->
+<template>
+  <div class="upload-process-demo">
+    <div class="header">
+      <div class="title">文件上传流程</div>
+      <div class="subtitle">直传 vs 分片上传 vs 断点续传</div>
+    </div>
+
+    <!-- 上传方式选择 -->
+    <div class="upload-methods">
+      <div
+        v-for="method in uploadMethods"
+        :key="method.id"
+        class="method-card"
+        :class="{ active: selectedMethod === method.id }"
+        @click="selectMethod(method.id)"
+      >
+        <div class="method-icon">{{ method.icon }}</div>
+        <div class="method-name">{{ method.name }}</div>
+        <div class="method-desc">{{ method.description }}</div>
+        <div class="method-size">适合: {{ method.suitable }}</div>
+      </div>
+    </div>
+
+    <!-- 上传流程可视化 -->
+    <div class="upload-flow">
+      <div class="flow-title">
+        <span v-if="selectedMethod === 'direct'">🚀 直传流程</span>
+        <span v-else-if="selectedMethod === 'multipart'">🔪 分片上传流程</span>
+        <span v-else>💾 断点续传流程</span>
+      </div>
+
+      <!-- 直传流程 -->
+      <div v-if="selectedMethod === 'direct'" class="flow-steps">
+        <div class="flow-step" :class="{ active: currentStep >= 1 }">
+          <div class="step-num">1</div>
+          <div class="step-content">
+            <div class="step-title">用户选择文件</div>
+            <div class="step-detail">浏览器选择 5MB 图片文件</div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 2 }">
+          <div class="step-num">2</div>
+          <div class="step-content">
+            <div class="step-title">申请上传凭证</div>
+            <div class="step-detail">前端 → 后端 → STS 临时凭证</div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 3 }">
+          <div class="step-num">3</div>
+          <div class="step-content">
+            <div class="step-title">直传到对象存储</div>
+            <div class="step-detail">浏览器 → OSS/COS（5MB 一次性上传）</div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 4 }">
+          <div class="step-num">4</div>
+          <div class="step-content">
+            <div class="step-title">上传完成</div>
+            <div class="step-detail">返回 URL，前端通知后端保存记录</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分片上传流程 -->
+      <div v-else-if="selectedMethod === 'multipart'" class="flow-steps multipart-flow">
+        <div class="flow-step" :class="{ active: currentStep >= 1 }">
+          <div class="step-num">1</div>
+          <div class="step-content">
+            <div class="step-title">文件分片</div>
+            <div class="step-detail">500MB 视频 → 50个 10MB 分片</div>
+            <div class="chunks-preview">
+              <div v-for="i in 10" :key="i" class="chunk" :class="{ uploaded: i <= 3 }">{{ i }}</div>
+              <span class="chunks-more">...</span>
+            </div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 2 }">
+          <div class="step-num">2</div>
+          <div class="step-content">
+            <div class="step-title">初始化分片上传</div>
+            <div class="step-detail">获取 uploadId（上传会话 ID）</div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 3 }">
+          <div class="step-num">3</div>
+          <div class="step-content">
+            <div class="step-title">并行上传分片</div>
+            <div class="step-detail">3 个并发，每片 10MB</div>
+            <div class="parallel-upload">
+              <div class="upload-slot" :class="{ active: parallelActive >= 1 }">分片 1</div>
+              <div class="upload-slot" :class="{ active: parallelActive >= 2 }">分片 2</div>
+              <div class="upload-slot" :class="{ active: parallelActive >= 3 }">分片 3</div>
+            </div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 4 }">
+          <div class="step-num">4</div>
+          <div class="step-content">
+            <div class="step-title">合并分片</div>
+            <div class="step-detail">服务端合并所有分片为完整文件</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 断点续传流程 -->
+      <div v-else class="flow-steps resume-flow">
+        <div class="flow-step" :class="{ active: currentStep >= 1 }">
+          <div class="step-num">1</div>
+          <div class="step-content">
+            <div class="step-title">开始上传 1GB 视频</div>
+            <div class="step-detail">已上传 6 个分片（60MB），正在上传第 7 个</div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: 6%;"></div>
+              <div class="progress-text">6% (60MB / 1GB)</div>
+            </div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step error-step" :class="{ active: currentStep >= 2 }">
+          <div class="step-num">⚠️</div>
+          <div class="step-content">
+            <div class="step-title">网络中断！</div>
+            <div class="step-detail">WiFi 切换到 4G，上传中断，第 7 个分片上传失败</div>
+            <div class="error-info">
+              <span>❌ Error: ETIMEDOUT</span>
+              <span>已上传分片: 6/100</span>
+            </div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 3 }">
+          <div class="step-num">3</div>
+          <div class="step-content">
+            <div class="step-title">查询已上传分片</div>
+            <div class="step-detail">恢复网络后，查询服务端已保存的分片列表</div>
+            <div class="resume-info">
+              <div class="resume-item success">
+                <span>✅ 分片 1-6</span>
+                <span>已上传</span>
+              </div>
+              <div class="resume-item pending">
+                <span>⏳ 分片 7-100</span>
+                <span>待上传</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flow-arrow">⬇️</div>
+        <div class="flow-step" :class="{ active: currentStep >= 4 }">
+          <div class="step-num">4</div>
+          <div class="step-content">
+            <div class="step-title">断点续传成功！</div>
+            <div class="step-detail">从第 7 个分片继续上传，无需重传前 6 个分片</div>
+            <div class="success-info">
+              <div class="success-item">
+                <span>💾 节省流量</span>
+                <span>60MB</span>
+              </div>
+              <div class="success-item">
+                <span>⏱️ 节省时间</span>
+                <span>~6s</span>
+              </div>
+              <div class="success-item">
+                <span>🎯 续传进度</span>
+                <span>6% → 100%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 上传方式数据
+const uploadMethods = [
+  {
+    id: 'direct',
+    name: '直传',
+    icon: '🚀',
+    description: '小文件一次性上传到对象存储',
+    suitable: '< 100MB'
+  },
+  {
+    id: 'multipart',
+    name: '分片上传',
+    icon: '🔪',
+    description: '大文件切分多片并行上传',
+    suitable: '> 100MB'
+  },
+  {
+    id: 'resume',
+    name: '断点续传',
+    icon: '💾',
+    description: '网络中断后从断点继续上传',
+    suitable: '任何大小'
+  }
+]
+
+// 状态
+const selectedMethod = ref('direct')
+const currentStep = ref(0)
+const parallelActive = ref(0)
+const stats = ref({
+  uploadedChunks: 3,
+  totalChunks: 50,
+  uploadedSize: '60MB',
+  totalSize: '1GB',
+  progress: 6
+})
+
+// 方法
+const selectMethod = (id) => {
+  selectedMethod.value = id
+  resetDemo()
+}
+
+const simulateCacheHit = () => {
+  resetDemo()
+  currentStep.value = 4
+}
+
+const simulateCacheMiss = () => {
+  resetDemo()
+  currentStep.value = 4
+}
+
+const resetDemo = () => {
+  currentStep.value = 0
+  parallelActive.value = 0
+}
+
+// 计算属性
+const uploadProgress = computed(() => {
+  return Math.round((stats.value.uploadedChunks / stats.value.totalChunks) * 100)
+})
+
+// 方法
+const selectMethod = (id) => {
+  selectedMethod.value = id
+  resetDemo()
+}
+
+const simulateCacheHit = () => {
+  resetDemo()
+  currentStep.value = 4
+}
+
+const simulateCacheMiss = () => {
+  resetDemo()
+  currentStep.value = 4
+}
+
+const resetDemo = () => {
+  currentStep.value = 0
+  parallelActive.value = 0
+}
+</script>
+
+<style scoped>
+.upload-process-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.upload-methods {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .upload-methods {
+    grid-template-columns: 1fr;
+  }
+}
+
+.method-card {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.method-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.method-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-dimm);
+}
+
+.method-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.method-name {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.method-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.method-size {
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+  background: var(--vp-c-brand-soft);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.upload-flow {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1.25rem;
+}
+
+.flow-title {
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.flow-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border-left: 3px solid var(--vp-c-divider);
+  transition: all 0.3s;
+}
+
+.flow-step.active {
+  border-left-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.flow-step.error-step {
+  background: #fef2f2;
+  border-left-color: #dc2626;
+}
+
+.step-num {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.flow-step.error-step .step-num {
+  background: #dc2626;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.step-detail {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.flow-arrow {
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 1rem;
+}
+
+/* 分片预览 */
+.chunks-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.chunk {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.chunk.uploaded {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.chunks-more {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+/* 并行上传 */
+.parallel-upload {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.upload-slot {
+  flex: 1;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  transition: all 0.3s;
+}
+
+.upload-slot.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+/* 进度条 */
+.progress-bar {
+  position: relative;
+  height: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-light));
+  border-radius: 12px;
+  transition: width 0.3s;
+}
+
+.progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+/* 错误信息 */
+.error-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background: white;
+  border-radius: 6px;
+  border-left: 3px solid #dc2626;
+}
+
+.error-info span {
+  font-size: 0.75rem;
+  color: #dc2626;
+  font-family: var(--vp-font-family-mono);
+}
+
+/* 恢复信息 */
+.resume-info {
+  margin-top: 0.5rem;
+}
+
+.resume-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0.6rem;
+  margin-bottom: 0.25rem;
+  background: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+.resume-item.success {
+  border-left: 3px solid #22c55e;
+}
+
+.resume-item.success span:first-child {
+  color: #166534;
+}
+
+.resume-item.pending {
+  border-left: 3px solid #f59e0b;
+}
+
+.resume-item.pending span:first-child {
+  color: #92400e;
+}
+
+.resume-item span:last-child {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+/* 成功信息 */
+.success-info {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.success-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #bbf7d0;
+}
+
+.success-item span:first-child {
+  font-size: 0.7rem;
+  color: #166534;
+  margin-bottom: 0.25rem;
+}
+
+.success-item span:last-child {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #16a34a;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
new file mode 100644
index 0000000..4a60407
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
@@ -0,0 +1,580 @@
+<template>
+  <div class="availability-zone-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="normal">正常运行</el-radio-button>
+        <el-radio-button label="az-failure">单 AZ 故障</el-radio-button>
+        <el-radio-button label="maintenance">维护模式</el-radio-button>
+        <el-radio-button label="scaling">弹性扩容</el-radio-button>
+      </el-radio-group>
+
+      <el-switch
+        v-model="showTraffic"
+        active-text="显示流量"
+        style="margin-left: 20px"
+      />
+    </div>
+
+    <!-- 架构图 -->
+    <div class="architecture-container">
+      <!-- 流量入口层 -->
+      <div class="layer entry-layer">
+        <div class="layer-title">🚪 流量入口层</div>
+        <div class="entry-components">
+          <div class="component dns">
+            <div class="component-icon">📖</div>
+            <div class="component-name">DNS 解析</div>
+          </div>
+
+          <div class="arrow">→</div>
+
+          <div class="component cdn">
+            <div class="component-icon">🌐</div>
+            <div class="component-name">CDN 加速</div>
+          </div>
+
+          <div class="arrow">→</div>
+
+          <div class="component waf">
+            <div class="component-icon">🛡️</div>
+            <div class="component-name">WAF 防护</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 流量分发层 -->
+      <div class="layer distribution-layer">
+        <div class="layer-title">⚖️ 流量分发层 (SLB)</div>
+        <div class="slb-cluster"
+             :class="{ 'failover-active': viewMode === 'az-failure' }">
+          <div class="slb-instance primary"
+               :class="{ failed: viewMode === 'az-failure' }">
+            <div class="instance-header">
+              <span class="status-indicator"
+                    :class="viewMode === 'az-failure' ? 'offline' : 'online'"></span>
+              <span class="instance-name">SLB-A (主)</span>
+            </div>
+            <div class="instance-meta">可用区 A</div>
+
+            <!-- 流量动画 -->
+            <div class="traffic-flow" v-if="showTraffic && viewMode !== 'az-failure'">
+              <div class="flow-dot"></div>
+            </div>
+          </div>
+
+          <div class="failover-arrow" v-if="viewMode === 'az-failure'">
+            <span class="failover-text">故障转移</span>
+            <div class="arrow-line"></div>
+          </div>
+
+          <div class="slb-instance secondary"
+               :class="{ 'taking-over': viewMode === 'az-failure' }">
+            <div class="instance-header">
+              <span class="status-indicator"
+                    :class="viewMode === 'az-failure' ? 'online' : 'standby'"></span>
+              <span class="instance-name">SLB-B (备)</span>
+            </div>
+            <div class="instance-meta">可用区 B</div>
+
+            <div class="traffic-flow" v-if="showTraffic && viewMode === 'az-failure'">
+              <div class="flow-dot"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 可用区层 -->
+      <div class="layer azs-layer">
+        <div class="layer-title">🏢 可用区层 (Multi-AZ)</div>
+        <div class="azs-grid">
+          <div
+            v-for="az in availabilityZones"
+            :key="az.id"
+            class="az-card"
+            :class="{
+              'az-a': az.id === 'az-a',
+              'az-b': az.id === 'az-b',
+              'az-c': az.id === 'az-c',
+              'degraded': viewMode === 'az-failure' && az.id === 'az-a',
+              'scaling': viewMode === 'scaling'
+            }"
+          >
+            <div class="az-header">
+              <div class="az-title">
+                <span class="az-name">{{ az.name }}</span>
+                <span class="az-id">{{ az.id }}</span>
+              </div>
+              <div class="az-status">
+                <span class="status-badge"
+                      :class="getAzStatusClass(az)">
+                  {{ getAzStatusText(az) }}
+                </span>
+              </div>
+            </div>
+
+            <div class="az-resources">
+              <div
+                v-for="resource in az.resources"
+                :key="resource.type"
+                class="resource-item"
+              >
+                <span class="resource-icon">{{ resource.icon }}</span>
+                <span class="resource-name">{{ resource.name }}</span>
+                <span class="resource-count">{{ resource.count }}</span>
+              </div>
+            </div>
+
+            <!-- 维护模式遮罩 -->
+            <div class="maintenance-overlay" v-if="viewMode === 'maintenance' && az.id === 'az-a'">
+              <div class="overlay-content">
+                <div class="overlay-icon">🔧</div>
+                <div class="overlay-text">维护中</div>
+              </div>
+            </div>
+
+            <!-- 弹性扩容动画 -->
+            <div class="scaling-indicator" v-if="viewMode === 'scaling'">
+              <div class="scaling-dot"></div>
+              <div class="scaling-text">扩容中</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 状态说明 -->
+    <div class="status-legend">
+      <div class="legend-title">状态说明：</div>
+      <div class="legend-items">
+        <div class="legend-item">
+          <span class="legend-dot healthy"></span>
+          <span>健康运行</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot standby"></span>
+          <span>待机中</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot degraded"></span>
+          <span>降级/故障</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot maintenance"></span>
+          <span>维护中</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const viewMode = ref('normal')
+const showTraffic = ref(false)
+
+const availabilityZones = [
+  {
+    id: 'az-a',
+    name: '可用区 A',
+    resources: [
+      { type: 'ecs', name: 'ECS 实例', icon: '🖥️', count: 8 },
+      { type: 'rds', name: 'RDS 主库', icon: '🗄️', count: 1 },
+      { type: 'redis', name: 'Redis 主库', icon: '📦', count: 1 },
+      { type: 'slb', name: 'SLB 主', icon: '⚖️', count: 1 }
+    ]
+  },
+  {
+    id: 'az-b',
+    name: '可用区 B',
+    resources: [
+      { type: 'ecs', name: 'ECS 实例', icon: '🖥️', count: 6 },
+      { type: 'rds', name: 'RDS 备库', icon: '🗄️', count: 1 },
+      { type: 'redis', name: 'Redis 备库', icon: '📦', count: 1 },
+      { type: 'slb', name: 'SLB 备', icon: '⚖️', count: 1 }
+    ]
+  },
+  {
+    id: 'az-c',
+    name: '可用区 C',
+    resources: [
+      { type: 'ecs', name: 'ECS 实例', icon: '🖥️', count: 4 },
+      { type: 'slb', name: 'SLB 备', icon: '⚖️', count: 1 }
+    ]
+  }
+]
+
+const getAzStatusClass = (az) => {
+  switch (viewMode.value) {
+    case 'az-failure':
+      return az.id === 'az-a' ? 'degraded' : 'healthy'
+    case 'maintenance':
+      return az.id === 'az-a' ? 'maintenance' : 'standby'
+    default:
+      return 'healthy'
+  }
+}
+
+const getAzStatusText = (az) => {
+  switch (viewMode.value) {
+    case 'az-failure':
+      return az.id === 'az-a' ? '故障中' : '接管中'
+    case 'maintenance':
+      return az.id === 'az-a' ? '维护中' : '待机中'
+    default:
+      return '正常运行'
+  }
+}
+</script>
+
+<style scoped>
+.availability-zone-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+}
+
+.architecture-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.layer {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.layer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Entry Layer */
+.entry-components {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.component {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  min-width: 80px;
+}
+
+.component-icon {
+  font-size: 24px;
+}
+
+.component-name {
+  font-size: 12px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.arrow {
+  font-size: 20px;
+  color: #c0c4cc;
+  font-weight: bold;
+}
+
+/* AZs Layer */
+.azs-layer {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+.azs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.az-card {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  border: 2px solid #e4e7ed;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.az-card.az-a {
+  border-left: 4px solid #409eff;
+}
+
+.az-card.az-b {
+  border-left: 4px solid #67c23a;
+}
+
+.az-card.az-c {
+  border-left: 4px solid #e6a23c;
+}
+
+.az-card.degraded {
+  border-color: #f56c6c;
+  background: #fef0f0;
+}
+
+.az-card.maintenance {
+  border-color: #909399;
+  background: #f4f4f5;
+}
+
+.az-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.az-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.az-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.az-id {
+  font-size: 11px;
+  padding: 2px 6px;
+  background: #f0f2f5;
+  border-radius: 4px;
+  color: #909399;
+}
+
+.status-badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.status-badge.healthy {
+  background: #e1f3d8;
+  color: #67c23a;
+}
+
+.status-badge.standby {
+  background: #f4f4f5;
+  color: #909399;
+}
+
+.status-badge.degraded {
+  background: #fde2e2;
+  color: #f56c6c;
+}
+
+.status-badge.maintenance {
+  background: #e9e9eb;
+  color: #909399;
+}
+
+.az-resources {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.resource-item:hover {
+  background: #ecf5ff;
+}
+
+.resource-icon {
+  font-size: 16px;
+}
+
+.resource-name {
+  flex: 1;
+  font-size: 13px;
+  color: #606266;
+}
+
+.resource-count {
+  font-size: 12px;
+  padding: 2px 8px;
+  background: #409eff;
+  color: white;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* Maintenance Overlay */
+.maintenance-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(144, 147, 153, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.overlay-content {
+  text-align: center;
+  color: white;
+}
+
+.overlay-icon {
+  font-size: 48px;
+  margin-bottom: 8px;
+}
+
+.overlay-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* Scaling Indicator */
+.scaling-indicator {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: #e6a23c;
+  border-radius: 12px;
+}
+
+.scaling-dot {
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 50%;
+  animation: pulse 1s infinite;
+}
+
+.scaling-text {
+  font-size: 11px;
+  color: white;
+  font-weight: 500;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.1); }
+}
+
+/* Status Legend */
+.status-legend {
+  margin-top: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.legend-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.legend-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-dot.healthy {
+  background: #67c23a;
+}
+
+.legend-dot.standby {
+  background: #909399;
+}
+
+.legend-dot.degraded {
+  background: #f56c6c;
+}
+
+.legend-dot.maintenance {
+  background: #c0c4cc;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .entry-components {
+    flex-direction: column;
+  }
+
+  .arrow {
+    transform: rotate(90deg);
+  }
+
+  .slb-cluster {
+    flex-direction: column;
+  }
+
+  .failover-arrow {
+    transform: rotate(90deg);
+    margin: 12px 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
new file mode 100644
index 0000000..3d3ded7
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
@@ -0,0 +1,803 @@
+<template>
+  <div class="compute-topology-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="overview">概览</el-radio-button>
+        <el-radio-button label="vm">虚拟机</el-radio-button>
+        <el-radio-button label="container">容器</el-radio-button>
+        <el-radio-button label="serverless">无服务器</el-radio-button>
+      </el-radio-group>
+
+      <el-switch v-model="showMetrics" active-text="显示指标" style="margin-left: 20px" />
+    </div>
+
+    <!-- 计算架构图 -->
+    <div class="compute-architecture">
+      <!-- 物理基础设施层 -->
+      <div class="layer physical-layer" v-if="viewMode === 'overview' || viewMode === 'vm'">
+        <div class="layer-header">
+          <span class="layer-icon">🏭</span>
+          <span class="layer-title">物理基础设施</span>
+        </div>
+        <div class="layer-content">
+          <div class="server-rack" v-for="rack in serverRacks" :key="rack.id">
+            <div class="rack-header">{{ rack.name }}</div>
+            <div class="rack-servers">
+              <div v-for="server in rack.servers" :key="server.id" class="server-node">
+                <div class="server-indicator" :class="server.status"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 虚拟化层 -->
+      <div class="layer virtualization-layer" v-if="viewMode === 'overview' || viewMode === 'vm'">
+        <div class="layer-header">
+          <span class="layer-icon">🔧</span>
+          <span class="layer-title">虚拟化层</span>
+        </div>
+        <div class="layer-content">
+          <div class="hypervisor-cluster">
+            <div class="hypervisor" v-for="hv in hypervisors" :key="hv.id">
+              <div class="hv-header">
+                <span class="hv-icon">🔨</span>
+                <span class="hv-name">{{ hv.name }}</span>
+              </div>
+              <div class="vms-list">
+                <div v-for="vm in hv.vms" :key="vm.id" class="vm-item">
+                  <div class="vm-info">
+                    <span class="vm-icon">💻</span>
+                    <span class="vm-name">{{ vm.name }}</span>
+                  </div>
+                  <div class="vm-metrics" v-if="showMetrics">
+                    <div class="metric">
+                      <div class="metric-bar">
+                        <div class="metric-fill" :style="{ width: vm.cpu + '%' }"></div>
+                      </div>
+                      <span class="metric-label">CPU</span>
+                    </div>
+                    <div class="metric">
+                      <div class="metric-bar">
+                        <div class="metric-fill memory" :style="{ width: vm.memory + '%' }"></div>
+                      </div>
+                      <span class="metric-label">内存</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 容器层 -->
+      <div class="layer container-layer" v-if="viewMode === 'overview' || viewMode === 'container'">
+        <div class="layer-header">
+          <span class="layer-icon">📦</span>
+          <span class="layer-title">容器编排层 (Kubernetes)</span>
+        </div>
+        <div class="layer-content">
+          <div class="k8s-cluster">
+            <!-- 控制平面 -->
+            <div class="control-plane">
+              <div class="cp-title">控制平面</div>
+              <div class="cp-components">
+                <div class="cp-comp" v-for="comp in controlPlaneComponents" :key="comp.name">
+                  <div class="comp-icon">{{ comp.icon }}</div>
+                  <div class="comp-name">{{ comp.name }}</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 工作节点 -->
+            <div class="worker-nodes">
+              <div class="nodes-title">工作节点</div>
+              <div class="nodes-grid">
+                <div class="node" v-for="node in workerNodes" :key="node.name">
+                  <div class="node-header">
+                    <span class="node-icon">🔧</span>
+                    <span class="node-name">{{ node.name }}</span>
+                    <span class="node-status" :class="node.status"></span>
+                  </div>
+                  <div class="pods-list">
+                    <div class="pod" v-for="pod in node.pods" :key="pod.name">
+                      <div class="pod-color" :style="{ background: pod.color }"></div>
+                      <span class="pod-name">{{ pod.name }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 无服务器层 -->
+      <div class="layer serverless-layer" v-if="viewMode === 'overview' || viewMode === 'serverless'">
+        <div class="layer-header">
+          <span class="layer-icon">⚡</span>
+          <span class="layer-title">无服务器计算 (Function Compute)</span>
+        </div>
+        <div class="layer-content">
+          <div class="serverless-arch">
+            <!-- 触发器 -->
+            <div class="triggers-section">
+              <div class="section-title">触发器</div>
+              <div class="triggers-list">
+                <div class="trigger" v-for="trigger in triggers" :key="trigger.name">
+                  <div class="trigger-icon">{{ trigger.icon }}</div>
+                  <div class="trigger-name">{{ trigger.name }}</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 函数计算 -->
+            <div class="functions-section">
+              <div class="section-title">函数计算实例</div>
+              <div class="functions-list">
+                <div class="function-card" v-for="func in functions" :key="func.name">
+                  <div class="func-header">
+                    <span class="func-icon">⚙️</span>
+                    <span class="func-name">{{ func.name }}</span>
+                  </div>
+                  <div class="func-metrics" v-if="showMetrics">
+                    <div class="metric-row">
+                      <span class="metric-label">并发：</span>
+                      <div class="concurrency-bar">
+                        <div class="concurrency-fill" :style="{ width: (func.concurrency / 100 * 100) + '%' }"></div>
+                      </div>
+                      <span class="metric-value">{{ func.concurrency }}</span>
+                    </div>
+                    <div class="metric-row">
+                      <span class="metric-label">冷启动：</span>
+                      <span class="metric-value">{{ func.coldStart }}ms</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 后端服务 -->
+            <div class="backend-section">
+              <div class="section-title">后端服务</div>
+              <div class="backend-services">
+                <div class="service" v-for="svc in backendServices" :key="svc.name">
+                  <div class="service-icon">{{ svc.icon }}</div>
+                  <div class="service-name">{{ svc.name }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 说明 -->
+    <div class="architecture-legend">
+      <div class="legend-title">计算资源类型说明：</div>
+      <div class="legend-items">
+        <div class="legend-item">
+          <span class="legend-icon">🔧</span>
+          <span class="legend-text">虚拟机 (ECS)：完整 OS 控制，适合传统应用</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-icon">📦</span>
+          <span class="legend-text">容器 (K8s)：轻量级隔离，适合微服务</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-icon">⚡</span>
+          <span class="legend-text">无服务器 (FC)：事件驱动，按需付费</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const viewMode = ref('overview')
+const showMetrics = ref(false)
+
+// 物理服务器
+const serverRacks = [
+  {
+    id: 'rack-1',
+    name: '机柜 A',
+    servers: Array(8).fill(null).map((_, i) => ({
+      id: `srv-a-${i}`,
+      status: i < 6 ? 'online' : 'offline'
+    }))
+  },
+  {
+    id: 'rack-2',
+    name: '机柜 B',
+    servers: Array(8).fill(null).map((_, i) => ({
+      id: `srv-b-${i}`,
+      status: i < 7 ? 'online' : 'standby'
+    }))
+  }
+]
+
+// 虚拟化层
+const hypervisors = [
+  {
+    id: 'hv-1',
+    name: 'Hypervisor-01',
+    vms: [
+      { id: 'vm-1', name: 'Web-01', cpu: 45, memory: 60 },
+      { id: 'vm-2', name: 'Web-02', cpu: 32, memory: 45 },
+      { id: 'vm-3', name: 'App-01', cpu: 67, memory: 78 }
+    ]
+  },
+  {
+    id: 'hv-2',
+    name: 'Hypervisor-02',
+    vms: [
+      { id: 'vm-4', name: 'Web-03', cpu: 28, memory: 35 },
+      { id: 'vm-5', name: 'DB-01', cpu: 82, memory: 88 },
+      { id: 'vm-6', name: 'Cache-01', cpu: 45, memory: 55 }
+    ]
+  }
+]
+
+// K8s 控制平面
+const controlPlaneComponents = [
+  { name: 'API Server', icon: '🔌' },
+  { name: 'etcd', icon: '📚' },
+  { name: 'Scheduler', icon: '📅' },
+  { name: 'Controller', icon: '🎮' }
+]
+
+// 工作节点
+const workerNodes = [
+  {
+    name: 'Node-1',
+    status: 'ready',
+    pods: [
+      { name: 'frontend-1', color: '#409eff' },
+      { name: 'frontend-2', color: '#409eff' },
+      { name: 'api-1', color: '#67c23a' }
+    ]
+  },
+  {
+    name: 'Node-2',
+    status: 'ready',
+    pods: [
+      { name: 'api-2', color: '#67c23a' },
+      { name: 'worker-1', color: '#e6a23c' },
+      { name: 'cache-1', color: '#f56c6c' }
+    ]
+  },
+  {
+    name: 'Node-3',
+    status: 'ready',
+    pods: [
+      { name: 'api-3', color: '#67c23a' },
+      { name: 'worker-2', color: '#e6a23c' }
+    ]
+  }
+]
+
+// Serverless 触发器
+const triggers = [
+  { name: 'HTTP 请求', icon: '🌐' },
+  { name: '定时任务', icon: '⏰' },
+  { name: 'OSS 事件', icon: '📦' },
+  { name: '消息队列', icon: '📨' }
+]
+
+// 函数列表
+const functions = [
+  { name: 'user-service', runtime: 'Node.js', concurrency: 45, coldStart: 120 },
+  { name: 'order-processor', runtime: 'Python', concurrency: 32, coldStart: 85 },
+  { name: 'image-resizer', runtime: 'Go', concurrency: 18, coldStart: 45 }
+]
+
+// 后端服务
+const backendServices = [
+  { name: 'API 网关', icon: '🚪' },
+  { name: '对象存储', icon: '🪣' },
+  { name: '数据库', icon: '🗄️' },
+  { name: '缓存', icon: '⚡' }
+]
+</script>
+
+<style scoped>
+.compute-topology-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.compute-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.layer {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.layer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Physical Layer */
+.layer-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.server-rack {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.rack-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.rack-servers {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+}
+
+.server-node {
+  aspect-ratio: 1;
+  background: #dcdfe6;
+  border-radius: 4px;
+  position: relative;
+}
+
+.server-indicator {
+  position: absolute;
+  inset: 2px;
+  border-radius: 2px;
+}
+
+.server-indicator.online {
+  background: #67c23a;
+}
+
+.server-indicator.offline {
+  background: #f56c6c;
+}
+
+.server-indicator.standby {
+  background: #e6a23c;
+}
+
+/* Hypervisor Layer */
+.hypervisor-cluster {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.hypervisor {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.hv-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.hv-icon {
+  font-size: 18px;
+}
+
+.hv-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.vms-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vm-item {
+  background: white;
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vm-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.vm-icon {
+  font-size: 14px;
+}
+
+.vm-name {
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.vm-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.metric {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.metric-bar {
+  flex: 1;
+  height: 4px;
+  background: #e4e7ed;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.metric-fill {
+  height: 100%;
+  background: #409eff;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.metric-fill.memory {
+  background: #67c23a;
+}
+
+.metric-label {
+  font-size: 11px;
+  color: #909399;
+  width: 40px;
+}
+
+/* Container Layer */
+.k8s-cluster {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.control-plane {
+  background: #f0f9ff;
+  border: 1px solid #bae6fd;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.cp-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0369a1;
+  margin-bottom: 10px;
+}
+
+.cp-components {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cp-comp {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0f2fe;
+}
+
+.comp-icon {
+  font-size: 14px;
+}
+
+.comp-name {
+  font-size: 12px;
+  color: #0c4a6e;
+}
+
+.worker-nodes {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nodes-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+}
+
+.nodes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.node {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.node-icon {
+  font-size: 14px;
+}
+
+.node-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: #334155;
+}
+
+.node-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.node-status.ready {
+  background: #22c55e;
+}
+
+.pods-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pod {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.pod-color {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.pod-name {
+  font-size: 11px;
+  color: #64748b;
+}
+
+/* Serverless Layer */
+.serverless-arch {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.triggers-section,
+.functions-section,
+.backend-section {
+  background: #fafafa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.triggers-list,
+.backend-services {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.trigger,
+.service {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e4e7ed;
+}
+
+.trigger-icon,
+.service-icon {
+  font-size: 16px;
+}
+
+.trigger-name,
+.service-name {
+  font-size: 12px;
+  color: #606266;
+}
+
+.functions-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.function-card {
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.func-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.func-icon {
+  font-size: 14px;
+}
+
+.func-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.func-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.metric-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.metric-row .metric-label {
+  width: 60px;
+  font-size: 11px;
+}
+
+.concurrency-bar {
+  flex: 1;
+  height: 4px;
+  background: #e4e7ed;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.concurrency-fill {
+  height: 100%;
+  background: #67c23a;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.metric-value {
+  font-size: 11px;
+  color: #909399;
+  width: 40px;
+  text-align: right;
+}
+
+/* Status Legend */
+.architecture-legend {
+  margin-top: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.legend-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.legend-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+}
+
+.legend-icon {
+  font-size: 20px;
+}
+
+.legend-text {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hypervisor-cluster,
+  .nodes-grid,
+  .functions-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
new file mode 100644
index 0000000..6026493
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
@@ -0,0 +1,764 @@
+<template>
+  <div class="disaster-recovery-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="drMode" size="small">
+        <el-radio-button label="same-city">同城双活</el-radio-button>
+        <el-radio-button label="remote">异地灾备</el-radio-button>
+        <el-radio-button label="three-center">两地三中心</el-radio-button>
+        <el-radio-button label="switchover">故障切换</el-radio-button>
+      </el-radio-group>
+
+      <el-switch v-model="showRPO" active-text="显示 RPO/RTO" style="margin-left: 20px" />
+    </div>
+
+    <!-- 灾备架构图 -->
+    <div class="dr-architecture">
+      <!-- 生产中心 -->
+      <div class="dr-center production" :class="{ degraded: drMode === 'switchover' && switchoverStep >= 2 }">
+        <div class="center-header">
+          <div class="center-badge production">生产</div>
+          <div class="center-title">生产中心 (Region A)</div>
+          <div class="center-location">📍 北京</div>
+        </div>
+
+        <div class="center-content">
+          <!-- 可用区 A -->
+          <div class="az-block" :class="{ failed: drMode === 'switchover' && switchoverStep >= 1 }">
+            <div class="az-header">
+              <span class="az-name">可用区 A</span>
+              <span class="az-status" :class="getAzStatus('A')">{{ getAzStatusText('A') }}</span>
+            </div>
+
+            <div class="az-resources">
+              <div class="resource-group">
+                <div class="group-title">计算</div>
+                <div class="resource-tags">
+                  <span class="tag">ECS × 8</span>
+                  <span class="tag primary">SLB 主</span>
+                </div>
+              </div>
+
+              <div class="resource-group">
+                <div class="group-title">数据库</div>
+                <div class="resource-tags">
+                  <span class="tag primary">RDS 主</span>
+                  <span class="tag">Redis 主</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 可用区 B (同城灾备) -->
+          <div class="az-block standby" v-if="drMode !== 'remote'">
+            <div class="az-header">
+              <span class="az-name">可用区 B</span>
+              <span class="az-status standby">热备</span>
+            </div>
+
+            <div class="az-resources">
+              <div class="resource-group">
+                <div class="group-title">计算</div>
+                <div class="resource-tags">
+                  <span class="tag">ECS × 6</span>
+                  <span class="tag standby">SLB 备</span>
+                </div>
+              </div>
+
+              <div class="resource-group">
+                <div class="group-title">数据库</div>
+                <div class="resource-tags">
+                  <span class="tag standby">RDS 备</span>
+                  <span class="tag">Redis 备</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- RPO/RTO 指示器 -->
+        <div class="rpo-indicator" v-if="showRPO">
+          <div class="rpo-item">
+            <span class="rpo-label">RPO</span>
+            <span class="rpo-value">{{ getRPO() }}</span>
+          </div>
+          <div class="rpo-item">
+            <span class="rpo-label">RTO</span>
+            <span class="rpo-value">{{ getRTO() }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 复制链路 -->
+      <div class="replication-links">
+        <div class="link-group same-city" v-if="drMode === 'same-city' || drMode === 'three-center'">
+          <div class="link-line"></div>
+          <div class="link-label">同步复制</div>
+          <div class="link-bandwidth">延迟 &lt; 5ms</div>
+        </div>
+
+        <div class="link-group remote" v-if="drMode === 'remote' || drMode === 'three-center'">
+          <div class="link-line async"></div>
+          <div class="link-label">异步复制</div>
+          <div class="link-bandwidth">RPO ≈ 5s</div>
+        </div>
+      </div>
+
+      <!-- 灾备中心 -->
+      <div class="dr-center disaster-recovery" :class="{ active: drMode === 'switchover' && switchoverStep >= 2 }">
+        <div class="center-header">
+          <div class="center-badge dr">灾备</div>
+          <div class="center-title">灾备中心 (Region B)</div>
+          <div class="center-location">📍 {{ drMode === 'same-city' ? '北京 (可用区 C)' : '上海' }}</div>
+        </div>
+
+        <div class="center-content">
+          <div class="az-block dr-standby" :class="{ promoted: drMode === 'switchover' && switchoverStep >= 3 }">
+            <div class="az-header">
+              <span class="az-name">{{ drMode === 'same-city' ? '可用区 C' : '可用区 A' }}</span>
+              <span class="az-status" :class="getDrAzStatus()">{{ getDrAzStatusText() }}</span>
+            </div>
+
+            <div class="az-resources">
+              <div class="resource-group">
+                <div class="group-title">计算</div>
+                <div class="resource-tags">
+                  <span class="tag">ECS × 4</span>
+                  <span :class="['tag', drMode === 'switchover' && switchoverStep >= 3 ? 'primary' : 'standby']">
+                    SLB {{ drMode === 'switchover' && switchoverStep >= 3 ? '主' : '备' }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="resource-group">
+                <div class="group-title">数据库</div>
+                <div class="resource-tags">
+                  <span :class="['tag', drMode === 'switchover' && switchoverStep >= 3 ? 'primary' : 'standby']">
+                    RDS {{ drMode === 'switchover' && switchoverStep >= 3 ? '主' : '备' }}
+                  </span>
+                  <span class="tag">Redis 备</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 切换进度 (仅在故障切换模式显示) -->
+    <div class="switchover-progress" v-if="drMode === 'switchover'">
+      <div class="progress-title">故障切换进度</div>
+      <el-steps :active="switchoverStep" finish-status="success">
+        <el-step title="检测故障" description="监控系统发现可用区 A 故障" />
+        <el-step title="停止写入" description="切离主库，暂停业务写入" />
+        <el-step title="提升备库" description="灾备中心数据库提升为主库" />
+        <el-step title="流量切换" description="DNS 切换到灾备中心 SLB" />
+        <el-step title="恢复服务" description="业务在灾备中心正常运行" />
+      </el-steps>
+
+      <div class="progress-actions">
+        <el-button @click="prevStep" :disabled="switchoverStep === 0">上一步</el-button>
+        <el-button type="primary" @click="nextStep" :disabled="switchoverStep === 5">下一步</el-button>
+        <el-button @click="resetSwitchover">重置</el-button>
+      </div>
+    </div>
+
+    <!-- 架构对比表 -->
+    <div class="comparison-section">
+      <div class="comparison-title">📊 灾备架构方案对比</div>
+
+      <div class="comparison-table">
+        <div class="table-header">
+          <div class="header-cell">对比维度</div>
+          <div class="header-cell">同城双活</div>
+          <div class="header-cell">异地灾备</div>
+          <div class="header-cell">两地三中心</div>
+        </div>
+
+        <div class="table-row" v-for="row in drComparisonData" :key="row.dimension">
+          <div class="cell dimension">{{ row.dimension }}</div>
+          <div class="cell">{{ row.sameCity }}</div>
+          <div class="cell">{{ row.remote }}</div>
+          <div class="cell highlight">{{ row.threeCenter }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- RPO/RTO 说明 -->
+    <div class="rpo-rto-explanation">
+      <div class="explanation-title">💡 RPO 与 RTO 说明</div>
+
+      <div class="explanation-grid">
+        <div class="explanation-card">
+          <div class="card-icon">⏰</div>
+          <div class="card-title">RPO (恢复点目标)</div>
+          <div class="card-desc">可接受的数据丢失量，即最后一次备份到故障发生的时间间隔</div>
+          <div class="card-example">示例：RPO = 5秒，意味着最多丢失5秒的数据</div>
+        </div>
+
+        <div class="explanation-card">
+          <div class="card-icon">🔄</div>
+          <div class="card-title">RTO (恢复时间目标)</div>
+          <div class="card-desc">从故障发生到业务恢复所需的最长时间</div>
+          <div class="card-example">示例：RTO = 30分钟，意味着30分钟内必须恢复服务</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const drMode = ref('same-city')
+const showRPO = ref(false)
+const switchoverStep = ref(0)
+
+// 获取可用区状态
+const getAzStatus = (az) => {
+  if (drMode.value === 'switchover' && switchoverStep.value >= 1 && az === 'A') {
+    return 'failed'
+  }
+  return 'running'
+}
+
+const getAzStatusText = (az) => {
+  if (drMode.value === 'switchover' && switchoverStep.value >= 1 && az === 'A') {
+    return '故障'
+  }
+  return '运行中'
+}
+
+const getDrAzStatus = () => {
+  if (drMode.value === 'switchover' && switchoverStep.value >= 3) {
+    return 'promoted'
+  }
+  return 'standby'
+}
+
+const getDrAzStatusText = () => {
+  if (drMode.value === 'switchover' && switchoverStep.value >= 3) {
+    return '主库'
+  }
+  return '冷备'
+}
+
+const getRPO = () => {
+  switch (drMode.value) {
+    case 'same-city': return '0 (同步复制)'
+    case 'remote': return '~5s (异步复制)'
+    case 'three-center': return '0 (同城) / ~5s (异地)'
+    default: return '-'
+  }
+}
+
+const getRTO = () => {
+  switch (drMode.value) {
+    case 'same-city': return '~5min'
+    case 'remote': return '~30min'
+    case 'three-center': return '~5min (同城) / ~30min (异地)'
+    default: return '-'
+  }
+}
+
+const nextStep = () => {
+  if (switchoverStep.value < 5) {
+    switchoverStep.value++
+  }
+}
+
+const prevStep = () => {
+  if (switchoverStep.value > 0) {
+    switchoverStep.value--
+  }
+}
+
+const resetSwitchover = () => {
+  switchoverStep.value = 0
+}
+
+// 灾备对比数据
+const drComparisonData = [
+  { dimension: '部署成本', sameCity: '中等', remote: '较低', threeCenter: '高' },
+  { dimension: '运维复杂度', sameCity: '中等', remote: '低', threeCenter: '高' },
+  { dimension: '数据保护', sameCity: 'RPO=0', remote: 'RPO~5s', threeCenter: '最全面' },
+  { dimension: '恢复速度', sameCity: '~5分钟', remote: '~30分钟', threeCenter: '分层恢复' },
+  { dimension: '适用场景', sameCity: '金融核心', remote: '中小企业', threeCenter: '大型核心' }
+]
+</script>
+
+<style scoped>
+.disaster-recovery-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.dr-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.dr-center {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  border: 2px solid transparent;
+  transition: all 0.3s;
+}
+
+.dr-center.production {
+  border-color: #409eff;
+}
+
+.dr-center.production.degraded {
+  border-color: #f56c6c;
+  background: #fef0f0;
+}
+
+.dr-center.disaster-recovery {
+  border-color: #67c23a;
+}
+
+.dr-center.disaster-recovery.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.center-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.center-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+}
+
+.center-badge.production {
+  background: #409eff;
+}
+
+.center-badge.dr {
+  background: #67c23a;
+}
+
+.center-title {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.center-location {
+  font-size: 13px;
+  color: #909399;
+}
+
+.center-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* AZ Block */
+.az-block {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+  border-left: 4px solid #409eff;
+  transition: all 0.3s;
+}
+
+.az-block.failed {
+  border-left-color: #f56c6c;
+  background: #fef0f0;
+}
+
+.az-block.standby {
+  border-left-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.az-block.dr-standby {
+  border-left-color: #e6a23c;
+  background: #fdf6ec;
+}
+
+.az-block.dr-standby.promoted {
+  border-left-color: #409eff;
+  background: #ecf5ff;
+}
+
+.az-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.az-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.az-status {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.az-status.running {
+  background: #e1f3d8;
+  color: #67c23a;
+}
+
+.az-status.failed {
+  background: #fde2e2;
+  color: #f56c6c;
+}
+
+.az-status.standby {
+  background: #e1f3d8;
+  color: #67c23a;
+}
+
+.az-status.promoted {
+  background: #ecf5ff;
+  color: #409eff;
+}
+
+.az-resources {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.resource-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-title {
+  font-size: 12px;
+  color: #909399;
+  width: 50px;
+}
+
+.resource-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+}
+
+.tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #e4e7ed;
+  border-radius: 10px;
+  color: #606266;
+}
+
+.tag.primary {
+  background: #409eff;
+  color: white;
+}
+
+.tag.standby {
+  background: #67c23a;
+  color: white;
+}
+
+/* RPO Indicator */
+.rpo-indicator {
+  display: flex;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #dcdfe6;
+}
+
+.rpo-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rpo-label {
+  font-size: 11px;
+  color: #909399;
+  text-transform: uppercase;
+}
+
+.rpo-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #409eff;
+}
+
+/* Replication Links */
+.replication-links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.link-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.link-line {
+  width: 80%;
+  height: 3px;
+  background: linear-gradient(90deg, #409eff, #67c23a);
+  border-radius: 2px;
+  position: relative;
+}
+
+.link-line::before,
+.link-line::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  background: #409eff;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.link-line::before {
+  left: -4px;
+}
+
+.link-line::after {
+  right: -4px;
+  background: #67c23a;
+}
+
+.link-line.async {
+  background: linear-gradient(90deg, #409eff, #e6a23c);
+  background-image: repeating-linear-gradient(
+    90deg,
+    transparent,
+    transparent 10px,
+    rgba(255, 255, 255, 0.3) 10px,
+    rgba(255, 255, 255, 0.3) 20px
+  );
+}
+
+.link-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #606266;
+}
+
+.link-bandwidth {
+  font-size: 11px;
+  color: #909399;
+}
+
+/* Switchover Progress */
+.switchover-progress {
+  margin-top: 20px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.progress-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.progress-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+/* Comparison Section */
+.comparison-section {
+  margin-top: 20px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.comparison-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.comparison-table {
+  overflow-x: auto;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 120px repeat(3, 1fr);
+  gap: 1px;
+  background: #e4e7ed;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+
+.header-cell {
+  padding: 12px;
+  background: #f5f7fa;
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+  text-align: center;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 120px repeat(3, 1fr);
+  gap: 1px;
+  background: #e4e7ed;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.table-row:last-child {
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  border-bottom: none;
+}
+
+.cell {
+  padding: 10px 12px;
+  background: white;
+  font-size: 12px;
+  color: #606266;
+  text-align: center;
+}
+
+.cell.dimension {
+  text-align: left;
+  font-weight: 500;
+  color: #303133;
+  background: #fafafa;
+}
+
+.cell.highlight {
+  font-weight: 600;
+  color: #67c23a;
+}
+
+/* RPO/RTO Explanation */
+.rpo-rto-explanation {
+  margin-top: 20px;
+  padding: 20px;
+  background: #f0f9ff;
+  border-radius: 12px;
+  border-left: 4px solid #409eff;
+}
+
+.explanation-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #0969da;
+  margin-bottom: 16px;
+}
+
+.explanation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.explanation-card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.card-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.card-desc {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.card-example {
+  font-size: 12px;
+  color: #909399;
+  padding: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .center-content {
+    flex-direction: column;
+  }
+
+  .comparison-table {
+    font-size: 11px;
+  }
+
+  .table-header,
+  .table-row {
+    grid-template-columns: 80px repeat(3, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
new file mode 100644
index 0000000..2f0a4df
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="network-flow-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="flowMode" size="small">
+        <el-radio-button label="inbound">入向流量</el-radio-button>
+        <el-radio-button label="outbound">出向流量</el-radio-button>
+        <el-radio-button label="east-west">东西向流量</el-radio-button>
+        <el-radio-button label="full">完整拓扑</el-radio-button>
+      </el-radio-group>
+
+      <el-switch v-model="showMetrics" active-text="显示流量数据" style="margin-left: 20px" />
+    </div>
+
+    <!-- 网络拓扑图 -->
+    <div class="network-topology">
+      <!-- 互联网区域 -->
+      <div class="zone internet-zone" v-if="showInternet">
+        <div class="zone-header">
+          <span class="zone-icon">🌐</span>
+          <span class="zone-title">互联网 (Internet)</span>
+        </div>
+        <div class="zone-content">
+          <div class="internet-entities">
+            <div class="entity" v-for="entity in internetEntities" :key="entity.name">
+              <div class="entity-icon">{{ entity.icon }}</div>
+              <div class="entity-name">{{ entity.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 流量箭头 -->
+      <div class="flow-arrows" v-if="showFlowArrows">
+        <div class="arrow-container">
+          <div class="flow-line" :class="flowMode"></div>
+          <div class="flow-particles" v-if="showMetrics">
+            <div class="particle" v-for="n in 5" :key="n"
+                 :style="{ animationDelay: (n * 0.5) + 's' }"></div>
+          </div>
+        </div>
+
+        <div class="flow-stats" v-if="showMetrics">
+          <div class="stat-item">
+            <div class="stat-label">带宽</div>
+            <div class="stat-value">2.5 Gbps</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">流量</div>
+            <div class="stat-value">1.2 TB/天</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">延迟</div>
+            <div class="stat-value">15 ms</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- VPC 区域 -->
+      <div class="zone vpc-zone">
+        <div class="zone-header">
+          <span class="zone-icon">🏠</span>
+          <span class="zone-title">VPC 网络 (172.16.0.0/12)</span>
+        </div>
+        <div class="zone-content">
+          <!-- 网络设备层 -->
+          <div class="network-devices">
+            <div class="device" v-for="device in networkDevices" :key="device.name"
+                 :class="device.type">
+              <div class="device-icon">{{ device.icon }}</div>
+              <div class="device-name">{{ device.name }}</div>
+
+              <div class="device-stats" v-if="showMetrics">
+                <div class="stat">
+                  <span class="stat-label">吞吐</span>
+                  <span class="stat-value">{{ device.throughput }}</span>
+                </div>
+                <div class="stat">
+                  <span class="stat-label">并发</span>
+                  <span class="stat-value">{{ device.connections }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 子网层 -->
+          <div class="subnets-container">
+            <div class="subnet" v-for="subnet in subnets" :key="subnet.name"
+                 :class="subnet.type">
+              <div class="subnet-header">
+                <span class="subnet-type-icon">{{ subnet.type === 'public' ? '🌐' : '🔒' }}</span>
+                <span class="subnet-name">{{ subnet.name }}</span>
+                <span class="subnet-cidr">{{ subnet.cidr }}</span>
+              </div>
+
+              <div class="subnet-resources">
+                <div class="resource" v-for="resource in subnet.resources" :key="resource.name">
+                  <div class="resource-icon">{{ resource.icon }}</div>
+                  <div class="resource-info">
+                    <div class="resource-name">{{ resource.name }}</div>
+                    <div class="resource-ip">{{ resource.ip }}</div>
+                  </div>
+
+                  <div class="resource-traffic" v-if="showMetrics">
+                    <div class="traffic-in">
+                      <span class="traffic-label">↓</span>
+                      <span class="traffic-value">{{ resource.inTraffic }}</span>
+                    </div>
+                    <div class="traffic-out">
+                      <span class="traffic-label">↑</span>
+                      <span class="traffic-value">{{ resource.outTraffic }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图例说明 -->
+    <div class="network-legend">
+      <div class="legend-title">流量类型说明：</div>
+      <div class="legend-items">
+        <div class="legend-item">
+          <span class="legend-color inbound"></span>
+          <span>入向流量：用户 → 服务器</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-color outbound"></span>
+          <span>出向流量：服务器 → 外部</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-color east-west"></span>
+          <span>东西向流量：服务间通信</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const flowMode = ref('inbound')
+const showMetrics = ref(false)
+
+// 显示互联网
+const showInternet = computed(() => {
+  return ['inbound', 'outbound', 'full'].includes(flowMode.value)
+})
+
+// 显示流量箭头
+const showFlowArrows = computed(() => {
+  return ['inbound', 'outbound', 'east-west', 'full'].includes(flowMode.value)
+})
+
+// 互联网实体
+const internetEntities = [
+  { name: '移动用户', icon: '📱' },
+  { name: 'PC 用户', icon: '💻' },
+  { name: '企业网络', icon: '🏢' },
+  { name: '第三方 API', icon: '🔗' }
+]
+
+// 网络设备
+const networkDevices = [
+  { name: 'Internet Gateway', icon: '🌐', type: 'igw', throughput: '10 Gbps', connections: '10M' },
+  { name: 'NAT Gateway', icon: '🔄', type: 'nat', throughput: '5 Gbps', connections: '1M' },
+  { name: 'Load Balancer', icon: '⚖️', type: 'slb', throughput: '8 Gbps', connections: '500K' },
+  { name: 'VPN Gateway', icon: '🔒', type: 'vpn', throughput: '1 Gbps', connections: '1K' }
+]
+
+// 子网
+const subnets = [
+  {
+    name: 'Public-Subnet-A',
+    type: 'public',
+    cidr: '172.16.1.0/24',
+    resources: [
+      { name: 'Nginx-LB-01', icon: '⚖️', ip: '172.16.1.10', inTraffic: '850 MB/s', outTraffic: '2.1 GB/s' },
+      { name: 'Nginx-LB-02', icon: '⚖️', ip: '172.16.1.11', inTraffic: '780 MB/s', outTraffic: '1.9 GB/s' },
+      { name: 'Bastion-Host', icon: '🔧', ip: '172.16.1.20', inTraffic: '5 MB/s', outTraffic: '12 MB/s' }
+    ]
+  },
+  {
+    name: 'Private-Subnet-A',
+    type: 'private',
+    cidr: '172.16.2.0/24',
+    resources: [
+      { name: 'App-Server-01', icon: '💻', ip: '172.16.2.10', inTraffic: '450 MB/s', outTraffic: '320 MB/s' },
+      { name: 'App-Server-02', icon: '💻', ip: '172.16.2.11', inTraffic: '420 MB/s', outTraffic: '290 MB/s' },
+      { name: 'App-Server-03', icon: '💻', ip: '172.16.2.12', inTraffic: '380 MB/s', outTraffic: '260 MB/s' }
+    ]
+  },
+  {
+    name: 'Data-Subnet-A',
+    type: 'private',
+    cidr: '172.16.3.0/24',
+    resources: [
+      { name: 'MySQL-Primary', icon: '🗄️', ip: '172.16.3.10', inTraffic: '120 MB/s', outTraffic: '180 MB/s' },
+      { name: 'MySQL-Replica', icon: '🗄️', ip: '172.16.3.11', inTraffic: '80 MB/s', outTraffic: '95 MB/s' },
+      { name: 'Redis-Cluster', icon: '⚡', ip: '172.16.3.20', inTraffic: '45 MB/s', outTraffic: '68 MB/s' }
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.network-flow-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.network-topology {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.zone {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.zone-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.zone-icon {
+  font-size: 20px;
+}
+
+.zone-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* Internet Zone */
+.internet-entities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+}
+
+.entity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  min-width: 80px;
+}
+
+.entity-icon {
+  font-size: 24px;
+}
+
+.entity-name {
+  font-size: 12px;
+  color: #606266;
+}
+
+/* Flow Arrows */
+.flow-arrows {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+}
+
+.arrow-container {
+  position: relative;
+  width: 100%;
+  height: 40px;
+}
+
+.flow-line {
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  right: 10%;
+  height: 4px;
+  background: #e4e7ed;
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+
+.flow-line.inbound {
+  background: linear-gradient(to right, #409eff, #67c23a);
+}
+
+.flow-line.outbound {
+  background: linear-gradient(to left, #409eff, #e6a23c);
+}
+
+.flow-line.east-west {
+  background: linear-gradient(to right, #67c23a, #409eff, #67c23a);
+}
+
+.flow-line.full {
+  background: linear-gradient(90deg, #409eff, #67c23a, #e6a23c, #f56c6c);
+}
+
+.flow-particles {
+  position: absolute;
+  inset: 0;
+}
+
+.particle {
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  width: 8px;
+  height: 8px;
+  background: #409eff;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  animation: flow 2s linear infinite;
+}
+
+@keyframes flow {
+  0% {
+    left: 10%;
+    opacity: 1;
+  }
+  100% {
+    left: 90%;
+    opacity: 0;
+  }
+}
+
+.flow-stats {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #909399;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #409eff;
+}
+
+/* VPC Zone */
+.vpc-zone {
+  border: 2px solid #409eff;
+}
+
+/* Network Devices */
+.network-devices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #e4e7ed;
+}
+
+.device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  min-width: 100px;
+  border: 2px solid transparent;
+  transition: all 0.3s;
+}
+
+.device:hover {
+  border-color: #409eff;
+  transform: translateY(-2px);
+}
+
+.device.igw {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.device.nat {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.device.slb {
+  border-color: #e6a23c;
+  background: #fdf6ec;
+}
+
+.device.vpn {
+  border-color: #909399;
+  background: #f4f4f5;
+}
+
+.device-icon {
+  font-size: 24px;
+}
+
+.device-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.device-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 4px;
+  padding-top: 6px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.stat {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+}
+
+.stat-label {
+  color: #909399;
+}
+
+.stat-value {
+  color: #409eff;
+  font-weight: 500;
+}
+
+/* Subnets */
+.subnets-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.subnet {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+  border-left: 4px solid;
+}
+
+.subnet.public {
+  border-left-color: #409eff;
+}
+
+.subnet.private {
+  border-left-color: #67c23a;
+}
+
+.subnet-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.subnet-type-icon {
+  font-size: 14px;
+}
+
+.subnet-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.subnet-cidr {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #e4e7ed;
+  border-radius: 10px;
+  color: #606266;
+  font-family: monospace;
+}
+
+.subnet-resources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.resource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e4e7ed;
+  flex: 1;
+  min-width: 200px;
+}
+
+.resource-icon {
+  font-size: 18px;
+}
+
+.resource-info {
+  flex: 1;
+}
+
+.resource-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.resource-ip {
+  font-size: 11px;
+  color: #909399;
+  font-family: monospace;
+}
+
+.resource-traffic {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-left: 8px;
+  border-left: 1px solid #e4e7ed;
+}
+
+.traffic-in,
+.traffic-out {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+}
+
+.traffic-label {
+  color: #909399;
+  font-weight: 600;
+}
+
+.traffic-value {
+  color: #409eff;
+  font-weight: 500;
+}
+
+/* Network Legend */
+.network-legend {
+  margin-top: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.legend-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.legend-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.legend-color {
+  width: 20px;
+  height: 4px;
+  border-radius: 2px;
+}
+
+.legend-color.inbound {
+  background: linear-gradient(to right, #409eff, #67c23a);
+}
+
+.legend-color.outbound {
+  background: linear-gradient(to right, #409eff, #e6a23c);
+}
+
+.legend-color.east-west {
+  background: linear-gradient(to right, #67c23a, #409eff, #67c23a);
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .network-devices {
+    justify-content: center;
+  }
+
+  .resource {
+    min-width: 100%;
+  }
+
+  .flow-stats {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
new file mode 100644
index 0000000..b75ebee
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="resource-topology-demo">
+    <div class="controls">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="overview">全景视图</el-radio-button>
+        <el-radio-button label="compute">计算视角</el-radio-button>
+        <el-radio-button label="network">网络视角</el-radio-button>
+        <el-radio-button label="storage">存储视角</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div class="topology-container" ref="topologyRef">
+      <!-- 云服务商层 -->
+      <div class="layer cloud-provider">
+        <div class="layer-title">☁️ 云服务商</div>
+        <div class="provider-grid">
+          <div v-for="provider in providers" :key="provider.name"
+               class="provider-card"
+               :class="{ active: selectedProvider === provider.name }"
+               @click="selectProvider(provider.name)">
+            <div class="provider-icon">{{ provider.icon }}</div>
+            <div class="provider-name">{{ provider.name }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接箭头 -->
+      <div class="connection-arrow">⬇️</div>
+
+      <!-- 地域/可用区层 -->
+      <div class="layer region-layer">
+        <div class="layer-title">🌍 地域 & 可用区</div>
+        <div class="region-grid">
+          <div v-for="region in regions" :key="region.id"
+               class="region-card"
+               :class="{ active: selectedRegion === region.id }"
+               @click="selectRegion(region.id)">
+            <div class="region-name">{{ region.name }}</div>
+            <div class="region-azs">
+              <span v-for="az in region.azs" :key="az" class="az-badge">{{ az }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接箭头 -->
+      <div class="connection-arrow">⬇️</div>
+
+      <!-- 资源拓扑层 -->
+      <div class="layer resource-layer">
+        <div class="layer-title">🎯 资源拓扑</div>
+        <div class="resource-grid">
+          <!-- 计算资源 -->
+          <div class="resource-category" :class="{ highlight: viewMode === 'compute' || viewMode === 'overview' }">
+            <div class="category-title">💻 计算</div>
+            <div class="resource-list">
+              <div v-for="item in computeResources" :key="item.name" class="resource-item">
+                <span class="resource-icon">{{ item.icon }}</span>
+                <span class="resource-name">{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 网络资源 -->
+          <div class="resource-category" :class="{ highlight: viewMode === 'network' || viewMode === 'overview' }">
+            <div class="category-title">🌐 网络</div>
+            <div class="resource-list">
+              <div v-for="item in networkResources" :key="item.name" class="resource-item">
+                <span class="resource-icon">{{ item.icon }}</span>
+                <span class="resource-name">{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 存储资源 -->
+          <div class="resource-category" :class="{ highlight: viewMode === 'storage' || viewMode === 'overview' }">
+            <div class="category-title">💾 存储</div>
+            <div class="resource-list">
+              <div v-for="item in storageResources" :key="item.name" class="resource-item">
+                <span class="resource-icon">{{ item.icon }}</span>
+                <span class="resource-name">{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 信息面板 -->
+    <div class="info-panel" v-if="showInfo">
+      <div class="info-header">
+        <h4>💡 拓扑说明</h4>
+        <el-button type="text" @click="showInfo = false">关闭</el-button>
+      </div>
+      <div class="info-content">
+        <p><strong>当前视图：</strong>{{ viewModeText }}</p>
+        <p><strong>选中云商：</strong>{{ selectedProvider || '未选择' }}</p>
+        <p><strong>选中地域：</strong>{{ selectedRegion || '未选择' }}</p>
+        <p class="tip">💡 提示：点击云服务商和地域可以查看不同组合的资源拓扑</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const viewMode = ref('overview')
+const selectedProvider = ref('阿里云')
+const selectedRegion = ref('cn-beijing')
+const showInfo = ref(true)
+
+const providers = [
+  { name: '阿里云', icon: '☁️' },
+  { name: '腾讯云', icon: '🌟' },
+  { name: '华为云', icon: '🔥' },
+  { name: 'AWS', icon: '📦' }
+]
+
+const regions = [
+  { id: 'cn-beijing', name: '华北2 (北京)', azs: ['A', 'B', 'C', 'D', 'E'] },
+  { id: 'cn-shanghai', name: '华东2 (上海)', azs: ['A', 'B', 'C', 'D', 'E', 'F'] },
+  { id: 'cn-shenzhen', name: '华南1 (深圳)', azs: ['A', 'B', 'C', 'D'] },
+  { id: 'cn-hangzhou', name: '华东1 (杭州)', azs: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] }
+]
+
+const computeResources = [
+  { name: '云服务器 ECS', icon: '🖥️' },
+  { name: '容器服务 K8s', icon: '📦' },
+  { name: '函数计算 FC', icon: '⚡' },
+  { name: '裸金属服务器', icon: '🔧' }
+]
+
+const networkResources = [
+  { name: '专有网络 VPC', icon: '🕸️' },
+  { name: '负载均衡 SLB', icon: '⚖️' },
+  { name: '弹性公网 IP', icon: '🌍' },
+  { name: 'VPN 网关', icon: '🔒' }
+]
+
+const storageResources = [
+  { name: '对象存储 OSS', icon: '🪣' },
+  { name: '块存储 EBS', icon: '💽' },
+  { name: '文件存储 NAS', icon: '📁' },
+  { name: '日志服务 SLS', icon: '📋' }
+]
+
+const viewModeText = computed(() => {
+  const map = {
+    overview: '全景视图 - 查看完整资源拓扑',
+    compute: '计算视角 - 聚焦计算资源',
+    network: '网络视角 - 聚焦网络资源',
+    storage: '存储视角 - 聚焦存储资源'
+  }
+  return map[viewMode.value]
+})
+
+const selectProvider = (name) => {
+  selectedProvider.value = name
+}
+
+const selectRegion = (id) => {
+  selectedRegion.value = id
+}
+</script>
+
+<style scoped>
+.resource-topology-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.controls {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.topology-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.layer {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.layer-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.connection-arrow {
+  text-align: center;
+  font-size: 24px;
+  color: #909399;
+  padding: 8px 0;
+}
+
+/* Provider Grid */
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.provider-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.provider-card:hover {
+  border-color: #409eff;
+  transform: translateY(-2px);
+}
+
+.provider-card.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.provider-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.provider-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+}
+
+/* Region Grid */
+.region-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.region-card {
+  padding: 12px;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.region-card:hover {
+  border-color: #67c23a;
+}
+
+.region-card.active {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.region-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.region-azs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.az-badge {
+  padding: 2px 6px;
+  background: #e4e7ed;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #606266;
+}
+
+.region-card.active .az-badge {
+  background: #67c23a;
+  color: white;
+}
+
+/* Resource Grid */
+.resource-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.resource-category {
+  padding: 16px;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.resource-category.highlight {
+  border-color: #409eff;
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
+}
+
+.category-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.resource-item:hover {
+  background: #ecf5ff;
+  transform: translateX(4px);
+}
+
+.resource-icon {
+  font-size: 18px;
+}
+
+.resource-name {
+  font-size: 13px;
+  color: #606266;
+}
+
+/* Info Panel */
+.info-panel {
+  margin-top: 20px;
+  padding: 16px;
+  background: #f0f9eb;
+  border-radius: 8px;
+  border-left: 4px solid #67c23a;
+}
+
+.info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.info-header h4 {
+  margin: 0;
+  color: #67c23a;
+}
+
+.info-content p {
+  margin: 8px 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.info-content .tip {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #dcdfe6;
+  color: #909399;
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .provider-grid,
+  .region-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .resource-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
new file mode 100644
index 0000000..89180be
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
@@ -0,0 +1,875 @@
+<template>
+  <div class="storage-topology-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="overview">存储概览</el-radio-button>
+        <el-radio-button label="object">对象存储</el-radio-button>
+        <el-radio-button label="block">块存储</el-radio-button>
+        <el-radio-button label="file">文件存储</el-radio-button>
+      </el-radio-group>
+
+      <el-switch v-model="showDetails" active-text="显示详情" style="margin-left: 20px" />
+    </div>
+
+    <!-- 存储架构图 -->
+    <div class="storage-architecture">
+      <!-- 应用接入层 -->
+      <div class="layer access-layer">
+        <div class="layer-title">🔌 应用接入层</div>
+        <div class="access-methods">
+          <div class="method-card" v-for="method in accessMethods" :key="method.name"
+               @mouseenter="hoverMethod = method.name" @mouseleave="hoverMethod = null">
+            <div class="method-icon">{{ method.icon }}</div>
+            <div class="method-name">{{ method.name }}</div>
+            <div class="method-desc">{{ method.description }}</div>
+
+            <div class="method-tooltip" v-if="hoverMethod === method.name && showDetails">
+              <div v-for="detail in method.details" :key="detail">{{ detail }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 存储网关层 -->
+      <div class="layer gateway-layer">
+        <div class="layer-title">🚪 存储网关层</div>
+        <div class="gateways-grid">
+          <div class="gateway-card" v-for="gateway in storageGateways" :key="gateway.name"
+               :class="gateway.type">
+            <div class="gateway-header">
+              <span class="gateway-icon">{{ gateway.icon }}</span>
+              <span class="gateway-name">{{ gateway.name }}</span>
+            </div>
+
+            <div class="gateway-metrics" v-if="showDetails">
+              <div class="metric">
+                <span class="metric-label">TPS：</span>
+                <span class="metric-value">{{ gateway.tps }}</span>
+              </div>
+              <div class="metric">
+                <span class="metric-label">延迟：</span>
+                <span class="metric-value">{{ gateway.latency }}ms</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 存储服务层 -->
+      <div class="layer storage-services-layer">
+        <div class="layer-title">💾 存储服务层</div>
+        <div class="storage-types-grid">
+          <!-- 对象存储 -->
+          <div class="storage-type-card object-storage"
+               :class="{ active: viewMode === 'object' || viewMode === 'overview' }">
+            <div class="storage-header">
+              <div class="storage-icon">🪣</div>
+              <div class="storage-title">对象存储 OSS</div>
+            </div>
+
+            <div class="storage-desc">适合存储图片、视频、日志等非结构化数据</div>
+
+            <div class="storage-features">
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>海量存储</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>低成本</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>CDN 加速</span>
+              </div>
+            </div>
+
+            <div class="storage-buckets" v-if="showDetails">
+              <div class="bucket" v-for="bucket in buckets" :key="bucket.name">
+                <div class="bucket-info">
+                  <span class="bucket-name">{{ bucket.name }}</span>
+                  <span class="bucket-objects">{{ bucket.objects }} 个对象</span>
+                </div>
+
+                <div class="bucket-size">{{ bucket.size }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 块存储 -->
+          <div class="storage-type-card block-storage"
+               :class="{ active: viewMode === 'block' || viewMode === 'overview' }">
+            <div class="storage-header">
+              <div class="storage-icon">💽</div>
+              <div class="storage-title">块存储 EBS</div>
+            </div>
+
+            <div class="storage-desc">为云服务器提供高性能、低延迟的数据块存储</div>
+
+            <div class="storage-features">
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>高性能 SSD</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>快照备份</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>弹性扩容</span>
+              </div>
+            </div>
+
+            <div class="volumes-list" v-if="showDetails">
+              <div class="volume" v-for="vol in volumes" :key="vol.id">
+                <div class="volume-info">
+                  <div class="volume-header">
+                    <span class="volume-name">{{ vol.name }}</span>
+                    <span class="volume-type" :class="vol.type">{{ vol.type }}</span>
+                  </div>
+
+                  <div class="volume-meta">
+                    <span>{{ vol.size }}</span>
+                    <span>•</span>
+                    <span>挂载到: {{ vol.attachedTo }}</span>
+                  </div>
+                </div>
+
+                <div class="volume-iops" v-if="vol.iops">
+                  <div class="iops-label">IOPS</div>
+                  <div class="iops-value">{{ vol.iops }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 文件存储 -->
+          <div class="storage-type-card file-storage"
+               :class="{ active: viewMode === 'file' || viewMode === 'overview' }">
+            <div class="storage-header">
+              <div class="storage-icon">📁</div>
+              <div class="storage-title">文件存储 NAS</div>
+            </div>
+
+            <div class="storage-desc">为多个计算节点提供共享文件系统访问</div>
+
+            <div class="storage-features">
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>共享访问</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>POSIX 兼容</span>
+              </div>
+              <div class="feature">
+                <span class="feature-icon">✅</span>
+                <span>自动扩容</span>
+              </div>
+            </div>
+
+            <div class="filesystems-list" v-if="showDetails">
+              <div class="filesystem" v-for="fs in filesystems" :key="fs.name">
+                <div class="fs-header">
+                  <div class="fs-info">
+                    <span class="fs-name">{{ fs.name }}</span>
+                    <span class="fs-protocol" :class="fs.protocol">{{ fs.protocol }}</span>
+                  </div>
+
+                  <div class="fs-capacity">
+                    <span class="capacity-used">{{ fs.used }}</span>
+                    <span class="capacity-total">/ {{ fs.total }}</span>
+                  </div>
+                </div>
+
+                <div class="fs-capacity-bar">
+                  <div class="capacity-progress" :style="{ width: fs.percentage + '%' }"
+                       :class="{ warning: fs.percentage > 80, danger: fs.percentage > 90 }"></div>
+                </div>
+
+                <div class="fs-mounts">
+                  <div class="mounts-label">挂载点：</div>
+                  <div class="mounts-list">
+                    <span class="mount-point" v-for="mount in fs.mounts" :key="mount">{{ mount }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 存储选型对比 -->
+    <div class="comparison-section">
+      <div class="comparison-title">📊 存储类型选型对比</div>
+
+      <div class="comparison-table">
+        <div class="table-header">
+          <div class="header-cell">特性</div>
+          <div class="header-cell object">对象存储</div>
+          <div class="header-cell block">块存储</div>
+          <div class="header-cell file">文件存储</div>
+        </div>
+
+        <div class="table-row" v-for="row in comparisonData" :key="row.feature">
+          <div class="cell feature">{{ row.feature }}</div>
+          <div class="cell" :class="{ highlight: row.object === '优秀' || row.object === '强' }">{{ row.object }}</div>
+          <div class="cell" :class="{ highlight: row.block === '优秀' || row.block === '强' }">{{ row.block }}</div>
+          <div class="cell" :class="{ highlight: row.file === '优秀' || row.file === '强' }">{{ row.file }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const viewMode = ref('overview')
+const showDetails = ref(false)
+const hoverMethod = ref(null)
+
+// 接入方式
+const accessMethods = [
+  {
+    name: 'API/SDK',
+    icon: '🔧',
+    description: '通过编程接口访问存储',
+    details: ['支持 RESTful API', '提供多语言 SDK', '支持批量操作', '可编程访问控制']
+  },
+  {
+    name: '挂载访问',
+    icon: '🔗',
+    description: '像本地磁盘一样使用',
+    details: ['支持 NFS 协议', '支持 SMB 协议', 'POSIX 兼容', '透明访问']
+  },
+  {
+    name: '控制台',
+    icon: '🖥️',
+    description: '通过 Web 界面管理',
+    details: ['可视化操作', '权限管理', '监控报表', '日志审计']
+  }
+]
+
+// 存储网关
+const storageGateways = [
+  { name: '对象网关', icon: '🪣', type: 'object', tps: '10000', latency: '5' },
+  { name: '块网关', icon: '💽', type: 'block', tps: '50000', latency: '1' },
+  { name: '文件网关', icon: '📁', type: 'file', tps: '8000', latency: '3' }
+]
+
+// 存储桶
+const buckets = [
+  { name: 'images-bucket', protocol: 'S3', used: '2.5 TB', total: '10 TB', percentage: 25, mounts: ['CDN 加速', '图片处理'] },
+  { name: 'logs-bucket', protocol: 'S3', used: '850 GB', total: '5 TB', percentage: 17, mounts: ['日志归档', '数据分析'] },
+  { name: 'backup-bucket', protocol: 'S3', used: '4.2 TB', total: '5 TB', percentage: 84, mounts: ['自动备份', '跨区域复制'] }
+]
+
+// 云盘
+const volumes = [
+  { name: 'data-disk-01', type: 'ESSD', size: '500 GB', used: '320 GB', percentage: 64, attachedTo: 'DB-Server-01', iops: 50000 },
+  { name: 'data-disk-02', type: 'SSD', size: '200 GB', used: '145 GB', percentage: 72, attachedTo: 'App-Server-02', iops: 25000 },
+  { name: 'log-disk-01', type: 'SATA', size: '1 TB', used: '680 GB', percentage: 68, attachedTo: 'Log-Server-01', iops: 5000 }
+]
+
+// 文件系统
+const filesystems = [
+  { name: 'shared-data', protocol: 'NFS', used: '1.2 TB', total: '5 TB', percentage: 24, mounts: ['/mnt/shared'] },
+  { name: 'dev-env', protocol: 'NFS', used: '450 GB', total: '2 TB', percentage: 22, mounts: ['/mnt/dev'] },
+  { name: 'team-share', protocol: 'SMB', used: '890 GB', total: '3 TB', percentage: 30, mounts: ['\\\\nas\\team'] }
+]
+
+// 对比数据
+const comparisonData = [
+  { feature: '访问协议', object: 'HTTP/HTTPS', block: 'iSCSI/NVMe', file: 'NFS/SMB' },
+  { feature: '性能', object: '高吞吐', block: '低延迟', file: '中等' },
+  { feature: '数据共享', object: '弱', block: '不支持', file: '强' },
+  { feature: '容量扩展', object: '强', block: '中等', file: '中等' },
+  { feature: '成本', object: '低', block: '高', file: '中等' },
+  { feature: '典型场景', object: '图片/视频/备份', block: '数据库/应用', file: '共享文件/开发' }
+]
+</script>
+
+<style scoped>
+.storage-topology-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.storage-architecture {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.layer {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.layer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Access Layer */
+.access-methods {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.method-card {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.method-card:hover {
+  background: #ecf5ff;
+  transform: translateY(-2px);
+}
+
+.method-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.method-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.method-desc {
+  font-size: 12px;
+  color: #909399;
+}
+
+.method-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: white;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+  z-index: 10;
+  margin-bottom: 8px;
+  white-space: nowrap;
+}
+
+/* Gateway Layer */
+.gateways-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.gateway-card {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+  border-left: 4px solid;
+}
+
+.gateway-card.object {
+  border-left-color: #409eff;
+}
+
+.gateway-card.block {
+  border-left-color: #67c23a;
+}
+
+.gateway-card.file {
+  border-left-color: #e6a23c;
+}
+
+.gateway-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.gateway-icon {
+  font-size: 20px;
+}
+
+.gateway-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.gateway-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.metric-label {
+  color: #909399;
+}
+
+.metric-value {
+  color: #409eff;
+  font-weight: 500;
+}
+
+/* Storage Types Grid */
+.storage-types-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.storage-type-card {
+  background: #f5f7fa;
+  border-radius: 12px;
+  padding: 16px;
+  border: 2px solid transparent;
+  transition: all 0.3s;
+}
+
+.storage-type-card:hover,
+.storage-type-card.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.storage-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.storage-icon {
+  font-size: 28px;
+}
+
+.storage-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.storage-desc {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.storage-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.feature-icon {
+  color: #67c23a;
+}
+
+/* Buckets List */
+.storage-buckets {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.bucket {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  background: white;
+  border-radius: 6px;
+}
+
+.bucket-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bucket-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.bucket-objects {
+  font-size: 11px;
+  color: #909399;
+}
+
+.bucket-size {
+  font-size: 12px;
+  color: #409eff;
+  font-weight: 500;
+}
+
+/* Volumes List */
+.volumes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.volume {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border-radius: 6px;
+}
+
+.volume-info {
+  flex: 1;
+}
+
+.volume-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.volume-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.volume-type {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  text-transform: uppercase;
+}
+
+.volume-type.essd {
+  background: #409eff;
+  color: white;
+}
+
+.volume-type.ssd {
+  background: #67c23a;
+  color: white;
+}
+
+.volume-type.sata {
+  background: #909399;
+  color: white;
+}
+
+.volume-meta {
+  font-size: 11px;
+  color: #909399;
+}
+
+.volume-meta span {
+  margin: 0 4px;
+}
+
+.volume-iops {
+  text-align: center;
+  padding-left: 12px;
+  border-left: 1px solid #e4e7ed;
+}
+
+.iops-label {
+  font-size: 10px;
+  color: #909399;
+  text-transform: uppercase;
+}
+
+.iops-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #409eff;
+}
+
+/* Filesystems List */
+.filesystems-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.filesystem {
+  background: white;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.fs-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.fs-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fs-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.fs-protocol {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.fs-protocol.nfs {
+  background: #409eff;
+  color: white;
+}
+
+.fs-protocol.smb {
+  background: #67c23a;
+  color: white;
+}
+
+.fs-capacity {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.capacity-used {
+  color: #303133;
+  font-weight: 500;
+}
+
+.capacity-total {
+  color: #909399;
+}
+
+.fs-capacity-bar {
+  height: 4px;
+  background: #e4e7ed;
+  border-radius: 2px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.capacity-progress {
+  height: 100%;
+  background: #67c23a;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.capacity-progress.warning {
+  background: #e6a23c;
+}
+
+.capacity-progress.danger {
+  background: #f56c6c;
+}
+
+.fs-mounts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mounts-label {
+  font-size: 12px;
+  color: #909399;
+}
+
+.mounts-list {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.mount-point {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #ecf5ff;
+  color: #409eff;
+  border-radius: 10px;
+}
+
+/* Comparison Section */
+.comparison-section {
+  margin-top: 20px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.comparison-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.comparison-table {
+  overflow-x: auto;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 120px repeat(3, 1fr);
+  gap: 1px;
+  background: #e4e7ed;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+
+.header-cell {
+  padding: 12px;
+  background: #f5f7fa;
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+  text-align: center;
+}
+
+.header-cell.object {
+  background: #ecf5ff;
+  color: #409eff;
+}
+
+.header-cell.block {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+.header-cell.file {
+  background: #fdf6ec;
+  color: #e6a23c;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 120px repeat(3, 1fr);
+  gap: 1px;
+  background: #e4e7ed;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.table-row:last-child {
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  border-bottom: none;
+}
+
+.cell {
+  padding: 10px 12px;
+  background: white;
+  font-size: 12px;
+  color: #606266;
+  text-align: center;
+}
+
+.cell.feature {
+  text-align: left;
+  font-weight: 500;
+  color: #303133;
+  background: #fafafa;
+}
+
+.cell.highlight {
+  font-weight: 600;
+  color: #67c23a;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .storage-types-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-table {
+    font-size: 11px;
+  }
+
+  .table-header,
+  .table-row {
+    grid-template-columns: 80px repeat(3, 1fr);
+  }
+
+  .header-cell,
+  .cell {
+    padding: 6px 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
new file mode 100644
index 0000000..1806776
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="subnet-design-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <div class="panel-section">
+        <span class="panel-label">VPC 网段：</span>
+        <el-radio-group v-model="vpcCidr" size="small">
+          <el-radio-button label="172.16.0.0/12">172.16.0.0/12</el-radio-button>
+          <el-radio-button label="10.0.0.0/8">10.0.0.0/8</el-radio-button>
+          <el-radio-button label="192.168.0.0/16">192.168.0.0/16</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <div class="panel-section">
+        <span class="panel-label">子网划分：</span>
+        <el-slider v-model="subnetBits" :min="2" :max="4" show-stops :marks="{2: '/24', 3: '/25', 4: '/26'}" style="width: 200px;" />
+      </div>
+
+      <el-switch v-model="showCalculation" active-text="显示计算过程" style="margin-left: 20px;" />
+    </div>
+
+    <!-- 网段可视化 -->
+    <div class="network-visualization">
+      <div class="vpc-block">
+        <div class="vpc-header">
+          <span class="vpc-name">VPC 网段</span>
+          <span class="vpc-cidr">{{ vpcCidr }}</span>
+          <span class="vpc-stats">可用 IP: {{ totalIps.toLocaleString() }} 个</span>
+        </div>
+
+        <div class="subnet-grid">
+          <div
+            v-for="(subnet, index) in subnets"
+            :key="index"
+            class="subnet-cell"
+            :class="[subnet.type, { active: selectedSubnet === index }]"
+            @click="selectSubnet(index)"
+            @mouseenter="hoverSubnet = index"
+            @mouseleave="hoverSubnet = null"
+          >
+            <div class="cell-header">
+              <span class="cell-type">{{ subnet.type === 'public' ? '🌐' : '🔒' }}</span>
+              <span class="cell-name">{{ subnet.name }}</span>
+            </div>
+            <div class="cell-cidr">{{ subnet.cidr }}</div>
+            <div class="cell-stats">
+              <span class="ip-count">{{ subnet.ipCount }} IP</span>
+              <span class="az-badge">{{ subnet.az }}</span>
+            </div>
+
+            <!-- 悬停提示 -->
+            <div class="cell-tooltip" v-if="hoverSubnet === index && showCalculation">
+              <div class="tooltip-row">
+                <span>网段范围：</span>
+                <code>{{ subnet.range }}</code>
+              </div>
+              <div class="tooltip-row">
+                <span>可用 IP：</span>
+                <span>{{ subnet.usableIps }} 个</span>
+              </div>
+              <div class="tooltip-row">
+                <span>预留 IP：</span>
+                <span>网络地址 + 广播地址 + 网关</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 网段计算说明 -->
+    <div class="calculation-panel" v-if="showCalculation">
+      <h4>📐 子网划分计算说明</h4>
+
+      <div class="calc-section">
+        <h5>1. 基础概念</h5>
+        <div class="concept-grid">
+          <div class="concept-item">
+            <span class="concept-label">CIDR 表示法：</span>
+            <code>/24</code> 表示网络位占 24 位，主机位 8 位
+          </div>
+          <div class="concept-item">
+            <span class="concept-label">总 IP 数：</span>
+            <code>2^(32-24) = 256</code> 个
+          </div>
+          <div class="concept-item">
+            <span class="concept-label">可用 IP 数：</span>
+            <code>256 - 3 = 253</code> 个（减去网络、广播、网关地址）
+          </div>
+        </div>
+      </div>
+
+      <div class="calc-section">
+        <h5>2. 当前配置计算</h5>
+        <div class="calc-result">
+          <div class="result-item">
+            <span class="result-label">VPC 网段：</span>
+            <code class="result-value">{{ vpcCidr }}</code>
+          </div>
+          <div class="result-item">
+            <span class="result-label">子网掩码：</span>
+            <code class="result-value">/{{ subnetMask }}</code>
+          </div>
+          <div class="result-item">
+            <span class="result-label">子网数量：</span>
+            <code class="result-value">{{ subnets.length }} 个</code>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每个子网 IP 数：</span>
+            <code class="result-value">{{ ipsPerSubnet }} 个</code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 最佳实践提示 -->
+    <div class="tips-panel">
+      <h4>💡 子网设计最佳实践</h4>
+      <div class="tips-grid">
+        <div class="tip-item">
+          <div class="tip-icon">🎯</div>
+          <div class="tip-content">
+            <h5>预留足够 IP</h5>
+            <p>每个子网至少预留 20% 的 IP 作为扩容缓冲</p>
+          </div>
+        </div>
+        <div class="tip-item">
+          <div class="tip-icon">🔒</div>
+          <div class="tip-content">
+            <h5>公网私网分离</h5>
+            <p>核心数据放在私网子网，通过 NAT 访问外网</p>
+          </div>
+        </div>
+        <div class="tip-item">
+          <div class="tip-icon">🌐</div>
+          <div class="tip-content">
+            <h5>多 AZ 部署</h5>
+            <p>同一 VPC 的不同子网放在不同可用区</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const vpcCidr = ref('172.16.0.0/12')
+const subnetBits = ref(2)
+const showCalculation = ref(false)
+const selectedSubnet = ref(null)
+const hoverSubnet = ref(null)
+
+const subnetMask = computed(() => {
+  const baseMask = parseInt(vpcCidr.value.split('/')[1])
+  return baseMask + subnetBits.value
+})
+
+const ipsPerSubnet = computed(() => {
+  return Math.pow(2, 32 - subnetMask.value)
+})
+
+const totalIps = computed(() => {
+  const mask = parseInt(vpcCidr.value.split('/')[1])
+  return Math.pow(2, 32 - mask)
+})
+
+const subnets = computed(() => {
+  const baseCidr = vpcCidr.value.split('/')[0]
+  const octets = baseCidr.split('.').map(Number)
+  const count = Math.pow(2, subnetBits.value)
+
+  const result = []
+  for (let i = 0; i < count; i++) {
+    const thirdOctet = octets[2] + Math.floor(i / 256)
+    const fourthOctet = i % 256
+
+    const cidr = `${octets[0]}.${octets[1]}.${thirdOctet}.${fourthOctet}/${subnetMask.value}`
+    const startIp = `${octets[0]}.${octets[1]}.${thirdOctet}.${fourthOctet}`
+    const endIp = `${octets[0]}.${octets[1]}.${thirdOctet + Math.floor((ipsPerSubnet.value - 1) / 256)}.${(fourthOctet + ipsPerSubnet.value - 1) % 256}`
+
+    result.push({
+      name: `子网-${String.fromCharCode(65 + i)}`,
+      cidr,
+      type: i % 2 === 0 ? 'public' : 'private',
+      ipCount: ipsPerSubnet.value,
+      az: `可用区 ${String.fromCharCode(65 + (i % 3))}`,
+      range: `${startIp} - ${endIp}`,
+      usableIps: ipsPerSubnet.value - 3
+    })
+  }
+  return result
+})
+
+const selectSubnet = (index) => {
+  selectedSubnet.value = selectedSubnet.value === index ? null : index
+}
+</script>
+
+<style scoped>
+.subnet-design-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+}
+
+.panel-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-label {
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+/* Network Visualization */
+.network-visualization {
+  margin-bottom: 20px;
+}
+
+.vpc-block {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  border: 2px solid #409eff;
+}
+
+.vpc-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.vpc-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.vpc-cidr {
+  font-size: 13px;
+  padding: 4px 8px;
+  background: #ecf5ff;
+  color: #409eff;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.vpc-stats {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* Subnet Grid */
+.subnet-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.subnet-cell {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.subnet-cell:hover {
+  border-color: #c0c4cc;
+  transform: translateY(-2px);
+}
+
+.subnet-cell.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.subnet-cell.public {
+  border-left: 4px solid #409eff;
+}
+
+.subnet-cell.private {
+  border-left: 4px solid #67c23a;
+}
+
+.cell-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.cell-type {
+  font-size: 14px;
+}
+
+.cell-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.cell-cidr {
+  font-size: 11px;
+  color: #606266;
+  font-family: monospace;
+  margin-bottom: 8px;
+}
+
+.cell-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ip-count {
+  font-size: 11px;
+  color: #909399;
+}
+
+.az-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  background: #e4e7ed;
+  border-radius: 10px;
+  color: #606266;
+}
+
+/* Cell Tooltip */
+.cell-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: white;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+  z-index: 10;
+  margin-bottom: 8px;
+  white-space: nowrap;
+}
+
+.tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 3px 0;
+}
+
+/* Calculation Panel */
+.calculation-panel {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.calculation-panel h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+  font-size: 16px;
+}
+
+.calc-section {
+  margin-bottom: 20px;
+}
+
+.calc-section:last-child {
+  margin-bottom: 0;
+}
+
+.calc-section h5 {
+  margin: 0 0 12px 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.concept-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 12px;
+}
+
+.concept-item {
+  background: #f5f7fa;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.concept-label {
+  font-weight: 600;
+  color: #303133;
+}
+
+.calc-result {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: #f5f7fa;
+  border-radius: 6px;
+}
+
+.result-label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.result-value {
+  font-size: 13px;
+  color: #409eff;
+  font-weight: 600;
+  font-family: monospace;
+}
+
+/* Tips Panel */
+.tips-panel {
+  background: #f0f9eb;
+  border-radius: 8px;
+  padding: 20px;
+  border-left: 4px solid #67c23a;
+}
+
+.tips-panel h4 {
+  margin: 0 0 16px 0;
+  color: #67c23a;
+  font-size: 16px;
+}
+
+.tips-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.tip-item {
+  display: flex;
+  gap: 12px;
+  background: white;
+  padding: 12px;
+  border-radius: 6px;
+}
+
+.tip-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.tip-content h5 {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  color: #303133;
+}
+
+.tip-content p {
+  margin: 0;
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .panel-section {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .subnet-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
new file mode 100644
index 0000000..8054208
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
@@ -0,0 +1,529 @@
+<template>
+  <div class="vpc-architecture-demo">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="full">完整架构</el-radio-button>
+        <el-radio-button label="public">公网访问</el-radio-button>
+        <el-radio-button label="private">私网隔离</el-radio-button>
+        <el-radio-button label="hybrid">混合云</el-radio-button>
+      </el-radio-group>
+      <el-switch
+        v-model="showDetails"
+        active-text="显示详情"
+        style="margin-left: 20px"
+      />
+    </div>
+
+    <!-- VPC 架构图 -->
+    <div class="vpc-container">
+      <!-- 外部互联网 -->
+      <div class="internet-zone" v-if="showInternet">
+        <div class="zone-header">
+          <span class="zone-icon">🌐</span>
+          <span class="zone-title">互联网 (Internet)</span>
+        </div>
+        <div class="zone-content">
+          <div class="internet-user">
+            <div class="user-avatar">👤</div>
+            <div class="user-label">用户</div>
+          </div>
+          <div class="internet-user">
+            <div class="user-avatar">🏢</div>
+            <div class="user-label">企业</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接箭头 -->
+      <div class="connection-flow" v-if="showInternet">
+        <div class="flow-line"></div>
+        <div class="flow-devices">
+          <div class="device" v-for="device in borderDevices" :key="device.name"
+               :class="device.type"
+               @mouseenter="hoverDevice = device.name"
+               @mouseleave="hoverDevice = null"
+003e
+            <div class="device-icon">{{ device.icon }}</div>
+            <div class="device-name">{{ device.name }}</div>
+            <div class="device-tooltip" v-if="hoverDevice === device.name && showDetails">
+              {{ device.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- VPC 主体 -->
+      <div class="vpc-zone">
+        <div class="vpc-header">
+          <div class="vpc-title">
+            <span class="vpc-icon">🏠</span>
+            <span>专有网络 VPC</span>
+            <span class="vpc-id">vpc-2ze7p8w7c9d6x5y4</span>
+          </div>
+          <div class="vpc-meta">
+            <span class="meta-item">📍 华北2 (北京)</span>
+            <span class="meta-item">🌐 172.16.0.0/12</span>
+          </div>
+        </div>
+
+        <div class="vpc-content">
+          <!-- 可用区 1 -->
+          <div class="az-container">
+            <div class="az-header">
+              <span class="az-name">可用区 A</span>
+              <span class="az-status online">在线</span>
+            </div>
+            <div class="subnets">
+              <div class="subnet public"
+                   @mouseenter="hoverSubnet = 'public-a'"
+                   @mouseleave="hoverSubnet = null">
+                <div class="subnet-header">
+                  <span class="subnet-type">🌐 公网子网</span>
+                  <span class="subnet-cidr">172.16.1.0/24</span>
+                </div>
+                <div class="subnet-resources">
+                  <div class="resource-tag">🖥️ ECS × 2</div>
+                  <div class="resource-tag">⚖️ SLB</div>
+                  <div class="resource-tag">🌐 NAT</div>
+                </div>
+                <div class="subnet-tooltip" v-if="hoverSubnet === 'public-a' && showDetails">
+                  公网子网：可直接访问互联网，部署对外服务
+                </div>
+              </div>
+
+              <div class="subnet private"
+                   @mouseenter="hoverSubnet = 'private-a'"
+                   @mouseleave="hoverSubnet = null">
+                <div class="subnet-header">
+                  <span class="subnet-type">🔒 私网子网</span>
+                  <span class="subnet-cidr">172.16.2.0/24</span>
+                </div>
+                <div class="subnet-resources">
+                  <div class="resource-tag">🖥️ ECS × 4</div>
+                  <div class="resource-tag">🗄️ RDS</div>
+                  <div class="resource-tag">📦 Redis</div>
+                </div>
+                <div class="subnet-tooltip" v-if="hoverSubnet === 'private-a' && showDetails">
+                  私网子网：无法直接访问互联网，部署核心服务
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 可用区 2 -->
+          <div class="az-container">
+            <div class="az-header">
+              <span class="az-name">可用区 B</span>
+              <span class="az-status online">在线</span>
+            </div>
+            <div class="subnets">
+              <div class="subnet public">
+                <div class="subnet-header">
+                  <span class="subnet-type">🌐 公网子网</span>
+                  <span class="subnet-cidr">172.16.3.0/24</span>
+                </div>
+                <div class="subnet-resources">
+                  <div class="resource-tag">🖥️ ECS × 2</div>
+                  <div class="resource-tag">⚖️ SLB</div>
+                </div>
+              </div>
+
+              <div class="subnet private">
+                <div class="subnet-header">
+                  <span class="subnet-type">🔒 私网子网</span>
+                  <span class="subnet-cidr">172.16.4.0/24</span>
+                </div>
+                <div class="subnet-resources">
+                  <div class="resource-tag">🖥️ ECS × 4</div>
+                  <div class="resource-tag">🗄️ RDS Slave</div>
+                  <div class="resource-tag">📦 Redis Slave</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const viewMode = ref('full')
+const showDetails = ref(false)
+const hoverDevice = ref(null)
+const hoverSubnet = ref(null)
+
+const showInternet = computed(() => {
+  return ['full', 'public', 'hybrid'].includes(viewMode.value)
+})
+
+const borderDevices = [
+  {
+    name: '边界路由器',
+    icon: '📡',
+    type: 'router',
+    description: '连接VPC与互联网的核心路由设备'
+  },
+  {
+    name: 'NAT网关',
+    icon: '🔄',
+    type: 'nat',
+    description: '实现私网资源访问互联网的地址转换'
+  },
+  {
+    name: '负载均衡',
+    icon: '⚖️',
+    type: 'slb',
+    description: '分发公网流量到多台后端服务器'
+  }
+]
+</script>
+
+<style scoped>
+.vpc-architecture-demo {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.vpc-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Internet Zone */
+.internet-zone {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border-radius: 12px;
+  padding: 16px;
+  border: 2px solid #90caf9;
+}
+
+.zone-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.zone-icon {
+  font-size: 20px;
+}
+
+.zone-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1565c0;
+}
+
+.zone-content {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.internet-user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.user-avatar {
+  font-size: 32px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-label {
+  font-size: 12px;
+  color: #546e7a;
+}
+
+/* Connection Flow */
+.connection-flow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.flow-line {
+  width: 4px;
+  height: 24px;
+  background: linear-gradient(to bottom, #90caf9, #4caf50);
+  border-radius: 2px;
+}
+
+.flow-devices {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 8px;
+  border: 2px solid #e0e0e0;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.device:hover {
+  border-color: #409eff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.device.router {
+  border-color: #ff9800;
+}
+
+.device.nat {
+  border-color: #9c27b0;
+}
+
+.device.slb {
+  border-color: #2196f3;
+}
+
+.device-icon {
+  font-size: 24px;
+}
+
+.device-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #424242;
+}
+
+.device-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  background: #333;
+  color: white;
+  font-size: 12px;
+  border-radius: 6px;
+  white-space: nowrap;
+  z-index: 10;
+  margin-bottom: 8px;
+}
+
+.device-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: #333;
+}
+
+/* VPC Zone */
+.vpc-zone {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  border: 2px solid #409eff;
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.1);
+}
+
+.vpc-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.vpc-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.vpc-icon {
+  font-size: 20px;
+}
+
+.vpc-id {
+  font-size: 12px;
+  color: #909399;
+  font-weight: normal;
+  margin-left: 8px;
+}
+
+.vpc-meta {
+  display: flex;
+  gap: 16px;
+}
+
+.meta-item {
+  font-size: 13px;
+  color: #606266;
+}
+
+.vpc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* AZ Container */
+.az-container {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.az-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.az-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.az-status {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.az-status.online {
+  background: #e1f3d8;
+  color: #67c23a;
+}
+
+.subnets {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.subnet {
+  background: white;
+  border-radius: 6px;
+  padding: 10px;
+  border: 2px solid #e4e7ed;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.subnet:hover {
+  transform: translateX(4px);
+}
+
+.subnet.public {
+  border-left: 4px solid #409eff;
+}
+
+.subnet.private {
+  border-left: 4px solid #67c23a;
+}
+
+.subnet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.subnet-type {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.subnet-cidr {
+  font-size: 11px;
+  padding: 2px 6px;
+  background: #f0f2f5;
+  border-radius: 4px;
+  color: #606266;
+  font-family: monospace;
+}
+
+.subnet-resources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.resource-tag {
+  font-size: 11px;
+  padding: 3px 8px;
+  background: #ecf5ff;
+  border-radius: 4px;
+  color: #409eff;
+}
+
+.subnet-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: #333;
+  color: white;
+  font-size: 12px;
+  border-radius: 6px;
+  z-index: 10;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .vpc-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .vpc-meta {
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
new file mode 100644
index 0000000..6a7f589
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="component-hierarchy-demo">
+    <div class="demo-header">
+      <h4>组件层级可视化</h4>
+      <p class="hint">点击组件查看详情，观察组件树如何组织</p>
+    </div>
+
+    <div class="tree-container">
+      <div class="tree-node root-node" :class="{ active: selectedNode === 'app' }" @click="selectNode('app')">
+        <div class="node-icon">🌳</div>
+        <div class="node-label">App (根组件)</div>
+        <div class="node-desc">管理全局状态</div>
+      </div>
+
+      <div class="tree-children">
+        <div class="tree-branch">
+          <div class="connector"></div>
+          <div class="tree-node" :class="{ active: selectedNode === 'header' }" @click="selectNode('header')">
+            <div class="node-icon">📌</div>
+            <div class="node-label">Header</div>
+            <div class="node-desc">导航 + 用户信息</div>
+          </div>
+        </div>
+
+        <div class="tree-branch">
+          <div class="connector"></div>
+          <div class="tree-node" :class="{ active: selectedNode === 'main' }" @click="selectNode('main')">
+            <div class="node-icon">📄</div>
+            <div class="node-label">Main Content</div>
+            <div class="node-desc">页面主要内容</div>
+          </div>
+
+          <div class="tree-children">
+            <div class="tree-branch">
+              <div class="connector"></div>
+              <div class="tree-node" :class="{ active: selectedNode === 'sidebar' }" @click="selectNode('sidebar')">
+                <div class="node-icon">📑</div>
+                <div class="node-label">Sidebar</div>
+                <div class="node-desc">侧边栏菜单</div>
+              </div>
+            </div>
+
+            <div class="tree-branch">
+              <div class="connector"></div>
+              <div class="tree-node" :class="{ active: selectedNode === 'productlist' }" @click="selectNode('productlist')">
+                <div class="node-icon">🛍️</div>
+                <div class="node-label">ProductList</div>
+                <div class="node-desc">商品列表展示</div>
+              </div>
+
+              <div class="tree-children">
+                <div class="tree-branch">
+                  <div class="connector"></div>
+                  <div class="tree-node leaf" :class="{ active: selectedNode === 'productcard' }" @click="selectNode('productcard')">
+                    <div class="node-icon">🏷️</div>
+                    <div class="node-label">ProductCard</div>
+                    <div class="node-desc">单个商品卡片</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tree-branch">
+          <div class="connector"></div>
+          <div class="tree-node" :class="{ active: selectedNode === 'footer' }" @click="selectNode('footer')">
+            <div class="node-icon">🔻</div>
+            <div class="node-label">Footer</div>
+            <div class="node-desc">页脚信息</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="selectedNodeInfo" class="node-details">
+      <h5>{{ selectedNodeInfo.title }}</h5>
+      <p>{{ selectedNodeInfo.description }}</p>
+      <div class="props-list" v-if="selectedNodeInfo.props">
+        <strong>接收的 Props:</strong>
+        <ul>
+          <li v-for="prop in selectedNodeInfo.props" :key="prop">{{ prop }}</li>
+        </ul>
+      </div>
+      <div class="events-list" v-if="selectedNodeInfo.events">
+        <strong>触发的事件:</strong>
+        <ul>
+          <li v-for="event in selectedNodeInfo.events" :key="event">{{ event }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedNode = ref(null)
+
+const nodeInfoMap = {
+  app: {
+    title: 'App (根组件)',
+    description: '应用的入口组件，负责初始化全局状态、路由配置和全局样式。通常包含 RouterView 来渲染页面级组件。',
+    props: [],
+    events: []
+  },
+  header: {
+    title: 'Header (导航栏)',
+    description: '顶部导航组件，显示 Logo、主导航菜单、用户信息、购物车入口等。通常是全局组件，在大多数页面都显示。',
+    props: ['user', 'cartCount'],
+    events: ['logout', 'search']
+  },
+  main: {
+    title: 'Main Content (主内容区)',
+    description: '页面的主要内容区域，包含侧边栏和具体内容。使用 flex 或 grid 布局来组织内容。',
+    props: [],
+    events: []
+  },
+  sidebar: {
+    title: 'Sidebar (侧边栏)',
+    description: '左侧导航菜单，通常用于后台管理系统或分类浏览页面。包含可折叠的菜单组。',
+    props: ['menuItems', 'collapsed'],
+    events: ['select', 'toggle']
+  },
+  productlist: {
+    title: 'ProductList (商品列表)',
+    description: '展示商品列表的容器组件，负责数据获取、分页、排序和筛选逻辑。包含多个 ProductCard 组件。',
+    props: ['products', 'loading', 'total'],
+    events: ['loadMore', 'sort', 'filter']
+  },
+  productcard: {
+    title: 'ProductCard (商品卡片)',
+    description: '单个商品的展示卡片，显示商品图片、名称、价格、评分等信息。是最基础的 UI 组件之一。',
+    props: ['product', 'showAddToCart'],
+    events: ['addToCart', 'click']
+  },
+  footer: {
+    title: 'Footer (页脚)',
+    description: '页面底部的信息区域，包含版权信息、友情链接、联系方式、社交媒体链接等。',
+    props: [],
+    events: []
+  }
+}
+
+const selectedNodeInfo = computed(() => {
+  return selectedNode.value ? nodeInfoMap[selectedNode.value] : null
+})
+
+const selectNode = (nodeId) => {
+  selectedNode.value = nodeId
+}
+</script>
+
+<style scoped>
+.component-hierarchy-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.tree-container {
+  overflow-x: auto;
+  padding: 10px 0;
+}
+
+.tree-children {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+  margin-left: 28px;
+}
+
+.tree-branch {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.connector {
+  width: 20px;
+  height: 2px;
+  background: var(--vp-c-divider);
+  margin-top: 24px;
+  position: relative;
+}
+
+.connector::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -10px;
+  width: 2px;
+  height: 12px;
+  background: var(--vp-c-divider);
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 180px;
+}
+
+.tree-node:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateX(4px);
+}
+
+.tree-node.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+}
+
+.root-node {
+  background: linear-gradient(135deg, var(--vp-c-brand-soft), var(--vp-c-bg));
+  border-width: 3px;
+}
+
+.leaf .node-icon {
+  opacity: 0.8;
+  transform: scale(0.9);
+}
+
+.node-icon {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.node-label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.node-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  margin-left: auto;
+  padding-left: 12px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.node-details {
+  margin-top: 20px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.node-details h5 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-brand);
+  font-size: 16px;
+}
+
+.node-details p {
+  margin: 0 0 12px 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.props-list, .events-list {
+  margin-top: 12px;
+}
+
+.props-list strong, .events-list strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--vp-c-text-1);
+  font-size: 13px;
+}
+
+.props-list ul, .events-list ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.props-list li, .events-list li {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+  font-family: monospace;
+  margin: 2px 0;
+}
+
+@media (max-width: 768px) {
+  .tree-node {
+    min-width: auto;
+    flex-wrap: wrap;
+  }
+
+  .node-desc {
+    width: 100%;
+    margin-top: 4px;
+    padding-left: 42px;
+    border-left: none;
+  }
+
+  .tree-children {
+    margin-left: 16px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
new file mode 100644
index 0000000..9a2869c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="event-bus-demo">
+    <div class="demo-header">
+      <h4>事件总线通信演示</h4>
+      <p class="hint">观察多个独立组件如何通过事件总线进行通信，注意内存管理的重要性</p>
+    </div>
+
+    <div class="architecture-view">
+      <div class="central-hub" :class="{ active: isTransmitting }">
+        <div class="hub-core">
+          <div class="hub-icon">🔌</div>
+          <div class="hub-label">Event Bus</div>
+          <div class="hub-status">{{ isTransmitting ? '传输中...' : '待机' }}</div>
+        </div>
+        <div class="hub-rings">
+          <div class="ring ring-1"></div>
+          <div class="ring ring-2"></div>
+          <div class="ring ring-3"></div>
+        </div>
+      </div>
+
+      <div class="connected-components">
+        <div
+          v-for="comp in components"
+          :key="comp.id"
+          class="component-node"
+          :class="{ active: comp.isActive, emitting: comp.isEmitting, listening: comp.isListening }"
+          :style="{ top: comp.y + '%', left: comp.x + '%' }"
+        >
+          <div class="node-header">
+            <span class="node-icon">{{ comp.icon }}</span>
+            <span class="node-name">{{ comp.name }}</span>
+          </div>
+          <div class="node-status">
+            <span class="status-dot" :class="{ active: comp.isListening }"></span>
+            {{ comp.isListening ? '监听中' : '未监听' }}
+          </div>
+          <button class="emit-btn" @click="emitEvent(comp)">
+            发送事件
+          </button>
+        </div>
+      </div>
+
+      <svg class="connection-lines" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <defs>
+          <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+            <polygon points="0 0, 6 3, 0 6" :fill="isTransmitting ? 'var(--vp-c-brand)' : 'var(--vp-c-divider)'" />
+          </marker>
+        </defs>
+        <line
+          v-for="(comp, index) in components"
+          :key="index"
+          class="connection-line"
+          :class="{ active: comp.isEmitting || isTransmitting }"
+          :x1="comp.x"
+          :y1="comp.y"
+          x2="50"
+          y2="50"
+          marker-end="url(#arrowhead)"
+        />
+      </svg>
+    </div>
+
+    <div class="event-log">
+      <div class="log-header">
+        <h5>📨 事件日志</h5>
+        <button class="clear-btn" @click="clearLogs">清空</button>
+      </div>
+      <div class="log-content">
+        <div v-if="logs.length === 0" class="empty-log">
+          暂无事件记录，点击组件上的"发送事件"按钮开始测试
+        </div>
+        <div
+          v-for="(log, index) in logs"
+          :key="index"
+          class="log-item"
+          :class="log.type"
+        >
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-type">{{ log.type === 'emit' ? '发送' : '接收' }}</span>
+          <span class="log-from">{{ log.from }}</span>
+          <span class="log-arrow">➜</span>
+          <span class="log-to">{{ log.to }}</span>
+          <span class="log-data">{{ log.data }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="memory-warning">
+      <div class="warning-icon">⚠️</div>
+      <div class="warning-content">
+        <h6>内存泄漏风险提醒</h6>
+        <p>使用 Event Bus 时，如果组件销毁前没有取消订阅（$off），会导致内存泄漏。推荐在 beforeUnmount 钩子中清理订阅。</p>
+        <pre><code>// 正确做法
+export default {
+  created() {
+    this.$bus.$on('event', this.handler)
+  },
+  beforeUnmount() {
+    this.$bus.$off('event', this.handler) // 必须取消订阅
+  }
+}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onBeforeUnmount } from 'vue'
+
+// 组件定义
+const components = reactive([
+  { id: 1, name: 'Header', icon: '📌', x: 15, y: 15, isActive: false, isEmitting: false, isListening: true },
+  { id: 2, name: 'Sidebar', icon: '📑', x: 85, y: 15, isActive: false, isEmitting: false, isListening: true },
+  { id: 3, name: 'ProductList', icon: '🛍️', x: 15, y: 85, isActive: false, isEmitting: false, isListening: true },
+  { id: 4, name: 'Cart', icon: '🛒', x: 85, y: 85, isActive: false, isEmitting: false, isListening: true }
+])
+
+const isTransmitting = ref(false)
+const logs = ref([])
+
+// 格式化时间
+const formatTime = () => {
+  const now = new Date()
+  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`
+}
+
+// 添加日志
+const addLog = (type, from, to, data) => {
+  logs.value.unshift({
+    type,
+    time: formatTime(),
+    from,
+    to,
+    data: JSON.stringify(data)
+  })
+  if (logs.value.length > 50) {
+    logs.value = logs.value.slice(0, 50)
+  }
+}
+
+// 发送事件
+const emitEvent = (comp) => {
+  // 触发发送动画
+  comp.isEmitting = true
+  isTransmitting.value = true
+
+  // 记录发送日志
+  addLog('emit', comp.name, 'Event Bus', { event: 'user:action', payload: { from: comp.name } })
+
+  // 模拟其他组件接收
+  components.forEach(target => {
+    if (target.id !== comp.id && target.isListening) {
+      setTimeout(() => {
+        target.isActive = true
+        addLog('receive', 'Event Bus', target.name, { event: 'user:action', payload: { from: comp.name } })
+        setTimeout(() => {
+          target.isActive = false
+        }, 500)
+      }, 300 + Math.random() * 200)
+    }
+  })
+
+  // 清理动画状态
+  setTimeout(() => {
+    comp.isEmitting = false
+    isTransmitting.value = false
+  }, 1000)
+}
+
+// 清空日志
+const clearLogs = () => {
+  logs.value = []
+}
+
+onBeforeUnmount(() => {
+  // 模拟清理订阅
+  components.forEach(comp => {
+    comp.isListening = false
+  })
+})
+</script>
+
+<style scoped>
+.event-bus-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.architecture-view {
+  position: relative;
+  min-height: 400px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.central-hub {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.hub-core {
+  position: relative;
+  z-index: 2;
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(135deg, var(--vp-c-brand), var(--vp-c-brand-light));
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.central-hub.active .hub-core {
+  transform: scale(1.1);
+  box-shadow: 0 0 30px var(--vp-c-brand);
+}
+
+.hub-icon {
+  font-size: 28px;
+  margin-bottom: 2px;
+}
+
+.hub-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+  text-align: center;
+}
+
+.hub-status {
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 2px;
+}
+
+.hub-rings {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 50%;
+  opacity: 0.3;
+  transition: all 0.3s ease;
+}
+
+.central-hub.active .ring {
+  border-color: var(--vp-c-brand);
+  opacity: 0.6;
+}
+
+.ring-1 { width: 140px; height: 140px; }
+.ring-2 { width: 180px; height: 180px; }
+.ring-3 { width: 220px; height: 220px; }
+
+.central-hub.active .ring-1 { animation: pulse1 1s ease infinite; }
+.central-hub.active .ring-2 { animation: pulse2 1s ease infinite 0.2s; }
+.central-hub.active .ring-3 { animation: pulse3 1s ease infinite 0.4s; }
+
+@keyframes pulse1 {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
+  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.3; }
+}
+
+@keyframes pulse2 {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
+  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.2; }
+}
+
+@keyframes pulse3 {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
+  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.1; }
+}
+
+.connected-components {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.component-node {
+  position: absolute;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  min-width: 120px;
+  pointer-events: auto;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.component-node:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.component-node.active {
+  border-color: #22c55e;
+  background: #f0fdf4;
+  box-shadow: 0 0 0 3px #bbf7d0;
+}
+
+.component-node.emitting {
+  border-color: var(--vp-c-brand);
+  animation: emitPulse 0.5s ease;
+}
+
+@keyframes emitPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.node-icon {
+  font-size: 16px;
+}
+
+.node-name {
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.node-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  transition: all 0.3s ease;
+}
+
+.status-dot.active {
+  background: #22c55e;
+  box-shadow: 0 0 4px #22c55e;
+  animation: blink 1.5s ease infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.emit-btn {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.emit-btn:hover {
+  background: var(--vp-c-brand-dark);
+}
+
+.connection-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.connection-line {
+  stroke: var(--vp-c-divider);
+  stroke-width: 2;
+  fill: none;
+  transition: all 0.3s ease;
+}
+
+.connection-line.active {
+  stroke: var(--vp-c-brand);
+  stroke-width: 3;
+  filter: drop-shadow(0 0 4px var(--vp-c-brand));
+}
+
+.event-log {
+  margin-top: 20px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.log-header h5 {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.clear-btn {
+  padding: 4px 12px;
+  background: transparent;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.clear-btn:hover {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+}
+
+.log-content {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.empty-log {
+  text-align: center;
+  padding: 40px;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+}
+
+.log-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.log-item.emit {
+  background: #eff6ff;
+  border-left: 3px solid #3b82f6;
+}
+
+.log-item.receive {
+  background: #f0fdf4;
+  border-left: 3px solid #22c55e;
+}
+
+.log-time {
+  color: var(--vp-c-text-3);
+  font-size: 11px;
+}
+
+.log-type {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.log-item.emit .log-type {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.log-item.receive .log-type {
+  background: #bbf7d0;
+  color: #15803d;
+}
+
+.log-from,
+.log-to {
+  color: var(--vp-c-text-2);
+}
+
+.log-arrow {
+  color: var(--vp-c-divider);
+}
+
+.log-data {
+  color: var(--vp-c-brand);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memory-warning {
+  margin-top: 20px;
+  padding: 16px;
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+}
+
+.warning-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.warning-content h6 {
+  margin: 0 0 4px 0;
+  color: #92400e;
+  font-size: 14px;
+}
+
+.warning-content p {
+  margin: 0 0 8px 0;
+  color: #a16207;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.warning-content pre {
+  margin: 0;
+  padding: 12px;
+  background: #fef3c7;
+  border-radius: 4px;
+  font-size: 12px;
+  overflow-x: auto;
+}
+
+.warning-content code {
+  color: #92400e;
+  font-family: monospace;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
new file mode 100644
index 0000000..2a903ba
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
@@ -0,0 +1,639 @@
+<template>
+  <div class="mobx-reactivity-demo">
+    <div class="demo-header">
+      <h4>MobX 响应式原理演示</h4>
+      <p class="hint">体验 MobX 的自动依赖追踪机制，理解 Observable、Action 和 Reaction 的关系</p>
+    </div>
+
+    <!-- 可视化图表 -->
+    <div class="visualization-area">
+      <div class="flow-diagram">
+        <!-- Observable -->
+        <div class="box-container observable-side">
+          <div class="box-title">Observable (可观察状态)</div>
+          <div class="state-boxes">
+            <div
+              v-for="item in todos"
+              :key="item.id"
+              class="state-item"
+              :class="{ completed: item.completed, changed: recentlyChanged === item.id }"
+            >
+              <span class="item-text">{{ item.text }}</span>
+              <span class="item-status">{{ item.completed ? '✓' : '○' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 连接箭头 -->
+        <div class="connection-area">
+          <div class="arrow-bidirectional">
+            <div class="arrow-label top">追踪依赖</div>
+            <div class="arrow-line">
+              <div class="particles">
+                <span v-for="i in 3" :key="i" class="particle">●</span>
+              </div>
+            </div>
+            <div class="arrow-label bottom">触发更新</div>
+          </div>
+        </div>
+
+        <!-- Reaction -->
+        <div class="box-container reaction-side">
+          <div class="box-title">Reaction (响应/副作用)</div>
+          <div class="reactions-list">
+            <div class="reaction-item computed">
+              <div class="reaction-header">
+                <span class="reaction-icon">🧮</span>
+                <span class="reaction-name">Computed: 待办统计</span>
+              </div>
+              <div class="reaction-value">
+                共 {{ todos.length }} 项，已完成 {{ completedCount }} 项
+              </div>
+            </div>
+
+            <div class="reaction-item autorun">
+              <div class="reaction-header">
+                <span class="reaction-icon">🔄</span>
+                <span class="reaction-name">Autorun: 自动保存</span>
+              </div>
+              <div class="reaction-status" :class="{ active: autoSaveActive }">
+                {{ autoSaveActive ? '💾 已自动保存到 localStorage' : '⏸️ 等待变更...' }}
+              </div>
+            </div>
+
+            <div class="reaction-item reaction">
+              <div class="reaction-header">
+                <span class="reaction-icon">👀</span>
+                <span class="reaction-name">Reaction: 变更日志</span>
+              </div>
+              <div class="reaction-log">
+                <div v-for="(log, index) in changeLogs" :key="index" class="log-entry">
+                  <span class="log-time">{{ log.time }}</span>
+                  <span class="log-action">{{ log.action }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action 区域 -->
+    <div class="action-area">
+      <div class="action-title">🎮 交互控制台 (Action)</div>
+      <div class="action-controls">
+        <div class="input-group">
+          <input v-model="newTodoText" placeholder="输入待办事项..." @keyup.enter="addTodo" />
+          <button @click="addTodo">添加</button>
+        </div>
+        <div class="quick-actions">
+          <button @click="completeAll">全部完成</button>
+          <button @click="clearCompleted">清除已完成</button>
+          <button @click="reset">重置</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 说明区域 -->
+    <div class="explanation-area">
+      <div class="explanation-card">
+        <h5>📦 Observable (可观察状态)</h5>
+        <p>使用 <code>observable</code> 或类属性装饰器 <code>@observable</code> 定义的状态。当状态变化时，所有依赖它的 Reaction 会自动重新执行。</p>
+      </div>
+
+      <div class="explanation-card">
+        <h5>⚡ Action (动作)</h5>
+        <p>使用 <code>action</code> 或 <code>@action</code> 装饰器标记的方法。用于修改 Observable 状态。Action 会批量处理变更通知，避免中间状态的重复渲染。</p>
+      </div>
+
+      <div class="explanation-card"
+>
+        <h5>🔄 Reaction (响应)</h5>
+        <p>当 Observable 状态变化时自动执行的副作用。包括：</p>
+        <ul>
+          <li><code>autorun</code>: 自动追踪依赖并执行</li>
+          <li><code>reaction</code>: 对特定数据变化作出反应</li>
+          <li><code>when</code>: 条件满足时执行一次</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+// 状态
+const todos = ref([
+  { id: 1, text: '学习 MobX', completed: false },
+  { id: 2, text: '理解响应式原理', completed: true }
+])
+
+const newTodoText = ref('')
+const recentlyChanged = ref(null)
+const autoSaveActive = ref(false)
+const changeLogs = ref([])
+
+// 计算属性（模拟 MobX 的 computed）
+const completedCount = computed(() => {
+  return todos.value.filter(t => t.completed).length
+})
+
+// 方法（模拟 MobX 的 action）
+const addTodo = () => {
+  if (!newTodoText.value.trim()) return
+
+  const newTodo = {
+    id: Date.now(),
+    text: newTodoText.value,
+    completed: false
+  }
+
+  todos.value.push(newTodo)
+  recentlyChanged.value = newTodo.id
+  newTodoText.value = ''
+
+  setTimeout(() => {
+    recentlyChanged.value = null
+  }, 500)
+
+  addLog('添加待办', newTodo.text)
+}
+
+const toggleTodo = (id) => {
+  const todo = todos.value.find(t => t.id === id)
+  if (todo) {
+    todo.completed = !todo.completed
+    recentlyChanged.value = id
+    setTimeout(() => {
+      recentlyChanged.value = null
+    }, 500)
+    addLog(todo.completed ? '完成待办' : '取消完成', todo.text)
+  }
+}
+
+const completeAll = () => {
+  todos.value.forEach(t => t.completed = true)
+  addLog('全部完成', `${todos.value.length} 项`)
+}
+
+const clearCompleted = () => {
+  const count = todos.value.filter(t => t.completed).length
+  todos.value = todos.value.filter(t => !t.completed)
+  addLog('清除已完成', `${count} 项`)
+}
+
+const reset = () => {
+  todos.value = [
+    { id: 1, text: '学习 MobX', completed: false },
+    { id: 2, text: '理解响应式原理', completed: true }
+  ]
+  changeLogs.value = []
+  addLog('重置', '恢复初始状态')
+}
+
+const addLog = (action, detail) => {
+  const now = new Date()
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+  changeLogs.value.unshift({ time, action, detail })
+  if (changeLogs.value.length > 10) {
+    changeLogs.value = changeLogs.value.slice(0, 10)
+  }
+}
+
+// 模拟 autorun - 自动保存
+watch(todos, () => {
+  autoSaveActive.value = true
+  setTimeout(() => {
+    autoSaveActive.value = false
+  }, 1000)
+}, { deep: true })
+</script>
+
+<style scoped>
+.mobx-reactivity-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.visualization-area {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.flow-diagram {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 20px;
+  align-items: start;
+}
+
+@media (max-width: 968px) {
+  .flow-diagram {
+    grid-template-columns: 1fr;
+  }
+
+  .connection-area {
+    transform: rotate(90deg);
+    padding: 40px 0 !important;
+  }
+}
+
+.box-container {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.box-container.observable-side {
+  border-color: #ff6b6b;
+}
+
+.box-container.reaction-side {
+  border-color: #4ecdc4;
+}
+
+.box-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.state-boxes {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.state-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.state-item:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateX(4px);
+}
+
+.state-item.completed {
+  background: #f0fdf4;
+  border-color: #86efac;
+}
+
+.state-item.changed {
+  animation: highlight 0.5s ease;
+}
+
+@keyframes highlight {
+  0%, 100% { background: var(--vp-c-bg); }
+  50% { background: #fef3c7; }
+}
+
+.item-text {
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+
+.state-item.completed .item-text {
+  text-decoration: line-through;
+  color: var(--vp-c-text-3);
+}
+
+.item-status {
+  font-size: 14px;
+  color: #22c55e;
+}
+
+.connection-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.arrow-bidirectional {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.arrow-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  padding: 4px 8px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.arrow-label.top {
+  margin-bottom: 4px;
+}
+
+.arrow-label.bottom {
+  margin-top: 4px;
+}
+
+.arrow-line {
+  position: relative;
+  width: 3px;
+  height: 80px;
+  background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
+  border-radius: 2px;
+}
+
+.particles {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 10px 0;
+}
+
+.particle {
+  font-size: 8px;
+  color: var(--vp-c-brand);
+  animation: flow 1.5s linear infinite;
+  opacity: 0;
+}
+
+.particle:nth-child(1) { animation-delay: 0s; }
+.particle:nth-child(2) { animation-delay: 0.5s; }
+.particle:nth-child(3) { animation-delay: 1s; }
+
+@keyframes flow {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+}
+
+.reactions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.reaction-item {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 12px;
+  transition: all 0.3s ease;
+}
+
+.reaction-item.computed {
+  border-left: 4px solid #8b5cf6;
+}
+
+.reaction-item.autorun {
+  border-left: 4px solid #f59e0b;
+}
+
+.reaction-item.reaction {
+  border-left: 4px solid #ec4899;
+}
+
+.reaction-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.reaction-icon {
+  font-size: 14px;
+}
+
+.reaction-name {
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.reaction-value {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+  padding: 4px 8px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.reaction-status {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  padding: 4px 8px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.reaction-status.active {
+  color: #22c55e;
+  background: #dcfce7;
+}
+
+.reaction-log {
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.log-entry {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+  padding: 3px 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+}
+
+.log-action {
+  color: var(--vp-c-text-2);
+}
+
+.action-area {
+  margin-top: 20px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.action-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.action-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.input-group {
+  display: flex;
+  gap: 8px;
+}
+
+.input-group input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+
+.input-group input:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+
+.input-group button {
+  padding: 8px 16px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.input-group button:hover {
+  background: var(--vp-c-brand-dark);
+}
+
+.quick-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.quick-actions button {
+  padding: 6px 12px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.quick-actions button:hover {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+}
+
+.explanation-area {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.explanation-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.explanation-card h5 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.explanation-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.explanation-card code {
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--vp-c-brand);
+}
+
+.explanation-card ul {
+  margin: 8px 0 0 0;
+  padding-left: 18px;
+}
+
+.explanation-card li {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  margin: 4px 0;
+}
+
+@media (max-width: 640px) {
+  .quick-actions {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
new file mode 100644
index 0000000..64f9ce0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
@@ -0,0 +1,587 @@
+<template>
+  <div class="props-flow-demo">
+    <div class="demo-header">
+      <h4>Props 数据流演示</h4>
+      <p class="hint">观察父组件如何通过 props 向子组件传递数据，以及子组件如何通过事件向父组件通信</p>
+    </div>
+
+    <div class="flow-container">
+      <!-- 父组件可视化 -->
+      <div class="parent-component">
+        <div class="component-header">
+          <span class="tag">Parent.vue</span>
+          <span class="badge blue">数据持有者</span>
+        </div>
+
+        <div class="data-box">
+          <div class="data-title">data() {</div>
+          <div class="data-item" :class="{ changed: hasChanged }">
+            <span class="key">user:</span>
+            <span class="value">{ name: '{{ userName }}', age: {{ userAge }} }</span>
+          </div>
+          <div class="data-item">
+            <span class="key">theme:</span>
+            <span class="value">'{{ theme }}'</span>
+          </div>
+          <div class="data-title">}</div>
+        </div>
+
+        <div class="props-config">
+          <div class="config-title">传递给子组件的 Props:</div>
+          <div class="prop-tag" v-for="prop in activeProps" :key="prop">
+            :{{ prop }}="{{ prop }}"
+          </div>
+        </div>
+      </div>
+
+      <!-- 流动动画 -->
+      <div class="flow-animation">
+        <div class="flow-line" :class="{ active: isFlowing }">
+          <div class="flow-particles" v-if="isFlowing">
+            <span v-for="i in 5" :key="i" class="particle">●</span>
+          </div>
+        </div>
+        <div class="flow-label" :class="{ active: isFlowing }">
+          {{ isFlowing ? '传递 Props' : '等待交互' }}
+        </div>
+      </div>
+
+      <!-- 子组件可视化 -->
+      <div class="child-component">
+        <div class="component-header">
+          <span class="tag">Child.vue</span>
+          <span class="badge green">数据展示</span>
+        </div>
+
+        <div class="props-box">
+          <div class="props-title">props: {</div>
+          <div class="prop-item" v-for="prop in activeProps" :key="prop" :class="{ receiving: isFlowing }">
+            <span class="prop-name">{{ prop }}</span>
+            <span class="prop-type">{ type: {{ getPropType(prop) }} }</span>
+          </div>
+          <div class="props-title">}</div>
+        </div>
+
+        <div class="render-preview">
+          <div class="preview-title">渲染预览:</div>
+          <div class="preview-content">
+            <div class="user-card">
+              <div class="avatar">👤</div>
+              <div class="user-info">
+                <div class="user-name">{{ userName || '未知用户' }}</div>
+                <div class="user-meta">
+                  <span class="age">{{ userAge }}岁</span>
+                  <span class="theme-badge" :class="theme">{{ theme }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="emit-section">
+          <div class="emit-title">向父组件通信:</div>
+          <button class="emit-btn" @click="emitUpdate">$emit('update', { name: '王五' })</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="interaction-panel">
+      <div class="panel-title">🎮 交互控制台</div>
+      <div class="control-group">
+        <label>修改父组件数据:</label>
+        <input v-model="userName" placeholder="用户名" @input="triggerFlow" />
+        <input v-model.number="userAge" type="number" placeholder="年龄" @input="triggerFlow" />
+        <select v-model="theme" @change="triggerFlow">
+          <option value="light">Light 主题</option>
+          <option value="dark">Dark 主题</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <label>选择传递的 Props:</label>
+        <label class="checkbox"><input type="checkbox" v-model="propSelection.user" /> user</label>
+        <label class="checkbox"><input type="checkbox" v-model="propSelection.theme" /> theme</label>
+      </div>
+      <div class="flow-status" :class="{ active: isFlowing }">
+        {{ isFlowing ? '⬇️ 数据正在流动...' : '⏸️ 等待数据变化' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+// 父组件数据
+const userName = ref('张三')
+const userAge = ref(25)
+const theme = ref('light')
+const hasChanged = ref(false)
+
+// Props 选择
+const propSelection = ref({
+  user: true,
+  theme: true
+})
+
+const activeProps = computed(() => {
+  return Object.entries(propSelection.value)
+    .filter(([, v]) => v)
+    .map(([k]) => k)
+})
+
+// 流动动画控制
+const isFlowing = ref(false)
+let flowTimeout = null
+
+const triggerFlow = () => {
+  hasChanged.value = true
+  isFlowing.value = true
+  clearTimeout(flowTimeout)
+  flowTimeout = setTimeout(() => {
+    isFlowing.value = false
+    hasChanged.value = false
+  }, 1500)
+}
+
+// 监听数据变化
+watch([userName, userAge, theme], () => {
+  triggerFlow()
+}, { deep: true })
+
+const getPropType = (prop) => {
+  const types = {
+    user: 'Object',
+    theme: 'String'
+  }
+  return types[prop] || 'Any'
+}
+
+const emitUpdate = () => {
+  userName.value = '王五'
+  triggerFlow()
+}
+</script>
+
+<style scoped>
+.props-flow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.flow-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 968px) {
+  .flow-container {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-animation {
+    flex-direction: row !important;
+    padding: 12px !important;
+  }
+
+  .flow-line {
+    width: 100% !important;
+    height: 2px !important;
+  }
+}
+
+.parent-component,
+.child-component {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.component-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.tag {
+  font-family: monospace;
+  font-size: 13px;
+  padding: 4px 8px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+}
+
+.badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.badge.blue {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.badge.green {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.data-box,
+.props-box {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 12px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.data-title,
+.props-title {
+  color: var(--vp-c-text-3);
+  margin-bottom: 4px;
+}
+
+.data-item,
+.prop-item {
+  padding: 4px 8px;
+  margin: 2px 0;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+}
+
+.data-item.changed {
+  background: #fef3c7;
+  animation: pulse 0.5s ease;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+
+.data-item .key {
+  color: var(--vp-c-brand);
+}
+
+.data-item .value {
+  color: var(--vp-c-text-2);
+}
+
+.prop-item.receiving {
+  background: #dcfce7;
+  animation: receive 0.5s ease;
+}
+
+@keyframes receive {
+  0% { transform: translateX(-10px); opacity: 0.5; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+
+.prop-name {
+  color: var(--vp-c-brand);
+}
+
+.prop-type {
+  color: var(--vp-c-text-3);
+  font-size: 11px;
+  margin-left: 8px;
+}
+
+.props-config {
+  margin-bottom: 12px;
+}
+
+.config-title {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 6px;
+}
+
+.prop-tag {
+  display: inline-block;
+  font-family: monospace;
+  font-size: 12px;
+  padding: 4px 8px;
+  margin: 2px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+}
+
+.flow-animation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.flow-line {
+  width: 2px;
+  height: 80px;
+  background: var(--vp-c-divider);
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.flow-line.active {
+  background: var(--vp-c-brand);
+  box-shadow: 0 0 10px var(--vp-c-brand);
+}
+
+.flow-particles {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.particle {
+  color: var(--vp-c-brand);
+  font-size: 8px;
+  animation: flowDown 1s linear infinite;
+  opacity: 0;
+}
+
+.particle:nth-child(1) { animation-delay: 0s; }
+.particle:nth-child(2) { animation-delay: 0.2s; }
+.particle:nth-child(3) { animation-delay: 0.4s; }
+.particle:nth-child(4) { animation-delay: 0.6s; }
+.particle:nth-child(5) { animation-delay: 0.8s; }
+
+@keyframes flowDown {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+}
+
+.flow-label {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.flow-label.active {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.render-preview {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.preview-title {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
+}
+
+.preview-content {
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.user-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  font-size: 32px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-brand-soft);
+  border-radius: 50%;
+}
+
+.user-info {
+  flex: 1;
+}
+
+.user-name {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+}
+
+.user-meta {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.age {
+  color: var(--vp-c-text-2);
+}
+
+.theme-badge {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.theme-badge.light {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.theme-badge.dark {
+  background: #374151;
+  color: #f3f4f6;
+}
+
+.emit-section {
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.emit-title {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
+}
+
+.emit-btn {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: monospace;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.emit-btn:hover {
+  background: var(--vp-c-brand-dark);
+  transform: translateY(-1px);
+}
+
+.interaction-panel {
+  margin-top: 20px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.panel-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.control-group {
+  margin-bottom: 16px;
+}
+
+.control-group label {
+  display: block;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+}
+
+.control-group input,
+.control-group select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 14px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  margin-bottom: 8px;
+}
+
+.control-group input:focus,
+.control-group select:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+
+.checkbox {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.checkbox input {
+  width: auto !important;
+  margin: 0 !important;
+}
+
+.flow-status {
+  padding: 10px 16px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  transition: all 0.3s ease;
+}
+
+.flow-status.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
new file mode 100644
index 0000000..4e7d9fe
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
@@ -0,0 +1,540 @@
+<template>
+  <div class="redux-flow-demo">
+    <div class="demo-header">
+      <h4>Redux 数据流演示</h4>
+      <p class="hint">理解 Redux 的单向数据流：Action → Reducer → Store → View</p>
+    </div>
+
+    <div class="flow-diagram">
+      <!-- 视图层 -->
+      <div class="flow-layer view-layer">
+        <div class="layer-header">
+          <span class="layer-icon">👁️</span>
+          <span class="layer-title">View (视图层)</span>
+        </div>
+        <div class="view-content">
+          <div class="counter-display">
+            <span class="counter-label">当前计数:</span>
+            <span class="counter-value" :class="{ changed: countChanged }">{{ count }}</span>
+          </div>
+          <div class="action-buttons">
+            <button class="action-btn" @click="dispatchAction('INCREMENT')">
+              <span class="btn-icon">➕</span>
+              增加
+            </button>
+            <button class="action-btn" @click="dispatchAction('DECREMENT')">
+              <span class="btn-icon">➖</span>
+              减少
+            </button>
+            <button class="action-btn" @click="dispatchAction('RESET')">
+              <span class="btn-icon">🔄</span>
+              重置
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 箭头：View -> Action -->
+      <div class="flow-arrow-container">
+        <div class="flow-arrow" :class="{ active: flowStage === 'action' }">
+          <div class="arrow-line"></div>
+          <div class="arrow-head">▼</div>
+        </div>
+        <div class="arrow-label" :class="{ active: flowStage === 'action' }">
+          dispatch(action)
+        </div>
+      </div>
+
+      <!-- Action 层 -->
+      <div class="flow-layer action-layer" :class="{ active: flowStage === 'action' }">
+        <div class="layer-header">
+          <span class="layer-icon">📨</span>
+          <span class="layer-title">Action (动作)</span>
+        </div>
+        <div class="action-content">
+          <div class="action-object">
+            <div class="code-block">
+              <pre><code>{
+  type: "{{ currentAction.type }}",
+  payload: {{ currentAction.payload || 'undefined' }}
+}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 箭头：Action -> Reducer -->
+      <div class="flow-arrow-container">
+        <div class="flow-arrow" :class="{ active: flowStage === 'reducer' }">
+          <div class="arrow-line"></div>
+          <div class="arrow-head">▼</div>
+        </div>
+        <div class="arrow-label" :class="{ active: flowStage === 'reducer' }">
+          reduce(state, action)
+        </div>
+      </div>
+
+      <!-- Reducer 层 -->
+      <div class="flow-layer reducer-layer" :class="{ active: flowStage === 'reducer' }">
+        <div class="layer-header">
+          <span class="layer-icon">⚙️</span>
+          <span class="layer-title">Reducer (纯函数)</span>
+        </div>
+        <div class="reducer-content">
+          <div class="reducer-function">
+            <div class="code-block">
+              <pre><code>function reducer(state, action) {
+  switch (action.type) {
+    case "{{ currentAction.type }}":
+      return {
+        ...state,
+        count: (state?.count ?? 0) {{ currentAction.operator }} {{ currentAction.step || 1 }}
+      };
+    default:
+      return state;
+  }
+}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 箭头：Reducer -> Store -->
+      <div class="flow-arrow-container">
+        <div class="flow-arrow" :class="{ active: flowStage === 'store' }">
+          <div class="arrow-line"></div>
+          <div class="arrow-head">▼</div>
+        </div>
+        <div class="arrow-label" :class="{ active: flowStage === 'store' }">
+          update store
+        </div>
+      </div>
+
+      <!-- Store 层 -->
+      <div class="flow-layer store-layer" :class="{ active: flowStage === 'store' }">
+        <div class="layer-header">
+          <span class="layer-icon">🏪</span>
+          <span class="layer-title">Store (单一数据源)</span>
+        </div>
+        <div class="store-content">
+          <div class="store-state">
+            <div class="state-label">Current State:</div>
+            <div class="code-block">
+              <pre><code>{
+  count: {{ count }}
+}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 箭头：Store -> View -->
+      <div class="flow-arrow-container">
+        <div class="flow-arrow" :class="{ active: flowStage === 'view' }">
+          <div class="arrow-line"></div>
+          <div class="arrow-head">▲</div>
+        </div>
+        <div class="arrow-label" :class="{ active: flowStage === 'view' }">
+          notify subscribers
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部说明 -->
+    <div class="redux-principles">
+      <h5>📋 Redux 三大原则</h5>
+      <div class="principles-grid">
+        <div class="principle-card">
+          <div class="principle-number">1</div>
+          <h6>单一数据源</h6>
+          <p>整个应用的 state 储存在唯一的 store 中</p>
+        </div>
+        <div class="principle-card">
+          <div class="principle-number">2</div>
+          <h6>State 只读</h6>
+          <p>唯一改变 state 的方法是触发 action</p>
+        </div>
+        <div class="principle-card">
+          <div class="principle-number">3</div>
+          <h6>纯函数修改</h6>
+          <p>Reducer 必须是纯函数，接收旧 state 返回新 state</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 状态
+const count = ref(0)
+const countChanged = ref(false)
+const flowStage = ref('')
+
+// 当前 action
+const currentAction = reactive({
+  type: '',
+  payload: null,
+  operator: '+',
+  step: 1
+})
+
+// 调度 action
+const dispatchAction = async (actionType) => {
+  flowStage.value = 'action'
+
+  // 设置当前 action
+  currentAction.type = actionType
+
+  switch (actionType) {
+    case 'INCREMENT':
+      currentAction.payload = undefined
+      currentAction.operator = '+'
+      currentAction.step = 1
+      break
+    case 'DECREMENT':
+      currentAction.payload = undefined
+      currentAction.operator = '-'
+      currentAction.step = 1
+      break
+    case 'RESET':
+      currentAction.payload = undefined
+      currentAction.operator = '='
+      currentAction.step = 0
+      break
+  }
+
+  // 模拟流程
+  await wait(600)
+  flowStage.value = 'reducer'
+  await wait(800)
+  flowStage.value = 'store'
+  await wait(600)
+  flowStage.value = 'view'
+
+  // 更新状态
+  switch (actionType) {
+    case 'INCREMENT':
+      count.value++
+      break
+    case 'DECREMENT':
+      count.value--
+      break
+    case 'RESET':
+      count.value = 0
+      break
+  }
+
+  countChanged.value = true
+  setTimeout(() => {
+    countChanged.value = false
+  }, 300)
+
+  await wait(400)
+  flowStage.value = ''
+}
+
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+</script>
+
+<style scoped>
+.redux-flow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.flow-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flow-layer {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.3s ease;
+}
+
+.flow-layer.active {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+  transform: scale(1.02);
+}
+
+.layer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.layer-icon {
+  font-size: 20px;
+}
+
+.layer-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.view-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.counter-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.counter-label {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.counter-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  transition: all 0.3s ease;
+}
+
+.counter-value.changed {
+  transform: scale(1.2);
+  color: #22c55e;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: var(--vp-c-brand-dark);
+  transform: translateY(-1px);
+}
+
+.btn-icon {
+  font-size: 14px;
+}
+
+.flow-arrow-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.flow-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0.5;
+  transition: all 0.3s ease;
+}
+
+.flow-arrow.active {
+  opacity: 1;
+}
+
+.arrow-line {
+  width: 2px;
+  height: 20px;
+  background: var(--vp-c-divider);
+  transition: all 0.3s ease;
+}
+
+.flow-arrow.active .arrow-line {
+  background: var(--vp-c-brand);
+  box-shadow: 0 0 8px var(--vp-c-brand);
+}
+
+.arrow-head {
+  color: var(--vp-c-divider);
+  font-size: 12px;
+  line-height: 1;
+  transition: all 0.3s ease;
+}
+
+.flow-arrow.active .arrow-head {
+  color: var(--vp-c-brand);
+  animation: bounce 0.5s ease infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(2px); }
+}
+
+.arrow-label {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  transition: all 0.3s ease;
+}
+
+.arrow-label.active {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.action-content,
+.reducer-content,
+.store-content {
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.action-object {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.code-block {
+  background: #1e1e1e;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: 'Fira Code', 'Monaco', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+.reducer-function {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.store-state {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.state-label {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.redux-principles {
+  margin-top: 24px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.redux-principles h5 {
+  margin: 0 0 16px 0;
+  color: var(--vp-c-text-1);
+  font-size: 16px;
+}
+
+.principles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.principle-card {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border-left: 4px solid var(--vp-c-brand);
+}
+
+.principle-number {
+  width: 28px;
+  height: 28px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.principle-card h6 {
+  margin: 0 0 6px 0;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+}
+
+.principle-card p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .principles-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
new file mode 100644
index 0000000..c32cbf8
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="state-management-comparison">
+    <div class="demo-header">
+      <h4>状态管理库全景对比</h4>
+      <p class="hint">全面对比主流状态管理方案的特性、适用场景和学习曲线</p>
+    </div>
+
+    <!-- 简化版对比表格 -->
+    <div class="comparison-table-wrapper">
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th class="feature-col">特性</th>
+            <th v-for="lib in libraries" :key="lib.id" class="lib-col">
+              <div class="lib-header">
+                <span class="lib-icon">{{ lib.icon }}</span>
+                <span class="lib-name">{{ lib.name }}</span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="feature-name">学习曲线</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <div class="curve-bar">
+                <div class="curve-fill" :style="{ width: lib.learningCurve + '%', background: getCurveColor(lib.learningCurve) }"></div>
+              </div>
+              <span class="curve-label">{{ getCurveLabel(lib.learningCurve) }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-name">包大小</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <span class="size-badge" :class="getSizeClass(lib.bundleSize)">{{ lib.bundleSize }}</span>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-name">TypeScript</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <span class="boolean-badge" :class="{ yes: lib.typescript, no: !lib.typescript }">
+                {{ lib.typescript ? '✓' : '✗' }}
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-name">开发工具</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <span class="boolean-badge" :class="{ yes: lib.devtools, no: !lib.devtools }">
+                {{ lib.devtools ? '✓' : '✗' }}
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-name">SSR 支持</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <span class="boolean-badge" :class="{ yes: lib.ssr, no: !lib.ssr }">
+                {{ lib.ssr ? '✓' : '✗' }}
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-name">适用框架</td>
+            <td v-for="lib in libraries" :key="lib.id" class="feature-value">
+              <span class="text-value">{{ lib.framework }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 选中库的详细信息 -->
+    <div v-if="selectedLibrary" class="library-detail">
+      <div class="detail-header">
+        <span class="detail-icon">{{ selectedLibrary.icon }}</span>
+        <div class="detail-title">
+          <h5>{{ selectedLibrary.name }}</h5>
+          <span class="detail-tagline">{{ selectedLibrary.tagline }}</span>
+        </div>
+        <a :href="selectedLibrary.docsUrl" target="_blank" class="docs-link">
+          官方文档 ↗
+        </a>
+      </div>
+
+      <div class="detail-grid">
+        <div class="detail-section">
+          <h6>🎯 适用场景</h6>
+          <ul>
+            <li v-for="(scenario, index) in selectedLibrary.scenarios" :key="index">{{ scenario }}</li>
+          </ul>
+        </div>
+
+        <div class="detail-section">
+          <h6>✅ 优势</h6>
+          <ul class="advantages">
+            <li v-for="(pro, index) in selectedLibrary.pros" :key="index">{{ pro }}</li>
+          </ul>
+        </div>
+
+        <div class="detail-section">
+          <h6>❌ 劣势</h6>
+          <ul class="disadvantages">
+            <li v-for="(con, index) in selectedLibrary.cons" :key="index">{{ con }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- 决策流程图 -->
+    <div class="decision-flow">
+      <h5>🤔 如何选择？</h5>
+      <div class="flow-chart">
+        <div class="flow-node start">开始</div>
+        <div class="flow-arrow">↓</div>
+        <div class="flow-node question">需要跨框架支持？</div>
+        <div class="flow-arrow">↓ 是</div>
+        <div class="flow-node result">考虑 Pinia / Vuex</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const libraries = [
+  {
+    id: 'redux',
+    name: 'Redux',
+    icon: '🔄',
+    tagline: 'JavaScript 应用的可预测状态容器',
+    docsUrl: 'https://redux.js.org/',
+    scenarios: ['大型企业级应用', '需要严格数据流控制', '复杂的状态逻辑'],
+    pros: ['严格的数据流，易于调试', '强大的中间件生态', '时间旅行调试', '可预测的状态更新'],
+    cons: ['学习曲线陡峭', '样板代码较多', '小型项目可能过于复杂'],
+    codeExample: '// Redux 示例代码',
+    learningCurve: 80,
+    bundleSize: '7KB',
+    typescript: true,
+    devtools: true,
+    ssr: true,
+    framework: 'React/Vue/Angular'
+  },
+  {
+    id: 'vuex',
+    name: 'Vuex',
+    icon: '🌿',
+    tagline: 'Vue.js 的官方状态管理库',
+    docsUrl: 'https://vuex.vuejs.org/',
+    scenarios: ['Vue 2/3 中大型项目', '需要模块化管理状态', '团队成员熟悉 Vue 生态'],
+    pros: ['与 Vue 深度集成', '响应式系统', '模块化管理', '优秀的开发工具'],
+    cons: ['仅适用于 Vue', 'Vue 3 中被 Pinia 取代', '相对冗余的 API'],
+    codeExample: '// Vuex 示例代码',
+    learningCurve: 60,
+    bundleSize: '4KB',
+    typescript: true,
+    devtools: true,
+    ssr: true,
+    framework: 'Vue Only'
+  },
+  {
+    id: 'pinia',
+    name: 'Pinia',
+    icon: '🍍',
+    tagline: '直观、类型安全、灵活的 Vue Store',
+    docsUrl: 'https://pinia.vuejs.org/',
+    scenarios: ['Vue 3 新项目首选', '重视 TypeScript 支持', '希望简化状态管理'],
+    pros: ['轻量级设计', '原生 TypeScript 支持', '组合式 API 风格', '代码更简洁'],
+    cons: ['Vue 3 专属', '生态系统相对年轻', '大型项目需自定义规范'],
+    codeExample: '// Pinia 示例代码',
+    learningCurve: 30,
+    bundleSize: '2KB',
+    typescript: true,
+    devtools: true,
+    ssr: true,
+    framework: 'Vue 3 Only'
+  }
+]
+
+const features = [
+  { key: 'learningCurve', label: '学习曲线', icon: '📈' },
+  { key: 'bundleSize', label: '包大小', icon: '📦' },
+  { key: 'typescript', label: 'TypeScript', icon: '🔷' },
+  { key: 'devtools', label: '开发工具', icon: '🛠️' },
+  { key: 'ssr', label: 'SSR 支持', icon: '🚀' },
+  { key: 'framework', label: '适用框架', icon: '🔧' }
+]
+
+const selectedLib = ref(null)
+
+const selectedLibrary = computed(() => {
+  if (!selectedLib.value) return null
+  return libraries.find(lib => lib.id === selectedLib.value)
+})
+
+function selectLib(id) {
+  selectedLib.value = id
+}
+
+function getValue(lib, key) {
+  return lib[key]
+}
+
+function getCurveColor(value) {
+  if (value <= 30) return '#22c55e'
+  if (value <= 60) return '#f59e0b'
+  return '#ef4444'
+}
+
+function getCurveLabel(value) {
+  if (value <= 30) return '简单'
+  if (value <= 60) return '中等'
+  return '陡峭'
+}
+
+function getSizeClass(size) {
+  const num = parseInt(size)
+  if (num <= 2) return 'small'
+  if (num <= 5) return 'medium'
+  return 'large'
+}
+</script>
+
+<style scoped>
+.state-management-comparison {
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.demo-header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.demo-header h4 {
+  margin: 0 0 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.comparison-table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  text-align: left;
+}
+
+.comparison-table th {
+  background: var(--vp-c-bg);
+  font-weight: 600;
+}
+
+.feature-col {
+  width: 120px;
+  background: var(--vp-c-bg-soft);
+}
+
+.lib-col {
+  min-width: 120px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.lib-col:hover,
+.lib-col.selected {
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.lib-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lib-icon {
+  font-size: 1.2rem;
+}
+
+.lib-name {
+  font-weight: 500;
+}
+
+.feature-name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+
+.feature-value {
+  text-align: center;
+}
+
+.curve-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--vp-c-divider);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+}
+
+.curve-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+
+.curve-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.size-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.size-badge.small {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.size-badge.medium {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.size-badge.large {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.boolean-badge {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.boolean-badge.yes {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.boolean-badge.no {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.text-value {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.library-detail {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-icon {
+  font-size: 2rem;
+}
+
+.detail-title {
+  flex: 1;
+}
+
+.detail-title h5 {
+  margin: 0 0 0.25rem;
+  font-size: 1.2rem;
+}
+
+.detail-tagline {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.docs-link {
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 0.85rem;
+  transition: opacity 0.2s;
+}
+
+.docs-link:hover {
+  opacity: 0.9;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.detail-section {
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.detail-section h6 {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-section ul {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+.detail-section li {
+  margin: 0.5rem 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.code-block {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.code-block pre {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.code-block code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.decision-flow {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.decision-flow h5 {
+  margin: 0 0 1rem;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.flow-chart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.flow-node {
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.flow-node.start {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.flow-node.question {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+}
+
+.flow-node.result {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+  border: 2px solid #22c55e;
+}
+
+.flow-arrow {
+  font-size: 1.2rem;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 768px) {
+  .comparison-table {
+    font-size: 0.8rem;
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.5rem;
+  }
+
+  .lib-icon {
+    font-size: 1rem;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
new file mode 100644
index 0000000..d18e675
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
@@ -0,0 +1,546 @@
+<template>
+  <div class="vuex-pinia-demo">
+    <div class="demo-header">
+      <h4>Vuex vs Pinia 深度对比</h4>
+      <p class="hint">体验 Vue 生态两种主流状态管理方案在语法、类型支持和开发体验上的差异</p>
+    </div>
+
+    <div class="comparison-container">
+      <!-- Vuex 面板 -->
+      <div class="panel vuex-panel">
+        <div class="panel-header">
+          <div class="panel-title">
+            <span class="panel-icon">🌿</span>
+            <span>Vuex</span>
+          </div>
+          <span class="panel-badge legacy">经典</span>
+        </div>
+
+        <div class="panel-content">
+          <!-- Store 定义 -->
+          <div class="code-section">
+            <div class="code-header">
+              <span class="file-icon">📄</span>
+              <span class="file-name">store/index.js</span>
+            </div>
+            <div class="code-block" v-pre>
+              <pre><code>import { createStore } from 'vuex'
+
+export default createStore({
+  // State
+  state: {
+    count: 0,
+    user: null
+  },
+
+  // Getters
+  getters: {
+    doubleCount: state => {
+      return (state?.count ?? 0) * 2
+    },
+    isLoggedIn: state => !!(state?.user)
+  },
+
+  // Mutations (同步)
+  mutations: {
+    INCREMENT(state) {
+      state.count = (state?.count ?? 0) + 1
+    },
+    SET_USER(state, user) {
+      state.user = user
+    }
+  },
+
+  // Actions (可异步)
+  actions: {
+    incrementAsync({ commit }) {
+      setTimeout(() => {
+        commit('INCREMENT')
+      }, 1000)
+    },
+    async fetchUser({ commit }, userId) {
+      const response =
+        await fetch(\`/api/users/\${userId}\`)
+      const user = await response.json()
+      commit('SET_USER', user)
+    }
+  }
+})</code></pre>
+            </div>
+          </div>
+
+          <!-- 组件中使用 -->
+          <div class="code-section">
+            <div class="code-header">
+              <span class="file-icon">📄</span>
+              <span class="file-name">Counter.vue</span>
+            </div>
+            <div class="code-block" v-pre>
+              <pre><code>&lt;template&gt;
+  &lt;div&gt;
+    &lt;p&gt;Count: {{ count }}&lt;/p&gt;
+    &lt;p&gt;Double: {{ doubleCount }}&lt;/p&gt;
+    &lt;button @click="increment"&gt;+&lt;/button&gt;
+    &lt;button @click="incrementAsync"&gt;+ (async)&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState(['count']),
+    ...mapGetters(['doubleCount'])
+  },
+  methods: {
+    ...mapMutations(['INCREMENT']),
+    ...mapActions(['incrementAsync']),
+
+    increment() {
+      this.INCREMENT()
+    }
+  }
+}
+&lt;/script&gt;</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间对比区 -->
+      <div class="comparison-divider">
+        <div class="vs-badge">VS</div>
+        <div class="comparison-points">
+          <div class="point">
+            <span class="point-icon">📝</span>
+            <span class="point-text">Vuex 样板代码较多</span>
+          </div>
+          <div class="point">
+            <span class="point-icon">🔷</span>
+            <span class="point-text">TS 类型需额外定义</span>
+          </div>
+          <div class="point">
+            <span class="point-icon">⚙️</span>
+            <span class="point-text">选项式 API 风格</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pinia 面板 -->
+      <div class="panel pinia-panel">
+        <div class="panel-header">
+          <div class="panel-title">
+            <span class="panel-icon">🍍</span>
+            <span>Pinia</span>
+          </div>
+          <span class="panel-badge modern">推荐</span>
+        </div>
+
+        <div class="panel-content">
+          <!-- Store 定义 -->
+          <div class="code-section">
+            <div class="code-header">
+              <span class="file-icon">📄</span>
+              <span class="file-name">stores/counter.js</span>
+            </div>
+            <div class="code-block" v-pre>
+              <pre><code>import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+// 方式1: 组合式 API (推荐)
+export const useCounterStore = defineStore('counter', () => {
+  // State
+  const count = ref(0)
+  const user = ref(null)
+
+  // Getters
+  const doubleCount = computed(() => (count.value ?? 0) * 2)
+  const isLoggedIn = computed(() => !!user.value)
+
+  // Actions
+  function increment() {
+    count.value = (count.value ?? 0) + 1
+  }
+
+  async function incrementAsync() {
+    await new Promise(r => setTimeout(r, 1000))
+    increment()
+  }
+
+  async function fetchUser(userId) {
+    const response = await fetch(\`/api/users/\${userId}\`)
+    user.value = await response.json()
+  }
+
+  return {
+    count, user,
+    doubleCount, isLoggedIn,
+    increment, incrementAsync, fetchUser
+  }
+})
+
+// 方式2: 选项式 API
+export const useCounterStoreOld = defineStore('counter', {
+  state: () => ({
+    count: 0,
+    user: null
+  }),
+  getters: {
+    doubleCount: (state) => (state?.count ?? 0) * 2
+  },
+  actions: {
+    increment() {
+      this.count = (this?.count ?? 0) + 1
+    }
+  }
+})</code></pre>
+            </div>
+          </div>
+
+          <!-- 组件中使用 -->
+          <div class="code-section">
+            <div class="code-header">
+              <span class="file-icon">📄</span>
+              <span class="file-name">Counter.vue</span>
+            </div>
+            <div class="code-block" v-pre>
+              <pre><code>&lt;template&gt;
+  &lt;div&gt;
+    &lt;p&gt;Count: {{ counter.count }}&lt;/p&gt;
+    &lt;p&gt;Double: {{ counter.doubleCount }}&lt;/p&gt;
+    &lt;button @click="counter.increment()"&gt;+&lt;/button&gt;
+    &lt;button @click="counter.incrementAsync()"&gt;+ (async)&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script setup&gt;
+import { useCounterStore } from '@/stores/counter'
+
+// 直接获取 store 实例
+const counter = useCounterStore()
+
+// 或者直接解构（但会失去响应式！）
+// const { count, increment } = useCounterStore() // ❌ 错误
+
+// 正确解构方式：使用 storeToRefs
+// import { storeToRefs } from 'pinia'
+// const { count, doubleCount } = storeToRefs(counter)
+// const { increment } = counter
+&lt;/script&gt;</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 特性对比表格 -->
+    <div class="features-comparison">
+      <h5>🔄 核心特性对比</h5>
+      <div class="features-table">
+        <div class="feature-row header">
+          <div class="feature-name">特性</div>
+          <div class="feature-vuex">Vuex</div>
+          <div class="feature-pinia">Pinia</div>
+        </div>
+        <div v-for="feature in comparisonFeatures" :key="feature.name" class="feature-row">
+          <div class="feature-name">{{ feature.name }}</div>
+          <div class="feature-vuex" :class="{ check: feature.vuex === '✓', cross: feature.vuex === '✗' }">{{ feature.vuex }}</div>
+          <div class="feature-pinia" :class="{ check: feature.pinia === '✓', cross: feature.pinia === '✗' }">{{ feature.pinia }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const comparisonFeatures = [
+  { name: '组合式 API 支持', vuex: '✗', pinia: '✓' },
+  { name: 'TypeScript 支持', vuex: '△', pinia: '✓' },
+  { name: '无需 mutations', vuex: '✗', pinia: '✓' },
+  { name: '自动模块化', vuex: '✗', pinia: '✓' },
+  { name: '更轻量的体积', vuex: '✗', pinia: '✓' },
+  { name: 'Vue 2 支持', vuex: '✓', pinia: '△' },
+  { name: '开发工具支持', vuex: '✓', pinia: '✓' },
+  { name: 'SSR 支持', vuex: '✓', pinia: '✓' }
+]
+</script>
+
+<style scoped>
+.vuex-pinia-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.comparison-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+@media (max-width: 968px) {
+  .comparison-container {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-divider {
+    flex-direction: row !important;
+    padding: 12px !important;
+  }
+
+  .comparison-points {
+    flex-direction: row !important;
+    flex-wrap: wrap;
+  }
+}
+
+.panel {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.vuex-panel {
+  border-color: #42b883;
+}
+
+.pinia-panel {
+  border-color: #ffd859;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.panel-icon {
+  font-size: 24px;
+}
+
+.panel-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.panel-badge.legacy {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.panel-badge.modern {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.panel-content {
+  padding: 16px;
+}
+
+.code-section {
+  margin-bottom: 16px;
+}
+
+.code-section:last-child {
+  margin-bottom: 0;
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.file-icon {
+  font-size: 14px;
+}
+
+.file-name {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.code-block {
+  background: #1e1e1e;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: 'Fira Code', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+.comparison-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+.vs-badge {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #42b883, #ffd859);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 16px;
+  color: white;
+  margin-bottom: 16px;
+}
+
+.comparison-points {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.point {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.point-icon {
+  font-size: 14px;
+}
+
+.point-text {
+  color: var(--vp-c-text-2);
+}
+
+.features-comparison {
+  margin-top: 24px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.features-comparison h5 {
+  margin: 0 0 16px 0;
+  color: var(--vp-c-text-1);
+  font-size: 16px;
+}
+
+.features-table {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.feature-row {
+  display: grid;
+  grid-template-columns: 1fr 100px 100px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.feature-row:last-child {
+  border-bottom: none;
+}
+
+.feature-row.header {
+  background: var(--vp-c-bg-soft);
+  font-weight: 600;
+}
+
+.feature-name,
+.feature-vuex,
+.feature-pinia {
+  padding: 10px 12px;
+  font-size: 13px;
+}
+
+.feature-vuex,
+.feature-pinia {
+  text-align: center;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.feature-vuex.check,
+.feature-pinia.check {
+  color: #22c55e;
+  font-weight: 600;
+}
+
+.feature-vuex.cross,
+.feature-pinia.cross {
+  color: #ef4444;
+}
+
+.feature-vuex:not(.check):not(.cross),
+.feature-pinia:not(.check):not(.cross) {
+  color: #f59e0b;
+}
+
+@media (max-width: 640px) {
+  .feature-row {
+    grid-template-columns: 1fr 60px 60px;
+  }
+
+  .feature-name,
+  .feature-vuex,
+  .feature-pinia {
+    padding: 8px;
+    font-size: 11px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
new file mode 100644
index 0000000..026226c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
@@ -0,0 +1,823 @@
+<template>
+  <div class="zustand-jotai-demo">
+    <div class="demo-header">
+      <h4>Zustand & Jotai：轻量级状态管理</h4>
+      <p class="hint">探索现代 React 生态中最简洁的状态管理方案，体验"钩子即状态"的开发模式</p>
+    </div>
+
+    <div class="demo-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="tab-button"
+        :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
+      >
+        <span class="tab-icon">{{ tab.icon }}</span>
+        <span class="tab-name">{{ tab.name }}</span>
+      </button>
+    </div>
+
+    <!-- Zustand 演示 -->
+    <div v-if="activeTab === 'zustand'" class="tab-content">
+      <div class="split-view">
+        <!-- 左侧：代码 -->
+        <div class="code-panel">
+          <div class="code-tabs">
+            <button
+              v-for="file in zustandFiles"
+              :key="file.name"
+              class="code-tab"
+              :class="{ active: activeZustandFile === file.name }"
+              @click="activeZustandFile = file.name"
+            >
+              {{ file.name }}
+            </button>
+          </div>
+          <div class="code-content">
+            <pre><code>{{ getZustandFileContent() }}</code></pre>
+          </div>
+        </div>
+
+        <!-- 右侧：演示 -->
+        <div class="demo-panel">
+          <div class="panel-header">
+            <span class="header-icon">🐻</span>
+            <span class="header-title">Zustand Store Demo</span>
+          </div>
+
+          <div class="bear-counter">
+            <div class="bear-display">
+              <span v-for="n in Math.min(bears, 10)" :key="n" class="bear-icon">🐻</span>
+              <span v-if="bears > 10" class="more-bears">+{{ bears - 10 }}</span>
+            </div>
+            <div class="count-display">
+              <span class="count-number">{{ bears }}</span>
+              <span class="count-label">bears around here</span>
+            </div>
+          </div>
+
+          <div class="fish-tank">
+            <div class="tank-header">
+              <span>🐟 Fish Tank</span>
+              <span class="fish-count">{{ fishes }} fishes</span>
+            </div>
+            <div class="tank-content">
+              <div v-for="fish in Math.min(fishes, 8)" :key="fish" class="fish">
+                🐠
+              </div>
+            </div>
+          </div>
+
+          <div class="action-buttons">
+            <button class="action-btn primary" @click="addBear">
+              <span class="btn-icon">➕</span>
+              Add Bear
+            </button>
+            <button class="action-btn secondary" @click="addFish">
+              <span class="btn-icon">🐟</span>
+              Add Fish
+            </button>
+            <button class="action-btn danger" @click="eatFish">
+              <span class="btn-icon">🍽️</span>
+              Eat Fish ({{ fishes }})
+            </button>
+            <button class="action-btn warning" @click="removeAllBears">
+              <span class="btn-icon">🗑️</span>
+              Remove All
+            </button>
+          </div>
+
+          <div class="async-demo">
+            <div class="async-header">Async Action Demo</div>
+            <div class="async-controls">
+              <button class="async-btn" :disabled="loading" @click="fetchBears">
+                {{ loading ? '⏳ Fetching...' : '🌐 Fetch Bears from API' }}
+              </button>
+            </div>
+            <div v-if="apiResponse" class="api-response">
+              <pre>{{ apiResponse }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Jotai 演示 -->
+    <div v-if="activeTab === 'jotai'" class="tab-content">
+      <!-- Jotai 内容类似结构 -->
+      <div class="split-view">
+        <div class="code-panel">
+          <!-- Jotai 代码示例 -->
+          <div class="code-tabs">
+            <button class="code-tab active">atoms/counter.js</button>
+          </div>
+          <div class="code-content">
+            <pre><code>import { atom } from 'jotai'
+import { atomFamily } from 'jotai/utils'
+
+// 基础原子
+const countAtom = atom(0)
+
+// 派生原子 - 自动追踪依赖
+const doubleAtom = atom((get) => get(countAtom) * 2)
+const isEvenAtom = atom((get) => get(countAtom) % 2 === 0)
+
+// 可写派生原子
+const countAndDoubleAtom = atom(
+  (get) => ({
+    count: get(countAtom),
+    double: get(doubleAtom)
+  }),
+  (get, set, newCount) => {
+    set(countAtom, newCount)
+  }
+)
+
+// 原子家族 - 动态创建原子
+const todoAtomFamily = atomFamily((id) =>
+  atom({ id, text: '', completed: false })
+)
+
+// 异步原子
+const userAtom = atom(null)
+const fetchUserAtom = atom(
+  (get) => get(userAtom),
+  async (get, set, userId) => {
+    const response = await fetch(\`/api/users/\${userId}\`)
+    const user = await response.json()
+    set(userAtom, user)
+  }
+)
+
+export {
+  countAtom,
+  doubleAtom,
+  isEvenAtom,
+  countAndDoubleAtom,
+  todoAtomFamily,
+  fetchUserAtom
+}</code></pre>
+          </div>
+        </div>
+
+        <div class="demo-panel">
+          <div class="panel-header">
+            <span class="header-icon">⚛️</span>
+            <span class="header-title">Jotai Atom Demo</span>
+          </div>
+
+          <div class="atom-demo">
+            <div class="atom-visualization">
+              <div class="atom-core" :class="{ active: count > 0 }">
+                <div class="atom-nucleus">
+                  <span class="nucleus-label">countAtom</span>
+                  <span class="nucleus-value">{{ count }}</span>
+                </div>
+                <div class="electron-orbits">
+                  <div class="orbit orbit-1"></div>
+                  <div class="orbit orbit-2"></div>
+                  <div class="orbit orbit-3"></div>
+                </div>
+              </div>
+
+              <div class="derived-atoms">
+                <div class="derived-atom" :class="{ active: double > 0 }">
+                  <div class="atom-label">doubleAtom</div>
+                  <div class="atom-value">{{ double }}</div>
+                  <div class="atom-formula">count × 2</div>
+                </div>
+
+                <div class="derived-atom" :class="{ active: true }">
+                  <div class="atom-label">isEvenAtom</div>
+                  <div class="atom-value" :class="{ even: isEven }">{{ isEven ? 'YES' : 'NO' }}</div>
+                  <div class="atom-formula">count % 2 === 0</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="atom-controls">
+              <div class="control-group">
+                <button class="control-btn" @click="increment">
+                  <span class="btn-icon">➕</span>
+                  increment()
+                </button>
+                <button class="control-btn" @click="decrement">
+                  <span class="btn-icon">➖</span>
+                  decrement()
+                </button>
+                <button class="control-btn" @click="reset">
+                  <span class="btn-icon">🔄</span>
+                  reset()
+                </button>
+              </div>
+
+              <div class="control-group">
+                <button class="control-btn async" :disabled="loading" @click="fetchRandom">
+                  <span class="btn-icon">{{ loading ? '⏳' : '🎲' }}</span>
+                  {{ loading ? 'Fetching...' : 'Fetch Random (Async)' }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部说明 -->
+    <div class="info-section">
+      <div class="info-card">
+        <h5>🎯 核心概念</h5>
+        <ul>
+          <li><strong>Atom</strong>: 状态的基本单元，可读写</li>
+          <li><strong>Derived Atom</strong>: 派生状态，自动追踪依赖</li>
+          <li><strong>Atom Family</strong>: 动态创建原子集合</li>
+        </ul>
+      </div>
+
+      <div class="info-card">
+        <h5>⚡ 与 Redux/MobX 对比</h5>
+        <ul>
+          <li>更细粒度的状态管理</li>
+          <li>天然支持 TypeScript</li>
+          <li>不需要 Provider 包裹</li>
+          <li>与 React Suspense 配合良好</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+// Tab 切换
+const activeTab = ref('zustand')
+const tabs = [
+  { id: 'zustand', name: 'Zustand', icon: '🐻' },
+  { id: 'jotai', name: 'Jotai', icon: '⚛️' }
+]
+
+// Zustand 状态
+const bears = ref(0)
+const fishes = ref(5)
+const loading = ref(false)
+const apiResponse = ref('')
+
+// 计算属性（模拟派生状态）
+const double = computed(() => bears.value * 2)
+const isEven = computed(() => bears.value % 2 === 0)
+
+// 方法
+const increment = () => {
+  bears.value++
+}
+
+const decrement = () => {
+  if (bears.value > 0) bears.value--
+}
+
+const reset = () => {
+  bears.value = 0
+  fishes.value = 5
+}
+
+const addBear = () => {
+  bears.value++
+}
+
+const addFish = () => {
+  fishes.value++
+}
+
+const eatFish = () => {
+  if (fishes.value > 0) {
+    fishes.value--
+    bears.value += 0.1
+  }
+}
+
+const removeAllBears = () => {
+  bears.value = 0
+}
+
+const fetchBears = async () => {
+  loading.value = true
+  apiResponse.value = ''
+  await new Promise(resolve => setTimeout(resolve, 1500))
+  bears.value = Math.floor(Math.random() * 10) + 1
+  apiResponse.value = `{\n  "status": "success",\n  "data": {\n    "bears": ${bears.value},\n    "message": "Bears fetched successfully"\n  }\n}`
+  loading.value = false
+}
+
+const fetchRandom = async () => {
+  loading.value = true
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  bears.value = Math.floor(Math.random() * 100)
+  loading.value = false
+}
+
+// 文件切换
+const zustandFiles = [
+  { name: 'store.js', content: `import { create } from 'zustand'
+
+const useStore = create((set, get) => ({
+  // State
+  bears: 0,
+  fishes: 5,
+
+  // Computed (in component using selectors)
+  // const doubleBears = useStore(state => state.bears * 2)
+
+  // Actions
+  increasePopulation: () =>
+    set((state) => ({ bears: state.bears + 1 })),
+
+  removeAllBears: () => set({ bears: 0 }),
+
+  eatFish: () => set((state) => ({
+    fishes: state.fishes - 1,
+    bears: state.bears + 0.1
+  })),
+
+  // Async action
+  fetchBears: async () => {
+    try {
+      const response = await fetch('/api/bears')
+      const data = await response.json()
+      if (data && typeof data.count === 'number') {
+        set({ bears: data.count })
+      }
+    } catch (error) {
+      console.error('Failed to fetch bears:', error)
+    }
+  },
+
+  // Get current state
+  getState: () => get()
+}))
+
+export default useStore` },
+  { name: 'Component.jsx', content: `import useStore from './store'
+
+// Component using Zustand
+function BearCounter() {
+  // Select only what you need - fine-grained updates
+  const bears = useStore((state) => state.bears)
+  const increase = useStore((state) => state.increasePopulation)
+
+  return (
+    <div>
+      <h1>{bears} bears around here...</h1>
+      <button onClick={increase}>Add bear</button>
+    </div>
+  )
+}
+
+// Async action usage
+function BearFetcher() {
+  const fetchBears = useStore((state) => state.fetchBears)
+  const bears = useStore((state) => state.bears)
+
+  return (
+    <div>
+      <p>Bears: {bears}</p>
+      <button onClick={fetchBears}>
+        Fetch Bears
+      </button>
+    </div>
+  )
+}
+
+// Multiple state selections
+function FishTank() {
+  const { fishes, bears, eatFish } = useStore(
+    (state) => ({
+      fishes: state.fishes,
+      bears: state.bears,
+      eatFish: state.eatFish
+    })
+  )
+
+  return (
+    <div>
+      <p>Fishes: {fishes}</p>
+      <p>Bears: {bears}</p>
+      <button onClick={eatFish}>Eat Fish</button>
+    </div>
+  )
+}` }
+]
+
+const activeZustandFile = ref('store.js')
+
+const getZustandFileContent = () => {
+  return zustandFiles.find(f => f.name === activeZustandFile.value)?.content || ''
+}
+</script>
+
+<style scoped>
+.zustand-jotai-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding-bottom: 12px;
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-button:hover {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-text-1);
+}
+
+.tab-button.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.tab-icon {
+  font-size: 20px;
+}
+
+.tab-name {
+  font-weight: 500;
+}
+
+.split-view {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+@media (max-width: 968px) {
+  .split-view {
+    grid-template-columns: 1fr;
+  }
+}
+
+.code-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.code-tabs {
+  display: flex;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.code-tab {
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.code-tab:hover {
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
+}
+
+.code-tab.active {
+  color: var(--vp-c-brand);
+  background: var(--vp-c-bg);
+  border-bottom: 2px solid var(--vp-c-brand);
+}
+
+.code-content {
+  max-height: 600px;
+  overflow: auto;
+}
+
+.code-content pre {
+  margin: 0;
+  padding: 16px;
+  font-family: 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  background: #1e1e1e;
+}
+
+.demo-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.header-icon {
+  font-size: 24px;
+}
+
+.header-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--vp-c-text-1);
+}
+
+.bear-counter {
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.bear-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: center;
+  margin-bottom: 12px;
+  min-height: 40px;
+}
+
+.bear-icon {
+  font-size: 24px;
+}
+
+.more-bears {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  align-self: center;
+}
+
+.count-display {
+  text-align: center;
+}
+
+.count-number {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+}
+
+.count-label {
+  display: block;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  margin-top: 4px;
+}
+
+.fish-tank {
+  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.tank-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-weight: 600;
+  color: #0369a1;
+}
+
+.tank-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  min-height: 50px;
+}
+
+.fish {
+  font-size: 28px;
+  animation: swim 2s ease-in-out infinite;
+}
+
+.fish:nth-child(2) { animation-delay: 0.3s; }
+.fish:nth-child(3) { animation-delay: 0.6s; }
+.fish:nth-child(4) { animation-delay: 0.9s; }
+
+@keyframes swim {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-3px) rotate(-2deg); }
+  75% { transform: translateY(3px) rotate(2deg); }
+}
+
+.action-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.action-btn.primary {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.action-btn.primary:hover {
+  background: var(--vp-c-brand-dark);
+}
+
+.action-btn.secondary {
+  background: #0ea5e9;
+  color: white;
+}
+
+.action-btn.secondary:hover {
+  background: #0284c7;
+}
+
+.action-btn.danger {
+  background: #ef4444;
+  color: white;
+}
+
+.action-btn.danger:hover {
+  background: #dc2626;
+}
+
+.action-btn.warning {
+  background: #f59e0b;
+  color: white;
+}
+
+.action-btn.warning:hover {
+  background: #d97706;
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-icon {
+  font-size: 14px;
+}
+
+.async-demo {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.async-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+}
+
+.async-controls {
+  margin-bottom: 8px;
+}
+
+.async-btn {
+  width: 100%;
+  padding: 10px;
+  background: #8b5cf6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.async-btn:hover:not(:disabled) {
+  background: #7c3aed;
+}
+
+.async-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.api-response {
+  background: #1e1e1e;
+  border-radius: 6px;
+  padding: 10px;
+  overflow: auto;
+}
+
+.api-response pre {
+  margin: 0;
+  font-family: 'Fira Code', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+.info-section {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.info-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.info-card h5 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.info-card ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.info-card li {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  margin: 5px 0;
+  line-height: 1.5;
+}
+
+.info-card li strong {
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 768px) {
+  .action-buttons {
+    grid-template-columns: 1fr;
+  }
+
+  .atom-core {
+    transform: scale(0.9);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
new file mode 100644
index 0000000..24de9e6
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
@@ -0,0 +1,401 @@
+<template>
+  <div class="demo-container">
+    <h4>async/await 机制演示</h4>
+
+    <div class="controls">
+      <el-button type="primary" size="small" @click="runExample" :disabled="isRunning">
+        {{ isRunning ? '运行中...' : '运行示例' }}
+      </el-button>
+      <el-button size="small" @click="reset">重置</el-button>
+      <el-checkbox v-model="showDetails" size="small">显示详细信息</el-checkbox>
+    </div>
+
+    <div class="code-section">
+      <div class="code-block">
+        <div class="code-header">
+          <span class="code-title">Python asyncio 示例</span>
+        </div>
+        <pre class="code-content"><code><span class="keyword">import</span> asyncio
+
+<span class="keyword">async def</span> <span class="function">fetch_data</span>(url):
+    <span class="comment"># await 挂起，让出 CPU</span>
+    response = <span class="keyword">await</span> aiohttp.get(url)
+    <span class="comment"># I/O 完成后继续执行</span>
+    <span class="keyword">return</span> response.json()
+
+<span class="keyword">async def</span> <span class="function">main</span>():
+    <span class="comment"># 并发执行</span>
+    tasks = [fetch_data(url) <span class="keyword">for</span> url <span class="keyword">in</span> urls]
+    results = <span class="keyword">await</span> asyncio.gather(*tasks)</code></pre>
+      </div>
+    </div>
+
+    <div class="visualization">
+      <div class="timeline-container">
+        <h5>执行时间线</h5>
+        <div class="timeline">
+          <div class="time-axis">
+            <div class="axis-label">0ms</div>
+            <div class="axis-label">50ms</div>
+            <div class="axis-label">100ms</div>
+            <div class="axis-label">150ms</div>
+            <div class="axis-label">200ms</div>
+          </div>
+
+          <div class="thread-rows">
+            <div class="thread-row">
+              <div class="row-label">事件循环</div>
+              <div class="row-track">
+                <div class="execution-segment event-loop" style="width: 100%;">
+                  调度中
+                </div>
+              </div>
+            </div>
+
+            <div v-for="(task, idx) in tasks" :key="task.id" class="thread-row">
+              <div class="row-label">任务 {{ task.id }}</div>
+              <div class="row-track">
+                <template v-for="(segment, sidx) in task.segments" :key="sidx">
+                  <div class="execution-segment"
+                    :class="{ 'active': segment.type === 'active', 'io': segment.type === 'io' }"
+                    :style="{ left: segment.start + '%', width: segment.width + '%', backgroundColor: segment.color }">
+                    <span v-if="segment.width > 8" class="segment-label">
+                      {{ segment.type === 'active' ? '执行' : 'I/O' }}
+                    </span>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-title">并发任务数</div>
+          <div class="stat-value">{{ tasks.length }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">总执行时间</div>
+          <div class="stat-value">{{ totalTime }}ms</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">I/O 等待时间</div>
+          <div class="stat-value">{{ ioWaitTime }}ms</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">CPU 利用率</div>
+          <div class="stat-value">{{ cpuUtilization }}%</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="explanation">
+      <el-alert title="async/await 的优势" type="success"
+        description="当一个任务遇到 I/O 操作(如网络请求)时，await 会让出 CPU，事件循环调度其他任务执行。I/O 完成后，任务从断点恢复。这种方式让单个线程可以并发处理数千个任务。"
+        show-icon :closable="false" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const comparisonMode = ref('memory')
+const coroutineCount = ref(1000)
+const isRunning = ref(false)
+const showDetails = ref(false)
+
+const tasks = ref([])
+
+// 颜色
+const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399']
+
+// 计算统计数据
+const totalTime = computed(() => {
+  if (tasks.value.length === 0) return 0
+  // 模拟总时间
+  return Math.round(50 + tasks.value.length * 10)
+})
+
+const ioWaitTime = computed(() => {
+  return Math.round(totalTime.value * 0.6)
+})
+
+const cpuUtilization = computed(() => {
+  return Math.round(100 - (ioWaitTime.value / totalTime.value) * 100)
+})
+
+// 生成任务数据
+function generateTasks() {
+  const count = Math.min(Math.floor(coroutineCount.value / 200), 5)
+  const newTasks = []
+
+  for (let i = 0; i < count; i++) {
+    const segments = []
+    let currentPos = 5
+
+    // 生成交替的执行和I/O段
+    for (let j = 0; j < 3; j++) {
+      // 执行段
+      const execWidth = 10 + Math.random() * 10
+      segments.push({
+        type: 'active',
+        start: currentPos,
+        width: execWidth,
+        color: colors[i % colors.length]
+      })
+      currentPos += execWidth
+
+      // I/O段
+      const ioWidth = 15 + Math.random() * 10
+      segments.push({
+        type: 'io',
+        start: currentPos,
+        width: ioWidth,
+        color: '#dcdfe6'
+      })
+      currentPos += ioWidth
+    }
+
+    newTasks.push({
+      id: i + 1,
+      segments,
+      state: 'ready'
+    })
+  }
+
+  tasks.value = newTasks
+}
+
+// 运行示例
+function runExample() {
+  isRunning.value = true
+  generateTasks()
+
+  // 模拟运行
+  setTimeout(() => {
+    isRunning.value = false
+  }, 2000)
+}
+
+// 重置
+function reset() {
+  tasks.value = []
+  isRunning.value = false
+  coroutineCount.value = 1000
+}
+
+// 监听协程数量变化
+watch(coroutineCount, () => {
+  if (tasks.value.length > 0) {
+    generateTasks()
+  }
+})
+
+// 初始化
+generateTasks()
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.slider-label {
+  font-size: 14px;
+  color: #606266;
+  min-width: 100px;
+}
+
+.code-section {
+  margin-bottom: 20px;
+}
+
+.code-block {
+  background: #282c34;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.code-header {
+  background: #21252b;
+  padding: 8px 16px;
+  border-bottom: 1px solid #181a1f;
+}
+
+.code-title {
+  color: #abb2bf;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.code-content {
+  padding: 16px;
+  margin: 0;
+  overflow-x: auto;
+  font-family: 'Fira Code', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.keyword {
+  color: #c678dd;
+}
+
+.function {
+  color: #61afef;
+}
+
+.comment {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.visualization {
+  margin-bottom: 20px;
+}
+
+.timeline-container {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.timeline-container h5 {
+  margin: 0 0 12px 0;
+  color: #303133;
+}
+
+.timeline {
+  position: relative;
+}
+
+.time-axis {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 8px;
+}
+
+.axis-label {
+  font-size: 11px;
+  color: #909399;
+}
+
+.thread-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.thread-row {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 8px;
+  align-items: center;
+}
+
+.row-label {
+  font-size: 12px;
+  color: #606266;
+  text-align: right;
+}
+
+.row-track {
+  position: relative;
+  height: 24px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.execution-segment {
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: white;
+  font-weight: 500;
+}
+
+.execution-segment.io {
+  background: #dcdfe6 !important;
+  color: #606266;
+}
+
+.execution-segment.event-loop {
+  background: #409eff;
+}
+
+.current-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #f56c6c;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+}
+
+.stat-title {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.explanation {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .thread-row {
+    grid-template-columns: 60px 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
new file mode 100644
index 0000000..2169abe
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="demo-container">
+    <h4>并发 (Concurrency) vs 并行 (Parallelism) 演示</h4>
+
+    <div class="controls">
+      <el-radio-group v-model="demoMode" size="small">
+        <el-radio-button label="concurrent">单核并发</el-radio-button>
+        <el-radio-button label="parallel">多核并行</el-radio-button>
+        <el-radio-button label="hybrid">混合模式</el-radio-button>
+      </el-radio-group>
+
+      <el-button type="primary" size="small" @click="startDemo" :disabled="isRunning">
+        {{ isRunning ? '运行中...' : '开始演示' }}
+      </el-button>
+
+      <el-button size="small" @click="reset">重置</el-button>
+
+      <el-slider v-model="workerCount" :min="1" :max="8" :step="1" show-stops style="width: 150px;"
+        v-if="demoMode === 'parallel' || demoMode === 'hybrid'" />
+    </div>
+
+    <div class="demo-grid">
+      <!-- CPU 核心显示 -->
+      <div class="section">
+        <div class="section-title">
+          {{ demoMode === 'concurrent' ? 'CPU 核心 (单核)' : 'CPU 核心 (' + cpuCores.length + '核)' }}
+        </div>
+
+        <div class="cpu-grid" :class="{ 'single-core': demoMode === 'concurrent' }">
+          <div v-for="(core, idx) in cpuCores" :key="idx" class="cpu-core" :class="{
+            'active': core.active,
+            'concurrent-mode': demoMode === 'concurrent',
+            'parallel-mode': demoMode === 'parallel'
+          }"
+            :style="{ backgroundColor: core.active ? core.color : '#f5f7fa' }">
+            <div class="core-number">CPU {{ idx + 1 }}</div>
+            <div class="core-task" v-if="core.task">{{ core.task }}</div>
+            <div class="core-status">{{ core.active ? '运行中' : '空闲' }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 任务视图 -->
+      <div class="section">
+        <div class="section-title">任务执行</div>
+
+        <div class="task-timeline">
+          <div v-for="(task, idx) in demoTasks" :key="task.id" class="task-row">
+            <div class="task-info">
+              <div class="task-name">任务 {{ task.id }}</div>
+              <div class="task-duration">{{ task.duration }}ms</div>
+            </div>
+
+            <div class="task-track">
+              <div v-for="(segment, sidx) in task.segments" :key="sidx" class="task-segment"
+                :class="{ 'execution': segment.type === 'execution', 'waiting': segment.type === 'waiting' }"
+                :style="{ left: segment.start + '%', width: segment.width + '%' }">
+                <span v-if="segment.width > 5" class="segment-text">
+                  {{ segment.type === 'execution' ? '执行' : '等待' }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="comparison-table">
+      <div class="table-header">并发 vs 并行 对比</div>
+
+      <div class="comparison-grid">
+        <div class="comparison-item">
+          <div class="item-icon">🔄</div>
+          <div class="item-title">并发 (Concurrency)</div>
+          <div class="item-desc">多个任务交替执行，宏观上同时推进</div>
+          <div class="item-examples"><strong>例子:</strong> 单核CPU多线程、协程调度、异步I/O</div>
+        </div>
+
+        <div class="comparison-item">
+          <div class="item-icon">⚡</div>
+          <div class="item-title">并行 (Parallelism)</div>
+          <div class="item-desc">多个任务真正同时执行</div>
+          <div class="item-examples"><strong>例子:</strong> 多核CPU计算、GPU并行计算、分布式处理</div>
+        </div>
+      </div>
+
+      <div class="need-table">
+        <div class="need-title">需要什么条件?</div>
+
+        <div class="need-items">
+          <div class="need-item">
+            <span class="need-check">✓</span>
+            <span class="need-text"><strong>并发:</strong> 单核 CPU 即可实现</span>
+          </div>
+
+          <div class="need-item">
+            <span class="need-check need-multi">✓</span>
+            <span class="need-text"><strong>并行:</strong> 需要多核 CPU 或多台机器</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const demoMode = ref('concurrent')
+const isRunning = ref(false)
+const workerCount = ref(4)
+
+// CPU 核心
+const cpuCores = ref([
+  { active: false, color: '#409eff', task: null },
+  { active: false, color: '#67c23a', task: null },
+  { active: false, color: '#e6a23c', task: null },
+  { active: false, color: '#f56c6c', task: null },
+])
+
+// 演示任务
+const demoTasks = ref([
+  { id: 1, duration: 40, segments: [] },
+  { id: 2, duration: 30, segments: [] },
+  { id: 3, duration: 50, segments: [] },
+  { id: 4, duration: 35, segments: [] },
+])
+
+function startDemo() {
+  if (isRunning.value) return
+
+  isRunning.value = true
+
+  // 生成任务时间线
+  generateTaskTimeline()
+
+  // 模拟执行
+  setTimeout(() => {
+    isRunning.value = false
+  }, 3000)
+}
+
+function generateTaskTimeline() {
+  demoTasks.value.forEach((task, idx) => {
+    const segments = []
+    const mode = demoMode.value
+    const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c']
+
+    if (mode === 'concurrent') {
+      // 单核并发：任务交替执行
+      const baseStart = 5 + idx * 3
+      segments.push({
+        type: 'execution',
+        start: baseStart,
+        width: task.duration / 3,
+        color: colors[idx % colors.length]
+      })
+      segments.push({
+        type: 'waiting',
+        start: baseStart + task.duration / 3,
+        width: 20,
+        color: '#dcdfe6'
+      })
+      segments.push({
+        type: 'execution',
+        start: baseStart + task.duration / 3 + 20,
+        width: task.duration / 3,
+        color: colors[idx % colors.length]
+      })
+    } else if (mode === 'parallel') {
+      // 多核并行：任务同时执行
+      segments.push({
+        type: 'execution',
+        start: 5,
+        width: task.duration,
+        color: colors[idx % colors.length]
+      })
+    } else {
+      // 混合模式
+      if (idx < workerCount.value) {
+        segments.push({
+          type: 'execution',
+          start: 5,
+          width: task.duration,
+          color: colors[idx % colors.length]
+        })
+      } else {
+        const baseStart = 5 + (idx - workerCount.value) * 5
+        segments.push({
+          type: 'execution',
+          start: baseStart,
+          width: task.duration / 2,
+          color: colors[idx % colors.length]
+        })
+      }
+    }
+
+    task.segments = segments
+  })
+}
+
+function reset() {
+  isRunning.value = false
+  demoTasks.value.forEach(task => {
+    task.segments = []
+  })
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.section-title {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.cpu-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.cpu-grid.single-core {
+  grid-template-columns: 1fr;
+}
+
+.cpu-core {
+  background: #f5f7fa;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.cpu-core.active {
+  border-color: currentColor;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.cpu-core.concurrent-mode.active {
+  animation: blink 0.5s infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.core-number {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.core-task {
+  font-size: 14px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.core-status {
+  font-size: 11px;
+  color: #909399;
+}
+
+.task-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-row {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 8px;
+  align-items: center;
+}
+
+.task-info {
+  font-size: 11px;
+}
+
+.task-name {
+  font-weight: bold;
+  color: #303133;
+}
+
+.task-duration {
+  color: #909399;
+}
+
+.task-track {
+  position: relative;
+  height: 20px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.task-segment {
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: white;
+  font-weight: 500;
+}
+
+.task-segment.waiting {
+  background: #dcdfe6 !important;
+  color: #606266;
+}
+
+.comparison-table {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.table-header {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.comparison-item {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.item-icon {
+  font-size: 32px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.item-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 13px;
+  color: #606266;
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+.item-examples {
+  font-size: 12px;
+  color: #909399;
+  background: white;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.need-table {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.need-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.need-items {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.need-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  padding: 12px;
+  border-radius: 4px;
+}
+
+.need-check {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #67c23a;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.need-check.need-multi {
+  background: #409eff;
+}
+
+.need-text {
+  font-size: 13px;
+  color: #606266;
+}
+
+@media (max-width: 768px) {
+  .demo-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .need-items {
+    grid-template-columns: 1fr;
+  }
+
+  .cpu-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
new file mode 100644
index 0000000..5c5a649
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
@@ -0,0 +1,417 @@
+<template>
+  <div class="demo-container">
+    <h4>协程轻量级对比演示</h4>
+
+    <div class="controls">
+      <el-radio-group v-model="comparisonMode" size="small">
+        <el-radio-button label="memory">内存占用对比</el-radio-button>
+        <el-radio-button label="switch">切换开销对比</el-radio-button>
+        <el-radio-button label="creation">创建速度对比</el-radio-button>
+      </el-radio-group>
+
+      <el-slider v-model="coroutineCount" :min="100" :max="10000" :step="100" show-input style="width: 300px;" />
+      <span class="slider-label">{{ coroutineCount }} 个协程</span>
+    </div>
+
+    <div class="comparison-view">
+      <div class="comparison-column">
+        <h5>线程模型</h5>
+        <div class="resource-visualization">
+          <div class="resource-bar">
+            <div class="bar-label">内存占用</div>
+            <div class="bar-container">
+              <div class="bar-fill thread-bar" :style="{ width: threadMemoryPercent + '%', backgroundColor: '#e6a23c' }">
+                {{ threadMemory }} MB
+              </div>
+            </div>
+          </div>
+
+          <div class="resource-bar">
+            <div class="bar-label">创建时间</div>
+            <div class="bar-container">
+              <div class="bar-fill thread-bar" :style="{ width: threadCreationPercent + '%', backgroundColor: '#e6a23c' }">
+                {{ threadCreationTime }} ms
+              </div>
+            </div>
+          </div>
+
+          <div class="resource-bar">
+            <div class="bar-label">上下文切换</div>
+            <div class="bar-container">
+              <div class="bar-fill thread-bar" :style="{ width: 100 + '%', backgroundColor: '#e6a23c' }">
+                ~1-10 μs
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="thread-visualization">
+          <div class="memory-blocks">
+            <div v-for="n in Math.min(coroutineCount / 100, 50)" :key="n" class="thread-block"
+              :style="{ backgroundColor: '#e6a23c', opacity: 0.6 + Math.random() * 0.4 }">
+            </div>
+            <div v-if="coroutineCount / 100 > 50" class="more-indicator">
+              +{{ Math.floor(coroutineCount / 100 - 50) }} 更多...
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="vs-divider">
+        <div class="vs-circle">VS</div>
+      </div>
+
+      <div class="comparison-column">
+        <h5>协程模型</h5>
+        <div class="resource-visualization">
+          <div class="resource-bar">
+            <div class="bar-label">内存占用</div>
+            <div class="bar-container">
+              <div class="bar-fill coroutine-bar"
+                :style="{ width: Math.max(coroutineMemoryPercent, 5) + '%', backgroundColor: '#67c23a' }">
+                {{ coroutineMemory }} MB
+              </div>
+            </div>
+          </div>
+
+          <div class="resource-bar">
+            <div class="bar-label">创建时间</div>
+            <div class="bar-container">
+              <div class="bar-fill coroutine-bar"
+                :style="{ width: Math.max(coroutineCreationPercent, 5) + '%', backgroundColor: '#67c23a' }">
+                {{ coroutineCreationTime }} ms
+              </div>
+            </div>
+          </div>
+
+          <div class="resource-bar">
+            <div class="bar-label">上下文切换</div>
+            <div class="bar-container">
+              <div class="bar-fill coroutine-bar" :style="{ width: 15 + '%', backgroundColor: '#67c23a' }">
+                ~100 ns
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="coroutine-visualization">
+          <div class="coroutine-grid">
+            <div v-for="n in Math.min(coroutineCount / 10, 100)" :key="n" class="coroutine-cell"
+              :style="{ backgroundColor: '#67c23a', opacity: 0.5 + Math.random() * 0.5 }">
+            </div>
+            <div v-if="coroutineCount / 10 > 100" class="more-indicator">
+              +{{ Math.floor(coroutineCount / 10 - 100) }} 更多...
+            </div>
+          </div>
+        </div>
+
+        <div class="efficiency-badge" v-if="coroutineCount >= 1000">
+          <el-tag type="success" effect="dark" size="large">
+            🚀 节省 {{ savingsPercent }}% 内存
+          </el-tag>
+        </div>
+      </div>
+    </div>
+
+    <div class="insight-panel">
+      <el-alert :title="insightTitle" :type="insightType" :description="insightDescription" show-icon
+        :closable="false" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const comparisonMode = ref('memory')
+const coroutineCount = ref(1000)
+
+// 基础参数
+const THREAD_STACK_SIZE = 1024 * 1024 // 1MB 线程栈
+const COROUTINE_STACK_SIZE = 2 * 1024 // 2KB 协程栈
+const THREAD_CREATION_TIME = 100 // 10us * 10000 = 100ms
+const COROUTINE_CREATION_TIME = 10 // 10ns * 10000 = 100us
+
+// 计算值
+const threadMemory = computed(() => {
+  return Math.round((coroutineCount.value * THREAD_STACK_SIZE) / (1024 * 1024))
+})
+
+const coroutineMemory = computed(() => {
+  return Math.round((coroutineCount.value * COROUTINE_STACK_SIZE) / (1024))
+})
+
+const threadCreationTime = computed(() => {
+  return Math.round((coroutineCount.value * THREAD_CREATION_TIME) / 1000)
+})
+
+const coroutineCreationTime = computed(() => {
+  return Math.round((coroutineCount.value * COROUTINE_CREATION_TIME) / 1000)
+})
+
+// 百分比计算
+const threadMemoryPercent = computed(() => {
+  const max = threadMemory.value
+  return max > 0 ? 100 : 0
+})
+
+const coroutineMemoryPercent = computed(() => {
+  if (threadMemory.value === 0) return 0
+  return (coroutineMemory.value / threadMemory.value) * 100
+})
+
+const threadCreationPercent = computed(() => {
+  const max = threadCreationTime.value
+  return max > 0 ? 100 : 0
+})
+
+const coroutineCreationPercent = computed(() => {
+  if (threadCreationTime.value === 0) return 0
+  return (coroutineCreationTime.value / threadCreationTime.value) * 100
+})
+
+const savingsPercent = computed(() => {
+  if (threadMemory.value === 0) return 0
+  return Math.round((1 - coroutineMemory.value / threadMemory.value) * 100)
+})
+
+// 洞察信息
+const insightTitle = computed(() => {
+  if (coroutineCount.value < 100) {
+    return '小规模场景'
+  } else if (coroutineCount.value < 5000) {
+    return '中等规模场景'
+  } else {
+    return '大规模高并发场景'
+  }
+})
+
+const insightType = computed(() => {
+  if (coroutineCount.value >= 5000) return 'success'
+  if (coroutineCount.value >= 1000) return 'warning'
+  return 'info'
+})
+
+const insightDescription = computed(() => {
+  const savings = savingsPercent.value
+  const memSaved = threadMemory.value - coroutineMemory.value
+
+  if (coroutineCount.value < 100) {
+    return `当前 ${coroutineCount.value} 个并发单元，线程和协程的差别还不明显。建议增加到 1000+ 来观察显著差异。`
+  } else if (coroutineCount.value < 5000) {
+    return `使用协程可以节省 ${savings}% 的内存（约 ${memSaved}MB），创建速度快 ${Math.round(threadCreationTime.value / coroutineCreationTime.value)} 倍。`
+  } else {
+    return `🚀 在高并发场景下，协程优势巨大！节省 ${savings}% 内存（${memSaved}MB），${threadMemory.value}MB vs ${coroutineMemory.value}MB。这是 C10K/C10M 问题的关键解决方案。`
+  }
+})
+
+// 方法
+function addThread() {
+  // 模拟添加线程
+}
+
+function killThread() {
+  // 模拟结束线程
+}
+
+function simulateCrash() {
+  // 模拟崩溃
+}
+
+function reset() {
+  coroutineCount.value = 1000
+}
+
+function startSimulation() {
+  // 开始模拟
+}
+
+function toggleSimulation() {
+  // 切换模拟状态
+}
+
+function pauseSimulation() {
+  // 暂停模拟
+}
+
+function runSimulation() {
+  // 运行模拟
+}
+
+function stateText(state) {
+  const texts = {
+    ready: '就绪',
+    running: '运行中',
+    blocked: '阻塞',
+    completed: '已完成'
+  }
+  return texts[state] || state
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.slider-label {
+  font-size: 14px;
+  color: #606266;
+  min-width: 80px;
+}
+
+.comparison-view {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.comparison-column {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.comparison-column h5 {
+  margin: 0 0 16px 0;
+  color: #303133;
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vs-circle {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #409eff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.resource-visualization {
+  margin-bottom: 16px;
+}
+
+.resource-bar {
+  margin-bottom: 12px;
+}
+
+.bar-label {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.bar-container {
+  height: 24px;
+  background: #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+  color: white;
+  font-size: 11px;
+  font-weight: bold;
+  transition: width 0.3s ease;
+}
+
+.thread-visualization,
+.coroutine-visualization {
+  margin-bottom: 16px;
+}
+
+.memory-blocks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  min-height: 80px;
+  align-content: flex-start;
+}
+
+.thread-block {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.coroutine-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 2px;
+  padding: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.coroutine-cell {
+  aspect-ratio: 1;
+  border-radius: 2px;
+}
+
+.more-indicator {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+  padding: 4px;
+}
+
+.efficiency-badge {
+  text-align: center;
+  margin-top: 12px;
+}
+
+.insight-panel {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .comparison-view {
+    grid-template-columns: 1fr;
+  }
+
+  .vs-divider {
+    order: -1;
+  }
+
+  .vs-circle {
+    transform: rotate(90deg);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
new file mode 100644
index 0000000..f19fe2e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
@@ -0,0 +1,505 @@
+<template>
+  <div class="demo-container">
+    <h4>事件循环 (Event Loop) 演示</h4>
+
+    <div class="controls">
+      <el-button type="primary" size="small" @click="startSimulation" :disabled="isRunning">
+        {{ isRunning ? '运行中...' : '开始模拟' }}
+      </el-button>
+      <el-button size="small" @click="addTask" :disabled="tasks.length >= 10">
+        添加任务
+      </el-button>
+      <el-button size="small" @click="addMicrotask" :disabled="microtasks.length >= 5">
+        添加微任务
+      </el-button>
+      <el-button size="small" @click="reset">重置</el-button>
+
+      <el-select v-model="simulationSpeed" size="small" style="width: 120px;">
+        <el-option :value="1" label="慢速" />
+        <el-option :value="2" label="正常" />
+        <el-option :value="3" label="快速" />
+        <el-option :value="4" label="极快" />
+        <el-option :value="5" label="即时" />
+      </el-select>
+    </div>
+
+    <div class="event-loop-container">
+      <!-- 调用栈 -->
+      <div class="section">
+        <div class="section-title">调用栈 (Call Stack)</div>
+        <div class="stack-container">
+          <div v-for="(frame, idx) in callStack" :key="idx" class="stack-frame" :class="{ active: idx === 0 }"
+            :style="{ animationDelay: idx * 0.1 + 's' }">
+            <div class="frame-name">{{ frame.name }}</div>
+            <div class="frame-line" v-if="frame.line">第 {{ frame.line }} 行</div>
+          </div>
+          <div v-if="callStack.length === 0" class="empty-stack">
+            栈为空
+          </div>
+        </div>
+      </div>
+
+      <!-- 事件循环 -->
+      <div class="section event-loop">
+        <div class="section-title">事件循环 (Event Loop)</div>
+        <div class="loop-container">
+          <div class="loop-arrow" :class="{ rotating: isRunning }">
+            <svg viewBox="0 0 100 100" class="loop-svg">
+              <circle cx="50" cy="50" r="40" fill="none" stroke="#409eff" stroke-width="4" stroke-dasharray="200" stroke-linecap="round"
+                class="loop-circle" />
+              <polygon points="85,50 75,45 75,55" fill="#409eff" class="loop-arrowhead" />
+            </svg>
+          </div>
+          <div class="loop-label">检查</div>
+        </div>
+
+        <div class="loop-description">
+          <div class="step" :class="{ active: currentStep === 1 }">
+            <span class="step-num">1</span>
+            <span class="step-text">执行调用栈中的同步代码</span>
+          </div>
+          <div class="step" :class="{ active: currentStep === 2 }">
+            <span class="step-num">2</span>
+            <span class="step-text">执行所有微任务 (microtasks)</span>
+          </div>
+          <div class="step" :class="{ active: currentStep === 3 }">
+            <span class="step-num">3</span>
+            <span class="step-text">渲染 UI (如果需要)</span>
+          </div>
+          <div class="step" :class="{ active: currentStep === 4 }">
+            <span class="step-num">4</span>
+            <span class="step-text">执行宏任务 (macrotask)</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 任务队列 -->
+      <div class="section">
+        <div class="section-title">任务队列</div>
+
+        <div class="queue microtask-queue">
+          <div class="queue-title">微任务队列 (Microtasks)</div>
+          <div class="queue-items">
+            <div v-for="(task, idx) in microtasks" :key="task.id" class="queue-item microtask"
+              :style="{ animationDelay: idx * 0.1 + 's' }">
+              <span class="task-name">{{ task.name }}</span>
+              <span class="task-priority">高优先级</span>
+            </div>
+            <div v-if="microtasks.length === 0" class="empty-queue">
+              队列为空
+            </div>
+          </div>
+        </div>
+
+        <div class="queue macrotask-queue">
+          <div class="queue-title">宏任务队列 (Macrotasks)</div>
+          <div class="queue-items">
+            <div v-for="(task, idx) in tasks" :key="task.id" class="queue-item macrotask"
+              :style="{ animationDelay: idx * 0.15 + 's' }">
+              <span class="task-name">{{ task.name }}</span>
+              <span class="task-type">{{ task.type }}</span>
+            </div>
+            <div v-if="tasks.length === 0" class="empty-queue">
+              队列为空
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const isRunning = ref(false)
+const simulationSpeed = ref(2)
+const currentStep = ref(1)
+const callStack = ref([])
+const microtasks = ref([])
+const tasks = ref([])
+let taskIdCounter = 1
+let microtaskIdCounter = 1
+
+function addTask() {
+  if (tasks.value.length >= 10) return
+  const types = ['setTimeout', 'setInterval', 'I/O', 'DOM事件']
+  tasks.value.push({
+    id: taskIdCounter++,
+    name: `任务 ${taskIdCounter - 1}`,
+    type: types[Math.floor(Math.random() * types.length)]
+  })
+}
+
+function addMicrotask() {
+  if (microtasks.value.length >= 5) return
+  microtasks.value.push({
+    id: microtaskIdCounter++,
+    name: `微任务 ${microtaskIdCounter - 1}`
+  })
+}
+
+function startSimulation() {
+  if (isRunning.value) return
+
+  // 确保有任务
+  if (tasks.value.length === 0) {
+    addTask()
+    addTask()
+  }
+  if (microtasks.value.length === 0) {
+    addMicrotask()
+  }
+
+  isRunning.value = true
+  currentStep.value = 1
+
+  // 模拟执行过程
+  runSimulationStep()
+}
+
+function runSimulationStep() {
+  if (!isRunning.value) return
+
+  // 模拟步骤执行
+  const speed = 6 - simulationSpeed.value // 转换为延迟
+  const delay = speed * 200
+
+  setTimeout(() => {
+    if (!isRunning.value) return
+
+    currentStep.value = (currentStep.value % 4) + 1
+
+    // 更新调用栈
+    updateCallStack()
+
+    // 消耗任务
+    if (currentStep.value === 2 && microtasks.value.length > 0) {
+      microtasks.value.shift()
+    } else if (currentStep.value === 4 && tasks.value.length > 0) {
+      tasks.value.shift()
+    }
+
+    // 检查是否完成
+    if (tasks.value.length === 0 && microtasks.value.length === 0) {
+      isRunning.value = false
+      callStack.value = []
+    } else {
+      runSimulationStep()
+    }
+  }, delay)
+}
+
+function updateCallStack() {
+  const stack = []
+
+  switch (currentStep.value) {
+    case 1:
+      stack.push({ name: 'main()', line: 1 })
+      stack.push({ name: 'executeSync()', line: 15 })
+      break
+    case 2:
+      stack.push({ name: 'main()', line: 1 })
+      stack.push({ name: 'processMicrotask()', line: 25 })
+      break
+    case 3:
+      stack.push({ name: 'main()', line: 1 })
+      stack.push({ name: 'render()', line: 35 })
+      break
+    case 4:
+      stack.push({ name: 'main()', line: 1 })
+      stack.push({ name: 'processMacrotask()', line: 45 })
+      break
+  }
+
+  callStack.value = stack
+}
+
+function reset() {
+  isRunning.value = false
+  currentStep.value = 1
+  callStack.value = []
+  microtasks.value = []
+  tasks.value = []
+  taskIdCounter = 1
+  microtaskIdCounter = 1
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.event-loop-container {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.section-title {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+  font-size: 14px;
+  border-bottom: 1px solid #e4e7ed;
+  padding-bottom: 8px;
+}
+
+.stack-container {
+  min-height: 200px;
+}
+
+.stack-frame {
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  font-size: 12px;
+}
+
+.stack-frame.active {
+  background: #ecf5ff;
+  border-color: #409eff;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.frame-name {
+  font-weight: bold;
+  color: #303133;
+}
+
+.frame-line {
+  font-size: 11px;
+  color: #909399;
+}
+
+.empty-stack {
+  text-align: center;
+  color: #909399;
+  padding: 40px;
+  font-size: 12px;
+}
+
+.event-loop {
+  display: flex;
+  flex-direction: column;
+}
+
+.loop-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.loop-arrow {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 12px;
+}
+
+.loop-arrow.rotating .loop-svg {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loop-circle {
+  animation: dash 2s linear infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 200;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+.loop-label {
+  font-size: 16px;
+  font-weight: bold;
+  color: #409eff;
+}
+
+.loop-description {
+  margin-top: 16px;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.step.active {
+  background: #ecf5ff;
+  border-left: 3px solid #409eff;
+}
+
+.step-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #dcdfe6;
+  color: #606266;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.step.active .step-num {
+  background: #409eff;
+  color: white;
+}
+
+.step-text {
+  font-size: 12px;
+  color: #606266;
+}
+
+.step.active .step-text {
+  color: #303133;
+  font-weight: 500;
+}
+
+.queue {
+  margin-bottom: 16px;
+}
+
+.queue-title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #606266;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.queue-title::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.microtask-queue .queue-title::before {
+  background: #f56c6c;
+}
+
+.macrotask-queue .queue-title::before {
+  background: #e6a23c;
+}
+
+.queue-items {
+  min-height: 60px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.queue-item {
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.queue-item.microtask {
+  border-left: 3px solid #f56c6c;
+}
+
+.queue-item.macrotask {
+  border-left: 3px solid #e6a23c;
+}
+
+.task-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.task-type {
+  font-size: 11px;
+  color: #909399;
+}
+
+.empty-queue {
+  text-align: center;
+  color: #909399;
+  padding: 20px;
+  font-size: 12px;
+}
+
+@media (max-width: 1024px) {
+  .event-loop-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
new file mode 100644
index 0000000..c529c31
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="demo-container">
+    <h4>Go 协程 (Goroutine) 与 GMP 调度演示</h4>
+
+    <div class="controls">
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="overview">整体视图</el-radio-button>
+        <el-radio-button label="gmp">GMP 调度</el-radio-button>
+        <el-radio-button label="channel">Channel 通信</el-radio-button>
+      </el-radio-group>
+
+      <el-button type="primary" size="small" @click="startDemo" :disabled="isRunning">
+        {{ isRunning ? '运行中...' : '开始演示' }}
+      </el-button>
+
+      <el-button size="small" @click="addGoroutine" :disabled="goroutines.length >= 20">
+        +Goroutine
+      </el-button>
+
+      <el-button size="small" @click="reset">重置</el-button>
+    </div>
+
+    <!-- GMP 调度视图 -->
+    <div v-if="viewMode === 'gmp' || viewMode === 'overview'" class="gmp-view">
+      <div class="gmp-container">
+        <!-- Global Queue -->
+        <div class="queue-section global-queue">
+          <div class="queue-header">
+            <span class="queue-name">Global Queue (G)</span>
+            <el-tag size="small" type="info">{{ globalQueue.length }}</el-tag>
+          </div>
+          <div class="queue-content">
+            <div v-for="g in globalQueue" :key="g.id" class="g-item"
+              :style="{ backgroundColor: g.color }">
+              G{{ g.id }}
+            </div>
+            <div v-if="globalQueue.length === 0" class="empty-queue">空</div>
+          </div>
+        </div>
+
+        <!-- P (Processors) -->
+        <div class="processors-section">
+          <div class="section-header">
+            <span class="section-name">P (Processors) - {{ processors.length }} 个</span>
+          </div>
+
+          <div class="processors-grid">
+            <div v-for="(p, idx) in processors" :key="idx" class="processor"
+              :class="{ 'active': p.active }"
+              :style="{ borderColor: p.active ? p.color : '#e4e7ed' }">
+              <div class="processor-header">
+                <span class="processor-name">P{{ idx }}</span>
+                <span class="processor-status" :class="{ 'running': p.active }">{{ p.active ? '运行中' : '空闲' }}</span>
+              </div>
+
+              <div class="local-queue">
+                <div class="queue-label">本地队列</div>
+                <div class="local-g-list">
+                  <div v-for="g in p.localQueue" :key="g.id" class="local-g-item"
+                    :style="{ backgroundColor: g.color }">
+                    G{{ g.id }}
+                  </div>
+                  <div v-if="p.localQueue.length === 0" class="empty-local">-</div>
+                </div>
+              </div>
+
+              <div class="m-binding" v-if="p.m">
+                <span class="m-label">绑定 M{{ p.m.id }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- M (Machine Threads) -->
+        <div class="machines-section">
+          <div class="section-header">
+            <span class="section-name">M (Machine Threads) - {{ machines.length }} 个</span>
+          </div>
+
+          <div class="machines-list">
+            <div v-for="m in machines" :key="m.id" class="machine-item"
+              :class="{ 'active': m.active }"
+              :style="{ borderColor: m.active ? '#67c23a' : '#e4e7ed' }">
+              <span class="machine-id">M{{ m.id }}</span>
+              <span class="machine-status">{{ m.active ? '运行中' : '休眠' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="explanation">
+      <el-alert title="GMP 调度模型" type="success"
+        :description="gmpDescription"
+        show-icon :closable="false" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const gmpDescription = 'G (Goroutine): 待执行的任务。M (Machine): 操作系统线程，执行 G 的载体。P (Processor): 逻辑处理器，提供执行上下文。G 先放入 P 的本地队列，P 与 M 绑定后，M 从 P 获取 G 执行。当本地队列空时，会从全局队列或其他 P 偷任务。'
+
+const viewMode = ref('gmp')
+const isRunning = ref(false)
+const goroutines = ref([])
+
+// GMP 数据结构
+const globalQueue = ref([])
+const processors = ref([])
+const machines = ref([])
+
+// 初始化数据
+function initGMP() {
+  // 创建一些 Goroutines
+  const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff', '#c2e7b0', '#f5dab1']
+  const goroutinesData = []
+
+  for (let i = 0; i < 12; i++) {
+    goroutinesData.push({
+      id: i + 1,
+      color: colors[i % colors.length],
+      status: 'waiting'
+    })
+  }
+
+  goroutines.value = goroutinesData
+
+  // 分配全局队列
+  globalQueue.value = goroutinesData.slice(0, 3)
+
+  // 初始化 Processors (P)
+  processors.value = [
+    { id: 0, active: true, color: '#409eff', localQueue: goroutinesData.slice(3, 6), m: { id: 0 } },
+    { id: 1, active: false, color: '#67c23a', localQueue: goroutinesData.slice(6, 9), m: null },
+    { id: 2, active: false, color: '#e6a23c', localQueue: goroutinesData.slice(9, 12), m: null },
+    { id: 3, active: false, color: '#f56c6c', localQueue: [], m: null }
+  ]
+
+  // 初始化 Machines (M)
+  machines.value = [
+    { id: 0, active: true },
+    { id: 1, active: false },
+    { id: 2, active: false },
+    { id: 3, active: false }
+  ]
+}
+
+// 添加 Goroutine
+function addGoroutine() {
+  if (goroutines.value.length >= 20) return
+
+  const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff']
+  const id = goroutines.value.length + 1
+
+  const newG = {
+    id,
+    color: colors[id % colors.length],
+    status: 'waiting'
+  }
+
+  goroutines.value.push(newG)
+
+  // 添加到第一个有空位的 P
+  for (const p of processors.value) {
+    if (p.localQueue.length < 5) {
+      p.localQueue.push(newG)
+      break
+    }
+  }
+}
+
+// 开始演示
+function startDemo() {
+  isRunning.value = true
+
+  // 模拟调度过程
+  let step = 0
+  const interval = setInterval(() => {
+    step++
+
+    // 轮流激活 P
+    processors.value.forEach((p, idx) => {
+      p.active = (idx === step % processors.value.length)
+    })
+
+    // 对应的 M 也激活
+    machines.value.forEach((m, idx) => {
+      m.active = processors.value[idx]?.active || false
+    })
+
+    if (step >= 20) {
+      clearInterval(interval)
+      isRunning.value = false
+    }
+  }, 500)
+}
+
+// 重置
+function reset() {
+  isRunning.value = false
+  initGMP()
+}
+
+// 监听视图模式变化
+watch(viewMode, () => {
+  if (viewMode.value === 'gmp') {
+    initGMP()
+  }
+})
+
+// 初始化
+initGMP()
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.gmp-view {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.gmp-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.queue-section {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.queue-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.queue-name {
+  font-weight: bold;
+  color: #303133;
+}
+
+.queue-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 40px;
+  align-items: center;
+}
+
+.g-item {
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.empty-queue {
+  color: #909399;
+  font-size: 12px;
+  text-align: center;
+  width: 100%;
+}
+
+.processors-section,
+.machines-section {
+  background: #f5f7fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.section-header {
+  margin-bottom: 12px;
+}
+
+.section-name {
+  font-weight: bold;
+  color: #303133;
+  font-size: 13px;
+}
+
+.processors-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.processor {
+  background: white;
+  border: 2px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 10px;
+  transition: all 0.3s;
+}
+
+.processor.active {
+  box-shadow: 0 0 10px currentColor;
+}
+
+.processor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.processor-name {
+  font-weight: bold;
+  font-size: 12px;
+  color: #303133;
+}
+
+.processor-status {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  background: #dcdfe6;
+  color: #606266;
+}
+
+.processor-status.running {
+  background: #67c23a;
+  color: white;
+}
+
+.local-queue {
+  margin-bottom: 8px;
+}
+
+.queue-label {
+  font-size: 10px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.local-g-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.local-g-item {
+  padding: 2px 5px;
+  border-radius: 3px;
+  color: white;
+  font-size: 9px;
+  font-weight: bold;
+}
+
+.empty-local {
+  font-size: 10px;
+  color: #c0c4cc;
+}
+
+.m-binding {
+  font-size: 10px;
+  color: #409eff;
+  background: #ecf5ff;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.m-label {
+  font-weight: 500;
+}
+
+.machines-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.machine-item {
+  background: white;
+  border: 2px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s;
+}
+
+.machine-item.active {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.machine-id {
+  font-weight: bold;
+  font-size: 12px;
+  color: #303133;
+}
+
+.machine-status {
+  font-size: 11px;
+  color: #909399;
+}
+
+.machine-item.active .machine-status {
+  color: #67c23a;
+}
+
+.explanation {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .processors-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
new file mode 100644
index 0000000..e1294f1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="demo-container">
+    <h4>进程内存隔离演示</h4>
+
+    <div class="controls">
+      <el-button type="primary" size="small" @click="addProcess" :disabled="processes.length >= 4">
+        创建进程
+      </el-button>
+      <el-button type="danger" size="small" @click="killProcess" :disabled="processes.length === 0">
+        结束进程
+      </el-button>
+      <el-button size="small" @click="simulateCrash">
+        模拟进程崩溃
+      </el-button>
+      <el-button size="small" @click="reset">
+        重置
+      </el-button>
+    </div>
+
+    <div class="memory-view">
+      <div class="memory-label">系统内存</div>
+      <div class="memory-blocks">
+        <div
+          v-for="process in processes"
+          :key="process.id"
+          class="process-block"
+          :class="{ crashed: process.crashed, active: process.active }"
+          :style="{ width: process.size + '%', backgroundColor: process.color }"
+        >
+          <div class="process-header">
+            <span class="process-name">进程 {{ process.id }}</span>
+            <span class="process-pid">PID: {{ process.pid }}</span>
+          </div>
+          <div class="process-memory">
+            <div class="memory-section code">
+              <span class="section-label">代码段</span>
+              <span class="section-size">{{ process.codeSize }}MB</span>
+            </div>
+            <div class="memory-section data">
+              <span class="section-label">数据段</span>
+              <span class="section-size">{{ process.dataSize }}MB</span>
+            </div>
+            <div class="memory-section heap">
+              <span class="section-label">堆</span>
+              <span class="section-size">{{ process.heapSize }}MB</span>
+            </div>
+            <div class="memory-section stack">
+              <span class="section-label">栈</span>
+              <span class="section-size">{{ process.stackSize }}MB</span>
+            </div>
+          </div>
+          <div v-if="process.crashed" class="crash-overlay">
+            <span class="crash-text">💥 已崩溃</span>
+            <span class="crash-info">不影响其他进程</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="shared-memory" v-if="showSharedMemory">
+        <div class="shared-label">共享内存区域 (IPC)</div>
+        <div class="shared-content">
+          <div v-for="process in processes" :key="process.id" class="shared-access">
+            <span class="access-indicator" :style="{ backgroundColor: process.color }"></span>
+            <span>进程 {{ process.id }} 可以访问</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-panel">
+      <el-alert
+        :title="currentInfo.title"
+        :type="currentInfo.type"
+        :description="currentInfo.description"
+        show-icon
+        :closable="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const processes = ref([])
+const showSharedMemory = ref(false)
+const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c']
+let pidCounter = 1000
+
+const currentInfo = computed(() => {
+  if (processes.value.length === 0) {
+    return {
+      title: '进程隔离',
+      type: 'info',
+      description: '每个进程拥有独立的虚拟地址空间，一个进程崩溃不会影响其他进程。点击"创建进程"开始演示。'
+    }
+  }
+
+  const crashed = processes.value.filter(p => p.crashed).length
+  if (crashed > 0) {
+    return {
+      title: '隔离性验证',
+      type: 'success',
+      description: `进程已崩溃但其他进程正常运行，证明进程间内存隔离有效。崩溃的进程会被操作系统回收资源。`
+    }
+  }
+
+  return {
+    title: '内存布局',
+    type: 'info',
+    description: `当前有 ${processes.value.length} 个进程在运行。每个进程的内存分为代码段、数据段、堆和栈，相互隔离不可访问。`
+  }
+})
+
+function createProcess() {
+  if (processes.value.length >= 4) return
+
+  const id = processes.value.length + 1
+  const size = 20 + Math.random() * 10
+
+  processes.value.push({
+    id,
+    pid: pidCounter++,
+    size,
+    color: colors[id - 1],
+    codeSize: Math.floor(size * 0.15),
+    dataSize: Math.floor(size * 0.1),
+    heapSize: Math.floor(size * 0.6),
+    stackSize: Math.floor(size * 0.15),
+    crashed: false,
+    active: true
+  })
+}
+
+function killProcess() {
+  if (processes.value.length === 0) return
+  processes.value.pop()
+}
+
+function simulateCrash() {
+  if (processes.value.length === 0) return
+
+  // 随机让一个未崩溃的进程崩溃
+  const candidates = processes.value.filter(p => !p.crashed)
+  if (candidates.length > 0) {
+    const victim = candidates[Math.floor(Math.random() * candidates.length)]
+    victim.crashed = true
+    victim.active = false
+  }
+}
+
+function reset() {
+  processes.value = []
+  showSharedMemory.value = false
+  pidCounter = 1000
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.memory-view {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.memory-label {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.memory-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.process-block {
+  border-radius: 6px;
+  padding: 12px;
+  color: white;
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.process-block.crashed {
+  opacity: 0.5;
+}
+
+.process-block.active {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.process-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.process-name {
+  font-weight: bold;
+}
+
+.process-pid {
+  opacity: 0.8;
+  font-size: 12px;
+}
+
+.process-memory {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.memory-section {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.section-label {
+  opacity: 0.7;
+  font-size: 10px;
+}
+
+.section-size {
+  font-weight: bold;
+}
+
+.crash-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.crash-text {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.crash-info {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.shared-memory {
+  margin-top: 16px;
+  padding: 12px;
+  background: #f4f4f5;
+  border-radius: 6px;
+  border: 2px dashed #c0c4cc;
+}
+
+.shared-label {
+  font-weight: bold;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.shared-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.shared-access {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.access-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.info-panel {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .process-memory {
+    flex-wrap: wrap;
+  }
+
+  .cpu-cores {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
new file mode 100644
index 0000000..f4c7159
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="demo-container">
+    <h4>进程 / 线程 / 协程 对比演示</h4>
+
+    <div class="controls">
+      <el-radio-group v-model="model" size="small">
+        <el-radio-button label="process">多进程</el-radio-button>
+        <el-radio-button label="thread">多线程</el-radio-button>
+        <el-radio-button label="coroutine">协程</el-radio-button>
+      </el-radio-group>
+
+      <el-button
+        type="primary"
+        size="small"
+        @click="startSimulation"
+        :disabled="isRunning"
+      >
+        {{ isRunning ? '运行中...' : '开始模拟' }}
+      </el-button>
+    </div>
+
+    <div class="stats-bar">
+      <el-statistic title="内存占用" :value="memoryUsage" suffix="MB" />
+      <el-statistic title="上下文切换" :value="contextSwitches" />
+      <el-statistic title="完成任务" :value="completedTasks" />
+      <el-statistic title="耗时" :value="elapsedTime" suffix="ms" />
+    </div>
+
+    <div class="visualization">
+      <div class="cpu-cores">
+        <div
+          v-for="(core, idx) in cpuCores"
+          :key="idx"
+          class="core"
+          :class="{ active: core.active, type: core.type }"
+        >
+          <span class="core-label">CPU {{ idx + 1 }}</span>
+          <div class="task-indicator" v-if="core.task">
+            {{ core.task }}
+          </div>
+        </div>
+      </div>
+
+      <div class="task-queue">
+        <h5>任务队列</h5>
+        <div class="queue-items">
+          <div
+            v-for="(task, idx) in pendingTasks"
+            :key="task.id"
+            class="queue-item"
+            :style="{ animationDelay: `${idx * 0.1}s` }"
+          >
+            Task {{ task.id }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="explanation">
+      <el-alert
+        :title="explanationTitle"
+        :type="explanationType"
+        :description="explanationText"
+        show-icon
+        :closable="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const model = ref('process')
+const isRunning = ref(false)
+const memoryUsage = ref(0)
+const contextSwitches = ref(0)
+const completedTasks = ref(0)
+const elapsedTime = ref(0)
+
+const cpuCores = ref([
+  { active: false, type: 'process', task: null },
+  { active: false, type: 'process', task: null },
+  { active: false, type: 'process', task: null },
+  { active: false, type: 'process', task: null },
+])
+
+const pendingTasks = ref([])
+
+const explanationTitle = computed(() => {
+  const titles = {
+    process: '多进程模型',
+    thread: '多线程模型',
+    coroutine: '协程模型'
+  }
+  return titles[model.value]
+})
+
+const explanationType = computed(() => {
+  const types = {
+    process: 'success',
+    thread: 'warning',
+    coroutine: 'info'
+  }
+  return types[model.value]
+})
+
+const explanationText = computed(() => {
+  const texts = {
+    process: '每个进程拥有独立的内存空间，隔离性强但开销大。进程间通信需要 IPC 机制。适合需要强隔离的场景，如浏览器标签页、沙箱程序。',
+    thread: '线程共享进程内存，切换开销较小，但需要同步机制保护共享数据。适合 CPU 密集型任务和需要共享数据的场景。',
+    coroutine: '用户态轻量级线程，由运行时调度，切换极快。适合 I/O 密集型高并发场景，如 Web 服务器、网关、长连接服务。'
+  }
+  return texts[model.value]
+})
+
+watch(model, () => {
+  // 重置状态
+  resetSimulation()
+})
+
+function resetSimulation() {
+  isRunning.value = false
+  memoryUsage.value = model.value === 'process' ? 400 : model.value === 'thread' ? 100 : 20
+  contextSwitches.value = 0
+  completedTasks.value = 0
+  elapsedTime.value = 0
+  cpuCores.value.forEach(core => {
+    core.active = false
+    core.type = model.value
+    core.task = null
+  })
+  pendingTasks.value = Array.from({ length: 16 }, (_, i) => ({ id: i + 1 }))
+}
+
+async function startSimulation() {
+  if (isRunning.value) return
+  isRunning.value = true
+
+  const startTime = Date.now()
+  const taskCount = pendingTasks.value.length
+  const baseSwitchCost = model.value === 'process' ? 10 : model.value === 'thread' ? 2 : 1
+
+  // 模拟任务处理
+  while (pendingTasks.value.length > 0 && isRunning.value) {
+    // 分配任务到 CPU 核心
+    for (let i = 0; i < cpuCores.value.length; i++) {
+      if (!cpuCores.value[i].active && pendingTasks.value.length > 0) {
+        const task = pendingTasks.value.shift()
+        cpuCores.value[i].active = true
+        cpuCores.value[i].task = task.id
+
+        // 模拟任务执行时间
+        setTimeout(() => {
+          if (isRunning.value) {
+            cpuCores.value[i].active = false
+            cpuCores.value[i].task = null
+            completedTasks.value++
+            contextSwitches.value += baseSwitchCost
+          }
+        }, 300 + Math.random() * 200)
+      }
+    }
+
+    elapsedTime.value = Date.now() - startTime
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  isRunning.value = false
+}
+
+// 初始化
+resetSimulation()
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  margin: 20px 0;
+}
+
+.controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.visualization {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.cpu-cores {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.core {
+  background: white;
+  border: 2px solid #dcdfe6;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.core.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.core.active.process {
+  border-color: #67c23a;
+  background: #f0f9eb;
+}
+
+.core.active.thread {
+  border-color: #e6a23c;
+  background: #fdf6ec;
+}
+
+.core.active.coroutine {
+  border-color: #909399;
+  background: #f4f4f5;
+}
+
+.core-label {
+  font-size: 12px;
+  color: #606266;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.task-indicator {
+  font-size: 14px;
+  font-weight: bold;
+  color: #409eff;
+}
+
+.task-queue {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.task-queue h5 {
+  margin: 0 0 12px 0;
+  color: #303133;
+}
+
+.queue-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.queue-item {
+  background: #409eff;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.explanation {
+  margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+  .stats-bar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .visualization {
+    grid-template-columns: 1fr;
+  }
+
+  .cpu-cores {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
new file mode 100644
index 0000000..5946b3b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="demo-container">
+    <h4>线程调度演示</h4>
+
+    <div class="controls">
+      <el-radio-group v-model="schedulingPolicy" size="small">
+        <el-radio-button label="fifo">FIFO (先来先服务)</el-radio-button>
+        <el-radio-button label="roundrobin">时间片轮转</el-radio-button>
+        <el-radio-button label="priority">优先级调度</el-radio-button>
+      </el-radio-group>
+
+      <el-button type="primary" size="small" @click="addThread" :disabled="threads.length >= 6">
+        添加线程
+      </el-button>
+
+      <el-button
+        type="success"
+        size="small"
+        @click="toggleSimulation"
+      >
+        {{ isRunning ? '暂停' : '开始调度' }}
+      </el-button>
+
+      <el-button size="small" @click="reset">
+        重置
+      </el-button>
+    </div>
+
+    <div class="timeline-container">
+      <div class="timeline-header">
+        <span class="timeline-label">时间轴</span>
+        <div class="time-marker">0ms</div>
+        <div class="time-marker">100ms</div>
+        <div class="time-marker">200ms</div>
+        <div class="time-marker">300ms</div>
+        <div class="time-marker">400ms</div>
+        <div class="time-marker">500ms</div>
+      </div>
+
+      <div class="thread-rows">
+        <div
+          v-for="thread in threads"
+          :key="thread.id"
+          class="thread-row"
+        >
+          <div class="thread-info">
+            <div class="thread-name" :style="{ color: thread.color }">
+              {{ thread.name }}
+            </div>
+            <div class="thread-details">
+              <el-tag size="small" :type="thread.state === 'running' ? 'success' : thread.state === 'ready' ? 'warning' : 'info'">
+                {{ stateText(thread.state) }}
+              </el-tag>
+              <span class="priority">优先级: {{ thread.priority }}</span>
+            </div>
+          </div>
+
+          <div class="execution-track">
+            <div
+              v-for="(slot, idx) in thread.executionSlots"
+              :key="idx"
+              class="execution-slot"
+              :class="{ running: slot.state === 'running', blocked: slot.state === 'blocked' }"
+              :style="{ left: slot.start + '%', width: slot.width + '%', backgroundColor: slot.state === 'running' ? thread.color : '#dcdfe6' }"
+            >
+              <span v-if="slot.state === 'running'" class="slot-label">运行</span>
+              <span v-else class="slot-label">等待</span>
+            </div>
+
+            <div
+              v-if="thread.state === 'running'"
+              class="current-indicator"
+              :style="{ left: currentTime + '%', backgroundColor: thread.color }"
+            >
+              <div class="indicator-arrow"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="stats-panel">
+      <div class="stat-item">
+        <div class="stat-value">{{ completedThreads }}</div>
+        <div class="stat-label">已完成线程</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ contextSwitches }}</div>
+        <div class="stat-label">上下文切换</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ avgWaitTime }}ms</div>
+        <div class="stat-label">平均等待时间</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ throughput }}</div>
+        <div class="stat-label">吞吐量 (线程/秒)</div>
+      </div>
+    </div>
+
+    <div class="algorithm-info">
+      <h5>当前调度算法: {{ algorithmName }}</h5>
+      <p>{{ algorithmDescription }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const schedulingPolicy = ref('roundrobin')
+const threads = ref([])
+const isRunning = ref(false)
+const currentTime = ref(0)
+const completedThreads = ref(0)
+const contextSwitches = ref(0)
+const totalWaitTime = ref(0)
+const startTime = ref(null)
+
+let animationId = null
+let currentThreadIndex = 0
+let timeQuantum = 50 // 时间片长度
+
+const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff']
+
+const algorithmName = computed(() => {
+  const names = {
+    fifo: 'FIFO (First In First Out)',
+    roundrobin: 'Round Robin (时间片轮转)',
+    priority: 'Priority Scheduling (优先级调度)'
+  }
+  return names[schedulingPolicy.value]
+})
+
+const algorithmDescription = computed(() => {
+  const descriptions = {
+    fifo: '按照线程到达的先后顺序执行，直到当前线程完成才执行下一个。简单公平但可能导致短任务等待长任务。',
+    roundrobin: '每个线程轮流执行一个时间片，时间片用完就切换到下一个线程。响应性好，适合交互式系统。',
+    priority: '根据线程优先级决定执行顺序，高优先级线程优先执行。需要处理优先级反转和饥饿问题。'
+  }
+  return descriptions[schedulingPolicy.value]
+})
+
+const avgWaitTime = computed(() => {
+  if (completedThreads.value === 0) return 0
+  return Math.round(totalWaitTime.value / completedThreads.value)
+})
+
+const throughput = computed(() => {
+  if (!startTime.value) return 0
+  const elapsed = (Date.now() - startTime.value) / 1000
+  if (elapsed === 0) return 0
+  return (completedThreads.value / elapsed).toFixed(2)
+})
+
+const stateText = (state) => {
+  const map = {
+    running: '运行中',
+    ready: '就绪',
+    blocked: '阻塞',
+    completed: '完成'
+  }
+  return map[state] || state
+}
+
+function addThread() {
+  if (threads.value.length >= 6) return
+
+  const id = threads.value.length + 1
+  const priority = Math.floor(Math.random() * 10) + 1
+  const workAmount = 30 + Math.floor(Math.random() * 50) // 30-80% 的工作量
+
+  threads.value.push({
+    id,
+    name: `Thread-${id}`,
+    color: colors[id - 1],
+    priority,
+    state: 'ready',
+    progress: 0,
+    workAmount,
+    executionSlots: [],
+    startTime: null,
+    endTime: null
+  })
+}
+
+function reset() {
+  threads.value = []
+  isRunning.value = false
+  currentTime.value = 0
+  completedThreads.value = 0
+  contextSwitches.value = 0
+  totalWaitTime.value = 0
+  startTime.value = null
+  currentThreadIndex = 0
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+}
+
+function toggleSimulation() {
+  if (isRunning.value) {
+    pauseSimulation()
+  } else {
+    startSimulation()
+  }
+}
+
+function startSimulation() {
+  if (threads.value.length === 0) {
+    // 自动创建一些线程
+    for (let i = 0; i < 3; i++) {
+      addThread()
+    }
+  }
+
+  isRunning.value = true
+  if (!startTime.value) {
+    startTime.value = Date.now()
+  }
+
+  // 初始化所有线程的开始时间
+  threads.value.forEach(thread => {
+    if (!thread.startTime) {
+      thread.startTime = Date.now()
+    }
+  })
+
+  runSimulation()
+}
+
+function pauseSimulation() {
+  isRunning.value = false
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+}
+
+function runSimulation() {
+  if (!isRunning.value) return
+
+  // 根据调度策略选择下一个线程
+  let nextThread = null
+  let nextIndex = -1
+
+  switch (schedulingPolicy.value) {
+    case 'fifo':
+      // FIFO: 找到第一个未完成的线程
+      for (let i = 0; i < threads.value.length; i++) {
+        if (threads.value[i].progress < threads.value[i].workAmount) {
+          nextThread = threads.value[i]
+          nextIndex = i
+          break
+        }
+      }
+      break
+
+    case 'roundrobin':
+      // Round Robin: 轮流执行
+      let attempts = 0
+      while (attempts < threads.value.length) {
+        const idx = currentThreadIndex % threads.value.length
+        if (threads.value[idx].progress < threads.value[idx].workAmount) {
+          nextThread = threads.value[idx]
+          nextIndex = idx
+          currentThreadIndex = (idx + 1) % threads.value.length
+          break
+        }
+        currentThreadIndex++
+        attempts++
+      }
+      break
+
+    case 'priority':
+      // Priority: 选择优先级最高的就绪线程
+      let highestPriority = -1
+      for (let i = 0; i < threads.value.length; i++) {
+        const thread = threads.value[i]
+        if (thread.progress < thread.workAmount && thread.priority > highestPriority) {
+          highestPriority = thread.priority
+          nextThread = thread
+          nextIndex = i
+        }
+      }
+      break
+  }
+
+  // 执行选中的线程
+  if (nextThread) {
+    // 记录状态变化
+    if (nextThread.state !== 'running') {
+      contextSwitches.value++
+      nextThread.state = 'running'
+    }
+
+    // 其他线程设为就绪状态
+    threads.value.forEach((thread, idx) => {
+      if (idx !== nextIndex && thread.state === 'running') {
+        thread.state = 'ready'
+      }
+    })
+
+    // 记录执行槽
+    const lastSlot = nextThread.executionSlots[nextThread.executionSlots.length - 1]
+    if (!lastSlot || lastSlot.state !== 'running') {
+      nextThread.executionSlots.push({
+        start: nextThread.progress,
+        width: 0,
+        state: 'running'
+      })
+    } else {
+      lastSlot.width = 2
+    }
+
+    // 增加进度
+    const increment = schedulingPolicy.value === 'roundrobin' ? 5 : 3
+    nextThread.progress = Math.min(nextThread.progress + increment, nextThread.workAmount)
+
+    // 检查是否完成
+    if (nextThread.progress >= nextThread.workAmount) {
+      nextThread.state = 'completed'
+      nextThread.endTime = Date.now()
+      completedThreads.value++
+      totalWaitTime.value += (nextThread.endTime - nextThread.startTime)
+    }
+
+    // 更新时间显示
+    currentTime.value = nextThread.progress
+  }
+
+  // 检查是否所有线程都完成
+  const allCompleted = threads.value.every(t => t.progress >= t.workAmount)
+  if (allCompleted) {
+    isRunning.value = false
+  } else {
+    animationId = requestAnimationFrame(runSimulation)
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  // 自动创建初始线程
+  for (let i = 0; i < 3; i++) {
+    addThread()
+  }
+})
+
+onUnmounted(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+  }
+})
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+h4 {
+  margin: 0 0 16px 0;
+  color: #303133;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.memory-view {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.memory-label {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.memory-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.process-block {
+  border-radius: 6px;
+  padding: 12px;
+  color: white;
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.process-block.crashed {
+  opacity: 0.5;
+}
+
+.process-block.active {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.process-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.process-name {
+  font-weight: bold;
+}
+
+.process-pid {
+  opacity: 0.8;
+  font-size: 12px;
+}
+
+.process-memory {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.memory-section {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.section-label {
+  opacity: 0.7;
+  font-size: 10px;
+}
+
+.section-size {
+  font-weight: bold;
+}
+
+.crash-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.crash-text {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.crash-info {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.shared-memory {
+  margin-top: 16px;
+  padding: 12px;
+  background: #f4f4f5;
+  border-radius: 6px;
+  border: 2px dashed #c0c4cc;
+}
+
+.shared-label {
+  font-weight: bold;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.shared-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.shared-access {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.access-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.info-panel {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .process-memory {
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue b/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
index 2777381..9e04b66 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
@@ -2,196 +2,375 @@
 import { ref, computed } from 'vue'
 
 const round = ref(1)
-const minRound = 1
-const maxRound = 5
+const maxRound = 20
+const windowLimit = 4000 
 
-const contextTokens = computed(() => 120 + (round.value - 1) * 80)
+// 模拟数据配置
+const systemPromptTokens = 1000 
+const tokensPerRound = 300 
+const costPer1kTokens = 0.002 
 
-const cacheHitRate = computed(() =>
-  round.value === 1 ? 0 : Math.min(80, (round.value - 1) * 20)
-)
+// 计算属性
+const historyTokens = computed(() => (round.value - 1) * tokensPerRound)
+const currentInputTokens = 200 
+const totalTokens = computed(() => systemPromptTokens + historyTokens.value + currentInputTokens)
 
-const baseCostPerRound = 0.025
+// 是否溢出
+const isOverflow = computed(() => totalTokens.value > windowLimit)
+const overflowAmount = computed(() => Math.max(0, totalTokens.value - windowLimit))
+const forgottenRounds = computed(() => Math.floor(overflowAmount.value / tokensPerRound))
 
-const currentCost = computed(() => {
-  const rate = cacheHitRate.value / 100
-  const cost = baseCostPerRound * (1 - rate * 0.9)
-  return cost.toFixed(4)
-})
+// 成本计算
+const currentCost = computed(() => (totalTokens.value / 1000 * costPer1kTokens).toFixed(4))
 
-const savedPercent = computed(() => {
-  const cost = Number(currentCost.value)
-  const saved = ((baseCostPerRound - cost) / baseCostPerRound) * 100
-  return saved.toFixed(1)
-})
+// 高度计算 (相对于 windowLimit)
+const systemHeight = computed(() => (systemPromptTokens / windowLimit) * 100)
+const inputHeight = computed(() => (currentInputTokens / windowLimit) * 100)
+// History 高度展示逻辑：
+// 我们希望展示“总高度”，即使超过 100%。
+// 父容器会限制显示区域，溢出部分通过视觉暗示。
+const historyHeight = computed(() => (historyTokens.value / windowLimit) * 100)
 
-const increaseRound = () => {
-  if (round.value < maxRound) round.value += 1
-}
-
-const decreaseRound = () => {
-  if (round.value > minRound) round.value -= 1
-}
+const totalHeight = computed(() => systemHeight.value + historyHeight.value + inputHeight.value)
 </script>
 
 <template>
-  <div class="agent-context-intro">
-    <div class="header">
-      <h3>三个关键数字：轮次、上下文长度、缓存命中率</h3>
-      <p>拖动轮次，看看这三个数字是怎么一起变化的。</p>
-    </div>
-
-    <div class="round-control">
-      <button class="round-btn" @click="decreaseRound" :disabled="round === minRound">
-        -
-      </button>
-      <div class="round-text">
-        当前假设：我们已经聊到了
-        <strong>第 {{ round }} 轮</strong>。拖动右侧滑块，看看聊多几轮之后，黑板会写满到什么程度，背课文本比例会涨到多高。
-      </div>
-      <input
-        class="round-slider"
-        type="range"
-        :min="minRound"
-        :max="maxRound"
-        v-model.number="round"
-      />
-      <button class="round-btn" @click="increaseRound" :disabled="round === maxRound">
-        +
-      </button>
-    </div>
-
-    <div class="metrics-row">
-      <div class="metric-card">
-        <div class="metric-label">聊了几轮</div>
-        <div class="metric-value">第 {{ round }} 轮</div>
-        <div class="metric-desc">对话轮次</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">记了多少字</div>
-        <div class="metric-value">{{ contextTokens }}</div>
-        <div class="metric-desc">大致对应 token 数</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">背课文本比例</div>
-        <div class="metric-value">{{ cacheHitRate }}%</div>
-        <div class="metric-desc">前缀复用比例</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">这轮大概多少钱</div>
-        <div class="metric-value">${{ currentCost }}</div>
-        <div class="metric-desc">比不做优化便宜了 {{ savedPercent }}%</div>
+  <div class="agent-context-flow">
+    <!-- 1. 顶部统计栏 -->
+    <div class="control-panel">
+      <div class="stat-group">
+        <div class="stat-item">
+          <span class="value">{{ round }}</span>
+          <span class="label">当前轮次</span>
+        </div>
+        <div class="stat-divider"></div>
+        <div class="stat-item">
+          <span class="value" :class="{ error: isOverflow }">{{ totalTokens }}</span>
+          <span class="label">Token 占用</span>
+        </div>
+        <div class="stat-divider"></div>
+        <div class="stat-item">
+          <span class="value">${{ currentCost }}</span>
+          <span class="label">本轮成本</span>
+        </div>
       </div>
     </div>
 
-    <div class="summary-line">
-      参考基准：一轮完全不做优化大约 {{ baseCostPerRound.toFixed(4) }} 美元。
-      在当前轮次下，通过复用前缀，这轮的成本约为 {{ currentCost }} 美元。
+    <!-- 2. 可视化区域 -->
+    <div class="visualization-area">
+      <!-- 上方预留空间给溢出提示 -->
+      <div class="overflow-zone">
+        <transition name="fade">
+          <div v-if="isOverflow" class="overflow-badge">
+            <span class="icon">🗑️</span>
+            <span>溢出截断：前 {{ forgottenRounds }} 轮对话已被遗忘！</span>
+          </div>
+          <div v-else class="safe-badge">
+            <span class="icon">✅</span>
+            <span>记忆完整</span>
+          </div>
+        </transition>
+      </div>
+
+      <!-- 窗口容器 -->
+      <div class="window-frame">
+        <div class="limit-line">
+          <span>Context Window Limit ({{ windowLimit }})</span>
+        </div>
+
+        <!-- 堆叠内容容器 -->
+        <!-- 使用 flex-direction: column-reverse 让底部对齐 -->
+        <div class="stack-container">
+          
+          <!-- System (基座) -->
+          <div class="block system" :style="{ height: `${systemHeight}%` }">
+            <span class="block-text">System Prompt ({{ systemPromptTokens }})</span>
+          </div>
+
+          <!-- History (中间) -->
+          <div class="block history" :style="{ height: `${historyHeight}%` }">
+            <span class="block-text" v-if="historyHeight > 10">
+              History ({{ round - 1 }} rounds)
+            </span>
+            <!-- 溢出遮罩：当溢出时，History 的底部实际上是被“挤出去”的 -->
+            <!-- 但为了可视化简单，我们让顶部溢出。或者，我们让整个 stack 向上移动？ -->
+            <!-- 修正逻辑：Context Window 只有那么大。内容是先进先出。 -->
+            <!-- 所以 System 永远在。History 的旧内容被挤出。New 在最上。 -->
+            <!-- 这里的可视化：如果不溢出，自底向上堆叠。 -->
+            <!-- 如果溢出，System 在底，New 在顶，History 中间部分被挤压/溢出？ -->
+            <!-- 不，真实的 LLM 是滑动窗口。System 通常是 Pinned。 -->
+            <!-- 让我们展示“总量”超过“窗口”。 -->
+          </div>
+
+          <!-- Input (最新) -->
+          <div class="block input" :style="{ height: `${inputHeight}%` }">
+            <span class="block-text">New Input</span>
+          </div>
+          
+        </div>
+        
+        <!-- 溢出遮罩层：如果 totalHeight > 100%，显示一个红色的遮罩在顶部，表示这部分虽然生成了但塞不进去/或者旧的被挤走了 -->
+        <!-- 为了简化，我们让 stack-container 的高度允许超过 100%，然后 window-frame overflow: hidden -->
+        <!-- 但这样用户看不到溢出了多少。 -->
+        <!-- 更好的方式：window-frame 是视口。stack-container 绝对定位。 -->
+      </div>
+    </div>
+
+    <!-- 3. 底部控制 -->
+    <div class="input-section">
+      <div class="slider-wrapper">
+        <span class="slider-hint">拖动滑块增加对话轮次：</span>
+        <input 
+          type="range" 
+          min="1" 
+          :max="maxRound" 
+          v-model.number="round" 
+          class="custom-slider"
+        />
+        <div class="slider-labels">
+          <span>第 1 轮</span>
+          <span>第 {{ maxRound }} 轮</span>
+        </div>
+      </div>
+      
+      <div class="info-box">
+        <p v-if="!isOverflow">
+          💡 <strong>一切正常</strong>：当前 Token 数 ({{ totalTokens }}) 未超过窗口限制。模型能完美回忆起所有对话细节。
+        </p>
+        <p v-else class="warning-text">
+          ⚠️ <strong>发生遗忘</strong>：Token 总量 ({{ totalTokens }}) 已超过窗口限制 ({{ windowLimit }})。
+          为了放入新对话，系统被迫丢弃了最早的 <strong>{{ forgottenRounds }}</strong> 轮历史记录。
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.agent-context-intro {
+.agent-context-flow {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background-color: var(--vp-c-bg-soft);
-  padding: 1rem;
+  overflow: hidden;
   margin: 1rem 0;
+}
+
+/* 1. 顶部统计栏 */
+.control-panel {
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.stat-group {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.stat-item .value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
   font-family: var(--vp-font-family-mono);
 }
 
-.header {
-  margin-bottom: 0.75rem;
+.stat-item .value.error {
+  color: var(--vp-c-red);
 }
 
-.header h3 {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
-}
-
-.header p {
-  margin: 0;
-  font-size: 0.85rem;
+.stat-item .label {
+  font-size: 0.875rem;
   color: var(--vp-c-text-2);
 }
 
-.round-control {
+.stat-divider {
+  width: 1px;
+  height: 2rem;
+  background-color: var(--vp-c-divider);
+}
+
+/* 2. 可视化区域 */
+.visualization-area {
+  padding: 1rem 2rem;
+  background-color: var(--vp-c-bg-alt); /* 稍微深一点的背景 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.overflow-zone {
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overflow-badge {
+  color: var(--vp-c-red);
+  font-weight: 600;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  font-size: 0.85rem;
-}
-
-.round-btn {
-  padding: 0.2rem 0.6rem;
+  background: var(--vp-c-red-dimm);
+  padding: 0.25rem 0.75rem;
   border-radius: 4px;
-  border: 1px solid var(--vp-c-divider);
+}
+
+.safe-badge {
+  color: var(--vp-c-green);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.window-frame {
+  width: 100%;
+  max-width: 300px; /* 限制宽度，像手机屏幕 */
+  height: 300px;
+  border: 2px solid var(--vp-c-divider);
+  border-top: 2px dashed var(--vp-c-red); /* 顶部虚线表示 Limit */
+  border-radius: 0 0 8px 8px;
   background: var(--vp-c-bg);
-  cursor: pointer;
-  font-size: 0.85rem;
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse; /* 底部对齐 */
+  overflow: visible; /* 允许溢出显示 */
 }
 
-.round-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.limit-line {
+  position: absolute;
+  top: -12px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
 }
 
-.round-text {
-  flex: 1;
-  color: var(--vp-c-text-2);
-}
-
-.round-slider {
-  width: 120px;
-}
-
-.metrics-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.metric-card {
-  padding: 0.75rem;
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  text-align: center;
-}
-
-.metric-label {
+.limit-line span {
+  background: var(--vp-c-red);
+  color: white;
   font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.25rem;
+  padding: 0 8px;
+  border-radius: 10px;
 }
 
-.metric-value {
-  font-size: 1.4rem;
+.stack-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse; /* 让 System 在最底 */
+  /* 这里不设 overflow: hidden，让它自然溢出，但是我们通过高度控制 */
+}
+
+.block {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  position: relative;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.block-text {
+  z-index: 1;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.block.system {
+  background-color: #10b981; /* Green */
+  flex-shrink: 0; /* System 不会被压缩 */
+}
+
+.block.history {
+  background-color: #3b82f6; /* Blue */
+  /* 溢出逻辑：当高度增加时，history 会向上顶 */
+}
+
+.block.input {
+  background-color: #f59e0b; /* Amber */
+  flex-shrink: 0;
+}
+
+/* 溢出样式处理 */
+/* 当总高度超过 100% 时，stack-container 会溢出 window-frame */
+/* 我们希望溢出的部分变红或者虚化 */
+
+/* 3. 底部控制 */
+.input-section {
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.slider-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.slider-hint {
+  font-size: 0.9rem;
   font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
 }
 
-.metric-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
+.custom-slider {
+  width: 100%;
+  accent-color: var(--vp-c-brand);
+  cursor: pointer;
 }
 
-.summary-line {
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
   font-size: 0.8rem;
   color: var(--vp-c-text-2);
-  padding: 0.6rem 0.75rem;
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
 }
 
-@media (max-width: 768px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--vp-c-text-2);
+}
+
+.info-box p {
+  margin: 0;
+}
+
+.warning-text {
+  color: var(--vp-c-red-text);
+}
+
+/* 移动端适配 */
+@media (max-width: 640px) {
+  .stat-group {
+    gap: 0.5rem;
+  }
+  .stat-item .value {
+    font-size: 1.2rem;
+  }
+  .window-frame {
+    height: 250px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
new file mode 100644
index 0000000..87f0935
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        B+树索引演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('B+树索引演示')
+const description = ref('展示数据库中B+树索引的结构和工作原理，理解索引如何加速数据查询')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
new file mode 100644
index 0000000..f2ea58e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        数据库演进历程演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('数据库演进历程演示')
+const description = ref('展示数据库从层次数据库、网状数据库到关系数据库、NoSQL数据库的演进过程')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
new file mode 100644
index 0000000..662e556
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        数据库关系演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('数据库关系演示')
+const description = ref('展示关系数据库中表与表之间的关系，包括一对一、一对多、多对多关系')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
new file mode 100644
index 0000000..877c6f4
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        查询优化演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('查询优化演示')
+const description = ref('展示数据库查询优化的原理和方法，包括执行计划分析和索引优化')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
new file mode 100644
index 0000000..7507a90
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        事务ACID特性演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('事务ACID特性演示')
+const description = ref('通过可视化方式演示事务的原子性、一致性、隔离性和持久性')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
new file mode 100644
index 0000000..0910bb3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
@@ -0,0 +1,863 @@
+<!--
+  AssetFingerprintDemo.vue
+  资源指纹(hash)演示
+
+  用途：
+  展示前端构建中如何通过 hash 实现长期缓存策略。
+
+  交互功能：
+  - 构建对比：对比无 hash 和带 hash 的文件名
+  - 缓存演示：模拟浏览器缓存行为
+  - 版本对比：展示文件变更对缓存的影响
+-->
+<template>
+  <div class="asset-fingerprint-demo">
+    <div class="control-panel">
+      <div class="title-section">
+        <span class="icon">🔖</span>
+        <span class="title">资源指纹 (Hash)</span>
+        <span class="subtitle">长期缓存与版本控制</span>
+      </div>
+
+      <div class="controls">
+        <button class="control-btn" @click="simulateBuild">
+          🔄 重新构建
+        </button>
+
+        <div class="toggle-group">
+          <label class="toggle-label">
+            <input
+              type="checkbox"
+              v-model="showHash"
+              @change="updateFileNames"
+            >
+            <span class="toggle-text">启用 Hash</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-content">
+      <!-- 文件列表 -->
+      <div class="files-panel">
+        <div class="panel-header">
+          <span class="panel-title">📁 构建产物</span>
+          <span class="panel-stats">{{ files.length }} 个文件</span>
+        </div>
+
+        <div class="files-list">
+          <div
+            v-for="file in files"
+            :key="file.id"
+            class="file-item"
+            :class="{
+              changed: file.changed,
+              selected: selectedFile?.id === file.id,
+              'with-hash': showHash
+            }"
+            @click="selectFile(file)"
+          >
+            <div class="file-icon" :class="file.type">
+              {{ getFileIcon(file.type) }}
+            </div>
+
+            <div class="file-info">
+              <div class="file-name-row">
+                <span class="file-base">{{ file.baseName }}</span>
+                <span v-if="showHash" class="file-hash">.{{ file.hash }}</span>
+                <span class="file-ext">.{{ file.ext }}</span>
+                <span v-if="file.changed" class="changed-badge">更新</span>
+              </div>
+              <div class="file-meta">
+                <span class="file-size">{{ formatSize(file.size) }}</span>
+                <span class="dot">•</span>
+                <span class="file-mtime">{{ formatTime(file.mtime) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 浏览器缓存模拟 -->
+      <div class="cache-panel">
+        <div class="panel-header">
+          <span class="panel-title">🌐 浏览器缓存</span>
+          <span class="cache-stats">
+            命中: {{ cacheHits }} | 未命中: {{ cacheMisses }}
+          </span>
+        </div>
+
+        <div class="cache-visualization">
+          <div class="cache-legend">
+            <div class="legend-item">
+              <span class="legend-color hit"></span>
+              <span>缓存命中 (Hash 匹配)</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-color miss"></span>
+              <span>缓存未命中 (Hash 变化)</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-color new"></span>
+              <span>新文件 (无缓存)</span>
+            </div>
+          </div>
+
+          <div class="cache-blocks">
+            <div
+              v-for="(block, index) in cacheBlocks"
+              :key="index"
+              class="cache-block"
+              :class="block.status"
+              :style="{ animationDelay: `${index * 0.05}s` }"
+            >
+              <div class="block-icon">{{ block.icon }}</div>
+              <div class="block-name">{{ block.name }}</div>
+              <div v-if="block.hash" class="block-hash">{{ block.hash }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="cache-summary">
+          <h4>📊 缓存策略效果</h4>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-value">{{ cacheHitRate }}%</div>
+              <div class="stat-label">缓存命中率</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-value">{{ bandwidthSaved }}</div>
+              <div class="stat-label">节省带宽</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-value">{{ loadTime }}</div>
+              <div class="stat-label">平均加载时间</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 文件详情 -->
+    <div v-if="selectedFile" class="file-details">
+      <div class="detail-header">
+        <span class="detail-icon" :class="selectedFile.type">
+          {{ getFileIcon(selectedFile.type) }}
+        </span>
+        <div class="detail-title-wrap">
+          <span class="detail-title">{{ selectedFile.name }}</span>
+          <span class="detail-path">dist/{{ selectedFile.path }}</span>
+        </div>
+        <button class="close-btn" @click="selectedFile = null">×</button>
+      </div>
+
+      <div class="detail-content">
+        <div class="detail-section">
+          <h4>📋 文件信息</h4>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">大小:</span>
+              <span class="info-value">{{ formatSize(selectedFile.size) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">类型:</span>
+              <span class="info-value">{{ selectedFile.type.toUpperCase() }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">修改时间:</span>
+              <span class="info-value">{{ formatTime(selectedFile.mtime) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Hash:</span>
+              <span class="info-value hash">{{ selectedFile.hash }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedFile.dependencies?.length">
+          <h4>🔗 依赖的模块 ({{ selectedFile.dependencies.length }})</h4>
+          <div class="deps-tags">
+            <span
+              v-for="depId in selectedFile.dependencies"
+              :key="depId"
+              class="dep-tag"
+              :style="{ background: getNode(depId)?.color || 'var(--vp-c-brand)' }"
+              @click="selectFile(getNode(depId))"
+            >
+              {{ getNode(depId)?.name || depId }}
+            </span>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <h4>💡 缓存策略</h4>
+          <div class="cache-strategy">
+            <p v-if="showHash">
+              ✅ <strong>启用 Hash</strong>：文件名包含内容哈希 ({{ selectedFile.hash }})。
+              文件内容变化时，URL 会改变，浏览器会重新请求。
+              适合配置 <code>Cache-Control: immutable</code> 长期缓存。
+            </p>
+            <p v-else>
+              ⚠️ <strong>无 Hash</strong>：文件名固定为 <code>{{ selectedFile.baseName }}.{{ selectedFile.ext }}</code>。
+              更新文件后，需要手动刷新缓存或使用版本号查询参数。
+              容易遇到"缓存不更新"的问题。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>资源指纹的作用：</strong>
+        通过给文件名添加内容哈希（如 main.a3f7b2c.js），可以实现
+        <strong>永久缓存</strong>策略。
+        只有文件内容变化时哈希才会改变，浏览器才会重新下载。
+        这样用户每次访问都能享受极速加载，同时又能及时获取最新代码。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const showHash = ref(true)
+const selectedNode = ref(null)
+const selectedFile = computed(() => selectedNode.value)
+const cacheHits = ref(42)
+const cacheMisses = ref(8)
+
+// 模拟文件数据
+const generateFiles = () => {
+  const files = [
+    { id: 'main', name: 'main.a3f7b2c.js', baseName: 'main', ext: 'js', type: 'js', size: 125, hash: 'a3f7b2c', mtime: Date.now() - 86400000, dependencies: ['vendor', 'utils'] },
+    { id: 'vendor', name: 'vendor.e8d9a1b.js', baseName: 'vendor', ext: 'js', type: 'js', size: 450, hash: 'e8d9a1b', mtime: Date.now() - 172800000, dependencies: [] },
+    { id: 'utils', name: 'utils.c4b5d6e.js', baseName: 'utils', ext: 'js', type: 'js', size: 28, hash: 'c4b5d6e', mtime: Date.now() - 3600000, dependencies: [], changed: true },
+    { id: 'main-css', name: 'main.f2e8d4a.css', baseName: 'main', ext: 'css', type: 'css', size: 15, hash: 'f2e8d4a', mtime: Date.now() - 86400000, dependencies: [] },
+    { id: 'logo', name: 'logo.b7c3a9f.png', baseName: 'logo', ext: 'png', type: 'image', size: 12, hash: 'b7c3a9f', mtime: Date.now() - 259200000, dependencies: [] },
+    { id: 'index', name: 'index.html', baseName: 'index', ext: 'html', type: 'html', size: 2, hash: null, mtime: Date.now(), dependencies: ['main', 'main-css'] }
+  ]
+  return files.map(f => ({ ...f, path: f.name }))
+}
+
+const files = ref(generateFiles())
+
+const cacheBlocks = computed(() => {
+  return files.value
+    .filter(f => f.type !== 'html')
+    .map((f, i) => ({
+      name: f.baseName,
+      icon: getFileIcon(f.type),
+      hash: showHash.value ? f.hash : null,
+      status: f.changed ? 'miss' : showHash.value ? 'hit' : 'new'
+    }))
+})
+
+const cacheHitRate = computed(() => {
+  const total = cacheBlocks.value.length
+  const hits = cacheBlocks.value.filter(b => b.status === 'hit').length
+  return Math.round((hits / total) * 100) || 0
+})
+
+const bandwidthSaved = computed(() => {
+  const total = files.value.reduce((sum, f) => sum + (f.size || 0), 0)
+  const saved = Math.round(total * (cacheHitRate.value / 100))
+  return saved + ' KB'
+})
+
+const loadTime = computed(() => {
+  const base = 200
+  const hitRate = cacheHitRate.value
+  return Math.round(base - (hitRate * 1.5)) + 'ms'
+})
+
+const getFileIcon = (type) => {
+  const icons = {
+    js: '📜',
+    css: '🎨',
+    image: '🖼️',
+    html: '📄'
+  }
+  return icons[type] || '📄'
+}
+
+const formatSize = (size) => {
+  if (size > 1024) return (size / 1024).toFixed(1) + ' MB'
+  return size + ' KB'
+}
+
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp)
+  return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+const simulateBuild = () => {
+  files.value = generateFiles()
+  // 随机标记一些文件为已更改
+  files.value.forEach(f => {
+    f.changed = Math.random() > 0.7
+  })
+}
+
+const updateFileNames = () => {
+  // 更新文件名显示
+}
+
+const getNode = (id) => files.value.find(f => f.id === id)
+
+onMounted(() => {
+  simulateBuild()
+})
+
+import { watch } from 'vue'
+</script>
+
+<style scoped>
+.asset-fingerprint-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  gap: 1rem;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.title-section .icon {
+  font-size: 1.5rem;
+}
+
+.title-section .title {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.title-section .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  color: white;
+  font-size: 0.8rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.control-btn:hover {
+  opacity: 0.85;
+}
+
+.toggle-group {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.toggle-label input {
+  cursor: pointer;
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.files-panel,
+.cache-panel {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.panel-title {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.panel-stats,
+.cache-stats {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.files-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.file-item:last-child {
+  border-bottom: none;
+}
+
+.file-item:hover,
+.file-item.selected {
+  background: var(--vp-c-bg-soft);
+}
+
+.file-item.changed {
+  background: rgba(255, 107, 107, 0.1);
+}
+
+.file-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  background: var(--vp-c-bg-soft);
+}
+
+.file-icon.js {
+  background: #f7df1e;
+}
+
+.file-icon.css {
+  background: #264de4;
+}
+
+.file-icon.image {
+  background: #ff6b6b;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: monospace;
+  font-size: 0.85rem;
+  flex-wrap: wrap;
+}
+
+.file-base {
+  color: var(--vp-c-text-1);
+}
+
+.file-hash {
+  color: var(--vp-c-brand);
+  font-weight: bold;
+}
+
+.file-ext {
+  color: var(--vp-c-text-2);
+}
+
+.changed-badge {
+  background: #ff6b6b;
+  color: white;
+  font-size: 0.65rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-family: sans-serif;
+  margin-left: 0.25rem;
+}
+
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+.dot {
+  opacity: 0.5;
+}
+
+.cache-visualization {
+  padding: 1rem;
+}
+
+.cache-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+.legend-color.hit {
+  background: #22c55e;
+}
+
+.legend-color.miss {
+  background: #ef4444;
+}
+
+.legend-color.new {
+  background: #3b82f6;
+}
+
+.cache-blocks {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 0.5rem;
+}
+
+.cache-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 0.5rem;
+  border-radius: 6px;
+  text-align: center;
+  animation: fadeIn 0.3s ease backwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.cache-block.hit {
+  background: rgba(34, 197, 94, 0.15);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.cache-block.miss {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.cache-block.new {
+  background: rgba(59, 130, 246, 0.15);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.block-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.block-name {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+}
+
+.block-hash {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  margin-top: 0.1rem;
+}
+
+.cache-summary {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.cache-summary h4 {
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: var(--vp-c-brand);
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+.file-details {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  margin-bottom: 1rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+.detail-icon.js {
+  background: rgba(247, 223, 30, 0.2);
+}
+
+.detail-icon.css {
+  background: rgba(38, 77, 228, 0.2);
+}
+
+.detail-icon.image {
+  background: rgba(255, 107, 107, 0.2);
+}
+
+.detail-title-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.detail-path {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.close-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-3);
+  font-size: 1.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.close-btn:hover {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
+.detail-content {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.detail-section h4 {
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.info-item {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.info-label {
+  color: var(--vp-c-text-3);
+  min-width: 60px;
+}
+
+.info-value {
+  color: var(--vp-c-text-1);
+}
+
+.info-value.hash {
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
+}
+
+.deps-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.dep-tag {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  color: white;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.dep-tag:hover {
+  opacity: 0.85;
+}
+
+.cache-strategy {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.cache-strategy p {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--vp-c-text-1);
+}
+
+.cache-strategy code {
+  background: var(--vp-c-bg);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
new file mode 100644
index 0000000..33510c4
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
@@ -0,0 +1,588 @@
+<!--
+  BuildPipelineDemo.vue
+  构建流水线可视化演示
+
+  用途：
+  展示前端工程化的完整构建流程，从源代码到生产部署的全过程。
+
+  交互功能：
+  - 步骤播放：逐步展示构建流程的每个阶段
+  - 速度控制：调整演示速度
+  - 阶段详情：点击每个阶段查看详细信息
+-->
+<template>
+  <div class="build-pipeline-demo">
+    <div class="control-panel">
+      <div class="title-section">
+        <span class="icon">🏭</span>
+        <span class="title">构建流水线</span>
+        <span class="subtitle">从代码到部署的完整旅程</span>
+      </div>
+      <div class="controls">
+        <button
+          class="control-btn"
+          @click="togglePlay"
+          :class="{ active: isPlaying }"
+        >
+          {{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
+        </button>
+        <button class="control-btn outline" @click="reset">
+          ↺ 重置
+        </button>
+        <div class="speed-control">
+          <label>速度:</label>
+          <select v-model="playbackSpeed">
+            <option :value="0.5">0.5x</option>
+            <option :value="1">1x</option>
+            <option :value="2">2x</option>
+            <option :value="4">4x</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="pipeline-visualization">
+      <div class="pipeline-track">
+        <div
+          v-for="(stage, index) in stages"
+          :key="stage.id"
+          class="stage-node"
+          :class="{
+            completed: currentStage > index,
+            active: currentStage === index,
+            pending: currentStage < index
+          }"
+          @click="selectStage(index)"
+        >
+          <div class="stage-icon">{{ stage.icon }}</div>
+          <div class="stage-info">
+            <div class="stage-name">{{ stage.name }}</div>
+            <div class="stage-duration" v-if="stageDurations[index]">
+              {{ stageDurations[index] }}ms
+            </div>
+          </div>
+          <div class="stage-status">
+            <span v-if="currentStage > index" class="status-icon success">✓</span>
+            <span v-else-if="currentStage === index" class="status-icon loading">
+              <span class="spinner"></span>
+            </span>
+            <span v-else class="status-icon pending">○</span>
+          </div>
+        </div>
+
+        <div class="progress-bar">
+          <div
+            class="progress-fill"
+            :style="{ width: `${(currentStage / stages.length) * 100}%` }"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="stage-details" v-if="selectedStage !== null">
+      <div class="detail-header">
+        <span class="detail-icon">{{ stages[selectedStage].icon }}</span>
+        <span class="detail-title">{{ stages[selectedStage].name }}</span>
+      </div>
+      <div class="detail-content">
+        <div class="detail-section">
+          <h4>📝 阶段说明</h4>
+          <p>{{ stages[selectedStage].description }}</p>
+        </div>
+        <div class="detail-section">
+          <h4>🔧 执行的工具</h4>
+          <div class="tools-list">
+            <span
+              v-for="tool in stages[selectedStage].tools"
+              :key="tool"
+              class="tool-tag"
+            >
+              {{ tool }}
+            </span>
+          </div>
+        </div>
+        <div class="detail-section">
+          <h4>📂 输入输出</h4>
+          <div class="io-info">
+            <div class="io-item">
+              <span class="io-label">输入:</span>
+              <span class="io-value">{{ stages[selectedStage].input }}</span>
+            </div>
+            <div class="io-item">
+              <span class="io-label">输出:</span>
+              <span class="io-value">{{ stages[selectedStage].output }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>构建流水线的作用：</strong>
+        就像工厂的生产线一样，代码也需要经过一系列"加工工序"才能变成用户可以访问的网站。
+        每个阶段都有特定的任务，确保最终产出的代码是优化过、无错误且性能良好的。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const stages = [
+  {
+    id: 'lint',
+    name: '代码检查',
+    icon: '🔍',
+    description: '使用 ESLint、Prettier 等工具检查代码规范，确保代码风格一致，提前发现潜在问题。',
+    tools: ['ESLint', 'Prettier', 'Stylelint'],
+    input: '源代码 (.js, .vue, .css)',
+    output: '检查报告'
+  },
+  {
+    id: 'transform',
+    name: '代码转换',
+    icon: '⚙️',
+    description: '将现代 JavaScript/TypeScript 转换为兼容旧浏览器的代码，处理 JSX、Vue SFC 等。',
+    tools: ['Babel', 'TypeScript', 'SWC'],
+    input: 'ES6+/TS/JSX 源码',
+    output: 'ES5 兼容代码'
+  },
+  {
+    id: 'dependency',
+    name: '依赖解析',
+    icon: '📦',
+    description: '分析模块依赖关系，构建依赖图谱，确定模块加载顺序。',
+    tools: ['Webpack', 'Rollup', 'esbuild'],
+    input: '入口文件 (main.js)',
+    output: '依赖图谱'
+  },
+  {
+    id: 'bundle',
+    name: '模块打包',
+    icon: '📚',
+    description: '将所有模块合并成一个或多个 bundle，优化加载性能。',
+    tools: ['Webpack', 'Vite', 'Parcel'],
+    input: '模块文件',
+    output: 'bundle 文件'
+  },
+  {
+    id: 'optimize',
+    name: '代码优化',
+    icon: '✨',
+    description: '压缩代码、Tree Shaking 移除无用代码、代码分割、生成 Source Map。',
+    tools: ['Terser', 'esbuild', 'Webpack'],
+    input: '未优化的 bundle',
+    output: '优化后的代码'
+  },
+  {
+    id: 'assets',
+    name: '资源处理',
+    icon: '🖼️',
+    description: '处理图片、字体、CSS 等资源，生成资源指纹(hash)，优化缓存策略。',
+    tools: ['file-loader', 'url-loader', 'ImageMagick'],
+    input: '原始资源文件',
+    output: '带 hash 的资源'
+  },
+  {
+    id: 'deploy',
+    name: '部署发布',
+    icon: '🚀',
+    description: '将构建产物上传到 CDN 或服务器，配置缓存策略，完成发布。',
+    tools: ['AWS S3', 'Vercel', 'Netlify'],
+    input: 'dist 目录',
+    output: '线上网站'
+  }
+]
+
+const currentStage = ref(0)
+const selectedStage = ref(null)
+const isPlaying = ref(false)
+const playbackSpeed = ref(1)
+const stageDurations = ref({})
+let playInterval = null
+
+const togglePlay = () => {
+  if (isPlaying.value) {
+    pausePlay()
+  } else {
+    startPlay()
+  }
+}
+
+const startPlay = () => {
+  isPlaying.value = true
+  playInterval = setInterval(() => {
+    if (currentStage.value < stages.length) {
+      const startTime = Date.now()
+      stageDurations.value[currentStage.value] = Math.floor(Math.random() * 500 + 100)
+      currentStage.value++
+    } else {
+      pausePlay()
+    }
+  }, 2000 / playbackSpeed.value)
+}
+
+const pausePlay = () => {
+  isPlaying.value = false
+  if (playInterval) {
+    clearInterval(playInterval)
+    playInterval = null
+  }
+}
+
+const reset = () => {
+  pausePlay()
+  currentStage.value = 0
+  selectedStage.value = null
+  stageDurations.value = {}
+}
+
+const selectStage = (index) => {
+  selectedStage.value = index
+}
+
+onMounted(() => {
+  // Auto-start for demo
+  setTimeout(() => {
+    if (currentStage.value === 0) {
+      startPlay()
+    }
+  }, 1000)
+})
+
+onUnmounted(() => {
+  pausePlay()
+})
+</script>
+
+<style scoped>
+.build-pipeline-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  gap: 1rem;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.title-section .icon {
+  font-size: 1.5rem;
+}
+
+.title-section .title {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.title-section .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  color: white;
+  font-size: 0.8rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.control-btn.outline {
+  background-color: transparent;
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+}
+
+.control-btn:hover {
+  opacity: 0.85;
+}
+
+.speed-control {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+}
+
+.speed-control select {
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  font-size: 0.8rem;
+}
+
+.pipeline-visualization {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  margin-bottom: 1rem;
+}
+
+.pipeline-track {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.progress-bar {
+  position: absolute;
+  left: 24px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 2px;
+  z-index: 0;
+}
+
+.progress-fill {
+  width: 100%;
+  background: linear-gradient(180deg, var(--vp-c-brand), var(--vp-c-brand-dark));
+  border-radius: 2px;
+  transition: height 0.5s ease;
+}
+
+.stage-node {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.stage-node:hover {
+  transform: translateX(4px);
+}
+
+.stage-node.completed {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.stage-node.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg);
+  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.2);
+  animation: pulse 2s infinite;
+}
+
+.stage-node.pending {
+  opacity: 0.6;
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.2); }
+  50% { box-shadow: 0 0 0 6px rgba(var(--vp-c-brand-rgb), 0.1); }
+}
+
+.stage-icon {
+  font-size: 1.5rem;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+}
+
+.stage-info {
+  flex: 1;
+}
+
+.stage-name {
+  font-weight: bold;
+  font-size: 0.95rem;
+}
+
+.stage-duration {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.1rem;
+}
+
+.stage-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+}
+
+.status-icon {
+  font-size: 1rem;
+}
+
+.status-icon.success {
+  color: var(--vp-c-brand);
+  font-weight: bold;
+}
+
+.status-icon.pending {
+  color: var(--vp-c-text-3);
+}
+
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.stage-details {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  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-icon {
+  font-size: 1.25rem;
+}
+
+.detail-title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.detail-content {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.detail-section h4 {
+  font-size: 0.85rem;
+  margin-bottom: 0.4rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-section p {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.tools-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tool-tag {
+  background: var(--vp-c-brand);
+  color: white;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+.io-info {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.io-item {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.io-label {
+  color: var(--vp-c-text-3);
+  min-width: 50px;
+}
+
+.io-value {
+  color: var(--vp-c-text-1);
+  font-family: monospace;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .stage-node {
+    padding: 0.5rem;
+  }
+
+  .stage-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 1.25rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
new file mode 100644
index 0000000..039dcaf
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
@@ -0,0 +1,760 @@
+<!--
+  BundlerComparisonDemo.vue
+  打包工具对比演示 (Vite/Webpack/Rollup)
+
+  用途：
+  直观对比三大主流打包工具的差异和适用场景。
+
+  交互功能：
+  - 工具切换：对比 Vite、Webpack、Rollup
+  - 维度对比：构建速度、配置复杂度、生态丰富度等
+  - 场景推荐：根据项目类型推荐最适合的工具
+-->
+<template>
+  <div class="bundler-comparison-demo">
+    <div class="control-panel">
+      <div class="title-section">
+        <span class="icon">⚖️</span>
+        <span class="title">打包工具对比</span>
+        <span class="subtitle">Vite vs Webpack vs Rollup</span>
+      </div>
+      <div class="view-controls">
+        <button
+          v-for="view in viewModes"
+          :key="view.id"
+          class="view-btn"
+          :class="{ active: currentView === view.id }"
+          @click="currentView = view.id"
+        >
+          {{ view.icon }} {{ view.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 雷达图对比视图 -->
+    <div v-if="currentView === 'radar'" class="radar-view">
+      <div class="radar-container">
+        <svg viewBox="0 0 400 400" class="radar-chart">
+          <!-- 背景网格 -->
+          <g class="grid">
+            <polygon
+              v-for="i in 5"
+              :key="i"
+              :points="getGridPoints(i * 20)"
+              fill="none"
+              stroke="var(--vp-c-divider)"
+              stroke-width="1"
+            />
+            <!-- 轴线 -->
+            <line
+              v-for="(dim, i) in dimensions"
+              :key="i"
+              :x1="200"
+              :y1="200"
+              :x2="getAxisEnd(i).x"
+              :y2="getAxisEnd(i).y"
+              stroke="var(--vp-c-divider)"
+              stroke-width="1"
+            />
+          </g>
+
+          <!-- 数据区域 -->
+          <g class="data-areas">
+            <polygon
+              v-for="(tool, toolIndex) in bundlers"
+              :key="tool.id"
+              :points="getDataPoints(tool.scores)"
+              :fill="tool.color"
+              :stroke="tool.borderColor"
+              fill-opacity="0.2"
+              stroke-width="2"
+              class="data-polygon"
+              :class="{ dimmed: highlightedTool && highlightedTool !== tool.id }"
+              @mouseenter="highlightedTool = tool.id"
+              @mouseleave="highlightedTool = null"
+            />
+          </g>
+
+          <!-- 维度标签 -->
+          <g class="labels">
+            <text
+              v-for="(dim, i) in dimensions"
+              :key="i"
+              :x="getLabelPos(i).x"
+              :y="getLabelPos(i).y"
+              text-anchor="middle"
+              dominant-baseline="middle"
+              fill="var(--vp-c-text-1)"
+              font-size="12"
+              font-weight="bold"
+            >
+              {{ dim.name }}
+            </text>
+          </g>
+        </svg>
+      </div>
+
+      <!-- 图例 -->
+      <div class="legend">
+        <div
+          v-for="tool in bundlers"
+          :key="tool.id"
+          class="legend-item"
+          :class="{ dimmed: highlightedTool && highlightedTool !== tool.id }"
+          @mouseenter="highlightedTool = tool.id"
+          @mouseleave="highlightedTool = null"
+        >
+          <span class="legend-color" :style="{ background: tool.borderColor }"></span>
+          <span class="legend-name">{{ tool.name }}</span>
+          <span class="legend-desc">{{ tool.shortDesc }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格对比视图 -->
+    <div v-else-if="currentView === 'table'" class="table-view">
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th>对比维度</th>
+            <th v-for="tool in bundlers" :key="tool.id">
+              <span class="tool-header">
+                <span class="tool-icon" :style="{ background: tool.borderColor }">{{ tool.icon }}</span>
+                {{ tool.name }}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(dim, dimIndex) in dimensions" :key="dim.key">
+            <td class="dim-name">
+              <span class="dim-icon">{{ dim.icon }}</span>
+              {{ dim.name }}
+            </td>
+            <td
+              v-for="tool in bundlers"
+              :key="tool.id"
+              class="score-cell"
+            >
+              <div class="score-bar-wrapper">
+                <div
+                  class="score-bar"
+                  :style="{
+                    width: `${tool.scores[dimIndex] * 10}%`,
+                    background: tool.borderColor
+                  }"
+                ></div>
+                <span class="score-value">{{ tool.scores[dimIndex] }}/10</span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 场景推荐视图 -->
+    <div v-else-if="currentView === 'recommend'" class="recommend-view">
+      <div class="scenario-list">
+        <div
+          v-for="scenario in scenarios"
+          :key="scenario.id"
+          class="scenario-card"
+          :class="{ expanded: expandedScenario === scenario.id }"
+        >
+          <div
+            class="scenario-header"
+            @click="toggleScenario(scenario.id)"
+          >
+            <span class="scenario-icon">{{ scenario.icon }}</span>
+            <div class="scenario-title-wrap">
+              <span class="scenario-name">{{ scenario.name }}</span>
+              <span class="scenario-desc">{{ scenario.shortDesc }}</span>
+            </div>
+            <span class="expand-icon">{{ expandedScenario === scenario.id ? '▼' : '▶' }}</span>
+          </div>
+
+          <div v-if="expandedScenario === scenario.id" class="scenario-content">
+            <div class="recommendation">
+              <div class="best-choice">
+                <span class="choice-label">🏆 首选推荐</span>
+                <div class="choice-content">
+                  <span
+                    class="tool-badge"
+                    :style="{ background: getTool(scenario.bestChoice).borderColor }"
+                  >
+                    {{ getTool(scenario.bestChoice).icon }} {{ getTool(scenario.bestChoice).name }}
+                  </span>
+                  <p class="choice-reason">{{ scenario.bestReason }}</p>
+                </div>
+              </div>
+
+              <div v-if="scenario.alternative" class="alternative">
+                <span class="choice-label">🥈 备选方案</span>
+                <div class="choice-content">
+                  <span
+                    class="tool-badge alt"
+                    :style="{ background: getTool(scenario.alternative).borderColor }"
+                  >
+                    {{ getTool(scenario.alternative).icon }} {{ getTool(scenario.alternative).name }}
+                  </span>
+                  <p class="choice-reason">{{ scenario.altReason }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>选择建议：</strong>
+        {{ currentView === 'radar' ? '雷达图展示了各工具在多个维度的能力分布，面积越大代表综合能力越强。' :
+           currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分，方便精确对比。' :
+           '根据你的项目类型和团队情况，选择最适合的工具往往比选择"最好"的工具更重要。' }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentView = ref('radar')
+const highlightedTool = ref(null)
+const expandedScenario = ref(null)
+
+const viewModes = [
+  { id: 'radar', name: '雷达图', icon: '📊' },
+  { id: 'table', name: '对比表', icon: '📋' },
+  { id: 'recommend', name: '场景推荐', icon: '🎯' }
+]
+
+const dimensions = [
+  { key: 'speed', name: '构建速度', icon: '⚡' },
+  { key: 'config', name: '配置难度', icon: '🔧' },
+  { key: 'ecosystem', name: '生态丰富', icon: '📦' },
+  { key: 'hmr', name: '热更新速度', icon: '🔥' },
+  { key: 'output', name: '产物优化', icon: '✨' },
+  { key: 'memory', name: '内存占用', icon: '💾' }
+]
+
+const bundlers = [
+  {
+    id: 'vite',
+    name: 'Vite',
+    icon: '⚡',
+    shortDesc: '下一代前端构建工具',
+    color: 'rgba(100, 108, 255, 0.3)',
+    borderColor: '#646cff',
+    scores: [10, 8, 7, 10, 8, 9],
+    features: ['原生 ESM', '极速 HMR', '基于 esbuild']
+  },
+  {
+    id: 'webpack',
+    name: 'Webpack',
+    icon: '📦',
+    shortDesc: '老牌强大的打包工具',
+    color: 'rgba(142, 214, 251, 0.3)',
+    borderColor: '#8ed6fb',
+    scores: [5, 5, 10, 6, 9, 5],
+    features: ['生态最丰富', 'loader/plugin 多', '配置灵活']
+  },
+  {
+    id: 'rollup',
+    name: 'Rollup',
+    icon: '📜',
+    shortDesc: 'JavaScript 模块打包器',
+    color: 'rgba(255, 107, 107, 0.3)',
+    borderColor: '#ff6b6b',
+    scores: [7, 7, 6, 7, 10, 8],
+    features: ['Tree Shaking', '输出最优', '适合库开发']
+  }
+]
+
+const scenarios = [
+  {
+    id: 'spa',
+    icon: '🚀',
+    name: '中小型 SPA 项目',
+    shortDesc: '单页应用，快速开发',
+    bestChoice: 'vite',
+    bestReason: 'Vite 的极速冷启动和热更新让开发体验极佳，配置简单，是中小型项目的首选。',
+    alternative: 'webpack',
+    altReason: '如果需要大量自定义配置或依赖特定的 webpack loader，webpack 仍然是可靠的选择。'
+  },
+  {
+    id: 'library',
+    icon: '📚',
+    name: 'JavaScript 库/组件库',
+    shortDesc: '打包发布 npm 包',
+    bestChoice: 'rollup',
+    bestReason: 'Rollup 生成的代码最干净，Tree Shaking 效果最好，非常适合打包 JavaScript 库。',
+    alternative: 'vite',
+    altReason: 'Vite 使用 Rollup 进行生产构建，同时提供更好的开发体验，也是现代库开发的好选择。'
+  },
+  {
+    id: 'enterprise',
+    icon: '🏢',
+    name: '大型企业级应用',
+    shortDesc: '复杂业务，多人协作',
+    bestChoice: 'webpack',
+    bestReason: 'Webpack 生态最成熟，loader 和 plugin 最丰富，能应对各种复杂场景和定制化需求。',
+    alternative: 'vite',
+    altReason: '如果团队追求更好的开发体验，且项目不需要太多自定义构建逻辑，Vite 也是值得考虑的选项。'
+  },
+  {
+    id: 'ssg',
+    icon: '📝',
+    name: '静态站点生成 (SSG)',
+    shortDesc: '文档站、博客、营销页',
+    bestChoice: 'vite',
+    bestReason: 'VitePress、Astro 等现代 SSG 工具都基于 Vite，开发体验好，构建速度快。',
+    alternative: 'rollup',
+    altReason: '一些轻量级 SSG 工具直接使用 Rollup，如果对产物体积要求极高可以考虑。'
+  }
+]
+
+// 雷达图计算
+const getGridPoints = (radius) => {
+  const points = []
+  for (let i = 0; i < 6; i++) {
+    const angle = (i * 60 - 90) * Math.PI / 180
+    const x = 200 + radius * Math.cos(angle)
+    const y = 200 + radius * Math.sin(angle)
+    points.push(`${x},${y}`)
+  }
+  return points.join(' ')
+}
+
+const getAxisEnd = (index) => {
+  const angle = (index * 60 - 90) * Math.PI / 180
+  return {
+    x: 200 + 100 * Math.cos(angle),
+    y: 200 + 100 * Math.sin(angle)
+  }
+}
+
+const getLabelPos = (index) => {
+  const angle = (index * 60 - 90) * Math.PI / 180
+  return {
+    x: 200 + 125 * Math.cos(angle),
+    y: 200 + 125 * Math.sin(angle)
+  }
+}
+
+const getDataPoints = (scores) => {
+  const points = []
+  for (let i = 0; i < scores.length; i++) {
+    const angle = (i * 60 - 90) * Math.PI / 180
+    const radius = scores[i] * 10
+    const x = 200 + radius * Math.cos(angle)
+    const y = 200 + radius * Math.sin(angle)
+    points.push(`${x},${y}`)
+  }
+  return points.join(' ')
+}
+
+const getTool = (id) => bundlers.find(b => b.id === id)
+
+const toggleScenario = (id) => {
+  expandedScenario.value = expandedScenario.value === id ? null : id
+}
+
+const togglePlay = () => {
+  // Placeholder for play functionality in this component
+}
+
+const reset = () => {
+  // Placeholder for reset functionality
+}
+</script>
+
+<style scoped>
+.bundler-comparison-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  gap: 1rem;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.title-section .icon {
+  font-size: 1.5rem;
+}
+
+.title-section .title {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.title-section .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.view-controls {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.view-btn {
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.view-btn:hover {
+  background: var(--vp-c-bg-alt);
+}
+
+.view-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+/* 雷达图视图 */
+.radar-view {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.radar-container {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.radar-chart {
+  width: 100%;
+  max-width: 350px;
+  height: auto;
+}
+
+.data-polygon {
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.data-polygon:hover {
+  fill-opacity: 0.4;
+}
+
+.data-polygon.dimmed {
+  fill-opacity: 0.1;
+  opacity: 0.3;
+}
+
+.legend {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.legend-item:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.legend-item.dimmed {
+  opacity: 0.3;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.legend-name {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.legend-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-left: auto;
+}
+
+/* 表格视图 */
+.table-view {
+  margin-bottom: 1rem;
+  overflow-x: auto;
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  font-size: 0.85rem;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.comparison-table th {
+  background: var(--vp-c-bg-soft);
+  font-weight: bold;
+}
+
+.comparison-table tr:last-child td {
+  border-bottom: none;
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tool-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+}
+
+.dim-name {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-weight: 500;
+}
+
+.score-cell {
+  min-width: 120px;
+}
+
+.score-bar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.score-bar {
+  height: 8px;
+  border-radius: 4px;
+  min-width: 20px;
+  transition: width 0.3s ease;
+}
+
+.score-value {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+}
+
+/* 推荐视图 */
+.recommend-view {
+  margin-bottom: 1rem;
+}
+
+.scenario-list {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.scenario-card {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.scenario-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.scenario-card.expanded {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.scenario-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.scenario-header:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.scenario-icon {
+  font-size: 1.5rem;
+}
+
+.scenario-title-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.scenario-name {
+  font-weight: bold;
+  font-size: 0.95rem;
+}
+
+.scenario-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.expand-icon {
+  color: var(--vp-c-text-3);
+  font-size: 0.75rem;
+}
+
+.scenario-content {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.recommendation {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.best-choice,
+.alternative {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 0.75rem;
+  align-items: start;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.choice-label {
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+  padding-top: 0.3rem;
+}
+
+.choice-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.tool-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  color: white;
+  font-weight: bold;
+  font-size: 0.85rem;
+  width: fit-content;
+}
+
+.tool-badge.alt {
+  opacity: 0.85;
+}
+
+.choice-reason {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .radar-view {
+    grid-template-columns: 1fr;
+  }
+
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .comparison-table {
+    font-size: 0.75rem;
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
new file mode 100644
index 0000000..238b352
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
@@ -0,0 +1,532 @@
+<!--
+  CodeSplittingDemo.vue
+  代码分割演示
+
+  用途：
+  展示如何通过代码分割实现按需加载，优化首屏性能。
+-->
+<template>
+  <div class="code-splitting-demo">
+    <div class="demo-header">
+      <h3>✂️ 代码分割演示</h3>
+      <p>按需加载，提升首屏速度</p>
+    </div>
+
+    <div class="demo-content">
+      <!-- 左侧：路由配置 -->
+      <div class="routes-panel">
+        <div class="panel-title">🚦 路由配置</div>
+        <div class="routes-list">
+          <div
+            v-for="route in routes"
+            :key="route.path"
+            class="route-item"
+            :class="{ active: currentRoute === route.path, loaded: route.loaded }"
+            @click="navigateTo(route)"
+          >
+            <div class="route-info">
+              <div class="route-path">{{ route.path }}</div>
+              <div class="route-name">{{ route.name }}</div>
+            </div>
+
+            <div class="route-load-info">
+              <span v-if="route.loading" class="loading-badge">加载中...</span>
+              <span v-else-if="route.loaded" class="loaded-badge">已缓存</span>
+              <span v-else class="lazy-badge">按需加载</span>
+            </div>
+
+            <div class="route-size">
+              {{ formatSize(route.size) }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：加载可视化 -->
+      <div class="load-panel">
+        <div class="panel-title">📊 加载分析</div>
+
+        <div class="load-visualization">
+          <!-- 初始加载 -->
+          <div class="load-section">
+            <div class="section-header">
+              <span class="section-icon">🚀</span>
+              <span class="section-title">首屏加载</span>
+              <span class="section-size">{{ formatSize(initialLoadSize) }}</span>
+            </div>
+
+            <div class="chunk-list">
+              <div
+                v-for="chunk in initialChunks"
+                :key="chunk.name"
+                class="chunk-item initial"
+                :style="{ width: getChunkWidth(chunk.size) }"
+              >
+                <span class="chunk-name">{{ chunk.name }}</span>
+                <span class="chunk-size">{{ formatSize(chunk.size) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 按需加载 -->
+          <div class="load-section">
+            <div class="section-header">
+              <span class="section-icon">📦</span>
+              <span class="section-title">按需加载 (Lazy Loading)</span>
+              <span class="section-size">{{ formatSize(lazyLoadSize) }}</span>
+            </div>
+
+            <div class="chunk-list">
+              <div
+                v-for="chunk in lazyChunks"
+                :key="chunk.name"
+                class="chunk-item lazy"
+                :class="{ loaded: chunk.loaded }"
+                :style="{ width: getChunkWidth(chunk.size) }"
+                @click="loadChunk(chunk)"
+              >
+                <span class="chunk-status">{{ chunk.loaded ? '✓' : '○' }}</span>
+                <span class="chunk-name">{{ chunk.name }}</span>
+                <span class="chunk-size">{{ formatSize(chunk.size) }}</span>
+              </div>
+            </div>
+
+            <p class="lazy-tip">💡 点击上方模块可模拟按需加载</p>
+          </div>
+
+          <!-- 优化效果 -->
+          <div class="optimization-summary">
+            <div class="summary-item">
+              <span class="summary-label">未优化总大小</span>
+              <span class="summary-value original">{{ formatSize(totalSize) }}</span>
+            </div>
+
+            <div class="summary-arrow">→</div>
+
+            <div class="summary-item">
+              <span class="summary-label">首屏加载</span>
+              <span class="summary-value optimized">{{ formatSize(initialLoadSize) }}</span>
+            </div>
+
+            <div class="summary-item savings">
+              <span class="summary-label">节省</span>
+              <span class="summary-value">{{ savingsPercent }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>代码分割的核心思想：</strong>
+        不是所有代码都需要在首屏加载。通过动态导入 `import()`，
+        我们可以把非核心功能延迟到真正需要时再加载。
+        这就像餐厅的点餐制——不是把所有菜一次性端上来，而是按需上菜。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 模拟路由配置
+const routes = ref([
+  { path: '/', name: '首页', size: 45, loaded: true, loading: false },
+  { path: '/about', name: '关于我们', size: 28, loaded: false, loading: false },
+  { path: '/dashboard', name: '数据面板', size: 156, loaded: false, loading: false },
+  { path: '/settings', name: '系统设置', size: 89, loaded: false, loading: false },
+  { path: '/reports', name: '报表中心', size: 234, loaded: false, loading: false }
+])
+
+const currentRoute = ref('/')
+
+// 模拟代码块
+const initialChunks = ref([
+  { name: 'runtime', size: 3 },
+  { name: 'core', size: 42 }
+])
+
+const lazyChunks = ref([
+  { name: 'about.chunk', size: 28, loaded: false },
+  { name: 'dashboard.chunk', size: 156, loaded: false },
+  { name: 'settings.chunk', size: 89, loaded: false },
+  { name: 'reports.chunk', size: 234, loaded: false }
+])
+
+// 计算属性
+const initialLoadSize = computed(() =>
+  initialChunks.value.reduce((sum, c) => sum + c.size, 0)
+)
+
+const lazyLoadSize = computed(() =>
+  lazyChunks.value.reduce((sum, c) => sum + c.size, 0)
+)
+
+const totalSize = computed(() => initialLoadSize.value + lazyLoadSize.value)
+
+const savingsPercent = computed(() => {
+  const saved = totalSize.value - initialLoadSize.value
+  return Math.round((saved / totalSize.value) * 100)
+})
+
+// 方法
+const formatSize = (size) => {
+  if (size > 1024) return (size / 1024).toFixed(1) + ' MB'
+  return size + ' KB'
+}
+
+const getChunkWidth = (size) => {
+  const maxSize = Math.max(...initialChunks.value.map(c => c.size), ...lazyChunks.value.map(c => c.size))
+  const percent = (size / maxSize) * 100
+  return `${Math.max(percent, 20)}%`
+}
+
+const navigateTo = (route) => {
+  currentRoute.value = route.path
+
+  if (!route.loaded && !route.loading) {
+    route.loading = true
+    // 模拟加载延迟
+    setTimeout(() => {
+      route.loaded = true
+      route.loading = false
+      // 同步更新 chunk 状态
+      const chunkName = route.path.slice(1) || 'index'
+      const chunk = lazyChunks.value.find(c => c.name.includes(chunkName))
+      if (chunk) chunk.loaded = true
+    }, 800)
+  }
+}
+
+const loadChunk = (chunk) => {
+  if (chunk.loaded) return
+  chunk.loaded = true
+}
+
+const selectFile = (file) => {
+  // 简化处理
+}
+</script>
+
+<style scoped>
+.code-splitting-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.demo-header h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+.demo-header p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.demo-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+@media (max-width: 768px) {
+  .demo-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.routes-panel,
+.load-panel {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.panel-title {
+  background: var(--vp-c-bg-soft);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.routes-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.route-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.route-item:last-child {
+  border-bottom: none;
+}
+
+.route-item:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.route-item.active {
+  background: rgba(100, 108, 255, 0.1);
+  border-left: 3px solid #646cff;
+}
+
+.route-item.loaded .route-path {
+  color: #22c55e;
+}
+
+.route-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.route-path {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.route-name {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.route-load-info {
+  display: flex;
+  align-items: center;
+}
+
+.loading-badge,
+.loaded-badge,
+.lazy-badge {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.loading-badge {
+  background: #3b82f6;
+  color: white;
+  animation: pulse 1.5s infinite;
+}
+
+.loaded-badge {
+  background: #22c55e;
+  color: white;
+}
+
+.lazy-badge {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.route-size {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  min-width: 50px;
+  text-align: right;
+}
+
+.load-visualization {
+  padding: 1rem;
+}
+
+.load-section {
+  margin-bottom: 1.25rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-icon {
+  font-size: 1rem;
+}
+
+.section-title {
+  flex: 1;
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+.section-size {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.chunk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.chunk-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  transition: all 0.2s;
+}
+
+.chunk-item.initial {
+  background: rgba(100, 108, 255, 0.15);
+  border: 1px solid rgba(100, 108, 255, 0.3);
+}
+
+.chunk-item.lazy {
+  background: var(--vp-c-bg-soft);
+  border: 1px dashed var(--vp-c-divider);
+  cursor: pointer;
+}
+
+.chunk-item.lazy:hover {
+  background: var(--vp-c-bg-alt);
+}
+
+.chunk-item.lazy.loaded {
+  background: rgba(34, 197, 94, 0.15);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-style: solid;
+}
+
+.chunk-status {
+  font-size: 0.75rem;
+  width: 16px;
+  text-align: center;
+}
+
+.chunk-name {
+  flex: 1;
+  font-family: monospace;
+}
+
+.chunk-size {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.lazy-tip {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin: 0.5rem 0 0 0;
+  font-style: italic;
+}
+
+.optimization-summary {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.optimization-summary h4 {
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 0.6rem 0.4rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.stat-value {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: var(--vp-c-brand);
+}
+
+.stat-value.original {
+  color: var(--vp-c-text-2);
+  text-decoration: line-through;
+  font-size: 0.9rem;
+}
+
+.stat-value.optimized {
+  color: #22c55e;
+}
+
+.stat-value.savings {
+  color: var(--vp-c-brand);
+}
+
+.stat-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.2rem;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .demo-content {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .route-item {
+    flex-wrap: wrap;
+  }
+
+  .route-size {
+    width: 100%;
+    text-align: left;
+    margin-top: 0.25rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
new file mode 100644
index 0000000..41c591a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
@@ -0,0 +1,840 @@
+<!--
+  DependencyGraphDemo.vue
+  依赖图谱可视化演示
+
+  用途：
+  展示前端项目的依赖关系图，帮助理解模块如何相互引用。
+
+  交互功能：
+  - 图谱可视化：以力导向图展示模块依赖关系
+  - 节点交互：悬停/点击节点查看详情
+  - 路径追踪：高亮显示两个模块间的依赖路径
+  - 布局切换：切换不同的图谱布局方式
+-->
+<template>
+  <div class="dependency-graph-demo">
+    <div class="control-panel">
+      <div class="title-section">
+        <span class="icon">🕸️</span>
+        <span class="title">依赖图谱</span>
+        <span class="subtitle">模块依赖关系可视化</span>
+      </div>
+
+      <div class="controls">
+        <div class="layout-control">
+          <label>布局:</label>
+          <select v-model="currentLayout">
+            <option value="force">力导向图</option>
+            <option value="circular">环形布局</option>
+            <option value="hierarchical">层次布局</option>
+          </select>
+        </div>
+
+        <button class="control-btn" @click="resetGraph">
+          ↺ 重置视图
+        </button>
+
+        <button class="control-btn outline" @click="toggleAnimation">
+          {{ isAnimating ? '⏸ 暂停' : '▶ 动画' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="graph-container" ref="graphContainer">
+      <svg
+        class="graph-svg"
+        :viewBox="`0 0 ${width} ${height}`"
+        @wheel.prevent="handleZoom"
+        @mousedown="startDrag"
+        @mousemove="handleDrag"
+        @mouseup="endDrag"
+        @mouseleave="endDrag"
+      >
+        <!-- 网格背景 -->
+        <defs>
+          <pattern
+            id="grid"
+            width="40"
+            height="40"
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d="M 40 0 L 0 0 0 40"
+              fill="none"
+              stroke="var(--vp-c-divider)"
+              stroke-width="0.5"
+            />
+          </pattern>
+
+          <!-- 箭头标记 -->
+          <marker
+            id="arrowhead"
+            markerWidth="10"
+            markerHeight="7"
+            refX="20"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon
+              points="0 0, 10 3.5, 0 7"
+              fill="var(--vp-c-text-3)"
+            />
+          </marker>
+
+          <!-- 高亮箭头 -->
+          <marker
+            id="arrowhead-highlight"
+            markerWidth="10"
+            markerHeight="7"
+            refX="20"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon
+              points="0 0, 10 3.5, 0 7"
+              fill="var(--vp-c-brand)"
+            />
+          </marker>
+        </defs>
+
+        <rect width="100%" height="100%" fill="url(#grid)" />
+
+        <!-- 连线 -->
+        <g class="edges">
+          <line
+            v-for="edge in edges"
+            :key="`${edge.source}-${edge.target}`"
+            :x1="getNode(edge.source).x"
+            :y1="getNode(edge.source).y"
+            :x2="getNode(edge.target).x"
+            :y2="getNode(edge.target).y"
+            :stroke="edge.highlighted ? 'var(--vp-c-brand)' : 'var(--vp-c-text-3)'"
+            :stroke-width="edge.highlighted ? 3 : 1.5"
+            :marker-end="edge.highlighted ? 'url(#arrowhead-highlight)' : 'url(#arrowhead)'"
+            class="edge-line"
+          />
+        </g>
+
+        <!-- 节点 -->
+        <g class="nodes">
+          <g
+            v-for="node in nodes"
+            :key="node.id"
+            :transform="`translate(${node.x}, ${node.y})`"
+            class="node"
+            :class="{
+              selected: selectedNode === node.id,
+              highlighted: node.highlighted,
+              entry: node.type === 'entry'
+            }"
+            @mouseenter="highlightNode(node.id)"
+            @mouseleave="unhighlightNode"
+            @click="selectNode(node.id)"
+          >
+            <!-- 节点外圈 -->
+            <circle
+              :r="node.size + 4"
+              :fill="node.color"
+              opacity="0.2"
+              class="node-glow"
+            />
+
+            <!-- 节点主体 -->
+            <circle
+              :r="node.size"
+              :fill="node.color"
+              stroke="white"
+              stroke-width="2"
+              class="node-circle"
+            />
+
+            <!-- 节点图标 -->
+            <text
+              y="4"
+              text-anchor="middle"
+              fill="white"
+              font-size="14"
+              class="node-icon"
+            >
+              {{ node.icon }}
+            </text>
+
+            <!-- 节点标签 -->
+            <text
+              :y="node.size + 18"
+              text-anchor="middle"
+              :fill="selectedNode === node.id ? 'var(--vp-c-brand)' : 'var(--vp-c-text-1)'"
+              font-size="11"
+              font-weight="500"
+              class="node-label"
+            >
+              {{ node.name }}
+            </text>
+          </g>
+        </g>
+      </svg>
+
+      <!-- 缩放控制 -->
+      <div class="zoom-controls">
+        <button class="zoom-btn" @click="zoomIn">+</button>
+        <span class="zoom-level">{{ Math.round(zoom * 100) }}%</span>
+        <button class="zoom-btn" @click="zoomOut">-</button>
+      </div>
+    </div>
+
+    <!-- 节点详情面板 -->
+    <div v-if="selectedNodeData" class="node-details">
+      <div class="detail-header">
+        <span
+          class="detail-icon"
+          :style="{ background: selectedNodeData.color }"
+        >{{ selectedNodeData.icon }}</span>
+        <div class="detail-title-wrap">
+          <span class="detail-title">{{ selectedNodeData.name }}</span>
+          <span class="detail-type">{{ selectedNodeData.type === 'entry' ? '入口文件' : '模块' }}</span>
+        </div>
+        <button class="close-btn" @click="selectedNode = null">×</button>
+      </div>
+
+      <div class="detail-content">
+        <div class="detail-section">
+          <h4>📦 依赖信息</h4>
+          <div class="deps-info">
+            <div class="deps-count">
+              <span class="count-label">引入:</span>
+              <span class="count-value">{{ selectedNodeData.dependencies?.length || 0 }} 个模块</span>
+            </div>
+            <div class="deps-count">
+              <span class="count-label">被引用:</span>
+              <span class="count-value">{{ getIncomingDeps(selectedNodeData.id).length }} 个模块</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedNodeData.dependencies?.length">
+          <h4>🔗 引用的模块</h4>
+          <div class="deps-list">
+            <span
+              v-for="depId in selectedNodeData.dependencies"
+              :key="depId"
+              class="dep-tag"
+              :style="{ background: getNode(depId)?.color || 'var(--vp-c-brand)' }"
+              @click="selectNode(depId)"
+            >
+              {{ getNode(depId)?.name || depId }}
+            </span>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <h4>📊 模块大小</h4>
+          <div class="size-bar">
+            <div
+              class="size-fill"
+              :style="{
+                width: `${Math.min((selectedNodeData.size || 0) / 10, 100)}%`,
+                background: selectedNodeData.color
+              }"
+            ></div>
+            <span class="size-text">{{ selectedNodeData.size || 0 }} KB</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>依赖图谱的作用：</strong>
+        就像地图一样，依赖图谱帮助你理解项目中的模块是如何相互关联的。
+        你可以快速找到某个模块被哪些地方引用，或者发现循环依赖等问题。
+        在大型项目中，良好的依赖结构是维护性的关键。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const width = 600
+const height = 400
+const currentView = ref('radar')
+const highlightedTool = ref(null)
+const selectedNode = ref(null)
+const zoom = ref(1)
+const isDragging = ref(false)
+const dragStart = ref({ x: 0, y: 0 })
+const panOffset = ref({ x: 0, y: 0 })
+const currentLayout = ref('force')
+const isAnimating = ref(true)
+
+// 模拟项目依赖数据
+const nodes = ref([
+  { id: 'main', name: 'main.js', type: 'entry', size: 5, icon: '🚀', color: '#646cff', x: 300, y: 200, dependencies: ['utils', 'components', 'api'] },
+  { id: 'utils', name: 'utils.js', type: 'module', size: 12, icon: '🛠️', color: '#ff6b6b', x: 150, y: 100, dependencies: ['helpers'] },
+  { id: 'components', name: 'components/', type: 'module', size: 45, icon: '🧩', color: '#4ecdc4', x: 450, y: 120, dependencies: ['utils', 'hooks'] },
+  { id: 'api', name: 'api.js', type: 'module', size: 8, icon: '🔌', color: '#ffe66d', x: 200, y: 300, dependencies: ['config'] },
+  { id: 'helpers', name: 'helpers.js', type: 'module', size: 6, icon: '🔧', color: '#a8e6cf', x: 80, y: 50, dependencies: [] },
+  { id: 'hooks', name: 'hooks.js', type: 'module', size: 15, icon: '⚓', color: '#ff8b94', x: 520, y: 200, dependencies: ['utils'] },
+  { id: 'config', name: 'config.js', type: 'module', size: 3, icon: '⚙️', color: '#c7ceea', x: 120, y: 350, dependencies: [] }
+])
+
+const edges = computed(() => {
+  const edgeList = []
+  nodes.value.forEach(node => {
+    if (node.dependencies) {
+      node.dependencies.forEach(depId => {
+        edgeList.push({
+          source: node.id,
+          target: depId,
+          highlighted: false
+        })
+      })
+    }
+  })
+  return edgeList
+})
+
+const selectedNodeData = computed(() => {
+  if (!selectedNode.value) return null
+  return nodes.value.find(n => n.id === selectedNode.value)
+})
+
+const getNode = (id) => nodes.value.find(n => n.id === id)
+
+const getIncomingDeps = (nodeId) => {
+  return nodes.value.filter(n => n.dependencies?.includes(nodeId))
+}
+
+const selectNode = (id) => {
+  selectedNode.value = id
+  // 高亮相关边
+  edges.value.forEach(edge => {
+    edge.highlighted = edge.source === id || edge.target === id
+  })
+}
+
+const highlightNode = (id) => {
+  // 悬停效果
+}
+
+const unhighlightNode = () => {
+  // 清除悬停效果
+}
+
+const zoomIn = () => {
+  zoom.value = Math.min(zoom.value * 1.2, 3)
+}
+
+const zoomOut = () => {
+  zoom.value = Math.max(zoom.value / 1.2, 0.3)
+}
+
+const handleZoom = (e) => {
+  const delta = e.deltaY > 0 ? 0.9 : 1.1
+  zoom.value = Math.max(0.3, Math.min(3, zoom.value * delta))
+}
+
+const startDrag = (e) => {
+  isDragging.value = true
+  dragStart.value = { x: e.clientX - panOffset.value.x, y: e.clientY - panOffset.value.y }
+}
+
+const handleDrag = (e) => {
+  if (!isDragging.value) return
+  panOffset.value = {
+    x: e.clientX - dragStart.value.x,
+    y: e.clientY - dragStart.value.y
+  }
+}
+
+const endDrag = () => {
+  isDragging.value = false
+}
+
+const resetGraph = () => {
+  zoom.value = 1
+  panOffset.value = { x: 0, y: 0 }
+  selectedNode.value = null
+  // 重置节点位置
+  nodes.value.forEach((node, i) => {
+    const angle = (i / nodes.value.length) * 2 * Math.PI
+    node.x = 300 + 150 * Math.cos(angle)
+    node.y = 200 + 100 * Math.sin(angle)
+  })
+}
+
+const toggleAnimation = () => {
+  isAnimating.value = !isAnimating.value
+}
+
+const toggleScenario = (id) => {
+  expandedScenario.value = expandedScenario.value === id ? null : id
+}
+
+// 简化的力导向布局模拟
+let animationFrame
+const simulateForceLayout = () => {
+  if (!isAnimating.value) return
+
+  const centerX = width / 2
+  const centerY = height / 2
+  const k = 50 // 弹簧常数
+  const repulsion = 500 // 斥力
+
+  nodes.value.forEach((node, i) => {
+    let fx = 0, fy = 0
+
+    // 向中心的引力
+    fx += (centerX - node.x) * 0.01
+    fy += (centerY - node.y) * 0.01
+
+    // 节点间的斥力
+    nodes.value.forEach((other, j) => {
+      if (i === j) return
+      const dx = node.x - other.x
+      const dy = node.y - other.y
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1
+      const force = repulsion / (dist * dist)
+      fx += (dx / dist) * force
+      fy += (dy / dist) * force
+    })
+
+    // 依赖的弹簧力
+    if (node.dependencies) {
+      node.dependencies.forEach(depId => {
+        const target = nodes.value.find(n => n.id === depId)
+        if (target) {
+          const dx = target.x - node.x
+          const dy = target.y - node.y
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1
+          const force = (dist - k) * 0.01
+          fx += (dx / dist) * force
+          fy += (dy / dist) * force
+        }
+      })
+    }
+
+    // 应用力
+    node.x += fx * 0.1
+    node.y += fy * 0.1
+
+    // 边界限制
+    node.x = Math.max(30, Math.min(width - 30, node.x))
+    node.y = Math.max(30, Math.min(height - 30, node.y))
+  })
+
+  animationFrame = requestAnimationFrame(simulateForceLayout)
+}
+
+onMounted(() => {
+  simulateForceLayout()
+})
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+})
+
+// 场景推荐数据
+const expandedScenario = ref(null)
+
+const scenarios = [
+  {
+    id: 'spa',
+    icon: '🚀',
+    name: '中小型 SPA 项目',
+    shortDesc: '单页应用，快速开发',
+    bestChoice: 'vite',
+    bestReason: 'Vite 的极速冷启动和热更新让开发体验极佳，配置简单，是中小型项目的首选。',
+    alternative: 'webpack',
+    altReason: '如果需要大量自定义配置或依赖特定的 webpack loader，webpack 仍然是可靠的选择。'
+  },
+  {
+    id: 'library',
+    icon: '📚',
+    name: 'JavaScript 库/组件库',
+    shortDesc: '打包发布 npm 包',
+    bestChoice: 'rollup',
+    bestReason: 'Rollup 生成的代码最干净，Tree Shaking 效果最好，非常适合打包 JavaScript 库。',
+    alternative: 'vite',
+    altReason: 'Vite 使用 Rollup 进行生产构建，同时提供更好的开发体验，也是现代库开发的好选择。'
+  },
+  {
+    id: 'enterprise',
+    icon: '🏢',
+    name: '大型企业级应用',
+    shortDesc: '复杂业务，多人协作',
+    bestChoice: 'webpack',
+    bestReason: 'Webpack 生态最成熟，loader 和 plugin 最丰富，能应对各种复杂场景和定制化需求。',
+    alternative: 'vite',
+    altReason: '如果团队追求更好的开发体验，且项目不需要太多自定义构建逻辑，Vite 也是值得考虑的选项。'
+  },
+  {
+    id: 'ssg',
+    icon: '📝',
+    name: '静态站点生成 (SSG)',
+    shortDesc: '文档站、博客、营销页',
+    bestChoice: 'vite',
+    bestReason: 'VitePress、Astro 等现代 SSG 工具都基于 Vite，开发体验好，构建速度快。',
+    alternative: 'rollup',
+    altReason: '一些轻量级 SSG 工具直接使用 Rollup，如果对产物体积要求极高可以考虑。'
+  }
+]
+
+const getTool = (id) => bundlers.find(b => b.id === id)
+
+// 简化的布局切换
+watch(currentLayout, (newLayout) => {
+  // 重置节点位置以演示不同布局
+  nodes.value.forEach((node, i) => {
+    if (newLayout === 'circular') {
+      const angle = (i / nodes.value.length) * 2 * Math.PI
+      node.x = 300 + 150 * Math.cos(angle)
+      node.y = 200 + 120 * Math.sin(angle)
+    } else if (newLayout === 'hierarchical') {
+      const level = node.type === 'entry' ? 0 : node.dependencies?.length > 2 ? 1 : 2
+      const siblings = nodes.value.filter(n => {
+        const nl = n.type === 'entry' ? 0 : n.dependencies?.length > 2 ? 1 : 2
+        return nl === level
+      })
+      const index = siblings.indexOf(node)
+      const total = siblings.length
+      node.x = 100 + (index + 1) * (400 / (total + 1))
+      node.y = 80 + level * 120
+    }
+  })
+})
+</script>
+
+<style scoped>
+.dependency-graph-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  gap: 1rem;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.title-section .icon {
+  font-size: 1.5rem;
+}
+
+.title-section .title {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.title-section .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.layout-control {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.85rem;
+}
+
+.layout-control select {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  font-size: 0.85rem;
+}
+
+.control-btn {
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  color: white;
+  font-size: 0.8rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.control-btn.outline {
+  background-color: transparent;
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+}
+
+.control-btn:hover {
+  opacity: 0.85;
+}
+
+.graph-container {
+  position: relative;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  height: 400px;
+  overflow: hidden;
+}
+
+.graph-svg {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+.graph-svg:active {
+  cursor: grabbing;
+}
+
+.edge-line {
+  transition: all 0.3s ease;
+}
+
+.node {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.node:hover {
+  transform: scale(1.1);
+}
+
+.node.selected .node-circle {
+  stroke: var(--vp-c-brand);
+  stroke-width: 4;
+}
+
+.node.highlighted .node-glow {
+  opacity: 0.5;
+}
+
+.node-glow {
+  transition: opacity 0.3s ease;
+}
+
+.zoom-controls {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  padding: 0.25rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.zoom-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.zoom-btn:hover {
+  background: var(--vp-c-bg-alt);
+}
+
+.zoom-level {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  min-width: 40px;
+  text-align: center;
+}
+
+.node-details {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  margin-bottom: 1rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+}
+
+.detail-title-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.detail-type {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.close-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-3);
+  font-size: 1.25rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.close-btn:hover {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
+.detail-content {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.detail-section h4 {
+  font-size: 0.85rem;
+  margin-bottom: 0.4rem;
+  color: var(--vp-c-text-1);
+}
+
+.deps-info {
+  display: flex;
+  gap: 1rem;
+}
+
+.deps-count {
+  display: flex;
+  flex-direction: column;
+}
+
+.count-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.count-value {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.deps-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.dep-tag {
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: white;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.dep-tag:hover {
+  opacity: 0.85;
+}
+
+.size-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  padding: 0.25rem;
+}
+
+.size-fill {
+  height: 8px;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  min-width: 4px;
+}
+
+.size-text {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  min-width: 50px;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .radar-view {
+    grid-template-columns: 1fr;
+  }
+
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
new file mode 100644
index 0000000..b369426
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
@@ -0,0 +1,429 @@
+<!--
+  HotReloadDemo.vue
+  热更新机制演示
+
+  用途：
+  展示HMR（热模块替换）的工作原理。
+-->
+<template>
+  <div class="hot-reload-demo">
+    <div class="demo-header">
+      <h3>🔥 热更新 (HMR) 演示</h3>
+      <p>修改代码无需刷新页面，即时生效</p>
+    </div>
+
+    <div class="demo-content">
+      <!-- 对比图 -->
+      <div class="comparison">
+        <div class="method-card no-hmr">
+          <div class="card-header">
+            <span class="icon">🔄</span>
+            <span class="title">传统刷新</span>
+          </div>
+          <div class="card-body">
+            <div class="step" v-for="(step, i) in noHmrSteps" :key="i">
+              <span class="step-num">{{ i + 1 }}</span>
+              <span class="step-text">{{ step }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="time">⏱️ 5-10秒</span>
+            <span class="state">页面闪烁、状态丢失</span>
+          </div>
+        </div>
+
+        <div class="vs-divider">VS</div>
+
+        <div class="method-card hmr">
+          <div class="card-header">
+            <span class="icon">⚡</span>
+            <span class="title">HMR 热更新</span>
+          </div>
+          <div class="card-body">
+            <div class="step" v-for="(step, i) in hmrSteps" :key="i">
+              <span class="step-num">{{ i + 1 }}</span>
+              <span class="step-text">{{ step }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="time">⏱️ 50-200ms</span>
+            <span class="state">无刷新、状态保持</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 流程图 -->
+      <div class="flow-diagram">
+        <h4>HMR 工作流程</h4>
+        <div class="flow-steps">
+          <div class="flow-step" v-for="(step, i) in flowSteps" :key="i">
+            <div class="step-box">
+              <span class="step-icon">{{ step.icon }}</span>
+              <span class="step-label">{{ step.label }}</span>
+            </div>
+            <div v-if="i < flowSteps.length - 1" class="step-arrow">→</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 支持情况 -->
+      <div class="support-table">
+        <h4>各构建工具 HMR 支持</h4>
+        <table>
+          <thead>
+            <tr>
+              <th>构建工具</th>
+              <th>HMR 支持</th>
+              <th>更新速度</th>
+              <th>特点</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="tool in hmrTools" :key="tool.name">
+              <td><strong>{{ tool.name }}</strong></td>
+              <td>
+                <span class="badge" :class="tool.supportClass">{{ tool.support }}</span>
+              </td>
+              <td>{{ tool.speed }}</td>
+              <td>{{ tool.feature }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>HMR 的核心原理：</strong>
+        构建工具通过 WebSocket 与浏览器保持连接。当文件修改后，工具编译变更模块，通过 WebSocket 通知浏览器。
+        浏览器中的 HMR Runtime 接收更新，替换旧模块，同时保持应用状态不变。
+        这就像是给飞行中的飞机换引擎——不停机就能完成更新。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const noHmrSteps = [
+  '修改代码并保存',
+  '手动刷新浏览器',
+  '页面重新加载所有资源',
+  '应用状态重置（登录丢失）'
+]
+
+const hmrSteps = [
+  '修改代码并保存',
+  '构建工具检测变更并编译',
+  'WebSocket 推送更新到浏览器',
+  '局部替换模块，状态保持'
+]
+
+const flowSteps = [
+  { icon: '👨‍💻', label: '开发者修改代码' },
+  { icon: '🛠️', label: '构建工具编译' },
+  { icon: '📡', label: 'WebSocket推送' },
+  { icon: '🔄', label: '浏览器替换模块' },
+  { icon: '✨', label: '页面即时更新' }
+]
+
+const hmrTools = [
+  {
+    name: 'Vite',
+    support: '原生支持',
+    supportClass: 'excellent',
+    speed: '极快 (<100ms)',
+    feature: '基于 ESM，HMR 速度最快'
+  },
+  {
+    name: 'Webpack',
+    support: '完全支持',
+    supportClass: 'good',
+    speed: '较快 (1-3s)',
+    feature: '最成熟的 HMR 实现'
+  },
+  {
+    name: 'Parcel',
+    support: '自动支持',
+    supportClass: 'good',
+    speed: '快 (500ms-1s)',
+    feature: '零配置，自动 HMR'
+  },
+  {
+    name: 'Rollup',
+    support: '插件支持',
+    supportClass: 'fair',
+    speed: '开发时较慢',
+    feature: '主要用于生产构建'
+  }
+]
+</script>
+
+<style scoped>
+.hot-reload-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.demo-header h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+.demo-header p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.comparison {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0;
+  align-items: stretch;
+}
+
+@media (max-width: 768px) {
+  .comparison {
+    flex-direction: column;
+  }
+}
+
+.method-card {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 2px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.method-card.hmr {
+  border-color: var(--vp-c-brand);
+}
+
+.card-header {
+  background: var(--vp-c-bg-soft);
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.card-header .icon {
+  font-size: 1.25rem;
+}
+
+.card-header .title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.4rem 0;
+  font-size: 0.8rem;
+  border-bottom: 1px solid var(--vp-c-divider-light);
+}
+
+.step:last-child {
+  border-bottom: none;
+}
+
+.step-num {
+  width: 18px;
+  height: 18px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.65rem;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.step-text {
+  color: var(--vp-c-text-1);
+  line-height: 1.4;
+}
+
+.card-footer {
+  background: var(--vp-c-bg-soft);
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--vp-c-divider);
+  font-size: 0.75rem;
+}
+
+.time {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+.state {
+  color: var(--vp-c-text-2);
+}
+
+.vs-divider {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: var(--vp-c-text-3);
+  font-size: 0.9rem;
+}
+
+.flow-diagram {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.flow-diagram h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.flow-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.flow-step {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.step-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.4rem 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  min-width: 60px;
+}
+
+.step-icon {
+  font-size: 1.1rem;
+}
+
+.step-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  margin-top: 0.1rem;
+}
+
+.step-arrow {
+  color: var(--vp-c-brand);
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.support-table {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.75rem;
+  overflow-x: auto;
+}
+
+.support-table h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.support-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.support-table th,
+.support-table td {
+  padding: 0.5rem 0.6rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.support-table th {
+  background: var(--vp-c-bg-soft);
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.badge.excellent {
+  background: rgba(34, 197, 94, 0.2);
+  color: #16a34a;
+}
+
+.badge.good {
+  background: rgba(59, 130, 246, 0.2);
+  color: #2563eb;
+}
+
+.badge.fair {
+  background: rgba(245, 158, 11, 0.2);
+  color: #d97706;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .flow-steps {
+    flex-direction: column;
+  }
+
+  .flow-step {
+    flex-direction: column;
+  }
+
+  .step-arrow {
+    transform: rotate(90deg);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
new file mode 100644
index 0000000..fb22650
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
@@ -0,0 +1,295 @@
+<!--
+  SourceMapDemo.vue
+  SourceMap原理演示
+
+  用途：
+  展示SourceMap如何将压缩后的代码映射回源代码。
+-->
+<template>
+  <div class="source-map-demo">
+    <div class="demo-header">
+      <h3>🗺️ SourceMap 原理演示</h3>
+      <p>调试压缩代码的秘密武器</p>
+    </div>
+
+    <div class="demo-content">
+      <div class="code-comparison">
+        <div class="code-panel source">
+          <div class="panel-title">📄 源代码 (Source)</div>
+          <pre class="code-block"><code>function calculateSum(a, b) {
+  // 计算两个数的和
+  const result = a + b;
+  console.log('结果:', result);
+  return result;
+}
+
+const sum = calculateSum(10, 20);
+console.log('总和:', sum);</code></pre>
+        </div>
+
+        <div class="mapping-arrows">
+          <div class="arrow" v-for="i in 5" :key="i">
+            <span class="line"></span>
+            <span class="point">→</span>
+          </div>
+        </div>
+
+        <div class="code-panel minified">
+          <div class="panel-title">🔧 压缩后 (Minified)</div>
+          <pre class="code-block"><code>function n(n,r){var t=n+r;return console.log("结果:",t),t}var r=n(10,20);console.log("总和:",r);
+//# sourceMappingURL=app.js.map</code></pre>
+        </div>
+      </div>
+
+      <div class="sourcemap-explanation">
+        <div class="explanation-section">
+          <h4>📦 SourceMap 文件内容示例</h4>
+          <pre class="json-block"><code>{
+  "version": 3,
+  "sources": ["src/utils.js", "src/main.js"],
+  "names": ["calculateSum", "a", "b", "result"],
+  "mappings": "AAAA,SAASA...",
+  "file": "app.min.js"
+}</code></pre>
+          <ul class="field-explanation">
+            <li><strong>version</strong>: SourceMap 规范版本（当前是 3）</li>
+            <li><strong>sources</strong>: 原始源文件列表</li>
+            <li><strong>names</strong>: 压缩前后的变量名映射</li>
+            <li><strong>mappings</strong>: 位置映射信息（VLQ 编码）</li>
+            <li><strong>file</strong>: 对应的压缩文件名</li>
+          </ul>
+        </div>
+
+        <div class="tips-section">
+          <h4>💡 使用建议</h4>
+          <div class="tips-grid">
+            <div class="tip-item">
+              <span class="tip-icon">🚀</span>
+              <div class="tip-content">
+                <strong>开发环境</strong>
+                <p>开启 SourceMap，方便调试</p>
+              </div>
+            </div>
+            <div class="tip-item">
+              <span class="tip-icon">🔒</span>
+              <div class="tip-content">
+                <strong>生产环境</strong>
+                <p>不部署 .map 文件，防止源码泄露</p>
+              </div>
+            </div>
+            <div class="tip-item">
+              <span class="tip-icon">🗂️</span>
+              <div class="tip-content">
+                <strong>单独存放</strong>
+                <p>使用 `sourceMappingURL` 指向独立服务器</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>SourceMap 工作原理：</strong>
+        压缩代码时，构建工具会记录每个字符在源代码中的位置，生成 .map 文件。
+        浏览器调试时，通过映射关系把压缩后的代码"还原"成源代码显示。
+        注意：生产环境不要暴露 .map 文件，防止源码泄露！
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.source-map-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.demo-header h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+.demo-header p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.demo-content {
+  margin-top: 1rem;
+}
+
+.code-comparison {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .code-comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .mapping-arrows {
+    display: none;
+  }
+}
+
+.code-panel {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.code-panel .panel-title {
+  background: var(--vp-c-bg-soft);
+  padding: 0.4rem 0.6rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.code-block {
+  padding: 0.6rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  margin: 0;
+  overflow-x: auto;
+  color: var(--vp-c-text-1);
+}
+
+.mapping-arrows {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+}
+
+.arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+}
+
+.arrow .line {
+  width: 20px;
+  height: 1px;
+  background: var(--vp-c-brand);
+}
+
+.arrow .point {
+  color: var(--vp-c-brand);
+  font-size: 0.8rem;
+  margin-left: -2px;
+}
+
+.sourcemap-explanation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .sourcemap-explanation {
+    grid-template-columns: 1fr;
+  }
+}
+
+.explanation-section,
+.tips-section {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.75rem;
+}
+
+.explanation-section h4,
+.tips-section h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.json-block {
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-size: 0.7rem;
+  line-height: 1.4;
+  overflow-x: auto;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+}
+
+.field-explanation {
+  margin: 0;
+  padding-left: 1rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.field-explanation li {
+  margin-bottom: 0.25rem;
+}
+
+.field-explanation strong {
+  color: var(--vp-c-text-1);
+}
+
+.tips-grid {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.tip-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.tip-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.tip-content strong {
+  display: block;
+  font-size: 0.8rem;
+  margin-bottom: 0.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.tip-content p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.3;
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
new file mode 100644
index 0000000..9f41926
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
@@ -0,0 +1,336 @@
+<!--
+  TreeShakingDemo.vue
+  摇树优化演示
+
+  用途：
+  直观展示 Tree Shaking 如何移除未使用的代码。
+
+  交互功能：
+  - 代码选择：选择使用哪些导出
+  - 实时计算：显示包体积变化
+  - 对比视图：对比 Tree Shaking 前后
+-->
+<template>
+  <div class="tree-shaking-demo">
+    <div class="demo-header">
+      <h3>🌳 Tree Shaking 演示</h3>
+      <p>选择你需要的功能，观察包体积变化</p>
+    </div>
+
+    <div class="demo-content">
+      <!-- 源代码面板 -->
+      <div class="source-panel">
+        <div class="panel-title">📦 utils.js (源代码)</div>
+        <div class="code-block">
+          <div
+            v-for="(func, index) in functions"
+            :key="index"
+            class="code-line"
+            :class="{ used: func.used, unused: !func.used && hasSelection }"
+          >
+            <span class="line-number">{{ index + 1 }}</span>
+            <span class="line-content">{{ func.code }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 控制面板 -->
+      <div class="control-panel">
+        <div class="panel-title">🎛️ 选择需要的功能</div>
+        <div class="function-toggles">
+          <label
+            v-for="(func, index) in functions"
+            :key="index"
+            class="toggle-item"
+            :class="{ active: func.used }"
+          >
+            <input type="checkbox" v-model="func.used" />
+            <span class="toggle-name">{{ func.name }}</span>
+            <span class="toggle-size">{{ func.size }}B</span>
+          </label>
+        </div>
+
+        <div class="stats-box">
+          <div class="stat-item">
+            <span class="stat-label">原始大小</span>
+            <span class="stat-value original">{{ originalSize }}B</span>
+          </div>
+          <div class="stat-arrow">→</div>
+          <div class="stat-item">
+            <span class="stat-label">Tree Shaking 后</span>
+            <span class="stat-value optimized">{{ optimizedSize }}B</span>
+          </div>
+          <div class="stat-item savings">
+            <span class="stat-label">节省</span>
+            <span class="stat-value">{{ savingsPercent }}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <p>
+        <span class="icon">💡</span>
+        <strong>Tree Shaking 原理：</strong>
+        现代打包工具会分析 ES 模块的导出/导入关系，自动移除未被使用的代码。
+        前提条件：1) 使用 ES 模块 (import/export)；2) 代码无副作用；3) 打包工具支持（Webpack、Rollup 等）
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const functions = ref([
+  {
+    name: 'debounce',
+    code: 'export function debounce(fn, delay) { ... }',
+    size: 156,
+    used: true
+  },
+  {
+    name: 'throttle',
+    code: 'export function throttle(fn, limit) { ... }',
+    size: 142,
+    used: false
+  },
+  {
+    name: 'deepClone',
+    code: 'export function deepClone(obj) { ... }',
+    size: 234,
+    used: true
+  },
+  {
+    name: 'formatDate',
+    code: 'export function formatDate(date, fmt) { ... }',
+    size: 189,
+    used: false
+  },
+  {
+    name: 'randomString',
+    code: 'export function randomString(len) { ... }',
+    size: 98,
+    used: false
+  }
+])
+
+const originalSize = computed(() =>
+  functions.value.reduce((sum, f) => sum + f.size, 0)
+)
+
+const optimizedSize = computed(() =>
+  functions.value.filter(f => f.used).reduce((sum, f) => sum + f.size, 0)
+)
+
+const savingsPercent = computed(() => {
+  const saved = originalSize.value - optimizedSize.value
+  return Math.round((saved / originalSize.value) * 100)
+})
+
+const hasSelection = computed(() =>
+  functions.value.some(f => f.used)
+)
+
+const getFileIcon = (type) => {
+  const icons = { js: '📜', css: '🎨', image: '🖼️', html: '📄' }
+  return icons[type] || '📄'
+}
+
+const formatSize = (size) => size > 1024 ? (size / 1024).toFixed(1) + ' MB' : size + ' KB'
+const formatTime = (timestamp) => new Date(timestamp).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+
+const selectedNode = ref(null)
+const selectedFile = computed(() => selectedNode.value)
+const cacheHits = ref(42)
+const cacheMisses = ref(8)
+</script>
+
+<style scoped>
+.tree-shaking-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.demo-header h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+.demo-header p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.demo-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+@media (max-width: 768px) {
+  .demo-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.source-panel,
+.control-panel {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.panel-title {
+  background: var(--vp-c-bg-soft);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.code-block {
+  padding: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.code-line {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.1rem 0;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+.code-line:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.code-line.used {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.code-line.unused {
+  opacity: 0.4;
+  text-decoration: line-through;
+}
+
+.line-number {
+  color: var(--vp-c-text-3);
+  min-width: 20px;
+  text-align: right;
+  user-select: none;
+}
+
+.line-content {
+  color: var(--vp-c-text-1);
+  white-space: pre;
+}
+
+.function-toggles {
+  padding: 0.75rem;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 0.25rem;
+}
+
+.toggle-item:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.toggle-item.active {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.toggle-item input {
+  cursor: pointer;
+}
+
+.toggle-name {
+  flex: 1;
+  font-size: 0.85rem;
+}
+
+.toggle-size {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.stats-box {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  margin: 0 0.75rem 0.75rem;
+  border-radius: 6px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stat-arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-3);
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
+}
+
+.stat-value {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.stat-value.original {
+  color: var(--vp-c-text-2);
+  text-decoration: line-through;
+}
+
+.stat-value.optimized {
+  color: #22c55e;
+}
+
+.stat-item.savings .stat-value {
+  color: var(--vp-c-brand);
+}
+
+.info-box {
+  background-color: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+.info-box .icon {
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
index a701dc3..dca4dc7 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
@@ -1,231 +1,150 @@
 <!--
-  JQueryVsStateDemo.vue
-  jQuery vs 数据驱动对比演示 - 重构版
-
-  用途：
-  用"餐厅服务员"的比喻，让零基础用户理解命令式 vs 声明式的区别。
-  通过并排的交互式计数器，直观展示两种编程范式的差异。
+  JQueryVsStateDemo.vue - 餐厅账本对比
+  用"手工记账 vs 智能管家"的比喻来解释 jQuery vs Vue/React
 -->
 <template>
-  <div class="jquery-state-demo">
-    <div class="scenario-intro">
-      <div class="emoji-scene">🍽️ 👨‍🍳 📝</div>
-      <h4>餐厅服务员模拟器</h4>
-      <p>想象一下你在餐厅当服务员，有两种工作方式，你会选哪种？</p>
+  <div class="restaurant-demo">
+    <!-- 故事引入 -->
+    <div class="story-intro">
+      <div class="story-icon">👨‍🍳📒🤖</div>
+      <h3 class="story-title">老张的餐厅账本</h3>
+      <p class="story-desc">
+        老张开了家餐厅，每天要点菜、做菜、算账。有两种记账方式：<br>
+        <strong>传统方式：老张手工记</strong>（jQuery 模式） vs <strong>智能方式：请个管家</strong>（Vue/React 模式）<br>
+        看看哪种更轻松？
+      </p>
     </div>
 
-    <div class="comparison-container">
-      <!-- 左边：jQuery 模式 -->
-      <div class="side-panel jquery-panel">
-        <div class="panel-header">
-          <div class="mode-badge jquery">
-            <span class="badge-icon">🏃</span>
-            <span class="badge-text">跑腿王模式</span>
-          </div>
-          <div class="mode-subtitle">命令式（jQuery）</div>
+    <!-- 模式选择 -->
+    <div class="mode-tabs">
+      <button
+        class="tab-btn"
+        :class="{ active: mode === 'manual' }"
+        @click="mode = 'manual'"
+      >
+        <span class="tab-icon">✍️</span>
+        <span class="tab-text">手工记账</span>
+        <span class="tab-sub">jQuery 方式</span>
+      </button>
+      <button
+        class="tab-btn"
+        :class="{ active: mode === 'smart' }"
+        @click="mode = 'smart'"
+      >
+        <span class="tab-icon">🤖</span>
+        <span class="tab-text">智能管家</span>
+        <span class="tab-sub">Vue/React 方式</span>
+      </button>
+    </div>
+
+    <!-- 对比展示区 -->
+    <div class="comparison-showcase">
+      <!-- 左侧：场景描述 -->
+      <div class="scenario-panel">
+        <div class="scenario-header">
+          <span class="scenario-icon">{{ mode === 'manual' ? '👨‍🍳' : '🤖' }}</span>
+          <span class="scenario-title">{{ mode === 'manual' ? '老张手工记账' : '智能管家记账' }}</span>
         </div>
 
-        <div class="scenario-visual">
-          <div class="visual-label">后厨 → 吧台 → 收银台</div>
-          <div class="runner-path">
-            <div class="station kitchen" :class="{ active: jqActiveStation === 'kitchen' }">
-              <span class="station-icon">🍳</span>
-              <span class="station-name">后厨</span>
-            </div>
-            <div class="path-arrow" :class="{ active: jqActiveStation === 'bar' }">→</div>
-            <div class="station bar" :class="{ active: jqActiveStation === 'bar' }">
-              <span class="station-icon">🥤</span>
-              <span class="station-name">吧台</span>
-            </div>
-            <div class="path-arrow" :class="{ active: jqActiveStation === 'cashier' }">→</div>
-            <div class="station cashier" :class="{ active: jqActiveStation === 'cashier' }">
-              <span class="station-icon">💰</span>
-              <span class="station-name">收银</span>
+        <div class="scenario-content">
+          <div class="step-list">
+            <div
+              v-for="(step, index) in currentSteps"
+              :key="index"
+              class="step-item"
+              :class="{ active: index === currentStep }"
+            >
+              <div class="step-number">{{ index + 1 }}</div>
+              <div class="step-text">{{ step }}</div>
             </div>
           </div>
         </div>
-
-        <div class="demo-counter">
-          <div class="counter-display">
-            <div class="display-label">当前计数</div>
-            <div class="display-value">{{ jqCount }}</div>
-          </div>
-
-          <div class="counter-controls">
-            <button class="ctrl-btn decrement" @click="updateJq(-1)" :disabled="jqCount <= 0">
-              <span class="btn-icon">➖</span>
-              <span class="btn-label">减 1</span>
-            </button>
-            <button class="ctrl-btn increment" @click="updateJq(1)">
-              <span class="btn-icon">➕</span>
-              <span class="btn-label">加 1</span>
-            </button>
-          </div>
-
-          <div class="status-bars">
-            <div class="status-item">
-              <span class="status-label">进度条</span>
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: jqProgress + '%' }"></div>
-              </div>
-              <span class="status-value">{{ jqProgress }}%</span>
-            </div>
-            <div class="status-item">
-              <span class="status-label">状态</span>
-              <span class="status-badge" :class="jqStatusClass">{{ jqStatus }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="code-snippet">
-          <div class="snippet-header">
-            <span class="snippet-title">💻 代码实现</span>
-            <span class="snippet-lang">jQuery</span>
-          </div>
-          <pre class="snippet-code"><code>// 需要手动更新每个元素
-function updateCounter(change) {
-  var count = parseInt($('#counter').text());
-  var newCount = count + change;
-
-  // 更新计数显示
-  $('#counter').text(newCount);
-
-  // 更新进度条
-  var progress = (newCount / 10) * 100;
-  $('#progress').css('width', progress + '%');
-
-  // 更新状态文字
-  if (newCount > 5) {
-    $('#status').text('高！').addClass('warning');
-  } else {
-    $('#status').text('正常').removeClass('warning');
-  }
-
-  // 如果忘了更新某个地方...
-  // 界面就会不一致！😱
-}</code></pre>
-        </div>
-
-        <div class="pain-points">
-          <div class="pain-title">😫 痛点</div>
-          <ul class="pain-list">
-            <li>每次都要亲自跑三个地方更新</li>
-            <li>漏改一个地方，界面就不一致</li>
-            <li>代码分散，难以维护</li>
-            <li>累得半死，还容易出错</li>
-          </ul>
-        </div>
       </div>
 
-      <!-- VS 标识 -->
-      <div class="vs-divider">
-        <div class="vs-badge">VS</div>
+      <!-- 右侧：账本展示 -->
+      <div class="ledger-panel">
+        <div class="ledger-header">
+          <span class="ledger-icon">📒</span>
+          <span class="ledger-title">今日账本</span>
+          <span class="ledger-status" :class="mode">{{ ledgerStatus }}</span>
+        </div>
+
+        <div class="ledger-content">
+          <!-- 订单列表 -->
+          <div class="order-list">
+            <div
+              v-for="order in orders"
+              :key="order.id"
+              class="order-item"
+              :class="{ completed: order.completed }"
+            >
+              <div class="order-info">
+                <span class="order-name">{{ order.name }}</span>
+                <span class="order-price">¥{{ order.price }}</span>
+              </div>
+              <div class="order-status">
+                {{ order.completed ? '✓' : '○' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 总计 -->
+          <div class="total-section">
+            <div class="total-row">
+              <span>菜品数量：</span>
+              <span class="total-value">{{ completedCount }}/{{ orders.length }} 份</span>
+            </div>
+            <div class="total-row total-final">
+              <span>今日营收：</span>
+              <span class="total-amount">¥{{ totalRevenue }}</span>
+            </div>
+          </div>
+        </div>
       </div>
+    </div>
 
-      <!-- 右边：Vue 模式 -->
-      <div class="side-panel vue-panel">
-        <div class="panel-header">
-          <div class="mode-badge vue">
-            <span class="badge-icon">👔</span>
-            <span class="badge-text">指挥家模式</span>
-          </div>
-          <div class="mode-subtitle">声明式（Vue）</div>
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <button
+        class="btn btn-primary"
+        @click="processOrder"
+        :disabled="isProcessing || allCompleted"
+      >
+        {{ isProcessing ? '处理中...' : allCompleted ? '今日完成！' : '下一道菜' }}
+      </button>
+      <button
+        class="btn btn-secondary"
+        @click="resetDemo"
+      >
+        重新开始
+      </button>
+    </div>
+
+    <!-- 优缺点对比 -->
+    <div class="comparison-table">
+      <div class="table-header">
+        <div class="table-title">💡 两种方式对比</div>
+      </div>
+      <div class="table-content">
+        <div class="comparison-row header">
+          <div class="col-feature">特点</div>
+          <div class="col-manual">手工记账 (jQuery)</div>
+          <div class="col-smart">智能管家 (Vue/React)</div>
         </div>
-
-        <div class="scenario-visual">
-          <div class="visual-label">我只管改单子，其他自动同步！</div>
-          <div class="conductor-scene">
-            <div class="conductor">🎩</div>
-            <div class="orchestra">
-              <div class="musician" :class="{ playing: vueCount > 0 }">
-                <span class="musician-icon">🎸</span>
-                <span class="musician-role">计数</span>
-              </div>
-              <div class="musician" :class="{ playing: vueProgress > 0 }">
-                <span class="musician-icon">📊</span>
-                <span class="musician-role">进度</span>
-              </div>
-              <div class="musician" :class="{ playing: vueCount > 5 }">
-                <span class="musician-icon">🚦</span>
-                <span class="musician-role">状态</span>
-              </div>
-            </div>
-          </div>
+        <div class="comparison-row">
+          <div class="col-feature">工作方式</div>
+          <div class="col-manual">手动改每一处</div>
+          <div class="col-smart">改数据，界面自动变</div>
         </div>
-
-        <div class="demo-counter">
-          <div class="counter-display">
-            <div class="display-label">当前计数</div>
-            <div class="display-value">{{ vueCount }}</div>
-          </div>
-
-          <div class="counter-controls">
-            <button class="ctrl-btn decrement" @click="vueCount--" :disabled="vueCount <= 0">
-              <span class="btn-icon">➖</span>
-              <span class="btn-label">减 1</span>
-            </button>
-            <button class="ctrl-btn increment" @click="vueCount++">
-              <span class="btn-icon">➕</span>
-              <span class="btn-label">加 1</span>
-            </button>
-          </div>
-
-          <div class="status-bars">
-            <div class="status-item">
-              <span class="status-label">进度条</span>
-              <div class="progress-bar">
-                <div class="progress-fill vue" :style="{ width: vueProgress + '%' }"></div>
-              </div>
-              <span class="status-value">{{ vueProgress }}%</span>
-            </div>
-            <div class="status-item">
-              <span class="status-label">状态</span>
-              <span class="status-badge" :class="vueStatusClass">{{ vueStatus }}</span>
-            </div>
-          </div>
+        <div class="comparison-row">
+          <div class="col-feature">容易出错</div>
+          <div class="col-manual">容易漏改某处</div>
+          <div class="col-smart">自动同步，不易错</div>
         </div>
-
-        <div class="code-snippet">
-          <div class="snippet-header">
-            <span class="snippet-title">💻 代码实现</span>
-            <span class="snippet-lang">Vue</span>
-          </div>
-          <pre class="snippet-code"><code>// 只需要定义数据和规则
-data() {
-  return {
-    count: 0
-  }
-},
-computed: {
-  // 进度自动计算
-  progress() {
-    return (this.count / 10) * 100;
-  },
-  // 状态自动判断
-  status() {
-    return this.count > 5 ? '高！' : '正常';
-  },
-  isWarning() {
-    return this.count > 5;
-  }
-}
-
-// 模板里只需要声明关系
-&lt;template&gt;
-  &lt;div class="status" :class="{ warning: isWarning }"&gt;
-    {{ status }}
-  &lt;/div&gt;
-&lt;/template&gt;</code></pre>
-        </div>
-
-        <div class="benefits">
-          <div class="benefit-title">✨ 优势</div>
-          <ul class="benefit-list">
-            <li>只需改数据，不用手动更新每个地方</li>
-            <li>界面自动同步，永远保持一致</li>
-            <li>代码结构清晰，容易维护</li>
-            <li>轻松优雅，不易出错</li>
-          </ul>
+        <div class="comparison-row">
+          <div class="col-feature">适合场景</div>
+          <div class="col-manual">简单页面</div>
+          <div class="col-smart">复杂交互应用</div>
         </div>
       </div>
     </div>
@@ -235,570 +154,495 @@ computed: {
 <script setup>
 import { ref, computed } from 'vue'
 
-// jQuery 模式的状态
-const jqCount = ref(0)
-const jqActiveStation = ref('')
+// 当前模式
+const mode = ref('manual')
 
-// Vue 模式的状态
-const vueCount = ref(0)
+// 处理状态
+const isProcessing = ref(false)
+const currentStep = ref(0)
 
-// jQuery 计算属性
-const jqProgress = computed(() => Math.min((jqCount.value / 10) * 100, 100))
+// 订单数据
+const orders = ref([
+  { id: 1, name: '宫保鸡丁', price: 38, completed: false },
+  { id: 2, name: '鱼香肉丝', price: 32, completed: false },
+  { id: 3, name: '麻婆豆腐', price: 18, completed: false },
+  { id: 4, name: '糖醋排骨', price: 48, completed: false }
+])
 
-const jqStatus = computed(() => {
-  if (jqCount.value > 5) return '高！'
-  if (jqCount.value > 0) return '正常'
-  return '初始'
+// 手工记账步骤
+const manualSteps = [
+  '翻开账本，找到对应菜品',
+  '手动计算价格，写到本子上',
+  '再算一遍总数，防止算错',
+  '把完成的菜标记一下'
+]
+
+// 智能管家步骤
+const smartSteps = [
+  '告诉管家：这道菜做好了',
+  '管家自动更新账本',
+  '总数自动计算，不会出错',
+  '所有数据实时同步'
+]
+
+// 当前步骤列表
+const currentSteps = computed(() => {
+  return mode.value === 'manual' ? manualSteps : smartSteps
 })
 
-const jqStatusClass = computed(() => {
-  if (jqCount.value > 5) return 'warning'
-  if (jqCount.value > 0) return 'normal'
-  return 'initial'
+// 计算属性
+const completedCount = computed(() => orders.value.filter(o => o.completed).length)
+const totalRevenue = computed(() => orders.value.filter(o => o.completed).reduce((sum, o) => sum + o.price, 0))
+const allCompleted = computed(() => orders.value.every(o => o.completed))
+
+const ledgerStatus = computed(() => {
+  if (allCompleted.value) return '已完成'
+  return mode.value === 'manual' ? '手工计算中...' : '自动同步中...'
 })
 
-// Vue 计算属性
-const vueProgress = computed(() => Math.min((vueCount.value / 10) * 100, 100))
+// 处理下一道菜
+const processOrder = async () => {
+  if (isProcessing.value || allCompleted.value) return
 
-const vueStatus = computed(() => {
-  if (vueCount.value > 5) return '高！'
-  if (vueCount.value > 0) return '正常'
-  return '初始'
-})
+  isProcessing.value = true
+  currentStep.value = 0
 
-const vueStatusClass = computed(() => {
-  if (vueCount.value > 5) return 'warning'
-  if (vueCount.value > 0) return 'normal'
-  return 'initial'
-})
+  // 找到第一个未完成的订单
+  const orderIndex = orders.value.findIndex(o => !o.completed)
 
-// jQuery 更新函数（模拟需要手动更新多个地方）
-const updateJq = async (change) => {
-  const newCount = jqCount.value + change
-  if (newCount < 0) return
+  // 模拟步骤执行
+  for (let i = 0; i < currentSteps.value.length; i++) {
+    currentStep.value = i
+    await sleep(400)
+  }
 
-  // 模拟需要跑三个地方更新
-  // 第一站：后厨（计数）
-  jqActiveStation.value = 'kitchen'
-  await sleep(300)
-  jqCount.value = newCount
+  // 完成订单
+  if (orderIndex !== -1) {
+    orders.value[orderIndex].completed = true
+  }
 
-  // 第二站：吧台（进度条）
-  jqActiveStation.value = 'bar'
-  await sleep(300)
-
-  // 第三站：收银台（状态）
-  jqActiveStation.value = 'cashier'
-  await sleep(300)
-
-  jqActiveStation.value = ''
+  isProcessing.value = false
+  currentStep.value = 0
 }
 
+// 重置演示
+const resetDemo = () => {
+  isProcessing.value = false
+  currentStep.value = 0
+  orders.value.forEach(o => o.completed = false)
+}
+
+// 辅助函数
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 </script>
 
 <style scoped>
-.jquery-state-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  padding: 1.5rem;
-  margin: 1rem 0;
+.restaurant-demo {
+  border: 2px solid #e8e8e8;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
+  padding: 24px;
+  margin: 20px 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
 
-.scenario-intro {
+/* 故事引入 */
+.story-intro {
   text-align: center;
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: linear-gradient(135deg, rgba(255, 183, 77, 0.2), rgba(255, 138, 101, 0.2));
-  border-radius: 12px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: linear-gradient(135deg, #fff8e1, #ffecb3);
+  border-radius: 16px;
+  border: 2px dashed #ffc107;
 }
 
-.emoji-scene {
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
-  animation: bounce 2s infinite;
+.story-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
 }
 
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+.story-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #e65100;
+  margin: 0 0 8px 0;
 }
 
-.scenario-intro h4 {
-  margin: 0.5rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.2rem;
-}
-
-.scenario-intro p {
+.story-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
   margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
 }
 
-.comparison-container {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 1rem;
-  align-items: stretch;
-}
-
-.side-panel {
-  border: 2px solid var(--vp-c-divider);
+/* 模式选项卡 */
+.mode-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+  background: white;
+  padding: 8px;
   border-radius: 12px;
-  overflow: hidden;
-  background: var(--vp-c-bg);
+  border: 2px solid #e0e0e0;
+}
+
+.tab-btn {
+  flex: 1;
   display: flex;
   flex-direction: column;
-}
-
-.jquery-panel {
-  border-color: #ff7043;
-}
-
-.vue-panel {
-  border-color: #42b883;
-}
-
-.panel-header {
-  padding: 1rem;
-  text-align: center;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.mode-badge {
-  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: 9999px;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
+  gap: 4px;
+  padding: 16px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-.mode-badge.jquery {
-  background: linear-gradient(135deg, #ff7043, #f4511e);
+.tab-btn:hover {
+  background: #f5f5f5;
+}
+
+.tab-btn.active {
+  background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
 }
 
-.mode-badge.vue {
-  background: linear-gradient(135deg, #42b883, #35495e);
+.tab-icon {
+  font-size: 32px;
+}
+
+.tab-text {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.tab-sub {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+/* 对比展示区 */
+.comparison-showcase {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+@media (max-width: 768px) {
+  .comparison-showcase {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 场景面板 */
+.scenario-panel {
+  background: white;
+  border-radius: 16px;
+  border: 2px solid #e0e0e0;
+  overflow: hidden;
+}
+
+.scenario-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #ffecb3, #ffe082);
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.scenario-icon {
+  font-size: 28px;
+}
+
+.scenario-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.scenario-content {
+  padding: 16px;
+}
+
+.step-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.step-item.active {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  transform: translateX(8px);
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  color: #333;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.step-item.active .step-number {
+  background: rgba(255, 255, 255, 0.2);
   color: white;
 }
 
-.badge-icon {
-  font-size: 1.25rem;
+.step-text {
+  font-size: 14px;
+  flex: 1;
 }
 
-.mode-subtitle {
-  font-size: 0.875rem;
-  color: var(--vp-c-text-2);
+/* 账本面板 */
+.ledger-panel {
+  background: white;
+  border-radius: 16px;
+  border: 2px solid #e0e0e0;
+  overflow: hidden;
 }
 
-.scenario-visual {
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
+.ledger-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
+  border-bottom: 2px solid #e0e0e0;
 }
 
-.visual-label {
-  text-align: center;
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.5rem;
+.ledger-icon {
+  font-size: 28px;
 }
 
-.runner-path {
+.ledger-title {
+  flex: 1;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.ledger-status {
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 12px;
+  background: white;
+  color: #666;
+}
+
+.ledger-status.manual {
+  background: #fff3e0;
+  color: #e65100;
+}
+
+.ledger-content {
+  padding: 16px;
+}
+
+.order-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.order-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.25rem;
-}
-
-.station {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 8px;
-  background: #f5f5f5;
-  transition: all 0.3s;
-  min-width: 60px;
-}
-
-.station.active {
-  background: #ff7043;
-  color: white;
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(255, 112, 67, 0.4);
-}
-
-.station-icon {
-  font-size: 1.5rem;
-}
-
-.station-name {
-  font-size: 0.625rem;
-  margin-top: 0.25rem;
-}
-
-.path-arrow {
-  font-size: 1.5rem;
-  color: #ccc;
-  transition: all 0.3s;
-}
-
-.path-arrow.active {
-  color: #ff7043;
-  transform: translateX(5px);
-}
-
-.conductor-scene {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.conductor {
-  font-size: 3rem;
-  animation: conduct 2s ease-in-out infinite;
-}
-
-@keyframes conduct {
-  0%, 100% { transform: rotate(-10deg); }
-  50% { transform: rotate(10deg); }
-}
-
-.orchestra {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-.musician {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
+  padding: 12px;
   background: #f5f5f5;
   border-radius: 8px;
-  transition: all 0.3s;
-  min-width: 60px;
+  transition: all 0.3s ease;
 }
 
-.musician.playing {
-  background: #42b883;
-  color: white;
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.4);
+.order-item.completed {
+  background: #e8f5e9;
+  border-left: 4px solid #4caf50;
 }
 
-.musician-icon {
-  font-size: 1.5rem;
-}
-
-.musician-role {
-  font-size: 0.625rem;
-  margin-top: 0.25rem;
-}
-
-.demo-counter {
-  padding: 1rem;
-  flex: 1;
-}
-
-.counter-display {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.display-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.25rem;
-}
-
-.display-value {
-  font-size: 3rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-  line-height: 1;
-}
-
-.counter-controls {
+.order-info {
   display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.ctrl-btn {
-  flex: 1;
+.order-name {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+.order-price {
+  font-size: 13px;
+  color: #e65100;
+  font-weight: bold;
+}
+
+.order-status {
+  font-size: 18px;
+}
+
+.total-section {
+  border-top: 2px dashed #e0e0e0;
+  padding-top: 12px;
+}
+
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.total-row.total-final {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  border-top: 2px solid #e0e0e0;
+  margin-top: 8px;
+  padding-top: 12px;
+}
+
+.total-amount {
+  color: #4caf50;
+  font-size: 20px;
+}
+
+/* 操作按钮 */
+.action-buttons {
   display: flex;
-  align-items: center;
   justify-content: center;
-  gap: 0.25rem;
-  padding: 0.75rem;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.btn {
+  padding: 12px 24px;
   border: none;
   border-radius: 8px;
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
 }
 
-.ctrl-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.jquery-panel .ctrl-btn.decrement {
-  background: #ffccbc;
-  color: #bf360c;
-}
-
-.jquery-panel .ctrl-btn.increment {
-  background: #ff7043;
-  color: white;
-}
-
-.vue-panel .ctrl-btn.decrement {
-  background: #c8e6c9;
-  color: #2e7d32;
-}
-
-.vue-panel .ctrl-btn.increment {
-  background: #42b883;
-  color: white;
-}
-
-.ctrl-btn:not(:disabled):hover {
+.btn:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.btn-icon {
-  font-size: 1rem;
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.status-bars {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.btn-primary {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
 }
 
-.status-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.status-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  min-width: 50px;
-}
-
-.progress-bar {
-  flex: 1;
-  height: 8px;
-  background: #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  border-radius: 4px;
-  transition: width 0.3s ease;
-}
-
-.jquery-panel .progress-fill {
-  background: linear-gradient(90deg, #ff7043, #f4511e);
-}
-
-.vue-panel .progress-fill {
-  background: linear-gradient(90deg, #42b883, #35495e);
-}
-
-.status-value {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  min-width: 35px;
-  text-align: right;
-}
-
-.status-badge {
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.status-badge.initial {
+.btn-secondary {
   background: #f5f5f5;
-  color: #999;
+  color: #666;
 }
 
-.status-badge.normal {
-  background: #c8e6c9;
-  color: #2e7d32;
-}
-
-.status-badge.warning {
-  background: #ffccbc;
-  color: #bf360c;
-}
-
-.code-snippet {
-  margin: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+/* 对比表格 */
+.comparison-table {
+  background: white;
+  border-radius: 16px;
+  border: 2px solid #e0e0e0;
   overflow: hidden;
 }
 
-.snippet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: var(--vp-c-bg-alt);
-  border-bottom: 1px solid var(--vp-c-divider);
+.table-header {
+  padding: 16px;
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  border-bottom: 2px solid #e0e0e0;
 }
 
-.snippet-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
+.table-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1565c0;
 }
 
-.snippet-lang {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
+.table-content {
+  padding: 0;
 }
 
-.jquery-panel .snippet-lang {
-  background: #ff7043;
-  color: white;
+.comparison-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.4fr 1.4fr;
+  gap: 16px;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
 }
 
-.vue-panel .snippet-lang {
-  background: #42b883;
-  color: white;
+.comparison-row:last-child {
+  border-bottom: none;
 }
 
-.snippet-code {
-  margin: 0;
-  padding: 0.75rem;
-  background: #1e1e2e;
-  color: #a6accd;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  overflow-x: auto;
+.comparison-row.header {
+  background: #f5f5f5;
+  font-weight: bold;
+  color: #333;
 }
 
-.pain-points,
-.benefits {
-  margin: 1rem;
-  padding: 1rem;
-  border-radius: 8px;
+.col-feature {
+  color: #666;
 }
 
-.pain-points {
-  background: #fff3e0;
-  border-left: 4px solid #ff7043;
-}
-
-.benefits {
-  background: #e8f5e9;
-  border-left: 4px solid #42b883;
-}
-
-.pain-title,
-.benefit-title {
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-}
-
-.pain-title {
+.col-manual {
   color: #e65100;
 }
 
-.benefit-title {
-  color: #2e7d32;
+.col-smart {
+  color: #4caf50;
 }
 
-.pain-list,
-.benefit-list {
-  margin: 0;
-  padding-left: 1.25rem;
-  font-size: 0.875rem;
-  line-height: 1.6;
+.comparison-row.header .col-manual,
+.comparison-row.header .col-smart {
+  color: #333;
 }
 
-.pain-list li {
-  color: #bf360c;
-  margin-bottom: 0.25rem;
-}
-
-.benefit-list li {
-  color: #1b5e20;
-  margin-bottom: 0.25rem;
-}
-
-.vs-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vs-badge {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1rem;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-}
-
-@media (max-width: 1024px) {
-  .comparison-container {
+/* 响应式 */
+@media (max-width: 768px) {
+  .comparison-showcase {
     grid-template-columns: 1fr;
-    gap: 1.5rem;
   }
 
-  .vs-divider {
-    order: -1;
+  .comparison-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
   }
 
-  .vs-badge {
-    width: 40px;
-    height: 40px;
-    font-size: 0.875rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .runner-path,
-  .orchestra {
-    flex-wrap: wrap;
-    gap: 0.5rem;
+  .comparison-row.header {
+    display: none;
   }
 
-  .counter-controls {
+  .mode-tabs {
     flex-direction: column;
   }
-
-  .status-item {
-    flex-wrap: wrap;
-  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
index 463ea7e..ba2a604 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
@@ -1,126 +1,135 @@
 <!--
-  ResponsiveGridDemo.vue
-  响应式布局演示 - 重构版
-
-  用途：
-  用"智能变形相框"的比喻，让零基础用户理解响应式设计。
-  通过可拖动的滑块，直观展示同一套代码如何适配不同屏幕尺寸。
+  ResponsiveGridDemo.vue - 魔法衣柜
+  用"衣服自动叠放"的比喻来解释响应式布局
 -->
 <template>
-  <div class="responsive-demo">
-    <div class="scenario-intro">
-      <div class="emoji-scene">🖼️ 📱 💻</div>
-      <h4>智能变形相框</h4>
-      <p>想象你有一张照片，它会自动调整大小和布局，在任何相框里都好看！</p>
+  <div class="magic-closet">
+    <!-- 故事开头 -->
+    <div class="story-box">
+      <div class="story-emoji">👗✨🚪</div>
+      <h4 class="story-title">小美的魔法衣柜</h4>
+      <p class="story-text">
+        小美有一件神奇的魔法衣柜！不管你把它放在大房间还是小房间，<br>
+        <strong>里面的衣服都会自动叠好、排好，完美适应空间大小！</strong>
+      </p>
     </div>
 
-    <div class="device-presets">
-      <button
-        v-for="device in devices"
-        :key="device.id"
-        :class="['device-btn', { active: screenWidth === device.width }]"
-        @click="setDevice(device.width)"
-      >
-        <span class="device-icon">{{ device.icon }}</span>
-        <span class="device-name">{{ device.name }}</span>
-        <span class="device-size">{{ device.width }}px</span>
-      </button>
-    </div>
-
-    <div class="slider-control">
-      <div class="slider-labels">
-        <span>📱 手机</span>
-        <span>
-          <input
-            type="range"
-            v-model="screenWidth"
-            :min="320"
-            :max="1400"
-            step="10"
-            class="width-slider"
-          />
-        </span>
-        <span>💻 电脑</span>
+    <!-- 衣柜宽度调节 -->
+    <div class="closet-control">
+      <div class="control-label">
+        <span>🚪 拖动把手，把衣柜放进不同房间：</span>
+        <span class="room-label">{{ currentRoom.name }}</span>
       </div>
-      <div class="current-width">
-        当前宽度: <strong>{{ screenWidth }}px</strong> - {{ currentBreakpoint.name }}
+
+      <div class="slider-box">
+        <span class="slider-emoji">🏠小</span>
+        <input
+          type="range"
+          v-model="closetWidth"
+          :min="280"
+          :max="900"
+          step="10"
+          class="magic-slider"
+        />
+        <span class="slider-emoji">大🏰</span>
+      </div>
+
+      <div class="width-hint">
+        当前衣柜宽度：<strong>{{ closetWidth }}px</strong> | 可以放下 <strong>{{ clothesPerRow }}</strong> 件衣服
       </div>
     </div>
 
-    <div class="viewport-preview">
-      <div class="viewport-header">
-        <span class="viewport-device">{{ currentDevice }}</span>
-        <span class="viewport-dots">
-          <span></span>
-          <span></span>
-          <span></span>
-        </span>
+    <!-- 魔法衣柜展示 -->
+    <div class="closet-display" :style="{ width: closetWidth + 'px' }">
+      <div class="closet-header">
+        <span class="closet-icon">🚪</span>
+        <span class="closet-title">小美的魔法衣柜</span>
+        <span class="closet-icon">🪄</span>
       </div>
 
-      <div class="viewport-content" :style="{ width: screenWidth + 'px' }">
-        <div class="demo-grid" :class="gridClass">
+      <div class="closet-interior">
+        <div class="clothes-rack" :style="rackStyle">
           <div
-            v-for="(item, index) in gridItems"
+            v-for="(item, index) in clothes"
             :key="index"
-            class="grid-item"
+            class="clothing-item"
+            :class="{ 'folded': isSmallSpace }"
             :style="{ animationDelay: (index * 0.1) + 's' }"
           >
-            <div class="item-icon">{{ item.icon }}</div>
-            <div class="item-title">{{ item.title }}</div>
-            <div class="item-desc">{{ item.description }}</div>
+            <div class="item-hanger">🪝</div>
+            <div class="item-emoji">{{ item.emoji }}</div>
+            <div class="item-name">{{ item.name }}</div>
+            <div class="fold-hint" v-if="isSmallSpace">叠好了!</div>
           </div>
         </div>
       </div>
+
+      <div class="closet-footer">
+        <span>✨ 衣服数量：{{ clothes.length }}件</span>
+        <span>📐 排列方式：{{ arrangementMode }}</span>
+      </div>
     </div>
 
-    <div class="breakpoint-indicator">
-      <div class="bp-track">
-        <div
-          v-for="bp in breakpoints"
-          :key="bp.name"
-          class="bp-point"
-          :class="{ active: screenWidth >= bp.min && screenWidth < (bp.max || 9999) }"
-          :style="{ left: ((bp.min - 320) / (1400 - 320)) * 100 + '%' }"
-        >
-          <span class="bp-label">{{ bp.name }}</span>
-          <span class="bp-range">{{ bp.min }}px</span>
+    <!-- 魔法原理说明 -->
+    <div class="magic-explain">
+      <div class="explain-title">🔮 魔法原理揭秘</div>
+      <div class="explain-cards">
+        <div class="explain-card">
+          <div class="card-icon">📱</div>
+          <div class="card-title">小房间（手机）</div>
+          <div class="card-desc">衣柜只有 320px 宽，衣服会自动叠起来，<strong>1列</strong>排开</div>
+        </div>
+        <div class="explain-arrow">➡️</div>
+        <div class="explain-card">
+          <div class="card-icon">📲</div>
+          <div class="card-title">中房间（平板）</div>
+          <div class="card-desc">衣柜有 768px 宽，衣服舒展开，<strong>2列</strong>排开</div>
+        </div>
+        <div class="explain-arrow">➡️</div>
+        <div class="explain-card">
+          <div class="card-icon">💻</div>
+          <div class="card-title">大房间（电脑）</div>
+          <div class="card-desc">衣柜有 1200px 宽，衣服完全展开，<strong>3列</strong>排开</div>
         </div>
       </div>
     </div>
 
-    <div class="code-preview">
+    <!-- 代码展示 -->
+    <div class="code-section">
       <div class="code-header">
-        <span class="code-title">💻 响应式 CSS 代码</span>
-        <span class="code-lang">CSS</span>
+        <span>💻 魔法咒语（CSS代码）</span>
+        <span class="code-tag">CSS</span>
       </div>
-      <pre class="code-block"><code>/* 默认：手机端（单列） */
-.grid {
+      <pre class="code-content"><code>/* 默认：小房间，衣服叠成1列 */
+.closet {
   display: grid;
-  gap: 1rem;
-  grid-template-columns: 1fr;
+  gap: 10px;
+  grid-template-columns: 1fr;  /* 1列 */
 }
 
-/* 平板端：双列（640px 以上） */
+/* 中房间：衣服排成2列 */
 @media (min-width: 640px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
+  .closet {
+    grid-template-columns: repeat(2, 1fr);  /* 2列 */
   }
 }
 
-/* 电脑端：三列（1024px 以上） */
+/* 大房间：衣服排成3列 */
 @media (min-width: 1024px) {
-  .grid {
-    grid-template-columns: repeat(3, 1fr);
+  .closet {
+    grid-template-columns: repeat(3, 1fr);  /* 3列 */
   }
 }</code></pre>
     </div>
 
-    <div class="tips-box">
-      <div class="tips-icon">🎯</div>
-      <div class="tips-content">
-        <strong>关键点：</strong>
-        响应式布局通过 CSS 媒体查询（Media Query）自动适配不同屏幕。
-        就像智能相框，无论大屏小屏，内容都能完美展示！
+    <!-- 总结 -->
+    <div class="summary-box">
+      <div class="summary-icon">🎯</div>
+      <div class="summary-content">
+        <strong>关键 takeaway：</strong>
+        响应式布局就像小美的魔法衣柜，<strong>同一套衣服（内容）</strong>，
+        会根据<strong>房间大小（屏幕宽度）</strong>自动调整排列方式！
+        这就是 CSS 媒体查询（Media Query）的魔法！
       </div>
     </div>
   </div>
@@ -129,404 +138,404 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const screenWidth = ref(375)
+// 衣柜宽度（模拟屏幕宽度）
+const closetWidth = ref(375)
 
-const devices = [
-  { id: 'iphone-se', name: 'iPhone SE', width: 375, icon: '📱' },
-  { id: 'iphone-14', name: 'iPhone 14', width: 390, icon: '📱' },
-  { id: 'ipad-mini', name: 'iPad Mini', width: 768, icon: '📲' },
-  { id: 'macbook', name: 'MacBook', width: 1280, icon: '💻' },
-  { id: 'desktop', name: '桌面显示器', width: 1400, icon: '🖥️' }
+// 房间类型
+const rooms = [
+  { name: '小房间（手机）', min: 280, max: 639, cols: 1, icon: '📱' },
+  { name: '中房间（平板）', min: 640, max: 1023, cols: 2, icon: '📲' },
+  { name: '大房间（电脑）', min: 1024, max: 900, cols: 3, icon: '💻' }
 ]
 
-const breakpoints = [
-  { name: 'sm', min: 320, max: 640 },
-  { name: 'md', min: 640, max: 1024 },
-  { name: 'lg', min: 1024, max: 9999 }
-]
-
-const currentBreakpoint = computed(() => {
-  if (screenWidth.value < 640) return { name: '手机端（小屏）', cols: 1 }
-  if (screenWidth.value < 1024) return { name: '平板端（中屏）', cols: 2 }
-  return { name: '电脑端（大屏）', cols: 3 }
+// 当前房间
+const currentRoom = computed(() => {
+  const room = rooms.find(r => closetWidth.value >= r.min && closetWidth.value <= r.max)
+  return room || rooms[0]
 })
 
-const currentDevice = computed(() => {
-  const device = devices.find(d => d.width === screenWidth.value)
-  return device ? device.name : `${screenWidth.value}px 视口`
+// 每行衣服数量
+const clothesPerRow = computed(() => currentRoom.value.cols)
+
+// 是否小空间（需要叠衣服）
+const isSmallSpace = computed(() => closetWidth.value < 500)
+
+// 排列模式文字
+const arrangementMode = computed(() => {
+  if (closetWidth.value < 640) return '小空间模式（叠放）'
+  if (closetWidth.value < 1024) return '中等空间（舒展）'
+  return '大空间（完全展开）'
 })
 
-const gridClass = computed(() => {
-  if (screenWidth.value < 640) return 'grid-cols-1'
-  if (screenWidth.value < 1024) return 'grid-cols-2'
-  return 'grid-cols-3'
+// 衣柜网格样式
+const rackStyle = computed(() => {
+  const cols = currentRoom.value.cols
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+    gap: '10px'
+  }
 })
 
-const setDevice = (width) => {
-  screenWidth.value = width
-}
-
-const gridItems = [
-  { icon: '📷', title: '摄影', description: '捕捉精彩瞬间' },
-  { icon: '🎨', title: '设计', description: '创造视觉美感' },
-  { icon: '💻', title: '编程', description: '构建数字世界' },
-  { icon: '🎵', title: '音乐', description: '谱写动人旋律' },
-  { icon: '📚', title: '阅读', description: '探索知识海洋' },
-  { icon: '✈️', title: '旅行', description: '发现世界之美' }
+// 衣服列表
+const clothes = [
+  { emoji: '👗', name: '连衣裙' },
+  { emoji: '👔', name: '衬衫' },
+  { emoji: '👖', name: '牛仔裤' },
+  { emoji: '🧥', name: '大衣' },
+  { emoji: '👘', name: '和服' },
+  { emoji: '🥻', name: '纱丽' }
 ]
 </script>
 
 <style scoped>
-.responsive-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  padding: 1.5rem;
-  margin: 1rem 0;
+.magic-closet {
+  border: 2px solid #e0d5c8;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #faf6f0 0%, #f5ebe0 100%);
+  padding: 24px;
+  margin: 20px 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
 
-.scenario-intro {
+/* 故事框 */
+.story-box {
   text-align: center;
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: linear-gradient(135deg, rgba(77, 208, 225, 0.2), rgba(126, 87, 194, 0.2));
-  border-radius: 12px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: linear-gradient(135deg, #fff5e6, #ffecd2);
+  border-radius: 16px;
+  border: 2px dashed #ffb347;
 }
 
-.emoji-scene {
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
-  animation: float 3s ease-in-out infinite;
+.story-emoji {
+  font-size: 48px;
+  margin-bottom: 8px;
+  animation: bounce 2s infinite;
 }
 
-@keyframes float {
+@keyframes bounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-10px); }
 }
 
-.scenario-intro h4 {
-  margin: 0.5rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.2rem;
+.story-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #8b4513;
+  margin: 0 0 8px 0;
 }
 
-.scenario-intro p {
+.story-text {
+  font-size: 14px;
+  color: #666;
   margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  line-height: 1.6;
 }
 
-.device-presets {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+/* 衣柜控制 */
+.closet-control {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+  border: 2px solid #e0e0e0;
 }
 
-.device-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  cursor: pointer;
-  transition: all 0.2s;
-  min-width: 80px;
-}
-
-.device-btn:hover {
-  border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-}
-
-.device-btn.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.device-icon {
-  font-size: 1.5rem;
-}
-
-.device-name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-}
-
-.device-size {
-  font-size: 0.625rem;
-  color: var(--vp-c-text-2);
-}
-
-.slider-control {
-  margin-bottom: 1rem;
-  padding: 1rem;
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.slider-labels {
+.control-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #333;
 }
 
-.width-slider {
-  width: 100%;
-  height: 8px;
+.room-label {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.slider-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.slider-emoji {
+  font-size: 20px;
+}
+
+.magic-slider {
+  flex: 1;
+  height: 10px;
   -webkit-appearance: none;
   appearance: none;
-  background: linear-gradient(90deg, #4dd0e1, #7e57c2);
-  border-radius: 4px;
+  background: linear-gradient(90deg, #ffb347, #ff6b6b, #4ecdc4);
+  border-radius: 5px;
   outline: none;
 }
 
-.width-slider::-webkit-slider-thumb {
+.magic-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   background: white;
-  border: 3px solid #7e57c2;
+  border: 4px solid #ff6b6b;
   border-radius: 50%;
   cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-.current-width {
+.width-hint {
   text-align: center;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--vp-c-text-2);
+  font-size: 13px;
+  color: #666;
+  background: #f8f9fa;
+  padding: 8px;
+  border-radius: 8px;
 }
 
-.viewport-preview {
-  border: 2px solid var(--vp-c-brand);
-  border-radius: 12px;
-  overflow: hidden;
+/* 衣柜展示 */
+.closet-display {
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, #8b4513, #a0522d);
+  border-radius: 16px;
+  padding: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.closet-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px;
+  background: linear-gradient(135deg, #d2691e, #cd853f);
+  border-radius: 12px 12px 0 0;
+}
+
+.closet-icon {
+  font-size: 24px;
+}
+
+.closet-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.closet-interior {
+  background: linear-gradient(135deg, #f5f5dc, #faf0e6);
+  padding: 16px;
+  min-height: 200px;
+}
+
+.clothes-rack {
+  display: grid;
+  gap: 12px;
+}
+
+.clothing-item {
   background: white;
-  margin-bottom: 1rem;
+  border-radius: 12px;
+  padding: 12px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  animation: popIn 0.5s ease both;
 }
 
-.viewport-header {
+@keyframes popIn {
+  0% { opacity: 0; transform: scale(0.8); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+.clothing-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.clothing-item.folded {
+  padding: 8px;
+}
+
+.item-hanger {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.item-emoji {
+  font-size: 40px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.clothing-item.folded .item-emoji {
+  font-size: 28px;
+}
+
+.item-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+
+.clothing-item.folded .item-name {
+  font-size: 11px;
+}
+
+.fold-hint {
+  font-size: 10px;
+  color: #ff6b6b;
+  margin-top: 4px;
+  font-weight: bold;
+}
+
+.closet-footer {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: var(--vp-c-brand-soft);
-  border-bottom: 1px solid var(--vp-c-brand);
-}
-
-.viewport-device {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--vp-c-brand-dark);
-}
-
-.viewport-dots {
-  display: flex;
-  gap: 4px;
-}
-
-.viewport-dots span {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-}
-
-.viewport-content {
-  margin: 0 auto;
-  transition: width 0.3s ease;
-  overflow: hidden;
-}
-
-.demo-grid {
-  display: grid;
-  gap: 0.75rem;
-  padding: 1rem;
-}
-
-.grid-cols-1 {
-  grid-template-columns: 1fr;
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.grid-item {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px;
-  padding: 1rem;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #d2691e, #cd853f);
+  border-radius: 0 0 12px 12px;
+  font-size: 12px;
   color: white;
+}
+
+/* 魔法原理说明 */
+.magic-explain {
+  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 2px dashed #7e57c2;
+}
+
+.explain-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #5e35b1;
   text-align: center;
-  transition: all 0.3s ease;
-  animation: fadeInUp 0.5s ease both;
+  margin-bottom: 16px;
 }
 
-.grid-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.item-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.item-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-.item-desc {
-  font-size: 0.75rem;
-  opacity: 0.9;
-}
-
-.breakpoint-indicator {
-  margin-bottom: 1rem;
-  padding: 1rem;
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.bp-track {
-  position: relative;
-  height: 40px;
-  background: linear-gradient(90deg, #4dd0e1 0%, #7e57c2 50%, #ab47bc 100%);
-  border-radius: 20px;
-}
-
-.bp-point {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
+.explain-cards {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
-.bp-point.active .bp-label {
+.explain-card {
   background: white;
-  color: #333;
-  font-weight: 700;
-  transform: scale(1.1);
-}
-
-.bp-label {
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.8);
   border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #555;
-  transition: all 0.3s;
+  padding: 16px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  min-width: 140px;
 }
 
-.bp-range {
-  font-size: 0.625rem;
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+.card-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
 }
 
-.code-preview {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+.card-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 6px;
+}
+
+.card-desc {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.explain-arrow {
+  font-size: 24px;
+  color: #7e57c2;
+}
+
+/* 代码区域 */
+.code-section {
+  border: 2px solid #e0e0e0;
+  border-radius: 12px;
   overflow: hidden;
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
 }
 
 .code-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: var(--vp-c-bg-alt);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.code-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-}
-
-.code-lang {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  background: var(--vp-c-brand);
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
-  border-radius: 4px;
+  font-weight: bold;
 }
 
-.code-block {
+.code-tag {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.code-content {
   margin: 0;
-  padding: 1rem;
-  background: #1e1e2e;
-  color: #a6accd;
-  font-size: 0.8125rem;
+  padding: 16px;
+  background: #2d2d2d;
+  color: #f8f8f2;
+  font-size: 13px;
   line-height: 1.6;
   overflow-x: auto;
 }
 
-.tips-box {
+/* 总结框 */
+.summary-box {
   display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
-  border-radius: 8px;
-  border-left: 4px solid #2196f3;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(135deg, #d4edda, #c3e6cb);
+  border-radius: 12px;
+  border-left: 4px solid #28a745;
 }
 
-.tips-icon {
-  font-size: 1.5rem;
+.summary-icon {
+  font-size: 32px;
+  flex-shrink: 0;
 }
 
-.tips-content {
+.summary-content {
   flex: 1;
-  font-size: 0.9rem;
-  color: #444;
+  font-size: 14px;
+  color: #155724;
   line-height: 1.6;
 }
 
+/* 响应式调整 */
 @media (max-width: 768px) {
-  .scene-body {
-    grid-template-columns: 1fr;
-  }
-
-  .device-presets {
+  .explain-cards {
     flex-direction: column;
   }
 
-  .bp-track {
-    height: 60px;
+  .explain-arrow {
+    transform: rotate(90deg);
+  }
+
+  .closet-display {
+    transform: scale(0.9);
+    transform-origin: top center;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
index 8f2e90e..ddd9b0d 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
@@ -1,127 +1,140 @@
 <!--
-  SliceRequestDemo.vue
-  切图时代请求次数演示 - 重构版
-
-  用途：
-  用外卖点餐的比喻，让零基础用户理解 HTTP 请求的概念。
-  通过可视化的外卖小哥动画，展示切图时代 vs 雪碧图的性能差异。
+  SliceRequestDemo.vue - 搬家快递大作战
+  用"搬家打包"的比喻来解释 HTTP 请求优化（切图 vs 雪碧图）
 -->
 <template>
-  <div class="slice-demo">
-    <div class="scenario-intro">
-      <div class="emoji-scene">🍕 📱 🛵</div>
-      <h4>外卖点餐模拟器</h4>
-      <p>想象一下你在点披萨外卖。每次下单，外卖小哥就要跑一趟。</p>
+  <div class="moving-game">
+    <!-- 故事引入 -->
+    <div class="story-box">
+      <div class="story-emoji">📦🚚🏠</div>
+      <h4 class="story-title">小明搬家记</h4>
+      <p class="story-text">
+        小明要搬 6 箱书到新房子。有两种搬家方式：<br>
+        <strong>A 方案：一箱一箱搬</strong>（切图模式） vs <strong>B 方案：一次性打包运走</strong>（雪碧图模式）<br>
+        看看哪种更省时间？
+      </p>
     </div>
 
-    <div class="mode-tabs">
-      <button
-        v-for="mode in modes"
-        :key="mode.id"
-        :class="['mode-tab', { active: currentMode === mode.id }]"
-        @click="switchMode(mode.id)"
+    <!-- 模式选择 -->
+    <div class="mode-selector">
+      <div
+        class="mode-card"
+        :class="{ active: mode === 'separate' }"
+        @click="mode = 'separate'"
       >
-        <span class="tab-icon">{{ mode.icon }}</span>
-        <span class="tab-label">{{ mode.label }}</span>
-        <span class="tab-desc">{{ mode.desc }}</span>
-      </button>
+        <div class="mode-icon">🛵</div>
+        <div class="mode-name">A 方案：一箱一趟</div>
+        <div class="mode-desc">小面包车，一次拉一箱</div>
+        <div class="mode-detail">需要 6 趟运输</div>
+      </div>
+
+      <div class="vs-divider">VS</div>
+
+      <div
+        class="mode-card"
+        :class="{ active: mode === 'packed' }"
+        @click="mode = 'packed'"
+      >
+        <div class="mode-icon">🚚</div>
+        <div class="mode-name">B 方案：打包一车拉</div>
+        <div class="mode-desc">大卡车，6箱一次运走</div>
+        <div class="mode-detail">只需 1 趟运输</div>
+      </div>
     </div>
 
-    <div class="restaurant-scene">
-      <div class="scene-header">
-        <div class="restaurant-info">
-          <span class="restaurant-emoji">🏪</span>
-          <span class="restaurant-name">前端披萨店</span>
+    <!-- 动画演示区 -->
+    <div class="animation-area">
+      <!-- 起点 -->
+      <div class="location start">
+        <div class="location-icon">🏠</div>
+        <div class="location-label">旧家</div>
+        <div class="boxes-remaining">
+          剩余箱子: <span class="count">{{ remainingBoxes }}</span>
         </div>
-        <div class="delivery-stats">
-          <div class="stat">
-            <span class="stat-label">外卖小哥跑了:</span>
-            <span class="stat-value deliveries">{{ deliveryCount }}</span>
-            <span class="stat-unit">趟</span>
+      </div>
+
+      <!-- 道路 -->
+      <div class="road">
+        <div class="road-line"></div>
+
+        <!-- 运输车辆 -->
+        <div
+          v-for="vehicle in vehicles"
+          :key="vehicle.id"
+          class="vehicle"
+          :class="{ 'moving': vehicle.isMoving }"
+          :style="{ left: vehicle.position + '%' }"
+        >
+          <div class="vehicle-body">
+            {{ mode === 'separate' ? '🛵' : '🚚' }}
           </div>
-          <div class="stat time-stat">
-            <span class="stat-label">总耗时:</span>
-            <span class="stat-value time">{{ totalTime }}</span>
-            <span class="stat-unit">秒</span>
+          <div class="vehicle-cargo" v-if="vehicle.cargo > 0">
+            {{ mode === 'separate' ? '📦' : '📦×' + vehicle.cargo }}
           </div>
         </div>
       </div>
 
-      <div class="scene-body">
-        <div class="kitchen-area">
-          <div class="kitchen-label">🍳 后厨（服务器）</div>
-          <div class="food-items">
-            <div
-              v-for="(item, index) in foodItems"
-              :key="index"
-              class="food-item"
-              :class="{ preparing: item.status === 'preparing', ready: item.status === 'ready' }"
-            >
-              <span class="food-emoji">{{ item.emoji }}</span>
-              <span class="food-name">{{ item.name }}</span>
-              <span class="food-status">{{ getStatusText(item.status) }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="delivery-lane">
-          <div class="lane-label">🛵 配送路线（网络）</div>
-          <div class="delivery-runway">
-            <div
-              v-for="(rider, index) in activeRiders"
-              :key="rider.id"
-              class="rider"
-              :style="{ left: rider.position + '%' }"
-            >
-              <div class="rider-emoji">{{ rider.mode === 'sprite' ? '🚚' : '🛵' }}</div>
-              <div class="rider-package">
-                <span v-for="emoji in rider.packages" :key="emoji">{{ emoji }}</span>
-              </div>
-            </div>
-            <div v-if="activeRiders.length === 0" class="empty-lane">
-              等待下单...
-            </div>
-          </div>
-        </div>
-
-        <div class="customer-area">
-          <div class="customer-label">🏠 你家（浏览器）</div>
-          <div class="received-items">
-            <div v-if="receivedItems.length === 0" class="empty-plate">
-              🍽️ 等待美食送达...
-            </div>
-            <div v-else class="food-on-table">
-              <div
-                v-for="(item, index) in receivedItems"
-                :key="index"
-                class="received-item"
-                :class="{ fresh: item.isNew }"
-              >
-                <span class="item-emoji">{{ item.emoji }}</span>
-                <span class="item-name">{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
+      <!-- 终点 -->
+      <div class="location end">
+        <div class="location-icon">🏡</div>
+        <div class="location-label">新家</div>
+        <div class="boxes-delivered">
+          已送达: <span class="count">{{ deliveredBoxes }}</span>/6
         </div>
       </div>
     </div>
 
-    <div class="control-panel">
-      <button class="order-btn" @click="placeOrder" :disabled="isOrdering">
-        <span class="btn-icon">{{ isOrdering ? '⏳' : '🛒' }}</span>
-        <span class="btn-text">{{ isOrdering ? '配 送 中...' : '下 单 点 餐' }}</span>
+    <!-- 统计面板 -->
+    <div class="stats-panel">
+      <div class="stat-item">
+        <div class="stat-label">运输趟数</div>
+        <div class="stat-value" :class="{ 'good': trips <= 2, 'bad': trips > 2 }">
+          {{ trips }} 趟
+        </div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">总耗时</div>
+        <div class="stat-value">{{ totalTime.toFixed(1) }} 秒</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">效率评分</div>
+        <div class="stat-value" :class="efficiencyClass">
+          {{ efficiency }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 控制按钮 -->
+    <div class="controls">
+      <button
+        class="btn btn-primary"
+        @click="startSimulation"
+        :disabled="isRunning"
+      >
+        {{ isRunning ? '运输中...' : '开始搬家' }}
       </button>
-      <button class="reset-btn" @click="resetScene">
-        <span class="btn-icon">🔄</span>
-        <span class="btn-text">重新开始</span>
+      <button
+        class="btn btn-secondary"
+        @click="resetSimulation"
+      >
+        重置
       </button>
     </div>
 
-    <div class="explanation-box">
-      <div class="explanation-icon">💡</div>
-      <div class="explanation-content">
-        <strong>{{ currentMode === 'slice' ? '切图时代' : '雪碧图时代' }}：</strong>
-        {{ currentExplanation }}
+    <!-- 知识点总结 -->
+    <div class="knowledge-box">
+      <div class="knowledge-title">💡 核心原理</div>
+      <div class="knowledge-content">
+        <p v-if="mode === 'separate'">
+          <strong>切图模式（分开请求）：</strong>就像一箱一箱搬，每次只拉一件货。
+          浏览器要发起 6 次 HTTP 请求，每次都要建立连接、传输数据，
+          <span class="highlight-bad">效率低、耗时长</span>。
+        </p>
+        <p v-else>
+          <strong>雪碧图模式（合并请求）：</strong>就像用大卡车一次性拉走所有箱子。
+          浏览器只需 1 次 HTTP 请求就能获取所有图片，
+          <span class="highlight-good">大幅减少连接开销，速度更快</span>！
+        </p>
       </div>
     </div>
   </div>
@@ -130,588 +143,461 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const currentMode = ref('slice')
-const isOrdering = ref(false)
-const deliveryCount = ref(0)
+// 模式选择
+const mode = ref('separate')
+
+// 运行状态
+const isRunning = ref(false)
+const trips = ref(0)
 const totalTime = ref(0)
-const activeRiders = ref([])
-const receivedItems = ref([])
+const remainingBoxes = ref(6)
+const deliveredBoxes = ref(0)
 
-const modes = [
-  {
-    id: 'slice',
-    label: '切图时代',
-    icon: '🛵',
-    desc: '每次只送一道菜'
-  },
-  {
-    id: 'sprite',
-    label: '雪碧图时代',
-    icon: '🚚',
-    desc: '一次送完整桌菜'
+// 车辆动画
+const vehicles = ref([])
+
+// 计算效率评分
+const efficiency = computed(() => {
+  if (mode.value === 'packed') {
+    return trips.value <= 1 ? '优秀' : '良好'
+  } else {
+    return trips.value <= 3 ? '一般' : '低效'
   }
-]
-
-const foodItems = [
-  { emoji: '🍕', name: '披萨底', status: 'ready' },
-  { emoji: '🧀', name: '芝士', status: 'ready' },
-  { emoji: '🍄', name: '蘑菇', status: 'ready' },
-  { emoji: '🥓', name: '培根', status: 'ready' },
-  { emoji: '🫑', name: '青椒', status: 'ready' },
-  { emoji: '🍅', name: '番茄酱', status: 'ready' }
-]
-
-const currentExplanation = computed(() => {
-  return currentMode.value === 'slice'
-    ? '每张小图都单独发一个 HTTP 请求。就像点外卖时，每道菜都单独叫一个外卖小哥，跑 6 趟才能送齐！'
-    : '把所有小图合并成一张大图。就像把一桌菜装进一个保温箱，一个外卖小哥一趟就全送来了！'
 })
 
-const getStatusText = (status) => {
-  const map = { ready: '✓ 就绪', preparing: '⏳ 制作中', delivering: '🛵 配送中' }
-  return map[status] || status
-}
+const efficiencyClass = computed(() => {
+  const score = efficiency.value
+  if (score === '优秀') return 'excellent'
+  if (score === '良好') return 'good'
+  if (score === '一般') return 'average'
+  return 'poor'
+})
 
-let riderIdCounter = 0
+// 开始模拟
+const startSimulation = async () => {
+  if (isRunning.value) return
 
-const switchMode = (mode) => {
-  currentMode.value = mode
-  resetScene()
-}
+  isRunning.value = true
+  resetStats()
 
-const resetScene = () => {
-  isOrdering.value = false
-  deliveryCount.value = 0
-  totalTime.value = 0
-  activeRiders.value = []
-  receivedItems.value = []
-  riderIdCounter = 0
-}
-
-const placeOrder = async () => {
-  if (isOrdering.value) return
-  isOrdering.value = true
-  receivedItems.value = []
-
-  const items = [...foodItems]
-
-  if (currentMode.value === 'slice') {
-    // 切图模式：每个食材单独配送
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i]
-      deliveryCount.value++
-
-      // 创建骑手
-      const rider = {
-        id: riderIdCounter++,
-        position: 0,
-        mode: 'slice',
-        packages: [item.emoji]
-      }
-      activeRiders.value = [rider]
-
-      // 动画：去程 - 使用响应式方式更新
-      await animateRiderReactive(rider, 100, 800)
-
-      // 送达
-      receivedItems.value.push({ ...item, isNew: true })
-      setTimeout(() => { if (receivedItems.value[i]) receivedItems.value[i].isNew = false }, 500)
-
-      // 动画：返程 - 使用响应式方式更新
-      await animateRiderReactive(rider, 0, 600)
-
-      totalTime.value += 1.4
-      activeRiders.value = []
+  if (mode.value === 'separate') {
+    // 分开运输：一箱一趟
+    for (let i = 0; i < 6; i++) {
+      await runTrip(1)
+      trips.value++
     }
   } else {
-    // 雪碧图模式：一次送全部
-    deliveryCount.value = 1
-
-    const rider = {
-      id: riderIdCounter++,
-      position: 0,
-      mode: 'sprite',
-      packages: items.map(i => i.emoji)
-    }
-    activeRiders.value = [rider]
-
-    // 动画：去程
-    await animateRider(rider, 100, 1500)
-
-    // 全部送达
-    items.forEach((item, idx) => {
-      setTimeout(() => {
-        receivedItems.value.push({ ...item, isNew: true })
-        setTimeout(() => {
-          const found = receivedItems.value.find(r => r.name === item.name && r.isNew)
-          if (found) found.isNew = false
-        }, 500)
-      }, idx * 100)
-    })
-
-    totalTime.value = 2.5
-
-    // 动画：返程
-    await animateRider(rider, 0, 1000)
-    activeRiders.value = []
+    // 打包运输：6箱一趟
+    await runTrip(6)
+    trips.value = 1
   }
 
-  isOrdering.value = false
+  isRunning.value = false
 }
 
-// 响应式动画函数 - 使用 Vue 的响希方式更新位置
-const animateRiderReactive = (rider, targetPosition, duration) => {
-  return new Promise(resolve => {
-    const startPosition = rider.position
-    const startTime = performance.now()
-    let isActive = true
-
-    const animate = (currentTime) => {
-      if (!isActive) return
-
-      const elapsed = currentTime - startTime
-      const progress = Math.min(elapsed / duration, 1)
-
-      // 缓动函数
-      const easeProgress = 1 - Math.pow(1 - progress, 3)
-
-      // 使用 Vue 的方式触发更新 - 直接修改对象属性
-      const newPosition = startPosition + (targetPosition - startPosition) * easeProgress
-
-      // 通过强制触发 Vue 响应的方式更新
-      rider.position = newPosition
-
-      // 手动触发 Vue 的更新（通过操作数组）
-      const riders = activeRiders.value
-      const index = riders.indexOf(rider)
-      if (index !== -1) {
-        // 通过替换对象强制触发响应
-        riders[index] = { ...rider, position: newPosition }
-      }
-
-      if (progress < 1) {
-        requestAnimationFrame(animate)
-      } else {
-        isActive = false
-        resolve()
-      }
+// 单次运输动画
+const runTrip = (cargoCount) => {
+  return new Promise((resolve) => {
+    // 创建车辆
+    const vehicle = {
+      id: Date.now(),
+      position: 0,
+      cargo: cargoCount,
+      isMoving: true
     }
+    vehicles.value = [vehicle]
 
-    requestAnimationFrame(animate)
+    // 更新剩余箱子
+    remainingBoxes.value = Math.max(0, remainingBoxes.value - cargoCount)
+
+    // 动画：去程
+    const goTrip = setInterval(() => {
+      vehicle.position += 2
+      if (vehicle.position >= 100) {
+        clearInterval(goTrip)
+
+        // 送达
+        deliveredBoxes.value += cargoCount
+
+        // 动画：返程
+        setTimeout(() => {
+          const returnTrip = setInterval(() => {
+            vehicle.position -= 2
+            if (vehicle.position <= 0) {
+              clearInterval(returnTrip)
+              vehicles.value = []
+              resolve()
+            }
+          }, 20)
+        }, 300)
+      }
+    }, 20)
+
+    // 累计时间
+    totalTime.value += 2.5
   })
 }
+
+// 重置模拟
+const resetSimulation = () => {
+  isRunning.value = false
+  vehicles.value = []
+  resetStats()
+}
+
+const resetStats = () => {
+  trips.value = 0
+  totalTime.value = 0
+  remainingBoxes.value = 6
+  deliveredBoxes.value = 0
+}
 </script>
 
 <style scoped>
-.slice-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  padding: 1.5rem;
-  margin: 1rem 0;
+.moving-game {
+  border: 2px solid #e8e8e8;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
+  padding: 24px;
+  margin: 20px 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
 
-.scenario-intro {
+/* 故事框 */
+.story-box {
   text-align: center;
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: linear-gradient(135deg, rgba(255, 183, 77, 0.2), rgba(255, 138, 101, 0.2));
-  border-radius: 12px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: linear-gradient(135deg, #fff8e1, #ffecb3);
+  border-radius: 16px;
+  border: 2px dashed #ffc107;
 }
 
-.emoji-scene {
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
-  animation: bounce 2s infinite;
+.story-emoji {
+  font-size: 48px;
+  margin-bottom: 8px;
 }
 
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+.story-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #8b4513;
+  margin: 0 0 8px 0;
 }
 
-.scenario-intro h4 {
-  margin: 0.5rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.2rem;
-}
-
-.scenario-intro p {
+.story-text {
+  font-size: 14px;
+  color: #666;
   margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  line-height: 1.6;
 }
 
-.mode-tabs {
+/* 模式选择 */
+.mode-selector {
   display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.mode-tab {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
-  padding: 1rem;
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg);
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.mode-card {
+  background: white;
+  border: 3px solid #e0e0e0;
+  border-radius: 16px;
+  padding: 20px;
+  text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
+  min-width: 200px;
+  flex: 1;
+  max-width: 280px;
 }
 
-.mode-tab:hover {
-  border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
+.mode-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }
 
-.mode-tab.active {
-  border-color: var(--vp-c-brand);
-  background: linear-gradient(135deg, var(--vp-c-brand-soft), var(--vp-c-bg));
-}
-
-.tab-icon {
-  font-size: 2rem;
-}
-
-.tab-label {
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.tab-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.restaurant-scene {
-  background: linear-gradient(180deg, #e3f2fd 0%, #f5f5f5 100%);
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 1rem;
-}
-
-.scene-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: rgba(255, 255, 255, 0.9);
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.restaurant-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.restaurant-emoji {
-  font-size: 1.5rem;
-}
-
-.restaurant-name {
-  font-weight: 600;
-  color: #333;
-}
-
-.delivery-stats {
-  display: flex;
-  gap: 1rem;
-}
-
-.stat {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.stat-label {
-  color: #666;
-}
-
-.stat-value {
-  font-weight: 700;
-  font-size: 1.1rem;
-}
-
-.stat-value.deliveries {
-  color: #ff6b6b;
-}
-
-.stat-value.time {
-  color: #4ecdc4;
-}
-
-.scene-body {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr 1fr;
-  gap: 1rem;
-  padding: 1rem;
-  min-height: 250px;
-}
-
-.kitchen-area,
-.delivery-lane,
-.customer-area {
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  padding: 0.75rem;
-}
-
-.kitchen-label,
-.lane-label,
-.customer-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #666;
-  margin-bottom: 0.5rem;
-  text-align: center;
-}
-
-.food-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.food-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  background: #f5f5f5;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  transition: all 0.3s;
-}
-
-.food-item.preparing {
-  background: #fff3e0;
-}
-
-.food-item.delivering {
-  background: #e3f2fd;
-}
-
-.food-item.ready {
+.mode-card.active {
+  border-color: #4caf50;
   background: #e8f5e9;
 }
 
-.food-emoji {
-  font-size: 1rem;
+.mode-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
 }
 
-.food-name {
-  flex: 1;
-  font-weight: 500;
+.mode-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
 }
 
-.food-status {
-  font-size: 0.625rem;
+.mode-desc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.mode-detail {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e65100;
+  padding: 4px 12px;
+  background: #fff3e0;
+  border-radius: 12px;
+  display: inline-block;
+}
+
+.vs-divider {
+  font-size: 24px;
+  font-weight: bold;
   color: #999;
+  padding: 0 8px;
 }
 
-.delivery-runway {
+/* 动画演示区 */
+.animation-area {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  border: 2px solid #e0e0e0;
+}
+
+.location {
+  text-align: center;
+  min-width: 100px;
+}
+
+.location-icon {
+  font-size: 40px;
+  margin-bottom: 8px;
+}
+
+.location-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.boxes-remaining,
+.boxes-delivered {
+  font-size: 12px;
+  color: #666;
+  padding: 4px 8px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.count {
+  font-weight: bold;
+  color: #e65100;
+  font-size: 16px;
+}
+
+.road {
+  flex: 1;
   position: relative;
-  height: 120px;
-  background: linear-gradient(90deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%);
+  height: 80px;
+  background: linear-gradient(to bottom, #e8eaf6 0%, #c5cae9 100%);
   border-radius: 8px;
   overflow: hidden;
 }
 
-.delivery-runway::before {
-  content: '';
+.road-line {
   position: absolute;
   top: 50%;
-  left: 0;
-  right: 0;
-  height: 2px;
+  left: 10%;
+  right: 10%;
+  height: 4px;
   background: repeating-linear-gradient(
     90deg,
-    #9fa8da 0px,
-    #9fa8da 20px,
+    #7986cb 0px,
+    #7986cb 20px,
     transparent 20px,
     transparent 40px
   );
+  transform: translateY(-50%);
 }
 
-.rider {
+.vehicle {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
-  transition: left 0.1s linear;
+  transition: none;
 }
 
-.rider-emoji {
-  font-size: 2rem;
-  animation: rider-bounce 0.5s infinite alternate;
+.vehicle-body {
+  font-size: 32px;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
 }
 
-@keyframes rider-bounce {
-  from { transform: translateY(0); }
-  to { transform: translateY(-3px); }
-}
-
-.rider-package {
-  display: flex;
-  gap: 2px;
-  margin-top: 2px;
-  padding: 2px 4px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 10px;
-  font-size: 0.75rem;
-}
-
-.empty-lane {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #9fa8da;
-  font-size: 0.875rem;
-}
-
-.received-items {
-  min-height: 150px;
-}
-
-.empty-plate {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 150px;
-  color: #999;
-  font-size: 0.875rem;
-}
-
-.food-on-table {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-}
-
-.received-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  background: #f5f5f5;
+.vehicle-cargo {
+  font-size: 12px;
+  background: white;
+  padding: 2px 6px;
   border-radius: 8px;
-  transition: all 0.3s;
+  margin-top: 2px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  font-weight: bold;
+  color: #e65100;
 }
 
-.received-item.fresh {
-  animation: item-arrive 0.5s ease;
-  background: #e8f5e9;
+/* 统计面板 */
+.stats-panel {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
 }
 
-@keyframes item-arrive {
-  0% { transform: scale(0.5); opacity: 0; }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); opacity: 1; }
+.stat-item {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  border: 2px solid #e0e0e0;
 }
 
-.item-emoji {
-  font-size: 1.5rem;
-}
-
-.item-name {
-  font-size: 0.625rem;
+.stat-label {
+  font-size: 13px;
   color: #666;
-  margin-top: 0.25rem;
+  margin-bottom: 8px;
 }
 
-.control-panel {
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.stat-value.good {
+  color: #4caf50;
+}
+
+.stat-value.bad {
+  color: #f44336;
+}
+
+.stat-value.excellent {
+  color: #2196f3;
+}
+
+.stat-value.good {
+  color: #4caf50;
+}
+
+.stat-value.poor {
+  color: #ff9800;
+}
+
+/* 控制按钮 */
+.controls {
   display: flex;
-  gap: 1rem;
   justify-content: center;
-  margin-top: 1rem;
+  gap: 12px;
+  margin-bottom: 20px;
 }
 
-.order-btn,
-.reset-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.875rem 1.5rem;
+.btn {
+  padding: 12px 24px;
   border: none;
   border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
 }
 
-.order-btn {
-  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
-  color: white;
-}
-
-.order-btn:hover:not(:disabled) {
+.btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 
-.order-btn:disabled {
-  opacity: 0.7;
+.btn:disabled {
+  opacity: 0.6;
   cursor: not-allowed;
 }
 
-.reset-btn {
+.btn-primary {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+}
+
+.btn-secondary {
   background: #f5f5f5;
   color: #666;
 }
 
-.reset-btn:hover {
-  background: #e0e0e0;
-}
-
-.explanation-box {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding: 1rem;
+/* 知识点总结 */
+.knowledge-box {
   background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
-  border-radius: 8px;
+  border-radius: 12px;
+  padding: 20px;
   border-left: 4px solid #2196f3;
 }
 
-.explanation-icon {
-  font-size: 1.5rem;
+.knowledge-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1565c0;
+  margin-bottom: 12px;
 }
 
-.explanation-content {
-  flex: 1;
-  font-size: 0.9rem;
-  color: #444;
+.knowledge-content {
+  font-size: 14px;
   line-height: 1.6;
+  color: #333;
 }
 
+.knowledge-content p {
+  margin: 0;
+}
+
+.highlight-good {
+  color: #4caf50;
+  font-weight: bold;
+}
+
+.highlight-bad {
+  color: #f44336;
+  font-weight: bold;
+}
+
+/* 响应式 */
 @media (max-width: 768px) {
-  .scene-body {
+  .mode-selector {
+    flex-direction: column;
+  }
+
+  .vs-divider {
+    transform: rotate(90deg);
+  }
+
+  .animation-area {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .road {
+    width: 100%;
+    height: 60px;
+  }
+
+  .stats-panel {
     grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-
-  .delivery-stats {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .mode-tabs {
-    flex-direction: column;
-  }
-
-  .control-panel {
-    flex-direction: column;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
new file mode 100644
index 0000000..f7a9148
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="dynamic-routes-demo">
+    <div class="demo-header">
+      <h4>动态路由与参数</h4>
+      <p class="demo-desc">探索动态参数、正则匹配和可选参数的使用方式</p>
+    </div>
+
+    <div class="demo-content">
+      <!-- 路由参数类型说明 -->
+      <div class="param-types">
+        <div
+          v-for="type in paramTypes"
+          :key="type.name"
+          :class="['param-card', { active: selectedType === type.name }]"
+          @click="selectedType = type.name"
+        >
+          <div class="param-pattern">{{ type.pattern }}</div>
+          <div class="param-name">{{ type.name }}</div>
+          <div class="param-desc">{{ type.description }}</div>
+        </div>
+      </div>
+
+      <!-- 参数解析演示 -->
+      <div class="parsing-demo">
+        <div class="demo-section">
+          <h5>测试路径</h5>
+          <div class="input-group">
+            <span class="input-prefix">/</span>
+            <input
+              v-model="testPath"
+              type="text"
+              placeholder="user/123/profile"
+              class="demo-input"
+              @input="parsePath"
+            >
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <h5>匹配结果</h5>
+          <div v-if="parseResult" class="result-box">
+            <div class="result-row">
+              <span class="result-label">匹配路由:</span>
+              <code class="result-value">{{ parseResult.route }}</code>
+            </div>
+            <div v-if="Object.keys(parseResult.params).length" class="result-params">
+              <span class="result-label">提取参数:</span>
+              <div class="params-grid">
+                <div
+                  v-for="(value, key) in parseResult.params"
+                  :key="key"
+                  class="param-tag"
+                >
+                  <span class="param-key">{{ key }}</span>
+                  <span class="param-eq">=</span>
+                  <span class="param-val">{{ value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="no-result">
+            输入路径查看解析结果
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedType = ref('required')
+const testPath = ref('user/123/profile')
+
+const paramTypes = [
+  {
+    name: 'required',
+    pattern: ':id',
+    description: '必填参数，URL中必须有对应的值',
+    example: '/user/123'
+  },
+  {
+    name: 'optional',
+    pattern: ':id?',
+    description: '可选参数，可以省略',
+    example: '/user 或 /user/123'
+  },
+  {
+    name: 'multiple',
+    pattern: ':id+',
+    description: '一个或多个，至少有一个值',
+    example: '/files/a 或 /files/a/b/c'
+  },
+  {
+    name: 'zeroOrMore',
+    pattern: ':id*',
+    description: '零个或多个，可以没有',
+    example: '/tags 或 /tags/vue/router'
+  }
+]
+
+// 模拟的路由配置
+const routePatterns = [
+  { pattern: '/user/:id', name: 'UserDetail' },
+  { pattern: '/user/:id/profile', name: 'UserProfile' },
+  { pattern: '/user/:id/:tab', name: 'UserTab' },
+  { pattern: '/products/:category/:id', name: 'ProductDetail' },
+  { pattern: '/search/:keyword?', name: 'Search' },
+  { pattern: '/files/:path*', name: 'FileBrowser' }
+]
+
+const parsePath = () => {
+  const path = testPath.value.trim()
+  if (!path) return null
+
+  // 简化的匹配逻辑
+  for (const route of routePatterns) {
+    const match = matchRoute(route.pattern, path)
+    if (match) {
+      return {
+        route: route.pattern,
+        params: match
+      }
+    }
+  }
+
+  return null
+}
+
+const matchRoute = (pattern, path) => {
+  // 将 :param 转换为正则
+  const regexPattern = pattern
+    .replace(/:([^/]+)\*/g, '(.*)') // :path* → (.*)
+    .replace(/:([^/]+)\?/g, '([^/]*)') // :keyword? → ([^/]*)
+    .replace(/:([^/]+)/g, '([^/]+)') // :id → ([^/]+)
+
+  const regex = new RegExp(`^${regexPattern}$`)
+  const match = path.match(regex)
+
+  if (!match) return null
+
+  // 提取参数名
+  const paramNames = []
+  const paramRegex = /:([^/]+)/g
+  let paramMatch
+  while ((paramMatch = paramRegex.exec(pattern)) !== null) {
+    paramNames.push(paramMatch[1].replace(/[?*+]$/, ''))
+  }
+
+  // 构建参数对象
+  const params = {}
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1]
+  })
+
+  return params
+}
+
+const parseResult = computed(() => parsePath())
+
+// 初始化
+parsePath()
+</script>
+
+<style scoped>
+.dynamic-routes-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.param-types {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.param-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.param-card:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.param-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.param-pattern {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 8px;
+}
+
+.param-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  margin-bottom: 4px;
+}
+
+.param-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.parsing-demo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.demo-section {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.demo-section h5 {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.input-prefix {
+  padding: 10px 8px 10px 12px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.demo-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 10px 12px 10px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  outline: none;
+  font-family: monospace;
+}
+
+.result-box {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.result-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-label {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  min-width: 60px;
+}
+
+.result-value {
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  font-family: monospace;
+  background: var(--vp-c-bg-soft);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.result-params {
+  padding-top: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.params-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.param-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--vp-c-brand-soft);
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.param-key {
+  color: var(--vp-c-brand);
+  font-weight: 500;
+}
+
+.param-eq {
+  color: var(--vp-c-text-3);
+}
+
+.param-val {
+  color: var(--vp-c-text-1);
+}
+
+.no-result {
+  text-align: center;
+  padding: 32px;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .param-types {
+    grid-template-columns: 1fr;
+  }
+
+  .parsing-demo {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
new file mode 100644
index 0000000..9d1a1d1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="hash-vs-history-demo">
+    <div class="demo-header">
+      <h4>Hash vs History 模式对比</h4>
+      <p class="demo-desc">直观对比两种主流路由模式的URL变化、浏览器行为和兼容性</p>
+    </div>
+
+    <div class="comparison-container">
+      <!-- Hash Mode -->
+      <div class="mode-column">
+        <div class="mode-header hash">
+          <span class="mode-icon">#</span>
+          <span class="mode-title">Hash 模式</span>
+        </div>
+
+        <div class="browser-mockup">
+          <div class="browser-toolbar">
+            <div class="window-controls">
+              <span class="dot red"></span>
+              <span class="dot yellow"></span>
+              <span class="dot green"></span>
+            </div>
+            <div class="address-bar">
+              <span class="protocol">https://</span>
+              <span class="host">example.com</span>
+              <span class="hash-path">/#/{{ hashPath }}</span>
+            </div>
+          </div>
+
+          <div class="browser-viewport">
+            <nav class="nav-bar">
+              <a
+                v-for="item in navItems"
+                :key="item.path"
+                :class="['nav-item', { active: hashPath === item.path }]"
+                @click="hashPath = item.path"
+              >
+                {{ item.name }}
+              </a>
+            </nav>
+            <div class="page-content">
+              <h3>{{ getPageTitle(hashPath) }}</h3>
+              <p>{{ getPageContent(hashPath) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="characteristics">
+          <div class="char-item">
+            <span class="char-label">URL格式</span>
+            <code>/#/path</code>
+          </div>
+          <div class="char-item">
+            <span class="char-label">浏览器兼容</span>
+            <span class="badge good">IE8+</span>
+          </div>
+          <div class="char-item">
+            <span class="char-label">服务端配置</span>
+            <span class="badge good">无需配置</span>
+          </div>
+          <div class="char-item">
+            <span class="char-label">SEO友好度</span>
+            <span class="badge bad">较差</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- History Mode -->
+      <div class="mode-column">
+        <div class="mode-header history">
+          <span class="mode-icon">/</span>
+          <span class="mode-title">History 模式</span>
+        </div>
+
+        <div class="browser-mockup">
+          <div class="browser-toolbar">
+            <div class="window-controls">
+              <span class="dot red"></span>
+              <span class="dot yellow"></span>
+              <span class="dot green"></span>
+            </div>
+            <div class="address-bar">
+              <span class="protocol">https://</span>
+              <span class="host">example.com</span>
+              <span class="history-path">/{{ historyPath }}</span>
+            </div>
+          </div>
+
+          <div class="browser-viewport">
+            <nav class="nav-bar">
+              <a
+                v-for="item in navItems"
+                :key="item.path"
+                :class="['nav-item', { active: historyPath === item.path }]"
+                @click="historyPath = item.path"
+              >
+                {{ item.name }}
+              </a>
+            </nav>
+            <div class="page-content">
+              <h3>{{ getPageTitle(historyPath) }}</h3>
+              <p>{{ getPageContent(historyPath) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="characteristics">
+          <div class="char-item">
+            <span class="char-label">URL格式</span>
+            <code>/path</code>
+          </div>
+          <div class="char-item">
+            <span class="char-label">浏览器兼容</span>
+            <span class="badge medium">IE10+</span>
+          </div>
+          <div class="char-item">
+            <span class="char-label">服务端配置</span>
+            <span class="badge warn">需要配置</span>
+          </div>
+          <div class="char-item">
+            <span class="char-label">SEO友好度</span>
+            <span class="badge good">良好</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="summary-section">
+      <h4>如何选择？</h4>
+      <div class="decision-tree">
+        <div class="decision-item">
+          <span class="decision-q">需要支持IE8/9？</span>
+          <span class="decision-a">→ 选 Hash 模式</span>
+        </div>
+        <div class="decision-item">
+          <span class="decision-q">重视SEO？</span>
+          <span class="decision-a">→ 选 History 模式</span>
+        </div>
+        <div class="decision-item">
+          <span class="decision-q">无法修改服务端配置？</span>
+          <span class="decision-a">→ 选 Hash 模式</span>
+        </div>
+        <div class="decision-item">
+          <span class="decision-q">追求URL美观？</span>
+          <span class="decision-a">→ 选 History 模式</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const hashPath = ref('home')
+const historyPath = ref('home')
+
+const navItems = [
+  { name: '首页', path: 'home' },
+  { name: '产品', path: 'products' },
+  { name: '关于', path: 'about' }
+]
+
+const getPageTitle = (path) => {
+  const titles = {
+    home: '首页',
+    products: '产品中心',
+    about: '关于我们'
+  }
+  return titles[path] || '首页'
+}
+
+const getPageContent = (path) => {
+  const contents = {
+    home: '欢迎来到我们的网站！这是SPA的首页，所有页面切换都在前端完成，无需刷新。',
+    products: '这里展示了我们的核心产品系列。SPA让浏览体验更流畅，切换更快。',
+    about: '了解更多关于我们的故事。SPA模式下，页面间跳转几乎没有延迟。'
+  }
+  return contents[path] || contents.home
+}
+</script>
+
+<style scoped>
+.hash-vs-history-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.comparison-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.mode-column {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.mode-header {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mode-header.hash {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.mode-header.history {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.mode-icon {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.mode-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.browser-mockup {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.browser-toolbar {
+  background: var(--vp-c-bg-soft);
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.window-controls {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27c93f; }
+
+.address-bar {
+  flex: 1;
+  background: var(--vp-c-bg);
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.protocol, .host { color: var(--vp-c-text-3); }
+.hash-path { color: #e06c75; font-weight: 500; }
+.history-path { color: #61afef; font-weight: 500; }
+
+.browser-viewport {
+  display: flex;
+  min-height: 160px;
+}
+
+.nav-bar {
+  width: 80px;
+  background: var(--vp-c-bg-soft);
+  padding: 12px 0;
+  border-right: 1px solid var(--vp-c-divider);
+}
+
+.nav-item {
+  display: block;
+  padding: 8px 12px;
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.nav-item:hover {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+
+.nav-item.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-right: 2px solid var(--vp-c-brand);
+}
+
+.page-content {
+  flex: 1;
+  padding: 16px;
+}
+
+.page-content h3 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: var(--vp-c-text-1);
+}
+
+.page-content p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.characteristics {
+  padding: 16px;
+}
+
+.char-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.char-item:last-child {
+  border-bottom: none;
+}
+
+.char-label {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.char-item code {
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.badge.good {
+  background: rgba(39, 201, 63, 0.15);
+  color: #27c93f;
+}
+
+.badge.medium {
+  background: rgba(255, 189, 46, 0.15);
+  color: #ffbd2e;
+}
+
+.badge.warn {
+  background: rgba(255, 149, 0, 0.15);
+  color: #ff9500;
+}
+
+.badge.bad {
+  background: rgba(255, 95, 86, 0.15);
+  color: #ff5f56;
+}
+
+.summary-section {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 24px;
+}
+
+.summary-section h4 {
+  margin: 0 0 16px 0;
+  color: var(--vp-c-text-1);
+  font-size: 16px;
+}
+
+.decision-tree {
+  display: grid;
+  gap: 12px;
+}
+
+.decision-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.decision-q {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  flex: 1;
+}
+
+.decision-a {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .comparison-container {
+    grid-template-columns: 1fr;
+  }
+
+  .decision-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
new file mode 100644
index 0000000..3fbd237
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="mpa-routing-demo">
+    <div class="demo-header">
+      <h4>MPA vs SPA 路由对比</h4>
+      <p class="demo-desc">对比多页面应用和单页面应用的路由机制差异</p>
+    </div>
+
+    <div class="comparison-table">
+      <div class="table-header">
+        <div class="col feature">特性</div>
+        <div class="col mpa">MPA (多页面)</div>
+        <div class="col spa">SPA (单页面)</div>
+      </div>
+      <div class="table-row" v-for="(row, index) in comparisonData" :key="index">
+        <div class="col feature">{{ row.feature }}</div>
+        <div class="col mpa">{{ row.mpa }}</div>
+        <div class="col spa">{{ row.spa }}</div>
+      </div>
+    </div>
+
+    <div class="flow-comparison">
+      <div class="flow-box mpa-flow">
+        <h5>MPA 导航流程</h5>
+        <div class="flow-steps">
+          <div class="step">1. 用户点击链接</div>
+          <div class="step">2. 浏览器发送 HTTP 请求</div>
+          <div class="step">3. 服务器返回完整 HTML</div>
+          <div class="step">4. 浏览器解析并渲染新页面</div>
+          <div class="step">5. 页面资源重新加载 (JS/CSS)</div>
+        </div>
+      </div>
+      <div class="flow-box spa-flow">
+        <h5>SPA 导航流程</h5>
+        <div class="flow-steps">
+          <div class="step">1. 用户点击链接</div>
+          <div class="step">2. 拦截默认行为 (preventDefault)</div>
+          <div class="step">3. 更新 URL (History API)</div>
+          <div class="step">4. 匹配路由配置</div>
+          <div class="step">5. 动态渲染新组件</div>
+          <div class="step">6. 页面无刷新更新</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const comparisonData = [
+  { feature: '页面加载', mpa: '每次跳转加载完整页面', spa: '首次加载后只更新内容' },
+  { feature: 'URL 变化', mpa: '浏览器地址栏正常变化', spa: 'History API 控制 URL' },
+  { feature: '用户体验', mpa: '页面有白屏闪烁', spa: '过渡流畅无刷新' },
+  { feature: 'SEO 友好', mpa: '天生对搜索引擎友好', spa: '需要 SSR/预渲染优化' },
+  { feature: '首屏时间', mpa: '较快（只加载当前页）', spa: '较慢（需加载完整应用）' },
+  { feature: '服务端压力', mpa: '较高（每次请求都渲染）', spa: '较低（大部分逻辑在客户端）' },
+  { feature: '开发复杂度', mpa: '简单，传统开发模式', spa: '较复杂，需理解前端路由' }
+]
+</script>
+
+<style scoped>
+.mpa-routing-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.comparison-table {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  margin-bottom: 20px;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1.2fr;
+  background: var(--vp-c-bg-soft);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1.2fr;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.col {
+  padding: 12px 16px;
+  font-size: 13px;
+}
+
+.col.feature {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.col.mpa {
+  color: var(--vp-c-text-2);
+}
+
+.col.spa {
+  color: var(--vp-c-brand);
+}
+
+.flow-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.flow-box {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.flow-box h5 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step {
+  padding: 10px 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.mpa-flow .step {
+  border-left-color: #888;
+}
+
+.spa-flow .step {
+  border-left-color: var(--vp-c-brand);
+}
+
+@media (max-width: 768px) {
+  .table-header,
+  .table-row {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-comparison {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
+</content>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
new file mode 100644
index 0000000..82da03c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
@@ -0,0 +1,492 @@
+<template>
+  <div class="nested-routes-demo">
+    <div class="demo-header">
+      <h4>嵌套路由可视化</h4>
+      <p class="demo-desc">点击不同层级，观察嵌套路由的渲染位置和层级关系</p>
+    </div>
+
+    <div class="demo-container">
+      <!-- 路由层级可视化 -->
+      <div class="routes-hierarchy">
+        <div class="tree-view">
+          <div
+            v-for="node in treeData"
+            :key="node.path"
+            class="tree-node"
+            :style="{ paddingLeft: `${node.level * 24}px` }"
+            @click="selectNode(node)"
+          >
+            <div
+              :class="[
+                'node-content',
+                { active: currentPath === node.path },
+                { 'has-children': node.children?.length }
+              ]"
+            >
+              <span class="node-icon">{{ node.children?.length ? '📁' : '📄' }}</span>
+              <span class="node-path">{{ node.name }}</span>
+              <code class="node-route">{{ node.path || '/' }}</code>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 渲染区域预览 -->
+      <div class="render-preview">
+        <div class="preview-header">
+          <h5>渲染视图</h5>
+          <span class="current-path">{{ currentPath || '/' }}</span>
+        </div>
+
+        <div class="router-view-hierarchy">
+          <div
+            v-for="(route, index) in activeRouteChain"
+            :key="route.path"
+            class="router-view-level"
+            :style="{ marginLeft: `${index * 20}px` }"
+          >
+            <div class="router-view-box">
+              <div class="view-label">
+                <span class="view-icon">🔲</span>
+                <span class="view-name">{{ route.name }}</span>
+              </div>
+              <div class="view-path">{{ route.path }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="breadcrumb">
+          <span
+            v-for="(crumb, index) in breadcrumbs"
+            :key="index"
+            class="breadcrumb-item"
+            @click="navigateTo(crumb.path)"
+          >
+            {{ crumb.name }}
+            <span v-if="index < breadcrumbs.length - 1" class="separator">/</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 代码示例 -->
+    <div class="code-section">
+      <h5>路由配置示例</h5>
+      <pre class="code-block"><code>{{ routeConfigCode }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentPath = ref('/dashboard')
+
+const routeConfig = [
+  {
+    path: '/',
+    name: 'Layout',
+    component: 'Layout',
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: 'Home'
+      },
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: 'Dashboard'
+      },
+      {
+        path: 'users',
+        name: 'Users',
+        component: 'UserLayout',
+        children: [
+          {
+            path: '',
+            name: 'UserList',
+            component: 'UserList'
+          },
+          {
+            path: ':id',
+            name: 'UserDetail',
+            component: 'UserDetail'
+          },
+          {
+            path: ':id/edit',
+            name: 'UserEdit',
+            component: 'UserEdit'
+          }
+        ]
+      },
+      {
+        path: 'products',
+        name: 'Products',
+        component: 'ProductLayout',
+        children: [
+          {
+            path: '',
+            name: 'ProductList',
+            component: 'ProductList'
+          },
+          {
+            path: 'category/:categoryId',
+            name: 'ProductCategory',
+            component: 'ProductCategory'
+          }
+        ]
+      },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: 'Settings',
+        children: [
+          {
+            path: 'profile',
+            name: 'ProfileSettings',
+            component: 'ProfileSettings'
+          },
+          {
+            path: 'security',
+            name: 'SecuritySettings',
+            component: 'SecuritySettings'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+// 扁平化路由，添加层级信息
+const flattenRoutes = (routes, level = 0, parentPath = '') => {
+  const result = []
+
+  routes.forEach(route => {
+    const fullPath = route.path
+      ? `${parentPath}/${route.path}`.replace(/\/+/g, '/')
+      : parentPath || '/'
+
+    const node = {
+      ...route,
+      fullPath,
+      level,
+      children: []
+    }
+
+    if (route.children?.length) {
+      node.children = flattenRoutes(route.children, level + 1, fullPath)
+    }
+
+    result.push(node)
+  })
+
+  return result
+}
+
+const treeData = computed(() => {
+  const flatten = (routes, level = 0) => {
+    const result = []
+
+    routes.forEach(route => {
+      const node = {
+        name: route.name,
+        path: route.path || '/',
+        fullPath: route.fullPath,
+        level,
+        component: route.component,
+        children: route.children?.length ? flatten(route.children, level + 1) : null
+      }
+      result.push(node)
+    })
+
+    return result
+  }
+
+  return flatten(flattenRoutes(routeConfig))
+})
+
+const activeRouteChain = computed(() => {
+  const findChain = (routes, target, chain = []) => {
+    for (const route of routes) {
+      const currentChain = [...chain, route]
+
+      if (route.path === target || route.fullPath === target) {
+        return currentChain
+      }
+
+      if (route.children?.length) {
+        const found = findChain(route.children, target, currentChain)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  return findChain(flattenRoutes(routeConfig), currentPath.value) || []
+})
+
+const breadcrumbs = computed(() => {
+  return activeRouteChain.value.map(route => ({
+    name: route.name,
+    path: route.fullPath || route.path
+  }))
+})
+
+const routeConfigCode = computed(() => `const routes = [
+  {
+    path: '/',
+    component: Layout,
+    children: [
+      { path: 'dashboard', component: Dashboard },
+      {
+        path: 'users',
+        component: UserLayout,
+        children: [
+          { path: '', component: UserList },
+          { path: ':id', component: UserDetail },
+          { path: ':id/edit', component: UserEdit }
+        ]
+      },
+      {
+        path: 'settings',
+        component: Settings,
+        children: [
+          { path: 'profile', component: ProfileSettings },
+          { path: 'security', component: SecuritySettings }
+        ]
+      }
+    ]
+  }
+]`)
+
+const selectNode = (node) => {
+  currentPath.value = node.fullPath || node.path
+}
+
+const navigateTo = (path) => {
+  currentPath.value = path
+}
+</script>
+
+<style scoped>
+.nested-routes-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.demo-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.routes-hierarchy {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.tree-view {
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.tree-node {
+  margin: 2px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.node-content:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.node-content.active {
+  background: var(--vp-c-brand-soft);
+  border: 1px solid var(--vp-c-brand);
+}
+
+.node-icon {
+  font-size: 14px;
+}
+
+.node-path {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.node-route {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.render-preview {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.preview-header h5 {
+  margin: 0;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+
+.current-path {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  background: var(--vp-c-bg);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.router-view-hierarchy {
+  padding: 16px;
+  min-height: 200px;
+}
+
+.router-view-level {
+  margin-bottom: 8px;
+}
+
+.router-view-box {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.view-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.view-icon {
+  font-size: 12px;
+}
+
+.view-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.view-path {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-top: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.breadcrumb-item:hover {
+  color: var(--vp-c-brand);
+}
+
+.separator {
+  color: var(--vp-c-text-3);
+  margin: 0 2px;
+}
+
+.code-section {
+  margin-top: 20px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.code-section h5 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.code-block {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .demo-container {
+    grid-template-columns: 1fr;
+  }
+
+  .breadcrumb {
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
new file mode 100644
index 0000000..9f8d4ba
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
@@ -0,0 +1,333 @@
+<template>
+  <div class="route-guards-demo">
+    <div class="demo-header">
+      <h4>路由守卫机制</h4>
+      <p class="demo-desc">了解全局守卫、路由独享守卫和组件内守卫的执行顺序和用途</p>
+    </div>
+
+    <div class="guards-container">
+      <div class="guard-type" v-for="guard in guardTypes" :key="guard.name">
+        <div class="guard-header" :class="guard.type">
+          <span class="guard-icon">{{ guard.icon }}</span>
+          <span class="guard-title">{{ guard.name }}</span>
+        </div>
+        <div class="guard-content">
+          <p class="guard-desc">{{ guard.description }}</p>
+          <div class="guard-example">
+            <code>{{ guard.example }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="execution-flow">
+      <h5>守卫执行顺序</h5>
+      <div class="flow-chart">
+        <div class="flow-step" v-for="(step, index) in executionSteps" :key="index">
+          <div class="step-number">{{ index + 1 }}</div>
+          <div class="step-content">
+            <div class="step-name">{{ step.name }}</div>
+            <div class="step-desc">{{ step.description }}</div>
+          </div>
+          <div v-if="index < executionSteps.length - 1" class="flow-arrow">↓</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const guardTypes = [
+  {
+    name: '全局前置守卫',
+    type: 'global',
+    icon: '🌍',
+    description: '在路由跳转前执行，常用于权限验证、登录检查等',
+    example: `router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth && !isLoggedIn()) {
+    next('/login')
+  } else {
+    next()
+  }
+})`
+  },
+  {
+    name: '全局解析守卫',
+    type: 'global',
+    icon: '🔍',
+    description: '在导航被确认之前、组件内守卫和异步路由组件被解析之后调用',
+    example: `router.beforeResolve((to, from, next) => {
+  // 可以在这里做数据预加载
+  next()
+})`
+  },
+  {
+    name: '全局后置钩子',
+    type: 'global',
+    icon: '✅',
+    description: '在导航完成后执行，不接受 next 函数，不能改变导航',
+    example: `router.afterEach((to, from) => {
+  // 设置页面标题
+  document.title = to.meta.title || '默认标题'
+  // 发送页面浏览统计
+  analytics.track(to.path)
+})`
+  },
+  {
+    name: '路由独享守卫',
+    type: 'route',
+    icon: '🛣️',
+    description: '在单个路由配置中定义，只在进入该路由时触发',
+    example: `{
+  path: '/admin',
+  component: Admin,
+  beforeEnter: (to, from, next) => {
+    if (!isAdmin()) {
+      next('/unauthorized')
+    } else {
+      next()
+    }
+  }
+}`
+  },
+  {
+    name: '组件内守卫',
+    type: 'component',
+    icon: '🔧',
+    description: '在组件内部定义，可以访问组件实例 this',
+    example: `export default {
+  beforeRouteEnter(to, from, next) {
+    // 在渲染该组件的对应路由被验证前调用
+    // 不能获取组件实例 this
+    next(vm => {
+      // 通过 vm 访问组件实例
+    })
+  },
+  beforeRouteUpdate(to, from, next) {
+    // 在当前路由改变，但该组件被复用时调用
+    // 可以访问组件实例 this
+    this.name = to.params.name
+    next()
+  },
+  beforeRouteLeave(to, from, next) {
+    // 在导航离开渲染该组件的对应路由时调用
+    // 可以访问组件实例 this
+    const answer = window.confirm('确定要离开吗？未保存的更改将丢失。')
+    if (answer) {
+      next()
+    } else {
+      next(false)
+    }
+  }
+}`
+  }
+]
+
+const executionSteps = [
+  {
+    name: '导航触发',
+    description: '用户点击链接或调用 router.push()'
+  },
+  {
+    name: '组件内 beforeRouteLeave',
+    description: '在离开的组件中调用，可以取消导航'
+  },
+  {
+    name: '全局 beforeEach',
+    description: '全局前置守卫，常用于权限检查'
+  },
+  {
+    name: '路由独享 beforeEnter',
+    description: '在重用的组件中调用'
+  },
+  {
+    name: '组件内 beforeRouteEnter',
+    description: '在进入新组件前调用，此时组件实例还未创建'
+  },
+  {
+    name: '全局 beforeResolve',
+    description: '在导航被确认前调用，所有组件内守卫和异步组件已解析'
+  },
+  {
+    name: '全局 afterEach',
+    description: '导航完成后调用，常用于页面统计、标题设置'
+  },
+  {
+    name: 'DOM 更新',
+    description: '触发组件更新，渲染新页面'
+  }
+]
+
+const selectedType = ref('global')
+const currentPath = ref('/dashboard')
+</script>
+
+<style scoped>
+.route-guards-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.guards-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.guard-type {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.guard-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-weight: 600;
+  color: white;
+}
+
+.guard-header.global {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.guard-header.route {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.guard-header.component {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.guard-icon {
+  font-size: 18px;
+}
+
+.guard-title {
+  font-size: 14px;
+}
+
+.guard-content {
+  padding: 16px;
+}
+
+.guard-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+
+.guard-example {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 12px;
+  overflow-x: auto;
+}
+
+.guard-example code {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.execution-flow {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.execution-flow h5 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.flow-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.flow-step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.step-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-top: 2px;
+}
+
+.flow-arrow {
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .guards-container {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-step {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
new file mode 100644
index 0000000..a1da6b5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
@@ -0,0 +1,607 @@
+<template>
+  <div class="route-matching-demo">
+    <div class="demo-header">
+      <h4>路由匹配机制</h4>
+      <p class="demo-desc">输入URL路径，查看路由是如何匹配和解析参数的</p>
+    </div>
+
+    <div class="demo-container">
+      <div class="input-section">
+        <div class="input-group">
+          <label>测试路径</label>
+          <div class="path-input-wrapper">
+            <span class="path-prefix">/</span>
+            <input
+              v-model="testPath"
+              type="text"
+              placeholder="user/123/posts"
+              class="path-input"
+              @keyup.enter="testMatch"
+            >
+          </div>
+        </div>
+        <button class="test-btn" @click="testMatch">
+          <span class="btn-icon">▶</span>
+          测试匹配
+        </button>
+      </div>
+
+      <div class="routes-section">
+        <div class="section-header">
+          <h5>已定义的路由</h5>
+          <span class="route-count">{{ routes.length }} 条</span>
+        </div>
+
+        <div class="routes-list">
+          <div
+            v-for="route in routes"
+            :key="route.path"
+            :class="['route-item', { matched: matchedRoute?.path === route.path }]"
+          >
+            <div class="route-path">
+              <span class="route-pattern">{{ route.path }}</span>
+              <span v-if="route.hasParams" class="param-badge">含参数</span>
+            </div>
+            <div class="route-name">{{ route.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="matchResult" class="result-section">
+      <div class="result-header">
+        <h5>匹配结果</h5>
+        <span :class="['match-status', matchResult.matched ? 'success' : 'fail']">
+          {{ matchResult.matched ? '匹配成功' : '无匹配路由' }}
+        </span>
+      </div>
+
+      <div v-if="matchResult.matched" class="match-details">
+        <div class="detail-item">
+          <span class="detail-label">匹配路由</span>
+          <span class="detail-value code">{{ matchResult.route.path }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">路由名称</span>
+          <span class="detail-value">{{ matchResult.route.name }}</span>
+        </div>
+
+        <div v-if="Object.keys(matchResult.params).length > 0" class="params-section">
+          <div class="detail-label">路径参数</div>
+          <div class="params-list">
+            <div
+              v-for="(value, key) in matchResult.params"
+              :key="key"
+              class="param-item"
+            >
+              <span class="param-key">{{ key }}</span>
+              <span class="param-arrow">→</span>
+              <span class="param-value">{{ value }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="no-match">
+        <div class="no-match-icon">❓</div>
+        <p>路径 "{{ testPath }}" 未匹配到任何路由</p>
+        <ul class="suggestions">
+          <li>检查路径拼写是否正确</li>
+          <li>确认路径是否以斜杠开头</li>
+          <li>查看是否缺少必要的参数</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="tips-section">
+      <h5>路由匹配规则速查</h5>
+      <div class="tips-grid">
+        <div class="tip-item">
+          <code>/user</code>
+          <span>精确匹配 /user</span>
+        </div>
+        <div class="tip-item">
+          <code>/user/:id</code>
+          <span>匹配 /user/123，id=123</span>
+        </div>
+        <div class="tip-item">
+          <code>/user/:id?</code>
+          <span>id可选，匹配 /user 或 /user/123</span>
+        </div>
+        <div class="tip-item">
+          <code>/user/:id+</code>
+          <span>匹配一个或多个，如 /user/1/2</span>
+        </div>
+        <div class="tip-item">
+          <code>/user/:id*</code>
+          <span>匹配零个或多个</span>
+        </div>
+        <div class="tip-item">
+          <code>/user(.*)*</code>
+          <span>通配符，匹配任意路径</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const testPath = ref('user/123/posts')
+const matchResult = ref(null)
+const matchedRoute = ref(null)
+
+const routes = [
+  { path: '/', name: '首页', hasParams: false },
+  { path: '/user', name: '用户列表', hasParams: false },
+  { path: '/user/:id', name: '用户详情', hasParams: true },
+  { path: '/user/:id/posts', name: '用户文章', hasParams: true },
+  { path: '/products', name: '产品列表', hasParams: false },
+  { path: '/products/:category/:id', name: '产品详情', hasParams: true },
+  { path: '/search', name: '搜索结果', hasParams: false },
+  { path: '/:path(.*)*', name: '404页面', hasParams: true }
+]
+
+const parsePath = (path) => {
+  // 移除开头的斜杠
+  const cleanPath = path.replace(/^\//, '')
+  return cleanPath.split('/').filter(Boolean)
+}
+
+const matchPath = (routePath, testPath) => {
+  const routeParts = parsePath(routePath)
+  const testParts = parsePath(testPath)
+
+  const params = {}
+
+  for (let i = 0; i < routeParts.length; i++) {
+    const routePart = routeParts[i]
+    const testPart = testParts[i]
+
+    // 通配符匹配
+    if (routePart === '(.*)*' || routePart === ':path(.*)*') {
+      params['pathMatch'] = testParts.slice(i).join('/')
+      return { matched: true, params }
+    }
+
+    // 动态参数匹配
+    if (routePart.startsWith(':')) {
+      const paramName = routePart.replace(/^:/, '').replace(/\?$/, '')
+      const isOptional = routePart.endsWith('?')
+
+      if (testPart !== undefined) {
+        params[paramName] = testPart
+        continue
+      } else if (isOptional) {
+        continue
+      } else {
+        return { matched: false, params: {} }
+      }
+    }
+
+    // 精确匹配
+    if (routePart !== testPart) {
+      return { matched: false, params: {} }
+    }
+  }
+
+  // 检查是否有剩余的测试路径部分（除非是通配符路由）
+  if (testParts.length > routeParts.length) {
+    const lastRoutePart = routeParts[routeParts.length - 1]
+    if (!lastRoutePart || (!lastRoutePart.includes('*') && !lastRoutePart.endsWith('+'))) {
+      return { matched: false, params: {} }
+    }
+  }
+
+  return { matched: true, params }
+}
+
+const testMatch = () => {
+  if (!testPath.value.trim()) {
+    matchResult.value = { matched: false }
+    matchedRoute.value = null
+    return
+  }
+
+  let foundMatch = false
+
+  for (const route of routes) {
+    const { matched, params } = matchPath(route.path, testPath.value)
+
+    if (matched) {
+      matchResult.value = {
+        matched: true,
+        route,
+        params
+      }
+      matchedRoute.value = route
+      foundMatch = true
+      break
+    }
+  }
+
+  if (!foundMatch) {
+    matchResult.value = { matched: false }
+    matchedRoute.value = null
+  }
+}
+
+// 自动测试初始路径
+testMatch()
+</script>
+
+<style scoped>
+.route-matching-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.demo-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.input-section {
+  background: var(--vp-c-bg);
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.input-group {
+  margin-bottom: 16px;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.path-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.path-prefix {
+  padding: 10px 8px 10px 12px;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.path-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 10px 12px 10px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  outline: none;
+}
+
+.test-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.test-btn:hover {
+  background: var(--vp-c-brand-dark);
+}
+
+.btn-icon {
+  font-size: 10px;
+}
+
+.routes-section {
+  background: var(--vp-c-bg);
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-header h5 {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.route-count {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.routes-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.route-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 6px;
+  margin-bottom: 4px;
+  transition: all 0.2s;
+}
+
+.route-item:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.route-item.matched {
+  background: rgba(66, 184, 131, 0.1);
+  border: 1px solid rgba(66, 184, 131, 0.3);
+}
+
+.route-path {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.route-pattern {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+
+.param-badge {
+  font-size: 10px;
+  color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.route-name {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.result-section {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  margin-top: 20px;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.result-header h5 {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.match-status {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.match-status.success {
+  background: rgba(39, 201, 63, 0.15);
+  color: #27c93f;
+}
+
+.match-status.fail {
+  background: rgba(255, 95, 86, 0.15);
+  color: #ff5f56;
+}
+
+.match-details {
+  display: grid;
+  gap: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.detail-label {
+  width: 80px;
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.detail-value.code {
+  font-family: 'Monaco', 'Menlo', monospace;
+  background: var(--vp-c-bg-soft);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.params-section {
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.params-list {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.param-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--vp-c-bg-soft);
+  padding: 6px 12px;
+  border-radius: 6px;
+}
+
+.param-key {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  color: var(--vp-c-brand);
+}
+
+.param-arrow {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.param-value {
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.no-match {
+  text-align: center;
+  padding: 32px;
+}
+
+.no-match-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.no-match p {
+  color: var(--vp-c-text-2);
+  margin-bottom: 16px;
+}
+
+.suggestions {
+  text-align: left;
+  display: inline-block;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+}
+
+.suggestions li {
+  margin: 4px 0;
+}
+
+.tips-section {
+  margin-top: 20px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.tips-section h5 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.tips-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.tip-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.tip-item code {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  color: var(--vp-c-brand);
+  background: transparent;
+  padding: 0;
+}
+
+.tip-item span:last-child {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+@media (max-width: 768px) {
+  .demo-container {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .detail-label {
+    width: auto;
+  }
+
+  .tips-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
new file mode 100644
index 0000000..4ff3f33
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="router-architecture-demo">
+    <div class="demo-header">
+      <h4>前端路由架构</h4>
+      <p class="demo-desc">展示前端路由系统的核心组件和数据流向</p>
+    </div>
+
+    <div class="architecture-diagram">
+      <div class="layer browser-layer">
+        <div class="layer-title">浏览器层</div>
+        <div class="layer-content">
+          <div class="component">URL Bar</div>
+          <div class="component">History API</div>
+          <div class="component">Hash Change</div>
+        </div>
+      </div>
+
+      <div class="arrow down">↓</div>
+
+      <div class="layer router-core">
+        <div class="layer-title">路由核心层</div>
+        <div class="layer-content">
+          <div class="component main">Router Instance</div>
+          <div class="sub-components">
+            <div class="component">Route Matcher</div>
+            <div class="component">History Manager</div>
+            <div class="component">Guard Pipeline</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow down">↓</div>
+
+      <div class="layer component-layer">
+        <div class="layer-title">组件层</div>
+        <div class="layer-content">
+          <div class="component">Router View</div>
+          <div class="component">Router Link</div>
+          <div class="component">Page Components</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.router-architecture-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.architecture-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.layer {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.layer-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.layer-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.component {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.component.main {
+  background: var(--vp-c-brand-soft);
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  font-weight: 500;
+  width: 100%;
+  text-align: center;
+}
+
+.sub-components {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.arrow {
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 16px;
+}
+
+@media (max-width: 768px) {
+  .layer-content {
+    flex-direction: column;
+  }
+
+  .sub-components {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
new file mode 100644
index 0000000..3af6e40
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
@@ -0,0 +1,426 @@
+<template>
+  <div class="routing-modes-demo">
+    <div class="demo-header">
+      <h4>路由模式对比</h4>
+      <p class="demo-desc">点击切换不同路由模式，观察URL变化和浏览器行为</p>
+    </div>
+
+    <div class="mode-selector">
+      <button
+        v-for="mode in modes"
+        :key="mode.key"
+        :class="['mode-btn', { active: currentMode === mode.key }]"
+        @click="switchMode(mode.key)"
+      >
+        <span class="mode-icon">{{ mode.icon }}</span>
+        <span class="mode-name">{{ mode.name }}</span>
+      </button>
+    </div>
+
+    <div class="demo-content">
+      <div class="browser-mockup">
+        <div class="browser-header">
+          <div class="browser-controls">
+            <span class="dot red"></span>
+            <span class="dot yellow"></span>
+            <span class="dot green"></span>
+          </div>
+          <div class="address-bar">
+            <span class="url-protocol">{{ getProtocol() }}</span>
+            <span class="url-host">example.com</span>
+            <span class="url-path">{{ currentPath }}</span>
+            <span v-if="currentMode === 'hash'" class="url-hash">#/home</span>
+          </div>
+        </div>
+        <div class="browser-content">
+          <nav class="nav-menu">
+            <a
+              v-for="item in navItems"
+              :key="item.path"
+              :class="['nav-link', { active: currentPath === item.path }]"
+              @click="navigate(item.path)"
+            >
+              {{ item.name }}
+            </a>
+          </nav>
+          <div class="page-content">
+            <div class="page-header">
+              <h2>{{ getPageTitle() }}</h2>
+            </div>
+            <div class="page-body">
+              <p>{{ getPageContent() }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mode-info">
+        <div class="info-card">
+          <h5>{{ getCurrentMode().name }}</h5>
+          <p class="info-desc">{{ getCurrentMode().description }}</p>
+          <div class="pros-cons">
+            <div class="pros">
+              <h6>优点</h6>
+              <ul>
+                <li v-for="pro in getCurrentMode().pros" :key="pro">{{ pro }}</li>
+              </ul>
+            </div>
+            <div class="cons">
+              <h6>缺点</h6>
+              <ul>
+                <li v-for="con in getCurrentMode().cons" :key="con">{{ con }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentMode = ref('history')
+const currentPath = ref('/home')
+
+const modes = [
+  {
+    key: 'hash',
+    name: 'Hash 模式',
+    icon: '#',
+    description: '使用URL的hash部分（#）来模拟完整URL，当hash改变时不会触发页面刷新。',
+    pros: ['兼容性好，支持IE8+', '无需服务端配置', '部署简单'],
+    cons: ['URL带有#号，不够美观', '部分浏览器分享链接可能丢失hash', 'SEO不友好']
+  },
+  {
+    key: 'history',
+    name: 'History 模式',
+    icon: '/',
+    description: '使用HTML5 History API（pushState/replaceState）来实现无刷新导航。',
+    pros: ['URL美观，没有#号', '更符合用户习惯', 'SEO友好'],
+    cons: ['需要服务端支持', '兼容性要求IE10+', '配置相对复杂']
+  },
+  {
+    key: 'memory',
+    name: 'Memory 模式',
+    icon: 'M',
+    description: '将路由信息保存在内存中，不修改浏览器URL，适用于非浏览器环境。',
+    pros: ['无需浏览器环境', '适用于测试环境', '移动端App内嵌'],
+    cons: ['不支持浏览器刷新', 'URL不会同步', '仅适用于特定场景']
+  }
+]
+
+const navItems = [
+  { name: '首页', path: '/home' },
+  { name: '产品', path: '/products' },
+  { name: '关于', path: '/about' },
+  { name: '用户', path: '/user/profile' }
+]
+
+const switchMode = (mode) => {
+  currentMode.value = mode
+  // 重置路径
+  currentPath.value = '/home'
+}
+
+const navigate = (path) => {
+  currentPath.value = path
+  // 模拟路由切换效果
+  if (currentMode.value === 'history') {
+    // History模式下使用pushState（这里仅模拟）
+    console.log(`pushState: ${path}`)
+  } else if (currentMode.value === 'hash') {
+    // Hash模式下修改hash
+    console.log(`hashchange: #${path}`)
+  }
+}
+
+const getProtocol = () => {
+  return 'https://'
+}
+
+const getCurrentMode = () => {
+  return modes.find(m => m.key === currentMode.value) || modes[0]
+}
+
+const getPageTitle = () => {
+  const item = navItems.find(i => i.path === currentPath.value)
+  return item ? `${item.name}页面` : '首页'
+}
+
+const getPageContent = () => {
+  const contents = {
+    '/home': '欢迎来到首页！这是SPA应用的入口页面，所有导航都在前端完成，无需刷新整个页面。',
+    '/products': '产品列表页面展示了我们的核心产品。你可以在这里浏览、筛选和查看详情。',
+    '/about': '关于我们页面介绍了公司的历史、愿景和团队信息。',
+    '/user/profile': '个人中心页面，显示用户的基本信息、订单历史和设置选项。'
+  }
+  return contents[currentPath.value] || contents['/home']
+}
+</script>
+
+<style scoped>
+.routing-modes-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.mode-selector {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.mode-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.mode-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.mode-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.mode-icon {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.mode-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.demo-content {
+  display: grid;
+  gap: 20px;
+}
+
+.browser-mockup {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.browser-header {
+  background: var(--vp-c-bg-soft);
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.browser-controls {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27c93f; }
+
+.address-bar {
+  flex: 1;
+  background: var(--vp-c-bg);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.url-protocol { color: var(--vp-c-text-3); }
+.url-host { color: var(--vp-c-text-2); }
+.url-path { color: var(--vp-c-brand); font-weight: 500; }
+.url-hash { color: #e06c75; font-weight: 500; }
+
+.browser-content {
+  display: flex;
+  min-height: 200px;
+}
+
+.nav-menu {
+  width: 120px;
+  background: var(--vp-c-bg-soft);
+  padding: 16px 0;
+  border-right: 1px solid var(--vp-c-divider);
+}
+
+.nav-link {
+  display: block;
+  padding: 10px 16px;
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.nav-link:hover {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+
+.nav-link.active {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-right: 2px solid var(--vp-c-brand);
+}
+
+.page-content {
+  flex: 1;
+  padding: 20px;
+}
+
+.page-header h2 {
+  margin: 0 0 12px 0;
+  color: var(--vp-c-text-1);
+  font-size: 20px;
+}
+
+.page-body {
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.mode-info {
+  margin-top: 16px;
+}
+
+.info-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.info-card h5 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+  font-size: 16px;
+}
+
+.info-desc {
+  margin: 0 0 16px 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.pros-cons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.pros, .cons {
+  padding: 12px;
+  border-radius: 6px;
+}
+
+.pros {
+  background: rgba(39, 201, 63, 0.1);
+}
+
+.cons {
+  background: rgba(255, 95, 86, 0.1);
+}
+
+.pros h6, .cons h6 {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.pros h6 {
+  color: #27c93f;
+}
+
+.cons h6 {
+  color: #ff5f56;
+}
+
+.pros ul, .cons ul {
+  margin: 0;
+  padding-left: 16px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.pros li, .cons li {
+  margin: 4px 0;
+}
+
+@media (max-width: 768px) {
+  .mode-selector {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .mode-btn {
+    justify-content: center;
+  }
+
+  .browser-content {
+    flex-direction: column;
+  }
+
+  .nav-menu {
+    width: 100%;
+    display: flex;
+    padding: 8px;
+    border-right: none;
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
+
+  .nav-link {
+    padding: 8px 12px;
+    white-space: nowrap;
+  }
+
+  .pros-cons {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
new file mode 100644
index 0000000..8105bf7
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="spa-navigation-demo">
+    <div class="demo-header">
+      <h4>SPA 导航流程</h4>
+      <p class="demo-desc">完整展示从点击链接到页面更新的全流程</p>
+    </div>
+
+    <div class="flow-container">
+      <div class="step" v-for="(step, index) in steps" :key="index">
+        <div class="step-number">{{ index + 1 }}</div>
+        <div class="step-content">
+          <div class="step-title">{{ step.title }}</div>
+          <div class="step-desc">{{ step.desc }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const steps = [
+  { title: '触发导航', desc: '用户点击链接或调用 router.push()' },
+  { title: '全局前置守卫', desc: '执行 router.beforeEach 钩子' },
+  { title: '解析路由', desc: '匹配路由配置，解析动态参数' },
+  { title: '组件内守卫', desc: '执行 beforeRouteEnter 钩子' },
+  { title: '全局解析守卫', desc: '执行 beforeResolve 钩子' },
+  { title: '更新视图', desc: '渲染匹配的组件，更新 DOM' },
+  { title: '全局后置钩子', desc: '执行 afterEach 钩子' }
+]
+</script>
+
+<style scoped>
+.spa-navigation-demo {
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.demo-desc {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.flow-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  margin-bottom: 2px;
+}
+
+.step-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+@media (max-width: 768px) {
+  .step {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/index.js b/docs/.vitepress/theme/components/appendix/frontend-routing/index.js
new file mode 100644
index 0000000..dd88933
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/index.js
@@ -0,0 +1,10 @@
+// Frontend Routing Components
+export { default as RoutingModesDemo } from './RoutingModesDemo.vue'
+export { default as HashVsHistoryDemo } from './HashVsHistoryDemo.vue'
+export { default as RouteMatchingDemo } from './RouteMatchingDemo.vue'
+export { default as NestedRoutesDemo } from './NestedRoutesDemo.vue'
+export { default as DynamicRoutesDemo } from './DynamicRoutesDemo.vue'
+export { default as RouteGuardsDemo } from './RouteGuardsDemo.vue'
+export { default as SpaNavigationDemo } from './SpaNavigationDemo.vue'
+export { default as MpaRoutingDemo } from './MpaRoutingDemo.vue'
+export { default as RouterArchitectureDemo } from './RouterArchitectureDemo.vue'
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
new file mode 100644
index 0000000..b1d04f2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
@@ -0,0 +1,421 @@
+<!--
+  ApiGatewayDemo.vue
+  API网关架构 - 统一入口/协议转换
+-->
+<template>
+  <div class="api-gateway-demo">
+    <div class="header">
+      <div class="title">🚪 API 网关：系统的"统一大门"</div>
+      <div class="subtitle">想象成写字楼的「前台」——所有访客都要先经过这里，才能到达不同的办公室</div>
+    </div>
+
+    <div class="architecture-view">
+      <div class="layer client-layer">
+        <div class="layer-title">客户端 (来访者)</div>
+        <div class="clients">
+          <div class="client-item">📱 App</div>
+          <div class="client-item">💻 Web</div>
+          <div class="client-item">🔧 第三方</div>
+        </div>
+      </div>
+
+      <div class="arrow-down">⬇️ 统一入口</div>
+
+      <div class="layer gateway-layer">
+        <div class="layer-title">🚪 API 网关 (前台)</div>
+        <div class="gateway-box">
+          <div class="gateway-function" :class="{ active: activeFunc === 'auth' }" @click="setActive('auth')">
+            <span class="func-icon">🔐</span>
+            <span class="func-name">身份认证</span>
+          </div>
+          <div class="gateway-function" :class="{ active: activeFunc === 'rate' }" @click="setActive('rate')">
+            <span class="func-icon">⚡</span>
+            <span class="func-name">限流熔断</span>
+          </div>
+          <div class="gateway-function" :class="{ active: activeFunc === 'route' }" @click="setActive('route')">
+            <span class="func-icon">🧭</span>
+            <span class="func-name">路由转发</span>
+          </div>
+          <div class="gateway-function" :class="{ active: activeFunc === 'transform' }" @click="setActive('transform')">
+            <span class="func-icon">🔄</span>
+            <span class="func-name">协议转换</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">⬇️ 分发请求</div>
+
+      <div class="layer backend-layer">
+        <div class="layer-title">⚙️ 后端服务 (各个部门)</div>
+        <div class="services">
+          <div class="service-card">
+            <div class="service-icon">👤</div>
+            <div class="service-name">用户服务</div>
+            <div class="service-tech">/api/users</div>
+          </div>
+          <div class="service-card">
+            <div class="service-icon">📦</div>
+            <div class="service-name">订单服务</div>
+            <div class="service-tech">/api/orders</div>
+          </div>
+          <div class="service-card">
+            <div class="service-icon">💳</div>
+            <div class="service-name">支付服务</div>
+            <div class="service-tech">/api/pay</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="function-detail" v-if="activeFunc">
+      <div class="detail-header">
+        <span class="detail-icon">{{ currentFunction.icon }}</span>
+        <span class="detail-name">{{ currentFunction.name }}</span>
+      </div>
+      <div class="detail-desc">{{ currentFunction.desc }}</div>
+      <div class="detail-example">
+        <div class="example-title">💡 实际场景</div>
+        <div class="example-content">{{ currentFunction.example }}</div>
+      </div>
+    </div>
+
+    <div class="comparison-table">
+      <div class="table-title">🤔 没有网关 vs 有网关的区别</div>
+      <table>
+        <thead>
+          <tr>
+            <th>功能需求</th>
+            <th>没有网关 (直接访问)</th>
+            <th>有 API 网关</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>身份认证</td>
+            <td>每个服务都要写一遍登录校验</td>
+            <td>✅ 统一在网关层校验 JWT</td>
+          </tr>
+          <tr>
+            <td>限流保护</td>
+            <td>每个服务自己实现限流</td>
+            <td>✅ 网关统一限流，保护后端</td>
+          </tr>
+          <tr>
+            <td>协议转换</td>
+            <td>HTTP、gRPC、WebSocket各自处理</td>
+            <td>✅ 网关统一对外暴露 HTTP</td>
+          </tr>
+          <tr>
+            <td>灰度发布</td>
+            <td>需要改负载均衡器配置</td>
+            <td>✅ 网关层按 Header 路由</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeFunc = ref('auth')
+
+const functions = {
+  auth: {
+    icon: '🔐',
+    name: '身份认证',
+    desc: '统一校验用户身份，无需每个后端服务都写登录逻辑。支持 JWT、OAuth2、API Key 等多种认证方式。',
+    example: '用户请求携带 JWT Token，网关校验签名和过期时间，通过后把用户ID添加到请求头转发给后端服务。'
+  },
+  rate: {
+    icon: '⚡',
+    name: '限流熔断',
+    desc: '防止突发流量压垮后端服务。支持令牌桶、漏桶等算法，超过阈值时自动拒绝或排队。',
+    example: '设置每秒钟最多1000个请求，超过的返回 429 Too Many Requests，保护后端数据库不被打崩。'
+  },
+  route: {
+    icon: '🧭',
+    name: '路由转发',
+    desc: '根据 URL 路径、请求头、Query 参数等规则，将请求转发到不同的后端服务。',
+    example: '/api/users → 用户服务，/api/orders → 订单服务，/api/admin → 管理服务（需管理员权限）。'
+  },
+  transform: {
+    icon: '🔄',
+    name: '协议转换',
+    desc: '对外统一暴露 HTTP/HTTPS，内部可转换为 gRPC、GraphQL、WebSocket 等协议。',
+    example: '客户端用普通 HTTP POST 请求，网关转换为 gRPC 调用内部微服务，返回结果再转成 JSON。'
+  }
+}
+
+const currentFunction = computed(() => functions[activeFunc.value])
+
+const setActive = (func) => {
+  activeFunc.value = func
+}
+</script>
+
+<style scoped>
+.api-gateway-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.mode-selector {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.mode-btn {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.75rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.mode-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.mode-btn.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.architecture-view {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.layer {
+  margin-bottom: 1rem;
+}
+
+.layer-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+}
+
+.clients {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.client-item {
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  border: 2px solid #3b82f6;
+  border-radius: 10px;
+  padding: 0.75rem 1.25rem;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.arrow-down {
+  text-align: center;
+  font-size: 1.5rem;
+  color: var(--vp-c-text-2);
+  margin: 0.5rem 0;
+  font-weight: 600;
+}
+
+.gateway-box {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.gateway-function {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.gateway-function:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.gateway-function.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.func-icon {
+  font-size: 1.5rem;
+}
+
+.func-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.services {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.service-card {
+  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
+  border: 2px solid #a855f7;
+  border-radius: 12px;
+  padding: 1rem 1.5rem;
+  text-align: center;
+  min-width: 100px;
+}
+
+.service-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.service-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+
+.service-tech {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.function-detail {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.detail-icon {
+  font-size: 1.5rem;
+}
+
+.detail-name {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.detail-desc {
+  color: var(--vp-c-text-2);
+  line-height: 1.7;
+  margin-bottom: 1rem;
+}
+
+.detail-example {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.example-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.example-content {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.comparison-table {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.table-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+th {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+}
+
+@media (max-width: 768px) {
+  .gateway-box {
+    grid-template-columns: 1fr;
+  }
+
+  table {
+    font-size: 0.8rem;
+  }
+
+  th, td {
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
new file mode 100644
index 0000000..4d3a481
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
@@ -0,0 +1,686 @@
+<!--
+  AuthMiddlewareDemo.vue
+  认证中间件 - JWT/OAuth/签名验证
+-->
+<template>
+  <div class="auth-middleware-demo">
+    <div class="header">
+      <div class="title">🔐 认证中间件：谁可以进大门？</div>
+      <div class="subtitle">想象成写字楼门禁——检查工牌、验证身份，没权限的人进不来</div>
+    </div>
+
+    <div class="auth-tabs">
+      <button
+        v-for="method in authMethods"
+        :key="method.id"
+        :class="['auth-tab', { active: currentAuth === method.id }]"
+        @click="currentAuth = method.id"
+      >
+        <span class="tab-icon">{{ method.icon }}</span>
+        <span class="tab-name">{{ method.name }}</span>
+      </button>
+    </div>
+
+    <div class="auth-flow">
+      <div class="flow-title">{{ currentAuthData.title }}</div>
+
+      <div class="flow-diagram">
+        <div class="flow-step" v-for="(step, index) in currentAuthData.steps" :key="index">
+          <div class="step-number">{{ index + 1 }}</div>
+          <div class="step-content">
+            <div class="step-actor">{{ step.actor }}</div>
+            <div class="step-action">{{ step.action }}</div>
+            <div class="step-arrow" v-if="index < currentAuthData.steps.length - 1">↓</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="token-display" v-if="currentAuth === 'jwt'">
+        <div class="token-header">🔑 JWT Token 结构（Base64编码）</div>
+        <div class="token-parts">
+          <div class="token-part header">
+            <div class="part-label">HEADER</div>
+            <div class="part-content">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</div>
+            <div class="part-decoded">{ "alg": "HS256", "typ": "JWT" }</div>
+          </div>
+          <div class="token-separator">.</div>
+          <div class="token-part payload">
+            <div class="part-label">PAYLOAD</div>
+            <div class="part-content">eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ</div>
+            <div class="part-decoded">{ "sub": "1234567890", "name": "John Doe", "iat": 1516239022 }</div>
+          </div>
+          <div class="token-separator">.</div>
+          <div class="token-part signature">
+            <div class="part-label">SIGNATURE</div>
+            <div class="part-content">SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</div>
+            <div class="part-decoded">HMACSHA256(base64Url(header) + "." + base64Url(payload), secret)</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="implementation-comparison">
+      <div class="section-title">🛠️ 三种方案实现对比</div>
+
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th>对比维度</th>
+            <th>Session + Cookie</th>
+            <th>JWT</th>
+            <th>OAuth2.0</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="dim">存储位置</td>
+            <td>服务端存储 Session，客户端存 Cookie</td>
+            <td>客户端存储 Token，服务端无状态</td>
+            <td>授权服务器存储，客户端存 Access Token</td>
+          </tr>
+          <tr>
+            <td class="dim">扩展性</td>
+            <td>❌ 需要共享 Session，扩展复杂</td>
+            <td>✅ 无状态，易于水平扩展</td>
+            <td>✅ 分布式架构，支持大规模系统</td>
+          </tr>
+          <tr>
+            <td class="dim">安全性</td>
+            <td>⚠️ Cookie 可能被窃取，需要 CSRF 防护</td>
+            <td>⚠️ Token 泄露风险，需 HTTPS + 短期有效</td>
+            <td>✅ 行业最佳实践，支持多种安全机制</td>
+          </tr>
+          <tr>
+            <td class="dim">实现复杂度</td>
+            <td>🟢 简单，开箱即用</td>
+            <td>🟡 中等，需要 Token 管理</td>
+            <td>🔴 复杂，需要授权服务器</td>
+          </tr>
+          <tr>
+            <td class="dim">适用场景</td>
+            <td>传统 Web 应用、后台管理系统</td>
+            <td>SPA、移动端 API、微服务</td>
+            <td>第三方登录、开放平台、SSO</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="security-tips">
+      <div class="tips-title">🔒 网关层认证最佳实践</div>
+      <div class="tips-list">
+        <div class="tip-item">
+          <div class="tip-icon">1</div>
+          <div class="tip-content">
+            <div class="tip-heading">统一在网关层验证</div>
+            <div class="tip-desc">不要在每个微服务里重复写认证逻辑，统一在网关层校验 JWT 或 Session</div>
+          </div>
+        </div>
+        <div class="tip-item">
+          <div class="tip-icon">2</div>
+          <div class="tip-content">
+            <div class="tip-heading">HTTPS 强制</div>
+            <div class="tip-desc">网关层强制 HTTPS，防止 Token 在传输过程中被窃取（中间人攻击）</div>
+          </div>
+        </div>
+        <div class="tip-item">
+          <div class="tip-icon">3</div>
+          <div class="tip-content">
+            <div class="tip-heading">Token 过期策略</div>
+            <div class="tip-desc">Access Token 短期有效（15分钟），配合 Refresh Token 实现无感知续期</div>
+          </div>
+        </div>
+        <div class="tip-item">
+          <div class="tip-icon">4</div>
+          <div class="tip-content">
+            <div class="tip-heading">黑名单机制</div>
+            <div class="tip-desc">用户登出或 Token 泄露时，将 Token 加入黑名单（Redis 存储）</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentAuth = ref('jwt')
+
+const authMethods = [
+  {
+    id: 'jwt',
+    icon: '🔑',
+    name: 'JWT Token'
+  },
+  {
+    id: 'oauth',
+    icon: '🔐',
+    name: 'OAuth 2.0'
+  },
+  {
+    id: 'signature',
+    icon: '✍️',
+    name: '签名验证'
+  }
+]
+
+const authData = {
+  jwt: {
+    title: 'JWT (JSON Web Token) 认证流程',
+    steps: [
+      { actor: '用户', action: '输入用户名密码，点击登录' },
+      { actor: '网关/Nginx', action: '转发登录请求到认证服务' },
+      { actor: '认证服务', action: '验证密码，生成 JWT Token（包含 Header、Payload、Signature）' },
+      { actor: '用户/客户端', action: '保存 Token（LocalStorage 或 Cookie）' },
+      { actor: '后续请求', action: '在 HTTP Header 中携带: Authorization: Bearer <Token>' },
+      { actor: '网关/Nginx', action: '校验 Token 签名和过期时间，通过后转发请求' },
+      { actor: '后端服务', action: '从 Token 中解析用户信息，处理业务逻辑' }
+    ]
+  },
+  oauth: {
+    title: 'OAuth 2.0 第三方登录流程（以微信登录为例）',
+    steps: [
+      { actor: '用户', action: '点击"微信登录"按钮' },
+      { actor: '我们的应用', action: '重定向到微信授权页面，携带 client_id 和回调地址' },
+      { actor: '微信/授权服务器', action: '展示授权页面，询问用户是否同意' },
+      { actor: '用户', action: '确认授权（或扫码登录）' },
+      { actor: '微信/授权服务器', action: '重定向回我们的应用，携带授权码 Code' },
+      { actor: '我们的后端', action: '用 Code 换取 Access Token（对客户端不可见）' },
+      { actor: '我们的后端', action: '用 Access Token 请求微信用户信息服务' },
+      { actor: '微信/资源服务器', action: '返回用户基本信息（openid, nickname, avatar）' },
+      { actor: '我们的后端', action: '创建/关联本地用户，生成自己的 Session/JWT' },
+      { actor: '用户', action: '登录成功，进入应用首页' }
+    ]
+  },
+  signature: {
+    title: 'API 签名验证流程（常用于开放平台和支付接口）',
+    steps: [
+      { actor: '开发者', action: '在开放平台申请 AppKey 和 AppSecret' },
+      { actor: '发起请求前', action: '将所有参数按字典序排序，拼接成字符串' },
+      { actor: '客户端', action: '用 AppSecret 对字符串进行 HMAC-SHA256 签名' },
+      { actor: '请求参数', action: '携带 AppKey、签名(Sign)、时间戳(Timestamp)、随机数(Nonce)' },
+      { actor: '网关/Nginx', action: '提取 AppKey，查询对应的 AppSecret' },
+      { actor: '网关/Nginx', action: '用同样算法计算签名，对比是否一致' },
+      { actor: '网关/Nginx', action: '检查时间戳（防重放攻击，通常5分钟内有效）' },
+      { actor: '网关/Nginx', action: '检查随机数是否已使用（Redis 存储防重放）' },
+      { actor: '验证通过', action: '转发请求到后端服务' },
+      { actor: '验证失败', action: '返回 401/403，不暴露签名算法细节' }
+    ]
+  }
+}
+
+const currentAuthData = computed(() => authData[currentAuth.value])
+
+// 实现对比数据
+const comparisonData = [
+  {
+    dimension: '存储位置',
+    session: '服务端存储 Session，客户端存 Cookie',
+    jwt: '客户端存储 Token，服务端无状态',
+    oauth: '授权服务器存储，客户端存 Access Token'
+  },
+  {
+    dimension: '扩展性',
+    session: '❌ 需要共享 Session，扩展复杂',
+    jwt: '✅ 无状态，易于水平扩展',
+    oauth: '✅ 分布式架构，支持大规模系统'
+  },
+  {
+    dimension: '安全性',
+    session: '⚠️ Cookie 可能被窃取，需要 CSRF 防护',
+    jwt: '⚠️ Token 泄露风险，需 HTTPS + 短期有效',
+    oauth: '✅ 行业最佳实践，支持多种安全机制'
+  },
+  {
+    dimension: '实现复杂度',
+    session: '🟢 简单，开箱即用',
+    jwt: '🟡 中等，需要 Token 管理',
+    oauth: '🔴 复杂，需要授权服务器'
+  },
+  {
+    dimension: '适用场景',
+    session: '传统 Web 应用、后台管理系统',
+    jwt: 'SPA、移动端 API、微服务',
+    oauth: '第三方登录、开放平台、SSO'
+  }
+]
+
+// Nginx 配置示例
+const nginxConfigs = [
+  {
+    id: 'basic',
+    name: '基础限流',
+    config: `# 定义限流区域
+# $binary_remote_addr: 按 IP 限流
+# zone=mylimit:10m: 区域名称和大小
+# rate=10r/s: 每秒最多10个请求
+limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location / {
+        # 应用限流
+        # burst=20: 桶容量，允许突发20个请求
+        # nodelay: 不延迟处理突发请求
+        limit_req zone=mylimit burst=20 nodelay;
+
+        proxy_pass http://backend;
+    }
+}`,
+    explanation: [
+      'limit_req_zone: 在 http 块中定义限流区域',
+      '$binary_remote_addr: 使用二进制 IP 地址作为限流键（省内存）',
+      'zone=mylimit:10m: 区域名称 mylimit，分配 10MB 内存',
+      'rate=10r/s: 每秒允许 10 个请求（漏桶算法）',
+      'burst=20: 桶的容量为 20，允许一定程度的突发流量',
+      'nodelay: 不延迟处理突发请求（立即处理或拒绝）'
+    ]
+  },
+  {
+    id: 'connection',
+    name: '连接数限制',
+    config: `# 限制并发连接数
+# zone=addr:10m: 区域名称为 addr，大小 10MB
+limit_conn_zone $binary_remote_addr zone=addr:10m;
+
+server {
+    listen 80;
+    server_name download.example.com;
+
+    location / {
+        # 每个 IP 最多 5 个并发连接
+        limit_conn addr 5;
+
+        # 同时应用限流：每秒 1 个请求
+        limit_req zone=mylimit rate=1r/s;
+
+        proxy_pass http://fileserver;
+    }
+}`,
+    explanation: [
+      'limit_conn_zone: 定义连接数限制区域',
+      'limit_conn addr 5: 每个 IP 最多同时保持 5 个连接',
+      '适用于文件下载、视频流媒体等长连接场景',
+      '可以和 limit_req 同时使用（双重保护）',
+      '超过连接数限制时返回 503 Service Unavailable'
+    ]
+  },
+  {
+    id: 'whiteblack',
+    name: '黑白名单',
+    config: `# 白名单 + 限流组合
+# 公司内网 IP 不限流
+geo $limit {
+    default 1;
+    10.0.0.0/8 0;     # 内网网段
+    172.16.0.0/12 0;  # 内网网段
+    192.168.0.0/16 0; # 内网网段
+}
+
+map $limit $limit_key {
+    0 "";
+    1 $binary_remote_addr;
+}
+
+# 只有外网 IP 会触发限流
+limit_req_zone $limit_key zone=sensitive:10m rate=1r/s;
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location /admin {
+        # 管理后台严格限流
+        limit_req zone=sensitive burst=5 nodelay;
+
+        # 拒绝特定 IP
+        deny 1.2.3.4;
+        deny 5.6.7.8;
+
+        proxy_pass http://backend;
+    }
+}`,
+    explanation: [
+      'geo 模块：根据 IP 地址设置变量值',
+      '内网 IP 设置为 0，外网 IP 默认为 1',
+      'map 模块：将 0 映射为空字符串（不限流），1 映射为 IP 地址',
+      '只有外网 IP 会被限流，内网访问畅通无阻',
+      'deny 指令：直接拒绝特定 IP 访问',
+      '适用于管理后台、敏感接口的安全防护'
+    ]
+  }
+]
+
+const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentConfig.value))
+</script>
+
+<style scoped>
+.auth-middleware-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.auth-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.auth-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.auth-tab:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.auth-tab.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.tab-icon {
+  font-size: 2rem;
+}
+
+.tab-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.auth-flow {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.flow-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.flow-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.flow-step {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.step-number {
+  width: 32px;
+  height: 32px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.step-actor {
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.25rem;
+}
+
+.step-action {
+  color: var(--vp-c-text-2);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.step-arrow {
+  text-align: center;
+  font-size: 1.5rem;
+  color: var(--vp-c-text-2);
+  margin: 0.25rem 0;
+}
+
+.token-display {
+  margin-top: 1.5rem;
+  background: #1a1a2e;
+  border-radius: 12px;
+  padding: 1.5rem;
+  color: #eaeaea;
+}
+
+.token-header {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  color: #ffd700;
+}
+
+.token-parts {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.token-part {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.part-label {
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: #ffd700;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+}
+
+.part-content {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: #a78bfa;
+  word-break: break-all;
+  margin-bottom: 0.5rem;
+}
+
+.part-decoded {
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+
+.token-separator {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #ffd700;
+}
+
+.implementation-comparison {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.section-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+  vertical-align: top;
+}
+
+.comparison-table th {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+}
+
+.comparison-table td.dim {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+  white-space: nowrap;
+}
+
+.security-tips {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border: 2px solid #22c55e;
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.tips-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  color: #15803d;
+  text-align: center;
+}
+
+.tips-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tip-item {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid #22c55e;
+}
+
+.tip-icon {
+  width: 32px;
+  height: 32px;
+  background: #22c55e;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.tip-content {
+  flex: 1;
+}
+
+.tip-heading {
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.tip-desc {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .auth-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-step {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .step-content {
+    width: 100%;
+  }
+
+  .token-parts {
+    font-size: 0.75rem;
+  }
+
+  .comparison-table {
+    font-size: 0.75rem;
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
new file mode 100644
index 0000000..53ba406
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
@@ -0,0 +1,854 @@
+<!--
+  LoadBalancingDemo.vue
+  负载均衡 - 轮询/加权/最少连接/IP哈希
+-->
+<template>
+  <div class="load-balancing-demo">
+    <div class="header">
+      <div class="title">⚖️ 负载均衡：把"压力"均匀分摊到多台服务器</div>
+      <div class="subtitle">想象成银行的取号系统——把客户均匀分配到各个窗口，避免某个窗口排长队</div>
+    </div>
+
+    <div class="strategy-selector">
+      <div class="selector-title">选择负载均衡策略</div>
+      <div class="strategy-tabs">
+        <button
+          v-for="strategy in strategies"
+          :key="strategy.id"
+          :class="['strategy-tab', { active: currentStrategy === strategy.id }]"
+          @click="changeStrategy(strategy.id)"
+        >
+          <span class="tab-icon">{{ strategy.icon }}</span>
+          <span class="tab-name">{{ strategy.name }}</span>
+          <span class="tab-badge" v-if="strategy.badge">{{ strategy.badge }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="simulation-area">
+      <div class="sim-header">
+        <div class="sim-title">🎮 负载均衡模拟器</div>
+        <div class="sim-controls">
+          <button class="sim-btn" @click="startSimulation" :disabled="isSimulating">
+            {{ isSimulating ? '运行中...' : '▶ 开始模拟' }}
+          </button>
+          <button class="sim-btn reset" @click="resetSimulation">↺ 重置</button>
+        </div>
+      </div>
+
+      <div class="strategy-explanation">
+        <div class="exp-icon">💡</div>
+        <div class="exp-content">
+          <div class="exp-title">{{ currentStrategyData.name }} - {{ currentStrategyData.shortDesc }}</div>
+          <div class="exp-desc">{{ currentStrategyData.fullDesc }}</div>
+        </div>
+      </div>
+
+      <div class="servers-pool">
+        <div class="pool-header">
+          <div class="pool-title">🏢 后端服务器集群</div>
+          <div class="pool-config">
+            <label>服务器数量:</label>
+            <input type="range" v-model="serverCount" min="2" max="6" :disabled="isSimulating" />
+            <span>{{ serverCount }} 台</span>
+          </div>
+        </div>
+
+        <div class="servers-grid">
+          <div
+            v-for="server in servers"
+            :key="server.id"
+            :class="['server-card', { active: server.active, overloaded: server.load > 80 }]"
+            :style="{ borderColor: server.color }"
+          >
+            <div class="server-header">
+              <div class="server-icon">🖥️</div>
+              <div class="server-name">{{ server.name }}</div>
+              <div class="server-status" :style="{ background: server.color }">
+                {{ server.load }}%
+              </div>
+            </div>
+
+            <div class="server-metrics">
+              <div class="metric">
+                <span class="metric-label">请求数:</span>
+                <span class="metric-value">{{ server.requests }}</span>
+              </div>
+              <div class="metric">
+                <span class="metric-label">权重:</span>
+                <input
+                  v-if="currentStrategy === 'weighted'"
+                  type="number"
+                  v-model.number="server.weight"
+                  min="1"
+                  max="10"
+                  :disabled="isSimulating"
+                  class="weight-input"
+                />
+                <span v-else>{{ server.weight }}</span>
+              </div>
+            </div>
+
+            <div class="load-bar">
+              <div class="load-fill" :style="{ width: server.load + '%', background: server.color }"></div>
+            </div>
+
+            <div class="recent-requests">
+              <div class="req-label">最近请求:</div>
+              <div class="req-list">
+                <span
+                  v-for="(req, idx) in server.recentRequests"
+                  :key="idx"
+                  class="req-badge"
+                  :style="{ background: req.color }"
+                >
+                  {{ req.id }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="request-queue">
+        <div class="queue-header">
+          <div class="queue-title">📨 请求队列</div>
+          <div class="queue-stats">
+            <span>总请求: {{ totalRequests }}</span>
+            <span>待处理: {{ pendingRequests.length }}</span>
+          </div>
+        </div>
+
+        <div class="queue-items">
+          <div
+            v-for="req in displayedRequests"
+            :key="req.id"
+            :class="['queue-item', req.status]"
+          >
+            <span class="req-id">#{{ req.id }}</span>
+            <span class="req-arrow">→</span>
+            <span v-if="req.assignedServer" class="req-target" :style="{ color: req.serverColor }">
+              {{ req.assignedServer }}
+            </span>
+            <span v-else class="req-status">{{ req.statusText }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="strategy-stats">
+        <div class="stats-title">📊 负载分布统计</div>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-value">{{ avgLoad }}%</div>
+            <div class="stat-label">平均负载</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">{{ maxLoad }}%</div>
+            <div class="stat-label">最高负载</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">{{ loadStdDev }}</div>
+            <div class="stat-label">负载标准差</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">{{ mostBusyServer || '-' }}</div>
+            <div class="stat-label">最忙服务器</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, watch } from 'vue'
+
+// 负载均衡策略
+const strategies = [
+  {
+    id: 'roundrobin',
+    icon: '🔄',
+    name: '轮询',
+    badge: '默认',
+    shortDesc: '挨个分发，雨露均沾',
+    fullDesc: '按照服务器列表的顺序，依次将请求分配给每台服务器。就像银行叫号，1号窗口完事了到2号，2号完事了到3号，轮着来。'
+  },
+  {
+    id: 'weighted',
+    icon: '⚖️',
+    name: '加权轮询',
+    badge: '',
+    shortDesc: '性能好的多干活',
+    fullDesc: '给每台服务器设置一个权重值，性能强的服务器权重高，分配到的请求就多。就像团队里能力强的人多分担点任务。'
+  },
+  {
+    id: 'leastconn',
+    icon: '🔌',
+    name: '最少连接',
+    badge: '',
+    shortDesc: '谁闲找谁',
+    fullDesc: '将新请求分配给当前活跃连接数最少的服务器。就像食堂打饭，看哪个窗口排队的人少就去哪个。'
+  },
+  {
+    id: 'iphash',
+    icon: '🔢',
+    name: 'IP 哈希',
+    badge: '',
+    shortDesc: '同一用户永远去同一台',
+    fullDesc: '根据客户端 IP 地址计算哈希值，将同一 IP 的请求永远分配到同一台服务器。适用于需要保持会话状态的场景（如购物车）。'
+  }
+]
+
+const currentStrategy = ref('roundrobin')
+const isSimulating = ref(false)
+const serverCount = ref(4)
+const currentIndex = ref(0)
+
+const currentStrategyData = computed(() => strategies.find(s => s.id === currentStrategy.value))
+
+// 生成服务器列表
+const generateServers = (count) => {
+  const colors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899']
+  const names = ['Server-A', 'Server-B', 'Server-C', 'Server-D', 'Server-E', 'Server-F']
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    name: names[i] || `Server-${i + 1}`,
+    color: colors[i % colors.length],
+    requests: 0,
+    load: Math.floor(Math.random() * 40) + 10,
+    weight: Math.floor(Math.random() * 5) + 1,
+    connections: Math.floor(Math.random() * 20),
+    active: false,
+    recentRequests: []
+  }))
+}
+
+const servers = ref(generateServers(serverCount.value))
+
+// 请求队列
+const requestQueue = ref([])
+const totalRequests = ref(0)
+const pendingRequests = computed(() => requestQueue.value.filter(r => r.status === 'pending'))
+const displayedRequests = computed(() => requestQueue.value.slice(0, 10))
+
+// 选择服务器的算法
+const selectServer = (requestId, clientIP) => {
+  let selectedIndex = 0
+
+  switch (currentStrategy.value) {
+    case 'roundrobin':
+      selectedIndex = currentIndex.value % servers.value.length
+      currentIndex.value++
+      break
+
+    case 'weighted':
+      const totalWeight = servers.value.reduce((sum, s) => sum + s.weight, 0)
+      let random = Math.random() * totalWeight
+      for (let i = 0; i < servers.value.length; i++) {
+        random -= servers.value[i].weight
+        if (random <= 0) {
+          selectedIndex = i
+          break
+        }
+      }
+      break
+
+    case 'leastconn':
+      selectedIndex = servers.value.reduce((minIdx, s, i, arr) =>
+        s.connections < arr[minIdx].connections ? i : minIdx, 0)
+      break
+
+    case 'iphash':
+      const hash = clientIP.split('.').reduce((h, octet) => (h * 31 + parseInt(octet)) & 0xffffffff, 0)
+      selectedIndex = hash % servers.value.length
+      break
+  }
+
+  return servers.value[selectedIndex]
+}
+
+// 模拟请求
+const simulateRequest = async () => {
+  const reqId = totalRequests.value + 1
+  const clientIP = `192.168.1.${Math.floor(Math.random() * 255) + 1}`
+
+  const request = {
+    id: reqId,
+    clientIP,
+    status: 'pending',
+    statusText: '等待分配...',
+    assignedServer: null,
+    serverColor: null
+  }
+
+  requestQueue.value.unshift(request)
+  totalRequests.value++
+
+  // 模拟分配延迟
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  const server = selectServer(reqId, clientIP)
+  request.assignedServer = server.name
+  request.serverColor = server.color
+  request.status = 'assigned'
+  request.statusText = '已分配'
+
+  // 更新服务器状态
+  server.requests++
+  server.connections++
+  server.load = Math.min(100, server.load + Math.floor(Math.random() * 10) + 5)
+  server.active = true
+
+  server.recentRequests.unshift({ id: reqId, color: '#22c55e' })
+  if (server.recentRequests.length > 5) server.recentRequests.pop()
+
+  setTimeout(() => {
+    server.connections = Math.max(0, server.connections - 1)
+    if (server.connections === 0) server.active = false
+  }, 2000)
+}
+
+// 开始模拟
+const startSimulation = async () => {
+  isSimulating.value = true
+
+  for (let i = 0; i < 20; i++) {
+    if (!isSimulating.value) break
+    simulateRequest()
+    await new Promise(resolve => setTimeout(resolve, 400))
+  }
+
+  isSimulating.value = false
+}
+
+// 重置模拟
+const resetSimulation = () => {
+  isSimulating.value = false
+  servers.value = generateServers(serverCount.value)
+  requestQueue.value = []
+  totalRequests.value = 0
+  currentIndex.value = 0
+}
+
+// 切换策略
+const changeStrategy = (id) => {
+  currentStrategy.value = id
+  resetSimulation()
+}
+
+// 统计计算
+const avgLoad = computed(() => {
+  if (servers.value.length === 0) return 0
+  return Math.round(servers.value.reduce((sum, s) => sum + s.load, 0) / servers.value.length)
+})
+
+const maxLoad = computed(() => {
+  if (servers.value.length === 0) return 0
+  return Math.max(...servers.value.map(s => s.load))
+})
+
+const loadStdDev = computed(() => {
+  if (servers.value.length === 0) return 0
+  const avg = avgLoad.value
+  const variance = servers.value.reduce((sum, s) => sum + Math.pow(s.load - avg, 2), 0) / servers.value.length
+  return Math.sqrt(variance).toFixed(1)
+})
+
+const mostBusyServer = computed(() => {
+  if (servers.value.length === 0) return null
+  return servers.value.reduce((max, s) => s.load > max.load ? s : max, servers.value[0]).name
+})
+
+// 监听服务器数量变化
+watch(serverCount, (newVal) => {
+  if (!isSimulating.value) {
+    servers.value = generateServers(newVal)
+  }
+})
+</script>
+
+<style scoped>
+.load-balancing-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.strategy-selector {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.selector-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.strategy-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.strategy-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.strategy-tab:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.strategy-tab.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.tab-icon {
+  font-size: 1.75rem;
+}
+
+.tab-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.tab-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background: #22c55e;
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 0.15rem 0.4rem;
+  border-radius: 999px;
+}
+
+.simulation-area {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.sim-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.sim-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.sim-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.sim-btn {
+  padding: 0.6rem 1.25rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sim-btn:hover:not(:disabled) {
+  background: var(--vp-c-brand-dark);
+  transform: translateY(-1px);
+}
+
+.sim-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sim-btn.reset {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.strategy-explanation {
+  background: linear-gradient(135deg, rgba(var(--vp-c-brand-rgb), 0.1), rgba(var(--vp-c-brand-rgb), 0.05));
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.exp-icon {
+  font-size: 1.5rem;
+}
+
+.exp-content {
+  flex: 1;
+}
+
+.exp-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.exp-desc {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.servers-pool {
+  margin-bottom: 1.5rem;
+}
+
+.pool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.pool-title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.pool-config {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.pool-config input[type="range"] {
+  width: 120px;
+}
+
+.pool-config span {
+  min-width: 50px;
+  font-weight: 600;
+}
+
+.servers-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.server-card {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.server-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.server-card.active {
+  box-shadow: 0 0 0 3px currentColor;
+}
+
+.server-card.overloaded {
+  background: #fef2f2;
+  border-color: #ef4444;
+}
+
+.server-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.server-icon {
+  font-size: 1.25rem;
+}
+
+.server-name {
+  flex: 1;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-status {
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+}
+
+.server-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.metric {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.8rem;
+}
+
+.metric-label {
+  color: var(--vp-c-text-2);
+}
+
+.metric-value {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.weight-input {
+  width: 50px;
+  padding: 0.1rem 0.25rem;
+  font-size: 0.8rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+.load-bar {
+  height: 8px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.load-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.recent-requests {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.req-label {
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+}
+
+.req-list {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.req-badge {
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: white;
+}
+
+.request-queue {
+  background: var(--vp-c-bg-soft);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.queue-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.queue-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.queue-stats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.queue-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.queue-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  background: white;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  border-left: 3px solid var(--vp-c-divider);
+}
+
+.queue-item.pending {
+  border-left-color: #f59e0b;
+  background: #fffbeb;
+}
+
+.queue-item.assigned {
+  border-left-color: #22c55e;
+  background: #f0fdf4;
+}
+
+.req-id {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  min-width: 40px;
+}
+
+.req-arrow {
+  color: var(--vp-c-text-2);
+}
+
+.req-target {
+  font-weight: 700;
+}
+
+.req-status {
+  color: var(--vp-c-text-2);
+  font-style: italic;
+}
+
+.strategy-stats {
+  background: var(--vp-c-bg-soft);
+  border-radius: 10px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stats-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 8px;
+  padding: 0.75rem;
+  text-align: center;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 768px) {
+  .strategy-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .servers-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .server-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
new file mode 100644
index 0000000..15fc53c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
@@ -0,0 +1,522 @@
+<!--
+  NginxArchitectureDemo.vue
+  Nginx架构 - Master-Worker/事件驱动
+-->
+<template>
+  <div class="nginx-architecture-demo">
+    <div class="header">
+      <div class="title">⚡ Nginx 架构揭秘：为什么它能扛住百万并发？</div>
+      <div class="subtitle">Master-Worker 进程模型 + 事件驱动 = 高性能的秘诀</div>
+    </div>
+
+    <div class="architecture-diagram">
+      <div class="diagram-title">Nginx 进程架构图</div>
+
+      <div class="process-layer master-layer">
+        <div class="process master">
+          <div class="process-icon">👑</div>
+          <div class="process-info">
+            <div class="process-name">Master 进程</div>
+            <div class="process-desc">管理所有 Worker，负责配置加载、平滑升级</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="connections">
+        <div class="connection-line" v-for="n in workerCount" :key="n"></div>
+      </div>
+
+      <div class="process-layer worker-layer">
+        <div class="worker-controls">
+          <button class="control-btn" @click="decreaseWorker" :disabled="workerCount <= 1">-</button>
+          <span class="worker-count">{{ workerCount }} 个 Worker</span>
+          <button class="control-btn" @click="increaseWorker" :disabled="workerCount >= 8">+</button>
+        </div>
+
+        <div class="workers">
+          <div
+            class="process worker"
+            v-for="n in workerCount"
+            :key="n"
+            :class="{ active: activeWorker === n, processing: processingWorkers.includes(n) }"
+            @click="activateWorker(n)"
+          >
+            <div class="process-icon">⚙️</div>
+            <div class="process-info">
+              <div class="process-name">Worker {{ n }}</div>
+              <div class="process-desc">处理 {{ requestCounts[n] || 0 }} 请求</div>
+            </div>
+            <div class="status-indicator"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="epoll-layer">
+        <div class="epoll-box">
+          <div class="epoll-title">📡 epoll (Linux) / kqueue (macOS)</div>
+          <div class="epoll-desc">事件驱动：一个 Worker 同时处理数万个连接</div>
+          <div class="epoll-comparison">
+            <div class="compare-item old">
+              <div class="compare-title">传统 Apache</div>
+              <div class="compare-detail">一个连接 = 一个进程/线程</div>
+              <div class="compare-result">❌ C10K 问题</div>
+            </div>
+            <div class="vs">VS</div>
+            <div class="compare-item new">
+              <div class="compare-title">Nginx</div>
+              <div class="compare-detail">事件驱动 + 异步非阻塞</div>
+              <div class="compare-result">✅ 百万并发</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="simulation-panel">
+      <div class="panel-title">🎮 模拟请求处理</div>
+      <div class="sim-controls">
+        <button class="sim-btn" @click="simulateRequests" :disabled="isSimulating">
+          {{ isSimulating ? '处理中...' : '发送 20 个并发请求' }}
+        </button>
+        <button class="sim-btn secondary" @click="resetSimulation">重置</button>
+      </div>
+      <div class="sim-stats" v-if="totalRequests > 0">
+        <div class="stat-item">
+          <div class="stat-value">{{ totalRequests }}</div>
+          <div class="stat-label">总请求数</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ mostActiveWorker }}</div>
+          <div class="stat-label">最忙 Worker</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ avgRequests.toFixed(1) }}</div>
+          <div class="stat-label">平均/Worker</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="config-tip">
+      <div class="tip-title">💡 生产环境建议</div>
+      <div class="tip-content">
+        <strong>Worker 数量 = CPU 核心数</strong>（通常设置为 auto，让 Nginx 自动检测）
+        <br>
+        太多了上下文切换开销大，太少了无法利用多核性能。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const workerCount = ref(4)
+const activeWorker = ref(1)
+const requestCounts = ref({})
+const isSimulating = ref(false)
+const processingWorkers = ref([])
+
+const totalRequests = computed(() => {
+  return Object.values(requestCounts.value).reduce((a, b) => a + b, 0)
+})
+
+const mostActiveWorker = computed(() => {
+  let max = 0
+  let worker = '-'
+  Object.entries(requestCounts.value).forEach(([k, v]) => {
+    if (v > max) {
+      max = v
+      worker = k
+    }
+  })
+  return worker
+})
+
+const avgRequests = computed(() => {
+  if (workerCount.value === 0) return 0
+  return totalRequests.value / workerCount.value
+})
+
+const increaseWorker = () => {
+  if (workerCount.value < 8) {
+    workerCount.value++
+  }
+}
+
+const decreaseWorker = () => {
+  if (workerCount.value > 1) {
+    workerCount.value--
+  }
+}
+
+const activateWorker = (n) => {
+  activeWorker.value = n
+}
+
+const simulateRequests = async () => {
+  isSimulating.value = true
+  const requests = 20
+
+  for (let i = 0; i < requests; i++) {
+    const worker = Math.floor(Math.random() * workerCount.value) + 1
+    processingWorkers.value.push(worker)
+
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    requestCounts.value[worker] = (requestCounts.value[worker] || 0) + 1
+    processingWorkers.value = processingWorkers.value.filter(w => w !== worker)
+  }
+
+  isSimulating.value = false
+}
+
+const resetSimulation = () => {
+  requestCounts.value = {}
+  processingWorkers.value = []
+  isSimulating.value = false
+}
+</script>
+
+<style scoped>
+.nginx-architecture-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.architecture-diagram {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.diagram-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.process-layer {
+  margin-bottom: 1.5rem;
+}
+
+.process {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+.process.master {
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  border: 2px solid #f59e0b;
+}
+
+.process.worker {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  cursor: pointer;
+}
+
+.process.worker:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.process.worker.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.process.worker.processing {
+  animation: pulse 0.5s ease-in-out;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.process-icon {
+  font-size: 2rem;
+}
+
+.process-info {
+  flex: 1;
+}
+
+.process-name {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.process-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.worker-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.control-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  font-weight: 700;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-btn:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+}
+
+.control-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.worker-count {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.workers {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.epoll-layer {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 2px solid var(--vp-c-divider);
+}
+
+.epoll-box {
+  background: linear-gradient(135deg, rgba(var(--vp-c-brand-rgb), 0.1), rgba(var(--vp-c-brand-rgb), 0.05));
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.epoll-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.epoll-desc {
+  color: var(--vp-c-text-2);
+  margin-bottom: 1.5rem;
+}
+
+.epoll-comparison {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.compare-item {
+  background: var(--vp-c-bg);
+  border-radius: 10px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.compare-item.old {
+  border: 2px solid #ef4444;
+}
+
+.compare-item.new {
+  border: 2px solid #22c55e;
+}
+
+.compare-title {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.compare-detail {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.compare-result {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.old .compare-result {
+  color: #ef4444;
+}
+
+.new .compare-result {
+  color: #22c55e;
+}
+
+.vs {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: var(--vp-c-text-2);
+}
+
+.simulation-panel {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.panel-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.sim-controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.sim-btn {
+  padding: 0.75rem 1.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sim-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.3);
+}
+
+.sim-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sim-btn.secondary {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.sim-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.config-tip {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border: 2px solid #22c55e;
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.tip-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.75rem;
+  color: #15803d;
+}
+
+.tip-content {
+  color: var(--vp-c-text-1);
+  line-height: 1.7;
+}
+
+@media (max-width: 768px) {
+  .epoll-comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .vs {
+    text-align: center;
+  }
+
+  .sim-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .workers {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
new file mode 100644
index 0000000..748bc6c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
@@ -0,0 +1,1096 @@
+<!--
+  RateLimitingDemo.vue
+  限流算法 - 令牌桶/漏桶/滑动窗口
+-->
+<template>
+  <div class="rate-limiting-demo">
+    <div class="header">
+      <div class="title">⚡ 限流算法：系统不会被"流量洪水"冲垮的秘诀</div>
+      <div class="subtitle">想象成水坝的闸门——控制水流速度，防止下游被淹没</div>
+    </div>
+
+    <div class="algorithm-selector">
+      <div class="selector-title">选择限流算法</div>
+      <div class="algorithm-tabs">
+        <button
+          v-for="algo in algorithms"
+          :key="algo.id"
+          :class="['algo-tab', { active: currentAlgo === algo.id }]"
+          @click="currentAlgo = algo.id"
+        >
+          <span class="algo-icon">{{ algo.icon }}</span>
+          <span class="algo-name">{{ algo.name }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="visualization-area">
+      <div class="vis-header">
+        <div class="vis-title">{{ currentAlgoData.visualTitle }}</div>
+        <div class="vis-controls">
+          <button class="control-btn" @click="toggleSimulation" :disabled="isSimulating">
+            {{ isSimulating ? '模拟中...' : '▶ 开始模拟' }}
+          </button>
+          <button class="control-btn reset" @click="resetSimulation">↺ 重置</button>
+        </div>
+      </div>
+
+      <!-- 令牌桶可视化 -->
+      <div v-if="currentAlgo === 'token'" class="token-bucket-vis">
+        <div class="bucket-container">
+          <div class="bucket">
+            <div class="bucket-label">令牌桶</div>
+            <div class="tokens-area">
+              <div
+                v-for="n in bucketState.tokens"
+                :key="n"
+                class="token"
+                :style="{ animationDelay: `${n * 0.1}s` }"
+              >🪙</div>
+            </div>
+            <div class="bucket-capacity">{{ bucketState.tokens }} / {{ bucketState.capacity }} 令牌</div>
+          </div>
+          <div class="token-producer">
+            <div class="producer-label">⏰ 令牌产生器 ({{ bucketState.rate }}/秒)</div>
+            <div class="producer-stream">
+              <div
+                v-for="n in 3"
+                :key="n"
+                class="producing-token"
+                :style="{ animationDelay: `${n * 0.3}s` }"
+              >🪙</div>
+            </div>
+          </div>
+        </div>
+        <div class="requests-queue">
+          <div class="queue-title">📥 请求队列</div>
+          <div class="requests">
+            <div
+              v-for="(req, index) in requestQueue"
+              :key="index"
+              class="request-item"
+              :class="{ processing: req.status === 'processing', allowed: req.status === 'allowed', rejected: req.status === 'rejected' }"
+            >
+              <span class="req-method">{{ req.method }}</span>
+              <span class="req-path">{{ req.path }}</span>
+              <span class="req-status">{{ getStatusEmoji(req.status) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 漏桶可视化 -->
+      <div v-if="currentAlgo === 'leaky'" class="leaky-bucket-vis">
+        <div class="leaky-container">
+          <div class="leaky-bucket">
+            <div class="bucket-label">漏桶</div>
+            <div class="bucket-content">
+              <div
+                class="water-level"
+                :style="{ height: `${(leakyState.current / leakyState.capacity) * 100}%` }"
+              ></div>
+            </div>
+            <div class="bucket-stats">{{ leakyState.current }} / {{ leakyState.capacity }} 请求</div>
+          </div>
+          <div class="leak-hole">
+            <div class="hole">🔘</div>
+            <div class="leak-rate">⏱️ 流出速率: {{ leakyState.rate }}/秒</div>
+          </div>
+        </div>
+        <div class="leaky-legend">
+          <div class="legend-item">
+            <span class="legend-color water"></span>
+            <span>桶内请求（排队中）</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-color hole"></span>
+            <span>匀速流出（处理中）</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-color overflow"></span>
+            <span>桶满溢出（被拒绝）</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 滑动窗口可视化 -->
+      <div v-if="currentAlgo === 'sliding'" class="sliding-window-vis">
+        <div class="window-container">
+          <div class="window-label">⏰ 时间窗口（过去1分钟）</div>
+          <div class="window-timeline">
+            <div class="time-marks">
+              <span v-for="n in 6" :key="n">{{ 60 - (n - 1) * 10 }}s</span>
+            </div>
+            <div class="window-bars">
+              <div
+                v-for="(slot, index) in slidingWindow.slots"
+                :key="index"
+                class="time-slot"
+                :class="{ active: slot.count > 0, current: index === slidingWindow.currentSlot }"
+                :style="{ height: `${Math.min((slot.count / 20) * 100, 100)}%` }"
+              >
+                <span class="slot-count" v-if="slot.count > 0">{{ slot.count }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="window-stats">
+            <div class="stat">
+              <span class="stat-label">当前窗口请求数:</span>
+              <span class="stat-value">{{ slidingWindow.totalRequests }}</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">限流阈值:</span>
+              <span class="stat-value">{{ slidingWindow.limit }}/分钟</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">剩余额度:</span>
+              <span class="stat-value" :class="{ warning: slidingWindow.remaining < 20 }">{{ slidingWindow.remaining }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="comparison-section">
+      <div class="section-title">📊 三种算法对比</div>
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th>维度</th>
+            <th>令牌桶 (Token Bucket)</th>
+            <th>漏桶 (Leaky Bucket)</th>
+            <th>滑动窗口 (Sliding Window)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="dim">核心思想</td>
+            <td>桶里装令牌，有令牌才能通过</td>
+            <td>请求进桶，匀速流出处理</td>
+            <td>统计时间窗口内的请求数</td>
+          </tr>
+          <tr>
+            <td class="dim">突发流量</td>
+            <td>✅ 允许一定程度的突发（桶里有令牌）</td>
+            <td>❌ 强制平滑，突发会被缓存或拒绝</td>
+            <td>❌ 严格按窗口计数，超出一律拒绝</td>
+          </tr>
+          <tr>
+            <td class="dim">适用场景</td>
+            <td>API 限流、带宽控制（允许突发）</td>
+            <td>需要严格匀速处理的场景（如消息队列）</td>
+            <td>精确统计（如"1分钟内最多100次"）</td>
+          </tr>
+          <tr>
+            <td class="dim">实现复杂度</td>
+            <td>中等</td>
+            <td>中等</td>
+            <td>较高（需要记录每个时间窗口的请求）</td>
+          </tr>
+          <tr>
+            <td class="dim">Nginx 配置</td>
+            <td>limit_req_zone (漏桶)</td>
+            <td>limit_req_zone (漏桶)</td>
+            <td>需第三方模块或 Lua</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="nginx-config">
+      <div class="config-title">📝 Nginx 限流配置示例</div>
+      <div class="config-tabs">
+        <button
+          v-for="config in nginxConfigs"
+          :key="config.id"
+          :class="['config-tab', { active: currentConfig === config.id }]"
+          @click="currentConfig = config.id"
+        >
+          {{ config.name }}
+        </button>
+      </div>
+      <pre class="config-code"><code>{{ currentNginxConfig.code }}</code></pre>
+      <div class="config-explanation">
+        <div class="exp-title">💡 配置说明</div>
+        <ul>
+          <li v-for="(item, index) in currentNginxConfig.explanation" :key="index">{{ item }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+
+const currentAlgo = ref('token')
+const isMatching = ref(false)
+const isSimulating = ref(false)
+
+const algorithms = [
+  {
+    id: 'token',
+    icon: '🪙',
+    name: '令牌桶',
+    visualTitle: '🪙 令牌桶算法可视化'
+  },
+  {
+    id: 'leaky',
+    icon: '🚿',
+    name: '漏桶',
+    visualTitle: '🚿 漏桶算法可视化'
+  },
+  {
+    id: 'sliding',
+    icon: '📊',
+    name: '滑动窗口',
+    visualTitle: '📊 滑动窗口算法可视化'
+  }
+]
+
+const currentAlgoData = computed(() => algorithms.find(a => a.id === currentAlgo.value))
+
+// 令牌桶状态
+const bucketState = reactive({
+  tokens: 5,
+  capacity: 10,
+  rate: 2,
+  totalRequests: 0
+})
+
+// 请求队列
+const requestQueue = ref([])
+
+// 漏桶状态
+const leakyState = reactive({
+  current: 3,
+  capacity: 8,
+  rate: 1
+})
+
+// 滑动窗口状态
+const slidingWindow = reactive({
+  slots: Array(12).fill(0).map(() => ({ count: Math.floor(Math.random() * 10) })),
+  currentSlot: 11,
+  totalRequests: 45,
+  limit: 100,
+  remaining: 55
+})
+
+const currentConfig = ref('basic')
+
+const nginxConfigs = [
+  {
+    id: 'basic',
+    name: '基础限流',
+    code: `# 定义限流区域
+# $binary_remote_addr: 按 IP 限流
+# zone=mylimit:10m: 区域名称和大小
+# rate=10r/s: 每秒最多10个请求
+limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location / {
+        # 应用限流
+        # burst=20: 桶容量，允许突发20个请求
+        # nodelay: 不延迟处理突发请求
+        limit_req zone=mylimit burst=20 nodelay;
+
+        proxy_pass http://backend;
+    }
+}`,
+    explanation: [
+      'limit_req_zone: 在 http 块中定义限流区域',
+      '$binary_remote_addr: 使用二进制 IP 地址作为限流键（省内存）',
+      'zone=mylimit:10m: 区域名称 mylimit，分配 10MB 内存',
+      'rate=10r/s: 每秒允许 10 个请求（漏桶算法）',
+      'burst=20: 桶的容量为 20，允许一定程度的突发流量',
+      'nodelay: 不延迟处理突发请求（立即处理或拒绝）'
+    ]
+  },
+  {
+    id: 'connection',
+    name: '连接数限制',
+    code: `# 限制并发连接数
+# zone=addr:10m: 区域名称为 addr，大小 10MB
+limit_conn_zone $binary_remote_addr zone=addr:10m;
+
+server {
+    listen 80;
+    server_name download.example.com;
+
+    location / {
+        # 每个 IP 最多 5 个并发连接
+        limit_conn addr 5;
+
+        # 同时应用限流：每秒 1 个请求
+        limit_req zone=mylimit rate=1r/s;
+
+        proxy_pass http://fileserver;
+    }
+}`,
+    explanation: [
+      'limit_conn_zone: 定义连接数限制区域',
+      'limit_conn addr 5: 每个 IP 最多同时保持 5 个连接',
+      '适用于文件下载、视频流媒体等长连接场景',
+      '可以和 limit_req 同时使用（双重保护）',
+      '超过连接数限制时返回 503 Service Unavailable'
+    ]
+  },
+  {
+    id: 'whiteblack',
+    name: '黑白名单',
+    code: `# 白名单 + 限流组合
+# 公司内网 IP 不限流
+geo $limit {
+    default 1;
+    10.0.0.0/8 0;     # 内网网段
+    172.16.0.0/12 0;  # 内网网段
+    192.168.0.0/16 0; # 内网网段
+}
+
+map $limit $limit_key {
+    0 "";
+    1 $binary_remote_addr;
+}
+
+# 只有外网 IP 会触发限流
+limit_req_zone $limit_key zone=sensitive:10m rate=1r/s;
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location /admin {
+        # 管理后台严格限流
+        limit_req zone=sensitive burst=5 nodelay;
+
+        # 拒绝特定 IP
+        deny 1.2.3.4;
+        deny 5.6.7.8;
+
+        proxy_pass http://backend;
+    }
+}`,
+    explanation: [
+      'geo 模块：根据 IP 地址设置变量值',
+      '内网 IP 设置为 0，外网 IP 默认为 1',
+      'map 模块：将 0 映射为空字符串（不限流），1 映射为 IP 地址',
+      '只有外网 IP 会被限流，内网访问畅通无阻',
+      'deny 指令：直接拒绝特定 IP 访问',
+      '适用于管理后台、敏感接口的安全防护'
+    ]
+  }
+]
+
+const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentConfig.value))
+
+const toggleSimulation = async () => {
+  isSimulating.value = true
+
+  // 模拟产生请求
+  for (let i = 0; i < 5; i++) {
+    await new Promise(resolve => setTimeout(resolve, 800))
+
+    const methods = ['GET', 'POST', 'GET', 'GET', 'DELETE']
+    const paths = ['/api/users', '/api/orders', '/api/products', '/health', '/api/pay']
+
+    const newRequest = {
+      id: Date.now() + i,
+      method: methods[Math.floor(Math.random() * methods.length)],
+      path: paths[Math.floor(Math.random() * paths.length)],
+      status: 'processing'
+    }
+
+    requestQueue.value.unshift(newRequest)
+
+    // 模拟处理
+    setTimeout(() => {
+      const req = requestQueue.value.find(r => r.id === newRequest.id)
+      if (req) {
+        if (currentAlgo.value === 'token') {
+          // 令牌桶逻辑
+          if (bucketState.tokens > 0) {
+            bucketState.tokens--
+            req.status = 'allowed'
+            bucketState.totalRequests++
+          } else {
+            req.status = 'rejected'
+          }
+        } else {
+          req.status = Math.random() > 0.3 ? 'allowed' : 'rejected'
+        }
+      }
+    }, 500)
+  }
+
+  isSimulating.value = false
+}
+
+const resetSimulation = () => {
+  requestQueue.value = []
+  bucketState.tokens = 5
+  bucketState.totalRequests = 0
+  leakyState.current = 3
+  isSimulating.value = false
+}
+
+const getStatusEmoji = (status) => {
+  switch (status) {
+    case 'processing': return '⏳'
+    case 'allowed': return '✅'
+    case 'rejected': return '❌'
+    default: return '⏳'
+  }
+}
+
+// 定时补充令牌
+setInterval(() => {
+  if (bucketState.tokens < bucketState.capacity) {
+    bucketState.tokens = Math.min(bucketState.tokens + bucketState.rate, bucketState.capacity)
+  }
+}, 1000)
+
+// 定时漏桶流出
+setInterval(() => {
+  if (leakyState.current > 0) {
+    leakyState.current = Math.max(0, leakyState.current - leakyState.rate)
+  }
+}, 1000)
+</script>
+
+<style scoped>
+.rate-limiting-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.algorithm-selector {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.selector-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.algorithm-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.algo-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.algo-tab:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.algo-tab.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.algo-icon {
+  font-size: 2rem;
+}
+
+.algo-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.visualization-area {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.vis-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.vis-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.vis-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.control-btn {
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-btn:hover:not(:disabled) {
+  background: var(--vp-c-brand-dark);
+}
+
+.control-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.control-btn.reset {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+
+/* 令牌桶可视化 */
+.token-bucket-vis {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1.5rem;
+}
+
+.bucket-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bucket {
+  background: linear-gradient(180deg, #fef3c7, #fde68a);
+  border: 3px solid #f59e0b;
+  border-radius: 12px;
+  padding: 1rem;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.bucket-label {
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 0.5rem;
+  color: #92400e;
+}
+
+.tokens-area {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-content: flex-start;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+}
+
+.token {
+  font-size: 1.5rem;
+  animation: float 2s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.bucket-capacity {
+  text-align: center;
+  font-weight: 600;
+  margin-top: 0.5rem;
+  color: #92400e;
+}
+
+.token-producer {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.producer-label {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.producer-stream {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 30px;
+}
+
+.producing-token {
+  font-size: 1.25rem;
+  animation: drop 1.5s ease-in infinite;
+}
+
+@keyframes drop {
+  0% { transform: translateY(-20px); opacity: 0; }
+  50% { opacity: 1; }
+  100% { transform: translateY(10px); opacity: 0; }
+}
+
+.requests-queue {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.queue-title {
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.requests {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.request-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: white;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  border-left: 3px solid var(--vp-c-divider);
+}
+
+.request-item.processing {
+  border-left-color: #f59e0b;
+  background: #fffbeb;
+}
+
+.request-item.allowed {
+  border-left-color: #22c55e;
+  background: #f0fdf4;
+}
+
+.request-item.rejected {
+  border-left-color: #ef4444;
+  background: #fef2f2;
+}
+
+.req-method {
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  min-width: 50px;
+}
+
+.req-path {
+  flex: 1;
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+.req-status {
+  font-size: 1.1rem;
+}
+
+/* 漏桶可视化 */
+.leaky-bucket-vis {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.leaky-container {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  align-items: flex-end;
+}
+
+.leaky-bucket {
+  width: 200px;
+  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
+  border: 3px solid #3b82f6;
+  border-radius: 12px;
+  padding: 1rem;
+  position: relative;
+}
+
+.bucket-content {
+  height: 150px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.water-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, #60a5fa, #3b82f6);
+  transition: height 0.5s ease;
+}
+
+.leak-hole {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hole {
+  font-size: 3rem;
+  animation: drip 1s ease-in-out infinite;
+}
+
+@keyframes drip {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+.leak-rate {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.leaky-legend {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.legend-color.water {
+  background: #3b82f6;
+}
+
+.legend-color.hole {
+  background: #6b7280;
+}
+
+.legend-color.overflow {
+  background: #ef4444;
+}
+
+/* 滑动窗口可视化 */
+.sliding-window-vis {
+  padding: 1rem;
+}
+
+.window-container {
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 2px solid var(--vp-c-divider);
+}
+
+.window-label {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.window-timeline {
+  margin-bottom: 1.5rem;
+}
+
+.time-marks {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.window-bars {
+  display: flex;
+  gap: 0.25rem;
+  height: 120px;
+  align-items: flex-end;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+}
+
+.time-slot {
+  flex: 1;
+  background: #e5e7eb;
+  border-radius: 4px 4px 0 0;
+  min-height: 5px;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.time-slot.active {
+  background: #3b82f6;
+}
+
+.time-slot.current {
+  box-shadow: 0 0 0 2px #f59e0b;
+}
+
+.slot-count {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.window-stats {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: var(--vp-c-brand);
+}
+
+.stat-value.warning {
+  color: #ef4444;
+}
+
+.comparison-section {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.section-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  overflow-x: auto;
+  display: block;
+}
+
+.comparison-table thead,
+.comparison-table tbody {
+  display: table;
+  width: 100%;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+  vertical-align: top;
+}
+
+.comparison-table th {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+}
+
+.comparison-table td.dim {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+  white-space: nowrap;
+}
+
+.nginx-config {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.config-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.config-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.config-tab {
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.config-tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.config-tab.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.config-code {
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.config-explanation {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.exp-title {
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.config-explanation ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.8;
+}
+
+@media (max-width: 768px) {
+  .algorithm-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .input-section {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-table {
+    font-size: 0.75rem;
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.5rem;
+  }
+
+  .window-bars {
+    height: 80px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
new file mode 100644
index 0000000..6e69baf
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
@@ -0,0 +1,378 @@
+<!--
+  ReverseProxyDemo.vue
+  反向代理原理 - 正向代理 vs 反向代理
+-->
+<template>
+  <div class="reverse-proxy-demo">
+    <div class="header">
+      <div class="title">🔄 反向代理 vs 正向代理</div>
+      <div class="subtitle">一句话区分：正向代理是"客户端的代理"，反向代理是"服务器的代理"</div>
+    </div>
+
+    <div class="mode-selector">
+      <button
+        :class="['mode-btn', { active: mode === 'forward' }]"
+        @click="mode = 'forward'"
+      >
+        🔓 正向代理 (翻墙/隐藏身份)
+      </button>
+      <button
+        :class="['mode-btn', { active: mode === 'reverse' }]"
+        @click="mode = 'reverse'"
+      >
+        🛡️ 反向代理 (负载均衡/安全防护)
+      </button>
+    </div>
+
+    <div class="flow-container">
+      <div class="flow-row" v-if="mode === 'forward'">
+        <div class="flow-card client">
+          <div class="icon">👤</div>
+          <div class="label">用户 (想翻墙)</div>
+        </div>
+        <div class="arrow-box">
+          <div class="arrow">→</div>
+          <div class="note">发给代理</div>
+        </div>
+        <div class="flow-card proxy forward">
+          <div class="icon">🔓</div>
+          <div class="label">正向代理 (VPN/SS)</div>
+          <div class="tag">代理客户端</div>
+        </div>
+        <div class="arrow-box">
+          <div class="arrow">→</div>
+          <div class="note">转发请求</div>
+        </div>
+        <div class="flow-card target">
+          <div class="icon">🌐</div>
+          <div class="label">目标网站 (Google)</div>
+        </div>
+      </div>
+
+      <div class="flow-row" v-if="mode === 'reverse'">
+        <div class="flow-card client">
+          <div class="icon">👤</div>
+          <div class="label">用户 (浏览器)</div>
+        </div>
+        <div class="arrow-box">
+          <div class="arrow">→</div>
+          <div class="note">访问域名</div>
+        </div>
+        <div class="flow-card proxy reverse">
+          <div class="icon">🛡️</div>
+          <div class="label">反向代理 (Nginx)</div>
+          <div class="tag">代理服务器</div>
+        </div>
+        <div class="arrow-box">
+          <div class="arrow">→</div>
+          <div class="note">负载均衡</div>
+        </div>
+        <div class="flow-card server">
+          <div class="icon">⚙️</div>
+          <div class="label">后端服务器集群</div>
+          <div class="sub-label">Web1 | Web2 | Web3</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="detail-section">
+      <div class="detail-card">
+        <div class="detail-title">
+          {{ mode === 'forward' ? '🔓 正向代理特点' : '🛡️ 反向代理特点' }}
+        </div>
+        <ul class="detail-list">
+          <li v-for="(item, index) in currentFeatures" :key="index">{{ item }}</li>
+        </ul>
+      </div>
+      <div class="detail-card">
+        <div class="detail-title">💡 典型使用场景</div>
+        <ul class="detail-list">
+          <li v-for="(item, index) in currentScenarios" :key="index">{{ item }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="memory-trick">
+      <div class="trick-title">🧠 记忆口诀</div>
+      <div class="trick-content">
+        <p v-if="mode === 'forward'">
+          <strong>"正向代理 = 代理客户端"</strong> —— 客户端知情，服务器只知道代理IP
+        </p>
+        <p v-else>
+          <strong>"反向代理 = 代理服务器"</strong> —— 客户端不知道真实服务器，只知道域名
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const mode = ref('reverse')
+
+const forwardFeatures = [
+  '客户端需要主动配置代理服务器地址',
+  '服务端只知道代理IP，不知道真实客户端IP',
+  '主要用于翻墙、隐藏身份、突破网络限制',
+  '典型代表：VPN、Shadowsocks、V2Ray'
+]
+
+const reverseFeatures = [
+  '客户端无感知，只需要访问域名',
+  '隐藏真实服务器架构，统一对外接口',
+  '提供负载均衡、安全防护、SSL卸载等功能',
+  '典型代表：Nginx、HAProxy、AWS ELB'
+]
+
+const forwardScenarios = [
+  '访问被屏蔽的网站（Google、YouTube）',
+  '隐藏真实IP地址，保护个人隐私',
+  '公司内部网络访问外部资源',
+  '爬虫程序使用代理池防止被封IP'
+]
+
+const reverseScenarios = [
+  '网站需要承载高并发流量（负载均衡）',
+  '统一HTTPS证书管理（SSL卸载）',
+  '防护DDoS攻击和SQL注入',
+  '灰度发布、A/B测试、蓝绿部署'
+]
+
+const currentFeatures = computed(() => mode.value === 'forward' ? forwardFeatures : reverseFeatures)
+const currentScenarios = computed(() => mode.value === 'forward' ? forwardScenarios : reverseScenarios)
+</script>
+
+<style scoped>
+.reverse-proxy-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.mode-selector {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.mode-btn {
+  flex: 1;
+  min-width: 200px;
+  padding: 1rem 1.5rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.mode-btn:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.mode-btn.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.flow-container {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.flow-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.flow-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 12px;
+  min-width: 100px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.flow-card.client {
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  border: 2px solid #3b82f6;
+}
+
+.flow-card.proxy {
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  border: 2px solid #f59e0b;
+  position: relative;
+}
+
+.flow-card.proxy.forward {
+  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
+  border-color: #22c55e;
+}
+
+.flow-card.proxy.reverse {
+  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
+  border-color: #ec4899;
+}
+
+.flow-card.target {
+  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
+  border: 2px solid #6366f1;
+}
+
+.flow-card.server {
+  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
+  border: 2px solid #a855f7;
+}
+
+.flow-card .icon {
+  font-size: 2rem;
+}
+
+.flow-card .label {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.flow-card .sub-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.flow-card .tag {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background: var(--vp-c-brand);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.arrow-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-2);
+}
+
+.arrow .miss-text {
+  font-size: 0.75rem;
+  color: #ef4444;
+}
+
+.note {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+.detail-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.detail-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1.25rem;
+}
+
+.detail-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.detail-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  line-height: 1.8;
+}
+
+.memory-trick {
+  background: linear-gradient(135deg, rgba(var(--vp-c-brand-rgb), 0.1), rgba(var(--vp-c-brand-rgb), 0.05));
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  padding: 1.25rem;
+  text-align: center;
+}
+
+.trick-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-brand);
+}
+
+.trick-content {
+  color: var(--vp-c-text-1);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .flow-row {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .detail-section {
+    grid-template-columns: 1fr;
+  }
+
+  .mode-btn {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
new file mode 100644
index 0000000..e9c26ae
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
@@ -0,0 +1,570 @@
+<!--
+  RoutingRulesDemo.vue
+  路由规则 - 路径匹配/重写/转发
+-->
+<template>
+  <div class="routing-rules-demo">
+    <div class="header">
+      <div class="title">🧭 路由规则：如何把请求送到正确的服务？</div>
+      <div class="subtitle">想象成快递分拣中心——根据地址把包裹分配到不同的配送站</div>
+    </div>
+
+    <div class="playground">
+      <div class="playground-header">
+        <div class="playground-title">🎮 路由规则实验室</div>
+        <div class="playground-subtitle">输入一个 URL，看看它会被路由到哪个服务</div>
+      </div>
+
+      <div class="input-section">
+        <div class="input-group">
+          <label>HTTP 方法</label>
+          <select v-model="request.method">
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+            <option value="PUT">PUT</option>
+            <option value="DELETE">DELETE</option>
+          </select>
+        </div>
+        <div class="input-group flex-2">
+          <label>URL 路径</label>
+          <input
+            type="text"
+            v-model="request.path"
+            placeholder="/api/users/123"
+            @keyup.enter="matchRoute"
+          />
+        </div>
+        <div class="input-group">
+          <label>Header (可选)</label>
+          <input
+            type="text"
+            v-model="request.header"
+            placeholder="X-Version: v2"
+          />
+        </div>
+      </div>
+
+      <button class="match-btn" @click="matchRoute" :disabled="isMatching">
+        {{ isMatching ? '匹配中...' : '🔍 开始匹配' }}
+      </button>
+
+      <div class="result-section" v-if="matchResult">
+        <div :class="['result-card', matchResult.found ? 'success' : 'fail']">
+          <div class="result-header">
+            <div class="result-icon">{{ matchResult.found ? '✅' : '❌' }}</div>
+            <div class="result-title">{{ matchResult.found ? '匹配成功' : '未找到匹配规则' }}</div>
+          </div>
+          <div class="result-detail" v-if="matchResult.found">
+            <div class="detail-row">
+              <span class="label">目标服务：</span>
+              <span class="value service">{{ matchResult.service }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">匹配规则：</span>
+              <span class="value">{{ matchResult.rule }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">重写后路径：</span>
+              <span class="value path">{{ matchResult.rewrittenPath }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">目标地址：</span>
+              <span class="value url">{{ matchResult.targetUrl }}</span>
+            </div>
+          </div>
+          <div class="result-suggestion" v-else>
+            <p>💡 建议检查：</p>
+            <ul>
+              <li>路径是否以 /api 开头？</li>
+              <li>HTTP 方法是否匹配？（GET/POST）</li>
+              <li>Header 条件是否满足？</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="rules-table">
+      <div class="table-title">📋 当前路由规则表</div>
+      <table>
+        <thead>
+          <tr>
+            <th>优先级</th>
+            <th>匹配规则</th>
+            <th>目标服务</th>
+            <th>路径重写</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(rule, index) in routingRules" :key="index"
+              :class="{ active: matchResult && matchResult.ruleIndex === index }">
+            <td>{{ index + 1 }}</td>
+            <td><code>{{ rule.match }}</code></td>
+            <td><span class="service-tag">{{ rule.service }}</span></td>
+            <td><code v-if="rule.rewrite">{{ rule.rewrite }}</code><span v-else class="no-rewrite">无</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="quick-presets">
+      <div class="presets-title">🚀 快速测试示例</div>
+      <div class="preset-buttons">
+        <button
+          v-for="preset in presets"
+          :key="preset.name"
+          class="preset-btn"
+          @click="applyPreset(preset)"
+        >
+          {{ preset.name }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const request = reactive({
+  method: 'GET',
+  path: '/api/users/123',
+  header: ''
+})
+
+const isMatching = ref(false)
+const matchResult = ref(null)
+
+const routingRules = [
+  {
+    match: 'Header: X-Version=v2',
+    service: '用户服务V2',
+    rewrite: null
+  },
+  {
+    match: 'Path: /api/users/*',
+    service: '用户服务',
+    rewrite: '/users/*'
+  },
+  {
+    match: 'Path: /api/orders/*',
+    service: '订单服务',
+    rewrite: '/orders/*'
+  },
+  {
+    match: 'Path: /api/pay/*',
+    service: '支付服务',
+    rewrite: '/payments/*'
+  },
+  {
+    match: 'Method: GET, Path: /health',
+    service: '健康检查',
+    rewrite: null
+  }
+]
+
+const presets = [
+  { name: '👤 查询用户', method: 'GET', path: '/api/users/123', header: '' },
+  { name: '📦 创建订单', method: 'POST', path: '/api/orders', header: '' },
+  { name: '💳 发起支付', method: 'POST', path: '/api/pay/checkout', header: '' },
+  { name: '🔍 健康检查', method: 'GET', path: '/health', header: '' },
+  { name: '🆕 V2版本', method: 'GET', path: '/api/users/456', header: 'X-Version: v2' }
+]
+
+const matchRoute = async () => {
+  isMatching.value = true
+  matchResult.value = null
+
+  await new Promise(resolve => setTimeout(resolve, 500))
+
+  const path = request.path
+  const method = request.method
+  const header = request.header
+
+  let found = false
+  let matchedIndex = -1
+  let service = ''
+  let rule = ''
+  let rewrittenPath = path
+  let targetUrl = ''
+
+  if (header.includes('X-Version=v2')) {
+    found = true
+    matchedIndex = 0
+    service = '用户服务V2 (新版本)'
+    rule = 'Header: X-Version=v2'
+    targetUrl = 'http://user-service-v2:8080' + path
+  } else if (path.startsWith('/api/users/')) {
+    found = true
+    matchedIndex = 1
+    service = '用户服务'
+    rule = 'Path: /api/users/*'
+    rewrittenPath = path.replace('/api/users/', '/users/')
+    targetUrl = 'http://user-service:8080' + rewrittenPath
+  } else if (path.startsWith('/api/orders')) {
+    found = true
+    matchedIndex = 2
+    service = '订单服务'
+    rule = 'Path: /api/orders/*'
+    rewrittenPath = path.replace('/api/orders/', '/orders/')
+    targetUrl = 'http://order-service:8080' + rewrittenPath
+  } else if (path.startsWith('/api/pay/')) {
+    found = true
+    matchedIndex = 3
+    service = '支付服务'
+    rule = 'Path: /api/pay/*'
+    rewrittenPath = path.replace('/api/pay/', '/payments/')
+    targetUrl = 'http://payment-service:8080' + rewrittenPath
+  } else if (method === 'GET' && path === '/health') {
+    found = true
+    matchedIndex = 4
+    service = '健康检查'
+    rule = 'Method: GET, Path: /health'
+    targetUrl = 'http://health-check-service:8080/health'
+  }
+
+  matchResult.value = {
+    found,
+    service,
+    rule,
+    ruleIndex: matchedIndex,
+    originalPath: path,
+    rewrittenPath,
+    targetUrl
+  }
+
+  isMatching.value = false
+}
+
+const applyPreset = (preset) => {
+  request.method = preset.method
+  request.path = preset.path
+  request.header = preset.header
+  matchResult.value = null
+}
+</script>
+
+<style scoped>
+.routing-rules-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.playground {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.playground-header {
+  margin-bottom: 1.5rem;
+}
+
+.playground-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.playground-subtitle {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.input-section {
+  display: grid;
+  grid-template-columns: auto 2fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-group.flex-2 {
+  flex: 2;
+}
+
+.input-group label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+}
+
+.input-group input,
+.input-group select {
+  padding: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-size: 0.95rem;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+
+.input-group input:focus,
+.input-group select:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+
+.match-btn {
+  width: 100%;
+  padding: 1rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.match-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.3);
+}
+
+.match-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.result-section {
+  margin-top: 1.5rem;
+}
+
+.result-card {
+  border-radius: 10px;
+  padding: 1.25rem;
+  border: 2px solid;
+}
+
+.result-card.success {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: #22c55e;
+}
+
+.result-card.fail {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: #ef4444;
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.result-icon {
+  font-size: 1.5rem;
+}
+
+.result-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.result-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.detail-row .label {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  min-width: 100px;
+}
+
+.detail-row .value {
+  font-family: monospace;
+  background: var(--vp-c-bg-soft);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.detail-row .value.service {
+  background: rgba(34, 197, 94, 0.2);
+  color: #15803d;
+}
+
+.detail-row .value.path {
+  background: rgba(59, 130, 246, 0.2);
+  color: #1d4ed8;
+}
+
+.detail-row .value.url {
+  background: rgba(168, 85, 247, 0.2);
+  color: #7c3aed;
+}
+
+.result-suggestion {
+  color: var(--vp-c-text-2);
+}
+
+.result-suggestion ul {
+  margin: 0.5rem 0 0 0;
+  padding-left: 1.5rem;
+}
+
+.result-suggestion li {
+  margin: 0.25rem 0;
+}
+
+.rules-table {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.table-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+th {
+  font-weight: 600;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
+tr:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+tr.active {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.service-tag {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+code {
+  font-family: monospace;
+  background: var(--vp-c-bg-soft);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+
+.quick-presets {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.presets-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.preset-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.preset-btn {
+  padding: 0.6rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+}
+
+.preset-btn:hover {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+@media (max-width: 768px) {
+  .input-section {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .detail-row .label {
+    min-width: auto;
+  }
+
+  table {
+    font-size: 0.75rem;
+  }
+
+  th, td {
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
new file mode 100644
index 0000000..264cfdc
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
@@ -0,0 +1,723 @@
+<!--
+  SslTerminationDemo.vue
+  SSL终结 - HTTPS卸载/证书管理
+-->
+<template>
+  <div class="ssl-termination-demo">
+    <div class="header">
+      <div class="title">🔒 SSL 终结：HTTPS 流量的"解密官"</div>
+      <div class="subtitle">想象成公司的前台接待——对外使用正式头衔（HTTPS），对内用内部称呼（HTTP），负责"翻译"身份</div>
+    </div>
+
+    <div class="ssl-flow">
+      <div class="flow-title">🔐 HTTPS 流量解密流程</div>
+
+      <div class="flow-diagram">
+        <!-- 客户端 -->
+        <div class="flow-node client">
+          <div class="node-icon">👤</div>
+          <div class="node-label">客户端 (浏览器)</div>
+          <div class="node-detail">发起 HTTPS 请求</div>
+        </div>
+
+        <div class="flow-arrow encrypted">
+          <div class="arrow-line"></div>
+          <div class="arrow-label">
+            <span class="lock-icon">🔒</span>
+            <span>TLS 加密连接</span>
+          </div>
+          <div class="cert-info">
+            <div class="cert-item"><span class="cert-label">证书:</span> *.example.com</div>
+            <div class="cert-item"><span class="cert-label">算法:</span> TLS 1.3</div>
+            <div class="cert-item"><span class="cert-label">加密:</span> AES-256-GCM</div>
+          </div>
+        </div>
+
+        <!-- Nginx -->
+        <div class="flow-node nginx">
+          <div class="node-icon">🚪</div>
+          <div class="node-label">Nginx (SSL 终结)</div>
+          <div class="node-actions">
+            <div class="action"><span class="action-icon">📜</span> 校验证书</div>
+            <div class="action"><span class="action-icon">🔓</span> 解密流量</div>
+            <div class="action"><span class="action-icon">📝</span> 添加 X-Forwarded-*</div>
+          </div>
+        </div>
+
+        <div class="flow-arrow plain">
+          <div class="arrow-line"></div>
+          <div class="arrow-label">
+            <span class="unlock-icon">🔓</span>
+            <span>HTTP 明文</span>
+          </div>
+          <div class="headers-info">
+            <div class="header-item">X-Forwarded-For: 203.0.113.42</div>
+            <div class="header-item">X-Forwarded-Proto: https</div>
+            <div class="header-item">X-Real-IP: 203.0.113.42</div>
+          </div>
+        </div>
+
+        <!-- 后端服务 -->
+        <div class="flow-node backend">
+          <div class="node-icon">⚙️</div>
+          <div class="node-label">后端服务集群</div>
+          <div class="node-detail">专注于业务逻辑，无需处理 TLS</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cert-management">
+      <div class="section-title">📜 SSL 证书管理</div>
+
+      <div class="cert-tabs">
+        <button
+          v-for="tab in certTabs"
+          :key="tab.id"
+          :class="['cert-tab', { active: currentCertTab === tab.id }]"
+          @click="currentCertTab = tab.id"
+        >
+          {{ tab.name }}
+        </button>
+      </div>
+
+      <div class="cert-content">
+        <!-- 证书申请流程 -->
+        <div v-if="currentCertTab === 'apply'" class="apply-flow">
+          <div class="flow-steps">
+            <div v-for="(step, index) in certSteps" :key="index" class="cert-step">
+              <div class="step-badge">{{ index + 1 }}</div>
+              <div class="step-content">
+                <div class="step-title">{{ step.title }}</div>
+                <div class="step-desc">{{ step.desc }}</div>
+                <div class="step-command" v-if="step.command">
+                  <code>{{ step.command }}</code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Nginx 配置 -->
+        <div v-if="currentCertTab === 'config'" class="nginx-config">
+          <pre class="config-block"><code>server {
+    listen 443 ssl http2;
+    server_name api.example.com;
+
+    # SSL 证书配置
+    ssl_certificate /etc/nginx/ssl/api.example.com.crt;
+    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;
+
+    # SSL 协议和密码套件
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
+    ssl_prefer_server_ciphers off;
+
+    # SSL 会话缓存
+    ssl_session_cache shared:SSL:50m;
+    ssl_session_timeout 1d;
+    ssl_session_tickets off;
+
+    # OCSP Stapling
+    ssl_stapling on;
+    ssl_stapling_verify on;
+    ssl_trusted_certificate /etc/nginx/ssl/chain.crt;
+    resolver 8.8.8.8 8.8.4.4 valid=300s;
+    resolver_timeout 5s;
+
+    # 安全响应头
+    add_header Strict-Transport-Security "max-age=63072000" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+
+    location / {
+        proxy_pass http://backend;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+
+# HTTP 重定向到 HTTPS
+server {
+    listen 80;
+    server_name api.example.com;
+    return 301 https://$server_name$request_uri;
+}</code></pre>
+        </div>
+
+        <!-- 最佳实践 -->
+        <div v-if="currentCertTab === 'bestpractice'" class="best-practices">
+          <div class="practices-grid">
+            <div v-for="practice in bestPractices" :key="practice.id" class="practice-card">
+              <div class="practice-header">
+                <span class="practice-icon">{{ practice.icon }}</span>
+                <span class="practice-title">{{ practice.title }}</span>
+              </div>
+              <div class="practice-content">{{ practice.content }}</div>
+              <div class="practice-code" v-if="practice.code">
+                <code>{{ practice.code }}</code>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="benefits-section">
+      <div class="section-title">✨ SSL 终结的核心优势</div>
+
+      <div class="benefits-grid">
+        <div class="benefit-card">
+          <div class="benefit-icon">🚀</div>
+          <div class="benefit-title">性能提升</div>
+          <div class="benefit-desc">TLS 握手和加密解密是 CPU 密集型操作，集中在 Nginx 处理，后端服务专注业务逻辑，整体吞吐量提升 2-5 倍</div>
+        </div>
+
+        <div class="benefit-card">
+          <div class="benefit-icon">🔧</div>
+          <div class="benefit-title">简化运维</div>
+          <div class="benefit-desc">证书统一管理，只需在 Nginx 配置一次，无需在每个后端服务重复配置，证书续期、更换一键完成</div>
+        </div>
+
+        <div class="benefit-card">
+          <div class="benefit-icon">🛡️</div>
+          <div class="benefit-title">集中安全</div>
+          <div class="benefit-desc">SSL/TLS 配置统一管控，强制使用最新协议版本和密码套件，统一添加安全响应头（HSTS、CSP 等）</div>
+        </div>
+
+        <div class="benefit-card">
+          <div class="benefit-icon">📊</div>
+          <div class="benefit-title">统一监控</div>
+          <div class="benefit-desc">所有 HTTPS 流量经过 Nginx，可以统一记录访问日志、分析 SSL 握手性能、监控证书有效期，便于审计和排障</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+// 证书管理标签
+const certTabs = [
+  { id: 'apply', name: '证书申请' },
+  { id: 'config', name: 'Nginx 配置' },
+  { id: 'bestpractice', name: '最佳实践' }
+]
+
+const currentCertTab = ref('apply')
+
+// 证书申请步骤
+const certSteps = [
+  {
+    title: '生成私钥',
+    desc: '使用 OpenSSL 生成 RSA 私钥，这是证书的基础',
+    command: 'openssl genrsa -out private.key 2048'
+  },
+  {
+    title: '创建 CSR',
+    desc: '生成证书签名请求，包含域名和组织信息',
+    command: 'openssl req -new -key private.key -out csr.pem'
+  },
+  {
+    title: '域名验证',
+    desc: 'CA 机构验证域名所有权（DNS 记录或 HTTP 文件）',
+    command: '# 添加 DNS TXT 记录 或 上传验证文件到 /.well-known/'
+  },
+  {
+    title: '签发证书',
+    desc: '验证通过后，CA 签发证书文件',
+    command: '# 下载 certificate.crt 和 chain.crt'
+  },
+  {
+    title: '部署配置',
+    desc: '将证书配置到 Nginx 并测试',
+    command: 'nginx -t && systemctl reload nginx'
+  }
+]
+
+// 最佳实践
+const bestPractices = [
+  {
+    id: 'protocol',
+    icon: '🔐',
+    title: '使用 TLS 1.2+',
+    content: '禁用 SSLv3、TLS 1.0/1.1 等老旧协议，仅启用 TLS 1.2 和 1.3',
+    code: 'ssl_protocols TLSv1.2 TLSv1.3;'
+  },
+  {
+    id: 'cipher',
+    icon: '🛡️',
+    title: '强密码套件',
+    content: '禁用弱加密算法，优先使用 ECDHE 和 AES-GCM',
+    code: 'ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;'
+  },
+  {
+    id: 'hsts',
+    icon: '🔒',
+    title: 'HSTS 头部',
+    content: '强制浏览器始终使用 HTTPS 访问，防止 SSL 剥离攻击',
+    code: 'add_header Strict-Transport-Security "max-age=63072000" always;'
+  },
+  {
+    id: 'ocsp',
+    icon: '✅',
+    title: 'OCSP Stapling',
+    content: '启用 OCSP 装订，加速 SSL 握手并保护用户隐私',
+    code: 'ssl_stapling on; ssl_stapling_verify on;'
+  }
+]
+</script>
+
+<style scoped>
+.ssl-termination-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.ssl-flow {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.flow-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.flow-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.flow-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  text-align: center;
+}
+
+.flow-node.client {
+  border-color: #3b82f6;
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+}
+
+.flow-node.nginx {
+  border-color: #22c55e;
+  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
+}
+
+.flow-node.backend {
+  border-color: #8b5cf6;
+  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
+}
+
+.node-icon {
+  font-size: 2rem;
+}
+
+.node-label {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.node-detail {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.node-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.action-icon {
+  font-size: 0.9rem;
+}
+
+.flow-arrow {
+  position: relative;
+  padding: 0.5rem 0;
+}
+
+.arrow-line {
+  height: 2px;
+  background: var(--vp-c-divider);
+  position: relative;
+}
+
+.arrow-line::after {
+  content: '▼';
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--vp-c-divider);
+  font-size: 0.75rem;
+}
+
+.flow-arrow.encrypted .arrow-line {
+  background: linear-gradient(90deg, #22c55e, #3b82f6);
+  height: 3px;
+}
+
+.flow-arrow.encrypted .arrow-line::after {
+  color: #22c55e;
+}
+
+.arrow-label {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--vp-c-bg);
+  padding: 0 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.lock-icon {
+  color: #22c55e;
+}
+
+.unlock-icon {
+  color: #f59e0b;
+}
+
+.cert-info,
+.headers-info {
+  position: absolute;
+  top: 15px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.5rem;
+  font-size: 0.7rem;
+  font-family: monospace;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.cert-info {
+  left: 0;
+}
+
+.headers-info {
+  right: 0;
+}
+
+.cert-item,
+.header-item {
+  margin: 0.15rem 0;
+}
+
+.cert-label {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.cert-management {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.section-title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.cert-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding-bottom: 0.5rem;
+}
+
+.cert-tab {
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.cert-tab:hover {
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-soft);
+}
+
+.cert-tab.active {
+  color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.cert-content {
+  min-height: 200px;
+}
+
+.apply-flow {
+  padding: 1rem 0;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cert-step {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  border-radius: 8px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.step-badge {
+  width: 28px;
+  height: 28px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.step-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.step-command {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+}
+
+.nginx-config {
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.config-block {
+  margin: 0;
+  font-family: monospace;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-1);
+  white-space: pre;
+}
+
+.best-practices {
+  padding: 1rem 0;
+}
+
+.practices-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.practice-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.practice-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.practice-icon {
+  font-size: 1.25rem;
+}
+
+.practice-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.practice-content {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+.practice-code {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.benefits-section {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.benefit-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1.25rem;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.benefit-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+.benefit-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.benefit-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.benefit-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .strategy-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .cert-tabs {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .pool-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .servers-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-node {
+    padding: 0.75rem;
+  }
+
+  .cert-info,
+  .headers-info {
+    position: static;
+    margin-top: 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
index 95a13d1..6da41d9 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
@@ -1,333 +1,283 @@
 <template>
-  <div class="diffusion-process-demo">
-    <el-card shadow="never">
-      <template #header>
-        <div class="header-controls">
-          <div class="mode-toggles">
-            <el-radio-group v-model="mode" size="large">
-              <el-radio-button label="forward">
-                <el-icon><TopRight /></el-icon> 加噪 (Forward)
-              </el-radio-button>
-              <el-radio-button label="reverse">
-                <el-icon><BottomLeft /></el-icon> 去噪 (Reverse)
-              </el-radio-button>
-            </el-radio-group>
-          </div>
-          <el-button type="primary" circle @click="togglePlay">
-            <el-icon v-if="isPlaying"><VideoPause /></el-icon>
-            <el-icon v-else><VideoPlay /></el-icon>
-          </el-button>
-        </div>
-      </template>
-
-      <div class="canvas-container">
-        <canvas
-          ref="canvasRef"
-          width="300"
-          height="300"
-          class="noise-canvas"
-        ></canvas>
-        <div class="step-indicator">
-          <span class="step-text"
-            >Step: {{ currentStep }} / {{ totalSteps }}</span
-          >
-          <el-progress
-            :percentage="
-              mode === 'forward'
-                ? (currentStep / totalSteps) * 100
-                : ((totalSteps - currentStep) / totalSteps) * 100
-            "
-            :status="mode === 'forward' ? 'exception' : 'success'"
-            :show-text="false"
-            :stroke-width="4"
-          />
+  <div class="diffusion-magic">
+    <div class="magic-frame">
+      <!-- The Canvas -->
+      <div class="canvas-wrapper">
+        <canvas ref="canvasRef" width="300" height="300"></canvas>
+        
+        <!-- Overlay Status -->
+        <div class="status-overlay" :class="{ visible: isProcessing }">
+          <div class="step-counter">Step {{ currentStep }} / {{ totalSteps }}</div>
+          <div class="step-desc">{{ stepDescription }}</div>
         </div>
       </div>
 
-      <div class="slider-control">
-        <el-slider
-          v-model="currentStep"
-          :min="0"
-          :max="totalSteps"
-          :format-tooltip="formatTooltip"
-          @input="draw"
-        />
-        <div class="slider-labels">
-          <span>{{
-            mode === 'forward' ? '原图 (Original)' : '纯噪声 (Noise)'
-          }}</span>
-          <span>{{
-            mode === 'forward' ? '纯噪声 (Noise)' : '原图 (Original)'
-          }}</span>
-        </div>
+      <!-- Controls -->
+      <div class="controls">
+        <button class="magic-btn" @click="startDenoise" :disabled="isProcessing">
+          <span class="icon">✨</span>
+          {{ isProcessing ? '去噪中...' : '开始去噪 (Denoise)' }}
+        </button>
+        
+        <button class="reset-btn" @click="reset" :disabled="isProcessing">
+          <span class="icon">🔄</span> 重置
+        </button>
       </div>
+    </div>
 
-      <el-alert
-        :title="
-          mode === 'forward' ? '训练阶段：破坏数据' : '生成阶段：创造数据'
-        "
-        :type="mode === 'forward' ? 'warning' : 'success'"
-        :description="
-          mode === 'forward'
-            ? 'AI 通过学习如何「一点点加噪」，掌握了噪声的规律。这就像教它把积木推倒。'
-            : 'AI 通过预测并减去噪声，从混沌中还原出图像。这就像它学会了把推倒的积木重新搭好。'
-        "
-        show-icon
-        :closable="false"
-        class="explanation-alert"
-      />
-    </el-card>
+    <div class="info-bar">
+      <span class="icon">💡</span>
+      <span>
+        <strong>观察重点：</strong>
+        注意看，图像不是一下子变出来的，而是像在雾气中慢慢显影。这就是 Diffusion 的核心——它在不断猜测“噪声背后的真相”。
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onUnmounted } from 'vue'
-import {
-  VideoPlay,
-  VideoPause,
-  TopRight,
-  BottomLeft
-} from '@element-plus/icons-vue'
+import { ref, onMounted, computed } from 'vue'
 
 const canvasRef = ref(null)
-const mode = ref('reverse')
+const isProcessing = ref(false)
 const currentStep = ref(0)
-const totalSteps = 100
-const isPlaying = ref(false)
+const totalSteps = 50
 let animationFrame = null
-let originalImage = null
 
-// Load a base image (using a generated pattern to avoid external dependencies)
-const loadBaseImage = () => {
-  const canvas = document.createElement('canvas')
-  canvas.width = 300
-  canvas.height = 300
-  const ctx = canvas.getContext('2d')
-
-  // Draw a simple landscape
-  // Sky
+// Use a simple gradient pattern as the "Target Image" to avoid external assets
+const drawTargetImage = (ctx) => {
+  // Draw a sunset landscape
   const gradient = ctx.createLinearGradient(0, 0, 0, 300)
-  gradient.addColorStop(0, '#87CEEB')
-  gradient.addColorStop(1, '#E0F7FA')
+  gradient.addColorStop(0, '#2c3e50')
+  gradient.addColorStop(0.5, '#e67e22')
+  gradient.addColorStop(1, '#f1c40f')
   ctx.fillStyle = gradient
   ctx.fillRect(0, 0, 300, 300)
-
-  // Sun
+  
+  // Draw a sun
   ctx.beginPath()
-  ctx.arc(240, 60, 30, 0, Math.PI * 2)
-  ctx.fillStyle = '#FFD700'
+  ctx.arc(150, 200, 60, 0, Math.PI * 2)
+  ctx.fillStyle = '#f39c12'
   ctx.fill()
-
-  // Mountains
+  
+  // Draw mountains
   ctx.beginPath()
   ctx.moveTo(0, 300)
-  ctx.lineTo(100, 150)
+  ctx.lineTo(100, 200)
   ctx.lineTo(200, 250)
-  ctx.lineTo(300, 100)
+  ctx.lineTo(300, 150)
   ctx.lineTo(300, 300)
-  ctx.fillStyle = '#4CAF50'
+  ctx.fillStyle = '#2c3e50'
   ctx.fill()
-
-  // House
-  ctx.fillStyle = '#795548'
-  ctx.fillRect(50, 220, 60, 60)
-  ctx.beginPath()
-  ctx.moveTo(40, 220)
-  ctx.lineTo(80, 180)
-  ctx.lineTo(120, 220)
-  ctx.fillStyle = '#F44336'
-  ctx.fill()
-
-  originalImage = ctx.getImageData(0, 0, 300, 300)
 }
 
-const generateNoise = (width, height) => {
-  const size = width * height * 4
-  const data = new Uint8ClampedArray(size)
-  for (let i = 0; i < size; i += 4) {
-    const val = Math.random() * 255
-    data[i] = val // R
-    data[i + 1] = val // G
-    data[i + 2] = val // B
-    data[i + 3] = 255 // A
+const drawNoise = (ctx, amount) => {
+  const w = 300
+  const h = 300
+  const idata = ctx.getImageData(0, 0, w, h)
+  const buffer = new Uint32Array(idata.data.buffer)
+  
+  // We need to blend the target image with noise based on 'amount' (0 to 1)
+  // But since we can't easily read back the target image every frame efficiently without offscreen canvas,
+  // let's do a simpler trick: Draw target, then draw semi-transparent noise on top.
+  
+  // Actually, let's generate noise overlay.
+  // Amount 1.0 = Full Noise (Opaque)
+  // Amount 0.0 = No Noise (Transparent)
+  
+  // Clear and draw target first
+  drawTargetImage(ctx)
+  
+  if (amount <= 0) return
+
+  const noiseCanvas = document.createElement('canvas')
+  noiseCanvas.width = w
+  noiseCanvas.height = h
+  const nCtx = noiseCanvas.getContext('2d')
+  const nImgData = nCtx.createImageData(w, h)
+  const data = nImgData.data
+  
+  for (let i = 0; i < data.length; i += 4) {
+    const gray = Math.random() * 255
+    data[i] = gray     // R
+    data[i+1] = gray   // G
+    data[i+2] = gray   // B
+    data[i+3] = 255    // Alpha
   }
-  return new ImageData(data, width, height)
+  nCtx.putImageData(nImgData, 0, 0)
+  
+  ctx.globalAlpha = amount
+  ctx.drawImage(noiseCanvas, 0, 0)
+  ctx.globalAlpha = 1.0
 }
 
-// Pre-generate noise to keep it consistent
-let noiseImage = null
+const stepDescription = computed(() => {
+  if (currentStep.value === 0) return '纯噪声 (Pure Noise)'
+  if (currentStep.value < 10) return '隐约出现轮廓...'
+  if (currentStep.value < 30) return '色彩开始浮现...'
+  if (currentStep.value < 50) return '细节逐渐清晰...'
+  return '生成完成 (Done)!'
+})
+
+const startDenoise = () => {
+  if (isProcessing.value) return
+  isProcessing.value = true
+  currentStep.value = 0
+  
+  const animate = () => {
+    if (currentStep.value >= totalSteps) {
+      isProcessing.value = false
+      return
+    }
+    
+    currentStep.value++
+    const noiseLevel = 1 - (currentStep.value / totalSteps)
+    // Non-linear ease out for better visual
+    const visualNoise = Math.pow(noiseLevel, 1.5) 
+    
+    const ctx = canvasRef.value.getContext('2d')
+    drawNoise(ctx, visualNoise)
+    
+    animationFrame = requestAnimationFrame(animate)
+  }
+  
+  animate()
+}
+
+const reset = () => {
+  if (animationFrame) cancelAnimationFrame(animationFrame)
+  isProcessing.value = false
+  currentStep.value = 0
+  const ctx = canvasRef.value.getContext('2d')
+  drawNoise(ctx, 1.0)
+}
 
 onMounted(() => {
-  loadBaseImage()
-  noiseImage = generateNoise(300, 300)
-  // Always start from step 0 (Start of the process)
-  // Forward: Step 0 = Clean Image
-  // Reverse: Step 0 = Noisy Image
-  currentStep.value = 0
-  draw()
+  reset()
 })
-
-onUnmounted(() => {
-  stopAnimation()
-})
-
-const draw = () => {
-  const canvas = canvasRef.value
-  if (!canvas || !originalImage) return
-  const ctx = canvas.getContext('2d')
-
-  // Calculate noise ratio based on mode and step
-  // Forward: 0 -> 100 (Clean -> Noisy)
-  // Reverse: 100 -> 0 (Noisy -> Clean)
-  // But wait, the slider is just "Progress".
-  // Let's define currentStep as "Amount of Noise" for simplicity in logic,
-  // but for UI, we want:
-  // Forward Mode: Slider 0 (Clean) -> 100 (Noisy)
-  // Reverse Mode: Slider 0 (Noisy) -> 100 (Clean)
-
-  let noiseRatio = 0
-  if (mode.value === 'forward') {
-    noiseRatio = currentStep.value / totalSteps
-  } else {
-    // In reverse mode, slider 0 means start (Noisy), 100 means end (Clean)
-    // So noise amount is 1 - slider
-    noiseRatio = 1 - currentStep.value / totalSteps
-  }
-
-  // Non-linear interpolation for better visual effect
-  // noiseRatio = Math.pow(noiseRatio, 1.5)
-
-  const w = canvas.width
-  const h = canvas.height
-  const output = ctx.createImageData(w, h)
-  const d = output.data
-  const o = originalImage.data
-  const n = noiseImage.data
-
-  for (let i = 0; i < d.length; i += 4) {
-    // Simple linear interpolation
-    // Pixel = (1 - alpha) * Original + alpha * Noise
-    // Note: This is a simplified diffusion visualization.
-    // Real diffusion adds noise: x_t = sqrt(alpha_bar) * x_0 + sqrt(1 - alpha_bar) * epsilon
-
-    // Using simple blending for visualization
-    d[i] = o[i] * (1 - noiseRatio) + n[i] * noiseRatio
-    d[i + 1] = o[i + 1] * (1 - noiseRatio) + n[i + 1] * noiseRatio
-    d[i + 2] = o[i + 2] * (1 - noiseRatio) + n[i + 2] * noiseRatio
-    d[i + 3] = 255
-  }
-
-  ctx.putImageData(output, 0, 0)
-}
-
-const togglePlay = () => {
-  if (isPlaying.value) {
-    stopAnimation()
-  } else {
-    startAnimation()
-  }
-}
-
-const startAnimation = () => {
-  isPlaying.value = true
-  // Reset if at end
-  if (currentStep.value >= totalSteps) {
-    currentStep.value = 0
-  }
-
-  const animate = () => {
-    if (currentStep.value < totalSteps) {
-      currentStep.value += 1
-      draw()
-      animationFrame = requestAnimationFrame(animate)
-    } else {
-      stopAnimation()
-    }
-  }
-  animationFrame = requestAnimationFrame(animate)
-}
-
-const stopAnimation = () => {
-  isPlaying.value = false
-  if (animationFrame) {
-    cancelAnimationFrame(animationFrame)
-    animationFrame = null
-  }
-}
-
-watch(mode, () => {
-  stopAnimation()
-  currentStep.value = 0
-  draw()
-})
-
-const formatTooltip = (val) => {
-  return `Step ${val}`
-}
 </script>
 
 <style scoped>
-.diffusion-process-demo {
+.diffusion-magic {
   margin: 20px 0;
+  max-width: 400px; /* Compact width */
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--vp-font-family-base);
 }
 
-.header-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.magic-frame {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 }
 
-.canvas-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 20px 0;
+.canvas-wrapper {
   position: relative;
-}
-
-.noise-canvas {
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  height: auto;
-}
-
-.step-indicator {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.8);
-  padding: 5px 15px;
-  border-radius: 20px;
-  font-size: 0.8em;
-  font-weight: bold;
-  backdrop-filter: blur(4px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  width: 80%;
-}
-
-.step-indicator .el-progress {
   width: 100%;
+  padding-bottom: 100%; /* Square aspect ratio */
+  background: #000;
 }
 
-.slider-control {
-  padding: 0 20px;
-  margin-bottom: 20px;
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
 }
 
-.slider-labels {
+.status-overlay {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: #fff;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.status-overlay.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.step-counter {
+  font-size: 10px;
+  opacity: 0.8;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.step-desc {
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 2px;
+}
+
+.controls {
+  padding: 16px;
   display: flex;
-  justify-content: space-between;
-  font-size: 0.8em;
-  color: var(--el-text-color-secondary);
-  margin-top: -10px;
+  gap: 12px;
+  background: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
 }
 
-.explanation-alert {
-  margin-top: 20px;
+button {
+  flex: 1;
+  border: none;
+  padding: 10px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.magic-btn {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.magic-btn:hover:not(:disabled) {
+  background: var(--vp-c-brand-dark);
+}
+
+.magic-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.reset-btn {
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+  flex: 0.4;
+}
+
+.reset-btn:hover:not(:disabled) {
+  background: var(--vp-c-bg-mute);
+}
+
+.info-bar {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 8px;
+  line-height: 1.4;
+  padding: 0 8px;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
index 28ace48..be2e83d 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
@@ -1,364 +1,306 @@
 <template>
   <div class="flow-matching-demo">
-    <el-card shadow="never">
+    <div class="demo-card">
       <div class="controls">
-        <el-button type="primary" @click="startAnimation" :disabled="isPlaying">
-          <el-icon><VideoPlay /></el-icon> 开始对比演示 (Start Demo)
-        </el-button>
+        <button class="play-btn" @click="startRace" :disabled="isPlaying">
+          <span class="icon">{{ isPlaying ? 'Running...' : '🚀 开始比赛 (Start Race)' }}</span>
+        </button>
       </div>
 
-      <div class="comparison-grid">
-        <!-- Diffusion -->
-        <div class="viz-panel">
-          <div class="panel-header">
-            <el-icon color="#F56C6C"><RefreshLeft /></el-icon>
-            <span>Diffusion (扩散模型)</span>
+      <div class="track-container">
+        <!-- Track 1: Diffusion -->
+        <div class="track">
+          <div class="track-info">
+            <span class="track-name">Diffusion (迷宫模式)</span>
+            <span class="step-count">{{ diffSteps }} Steps</span>
           </div>
           <div class="canvas-wrapper">
-            <canvas ref="diffCanvasRef" width="300" height="200"></canvas>
-            <div class="labels">
-              <span class="label-noise">噪声 (Noise)</span>
-              <span class="label-img">图像 (Image)</span>
-            </div>
-          </div>
-          <div class="stats-box">
-            <el-statistic title="步数 (Steps)" :value="diffSteps" />
-            <el-tag type="danger">路径弯曲 (Curved)</el-tag>
+            <canvas ref="diffCanvasRef" width="400" height="100"></canvas>
+            <div class="marker start">噪声</div>
+            <div class="marker end">图像</div>
           </div>
         </div>
 
-        <!-- Flow Matching -->
-        <div class="viz-panel">
-          <div class="panel-header">
-            <el-icon color="#67C23A"><Right /></el-icon>
-            <span>Flow Matching (流匹配)</span>
+        <!-- Track 2: Flow Matching -->
+        <div class="track">
+          <div class="track-info">
+            <span class="track-name">Flow Matching (直通模式)</span>
+            <span class="step-count highlight">{{ flowSteps }} Steps</span>
           </div>
           <div class="canvas-wrapper">
-            <canvas ref="flowCanvasRef" width="300" height="200"></canvas>
-            <div class="labels">
-              <span class="label-noise">噪声 (Noise)</span>
-              <span class="label-img">图像 (Image)</span>
-            </div>
-          </div>
-          <div class="stats-box">
-            <el-statistic title="步数 (Steps)" :value="flowSteps" />
-            <el-tag type="success">路径直线 (Straight)</el-tag>
+            <canvas ref="flowCanvasRef" width="400" height="100"></canvas>
+            <div class="marker start">噪声</div>
+            <div class="marker end">图像</div>
           </div>
         </div>
       </div>
+    </div>
 
-      <el-divider />
-
-      <el-alert
-        title="为什么 Flow Matching 更快？"
-        type="success"
-        :closable="false"
-        show-icon
-      >
-        <template #default>
-          <p>
-            <strong>Diffusion</strong>
-            就像在迷雾中摸索，路径充满了随机性，需要走很多弯路（步数多）才能到达终点。
-            <br />
-            <strong>Flow Matching</strong> 就像使用了 GPS
-            导航，直接找到了从噪声到图像的<strong
-              >直线最优路径 (Optimal Transport)</strong
-            >，因此只需要极少的步数。
-          </p>
-        </template>
-      </el-alert>
-    </el-card>
+    <div class="info-bar">
+      <span class="icon">💡</span>
+      <span>
+        <strong>核心区别：</strong>
+        Diffusion 就像在走迷宫，虽然也能到终点，但绕了很多弯路（步数多）。Flow Matching 则是直接修了一条直线高速公路，所以 8 步就能走完别人 50 步的路。
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { VideoPlay, RefreshLeft, Right } from '@element-plus/icons-vue'
 
 const diffCanvasRef = ref(null)
 const flowCanvasRef = ref(null)
 const isPlaying = ref(false)
 const diffSteps = ref(0)
 const flowSteps = ref(0)
+let animationId = null
 
-let animationFrame = null
+// Constants
+const TARGET_STEPS_DIFF = 50
+const TARGET_STEPS_FLOW = 8
+const DURATION = 3000 // 3 seconds for the whole race
 
-// Animation State
-let diffProgress = 0
-let flowProgress = 0
-const diffSpeed = 0.005 // Slow
-const flowSpeed = 0.02 // Fast
+// Particles state
+let particles = []
+const NUM_PARTICLES = 5
 
-// Particles
-const particles = []
-
-onMounted(() => {
-  drawStatic(diffCanvasRef.value, 'curve')
-  drawStatic(flowCanvasRef.value, 'line')
-})
-
-onUnmounted(() => {
-  stopAnimation()
-})
-
-const startAnimation = () => {
-  if (isPlaying.value) return
-  isPlaying.value = true
-  diffProgress = 0
-  flowProgress = 0
-  diffSteps.value = 0
-  flowSteps.value = 0
-
-  animate()
-}
-
-const stopAnimation = () => {
-  isPlaying.value = false
-  if (animationFrame) {
-    cancelAnimationFrame(animationFrame)
-    animationFrame = null
-  }
-}
-
-const animate = () => {
-  let finished = 0
-
-  // Update Diffusion
-  if (diffProgress < 1) {
-    diffProgress += diffSpeed
-    diffSteps.value = Math.floor(diffProgress * 50) // Simulate 50 steps
-    drawFrame(diffCanvasRef.value, diffProgress, 'curve')
-  } else {
-    diffSteps.value = 50
-    drawFrame(diffCanvasRef.value, 1, 'curve')
-    finished++
+class Particle {
+  constructor(type) {
+    this.type = type // 'diff' or 'flow'
+    this.progress = 0
+    this.path = []
+    this.noiseOffset = Math.random() * 1000
+    this.yOffset = (Math.random() - 0.5) * 60 // Spread vertically
   }
 
-  // Update Flow
-  if (flowProgress < 1) {
-    flowProgress += flowSpeed
-    flowSteps.value = Math.floor(flowProgress * 8) // Simulate 8 steps
-    drawFrame(flowCanvasRef.value, flowProgress, 'line')
-  } else {
-    flowSteps.value = 8
-    drawFrame(flowCanvasRef.value, 1, 'line')
-    finished++
+  update(dt) {
+    // Speed varies: Flow is faster because it covers distance in fewer steps? 
+    // Actually, let's make them finish at the same TIME, but show the path difference.
+    // Or make Flow finish faster. Let's make Flow finish faster.
+    
+    const speed = this.type === 'flow' ? 0.8 : 0.3
+    this.progress += speed * dt
+    
+    if (this.progress > 1) this.progress = 1
+    
+    // Calculate Position
+    const startX = 20
+    const endX = 380
+    const startY = 50 + this.yOffset
+    const endY = 50
+    
+    // Linear interpolation base
+    let x = startX + (endX - startX) * this.progress
+    let y = startY + (endY - startY) * this.progress
+    
+    if (this.type === 'diff') {
+      // Add noise to path
+      if (this.progress < 1) {
+        const noise = Math.sin(this.progress * 20 + this.noiseOffset) * 30 * (1 - this.progress)
+        y += noise
+      }
+    }
+    
+    this.path.push({x, y})
+    return {x, y}
   }
 
-  if (finished < 2) {
-    animationFrame = requestAnimationFrame(animate)
-  } else {
-    isPlaying.value = false
-  }
-}
-
-const drawStatic = (canvas, type) => {
-  if (!canvas) return
-  const ctx = canvas.getContext('2d')
-  const w = canvas.width
-  const h = canvas.height
-
-  ctx.clearRect(0, 0, w, h)
-  drawBackground(ctx, w, h)
-  drawPath(ctx, w, h, type, false)
-  drawEndpoints(ctx, w, h)
-}
-
-const drawFrame = (canvas, progress, type) => {
-  if (!canvas) return
-  const ctx = canvas.getContext('2d')
-  const w = canvas.width
-  const h = canvas.height
-
-  ctx.clearRect(0, 0, w, h)
-  drawBackground(ctx, w, h)
-  drawPath(ctx, w, h, type, true) // active path
-  drawEndpoints(ctx, w, h)
-
-  // Draw Particle
-  const pos = getPosition(progress, type, w, h)
-
-  // Draw Trail
-  ctx.beginPath()
-  if (type === 'curve') {
-    ctx.moveTo(30, h - 30)
-    // Re-calculate curve up to progress
-    for (let t = 0; t <= progress; t += 0.01) {
-      const p = getPosition(t, type, w, h)
+  draw(ctx) {
+    ctx.beginPath()
+    ctx.moveTo(this.path[0].x, this.path[0].y)
+    for (let p of this.path) {
       ctx.lineTo(p.x, p.y)
     }
-  } else {
-    ctx.moveTo(30, h - 30)
-    ctx.lineTo(pos.x, pos.y)
+    ctx.strokeStyle = this.type === 'flow' ? '#10b981' : '#f43f5e'
+    ctx.lineWidth = 2
+    ctx.stroke()
+    
+    const current = this.path[this.path.length - 1]
+    ctx.beginPath()
+    ctx.arc(current.x, current.y, 4, 0, Math.PI * 2)
+    ctx.fillStyle = this.type === 'flow' ? '#10b981' : '#f43f5e'
+    ctx.fill()
   }
-  ctx.strokeStyle = type === 'curve' ? '#F56C6C' : '#67C23A'
-  ctx.lineWidth = 3
-  ctx.stroke()
-
-  // Draw Head
-  ctx.beginPath()
-  ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2)
-  ctx.fillStyle = type === 'curve' ? '#F56C6C' : '#67C23A'
-  ctx.fill()
-  ctx.strokeStyle = '#fff'
-  ctx.lineWidth = 2
-  ctx.stroke()
 }
 
-const drawBackground = (ctx, w, h) => {
-  ctx.fillStyle = '#f9f9f9' // Light bg
-  // Grid
-  ctx.strokeStyle = '#eee'
+const startRace = () => {
+  if (isPlaying.value) return
+  isPlaying.value = true
+  diffSteps.value = 0
+  flowSteps.value = 0
+  particles = []
+  
+  // Create particles
+  for(let i=0; i<NUM_PARTICLES; i++) {
+    particles.push(new Particle('diff'))
+    particles.push(new Particle('flow'))
+  }
+  
+  let lastTime = performance.now()
+  
+  const animate = (time) => {
+    const dt = (time - lastTime) / 1000
+    lastTime = time
+    
+    const dCtx = diffCanvasRef.value.getContext('2d')
+    const fCtx = flowCanvasRef.value.getContext('2d')
+    
+    // Clear
+    dCtx.clearRect(0, 0, 400, 100)
+    fCtx.clearRect(0, 0, 400, 100)
+    
+    // Draw Guidelines
+    drawGuide(dCtx)
+    drawGuide(fCtx)
+    
+    let allFinished = true
+    
+    particles.forEach(p => {
+      p.update(dt)
+      if (p.progress < 1) allFinished = false
+      
+      if (p.type === 'diff') p.draw(dCtx)
+      else p.draw(fCtx)
+    })
+    
+    // Update steps counter simulation
+    // Flow finishes in 8 steps, Diff in 50
+    // Map progress to steps
+    const flowP = particles.find(p => p.type === 'flow')
+    const diffP = particles.find(p => p.type === 'diff')
+    
+    if (flowP) flowSteps.value = Math.floor(flowP.progress * TARGET_STEPS_FLOW)
+    if (diffP) diffSteps.value = Math.floor(diffP.progress * TARGET_STEPS_DIFF)
+    
+    if (!allFinished) {
+      animationId = requestAnimationFrame(animate)
+    } else {
+      isPlaying.value = false
+      flowSteps.value = TARGET_STEPS_FLOW
+      diffSteps.value = TARGET_STEPS_DIFF
+    }
+  }
+  
+  requestAnimationFrame(animate)
+}
+
+const drawGuide = (ctx) => {
+  ctx.strokeStyle = 'rgba(128,128,128,0.1)'
   ctx.lineWidth = 1
-  ctx.beginPath()
-  for (let x = 0; x <= w; x += 20) {
-    ctx.moveTo(x, 0)
-    ctx.lineTo(x, h)
-  }
-  for (let y = 0; y <= h; y += 20) {
-    ctx.moveTo(0, y)
-    ctx.lineTo(w, y)
-  }
-  ctx.stroke()
-}
-
-const drawEndpoints = (ctx, w, h) => {
-  // Start (Noise)
-  ctx.beginPath()
-  ctx.arc(30, h - 30, 8, 0, Math.PI * 2)
-  ctx.fillStyle = '#909399'
-  ctx.fill()
-
-  // End (Image)
-  ctx.beginPath()
-  ctx.arc(w - 30, 30, 8, 0, Math.PI * 2)
-  ctx.fillStyle = '#409EFF'
-  ctx.fill()
-}
-
-const drawPath = (ctx, w, h, type, isActive) => {
-  ctx.beginPath()
-  ctx.moveTo(30, h - 30)
-
-  if (type === 'line') {
-    ctx.lineTo(w - 30, 30)
-  } else {
-    // Bezier curve for diffusion
-    ctx.quadraticCurveTo(w * 0.2, 30, w - 30, 30)
-  }
-
-  ctx.strokeStyle = isActive ? 'rgba(0,0,0,0.1)' : '#ddd'
-  ctx.lineWidth = 2
   ctx.setLineDash([5, 5])
+  ctx.beginPath()
+  ctx.moveTo(20, 50)
+  ctx.lineTo(380, 50)
   ctx.stroke()
   ctx.setLineDash([])
 }
 
-const getPosition = (t, type, w, h) => {
-  const startX = 30
-  const startY = h - 30
-  const endX = w - 30
-  const endY = 30
+onMounted(() => {
+  // Initial draw
+  const dCtx = diffCanvasRef.value.getContext('2d')
+  const fCtx = flowCanvasRef.value.getContext('2d')
+  drawGuide(dCtx)
+  drawGuide(fCtx)
+})
 
-  if (type === 'line') {
-    return {
-      x: startX + (endX - startX) * t,
-      y: startY + (endY - startY) * t
-    }
-  } else {
-    // Quadratic Bezier: (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2
-    // Control Point
-    const cpX = w * 0.2
-    const cpY = 30
-
-    const x =
-      Math.pow(1 - t, 2) * startX +
-      2 * (1 - t) * t * cpX +
-      Math.pow(t, 2) * endX
-    const y =
-      Math.pow(1 - t, 2) * startY +
-      2 * (1 - t) * t * cpY +
-      Math.pow(t, 2) * endY
-
-    // Add some random jitter for diffusion look if t < 1
-    // const jitter = t < 1 ? (Math.random() - 0.5) * 5 : 0
-    // return { x: x + jitter, y: y + jitter }
-    return { x, y }
-  }
-}
+onUnmounted(() => {
+  if (animationId) cancelAnimationFrame(animationId)
+})
 </script>
 
 <style scoped>
 .flow-matching-demo {
   margin: 20px 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.demo-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 20px;
 }
 
 .controls {
-  text-align: center;
   margin-bottom: 20px;
-}
-
-.comparison-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-@media (max-width: 600px) {
-  .comparison-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.viz-panel {
-  background: var(--el-fill-color-light);
-  border-radius: 8px;
-  padding: 15px;
   display: flex;
-  flex-direction: column;
-  gap: 10px;
+  justify-content: center;
 }
 
-.panel-header {
+.play-btn {
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  padding: 8px 24px;
+  border-radius: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.play-btn:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.play-btn:disabled {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.track {
+  margin-bottom: 24px;
+}
+
+.track-info {
   display: flex;
-  align-items: center;
-  gap: 5px;
-  font-weight: bold;
-  font-size: 0.9em;
-  color: var(--el-text-color-primary);
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.step-count {
+  font-family: monospace;
+  background: var(--vp-c-bg-alt);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.step-count.highlight {
+  color: #10b981;
 }
 
 .canvas-wrapper {
   position: relative;
-  background: #fff;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  height: 100px;
 }
 
+.marker {
+  position: absolute;
+  bottom: 4px;
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+}
+
+.marker.start { left: 10px; }
+.marker.end { right: 10px; }
+
 canvas {
   width: 100%;
-  height: auto;
-  display: block;
+  height: 100%;
 }
 
-.labels {
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
-  right: 5px;
+.info-bar {
+  margin-top: 16px;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
   display: flex;
-  justify-content: space-between;
-  font-size: 10px;
-  color: #999;
-  pointer-events: none;
-}
-
-.stats-box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 5px;
+  gap: 8px;
+  line-height: 1.4;
+  padding: 0 8px;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
index 188bdd4..e66bd1d 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
@@ -1,569 +1,208 @@
-<!--
-  ImageGenQuickStartDemo.vue
-  AI 绘画快速体验组件
-
-  用途：
-  让用户在文章开头就能体验 AI 绘画的魅力，通过交互式演示理解文生图的基本概念。
-
-  交互功能：
-  - 预设提示词选择：快速体验不同风格的图像生成
-  - 模拟生成过程：展示从文本到图像的渐进过程
-  - 参数调节：调整生成步数、CFG Scale 等参数
-  - 对比展示：对比不同参数下的生成效果
--->
 <template>
-  <div class="image-gen-quickstart">
-    <el-card shadow="never">
-      <template #header>
-        <div class="header-title">
-          <el-icon><Picture /></el-icon>
-          <span>🎨 AI 绘画体验室</span>
+  <div class="quick-start-demo">
+    <div class="preset-row">
+      <div 
+        v-for="(preset, index) in presets" 
+        :key="index"
+        class="preset-card"
+        :class="{ active: selectedPreset === index }"
+        @click="selectPreset(index)"
+      >
+        <span class="preset-icon">{{ preset.icon }}</span>
+        <span class="preset-name">{{ preset.name }}</span>
+      </div>
+    </div>
+
+    <div class="preview-area">
+      <div class="canvas-wrapper">
+        <canvas ref="canvasRef" width="400" height="300"></canvas>
+        <div v-if="!isGenerating && !hasGenerated" class="placeholder-text">
+          👈 点击上方风格，开始创作
         </div>
-      </template>
-
-      <div class="demo-layout">
-        <!-- 左侧：控制面板 -->
-        <div class="control-panel">
-          <div class="input-section">
-            <label>提示词 (Prompt)</label>
-            <el-input
-              v-model="prompt"
-              type="textarea"
-              :rows="3"
-              placeholder="描述你想生成的图像..."
-            />
-            <div class="prompt-tags">
-              <el-tag
-                v-for="tag in presetPrompts"
-                :key="tag.label"
-                size="small"
-                class="prompt-tag"
-                @click="prompt = tag.prompt"
-              >
-                {{ tag.label }}
-              </el-tag>
-            </div>
-          </div>
-
-          <div class="params-section">
-            <div class="param-row">
-              <label>生成步数</label>
-              <el-slider v-model="steps" :min="10" :max="50" :step="5" show-stops />
-            </div>
-            <div class="param-row">
-              <label>CFG Scale (提示词遵循度)</label>
-              <el-slider v-model="cfgScale" :min="1" :max="15" :step="0.5" />
-            </div>
-            <div class="param-row">
-              <label>采样器</label>
-              <el-select v-model="sampler" size="small">
-                <el-option label="Euler" value="euler" />
-                <el-option label="DPM++" value="dpm" />
-                <el-option label="DDIM" value="ddim" />
-              </el-select>
-            </div>
-          </div>
-
-          <el-button
-            type="primary"
-            :loading="isGenerating"
-            @click="startGeneration"
-            class="generate-btn"
-          >
-            <el-icon><MagicStick /></el-icon>
-            {{ isGenerating ? '生成中...' : '开始生成' }}
-          </el-button>
-        </div>
-
-        <!-- 右侧：生成展示 -->
-        <div class="display-panel">
-          <div class="canvas-container">
-            <canvas
-              ref="canvasRef"
-              width="400"
-              height="400"
-              class="gen-canvas"
-            />
-            <div v-if="isGenerating" class="progress-overlay">
-              <el-progress
-                type="circle"
-                :percentage="progress"
-                :status="progress === 100 ? 'success' : ''"
-              />
-              <p class="step-info">Step {{ currentStep }} / {{ steps }}</p>
-            </div>
-          </div>
-
-          <div class="image-info" v-if="!isGenerating && hasGenerated">
-            <el-descriptions :column="2" size="small" border>
-              <el-descriptions-item label="分辨率">512 × 512</el-descriptions-item>
-              <el-descriptions-item label="生成步数">{{ steps }}</el-descriptions-item>
-              <el-descriptions-item label="CFG Scale">{{ cfgScale }}</el-descriptions-item>
-              <el-descriptions-item label="采样器">{{ sampler }}</el-descriptions-item>
-            </el-descriptions>
-          </div>
+        <div v-if="isGenerating" class="loading-overlay">
+          <div class="spinner"></div>
+          <div>AI 正在绘制 {{ presets[selectedPreset].name }}...</div>
         </div>
       </div>
-
-      <div class="info-box">
-        <p>
-          <span class="icon">💡</span>
-          <strong>小提示：</strong>
-          提示词越详细，生成效果越好。尝试使用 "风格词"（如 "赛博朋克"、"水彩画"）来控制图像风格。
-        </p>
-      </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Picture, MagicStick } from '@element-plus/icons-vue'
 
 const canvasRef = ref(null)
-const prompt = ref('一只戴着墨镜的猫，赛博朋克风格，霓虹灯光')
-const steps = ref(20)
-const cfgScale = ref(7.5)
-const sampler = ref('euler')
 const isGenerating = ref(false)
-const progress = ref(0)
-const currentStep = ref(0)
 const hasGenerated = ref(false)
+const selectedPreset = ref(-1)
 
-const presetPrompts = [
-  { label: '🐱 赛博朋克猫', prompt: '一只戴着墨镜的猫，赛博朋克风格，霓虹灯光' },
-  { label: '🏔️ 山水画', prompt: '中国山水画，云雾缭绕，水墨风格' },
-  { label: '🚀 太空', prompt: '宇航员在火星表面，日落时分，科幻风格' },
-  { label: '🌸 樱花', prompt: '樱花树下，日本传统建筑，春天，柔和光线' },
+const presets = [
+  { name: '赛博朋克 (Cyberpunk)', icon: '🌃', color: ['#2b0055', '#ff00aa', '#00ffff'] },
+  { name: '油画风景 (Oil Painting)', icon: '🎨', color: ['#556b2f', '#8b4513', '#ffdead'] },
+  { name: '二次元 (Anime)', icon: '🌸', color: ['#ffb7c5', '#87ceeb', '#ffffff'] }
 ]
 
-// 模拟生成过程
-const startGeneration = async () => {
+const selectPreset = (index) => {
+  if (isGenerating.value) return
+  selectedPreset.value = index
+  generate(presets[index])
+}
+
+const generate = (preset) => {
   isGenerating.value = true
-  progress.value = 0
-  currentStep.value = 0
   hasGenerated.value = false
+  const ctx = canvasRef.value.getContext('2d')
+  
+  // Clear
+  ctx.fillStyle = '#000'
+  ctx.fillRect(0, 0, 400, 300)
 
-  const canvas = canvasRef.value
-  const ctx = canvas.getContext('2d')
-
-  // 生成噪声图像作为起点
-  const generateNoise = () => {
-    const imageData = ctx.createImageData(400, 400)
-    for (let i = 0; i < imageData.data.length; i += 4) {
-      const val = Math.random() * 255
-      imageData.data[i] = val
-      imageData.data[i + 1] = val
-      imageData.data[i + 2] = val
-      imageData.data[i + 3] = 255
+  let progress = 0
+  const totalSteps = 60
+  
+  const animate = () => {
+    progress++
+    
+    // Draw Noise mixed with colors
+    const noiseLevel = 1 - (progress / totalSteps)
+    
+    // Draw base colors (simple composition)
+    const gradient = ctx.createLinearGradient(0, 0, 400, 300)
+    gradient.addColorStop(0, preset.color[0])
+    gradient.addColorStop(0.5, preset.color[1])
+    gradient.addColorStop(1, preset.color[2])
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, 400, 300)
+    
+    // Add noise overlay
+    if (noiseLevel > 0) {
+      const imgData = ctx.getImageData(0, 0, 400, 300)
+      const data = imgData.data
+      for(let i=0; i<data.length; i+=4) {
+        if (Math.random() < noiseLevel) {
+          const gray = Math.random() * 255
+          data[i] = (data[i] + gray) / 2
+          data[i+1] = (data[i+1] + gray) / 2
+          data[i+2] = (data[i+2] + gray) / 2
+        }
+      }
+      ctx.putImageData(imgData, 0, 0)
+    }
+
+    if (progress < totalSteps) {
+      requestAnimationFrame(animate)
+    } else {
+      isGenerating.value = false
+      hasGenerated.value = true
     }
-    return imageData
   }
-
-  // 模拟渐进生成
-  for (let i = 0; i <= steps.value; i++) {
-    await new Promise(resolve => setTimeout(resolve, 100))
-    currentStep.value = i
-    progress.value = Math.round((i / steps.value) * 100)
-
-    // 绘制渐进图像（模拟）
-    const noiseRatio = 1 - (i / steps.value)
-    drawSimulatedImage(ctx, noiseRatio)
-  }
-
-  isGenerating.value = false
-  hasGenerated.value = true
+  
+  animate()
 }
-
-// 根据提示词绘制模拟图像
-const drawSimulatedImage = (ctx, noiseRatio) => {
-  const width = 400
-  const height = 400
-
-  // 清空画布
-  ctx.fillStyle = '#1a1a2e'
-  ctx.fillRect(0, 0, width, height)
-
-  // 根据提示词关键词绘制不同内容
-  const promptLower = prompt.value.toLowerCase()
-
-  // 赛博朋克风格
-  if (promptLower.includes('赛博') || promptLower.includes('cyber')) {
-    drawCyberpunkScene(ctx, width, height, noiseRatio)
-  }
-  // 山水画
-  else if (promptLower.includes('山水') || promptLower.includes('水墨')) {
-    drawLandscape(ctx, width, height, noiseRatio)
-  }
-  // 太空
-  else if (promptLower.includes('太空') || promptLower.includes('宇航员')) {
-    drawSpaceScene(ctx, width, height, noiseRatio)
-  }
-  // 樱花
-  else if (promptLower.includes('樱花') || promptLower.includes('日本')) {
-    drawSakuraScene(ctx, width, height, noiseRatio)
-  }
-  // 默认：抽象艺术
-  else {
-    drawAbstractArt(ctx, width, height, noiseRatio)
-  }
-
-  // 添加噪声
-  if (noiseRatio > 0) {
-    addNoise(ctx, width, height, noiseRatio)
-  }
-}
-
-const drawCyberpunkScene = (ctx, w, h, noise) => {
-  // 霓虹背景
-  const gradient = ctx.createLinearGradient(0, 0, 0, h)
-  gradient.addColorStop(0, '#0a0a1a')
-  gradient.addColorStop(1, '#1a0a2e')
-  ctx.fillStyle = gradient
-  ctx.fillRect(0, 0, w, h)
-
-  // 霓虹灯条
-  ctx.shadowBlur = 20 * (1 - noise)
-  ctx.shadowColor = '#ff00ff'
-  ctx.fillStyle = `rgba(255, 0, 255, ${0.8 * (1 - noise)})`
-  ctx.fillRect(50, 100, 300, 5)
-
-  ctx.shadowColor = '#00ffff'
-  ctx.fillStyle = `rgba(0, 255, 255, ${0.8 * (1 - noise)})`
-  ctx.fillRect(100, 200, 200, 5)
-
-  // 猫的形状（简化）
-  ctx.shadowBlur = 0
-  ctx.fillStyle = `rgba(100, 100, 150, ${0.9 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.ellipse(200, 280, 60, 50, 0, 0, Math.PI * 2)
-  ctx.fill()
-
-  // 耳朵
-  ctx.beginPath()
-  ctx.moveTo(160, 250)
-  ctx.lineTo(150, 200)
-  ctx.lineTo(180, 240)
-  ctx.fill()
-  ctx.beginPath()
-  ctx.moveTo(240, 250)
-  ctx.lineTo(250, 200)
-  ctx.lineTo(220, 240)
-  ctx.fill()
-
-  // 墨镜
-  ctx.fillStyle = `rgba(0, 0, 0, ${0.9 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.ellipse(180, 270, 20, 12, 0, 0, Math.PI * 2)
-  ctx.fill()
-  ctx.beginPath()
-  ctx.ellipse(220, 270, 20, 12, 0, 0, Math.PI * 2)
-  ctx.fill()
-
-  // 镜片反光
-  ctx.fillStyle = `rgba(255, 0, 255, ${0.6 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.ellipse(175, 268, 5, 3, 0, 0, Math.PI * 2)
-  ctx.fill()
-  ctx.beginPath()
-  ctx.ellipse(215, 268, 5, 3, 0, 0, Math.PI * 2)
-  ctx.fill()
-}
-
-const drawLandscape = (ctx, w, h, noise) => {
-  // 天空渐变
-  const gradient = ctx.createLinearGradient(0, 0, 0, h)
-  gradient.addColorStop(0, '#e8f4f8')
-  gradient.addColorStop(0.5, '#c8e0e8')
-  gradient.addColorStop(1, '#a8c8d8')
-  ctx.fillStyle = gradient
-  ctx.fillRect(0, 0, w, h)
-
-  // 远山
-  ctx.fillStyle = `rgba(100, 120, 140, ${0.5 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.moveTo(0, 250)
-  ctx.lineTo(100, 150)
-  ctx.lineTo(200, 200)
-  ctx.lineTo(300, 120)
-  ctx.lineTo(400, 180)
-  ctx.lineTo(400, 400)
-  ctx.lineTo(0, 400)
-  ctx.fill()
-
-  // 近山
-  ctx.fillStyle = `rgba(60, 80, 100, ${0.7 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.moveTo(0, 300)
-  ctx.lineTo(150, 220)
-  ctx.lineTo(300, 280)
-  ctx.lineTo(400, 240)
-  ctx.lineTo(400, 400)
-  ctx.lineTo(0, 400)
-  ctx.fill()
-
-  // 云雾
-  ctx.fillStyle = `rgba(255, 255, 255, ${0.4 * (1 - noise)})`
-  for (let i = 0; i < 5; i++) {
-    ctx.beginPath()
-    ctx.ellipse(80 + i * 70, 180 + i * 20, 40, 20, 0, 0, Math.PI * 2)
-    ctx.fill()
-  }
-}
-
-const drawSpaceScene = (ctx, w, h, noise) => {
-  // 太空背景
-  ctx.fillStyle = '#0a0a15'
-  ctx.fillRect(0, 0, w, h)
-
-  // 星星
-  ctx.fillStyle = `rgba(255, 255, 255, ${1 - noise})`
-  for (let i = 0; i < 100; i++) {
-    const x = (i * 37) % w
-    const y = (i * 73) % h
-    ctx.beginPath()
-    ctx.arc(x, y, Math.random() * 2, 0, Math.PI * 2)
-    ctx.fill()
-  }
-
-  // 火星地面
-  ctx.fillStyle = `rgba(180, 80, 40, ${0.8 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.moveTo(0, 350)
-  ctx.lineTo(100, 320)
-  ctx.lineTo(200, 340)
-  ctx.lineTo(300, 310)
-  ctx.lineTo(400, 330)
-  ctx.lineTo(400, 400)
-  ctx.lineTo(0, 400)
-  ctx.fill()
-
-  // 宇航员（简化）
-  ctx.fillStyle = `rgba(220, 220, 230, ${0.9 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.arc(200, 220, 40, 0, Math.PI * 2)
-  ctx.fill()
-
-  // 头盔反光
-  ctx.fillStyle = `rgba(255, 200, 100, ${0.5 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.arc(185, 210, 15, 0, Math.PI * 2)
-  ctx.fill()
-
-  // 日落
-  const sunGradient = ctx.createRadialGradient(300, 100, 0, 300, 100, 60)
-  sunGradient.addColorStop(0, `rgba(255, 200, 100, ${1 - noise})`)
-  sunGradient.addColorStop(1, `rgba(255, 100, 50, ${0.5 * (1 - noise)})`)
-  ctx.fillStyle = sunGradient
-  ctx.beginPath()
-  ctx.arc(300, 100, 50, 0, Math.PI * 2)
-  ctx.fill()
-}
-
-const drawSakuraScene = (ctx, w, h, noise) => {
-  // 天空
-  const gradient = ctx.createLinearGradient(0, 0, 0, h)
-  gradient.addColorStop(0, '#ffe4e1')
-  gradient.addColorStop(1, '#ffb6c1')
-  ctx.fillStyle = gradient
-  ctx.fillRect(0, 0, w, h)
-
-  // 传统建筑屋顶
-  ctx.fillStyle = `rgba(80, 60, 60, ${0.9 * (1 - noise)})`
-  ctx.beginPath()
-  ctx.moveTo(100, 300)
-  ctx.lineTo(150, 200)
-  ctx.lineTo(250, 200)
-  ctx.lineTo(300, 300)
-  ctx.fill()
-
-  // 樱花树
-  ctx.fillStyle = `rgba(139, 90, 43, ${0.9 * (1 - noise)})`
-  ctx.fillRect(50, 200, 20, 200)
-
-  // 樱花
-  ctx.fillStyle = `rgba(255, 183, 197, ${0.8 * (1 - noise)})`
-  for (let i = 0; i < 30; i++) {
-    const x = 30 + (i * 13) % 80
-    const y = 150 + (i * 17) % 100
-    ctx.beginPath()
-    ctx.arc(x, y, 8 + Math.random() * 5, 0, Math.PI * 2)
-    ctx.fill()
-  }
-
-  // 飘落的樱花
-  ctx.fillStyle = `rgba(255, 192, 203, ${0.6 * (1 - noise)})`
-  for (let i = 0; i < 20; i++) {
-    const x = (i * 23) % w
-    const y = 250 + (i * 31) % 150
-    ctx.beginPath()
-    ctx.ellipse(x, y, 4, 2, i, 0, Math.PI * 2)
-    ctx.fill()
-  }
-}
-
-const drawAbstractArt = (ctx, w, h, noise) => {
-  // 渐变背景
-  const gradient = ctx.createLinearGradient(0, 0, w, h)
-  gradient.addColorStop(0, '#667eea')
-  gradient.addColorStop(1, '#764ba2')
-  ctx.fillStyle = gradient
-  ctx.fillRect(0, 0, w, h)
-
-  // 抽象形状
-  const colors = ['#f093fb', '#f5576c', '#4facfe', '#00f2fe']
-  for (let i = 0; i < 8; i++) {
-    ctx.fillStyle = colors[i % colors.length] + Math.floor((1 - noise) * 255).toString(16).padStart(2, '0')
-    ctx.beginPath()
-    const x = 100 + (i * 50) % 300
-    const y = 100 + (i * 70) % 250
-    const r = 30 + i * 5
-    ctx.arc(x, y, r, 0, Math.PI * 2)
-    ctx.fill()
-  }
-}
-
-const addNoise = (ctx, w, h, ratio) => {
-  const imageData = ctx.getImageData(0, 0, w, h)
-  for (let i = 0; i < imageData.data.length; i += 4) {
-    const noise = (Math.random() - 0.5) * 50 * ratio
-    imageData.data[i] = Math.max(0, Math.min(255, imageData.data[i] + noise))
-    imageData.data[i + 1] = Math.max(0, Math.min(255, imageData.data[i + 1] + noise))
-    imageData.data[i + 2] = Math.max(0, Math.min(255, imageData.data[i + 2] + noise))
-  }
-  ctx.putImageData(imageData, 0, 0)
-}
-
-onMounted(() => {
-  // 初始绘制
-  const canvas = canvasRef.value
-  if (canvas) {
-    const ctx = canvas.getContext('2d')
-    drawSimulatedImage(ctx, 1)
-  }
-})
 </script>
 
 <style scoped>
-.image-gen-quickstart {
-  margin: 1rem 0;
+.quick-start-demo {
+  margin: 20px 0;
+  font-family: var(--vp-font-family-base);
 }
 
-.header-title {
+.preset-row {
   display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.preset-card {
+  flex: 1;
+  min-width: 120px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 8px;
+}
+
+.preset-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--vp-c-brand);
+}
+
+.preset-card.active {
+  background: var(--vp-c-brand-dimm);
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand-dark);
+}
+
+.preset-icon {
+  font-size: 24px;
+}
+
+.preset-name {
+  font-size: 12px;
   font-weight: 600;
 }
 
-.demo-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
+.preview-area {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  background: #000;
 }
 
-@media (max-width: 768px) {
-  .demo-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-.control-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.input-section label,
-.params-section label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-2);
-}
-
-.prompt-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.prompt-tag {
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.prompt-tag:hover {
-  transform: translateY(-2px);
-}
-
-.param-row {
-  margin-bottom: 12px;
-}
-
-.param-row label {
-  font-size: 0.8rem;
-  margin-bottom: 4px;
-}
-
-.generate-btn {
-  width: 100%;
-  margin-top: auto;
-}
-
-.display-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.canvas-container {
+.canvas-wrapper {
   position: relative;
   width: 100%;
-  aspect-ratio: 1;
-  background: var(--vp-c-bg-mute);
-  border-radius: 8px;
-  overflow: hidden;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.gen-canvas {
+canvas {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 }
 
-.progress-overlay {
+.placeholder-text {
   position: absolute;
-  inset: 0;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.loading-overlay {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  gap: 16px;
+  gap: 12px;
+  padding: 20px;
+  border-radius: 8px;
 }
 
-.step-info {
-  color: white;
-  font-size: 0.9rem;
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
-.image-info {
-  font-size: 0.8rem;
-}
-
-.info-box {
-  margin-top: 16px;
-  padding: 12px;
-  background: var(--vp-c-bg-mute);
-  border-radius: 6px;
-  font-size: 0.9rem;
-  line-height: 1.6;
-}
-
-.icon {
-  font-size: 1.2em;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
index 3b40171..74092a3 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
@@ -1,290 +1,304 @@
 <template>
   <div class="latent-space-viz">
-    <el-card shadow="never">
-      <div class="viz-container">
-        <!-- Pixel Space -->
-        <div class="space-block">
-          <div class="space-header">
-            <el-icon :size="20"><Picture /></el-icon>
-            <span class="space-title">像素空间 (Pixel Space)</span>
-          </div>
-          <div class="grid-wrapper pixel-wrapper">
-            <div class="pixel-grid">
-              <div
-                v-for="n in 256"
-                :key="n"
-                class="pixel-cell"
-                :style="getPixelStyle(n)"
-              ></div>
-            </div>
-            <div class="grid-overlay">
-              <span>HD Image</span>
-              <span class="res-tag">1024x1024</span>
-            </div>
-          </div>
-          <div class="data-stats">
-            <div class="stat-row">
-              <span class="label">维度:</span>
-              <span class="value">3 (RGB)</span>
-            </div>
-            <div class="stat-row">
-              <span class="label">数据量:</span>
-              <span class="value">~300万</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Transformation -->
-        <div class="transform-process">
-          <div class="process-arrow">
-            <div class="vae-box">
-              <span class="vae-label">VAE Encoder</span>
-              <el-icon><Filter /></el-icon>
-            </div>
-            <el-icon :size="24" class="arrow-icon"><Right /></el-icon>
-          </div>
-          <el-tag type="danger" size="small" effect="dark" class="compress-tag"
-            >压缩 48x</el-tag
-          >
-        </div>
-
-        <!-- Latent Space -->
-        <div class="space-block highlight">
-          <div class="space-header">
-            <el-icon :size="20" color="#E6A23C"><Cpu /></el-icon>
-            <span class="space-title">潜空间 (Latent Space)</span>
-          </div>
-          <div class="grid-wrapper latent-wrapper">
-            <div class="latent-grid">
-              <div
-                v-for="n in 16"
-                :key="n"
-                class="latent-cell"
-                :style="getLatentStyle(n)"
-              ></div>
-            </div>
-            <div class="grid-overlay">
-              <span>Latent Feature</span>
-              <span class="res-tag">64x64</span>
-            </div>
-          </div>
-          <div class="data-stats">
-            <div class="stat-row">
-              <span class="label">维度:</span>
-              <span class="value">4 (Channels)</span>
-            </div>
-            <div class="stat-row">
-              <span class="label">数据量:</span>
-              <span class="value">~1.6万</span>
-            </div>
-          </div>
+    <div class="viz-card">
+      <!-- Left: The Output (Pixel Space) -->
+      <div class="preview-section">
+        <div class="emoji-display" :style="{ transform: `scale(${1 + zoomLevel})` }">
+          {{ currentEmoji }}
         </div>
+        <div class="label">像素空间 (Pixel Space)</div>
+        <div class="sub-label">最终看到的图像</div>
       </div>
 
-      <el-divider />
+      <!-- Center: The Mechanism -->
+      <div class="connection">
+        <div class="arrow">← 映射 →</div>
+        <div class="vae-tag">VAE Decoder</div>
+      </div>
 
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-statistic title="压缩比" value="1:48">
-            <template #suffix>
-              <el-icon style="vertical-align: -0.125em"><Scissor /></el-icon>
-            </template>
-          </el-statistic>
-        </el-col>
-        <el-col :span="16">
-          <el-alert
-            title="为什么要压缩？"
-            type="success"
-            :closable="false"
-            description="直接处理 300 万个像素太慢了。VAE 把图像压缩成「压缩饼干」（潜变量），保留了核心特征（语义、构图），扔掉了冗余细节。AI 在这个小空间里画画，速度飞快！"
-            show-icon
-          />
-        </el-col>
-      </el-row>
-    </el-card>
+      <!-- Right: The Input (Latent Space) -->
+      <div class="control-section">
+        <div class="latent-grid" ref="gridRef" @mousedown="startDrag" @touchstart="startDrag">
+          <div class="grid-lines"></div>
+          <div class="axis-label x-axis">开心值 (Happiness)</div>
+          <div class="axis-label y-axis">惊讶值 (Surprise)</div>
+          
+          <!-- The Latent Point -->
+          <div 
+            class="latent-point"
+            :style="{ left: `${point.x}%`, top: `${point.y}%` }"
+          >
+            <div class="tooltip">Latent Vector: [{{ ((point.x-50)/50).toFixed(1) }}, {{ ((50-point.y)/50).toFixed(1) }}]</div>
+          </div>
+        </div>
+        <div class="label">潜空间 (Latent Space)</div>
+        <div class="sub-label">拖动红点改变特征</div>
+      </div>
+    </div>
+    
+    <div class="info-bar">
+      <span class="icon">💡</span>
+      <span>
+        <strong>核心原理：</strong>
+        在像素空间里修改图片很难（要改几千个像素）。但在潜空间里，我们只需要修改两个坐标（开心值、惊讶值），就能生成完全不同的表情。这就是 AI "画画" 的本质——在数学空间里找坐标。
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { Picture, Cpu, Right, Filter, Scissor } from '@element-plus/icons-vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 
-const getPixelStyle = (n) => {
-  // Simulate a natural image with smooth color transitions
-  const r = 100 + Math.sin(n * 0.1) * 50
-  const g = 150 + Math.cos(n * 0.1) * 50
-  const b = 200 + Math.sin(n * 0.05) * 50
-  return {
-    backgroundColor: `rgb(${r}, ${g}, ${b})`,
-    opacity: 0.8 + Math.random() * 0.2
+const gridRef = ref(null)
+const isDragging = ref(false)
+const point = ref({ x: 50, y: 50 }) // Percentage 0-100
+const zoomLevel = ref(0)
+
+// Emoji map based on quadrants
+// X: Unhappy -> Happy
+// Y: Calm -> Surprised (Top is 0 in CSS, so small Y is high surprise?) 
+// Let's map: 
+// X (0-100): Sad -> Happy
+// Y (0-100): Surprised -> Sleepy (Top is 0, so 0 is Surprised, 100 is Sleepy)
+
+const currentEmoji = computed(() => {
+  const x = point.value.x // 0 (Sad) to 100 (Happy)
+  const y = point.value.y // 0 (Surprised) to 100 (Sleepy)
+  
+  if (x < 33) { // Sad Zone
+    if (y < 33) return '😨' // Sad + Surprised = Fear
+    if (y > 66) return '😪' // Sad + Sleepy = Tired
+    return '😢' // Just Sad
+  } else if (x > 66) { // Happy Zone
+    if (y < 33) return '🤩' // Happy + Surprised = Starstruck
+    if (y > 66) return '😌' // Happy + Sleepy = Relieved
+    return '😃' // Just Happy
+  } else { // Neutral Zone
+    if (y < 33) return '😮' // Neutral + Surprised
+    if (y > 66) return '😴' // Neutral + Sleepy
+    return '😐' // Just Neutral
   }
+})
+
+const handleMove = (event) => {
+  if (!isDragging.value) return
+  
+  const grid = gridRef.value.getBoundingClientRect()
+  const clientX = event.touches ? event.touches[0].clientX : event.clientX
+  const clientY = event.touches ? event.touches[0].clientY : event.clientY
+  
+  let newX = ((clientX - grid.left) / grid.width) * 100
+  let newY = ((clientY - grid.top) / grid.height) * 100
+  
+  // Clamp
+  newX = Math.max(0, Math.min(100, newX))
+  newY = Math.max(0, Math.min(100, newY))
+  
+  point.value = { x: newX, y: newY }
 }
 
-const getLatentStyle = (n) => {
-  // Simulate high-level features (more abstract, high contrast colors)
-  const hue = (n * 137) % 360
-  return {
-    backgroundColor: `hsl(${hue}, 70%, 60%)`,
-    boxShadow: `0 0 5px hsl(${hue}, 70%, 60%)`
-  }
+const startDrag = (event) => {
+  isDragging.value = true
+  handleMove(event)
+  // Prevent default to stop scrolling on mobile
+  if (event.type === 'touchstart') event.preventDefault()
 }
+
+const stopDrag = () => {
+  isDragging.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMove)
+  window.addEventListener('mouseup', stopDrag)
+  window.addEventListener('touchmove', handleMove)
+  window.addEventListener('touchend', stopDrag)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMove)
+  window.removeEventListener('mouseup', stopDrag)
+  window.removeEventListener('touchmove', handleMove)
+  window.removeEventListener('touchend', stopDrag)
+})
 </script>
 
 <style scoped>
 .latent-space-viz {
   margin: 20px 0;
+  font-family: var(--vp-font-family-base);
 }
 
-.viz-container {
+.viz-card {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 24px;
   gap: 20px;
   flex-wrap: wrap;
-  margin-bottom: 20px;
 }
 
-.space-block {
+.preview-section, .control-section {
   flex: 1;
-  min-width: 200px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 8px;
-  padding: 15px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.space-block.highlight {
-  border-color: var(--el-color-warning-light-5);
-  background: var(--el-color-warning-light-9);
-}
-
-.space-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 15px;
-  font-weight: bold;
-  color: var(--el-text-color-primary);
-}
-
-.grid-wrapper {
-  position: relative;
-  background: #000;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pixel-wrapper {
-  height: 160px;
-}
-
-.latent-wrapper {
-  height: 100px; /* Smaller representation */
-  width: 100px;
-  margin: 0 auto 15px auto;
-}
-
-.pixel-grid {
-  display: grid;
-  grid-template-columns: repeat(16, 1fr);
-  width: 100%;
-  height: 100%;
-}
-
-.pixel-cell {
-  width: 100%;
-  height: 100%;
-}
-
-.latent-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  width: 100%;
-  height: 100%;
-  gap: 2px;
-  padding: 5px;
-}
-
-.latent-cell {
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-}
-
-.grid-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 0.75em;
-  padding: 4px 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.res-tag {
-  font-family: monospace;
-  opacity: 0.8;
-}
-
-.data-stats {
-  font-size: 0.85em;
-  color: var(--el-text-color-secondary);
-}
-
-.stat-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.transform-process {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 5px;
-  color: var(--el-text-color-secondary);
+  min-width: 200px;
 }
 
-.process-arrow {
+.emoji-display {
+  font-size: 80px;
+  line-height: 1;
+  height: 100px;
   display: flex;
   align-items: center;
-  gap: 5px;
+  justify-content: center;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cursor: default;
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
 }
 
-.vae-box {
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
+.latent-grid {
+  width: 200px;
+  height: 200px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  position: relative;
+  cursor: crosshair;
+  overflow: hidden;
+  box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(var(--vp-c-divider) 1px, transparent 1px),
+    linear-gradient(90deg, var(--vp-c-divider) 1px, transparent 1px);
+  background-size: 20px 20px;
+  opacity: 0.3;
+}
+
+.latent-point {
+  width: 20px;
+  height: 20px;
+  background: var(--vp-c-brand);
+  border: 3px solid #fff;
+  border-radius: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  transition: transform 0.1s;
+}
+
+.latent-point:hover {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 25px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.8);
+  color: #fff;
   padding: 4px 8px;
-  font-size: 0.8em;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: #fff;
+  border-radius: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 
-.compress-tag {
-  transform: scale(0.9);
+.latent-point:hover .tooltip,
+.latent-point:active .tooltip {
+  opacity: 1;
+}
+
+.axis-label {
+  position: absolute;
+  font-size: 10px;
+  color: var(--vp-c-text-2);
+  pointer-events: none;
+}
+
+.x-axis {
+  bottom: 4px;
+  right: 8px;
+}
+
+.y-axis {
+  top: 8px;
+  left: 8px;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}
+
+.connection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+}
+
+.arrow {
+  margin-bottom: 4px;
+  font-weight: bold;
+}
+
+.vae-tag {
+  background: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.label {
+  margin-top: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.sub-label {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.info-bar {
+  margin-top: 16px;
+  background: var(--vp-c-bg-alt);
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 8px;
+}
+
+.icon {
+  font-size: 16px;
 }
 
 @media (max-width: 600px) {
-  .viz-container {
-    flex-direction: column;
+  .viz-card {
+    flex-direction: column-reverse;
   }
-
-  .transform-process {
+  
+  .connection {
     transform: rotate(90deg);
     margin: 10px 0;
   }
-
-  .compress-tag {
-    display: none; /* Hide tag when rotated to avoid layout issues */
-  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
index 8697720..1d531d1 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
@@ -1,59 +1,45 @@
 <template>
   <div class="prompt-visualizer">
-    <div class="demo-container">
-      <!-- Left: Prompt -->
-      <div class="prompt-section">
-        <div class="section-title">📝 提示词</div>
-        <div class="prompt-input">
-          "cyberpunk cat, neon lights, futuristic city"
-        </div>
-
-        <div class="token-list">
-          <div
-            v-for="(token, index) in tokens"
-            :key="index"
-            class="token-item"
-            :style="{ opacity: token.weight }"
-          >
-            <div class="token-text">{{ token.text }}</div>
-            <div class="token-weight">
-              权重: {{ (token.weight * 100).toFixed(0) }}%
-            </div>
-          </div>
-        </div>
+    <div class="viz-card">
+      <div class="input-display">
+        <span class="label">Prompt:</span>
+        <span class="text">"cyberpunk cat, neon lights, futuristic city"</span>
       </div>
 
-      <!-- Right: Attention Visualization -->
-      <div class="attention-section">
-        <div class="section-title">🎯 交叉注意力可视化</div>
-        <div class="attention-grid">
-          <div
-            v-for="(item, index) in attentionMap"
-            :key="index"
-            class="attention-cell"
-          >
-            <div class="cell-token">{{ item.token }}</div>
-            <div class="cell-bar">
-              <div
-                class="bar-fill"
-                :style="{ width: item.attention * 100 + '%' }"
-              ></div>
-            </div>
-            <div class="cell-value">
-              {{ (item.attention * 100).toFixed(0) }}%
-            </div>
-          </div>
+      <div class="tokens-row">
+        <div 
+          v-for="(token, index) in tokens" 
+          :key="index"
+          class="token-pill"
+          :style="{ opacity: 0.4 + (token.weight * 0.6) }"
+        >
+          {{ token.text }}
+          <div class="tooltip">关注度: {{ (token.weight * 100).toFixed(0) }}%</div>
+        </div>
+      </div>
+      
+      <div class="arrow-down">⬇️ CLIP Encoding & Attention</div>
+      
+      <div class="image-map">
+        <!-- Abstract representation of an image being attended to -->
+        <div class="map-layer" style="background: #2b0055; opacity: 0.9;">
+          <span>City Base</span>
+        </div>
+        <div class="map-layer" style="background: #ff00aa; width: 60%; height: 60%; opacity: 0.8;">
+          <span>Neon Glow</span>
+        </div>
+        <div class="map-layer" style="background: #fff; width: 30%; height: 30%; border-radius: 50%;">
+          <span>Cat</span>
         </div>
       </div>
     </div>
 
-    <div class="explanation">
-      <p>
-        <span class="icon">💡</span>
-        <strong>交叉注意力机制</strong>让 AI 理解提示词的每个词。
-        当生成图片时，AI 会"关注"不同的词： "cyberpunk" 影响整体风格，"cat"
-        决定主体，"neon lights" 控制灯光效果。 词的顺序和权重都会影响最终画面！
-      </p>
+    <div class="info-bar">
+      <span class="icon">💡</span>
+      <span>
+        <strong>交叉注意力 (Cross-Attention)：</strong>
+        AI 在画画时，每画一笔都会回头看一眼 Prompt。当它画背景时，"city" 单词会亮起来；当它画主角时，"cat" 单词会亮起来。
+      </span>
     </div>
   </div>
 </template>
@@ -62,153 +48,128 @@
 import { ref } from 'vue'
 
 const tokens = ref([
-  { text: 'cyberpunk', weight: 0.9 },
+  { text: 'cyberpunk', weight: 0.8 },
   { text: 'cat', weight: 1.0 },
   { text: 'neon', weight: 0.7 },
   { text: 'lights', weight: 0.6 },
-  { text: 'futuristic', weight: 0.8 },
-  { text: 'city', weight: 0.5 }
-])
-
-const attentionMap = ref([
-  { token: 'cyberpunk', attention: 0.9 },
-  { token: 'cat', attention: 1.0 },
-  { token: 'neon', attention: 0.7 },
-  { token: 'lights', attention: 0.6 },
-  { token: 'futuristic', attention: 0.8 },
-  { token: 'city', attention: 0.5 }
+  { text: 'futuristic', weight: 0.5 },
+  { text: 'city', weight: 0.9 }
 ])
 </script>
 
 <style scoped>
 .prompt-visualizer {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
-  background: var(--vp-c-bg-soft);
   margin: 20px 0;
+  font-family: var(--vp-font-family-base);
 }
 
-.demo-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  .demo-container {
-    grid-template-columns: 1fr;
-  }
-}
-
-.section-title {
-  font-weight: bold;
-  font-size: 0.95rem;
-  color: var(--vp-c-text-1);
-  margin-bottom: 15px;
-}
-
-.prompt-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 15px;
-}
-
-.prompt-input {
+.viz-card {
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.input-display {
   font-family: monospace;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-1);
-  margin-bottom: 15px;
-}
-
-.token-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.token-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--vp-c-bg-soft);
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-}
-
-.token-text {
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-}
-
-.token-weight {
-  color: var(--vp-c-brand);
-  font-size: 0.75rem;
-}
-
-.attention-section {
   background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 15px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  width: 100%;
+  text-align: center;
 }
 
-.attention-grid {
+.label {
+  color: var(--vp-c-text-2);
+  margin-right: 8px;
+}
+
+.tokens-row {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
 }
 
-.attention-cell {
+.token-pill {
+  background: var(--vp-c-brand);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 13px;
+  font-weight: 600;
+  position: relative;
+  cursor: help;
+  transition: transform 0.2s;
+}
+
+.token-pill:hover {
+  transform: scale(1.1);
+  z-index: 10;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  margin-bottom: 6px;
+}
+
+.token-pill:hover .tooltip {
+  opacity: 1;
+}
+
+.arrow-down {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  font-weight: 600;
+}
+
+.image-map {
+  width: 200px;
+  height: 200px;
+  background: #000;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-size: 0.85rem;
+  justify-content: center;
 }
 
-.cell-token {
-  width: 80px;
-  color: var(--vp-c-text-1);
-  font-weight: 600;
+.map-layer {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,0.8);
+  font-size: 10px;
+  font-weight: bold;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
 }
 
-.cell-bar {
-  flex: 1;
-  height: 20px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.bar-fill {
-  height: 100%;
-  background: var(--vp-c-brand);
-  border-radius: 3px;
-  transition: width 0.5s ease;
-}
-
-.cell-value {
-  width: 40px;
-  text-align: right;
-  color: var(--vp-c-brand);
-  font-weight: 600;
-  font-size: 0.8rem;
-}
-
-.explanation {
-  padding: 12px;
-  background: var(--vp-c-bg-mute);
-  border-radius: 6px;
-  font-size: 0.9em;
-  line-height: 1.6;
-}
-
-.icon {
-  font-size: 1.2em;
+.info-bar {
+  margin-top: 16px;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 8px;
+  line-height: 1.4;
+  padding: 0 8px;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
new file mode 100644
index 0000000..fb98e06
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
@@ -0,0 +1,778 @@
+<template>
+  <div class="auto-scaling-demo">
+    <div class="header">
+      <div class="title">自动扩缩容</div>
+      <div class="subtitle">基于CPU、内存、QPS的智能弹性伸缩</div>
+    </div>
+
+    <!-- 指标选择器 -->
+    <div class="metric-selector">
+      <div class="selector-label">扩容指标：</div>
+      <div class="selector-buttons">
+        <button
+          v-for="metric in metrics"
+          :key="metric.key"
+          class="metric-btn"
+          :class="{ active: currentMetric === metric.key }"
+          @click="currentMetric = metric.key"
+        >
+          <span class="btn-icon">{{ metric.icon }}</span>
+          <span class="btn-name">{{ metric.name }}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 监控仪表盘 -->
+    <div class="monitoring-dashboard">
+      <div class="dashboard-header">
+        <span class="dashboard-title">实时监控</span>
+        <span class="refresh-indicator">
+          <span class="live-dot"></span>
+          实时
+        </span>
+      </div>
+
+      <div class="metrics-grid">
+        <!-- CPU使用率 -->
+        <div class="metric-card" :class="{ warning: cpuUsage > 70, danger: cpuUsage > 90 }">
+          <div class="metric-header">
+            <span class="metric-icon">💻</span>
+            <span class="metric-name">CPU使用率</span>
+          </div>
+          <div class="metric-value">
+            <span class="value-number">{{ cpuUsage }}</span>
+            <span class="value-unit">%</span>
+          </div>
+          <div class="metric-progress">
+            <div class="progress-bar" :style="{ width: cpuUsage + '%', background: getUsageColor(cpuUsage) }"></div>
+          </div>
+          <div class="metric-threshold">
+            <span>扩容阈值: 70%</span>
+            <span>缩容阈值: 30%</span>
+          </div>
+        </div>
+
+        <!-- 内存使用率 -->
+        <div class="metric-card" :class="{ warning: memoryUsage > 75, danger: memoryUsage > 90 }">
+          <div class="metric-header">
+            <span class="metric-icon">🧠</span>
+            <span class="metric-name">内存使用率</span>
+          </div>
+          <div class="metric-value">
+            <span class="value-number">{{ memoryUsage }}</span>
+            <span class="value-unit">%</span>
+          </div>
+          <div class="metric-progress">
+            <div class="progress-bar" :style="{ width: memoryUsage + '%', background: getUsageColor(memoryUsage) }"></div>
+          </div>
+          <div class="metric-threshold">
+            <span>扩容阈值: 75%</span>
+            <span>缩容阈值: 40%</span>
+          </div>
+        </div>
+
+        <!-- QPS -->
+        <div class="metric-card">
+          <div class="metric-header">
+            <span class="metric-icon">⚡</span>
+            <span class="metric-name">QPS</span>
+          </div>
+          <div class="metric-value">
+            <span class="value-number">{{ currentQPS }}</span>
+            <span class="value-unit">req/s</span>
+          </div>
+          <div class="metric-chart">
+            <svg viewBox="0 0 200 40" class="sparkline">
+              <polyline
+                fill="none"
+                stroke="var(--vp-c-brand)"
+                stroke-width="2"
+                :points="qpsSparklinePoints"
+              />
+            </svg>
+          </div>
+          <div class="metric-threshold">
+            <span>扩容阈值: 1000/s</span>
+            <span>目标: 800/s</span>
+          </div>
+        </div>
+
+        <!-- 实例数量 -->
+        <div class="metric-card instances">
+          <div class="metric-header">
+            <span class="metric-icon">🖥️</span>
+            <span class="metric-name">运行实例</span>
+          </div>
+          <div class="instances-display">
+            <div class="instance-count">
+              <span class="count-number">{{ currentInstances }}</span>
+              <span class="count-label">个实例</span>
+            </div>
+            <div class="instance-range">
+              <span>最小: {{ minInstances }}</span>
+              <span>最大: {{ maxInstances }}</span>
+            </div>
+          </div>
+          <div class="instance-visual">
+            <div
+              v-for="i in maxInstances"
+              :key="i"
+              class="instance-dot"
+              :class="{ active: i <= currentInstances, scaling: isScaling && i === currentInstances + 1 }"
+            >
+              {{ i }}
+            </div>
+          </div>
+          <div v-if="scaleReason" class="scale-reason">
+            <span class="reason-icon">{{ scaleReason.includes('扩容') ? '📈' : '📉' }}</span>
+            <span class="reason-text">{{ scaleReason }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 扩缩容历史 -->
+    <div class="scaling-history">
+      <div class="history-header">
+        <span class="history-title">扩缩容历史</span>
+        <span class="history-count">最近 5 次操作</span>
+      </div>
+      <div class="history-list">
+        <div
+          v-for="(record, index) in scalingHistory"
+          :key="index"
+          class="history-item"
+          :class="{ scaleOut: record.type === '缩容' }"
+        >
+          <div class="item-icon">{{ record.type === '扩容' ? '📈' : '📉' }}</div>
+          <div class="item-details">
+            <div class="item-action">
+              {{ record.type }}: {{ record.from }} → {{ record.to }} 实例
+            </div>
+            <div class="item-reason">{{ record.reason }}</div>
+          </div>
+          <div class="item-time">{{ record.time }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 最佳实践 -->
+    <div class="best-practices">
+      <div class="practices-title">自动扩缩容最佳实践</div>
+      <div class="practices-grid">
+        <div class="practice-card">
+          <div class="practice-icon">⏱️</div>
+          <div class="practice-title">冷却时间</div>
+          <div class="practice-desc">
+            设置适当的冷却时间（通常3-5分钟），避免扩缩容操作过于频繁导致的震荡
+          </div>
+        </div>
+        <div class="practice-card">
+          <div class="practice-icon">📊</div>
+          <div class="practice-title">多指标综合</div>
+          <div class="practice-desc">
+            不要依赖单一指标，结合CPU、内存、QPS、连接数等多维度进行综合判断
+          </div>
+        </div>
+        <div class="practice-card">
+          <div class="practice-icon">🎯</div>
+          <div class="practice-title">目标利用率</div>
+          <div class="practice-desc">
+            设置合理的资源目标利用率（如70%），预留足够的缓冲应对突发流量
+          </div>
+        </div>
+        <div class="practice-card">
+          <div class="practice-icon">⚡</div>
+          <div class="practice-title">快速扩容</div>
+          <div class="practice-desc">
+            扩容操作应该比缩容更激进，确保系统能快速应对流量增长
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const currentMetric = ref('cpu')
+const cpuUsage = ref(45)
+const memoryUsage = ref(60)
+const currentQPS = ref(650)
+const currentInstances = ref(3)
+const minInstances = ref(2)
+const maxInstances = ref(10)
+const isScaling = ref(false)
+const scaleReason = ref('')
+
+const metrics = [
+  { key: 'cpu', name: 'CPU 使用率', icon: '💻' },
+  { key: 'memory', name: '内存使用率', icon: '🧠' },
+  { key: 'qps', name: 'QPS', icon: '⚡' }
+]
+
+// QPS 历史数据
+const qpsHistory = ref(Array(20).fill(650))
+
+// 计算 QPS 折线图的点
+const qpsSparklinePoints = computed(() => {
+  const max = Math.max(...qpsHistory.value)
+  const min = Math.min(...qpsHistory.value)
+  const range = max - min || 1
+  return qpsHistory.value.map((qps, index) => {
+    const x = (index / (qpsHistory.value.length - 1)) * 200
+    const y = 40 - ((qps - min) / range) * 35 - 2.5
+    return `${x},${y}`
+  }).join(' ')
+})
+
+// 获取颜色
+const getUsageColor = (usage) => {
+  if (usage > 90) return '#ef4444'
+  if (usage > 70) return '#f59e0b'
+  return '#22c55e'
+}
+
+// 扩缩容历史
+const scalingHistory = ref([
+  { type: '扩容', from: 2, to: 3, reason: 'CPU使用率超过70%', time: '10:23' },
+  { type: '缩容', from: 4, to: 3, reason: 'CPU使用率低于30%', time: '09:15' },
+  { type: '扩容', from: 3, to: 4, reason: 'QPS达到1000/s', time: '08:42' },
+  { type: '扩容', from: 2, to: 3, reason: '内存使用率超过75%', time: '07:30' },
+  { type: '缩容', from: 5, to: 4, reason: '流量下降', time: '06:20' }
+])
+
+// 模拟指标变化
+let simulationInterval
+const startSimulation = () => {
+  simulationInterval = setInterval(() => {
+    // 模拟 CPU 波动
+    const cpuChange = (Math.random() - 0.5) * 10
+    cpuUsage.value = Math.max(20, Math.min(95, cpuUsage.value + cpuChange))
+
+    // 模拟内存波动
+    const memChange = (Math.random() - 0.5) * 8
+    memoryUsage.value = Math.max(30, Math.min(90, memoryUsage.value + memChange))
+
+    // 模拟 QPS 波动
+    const qpsChange = Math.floor((Math.random() - 0.5) * 50)
+    currentQPS.value = Math.max(200, Math.min(1200, currentQPS.value + qpsChange))
+    qpsHistory.value.shift()
+    qpsHistory.value.push(currentQPS.value)
+
+    // 根据指标触发扩缩容逻辑
+    checkScalingLogic()
+  }, 2000)
+}
+
+// 检查扩缩容逻辑
+const checkScalingLogic = () => {
+  if (isScaling.value) return
+
+  let shouldScale = false
+  let newCount = currentInstances.value
+  let reason = ''
+
+  // 扩容检查
+  if (cpuUsage.value > 75 || memoryUsage.value > 75 || currentQPS.value > 900) {
+    if (currentInstances.value < maxInstances.value) {
+      shouldScale = true
+      newCount = currentInstances.value + 1
+      if (cpuUsage.value > 75) reason = 'CPU使用率超过75%'
+      else if (memoryUsage.value > 75) reason = '内存使用率超过75%'
+      else reason = 'QPS超过900/s'
+    }
+  }
+  // 缩容检查
+  else if (cpuUsage.value < 35 && memoryUsage.value < 40 && currentQPS.value < 400) {
+    if (currentInstances.value > minInstances.value) {
+      shouldScale = true
+      newCount = currentInstances.value - 1
+      reason = '资源使用率低于阈值'
+    }
+  }
+
+  if (shouldScale) {
+    triggerScaling(newCount, reason)
+  }
+}
+
+// 触发扩缩容
+const triggerScaling = (newCount, reason) => {
+  isScaling.value = true
+  scaleReason.value = `${newCount > currentInstances.value ? '扩容' : '缩容'}中: ${reason}`
+
+  setTimeout(() => {
+    currentInstances.value = newCount
+    isScaling.value = false
+    scaleReason.value = ''
+
+    // 添加到历史
+    scalingHistory.value.unshift({
+      type: newCount > currentInstances.value ? '扩容' : '缩容',
+      from: newCount > currentInstances.value ? newCount - 1 : newCount + 1,
+      to: newCount,
+      reason,
+      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+    })
+    scalingHistory.value = scalingHistory.value.slice(0, 5)
+  }, 3000)
+}
+
+onMounted(() => {
+  startSimulation()
+})
+
+onUnmounted(() => {
+  clearInterval(simulationInterval)
+})
+</script>
+
+<style scoped>
+.auto-scaling-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Metric Selector */
+.metric-selector {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+}
+
+.selector-label {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.selector-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.metric-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.metric-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.metric-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.btn-icon {
+  font-size: 1rem;
+}
+
+/* Monitoring Dashboard */
+.monitoring-dashboard {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.dashboard-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.refresh-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.live-dot {
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.metric-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.metric-card.warning {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.05);
+}
+
+.metric-card.danger {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.metric-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.metric-icon {
+  font-size: 1.25rem;
+}
+
+.metric-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.metric-value {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.value-number {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.value-unit {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+}
+
+.metric-progress {
+  height: 8px;
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.metric-threshold {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.metric-chart {
+  height: 40px;
+  margin-bottom: 0.5rem;
+}
+
+.sparkline {
+  width: 100%;
+  height: 100%;
+}
+
+/* Instances Card */
+.metric-card.instances {
+  grid-column: span 2;
+}
+
+@media (max-width: 768px) {
+  .metric-card.instances {
+    grid-column: span 1;
+  }
+}
+
+.instances-display {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.instance-count {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.count-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+}
+
+.count-label {
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+}
+
+.instance-range {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.instance-visual {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.instance-dot {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 50%;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  transition: all 0.3s;
+}
+
+.instance-dot.active {
+  background: var(--vp-c-brand-soft);
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  box-shadow: 0 0 0 4px var(--vp-c-brand-soft);
+}
+
+.instance-dot.scaling {
+  animation: scaleIn 1s ease-in-out infinite;
+}
+
+@keyframes scaleIn {
+  0%, 100% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.1); opacity: 1; }
+}
+
+.scale-reason {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-brand-soft);
+  border-radius: 20px;
+  font-size: 0.85rem;
+  color: var(--vp-c-brand);
+}
+
+.reason-icon {
+  font-size: 1rem;
+}
+
+/* Scaling History */
+.scaling-history {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.history-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.history-count {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.history-item.scaleOut {
+  border-left: 3px solid #22c55e;
+}
+
+.history-item:not(.scaleOut) {
+  border-left: 3px solid #f59e0b;
+}
+
+.item-icon {
+  font-size: 1.25rem;
+}
+
+.item-details {
+  flex: 1;
+}
+
+.item-action {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.15rem;
+}
+
+.item-reason {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.item-time {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+}
+
+/* Best Practices */
+.best-practices {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.practices-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.practices-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .practices-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.practice-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.practice-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.practice-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.practice-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
new file mode 100644
index 0000000..6b3bc06
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
@@ -0,0 +1,924 @@
+<template>
+  <div class="blue-green-deployment-demo">
+    <div class="header">
+      <div class="title">蓝绿部署</div>
+      <div class="subtitle">零停机发布的经典策略，两套环境瞬间切换</div>
+    </div>
+
+    <!-- 部署状态控制 -->
+    <div class="deployment-control">
+      <div class="status-display">
+        <div class="status-item" :class="{ active: currentEnv === 'blue' }">
+          <div class="status-icon">🔵</div>
+          <div class="status-label">蓝环境</div>
+          <div class="status-version">v{{ blueVersion }}</div>
+          <div class="status-traffic">
+            {{ currentEnv === 'blue' ? '100%' : '0%' }} 流量
+          </div>
+        </div>
+
+        <div class="switch-control">
+          <button
+            class="switch-btn"
+            @click="toggleEnvironment"
+            :disabled="isSwitching"
+            :class="{ switching: isSwitching }"
+          >
+            <span v-if="!isSwitching">
+              {{ currentEnv === 'blue' ? '切换到绿环境 →' : '← 切换到蓝环境' }}
+            </span>
+            <span v-else class="switching-text">
+              <span class="spinner"></span>
+              切换中...
+            </span>
+          </button>
+
+          <div class="progress-bar" v-if="isSwitching">
+            <div class="progress-fill" :style="{ width: switchProgress + '%' }"></div>
+          </div>
+        </div>
+
+        <div class="status-item" :class="{ active: currentEnv === 'green' }">
+          <div class="status-icon">🟢</div>
+          <div class="status-label">绿环境</div>
+          <div class="status-version">v{{ greenVersion }}</div>
+          <div class="status-traffic">
+            {{ currentEnv === 'green' ? '100%' : '0%' }} 流量
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 架构可视化 -->
+    <div class="architecture-view">
+      <div class="layer users">
+        <div class="layer-title">用户流量</div>
+        <div class="users-row">
+          <div v-for="i in 5" :key="i" class="user-avatar" :class="{ active: isUserActive(i) }">
+            👤
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">↓</div>
+
+      <div class="layer load-balancer">
+        <div class="lb-box">
+          <div class="lb-icon">⚖️</div>
+          <div class="lb-info">
+            <div class="lb-title">负载均衡器</div>
+            <div class="lb-status">
+              当前指向:
+              <span class="env-badge" :class="currentEnv">
+                {{ currentEnv === 'blue' ? '🔵 蓝环境' : '🟢 绿环境' }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">↓</div>
+
+      <div class="layer environments">
+        <div class="env-row">
+          <!-- 蓝环境 -->
+          <div class="env-box" :class="{ active: currentEnv === 'blue', standby: currentEnv === 'green' }">
+            <div class="env-header">
+              <span class="env-icon">🔵</span>
+              <span class="env-name">蓝环境</span>
+              <span class="env-badge version">v{{ blueVersion }}</span>
+            </div>
+            <div class="env-content">
+              <div class="server-list">
+                <div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('blue', i) }">
+                  <span class="server-icon">🖥️</span>
+                  <span class="server-name">B{{ i }}</span>
+                  <span class="server-status" :class="getServerStatus('blue', i)">
+                    {{ getServerStatus('blue', i) === 'healthy' ? '●' : '○' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="env-footer">
+              <div class="traffic-indicator">
+                <span class="indicator-label">流量:</span>
+                <span class="indicator-value" :class="{ active: currentEnv === 'blue' }">
+                  {{ currentEnv === 'blue' ? '100%' : '0%' }}
+                </span>
+              </div>
+              <div class="status-badge" :class="currentEnv === 'blue' ? 'active' : 'standby'">
+                {{ currentEnv === 'blue' ? '生产环境' : '待命' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 绿环境 -->
+          <div class="env-box" :class="{ active: currentEnv === 'green', standby: currentEnv === 'blue' }">
+            <div class="env-header">
+              <span class="env-icon">🟢</span>
+              <span class="env-name">绿环境</span>
+              <span class="env-badge version">v{{ greenVersion }}</span>
+            </div>
+            <div class="env-content">
+              <div class="server-list">
+                <div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('green', i) }">
+                  <span class="server-icon">🖥️</span>
+                  <span class="server-name">G{{ i }}</span>
+                  <span class="server-status" :class="getServerStatus('green', i)">
+                    {{ getServerStatus('green', i) === 'healthy' ? '●' : '○' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="env-footer">
+              <div class="traffic-indicator">
+                <span class="indicator-label">流量:</span>
+                <span class="indicator-value" :class="{ active: currentEnv === 'green' }">
+                  {{ currentEnv === 'green' ? '100%' : '0%' }}
+                </span>
+              </div>
+              <div class="status-badge" :class="currentEnv === 'green' ? 'active' : 'standby'">
+                {{ currentEnv === 'green' ? '生产环境' : '待命' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 部署流程说明 -->
+    <div class="deployment-process">
+      <div class="process-title">蓝绿部署流程</div>
+      <div class="process-steps">
+        <div class="step" :class="{ active: deploymentStep >= 1 }">
+          <div class="step-number">1</div>
+          <div class="step-content">
+            <div class="step-title">绿环境部署</div>
+            <div class="step-desc">在绿环境部署新版本，进行冒烟测试</div>
+          </div>
+        </div>
+        <div class="step-arrow">→</div>
+        <div class="step" :class="{ active: deploymentStep >= 2 }">
+          <div class="step-number">2</div>
+          <div class="step-content">
+            <div class="step-title">切换流量</div>
+            <div class="step-desc">将负载均衡器指向绿环境，流量瞬间切换</div>
+          </div>
+        </div>
+        <div class="step-arrow">→</div>
+        <div class="step" :class="{ active: deploymentStep >= 3 }">
+          <div class="step-number">3</div>
+          <div class="step-content">
+            <div class="step-title">监控观察</div>
+            <div class="step-desc">观察绿环境运行状态，确认无异常</div>
+          </div>
+        </div>
+        <div class="step-arrow">→</div>
+        <div class="step" :class="{ active: deploymentStep >= 4 }">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <div class="step-title">蓝环境升级</div>
+            <div class="step-desc">在蓝环境部署新版本，为下次切换做准备</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 优缺点分析 -->
+    <div class="pros-cons-analysis">
+      <div class="analysis-title">蓝绿部署优缺点</div>
+      <div class="analysis-grid">
+        <div class="analysis-card pros">
+          <div class="card-header">
+            <span class="header-icon">✅</span>
+            <span class="header-title">优点</span>
+          </div>
+          <div class="card-body">
+            <ul class="feature-list">
+              <li class="feature-item">
+                <span class="item-title">零停机时间：</span>
+                <span class="item-desc">流量切换在毫秒级完成，用户无感知</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">快速回滚：</span>
+                <span class="item-desc">发现问题可立即切回原环境，风险可控</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">完整的预发布测试：</span>
+                <span class="item-desc">新环境可完整测试后再接管流量</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">数据一致性：</span>
+                <span class="item-desc">无需处理新旧版本同时运行时的兼容问题</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="analysis-card cons">
+          <div class="card-header">
+            <span class="header-icon">❌</span>
+            <span class="header-title">缺点</span>
+          </div>
+          <div class="card-body">
+            <ul class="feature-list">
+              <li class="feature-item">
+                <span class="item-title">资源成本高：</span>
+                <span class="item-desc">需要同时维护两套完整环境，服务器成本翻倍</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">数据库兼容性挑战：</span>
+                <span class="item-desc">如果涉及数据库Schema变更，需要特别处理兼容性</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">预热问题：</span>
+                <span class="item-desc">新环境启动后可能需要时间预热缓存、连接池等</span>
+              </li>
+              <li class="feature-item">
+                <span class="item-title">不适合有状态服务：</span>
+                <span class="item-desc">对于长连接、会话保持要求高的场景处理复杂</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const currentEnv = ref('blue')
+const blueVersion = ref('1.0.0')
+const greenVersion = ref('1.1.0')
+const isSwitching = ref(false)
+const switchProgress = ref(0)
+const deploymentStep = ref(4)
+
+// 加权服务器数据
+const weightedServers = ref([
+  { id: 1, name: 'Server 1', specs: '16核 64GB NVMe', ip: '10.0.1.10', weight: 5, status: 'healthy' },
+  { id: 2, name: 'Server 2', specs: '8核 32GB SSD', ip: '10.0.1.11', weight: 3, status: 'healthy' },
+  { id: 3, name: 'Server 3', specs: '4核 16GB SSD', ip: '10.0.1.12', weight: 2, status: 'healthy' }
+])
+
+const totalTraffic = ref(1000)
+
+const getTotalWeight = () => {
+  return weightedServers.value.reduce((sum, s) => sum + s.weight, 0)
+}
+
+const getAllocationPercentage = (weight) => {
+  const total = getTotalWeight()
+  return total > 0 ? (weight / total) * 100 : 0
+}
+
+const getWeightColor = (index) => {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6']
+  return colors[index % colors.length]
+}
+
+// 流量流动画
+const trafficFlows = ref([])
+
+const generateTrafficFlows = () => {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b']
+  trafficFlows.value = Array.from({ length: 12 }, (_, i) => ({
+    delay: i * 0.2,
+    color: colors[Math.floor(Math.random() * colors.length)]
+  }))
+}
+
+const isUserActive = (index) => {
+  return index <= 3 || (currentEnv.value === 'green' && index > 3)
+}
+
+const isServerBusy = (env, index) => {
+  return (currentEnv.value === env && index <= 2)
+}
+
+const getServerStatus = (env, index) => {
+  return 'healthy'
+}
+
+const toggleEnvironment = async () => {
+  if (isSwitching.value) return
+
+  isSwitching.value = true
+  switchProgress.value = 0
+
+  // 模拟切换进度
+  const interval = setInterval(() => {
+    switchProgress.value += 10
+    if (switchProgress.value >= 100) {
+      clearInterval(interval)
+      currentEnv.value = currentEnv.value === 'blue' ? 'green' : 'blue'
+      isSwitching.value = false
+      switchProgress.value = 0
+    }
+  }, 100)
+}
+
+onMounted(() => {
+  generateTrafficFlows()
+})
+</script>
+
+<style scoped>
+.blue-green-deployment-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Deployment Control */
+.deployment-control {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.status-display {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .status-display {
+    grid-template-columns: 1fr;
+  }
+}
+
+.status-item {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1rem;
+  text-align: center;
+  transition: all 0.3s;
+  opacity: 0.6;
+}
+
+.status-item.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  opacity: 1;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+.status-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.status-label {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.status-version {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--vp-c-brand);
+  background: var(--vp-c-bg);
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+.status-traffic {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  font-weight: 600;
+}
+
+.switch-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.switch-btn {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 200px;
+}
+
+.switch-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+}
+
+.switch-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.switch-btn.switching {
+  background: linear-gradient(135deg, #6b7280, #9ca3af);
+}
+
+.switching-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.progress-bar {
+  width: 100%;
+  max-width: 200px;
+  height: 6px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #22c55e);
+  border-radius: 3px;
+  transition: width 0.1s;
+}
+
+/* Architecture View */
+.architecture-view {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.layer {
+  margin-bottom: 0.75rem;
+}
+
+.layer-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.users-row {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 50%;
+  font-size: 1.25rem;
+  transition: all 0.3s;
+  opacity: 0.5;
+}
+
+.user-avatar.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.arrow-down {
+  text-align: center;
+  font-size: 1.5rem;
+  color: var(--vp-c-text-3);
+  margin: 0.25rem 0;
+}
+
+/* Load Balancer */
+.load-balancer {
+  display: flex;
+  justify-content: center;
+}
+
+.lb-box {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.lb-icon {
+  font-size: 2rem;
+}
+
+.lb-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.lb-status {
+  font-size: 0.8rem;
+  opacity: 0.9;
+  margin-top: 0.25rem;
+}
+
+.env-badge {
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+.env-badge.blue {
+  background: rgba(59, 130, 246, 0.3);
+  color: #bfdbfe;
+}
+
+.env-badge.green {
+  background: rgba(34, 197, 94, 0.3);
+  color: #bbf7d0;
+}
+
+/* Environments */
+.env-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .env-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.env-box {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s;
+  opacity: 0.7;
+}
+
+.env-box.active {
+  border-color: var(--vp-c-brand);
+  opacity: 1;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+}
+
+.env-box.standby {
+  border-color: var(--vp-c-text-3);
+}
+
+.env-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.env-icon {
+  font-size: 1.25rem;
+}
+
+.env-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  flex: 1;
+}
+
+.env-badge.version {
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+}
+
+.env-content {
+  padding: 0.75rem;
+}
+
+.server-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.server-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.server-item.busy {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.server-icon {
+  font-size: 1rem;
+}
+
+.server-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  flex: 1;
+}
+
+.server-status {
+  font-size: 0.75rem;
+}
+
+.server-status.healthy {
+  color: #22c55e;
+}
+
+.env-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.traffic-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.indicator-label {
+  color: var(--vp-c-text-2);
+}
+
+.indicator-value {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.indicator-value.active {
+  color: var(--vp-c-brand);
+}
+
+.status-badge {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.status-badge.active {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.status-badge.standby {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+/* Deployment Process */
+.deployment-process {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.process-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.process-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  opacity: 0.5;
+  transition: all 0.3s;
+}
+
+.step.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  opacity: 1;
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.15rem;
+}
+
+.step-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.step-arrow {
+  font-size: 1.25rem;
+  color: var(--vp-c-text-3);
+}
+
+/* Pros Cons Analysis */
+.pros-cons-analysis {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.analysis-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.analysis-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .analysis-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.analysis-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.analysis-card.pros {
+  border-color: #22c55e;
+}
+
+.analysis-card.cons {
+  border-color: #ef4444;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.analysis-card.pros .card-header {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.analysis-card.cons .card-header {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.header-icon {
+  font-size: 1.25rem;
+}
+
+.header-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+.feature-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feature-item {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+  line-height: 1.5;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.item-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.item-desc {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
new file mode 100644
index 0000000..fa12bc1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
@@ -0,0 +1,686 @@
+<template>
+  <div class="canary-release-demo">
+    <div class="header">
+      <div class="title">金丝雀发布</div>
+      <div class="subtitle">灰度发布策略，小流量先行验证新版本</div>
+    </div>
+
+    <!-- 流量分配控制 -->
+    <div class="traffic-control">
+      <div class="control-header">
+        <span class="control-title">流量分配比例</span>
+        <span class="control-hint">拖动滑块调整新旧版本流量占比</span>
+      </div>
+
+      <div class="slider-container">
+        <div class="version-labels">
+          <span class="version-label stable">
+            <span class="dot blue"></span>
+            稳定版 v{{ stableVersion }}
+          </span>
+          <span class="percentage stable">{{ 100 - canaryPercentage }}%</span>
+        </div>
+
+        <input
+          type="range"
+          v-model.number="canaryPercentage"
+          min="0"
+          max="100"
+          step="5"
+          class="traffic-slider"
+        />
+
+        <div class="version-labels">
+          <span class="version-label canary">
+            <span class="dot yellow"></span>
+            金丝雀 v{{ canaryVersion }}
+          </span>
+          <span class="percentage canary">{{ canaryPercentage }}%</span>
+        </div>
+      </div>
+
+      <!-- 预设按钮 -->
+      <div class="preset-buttons">
+        <button
+          v-for="preset in trafficPresets"
+          :key="preset.value"
+          class="preset-btn"
+          :class="{ active: canaryPercentage === preset.value }"
+          @click="canaryPercentage = preset.value"
+        >
+          {{ preset.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 可视化流量 -->
+    <div class="traffic-visualization">
+      <div class="viz-header">
+        <span class="viz-title">实时流量模拟</span>
+        <span class="viz-stats">
+          总请求: {{ totalRequests }} |
+          稳定版: {{ stableRequests }} |
+          金丝雀: {{ canaryRequests }}
+        </span>
+      </div>
+
+      <div class="traffic-pipeline">
+        <div class="pipeline-stage">
+          <div class="stage-label">用户请求</div>
+          <div class="request-bubbles">
+            <div
+              v-for="(req, index) in requestQueue"
+              :key="index"
+              class="request-bubble"
+              :class="{ canary: req.isCanary }"
+              :style="{ animationDelay: req.delay + 's' }"
+            >
+              {{ req.isCanary ? 'C' : 'S' }}
+            </div>
+          </div>
+        </div>
+
+        <div class="pipeline-arrow">→</div>
+
+        <div class="pipeline-stage">
+          <div class="stage-label">负载均衡器</div>
+          <div class="lb-diagram">
+            <div class="lb-icon">⚖️</div>
+            <div class="routing-logic">
+              <div class="logic-line">
+                <span class="logic-label">Canary:</span>
+                <span class="logic-value">{{ canaryPercentage }}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="pipeline-arrow">→</div>
+
+        <div class="pipeline-stage">
+          <div class="stage-label">后端服务</div>
+          <div class="backend-pods">
+            <div class="pod-group stable">
+              <div class="pod-label">稳定版 v{{ stableVersion }}</div>
+              <div class="pods-row">
+                <div
+                  v-for="i in 3"
+                  :key="i"
+                  class="pod"
+                  :class="{ active: hasTrafficToStable }"
+                >
+                  <span class="pod-icon">📦</span>
+                  <span class="pod-name">S{{ i }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="pod-group canary">
+              <div class="pod-label">金丝雀 v{{ canaryVersion }}</div>
+              <div class="pods-row">
+                <div
+                  v-for="i in 2"
+                  :key="i"
+                  class="pod"
+                  :class="{ active: hasTrafficToCanary }"
+                >
+                  <span class="pod-icon">🧪</span>
+                  <span class="pod-name">C{{ i }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 金丝雀发布策略 -->
+    <div class="canary-strategy">
+      <div class="strategy-title">金丝雀发布最佳实践</div>
+
+      <div class="strategy-grid">
+        <div class="strategy-card">
+          <div class="card-header">
+            <span class="card-icon">📊</span>
+            <span class="card-title">渐进式放量</span>
+          </div>
+          <div class="card-body">
+            <ul class="strategy-list">
+              <li>1% → 5% → 10% → 25% → 50% → 100%</li>
+              <li>每个阶段观察至少15-30分钟</li>
+              <li>关键指标：错误率、延迟、吞吐量</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="strategy-card">
+          <div class="card-header">
+            <span class="card-icon">🎯</span>
+            <span class="card-title">精准用户选择</span>
+          </div>
+          <div class="card-body">
+            <ul class="strategy-list">
+              <li>内部员工/测试用户先行</li>
+              <li>按地域：选择特定区域用户</li>
+              <li>按用户属性：VIP用户或普通用户</li>
+              <li>按设备类型：iOS/Android/Web</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="strategy-card">
+          <div class="card-header">
+            <span class="card-icon">🛡️</span>
+            <span class="card-title">自动回滚机制</span>
+          </div>
+          <div class="card-body">
+            <ul class="strategy-list">
+              <li>错误率超过阈值自动回滚</li>
+              <li>P99延迟异常触发告警</li>
+              <li>关键业务指标下降自动回滚</li>
+              <li>一键回滚：30秒内恢复旧版本</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="strategy-card">
+          <div class="card-header">
+            <span class="card-icon">📈</span>
+            <span class="card-title">监控与指标</span>
+          </div>
+          <div class="card-body">
+            <ul class="strategy-list">
+              <li>基础设施：CPU、内存、磁盘、网络</li>
+              <li>应用指标：QPS、错误率、延迟分布</li>
+              <li>业务指标：转化率、订单量、收入</li>
+              <li>用户体验：页面加载时间、交互延迟</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const canaryPercentage = ref(10)
+const stableVersion = ref('1.0.0')
+const canaryVersion = ref('1.1.0')
+const currentEnv = ref('blue')
+const isSwitching = ref(false)
+const blueVersion = ref('1.0.0')
+const greenVersion = ref('1.1.0')
+const switchProgress = ref(0)
+const deploymentStep = ref(4)
+
+const trafficPresets = [
+  { label: '1%', value: 1 },
+  { label: '5%', value: 5 },
+  { label: '10%', value: 10 },
+  { label: '25%', value: 25 },
+  { label: '50%', value: 50 },
+  { label: '100%', value: 100 }
+]
+
+// 请求队列
+const requestQueue = ref([])
+const totalRequests = ref(0)
+const stableRequests = ref(0)
+const canaryRequests = ref(0)
+
+// 计算属性
+const hasTrafficToStable = computed(() => canaryPercentage.value < 100)
+const hasTrafficToCanary = computed(() => canaryPercentage.value > 0)
+
+// 生成请求
+const generateRequests = () => {
+  const isCanary = Math.random() * 100 < canaryPercentage.value
+  const request = {
+    isCanary,
+    delay: Math.random() * 2
+  }
+  requestQueue.value.push(request)
+  if (requestQueue.value.length > 10) {
+    requestQueue.value.shift()
+  }
+
+  // 更新统计
+  totalRequests.value++
+  if (isCanary) {
+    canaryRequests.value++
+  } else {
+    stableRequests.value++
+  }
+}
+
+let requestInterval
+onMounted(() => {
+  requestInterval = setInterval(generateRequests, 500)
+})
+
+onUnmounted(() => {
+  clearInterval(requestInterval)
+})
+</script>
+
+<style scoped>
+.canary-release-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Traffic Control */
+.traffic-control {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.control-header {
+  margin-bottom: 1.5rem;
+}
+
+.control-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.control-hint {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.slider-container {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.version-labels {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.version-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.version-label.stable {
+  color: #3b82f6;
+}
+
+.version-label.canary {
+  color: #f59e0b;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.dot.blue {
+  background: #3b82f6;
+}
+
+.dot.yellow {
+  background: #f59e0b;
+}
+
+.percentage {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.percentage.stable {
+  color: #3b82f6;
+}
+
+.percentage.canary {
+  color: #f59e0b;
+}
+
+.traffic-slider {
+  width: 100%;
+  height: 8px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 v-bind('(100 - canaryPercentage) + "%"'), #f59e0b v-bind('(100 - canaryPercentage) + "%"'), #f59e0b 100%);
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+.traffic-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  background: white;
+  border: 3px solid var(--vp-c-brand);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.preset-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.preset-btn {
+  padding: 0.4rem 0.8rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.preset-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.preset-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+/* Traffic Visualization */
+.traffic-visualization {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.viz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.viz-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.viz-stats {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.traffic-pipeline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 1rem 0;
+}
+
+.pipeline-stage {
+  flex-shrink: 0;
+}
+
+.stage-label {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.request-bubbles {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: center;
+}
+
+.request-bubble {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #3b82f6;
+  color: white;
+  border-radius: 50%;
+  font-size: 0.65rem;
+  font-weight: 600;
+  animation: bubbleFlow 2s ease-in-out infinite;
+}
+
+.request-bubble.canary {
+  background: #f59e0b;
+}
+
+@keyframes bubbleFlow {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(-5px); opacity: 0.8; }
+}
+
+.pipeline-arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+}
+
+.lb-diagram {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+}
+
+.lb-icon {
+  font-size: 1.5rem;
+}
+
+.routing-logic {
+  font-size: 0.75rem;
+}
+
+.logic-line {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.logic-label {
+  opacity: 0.8;
+}
+
+.logic-value {
+  font-weight: 600;
+}
+
+.backend-pods {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.pod-group {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.pod-group.stable {
+  border-left: 4px solid #3b82f6;
+}
+
+.pod-group.canary {
+  border-left: 4px solid #f59e0b;
+}
+
+.pod-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.pods-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.pod {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.4rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  min-width: 40px;
+  opacity: 0.5;
+  transition: all 0.3s;
+}
+
+.pod.active {
+  opacity: 1;
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
+}
+
+.pod.busy {
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.pod-icon {
+  font-size: 1rem;
+}
+
+.pod-name {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-2);
+  font-weight: 600;
+}
+
+/* Canary Strategy */
+.canary-strategy {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.strategy-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.strategy-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .strategy-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.strategy-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.card-icon {
+  font-size: 1.25rem;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+.strategy-list {
+  margin: 0;
+  padding-left: 1.2rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.strategy-list li {
+  margin-bottom: 0.25rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
new file mode 100644
index 0000000..e5bce91
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
@@ -0,0 +1,691 @@
+<template>
+  <div class="health-check-demo">
+    <div class="header">
+      <div class="title">健康检查机制</div>
+      <div class="subtitle">主动探测、被动感知与智能阈值</div>
+    </div>
+
+    <!-- 模式选择器 -->
+    <div class="mode-selector">
+      <button
+        v-for="mode in modes"
+        :key="mode.key"
+        class="mode-btn"
+        :class="{ active: currentMode === mode.key }"
+        @click="currentMode = mode.key"
+      >
+        <span class="mode-icon">{{ mode.icon }}</span>
+        <span class="mode-name">{{ mode.name }}</span>
+      </button>
+    </div>
+
+    <!-- 可视化展示区 -->
+    <div class="visualization-area">
+      <!-- 负载均衡器 -->
+      <div class="lb-node">
+        <div class="lb-icon">⚖️</div>
+        <div class="lb-label">负载均衡器</div>
+        <div class="lb-status">{{ currentModeData.label }}</div>
+      </div>
+
+      <!-- 连接线和健康检查标记 -->
+      <div class="connections-layer">
+        <div
+          v-for="(server, index) in servers"
+          :key="index"
+          class="connection-line"
+          :class="{
+            healthy: server.status === 'healthy',
+            unhealthy: server.status === 'unhealthy',
+            checking: server.status === 'checking'
+          }"
+        >
+          <div class="health-packet" v-if="server.showPacket">{{ server.packetType }}</div>
+          <div class="health-indicator">
+            <span v-if="server.status === 'healthy'">✅</span>
+            <span v-else-if="server.status === 'unhealthy'">❌</span>
+            <span v-else">🔄</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 后端服务器 -->
+      <div class="servers-grid">
+        <div
+          v-for="(server, index) in servers"
+          :key="index"
+          class="server-card"
+          :class="{
+            healthy: server.status === 'healthy',
+            unhealthy: server.status === 'unhealthy',
+            checking: server.status === 'checking'
+          }"
+        >
+          <div class="server-header">
+            <div class="server-icon">🖥️</div>
+            <div class="server-info">
+              <div class="server-name">Server {{ index + 1 }}</div>
+              <div class="server-ip">{{ server.ip }}</div>
+            </div>
+            <div class="status-badge" :class="server.status">
+              {{ server.status === 'healthy' ? '健康' : server.status === 'unhealthy' ? '故障' : '检查中' }}
+            </div>
+          </div>
+
+          <div class="server-metrics">
+            <div class="metric">
+              <div class="metric-label">响应时间</div>
+              <div class="metric-value" :class="{ warning: server.responseTime > 100 }">{{ server.responseTime }}ms</div>
+            </div>
+            <div class="metric">
+              <div class="metric-label">失败率</div>
+              <div class="metric-value" :class="{ danger: server.errorRate > 5 }">{{ server.errorRate }}%</div>
+            </div>
+            <div class="metric">
+              <div class="metric-label">连续成功</div>
+              <div class="metric-value">{{ server.consecutiveSuccess }}/3</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 检查机制详情 -->
+    <div class="mechanism-details">
+      <div class="detail-card">
+        <div class="card-header">
+          <span class="card-icon">{{ currentModeData.icon }}</span>
+          <span class="card-title">{{ currentModeData.name }}</span>
+        </div>
+        <div class="card-body">
+          <p class="description">{{ currentModeData.description }}</p>
+
+          <div class="config-section">
+            <div class="section-title">关键配置参数</div>
+            <div class="config-grid">
+              <div
+                v-for="param in currentModeData.params"
+                :key="param.name"
+                class="config-item"
+              >
+                <div class="config-name">{{ param.name }}</div>
+                <div class="config-value">{{ param.value }}</div>
+                <div class="config-desc">{{ param.desc }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="pros-cons">
+            <div class="pros">
+              <div class="pros-cons-title">✅ 优点</div>
+              <ul>
+                <li v-for="pro in currentModeData.pros" :key="pro">{{ pro }}</li>
+              </ul>
+            </div>
+            <div class="cons">
+              <div class="pros-cons-title">❌ 缺点</div>
+              <ul>
+                <li v-for="con in currentModeData.cons" :key="con">{{ con }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const currentMode = ref('active')
+
+const modes = [
+  {
+    key: 'active',
+    name: '主动健康检查',
+    icon: '🔍',
+    label: 'Probing'
+  },
+  {
+    key: 'passive',
+    name: '被动健康检查',
+    icon: '👁️',
+    label: 'Observing'
+  },
+  {
+    key: 'threshold',
+    name: '阈值判定',
+    icon: '📊',
+    label: 'Threshold'
+  }
+]
+
+const modeDetails = {
+  active: {
+    name: '主动健康检查',
+    icon: '🔍',
+    label: '定期主动探测',
+    description: '负载均衡器主动向后端服务器发送探测请求（如HTTP /health、TCP握手等），根据响应判断服务器健康状态。这是最常用的健康检查方式。',
+    params: [
+      { name: '检查间隔', value: '5s', desc: '两次检查之间的时间间隔' },
+      { name: '超时时间', value: '3s', desc: '等待响应的最大时间' },
+      { name: '健康阈值', value: '2', desc: '判定为健康所需的连续成功次数' },
+      { name: '不健康阈值', value: '3', desc: '判定为不健康所需的连续失败次数' }
+    ],
+    pros: [
+      '检测结果准确可靠，能真实反映服务状态',
+      '可以精确配置检查参数和阈值',
+      '不依赖实际业务流量，无流量时也能检测'
+    ],
+    cons: [
+      '产生额外的探测流量和系统开销',
+      '检查间隔期间发生的故障不能立即发现',
+      '需要后端服务提供健康检查端点'
+    ]
+  },
+  passive: {
+    name: '被动健康检查',
+    icon: '👁️',
+    label: '观察实际流量',
+    description: '负载均衡器通过监控实际业务流量的响应情况来判断后端健康状态。不发送额外的探测请求，而是分析真实请求的响应时间、状态码等指标。',
+    params: [
+      { name: '采样窗口', value: '60s', desc: '统计响应时间的时间窗口' },
+      { name: '错误阈值', value: '10%', desc: '可接受的最大错误率' },
+      { name: '延迟阈值', value: '500ms', desc: '可接受的最大平均延迟' },
+      { name: '最小样本', value: '100', desc: '判定所需的最小请求数' }
+    ],
+    pros: [
+      '不产生额外的探测流量',
+      '能反映真实业务场景下的服务状态',
+      '对无法提供健康检查端点的服务也有效'
+    ],
+    cons: [
+      '需要足够的流量样本才能判定',
+      '低流量时可能无法及时发现问题',
+      '检测结果受业务流量特征影响较大'
+    ]
+  },
+  threshold: {
+    name: '阈值判定机制',
+    icon: '📊',
+    label: '多维度阈值',
+    description: '结合多种指标（响应时间、错误率、连接数、CPU/内存使用率等）设置阈值，进行综合判定。支持动态阈值调整，适应不同负载场景。',
+    params: [
+      { name: '响应时间P99', value: '200ms', desc: '99%请求的响应时间阈值' },
+      { name: '错误率', value: '1%', desc: '可接受的最大错误比例' },
+      { name: '连接数', value: '1000', desc: '最大并发连接数限制' },
+      { name: 'CPU使用率', value: '80%', desc: '服务器CPU使用率阈值' }
+    ],
+    pros: [
+      '多维度综合判定，结果更全面准确',
+      '可根据业务特点灵活配置阈值',
+      '支持动态阈值调整，适应负载变化'
+    ],
+    cons: [
+      '配置复杂，需要深入理解各项指标',
+      '阈值设置不当可能导致误判',
+      '需要持续调优以达到最佳效果'
+    ]
+  }
+}
+
+const currentModeData = computed(() => modeDetails[currentMode.value])
+
+// 模拟服务器数据
+const servers = ref([
+  { ip: '10.0.1.10', status: 'healthy', responseTime: 25, errorRate: 0.1, consecutiveSuccess: 5, showPacket: false, packetType: '' },
+  { ip: '10.0.1.11', status: 'healthy', responseTime: 30, errorRate: 0.2, consecutiveSuccess: 4, showPacket: false, packetType: '' },
+  { ip: '10.0.1.12', status: 'unhealthy', responseTime: 3500, errorRate: 15, consecutiveSuccess: 0, showPacket: false, packetType: '' }
+])
+
+// 模拟健康检查动画
+let healthCheckInterval
+let packetInterval
+
+const simulateHealthCheck = () => {
+  // 随机选择一个服务器发送健康检查包
+  const serverIndex = Math.floor(Math.random() * servers.value.length)
+  const server = servers.value[serverIndex]
+
+  server.showPacket = true
+  server.packetType = currentMode.value === 'active' ? 'GET /health' : currentMode.value === 'passive' ? 'Observing' : 'Metrics'
+
+  setTimeout(() => {
+    server.showPacket = false
+
+    // 模拟检查结果
+    if (server.status === 'healthy') {
+      server.consecutiveSuccess = Math.min(server.consecutiveSuccess + 1, 5)
+      server.responseTime = Math.floor(Math.random() * 50) + 20
+    } else if (server.status === 'unhealthy') {
+      server.consecutiveSuccess = 0
+      server.responseTime = 3000 + Math.floor(Math.random() * 2000)
+    }
+  }, 500)
+}
+
+onMounted(() => {
+  // 启动健康检查模拟
+  healthCheckInterval = setInterval(() => {
+    simulateHealthCheck()
+  }, 2000)
+
+  // 轮播显示活跃服务器
+  packetInterval = setInterval(() => {
+    const healthyServers = servers.value.filter(s => s.status === 'healthy')
+    if (healthyServers.length > 0) {
+      const randomServer = healthyServers[Math.floor(Math.random() * healthyServers.length)]
+      activeServer.value = servers.value.indexOf(randomServer)
+    }
+  }, 1500)
+})
+
+onUnmounted(() => {
+  clearInterval(healthCheckInterval)
+  clearInterval(packetInterval)
+})
+
+const activeServer = ref(0)
+</script>
+
+<style scoped>
+.health-check-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Mode Selector */
+.mode-selector {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .mode-selector {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mode-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+}
+
+.mode-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.mode-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.mode-icon {
+  font-size: 1.2rem;
+}
+
+.mode-name {
+  font-weight: 600;
+}
+
+/* Visualization Area */
+.visualization-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+}
+
+.lb-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.lb-icon {
+  font-size: 1.5rem;
+}
+
+.lb-label {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.lb-status {
+  font-size: 0.75rem;
+  opacity: 0.9;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* Connections Layer */
+.connections-layer {
+  display: flex;
+  gap: 2rem;
+}
+
+.connection-line {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.3s;
+  min-width: 80px;
+}
+
+.connection-line.healthy {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.connection-line.unhealthy {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.connection-line.checking {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.health-packet {
+  position: absolute;
+  top: -20px;
+  font-size: 0.7rem;
+  background: var(--vp-c-brand);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  animation: packetMove 1s ease-in-out;
+}
+
+@keyframes packetMove {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(30px); opacity: 0; }
+}
+
+.health-indicator {
+  font-size: 1.25rem;
+}
+
+/* Servers Grid */
+.servers-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  width: 100%;
+  max-width: 800px;
+}
+
+@media (max-width: 768px) {
+  .servers-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.server-card {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.server-card.healthy {
+  border-color: #22c55e;
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.server-card.unhealthy {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.server-card.checking {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.05);
+}
+
+.server-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.server-icon {
+  font-size: 1.25rem;
+}
+
+.server-info {
+  flex: 1;
+}
+
+.server-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-ip {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.status-badge {
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.status-badge.healthy {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.status-badge.unhealthy {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.status-badge.checking {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.server-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.metric {
+  text-align: center;
+}
+
+.metric-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 2px;
+}
+
+.metric-value {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.metric-value.warning {
+  color: #f59e0b;
+}
+
+.metric-value.danger {
+  color: #ef4444;
+}
+
+/* Mechanism Details */
+.mechanism-details {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.detail-card {
+  padding: 1rem;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.card-icon {
+  font-size: 1.25rem;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.description {
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.config-section {
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+  color: var(--vp-c-text-1);
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.config-item {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.config-name {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.config-value {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: var(--vp-c-brand);
+  background: var(--vp-c-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: 0.25rem;
+}
+
+.config-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.pros-cons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .pros-cons {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pros-cons-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+.pros ul,
+.cons ul {
+  margin: 0;
+  padding-left: 1.2rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.pros li,
+.cons li {
+  margin-bottom: 0.25rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
new file mode 100644
index 0000000..445bca0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
@@ -0,0 +1,680 @@
+<template>
+  <div class="load-balancer-types-demo">
+    <div class="header">
+      <div class="title">负载均衡器类型</div>
+      <div class="subtitle">从四层到七层，从硬件到软件的演进</div>
+    </div>
+
+    <!-- 层级选择器 -->
+    <div class="layer-selector">
+      <button
+        v-for="layer in layers"
+        :key="layer.key"
+        class="layer-btn"
+        :class="{ active: currentLayer === layer.key }"
+        @click="currentLayer = layer.key"
+      >
+        <span class="layer-icon">{{ layer.icon }}</span>
+        <span class="layer-name">{{ layer.name }}</span>
+        <span class="layer-tag">{{ layer.tag }}</span>
+      </button>
+    </div>
+
+    <!-- 架构对比图 -->
+    <div class="architecture-comparison">
+      <div class="comparison-panel">
+        <div class="panel-header">
+          <span class="panel-title">传统架构</span>
+          <span class="panel-badge single">单点</span>
+        </div>
+        <div class="panel-content">
+          <div class="single-server">
+            <div class="server-icon">🖥️</div>
+            <div class="server-label">Web Server</div>
+            <div class="server-load">
+              <div class="load-bar" :style="{ width: '95%' }"></div>
+            </div>
+            <div class="load-text">负载: 95% 🔥</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="comparison-arrow">→</div>
+
+      <div class="comparison-panel highlighted">
+        <div class="panel-header">
+          <span class="panel-title">负载均衡架构</span>
+          <span class="panel-badge distributed">分布式</span>
+        </div>
+        <div class="panel-content">
+          <div class="lb-layer">
+            <div class="lb-node">
+              <span class="lb-icon">⚖️</span>
+              <span class="lb-label">{{ currentLayerData.label }}</span>
+            </div>
+          </div>
+          <div class="servers-layer">
+            <div
+              v-for="(server, index) in servers"
+              :key="index"
+              class="server-node"
+              :class="{ active: activeServer === index }"
+            >
+              <div class="server-icon-small">🖥️</div>
+              <div class="server-id">S{{ index + 1 }}</div>
+              <div class="server-load-mini">
+                <div class="load-bar-mini" :style="{ width: server.load + '%' }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详细信息面板 -->
+    <div class="detail-panel">
+      <div class="detail-header">
+        <span class="detail-icon">{{ currentLayerData.icon }}</span>
+        <span class="detail-title">{{ currentLayerData.name }}</span>
+      </div>
+      <div class="detail-content">
+        <div class="detail-section">
+          <div class="section-title">工作原理</div>
+          <p class="section-desc">{{ currentLayerData.principle }}</p>
+        </div>
+        <div class="detail-section">
+          <div class="section-title">典型产品</div>
+          <div class="product-tags">
+            <span v-for="product in currentLayerData.products" :key="product" class="product-tag">
+              {{ product }}
+            </span>
+          </div>
+        </div>
+        <div class="detail-section">
+          <div class="section-title">适用场景</div>
+          <ul class="scenario-list">
+            <li v-for="scenario in currentLayerData.scenarios" :key="scenario">{{ scenario }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- 性能对比 -->
+    <div class="performance-comparison">
+      <div class="comparison-title">性能对比一览</div>
+      <div class="comparison-table">
+        <div class="table-header">
+          <div class="th">类型</div>
+          <div class="th">处理层</div>
+          <div class="th">性能</div>
+          <div class="th">灵活性</div>
+          <div class="th">成本</div>
+        </div>
+        <div
+          v-for="row in comparisonData"
+          :key="row.type"
+          class="table-row"
+          :class="{ active: currentLayer === row.key }"
+        >
+          <div class="td type">{{ row.type }}</div>
+          <div class="td">{{ row.layer }}</div>
+          <div class="td">
+            <div class="rating-bar">
+              <div class="rating-fill" :style="{ width: row.performance + '%' }"></div>
+            </div>
+          </div>
+          <div class="td">
+            <div class="rating-bar">
+              <div class="rating-fill" :style="{ width: row.flexibility + '%' }"></div>
+            </div>
+          </div>
+          <div class="td cost">{{ row.cost }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const currentLayer = ref('l4')
+const activeServer = ref(0)
+
+const layers = [
+  {
+    key: 'hardware',
+    name: '硬件负载均衡',
+    icon: '🏗️',
+    tag: 'F5/A10'
+  },
+  {
+    key: 'l4',
+    name: '四层负载均衡',
+    icon: '📦',
+    tag: 'L4'
+  },
+  {
+    key: 'l7',
+    name: '七层负载均衡',
+    icon: '🌐',
+    tag: 'L7'
+  },
+  {
+    key: 'software',
+    name: '软件负载均衡',
+    icon: '💻',
+    tag: '开源'
+  }
+]
+
+const layerDetails = {
+  hardware: {
+    name: '硬件负载均衡器',
+    icon: '🏗️',
+    label: 'F5 BIG-IP',
+    principle: '专用硬件设备，通过ASIC芯片实现高性能流量转发。独立于服务器部署，具备高可靠性和丰富的企业级功能。',
+    products: ['F5 BIG-IP', 'A10 Thunder', 'Citrix ADC', 'Radware'],
+    scenarios: ['金融核心系统', '电信级应用', '需要硬件SSL卸载的场景', '高合规要求环境']
+  },
+  l4: {
+    name: '四层负载均衡 (L4)',
+    icon: '📦',
+    label: 'L4 Load Balancer',
+    principle: '基于传输层信息（IP地址+端口）进行流量分发。不关心应用层内容，只做"快递分拣"，因此性能极高。',
+    products: ['LVS (Linux Virtual Server)', 'HAProxy (TCP模式)', 'AWS NLB', 'Azure Load Balancer'],
+    scenarios: ['需要极高吞吐量的场景', 'TCP/UDP流量分发', '不需要内容识别的场景', '微服务间通信']
+  },
+  l7: {
+    name: '七层负载均衡 (L7)',
+    icon: '🌐',
+    label: 'L7 Load Balancer',
+    principle: '基于应用层内容（HTTP头、URL、Cookie等）进行智能路由。可以理解"快递内容"，实现更精细的流量控制。',
+    products: ['Nginx', 'HAProxy (HTTP模式)', 'Envoy', 'AWS ALB', 'Traefik'],
+    scenarios: ['基于URL路径路由', 'A/B测试和灰度发布', '基于Cookie的会话保持', 'HTTPS终结和证书管理']
+  },
+  software: {
+    name: '软件负载均衡方案',
+    icon: '💻',
+    label: 'Software LB',
+    principle: '运行在通用服务器上的负载均衡软件，灵活可定制。从开源方案到云原生方案，选择丰富。',
+    products: ['Nginx / OpenResty', 'HAProxy', 'Envoy Proxy', 'Kong', 'Spring Cloud Gateway'],
+    scenarios: ['成本敏感场景', '需要深度定制的环境', '云原生/K8s环境', '快速迭代开发']
+  }
+}
+
+const currentLayerData = computed(() => layerDetails[currentLayer.value])
+
+const servers = ref([
+  { load: 30 },
+  { load: 45 },
+  { load: 25 }
+])
+
+const comparisonData = [
+  {
+    key: 'hardware',
+    type: '硬件负载均衡',
+    layer: 'L4/L7',
+    performance: 95,
+    flexibility: 40,
+    cost: '$$$$$'
+  },
+  {
+    key: 'l4',
+    type: '四层负载均衡',
+    layer: 'L4 (传输层)',
+    performance: 90,
+    flexibility: 50,
+    cost: '$$'
+  },
+  {
+    key: 'l7',
+    type: '七层负载均衡',
+    layer: 'L7 (应用层)',
+    performance: 70,
+    flexibility: 90,
+    cost: '$$$'
+  },
+  {
+    key: 'software',
+    type: '软件负载均衡',
+    layer: 'L4/L7',
+    performance: 75,
+    flexibility: 95,
+    cost: '$'
+  }
+]
+
+// 自动轮播演示
+let demoInterval
+const startDemo = () => {
+  demoInterval = setInterval(() => {
+    activeServer.value = (activeServer.value + 1) % servers.value.length
+  }, 2000)
+}
+
+// 组件挂载时启动演示
+onMounted(() => {
+  startDemo()
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  clearInterval(demoInterval)
+})
+</script>
+
+<style scoped>
+.load-balancer-types-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Layer Selector */
+.layer-selector {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .layer-selector {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.layer-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 0.5rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.layer-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.layer-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.layer-icon {
+  font-size: 1.5rem;
+}
+
+.layer-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.layer-tag {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* Architecture Comparison */
+.architecture-comparison {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .architecture-comparison {
+    grid-template-columns: 1fr;
+  }
+  .comparison-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+.comparison-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.comparison-panel.highlighted {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.panel-badge {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.panel-badge.single {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.panel-badge.distributed {
+  background: #d1fae5;
+  color: #059669;
+}
+
+.panel-content {
+  padding: 1rem;
+}
+
+/* Single Server */
+.single-server {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.server-icon {
+  font-size: 2.5rem;
+}
+
+.server-label {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.server-load {
+  width: 150px;
+  height: 8px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.load-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
+  border-radius: 4px;
+  transition: width 0.3s;
+}
+
+.load-text {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+/* LB Layer */
+.lb-layer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.lb-node {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.lb-icon {
+  font-size: 1.2rem;
+}
+
+/* Servers Layer */
+.servers-layer {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.server-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid transparent;
+  border-radius: 8px;
+  transition: all 0.2s;
+  min-width: 60px;
+}
+
+.server-node.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.server-icon-small {
+  font-size: 1.25rem;
+}
+
+.server-id {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.server-load-mini {
+  width: 40px;
+  height: 4px;
+  background: var(--vp-c-bg);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.load-bar-mini {
+  height: 100%;
+  background: #22c55e;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.comparison-arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-brand);
+  font-weight: bold;
+}
+
+/* Detail Panel */
+.detail-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-icon {
+  font-size: 1.25rem;
+}
+
+.detail-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.detail-content {
+  padding: 1rem;
+}
+
+.detail-section {
+  margin-bottom: 1rem;
+}
+
+.detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.section-desc {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.product-tag {
+  font-size: 0.8rem;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.scenario-list {
+  margin: 0;
+  padding-left: 1.2rem;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.scenario-list li {
+  margin-bottom: 0.25rem;
+}
+
+/* Performance Comparison */
+.performance-comparison {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.comparison-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+  text-align: center;
+}
+
+.comparison-table {
+  width: 100%;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  font-size: 0.8rem;
+  transition: background 0.2s;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-row.active {
+  background: var(--vp-c-brand-soft);
+}
+
+.td.type {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.td.cost {
+  font-family: monospace;
+  color: var(--vp-c-brand);
+}
+
+.rating-bar {
+  width: 60px;
+  height: 6px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.rating-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #22c55e, #3b82f6);
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
new file mode 100644
index 0000000..7189d61
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="multi-region-demo">
+    <div class="header">
+      <div class="title">多区域部署</div>
+      <div class="subtitle">异地多活架构，就近服务与容灾备份</div>
+    </div>
+
+    <!-- 全球地图 -->
+    <div class="world-map">
+      <div class="map-header">
+        <span class="map-title">全球部署视图</span>
+        <span class="map-legend">
+          <span class="legend-item">
+            <span class="legend-dot active"></span>
+            主节点
+          </span>
+          <span class="legend-item">
+            <span class="legend-dot standby"></span>
+            备节点
+          </span>
+        </span>
+      </div>
+
+      <div class="map-container">
+        <!-- 简化的世界地图 -->
+        <div class="map-bg">
+          <!-- 亚洲 -->
+          <div class="continent asia">
+            <div
+              v-for="region in asiaRegions"
+              :key="region.id"
+              class="region-node"
+              :class="{
+                active: region.isPrimary,
+                standby: !region.isPrimary,
+                selected: selectedRegion === region.id
+              }"
+              :style="{ top: region.y + '%', left: region.x + '%' }"
+              @click="selectedRegion = region.id"
+            >
+              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
+              <div class="node-label">{{ region.name }}</div>
+              <div class="node-delay">{{ region.delay }}ms</div>
+            </div>
+          </div>
+
+          <!-- 欧洲 -->
+          <div class="continent europe">
+            <div
+              v-for="region in europeRegions"
+              :key="region.id"
+              class="region-node"
+              :class="{
+                active: region.isPrimary,
+                standby: !region.isPrimary,
+                selected: selectedRegion === region.id
+              }"
+              :style="{ top: region.y + '%', left: region.x + '%' }"
+              @click="selectedRegion = region.id"
+            >
+              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
+              <div class="node-label">{{ region.name }}</div>
+              <div class="node-delay">{{ region.delay }}ms</div>
+            </div>
+          </div>
+
+          <!-- 北美 -->
+          <div class="continent north-america">
+            <div
+              v-for="region in northAmericaRegions"
+              :key="region.id"
+              class="region-node"
+              :class="{
+                active: region.isPrimary,
+                standby: !region.isPrimary,
+                selected: selectedRegion === region.id
+              }"
+              :style="{ top: region.y + '%', left: region.x + '%' }"
+              @click="selectedRegion = region.id"
+            >
+              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
+              <div class="node-label">{{ region.name }}</div>
+              <div class="node-delay">{{ region.delay }}ms</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 连接线路 -->
+        <svg class="connection-lines" viewBox="0 0 100 100" preserveAspectRatio="none">
+          <defs>
+            <marker id="arrowhead" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
+              <polygon points="0 0, 3 1.5, 0 3" fill="var(--vp-c-brand)" />
+            </marker>
+          </defs>
+          <line
+            v-for="(line, index) in connectionLines"
+            :key="index"
+            :x1="line.x1"
+            :y1="line.y1"
+            :x2="line.x2"
+            :y2="line.y2"
+            stroke="var(--vp-c-brand)"
+            stroke-width="0.3"
+            stroke-dasharray="2 1"
+            marker-end="url(#arrowhead)"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- 区域详情 -->
+    <div class="region-details" v-if="selectedRegionData">
+      <div class="details-header">
+        <div class="region-title">
+          <span class="region-icon">{{ selectedRegionData.isPrimary ? '📡' : '📶' }}</span>
+          <span class="region-name">{{ selectedRegionData.name }}</span>
+          <span class="region-badge" :class="{ primary: selectedRegionData.isPrimary, standby: !selectedRegionData.isPrimary }">
+            {{ selectedRegionData.isPrimary ? '主节点' : '备节点' }}
+          </span>
+        </div>
+        <button class="close-btn" @click="selectedRegion = null">×</button>
+      </div>
+
+      <div class="details-grid">
+        <div class="detail-item">
+          <div class="detail-label">延迟</div>
+          <div class="detail-value">{{ selectedRegionData.delay }}ms</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label">在线实例</div>
+          <div class="detail-value">{{ selectedRegionData.instances }}个</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label">当前QPS</div>
+          <div class="detail-value">{{ selectedRegionData.qps }}/s</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label">数据同步延迟</div>
+          <div class="detail-value">{{ selectedRegionData.syncDelay }}ms</div>
+        </div>
+      </div>
+
+      <div class="details-actions">
+        <button class="action-btn primary" v-if="!selectedRegionData.isPrimary">
+          提升为主节点
+        </button>
+        <button class="action-btn danger" v-if="selectedRegionData.isPrimary">
+          切换流量
+        </button>
+        <button class="action-btn">
+          查看日志
+        </button>
+      </div>
+    </div>
+
+    <!-- 架构优势 -->
+    <div class="architecture-benefits">
+      <div class="benefits-title">多区域部署优势</div>
+      <div class="benefits-grid">
+        <div class="benefit-card">
+          <div class="benefit-icon">⚡</div>
+          <div class="benefit-title">就近服务</div>
+          <div class="benefit-desc">用户请求自动路由到最近的区域，降低网络延迟，提升访问速度</div>
+        </div>
+        <div class="benefit-card">
+          <div class="benefit-icon">🛡️</div>
+          <div class="benefit-title">容灾备份</div>
+          <div class="benefit-desc">单区域故障时自动切换流量，确保服务高可用，数据多副本保存</div>
+        </div>
+        <div class="benefit-card">
+          <div class="benefit-icon">🌍</div>
+          <div class="benefit-title">全球覆盖</div>
+          <div class="benefit-desc">支持跨区域部署，满足不同地区的合规要求和数据主权法规</div>
+        </div>
+        <div class="benefit-card">
+          <div class="benefit-icon">📈</div>
+          <div class="benefit-title">负载均衡</div>
+          <div class="benefit-desc">跨区域流量调度，避免单点过载，实现全局资源优化配置</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+// 当前选中的指标
+const currentMetric = ref('cpu')
+const selectedRegion = ref(null)
+
+// 亚洲区域数据
+const asiaRegions = ref([
+  { id: 'bj', name: '北京', x: 75, y: 35, isPrimary: true, delay: 20, instances: 5, qps: 2500, syncDelay: 10 },
+  { id: 'sh', name: '上海', x: 80, y: 45, isPrimary: false, delay: 25, instances: 3, qps: 1500, syncDelay: 15 },
+  { id: 'sg', name: '新加坡', x: 72, y: 65, isPrimary: false, delay: 45, instances: 2, qps: 800, syncDelay: 25 }
+])
+
+// 欧洲区域数据
+const europeRegions = ref([
+  { id: 'fr', name: '法兰克福', x: 48, y: 30, isPrimary: true, delay: 120, instances: 4, qps: 1800, syncDelay: 20 },
+  { id: 'uk', name: '伦敦', x: 45, y: 25, isPrimary: false, delay: 130, instances: 2, qps: 900, syncDelay: 30 }
+])
+
+// 北美区域数据
+const northAmericaRegions = ref([
+  { id: 'usw', name: '硅谷', x: 15, y: 38, isPrimary: true, delay: 150, instances: 6, qps: 3200, syncDelay: 25 },
+  { id: 'use', name: '弗吉尼亚', x: 28, y: 35, isPrimary: false, delay: 160, instances: 3, qps: 1400, syncDelay: 35 }
+])
+
+// 连接线数据
+const connectionLines = ref([
+  // 北京-上海
+  { x1: 75, y1: 35, x2: 80, y2: 45 },
+  // 北京-新加坡
+  { x1: 75, y1: 35, x2: 72, y2: 65 },
+  // 法兰克福-伦敦
+  { x1: 48, y1: 30, x2: 45, y2: 25 },
+  // 硅谷-弗吉尼亚
+  { x1: 15, y1: 38, x2: 28, y2: 35 },
+  // 跨洲连接
+  { x1: 75, y1: 35, x2: 48, y2: 30 },
+  { x1: 48, y1: 30, x2: 15, y2: 38 }
+])
+
+// 选中区域详情
+const selectedRegionData = computed(() => {
+  if (!selectedRegion.value) return null
+  const allRegions = [
+    ...asiaRegions.value,
+    ...europeRegions.value,
+    ...northAmericaRegions.value
+  ]
+  return allRegions.find(r => r.id === selectedRegion.value)
+})
+
+// 获取使用率颜色
+const getUsageColor = (usage) => {
+  if (usage > 90) return '#ef4444'
+  if (usage > 70) return '#f59e0b'
+  return '#22c55e'
+}
+</script>
+
+<style scoped>
+.multi-region-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* World Map */
+.world-map {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.map-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.map-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.map-legend {
+  display: flex;
+  gap: 1rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-dot.active {
+  background: var(--vp-c-brand);
+}
+
+.legend-dot.standby {
+  background: var(--vp-c-text-3);
+}
+
+.map-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 50%;
+  background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.map-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.continent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.region-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  background: white;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.5rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  min-width: 60px;
+  z-index: 10;
+}
+
+.region-node:hover {
+  transform: translate(-50%, -50%) scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.region-node.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.region-node.active .node-icon {
+  color: var(--vp-c-brand);
+}
+
+.region-node.standby {
+  opacity: 0.7;
+}
+
+.region-node.selected {
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+}
+
+.node-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.2rem;
+}
+
+.node-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+}
+
+.node-delay {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-2);
+}
+
+.connection-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Region Details */
+.region-details {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.region-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.region-icon {
+  font-size: 1.5rem;
+}
+
+.region-name {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+
+.region-badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.region-badge.primary {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+
+.region-badge.standby {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+}
+
+.close-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 1.25rem;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  border-color: var(--vp-c-danger);
+  color: var(--vp-c-danger);
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .details-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.detail-item {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.detail-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.detail-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.details-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.action-btn.primary {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.action-btn.danger {
+  background: var(--vp-c-danger);
+  color: white;
+  border-color: var(--vp-c-danger);
+}
+
+/* Architecture Benefits */
+.architecture-benefits {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.benefits-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .benefits-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.benefit-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.benefit-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.benefit-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.benefit-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
new file mode 100644
index 0000000..34bbcd7
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
@@ -0,0 +1,938 @@
+<template>
+  <div class="session-persistence-demo">
+    <div class="header">
+      <div class="title">会话保持机制</div>
+      <div class="subtitle">Cookie、IP哈希与粘性会话的技术对比</div>
+    </div>
+
+    <!-- 场景选择 -->
+    <div class="scenario-selector">
+      <div class="scenario-label">应用场景：</div>
+      <div class="scenario-buttons">
+        <button
+          v-for="scenario in scenarios"
+          :key="scenario.key"
+          class="scenario-btn"
+          :class="{ active: currentScenario === scenario.key }"
+          @click="currentScenario = scenario.key"
+        >
+          {{ scenario.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 机制选择器 -->
+    <div class="mechanism-selector">
+      <button
+        v-for="mech in mechanisms"
+        :key="mech.key"
+        class="mechanism-btn"
+        :class="{ active: currentMechanism === mech.key }"
+        @click="currentMechanism = mech.key"
+      >
+        <span class="mechanism-icon">{{ mech.icon }}</span>
+        <span class="mechanism-name">{{ mech.name }}</span>
+        <span class="mechanism-tag">{{ mech.tag }}</span>
+      </button>
+    </div>
+
+    <!-- 可视化演示区 -->
+    <div class="demo-stage">
+      <!-- 用户层 -->
+      <div class="user-layer">
+        <div class="user-avatars">
+          <div
+            v-for="user in users"
+            :key="user.id"
+            class="user-avatar"
+            :class="{ active: activeUser === user.id }"
+            @click="activeUser = user.id"
+          >
+            <div class="avatar-icon">{{ user.avatar }}</div>
+            <div class="user-name">{{ user.name }}</div>
+            <div v-if="hasSessionCookie" class="cookie-badge">🍪</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 请求流程 -->
+      <div class="request-flow">
+        <div class="flow-step">
+          <div class="step-label">请求</div>
+          <div class="step-arrow">↓</div>
+        </div>
+
+        <!-- 负载均衡器 -->
+        <div class="lb-box">
+          <div class="lb-header">
+            <span class="lb-icon">⚖️</span>
+            <span class="lb-title">负载均衡器</span>
+          </div>
+          <div class="lb-mechanism">
+            <div class="mechanism-display">
+              <span class="display-icon">{{ currentMechanismData.icon }}</span>
+              <div class="display-info">
+                <div class="display-name">{{ currentMechanismData.name }}</div>
+                <div class="display-desc">{{ currentMechanismData.shortDesc }}</div>
+              </div>
+            </div>
+          </div>
+          <!-- 会话表 -->
+          <div v-if="currentMechanism === 'cookie' || currentMechanism === 'sticky'" class="session-table">
+            <div class="table-title">会话映射表</div>
+            <div class="table-rows">
+              <div v-for="mapping in sessionMappings" :key="mapping.session" class="table-row">
+                <span class="session-id">{{ mapping.session }}</span>
+                <span class="mapping-arrow">→</span>
+                <span class="server-name">{{ mapping.server }}</span>
+              </div>
+            </div>
+          </div>
+          <!-- IP哈希环 -->
+          <div v-if="currentMechanism === 'iphash'" class="hash-ring">
+            <div class="ring-title">IP哈希环</div>
+            <div class="ring-visual">
+              <div
+                v-for="(server, index) in hashRingServers"
+                :key="index"
+                class="ring-segment"
+                :style="getSegmentStyle(index)"
+                :title="server"
+              >
+                {{ server.slice(-1) }}
+              </div>
+            </div>
+            <div class="hash-formula">
+              <code>server = hash(client_ip) % server_count</code>
+            </div>
+          </div>
+        </div>
+
+        <div class="flow-step">
+          <div class="step-arrow">↓</div>
+        </div>
+
+        <!-- 后端服务器 -->
+        <div class="backend-servers">
+          <div
+            v-for="server in backendServers"
+            :key="server.id"
+            class="backend-server"
+            :class="{ target: isTargetServer(server.id) }"
+          >
+            <div class="server-icon">🖥️</div>
+            <div class="server-info">
+              <div class="server-name">{{ server.name }}</div>
+              <div class="server-ip">{{ server.ip }}</div>
+            </div>
+            <div class="server-status" :class="server.status">
+              {{ server.status === 'healthy' ? '✓' : '✗' }}
+            </div>
+            <div v-if="isTargetServer(server.id)" class="selected-indicator">
+              选中
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 响应流程 -->
+      <div class="response-flow" v-if="currentMechanism === 'cookie'">
+        <div class="flow-step">
+          <div class="step-arrow">↑</div>
+        </div>
+        <div class="set-cookie-box">
+          <div class="cookie-header">
+            <span class="cookie-icon">🍪</span>
+            <span class="cookie-title">Set-Cookie 响应头</span>
+          </div>
+          <div class="cookie-content">
+            <code>SERVERID=srv001; Path=/; HttpOnly</code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 机制对比表 -->
+    <div class="mechanism-comparison">
+      <div class="comparison-title">三种会话保持机制对比</div>
+      <div class="comparison-grid">
+        <div class="comparison-card">
+          <div class="card-header">
+            <span class="card-icon">🍪</span>
+            <span class="card-title">Cookie 插入</span>
+          </div>
+          <div class="card-body">
+            <div class="feature-list">
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>不受客户端IP变化影响</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>首次请求即可保持会话</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>客户端需支持Cookie</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>存在Cookie被禁用的风险</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="comparison-card">
+          <div class="card-header">
+            <span class="card-icon">#️⃣</span>
+            <span class="card-title">IP Hash</span>
+          </div>
+          <div class="card-body">
+            <div class="feature-list">
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>无需客户端支持任何机制</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>无状态，LB重启不影响会话</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>客户端IP变化会丢失会话</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>难以做到真正的负载均衡</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="comparison-card">
+          <div class="card-header">
+            <span class="card-icon">📝</span>
+            <span class="card-title">粘性会话</span>
+          </div>
+          <div class="card-body">
+            <div class="feature-list">
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>结合Cookie和IP两种方式优势</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon good">✓</span>
+                <span>支持会话复制和故障转移</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>实现复杂，需要应用支持</span>
+              </div>
+              <div class="feature-item">
+                <span class="feature-icon bad">✗</span>
+                <span>会话复制带来性能开销</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const currentMode = ref('active')
+const currentScenario = ref('shopping')
+const currentMechanism = ref('cookie')
+const activeUser = ref(1)
+
+const modes = [
+  { key: 'active', name: '主动检查', icon: '🔍' },
+  { key: 'passive', name: '被动感知', icon: '👁️' },
+  { key: 'threshold', name: '阈值判定', icon: '📊' }
+]
+
+const scenarios = [
+  { key: 'shopping', name: '购物车' },
+  { key: 'login', name: '登录状态' },
+  { key: 'websocket', name: '实时通信' }
+]
+
+const mechanisms = [
+  { key: 'cookie', name: 'Cookie插入', icon: '🍪', tag: '应用层' },
+  { key: 'iphash', name: 'IP哈希', icon: '#️⃣', tag: '传输层' },
+  { key: 'sticky', name: '粘性会话', icon: '📝', tag: '会话层' }
+]
+
+const currentMechanismData = computed(() => {
+  const data = {
+    cookie: {
+      name: 'Cookie 插入',
+      icon: '🍪',
+      label: 'Set-Cookie',
+      shortDesc: '通过HTTP Cookie保持会话',
+      description: '负载均衡器在第一次响应时向客户端设置Cookie（如SERVERID=srv001），后续请求携带此Cookie，LB根据Cookie值将请求路由到对应后端服务器。'
+    },
+    iphash: {
+      name: 'IP 哈希',
+      icon: '#️⃣',
+      label: 'IP Hash',
+      shortDesc: '基于客户端IP计算哈希',
+      description: '通过对客户端IP地址进行哈希计算（如hash(client_ip) % server_count），确定请求应该路由到哪台后端服务器。同一IP的请求总是落到同一台服务器。'
+    },
+    sticky: {
+      name: '粘性会话',
+      icon: '📝',
+      label: 'Sticky Session',
+      shortDesc: '服务端维护会话映射表',
+      description: '负载均衡器在内存中维护会话映射表（session_id -> server），首次请求建立映射关系，后续相同会话ID的请求都路由到同一服务器。支持会话复制实现高可用。'
+    }
+  }
+  return data[currentMechanism.value]
+})
+
+const users = [
+  { id: 1, name: '用户A', avatar: '👤', ip: '192.168.1.100' },
+  { id: 2, name: '用户B', avatar: '👥', ip: '192.168.1.101' },
+  { id: 3, name: '用户C', avatar: '👨‍💼', ip: '192.168.1.102' }
+]
+
+const sessionMappings = [
+  { session: 'sess_abc123', server: 'Server 1' },
+  { session: 'sess_def456', server: 'Server 2' },
+  { session: 'sess_ghi789', server: 'Server 1' }
+]
+
+const hashRingServers = ['Server 1', 'Server 2', 'Server 3', 'Server 4']
+
+const backendServers = [
+  { id: 1, name: 'Server 1', ip: '10.0.1.10', status: 'healthy' },
+  { id: 2, name: 'Server 2', ip: '10.0.1.11', status: 'healthy' },
+  { id: 3, name: 'Server 3', ip: '10.0.1.12', status: 'unhealthy' }
+]
+
+const hasSessionCookie = computed(() => {
+  return currentMechanism.value === 'cookie' && activeUser.value > 0
+})
+
+const isTargetServer = (serverId) => {
+  // 模拟根据机制选择目标服务器
+  if (currentMechanism.value === 'iphash') {
+    return serverId === ((activeUser.value + serverId) % 3) + 1
+  }
+  return serverId === 1 || (activeUser.value === serverId)
+}
+
+const getSegmentStyle = (index) => {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444']
+  const rotation = index * 90
+  return {
+    background: colors[index],
+    transform: `rotate(${rotation}deg) translateY(-20px)`
+  }
+}
+
+// 轮播演示
+let demoInterval
+onMounted(() => {
+  demoInterval = setInterval(() => {
+    activeUser.value = (activeUser.value % 3) + 1
+  }, 3000)
+})
+
+onUnmounted(() => {
+  clearInterval(demoInterval)
+})
+</script>
+
+<style scoped>
+.session-persistence-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Scenario Selector */
+.scenario-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.scenario-label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.scenario-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.scenario-btn {
+  padding: 0.35rem 0.75rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.scenario-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.scenario-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+/* Mechanism Selector */
+.mechanism-selector {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .mechanism-selector {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mechanism-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 0.5rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.mechanism-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.mechanism-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.mechanism-icon {
+  font-size: 1.5rem;
+}
+
+.mechanism-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.mechanism-tag {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+/* Demo Stage */
+.demo-stage {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+/* User Layer */
+.user-layer {
+  margin-bottom: 1.5rem;
+}
+
+.user-avatars {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+}
+
+.user-avatar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.user-avatar:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.user-avatar.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.avatar-icon {
+  font-size: 2rem;
+}
+
+.user-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.cookie-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  font-size: 1rem;
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+
+/* Request Flow */
+.request-flow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.step-label {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+}
+
+.step-arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-3);
+  line-height: 1;
+}
+
+/* LB Box */
+.lb-box {
+  width: 100%;
+  max-width: 500px;
+  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.lb-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.lb-icon {
+  font-size: 1.25rem;
+}
+
+.lb-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.lb-mechanism {
+  margin-bottom: 1rem;
+}
+
+.mechanism-display {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: white;
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.display-icon {
+  font-size: 1.5rem;
+}
+
+.display-info {
+  flex: 1;
+}
+
+.display-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.display-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+/* Session Table */
+.session-table {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.table-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.table-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.table-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-family: monospace;
+}
+
+.session-id {
+  color: #3b82f6;
+}
+
+.mapping-arrow {
+  color: #94a3b8;
+}
+
+.server-name {
+  color: #22c55e;
+}
+
+/* Hash Ring */
+.hash-ring {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.ring-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.ring-visual {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.ring-segment {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.hash-formula {
+  text-align: center;
+  padding: 0.5rem;
+  background: #f8fafc;
+  border-radius: 4px;
+}
+
+.hash-formula code {
+  font-size: 0.75rem;
+  color: #3b82f6;
+}
+
+/* Backend Servers */
+.backend-servers {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  width: 100%;
+  max-width: 600px;
+}
+
+@media (max-width: 768px) {
+  .backend-servers {
+    grid-template-columns: 1fr;
+  }
+}
+
+.backend-server {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.backend-server.target {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+}
+
+.server-icon {
+  font-size: 1.5rem;
+}
+
+.server-info {
+  text-align: center;
+}
+
+.server-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-ip {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+}
+
+.server-status {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.7rem;
+}
+
+.server-status.healthy {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.server-status.unhealthy {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.selected-indicator {
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--vp-c-brand);
+  color: white;
+  font-size: 0.65rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* Response Flow - Set Cookie */
+.response-flow {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.set-cookie-box {
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  border: 2px solid #f59e0b;
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+}
+
+.cookie-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.cookie-icon {
+  font-size: 1.25rem;
+}
+
+.cookie-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #92400e;
+}
+
+.cookie-content {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 0.5rem;
+  border-radius: 4px;
+  color: #78350f;
+}
+
+/* Mechanism Comparison */
+.mechanism-comparison {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.comparison-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .comparison-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.comparison-card {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.comparison-card .card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.comparison-card .card-icon {
+  font-size: 1.25rem;
+}
+
+.comparison-card .card-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.comparison-card .card-body {
+  padding: 0.75rem;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  line-height: 1.4;
+}
+
+.feature-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.6rem;
+  font-weight: bold;
+  margin-top: 2px;
+}
+
+.feature-icon.good {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.feature-icon.bad {
+  background: #fee2e2;
+  color: #dc2626;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
new file mode 100644
index 0000000..74aa59b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
@@ -0,0 +1,709 @@
+<template>
+  <div class="weighted-routing-demo">
+    <div class="header">
+      <div class="title">加权路由策略</div>
+      <div class="subtitle">按性能、成本、地理位置智能分配流量</div>
+    </div>
+
+    <!-- 策略选择器 -->
+    <div class="strategy-selector">
+      <div class="strategy-label">加权策略：</div>
+      <div class="strategy-buttons">
+        <button
+          v-for="strategy in strategies"
+          :key="strategy.key"
+          class="strategy-btn"
+          :class="{ active: currentStrategy === strategy.key }"
+          @click="currentStrategy = strategy.key"
+        >
+          <span class="btn-icon">{{ strategy.icon }}</span>
+          <span class="btn-name">{{ strategy.name }}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 可视化区域 -->
+    <div class="visualization">
+      <!-- 流量进入 -->
+      <div class="traffic-incoming">
+        <div class="traffic-label">总流量</div>
+        <div class="traffic-value">{{ totalTraffic }} req/s</div>
+        <div class="traffic-slider">
+          <input
+            type="range"
+            v-model.number="totalTraffic"
+            min="100"
+            max="10000"
+            step="100"
+          />
+          <div class="slider-labels">
+            <span>100</span>
+            <span>5000</span>
+            <span>10000</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 权重分配可视化 -->
+      <div class="weight-allocation">
+        <div class="allocation-title">权重分配</div>
+        <div class="allocation-bars">
+          <div
+            v-for="(server, index) in weightedServers"
+            :key="server.id"
+            class="allocation-item"
+          >
+            <div class="server-info">
+              <div class="server-icon">🖥️</div>
+              <div class="server-details">
+                <div class="server-name">{{ server.name }}</div>
+                <div class="server-specs">{{ server.specs }}</div>
+              </div>
+            </div>
+            <div class="weight-bar-container">
+              <div
+                class="weight-bar"
+                :style="{
+                  width: getAllocationPercentage(server.weight) + '%',
+                  background: getWeightColor(index)
+                }"
+              >
+                <span class="weight-value">{{ Math.round(getAllocationPercentage(server.weight)) }}%</span>
+              </div>
+            </div>
+            <div class="traffic-assigned">
+              {{ Math.round((totalTraffic * server.weight) / getTotalWeight()) }} req/s
+            </div>
+            <div class="weight-control">
+              <input
+                type="range"
+                v-model.number="server.weight"
+                min="1"
+                max="10"
+                step="1"
+                class="weight-slider"
+              />
+              <span class="weight-label">权重: {{ server.weight }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 实时流量动画 -->
+      <div class="traffic-animation">
+        <div class="animation-title">实时流量</div>
+        <div class="traffic-flows">
+          <div
+            v-for="(flow, index) in trafficFlows"
+            :key="index"
+            class="flow-item"
+            :style="{ animationDelay: flow.delay + 's' }"
+          >
+            <div class="flow-packet" :style="{ background: flow.color }"></div>
+          </div>
+        </div>
+        <div class="server-indicators">
+          <div
+            v-for="(server, index) in weightedServers"
+            :key="server.id"
+            class="indicator"
+            :style="{ background: getWeightColor(index) }"
+          >
+            {{ server.name.slice(-1) }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 策略详情对比 -->
+    <div class="strategy-comparison">
+      <div class="comparison-title">加权策略对比</div>
+      <div class="comparison-grid">
+        <div
+          v-for="strategy in strategies"
+          :key="strategy.key"
+          class="strategy-card"
+          :class="{ active: currentStrategy === strategy.key }"
+        >
+          <div class="card-header">
+            <span class="card-icon">{{ strategy.icon }}</span>
+            <span class="card-name">{{ strategy.name }}</span>
+          </div>
+          <div class="card-body">
+            <p class="card-desc">{{ strategy.description }}</p>
+            <div class="use-cases">
+              <div class="use-case-title">适用场景：</div>
+              <ul>
+                <li v-for="useCase in strategy.useCases" :key="useCase">{{ useCase }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const currentStrategy = ref('performance')
+const totalTraffic = ref(1000)
+
+const strategies = [
+  {
+    key: 'performance',
+    name: '按性能加权',
+    icon: '⚡',
+    description: '根据后端服务器的处理能力（CPU、内存、I/O性能）分配权重，高性能服务器承担更多流量。',
+    useCases: [
+      '混合部署环境（新老服务器混用）',
+      '异构硬件环境',
+      '需要最大化整体吞吐量的场景'
+    ]
+  },
+  {
+    key: 'cost',
+    name: '按成本加权',
+    icon: '💰',
+    description: '根据服务器成本（按需实例vs预留实例、不同地域成本）分配权重，优先使用低成本资源。',
+    useCases: [
+      '云环境中的成本优化',
+      '跨地域部署的流量调度',
+      '预留实例与按需实例混合使用'
+    ]
+  },
+  {
+    key: 'geo',
+    name: '按地理位置',
+    icon: '🌍',
+    description: '根据用户的地理位置，将请求路由到最近的数据中心，减少网络延迟。',
+    useCases: [
+      '全球化的应用服务',
+      '对延迟敏感的应用（游戏、金融交易）',
+      'CDN与源站之间的智能路由'
+    ]
+  }
+]
+
+const weightedServers = ref([
+  {
+    id: 1,
+    name: 'Server 1',
+    specs: '8核 32GB SSD',
+    ip: '10.0.1.10',
+    weight: 5,
+    status: 'healthy'
+  },
+  {
+    id: 2,
+    name: 'Server 2',
+    specs: '4核 16GB SSD',
+    ip: '10.0.1.11',
+    weight: 3,
+    status: 'healthy'
+  },
+  {
+    id: 3,
+    name: 'Server 3',
+    specs: '2核 8GB HDD',
+    ip: '10.0.1.12',
+    weight: 2,
+    status: 'healthy'
+  }
+])
+
+const getTotalWeight = () => {
+  return weightedServers.value.reduce((sum, s) => sum + s.weight, 0)
+}
+
+const getAllocationPercentage = (weight) => {
+  const total = getTotalWeight()
+  return total > 0 ? (weight / total) * 100 : 0
+}
+
+const getWeightColor = (index) => {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6']
+  return colors[index % colors.length]
+}
+
+// 流量流动画
+const trafficFlows = ref([])
+
+const generateTrafficFlows = () => {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b']
+  trafficFlows.value = Array.from({ length: 12 }, (_, i) => ({
+    delay: i * 0.2,
+    color: colors[Math.floor(Math.random() * colors.length)]
+  }))
+}
+
+// 目标服务器计算
+const isTargetServer = (serverId) => {
+  // 模拟根据权重选择
+  const server = weightedServers.value.find(s => s.id === serverId)
+  if (!server) return false
+  return server.weight >= 4
+}
+
+// 根据策略调整服务器规格和权重
+const updateServersByStrategy = () => {
+  if (currentStrategy.value === 'performance') {
+    weightedServers.value = [
+      { id: 1, name: 'Server 1', specs: '16核 64GB NVMe', ip: '10.0.1.10', weight: 8, status: 'healthy' },
+      { id: 2, name: 'Server 2', specs: '8核 32GB SSD', ip: '10.0.1.11', weight: 4, status: 'healthy' },
+      { id: 3, name: 'Server 3', specs: '4核 16GB SSD', ip: '10.0.1.12', weight: 2, status: 'healthy' }
+    ]
+  } else if (currentStrategy.value === 'cost') {
+    weightedServers.value = [
+      { id: 1, name: 'Server 1', specs: '预留实例 (低成本)', ip: '10.0.1.10', weight: 7, status: 'healthy' },
+      { id: 2, name: 'Server 2', specs: '预留实例 (低成本)', ip: '10.0.1.11', weight: 7, status: 'healthy' },
+      { id: 3, name: 'Server 3', specs: '按需实例 (高成本)', ip: '10.0.1.12', weight: 2, status: 'healthy' }
+    ]
+  } else if (currentStrategy.value === 'geo') {
+    weightedServers.value = [
+      { id: 1, name: '北京节点', specs: '服务华北用户', ip: '10.0.1.10', weight: 5, status: 'healthy' },
+      { id: 2, name: '上海节点', specs: '服务华东用户', ip: '10.0.1.11', weight: 5, status: 'healthy' },
+      { id: 3, name: '广州节点', specs: '服务华南用户', ip: '10.0.1.12', weight: 5, status: 'healthy' }
+    ]
+  }
+}
+
+onMounted(() => {
+  generateTrafficFlows()
+  // 监听策略变化更新服务器
+  watch(currentStrategy, () => {
+    updateServersByStrategy()
+  }, { immediate: true })
+})
+</script>
+
+<style scoped>
+.weighted-routing-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+/* Strategy Selector */
+.strategy-selector {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+}
+
+.strategy-label {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.strategy-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.strategy-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.85rem;
+}
+
+.strategy-btn:hover {
+  border-color: var(--vp-c-brand-light);
+}
+
+.strategy-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.btn-icon {
+  font-size: 1rem;
+}
+
+.btn-name {
+  font-weight: 500;
+}
+
+/* Visualization */
+.visualization {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Traffic Incoming */
+.traffic-incoming {
+  text-align: center;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  margin-bottom: 1.5rem;
+}
+
+.traffic-label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.25rem;
+}
+
+.traffic-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.75rem;
+}
+
+.traffic-slider {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.traffic-slider input {
+  width: 100%;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  outline: none;
+}
+
+.traffic-slider input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--vp-c-brand);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+/* Weight Allocation */
+.weight-allocation {
+  margin-bottom: 1.5rem;
+}
+
+.allocation-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.allocation-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.allocation-item {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.server-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.server-icon {
+  font-size: 1.5rem;
+}
+
+.server-details {
+  flex: 1;
+}
+
+.server-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.server-specs {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.weight-bar-container {
+  height: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.weight-bar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.75rem;
+  transition: width 0.3s ease;
+  min-width: 40px;
+}
+
+.weight-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.traffic-assigned {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
+  text-align: center;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.weight-control {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.weight-slider {
+  flex: 1;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--vp-c-bg);
+  border-radius: 3px;
+  outline: none;
+}
+
+.weight-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--vp-c-brand);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.weight-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  min-width: 60px;
+  text-align: right;
+}
+
+/* Traffic Animation */
+.traffic-animation {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.animation-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.traffic-flows {
+  height: 40px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.flow-item {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  animation: flowMove 2s linear infinite;
+}
+
+@keyframes flowMove {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+.flow-packet {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.server-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.indicator {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* Strategy Comparison */
+.strategy-comparison {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.comparison-title {
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .comparison-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.strategy-card {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 10px;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.strategy-card.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.card-icon {
+  font-size: 1.25rem;
+}
+
+.card-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+.card-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.use-cases {
+  font-size: 0.75rem;
+}
+
+.use-case-title {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.use-cases ul {
+  margin: 0;
+  padding-left: 1.2rem;
+  color: var(--vp-c-text-2);
+}
+
+.use-cases li {
+  margin-bottom: 0.15rem;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
new file mode 100644
index 0000000..50c818e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        幂等性演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('幂等性演示')
+const description = ref('展示消息消费中的幂等性问题，以及如何通过幂等性设计保证消息处理的正确性')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
new file mode 100644
index 0000000..7e5d97c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        消息队列架构演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('消息队列架构演示')
+const description = ref('展示消息队列的整体架构，包括生产者、消费者、队列、交换器等核心组件')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
new file mode 100644
index 0000000..4097ceb
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        消息队列对比演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('消息队列对比演示')
+const description = ref('对比主流消息队列产品（RabbitMQ、Kafka、RocketMQ等）的特性、适用场景和性能差异')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
new file mode 100644
index 0000000..b7c1a18
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        生产者消费者模式演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('生产者消费者模式演示')
+const description = ref('演示生产者如何将消息放入队列，消费者如何从队列取出消息处理')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
new file mode 100644
index 0000000..b5d245a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        消息可靠性演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('消息可靠性演示')
+const description = ref('展示消息队列如何保证消息的可靠传输，包括消息确认、持久化、重试机制等')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 3a997b7..24e1e26 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -72,6 +72,7 @@ import LatentSpaceViz from './components/appendix/image-gen-intro/LatentSpaceViz
 import DiffusionProcessDemo from './components/appendix/image-gen-intro/DiffusionProcessDemo.vue'
 import FlowMatchingDemo from './components/appendix/image-gen-intro/FlowMatchingDemo.vue'
 import PromptVisualizer from './components/appendix/image-gen-intro/PromptVisualizer.vue'
+import ImageGenQuickStartDemo from './components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue'
 
 // Audio Intro Components
 import AudioWaveformDemo from './components/appendix/audio-intro/AudioWaveformDemo.vue'
@@ -150,6 +151,18 @@ import EvolutionResponsiveGridDemo from './components/appendix/frontend-evolutio
 import EvolutionJQueryVsStateDemo from './components/appendix/frontend-evolution/JQueryVsStateDemo.vue'
 
 import BackendEvolutionDemo from './components/appendix/backend-evolution/BackendEvolutionDemo.vue'
+import BackendQuickStartDemo from './components/appendix/backend-evolution/BackendQuickStartDemo.vue'
+import EvolutionIntroDemo from './components/appendix/backend-evolution/EvolutionIntroDemo.vue'
+import PhysicalServerDemo from './components/appendix/backend-evolution/PhysicalServerDemo.vue'
+import MonolithDemo from './components/appendix/backend-evolution/MonolithDemo.vue'
+import ContainerDockerDemo from './components/appendix/backend-evolution/ContainerDockerDemo.vue'
+import MicroservicesDemo from './components/appendix/backend-evolution/MicroservicesDemo.vue'
+import KubernetesDemo from './components/appendix/backend-evolution/KubernetesDemo.vue'
+import ServerlessDemo from './components/appendix/backend-evolution/ServerlessDemo.vue'
+import ArchitectureComparisonDemo from './components/appendix/backend-evolution/ArchitectureComparisonDemo.vue'
+import DeploymentFlowDemo from './components/appendix/backend-evolution/DeploymentFlowDemo.vue'
+import TechStackTimelineDemo from './components/appendix/backend-evolution/TechStackTimelineDemo.vue'
+import ScalingStrategyDemo from './components/appendix/backend-evolution/ScalingStrategyDemo.vue'
 import MonolithVsMicroserviceDemo from './components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue'
 import CgiQueueDemo from './components/appendix/backend-evolution/CgiQueueDemo.vue'
 import MonolithReleaseRiskDemo from './components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue'
@@ -208,6 +221,11 @@ import PubSubDemo from './components/appendix/queue-design/PubSubDemo.vue'
 import DeadLetterQueueDemo from './components/appendix/queue-design/DeadLetterQueueDemo.vue'
 import DelayedMessageDemo from './components/appendix/queue-design/DelayedMessageDemo.vue'
 import SeckillSystemDemo from './components/appendix/queue-design/SeckillSystemDemo.vue'
+import MQArchitectureDemo from './components/appendix/queue-design/MQArchitectureDemo.vue'
+import ProducerConsumerDemo from './components/appendix/queue-design/ProducerConsumerDemo.vue'
+import ReliabilityDemo from './components/appendix/queue-design/ReliabilityDemo.vue'
+import IdempotenceDemo from './components/appendix/queue-design/IdempotenceDemo.vue'
+import MQComparisonDemo from './components/appendix/queue-design/MQComparisonDemo.vue'
 
 // Prompt Engineering Components
 import PromptQuickStartDemo from './components/appendix/prompt-engineering/PromptQuickStartDemo.vue'
@@ -252,6 +270,11 @@ import AgentMemoryPrinciple from './components/appendix/agent-intro/AgentMemoryP
 import DatabaseIndexDemo from './components/appendix/database-intro/DatabaseIndexDemo.vue'
 import RelationalDataDemo from './components/appendix/database-intro/RelationalDataDemo.vue'
 import SqlPlaygroundDemo from './components/appendix/database-intro/SqlPlaygroundDemo.vue'
+import DatabaseEvolutionDemo from './components/appendix/database-intro/DatabaseEvolutionDemo.vue'
+import DatabaseRelationDemo from './components/appendix/database-intro/DatabaseRelationDemo.vue'
+import BPlusTreeDemo from './components/appendix/database-intro/BPlusTreeDemo.vue'
+import TransactionACIDDemo from './components/appendix/database-intro/TransactionACIDDemo.vue'
+import QueryOptimizationDemo from './components/appendix/database-intro/QueryOptimizationDemo.vue'
 
 // IDE Intro Components
 import VirtualVSCodeDemo from './components/appendix/ide-intro/VirtualVSCodeDemo.vue'
@@ -290,8 +313,119 @@ import PerformanceBenchmarkDemo from './components/appendix/backend-languages/Pe
 import SyntaxComparisonDemo from './components/appendix/backend-languages/SyntaxComparisonDemo.vue'
 import ConcurrencyModelDemo from './components/appendix/backend-languages/ConcurrencyModelDemo.vue'
 import LanguageSelectorDemo from './components/appendix/backend-languages/LanguageSelectorDemo.vue'
+
+// Concurrency Models Components
+import ProcessThreadCoroutineDemo from './components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue'
+import ProcessIsolationDemo from './components/appendix/concurrency-models/ProcessIsolationDemo.vue'
+import ThreadSchedulingDemo from './components/appendix/concurrency-models/ThreadSchedulingDemo.vue'
+import CoroutineLightweightDemo from './components/appendix/concurrency-models/CoroutineLightweightDemo.vue'
+import AsyncAwaitDemo from './components/appendix/concurrency-models/AsyncAwaitDemo.vue'
+import EventLoopDemo from './components/appendix/concurrency-models/EventLoopDemo.vue'
+import ConcurrentVsParallelDemo from './components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue'
+import GoroutineGreenThreadDemo from './components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue'
 import DeveloperEfficiencyDemo from './components/appendix/backend-languages/DeveloperEfficiencyDemo.vue'
 import LanguageEcosystemDemo from './components/appendix/backend-languages/LanguageEcosystemDemo.vue'
+import MemoryManagementDemo from './components/appendix/backend-languages/MemoryManagementDemo.vue'
+
+// Component State Management Components
+import ComponentHierarchyDemo from './components/appendix/component-state-management/ComponentHierarchyDemo.vue'
+import PropsFlowDemo from './components/appendix/component-state-management/PropsFlowDemo.vue'
+import EventBusDemo from './components/appendix/component-state-management/EventBusDemo.vue'
+import StateManagementComparisonDemo from './components/appendix/component-state-management/StateManagementComparisonDemo.vue'
+import ReduxFlowDemo from './components/appendix/component-state-management/ReduxFlowDemo.vue'
+import VuexPiniaDemo from './components/appendix/component-state-management/VuexPiniaDemo.vue'
+import MobxReactivityDemo from './components/appendix/component-state-management/MobxReactivityDemo.vue'
+import ZustandJotaiDemo from './components/appendix/component-state-management/ZustandJotaiDemo.vue'
+
+// Cloud Services Components
+import CloudServicesMapDemo from './components/appendix/cloud-services/CloudServicesMapDemo.vue'
+import AwsVsAliyunDemo from './components/appendix/cloud-services/AwsVsAliyunDemo.vue'
+import ComputeServicesDemo from './components/appendix/cloud-services/ComputeServicesDemo.vue'
+import StorageServicesDemo from './components/appendix/cloud-services/StorageServicesDemo.vue'
+import NetworkServicesDemo from './components/appendix/cloud-services/NetworkServicesDemo.vue'
+import SecurityServicesDemo from './components/appendix/cloud-services/SecurityServicesDemo.vue'
+import PricingModelDemo from './components/appendix/cloud-services/PricingModelDemo.vue'
+import ServiceSelectionDemo from './components/appendix/cloud-services/ServiceSelectionDemo.vue'
+import DatabaseServicesDemo from './components/appendix/cloud-services/DatabaseServicesDemo.vue'
+import K8sServicesDemo from './components/appendix/cloud-services/K8sServicesDemo.vue'
+
+// Gateway Proxy Components
+import ReverseProxyDemo from './components/appendix/gateway-proxy/ReverseProxyDemo.vue'
+import ApiGatewayDemo from './components/appendix/gateway-proxy/ApiGatewayDemo.vue'
+import NginxArchitectureDemo from './components/appendix/gateway-proxy/NginxArchitectureDemo.vue'
+import RoutingRulesDemo from './components/appendix/gateway-proxy/RoutingRulesDemo.vue'
+import RateLimitingDemo from './components/appendix/gateway-proxy/RateLimitingDemo.vue'
+import AuthMiddlewareDemo from './components/appendix/gateway-proxy/AuthMiddlewareDemo.vue'
+import LoadBalancingDemo from './components/appendix/gateway-proxy/LoadBalancingDemo.vue'
+import SslTerminationDemo from './components/appendix/gateway-proxy/SslTerminationDemo.vue'
+
+// Load Balancing Components
+import LoadBalancerTypesDemo from './components/appendix/load-balancing/LoadBalancerTypesDemo.vue'
+import HealthCheckDemo from './components/appendix/load-balancing/HealthCheckDemo.vue'
+import SessionPersistenceDemo from './components/appendix/load-balancing/SessionPersistenceDemo.vue'
+import WeightedRoutingDemo from './components/appendix/load-balancing/WeightedRoutingDemo.vue'
+import BlueGreenDeploymentDemo from './components/appendix/load-balancing/BlueGreenDeploymentDemo.vue'
+import CanaryReleaseDemo from './components/appendix/load-balancing/CanaryReleaseDemo.vue'
+import AutoScalingDemo from './components/appendix/load-balancing/AutoScalingDemo.vue'
+import MultiRegionDemo from './components/appendix/load-balancing/MultiRegionDemo.vue'
+
+// Scheduled Tasks Components
+// import CronExpressionDemo from './components/appendix/scheduled-tasks/CronExpressionDemo.vue'
+// import TaskSchedulerDemo from './components/appendix/scheduled-tasks/TaskSchedulerDemo.vue'
+// import BatchProcessingDemo from './components/appendix/scheduled-tasks/BatchProcessingDemo.vue'
+// import JobQueueDemo from './components/appendix/scheduled-tasks/JobQueueDemo.vue'
+// import RetryMechanismDemo from './components/appendix/scheduled-tasks/RetryMechanismDemo.vue'
+// import DistributedLockDemo from './components/appendix/scheduled-tasks/DistributedLockDemo.vue'
+// import TaskMonitoringDemo from './components/appendix/scheduled-tasks/TaskMonitoringDemo.vue'
+// import SchedulingConflictDemo from './components/appendix/scheduled-tasks/SchedulingConflictDemo.vue'
+
+// Cloud IAM Components
+import IamRamComparisonDemo from './components/appendix/cloud-iam/IamRamComparisonDemo.vue'
+import IdentityProviderDemo from './components/appendix/cloud-iam/IdentityProviderDemo.vue'
+import RolePolicyDemo from './components/appendix/cloud-iam/RolePolicyDemo.vue'
+import PermissionHierarchyDemo from './components/appendix/cloud-iam/PermissionHierarchyDemo.vue'
+import AccessKeyManagementDemo from './components/appendix/cloud-iam/AccessKeyManagementDemo.vue'
+import MfaSecurityDemo from './components/appendix/cloud-iam/MfaSecurityDemo.vue'
+import CrossAccountAccessDemo from './components/appendix/cloud-iam/CrossAccountAccessDemo.vue'
+import BestPracticesDemo from './components/appendix/cloud-iam/BestPracticesDemo.vue'
+
+// Backend Layered Architecture Components
+import LayeredArchitectureDemo from './components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue'
+import ControllerLayerDemo from './components/appendix/backend-layered-architecture/ControllerLayerDemo.vue'
+import ServiceLayerDemo from './components/appendix/backend-layered-architecture/ServiceLayerDemo.vue'
+import RepositoryLayerDemo from './components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue'
+import DomainModelDemo from './components/appendix/backend-layered-architecture/DomainModelDemo.vue'
+import DtoFlowDemo from './components/appendix/backend-layered-architecture/DtoFlowDemo.vue'
+
+// Browser Rendering Pipeline Components
+import DomToRenderTreeDemo from './components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue'
+import LayoutReflowDemo from './components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue'
+import PaintLayerDemo from './components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue'
+import CompositeDemo from './components/appendix/browser-rendering-pipeline/CompositeDemo.vue'
+import MacroMicroTaskDemo from './components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue'
+import RenderingPerformanceDemo from './components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue'
+
+// Cache Design Extra Components
+import CacheArchitectureOverview from './components/appendix/cache-design/CacheArchitectureOverview.vue'
+import CacheHierarchyDemo from './components/appendix/cache-design/CacheHierarchyDemo.vue'
+import CachePatternComparisonDemo from './components/appendix/cache-design/CachePatternComparisonDemo.vue'
+import EcommerceCacheArchitectureDemo from './components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue'
+import CacheMonitoringDashboardDemo from './components/appendix/cache-design/CacheMonitoringDashboardDemo.vue'
+
+// Cloud Storage CDN Extra Components
+import EdgeNodeDistributionDemo from './components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue'
+import CachePolicyDemo from './components/appendix/cloud-storage-cdn/CachePolicyDemo.vue'
+import TrafficSchedulingDemo from './components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue'
+import HttpsOptimizationDemo from './components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue'
+import AccessAnalyticsDemo from './components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue'
+
+// API Design Extra Components
+import ErrorHandlingDemo from './components/appendix/api-design/ErrorHandlingDemo.vue'
+import VersioningStrategyDemo from './components/appendix/api-design/VersioningStrategyDemo.vue'
+import DocumentationDemo from './components/appendix/api-design/DocumentationDemo.vue'
+import ResourceAnalogy from './components/appendix/api-design/ResourceAnalogy.vue'
+import RequestStructureDemo from './components/appendix/api-design/RequestStructureDemo.vue'
+import ResponseStructureDemo from './components/appendix/api-design/ResponseStructureDemo.vue'
 
 export default {
   extends: DefaultTheme,
@@ -364,6 +498,7 @@ export default {
     app.component('DiffusionProcessDemo', DiffusionProcessDemo)
     app.component('FlowMatchingDemo', FlowMatchingDemo)
     app.component('PromptVisualizer', PromptVisualizer)
+    app.component('ImageGenQuickStartDemo', ImageGenQuickStartDemo)
 
     // Audio Intro Components Registration
     app.component('AudioWaveformDemo', AudioWaveformDemo)
@@ -445,6 +580,18 @@ export default {
     app.component('EvolutionJQueryVsStateDemo', EvolutionJQueryVsStateDemo)
 
     app.component('BackendEvolutionDemo', BackendEvolutionDemo)
+    app.component('BackendQuickStartDemo', BackendQuickStartDemo)
+    app.component('EvolutionIntroDemo', EvolutionIntroDemo)
+    app.component('PhysicalServerDemo', PhysicalServerDemo)
+    app.component('MonolithDemo', MonolithDemo)
+    app.component('ContainerDockerDemo', ContainerDockerDemo)
+    app.component('MicroservicesDemo', MicroservicesDemo)
+    app.component('KubernetesDemo', KubernetesDemo)
+    app.component('ServerlessDemo', ServerlessDemo)
+    app.component('ArchitectureComparisonDemo', ArchitectureComparisonDemo)
+    app.component('DeploymentFlowDemo', DeploymentFlowDemo)
+    app.component('TechStackTimelineDemo', TechStackTimelineDemo)
+    app.component('ScalingStrategyDemo', ScalingStrategyDemo)
     app.component('MonolithVsMicroserviceDemo', MonolithVsMicroserviceDemo)
     app.component('CgiQueueDemo', CgiQueueDemo)
     app.component('MonolithReleaseRiskDemo', MonolithReleaseRiskDemo)
@@ -591,6 +738,131 @@ export default {
     app.component('LanguageSelectorDemo', LanguageSelectorDemo)
     app.component('DeveloperEfficiencyDemo', DeveloperEfficiencyDemo)
     app.component('LanguageEcosystemDemo', LanguageEcosystemDemo)
+    app.component('MemoryManagementDemo', MemoryManagementDemo)
+
+    // Concurrency Models Components Registration
+    app.component('ProcessThreadCoroutineDemo', ProcessThreadCoroutineDemo)
+    app.component('ProcessIsolationDemo', ProcessIsolationDemo)
+    app.component('ThreadSchedulingDemo', ThreadSchedulingDemo)
+    app.component('CoroutineLightweightDemo', CoroutineLightweightDemo)
+    app.component('AsyncAwaitDemo', AsyncAwaitDemo)
+    app.component('EventLoopDemo', EventLoopDemo)
+    app.component('ConcurrentVsParallelDemo', ConcurrentVsParallelDemo)
+    app.component('GoroutineGreenThreadDemo', GoroutineGreenThreadDemo)
+
+    // Component State Management Components Registration
+    app.component('ComponentHierarchyDemo', ComponentHierarchyDemo)
+    app.component('PropsFlowDemo', PropsFlowDemo)
+    app.component('EventBusDemo', EventBusDemo)
+    app.component('StateManagementComparisonDemo', StateManagementComparisonDemo)
+    app.component('ReduxFlowDemo', ReduxFlowDemo)
+    app.component('VuexPiniaDemo', VuexPiniaDemo)
+    app.component('MobxReactivityDemo', MobxReactivityDemo)
+    app.component('ZustandJotaiDemo', ZustandJotaiDemo)
+
+    // Scheduled Tasks Components Registration
+    // app.component('CronExpressionDemo', CronExpressionDemo)
+    // app.component('TaskSchedulerDemo', TaskSchedulerDemo)
+    // app.component('BatchProcessingDemo', BatchProcessingDemo)
+    // app.component('JobQueueDemo', JobQueueDemo)
+    // app.component('RetryMechanismDemo', RetryMechanismDemo)
+    // app.component('DistributedLockDemo', DistributedLockDemo)
+    // app.component('TaskMonitoringDemo', TaskMonitoringDemo)
+    // app.component('SchedulingConflictDemo', SchedulingConflictDemo)
+
+    // Cloud Services Components Registration
+    app.component('CloudServicesMapDemo', CloudServicesMapDemo)
+    app.component('AwsVsAliyunDemo', AwsVsAliyunDemo)
+    app.component('ComputeServicesDemo', ComputeServicesDemo)
+    app.component('StorageServicesDemo', StorageServicesDemo)
+    app.component('NetworkServicesDemo', NetworkServicesDemo)
+    app.component('SecurityServicesDemo', SecurityServicesDemo)
+    app.component('PricingModelDemo', PricingModelDemo)
+    app.component('ServiceSelectionDemo', ServiceSelectionDemo)
+    app.component('DatabaseServicesDemo', DatabaseServicesDemo)
+    app.component('K8sServicesDemo', K8sServicesDemo)
+
+    // Cloud IAM Components Registration
+    app.component('IamRamComparisonDemo', IamRamComparisonDemo)
+    app.component('IdentityProviderDemo', IdentityProviderDemo)
+    app.component('RolePolicyDemo', RolePolicyDemo)
+    app.component('PermissionHierarchyDemo', PermissionHierarchyDemo)
+    app.component('AccessKeyManagementDemo', AccessKeyManagementDemo)
+    app.component('MfaSecurityDemo', MfaSecurityDemo)
+    app.component('CrossAccountAccessDemo', CrossAccountAccessDemo)
+    app.component('BestPracticesDemo', BestPracticesDemo)
+
+    // Gateway Proxy Components Registration
+    app.component('ReverseProxyDemo', ReverseProxyDemo)
+    app.component('ApiGatewayDemo', ApiGatewayDemo)
+    app.component('NginxArchitectureDemo', NginxArchitectureDemo)
+    app.component('RoutingRulesDemo', RoutingRulesDemo)
+    app.component('RateLimitingDemo', RateLimitingDemo)
+    app.component('AuthMiddlewareDemo', AuthMiddlewareDemo)
+    app.component('LoadBalancingDemo', LoadBalancingDemo)
+    app.component('SslTerminationDemo', SslTerminationDemo)
+
+    // Load Balancing Components Registration
+    app.component('LoadBalancerTypesDemo', LoadBalancerTypesDemo)
+    app.component('HealthCheckDemo', HealthCheckDemo)
+    app.component('SessionPersistenceDemo', SessionPersistenceDemo)
+    app.component('WeightedRoutingDemo', WeightedRoutingDemo)
+    app.component('BlueGreenDeploymentDemo', BlueGreenDeploymentDemo)
+    app.component('CanaryReleaseDemo', CanaryReleaseDemo)
+    app.component('AutoScalingDemo', AutoScalingDemo)
+    app.component('MultiRegionDemo', MultiRegionDemo)
+
+    // Backend Layered Architecture Components Registration
+    app.component('LayeredArchitectureDemo', LayeredArchitectureDemo)
+    app.component('ControllerLayerDemo', ControllerLayerDemo)
+    app.component('ServiceLayerDemo', ServiceLayerDemo)
+    app.component('RepositoryLayerDemo', RepositoryLayerDemo)
+    app.component('DomainModelDemo', DomainModelDemo)
+    app.component('DtoFlowDemo', DtoFlowDemo)
+
+    // Browser Rendering Pipeline Components Registration
+    app.component('DomToRenderTreeDemo', DomToRenderTreeDemo)
+    app.component('LayoutReflowDemo', LayoutReflowDemo)
+    app.component('PaintLayerDemo', PaintLayerDemo)
+    app.component('CompositeDemo', CompositeDemo)
+    app.component('MacroMicroTaskDemo', MacroMicroTaskDemo)
+    app.component('RenderingPerformanceDemo', RenderingPerformanceDemo)
+
+    // Cache Design Extra Components Registration
+    app.component('CacheArchitectureOverview', CacheArchitectureOverview)
+    app.component('CacheHierarchyDemo', CacheHierarchyDemo)
+    app.component('CachePatternComparisonDemo', CachePatternComparisonDemo)
+    app.component('EcommerceCacheArchitectureDemo', EcommerceCacheArchitectureDemo)
+    app.component('CacheMonitoringDashboardDemo', CacheMonitoringDashboardDemo)
+
+    // Cloud Storage CDN Extra Components Registration
+    app.component('EdgeNodeDistributionDemo', EdgeNodeDistributionDemo)
+    app.component('CachePolicyDemo', CachePolicyDemo)
+    app.component('TrafficSchedulingDemo', TrafficSchedulingDemo)
+    app.component('HttpsOptimizationDemo', HttpsOptimizationDemo)
+    app.component('AccessAnalyticsDemo', AccessAnalyticsDemo)
+
+    // API Design Extra Components Registration
+    app.component('ErrorHandlingDemo', ErrorHandlingDemo)
+    app.component('VersioningStrategyDemo', VersioningStrategyDemo)
+    app.component('DocumentationDemo', DocumentationDemo)
+    app.component('ResourceAnalogy', ResourceAnalogy)
+    app.component('RequestStructureDemo', RequestStructureDemo)
+    app.component('ResponseStructureDemo', ResponseStructureDemo)
+
+    // Database Intro Extra Components Registration
+    app.component('DatabaseEvolutionDemo', DatabaseEvolutionDemo)
+    app.component('DatabaseRelationDemo', DatabaseRelationDemo)
+    app.component('BPlusTreeDemo', BPlusTreeDemo)
+    app.component('TransactionACIDDemo', TransactionACIDDemo)
+    app.component('QueryOptimizationDemo', QueryOptimizationDemo)
+
+    // Queue Design Extra Components Registration
+    app.component('MQArchitectureDemo', MQArchitectureDemo)
+    app.component('ProducerConsumerDemo', ProducerConsumerDemo)
+    app.component('ReliabilityDemo', ReliabilityDemo)
+    app.component('IdempotenceDemo', IdempotenceDemo)
+    app.component('MQComparisonDemo', MQComparisonDemo)
   },
   setup() {
     const route = useRoute()
diff --git a/docs/zh-cn/appendix/api-design.md b/docs/zh-cn/appendix/api-design.md
new file mode 100644
index 0000000..94b3b17
--- /dev/null
+++ b/docs/zh-cn/appendix/api-design.md
@@ -0,0 +1,989 @@
+# 后端接口设计与错误处理：请求、响应与状态码结构
+
+> 💡 **学习指南**：接口设计解决的是"客户端和服务端如何对话"，错误处理解决的是"出问题时怎么优雅地告诉用户"。本章节会围绕一个问题展开：**如何设计一套让前后端都舒服的 API 规范？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **HTTP 是什么**：可以先阅读 [Web 基础](./web-basics/http.md) 的「请求-响应模型」部分。
+- **REST 是什么**：如果你还不熟悉 RESTful 架构风格，可以先了解 [REST API 设计原则](https://restfulapi.net/)。
+
+---
+
+## 0. 引言：为什么好接口像好餐厅的点餐系统？
+
+<RestfulDesignDemo />
+
+想象一下你走进一家餐厅：
+
+- 菜单（API 文档）清楚标注了每道菜的口味、配料、价格
+- 服务员（HTTP 协议）用标准化的方式记录你的点餐
+- 后厨（服务端）按约定流程烹饪
+- 上菜时（响应）盘子摆盘规范，附带小票说明
+
+**好的 API 设计就像这套点餐系统**——双方约定好"说什么话"、"怎么说话"、"出错怎么办"，才能高效协作。
+
+但很多团队的真实情况是：
+
+- 接口命名随心所欲：`/getUserData`、`/fetchUserInfo`、`/queryUserById` 并存
+- 错误处理五花八门：有的返回 HTTP 状态码，有的返回 `code: 500`，有的直接抛异常
+- 响应结构千人千面：同一个项目里，有的用 `data`，有的用 `result`，有的用 `content`
+
+**结果就是**：前后端互相猜，联调痛苦，维护成本高，新人入职一脸懵。
+
+本章节会带你从最基础的 RESTful 设计开始，一步步掌握一套**可落地、可维护、可扩展**的 API 设计规范。
+
+---
+
+## 1. RESTful 设计：让你的 URL 会说话
+
+### 1.1 什么是 RESTful？
+
+REST（Representational State Transfer，表述性状态传递）是一种软件架构风格，由 Roy Fielding 在 2000 年提出。
+
+**核心思想**：把网络上的所有事物都抽象为"资源"（Resource），用 URL 标识资源，用 HTTP 方法操作资源。
+
+<ResourceAnalogy />
+
+> 想象 URL 是一个仓库的货架地址：
+> - `/warehouse/products` 是"产品区"
+> - `/warehouse/products/123` 是"编号 123 的产品"
+> - HTTP 方法就是你允许的操作：GET（查看）、POST（入库）、PUT（更新）、DELETE（出库）
+
+### 1.2 URL 设计的 7 个黄金法则
+
+<HttpMethodsDemo />
+
+| 法则 | 正确示例 | 错误示例 | 原因 |
+|------|---------|---------|------|
+| **1. 用名词，不用动词** | `GET /users` | `GET /getUsers` | URL 是资源地址，不是操作 |
+| **2. 用复数** | `GET /orders` | `GET /order` | 一致性好，表示集合 |
+| **3. 小写字母** | `/user-profiles` | `/UserProfiles` | URL 大小写敏感，统一小写避免混乱 |
+| **4. 用连字符分隔** | `/user-profiles` | `/user_profiles` | 连字符是 URL 规范，下划线在某些场景会转义 |
+| **5. 避免层级过深** | `/users/123/orders` | `/users/123/orders/456/items/789/status` | 超过 3 层考虑用查询参数或重构 |
+| **6. 用查询参数过滤** | `GET /products?category=phone&price_max=5000` | `GET /products/category/phone/price/5000` | 过滤条件多且变，不适合放路径 |
+| **7. 版本号放 URL** | `/v1/users` 或 `v1.users.api.com` | 混用新旧接口无版本 | 便于灰度发布和向后兼容 |
+
+### 1.3 HTTP 方法的选择
+
+| 方法 | 用途 | 幂等性* | 安全性** | 典型场景 |
+|------|------|---------|---------|---------|
+| **GET** | 获取资源 | 是 | 是 | 查询列表、查看详情 |
+| **POST** | 创建资源 | 否 | 否 | 新增用户、提交订单 |
+| **PUT** | 全量更新 | 是 | 否 | 替换整个用户资料 |
+| **PATCH** | 部分更新 | 否 | 否 | 修改用户昵称（只传一个字段） |
+| **DELETE** | 删除资源 | 是 | 否 | 删除用户、取消订单 |
+
+> *幂等性：多次执行结果相同。比如 PUT 同一个资源 10 次，结果还是那一个资源。
+> **安全性：不会改变服务器状态。GET 是安全的，POST/PUT/DELETE 都不安全。
+
+### 1.4 实战示例：电商系统的 RESTful API
+
+```
+# 用户模块
+GET    /v1/users                    # 获取用户列表（支持分页、过滤）
+POST   /v1/users                    # 创建新用户
+GET    /v1/users/{id}               # 获取用户详情
+PUT    /v1/users/{id}               # 全量更新用户信息
+PATCH  /v1/users/{id}               # 部分更新（如：修改密码）
+DELETE /v1/users/{id}               # 删除用户
+
+# 订单模块（嵌套资源，最多 3 层）
+GET    /v1/users/{id}/orders         # 获取某用户的所有订单
+POST   /v1/users/{id}/orders         # 为用户创建订单
+GET    /v1/orders/{orderId}         # 获取订单详情（扁平化，避免过深）
+PATCH  /v1/orders/{orderId}/status   # 更新订单状态（子资源操作）
+
+# 商品模块（复杂过滤用查询参数）
+GET    /v1/products?category=electronics&price_min=100&price_max=5000&sort=price_desc&page=2&page_size=20
+
+# 复杂报表（特殊场景，URL 可带动词）
+POST   /v1/reports/sales/export      # 导出销售报表（非纯 CRUD，动词可接受）
+```
+
+---
+
+## 2. 状态码：让错误"会说话"
+
+### 2.1 为什么状态码很重要？
+
+<StatusCodeDemo />
+
+想象一下，如果你的 API 不管成功失败都返回 `200 OK`，客户端该怎么判断？
+
+```json
+// 错误的做法：HTTP 200，但业务失败
+HTTP/1.1 200 OK
+{
+  "success": false,
+  "error": "用户不存在"
+}
+```
+
+**问题在哪？**
+- 缓存层（CDN、浏览器）会缓存这个"成功的"响应
+- 监控工具以为一切正常
+- 前端需要额外解析 JSON 才知道有没有错
+
+**正确的做法**：用 HTTP 状态码表示传输层状态，和业务成功/失败解耦。
+
+### 2.2 常用状态码速查表
+
+| 状态码 | 含义 | 使用场景 | 响应体内容 |
+|--------|------|---------|-----------|
+| **2xx 成功** ||||
+| 200 OK | 通用成功 | GET 查询成功、PUT/PATCH 更新成功 | 资源数据 |
+| 201 Created | 创建成功 | POST 创建资源成功 | 新资源数据 + Location 头 |
+| 202 Accepted | 已接受 | 异步任务提交成功（如：导出报表） | 任务状态/轮询地址 |
+| 204 No Content | 无内容 | DELETE 删除成功、PUT 更新但无需返回数据 | 空 |
+| **3xx 重定向** ||||
+| 301 Moved Permanently | 永久重定向 | 资源 URL 永久变更（如：v1 废弃，跳转 v2） | 新 URL |
+| 302 Found | 临时重定向 | 临时跳转（较少用于 API） | 临时 URL |
+| 304 Not Modified | 未修改 | 缓存有效（配合 If-None-Match/If-Modified-Since） | 空（用缓存） |
+| **4xx 客户端错误** ||||
+| 400 Bad Request | 请求格式错误 | 参数缺失、JSON 格式错误、字段类型不对 | 错误详情 |
+| 401 Unauthorized | 未认证 | 缺少 Token、Token 过期、签名错误 | 认证方式说明 |
+| 403 Forbidden | 禁止访问 | 已登录但无权限（如：普通用户访问管理员接口） | 无权限说明 |
+| 404 Not Found | 资源不存在 | URL 错误、资源已删除 | 错误详情 |
+| 405 Method Not Allowed | 方法不允许 | 如：对只读资源调用 POST | 允许的 Methods |
+| 409 Conflict | 资源冲突 | 重复创建（唯一约束冲突）、乐观锁版本冲突 | 冲突详情 |
+| 422 Unprocessable Entity | 语义错误 | 请求格式对，但业务校验失败（如：密码太短） | 校验错误详情 |
+| 429 Too Many Requests | 请求过多 | 触发限流（Rate Limiting） | 重试时间 |
+| **5xx 服务端错误** ||||
+| 500 Internal Server Error | 服务器内部错误 | 未捕获的异常、代码 bug | 错误 ID（不要暴露堆栈） |
+| 502 Bad Gateway | 网关错误 | 反向代理（Nginx）无法连接到后端服务 | - |
+| 503 Service Unavailable | 服务不可用 | 服务正在维护、过载保护触发 | 恢复时间估计 |
+| 504 Gateway Timeout | 网关超时 | 后端响应太慢，被代理层切断 | - |
+
+### 2.3 状态码使用的"避坑指南"
+
+**坑 1：所有错误都用 400**
+```
+❌ GET /users/999  → 400 (用户不存在应该返回 404)
+❌ POST /login 密码错误 → 400 (应该返回 401 或 422)
+❌ 删除已删除的资源 → 400 (应该返回 404 或 204)
+```
+
+**坑 2：业务状态混在 HTTP 状态码里**
+```
+❌ 订单支付失败 → 402 Payment Required (这个状态码是为数字钱包预留的，不要滥用)
+✅ 订单支付失败 → 200 OK + body: { "code": "PAYMENT_FAILED", "message": "余额不足" }
+```
+
+**坑 3：暴露敏感信息**
+```
+❌ 500 响应里返回完整的堆栈跟踪、SQL 查询语句、数据库连接信息
+✅ 只返回 "错误 ID"，详细日志记录到服务器，通过错误 ID 关联
+```
+
+---
+
+## 3. 请求与响应：标准化的数据契约
+
+### 3.1 请求结构设计
+
+<RequestStructureDemo />
+
+**HTTP 请求由 3 部分组成**：
+
+```http
+# 1. 请求行（方法 + URL + 协议版本）
+POST /v1/users HTTP/1.1
+
+# 2. 请求头（元数据）
+Host: api.example.com
+Content-Type: application/json
+Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
+X-Request-ID: req-123456789
+Accept: application/json
+Accept-Language: zh-CN,zh;q=0.9
+
+# 3. 请求体（仅 POST/PUT/PATCH 需要）
+{
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "phone": "13800138000"
+}
+```
+
+#### 查询参数设计规范
+
+```http
+# 分页（必须）
+GET /products?page=1&page_size=20
+
+# 排序（可选）
+GET /products?sort=created_at&order=desc
+
+# 过滤（可选，支持多种操作符）
+GET /products?price_min=100&price_max=5000          # 范围
+GET /products?category=electronics,clothing         # 多选（IN）
+GET /products?status=active&is_featured=true         # 布尔
+GET /products?search=iPhone                         # 全文搜索
+
+# 字段选择（可选，减少数据传输）
+GET /products?fields=id,name,price,image
+
+# 组合使用
+GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&price_max=5000&fields=id,name,price
+```
+
+#### 请求头设计规范
+
+| 头部字段 | 用途 | 示例 | 是否必需 |
+|---------|------|------|---------|
+| `Authorization` | 认证信息 | `Bearer eyJhbGciOiJIUzI1NiIs...` | 受保护接口必需 |
+| `Content-Type` | 请求体格式 | `application/json` | POST/PUT/PATCH 必需 |
+| `Accept` | 期望响应格式 | `application/json` | 建议携带 |
+| `Accept-Language` | 期望语言 | `zh-CN,zh;q=0.9,en;q=0.8` | 多语言应用必需 |
+| `X-Request-ID` | 请求唯一标识 | `req-550e8400-e29b-41d4-a716-446655440000` | 建议携带，便于追踪 |
+| `X-Client-Version` | 客户端版本 | `iOS-2.5.1` / `Web-3.0.0` | 建议携带，便于问题排查 |
+| `If-None-Match` | 缓存校验 | `"abc123"` | 可选，用于乐观并发控制 |
+
+### 3.2 响应结构设计
+
+<ResponseStructureDemo />
+
+**标准化响应结构**（无论成功与否，结构一致）：
+
+```json
+{
+  "code": 0,
+  "message": "success",
+  "data": { ... },
+  "request_id": "req-123456789",
+  "timestamp": "2024-01-15T09:30:00.000Z"
+}
+```
+
+#### 响应字段说明
+
+| 字段 | 类型 | 说明 | 示例 |
+|------|------|------|------|
+| `code` | integer | 业务状态码，`0` 表示成功，非 `0` 表示失败 | `0`, `10001`, `20003` |
+| `message` | string | 状态描述，成功时为 `"success"`，失败时为错误描述 | `"success"`, `"用户不存在"` |
+| `data` | any | 业务数据，成功时返回具体数据，失败时可返回 `null` 或错误详情 | `{ "id": 1, "name": "张三" }` |
+| `request_id` | string | 请求唯一标识，用于问题追踪 | `"req-550e8400-e29b-41d4-a716-446655440000"` |
+| `timestamp` | string | 响应时间戳，ISO 8601 格式 | `"2024-01-15T09:30:00.000Z"` |
+
+#### 分页响应结构
+
+```json
+{
+  "code": 0,
+  "message": "success",
+  "data": {
+    "list": [
+      { "id": 1, "name": "商品A", "price": 100 },
+      { "id": 2, "name": "商品B", "price": 200 }
+    ],
+    "pagination": {
+      "page": 1,
+      "page_size": 20,
+      "total": 156,
+      "total_pages": 8,
+      "has_next": true,
+      "has_prev": false
+    }
+  }
+}
+```
+
+#### 批量操作响应结构
+
+```json
+{
+  "code": 0,
+  "message": "success",
+  "data": {
+    "success_count": 8,
+    "fail_count": 2,
+    "details": [
+      { "id": 1, "status": "success", "message": "操作成功" },
+      { "id": 2, "status": "success", "message": "操作成功" },
+      { "id": 3, "status": "failed", "code": 40001, "message": "用户不存在" },
+      { "id": 4, "status": "failed", "code": 40002, "message": "状态不允许操作" }
+    ]
+  }
+}
+```
+
+---
+
+## 4. 错误处理：优雅地"拒绝"
+
+### 4.1 为什么错误处理如此重要？
+
+<ErrorHandlingDemo />
+
+一个好的错误处理机制，能让客户端"看状态码就知道怎么回事"，而不是去猜。
+
+**错误的示范**：
+```json
+HTTP/1.1 200 OK
+{
+  "error": "出错了"
+}
+```
+问题：
+- HTTP 状态码说"成功"，但业务说"出错"
+- 错误信息太笼统，无法定位问题
+- 没有错误代码，难以程序化判断
+
+**正确的示范**：
+```json
+HTTP/1.1 422 Unprocessable Entity
+{
+  "code": 20003,
+  "message": "密码强度不足",
+  "errors": [
+    {
+      "field": "password",
+      "code": "VALIDATION_ERROR",
+      "message": "密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字，且长度至少 8 位"
+    }
+  ],
+  "request_id": "req-550e8400-e29b-41d4-a716-446655440000",
+  "timestamp": "2024-01-15T09:30:00.000Z",
+  "help_url": "https://docs.example.com/errors/20003"
+}
+```
+
+### 4.2 错误码设计规范
+
+#### 分层错误码体系
+
+```
+错误码格式：1XXYY
+- 第 1 位（1）：固定，表示错误
+- 第 2-3 位（XX）：模块/层次
+- 第 4-5 位（YY）：具体错误
+```
+
+| 模块代码 | 模块名称 | 说明 |
+|---------|---------|------|
+| 00 | 通用 | 系统级、通用错误 |
+| 10 | 用户模块 | 注册、登录、用户信息相关 |
+| 11 | 认证授权 | Token、权限相关 |
+| 20 | 商品模块 | 商品 CRUD、库存相关 |
+| 30 | 订单模块 | 下单、支付、物流相关 |
+| 40 | 支付模块 | 支付渠道、退款相关 |
+| 50 | 营销模块 | 优惠券、活动相关 |
+| 90 | 第三方服务 | 短信、邮件、云存储等 |
+
+#### 错误码定义示例
+
+```javascript
+// 通用错误 (00XXX)
+const CommonErrors = {
+  UNKNOWN_ERROR: { code: 10000, message: '未知错误', httpStatus: 500 },
+  INVALID_PARAMETER: { code: 10001, message: '参数错误', httpStatus: 400 },
+  RESOURCE_NOT_FOUND: { code: 10002, message: '资源不存在', httpStatus: 404 },
+  METHOD_NOT_ALLOWED: { code: 10003, message: '请求方法不允许', httpStatus: 405 },
+  REQUEST_TIMEOUT: { code: 10004, message: '请求超时', httpStatus: 408 },
+  RATE_LIMIT_EXCEEDED: { code: 10005, message: '请求过于频繁', httpStatus: 429 },
+  INTERNAL_SERVER_ERROR: { code: 10006, message: '服务器内部错误', httpStatus: 500 },
+  SERVICE_UNAVAILABLE: { code: 10007, message: '服务不可用', httpStatus: 503 },
+}
+
+// 用户模块错误 (10XXX)
+const UserErrors = {
+  USER_NOT_FOUND: { code: 10010, message: '用户不存在', httpStatus: 404 },
+  USER_ALREADY_EXISTS: { code: 10011, message: '用户已存在', httpStatus: 409 },
+  INVALID_EMAIL_FORMAT: { code: 10012, message: '邮箱格式不正确', httpStatus: 422 },
+  INVALID_PHONE_FORMAT: { code: 10013, message: '手机号格式不正确', httpStatus: 422 },
+  PASSWORD_TOO_WEAK: { code: 10014, message: '密码强度不足', httpStatus: 422 },
+  PASSWORD_MISMATCH: { code: 10015, message: '两次输入的密码不一致', httpStatus: 422 },
+  USER_ACCOUNT_DISABLED: { code: 10016, message: '账号已被禁用', httpStatus: 403 },
+  USER_ACCOUNT_LOCKED: { code: 10017, message: '账号已被锁定', httpStatus: 403 },
+}
+
+// 认证授权错误 (11XXX)
+const AuthErrors = {
+  TOKEN_MISSING: { code: 10018, message: '缺少认证令牌', httpStatus: 401 },
+  TOKEN_INVALID: { code: 10019, message: '无效的认证令牌', httpStatus: 401 },
+  TOKEN_EXPIRED: { code: 10020, message: '认证令牌已过期', httpStatus: 401 },
+  INSUFFICIENT_PERMISSIONS: { code: 10021, message: '权限不足', httpStatus: 403 },
+  REFRESH_TOKEN_EXPIRED: { code: 10022, message: '刷新令牌已过期', httpStatus: 401 },
+}
+```
+
+### 4.3 多字段校验错误处理
+
+当表单有多个字段错误时，应该一次性返回所有错误：
+
+```json
+HTTP/1.1 422 Unprocessable Entity
+{
+  "code": 10001,
+  "message": "参数校验失败",
+  "errors": [
+    {
+      "field": "email",
+      "code": "INVALID_FORMAT",
+      "message": "邮箱格式不正确",
+      "value": "not-an-email"
+    },
+    {
+      "field": "password",
+      "code": "TOO_SHORT",
+      "message": "密码长度不能少于 8 位",
+      "value": "(hidden)",
+      "constraints": {
+        "min": 8,
+        "max": 32
+      }
+    },
+    {
+      "field": "age",
+      "code": "OUT_OF_RANGE",
+      "message": "年龄必须在 18-120 之间",
+      "value": 15,
+      "constraints": {
+        "min": 18,
+        "max": 120
+      }
+    }
+  ],
+  "request_id": "req-550e8400-e29b-41d4-a716-446655440000",
+  "timestamp": "2024-01-15T09:30:00.000Z"
+}
+```
+
+---
+
+## 5. 版本控制：API 的"向后兼容"
+
+### 5.1 为什么要做 API 版本控制？
+
+<VersioningStrategyDemo />
+
+场景：你的电商系统已经上线，App 有 100 万用户。现在需要修改订单接口，添加一个新字段，同时废弃一个旧字段。
+
+**如果不做版本控制**：
+- 新 App 调用新接口 → 正常工作
+- 旧 App 调用新接口 → 字段缺失，崩溃
+- 用户投诉 → 老板震怒 → 你背锅
+
+**正确的做法**：
+```
+/v1/orders  - 旧接口，继续服务旧 App
+/v2/orders  - 新接口，新功能在这里
+```
+
+旧 App 继续调用 `/v1/orders`，新功能上线不会崩。等旧 App 用户都升级了，再考虑废弃 v1。
+
+### 5.2 4 种版本控制策略
+
+| 策略 | 示例 | 优点 | 缺点 | 推荐度 |
+|------|------|------|------|--------|
+| **URL Path** | `/v1/users` | 最直观、易于缓存、文档清晰 | URL 变化 | ⭐⭐⭐⭐⭐ |
+| **Header** | `API-Version: v1` | URL 不变 | 不直观，难以缓存，需要读 Header 文档 | ⭐⭐⭐ |
+| **Content Negotiation** | `Accept: application/vnd.api.v1+json` | 标准 HTTP 规范 | 复杂，理解成本高 | ⭐⭐ |
+| **Query Parameter** | `/users?version=v1` | 简单 | 不专业，容易被忽视，缓存麻烦 | ⭐ |
+
+**推荐做法**：URL Path 版本控制，简单直观，行业主流。
+
+```
+# 推荐的 URL 结构
+https://api.example.com/v1/users
+https://api.example.com/v2/users
+
+# 或者使用子域名（大型系统）
+https://v1.api.example.com/users
+https://v2.api.example.com/users
+
+# 不推荐的做法
+https://api.example.com/users?version=v1  (Query 参数)
+https://api.example.com/users  (Header: API-Version: v1)
+```
+
+### 5.3 版本演进策略
+
+#### 语义化版本（SemVer）在 API 中的应用
+
+```
+API 版本格式：v{主版本}.{次版本}
+
+- 主版本（v1, v2, v3）：破坏性变更，不向后兼容
+- 次版本（v1.1, v1.2）：新增功能，向后兼容
+
+实际使用：
+- 通常只保留主版本在 URL：/v1/users, /v2/users
+- 次版本通过文档和 Header 标注：X-API-Revision: 1.3
+```
+
+#### 版本演进示例
+
+```
+时间线：
+
+2023-01: 发布 v1
+  GET /v1/users → 返回 { id, name, email }
+
+2023-06: v1 新增字段（向后兼容）
+  GET /v1/users → 返回 { id, name, email, phone }  ✓ 旧客户端仍能正常工作
+
+2024-01: 破坏性变更，发布 v2
+  GET /v2/users → 返回 {
+    user_id,           # id 改为 user_id
+    full_name,         # name 改为 full_name
+    email_address,     # email 改为 email_address
+    contact_phone,     # phone 改为 contact_phone
+    created_at         # 新增字段
+  }
+
+  同时：
+  - v1 标记为 Deprecated，继续服务 6 个月
+  - 在响应头添加：Deprecation: true, Sunset: Wed, 30 Jun 2024 00:00:00 GMT
+
+2024-07: 正式下线 v1
+  GET /v1/users → 410 Gone
+  {
+    "code": 10002,
+    "message": "API v1 已停用，请升级到 v2",
+    "help_url": "https://docs.example.com/migration/v1-to-v2"
+  }
+```
+
+---
+
+## 6. 文档规范：让接口"活"在文档里
+
+### 6.1 为什么 API 文档容易过时？
+
+<DocumentationDemo />
+
+传统文档的问题：
+- 接口变更后，文档没人更新
+- 文档和代码"各说各话"
+- 前端联调时，发现实际接口和文档不一致
+
+**解决方案**：
+1. **代码即文档**：使用 Swagger/OpenAPI 注解，从代码自动生成文档
+2. **契约先行**：API 变更必须同时更新文档，代码审查时检查
+3. **Mock 服务**：文档即 Mock，前端不用等后端完成就能开发
+
+### 6.2 OpenAPI 规范示例
+
+```yaml
+openapi: 3.0.3
+info:
+  title: 电商系统 API
+  description: |
+    提供用户、商品、订单等模块的接口服务。
+
+    ## 认证方式
+    所有需要认证的接口都需要在 Header 中携带 `Authorization: Bearer {token}`
+  version: 1.0.0
+  contact:
+    name: API Support
+    email: api@example.com
+
+servers:
+  - url: https://api.example.com/v1
+    description: 生产环境
+  - url: https://staging-api.example.com/v1
+    description: 测试环境
+
+paths:
+  /users:
+    get:
+      summary: 获取用户列表
+      description: 支持分页、排序和过滤
+      tags:
+        - 用户管理
+      parameters:
+        - name: page
+          in: query
+          description: 页码，从 1 开始
+          schema:
+            type: integer
+            default: 1
+            minimum: 1
+        - name: page_size
+          in: query
+          description: 每页数量
+          schema:
+            type: integer
+            default: 20
+            minimum: 1
+            maximum: 100
+        - name: sort
+          in: query
+          description: 排序字段
+          schema:
+            type: string
+            enum: [created_at, updated_at, name]
+            default: created_at
+        - name: order
+          in: query
+          description: 排序方向
+          schema:
+            type: string
+            enum: [asc, desc]
+            default: desc
+        - name: status
+          in: query
+          description: 按状态过滤
+          schema:
+            type: string
+            enum: [active, inactive, suspended]
+      responses:
+        '200':
+          description: 成功
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserListResponse'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '429':
+          $ref: '#/components/responses/TooManyRequests'
+
+    post:
+      summary: 创建用户
+      description: 注册新用户
+      tags:
+        - 用户管理
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CreateUserRequest'
+            examples:
+              success:
+                summary: 正常请求
+                value:
+                  name: "张三"
+                  email: "zhangsan@example.com"
+                  phone: "13800138000"
+                  password: "SecurePass123!"
+      responses:
+        '201':
+          description: 创建成功
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserResponse'
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '409':
+          $ref: '#/components/responses/Conflict'
+
+  /users/{userId}:
+    get:
+      summary: 获取用户详情
+      tags:
+        - 用户管理
+      parameters:
+        - name: userId
+          in: path
+          required: true
+          schema:
+            type: integer
+          description: 用户 ID
+      responses:
+        '200':
+          description: 成功
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserResponse'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  schemas:
+    User:
+      type: object
+      properties:
+        id:
+          type: integer
+          description: 用户唯一标识
+          example: 1
+        name:
+          type: string
+          description: 用户姓名
+          example: "张三"
+        email:
+          type: string
+          format: email
+          description: 邮箱地址
+          example: "zhangsan@example.com"
+        phone:
+          type: string
+          description: 手机号
+          example: "13800138000"
+        status:
+          type: string
+          enum: [active, inactive, suspended]
+          description: 账号状态
+          example: "active"
+        created_at:
+          type: string
+          format: date-time
+          description: 创建时间
+          example: "2024-01-15T09:30:00.000Z"
+        updated_at:
+          type: string
+          format: date-time
+          description: 更新时间
+          example: "2024-01-15T09:30:00.000Z"
+      required:
+        - id
+        - name
+        - email
+        - status
+        - created_at
+        - updated_at
+
+    UserResponse:
+      type: object
+      properties:
+        code:
+          type: integer
+          example: 0
+        message:
+          type: string
+          example: "success"
+        data:
+          $ref: '#/components/schemas/User'
+
+    UserListResponse:
+      type: object
+      properties:
+        code:
+          type: integer
+          example: 0
+        message:
+          type: string
+          example: "success"
+        data:
+          type: object
+          properties:
+            list:
+              type: array
+              items:
+                $ref: '#/components/schemas/User'
+            pagination:
+              type: object
+              properties:
+                page:
+                  type: integer
+                  example: 1
+                page_size:
+                  type: integer
+                  example: 20
+                total:
+                  type: integer
+                  example: 156
+                total_pages:
+                  type: integer
+                  example: 8
+                has_next:
+                  type: boolean
+                  example: true
+                has_prev:
+                  type: boolean
+                  example: false
+
+    CreateUserRequest:
+      type: object
+      properties:
+        name:
+          type: string
+          minLength: 2
+          maxLength: 50
+          description: 用户姓名
+          example: "张三"
+        email:
+          type: string
+          format: email
+          description: 邮箱地址
+          example: "zhangsan@example.com"
+        phone:
+          type: string
+          pattern: '^1[3-9]\\d{9}$'
+          description: 手机号
+          example: "13800138000"
+        password:
+          type: string
+          minLength: 8
+          description: 密码
+          example: "SecurePass123!"
+      required:
+        - name
+        - email
+        - password
+
+    Error:
+      type: object
+      properties:
+        code:
+          type: integer
+          description: 业务错误码
+          example: 10001
+        message:
+          type: string
+          description: 错误描述
+          example: "参数校验失败"
+        errors:
+          type: array
+          items:
+            type: object
+            properties:
+              field:
+                type: string
+                example: "email"
+              code:
+                type: string
+                example: "INVALID_FORMAT"
+              message:
+                type: string
+                example: "邮箱格式不正确"
+        request_id:
+          type: string
+          example: "req-550e8400-e29b-41d4-a716-446655440000"
+        timestamp:
+          type: string
+          format: date-time
+          example: "2024-01-15T09:30:00.000Z"
+        help_url:
+          type: string
+          example: "https://docs.example.com/errors/10001"
+
+  responses:
+    BadRequest:
+      description: 请求参数错误
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10001
+            message: "参数校验失败"
+            errors:
+              - field: "email"
+                code: "INVALID_FORMAT"
+                message: "邮箱格式不正确"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+
+    Unauthorized:
+      description: 未认证或认证失败
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10018
+            message: "无效的认证令牌"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+
+    Forbidden:
+      description: 无权限访问
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10021
+            message: "权限不足，需要管理员权限"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+
+    NotFound:
+      description: 资源不存在
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10002
+            message: "用户不存在"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+
+    Conflict:
+      description: 资源冲突
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10011
+            message: "用户已存在"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+
+    TooManyRequests:
+      description: 请求过于频繁
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Error'
+          example:
+            code: 10005
+            message: "请求过于频繁，请稍后再试"
+            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
+            timestamp: "2024-01-15T09:30:00.000Z"
+```
+
+---
+
+## 7. 总结：API 设计 checklist
+
+### 设计阶段
+
+- [ ] URL 设计符合 RESTful 规范（名词、复数、小写、连字符）
+- [ ] HTTP 方法使用正确（GET/POST/PUT/PATCH/DELETE）
+- [ ] 状态码选择恰当（2xx/4xx/5xx 区分清楚）
+- [ ] 错误码体系设计完成（分层、易扩展）
+- [ ] 响应结构标准化（code/message/data 统一）
+- [ ] 版本控制策略确定（URL Path 推荐）
+- [ ] 分页/排序/过滤参数设计统一
+
+### 实现阶段
+
+- [ ] 所有接口都有完善的 OpenAPI 文档
+- [ ] 参数校验规则清晰（类型、长度、必填）
+- [ ] 敏感信息脱敏处理（密码、Token 等）
+- [ ] 错误日志记录完整（带 request_id）
+- [ ] 接口性能监控到位（响应时间、错误率）
+- [ ] 限流熔断策略配置（防刷、降级）
+
+### 维护阶段
+
+- [ ] 接口变更走评审流程（兼容性检查）
+- [ ] 废弃接口有明确的 Sunset 计划
+- [ ] 客户端接入文档及时更新
+- [ ] 错误码文档随代码同步维护
+
+---
+
+## 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+|---------|---------|------|
+| **REST** | 表述性状态传递 | 一种软件架构风格，用 URL 标识资源，用 HTTP 方法操作资源 |
+| **RESTful** | 符合 REST 规范的 | 遵循 REST 架构风格设计的 API |
+| **Endpoint** | 端点 | API 的具体 URL 地址，如 `/users` |
+| **Resource** | 资源 | REST 架构中的核心概念，网络上的任何事物都可抽象为资源 |
+| **URI** | 统一资源标识符 | 标识资源的字符串，URL 是 URI 的一种 |
+| **HTTP Method** | HTTP 方法 | GET、POST、PUT、PATCH、DELETE 等 |
+| **Status Code** | 状态码 | HTTP 响应中的 3 位数字，表示请求的处理结果 |
+| **Payload** | 载荷 | HTTP 请求或响应的主体数据 |
+| **Header** | 头部 | HTTP 请求或响应的元数据 |
+| **Query String** | 查询字符串 | URL 中 `?` 后面的参数部分 |
+| **Path Parameter** | 路径参数 | URL 路径中的变量，如 `/users/{id}` |
+| **Pagination** | 分页 | 大数据量时分批返回的机制 |
+| **Idempotency** | 幂等性 | 多次执行结果相同的特性 |
+| **Deprecation** | 弃用 | 标记即将废弃的功能或接口 |
+| **Backward Compatibility** | 向后兼容 | 新版本兼容旧版本的接口调用 |
+| **Rate Limiting** | 限流 | 控制单位时间内的请求数量 |
+| **OpenAPI** | 开放 API 规范 | 描述 REST API 的标准格式（原 Swagger） |
+| **SDK** | 软件开发工具包 | 封装 API 调用的开发工具包 |
diff --git a/docs/zh-cn/appendix/backend-evolution.md b/docs/zh-cn/appendix/backend-evolution.md
index 41ea4e2..6fa7215 100644
--- a/docs/zh-cn/appendix/backend-evolution.md
+++ b/docs/zh-cn/appendix/backend-evolution.md
@@ -1,98 +1,180 @@
-# 后端进化史：从 "单体" 到 "无服务" (Interactive Intro)
+# 后端架构演进：从单机到云原生
 
-> 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你回顾后端架构的 30 年变迁。我们将从最早的物理服务器讲起，一直到现代的 Serverless 云计算。
+> 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你回顾后端架构的 30 年变迁。我们将从最原始的物理服务器讲起，一直到现代的 Serverless 云计算。理解架构演进的历史，能帮助你在面对技术选型时做出更明智的决策。
 
-<BackendEvolutionDemo />
-
-## 0. 引言：看不见的"大后方"
-
-你点的外卖、刷的视频、发的微信，背后都有一个庞大的系统在支撑。
-这个系统就是**后端 (Backend)**。
-
-如果前端是"餐厅的服务员"，那后端就是"后厨"。
-为了服务越来越多的客人（用户），后厨经历了一次次痛苦的扩建和重组。
-
-核心变化只有一点：**如何以最低的成本，支撑最大规模的用户？**
+<EvolutionIntroDemo />
 
 ---
 
-## 1. 原始时代：物理服务器 & CGI (1990s)
+## 0. 引言：为什么要了解架构演进？
 
-在互联网刚起步时，后端就是一台放在机房里的**物理服务器**。
-你把 `index.html`、`script.pl` 通过 FTP 传上去，用户访问时服务器逐个执行脚本。
+想象一下，你正在规划一次长途旅行。你可以选择骑自行车、开私家车、坐高铁，或者乘飞机。每种方式都有其适用的场景：自行车适合短距离且想锻炼身体的情况，飞机则适合跨越大陆的长途旅行。
 
-### 1.1 痛点：慢、贵、难扩展
+**后端架构的选择也是如此。**
 
-- **慢**：每次改代码都要手动上传。
-- **贵**：扩容只能买更大的机器。
-- **难扩展**：一台机器顶住所有请求，坏了就全站宕机。
+从互联网诞生到现在，后端架构经历了多次重大变革。每一次变革都不是为了"追新潮"，而是为了解决当时面临的特定问题：
 
-**关键点**：这一阶段的核心问题是**硬件扩展与部署效率**。
+| 年代 | 核心问题 | 架构演进 |
+|------|---------|---------|
+| 1990s | 如何把网站跑起来 | 物理服务器 |
+| 2000s | 代码越来越乱怎么维护 | 单体架构 + MVC |
+| 2010s | 系统太大怎么扩展和协作 | 微服务 + 容器化 |
+| 2020s | 如何降低运维成本和复杂性 | Serverless + 云原生 |
 
-<CgiQueueDemo />
+**了解架构演进的意义在于：**
+
+1. **避免重复造轮子**：很多"新"概念其实早在几十年前就有雏形，了解历史能让你站在巨人的肩膀上
+2. **做出合理的技术选型**：没有最好的架构，只有最适合当前阶段的架构
+3. **理解技术背后的权衡**：每一次架构演进都是在**开发效率**、**系统性能**、**运维复杂度**之间做取舍
+4. **预判技术趋势**：历史总是押韵的，理解过去的演进规律有助于把握未来方向
+
+<ArchitectureComparisonDemo />
 
 ---
 
-## 2. 简单粗暴：单体架构 (Monolith)
+## 1. 物理服务器时代 (1990s)
 
-随着框架的出现（Rails / Django / Spring），大家把所有功能都塞进一个应用里：
-登录、下单、支付、商品管理……都在一个进程里完成。
+在互联网刚起步时，后端就是一台放在机房里的**物理服务器**（一台真实的电脑）。
 
-就像一个小餐馆，洗菜、切菜、炒菜都在一个大厨房里完成。
+<PhysicalServerDemo />
 
-- **优点**：开发简单，部署方便（把一个大包扔到服务器上就行）。
-- **缺点**：牵一发而动全身。
+### 1.1 核心特点
 
-### 2.1 "雪崩"效应
+- **单机部署**：所有应用运行在一台物理机上
+- **手动运维**：需要人工上架、布线、安装系统
+- **垂直扩展**：性能不够时只能买更强的机器
+
+### 1.2 痛点
+
+- **慢**：每次改代码都要手动上传，然后重启服务器
+- **贵**：扩容只能买更大的机器（垂直扩展）
+- **难扩展**：一台机器顶住所有请求，CPU 满载时就只能排队
+
+### 1.3 扩展策略
+
+<ScalingStrategyDemo />
+
+### 1.4 物理服务器时代的优缺点
+
+| 维度 | 评价 |
+|------|------|
+| **优点** | 完全掌控硬件，性能可预测；没有虚拟化开销；数据物理隔离，安全性高 |
+| **缺点** | 采购周期长（数周）；前期投入大（CapEx）；资源利用率低；扩容困难 |
+| **适用场景** | 金融核心系统、政府涉密系统、对数据主权有严格要求的场景 |
+
+---
+
+## 2. 单体架构时代 (2000s)
+
+随着框架的出现（Rails / Django / Spring），大家把所有功能都塞进一个应用里。
+
+<MonolithDemo />
+
+### 2.1 核心特点
+
+- **单一代码库**：所有功能模块在同一个项目中
+- **共享数据库**：所有模块共用同一个数据库
+- **统一部署**：整个应用作为一个整体打包部署
+
+### 2.2 优点
+
+- **开发简单**：一个项目搞定所有功能
+- **部署方便**：把一个大包扔到服务器上就行
+- **调试容易**：本地启动就能调试所有功能
+
+### 2.3 痛点：雪崩效应
 
 想象一下，如果"切菜"的师傅不小心切到了手（代码出了 Bug），整个后厨都要停下来处理伤口，导致所有客人都吃不上饭。
 
 这就是单体架构最大的风险：**隔离性差**。
 
-<MonolithReleaseRiskDemo />
+### 2.4 单体架构的优缺点与适用场景
 
-### 2.2 交互演示：单体 vs 微服务
+| 维度 | 评价 |
+|------|------|
+| **优点** | 开发简单，无需考虑分布式复杂性；调试方便，本地启动即可调试全功能；部署简单，一个包即可运行；事务管理容易，单机数据库即可保证 ACID |
+| **缺点** | 代码耦合度高，随着业务增长代码膨胀；技术栈单一，难以局部升级；扩展困难，只能整体扩容；故障隔离差，一个模块故障影响全局；团队协作效率低，多人改同一套代码 |
+| **适用场景** | 初创公司 MVP 验证、小型团队（<10人）、业务相对简单、对交付速度要求高于扩展性的场景 |
+| **不适用场景** | 大型团队并行开发、需要频繁发布不同模块、某些模块需要独立扩容的场景 |
 
-下方的演示展示了两种架构在面对故障时的不同表现。
+### 2.5 部署流程演进
 
-- 点击 **"Simulate Crash"** 按钮，模拟订单模块 (Order Service) 崩溃。
-- **左边 (单体)**：订单模块崩溃导致内存溢出，**整个系统**（包括用户、支付）全部瘫痪。
-- **右边 (微服务)**：订单模块挂了，但用户还能登录，还能查看历史账单。只有"下单"功能暂时不可用。
+<DeploymentFlowDemo />
 
-<MonolithVsMicroserviceDemo />
+### 2.6 单体架构的技术栈
 
-**关键点**：微服务架构的核心价值，在于**故障隔离**和**独立扩展**。
+在单体架构时代，开发者通常使用以下技术栈：
+
+| 语言/框架 | 特点 | 代表企业 |
+|---------|------|---------|
+| **Java + Spring** | 企业级开发首选，生态完善 | 阿里巴巴、京东 |
+| **PHP + Laravel/ThinkPHP** | 快速开发，适合中小型项目 | 早期 Facebook、微博 |
+| **Python + Django/Flask** | 开发效率高，适合快速原型 | Instagram、Pinterest |
+| **Ruby on Rails** | 约定优于配置，初创公司最爱 | GitHub、Twitter（早期） |
+| **Node.js + Express** | 前后端统一语言，I/O 密集型场景 | Netflix、Uber |
 
 ---
 
-## 3. 蚂蚁雄兵：微服务 (Microservices)
+## 3. 容器化与微服务 (2010s)
 
-为了解决单体的问题，我们把大厨房拆成了很多个小厨房（服务）。
+### 3.1 Docker 容器化
+
+<ContainerDockerDemo />
+
+Docker 就像是**集装箱**，它把每个小服务连同它的锅碗瓢盆（依赖库）一起打包。
+
+无论运到哪里（哪台服务器），打开集装箱就能直接开工，不用再重新安装环境。
+
+### 3.2 技术栈时间线
+
+<TechStackTimelineDemo />
+
+### 3.3 微服务架构
+
+<MicroservicesDemo />
+
+为了解决单体的问题，我们把大厨房拆成了很多个小厨房（服务）：
 
 - 专门负责用户的服务
 - 专门负责订单的服务
 - 专门负责支付的服务
 
-### 3.1 容器化革命 (Docker)
+### 3.4 Kubernetes 编排
 
-怎么管理这么多小厨房？
-Docker 就像是**集装箱**。它把每个小服务连同它的锅碗瓢盆（依赖库）一起打包。
-无论运到哪里（哪台服务器），打开集装箱就能直接开工，不用再重新安装环境。
-
-### 3.2 编排与治理：K8s / 服务网格
+<KubernetesDemo />
 
 当集装箱数量到达成百上千，就需要一个"港口调度系统"：
 
-- **Kubernetes (K8s)**：负责把容器安排到合适的机器上（调度、扩缩容、滚动更新）。
-- **Service Mesh**：负责服务之间的交通规则（熔断、限流、重试、可观测）。
+- **Kubernetes (K8s)**：负责把容器安排到合适的机器上（调度、扩缩容、滚动更新）
+- **Service Mesh**：负责服务之间的交通规则（熔断、限流、重试、可观测）
 
 **关键点**：微服务不是"拆开就好"，真正的难点在于**治理和运维**。
 
-<MicroserviceLatencyDemo />
+### 3.5 微服务与容器化的优缺点
+
+| 维度 | 评价 |
+|------|------|
+| **优点** | 服务独立部署，技术栈可异构；故障隔离，单个服务崩溃不影响全局；按需扩展，热点服务单独扩容；团队协作友好，不同团队负责不同服务；代码库更小，易于理解和维护 |
+| **缺点** | 分布式复杂性高（网络延迟、分布式事务、服务发现）；运维成本高，需要专业的 DevOps 团队；调试困难，问题可能需要跨多个服务追踪；数据一致性难以保证；部署和监控基础设施要求复杂 |
+| **适用场景** | 大型团队（>50人）、业务复杂需要分模块独立演进、某些模块需要独立扩容、需要多语言技术栈、对可用性要求高的系统 |
+| **不适用场景** | 小型团队、业务简单、流量小且稳定、没有专业运维团队的情况 |
+
+### 3.6 微服务技术栈
+
+| 类别 | 技术/工具 | 作用 |
+|------|---------|------|
+| **容器化** | Docker, containerd | 应用打包与隔离 |
+| **编排调度** | Kubernetes, Docker Swarm | 容器管理与自动扩缩容 |
+| **服务发现** | Consul, etcd, ZooKeeper | 服务注册与发现 |
+| **API 网关** | Kong, Zuul, Envoy | 统一入口、路由、限流 |
+| **配置中心** | Apollo, Nacos, Spring Cloud Config | 集中配置管理 |
+| **监控告警** | Prometheus, Grafana, ELK | 指标监控与日志分析 |
+| **链路追踪** | Jaeger, Zipkin, SkyWalking | 分布式请求追踪 |
+| **服务网格** | Istio, Linkerd | 流量治理与安全 |
 
 ---
 
-## 4. 云端进化：无服务 (Serverless)
+## 4. Serverless 与云原生时代 (2020s+)
 
 微服务虽然好，但维护几十个小厨房还是很累。你需要担心：
 
@@ -100,25 +182,25 @@ Docker 就像是**集装箱**。它把每个小服务连同它的锅碗瓢盆（
 - 停电了怎么办？（高可用）
 - 容器太多怎么管？（运维成本）
 
+<ServerlessDemo />
+
 ### 4.1 什么是 Serverless？
 
 Serverless 并不是"没有服务器"，而是**"你不需要管理服务器"**。
 
 就像你现在不想自己做饭，也不想开饭馆，而是直接叫**外卖**。
 
-- 你只需要写代码（下单）。
-- 云厂商（美团）负责准备机器、运行代码、自动扩容。
-- **按次付费**：代码跑了 100 毫秒，就收 100 毫秒的钱。没人访问就不收钱。
+- 你只需要写代码（下单）
+- 云厂商（美团）负责准备机器、运行代码、自动扩容
+- **按次付费**：代码跑了 100 毫秒，就收 100 毫秒的钱。没人访问就不收钱
 
 ### 4.2 适用场景
 
 Serverless 特别适合：
 
-- **潮汐流量**：比如外卖软件，中午流量大，半夜没人。Serverless 会自动在中午为你分配 1000 台机器，半夜缩减到 0 台。
-- **事件驱动**：比如"用户上传图片后，自动压缩图片"。
-- **快速验证**：小团队、MVP、黑客松项目。
-
-<ServerlessCostAutoScaleDemo />
+- **潮汐流量**：比如外卖软件，中午流量大，半夜没人。Serverless 会自动在中午为你分配 1000 台机器，半夜缩减到 0 台
+- **事件驱动**：比如"用户上传图片后，自动压缩图片"
+- **快速验证**：小团队、MVP、黑客松项目
 
 ### 4.3 BaaS 组合拳
 
@@ -131,107 +213,192 @@ Serverless 的真正力量来自于 **BaaS (Backend as a Service)**：
 
 **关键点**：Serverless 让后端越来越像"搭积木"。
 
----
+### 4.4 Serverless 与云原生的优缺点
 
-## 5. 必备基础设施：后端"内功"
+| 维度 | 评价 |
+|------|------|
+| **优点** | 零运维成本，开发者只需关注业务代码；自动扩缩容，完美应对流量峰值；按需付费，无流量时成本接近零；快速上线，几分钟即可部署全球；高可用内置，云服务自动处理故障转移 |
+| **缺点** | 冷启动延迟（几百毫秒到数秒）；运行时长限制（通常5-15分钟）；调试困难，本地难以完全模拟云环境；供应商锁定风险；不适合长时间运行或计算密集型任务；成本在高频持续流量下可能反超传统方案 |
+| **适用场景** | 事件驱动处理（图片处理、消息通知）；潮汐流量应用（活动页、促销）；快速原型验证和MVP；低频API或后台任务；无专职运维团队的小团队 |
+| **不适用场景** | 需要持续低延迟的应用；长时间计算任务；对冷启动敏感的场景（高频交易）；需要精细控制底层基础设施的场景 |
 
-无论架构怎么变，一些基础能力始终存在。
+### 4.5 Serverless 技术栈与平台
 
-### 5.1 负载均衡 (Load Balancer)
-
-像"大堂经理"一样，把客人平均分配给不同窗口，避免某个窗口排队爆炸。
-
-### 5.2 缓存 (Cache)
-
-像"备菜"一样，把常用的热菜放在餐台边上（Redis / CDN），省得每次都从厨房重做。
-
-<CacheHitRatioDemo />
-
-### 5.3 消息队列 (MQ)
-
-像"取号机"一样，把高峰期的订单排队处理，避免系统被瞬间击穿（Kafka / RabbitMQ）。
-
-### 5.4 数据库分工
-
-- **关系型 (MySQL / Postgres)**：订单、支付、用户信息。
-- **NoSQL (Redis / MongoDB)**：缓存、日志、推荐特征。
-
-**关键点**：这些"内功"决定了系统的**性能、稳定性、成本**。
+| 类别 | 技术/平台 | 特点 |
+|------|---------|------|
+| **FaaS 平台** | AWS Lambda | 最早的 FaaS 服务，生态最成熟 |
+| | Azure Functions | 微软云集成度高，.NET 友好 |
+| | Google Cloud Functions | 与 GCP 服务深度集成 |
+| | 阿里云函数计算 | 国内生态完善，冷启动优化好 |
+| | 腾讯云云函数 | 与微信生态整合 |
+| | Vercel/Netlify Functions | 前端开发者友好，边缘部署 |
+| **BaaS 服务** | Firebase | Google 的移动端后端方案 |
+| | Supabase | PostgreSQL 的 Firebase 开源替代 |
+| | AWS Amplify | AWS 的移动和 Web 应用开发平台 |
+| **部署工具** | Serverless Framework | 多云部署，社区活跃 |
+| | Terraform | 基础设施即代码 |
+| | Pulumi | 用编程语言定义基础设施 |
 
 ---
 
-## 6. 现代开发方式：DevOps / CI/CD / 可观测
+## 5. 各架构阶段对比与选型指南
 
-后端架构的进化，不只是技术栈变化，还包括开发流程变化。
+### 5.1 架构演进全景对比
 
-### 6.1 DevOps：开发与运维合体
+| 维度 | 物理服务器 | 单体架构 | 微服务+容器 | Serverless |
+|------|-----------|---------|------------|-------------|
+| **团队规模** | 1-5人 | 5-50人 | 50-500人 | 1-20人 |
+| **部署复杂度** | 极高 | 低 | 极高 | 极低 |
+| **运维成本** | 高 | 中 | 很高 | 低 |
+| **扩展性** | 差 | 垂直扩展有限 | 水平扩展优秀 | 自动扩展 |
+| **技术栈灵活性** | 无 | 单一 | 多样化 | 受限 |
+| **冷启动** | 无 | 无 | 容器启动时间 | 有延迟 |
+| **适用场景** | 遗留系统、特殊合规要求 | 初创公司、业务简单 | 大型互联网公司、复杂业务 | 快速验证、事件驱动 |
 
-开发不再只是写代码，还要关心部署、监控、告警。
+### 5.2 技术选型决策树
 
-### 6.2 CI/CD：自动化流水线
+```
+开始选型
+    │
+    ├─ 团队有专业运维人员？
+    │   ├─ 是 → 考虑微服务或物理机
+    │   └─ 否 → 继续判断
+    │
+    ├─ 需要快速上线验证想法？
+    │   ├─ 是 → Serverless 或单体
+    │   └─ 否 → 继续判断
+    │
+    ├─ 团队规模 > 50人？
+    │   ├─ 是 → 考虑微服务
+    │   └─ 否 → 继续判断
+    │
+    ├─ 流量有明显峰谷特征？
+    │   ├─ 是 → Serverless
+    │   └─ 否 → 单体架构（推荐初创）
+    │
+    └─ 特殊要求（合规、遗留系统）？
+        └─ 是 → 物理服务器
+```
 
-- 代码提交 -> 自动测试
-- 测试通过 -> 自动部署
-- 出问题 -> 自动回滚
+### 5.3 不同场景下的推荐架构
 
-### 6.3 可观测性 (Observability)
+#### 场景一：独立开发者/兼职项目
+- **推荐架构**：Serverless (Vercel/Netlify) 或 单体应用
+- **理由**：几乎零运维成本，按需付费，快速上线
+- **示例技术栈**：Next.js + Vercel + Supabase
 
-现代后端需要三件套：
+#### 场景二：初创公司 MVP 验证
+- **推荐架构**：单体架构 + 云服务器
+- **理由**：开发速度快，团队可以专注于业务逻辑而非基础设施
+- **示例技术栈**：Spring Boot / Django / Rails + RDS + ECS
 
-- **日志 (Logs)**：发生了什么？
-- **指标 (Metrics)**：系统状态如何？
-- **链路追踪 (Tracing)**：一次请求在系统内走过了哪些服务？
+#### 场景三：成长型公司（10-50人团队）
+- **推荐架构**：模块化单体 或 轻量级微服务
+- **理由**：开始面临代码耦合问题，但还不需要完整的微服务复杂度
+- **示例技术栈**：Spring Cloud / Go Micro + Kubernetes
+
+#### 场景四：大型互联网公司
+- **推荐架构**：微服务 + 服务网格 + 中台架构
+- **理由**：团队规模大，业务复杂，需要独立的发布节奏和技术栈
+- **示例技术栈**：自研 RPC 框架 + Istio + 自建 PaaS 平台
+
+#### 场景五：事件驱动/潮汐流量应用
+- **推荐架构**：Serverless + 事件总线
+- **理由**：流量波动大，需要极致的成本优化和自动扩缩容
+- **示例技术栈**：AWS Lambda + API Gateway + EventBridge
 
 ---
 
-## 7. 进阶趋势：边缘计算与平台工程
-
-### 7.1 Edge / 边缘计算
-
-把计算放在离用户更近的地方（边缘节点），实现更低延迟。
-
-### 7.2 平台工程 (Platform Engineering)
-
-大厂会搭建内部平台：
-
-- 给业务团队提供一键部署、一键监控。
-- 把复杂性"下沉"到平台，让业务更专注。
-
----
-
-## 8. 总结与学习路线
+## 6. 总结与学习路线
 
 后端架构的演进，本质上是在做**加法**和**减法**：
 
-| 时代           | 架构   | 开发者要做的事   | 运维要做的事          |
-| :------------- | :----- | :--------------- | :-------------------- |
-| **物理时代**   | 单机   | 写脚本、手动部署 | 维护机房与硬件        |
-| **单体时代**   | 一整块 | 写所有业务逻辑   | 维护几台大服务器      |
-| **微服务时代** | 拆分   | 关注单一业务     | 维护 K8s 集群 (很累!) |
-| **Serverless** | 函数   | 只写核心函数     | 喝茶 (云厂商全包了)   |
+| 时代 | 架构 | 开发者要做的事 | 运维要做的事 |
+| :--- | :----- | :--------------- | :-------------------- |
+| **物理时代** | 单机 | 写脚本、手动部署 | 维护机房与硬件 |
+| **单体时代** | 一整块 | 写所有业务逻辑 | 维护几台大服务器 |
+| **微服务时代** | 拆分 | 关注单一业务 | 维护 K8s 集群 (很累!) |
+| **Serverless** | 函数 | 只写核心函数 | 喝茶 (云厂商全包了) |
 
 **下一步建议**：
 
-- 想打基础：学会 HTTP、数据库、缓存、消息队列。
-- 想上手实践：用 Docker 跑一个小项目，再部署到云端。
-- 想更专业：了解 K8s、监控体系、CI/CD 流水线。
+- 想打基础：学会 HTTP、数据库、缓存、消息队列
+- 想上手实践：用 Docker 跑一个小项目，再部署到云端
+- 想更专业：了解 K8s、监控体系、CI/CD 流水线
 
 未来的后端开发，将越来越像"搭积木"——你只需要关注**业务逻辑**，底层的脏活累活，全部交给云。
 
+### 6.2 学习路线建议
+
+根据你的职业阶段，推荐以下学习路径：
+
+#### 阶段一：打好基础（0-1年）
+**目标**：理解后端核心概念，能独立开发单体应用
+
+- 掌握一门后端语言（Java/Python/Go 任选其一）
+- 学习 HTTP 协议和 RESTful API 设计
+- 掌握关系型数据库（MySQL/PostgreSQL）
+- 了解缓存基础（Redis）
+- 学习 Git 和基础 Linux 命令
+- **实践项目**：用单体架构完成一个 CRUD 应用（如博客系统、待办事项）
+
+#### 阶段二：扩展能力（1-3年）
+**目标**：理解分布式系统，能参与微服务开发
+
+- 深入学习微服务架构和拆分策略
+- 掌握 Docker 和 Kubernetes 基础
+- 学习消息队列（Kafka/RabbitMQ）
+- 了解分布式事务和一致性
+- 掌握监控和日志（Prometheus/ELK）
+- **实践项目**：将单体应用拆分为 3-5 个微服务，使用 Docker 部署
+
+#### 阶段三：专业深化（3-5年）
+**目标**：能设计大型系统，具备技术选型能力
+
+- 深入理解云原生架构（Service Mesh、Serverless）
+- 掌握容量规划和性能调优
+- 了解多活架构和灾备设计
+- 学习 DDD（领域驱动设计）
+- 培养技术判断力和架构思维
+- **实践项目**：设计一个支持百万级用户的系统架构，包含高可用、弹性伸缩等方案
+
+#### 持续学习资源推荐
+
+**书籍**
+- 《设计数据密集型应用》（DDIA）- 分布式系统必读
+- 《云原生模式》
+- 《微服务设计》
+- 《领域驱动设计》
+
+**在线资源**
+- AWS/Azure/阿里云官方架构文档
+- CNCF（云原生计算基金会）项目文档
+- 各大公司技术博客（Netflix Tech Blog、阿里技术公众号等）
+
+### 6.3 架构选型的核心原则
+
+记住以下原则，帮助你在实际工作中做出正确的选择：
+
+1. **没有银弹**：不存在最好的架构，只有最适合当前场景的架构
+2. **演进优于完美**：先让系统跑起来，再逐步优化，不要过度设计
+3. **团队能力优先**：选择团队熟悉和能驾驭的技术，而不是最新最酷的技术
+4. **成本意识**：计算总体拥有成本（TCO），包括开发、运维、培训等
+5. **可回退性**：设计时考虑回退方案，微服务可以合并回单体，但很难拆分
+
 ---
 
-## 9. 名词速查表 (Glossary)
+## 7. 名词速查表 (Glossary)
 
-| 名词              | 全称                              | 解释                                                 |
+| 名词 | 全称 | 解释 |
 | :---------------- | :-------------------------------- | :--------------------------------------------------- |
-| **Backend**       | -                                 | 服务器端系统，负责处理业务逻辑、数据存储和对外接口。 |
-| **CGI**           | Common Gateway Interface          | 早期动态网页技术，通过脚本处理请求并返回结果。       |
-| **Monolith**      | -                                 | 单体架构，把所有业务逻辑打包在同一个应用中。         |
-| **Microservices** | -                                 | 微服务架构，把业务拆分成多个独立服务。               |
-| **Container**     | -                                 | 容器化技术，把应用和依赖打包成可移植单元。           |
-| **K8s**           | Kubernetes                        | 容器编排平台，用于调度、扩缩容和治理容器。           |
-| **Service Mesh**  | -                                 | 服务网格，负责微服务间通信治理、观测与安全。         |
-| **Serverless**    | -                                 | 无服务计算，开发者只写函数，平台自动运行与扩缩容。   |
-| **BaaS**          | Backend as a Service              | 即插即用的后端云服务（认证、数据库、支付等）。       |
-| **CI/CD**         | Continuous Integration / Delivery | 持续集成与持续交付，自动化测试与部署流程。           |
-| **Observability** | -                                 | 可观测性，利用日志/指标/追踪理解系统运行状态。       |
+| **Backend** | - | 服务器端系统，负责处理业务逻辑、数据存储和对外接口 |
+| **CGI** | Common Gateway Interface | 早期动态网页技术，通过脚本处理请求并返回结果 |
+| **Monolith** | - | 单体架构，把所有业务逻辑打包在同一个应用中 |
+| **Microservices** | - | 微服务架构，把业务拆分成多个独立服务 |
+| **Container** | - | 容器化技术，把应用和依赖打包成可移植单元 |
+| **K8s** | Kubernetes | 容器编排平台，用于调度、扩缩容和治理容器 |
+| **Service Mesh** | - | 服务网格，负责微服务间通信治理、观测与安全 |
+| **Serverless** | - | 无服务计算，开发者只写函数，平台自动运行与扩缩容 |
+| **BaaS** | Backend as a Service | 即插即用的后端云服务（认证、数据库、支付等） |
+| **CI/CD** | Continuous Integration / Delivery | 持续集成与持续交付，自动化测试与部署流程 |
+| **Observability** | - | 可观测性，利用日志/指标/追踪理解系统运行状态 |
diff --git a/docs/zh-cn/appendix/backend-languages.md b/docs/zh-cn/appendix/backend-languages.md
index 097c9f2..fcae33e 100644
--- a/docs/zh-cn/appendix/backend-languages.md
+++ b/docs/zh-cn/appendix/backend-languages.md
@@ -1,315 +1,459 @@
-# 后端编程语言：从 Java 到 Go (Interactive Guide to Backend Languages)
+# 后端编程语言选型指南：从问题出发做决策
 
 > 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你全面了解主流后端编程语言的特点、应用场景和选择策略。我们将深入对比 Java、Python、Go、Node.js 等语言的优劣势。
 
+---
+
+## 0. 引言：为什么选语言这么难？
+
+想象一下这个场景：
+
+> 你刚加入一家初创公司做 CTO，技术合伙人问你："咱们后端用什么语言？"
+>
+> 你脑海中闪过无数个选择：Java 稳如老狗、Python 火遍 AI、Go 代表未来、Node.js 全栈爽歪歪...
+>
+> 最后你憋出一句："先写 Python，不行再重构？"
+
+**为什么后端编程语言的选择如此困难？**
+
+因为**不同的时代有不同的需求**，不同的场景有不同的最优解。选语言不是选"最好的"，而是选"最合适的"——就像选数据库、选架构一样，**没有银弹**。
+
 <BackendLanguagesDemo />
 
-## 0. 引言：为什么有这么多语言？
+---
 
-你可能在技术博客或招聘要求中见过这些名字：Java、Python、Go、Node.js、C#、Rust...
+## 1. 主流后端语言详解
 
-**为什么后端编程语言这么多？**
+在深入对比之前，让我们先逐一了解每种主流后端语言的特点、优势和典型应用场景。
 
-因为**不同的时代有不同的需求**，不同的场景有不同的最优解。
+### 1.1 Java：企业级应用的常青树
 
-- **1995 年**：互联网刚起步，Java 诞生了，主打"一次编写，到处运行"
-- **2000s**：Google 需要 C++ 的性能，但不要 C++ 的复杂度，于是 Go 在 2009 年诞生
-- **2010s**：Node.js 让前端工程师也能写后端，全栈时代到来
-- **2020s**：Rust 带来内存安全的同时保持 C++ 的性能
+**历史与定位**
 
-### 核心观点
+Java 诞生于 1995 年，由 Sun 公司（后被 Oracle 收购）推出。它的设计哲学是"Write Once, Run Anywhere"（一次编写，到处运行），通过 JVM（Java 虚拟机）实现了跨平台能力。
 
-**没有最好的语言，只有最适合的语言。**
+**核心特点**
 
-选择后端语言时，你需要权衡：
+| 特性 | 说明 |
+|------|------|
+| **强类型静态语言** | 编译时就能发现大部分类型错误，代码更健壮 |
+| **丰富的生态** | Spring、Spring Boot 等框架成熟完善 |
+| **强大的工具链** | IntelliJ IDEA、Maven、Gradle 等开发工具成熟 |
+| **多线程支持** | 内置并发库，适合高并发场景 |
 
-| 维度           | 说明                     | 例子                    |
-| :------------- | :----------------------- | :---------------------- |
-| **性能**       | 运行速度、资源消耗       | Go > Java > Python      |
-| **开发效率**   | 写代码的速度、代码简洁度 | Python > Ruby > Go      |
-| **生态成熟度** | 可用的库、框架、社区支持 | Java > Python > Node.js |
-| **学习曲线**   | 从零到能写项目的时间     | Python < Go < Rust      |
-| **并发模型**   | 处理大量请求的能力       | Go (协程) > Java (线程) |
-| **团队背景**   | 团队成员熟悉什么语言     | 选团队最熟悉的          |
+**代码示例**
 
-**关键点**：在后端开发中，**语言的选择往往次于架构设计**。一个设计糟糕的 Java 系统，性能远不如一个设计优秀的 Python 系统。
+```java
+// Java: 一个简单的 REST API 控制器
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/users")
+public class UserController {
+
+    @GetMapping("/{id}")
+    public User getUser(@PathVariable Long id) {
+        return userService.findById(id);
+    }
+
+    @PostMapping
+    public User createUser(@RequestBody User user) {
+        return userService.save(user);
+    }
+}
+```
+
+**适用场景**
+
+- 大型企业级应用（ERP、CRM、OA 系统）
+- 金融系统（银行核心系统、支付平台）
+- 电商平台后端
+- 大数据处理（Hadoop、Spark 生态）
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 生态成熟，第三方库丰富 | 语法相对繁琐，代码量大 |
+| 性能优秀，JIT 编译优化好 | JVM 启动较慢，内存占用较高 |
+| 人才储备充足，招聘容易 | 学习曲线较陡峭 |
+| 工具链完善，开发体验好 | 版本更新快，需要持续学习 |
+
+### 1.2 Python：快速开发与 AI 时代的宠儿
+
+**历史与定位**
+
+Python 由 Guido van Rossum 于 1991 年创建，设计哲学强调代码的可读性和简洁性。Python 的格言是"There should be one-- and preferably only one --obvious way to do it"。
+
+**核心特点**
+
+| 特性 | 说明 |
+|------|------|
+| **动态类型** | 无需声明变量类型，开发速度快 |
+| **语法简洁** | 代码可读性极高，接近伪代码 |
+| **胶水语言** | 可以轻松调用 C/C++ 代码 |
+| **丰富的库** | NumPy、Pandas、Django、Flask 等 |
+
+**代码示例**
+
+```python
+# Python: 使用 Flask 框架创建 REST API
+from flask import Flask, jsonify, request
+
+app = Flask(__name__)
+
+@app.route('/users/<int:id>', methods=['GET'])
+def get_user(id):
+    user = find_user_by_id(id)
+    return jsonify(user)
+
+@app.route('/users', methods=['POST'])
+def create_user():
+    data = request.get_json()
+    user = save_user(data)
+    return jsonify(user), 201
+
+if __name__ == '__main__':
+    app.run(debug=True)
+```
+
+**适用场景**
+
+- **Web 开发**：Django、Flask、FastAPI 等框架
+- **数据科学**：数据分析、可视化、机器学习
+- **AI/ML**：TensorFlow、PyTorch 等深度学习框架
+- **自动化运维**：脚本编写、DevOps 工具
+- **爬虫开发**：Scrapy、BeautifulSoup 等
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 语法简洁，开发效率高 | GIL 限制，无法真正并行 |
+| 丰富的第三方库，生态强大 | 执行速度较慢 |
+| 学习曲线平缓，适合新手 | 动态类型，运行时才能发现错误 |
+| AI/ML 领域的首选语言 | 移动端和前端支持较弱 |
+
+### 1.3 Node.js：JavaScript 的全栈革命
+
+**历史与定位**
+
+Node.js 由 Ryan Dahl 于 2009 年创建，它让 JavaScript 这门原本只能在浏览器中运行的语言，可以在服务器端运行。Node.js 基于 Chrome 的 V8 引擎，采用事件驱动、非阻塞 I/O 模型。
+
+**核心特点**
+
+| 特性 | 说明 |
+|------|------|
+| **单线程事件循环** | 通过异步 I/O 处理大量并发连接 |
+| **JavaScript 全栈** | 前后端使用同一种语言 |
+| **npm 生态** | 世界上最大的开源库生态系统 |
+| **快速启动** | 轻量级，适合微服务架构 |
+
+**代码示例**
+
+```javascript
+// Node.js: 使用 Express 框架创建 REST API
+const express = require('express');
+const app = express();
+
+app.use(express.json());
+
+// 获取用户
+app.get('/users/:id', async (req, res) => {
+    const user = await findUserById(req.params.id);
+    res.json(user);
+});
+
+// 创建用户
+app.post('/users', async (req, res) => {
+    const user = await createUser(req.body);
+    res.status(201).json(user);
+});
+
+app.listen(3000, () => {
+    console.log('Server running on port 3000');
+});
+```
+
+**适用场景**
+
+- **实时应用**：聊天室、在线游戏、协作工具
+- **API 服务**：RESTful API、GraphQL 服务
+- **全栈 Web 应用**：Next.js、Nuxt.js 等框架
+- **微服务架构**：轻量级服务快速启动
+- **Serverless 函数**：AWS Lambda、Vercel Functions
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 前后端语言统一，全栈开发效率高 | 单线程，CPU 密集型任务表现差 |
+| npm 生态丰富，包管理方便 | 回调地狱问题（已被 async/await 缓解）|
+| 高并发 I/O 性能优秀 | 类型系统较弱（TypeScript 可缓解）|
+| 启动速度快，适合微服务 | 生态质量参差不齐 |
+
+### 1.4 Go：云原生时代的性能之选
+
+**历史与定位**
+
+Go（又称 Golang）由 Google 的 Robert Griesemer、Rob Pike 和 Ken Thompson 于 2007 年开始设计，2009 年正式开源。Go 的设计目标是结合静态类型语言的安全性和动态类型语言的开发效率，特别适合构建大规模分布式系统。
+
+**核心特点**
+
+| 特性 | 说明 |
+|------|------|
+| **Goroutine 协程** | 轻量级线程，百万级并发轻松实现 |
+| **Channel 通道** | 基于 CSP 模型的通信机制，避免共享内存 |
+| **快速编译** | 编译速度极快，接近解释型语言体验 |
+| **静态链接** | 编译生成单二进制文件，部署简单 |
+
+**代码示例**
+
+```go
+// Go: 使用 Gin 框架创建 REST API
+package main
+
+import (
+    "net/http"
+    "github.com/gin-gonic/gin"
+)
+
+type User struct {
+    ID   int    `json:"id"`
+    Name string `json:"name"`
+    Age  int    `json:"age"`
+}
+
+func main() {
+    r := gin.Default()
+
+    // 获取用户
+    r.GET("/users/:id", func(c *gin.Context) {
+        id := c.Param("id")
+        user := findUserByID(id)
+        c.JSON(http.StatusOK, user)
+    })
+
+    // 创建用户
+    r.POST("/users", func(c *gin.Context) {
+        var user User
+        if err := c.ShouldBindJSON(&user); err != nil {
+            c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+            return
+        }
+        newUser := createUser(user)
+        c.JSON(http.StatusCreated, newUser)
+    })
+
+    r.Run(":3000")
+}
+```
+
+**适用场景**
+
+- **云原生基础设施**：Docker、Kubernetes 等云原生工具都用 Go 编写
+- **微服务架构**：高性能、低延迟的分布式服务
+- **网络编程**：高并发服务器、代理、网关
+- **命令行工具**：Docker、kubectl、Terraform 等
+- **区块链开发**：以太坊、Hyperledger Fabric 等项目
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 并发性能极强，Goroutine 轻量高效 | 泛型支持较晚（Go 1.18 才引入）|
+| 编译速度快，开发效率高 | 错误处理较繁琐（显式 error 检查）|
+| 部署简单，单二进制文件 | 缺少成熟的 GUI 框架 |
+| 垃圾回收性能优秀 | 生态相对年轻，某些领域库不够丰富 |
+
+### 1.5 Rust：系统编程的新星
+
+**历史与定位**
+
+Rust 由 Mozilla 研究院的 Graydon Hoare 于 2006 年开始设计，2010 年首次公开，2015 年发布 1.0 稳定版。Rust 的设计目标是提供与 C/C++ 相当的性能，同时保证内存安全和线程安全，且不需要垃圾回收器。
+
+**核心特点**
+
+| 特性 | 说明 |
+|------|------|
+| **所有权系统** | 编译时检查内存安全，无需 GC |
+| **零成本抽象** | 高级特性不带来运行时开销 |
+| **模式匹配** | 强大的 match 表达式，处理所有情况 |
+| ** fearless concurrency** | 编译器保证线程安全 |
+
+**代码示例**
+
+```rust
+// Rust: 使用 Actix-web 框架创建 REST API
+use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize)]
+struct User {
+    id: u32,
+    name: String,
+    age: u8,
+}
+
+// 获取用户
+#[get("/users/{id}")]
+async fn get_user(path: web::Path<u32>) -> impl Responder {
+    let user = User {
+        id: path.into_inner(),
+        name: String::from("张三"),
+        age: 25,
+    };
+    HttpResponse::Ok().json(user)
+}
+
+// 创建用户
+#[post("/users")]
+async fn create_user(user: web::Json<User>) -> impl Responder {
+    HttpResponse::Created().json(user.into_inner())
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    HttpServer::new(|| {
+        App::new()
+            .service(get_user)
+            .service(create_user)
+    })
+    .bind("127.0.0.1:3000")?
+    .run()
+    .await
+}
+```
+
+**适用场景**
+
+- **系统编程**：操作系统、文件系统、嵌入式开发
+- **高性能服务**：需要极致性能的网络服务
+- **WebAssembly**：浏览器端高性能计算
+- **区块链**：加密货币、智能合约平台
+- **游戏引擎**：高性能游戏开发
+- **命令行工具**：快速、安全的 CLI 工具
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 极致性能，媲美 C/C++ | 学习曲线极其陡峭 |
+| 内存安全，无 dangling pointer | 编译时间较慢 |
+| 线程安全，无数据竞争 | 生态相对年轻，某些领域库不够 |
+| 优秀的错误处理机制 | 开发效率相对较低 |
+| 零成本抽象 | 招聘难度大，人才稀缺 |
+
+### 1.6 PHP：Web 开发的老将
+
+**历史与定位**
+
+PHP（PHP: Hypertext Preprocessor）由 Rasmus Lerdorf 于 1994 年创建，最初只是一套简单的 CGI 脚本，用于跟踪他个人网站的访问者。后来经过不断演化，成为了世界上最流行的 Web 开发语言之一。Facebook、Wikipedia、WordPress 等大型网站都基于 PHP 构建。
+
+**核心特点**
+
+| 特性 | 说明 |
+|------|------|
+| **专为 Web 设计** | 内置 HTTP 处理能力，部署极其简单 |
+| **解释执行** | 无需编译，改完即生效 |
+| **嵌入 HTML** | 可以直接在 HTML 中嵌入 PHP 代码 |
+| **庞大的历史代码库** | 世界上 70%+ 的网站使用 PHP |
+
+**代码示例**
+
+```php
+<?php
+// PHP: 简单的 REST API
+header('Content-Type: application/json');
+
+// 路由处理
+$method = $_SERVER['REQUEST_METHOD'];
+$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+
+// 获取用户
+if ($method === 'GET' && preg_match('/\/users\/(\d+)/', $path, $matches)) {
+    $userId = $matches[1];
+    $user = [
+        'id' => $userId,
+        'name' => '张三',
+        'age' => 25
+    ];
+    echo json_encode($user);
+    exit;
+}
+
+// 创建用户
+if ($method === 'POST' && $path === '/users') {
+    $data = json_decode(file_get_contents('php://input'), true);
+    $user = [
+        'id' => rand(1, 1000),
+        'name' => $data['name'],
+        'age' => $data['age']
+    ];
+    http_response_code(201);
+    echo json_encode($user);
+    exit;
+}
+
+// 404 处理
+http_response_code(404);
+echo json_encode(['error' => 'Not Found']);
+```
+
+**现代 PHP 的进化**
+
+PHP 8.0+ 带来了巨大改进：
+
+- **JIT 编译**：性能提升 2-3 倍
+- **类型系统**：支持联合类型、属性等现代特性
+- **Named Arguments**：函数参数可以按名传递
+- **Match 表达式**：更简洁的条件判断
+- **Attributes**：原生支持注解
+
+```php
+// PHP 8 的现代写法
+class User {
+    public function __construct(
+        private string $name,
+        private int $age
+    ) {}
+
+    public function getName(): string {
+        return $this->name;
+    }
+}
+
+// Match 表达式
+$result = match($status) {
+    'pending' => '待处理',
+    'completed' => '已完成',
+    default => '未知状态',
+};
+```
+
+**适用场景**
+
+- **内容管理系统**：WordPress、Drupal、Joomla
+- **电商平台**：Magento、Shopify（部分）
+- **中小型 Web 应用**：快速开发，快速上线
+- **API 开发**：Laravel、Symfony 等现代框架
+
+**优缺点分析**
+
+| 优点 | 缺点 |
+|------|------|
+| 部署极其简单，改完即生效 | 历史上名声较差（"PHP 是世界上最好的语言"梗）|
+| 学习曲线平缓，入门简单 | 大型项目维护难度大 |
+| 生态成熟，WordPress 等 CMS 流行 | 性能不如编译型语言 |
+| 现代 PHP 8 性能大幅提升 | 异步编程支持不如 Node.js |
 
 ---
 
-## 1. 主流后端语言概览
+## 2. 核心维度对比：性能、效率、并发、生态
 
-### 1.1 Java - 企业级开发的霸主
+### 2.1 性能之争：谁跑得最快？
 
-**诞生时间**：1995 年（Oracle）
-**核心特点**：跨平台、强类型、静态类型、面向对象
-
-#### 为什么 Java 能统治企业级开发？
-
-- **JVM (Java Virtual Machine)**：一次编译，到处运行
-- **强类型系统**：编译时就能发现大量错误
-- **成熟的生态**：Spring 全家桶、海量开源库
-- **高性能**：JIT (Just-In-Time) 编译器让 Java 接近 C++ 性能
-
-#### 典型应用场景
-
-- **大型企业系统**：银行、保险、电商平台
-- **Android 开发**：虽然 Kotlin 在崛起，但 Java 仍是主力
-- **大数据处理**：Hadoop、Spark 的核心语言
-
-#### 优劣势总结
-
-| 优势                      | 劣势                             |
-| :------------------------ | :------------------------------- |
-| ✅ 生态极其成熟，框架完备 | ❌ 代码冗长，样板代码多          |
-| ✅ 强类型，编译时检查     | ❌ 启动慢，内存占用高            |
-| ✅ 多线程成熟             | ❌ 学习曲线陡峭（Spring 全家桶） |
-| ✅ 跨平台，JVM 优化强大   | ❌ 版本更新快，兼容性问题        |
-
----
-
-### 1.2 Python - AI 与脚本之王
-
-**诞生时间**：1991 年（Guido van Rossum）
-**核心特点**：简洁、动态类型、解释型
-
-#### 为什么 Python 如此流行？
-
-- **极简语法**：像读英语一样简单
-- **AI 生态**：NumPy、Pandas、PyTorch、TensorFlow
-- **快速开发**：用 1 行 Python 完成的工作，Java 可能需要 10 行
-
-#### 典型应用场景
-
-- **AI/ML**：几乎所有 AI 框架的首选语言
-- **数据分析**：Pandas、Jupyter Notebook
-- **脚本自动化**：运维脚本、数据处理
-- **Web 开发**：Django、Flask（但性能不如 Java/Go）
-
-#### 优劣势总结
-
-| 优势                      | 劣势                                     |
-| :------------------------ | :--------------------------------------- |
-| ✅ 语法简单，学习曲线平缓 | ❌ 运行速度慢（比 Java/Go 慢 10-100 倍） |
-| ✅ AI 生态无与伦比        | ❌ 动态类型，运行时错误多                |
-| ✅ 快速开发，代码量少     | ❌ GIL 限制，多线程性能差                |
-| ✅ 社区活跃，库丰富       | ❌ 打包部署复杂（依赖地狱）              |
-
----
-
-### 1.3 Go (Golang) - 云原生时代的宠儿
-
-**诞生时间**：2009 年（Google）
-**核心特点**：简洁、高性能、原生并发
-
-#### 为什么 Go 成为云原生首选？
-
-- **Goroutine (协程)**：轻松处理百万级并发
-- **简洁语法**：25 个关键字，学习曲线平缓
-- **快速编译**：比 Java 快 10 倍以上
-- **单一可执行文件**：编译后就是一个二进制文件，无需运行时
-
-#### 典型应用场景
-
-- **云原生基础设施**：Docker、Kubernetes 都是用 Go 写的
-- **微服务**：高性能、轻量级
-- **DevOps 工具**：Terraform、Prometheus
-- **区块链**：Hyperledger Fabric
-
-#### 优劣势总结
-
-| 优势                      | 劣势                               |
-| :------------------------ | :--------------------------------- |
-| ✅ 原生并发，性能接近 C++ | ❌ 生态不如 Java/Python 成熟       |
-| ✅ 简洁语法，学习曲线平缓 | ❌ 错误处理繁琐（if err != nil）   |
-| ✅ 编译快，部署简单       | ❌ 泛型支持较弱（Go 1.18+ 才引入） |
-| ✅ 单一可执行文件，无依赖 | ❌ 不如 Java/Python 灵活           |
-
----
-
-### 1.4 JavaScript/Node.js - 全栈工程师的利器
-
-**诞生时间**：2009 年（Ryan Dahl）
-**核心特点**：事件驱动、非阻塞 I/O、前后端统一
-
-#### 为什么 Node.js 改变了游戏规则？
-
-- **前后端统一**：前端工程师可以直接写后端
-- **NPM 生态**：世界上最大的包管理器
-- **实时应用**：WebSocket、聊天应用、协作工具
-
-#### 典型应用场景
-
-- **全栈 Web 应用**：React + Node.js + MongoDB
-- **实时系统**：聊天应用、在线协作
-- **Serverless**：AWS Lambda、Vercel Functions
-- **CLI 工具**：VS Code、Webpack 都是用 Node.js 写的
-
-#### 优劣势总结
-
-| 优势                            | 劣势                                   |
-| :------------------------------ | :------------------------------------- |
-| ✅ 前后端统一，减少语言切换成本 | ❌ 单线程，CPU 密集型任务性能差        |
-| ✅ NPM 生态庞大，库丰富         | ❌ 回调地狱（虽然 async/await 有改善） |
-| ✅ 适合 I/O 密集型应用          | ❌ 动态类型，运行时错误多              |
-| ✅ 社区活跃，更新快             | ❌ 版本兼容性问题多                    |
-
----
-
-### 1.5 C#/.NET - Windows 生态的王者
-
-**诞生时间**：2000 年（Microsoft）
-**核心特点**：强类型、面向对象、跨平台（.NET Core）
-
-#### 为什么 C# 值得关注？
-
-- **微软背书**：Visual Studio 极其强大
-- **跨平台**：.NET Core 让 C# 跑在 Linux/Mac 上
-- **高性能**：CoreFX 优化，性能接近 Java
-- **Unity 游戏开发**：C# 是 Unity 的官方语言
-
-#### 典型应用场景
-
-- **Windows 应用**：桌面软件、企业系统
-- **游戏开发**：Unity、Unreal Engine
-- **Web 开发**：ASP.NET Core（性能极高）
-- **Azure 云服务**：微软云的首选语言
-
-#### 优劣势总结
-
-| 优势                      | 劣势                         |
-| :------------------------ | :--------------------------- |
-| ✅ Visual Studio 极其强大 | ❌ Windows 历史包袱重        |
-| ✅ ASP.NET Core 性能优秀  | ❌ 社区不如 Java/Python 活跃 |
-| ✅ 跨平台（.NET Core）    | ❌ 学习曲线陡峭              |
-| ✅ 游戏开发（Unity）      | ❌ 开源生态相对较弱          |
-
----
-
-### 1.6 Ruby - 快速开发的典范
-
-**诞生时间**：1995 年（Yukihiro Matsumoto）
-**核心特点**：简洁、优雅、动态类型
-
-#### 为什么 Ruby 曾如此流行？
-
-- **Ruby on Rails**：2005 年的"杀手级框架"
-- **约定优于配置**：减少决策疲劳
-- **快速开发**：用极少代码实现功能
-
-#### 典型应用场景
-
-- **初创公司**：GitHub、Airbnb、Shopify 的早期版本
-- **快速原型**：MVP、黑客松项目
-- **Web 开发**：Rails、Sinatra
-
-#### 优劣势总结
-
-| 优势                  | 劣势                                  |
-| :-------------------- | :------------------------------------ |
-| ✅ Rails 框架极其成熟 | ❌ 性能较差（比 Python/Node.js 还慢） |
-| ✅ 快速开发，代码优雅 | ❌ 动态类型，运行时错误多             |
-| ✅ 约定优于配置       | ❌ 多线程性能差                       |
-| ✅ 社区活跃           | ❌ 生态不如 Java/Python 广泛          |
-
----
-
-### 1.7 PHP - Web 开发的老将
-
-**诞生时间**：1995 年（Rasmus Lerdorf）
-**核心特点**：简单、易部署、专为 Web 设计
-
-#### 为什么 PHP 依然存在？
-
-- **极低门槛**：新手 1 天就能上手
-- **部署简单**：复制文件就能跑
-- **WordPress**：全球 40% 的网站用 WordPress
-
-#### 典型应用场景
-
-- **中小型网站**：企业官网、博客
-- **CMS 系统**：WordPress、Drupal
-- **快速原型**：MVP、小型项目
-
-#### 优劣势总结
-
-| 优势                          | 劣势                                |
-| :---------------------------- | :---------------------------------- |
-| ✅ 学习曲线平缓               | ❌ 性能较差（比 Python/Node.js 慢） |
-| ✅ 部署简单                   | ❌ 语言设计混乱                     |
-| ✅ WordPress 生态强大         | ❌ 不适合大型项目                   |
-| ✅ 更新快（PHP 8 性能提升大） | ❌ 社区活跃度下降                   |
-
----
-
-### 1.8 Rust - 系统级编程的未来
-
-**诞生时间**：2010 年（Mozilla）
-**核心特点**：内存安全、零成本抽象、高性能
-
-#### 为什么 Rust 如此受关注？
-
-- **内存安全**：编译时保证没有内存泄漏、空指针
-- **高性能**：与 C++ 性能相当
-- **现代化**：2018 年后成为主流，AWS、微软都在用
-
-#### 典型应用场景
-
-- **系统编程**：操作系统、数据库
-- **区块链**：Solana、Polkadot
-- **WebAssembly**：前端高性能计算
-- **基础设施**：AWS Firecracker、TiKV
-
-#### 优劣势总结
-
-| 优势                | 劣势                     |
-| :------------------ | :----------------------- |
-| ✅ 内存安全，无 GC  | ❌ 学习曲线极其陡峭      |
-| ✅ 性能接近 C++     | ❌ 编译时间长            |
-| ✅ 现代化语法       | ❌ 生态不如 Go/Rust 成熟 |
-| ✅ WebAssembly 支持 | ❌ 开发速度慢            |
-
----
-
-### 1.9 C++ - 高性能计算的基石
-
-**诞生时间**：1985 年（Bjarne Stroustrup）
-**核心特点**：高性能、底层控制、复杂
-
-#### 为什么 C++ 依然不可或缺？
-
-- **极致性能**：没有任何语言能超越 C++
-- **底层控制**：直接操作内存、硬件
-- **游戏引擎**：Unreal Engine、游戏开发
-
-#### 典型应用场景
-
-- **游戏开发**：Unreal Engine、AAA 游戏
-- **高频交易**：金融系统、量化交易
-- **浏览器引擎**：Chrome V8、WebKit
-- **AI 框架底层**：PyTorch、TensorFlow 的核心
-
-#### 优劣势总结
-
-| 优势            | 劣势                      |
-| :-------------- | :------------------------ |
-| ✅ 性能极致     | ❌ 学习曲线极其陡峭       |
-| ✅ 底层控制力强 | ❌ 内存管理复杂（易泄漏） |
-| ✅ 游戏开发标准 | ❌ 开发效率低             |
-| ✅ 生态成熟     | ❌ 不适合 Web 开发        |
-
----
-
-<LanguageComparisonDemo />
-
----
-
-## 2. 语言特性对比
-
-### 2.1 性能基准测试
-
-<PerformanceBenchmarkDemo />
-
-#### 性能排行（大致）
+**性能排行（大致，仅供参考）**：
 
 ```
 C++ ≈ Rust > Go > Java ≈ C# > Node.js > PHP > Python > Ruby
@@ -317,628 +461,453 @@ C++ ≈ Rust > Go > Java ≈ C# > Node.js > PHP > Python > Ruby
 
 **但性能不是唯一标准！**
 
-- **大多数 Web 应用**：瓶颈在数据库和网络，不是语言
-- **I/O 密集型**：Node.js、Go 表现优秀
-- **CPU 密集型**：Go、C++、Rust 更适合
+让我们用一张表理解性能差异的真实影响：
 
-### 2.2 开发效率对比
+| 场景 | 语言 | 单次请求耗时 | 1000 QPS 需要服务器 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| 简单 API | Go | 2ms | 2 台 | 语言差异几乎无感 |
+| 简单 API | Python | 10ms | 10 台 | 可能需要更多机器 |
+| 复杂计算 | Go | 100ms | 100 台 | CPU 密集型差距明显 |
+| 复杂计算 | Python | 1000ms | 1000 台 | 10 倍差距 |
 
-<DeveloperEfficiencyDemo />
+**关键洞察**：
 
-#### 代码行数对比（实现相同功能）
+> **对于大多数 Web 应用，瓶颈在数据库和网络，不是语言。**
+>
+> - **I/O 密集型**（CRUD 应用）：Node.js、Go 表现优秀，Python 也完全够用
+> - **CPU 密集型**（图像处理、科学计算）：Go、Java、C++、Rust 更适合
 
-```
-Python: 10 行
-Ruby: 12 行
-Go: 20 行
-Java: 50 行
-C++: 80 行
+**性能对比实战：计算斐波那契数列**
+
+让我们看一个实际的性能测试，计算第 35 个斐波那契数（CPU 密集型任务）：
+
+| 语言 | 实现方式 | 执行时间 |
+|------|----------|----------|
+| **Rust** | 递归 + 记忆化 | ~2 ms |
+| **Go** | 递归 + 记忆化 | ~3 ms |
+| **Java** | 递归 + 记忆化 | ~4 ms |
+| **Node.js** | 递归 + 记忆化 | ~12 ms |
+| **Python** | 递归 + 记忆化 | ~50 ms |
+| **PHP** | 递归 + 记忆化 | ~80 ms |
+
+**分析**：
+
+- **编译型语言（Rust、Go、Java）**：性能优势明显，适合 CPU 密集型任务
+- **JIT 编译（Node.js）**：V8 引擎优化后性能不错，但仍不如编译型语言
+- **解释型语言（Python、PHP）**：性能相对较低，但在 I/O 密集型场景中差距会缩小
+
+### 2.2 并发模型对比：谁能处理更多请求？
+
+**线程 vs 协程 vs 异步：本质区别是什么？**
+
+| 语言 | 并发模型 | 核心机制 | 资源消耗 | 适用场景 |
+| :--- | :--- | :--- | :--- | :--- |
+| Java | 操作系统线程 | Thread Pool | 1-2 MB/线程 | 传统企业应用 |
+| Go | 用户态协程 | Goroutine + Channel | ~2 KB/协程 | 云原生、微服务 |
+| Node.js | 事件循环 | Event Loop + Callback | 单线程 | I/O 密集型应用 |
+| Python | 多进程 | Multiprocessing | 进程级隔离 | 数据处理（绕过 GIL）|
+| Rust | 异步/并行 | Async/Await | 零成本抽象 | 系统编程 |
+
+**Go 的 Goroutine 为什么如此高效？**
+
+```go
+// Go: 启动 100 万个 Goroutine
+for i := 0; i < 1000000; i++ {
+    go func() {
+        // 做一些工作
+    }()
+}
+// 内存占用：约 2GB（100万 * 2KB）
+
+// Java: 启动 100 万个线程
+for (int i = 0; i < 1000000; i++) {
+    new Thread(() -> {
+        // 做一些工作
+    }).start();
+}
+// 结果：OOM（内存溢出），因为需要 1-2TB 内存
 ```
 
-**但代码少 ≠ 开发快！**
+**关键洞察**：
 
-- **Python**：写起来快，但调试慢（运行时错误）
-- **Java**：写起来慢，但调试快（编译时错误）
-- **Go**：介于两者之间，平衡点
+> **高并发场景：Go 是性价比最高的选择，Java 适合企业级，Node.js 适合 I/O 密集型。**
 
-### 2.3 生态成熟度
-
-<LanguageEcosystemDemo />
-
-#### 包管理器对比
-
-| 语言   | 包管理器   | 包数量 | 更新频率 |
-| :----- | :--------- | :----- | :------- |
-| Node   | NPM        | 200万+ | 极高     |
-| Python | PyPI       | 50万+  | 高       |
-| Java   | Maven      | 30万+  | 中       |
-| Go     | Go Modules | 10万+  | 高       |
-| Rust   | Cargo      | 10万+  | 极高     |
-| Ruby   | RubyGems   | 15万+  | 中       |
-
-#### Web 框架对比
-
-| 语言   | 主流框架          | 特点                           |
-| :----- | :---------------- | :----------------------------- |
-| Java   | Spring Boot       | 企业级首选，功能完备           |
-| Python | Django / Flask    | Django 大而全，Flask 轻量      |
-| Node   | Express / Nest.js | Express 简单，Nest.js 架构完善 |
-| Go     | Gin / Echo        | 轻量高性能                     |
-| Ruby   | Rails             | 约定优于配置                   |
-| PHP    | Laravel           | 现代化，易用                   |
-| C#     | ASP.NET Core      | 高性能，跨平台                 |
-
-### 2.4 并发模型对比
-
-<ConcurrencyModelDemo />
-
-#### 线程 vs 协程 vs 异步
-
-| 语言   | 并发模型    | 特点                   | 适用场景       |
-| :----- | :---------- | :--------------------- | :------------- |
-| Java   | 线程池      | 成熟，但资源消耗大     | 传统企业应用   |
-| Go     | Goroutine   | 轻量级，可百万级并发   | 云原生、微服务 |
-| Node   | 事件循环    | 单线程，非阻塞 I/O     | I/O 密集型应用 |
-| Python | 多进程      | GIL 限制，多进程开销大 | 数据处理       |
-| Rust   | Async/Await | 零成本抽象，性能优秀   | 系统编程       |
-
-### 2.5 内存管理对比
+### 2.3 内存管理对比：谁来回收垃圾？
 
 <MemoryManagementDemo />
 
-| 语言   | 内存管理      | 特点                     | 性能影响         |
-| :----- | :------------ | :----------------------- | :--------------- |
-| Java   | GC            | 自动管理，但有 STW 停顿  | 中等             |
-| Python | GC + 引用计数 | 自动管理，但循环引用问题 | 较差             |
-| Go     | GC            | 低延迟 GC（Go 1.20+）    | 良好             |
-| Node   | GC            | V8 引擎优化，性能不错    | 良好             |
-| Rust   | 所有权系统    | 编译时保证，无 GC        | 极佳             |
-| C++    | 手动管理      | 极致性能，但易泄漏       | 极佳（但风险高） |
+**垃圾回收 vs 手动管理 vs 所有权系统**
 
-### 2.6 类型系统对比
+| 语言 | 内存管理 | 实现方式 | 性能影响 | 开发体验 |
+| :--- | :--- | :--- | :--- | :--- |
+| Java | GC (垃圾回收) | 分代收集、并发标记 | 中等（STW 停顿） | 自动，无需关心 |
+| Python | GC + 引用计数 | 循环引用检测 | 较差（GIL 影响） | 自动，偶有内存泄漏 |
+| Go | GC | 低延迟 GC (Go 1.20+) | 良好 | 自动，性能优秀 |
+| Node.js | GC (V8) | 分代回收 | 良好 | 自动，V8 优化好 |
+| Rust | 所有权系统 | 编译时检查，无 GC | 极佳 | 手动，学习曲线陡峭 |
+| C++ | 手动管理 | new/delete 或智能指针 | 极佳（但风险高） | 完全手动，易出错 |
 
-| 语言   | 类型系统   | 特点                       | 优劣势            |
-| :----- | :--------- | :------------------------- | :---------------- |
-| Java   | 静态强类型 | 编译时检查，安全但冗长     | ✅ 安全 ❌ 冗长   |
-| Go     | 静态强类型 | 简洁，但泛型支持弱         | ✅ 简洁 ⚠️ 泛型弱 |
-| Python | 动态强类型 | 灵活，但运行时错误多       | ✅ 灵活 ❌ 不安全 |
-| Node   | 动态弱类型 | 极其灵活，但容易出错       | ✅ 灵活 ❌ 易出错 |
-| Rust   | 静态强类型 | 类型系统强大，但学习曲线陡 | ✅ 安全 ❌ 复杂   |
-| C#     | 静态强类型 | 类型推导优秀，平衡点       | ✅ 安全 ✅ 易用   |
+**什么是 STW (Stop-The-World)？**
+
+```
+STW = 垃圾回收时的"世界暂停"
+
+Java GC 过程：
+1. 标记阶段：标记所有存活对象
+2. 清理阶段：回收垃圾对象内存
+
+问题：
+- 在清理阶段，应用线程必须暂停（STW）
+- 对于大内存堆，STW 可能持续数百毫秒
+- 这会导致应用卡顿（GC Pause）
+
+现代解决方案：
+- G1 GC：分区回收，控制 STW 时间
+- ZGC/Shenandoah：亚毫秒级停顿
+```
+
+**关键洞察**：
+
+> **追求极致性能选 Rust/C++，企业级应用选 Java/Go，快速开发选 Python/Node.js。**
+
+### 2.4 生态成熟度对比
+
+语言生态的成熟度直接影响开发效率和项目维护成本。
+
+**包管理器对比**
+
+| 语言 | 包管理器 | 包数量（估算） | 特点 |
+|------|----------|----------------|------|
+| **JavaScript** | npm / yarn / pnpm | 200万+ | 包数量最多，生态最活跃 |
+| **Python** | pip / Poetry | 40万+ | 数据科学库最丰富 |
+| **Java** | Maven / Gradle | 30万+ | 企业级库成熟稳定 |
+| **Go** | go modules | 20万+ | 标准库强大，第三方库精简实用 |
+| **Rust** | Cargo | 10万+ | 包质量高，安全性强 |
+| **PHP** | Composer | 30万+ | Web 框架成熟，CMS 生态丰富 |
+
+**框架成熟度对比**
+
+| 语言 | Web 框架 | 特点 |
+|------|----------|------|
+| **Java** | Spring Boot | 企业级首选，功能全面，生态庞大 |
+| **Python** | Django / Flask / FastAPI | Django 功能全，Flask 轻量，FastAPI 现代高性能 |
+| **Node.js** | Express / NestJS / Koa | Express 简单，NestJS 企业级，Koa 轻量 |
+| **Go** | Gin / Echo / Fiber | 都追求高性能和简洁 |
+| **Rust** | Actix-web / Axum / Rocket | 极致性能，但学习曲线陡峭 |
+| **PHP** | Laravel / Symfony | Laravel 现代优雅，Symfony 企业级 |
 
 ---
 
-## 3. 应用场景对比
+## 3. 案例研究：GitHub 的技术栈演进
 
-### 3.1 Web 开发
+了解了技术维度后，让我们通过 GitHub 的真实案例，看看技术栈是如何演进的。
 
-<WebDevelopmentScenarioDemo />
+**2008 年**：GitHub 上线，全部用 **Ruby on Rails** 开发。
 
-| 语言       | 适用性     | 说明                   |
-| :--------- | :--------- | :--------------------- |
-| **Java**   | ⭐⭐⭐⭐⭐ | 企业级 Web 应用首选    |
-| **Node**   | ⭐⭐⭐⭐⭐ | 全栈应用、实时系统     |
-| **Python** | ⭐⭐⭐⭐   | 快速开发、数据驱动应用 |
-| **Go**     | ⭐⭐⭐⭐   | 高性能 API、微服务     |
-| **Ruby**   | ⭐⭐⭐     | 初创公司、快速原型     |
-| **PHP**    | ⭐⭐⭐     | 中小型网站、CMS        |
-| **C#**     | ⭐⭐⭐⭐   | Windows 生态、企业应用 |
+**为什么选择 Rails？**
+- 创始人是 Ruby 社区活跃成员
+- 快速开发，适合初创公司
+- "约定优于配置"减少决策疲劳
 
-### 3.2 微服务架构
+**2010 年代初期：问题来了**
 
-| 语言     | 适用性     | 说明                   |
-| :------- | :--------- | :--------------------- |
-| **Go**   | ⭐⭐⭐⭐⭐ | 云原生首选，轻量高性能 |
-| **Java** | ⭐⭐⭐⭐   | Spring Cloud 生态成熟  |
-| **Node** | ⭐⭐⭐⭐   | 适合 I/O 密集型服务    |
-| **Rust** | ⭐⭐⭐     | 性能极致，但开发成本高 |
+- 用户量爆炸式增长，Rails 成为性能瓶颈
+- Ruby 的 GIL（全局解释器锁）限制多线程性能
+- 每次部署需要重启整个应用，停机时间长
 
-### 3.3 大数据处理
+**解决方案：渐进式重构**
 
-| 语言       | 适用性     | 说明                       |
-| :--------- | :--------- | :------------------------- |
-| **Java**   | ⭐⭐⭐⭐⭐ | Hadoop、Spark 核心语言     |
-| **Scala**  | ⭐⭐⭐⭐⭐ | Spark 原生语言，函数式编程 |
-| **Python** | ⭐⭐⭐⭐⭐ | 数据分析、AI 训练          |
-| **Go**     | ⭐⭐⭐     | 数据采集、流处理           |
+GitHub 没有"推倒重来"，而是采用了**绞杀者模式 (Strangler Fig Pattern)**：
 
-### 3.4 AI/ML 机器学习
+1. **识别瓶颈**：找出最慢的功能模块（如代码搜索、通知系统）
+2. **逐步替换**：用 Go 重写高性能服务
+3. **API 网关**：前端先调用新服务，失败时回退到旧服务
+4. **监控验证**：确保新服务稳定后再完全下线旧代码
 
-| 语言       | 适用性     | 说明                   |
-| :--------- | :--------- | :--------------------- |
-| **Python** | ⭐⭐⭐⭐⭐ | 绝对统治地位           |
-| **C++**    | ⭐⭐⭐⭐   | 模型部署、性能优化     |
-| **Julia**  | ⭐⭐⭐⭐   | 科学计算，性能接近 C++ |
-| **R**      | ⭐⭐⭐     | 统计分析、学术研究     |
+**2015 年**：GitHub 使用 **Go** 重写了代码搜索功能，查询速度提升 10 倍。
 
-### 3.5 游戏开发
+**2018 年**：通知系统从 Rails 迁移到 Go，延迟从 2 秒降到 100 毫秒。
 
-| 语言    | 适用性     | 说明                     |
-| :------ | :--------- | :----------------------- |
-| **C++** | ⭐⭐⭐⭐⭐ | AAA 游戏引擎（Unreal）   |
-| **C#**  | ⭐⭐⭐⭐⭐ | Unity 引擎，独立游戏首选 |
-| **Lua** | ⭐⭐⭐⭐   | 游戏脚本语言             |
+**今天的 GitHub 技术栈**：
+- **主站**：仍然 Rails，但核心功能已拆分为微服务
+- **高性能服务**：Go（搜索、通知、Git 操作）
+- **前端**：React + TypeScript
+- **基础设施**：Kubernetes + MySQL + Redis
 
-### 3.6 系统编程
+**关键启示**：
 
-| 语言     | 适用性     | 说明           |
-| :------- | :--------- | :------------- |
-| **Rust** | ⭐⭐⭐⭐⭐ | 现代化系统语言 |
-| **C++**  | ⭐⭐⭐⭐⭐ | 传统系统语言   |
-| **Go**   | ⭐⭐⭐⭐   | 云原生基础设施 |
-| **C**    | ⭐⭐⭐⭐⭐ | 操作系统内核   |
-
-### 3.7 脚本自动化
-
-| 语言       | 适用性     | 说明               |
-| :--------- | :--------- | :----------------- |
-| **Python** | ⭐⭐⭐⭐⭐ | 数据处理、运维脚本 |
-| **Bash**   | ⭐⭐⭐⭐⭐ | Linux 系统管理     |
-| **Node**   | ⭐⭐⭐⭐   | 前端工程化工具     |
-| **Ruby**   | ⭐⭐⭐⭐   | CI/CD 脚本         |
+> **技术栈演进不是革命，而是渐进式改良。选错语言不致命，但拒绝改进会致命。**
 
 ---
 
-## 4. Hello World 对比
+## 4. 如何选择合适的语言：决策框架
 
-<SyntaxComparisonDemo />
+### 4.1 四步决策法
 
-### 4.1 代码示例对比
+### 第一步：明确你的场景类型
 
-#### Python (最简洁)
+| 场景类型 | 特征 | 推荐语言 | 不推荐 |
+| :--- | :--- | :--- | :--- |
+| **企业级核心业务** | 高可用、强事务、长生命周期 | Java、C# | Go（生态不够成熟）|
+| **快速原型/MVP** | 快速验证、快速迭代 | Python、Ruby | Java（太慢）|
+| **云原生基础设施** | 高并发、低延迟、微服务 | Go、Rust | Python（性能不够）|
+| **全栈 Web 应用** | 前后端统一、实时交互 | Node.js、Go | Java（太重）|
+| **AI/ML 项目** | 模型训练、数据处理 | Python | 其他所有 |
+| **系统编程** | 极致性能、内存控制 | Rust、C++ | 其他所有 |
+
+### 4.2 第二步：评估团队背景
+
+**决策优先级：团队熟悉度 > 技术最优解**
+
+| 团队背景 | 推荐路线 | 理由 |
+| :--- | :--- | :--- |
+| **Java 背景** | 继续 Java / 引入 Go | 生态迁移成本低，Go 可作为性能补充 |
+| **前端背景** | Node.js -> TypeScript -> Go | 利用 JS 经验，逐步引入类型安全和后端语言 |
+| **Python 背景** | Python + Go 混合 | Python 负责业务逻辑，Go 负责性能敏感模块 |
+| **C/C++ 背景** | Rust / Go | Rust 替换 C++，Go 快速开发业务 |
+| **全新人团队** | Go / Python | Go 培养工程思维，Python 快速产出 |
+
+### 4.3 第三步：权衡性能与开发效率
+
+**决策矩阵**：
+
+| 性能要求 | 开发周期 | 推荐语言 | 架构建议 |
+| :--- | :--- | :--- | :--- |
+| 极高（高频交易）| 长 | C++ / Rust | 专用硬件，定制化优化 |
+| 高（高并发 API）| 中 | Go / Java | 微服务，水平扩展 |
+| 中等（普通 Web）| 短 | Node.js / Python | 单体应用，快速迭代 |
+| 低（内部工具）| 极短 | Python / Ruby | 脚本化，自动化优先 |
+
+### 4.4 第四步：考虑长期维护成本
+
+**维护成本的隐藏项**：
+
+| 因素 | 影响 | 语言差异 |
+| :--- | :--- | :--- |
+| **人才招聘** | 影响团队扩张 | Java 人才最多，Rust 最难招 |
+| **监控运维** | 影响故障排查 | Java 工具链最全，Go 轻量简单 |
+| **版本升级** | 影响技术债务 | Python 2->3 痛苦，Go 向后兼容 |
+| **安全更新** | 影响合规 | 主流语言都有安全团队支持 |
+
+### 4.5 语言选型决策树
+
+为了帮助你更直观地做出选择，以下是一个简化的决策流程：
 
-```python
-print("Hello, World!")
 ```
-
-#### Go (简洁但严格)
-
-```go
-package main
-
-import "fmt"
-
-func main() {
-    fmt.Println("Hello, World!")
-}
+开始选型
+    │
+    ├── 是否需要极致性能（高频交易、游戏引擎）？
+    │       ├── 是 → Rust / C++
+    │       └── 否 → 继续
+    │
+    ├── 是否做 AI/ML/数据科学？
+    │       ├── 是 → Python
+    │       └── 否 → 继续
+    │
+    ├── 是否已有 Java 技术栈的团队？
+    │       ├── 是 → Java / Kotlin
+    │       └── 否 → 继续
+    │
+    ├── 是否需要快速开发 MVP？
+    │       ├── 是 → Python / Node.js / PHP
+    │       └── 否 → 继续
+    │
+    ├── 是否构建云原生/微服务？
+    │       ├── 是 → Go
+    │       └── 否 → 继续
+    │
+    └── 推荐默认选择：Go
+            （现代、平衡、未来趋势）
 ```
 
-#### Java (冗长但规范)
-
-```java
-public class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
-```
-
-#### Node.js (JavaScript)
-
-```javascript
-console.log('Hello, World!')
-```
-
-#### Rust (复杂但安全)
-
-```rust
-fn main() {
-    println!("Hello, World!");
-}
-```
-
-#### C# (类似 Java)
-
-```csharp
-using System;
-
-class Program {
-    static void Main() {
-        Console.WriteLine("Hello, World!");
-    }
-}
-```
-
-#### Ruby (优雅)
-
-```ruby
-puts "Hello, World!"
-```
-
-#### PHP (Web 友好)
-
-```php
-<?php
-echo "Hello, World!";
-?>
-```
-
-#### C++ (底层)
-
-```cpp
-#include <iostream>
-
-int main() {
-    std::cout << "Hello, World!" << std::endl;
-    return 0;
-}
-```
-
-### 4.2 运行方式对比
-
-| 语言   | 编译/解释 | 运行命令                                   | 编译时间     |
-| :----- | :-------- | :----------------------------------------- | :----------- |
-| Python | 解释型    | `python hello.py`                          | 无           |
-| Go     | 编译型    | `go run hello.go`                          | 快（<1s）    |
-| Java   | 编译型    | `javac HelloWorld.java && java HelloWorld` | 慢（2-5s）   |
-| Node   | 解释型    | `node hello.js`                            | 无           |
-| Rust   | 编译型    | `rustc hello.rs && ./hello`                | 慢（10-30s） |
-| C#     | 编译型    | `dotnet run`                               | 中（2-3s）   |
-| Ruby   | 解释型    | `ruby hello.rb`                            | 无           |
-| PHP    | 解释型    | `php hello.php`                            | 无           |
-| C++    | 编译型    | `g++ hello.cpp -o hello && ./hello`        | 中（5-10s）  |
-
 ---
 
-## 5. 并发模型对比
+## 5. 快速参考：语言特性速查表
 
-<ConcurrencyComparisonDemo />
+### 5.1 核心特性对比
 
-### 5.1 线程 (Java)
+| 语言 | 类型系统 | 编译/解释 | 内存管理 | 并发模型 | 主要应用领域 |
+| :--- | :--- | :--- | :--- | :--- | :--- |
+| **Java** | 静态强类型 | 编译（JVM）| GC | 多线程 | 企业级应用、Android |
+| **Python** | 动态强类型 | 解释 | GC + 引用计数 | 多进程（GIL）| AI/ML、数据分析、脚本 |
+| **Go** | 静态强类型 | 编译 | GC | Goroutine（协程）| 云原生、微服务、基础设施 |
+| **Node.js** | 动态弱类型 | 解释（V8）| GC | Event Loop | 全栈 Web、实时应用 |
+| **Rust** | 静态强类型 | 编译 | 所有权系统 | Async/Await | 系统编程、区块链 |
+| **C++** | 静态强类型 | 编译 | 手动管理 | 多线程/异步 | 游戏、高频交易、系统软件 |
 
-```java
-// Java: 线程池
-ExecutorService executor = Executors.newFixedThreadPool(10);
-executor.submit(() -> {
-    System.out.println("Task running");
-});
-```
+### 5.2 性能与资源占用
 
-**特点**：
-
-- ✅ 成熟稳定
-- ❌ 线程重（1-2MB 栈空间）
-- ❌ 上下文切换开销大
-
-### 5.2 协程 (Go)
-
-```go
-// Go: Goroutine
-go func() {
-    fmt.Println("Task running")
-}()
-```
-
-**特点**：
-
-- ✅ 轻量级（2KB 栈空间）
-- ✅ 可创建百万级协程
-- ✅ 语法简洁
-
-### 5.3 异步 (Node.js)
-
-```javascript
-// Node.js: 异步回调
-setTimeout(() => {
-  console.log('Task running')
-}, 0)
-```
-
-**特点**：
-
-- ✅ 适合 I/O 密集型
-- ❌ 单线程，CPU 密集型性能差
-- ❌ 回调地狱（虽然 async/await 有改善）
-
-### 5.4 Async/Await (Rust/Python)
-
-```rust
-// Rust: Async/Await
-async fn run_task() {
-    println!("Task running");
-}
-
-run_task().await;
-```
-
-**特点**：
-
-- ✅ 零成本抽象（Rust）
-- ✅ 语法清晰
-- ⚠️ Python 的 async 性能不如 Go
-
-### 5.5 性能对比演示
-
-下方的演示展示了不同并发模型在处理 1000 个任务时的性能差异。
+| 语言 | 执行速度 | 内存占用 | 启动时间 | 并发能力 |
+| :--- | :--- | :--- | :--- | :--- |
+| **C++** | ★★★★★ | 极低 | 极快 | 极高 |
+| **Rust** | ★★★★★ | 极低 | 快 | 极高 |
+| **Go** | ★★★★ | 极低 | 极快 | 极高（百万级协程）|
+| **Java** | ★★★★ | 高 | 慢（JVM 启动）| 高 |
+| **Node.js** | ★★★ | 中 | 快 | 高（I/O 密集）/ 低（CPU 密集）|
+| **Python** | ★★ | 中 | 快 | 低（GIL 限制）|
 
 ---
 
-## 6. 生态系统对比
+## 6. 总结：没有银弹，只有权衡
 
-### 6.1 包管理器
+<LanguageEcosystemDemo />
 
-<PackageManagerDemo />
+### 6.1 核心观点回顾
 
-| 语言   | 包管理器   | 命令                              | 特点                   |
-| :----- | :--------- | :-------------------------------- | :--------------------- |
-| Node   | npm        | `npm install express`             | 生态最大，依赖地狱风险 |
-| Go     | go modules | `go get github.com/gin-gonic/gin` | 简洁，无依赖地狱       |
-| Python | pip        | `pip install django`              | 简单，虚拟环境必需     |
-| Java   | Maven      | `mvn install`                     | 企业级，依赖管理严格   |
-| Rust   | Cargo      | `cargo add serde`                 | 现代化，构建工具集成   |
-| Ruby   | bundler    | `bundle install`                  | Gemfile 管理依赖       |
+1. **语言选择是工程决策，不是宗教战争**
+   - 每个语言都有其设计哲学和适用场景
+   - "最好的语言"不存在，只有"最适合的语言"
+   - 团队熟悉度往往比技术特性更重要
 
-### 6.2 Web 框架
+2. **技术栈演进是渐进过程，不是革命**
+   - GitHub 从 Rails 到多语言共存用了 10 年
+   - Twitter 从 Rails 到 Java 用了 5 年
+   - 渐进式重构比推倒重来更安全
 
-<WebFrameworkDemo />
+3. **架构设计比语言选择更重要**
+   - 一个设计糟糕的 Go 系统，性能远不如设计优秀的 Python 系统
+   - 微服务、缓存、异步处理等架构策略影响远大于语言
+   - 不要指望换语言解决所有问题
 
-#### 性能对比（Requests/sec）
+### 6.2 给不同阶段工程师的建议
 
-```
-Go (Gin):       1,000,000+
-Rust (Actix):   1,500,000+
-C++ (Pistache): 1,200,000+
-Node (Fastify): 800,000+
-Java (Vert.x):  700,000+
-Python (FastAPI): 200,000+
-```
+**初级工程师（0-2 年）**：
+- 先精通一门语言（推荐 Python 或 Go）
+- 理解语言背后的原理（内存管理、并发模型）
+- 不要急于学习太多语言，深度 > 广度
 
-**但性能不是唯一标准！**
+**中级工程师（3-5 年）**：
+- 掌握第二门语言（不同范式，如从 Python 学 Go）
+- 参与技术选型决策，理解业务场景
+- 开始关注架构设计，而非语言特性
 
-- **Django/Flask**：开发速度快，适合快速迭代
-- **Spring Boot**：企业级功能完备
-- **Rails**：约定优于配置，开发体验好
-
-### 6.3 ORM 对比
-
-| 语言   | 主流 ORM           | 特点                          |
-| :----- | :----------------- | :---------------------------- |
-| Java   | Hibernate / JPA    | 成熟，功能强大                |
-| Python | SQLAlchemy / ORM   | 灵活，支持多种数据库          |
-| Go     | GORM               | 简洁，但功能不如 Java ORM     |
-| Node   | Prisma / TypeORM   | Prisma 类型安全，TypeORM 灵活 |
-| Ruby   | ActiveRecord       | Rails 核心，约定优于配置      |
-| PHP    | Eloquent (Laravel) | Laravel 核心，易用            |
-
-### 6.4 测试框架
-
-| 语言   | 主流测试框架 | 特点               |
-| :----- | :----------- | :----------------- |
-| Java   | JUnit 5      | 企业级，功能完备   |
-| Python | pytest       | 简洁，插件丰富     |
-| Go     | testing      | 内置，简洁         |
-| Node   | Jest         | 零配置，覆盖率好   |
-| Rust   | 内置测试框架 | 集成测试，文档测试 |
-| Ruby   | RSpec        | BDD 风格，易读     |
+**高级工程师（5 年以上）**：
+- 能根据场景快速选择合适的技术栈
+- 主导大型系统的技术演进
+- 培养新人，建立团队技术文化
 
 ---
 
-## 7. 学习资源与社区
+## 7. 更多学习资源
 
-### 7.1 官方文档
+### 7.1 官方文档推荐
 
-| 语言   | 官方文档质量 | 学习曲线                 |
-| :----- | :----------- | :----------------------- |
-| Go     | ⭐⭐⭐⭐⭐   | 简洁，官方教程优秀       |
-| Python | ⭐⭐⭐⭐⭐   | 完善的官方教程           |
-| Rust   | ⭐⭐⭐⭐⭐   | "The Rust Book" 极其详细 |
-| Node   | ⭐⭐⭐⭐     | MDN 文档优秀             |
-| Java   | ⭐⭐⭐⭐     | Oracle 官方文档完善      |
-| C#     | ⭐⭐⭐⭐⭐   | Microsoft 文档极其详细   |
+| 语言 | 官方文档 | 推荐入门教程 |
+|------|----------|--------------|
+| **Java** | [docs.oracle.com](https://docs.oracle.com/en/java/) | Spring Boot 官方指南 |
+| **Python** | [docs.python.org](https://docs.python.org/3/) | Django Girls Tutorial |
+| **Node.js** | [nodejs.org/docs](https://nodejs.org/docs/) | Express.js 官方指南 |
+| **Go** | [go.dev/doc](https://go.dev/doc/) | A Tour of Go |
+| **Rust** | [doc.rust-lang.org](https://doc.rust-lang.org/) | The Rust Book |
+| **PHP** | [php.net/docs](https://www.php.net/docs.php) | Laravel 官方文档 |
 
-### 7.2 推荐书籍
+### 7.2 在线练习平台
 
-| 语言   | 经典书籍                             |
-| :----- | :----------------------------------- |
-| Go     | "The Go Programming Language"        |
-| Python | "Fluent Python"、"Python Cookbook"   |
-| Java   | "Effective Java"、"Java Concurrency" |
-| Rust   | "The Rust Programming Language"      |
-| Node   | "Node.js Design Patterns"            |
-| C#     | "C# in Depth"                        |
+- **LeetCode**: 算法练习，支持所有主流语言
+- **HackerRank**: 编程挑战和面试准备
+- **Exercism**: 免费编程练习，有导师评审
+- **Codewars**: 游戏化编程练习
 
-### 7.3 在线课程
+### 7.3 社区与论坛
 
-| 语言   | 平台         | 课程名称                                    |
-| :----- | :----------- | :------------------------------------------ |
-| Python | Coursera     | "Python for Everybody"                      |
-| Go     | Udemy        | "Go: The Complete Developer's Guide"        |
-| Java   | Coursera     | "Java Programming and Software Engineering" |
-| Rust   | Udemy        | "The Rust Programming Language"             |
-| Node   | freeCodeCamp | "Node.js API Masterclass"                   |
-
-### 7.4 社区活跃度
-
-<CommunityActivityDemo />
-
-| 语言   | Stack Overflow | GitHub Stars | 社区氛围       |
-| :----- | :------------- | :----------- | :------------- |
-| Python | #1 最活跃      | #2           | 友好，新手友好 |
-| JS     | #2             | #1           | 活跃，更新快   |
-| Java   | #3             | #3           | 企业级，严肃   |
-| Go     | #4             | #5           | 简洁，务实     |
-| Rust   | #5             | #4           | 热情，技术驱动 |
+| 语言 | Reddit 社区 | Stack Overflow 标签 | Discord 服务器 |
+|------|-------------|---------------------|----------------|
+| Java | r/java | java | The Coding Den |
+| Python | r/Python | python | Python Discord |
+| Node.js | r/node | node.js | Node.js Discord |
+| Go | r/golang | go | Gophers |
+| Rust | r/rust | rust | Rust Programming |
+| PHP | r/PHP | php | PHP Community |
 
 ---
 
-## 8. 如何选择
+## 8. 名词速查表 (Glossary)
 
-<LanguageSelectorDemo />
-
-### 8.1 根据团队背景选择
-
-**第一原则：选团队最熟悉的！**
-
-- **Java 团队**：继续用 Java，除非有特殊需求
-- **前端团队**：Node.js 让全栈更顺畅
-- **初创公司**：Python 或 Go（快速开发 + 高性能）
-- **企业级**：Java 或 C#（生态成熟）
-
-### 8.2 根据项目类型选择
-
-<ScenarioBasedSelectionDemo />
-
-| 项目类型        | 推荐语言      | 理由                     |
-| :-------------- | :------------ | :----------------------- |
-| 企业级 Web 应用 | Java          | Spring Boot 生态成熟     |
-| 快速原型/MVP    | Python / Ruby | 开发速度快               |
-| 云原生/微服务   | Go            | 轻量高性能               |
-| 全栈应用        | Node.js       | 前后端统一               |
-| AI/ML 项目      | Python        | AI 生态无与伦比          |
-| 游戏开发        | C++ / C#      | 引构支持（Unreal/Unity） |
-| 系统编程        | Rust / C++    | 内存控制，高性能         |
-| 实时系统        | Go / Node.js  | 并发性能好               |
-
-### 8.3 根据性能要求选择
-
-| 性能要求   | 推荐语言      | 理由                 |
-| :--------- | :------------ | :------------------- |
-| 极致性能   | C++ / Rust    | 零开销抽象           |
-| 高性能     | Go / Java     | 性能优秀，开发效率高 |
-| 中等性能   | Node.js / C#  | 性能足够，生态好     |
-| 性能不敏感 | Python / Ruby | 开发速度快           |
-
-### 8.4 决策树
-
-<LanguageDecisionTreeDemo />
-
-```
-开始
-  ↓
-需要极致性能？
-  ├─ 是 → 需要内存安全？
-  │        ├─ 是 → Rust
-  │        └─ 否 → C++
-  └─ 否 → 需要快速开发？
-           ├─ 是 → 团队有前端背景？
-           │        ├─ 是 → Node.js
-           │        └─ 否 → Python
-           └─ 否 → 需要企业级功能？
-                    ├─ 是 → Java / C#
-                    └─ 否 → Go
-```
-
-### 8.5 真实案例
-
-#### GitHub 的技术栈
-
-- **早期**：Ruby on Rails（快速开发）
-- **现在**：Ruby + Go（性能优化）
-
-#### Google 的技术栈
-
-- **核心**：C++（搜索算法）
-- **云平台**：Go（Kubernetes、Docker）
-- **AI**：Python（TensorFlow）
-
-#### Netflix 的技术栈
-
-- **后端**：Java（Spring Boot）
-- **前端**：Node.js
-- **数据**：Python
-
-#### Dropbox 的技术栈
-
-- **核心**：Python（早期）
-- **性能优化**：Go（后期迁移）
+| 名词 | 全称 | 解释 |
+| :--- | :--- | :--- |
+| **JVM** | Java Virtual Machine | Java 虚拟机，实现"一次编译，到处运行" |
+| **GC** | Garbage Collection | 垃圾回收，自动管理内存 |
+| **GIL** | Global Interpreter Lock | Python 全局解释器锁，限制多线程性能 |
+| **Goroutine** | - | Go 语言的轻量级线程（协程）|
+| **NPM** | Node Package Manager | Node.js 的包管理器，世界最大的包仓库 |
+| **Pip** | Pip Installs Packages | Python 的包管理器 |
+| **Maven** | - | Java 的项目管理和构建工具 |
+| **ORM** | Object-Relational Mapping | 对象关系映射，用面向对象方式操作数据库 |
+| **STW** | Stop-The-World | 垃圾回收时的暂停时间 |
+| **JIT** | Just-In-Time Compilation | 即时编译，提高运行时性能 |
+| **Type Safety** | - | 类型安全，编译时检查类型错误 |
+| **Memory Safe** | - | 内存安全，编译时保证无内存泄漏 |
+| **Concurrency** | - | 并发，同时处理多个任务 |
+| **Parallelism** | - | 并行，真正同时执行多个任务 |
+| **Async/Await** | - | 异步编程语法，简化异步代码编写 |
+| **Event Loop** | - | 事件循环，Node.js 的并发模型 |
+| **I/O Bound** | - | I/O 密集型，瓶颈在网络/磁盘操作 |
+| **CPU Bound** | - | CPU 密集型，瓶颈在计算 |
+| **Jitter** | - | 延迟抖动，网络或 GC 导致的时间波动 |
+| **Throughput** | - | 吞吐量，单位时间处理的请求数 |
+| **Latency** | - | 延迟，请求响应时间 |
 
 ---
 
-## 9. 总结与建议
+---
 
-### 9.1 快速参考表
+## 结语：选择是一门艺术
 
-| 语言        | 性能       | 开发效率   | 生态       | 学习曲线   | 推荐场景               |
-| :---------- | :--------- | :--------- | :--------- | :--------- | :--------------------- |
-| **Java**    | ⭐⭐⭐⭐   | ⭐⭐⭐     | ⭐⭐⭐⭐⭐ | ⭐⭐       | 企业级、大型系统       |
-| **Python**  | ⭐⭐       | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | AI/ML、快速开发        |
-| **Go**      | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | 云原生、微服务         |
-| **Node.js** | ⭐⭐⭐     | ⭐⭐⭐⭐   | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐   | 全栈、实时应用         |
-| **C#**      | ⭐⭐⭐⭐   | ⭐⭐⭐     | ⭐⭐⭐⭐   | ⭐⭐⭐     | Windows、Unity、企业级 |
-| **Ruby**    | ⭐⭐       | ⭐⭐⭐⭐⭐ | ⭐⭐⭐     | ⭐⭐⭐⭐⭐ | 快速原型、初创公司     |
-| **PHP**     | ⭐⭐       | ⭐⭐⭐⭐   | ⭐⭐⭐     | ⭐⭐⭐⭐⭐ | 中小型网站、CMS        |
-| **Rust**    | ⭐⭐⭐⭐⭐ | ⭐⭐       | ⭐⭐⭐     | ⭐         | 系统编程、区块链       |
-| **C++**     | ⭐⭐⭐⭐⭐ | ⭐⭐       | ⭐⭐⭐⭐⭐ | ⭐         | 游戏开发、高频交易     |
+经过对 Java、Python、Node.js、Go、Rust、PHP 等主流后端语言的深入探讨，我们不难发现：**没有最好的语言，只有最适合的选择**。
 
-### 9.2 学习路线建议
+### 选择的智慧
 
-#### 初学者路线
+**1. 不要盲目追新**
 
-1. **Python**：建立编程概念
-2. **Go**：学习并发和类型系统
-3. **Java**：理解企业级开发
+Rust 很酷，但如果你的团队只有 PHP 经验，强行切换可能带来灾难性后果。技术选型要考虑团队的学习成本、维护能力和业务连续性。
 
-#### 前端转全栈
+**2. 不要固步自封**
 
-1. **Node.js**：利用前端知识
-2. **TypeScript**：类型安全
-3. **Go**：后端性能优化
+如果你还在用 10 年前的技术栈，可能需要反思。技术在不断演进，适当的更新可以让团队保持活力，也能吸引更多优秀的人才。
 
-#### 后端工程师
+**3. 混合架构是常态**
 
-1. **Java**：企业级开发
-2. **Go**：云原生架构
-3. **Rust**：系统编程（进阶）
+现代系统很少只用一种语言。你可能会用 Python 做数据分析、Go 做 API 网关、Node.js 做实时推送、Java 做核心业务。关键是让每个语言做它最擅长的事。
 
-### 9.3 未来趋势
+### 给新手的建议
 
-#### 云原生时代
+如果你是刚入门的后端开发者，建议按以下顺序学习：
 
-- **Go** 和 **Rust** 将继续崛起
-- **Java** 仍会保持企业级地位
-- **Node.js** 继续统治全栈领域
+1. **第一阶段：打好基础**
+   - 学习 Python 或 JavaScript（Node.js）
+   - 理解 HTTP、数据库、基础算法
+   - 完成 2-3 个小项目
 
-#### AI 时代
+2. **第二阶段：深入一门**
+   - 选择 Python（快速开发）或 Go（云原生）
+   - 学习框架（Django/FastAPI 或 Gin/Echo）
+   - 理解并发、性能优化
 
-- **Python** 统治 AI 训练
-- **C++/Rust** 负责模型部署
-- **Go** 负责云基础设施
+3. **第三阶段：拓展视野**
+   - 学习第二门语言（推荐 Go 或 Rust）
+   - 理解不同语言的设计哲学
+   - 参与开源项目
 
-#### WebAssembly 时代
+4. **第四阶段：成为专家**
+   - 深入理解一门语言的底层原理
+   - 能够做技术选型和架构设计
+   - 指导和培养新人
 
-- **Rust** 将成为 WebAssembly 首选语言
-- **前端** 和 **后端** 的界限会进一步模糊
+### 最后的思考
 
-### 9.4 最后的建议
+编程语言是工具，不是目的。真正重要的是：
 
-1. **不要过度纠结语言选择**
-   - 大多数情况下，Java、Python、Go、Node.js 都能胜任
-   - 架构设计比语言选择更重要
+- **解决问题的能力**：理解业务，设计合理的系统
+- **持续学习的热情**：技术在不断变化，保持好奇心
+- **团队协作的精神**：代码是写给人看的，顺便给机器执行
+- **对质量的追求**：写整洁、可维护、有测试的代码
 
-2. **深度 > 广度**
-   - 精通 1-2 门语言 > 了解 10 门语言
-   - 深入理解语言背后的原理（内存管理、并发模型）
+无论你选择哪种语言，记住：**优秀的工程师不是因为他会很多语言，而是因为他能用合适的工具解决复杂的问题**。
 
-3. **保持开放心态**
-   - 每年都有新语言诞生
-   - 学习新语言能拓宽思维
-   - 但不要盲目追新
-
-4. **关注生态，不只是语言**
-   - 好的框架、库、工具比语言本身更重要
-   - 社区活跃度决定了长期可维护性
+希望这篇文章能帮助你在后端编程语言的选择上做出明智的决策。祝你在编程之路上越走越远！
 
 ---
 
-## 10. 名词速查表 (Glossary)
+*最后更新：2024年12月*
 
-| 名词            | 全称                      | 解释                                   |
-| :-------------- | :------------------------ | :------------------------------------- |
-| **JVM**         | Java Virtual Machine      | Java 虚拟机，实现"一次编译，到处运行"  |
-| **GC**          | Garbage Collection        | 垃圾回收，自动管理内存                 |
-| **GIL**         | Global Interpreter Lock   | Python 全局解释器锁，限制多线程性能    |
-| **Goroutine**   | -                         | Go 语言的轻量级线程（协程）            |
-| **NPM**         | Node Package Manager      | Node.js 的包管理器，世界最大的包仓库   |
-| **Pip**         | Pip Installs Packages     | Python 的包管理器                      |
-| **Maven**       | -                         | Java 的项目管理和构建工具              |
-| **ORM**         | Object-Relational Mapping | 对象关系映射，用面向对象方式操作数据库 |
-| **STW**         | Stop-The-World            | 垃圾回收时的暂停时间                   |
-| **JIT**         | Just-In-Time Compilation  | 即时编译，提高运行时性能               |
-| **Type Safety** | -                         | 类型安全，编译时检查类型错误           |
-| **Memory Safe** | -                         | 内存安全，编译时保证无内存泄漏         |
-| **Concurrency** | -                         | 并发，同时处理多个任务                 |
-| **Parallelism** | -                         | 并行，真正同时执行多个任务             |
-| **Async/Await** | -                         | 异步编程语法，简化异步代码编写         |
-| **Event Loop**  | -                         | 事件循环，Node.js 的并发模型           |
-| **I/O Bound**   | -                         | I/O 密集型，瓶颈在网络/磁盘操作        |
-| **CPU Bound**   | -                         | CPU 密集型，瓶颈在计算                 |
+*本文档基于各语言的最新稳定版本（Java 21、Python 3.12、Go 1.23、Node.js 22、Rust 1.83、PHP 8.4）编写，特性描述可能随版本更新而变化。*
diff --git a/docs/zh-cn/appendix/backend-layered-architecture.md b/docs/zh-cn/appendix/backend-layered-architecture.md
new file mode 100644
index 0000000..c25642f
--- /dev/null
+++ b/docs/zh-cn/appendix/backend-layered-architecture.md
@@ -0,0 +1,989 @@
+# 后端分层架构：Controller / Service / Repository / Domain
+
+> 💡 **学习指南**：分层架构就像组织一家餐厅——每个人都有明确的职责，前厅接待（Controller）、厨师做菜（Service）、仓管取货（Repository）、菜谱标准（Domain）。本文将带你从零理解后端代码的"层"到底是怎么回事，以及为什么要这样分层。
+
+在开始之前，建议你先有简单的后端开发经验，至少写过几个接口，踩过一些坑。
+
+---
+
+## 0. 引言：为什么代码越写越乱？
+
+<LayeredArchitectureDemo />
+
+很多初学者在刚开始写后端代码时，都会遇到这样的困惑：
+
+- **刚开始**：写一个用户注册接口，100 行代码搞定，感觉挺简单
+- **三个月后**：业务越来越复杂，一个文件 500 行，改一行代码怕影响其他地方
+- **半年后**：来了新同事，看着代码发愁："这个接口到底干了多少事？"
+
+**问题的本质**：代码没有"章法"，所有的逻辑都堆在一起，就像把食材、厨具、调料都扔在一个抽屉里。
+
+### 分层的思想：把抽屉换成橱柜
+
+想象一下厨房的组织方式：
+
+| 区域 | 存放物品 | 特点 |
+|------|---------|------|
+| **吊柜** | 不常用的锅具、囤货 | 取用最不方便 |
+| **台面** | 正在处理的食材 | 临时操作区 |
+| **抽屉** | 分类摆放的餐具 | 按需取用 |
+| **冰箱** | 生鲜食材 | 有保鲜条件 |
+
+**分层架构**就是把代码也这样组织：每一层只关心自己的职责，层与层之间通过明确的"接口"交互，而不是随意互相调用。
+
+---
+
+## 1. 核心概念：四层架构的职责划分
+
+### 1.1 四层架构概览
+
+典型的后端分层架构包含四个核心层次：
+
+```
+┌─────────────────────────────────────┐
+│  Controller 层（控制器层）             │  ← 接待员：接收请求，初步检查
+│  - 接收 HTTP 请求                     │
+│  - 参数校验                          │
+│  - 调用 Service                      │
+│  - 返回响应                          │
+├─────────────────────────────────────┤
+│  Service 层（业务逻辑层）              │  ← 厨师：处理核心业务
+│  - 业务逻辑编排                       │
+│  - 事务管理                          │
+│  - 调用 Repository                   │
+│  - 跨模块协调                        │
+├─────────────────────────────────────┤
+│  Repository 层（数据访问层）           │  ← 仓管员：管理数据存取
+│  - 数据库操作                        │
+│  - ORM 映射                          │
+│  - 查询封装                          │
+├─────────────────────────────────────┤
+│  Domain 层（领域模型层）               │  ← 菜谱标准：定义业务概念
+│  - 实体（Entity）                    │
+│  - 值对象（Value Object）             │
+│  - 业务规则                          │
+└─────────────────────────────────────┘
+```
+
+### 1.2 Controller 层：请求的"接待员"
+
+<ControllerLayerDemo />
+
+**职责**：
+- 接收 HTTP 请求，解析参数
+- 进行基础的参数校验（格式、必填等）
+- 调用 Service 层执行业务逻辑
+- 封装响应，返回给客户端
+
+**不该做的事**：
+- 不要在这里写业务逻辑
+- 不要直接操作数据库
+- 不要处理事务
+
+**类比**：就像餐厅的门童，负责迎接客人、检查预约、引导入座，但不负责做菜。
+
+### 1.3 Service 层：业务逻辑的"厨师"
+
+<ServiceLayerDemo />
+
+**职责**：
+- 实现核心业务逻辑
+- 编排多个 Repository 的操作
+- 管理事务边界（@Transactional）
+- 处理跨模块的业务协调
+
+**不该做的事**：
+- 不要直接写 SQL（交给 Repository）
+- 不要处理 HTTP 相关的事情
+- 不要返回数据库实体给 Controller
+
+**类比**：就像厨师按照菜谱做菜，需要协调各种食材（数据），把控菜品质量（业务正确性）。
+
+### 1.4 Repository 层：数据的"仓管员"
+
+<RepositoryLayerDemo />
+
+**职责**：
+- 封装所有数据访问逻辑
+- 执行 CRUD 操作
+- 处理 ORM 映射
+- 封装查询条件
+
+**不该做的事**：
+- 不要写业务逻辑
+- 不要处理事务（Service 层管理）
+- 不要依赖上层模块
+
+**类比**：就像餐厅的仓管员，负责从仓库取食材、存放剩余食材。厨师只需要告诉仓管员要什么，不需要知道仓库在哪、怎么取。
+
+### 1.5 Domain 层：领域模型的"蓝图"
+
+<DomainModelDemo />
+
+**职责**：
+- 定义业务实体（Entity）
+- 定义值对象（Value Object）
+- 封装业务规则
+- 作为所有层的共同依赖
+
+**重要特性**：
+- Domain 层不依赖任何其他层
+- 所有层都依赖 Domain 层
+- 是分层架构的基础
+
+**类比**：就像餐厅的菜单和菜品标准，定义了什么是"宫保鸡丁"、用什么食材、什么口味。所有厨师都要按照这个标准来做。
+
+---
+
+## 2. DTO：层与层之间的"翻译官"
+
+<DtoFlowDemo />
+
+### 2.1 为什么需要 DTO？
+
+想象一下：如果 Controller 直接把数据库实体（Entity）返回给前端，会发生什么？
+
+```java
+// ❌ 错误的做法
+@Entity
+public class User {
+    @Id
+    private Long id;
+    private String username;
+    private String password;        // 敏感信息！
+    private String phone;
+    private String email;
+    private LocalDateTime createdAt;
+    private Boolean isDeleted;    // 内部字段！
+}
+
+// 如果直接返回这个实体...
+// 前端会收到 password、isDeleted 等不应该暴露的字段
+```
+
+**DTO 的作用**：
+- **解耦**：隔离数据库实体和 API 契约
+- **安全**：控制暴露的字段，避免泄露敏感信息
+- **灵活**：可以为不同场景定义不同的 DTO
+- **性能**：避免加载不必要的数据
+
+### 2.2 不同层的 DTO 职责
+
+| 层级 | DTO 类型 | 职责 | 示例 |
+|------|---------|------|------|
+| **Controller** | Request / Response DTO | 定义 API 契约、参数校验、序列化 | `UserCreateRequest` |
+| **Service** | Param / Result DTO | 封装业务方法参数，解耦 Controller 与 Service | `UserCreateParam` |
+| **Repository** | Entity / DO | 映射数据库表结构，ORM 映射 | `UserEntity` |
+
+### 2.3 DTO 转换实战
+
+```java
+// ========== Controller 层：Request DTO ==========
+@Data
+public class UserCreateRequest {
+    @NotBlank(message = "用户名不能为空")
+    @Size(min = 3, max = 20, message = "用户名长度3-20")
+    private String username;
+
+    @NotBlank(message = "密码不能为空")
+    @Size(min = 6, message = "密码至少6位")
+    private String password;
+
+    @Email(message = "邮箱格式不正确")
+    private String email;
+}
+
+// ========== Controller 层：Response DTO ==========
+@Data
+@Builder
+public class UserDTO {
+    private Long id;
+    private String username;
+    private String email;
+    private LocalDateTime createdAt;
+    // ❌ 注意：不包含 password 字段！
+}
+
+// ========== Service 层：Param DTO ==========
+@Data
+@Builder
+public class UserCreateParam {
+    private String username;
+    private String password;  // 已加密的密码
+    private String email;
+}
+
+// ========== 转换逻辑 ==========
+@RestController
+@RequestMapping("/api/users")
+public class UserController {
+
+    private final UserService userService;
+
+    @PostMapping
+    public ResponseEntity<UserDTO> createUser(
+            @RequestBody @Valid UserCreateRequest request) {
+        // 1. Request DTO -> Param DTO
+        UserCreateParam param = UserCreateParam.builder()
+                .username(request.getUsername())
+                .password(encryptPassword(request.getPassword()))
+                .email(request.getEmail())
+                .build();
+
+        // 2. 调用 Service
+        User user = userService.createUser(param);
+
+        // 3. Entity -> Response DTO
+        UserDTO response = UserDTO.builder()
+                .id(user.getId())
+                .username(user.getUsername())
+                .email(user.getEmail())
+                .createdAt(user.getCreatedAt())
+                .build();
+
+        return ResponseEntity.ok(response);
+    }
+}
+```
+
+---
+
+## 3. 依赖方向：分层架构的铁律
+
+<DependencyDirectionDemo />
+
+### 3.1 依赖倒置原则（DIP）
+
+分层架构的核心规则：**上层模块不应该依赖下层模块的具体实现，而应该依赖于抽象。**
+
+```
+❌ 错误的依赖方式（直接依赖实现）：
+
+Controller -> UserServiceImpl -> UserDaoImpl -> UserEntity
+
+问题：
+1. 每层都耦合了具体实现
+2. 换实现要改很多代码
+3. 测试困难
+
+✅ 正确的依赖方式（依赖抽象）：
+
+Controller -> IUserService (接口) -> IUserDao (接口) -> UserEntity
+
+实现：
+UserServiceImpl -> UserDaoImpl
+
+好处：
+1. 上层只依赖接口
+2. 换实现只需改配置
+3. 容易 Mock 测试
+```
+
+### 3.2 正确的依赖方向
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Controller 层                                               │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  UserController                                       │  │
+│  │  - @Autowired private IUserService userService;      │  │
+│  │  ✅ 依赖接口，不依赖实现                              │  │
+│  └──────────────────────────────────────────────────────┘  │
+│                            │                                 │
+│                            ▼ 依赖（Dependency）               │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  Service 层                                           │  │
+│  │  ┌────────────────────────────────────────────────┐  │  │
+│  │  │  UserServiceImpl                                │  │  │
+│  │  │  - @Autowired private UserRepository repository;  │  │  │
+│  │  │  ✅ 依赖 Repository 接口                         │  │  │
+│  │  └────────────────────────────────────────────────┘  │  │
+│  │                      │                              │  │
+│  │                      ▼ 依赖                          │  │
+│  │  ┌────────────────────────────────────────────────┐  │  │
+│  │  │  Repository 层                                  │  │  │
+│  │  │  ┌──────────────────────────────────────────┐   │  │  │
+│  │  │  │  UserRepository                          │   │  │  │
+│  │  │  │  - extends JpaRepository<User, Long>    │   │  │  │
+│  │  │  └──────────────────────────────────────────┘   │  │  │
+│  │  │                      │                         │  │  │
+│  │  │                      ▼ 依赖                     │  │  │
+│  │  │  ┌──────────────────────────────────────────┐   │  │  │
+│  │  │  │  Domain 层 (核心领域)                   │   │  │  │
+│  │  │  │  ┌────────────────────────────────────┐  │   │  │  │
+│  │  │  │  │  User (Entity)                     │  │   │  │  │
+│  │  │  │  │  - 不包含任何层依赖              │  │   │  │  │
+│  │  │  │  │  - 被所有层依赖                  │  │   │  │  │
+│  │  │  │  └────────────────────────────────────┘  │   │  │  │
+│  │  │  └──────────────────────────────────────────┘   │  │  │
+│  │  └────────────────────────────────────────────────┘  │  │
+│  └──────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. 实战案例：电商订单系统的分层实现
+
+### 4.1 需求场景
+
+实现一个电商订单创建功能：
+- 用户选择商品，确认订单信息
+- 系统检查库存
+- 计算订单金额（商品价格 + 运费 - 优惠）
+- 创建订单记录
+- 扣减库存
+- 返回订单信息
+
+### 4.2 完整的分层代码
+
+```java
+// =====================================================
+// 1. Domain 层：领域模型
+// =====================================================
+
+// 订单实体
+@Entity
+@Table(name = "orders")
+public class Order {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(name = "user_id")
+    private Long userId;
+
+    @OneToMany(cascade = CascadeType.ALL, orphanRemoval = true)
+    @JoinColumn(name = "order_id")
+    private List<OrderItem> items = new ArrayList<>();
+
+    @Embedded
+    private Money totalAmount;
+
+    @Embedded
+    private Address shippingAddress;
+
+    @Enumerated(EnumType.STRING)
+    private OrderStatus status = OrderStatus.PENDING_PAYMENT;
+
+    @Column(name = "created_at")
+    private LocalDateTime createdAt = LocalDateTime.now();
+
+    // 业务方法：计算订单总金额
+    public void calculateTotal() {
+        Money total = Money.zero();
+        for (OrderItem item : items) {
+            total = total.add(item.getSubTotal());
+        }
+        this.totalAmount = total;
+    }
+
+    // 业务方法：添加订单项
+    public void addItem(OrderItem item) {
+        items.add(item);
+        item.setOrder(this);
+    }
+
+    // 业务方法：取消订单
+    public void cancel() {
+        if (this.status != OrderStatus.PENDING_PAYMENT) {
+            throw new IllegalStateException("只有待支付订单可以取消");
+        }
+        this.status = OrderStatus.CANCELLED;
+    }
+
+    // Getters...
+}
+
+// 订单项实体
+@Entity
+@Table(name = "order_items")
+public class OrderItem {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(name = "product_id")
+    private Long productId;
+
+    @Column(name = "product_name")
+    private String productName;
+
+    @Embedded
+    private Money unitPrice;
+
+    @Column(name = "quantity")
+    private Integer quantity;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "order_id")
+    private Order order;
+
+    // 计算小计
+    public Money getSubTotal() {
+        return unitPrice.multiply(quantity);
+    }
+
+    // Getters and Setters...
+}
+
+// 值对象：金钱
+@Embeddable
+public class Money {
+    @Column(name = "amount")
+    private BigDecimal amount;
+
+    @Column(name = "currency")
+    private String currency;
+
+    public static Money zero() {
+        return new Money(BigDecimal.ZERO, "CNY");
+    }
+
+    public Money add(Money other) {
+        return new Money(this.amount.add(other.amount), this.currency);
+    }
+
+    public Money multiply(int factor) {
+        return new Money(this.amount.multiply(BigDecimal.valueOf(factor)), this.currency);
+    }
+
+    // Constructor, Getters...
+}
+
+// 枚举：订单状态
+public enum OrderStatus {
+    PENDING_PAYMENT,   // 待支付
+    PAID,              // 已支付
+    SHIPPED,           // 已发货
+    COMPLETED,         // 已完成
+    CANCELLED          // 已取消
+}
+
+// =====================================================
+// 2. Repository 层：数据访问
+// =====================================================
+
+@Repository
+public interface OrderRepository extends JpaRepository<Order, Long> {
+
+    // 根据用户查询订单
+    List<Order> findByUserIdOrderByCreatedAtDesc(Long userId);
+
+    // 根据状态查询订单
+    List<Order> findByStatus(OrderStatus status);
+
+    // 复杂的 JPQL 查询
+    @Query("""
+        SELECT o FROM Order o
+        WHERE o.userId = :userId
+          AND o.status IN :statuses
+          AND o.createdAt BETWEEN :startDate AND :endDate
+        ORDER BY o.createdAt DESC
+        """)
+    List<Order> findUserOrdersWithConditions(
+        @Param("userId") Long userId,
+        @Param("statuses") List<OrderStatus> statuses,
+        @Param("startDate") LocalDateTime startDate,
+        @Param("endDate") LocalDateTime endDate
+    );
+}
+
+// =====================================================
+// 3. Service 层：业务逻辑
+// =====================================================
+
+@Service
+@RequiredArgsConstructor
+public class OrderService {
+
+    private final OrderRepository orderRepository;
+    private final ProductService productService;
+    private final InventoryService inventoryService;
+    private final IdGenerator idGenerator;
+
+    /**
+     * 创建订单
+     */
+    @Transactional
+    public OrderDTO createOrder(OrderCreateParam param) {
+        // 1. 验证商品信息并扣减库存
+        List<OrderItem> items = new ArrayList<>();
+        for (OrderItemParam itemParam : param.getItems()) {
+            // 查询商品
+            Product product = productService.getProduct(itemParam.getProductId());
+
+            // 检查库存
+            boolean reserved = inventoryService.reserveStock(
+                itemParam.getProductId(),
+                itemParam.getQuantity()
+            );
+            if (!reserved) {
+                throw new InsufficientStockException("商品库存不足: " + product.getName());
+            }
+
+            // 创建订单项
+            OrderItem item = new OrderItem();
+            item.setProductId(product.getId());
+            item.setProductName(product.getName());
+            item.setUnitPrice(product.getPrice());
+            item.setQuantity(itemParam.getQuantity());
+            items.add(item);
+        }
+
+        // 2. 创建订单
+        Order order = new Order();
+        order.setUserId(param.getUserId());
+        order.setShippingAddress(param.getAddress());
+
+        // 添加订单项
+        for (OrderItem item : items) {
+            order.addItem(item);
+        }
+
+        // 计算总价
+        order.calculateTotal();
+
+        // 3. 保存订单
+        orderRepository.save(order);
+
+        // 4. 转换为 DTO 返回
+        return OrderDTO.from(order);
+    }
+
+    /**
+     * 取消订单
+     */
+    @Transactional
+    public void cancelOrder(Long orderId, Long userId) {
+        // 1. 查询订单
+        Order order = orderRepository.findById(orderId)
+            .orElseThrow(() -> new OrderNotFoundException(orderId));
+
+        // 2. 验证权限
+        if (!order.getUserId().equals(userId)) {
+            throw new AccessDeniedException("无权操作此订单");
+        }
+
+        // 3. 执行业务逻辑（在领域对象中封装）
+        order.cancel();  // 这会检查状态是否允许取消
+
+        // 4. 恢复库存
+        for (OrderItem item : order.getItems()) {
+            inventoryService.releaseStock(item.getProductId(), item.getQuantity());
+        }
+
+        // 5. 保存
+        orderRepository.save(order);
+    }
+}
+
+// =====================================================
+// 4. Controller 层：API 入口
+// =====================================================
+
+@RestController
+@RequestMapping("/api/orders")
+@RequiredArgsConstructor
+public class OrderController {
+
+    private final OrderService orderService;
+
+    /**
+     * 创建订单
+     */
+    @PostMapping
+    public ResponseEntity<OrderDTO> createOrder(
+            @RequestBody @Valid OrderCreateRequest request,
+            @AuthenticationPrincipal UserPrincipal user) {
+
+        // 1. Request -> Param 转换
+        OrderCreateParam param = OrderCreateParam.builder()
+                .userId(user.getId())
+                .address(request.getAddress())
+                .items(request.getItems().stream()
+                        .map(item -> OrderItemParam.builder()
+                                .productId(item.getProductId())
+                                .quantity(item.getQuantity())
+                                .build())
+                        .collect(Collectors.toList()))
+                .build();
+
+        // 2. 调用 Service
+        OrderDTO order = orderService.createOrder(param);
+
+        // 3. 返回
+        return ResponseEntity.status(HttpStatus.CREATED).body(order);
+    }
+
+    /**
+     * 取消订单
+     */
+    @PostMapping("/{orderId}/cancel")
+    public ResponseEntity<Void> cancelOrder(
+            @PathVariable Long orderId,
+            @AuthenticationPrincipal UserPrincipal user) {
+
+        orderService.cancelOrder(orderId, user.getId());
+
+        return ResponseEntity.noContent().build();
+    }
+}
+```
+
+---
+
+## 5. 分层架构的演进：从混乱到整洁
+
+### 5.1 初学者常犯的错误
+
+**错误一：Controller 里写业务逻辑**
+
+```java
+// ❌ 错误：Controller 里写了太多业务逻辑
+@RestController
+public class OrderController {
+
+    @Autowired private OrderRepository orderRepository;
+    @Autowired private ProductRepository productRepository;
+    @Autowired private InventoryRepository inventoryRepository;
+
+    @PostMapping("/orders")
+    public Order createOrder(@RequestBody CreateOrderRequest request) {
+        // 太多的业务逻辑在这里...
+        // 检查库存
+        for (ItemRequest item : request.getItems()) {
+            Product product = productRepository.findById(item.getProductId())
+                .orElseThrow(() -> new RuntimeException("商品不存在"));
+
+            if (product.getStock() < item.getQuantity()) {
+                throw new RuntimeException("库存不足");
+            }
+        }
+
+        // 扣减库存
+        for (ItemRequest item : request.getItems()) {
+            Product product = productRepository.findById(item.getProductId()).get();
+            product.setStock(product.getStock() - item.getQuantity());
+            productRepository.save(product);
+        }
+
+        // 创建订单...
+        Order order = new Order();
+        // ... 更多逻辑
+
+        return orderRepository.save(order);
+    }
+}
+```
+
+**错误二：Service 层直接操作数据库**
+
+```java
+// ❌ 错误：Service 里直接写 SQL
+@Service
+public class OrderService {
+
+    @Autowired
+    private JdbcTemplate jdbcTemplate;  // 直接依赖底层 JDBC
+
+    public List<Order> getUserOrders(Long userId) {
+        // SQL 硬编码在 Service 里
+        String sql = "SELECT * FROM orders WHERE user_id = ? AND deleted = 0";
+
+        return jdbcTemplate.query(sql, (rs, rowNum) -> {
+            Order order = new Order();
+            order.setId(rs.getLong("id"));
+            // ... 更多字段映射
+            return order;
+        }, userId);
+    }
+}
+```
+
+**错误三：循环依赖**
+
+```java
+// ❌ 错误：Service 之间相互调用，形成循环依赖
+@Service
+public class OrderService {
+    @Autowired
+    private PaymentService paymentService;  // A 依赖 B
+}
+
+@Service
+public class PaymentService {
+    @Autowired
+    private OrderService orderService;  // B 又依赖 A - 循环！
+}
+```
+
+### 5.2 如何重构？
+
+**重构一：提取 Service 层**
+
+```java
+// ✅ Controller 只负责接收请求和返回响应
+@RestController
+public class OrderController {
+
+    @Autowired
+    private OrderService orderService;  // 只依赖 Service 接口
+
+    @PostMapping("/orders")
+    public OrderDTO createOrder(@RequestBody @Valid CreateOrderRequest request) {
+        // 1. Request -> Param
+        CreateOrderParam param = CreateOrderParam.builder()
+            .userId(getCurrentUserId())
+            .items(request.getItems())
+            .address(request.getAddress())
+            .build();
+
+        // 2. 调用 Service
+        Order order = orderService.createOrder(param);
+
+        // 3. Entity -> DTO
+        return OrderDTO.from(order);
+    }
+}
+
+// ✅ Service 封装业务逻辑
+@Service
+@Transactional
+public class OrderService {
+
+    @Autowired
+    private OrderRepository orderRepository;
+
+    @Autowired
+    private ProductService productService;
+
+    @Autowired
+    private InventoryService inventoryService;
+
+    public Order createOrder(CreateOrderParam param) {
+        // 1. 检查库存并扣减
+        for (ItemParam item : param.getItems()) {
+            boolean reserved = inventoryService.reserveStock(
+                item.getProductId(),
+                item.getQuantity()
+            );
+            if (!reserved) {
+                throw new InsufficientStockException("库存不足");
+            }
+        }
+
+        // 2. 创建订单
+        Order order = new Order();
+        order.setUserId(param.getUserId());
+        // ... 设置其他属性
+
+        // 3. 保存
+        return orderRepository.save(order);
+    }
+}
+```
+
+**重构二：提取 Repository 层**
+
+```java
+// ✅ Repository 接口：定义数据访问契约
+@Repository
+public interface OrderRepository extends JpaRepository<Order, Long> {
+    // Spring Data JPA 自动生成实现
+    List<Order> findByUserIdOrderByCreatedAtDesc(Long userId);
+
+    @Query("SELECT o FROM Order o WHERE o.status = :status AND o.createdAt < :date")
+    List<Order> findByStatusAndCreatedAtBefore(
+        @Param("status") OrderStatus status,
+        @Param("date") LocalDateTime date
+    );
+}
+
+// ✅ Service 只依赖 Repository 接口
+@Service
+public class OrderService {
+    @Autowired
+    private OrderRepository orderRepository;  // 依赖接口，不依赖实现
+
+    public Order getOrder(Long id) {
+        return orderRepository.findById(id)
+            .orElseThrow(() -> new OrderNotFoundException(id));
+    }
+}
+```
+
+**重构三：打破循环依赖**
+
+```java
+// ✅ 方案一：抽取共同的依赖到 Domain 层
+
+// 在 Domain 层定义领域事件
+public class OrderPaidEvent {
+    private final Long orderId;
+    private final Long userId;
+    private final Money amount;
+    private final LocalDateTime paidAt;
+    // ...
+}
+
+// OrderService 发布事件
+@Service
+public class OrderService {
+    @Autowired
+    private ApplicationEventPublisher eventPublisher;
+
+    public void payOrder(Long orderId, PaymentParam param) {
+        Order order = orderRepository.findById(orderId).orElseThrow();
+        order.pay(param.getPaymentMethod());
+        orderRepository.save(order);
+
+        // 发布事件，而不是直接调用 PaymentService
+        eventPublisher.publishEvent(new OrderPaidEvent(
+            order.getId(),
+            order.getUserId(),
+            order.getTotalAmount(),
+            LocalDateTime.now()
+        ));
+    }
+}
+
+// PaymentService 监听事件
+@Service
+public class PaymentService {
+    @EventListener
+    @Transactional
+    public void handleOrderPaid(OrderPaidEvent event) {
+        // 处理支付相关逻辑
+        createPaymentRecord(event);
+        // ...
+    }
+}
+
+// ✅ 方案二：使用中间抽象
+
+// 定义接口
+public interface PaymentGateway {
+    PaymentResult processPayment(PaymentRequest request);
+}
+
+// OrderService 依赖接口
+@Service
+public class OrderService {
+    @Autowired
+    private PaymentGateway paymentGateway;  // 依赖接口
+}
+
+// 实现类
+@Service
+public class AlipayGateway implements PaymentGateway {
+    // 实现...
+}
+```
+
+---
+
+## 5. 分层架构 vs 整洁架构
+
+<CleanArchitectureDemo />
+
+### 5.1 两种架构的对比
+
+| 特性 | 传统分层架构 | 整洁架构 |
+|------|-------------|----------|
+| **依赖方向** | 从上到下 | 从外到内 |
+| **核心业务位置** | Service 层 | Domain 层（中心） |
+| **框架依赖** | 较深（如 Spring） | 较浅（通过接口隔离） |
+| **可测试性** | 需要集成测试 | 核心可单元测试 |
+| **学习曲线** | 平缓 | 较陡 |
+| **适用场景** | 中小型项目、快速迭代 | 大型复杂业务、长期维护 |
+
+### 5.2 如何选择？
+
+**选择传统分层架构当...**
+- 项目规模较小，业务相对简单
+- 团队对 DDD 不熟悉
+- 需要快速上线，验证市场
+- 技术栈相对固定
+
+**选择整洁架构当...**
+- 业务复杂，领域模型丰富
+- 需要长期维护和演进
+- 需要频繁切换技术栈
+- 团队有较强的设计能力
+
+---
+
+## 6. 总结：分层架构的核心要点
+
+### 6.1 四层职责速查表
+
+| 层级 | 主要职责 | 不该做的事 |
+|------|---------|-----------|
+| **Controller** | 接收请求、参数校验、调用 Service、返回响应 | 写业务逻辑、操作数据库、处理事务 |
+| **Service** | 业务逻辑编排、事务管理、协调 Repository | 直接写 SQL、处理 HTTP 细节、返回实体给 Controller |
+| **Repository** | 数据访问、ORM 映射、查询封装 | 写业务逻辑、管理事务、依赖上层 |
+| **Domain** | 实体定义、业务规则、值对象 | 依赖其他层、处理持久化、处理 HTTP |
+
+### 6.2 依赖方向铁律
+
+```
+✅ 正确的依赖方向：
+
+Controller → Service 接口 → Repository 接口 → Domain
+    ↑           ↑                ↑              ↑
+    └-----------└----------------└--------------┘
+    所有层都依赖 Domain，Domain 不依赖任何层
+
+❌ 禁止的做法：
+- Service 直接依赖 Repository 实现
+- Controller 直接操作数据库
+- Domain 依赖 Service 或 Repository
+- 层与层之间形成循环依赖
+```
+
+### 6.3 编码最佳实践
+
+1. **接口优先**：Service 和 Repository 都定义接口，实现类通过 Spring 注入
+2. **DTO 隔离**：每层使用自己的 DTO，不要直接传递 Entity
+3. **事务在 Service**：使用 `@Transactional` 在 Service 方法上控制事务
+4. **异常处理**：Controller 统一处理异常，不要 try-catch 后吞掉异常
+5. **贫血模型 vs 充血模型**：根据团队熟悉程度选择，但建议 Domain 有基本的行为方法
+
+### 6.4 常见面试问题
+
+**Q1: 为什么要分层？不分层可以吗？**
+> A: 分层的目的是解耦和关注点分离。小项目可以不分层，但随着业务复杂度的增加，不分层会导致代码难以维护、测试困难、团队协作效率低下。
+
+**Q2: Controller 层可以写业务逻辑吗？**
+> A: 不可以。Controller 应该只负责接收请求、调用 Service、返回响应。业务逻辑应该封装在 Service 层，这样代码可以被复用，也更容易测试。
+
+**Q3: 什么是贫血模型和充血模型？**
+> A: 贫血模型是指 Entity 只有 getter/setter，业务逻辑都在 Service 层。充血模型是指 Entity 包含业务方法（如 `order.cancel()`），封装了业务规则。DDD 推荐充血模型，但贫血模型更简单易懂。
+
+**Q4: 如何处理跨多个 Service 的事务？**
+> A: 可以在上层 Service 中使用 `@Transactional`，调用多个下层 Service。或者使用分布式事务方案（如 Seata），但会增加系统复杂度。
+
+---
+
+## 7. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+|------|---------|------|
+| **Layered Architecture** | 分层架构 | 将系统划分为多个层次，每层有明确的职责 |
+| **Controller** | 控制器 | 接收 HTTP 请求，调用 Service，返回响应 |
+| **Service** | 服务 | 封装业务逻辑，协调多个 Repository |
+| **Repository** | 仓储 | 封装数据访问逻辑，执行 CRUD 操作 |
+| **Domain** | 领域 | 定义业务实体、值对象和业务规则 |
+| **DTO** | 数据传输对象 | 层与层之间传递数据的载体 |
+| **Entity** | 实体 | 有唯一标识的领域对象，对应数据库表 |
+| **Value Object** | 值对象 | 没有唯一标识，通过属性值判断相等的对象 |
+| **Dependency Inversion** | 依赖倒置 | 高层模块不应依赖低层模块，都应依赖抽象 |
+| **Transaction** | 事务 | 保证一组操作原子性的机制 |
+| **Clean Architecture** | 整洁架构 | 以领域为核心的架构风格，强调依赖方向 |
+| **Anemic Domain Model** | 贫血模型 | 实体只有数据没有行为的模型 |
+| **Rich Domain Model** | 充血模型 | 实体包含数据和业务行为的模型 |
+
+---
+
+*本文档示例代码基于 Java + Spring Boot，但分层架构的思想适用于任何后端技术栈（Node.js、Python、Go 等）。*
diff --git a/docs/zh-cn/appendix/browser-rendering-pipeline.md b/docs/zh-cn/appendix/browser-rendering-pipeline.md
new file mode 100644
index 0000000..722740f
--- /dev/null
+++ b/docs/zh-cn/appendix/browser-rendering-pipeline.md
@@ -0,0 +1,883 @@
+# 浏览器渲染管线与事件循环可视化
+
+> 💡 **学习指南**：浏览器是你最亲密的"同事"，但你真的了解它是怎么干活的吗？本文将带你深入浏览器的"车间"，看看它是如何把一堆HTML、CSS、JavaScript变成你眼前的像素画的。本章节会围绕一个问题展开：**为什么有些网页流畅如丝，有些却卡成PPT？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **DOM是什么**：可以先阅读 [Web开发基础](./web-basics/) 的相关内容。
+- **JavaScript异步基础**：如果你对Promise、async/await还不熟悉，可以先了解相关概念。
+
+---
+
+## 0. 引言：为什么我的网页卡成PPT？
+
+<RenderingPipelineDemo />
+
+很多人在实际开发中都会遇到类似的情况：
+
+- 页面刚加载时，图片一张一张蹦出来，布局"跳"来"跳"去；
+- 滚动页面时，明明很简单的一个动画，却卡得让人想摔鼠标；
+- 用户点了按钮，半天没反应，然后突然"嗖"一下全出来了。
+
+直觉上，我们会以为是：**"我的代码写得太烂"**。
+
+但大多数时候，问题并不在于你"不会写"，而在于你**没有理解浏览器的"工作习惯"**。
+
+浏览器就像一位经验丰富的厨师，它有一套固定的"做菜流程"（渲染管线）。如果你不了解这套流程，就可能在一顿操作猛如虎之后，把原本简单的菜（网页）做得一团糟。
+
+<DomToRenderTreeDemo />
+
+面对这些性能挑战，单纯依靠"少写点代码"已经捉襟见肘。我们需要一套更系统的理解方法，来在浏览器的"规则"内，让我们的网页飞起来。这正是本文试图解决的问题。
+
+---
+
+## 1. 什么是"渲染管线"？（定义 + 场景）
+
+先给一个简短的工作定义，再看几个典型场景。
+
+> **渲染管线（Rendering Pipeline）**，是浏览器将HTML、CSS、JavaScript转换为屏幕上像素的一系列处理步骤的总称，它决定了网页的显示方式和性能表现。
+
+你可以简单地把它理解成五个主要阶段：**构建DOM树** → **构建CSSOM树** → **构建渲染树** → **布局（Layout）** → **绘制（Paint）** → **合成（Composite）**。
+
+常见会遇到性能问题的场景包括：
+
+- 大量DOM节点的动态增删改
+- 频繁的样式计算和布局更新
+- 复杂的CSS动画和过渡效果
+- 图片和视频等资源加载
+
+接下来，我们就从一个真实团队的"血泪教训"出发，看看他们是怎么一点点从"页面卡得要死"进化到"丝般顺滑"的。
+
+---
+
+## 2. 从"血泪教训"说起：某电商大促页面优化实录
+
+本章案例来自 **某头部电商平台的详情页团队**。
+
+与普通页面不同，电商详情页需要展示海量信息（商品图片、SKU选择、价格计算、评价、推荐等），动辄上千个DOM节点。
+
+这带来了核心矛盾：
+- **如果全量渲染**：首屏加载慢，用户等得想骂人；
+- **如果分片渲染**：滚动时布局"跳"动，体验极差。
+
+该团队经历过多次架构重构，才明白一个道理：**性能不能只靠"少写点"，而要靠"理解渲染管线"。**
+
+### 2.1 三次重构教会我们什么？
+
+该团队的前端负责人分享过他们的"踩坑史"：
+
+| 阶段 | 遇到的问题 | 当时的想法 | 结果 |
+| :--- | :--- | :--- | :--- |
+| **第一次** | 页面滚动卡成PPT | "少渲染点内容就好了" | 图片懒加载后，滚动时布局跳动，更卡 |
+| **第二次** | 价格计算时页面"假死" | "把计算放到setTimeout里" | 异步后UI更新延迟，用户觉得"没反应" |
+| **第三次** | 复杂的SKU选择器渲染慢 | "用Canvas替换DOM" | 过度优化，维护成本爆炸 |
+
+**核心领悟**：**不是优化越多越好，而是优化越"对位"越好**。
+
+### 2.2 渲染管线的"脾气"到底像什么？
+
+**传统瀑布流开发** = **自助餐**：
+- 拿什么都往盘子里装：功能越多，DOM越多；
+- 吃完才走：页面完全加载前用户只能等；
+- 一次性账单：所有成本在页面打开时集中爆发。
+
+**理解渲染管线后的优化** = **精致法餐**：
+- 分道上菜：首屏关键内容优先渲染，其余延后；
+- 边吃边做：根据用户滚动动态准备后续"菜品"；
+- 精细计费：只在必要时触发昂贵的重排和重绘。
+
+**该团队的经验**：**了解浏览器的"口味"，才能做出让它"吃得香"的网页**。
+
+<LayoutReflowDemo />
+
+---
+
+## 3. 第一阶段：构建DOM树和CSSOM树
+
+### 3.1 为什么浏览器要"树"化？
+
+想象你收到一叠杂乱的发票（HTML代码），需要整理成一本清晰的账本（DOM树）。
+
+浏览器做的工作包括：
+- **词法分析**：把HTML字符串拆成Token（标签、属性、文本等）；
+- **语法分析**：根据HTML规则，把Token组装成节点；
+- **树构建**：根据节点间的父子关系，构建出树形结构。
+
+```html
+<!-- 原始HTML -->
+<html>
+  <body>
+    <div class="container">
+      <p>Hello World</p>
+    </div>
+  </body>
+</html>
+```
+
+```
+<!-- DOM树结构 -->
+Document
+└── html
+    └── body
+        └── div.container
+            └── p
+                └── "Hello World"
+```
+
+**CSSOM树**的构建过程类似，只是处理的是CSS规则：
+
+```css
+/* 原始CSS */
+.container { width: 100%; }
+.container p { color: red; }
+```
+
+```
+/* CSSOM树结构 -->
+StyleSheet
+├── .container
+│   ├── width: 100%
+│   └── p
+│       └── color: red
+```
+
+### 3.2 遇到的坑：DOM树为什么有时候"歪"了？
+
+**坑1：HTML标签没闭合**
+
+```html
+<!-- 错误的HTML -->
+<div>
+  <p>这是一段文字
+</div>
+
+<!-- 浏览器自动修复后 -->
+<div>
+  <p>这是一段文字</p>
+</div>
+```
+
+浏览器很"宽容"，会尝试自动修复不完整的标签。但这种宽容是以性能为代价的——浏览器需要额外计算来猜测你的意图。
+
+**坑2：CSS选择器权重冲突**
+
+```css
+/* 你以为的优先级 */
+#header { color: red; }      /* id选择器，权重100 */
+.title { color: blue; }     /* class选择器，权重10 */
+
+/* 实际计算 */
+<div id="header" class="title">   /* 最终颜色：red，因为100 > 10 */
+```
+
+浏览器构建CSSOM时需要计算每个元素的最终样式，复杂的选择器会增加计算量。
+
+<PaintLayerDemo />
+
+---
+
+## 4. 第二阶段：构建渲染树（Render Tree）
+
+### 4.1 为什么需要"渲染树"？
+
+DOM树和CSSOM树构建完成后，浏览器需要把它们"合并"成一棵新的树——**渲染树（Render Tree）**。
+
+为什么要多此一举？因为：
+- **DOM树包含了所有节点**，包括那些不可见的（如`<head>`、`<script>`、`display:none`的元素）；
+- **渲染树只包含可见节点**，它是实际需要绘制到屏幕上的内容的集合。
+
+```
+DOM树                          CSSOM树
+  │                              │
+  ▼                              ▼
+┌─────────┐                  ┌──────────┐
+│  html   │                  │  body    │
+│   │     │                  │   │      │
+│  body   │                  │   ├── width: 100%
+│   │     │                  │   └── div
+│  div    │                  │       ├── color: red
+│   │     │                  │       └── display: none
+│  span   │                  └──────────┘
+│ (隐藏)  │
+└─────────┘
+           │
+           ▼
+      合并计算
+           │
+           ▼
+    ┌─────────────┐
+    │  渲染树      │
+    │             │
+    │  body       │
+    │   │         │
+    │  div        │ ← span被排除，因为CSS指定了display:none
+    │ (最终样式)   │
+    └─────────────┘
+```
+
+### 4.2 渲染树的构建规则
+
+浏览器在构建渲染树时，会遵循以下规则：
+
+| 场景 | 处理方式 | 示例 |
+|------|---------|------|
+| `display: none` | **完全排除**出渲染树 | 元素及其所有子元素都不可见 |
+| `visibility: hidden` | **包含在渲染树中**，但标记为不可见 | 占据空间，但完全透明 |
+| `opacity: 0` | **包含在渲染树中**，但完全透明 | 可交互，但看不见 |
+| 不在视口内 | **包含在渲染树中**，暂不绘制 | 滚动到视口时才绘制 |
+
+### 4.3 踩坑实录：为什么设置了display:none，页面还是卡？
+
+**坑：以为display:none的元素"不存在"**
+
+```javascript
+// 你以为的优化：先隐藏，修改完再显示
+const container = document.getElementById('list')
+container.style.display = 'none'  // "这步应该很快吧？"
+
+// 疯狂操作DOM
+for (let i = 0; i < 1000; i++) {
+  const item = document.createElement('div')
+  item.textContent = `Item ${i}`
+  item.style.width = `${Math.random() * 100}px`  // 改变宽度！
+  container.appendChild(item)
+}
+
+container.style.display = 'block'  // "这下应该一次渲染了吧？"
+```
+
+**残酷的现实**：
+
+即使设置了`display:none`，当你修改元素的样式（尤其是影响布局的属性如`width`、`height`、`margin`等）时，浏览器仍然需要：
+
+1. **重新计算样式**（Recalculate Style）：计算每个元素匹配哪些CSS规则；
+2. **构建/更新渲染树**（Update Render Tree）：因为`display:none`的元素虽然不在渲染树中，但它们的子元素可能会被JavaScript引用并修改；
+3. **标记需要重排的节点**：即使父节点`display:none`，浏览器也需要跟踪这些变化，以便在显示时正确渲染。
+
+**正确的优化姿势**：
+
+```javascript
+// 真正的优化：使用DocumentFragment批量操作
+const container = document.getElementById('list')
+const fragment = document.createDocumentFragment()  // 创建一个"虚拟容器"
+
+// 所有操作都在内存中的fragment上进行，不影响真实DOM
+for (let i = 0; i < 1000; i++) {
+  const item = document.createElement('div')
+  item.textContent = `Item ${i}`
+  item.style.width = `${Math.random() * 100}px`
+  fragment.appendChild(item)  // 操作的是fragment，不是真实DOM！
+}
+
+// 一次性把fragment的内容插入真实DOM，只触发一次重排和重绘
+container.appendChild(fragment)
+```
+
+<CompositeDemo />
+
+---
+
+## 5. 第三阶段：布局（Layout）与重排（Reflow）
+
+### 5.1 为什么浏览器要"算"布局？
+
+渲染树构建完成后，浏览器知道了页面上有哪些可见元素，以及它们的样式。但还不知道它们**具体在什么位置、占多大空间**。
+
+这就像你拿到了家具的清单（渲染树），知道要买哪些家具、什么颜色，但还没设计家具的摆放位置。布局阶段就是做这件事的。
+
+浏览器会：
+1. **从渲染树的根节点开始遍历**；
+2. **计算每个节点的几何信息**：宽度、高度、位置（x, y坐标）；
+3. **处理嵌套关系**：父节点的尺寸会影响子节点，子节点的尺寸也可能影响父节点（视布局方式而定）。
+
+### 5.2 重排（Reflow）的"脾气"
+
+布局计算很"贵"，因为它通常是**同步**的、**阻塞**的。也就是说，当你通过JavaScript修改了一个影响布局的属性，浏览器必须：
+
+1. **立即停止当前的所有工作**；
+2. **重新计算样式**（可能涉及复杂的CSS选择器匹配）；
+3. **重新构建/更新渲染树**；
+4. **重新执行布局计算**（从根节点开始，可能涉及成千上万节点的几何计算）；
+5. **完成后才能继续执行你的JavaScript代码**。
+
+这就是**重排（Reflow）**，也称为**回流**或**重新布局（Relayout）**。
+
+### 5.3 触发重排的"雷区"
+
+以下是常见的会触发重排的属性和操作，建议**背诵并收藏**：
+
+| 类别 | 属性/操作 | 说明 |
+|------|----------|------|
+| **尺寸** | `width`, `height`, `min/max-width/height` | 改变元素的宽高会触发重排 |
+| **位置** | `top`, `right`, `bottom`, `left` | 定位元素的位置变化会触发重排 |
+| **边距** | `margin`, `padding` | 内外边距的改变会触发重排 |
+| **边框** | `border-width`, `border-style`（某些情况） | 边框改变可能影响布局 |
+| **内容** | 文字内容变化、图片加载 | 内容改变可能导致尺寸变化 |
+| **字体** | `font-size`, `font-weight`, `line-height` | 字体变化影响文本布局 |
+| **显示** | `display`（值改变时） | `none`↔`block`等切换会触发重排 |
+| **布局模式** | `position`（值改变时） | `static`↔`absolute`等切换会触发重排 |
+| **查询** | `offsetWidth`, `offsetHeight`, `offsetTop`等 | **读取**这些值会强制浏览器立即执行重排！|
+
+**重点注意最后一项**：读取布局属性会**强制同步布局（Forced Synchronous Layout）**，这是性能杀手中的战斗机！
+
+### 5.4 踩坑实录：为什么我的"优化"反而更卡？
+
+**坑：强制同步布局的"死亡循环"**
+
+```javascript
+// 你想做的：给所有卡片设置相同高度
+const cards = document.querySelectorAll('.card')
+
+// 你觉得这样很"聪明"：先获取最高卡片的高度
+let maxHeight = 0
+for (let i = 0; i < cards.length; i++) {
+  const height = cards[i].offsetHeight  // 触发强制同步布局！
+  maxHeight = Math.max(maxHeight, height)
+}
+
+// 然后统一设置
+for (let i = 0; i < cards.length; i++) {
+  cards[i].style.height = maxHeight + 'px'  // 再次触发重排！
+}
+```
+
+**问题分析**：
+
+这段代码触发了**两次强制同步布局**：
+
+1. **读取`offsetHeight`时**：浏览器为了确保返回的是最新的高度值，必须立即执行一次完整的布局计算（重排）。如果有100个卡片，这个动作会执行100次！
+
+2. **设置`height`时**：这又触发了新一轮的重排。
+
+更糟糕的是，如果在读取和设置之间还有其他DOM操作，浏览器可能不得不进行**布局抖动（Layout Thrashing）**——反复地读取→重排→写入→重排→读取...形成恶性循环。
+
+**正确的优化姿势**：
+
+```javascript
+const cards = document.querySelectorAll('.card')
+
+// 第一步：批量读取（先全部读完）
+const heights = []
+for (let i = 0; i < cards.length; i++) {
+  heights.push(cards[i].offsetHeight)  // 读取操作集中在一起
+}
+
+// 计算最大值
+const maxHeight = Math.max(...heights)
+
+// 第二步：批量写入（再全部写）
+// 使用 requestAnimationFrame 确保在下一次重绘前执行
+requestAnimationFrame(() => {
+  for (let i = 0; i < cards.length; i++) {
+    cards[i].style.height = maxHeight + 'px'
+  }
+})
+```
+
+**优化原理**：
+
+1. **读写分离**：先集中完成所有读取操作（获取offsetHeight），再集中完成所有写入操作（设置height）。这样浏览器可以在读取阶段一次性完成布局计算，而不是每读一个就重排一次。
+
+2. **requestAnimationFrame**：将写入操作放在下一次重绘之前执行。这样可以确保：
+   - 批量处理DOM修改，减少重排次数；
+   - 与浏览器的渲染周期同步，避免不必要的计算。
+
+<EventLoopDemo />
+
+---
+
+## 6. 第四阶段：绘制（Paint）与合成（Composite）
+
+### 6.1 从"设计图"到"真墙壁"：绘制阶段
+
+布局完成后，浏览器已经知道了每个元素的位置和大小，就像装修师傅已经量好了尺寸、画好了线。接下来就是"刷墙"——把元素的样式真正"画"出来。
+
+绘制阶段，浏览器会：
+1. **遍历渲染树**，为每个可见节点创建绘制记录（Paint Record）；
+2. **调用图形API**，将元素的背景、边框、文字、阴影等绘制到内存中的位图（Bitmap）上；
+3. **分层绘制**，不同的元素可能绘制到不同的"层"（Layer）上，方便后续处理。
+
+### 6.2 触发重绘（Repaint）的"信号"
+
+与重排不同，重绘只涉及"外观"的改变，不涉及"几何"的改变。以下属性会触发重绘：
+
+| 类别 | 属性 | 说明 |
+|------|------|------|
+| **颜色** | `color`, `background-color` | 文字和背景颜色变化 |
+| **背景** | `background-image`, `background-position` | 背景图片和位置 |
+| **边框样式** | `border-color`, `border-style`（颜色部分） | 边框外观变化 |
+| **文字** | `text-decoration`, `text-shadow` | 文字装饰和阴影 |
+| **盒阴影** | `box-shadow` | 元素阴影 |
+| **可见性** | `visibility`（非`none`值之间切换） | 元素可见性变化 |
+| **圆角** | `border-radius` | 圆角大小 |
+| **透明度** | `opacity` | 元素透明度 |
+
+**注意**：`opacity`和`transform`是两个特殊的属性，它们不会触发重绘，而是直接触发**合成**阶段！这是它们性能优异的原因。
+
+### 6.3 合成（Composite）：GPU的"魔法"
+
+传统的前三个阶段（构建渲染树、布局、绘制）都是在**CPU**上执行的。而**合成（Composite）**阶段，是现代浏览器引入的一项重要优化——它把页面的不同部分分成多个**层（Layer）**，然后利用**GPU（图形处理器）**来并行合成最终的画面。
+
+你可以这样理解：
+- **传统方式**：画家一笔一笔在画布上画完整个画面（CPU串行执行）；
+- **合成方式**：把画面分成多层（背景层、人物层、前景层），分别画好，然后用相机一次性拍在一起（GPU并行合成）。
+
+### 6.4 哪些因素会创建新的合成层？
+
+浏览器会自动将某些元素提升到独立的合成层。以下是常见的触发条件：
+
+| 触发条件 | CSS属性/值 | 说明 |
+|---------|-----------|------|
+| **3D变换** | `transform: translate3d()`, `rotate3d()`, `scale3d()` | 任何3D变换都会创建合成层 |
+| **硬件加速的2D变换** | `transform: translateZ(0)` | 俗称"GPU hack"，强制创建层 |
+| **透明度动画** | `opacity`变化（配合动画） | 避免重绘，直接合成 |
+| **固定定位** | `position: fixed` | 避免滚动时重复布局 |
+| **Will-Change** | `will-change: transform, opacity` | 显式提示浏览器提前创建层 |
+| **Canvas/WebGL** | `<canvas>`, WebGL内容 | 天然在独立层中 |
+| **Video/iframe** | `<video>`, `<iframe>` | 独立层，防止相互影响 |
+| **Backface-Visibility** | `backface-visibility: hidden` | 3D相关，创建层 |
+| **CSS滤镜** | `filter`（某些浏览器） | 可能创建层 |
+| **Mask/Clip** | `clip-path`, `mask`（某些浏览器） | 可能创建层 |
+
+### 6.5 踩坑实录：合成层太多反而卡？
+
+**坑：滥用`translateZ(0)`导致GPU内存爆炸**
+
+```css
+/* 你以为的优化：给所有动画元素都开启GPU加速 */
+.card { transform: translateZ(0); }
+.button { transform: translateZ(0); }
+.icon { transform: translateZ(0); }
+/* ... 100个元素都加 ... */
+```
+
+**问题分析**：
+
+每个合成层都需要GPU内存来存储：
+- **层的内容**：像素数据（位图），大小取决于元素的尺寸；
+- **层的元数据**：位置、变换矩阵、透明度等信息。
+
+如果一个页面的合成层太多，会导致：
+1. **GPU内存占用过高**：低端设备（尤其是手机）可能会崩溃或降级到CPU渲染；
+2. **合成阶段耗时增加**：层越多，GPU需要处理的纹理越多，合成时间线性增长；
+3. **额外的内存带宽消耗**：每一层都需要从CPU传输到GPU。
+
+**正确的优化姿势**：
+
+```css
+/* 策略1：只给真正需要动画的元素开启GPU加速 */
+.card {
+  /* 默认不使用GPU加速 */
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  /* 只在需要动画时临时开启，动画结束后可移除 */
+  transform: translateY(-5px);
+  will-change: transform;  /* 或者使用will-change */
+}
+
+/* 策略2：使用CSS containment减少影响范围 */
+.card {
+  contain: layout style paint;  /* 告诉浏览器这个元素是"独立"的 */
+}
+
+/* 策略3：对于复杂列表，使用虚拟滚动 */
+/* 只渲染视口内的元素，DOM节点数量固定 */
+```
+
+**优化原理**：
+
+1. **精准使用GPU加速**：只在真正需要动画的元素上使用`transform`或`will-change`，避免"一刀切"地给所有元素加`translateZ(0)`。
+
+2. **CSS Containment**：`contain`属性告诉浏览器"这个元素的变化不会影响外部"，浏览器可以据此进行优化，比如：
+   - `contain: layout`：元素的布局变化不影响外部；
+   - `contain: paint`：元素的绘制不会溢出边界；
+   - `contain: style`：CSS计数器等不会影响外部。
+
+3. **虚拟滚动**：对于长列表，与其让所有元素都参与渲染管线的各个阶段，不如只渲染视口内的元素。这样无论列表多长，DOM节点数量都是固定的。
+
+<MacroMicroTaskDemo />
+
+---
+
+## 7. 第五阶段：事件循环与JavaScript执行机制
+
+### 7.1 为什么JavaScript需要"事件循环"？
+
+前面的四个阶段（DOM/CSSOM构建、渲染树构建、布局、绘制、合成）都是浏览器的工作。但网页不是静态的图片，它需要响应用户的点击、输入、滚动，需要动态更新内容。这些动态行为的指挥官，就是**JavaScript**。
+
+但JavaScript有一个"先天缺陷"：**它是单线程的**。这意味着它同一时间只能做一件事。如果JavaScript在执行一个耗时任务（比如计算100万以内的所有质数），那么这段时间里，它就不能响应用户的点击，不能更新页面，整个浏览器就会"假死"。
+
+这显然是不可接受的。为了解决这个问题，浏览器为JavaScript设计了一套"分身术"：**事件循环（Event Loop）**。
+
+### 7.2 事件循环的核心组件
+
+你可以把事件循环想象成一个快递分拣中心，有几个核心"工种"在协同工作：
+
+| 组件 | 类比 | 作用 |
+|------|------|------|
+| **Call Stack（调用栈）** | 当前正在处理的快递 | 记录当前正在执行的JavaScript代码。当一个函数被调用，它就被"压入"栈顶；执行完就"弹出"。 |
+| **Web APIs** | 外部合作仓库 | 浏览器提供的"外挂"功能，比如`setTimeout`、DOM事件、AJAX请求。这些操作不会阻塞调用栈，完成后会把回调放入任务队列。 |
+| **Callback Queue（回调队列）** | 待处理的快递架 | 存放那些已经"准备好"执行，但还在等待调用栈清空的回调函数。 |
+| **Event Loop（事件循环）** | 分拣机器人 | 不断检查调用栈是否为空。如果为空，就把回调队列中的第一个任务推入调用栈执行。 |
+
+<EventLoopDemo />
+
+### 7.3 宏任务（Macro Task）与微任务（Micro Task）
+
+早期的JavaScript只有一套任务队列（就是上面的回调队列）。但随着异步编程越来越复杂，浏览器引入了两类任务：**宏任务（Macro Task）**和**微任务（Micro Task）**。
+
+| 类型 | 常见来源 | 优先级 | 执行时机 |
+|------|---------|--------|---------|
+| **宏任务** | `setTimeout`/`setInterval`、I/O操作、UI渲染、`<script>`标签 | 低 | 每个事件循环周期执行一个 |
+| **微任务** | `Promise.then/catch/finally`、`MutationObserver`、`queueMicrotask` | 高 | 当前宏任务结束后，下一个宏任务开始前，清空所有微任务 |
+
+**执行顺序的"口诀"**：
+
+```
+1. 执行当前宏任务（比如<script>整体、setTimeout回调）
+2. 执行过程中产生的所有微任务（Promise.then等）
+   ↳ 微任务可以产生新的微任务，全部清空后才继续
+3. 如果有需要，进行UI渲染（重排/重绘）
+4. 开启下一轮事件循环，执行下一个宏任务
+```
+
+**关键理解**：
+
+微任务的设计目的是让异步操作尽可能快地执行，但又不会阻塞当前正在执行的同步代码。它比宏任务"更急"，因为宏任务之间可能要等待很长时间（比如`setTimeout`的延迟），而微任务保证在当前操作"告一段落"后立即执行。
+
+<MacroMicroTaskDemo />
+
+### 7.4 踩坑实录：Promise比setTimeout快？
+
+**坑：以为setTimeout(fn, 0)会"立即"执行**
+
+```javascript
+console.log('1. Start')
+
+setTimeout(() => {
+  console.log('2. setTimeout callback')
+}, 0)
+
+Promise.resolve().then(() => {
+  console.log('3. Promise.then')
+})
+
+console.log('4. End')
+
+// 你以为的输出顺序：
+// 1. Start
+// 4. End
+// 2. setTimeout callback  ← setTimeout(0)不是立即吗？
+// 3. Promise.then
+
+// 实际的输出顺序：
+// 1. Start
+// 4. End
+// 3. Promise.then         ← Promise.then比setTimeout先执行！
+// 2. setTimeout callback
+```
+
+**问题分析**：
+
+1. **`setTimeout(fn, 0)`的真正含义**：不是"0毫秒后立即执行"，而是"**至少**等待0毫秒后，将回调加入宏任务队列"。实际上，由于事件循环的工作机制，它通常需要等待当前调用栈清空、微任务队列清空、可能的UI渲染完成后，才能执行。
+
+2. **Promise.then的本质**：`Promise.then`注册的是微任务。根据事件循环的规则，**微任务在当前宏任务结束后立即执行，优先级高于下一个宏任务**。
+
+3. **执行流程图解**：
+
+```
+调用栈（Call Stack）          宏任务队列（Macrotask Queue）    微任务队列（Microtask Queue）
+                              [setTimeout callback]           [Promise.then callback]
+
+1. console.log('1. Start')
+   → 输出: 1. Start
+
+2. setTimeout(fn, 0)
+   → 将回调加入宏任务队列      ← [setTimeout callback]
+
+3. Promise.resolve().then()
+   → 将回调加入微任务队列                                     ← [Promise.then callback]
+
+4. console.log('4. End')
+   → 输出: 4. End
+
+5. 调用栈清空，检查微任务队列
+   → 发现Promise.then回调
+   → 执行: console.log('3. Promise.then')
+   → 输出: 3. Promise.then
+
+6. 微任务队列清空
+   → 可能需要UI渲染（如果有变化）
+
+7. 检查宏任务队列
+   → 发现setTimeout回调
+   → 执行: console.log('2. setTimeout callback')
+   → 输出: 2. setTimeout callback
+```
+
+**正确的认知**：
+
+1. **微任务比宏任务"更急"**：如果你希望某个操作在当前代码块"结束后、但UI更新前"尽快执行，用`Promise.then`或`queueMicrotask`。
+
+2. **setTimeout(0)不保证立即执行**：它至少会被延迟到当前调用栈清空、微任务队列清空之后。如果需要"尽快但不必立即"，或者需要兼容旧浏览器，可以用它。
+
+3. **requestAnimationFrame的特殊性**：`requestAnimationFrame`（rAF）也是一种宏任务，但它与渲染周期紧密绑定，通常会在下一次重绘前执行。如果你需要在"下一次UI更新前"做一些计算或准备，rAF是更好的选择。
+
+<RenderingPerformanceDemo />
+
+---
+
+## 8. 性能优化实战：让你的网页"飞"起来
+
+### 8.1 黄金法则：避免强制同步布局
+
+我们已经知道，读取布局属性（如`offsetWidth`、`clientHeight`等）会强制浏览器立即执行布局计算。最坏的情况是**交替进行读取和写入**：
+
+```javascript
+// ❌ 极坏：读写交替，导致布局抖动（Layout Thrashing）
+for (let i = 0; i < elements.length; i++) {
+  const height = elements[i].offsetHeight  // 读取 → 强制布局
+  elements[i].style.height = (height * 2) + 'px'  // 写入 → 标记需要重排
+  // 下一次循环的读取又会强制布局...恶性循环！
+}
+```
+
+**优化方案：批量读写分离**
+
+```javascript
+// ✅ 极好：先全部读取，再全部写入
+// 第一步：批量读取
+const heights = []
+for (let i = 0; i < elements.length; i++) {
+  heights.push(elements[i].offsetHeight)
+}
+
+// 第二步：批量写入
+for (let i = 0; i < elements.length; i++) {
+  elements[i].style.height = (heights[i] * 2) + 'px'
+}
+// 只需要两次布局计算（读取时一次，实际修改后一次）
+```
+
+### 8.2 使用transform和opacity做动画
+
+前面多次提到，`transform`和`opacity`是性能最好的动画属性，因为它们：**不触发重排、不触发重绘，直接触发合成阶段**！
+
+```css
+/* ❌ 坏的动画属性（触发重排） */
+.box {
+  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;
+}
+
+/* ✅ 好的动画属性（仅触发合成） */
+.box {
+  transition: transform 0.3s, opacity 0.3s;
+}
+.box:hover {
+  transform: translateX(100px) scale(1.2);  /* 移动+缩放 */
+  opacity: 0.8;
+}
+```
+
+**实用技巧：用transform模拟其他属性变化**
+
+```css
+/* 模拟从width: 0到width: auto的展开效果 */
+.accordion {
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s;
+}
+.accordion.open {
+  transform: scaleX(1);
+}
+
+/* 模拟margin-top的移动 */
+.slider {
+  transform: translateY(0);
+  transition: transform 0.3s;
+}
+.slider.down {
+  transform: translateY(100px);  /* 替代 margin-top: 100px */
+}
+```
+
+### 8.3 虚拟滚动：解决大数据列表
+
+当列表项数量达到数千甚至上万时，无论你怎么优化，DOM节点的数量本身就是一个性能瓶颈。这时，**虚拟滚动（Virtual Scrolling）**是终极解决方案。
+
+**核心思想**：只渲染视口内可见的列表项（加上少量缓冲），DOM节点数量固定，与数据总量无关。
+
+```vue
+<template>
+  <div class="virtual-list-container" ref="container" @scroll="handleScroll">
+    <!-- 占位元素，用于撑起滚动条 -->
+    <div class="phantom" :style="{ height: totalHeight + 'px' }"></div>
+
+    <!-- 实际渲染的列表项 -->
+    <div class="content" :style="{ transform: `translateY(${offsetY}px)` }">
+      <div
+        v-for="item in visibleItems"
+        :key="item.id"
+        class="list-item"
+        :style="{ height: itemHeight + 'px' }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  items: Array,        // 所有数据
+  itemHeight: { type: Number, default: 50 }  // 每项高度
+})
+
+const container = ref(null)
+const scrollTop = ref(0)
+
+// 可视区域能显示多少项
+const visibleCount = computed(() => {
+  if (!container.value) return 10
+  return Math.ceil(container.value.clientHeight / props.itemHeight)
+})
+
+// 缓冲数量（上下各多渲染几项，避免快速滚动时白屏）
+const buffer = 5
+
+// 起始索引
+const startIndex = computed(() => {
+  return Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - buffer)
+})
+
+// 结束索引
+const endIndex = computed(() => {
+  return Math.min(
+    props.items.length,
+    startIndex.value + visibleCount.value + buffer * 2
+  )
+})
+
+// 当前可视的数据
+const visibleItems = computed(() => {
+  return props.items.slice(startIndex.value, endIndex.value)
+})
+
+// 总高度（用于撑起滚动条）
+const totalHeight = computed(() => {
+  return props.items.length * props.itemHeight
+})
+
+// 偏移量（让可视内容位于正确的位置）
+const offsetY = computed(() => {
+  return startIndex.value * props.itemHeight
+})
+
+// 滚动事件处理
+const handleScroll = () => {
+  scrollTop.value = container.value.scrollTop
+}
+</script>
+
+<style scoped>
+.virtual-list-container {
+  position: relative;
+  height: 400px;  /* 固定高度 */
+  overflow-y: auto;
+}
+
+.phantom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+**虚拟滚动的核心优势**：
+
+| 场景 | 传统列表（10000项） | 虚拟滚动（10000项） |
+|------|-------------------|-------------------|
+| DOM节点数 | 10000+ | 20-30（可视区域+缓冲） |
+| 内存占用 | 高（每个节点都占内存） | 低（节点数固定） |
+| 初始渲染时间 | 慢（要创建所有节点） | 快（只创建少量节点） |
+| 滚动性能 | 卡（大量节点参与重排/重绘） | 流畅（仅数据更新，DOM复用） |
+| 实现复杂度 | 简单 | 较复杂 |
+
+**适用场景**：
+- 数据量大的列表（通常>100条就有优化价值）
+- 列表项高度固定或可以预估
+- 对滚动性能有较高要求
+
+**不适用场景**：
+- 数据量很小（<50条）
+- 列表项高度极不规律且无法预估
+- 需要全量DOM操作（如全选、全量导出等）
+
+---
+
+## 9. 总结：渲染管线优化的本质
+
+通过本文的学习，我们可以得出以下核心结论：
+
+**从实践来看**：不是优化越多越好，而是优化越"对位"越好。理解浏览器的渲染管线，才能知道在哪里用力、在哪里放手。
+
+**从成本视角看**：
+- 大部分性能浪费来自对布局属性的**频繁读写交替**，需要通过读写分离、批量处理来解决；
+- 复杂的动画效果如果触发了重排和重绘，往往源于使用了"错误的属性"，需要通过`transform`和`opacity`来解决；
+- 面对大量数据的列表渲染，单纯依靠虚拟DOM的diff算法已经不够，必须结合**虚拟滚动**等技术。
+
+目标是：在给定的浏览器和硬件条件下，让每一个渲染步骤的投入都具备明确的性能收益。
+
+---
+
+## 10. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **DOM** | 文档对象模型 | Document Object Model，浏览器将HTML文档解析后形成的树形结构，JavaScript可以通过DOM API操作页面元素。 |
+| **CSSOM** | CSS对象模型 | CSS Object Model，浏览器将CSS解析后形成的树形结构，与DOM结合用于计算最终样式。 |
+| **Render Tree** | 渲染树 | 由DOM树和CSSOM树合并而成，只包含可见节点，用于后续的布局计算和绘制。 |
+| **Layout** | 布局 | 计算渲染树中每个节点的几何信息（位置、大小）的过程，也称为Reflow（重排）。 |
+| **Reflow** | 重排/回流 | 当元素的尺寸、位置等几何属性发生变化时，浏览器需要重新计算布局的过程。 |
+| **Paint** | 绘制/重绘 | 将布局计算后的元素样式（颜色、背景、边框等）绘制到屏幕上的过程。 |
+| **Repaint** | 重绘 | 当元素的外观属性（如颜色、背景）变化但不影响几何属性时，触发的绘制更新。 |
+| **Composite** | 合成 | 将多个绘制层（Layer）合并为最终屏幕图像的过程，通常在GPU上执行。 |
+| **Layer** | 层/合成层 | 浏览器为了优化渲染而创建的独立绘制表面，可以单独变换和合成。 |
+| **Event Loop** | 事件循环 | JavaScript的异步执行机制，负责调度宏任务和微任务的执行。 |
+| **Call Stack** | 调用栈 | 记录当前正在执行的JavaScript函数的数据结构。 |
+| **Macro Task** | 宏任务 | 事件循环中优先级较低的任务类型，如setTimeout、setInterval、I/O操作等。 |
+| **Micro Task** | 微任务 | 事件循环中优先级较高的任务类型，如Promise.then、MutationObserver等。 |
+| **Forced Synchronous Layout** | 强制同步布局 | 在JavaScript中交替读取和写入布局属性，导致浏览器被迫立即执行布局计算的性能问题。 |
+| **Layout Thrashing** | 布局抖动 | 频繁的强制同步布局导致的性能急剧下降现象。 |
+| **Virtual Scrolling** | 虚拟滚动 | 只渲染视口内可见列表项的技术，用于优化大数据列表的性能。 |
+| **RAF (requestAnimationFrame)** | 请求动画帧 | 浏览器提供的API，用于在下一次重绘前执行动画相关的JavaScript代码。 |
+| **RAIL** | 响应、动画、空闲、加载 | Google提出的性能模型，关注响应（Response）、动画（Animation）、空闲（Idle）、加载（Load）四个维度。 |
+| **Critical Rendering Path** | 关键渲染路径 | 浏览器将HTML、CSS、JavaScript转换为屏幕上像素所经历的一系列步骤。 |
+| **FP (First Paint)** | 首次绘制 | 浏览器首次将像素绘制到屏幕上的时间点。 |
+| **FCP (First Contentful Paint)** | 首次内容绘制 | 浏览器首次绘制来自DOM的内容（文本、图片等）的时间点。 |
+| **LCP (Largest Contentful Paint)** | 最大内容绘制 | 浏览器绘制视口内最大内容元素的时间点，是Core Web Vitals指标之一。 |
+| **TTI (Time to Interactive)** | 可交互时间 | 页面完全可交互（主线程空闲）的时间点。 |
+| **TBT (Total Blocking Time)** | 总阻塞时间 | FCP到TTI之间，主线程被阻塞超过50ms的总时间。 |
+| **CLS (Cumulative Layout Shift)** | 累积布局偏移 | 页面生命周期内发生的所有意外布局偏移的分数总和，是Core Web Vitals指标之一。 |
diff --git a/docs/zh-cn/appendix/cache-design.md b/docs/zh-cn/appendix/cache-design.md
index f881d0c..2206bdc 100644
--- a/docs/zh-cn/appendix/cache-design.md
+++ b/docs/zh-cn/appendix/cache-design.md
@@ -1,1000 +1,681 @@
-# 系统缓存设计：从原理到实战 (Interactive Guide to Caching)
+# 缓存系统设计：从淘宝商品详情页看高性能架构
 
-> 💡 **学习指南**：本章节带你深入理解后端系统的"加速器"——缓存。我们将从最基础的"为什么要缓存"讲起，一步步掌握多级缓存架构、缓存模式、以及实战中的坑与解决方案。
-
-<CacheArchitectureDemo />
-
-## 0. 引言：看不见的"加速器"
-
-你有没有想过这些问题：
-
-- 刷朋友圈时，为什么几秒钟就能加载出几百张图片？
-- 查询订单时，为什么瞬间就能看到几个月前的数据？
-- 刷新短视频时，为什么视频几乎瞬间就能播放？
-
-这背后都有一个功臣：**缓存 (Cache)**。
-
-### 0.1 什么是缓存？用生活化的例子理解
-
-想象一下你在家里的场景：
-
-**场景 1：没有缓存的日子**
-
-每次想喝水，你都要：
-
-1. 走到厨房（相当于访问数据库）
-2. 打开柜子
-3. 拿出水壶
-4. 倒水
-5. 回到客厅
-
-即使你一小时内要喝 10 次水，每次都要重复这个过程。很累对吧？
-
-**场景 2：有了缓存**
-
-你在客厅的茶几上放了一个水杯（这就是缓存！）：
-
-- 第一次喝水：你还是要去厨房倒水，但把水杯留在茶几上
-- 之后每次喝水：直接拿起茶几上的水杯喝就行
-
-**这就是缓存的核心思想**：把常用的东西放在触手可及的地方，避免每次都"跑远路"。
-
-回到计算机世界：
-
-| 生活中的例子                   | 计算机中的对应                                     |
-| :----------------------------- | :------------------------------------------------- |
-| **茶几上的水杯**               | **内存缓存**（速度快，但容量小）                   |
-| **厨房的水壶**                 | **数据库**（速度慢，但容量大）                     |
-| **"我刚才用过这个水杯"**       | **时间局部性**（刚用过的数据，很可能还会用）       |
-| **"把这些常用的都放在茶几上"** | **空间局部性**（用过的数据附近的数据，也可能用到） |
-
-### 0.2 为什么要缓存？
-
-只有一个理由：**快**。
-
-但有多快呢？我们用个形象的比喻：
-
-| 存储介质         | 访问时间  | 生活类比                              | 能做什么         |
-| :--------------- | :-------- | :------------------------------------ | :--------------- |
-| **L1 CPU 缓存**  | ~1 纳秒   | 眨一下眼睛（1/10秒）的 **十亿分之一** | CPU 执行一条指令 |
-| **内存 (Redis)** | ~100 纳秒 | 眨一下眼睛的 **千万分之一**           | 存储热点数据     |
-| **SSD 数据库**   | ~1 毫秒   | 眨一下眼睛                            | 读写文件         |
-| **HDD 数据库**   | ~10 毫秒  | 眨 10 下眼睛                          | 传统硬盘操作     |
-
-**换个角度理解**：
-
-- 从内存读数据 = 从茶几拿水杯
-- 从 SSD 读数据 = 从厨房拿水壶
-- 从 HDD 读数据 = 从楼下便利店买水
-
-**关键点**：缓存的本质是**用空间换时间**——多准备几份"副本"放在快速的地方，节省每次都去"慢速地方"取数据的时间。
-
-### 0.3 缓存的真实案例
-
-**案例 1：淘宝商品详情页**
-
-当你打开一个商品页面时：
-
-- **商品基本信息**（价格、标题）：从 Redis 缓存读取（~5 毫秒）
-- **商品大图**：从 CDN 缓存读取（~20 毫秒）
-- **用户浏览历史**：从本地缓存读取（~1 毫秒）
-
-如果这些都不用缓存，全部查数据库：
-
-- 查询时间可能从 **5 毫秒** 变成 **200 毫秒**
-- 数据库要同时处理几百万人的请求，直接"累垮"
-
-**案例 2：微信朋友圈**
-
-你刷朋友圈时：
-
-- **图片**：之前看过的图片，都在手机本地缓存里
-- **好友列表**：第一次加载后缓存在内存里
-- **点赞数据**：热点数据在 Redis 缓存中
-
-没有缓存的话：每次刷新都要重新下载所有内容，流量和速度都受不了。
+> 💡 **学习指南**：为什么用户点击淘宝商品详情页只需要 50 毫秒，而直接查数据库要 500 毫秒？这背后是一个精心设计的缓存架构在发挥作用。本章节将带你深入理解缓存的本质、模式与实战技巧。
 
 ---
 
-## 🗺️ 全局观：缓存知识地图
+## 0. 引言：为什么系统越来越慢？
 
-在深入细节之前，让我们先看看缓存设计的"全貌"。就像旅游前先看地图一样，这样你不会迷路。
+### 0.1 一个真实的性能危机
 
-### 核心目标（一句话概括）
+2020 年双十一，某电商平台的数据库 CPU 使用率突然飙到 95%，订单查询响应时间从 100ms 暴涨到 8 秒。问题根源很快查明：一个新上线的促销页面，每次加载都要查询 50+ 次数据库，且没有缓存。
 
-**让数据访问更快、系统更强，同时保证数据不出错。**
+**核心问题暴露**——当流量激增时，数据库成为整个系统的瓶颈。
 
-### 知识体系地图
+| 操作类型 | 响应时间 | 单节点 QPS | 瓶颈分析 |
+| :------- | :------- | :--------- | :------- |
+| L1 Cache 读取 | ~0.5 ns | 数十亿级 | CPU 内置，无瓶颈 |
+| 内存读取 | ~100 ns | 百万级 | 内存带宽 |
+| Redis 查询 | ~1 ms | 10万级 | 网络延迟 |
+| MySQL 查询 | ~10 ms | 数千级 | 磁盘 IO |
+| 跨机房查询 | ~100 ms | 百级 | 网络距离 |
+
+**性能差距触目惊心**：内存操作比 MySQL 查询快 100,000 倍。
+
+### 0.2 缓存的本质定义
+
+缓存不是简单地把数据存到内存，而是一种**基于局部性原理的数据访问优化技术**。
+
+**严格定义**：缓存是位于计算单元与慢速存储之间的高速数据存储层，通过存储最近或频繁访问数据的副本，减少访问延迟、提升系统吞吐量。
+
+**与原始存储的核心区别**：
+- 原始存储（数据库）：容量大、持久化、查询慢
+- 缓存：容量有限、易失性、查询极快
+- 缓存内容永远是原始数据的**副本**，而非主数据
+
+### 0.3 淘宝商品详情页的缓存实战
+
+让我们拆解一个真实的电商商品详情页，看看缓存是如何层层发挥作用的。
+
+**场景**：用户打开商品 ID 为 12345 的详情页。
+
+**访问链路**（从上到下，层层穿透）：
+
+| 层级 | 存储位置 | 查询耗时 | 数据示例 | 命中率 |
+| :--- | :------- | :------- | :------- | :----- |
+| L1 | 浏览器本地缓存 | ~0ms | 静态图片、CSS、JS | 95%+ |
+| L2 | CDN 边缘节点 | ~20ms | 商品主图、详情图 | 90%+ |
+| L3 | Nginx 本地缓存 | ~1ms | 商品基础信息 JSON | 80%+ |
+| L4 | 应用进程本地缓存 (Caffeine) | ~0.1ms | 热销商品详情 | 90%+ |
+| L5 | Redis 集群 | ~2ms | 所有商品信息、库存 | 99%+ |
+| L6 | MySQL 主从集群 | ~10ms | 全量商品数据 | 100% |
+
+**最终效果**：
+- 95% 的请求在前 4 层就被拦截，根本不会到达数据库
+- 整体响应时间：P99 < 100ms
+- 数据库 QPS 从理论上的 100万+ 下降到实际 5000 以下
+
+<CacheArchitectureOverview />
+
+---
+
+## 1. 缓存的底层原理：局部性
+
+缓存之所以有效，根植于计算机科学中一个被反复验证的观察：**局部性原理**。
+
+### 1.1 时间局部性 (Temporal Locality)
+
+**定义**：如果一个数据项被访问，那么在不久的将来它很可能再次被访问。
+
+**技术解释**：程序在执行过程中，往往会对某些变量或数据对象进行反复读取或修改。这是因为：
+- 循环结构会重复访问相同的计数器变量
+- 函数调用会重复访问相同的参数和局部变量
+- 热点数据（如用户会话、配置项）会被频繁查询
+
+**实例**：用户登录后，系统需要反复查询该用户的权限信息。第一次查询后将结果缓存，后续几十次请求都可以直接从缓存获取，直到用户登出或权限变更。
+
+### 1.2 空间局部性 (Spatial Locality)
+
+**定义**：如果一个数据项被访问，那么与它地址相邻的数据项也很可能被访问。
+
+**技术解释**：计算机存储和访问数据的方式天然具有连续性：
+- 内存以缓存行（通常 64 字节）为单位加载数据
+- 数组、列表等数据结构在内存中连续存储
+- 磁盘读取以块（通常 4KB）为单位
+- 业务数据往往按时间、分类等维度聚簇存储
+
+**实例**：加载商品列表时，如果缓存了第 1-10 条商品数据，当用户翻页到第 11-20 条时，这些相邻的数据很可能已经被批量加载到缓存中，实现快速响应。
+
+### 1.3 缓存的生命周期
+
+一个缓存条目从创建到销毁，经历完整的生命周期：
 
 ```
-缓存设计
-│
-├─ 📦 基础概念（为什么需要缓存？）
-│   ├─ 局部性原理（时间局部性、空间局部性）
-│   ├─ 缓存生命周期（写入 → 命中 → 过期 → 淘汰）
-│   └─ 性能对比（内存 vs 数据库：快 100 倍）
-│
-├─ 🏗️ 架构选型（用什么缓存？）
-│   ├─ 本地缓存（单机快，但容量小）
-│   ├─ 分布式缓存（容量大，但稍慢）
-│   └─ 多级缓存（组合使用，最佳方案）
-│       ├─ 浏览器缓存（用户本地）
-│       ├─ CDN 缓存（离用户近）
-│       ├─ 应用本地缓存（极速）
-│       ├─ Redis 缓存（高容量）
-│       └─ 数据库（兜底）
-│
-├─ 🎯 设计模式（怎么用缓存？）
-│   ├─ Cache-Aside（最常用，手动控制）
-│   ├─ Read-Through（缓存自己加载）
-│   ├─ Write-Through（同步写缓存和数据库）
-│   └─ Write-Behind（异步写，最快但可能丢数据）
-│
-├─ ⚠️ 常见问题（缓存会出什么错？）
-│   ├─ 缓存穿透（查不存在数据，数据库压力大）
-│   ├─ 缓存击穿（热点数据过期，瞬间高并发）
-│   └─ 缓存雪崩（大量数据同时过期）
-│
-├─ 🔒 一致性保证（缓存和数据库不一致怎么办？）
-│   ├─ 更新策略（先更数据库，再删缓存）
-│   ├─ 延迟双删（极致一致性）
-│   └─ Binlog 订阅（异步解耦）
-│
-└─ 🛠️ 实战技巧（工程中怎么做？）
-    ├─ 布隆过滤器（快速判断数据是否存在）
-    ├─ 分布式锁（防止缓存击穿）
-    ├─ 随机 TTL（防止雪崩）
-    ├─ 缓存预热（启动时加载热点数据）
-    └─ 监控调优（命中率要 > 90%）
+写入 (Write) → 命中/未命中 (Hit/Miss) → 过期 (Expiration) → 淘汰 (Eviction)
 ```
 
-### 学习路径建议（0基础小白版）
+**写入策略**：
+- **主动写入**：系统启动时预加载热点数据（缓存预热）
+- **懒加载**：首次访问时从数据库加载并写入缓存
+- **异步更新**：后台线程定期刷新即将过期的数据
 
-**第一步：理解核心概念**（1-2 天）
+**过期策略**：
+- **TTL (Time To Live)**：设置固定生存时间，到期自动失效
+- **滑动过期**：每次访问后重置过期时间
+- **绝对过期**：指定具体过期时间点
 
-- 理解"为什么需要缓存"（茶几 vs 厨房的例子）
-- 记住性能数据：内存比数据库快 100 倍
-- 了解缓存的生命周期（写入 → 命中 → 过期 → 淘汰）
-
-**第二步：掌握最常用的模式**（2-3 天）
-
-- 重点学习 **Cache-Aside 模式**（90% 的场景都用这个）
-- 动手写代码：用 Redis 做简单的键值缓存
-- 理解"为什么删缓存而不是更新缓存"
-
-**第三步：学习多级缓存**（3-5 天）
-
-- 理解为什么需要"多层防御"（浏览器 → CDN → 本地 → Redis → 数据库）
-- 掌握每一层的用途和特点
-- 动手实践：给自己的项目加一层缓存
-
-**第四步：解决常见问题**（1 周）
-
-- 理解缓存三大问题（穿透、击穿、雪崩）
-- 学习解决方案（布隆过滤器、分布式锁、随机 TTL）
-- 实战演练：模拟高并发场景，看缓存如何保护数据库
-
-**第五步：深入一致性**（1-2 周）
-
-- 理解缓存和数据库可能不一致的场景
-- 掌握"先更数据库，再删缓存"的最佳实践
-- 进阶：学习 Binlog 订阅方案
-
-**第六步：实战项目**（2-4 周）
-
-- 设计一个完整的缓存系统（如商品详情页缓存）
-- 搭建监控系统，实时查看缓存命中率
-- 压测验证：看看性能提升了多少倍
-
-### 关键指标（学完后你要能回答）
-
-- 缓存的**命中率**是多少？（优秀：> 90%）
-- 缓存能**提升多少性能**？（10-100 倍）
-- 如何解决缓存**三大问题**？（穿透、击穿、雪崩）
-- 缓存和数据库**不一致**怎么办？（先更库，再删缓存）
-- **多级缓存**的顺序是什么？（浏览器 → CDN → 本地 → Redis → 数据库）
+**淘汰策略**（缓存满时）：
+- **LRU (Least Recently Used)**：淘汰最近最少使用（最常用）
+- **LFU (Least Frequently Used)**：淘汰访问频率最低
+- **FIFO (First In First Out)**：先进先出
+- **Random**：随机淘汰
 
 ---
 
-## 1. 第一步：理解缓存的本质
-
-### 1.1 局部性原理 (Locality Principle)
-
-缓存之所以有效，是因为两个神奇的观察：
-
-1.  **时间局部性 (Temporal Locality)**：
-    - 如果你现在访问了某个数据，未来很可能**再次访问它**。
-    - _例子_：一个用户登录后，接下来几分钟的每次请求都需要查询他的用户信息。
-
-2.  **空间局部ity (Spatial Locality)**：
-    - 如果你访问了某个数据，很可能**访问它附近的数据**。
-    - _例子_：浏览商品列表时，通常会翻到下一页（相邻的商品）。
-
-<LocalityPrincipleDemo />
-
-### 1.2 缓存的生命周期
-
-一个缓存条目（Cache Entry）的一生：
-
-1.  **写入 (Write)**：首次访问数据时，从数据库读取并存入缓存。
-2.  **命中 (Hit)**：后续访问直接从缓存返回（快！）。
-3.  **过期 (Expiration)**：超过设定时间（TTL），标记为过期。
-4.  **淘汰 (Eviction)**：缓存满了，需要腾空间给新数据。
-
-<CacheLifecycleDemo />
-
-**关键点**：好的缓存设计需要平衡**命中率**（Hit Ratio）和**内存占用**。
-
----
-
-## 2. 单机缓存 vs 分布式缓存
+## 2. 缓存架构选型
 
 ### 2.1 本地缓存 (Local Cache)
 
-缓存和应用在同一个进程里。
+**定义**：与应用进程共享内存空间的缓存，无需网络访问。
 
-- **优点**：
-  - 极快（没有网络开销）。
-  - 简单（就是一个 Map/Dictionary）。
-- **缺点**：
-  - 容量有限（受限于单机内存）。
-  - 不一致（每个实例的缓存独立）。
-- **典型实现**：
-  - Java: Caffeine、Guava Cache
-  - Go: bigcache、ristretto
-  - Python: functools.lru_cache
+**技术特点**：
+- **访问延迟**：~100 纳秒（纯内存访问，无网络开销）
+- **容量限制**：受限于单机内存（通常几百 MB 到几 GB）
+- **一致性挑战**：多实例部署时，各节点缓存独立，数据可能不一致
+- **进程绑定**：应用重启，缓存丢失
 
-```java
-// Java Caffeine 示例
-Cache<String, User> userCache = Caffeine.newBuilder()
-    .maximumSize(10_000)           // 最多存 1 万条
-    .expireAfterWrite(10, TimeUnit.MINUTES)  // 10 分钟过期
-    .build();
+**主流实现**：
 
-// 使用
-User user = userCache.get(userId, key -> {
-    // 缓存没命中，从数据库查
-    return database.getUserById(key);
-});
-```
+| 语言 | 库/框架 | 核心特性 |
+| :--- | :------ | :------- |
+| Java | Caffeine | 高性能，W-TinyLFU 淘汰算法，近乎完美的命中率 |
+| Java | Guava Cache | 功能全面，但性能略逊于 Caffeine |
+| Go | Ristretto | 高性能，高命中率，支持过期 |
+| Go | BigCache | 专为大量 entry 设计，零 GC 压力 |
+| Python | cachetools | 多种缓存策略，TTL 支持 |
 
 ### 2.2 分布式缓存 (Distributed Cache)
 
-缓存是一个独立的服务，应用通过网络访问。
+**定义**：作为独立服务部署的缓存系统，通过网络协议访问，多实例共享。
 
-- **优点**：
-  - 容量巨大（可以集群扩展）。
-  - 一致性好（所有实例共享同一份缓存）。
-- **缺点**：
-  - 有网络延迟（通常 1-5 ms）。
-  - 需要额外维护缓存服务。
-- **典型实现**：**Redis**、Memcached
+**技术特点**：
+- **访问延迟**：~1-5 毫秒（网络开销）
+- **容量扩展**：支持集群部署，容量可达数百 GB 甚至 TB
+- **一致性保证**：所有应用实例访问同一份数据，天然一致
+- **高可用**：支持主从复制、哨兵、集群模式
 
-```python
-# Python + Redis 示例
-import redis
+**主流实现对比**：
 
-r = redis.Redis(host='localhost', port=6379)
+| 特性 | Redis | Memcached |
+| :--- | :---- | :---------- |
+| 数据结构 | String, Hash, List, Set, ZSet, Stream 等 | 仅 String |
+| 持久化 | RDB, AOF 支持 | 不支持 |
+| 集群 | Redis Cluster, Codis | 客户端分片 |
+| 单线程/多线程 | 单线程（命令执行）| 多线程 |
+| 内存管理 | 支持内存淘汰策略 | LRU 淘汰 |
+| 适用场景 | 复杂数据结构、持久化需求 | 纯缓存、简单 KV |
 
-def get_user(user_id):
-    # 先查缓存
-    cached = r.get(f'user:{user_id}')
-    if cached:
-        return json.loads(cached)
+### 2.3 多级缓存架构
 
-    # 缓存未命中，查数据库
-    user = db.query(f'SELECT * FROM users WHERE id = {user_id}')
+在真实的生产环境中，单一缓存层往往无法满足性能和成本的双重需求。多级缓存架构通过在不同层级部署缓存，形成层层防护，最大化性能收益。
 
-    # 写入缓存，过期时间 10 分钟
-    r.setex(f'user:{user_id}', 600, json.dumps(user))
-    return user
+**典型多级缓存架构**：
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        用户请求                                 │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓
+┌─────────────────────────────────────────────────────────────────┐
+│  L1: 浏览器缓存 (Browser Cache)                                 │
+│  - 存储：静态资源 (CSS/JS/图片)                                  │
+│  - 控制：Cache-Control, ETag, Last-Modified                     │
+│  - 延迟：~0ms (本地磁盘/内存)                                   │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓ (未命中)
+┌─────────────────────────────────────────────────────────────────┐
+│  L2: CDN 缓存 (Content Delivery Network)                        │
+│  - 存储：静态资源、部分 API 响应                                │
+│  - 节点：全球分布，就近访问                                     │
+│  - 延迟：~20-50ms                                               │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓ (未命中)
+┌─────────────────────────────────────────────────────────────────┐
+│  L3: 反向代理缓存 (Nginx/Varnish)                               │
+│  - 存储：完整 HTTP 响应、聚合数据                               │
+│  - 延迟：~1-5ms                                                 │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓ (未命中)
+┌─────────────────────────────────────────────────────────────────┐
+│  L4: 应用本地缓存 (Caffeine/Guava)                              │
+│  - 存储：热点对象、配置、用户会话                               │
+│  - 延迟：~0.1ms                                                 │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓ (未命中)
+┌─────────────────────────────────────────────────────────────────┐
+│  L5: 分布式缓存 (Redis Cluster)                                 │
+│  - 存储：业务数据、会话、计算结果                               │
+│  - 延迟：~1-5ms                                                 │
+└─────────────────────────┬───────────────────────────────────────┘
+                          ↓ (未命中)
+┌─────────────────────────────────────────────────────────────────┐
+│  L6: 数据库 (MySQL/PostgreSQL)                                  │
+│  - 存储：全量数据                                               │
+│  - 延迟：~10-50ms                                               │
+└─────────────────────────────────────────────────────────────────┘
 ```
 
-<LocalVsDistributedCacheDemo />
-
-**关键点**：现代系统通常**组合使用**——本地缓存做第一道防线，分布式缓存做第二道防线。
+<CacheHierarchyDemo />
 
 ---
 
-## 3. 多级缓存架构 (Multi-Level Caching)
+## 3. 缓存设计模式
 
-真实的系统通常是"多层防御"：
+当引入缓存层后，应用程序需要确定如何与缓存和数据库交互。业界形成了四种经典的设计模式，每种模式在一致性、性能和复杂度之间做出不同的权衡。
 
+### 3.1 Cache-Aside (旁路缓存) — 最常用
+
+**模式定义**：应用程序负责直接管理缓存，显式地从缓存读取、写入数据。缓存对数据库完全透明，不知道数据库的存在。
+
+**读取流程**：
 ```
-用户请求
-    ↓
-浏览器缓存 (Cache-Control)
-    ↓ (未命中)
-CDN 缓存 (静态资源)
-    ↓ (未命中)
-负载均衡器
-    ↓
-应用服务器 (本地缓存: Caffeine)
-    ↓ (未命中)
-分布式缓存 (Redis)
-    ↓ (未命中)
-数据库 (MySQL / PostgreSQL)
+应用程序 ─┬─→ 查询缓存 ──→ 命中？─┬─是→ 返回数据
+          │                      │
+          │                      └─否→ 查询数据库
+          │                             ↓
+          │                         写入缓存
+          │                             ↓
+          └──────────────────────── 返回数据
 ```
 
-### 3.1 每一层的特点
-
-| 层级           | 存储介质   | 典型容量 | 响应时间 | 适用场景                   |
-| :------------- | :--------- | :------- | :------- | :------------------------- |
-| **浏览器缓存** | 用户磁盘   | ~100 MB  | ~0 ms    | 静态资源（图片、CSS、JS）  |
-| **CDN 缓存**   | 边缘节点   | TB 级    | ~10 ms   | 静态文件、API 响应         |
-| **本地缓存**   | 应用内存   | ~1 GB    | ~1 ms    | 极热点数据（配置、白名单） |
-| **Redis 缓存** | Redis 集群 | ~100 GB  | ~5 ms    | 热点数据（用户信息、商品） |
-| **数据库**     | SSD/HDD    | TB ~ PB  | ~50 ms   | 持久化存储                 |
-
-<MultiLevelCacheDemo />
-
-**关键点**：每一层都是上一层的"保护伞"，逐级过滤请求，最终打到数据库的流量可能只有原来的 **1%**。
-
----
-
-## 4. 缓存模式 (Caching Patterns)
-
-### 4.0 为什么需要缓存模式？
-
-**问题场景**：
-
-当有大量请求访问内部系统时，如果每个请求都需要操作数据库（例如查询操作），对于那种基本不变化的数据来说，每次都去数据库查询会极大地消耗性能。
-
-尤其是在海量数据操作时，如果都从 DB 加载，这是在挑战用户的耐性。
-
-**生活中的例子**：
-
-想象你要去小区里了解某个人在不在家。当没有通讯工具时：
-
-- **没有缓存**：每次都要经过小区保安，再到具体单元楼，最终到这家门口，才知道在不在家。
-- **有缓存**：如果换一个优秀的保安，他知道当前小区特定的家里是否有人，直接问保安就知道了，无需跑冤枉路。
-
-这个"优秀保安"就是**缓存**。每次访问时先访问缓存，就能极大提高访问效率和系统性能。
-
-### 4.1 Cache-Aside (旁路缓存) ⭐ 最常用
-
-最常用的模式，由**应用代码**直接控制缓存。
-
-#### 读取流程
-
+**更新流程**（关键！）：
 ```
-1. 应用读取缓存
-   ↓ 命中？
-   ├─ 是 → 直接返回数据
-   └─ 否 → 读取数据库
-            ↓
-         将数据写入缓存
-            ↓
-         返回数据
+应用程序 ──→ 更新数据库 ──→ 删除缓存（不是更新缓存！）
 ```
 
-**代码示例**：
+### 3.2 Read-Through (读穿透)
 
-```python
-def get_user(user_id):
-    # 1. 先查缓存
-    cached = cache.get(f'user:{user_id}')
-    if cached:
-        return cached
+**模式定义**：应用程序只与缓存交互，缓存层负责在缺失时自动从数据库加载数据。对应用程序完全透明。
 
-    # 2. 缓存未命中，查数据库
-    user = db.query(f'SELECT * FROM users WHERE id = {user_id}')
-
-    # 3. 将数据写入缓存
-    if user:
-        cache.set(f'user:{user_id}', user, ttl=600)
-
-    return user
+**工作原理**：
+```
+应用程序 ──→ 查询缓存 ──→ 未命中 ──→ 缓存服务自动加载数据库数据
+                              ↓
+                           返回给应用
 ```
 
-#### 更新流程
+**优缺点对比**：
 
+| 维度 | Read-Through | Cache-Aside |
+| :--- | :----------- | :------------ |
+| 代码复杂度 | 低（业务代码无缓存逻辑） | 中（显式管理缓存） |
+| 灵活性 | 低（受限于缓存库实现） | 高（完全控制） |
+| 首次加载延迟 | 较高（穿透到库） | 可控（可预热） |
+| 适用场景 | 标准化缓存需求 | 复杂业务逻辑 |
+
+### 3.3 Write-Through (写穿透)
+
+**模式定义**：应用程序写入缓存，缓存服务同步将数据写入数据库，确保缓存和数据库强一致。
+
+**工作原理**：
 ```
-1. 应用更新数据库
-   ↓
-2. 删除缓存（不是更新！）
+应用程序 ──→ 写入缓存 ──→ 缓存服务同步写入数据库 ──→ 返回成功
 ```
 
-**代码示例**：
-
-```python
-def update_user(user_id, new_data):
-    # 1. 更新数据库
-    db.execute('UPDATE users SET ... WHERE id = ?', user_id)
-
-    # 2. 删除缓存（而不是更新）
-    cache.delete(f'user:{user_id}')
-
-    # 为什么删除而不是更新？
-    # 因为并发更新时，更新缓存的顺序可能和数据库不一致！
-```
-
-**关键点**：
-
-- ✅ **删除而非更新**：避免并发写入导致缓存和数据库不一致
-- ✅ **延迟双删**：为了极致一致性，可以在更新前再删一次
-- ✅ **最灵活**：应用代码完全控制缓存逻辑
-
-**常见问题：会不会有脏数据？**
-
-场景：一个查询操作发现缓存没数据，准备去查 DB。此时另一个写操作更新了 DB 并删除了缓存，第一个操作从 DB 拿到的还是老数据并写入缓存。
-
-**解答**：这种情况出现的概率极低！
-
-- 写操作需要锁表
-- 数据库写入比读取慢
-- 同等条件下，查询操作先返回，写操作再返回
-
-### 4.2 Read-Through (读穿透)
-
-由**缓存服务**负责与数据库交互，应用代码只和缓存打交道。
-
-#### 工作原理
-
-```
-应用请求 → 缓存服务
-            ↓
-         缓存命中？
-         ├─ 是 → 直接返回
-         └─ 否 → 缓存服务自己加载 DB 数据
-                  ↓
-               更新缓存
-                  ↓
-               返回数据
-```
-
-**代码示例**：
-
-```python
-# 应用代码只需要
-user = cache.get(user_id)  # 缓存库自动处理数据库查询
-
-# 不需要手写：
-# if not cached:
-#     user = db.query(...)
-#     cache.set(user_id, user)
-```
-
-**对比 Cache-Aside**：
-
-| 特性           | Cache-Aside      | Read-Through             |
-| :------------- | :--------------- | :----------------------- |
-| **谁负责加载** | 应用代码         | 缓存服务                 |
-| **代码复杂度** | 需要手写缓存逻辑 | 简洁，只需调用 get       |
-| **灵活性**     | 高（完全控制）   | 低（依赖缓存库实现）     |
-| **适用场景**   | 通用场景         | 读多写少，缓存逻辑标准化 |
-
-**优点**：
-
-- 代码简洁，缓存逻辑对业务透明
-- 统一的缓存加载策略
-
-**缺点**：
-
-- 灵活性差，缓存库和数据库强绑定
-- 需要特殊的缓存库支持
-
-### 4.3 Write-Through (写穿透)
-
-更新时**同时**写缓存和数据库，由缓存服务负责同步。
-
-#### 工作原理
-
-```
-应用写请求 → 缓存服务
-              ↓
-           更新缓存
-              ↓
-           同步更新数据库
-              ↓
-           返回成功
-```
-
-**代码示例**：
-
-```python
-# 应用代码只需要
-cache.set(user_id, user)  # 缓存库自动同步到数据库
-
-# 不需要手写：
-# db.update(user)
-# cache.set(user_id, user)
-```
-
-**关键点**：
-
-- 缓存和数据库**同步更新**，强一致性
-- 写入性能受数据库影响（相对较慢）
-
-**对比 Cache-Aside**：
-
-| 特性         | Cache-Aside        | Write-Through   |
-| :----------- | :----------------- | :-------------- |
-| **写操作**   | 先写 DB，再删缓存  | 同时写缓存和 DB |
-| **一致性**   | 最终一致           | 强一致          |
-| **写入性能** | 高（异步删缓存）   | 低（同步写 DB） |
-| **缓存更新** | 懒加载（读时更新） | 主动更新        |
-
-**优点**：
-
-- 数据一致性最好
-- 读取时总能命中缓存
-
-**缺点**：
-
-- 写入延迟高
-- 需要特殊的缓存库支持
-
-### 4.4 Write-Behind (异步写回) ⚡ 最快
-
-更新时**只写缓存**，缓存服务异步批量更新数据库。
-
-#### 工作原理
-
-```
-应用写请求 → 缓存服务
-              ↓
-           更新缓存（立即返回）
-              ↓
-           ⚡ 异步批量写数据库（后台进行）
-```
-
-**代码示例**：
-
-```python
-# 应用代码只需要
-cache.set(user_id, user)  # 立即返回，不等待数据库
-
-# 缓存服务会在后台批量写入：
-# while True:
-#     batch = cache.get_dirty_entries()
-#     db.batch_update(batch)
-```
-
-**性能对比**：
-
-| 模式              | 写入延迟 | 吞吐量       | 数据一致性 |
-| :---------------- | :------- | :----------- | :--------- |
-| **直接写 DB**     | ~50 ms   | ~1000 QPS    | 强一致     |
-| **Write-Through** | ~50 ms   | ~1000 QPS    | 强一致     |
-| **Cache-Aside**   | ~50 ms   | ~1000 QPS    | 最终一致   |
-| **Write-Behind**  | ~1 ms    | ~100,000 QPS | 可能丢失   |
-
-**优点**：
-
-- ✅ 写入极快（毫秒级响应）
-- ✅ 吞吐量极高（十万级 QPS）
-- ✅ 减少数据库 IO（批量写入）
-
-**缺点**：
-
-- ❌ 数据可能丢失（缓存崩了，数据就没了）
-- ❌ 缓存和数据库不一致（异步延迟）
+**特点**：
+- **强一致性**：缓存和数据库始终一致
+- **写入延迟高**：需等待数据库写入完成
+- **吞吐量受限**：受限于数据库写入能力
 
 **适用场景**：
+- 对数据一致性要求极高的场景（金融交易、库存扣减）
+- 写操作相对较少的场景
 
-- ✅ 秒杀系统（库存扣减）
-- ✅ 点赞数、浏览量（可接受少量丢失）
-- ✅ 计数器、统计信息
-- ❌ 订单、支付（绝对不能丢）
+<CachePatternComparisonDemo />
 
-### 4.5 四种模式对比总结
+### 3.4 Write-Behind (异步写回)
 
-| 模式              | 谁控制缓存 | 读取策略 | 写入策略            | 一致性   | 性能 | 使用频率          |
-| :---------------- | :--------- | :------- | :------------------ | :------- | :--- | :---------------- |
-| **Cache-Aside**   | 应用代码   | 懒加载   | 先写 DB，删缓存     | 最终一致 | 中   | ⭐⭐⭐⭐⭐ 最常用 |
-| **Read-Through**  | 缓存服务   | 自动加载 | 先写 DB，删缓存     | 最终一致 | 中   | ⭐⭐              |
-| **Write-Through** | 缓存服务   | 自动加载 | 同时写缓存和 DB     | 强一致   | 低   | ⭐⭐              |
-| **Write-Behind**  | 缓存服务   | 自动加载 | 只写缓存，异步写 DB | 可能丢失 | 极高 | ⭐⭐⭐            |
+**模式定义**：应用程序只写入缓存，缓存服务异步批量将数据写入数据库。
 
-**选择建议**：
+**工作原理**：
+```
+应用程序 ──→ 写入缓存（立即返回）
+                              ↓
+                    后台异步批量写入数据库
+```
 
-- **大多数场景**：使用 **Cache-Aside**，灵活且成熟
-- **读多写少**：考虑 **Read-Through**，简化代码
-- **强一致性要求**：考虑 **Write-Through**
-- **海量写入，可接受丢失**：使用 **Write-Behind**
+**核心优势**：
+- **写入极快**：~1ms 延迟，10万+ QPS
+- **批量写入**：减少数据库 IO，提升吞吐量
+- **削峰填谷**：将突发流量平滑化
 
-<CachePatternsDemo />
+**核心风险**：
+- **数据丢失风险**：缓存宕机，未写入数据库的数据丢失
+- **数据不一致窗口**：异步写入期间，缓存与数据库不一致
 
 ---
 
-## 5. 缓存的"坑"与解决方案
+## 4. 缓存的三大经典问题
 
-### 5.1 缓存穿透 (Cache Penetration)
+在实际生产环境中，缓存可能引入三类严重问题，需要系统性解决方案。
 
-**问题**：查询一个**不存在的数据**（如恶意请求 id=-1），缓存没有，数据库也没有。导致每次请求都直接打到数据库。
+### 4.1 缓存穿透 (Cache Penetration)
 
-**解决方案**：
+**问题定义**：查询一个**不存在的数据**，缓存中没有（因为没有），数据库中也没有，导致每次请求都直接打到数据库。
 
-1.  **布隆过滤器 (Bloom Filter)**：
-    - 在缓存前加一层过滤器，快速判断"这个 id **肯定不存在**"。
-    - 100% 判断不存在，但可能有**误判**（说不存在实际存在）。
+**攻击场景**：
+- 恶意攻击者构造大量不存在的 ID 进行查询（如 id=-1, id=999999999）
+- 爬虫遍历不存在的资源路径
+- 业务逻辑错误导致查询无效数据
 
-```python
-# 布隆过滤器示例
-from pybloom_live import BloomFilter
+**解决方案 1：布隆过滤器 (Bloom Filter)**
 
-# 预热：把所有有效的 user_id 放进去
-bf = BloomFilter(capacity=1000000, error_rate=0.001)
+**原理**：在缓存之前加一层概率型数据结构，快速判断"这个 key **肯定不存在**或**可能存在**"。
 
-for user_id in all_valid_user_ids:
-    bf.add(user_id)
+**特性**：
+- 100% 判断不存在（绝对不会误判为存在）
+- 可能误判存在（实际不存在，但过滤器说可能存在，概率可调）
 
-def get_user(user_id):
-    # 第一道防线：布隆过滤器
-    if user_id not in bf:
-        return None  # 肯定不存在，直接返回
+### 4.2 缓存击穿 (Cache Breakdown)
 
-    # 第二道防线：缓存
-    cached = cache.get(f'user:{user_id}')
-    if cached is not None:
-        return cached
+**问题定义**：某个**热点数据**在缓存中过期（TTL 到期），此时大量并发请求同时到达，都去查询数据库，导致数据库压力骤增。
 
-    # 第三道防线：数据库
-    user = db.get_user(user_id)
-    if user:
-        cache.set(f'user:{user_id}', user)
-    else:
-        # 即使数据库没有，也缓存一个空值（防止穿透）
-        cache.set(f'user:{user_id}', NULL, ttl=60)
-    return user
+**典型场景**：
+- 微博热搜榜过期瞬间
+- 明星八卦新闻缓存失效
+- 秒杀活动开始时的库存数据
+- 热门商品的缓存同时过期
+
+**解决方案 1：互斥锁 (Mutex Lock)**
+
+**原理**：当缓存失效时，只允许一个线程去查询数据库并重建缓存，其他线程等待或重试。
+
+**解决方案 2：逻辑过期 (Logical Expiration)**
+
+**原理**：不设置物理过期时间（TTL），而是在缓存 value 中嵌入逻辑过期时间字段。发现逻辑过期时，异步重建缓存，同时返回旧数据（永不过期）。
+
+### 4.3 缓存雪崩 (Cache Avalanche)
+
+**问题定义**：大量缓存数据在**同一时间点集中过期**（或 Redis 宕机），导致所有请求同时穿透到数据库，瞬间压垮数据库。
+
+**典型触发场景**：
+- 系统重启后，所有缓存从 0 开始重建，同时设置相同 TTL
+- 定时任务批量刷新缓存，设置相同的过期时间
+- 缓存服务（Redis）宕机或网络分区
+- 大量热点数据同时达到过期时间
+
+**解决方案 1：随机 TTL (Time To Live)**
+
+**原理**：在基础过期时间上增加随机偏移量，打散过期时间点。
+
+**解决方案 2：缓存预热 (Cache Preheating)**
+
+**原理**：系统启动或定时任务主动将热点数据加载到缓存，避免冷启动时集中回源。
+
+**解决方案 3：熔断降级 (Circuit Breaker)**
+
+**原理**：当数据库压力过大时，暂时拒绝部分请求或返回降级数据，保护数据库不被压垮。
+
+---
+
+## 5. 缓存一致性策略
+
+缓存的本质是数据的副本，副本与主数据（数据库）之间必然存在不一致的时间窗口。如何控制这个时间窗口，是缓存设计的核心挑战。
+
+### 5.1 为什么不一致？
+
+**并发写入场景**：
+
+| 时间 | 线程 A（更新 age=25） | 线程 B（查询） | 数据库 | 缓存 |
+| :--- | :-------------------- | :------------- | :----- | :--- |
+| T1 | 更新 DB age=25 | - | 25 | 20（旧值） |
+| T2 | - | 查询缓存（命中旧值） | 25 | 20 ❌ |
+| T3 | 删除缓存 | - | 25 | - |
+| T4 | - | - | 25 | 从 DB 加载 25 ✅ |
+
+**问题**：在 T2 时刻，线程 B 读取到了缓存中的旧值 20，而此时数据库已经是 25。
+
+### 5.2 最佳实践：先更新数据库，再删除缓存
+
+**原理**：利用数据库的行锁机制，保证"更新"操作的排他性，最大限度减少不一致窗口。
+
+**流程**：
+
+```
+写请求 ──→ 开启数据库事务 ──→ 更新数据库记录 ──→ 提交事务 ──→ 删除缓存
 ```
 
-2.  **缓存空对象**：
-    - 查询不存在时，缓存一个 NULL 值（TTL 设置短一点，如 5 分钟）。
+**为什么这个顺序最优？**
 
-### 5.2 缓存击穿 (Cache Breakdown)
+1. **数据库锁保护**：更新操作会获取行锁，其他读写操作必须等待，天然排他
+2. **删除缓存是异步操作**：不需要等待缓存删除成功，数据库提交后即可返回
+3. **极端情况仍可接受**：即使缓存删除失败，只是下次读取会回源，不会导致脏数据长期存在
 
-**问题**：某个**热点数据**过期（如微博热搜），瞬间几百万请求同时打到数据库。
+### 5.3 延迟双删 (Delayed Double Deletion)
 
-**解决方案**：
+**场景**：先删缓存、再写 DB 的方案在极端并发下仍有不一致风险。延迟双删通过两次删除，最大限度保证一致性。
 
-1.  **互斥锁 (Mutex Lock)**：
-    - 只允许一个线程查数据库，其他线程等待。
+**流程**：
 
-```python
-import threading
-
-lock = threading.Lock()
-
-def get_user(user_id):
-    cached = cache.get(f'user:{user_id}')
-    if cached:
-        return cached
-
-    # 缓存未命中，尝试获取锁
-    if lock.acquire(blocking=False):
-        try:
-            # 只有拿到锁的线程才查数据库
-            user = db.get_user(user_id)
-            cache.set(f'user:{user_id}', user, ttl=600)
-            return user
-        finally:
-            lock.release()
-    else:
-        # 没拿到锁，等待一下再重试
-        time.sleep(0.01)
-        return get_user(user_id)  # 递归重试
+```
+1. 删除缓存
+2. 更新数据库
+3. 等待一段时间（如 500ms）
+4. 再次删除缓存
 ```
 
-2.  **逻辑过期 (Logical Expiration)**：
-    - 不设置 TTL，而是在 value 里存一个过期时间字段。
-    - 查询时发现"逻辑过期"，异步更新缓存，同时返回旧数据。
+**三种一致性策略对比**：
 
-### 5.3 缓存雪崩 (Cache Avalanche)
+| 策略 | 一致性级别 | 性能影响 | 复杂度 | 适用场景 |
+| :--- | :--------- | :--------- | :------- | :------- |
+| 先更新 DB，再删缓存 | 最终一致 | 低 | 低 | 大多数场景，推荐作为默认方案 |
+| 延迟双删 | 强最终一致 | 中（延迟） | 中 | 对一致性要求较高的场景 |
+| 先删缓存，再更新 DB | 弱 | 低 | 低 | 不推荐，易出现不一致 |
 
-**问题**：大量缓存**同时过期**（如系统重启后，所有缓存都在 00:00:00 过期），数据库瞬间被打爆。
+---
 
-**解决方案**：
+## 6. 实战：构建高性能缓存系统
 
-1.  **随机 TTL**：
-    - 避免同时过期，TTL 加上随机值。
+### 6.1 场景分析：电商商品详情页
 
-```python
-import random
+**业务特点**：
+- 读多写少：100:1 的读写比
+- 热点集中：20% 的商品贡献 80% 的流量
+- 数据复杂度：商品基础信息 + 价格 + 库存 + 评价聚合
+- 一致性要求：价格、库存强一致，其他可最终一致
 
-ttl = 600 + random.randint(-60, 60)  # 600 ± 60 秒
-cache.set(f'user:{user_id}', user, ttl=ttl)
-```
-
-2.  **缓存预热**：
-    - 系统启动时，主动加载热点数据到缓存。
-    - 使用定时任务，提前刷新即将过期的热点数据。
-
-3.  **熔断降级**：
-    - 当数据库压力过大时，暂时停止更新缓存，直接返回降级数据（如"系统繁忙，请稍后再试"）。
+**性能指标**：
+- P99 响应时间 < 100ms
+- 数据库 QPS 峰值 < 5000
+- 缓存命中率 > 95%
 
 <CacheProblemsDemo />
 
----
-
-## 6. 缓存的一致性策略
-
-缓存是副本，副本和主本（数据库）可能不一致。如何保证一致性？
-
-### 6.1 数据更新流程
-
-假设你要更新用户信息：
-
-```python
-# 方案 1：先更新数据库，再更新缓存
-db.update(user)
-cache.set(user)  # ⚠️ 问题：如果缓存更新失败，就不一致了
-
-# 方案 2：先删除缓存，再更新数据库
-cache.delete(user)
-db.update(user)  # ⚠️ 问题：删除和更新之间，有并发读，读到了旧数据并写回缓存
-
-# 方案 3：先更新数据库，再删除缓存（推荐）
-db.update(user)
-cache.delete(user)  # ✅ 最佳实践
-```
-
-**为什么删除而不是更新？**
-
-假设两个线程同时更新：
-
-| 时间 | 线程 A           | 线程 B           | 数据库 | 缓存  |
-| :--- | :--------------- | :--------------- | :----- | :---- |
-| 1    | 读 user (age=20) |                  | 20     | 20    |
-| 2    |                  | 读 user (age=20) | 20     | 20    |
-| 3    | 更新 age=25      |                  | 25     | 20    |
-| 4    |                  | 更新 age=30      | 30     | 20    |
-| 5    | 写缓存 (age=25)  |                  | 30     | 25 ❌ |
-| 6    |                  | 写缓存 (age=30)  | 30     | 30 ✅ |
-
-如果是**删除缓存**，则不存在这个问题。
-
-### 6.2 延迟双删 (Delayed Double Deletion)
-
-为了极致一致性，可以在更新数据库前后都删除缓存：
-
-```python
-def update_user(user_id, new_data):
-    # 1. 第一次删除缓存
-    cache.delete(f'user:{user_id}')
-
-    # 2. 更新数据库
-    db.update(user_id, new_data)
-
-    # 3. 延迟几百毫秒后，再次删除缓存
-    # （为了删除在步骤 1-2 之间被写入的旧数据）
-    time.sleep(0.5)
-    cache.delete(f'user:{user_id}')
-```
-
-### 6.3 订阅 Binlog (Canal / Debezium)
-
-最完美的方案：**把缓存更新从应用代码中剥离**。
-
-- 监听 MySQL 的 Binlog（变更日志）。
-- 数据库更新后，异步消费 Binlog，更新/删除缓存。
-- **优点**：代码解耦，最终一致性保证。
-
-<CacheConsistencyDemo />
-
----
-
-## 7. 实战：设计一个高性能缓存系统
-
-### 7.1 需求分析
-
-我们要设计一个"商品详情页"的缓存系统：
-
-- **读多写少**：100 次浏览，1 次编辑。
-- **热点集中**：20% 的商品占 80% 的访问。
-- **可接受短时不一致**：价格延迟 1 秒更新没问题。
-
-### 7.2 架构设计
+### 6.2 架构设计
 
 ```
-客户端
-    ↓
-[本地缓存: Caffeine]
-    - 容量: 1000 个商品
-    - TTL: 30 秒
-    - 用途: 极热点商品（如秒杀活动）
-    ↓ (未命中)
-[分布式缓存: Redis Cluster]
-    - 容量: 100 万个商品
-    - TTL: 5 分钟
-    - 用途: 所有商品数据
-    ↓ (未命中)
-[数据库: MySQL]
-    - 持久化存储
+┌─────────────────────────────────────────────────────────┐
+│                     客户端请求                         │
+└───────────────────────┬─────────────────────────────────┘
+                        ↓
+┌─────────────────────────────────────────────────────────┐
+│  CDN 缓存层                                            │
+│  - 商品主图、详情图                                      │
+│  - Cache-Control: max-age=86400                         │
+└───────────────────────┬─────────────────────────────────┘
+                        ↓
+┌─────────────────────────────────────────────────────────┐
+│  Nginx 缓存层                                          │
+│  - 商品基础信息聚合（包含价格、库存）                      │
+│  - proxy_cache_valid 5m                                 │
+└───────────────────────┬─────────────────────────────────┘
+                        ↓
+┌─────────────────────────────────────────────────────────┐
+│  应用层                                                │
+│  ┌─────────────────┐  ┌─────────────────┐               │
+│  │ 本地缓存        │  │ 分布式锁        │               │
+│  │ (Caffeine)      │  │ (Redisson)      │               │
+│  │ - 热点商品      │  │ - 防击穿        │               │
+│  │ - 配置信息      │  │ - 库存扣减      │               │
+│  └─────────────────┘  └─────────────────┘               │
+└───────────────────────┬─────────────────────────────────┘
+                        ↓
+┌─────────────────────────────────────────────────────────┐
+│  Redis 集群                                            │
+│  - 商品详情 Hash                                       │
+│  - 库存计数器 String                                   │
+│  - 热点商品列表 ZSet                                   │
+│  - 分布式锁                                            │
+└───────────────────────┬─────────────────────────────────┘
+                        ↓
+┌─────────────────────────────────────────────────────────┐
+│  MySQL 集群                                            │
+│  - 商品主表                                            │
+│  - 库存表（行锁控制并发）                               │
+│  - 订单表                                              │
+└─────────────────────────────────────────────────────────┘
 ```
 
-### 7.3 代码实现
+### 6.3 核心代码实现
+
+**完整的多级缓存实现（Java + Spring Boot）**：
 
 ```java
-@Service
-public class ProductService {
+@Component
+public class MultiLevelCache {
 
-    // 本地缓存
-    private final Cache<String, Product> localCache;
+    // 本地缓存：Caffeine
+    private final Cache<String, Object> localCache;
 
-    // Redis 客户端
     @Autowired
-    private RedisTemplate<String, Product> redisTemplate;
+    private StringRedisTemplate redisTemplate;
 
-    // 数据库
     @Autowired
-    private ProductMapper productMapper;
+    private RedissonClient redissonClient;
+
+    // 缓存层级配置
+    private static final long LOCAL_TTL_SECONDS = 30;
+    private static final long REDIS_TTL_SECONDS = 300;
+
+    public MultiLevelCache() {
+        this.localCache = Caffeine.newBuilder()
+            .maximumSize(10_000)
+            .expireAfterWrite(Duration.ofSeconds(LOCAL_TTL_SECONDS))
+            .recordStats()
+            .build();
+    }
 
     /**
-     * 三级缓存查询
+     * 多级缓存读取（L1: 本地缓存 -> L2: Redis -> L3: 数据库）
      */
-    public Product getProduct(String productId) {
+    public <T> T get(String key, Class<T> type, Supplier<T> dbLoader) {
         // L1: 本地缓存
-        Product product = localCache.getIfPresent(productId);
-        if (product != null) {
-            return product;
+        Object localValue = localCache.getIfPresent(key);
+        if (localValue != null) {
+            return type.cast(localValue);
         }
 
-        // L2: Redis 缓存
-        product = redisTemplate.opsForValue().get("product:" + productId);
-        if (product != null) {
-            localCache.put(productId, product);  // 回填本地缓存
-            return product;
+        // L2: Redis 缓存（带分布式锁防击穿）
+        String redisKey = "cache:" + key;
+        String redisValue = redisTemplate.opsForValue().get(redisKey);
+
+        if (StrUtil.isNotBlank(redisValue)) {
+            T value = JSON.parseObject(redisValue, type);
+            // 回填本地缓存
+            localCache.put(key, value);
+            return value;
         }
 
-        // L3: 数据库
-        synchronized (this) {  // 防止缓存击穿
+        // L3: 数据库（带分布式锁）
+        String lockKey = "lock:" + key;
+        RLock lock = redissonClient.getLock(lockKey);
+
+        try {
+            boolean acquired = lock.tryLock(100, 10, TimeUnit.MILLISECONDS);
+            if (!acquired) {
+                // 获取锁失败，等待后重试
+                Thread.sleep(50);
+                return get(key, type, dbLoader);
+            }
+
             // 双重检查
-            product = redisTemplate.opsForValue().get("product:" + productId);
-            if (product != null) {
-                return product;
+            String doubleCheck = redisTemplate.opsForValue().get(redisKey);
+            if (StrUtil.isNotBlank(doubleCheck)) {
+                return JSON.parseObject(doubleCheck, type);
             }
 
-            // 查数据库
-            product = productMapper.selectById(productId);
-            if (product == null) {
-                // 缓存空对象（防止缓存穿透）
+            // 查询数据库
+            T value = dbLoader.get();
+
+            if (value != null) {
+                // 写入 Redis（带随机 TTL）
+                long ttl = REDIS_TTL_SECONDS + RandomUtil.randomInt(-30, 30);
                 redisTemplate.opsForValue().set(
-                    "product:" + productId,
-                    NULL_PRODUCT,
-                    5,
-                    TimeUnit.MINUTES
+                    redisKey,
+                    JSON.toJSONString(value),
+                    ttl,
+                    TimeUnit.SECONDS
                 );
-                return null;
+
+                // 回填本地缓存
+                localCache.put(key, value);
             }
 
-            // 写入缓存（带随机 TTL，防止雪崩）
-            int ttl = 300 + ThreadLocalRandom.current().nextInt(-30, 30);
-            redisTemplate.opsForValue().set("product:" + productId, product, ttl, TimeUnit.SECONDS);
-            localCache.put(productId, product);
+            return value;
 
-            return product;
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+            throw new RuntimeException("获取锁被中断", e);
+        } finally {
+            if (lock.isHeldByCurrentThread()) {
+                lock.unlock();
+            }
         }
     }
 
     /**
-     * 更新商品（Cache-Aside 模式）
+     * 删除缓存（更新时调用）
      */
-    public void updateProduct(Product product) {
-        // 1. 更新数据库
-        productMapper.updateById(product);
+    public void evict(String key) {
+        // 删除本地缓存
+        localCache.invalidate(key);
 
-        // 2. 删除缓存（而不是更新）
-        redisTemplate.delete("product:" + product.getId());
-        localCache.invalidate(product.getId());
-
-        // 3. （可选）延迟双删
-        CompletableFuture.runAsync(() -> {
-            try {
-                Thread.sleep(500);
-                redisTemplate.delete("product:" + product.getId());
-            } catch (InterruptedException e) {
-                Thread.currentThread().interrupt();
-            }
-        });
+        // 删除 Redis 缓存
+        redisTemplate.delete("cache:" + key);
     }
 }
 ```
 
-### 7.4 监控与调优
-
-```java
-@RestController
-public class CacheMetricsController {
-
-    @Autowired
-    private Cache localCache;
-
-    @GetMapping("/cache/stats")
-    public Map<String, Object> getCacheStats() {
-        CacheStats stats = localCache.stats();
-
-        return Map.of(
-            "hitRate", stats.hitRate(),              // 命中率（目标: > 90%）
-            "hitCount", stats.hitCount(),            // 命中次数
-            "missCount", stats.missCount(),          // 未命中次数
-            "evictionCount", stats.evictionCount(),  // 淘汰次数
-            "averageLoadPenalty", stats.averageLoadPenalty()  // 平均加载耗时 (ns)
-        );
-    }
-}
-```
-
-**关键指标**：
-
-- **命中率 (Hit Rate)**：> 90% 为优秀。
-- **平均加载耗时 (Average Load Penalty)**：未命中时加载数据的平均时间，越小越好。
-- **淘汰次数 (Eviction Count)**：过高说明缓存容量不足。
-
-<ProductCacheDemo />
+<EcommerceCacheArchitectureDemo />
 
 ---
 
-## 8. 总结与学习路线
+## 7. 总结与学习路径
 
-缓存设计是后端系统的"核心技能"，掌握它能让你的系统性能提升 **10-100 倍**。
+### 7.1 核心知识点回顾
 
-### 8.1 核心知识点
+| 知识点 | 关键概念 | 实战要点 |
+| :----- | :------- | :------- |
+| **局部性原理** | 时间局部性、空间局部性 | 根据访问模式设计缓存 key 和预热策略 |
+| **多级缓存** | L1-L6 层级 | 浏览器 → CDN → Nginx → 本地 → Redis → DB |
+| **缓存模式** | Cache-Aside、Read-Through、Write-Through、Write-Behind | Cache-Aside 最常用，Write-Behind 用于高并发写入 |
+| **缓存穿透** | 查询不存在数据 | 布隆过滤器 + 缓存空对象 |
+| **缓存击穿** | 热点数据过期 | 互斥锁 + 逻辑过期 |
+| **缓存雪崩** | 大量数据同时过期 | 随机 TTL + 缓存预热 + 熔断降级 |
+| **一致性策略** | 先更新 DB 再删缓存、延迟双删 | Cache-Aside + 延迟双删应对极端并发 |
 
-| 知识点                 | 重要程度   | 难度 | 实战频率 |
-| :--------------------- | :--------- | :--- | :------- |
-| **多级缓存架构**       | ⭐⭐⭐⭐⭐ | 中   | 极高     |
-| **Cache-Aside 模式**   | ⭐⭐⭐⭐⭐ | 低   | 极高     |
-| **缓存穿透/击穿/雪崩** | ⭐⭐⭐⭐⭐ | 高   | 高       |
-| **布隆过滤器**         | ⭐⭐⭐⭐   | 中   | 中       |
-| **缓存一致性**         | ⭐⭐⭐⭐   | 高   | 高       |
-| **分布式锁**           | ⭐⭐⭐⭐   | 中   | 中       |
-| **缓存监控与调优**     | ⭐⭐⭐⭐   | 中   | 高       |
+### 7.2 学习路径建议
 
-### 8.2 学习路线
+**阶段 1：理解原理（1-2 天）**
+- 掌握局部性原理（时间、空间）
+- 理解缓存生命周期（写入 → 命中 → 过期 → 淘汰）
+- 了解不同存储介质的性能差异（CPU Cache → 内存 → SSD → HDD）
 
-1.  **入门**（1-2 天）：
-    - 理解缓存的本质和局部性原理。
-    - 使用 Redis 做简单的键值缓存。
-    - 掌握 Cache-Aside 模式。
+**阶段 2：掌握基础模式（2-3 天）**
+- 实现 Cache-Aside 模式（读取、更新）
+- 使用 Redis 做分布式缓存
+- 理解为什么"更新时删除缓存而不是更新缓存"
 
-2.  **进阶**（1 周）：
-    - 实现多级缓存（本地缓存 + Redis）。
-    - 解决缓存三大问题（穿透、击穿、雪崩）。
-    - 学习布隆过滤器、分布式锁。
+**阶段 3：多级缓存实战（3-5 天）**
+- 实现本地缓存（Caffeine/Guava）+ Redis 的两级架构
+- 解决多级缓存的一致性问题
+- 实现缓存统计和监控
 
-3.  **实战**（2-4 周）：
-    - 设计一个高并发的商品详情页缓存系统。
-    - 接入监控系统，实时观测缓存命中率。
-    - 压测验证性能提升。
+**阶段 4：解决经典问题（1 周）**
+- 缓存穿透：实现布隆过滤器
+- 缓存击穿：实现互斥锁和逻辑过期
+- 缓存雪崩：实现随机 TTL、缓存预热、熔断降级
 
-4.  **深入**（持续）：
-    - 学习 Redis 高可用（哨兵、集群）。
-    - 研究热点数据的自动识别与预热。
-    - 探索一致性哈希、缓存分片算法。
+**阶段 5：一致性保障（1-2 周）**
+- 深入理解 Cache-Aside 模式的并发问题
+- 实现延迟双删
+- 了解 Binlog 订阅方案（Canal/Debezium）
 
-### 8.3 推荐资源
+**阶段 6：生产级实战（持续）**
+- 设计完整的商品详情页缓存系统
+- 搭建 Prometheus + Grafana 监控体系
+- 进行压测验证和性能调优
 
-- **书籍**：
-  - 《Redis 设计与实现》（Huangz）
-  - 《高性能 MySQL》（第 5 章：缓存）
-- **文章**：
-  - Redis 官方文档: https://redis.io/docs/
-  - Google 的《缓存设计指南》
-- **工具**：
-  - Redis Desktop Manager (Redis 可视化)
-  - JMeter (压测工具)
+### 7.3 推荐资源
+
+**书籍**：
+- 《Redis 设计与实现》（黄健宏）—— 深入理解 Redis 内部机制
+- 《高性能 MySQL》（第 5 章：缓存策略）
+
+**文章**：
+- Martin Fowler: *Patterns of Distributed Systems*
+- Redis 官方文档：https://redis.io/docs/
+- Google: *Designing a Cache System*
+
+**开源项目**：
+- Caffeine（Java 本地缓存）
+- Redisson（Java Redis 客户端，提供分布式锁等）
+- JetCache（阿里开源的多级缓存框架）
+
+<CacheMonitoringDashboardDemo />
 
 ---
 
-## 9. 名词速查表 (Glossary)
+## 8. 名词速查表 (Glossary)
 
-| 名词                   | 全称                | 解释                                                                             |
-| :--------------------- | :------------------ | :------------------------------------------------------------------------------- |
-| **Cache**              | -                   | **缓存**。存储数据副本的快速存储层，用于加速访问。                               |
-| **Hit Ratio**          | -                   | **命中率**。缓存命中的请求数占总请求数的比例（目标: > 90%）。                    |
-| **TTL**                | Time To Live        | **生存时间**。缓存条目的过期时间。                                               |
-| **Cache Penetration**  | -                   | **缓存穿透**。查询不存在的数据，导致请求直接打到数据库。                         |
-| **Cache Breakdown**    | -                   | **缓存击穿**。热点数据过期，瞬间大量请求打到数据库。                             |
-| **Cache Avalanche**    | -                   | **缓存雪崩**。大量缓存同时过期，数据库压力骤增。                                 |
-| **Bloom Filter**       | -                   | **布隆过滤器**。空间效率高的概率型数据结构，用于判断"一个元素是否在一个集合中"。 |
-| **Eviction**           | -                   | **淘汰**。缓存满了时，删除旧数据为新数据腾空间。                                 |
-| **LRU**                | Least Recently Used | **最近最少使用**。常见的缓存淘汰策略。                                           |
-| **Cache-Aside**        | -                   | **旁路缓存**。应用代码直接操作缓存和数据库的模式。                               |
-| **Read-Through**       | -                   | **读穿透**。缓存库自动从数据库加载数据。                                         |
-| **Write-Through**      | -                   | **写穿透**。写入缓存时同步写入数据库。                                           |
-| **Write-Behind**       | -                   | **异步写回**。写入缓存后异步批量写数据库，性能高但可能丢失数据。                 |
-| **Consistent Hashing** | -                   | **一致性哈希**。分布式缓存中用于数据分片的算法。                                 |
-| **Local Cache**        | -                   | **本地缓存**。与应用在同一进程内的缓存（如 Caffeine）。                          |
-| **Distributed Cache**  | -                   | **分布式缓存**。独立服务，通过网络访问（如 Redis）。                             |
+| 名词 | 全称 | 解释 |
+| :--- | :--- | :--- |
+| **Cache** | - | **缓存**。存储数据副本的快速存储层，用于加速访问。 |
+| **Hit** | - | **缓存命中**。请求的数据在缓存中找到，无需访问数据库。 |
+| **Miss** | - | **缓存未命中**。请求的数据不在缓存中，需要回源查询。 |
+| **Hit Ratio** | - | **命中率**。缓存命中的请求数占总请求数的比例（目标: > 95%）。 |
+| **TTL** | Time To Live | **生存时间**。缓存条目的过期时间。 |
+| **Eviction** | - | **淘汰**。缓存满了时，删除旧数据为新数据腾空间。 |
+| **LRU** | Least Recently Used | **最近最少使用**。常见的缓存淘汰策略。 |
+| **LFU** | Least Frequently Used | **最不经常使用**。按访问频率淘汰的策略。 |
+| **Cache Penetration** | - | **缓存穿透**。查询不存在数据，导致请求直接打到数据库。 |
+| **Cache Breakdown** | - | **缓存击穿**。热点数据过期，瞬间大量请求打到数据库。 |
+| **Cache Avalanche** | - | **缓存雪崩**。大量缓存同时过期，数据库压力骤增。 |
+| **Bloom Filter** | - | **布隆过滤器**。空间效率高的概率型数据结构，用于判断元素是否可能存在。 |
+| **Cache-Aside** | - | **旁路缓存**。应用代码直接操作缓存和数据库的模式。 |
+| **Read-Through** | - | **读穿透**。缓存库自动从数据库加载数据。 |
+| **Write-Through** | - | **写穿透**。写入缓存时同步写入数据库。 |
+| **Write-Behind** | - | **异步写回**。写入缓存后异步批量写数据库。 |
+| **Local Cache** | - | **本地缓存**。与应用在同一进程内的缓存（如 Caffeine）。 |
+| **Distributed Cache** | - | **分布式缓存**。独立服务，通过网络访问（如 Redis）。 |
+| **Consistent Hashing** | - | **一致性哈希**。分布式缓存中用于数据分片和节点扩缩容的算法。 |
diff --git a/docs/zh-cn/appendix/cloud-iam.md b/docs/zh-cn/appendix/cloud-iam.md
new file mode 100644
index 0000000..680ba5a
--- /dev/null
+++ b/docs/zh-cn/appendix/cloud-iam.md
@@ -0,0 +1,761 @@
+# 云账号与权限管理模型：IAM / RAM 角色与权限关系
+
+> **学习指南**：提示词工程解决的是"怎么把话说清楚"，云账号权限管理解决的是"谁能做什么事"。本章节会围绕一个问题展开：**在云端世界里，如何既能方便地授权，又不把钥匙交给不该给的人？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **Token 是什么**：可以先阅读 [大语言模型入门](./llm-intro.md) 的「分词 & Token」部分。
+- **Prompt 是什么**：如果你还不熟悉 System / User / Assistant 的基本结构，可以先看 [提示词工程](./prompt-engineering/)。
+
+---
+
+## 0. 引言：为什么刚上云就"踩雷"了？
+
+<IamRamComparisonDemo />
+
+很多人刚开始使用云服务时都会遇到类似的情况：
+
+- 为了省事，直接把 AccessKey 写在代码里提交到 GitHub；
+- 给所有员工都开了"管理员权限"，结果有人误删了生产数据库；
+- 项目交接后，不知道谁手里还有旧员工的账号密码；
+- 听说要开 MFA，但觉得"麻烦"就一直拖着没开。
+
+直觉上，我们会以为是：**"这些员工安全意识不够"**。
+
+但大多数时候，问题并不在于人，而在于**没有建立正确的权限管理体系**。
+
+<IntroProblemReasonSolution />
+
+面对这些挑战，单纯依靠"小心点操作"已经行不通了。我们需要一套系统的权限管理方法论，这正是**IAM（Identity and Access Management，身份与访问管理）**试图解决的问题。
+
+---
+
+## 1. 什么是 IAM/RAM？从"门禁系统"说起
+
+### 1.1 类比：公司的智能门禁
+
+想象一下，你们公司搬到了一栋新写字楼：
+
+| 场景 | 没有 IAM 的做法 | 有 IAM 的做法 |
+| :--- | :--- | :--- |
+| 新员工入职 | 给他一把能开所有门的万能钥匙 | 给他一张门禁卡，只能刷他办公区域的门 |
+| 员工离职 | 钥匙丢了就丢了，也不知道谁拿着 | 立即在系统里注销他的门禁卡，所有门都打不开了 |
+| 外包人员 | 把钥匙借给他几天 | 发临时门禁卡，设置3天后自动失效 |
+| 访客 | 前台配一把钥匙给他 | 发一次性访客码，只能进会议室 |
+
+**IAM（Identity and Access Management，身份与访问管理）**，就像是这套"智能门禁系统"：
+
+- **身份（Identity）**：谁？员工、外包、访客、应用程序
+- **访问（Access）**：能进哪些门？能做什么操作？
+- **管理（Management）**：怎么发钥匙、怎么收钥匙、怎么查记录
+
+### 1.2 AWS IAM vs 阿里云 RAM
+
+<IamRamComparisonDemo />
+
+不同的云厂商都有自己的 IAM 实现：
+
+| 云厂商 | 服务名称 | 核心概念 |
+| :--- | :--- | :--- |
+| **AWS** | IAM (Identity and Access Management) | User、Group、Role、Policy |
+| **阿里云** | RAM (Resource Access Management) | 用户、用户组、角色、策略 |
+| **腾讯云** | CAM (Cloud Access Management) | 用户、用户组、角色、策略 |
+| **华为云** | IAM | 用户、用户组、委托、策略 |
+| **Azure** | Azure AD + RBAC | User、Group、Role、RBAC |
+
+虽然名字不同，但**核心概念都是相通的**：
+
+- **用户（User）**：代表一个具体的人或应用程序
+- **用户组（Group）**：批量管理一批用户的权限
+- **角色（Role）**：定义一组权限，可以被"扮演"
+- **策略（Policy）**：具体的权限规则（允许/拒绝做什么）
+
+---
+
+## 2. 用户、组、角色：到底该用哪个？
+
+### 2.1 三种"身份"的区别
+
+<IdentityProviderDemo />
+
+用一个办公室的场景来类比：
+
+| 概念 | 类比 | 适用场景 | 特点 |
+| :--- | :--- | :--- | :--- |
+| **用户（User）** | 正式员工，有自己的工位和门禁卡 | 长期、稳定的团队成员 | 有永久凭证（密码、AK/SK） |
+| **用户组（Group）** | 部门，如"技术部"、"销售部" | 批量管理权限 | 不能登录，只是权限容器 |
+| **角色（Role）** | 临时访客证、外包临时卡 | 临时授权、跨账号访问 | 没有永久凭证，靠"扮演"获取临时凭证 |
+
+### 2.2 真实案例：一个创业公司的权限演进
+
+**阶段一：创始团队（2-3人）**
+
+```
+问题：直接用根账号（Root Account）登录控制台，因为"省事"
+风险：根账号拥有所有权限，一旦泄露整个账号就废了
+```
+
+**阶段二：团队扩张（5-10人）**
+
+```
+改进：给每个人创建 IAM User，分配不同权限
+问题：
+- 运维小王离职了，他的 AK/SK 散落在哪些服务器上？
+- 新来的前端需要 S3 只读权限，后端需要 RDS 权限，手动一个个配太麻烦
+```
+
+**阶段三：规范化（10-30人）**
+
+```
+改进：
+1. 按角色创建 IAM Group：
+   - Developers（开发）：S3、EC2、RDS 读写
+   - DevOps（运维）：全权限，但需要 MFA
+   - ReadOnly（只读）：查看所有资源，不能修改
+   - QAs（测试）：测试环境资源访问
+
+2. 使用 IAM Role：
+   - EC2 实例使用 Instance Profile，不再在服务器上放 AK/SK
+   - 跨账号访问用 Role Assume，不用共享 AK/SK
+   - CI/CD 用 OIDC Federation，不用存储长期凭证
+```
+
+**阶段四：多账号/企业级（30人+）**
+
+```
+架构：
+- Master Account（主账号）：只用来管理账单和组织结构，不放任何资源
+- Audit Account（审计账号）：收集所有账号的日志
+- Dev Account（开发账号）：开发环境
+- Staging Account（预发布账号）：测试环境
+- Prod Account（生产账号）：线上环境，权限最严格
+
+权限流转：
+- 开发人员默认只有 Dev 账号的只读权限
+- 需要修改生产环境时，提工单申请 Assume 到 Prod 的临时 Role
+- 所有 Assume 操作都被 CloudTrail 记录，定期审计
+```
+
+---
+
+## 3. 角色与策略：权限管理的"灵魂"
+
+### 3.1 角色的本质：信任 + 权限
+
+<RolePolicyDemo />
+
+IAM Role 有两个核心组成部分：
+
+1. **信任策略（Trust Policy）**：谁可以扮演这个角色？
+2. **权限策略（Permission Policy）**：扮演成功后能做什么？
+
+用一个话剧表演的类比：
+
+| 概念 | 类比 | 说明 |
+| :--- | :--- | :--- |
+| **Role（角色）** | 剧本里的"哈姆雷特" | 定义了要演什么戏（权限）|
+| **Trust Policy** | 导演说"谁能演哈姆雷特" | 可能是"本剧团的演员"（本账号用户）、"隔壁剧团借来的演员"（跨账号）、"特邀嘉宾"（外部 IdP）|
+| **Permission Policy** | 剧本内容 | 哈姆雷特能做什么：说台词、决斗、发疯（具体权限）|
+| **Assume Role** | 演员上台表演 | 小李被导演选中演哈姆雷特，上台后他就拥有了剧本里定义的所有权限 |
+| **临时凭证** | 演出证 | 小李拿到一个"临时演出证"，演出结束后就失效了 |
+
+### 3.2 策略（Policy）：权限的"语法"
+
+<PermissionHierarchyDemo />
+
+IAM Policy 是一个 JSON 文档，定义了"谁能对什么资源做什么操作"。
+
+**一个完整的 Policy 示例**：
+
+```json
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "AllowS3ReadWrite",
+      "Effect": "Allow",
+      "Action": [
+        "s3:GetObject",
+        "s3:PutObject",
+        "s3:DeleteObject"
+      ],
+      "Resource": "arn:aws:s3:::my-app-bucket/*",
+      "Condition": {
+        "StringEquals": {
+          "aws:RequestedRegion": "ap-northeast-1"
+        },
+        "Bool": {
+          "aws:MultiFactorAuthPresent": "true"
+        }
+      }
+    },
+    {
+      "Sid": "DenySensitiveData",
+      "Effect": "Deny",
+      "Action": "s3:*",
+      "Resource": "arn:aws:s3:::my-app-bucket/sensitive/*"
+    }
+  ]
+}
+```
+
+**关键字段解释**：
+
+| 字段 | 含义 | 示例 |
+| :--- | :--- | :--- |
+| **Version** | Policy 语法版本 | "2012-10-17" |
+| **Statement** | 权限声明数组，可包含多个规则 | [...] |
+| **Sid** | 声明 ID，可选，用于标识这条规则 | "AllowS3ReadWrite" |
+| **Effect** | 效果：Allow（允许）或 Deny（拒绝） | "Allow" |
+| **Action** | 允许/拒绝的操作，支持通配符 | "s3:GetObject", "s3:*" |
+| **Resource** | 作用的资源，用 ARN 标识 | "arn:aws:s3:::bucket/*" |
+| **Condition** | 可选，满足特定条件时才生效 | 区域限制、MFA 要求等 |
+
+### 3.3 权限的优先级：Deny > Allow > 默认拒绝
+
+IAM 的权限评估逻辑可以用一句话总结：**显式 Deny 永远赢，没有 Allow 就是拒绝**。
+
+评估流程如下：
+
+```
+1. 先看有没有 Deny 策略
+   ├─ 有 Deny → 拒绝（不管有没有 Allow）
+   └─ 没有 Deny → 继续看
+
+2. 再看有没有 Allow 策略
+   ├─ 有 Allow → 允许
+   └─ 没有 Allow → 拒绝（默认拒绝原则）
+```
+
+**实战案例：保护敏感数据**
+
+```json
+// 策略1：给开发者的普通权限
+{
+  "Effect": "Allow",
+  "Action": ["s3:*"],
+  "Resource": "arn:aws:s3:::company-data/*"
+}
+
+// 策略2：保护敏感目录（即使开发者有 s3:* 也不能访问）
+{
+  "Effect": "Deny",
+  "Action": ["s3:*"],
+  "Resource": "arn:aws:s3:::company-data/sensitive/*"
+}
+```
+
+**关键点**：
+- 开发者虽然有 `s3:*` 的 Allow 权限
+- 但敏感目录有显式的 Deny 规则
+- Deny 优先级更高，所以开发者无法访问敏感数据
+- 即使开发者是管理员，这个 Deny 也有效（除非是根账号）
+
+---
+
+## 4. 访问密钥（AK/SK）：一把需要谨慎保管的"钥匙"
+
+### 4.1 AK/SK 是什么？
+
+<AccessKeyManagementDemo />
+
+Access Key（访问密钥）是云服务提供的一种长期凭证，用于程序化的 API 调用。它由两部分组成：
+
+| 组成部分 | 名称 | 作用 | 类比 |
+| :--- | :--- | :--- | :--- |
+| **Access Key ID** | 访问密钥 ID | 标识你是谁（类似于用户名） | 银行卡号 |
+| **Secret Access Key** | 秘密访问密钥 | 证明你是你（类似于密码） | 银行卡密码 |
+
+### 4.2 为什么 AK/SK 是"高危物品"？
+
+**真实案例：某创业公司的教训**
+
+小李是一家创业公司的新晋后端工程师。入职第一周，他的任务是调试一个文件上传功能。
+
+```python
+# 小李写的代码（有严重安全问题！）
+import boto3
+
+# 为了方便调试，直接把 AK/SK 写在代码里
+s3 = boto3.client(
+    's3',
+    aws_access_key_id='AKIAIOSFODNN7EXAMPLE',
+    aws_secret_access_key='wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY',
+    region_name='ap-northeast-1'
+)
+
+def upload_file(file_path, bucket_name, object_name):
+    s3.upload_file(file_path, bucket_name, object_name)
+    print(f"文件已上传到 s3://{bucket_name}/{object_name}")
+
+# 测试上传
+upload_file('./test.jpg', 'my-company-bucket', 'uploads/test.jpg')
+```
+
+**一周后发生的事情**：
+
+1. 小李提交代码到 GitHub（包括 AK/SK）
+2. GitHub 上的代码被爬虫扫描到，AK/SK 被提取
+3. 攻击者使用这些凭证，在公司账号里创建了大量 EC2 实例挖矿
+4. 月底收到账单：额外消费 12,000 美元
+5. 审计发现 AK/SK 泄露，小李被约谈...
+
+**这个案例告诉我们什么？**
+
+| 错误做法 | 正确做法 |
+| :--- | :--- |
+| 把 AK/SK 硬编码在代码中 | 使用 IAM Role，让程序自动获取临时凭证 |
+| 把 AK/SK 提交到 Git 仓库 | 使用 `.gitignore` 忽略配置文件，使用密钥管理服务 |
+| 长期使用同一个 AK/SK 不轮换 | 定期轮换 AK/SK，使用临时凭证替代长期凭证 |
+| 给 AK/SK 分配过大权限 | 遵循最小权限原则，只授予必要的权限 |
+
+### 4.3 AK/SK 的安全使用指南
+
+**场景一：本地开发**
+
+```bash
+# 正确做法：使用 AWS CLI 配置凭证，不写在代码里
+aws configure
+# 然后根据提示输入 Access Key ID 和 Secret Access Key
+# 这些信息会被保存在 ~/.aws/credentials，权限设置为 600
+
+# 代码中不需要任何凭证配置
+import boto3
+s3 = boto3.client('s3')  # 自动从 ~/.aws/credentials 读取
+```
+
+**场景二：服务器/EC2**
+
+```python
+# 正确做法：使用 IAM Instance Profile
+# 1. 创建一个 IAM Role，附加需要的权限（如 S3ReadOnly）
+# 2. 创建一个 Instance Profile，关联这个 Role
+# 3. 启动 EC2 时，选择这个 Instance Profile
+
+# 代码中完全不需要凭证
+import boto3
+s3 = boto3.client('s3')  # 自动从 EC2 元数据服务获取临时凭证
+
+# 临时凭证会自动轮换，无需担心过期
+```
+
+**场景三：CI/CD 流水线**
+
+```yaml
+# 正确做法：使用 OIDC Federation（OpenID Connect）
+# 以 GitHub Actions 为例：
+
+# 1. 在 AWS 创建 OIDC Identity Provider，信任 GitHub
+# 2. 创建一个 IAM Role，信任策略允许 GitHub 的特定仓库扮演
+# 3. 在 GitHub Actions 中配置
+
+name: Deploy
+on: [push]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write  # 关键：允许请求 OIDC token
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          role-to-assume: arn:aws:iam::123456789012:role/GitHubActionsRole
+          aws-region: ap-northeast-1
+          # 注意：这里没有 Access Key！完全使用临时凭证
+
+      - name: Deploy
+        run: aws s3 sync ./build s3://my-bucket/
+```
+
+**总结：AK/SK 使用的安全层级**
+
+| 安全等级 | 做法 | 适用场景 | 风险等级 |
+| :--- | :--- | :--- | :--- |
+| 最高 | 使用 IAM Role（无长期凭证） | EC2、Lambda、ECS、CI/CD | 极低 |
+| 高 | 使用 OIDC Federation | GitHub Actions、GitLab CI | 低 |
+| 中 | 使用密钥管理服务 | 本地开发、小团队 | 中 |
+| 低 | 使用环境变量 | 快速原型、个人项目 | 高 |
+| 极低 | 硬编码在代码中 | 任何场景都不推荐 | 极高 |
+
+---
+
+## 5. 多因素认证（MFA）：给你的账号加把"锁"
+
+### 5.1 什么是 MFA？
+
+<MfaSecurityDemo />
+
+MFA（Multi-Factor Authentication，多因素认证），也叫 2FA（Two-Factor Authentication，双因素认证），是一种安全机制，要求用户在登录时提供**两种或以上**不同类型的认证因素：
+
+| 因素类型 | 是什么 | 例子 |
+| :--- | :--- | :--- |
+| **知识因素**（你知道什么） | 只有用户知道的信息 | 密码、PIN 码 |
+| **持有因素**（你有什么） | 用户拥有的物理设备 | 手机、硬件密钥 |
+| **生物因素**（你是什么） | 用户的生物特征 | 指纹、面部识别 |
+
+### 5.2 为什么 MFA 这么重要？
+
+**真实数据告诉你答案**：
+
+| 攻击方式 | 没有 MFA 时的成功率 | 有 MFA 时的成功率 |
+| :--- | :--- | :--- |
+| 密码猜测/暴力破解 | 很高 | 极低（还需要第二因素） |
+| 钓鱼攻击获取密码 | 很高 | 极低（钓鱼页面无法获取 MFA 码） |
+| 密码泄露（其他网站泄露）| 很高 | 极低（不知道第二因素） |
+
+**微软安全报告（2020）**：启用 MFA 可以阻止 **99.9%** 的自动化攻击。
+
+### 5.3 MFA 实战：为 AWS 根账号开启 MFA
+
+**步骤一：登录 AWS 控制台**
+
+1. 使用根账号邮箱和密码登录
+2. 在右上角点击你的账号名，选择 "Security Credentials"
+
+**步骤二：启用 MFA**
+
+1. 找到 "Multi-factor authentication (MFA)" 区域
+2. 点击 "Assign MFA device"
+3. 选择 MFA 设备类型（推荐"Authenticator app"）
+
+**步骤三：配置虚拟 MFA**
+
+1. 在手机上安装 Google Authenticator 或 Microsoft Authenticator
+2. 扫描二维码或手动输入密钥
+3. 输入 App 上显示的 6 位验证码（连续输入两个，因为验证码每 30 秒刷新）
+
+**完成！** 你的根账号现在有了 MFA 保护。
+
+---
+
+## 6. 跨账号访问：如何安全地"串门"？
+
+### 6.1 为什么需要跨账号访问？
+
+<CrossAccountAccessDemo />
+
+随着业务增长，很多公司会使用**多账号架构**来隔离不同环境：
+
+| 账号类型 | 用途 | 权限要求 |
+| :--- | :--- | :--- |
+| **Master Account** | 组织管理、账单结算 | 几乎不使用 |
+| **Security Audit** | 集中收集所有账号的日志 | 只读访问其他账号 |
+| **Shared Services** | 共享资源（镜像仓库等） | 其他账号只读访问 |
+| **Development** | 开发环境 | 开发者完全权限 |
+| **Staging** | 测试/预发布环境 | 测试人员权限 |
+| **Production** | 生产环境 | 严格限制，需要审批 |
+
+**问题：Shared Services 账号里的镜像，怎么让 Production 账号的 EC2 拉取？**
+
+- 方案 A：把 AK/SK 写在 Production 的用户数据里 （危险！AK/SK 泄露风险）
+- 方案 B：使用跨账号 Role Assume （推荐！临时凭证，自动轮换）
+
+### 6.2 跨账号 Role Assume 的原理
+
+```
+账号 A（Production）                    账号 B（Shared Services）
+    |                                           |
+    |  1. 请求 Assume Role                      |
+    |  "我想扮演账号 B 的 ECRReadRole"          |
+    |------------------------------------------>|
+    |                                           |
+    |                    2. 检查信任策略         |
+    |                    "账号 A 可以扮演我吗？" |
+    |                                           |
+    |  3. 返回临时凭证                          |
+    |  AccessKeyId, SecretKey, SessionToken    |
+    |<------------------------------------------|
+    |                                           |
+    |  4. 使用临时凭证访问 ECR                  |
+    |  docker pull 账号B.dkr.ecr...            |
+```
+
+**关键点**：
+
+- 临时凭证有效期默认 1 小时，最长可配置 12 小时
+- 不需要在代码里存储任何长期凭证
+- 信任策略可以限制谁可以扮演这个角色（如指定账号、指定外部 ID）
+
+### 6.3 实战：配置跨账号 ECR 访问
+
+**场景**：Production 账号的 EC2 需要拉取 Shared Services 账号的 Docker 镜像。
+
+**步骤一：在 Shared Services 账号创建 IAM Role**
+
+1. 登录 Shared Services 账号的 AWS 控制台
+2. 进入 IAM -> Roles -> Create role
+3. 选择"Another AWS account"
+4. 输入 Production 账号的 Account ID
+5. 可选：勾选"Require external ID"并输入一个随机字符串（增加安全性）
+6. 附加权限：AmazonEC2ContainerRegistryReadOnly
+7. 给 Role 命名：CrossAccountECRReadRole
+
+**步骤二：获取 Role ARN**
+
+创建完成后，复制 Role 的 ARN：
+```
+arn:aws:iam::SHARED_SERVICES_ACCOUNT_ID:role/CrossAccountECRReadRole
+```
+
+**步骤三：在 Production 账号配置 EC2 实例**
+
+方式 A：使用 Instance Profile（推荐）
+
+1. 在 Production 账号创建 IAM Role（EC2 用）
+2. 信任策略：信任 EC2 服务
+3. 权限策略：允许 Assume 跨账号 Role
+
+```json
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": "sts:AssumeRole",
+      "Resource": "arn:aws:iam::SHARED_SERVICES_ACCOUNT_ID:role/CrossAccountECRReadRole"
+    }
+  ]
+}
+```
+
+4. 创建 Instance Profile，关联这个 Role
+5. 启动 EC2 时，选择这个 Instance Profile
+
+方式 B：在 EC2 用户数据里动态 Assume Role
+
+```bash
+#!/bin/bash
+# 安装 AWS CLI
+yum install -y aws-cli
+
+# Assume 跨账号 Role
+CREDS=$(aws sts assume-role \
+  --role-arn arn:aws:iam::SHARED_SERVICES_ACCOUNT_ID:role/CrossAccountECRReadRole \
+  --role-session-name EC2PullSession)
+
+# 提取临时凭证
+export AWS_ACCESS_KEY_ID=$(echo $CREDS | jq -r '.Credentials.AccessKeyId')
+export AWS_SECRET_ACCESS_KEY=$(echo $CREDS | jq -r '.Credentials.SecretAccessKey')
+export AWS_SESSION_TOKEN=$(echo $CREDS | jq -r '.Credentials.SessionToken')
+
+# 登录 ECR
+aws ecr get-login-password --region ap-northeast-1 | \
+  docker login --username AWS --password-stdin SHARED_SERVICES_ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com
+
+# 拉取镜像
+docker pull SHARED_SERVICES_ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com/my-app:latest
+```
+
+**步骤四：测试跨账号访问**
+
+在 Production 的 EC2 上执行：
+
+```bash
+# 测试能否 Assume Role
+aws sts get-caller-identity
+# 应该显示：arn:aws:sts::PRODUCTION_ACCOUNT_ID:assumed-role/CrossAccountECRReadRole/EC2PullSession
+
+# 测试能否列出 Shared Services 的 ECR 仓库
+aws ecr describe-repositories --registry-id SHARED_SERVICES_ACCOUNT_ID
+```
+
+**完成！** 现在 Production 的 EC2 可以安全地拉取 Shared Services 的镜像，而无需共享任何长期凭证。
+
+---
+
+## 7. 实战：构建安全的权限体系
+
+### 7.1 从零开始搭建权限架构
+
+<BestPracticesDemo />
+
+假设你是一个 10 人创业公司的技术负责人，需要从零设计 AWS 权限架构。以下是推荐的实施步骤：
+
+**阶段一：根账号保护（第 1 天）**
+
+```
+目标：保护根账号，这是最重要的账号
+
+1. 启用根账号 MFA（必须）
+   - 推荐硬件 MFA（YubiKey），或者 Google Authenticator
+
+2. 创建 IAM 管理员账号
+   - 用户名：admin（或你的名字）
+   - 权限：AdministratorAccess（但后续会收紧）
+   - 启用 MFA
+
+3. 删除根账号的 Access Key（如果创建了的话）
+   - 根账号永远不应该有 AK/SK
+
+4. 配置根账号使用告警
+   - 使用 CloudWatch + SNS，一旦根账号登录就发邮件/短信
+```
+
+**阶段二：团队权限分组（第 1 周）**
+
+```
+目标：给团队成员分组，批量管理权限
+
+1. 分析团队角色：
+   - 后端开发（2人）
+   - 前端开发（1人）
+   - 移动端开发（1人）
+   - 产品经理（1人）
+   - 设计师（1人）
+   - 创始人/管理员（3人）
+
+2. 创建 IAM Groups：
+
+   Group: Developers
+   ├── 成员：所有开发（后端、前端、移动端）
+   ├── 权限：
+   │   ├── EC2: 启动、停止、查看（但不能删除别人的实例）
+   │   ├── S3: 读写开发环境的 bucket
+   │   ├── RDS: 只读权限（不能修改生产数据库）
+   │   └── CloudWatch: 查看日志
+   └── 限制：只能操作 ap-northeast-1 区域
+
+   Group: ProductTeam
+   ├── 成员：产品经理、设计师
+   ├── 权限：
+   │   ├── S3: 只读（查看数据文件）
+   │   ├── CloudWatch Dashboard: 查看监控图表
+   │   └── Cost Explorer: 查看账单（但不能修改）
+   └── 限制：只读权限，不能修改任何资源
+
+   Group: Administrators
+   ├── 成员：创始人、技术负责人
+   ├── 权限：AdministratorAccess
+   └── 要求：必须使用 MFA 才能操作
+
+3. 给每个人创建 IAM User，加入对应的 Group
+   - 不要给个人直接附加权限，一律通过 Group 管理
+   - 启用 MFA（强制要求）
+```
+
+**阶段三：应用层权限优化（第 2-4 周）**
+
+```
+目标：让应用程序安全地访问 AWS 资源
+
+1. EC2 实例使用 Instance Profile
+   - 不再在服务器上配置 AK/SK
+   - 创建 IAM Role，附加需要的权限（如 S3 读写）
+   - 创建 Instance Profile，关联这个 Role
+   - 启动 EC2 时选择这个 Instance Profile
+   - 应用代码中直接使用 boto3，无需配置凭证
+
+2. 如果必须使用 AK/SK（第三方集成）
+   - 使用 AWS Secrets Manager 存储 AK/SK
+   - 应用启动时从 Secrets Manager 读取
+   - 设置定期轮换（90天）
+   - 监控 AK/SK 的使用情况
+
+3. 配置 CloudTrail 记录所有 API 调用
+   - 创建单独的 S3 bucket 存储日志
+   - 设置日志文件校验（防止篡改）
+   - 配置 SNS 通知关键事件（如根账号使用、策略变更）
+```
+
+**阶段四：安全加固（持续）**
+
+```
+目标：建立持续的安全监控和改进机制
+
+1. 启用 AWS Config
+   - 监控资源配置变更
+   - 检查合规性（如安全组是否开放了 0.0.0.0/0）
+
+2. 启用 IAM Access Analyzer
+   - 持续分析资源策略
+   - 识别外部访问（如 S3 bucket 是否公开）
+
+3. 定期审查 IAM 配置
+   - 每月检查一次未使用的 IAM User、Role
+   - 检查 Access Key 的使用情况
+   - 验证 Group 成员是否合理
+
+4. 建立安全事件响应流程
+   - 如果发现 AK/SK 泄露：立即删除、轮换、审计影响范围
+   - 如果发现异常 API 调用：立即调查、限制权限
+```
+
+---
+
+## 8. 常见误区与避坑指南
+
+### 8.1 十大 IAM 反模式
+
+| # | 反模式 | 为什么不好 | 正确做法 |
+| :--- | :--- | :--- | :--- |
+| 1 | 使用根账号进行日常操作 | 根账号拥有所有权限，一旦泄露无法限制损害 | 创建 IAM 管理员账号，根账号仅在必要时使用 |
+| 2 | 给所有人 AdministratorAccess | 违反最小权限原则，增加误操作和内部威胁风险 | 按角色分组，只授予必要的权限 |
+| 3 | 在代码中硬编码 AK/SK | AK/SK 容易通过 GitHub 泄露，且难以轮换 | 使用 IAM Role、环境变量或密钥管理服务 |
+| 4 | 长期不轮换 AK/SK | 增加凭证泄露后的风险敞口时间 | 设置 90 天轮换策略，或更好的——使用临时凭证 |
+| 5 | 忽略 MFA | 密码泄露后账号直接沦陷 | 为所有 IAM 用户启用 MFA，尤其是高权限用户 |
+| 6 | 不使用 CloudTrail | 无法审计谁做了什么操作，出事后无法溯源 | 启用 CloudTrail，并将日志存储到独立的审计账号 |
+| 7 | IAM Policy 过于宽松 | 如 `Resource: "*"`、`Action: "*"`，增加攻击面 | 明确指定资源 ARN 和具体 Action |
+| 8 | 不清理离职员工的 IAM User | 僵尸账号可能成为后门 | 建立离职流程，立即禁用并删除 IAM User |
+| 9 | 不使用 IAM Access Analyzer | 无法发现过度宽松的资源策略（如公开 S3 bucket） | 启用 IAM Access Analyzer，定期检查外部访问 |
+| 10 | 不在测试环境验证 Policy | 直接在生产环境应用 Policy，可能导致服务中断 | 使用 IAM Policy Simulator 测试，先在测试环境验证 |
+
+---
+
+## 9. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **IAM (Identity and Access Management)** | 身份与访问管理 | 云服务中管理用户身份和访问权限的服务 |
+| **RAM (Resource Access Management)** | 资源访问管理 | 阿里云的 IAM 服务名称 |
+| **Root Account** | 根账号 | 注册云账号时创建的拥有者账号，拥有最高权限 |
+| **IAM User** | IAM 用户/子账号 | 由根账号创建的子身份，用于日常操作 |
+| **IAM Role** | IAM 角色 | 临时性权限载体，无长期凭证，需要被"扮演" |
+| **IAM Policy** | IAM 策略 | JSON 格式的权限规则定义 |
+| **ARN** | 亚马逊资源名称 | 全局唯一的资源标识符 |
+| **AK/SK** | 访问密钥/密钥 | 程序访问云 API 的凭证 |
+| **STS** | 安全令牌服务 | 提供临时安全凭证的服务 |
+| **MFA** | 多因素认证 | 需要两个或以上因素的认证方式 |
+| **SSO** | 单点登录 | 用户一次登录即可访问多个系统的认证方式 |
+| **ExternalId** | 外部 ID | 用于防止困惑代理攻击的安全标识符 |
+| **CloudTrail** | 云审计服务 | 记录云账号中所有 API 调用和操作的日志服务 |
+
+---
+
+## 总结：云账号权限管理的核心原则
+
+云账号权限管理不是一蹴而就的，而是需要根据团队规模和业务需求持续演进：
+
+1. **起步阶段**（1-10 人）：
+   - 保护根账号（MFA + 不用根账号日常操作）
+   - 创建 IAM 管理员账号
+   - 基本的分组（Developers、Admins）
+
+2. **成长阶段**（10-50 人）：
+   - 细化的权限分组（前后端、运维、产品等）
+   - 使用 IAM Role 替代 AK/SK
+   - 启用 CloudTrail 审计
+   - 定期权限审查
+
+3. **成熟阶段**（50 人以上 / 多账号）：
+   - 多账号架构（Dev、Staging、Prod 分离）
+   - 集中式日志审计账号
+   - 自动化权限审查和告警
+   - 完善的权限申请和审批流程
+
+**核心原则记住三句话**：
+
+1. **最小权限原则**：只给必要的权限，不要给 AdministratorAccess
+2. **不用长期凭证**：优先使用 IAM Role 和临时凭证，避免 AK/SK 泄露
+3. **启用 MFA**：特别是根账号和高权限账号，这是最有效的安全措施
+
+---
+
+> **延伸阅读**：
+> - [AWS IAM 官方文档](https://docs.aws.amazon.com/iam/)
+> - [阿里云 RAM 官方文档](https://www.aliyun.com/product/ram)
+> - [AWS IAM Best Practices](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html)
diff --git a/docs/zh-cn/appendix/cloud-services.md b/docs/zh-cn/appendix/cloud-services.md
new file mode 100644
index 0000000..cf2caae
--- /dev/null
+++ b/docs/zh-cn/appendix/cloud-services.md
@@ -0,0 +1,329 @@
+# 云计算与常见云平台服务版图（可映射 AWS / 阿里云）
+
+> **学习指南**：云服务器不是"买了就能用的玩具"，而是"需要精细运营的资产"。本章节会围绕一个核心问题展开：**如何在 AWS 和阿里云之间做出明智的技术选型？** 我们会用真实案例、成本对比和实战代码，帮你避开那些年我们踩过的坑。
+
+在开始之前，建议你先了解：
+
+- **基础概念**：如果你还不熟悉 VPC、EC2、ECS 等基本概念，建议先阅读本章节第 1-2 节。
+- **成本意识**：云服务的计费模式复杂，建议先了解按需、预留、抢占式等计费方式。
+
+---
+
+## 0. 引言：为什么选对云服务商能省下一辆宝马？
+
+想象一下这个场景：你是一家创业公司的技术负责人，公司刚刚获得了一笔融资，需要快速搭建线上业务。你面临着一系列选择：选哪家云服务商？用什么类型的服务器？如何规划架构才能既省钱又高效？
+
+很多人第一次接触云服务时都会遇到类似的情况：
+
+- 看着 AWS 和阿里云琳琅满目的服务列表，不知道从哪里下手
+- 同样的配置，为什么账单差距能有 3 倍之多
+- 项目上线后才发现，选的实例类型根本不适合业务场景
+- 流量突增时，系统直接崩溃，因为没做弹性扩容
+
+**直觉上，我们会以为是："这个服务商太贵了"。**
+
+但大多数时候，问题并不在于价格本身，而在于我们**没有理解不同云服务的定位和适用场景**。
+
+面对这些挑战，单纯比价已经捉襟见肘。我们需要一套更系统的选型方法论，来在功能、性能、成本之间找到最佳平衡点。这正是本章试图解决的问题。
+
+<CloudServicesMapDemo />
+
+---
+
+## 1. 云服务版图全景：AWS vs 阿里云核心服务映射
+
+先给出一个简短的服务对照表，再看几个典型场景。
+
+> 云服务版图，本质上是一张"能力地图"，告诉我们：什么场景下该用什么工具。
+
+### 1.1 核心计算服务对照表
+
+| 服务类型 | AWS | 阿里云 | 典型场景 |
+|----------|-----|--------|----------|
+| **虚拟服务器** | EC2 | ECS | 通用计算、Web 服务 |
+| **无服务器函数** | Lambda | 函数计算 FC | 事件驱动、API 后端 |
+| **容器编排** | EKS | ACK | 微服务、容器化应用 |
+| **Serverless 容器** | Fargate | ECI | 无需管理服务器的容器 |
+| **批处理** | Batch | 批量计算 | 定时任务、数据处理 |
+
+👇 **动手点点看**：
+点击上方的服务版图，查看 AWS 和阿里云各层服务的详细对比。
+
+<AwsVsAliyunDemo />
+
+### 1.2 真实踩坑案例：为什么同样的配置，账单差了 3 倍？
+
+**案例背景**：
+某创业公司开发了一款 SaaS 产品，初期选择了 AWS EC2 t3.medium 实例（2核4G），按月运行约 500 小时。上线 3 个月后，账单让他们大吃一惊：实际支出比预期高出近 3 倍。
+
+**问题诊断**：
+
+| 问题点 | 预期 | 实际 | 浪费比例 |
+|--------|------|------|----------|
+| 实例选型 | t3.medium 足够 | 峰值时 CPU 积分耗尽，被迫升配 | 40% |
+| 计费模式 | 按需付费灵活 | 未使用预留实例折扣 | 35% |
+| 存储配置 | 默认 100GB GP2 | 实际只用 30GB，且未用 GP3 | 15% |
+| 网络传输 | 预估 500GB/月 | 实际 2TB（未用 CDN） | 10% |
+
+**解决方案**：
+
+1. **更换实例家族**：从 t3 改为 m6g（Graviton2），性能提升 40%，价格降低 20%
+2. **购买 Savings Plans**：承诺 1 年 Compute Savings Plan，节省 35%
+3. **优化存储**：改用 GP3 卷，IOPS 提升 4 倍，成本降低 20%
+4. **启用 CloudFront**：缓存静态资源，减少 70% 源站流量
+
+**最终效果**：
+- 月度账单从 $1,200 降至 $420
+- 性能提升 50%（响应时间从 200ms 降至 100ms）
+- 为下一阶段用户增长预留了 3 倍容量空间
+
+**核心启示**：
+> 云服务不是"买了就能用"，而是"需要持续优化"。第一次选型正确只能解决 20% 的问题，剩下的 80% 需要在运营过程中不断调整。
+
+---
+
+## 2. 计算服务选型：从 EC2/ECS 到函数计算
+
+### 2.1 计算服务的四种"性格"
+
+如果把云服务器比作交通工具，那么：
+
+| 服务类型 | 交通工具类比 | 特点 | 适用场景 |
+|----------|-------------|------|----------|
+| **虚拟服务器 (EC2/ECS)** | 私家车 | 完全掌控，但需自己驾驶 | 需要自定义环境、长期运行的应用 |
+| **无服务器函数 (Lambda/FC)** | 出租车 | 随叫随到，按行程付费 | 事件驱动、短时任务、API 后端 |
+| **容器服务 (EKS/ACK)** | 公交车 | 标准化路线，多人共享 | 微服务架构、需要编排的容器化应用 |
+| **Serverless 容器 (Fargate/ECI)** | 网约车 | 无需养车，随叫随走 | 不想管理服务器但需要容器化的场景 |
+
+👇 **动手点点看**：
+拖动滑块调整您的业务场景参数，获取最佳计算方案推荐。
+
+<ComputeServicesDemo />
+
+### 2.2 实战代码：AWS Lambda vs 阿里云函数计算
+
+**场景**：构建一个简单的图片缩略图生成服务。
+
+**AWS Lambda (Python)**：
+
+```python
+import json
+import boto3
+from PIL import Image
+import io
+
+s3 = boto3.client('s3')
+
+def lambda_handler(event, context):
+    # 从 S3 事件获取图片信息
+    bucket = event['Records'][0]['s3']['bucket']['name']
+    key = event['Records'][0]['s3']['object']['key']
+
+    # 下载原图
+    response = s3.get_object(Bucket=bucket, Key=key)
+    image = Image.open(io.BytesIO(response['Body'].read()))
+
+    # 生成缩略图
+    thumbnail = image.copy()
+    thumbnail.thumbnail((200, 200))
+
+    # 上传缩略图
+    thumbnail_key = key.replace('uploads/', 'thumbnails/')
+    buffer = io.BytesIO()
+    thumbnail.save(buffer, format='JPEG')
+    s3.put_object(
+        Bucket=bucket,
+        Key=thumbnail_key,
+        Body=buffer.getvalue(),
+        ContentType='image/jpeg'
+    )
+
+    return {
+        'statusCode': 200,
+        'body': json.dumps({
+            'message': 'Thumbnail created successfully',
+            'thumbnail': thumbnail_key
+        })
+    }
+```
+
+**阿里云函数计算 (Python)**：
+
+```python
+import json
+import oss2
+from PIL import Image
+import io
+import os
+
+# 从环境变量获取 OSS 配置
+OSS_ENDPOINT = os.environ['OSS_ENDPOINT']
+OSS_BUCKET = os.environ['OSS_BUCKET']
+OSS_ACCESS_KEY = os.environ['OSS_ACCESS_KEY']
+OSS_SECRET_KEY = os.environ['OSS_SECRET_KEY']
+
+def handler(event, context):
+    # 解析 OSS 事件
+    evt = json.loads(event)
+    oss_event = evt['events'][0]
+    bucket_name = oss_event['oss']['bucket']['name']
+    object_key = oss_event['oss']['object']['key']
+
+    # 初始化 OSS 客户端
+    auth = oss2.Auth(OSS_ACCESS_KEY, OSS_SECRET_KEY)
+    bucket = oss2.Bucket(auth, OSS_ENDPOINT, bucket_name)
+
+    # 下载原图
+    object_stream = bucket.get_object(object_key)
+    image = Image.open(io.BytesIO(object_stream.read()))
+
+    # 生成缩略图
+    thumbnail = image.copy()
+    thumbnail.thumbnail((200, 200))
+
+    # 上传缩略图
+    thumbnail_key = object_key.replace('uploads/', 'thumbnails/')
+    buffer = io.BytesIO()
+    thumbnail.save(buffer, format='JPEG')
+    bucket.put_object(thumbnail_key, buffer.getvalue())
+
+    return {
+        'statusCode': 200,
+        'body': json.dumps({
+            'message': '缩略图生成成功',
+            'thumbnail': thumbnail_key
+        })
+    }
+```
+
+**成本对比（每月 100 万次调用）**：
+
+| 服务商 | 计算费用 | 请求费用 | 总费用 | 特点 |
+|--------|----------|----------|--------|------|
+| AWS Lambda | $0（前 1M 免费） | $0.20/百万 | ~$0.20 | 免费额度高，超出后贵 |
+| 阿里云 FC | $0（前 100万 免费） | ¥0.0133/万次 | ~¥1.33 | 国内价格低，但免费额度少 |
+
+---
+
+## 3. 存储服务选型：对象存储 vs 块存储 vs 文件存储
+
+### 3.1 存储服务的"三种形态"
+
+如果把数据存储比作"存东西"，那么：
+
+| 存储类型 | 现实类比 | 数据访问方式 | 典型场景 |
+|----------|----------|--------------|----------|
+| **对象存储 (S3/OSS)** | 仓库 | 通过唯一 ID 访问，扁平结构 | 图片、视频、备份、静态网站 |
+| **块存储 (EBS/云盘)** | 硬盘 | 挂载到服务器，裸设备访问 | 数据库、需要文件系统的应用 |
+| **文件存储 (EFS/NAS)** | 共享文件夹 | 通过文件路径访问，层次结构 | 共享文件、内容管理、HPC |
+
+👇 **动手点点看**：
+选择您的存储场景，查看 AWS 和阿里云的对应服务及选型建议。
+
+<StorageServicesDemo />
+
+---
+
+## 4. 网络服务选型：VPC、负载均衡与 CDN
+
+### 4.1 网络服务的"交通规划"
+
+如果把云网络比作"城市交通系统"，那么：
+
+| 网络服务 | 交通类比 | 核心功能 | 典型场景 |
+|----------|----------|----------|----------|
+| **VPC/专有网络** | 封闭小区 | 逻辑隔离的网络环境 | 多应用隔离、安全合规 |
+| **ELB/SLB** | 交通调度员 | 流量分发、故障转移 | 高可用 Web 服务、应用集群 |
+| **CloudFront/CDN** | 快递站点 | 边缘缓存、就近访问 | 静态资源加速、全球分发 |
+| **Direct Connect** | 专属通道 | 专线连接、低延迟 | 混合云、大数据传输 |
+
+👇 **动手点点看**：
+探索 AWS 和阿里云网络服务的架构差异和选型建议。
+
+<NetworkServicesDemo />
+
+---
+
+## 5. 安全与身份认证服务
+
+### 5.1 云安全的"三道防线"
+
+| 安全层次 | AWS 服务 | 阿里云服务 | 核心功能 |
+|----------|----------|------------|----------|
+| **身份认证** | IAM | RAM | 用户管理、权限控制、访问密钥 |
+| **网络安全** | WAF + Shield | WAF + 高防 | DDoS 防护、Web 攻击防护 |
+| **数据安全** | KMS | KMS | 密钥管理、数据加密 |
+
+👇 **动手点点看**：
+对比 AWS IAM 和阿里云 RAM 的功能差异和最佳实践。
+
+<SecurityServicesDemo />
+
+---
+
+## 6. 计费模式与成本优化
+
+### 6.1 云服务的"四种买票方式"
+
+| 计费模式 | 类比 | 适用场景 | 节省潜力 |
+|----------|------|----------|----------|
+| **按需付费** | 单买票 | 测试环境、短期项目 | 0%（基准） |
+| **预留实例** | 月票/年票 | 长期稳定负载 | 30-60% |
+| **抢占式实例** | 候补票 | 容错批处理任务 | 60-90% |
+| **无服务器** | 计程车 | 事件驱动、流量波动大 | 视场景 40-70% |
+
+👇 **动手点点看**：
+计算不同计费模式下的成本对比和最优选择。
+
+<PricingModelDemo />
+
+---
+
+## 7. 实战：如何选择适合你的云服务组合？
+
+### 7.1 场景化选型决策树
+
+👇 **动手点点看**：
+根据您的业务场景，获取定制化的云服务选型建议。
+
+<ServiceSelectionDemo />
+
+---
+
+## 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+|----------|----------|------|
+| **EC2** | 弹性计算云 | AWS 的虚拟服务器服务，类似阿里云的 ECS |
+| **ECS** | 弹性计算服务 | 阿里云的虚拟服务器服务，类似 AWS 的 EC2 |
+| **Lambda** | 无服务器函数 | AWS 的事件驱动计算服务，类似阿里云的函数计算 |
+| **VPC** | 虚拟私有云 | 隔离的网络环境，AWS 和阿里云都有同名服务 |
+| **S3** | 简单存储服务 | AWS 的对象存储，类似阿里云的 OSS |
+| **OSS** | 对象存储服务 | 阿里云的对象存储，类似 AWS 的 S3 |
+| **RDS** | 关系型数据库服务 | 托管的数据库服务，AWS 和阿里云都有 |
+| **IAM** | 身份与访问管理 | 权限管理服务，AWS 和阿里云都有同名服务 |
+| **ELB/SLB** | 负载均衡 | 流量分发服务，AWS 叫 ELB，阿里云叫 SLB |
+| **CloudFront/CDN** | 内容分发网络 | 全球加速服务，AWS 叫 CloudFront，阿里云叫 CDN |
+
+---
+
+## 总结：云选型的本质
+
+通过本章的学习，我们可以得出几个核心结论：
+
+**从实践来看**：
+- 不是功能越多越好，而是匹配度越高越好
+- 第一次选型只能解决 20% 的问题，剩下 80% 需要在运营中持续优化
+- 多云策略不是"全都要"，而是"各取所长"
+
+**从成本视角看**：
+- 预留实例和 Savings Plans 是长期稳定负载的最优选择
+- 抢占式/Spot 实例适合容错性高的批处理任务
+- 无服务器架构在流量波动大的场景下最具成本优势
+
+**从架构视角看**：
+- 计算服务的选择决定了系统的弹性和扩展能力
+- 存储服务的选择影响了数据的可靠性和访问速度
+- 网络服务的选择直接关系到用户体验和安全性
+
+目标是：在给定的业务需求和预算约束下，让每一个云资源的投入都产生最大化的业务价值。
diff --git a/docs/zh-cn/appendix/cloud-storage-cdn.md b/docs/zh-cn/appendix/cloud-storage-cdn.md
new file mode 100644
index 0000000..126c030
--- /dev/null
+++ b/docs/zh-cn/appendix/cloud-storage-cdn.md
@@ -0,0 +1,1733 @@
+# 对象存储 + CDN 加速路径：从上传到用户访问
+
+> 💡 **学习指南**：本文会带你走完一条完整的链路——从文件上传到用户下载。你会看到对象存储如何像"智能仓库"一样管理海量文件，CDN 如何像"快递网点"一样把内容送到用户家门口，以及这中间有哪些"坑"等着你跳进去。建议先了解基础的 HTTP 请求和 DNS 解析原理。
+
+在开始之前，建议你先补几块"基础砖"：
+
+- **HTTP 请求流程**：可以先阅读 [浏览器输入 URL 后发生了什么](./web-basics/url-to-browser.md) 了解完整的请求链路。
+- **DNS 解析原理**：如果你对域名解析还不太熟悉，可以先看 [DNS 查询流程](./deployment/dns-flow.md) 的图解部分。
+
+---
+
+## 0. 引言：为什么文件上传下载这么"慢"？
+
+想象一下这个场景：你在一个图片社区上传了一张 10MB 的高清照片，结果等了半分钟才传完；而你的朋友在北京，点击下载却只要 2 秒。为什么同一张文件，上传和下载的体验天差地别？
+
+或者再想想：你的电商网站双十一搞活动，商品详情页突然涌入百万流量，服务器直接"躺平"。是带宽不够？还是架构设计有问题？
+
+这些问题的答案，都藏在**对象存储**和 **CDN** 这对"黄金搭档"里。
+
+---
+
+## 1. 对象存储：你的"智能云仓库"
+
+### 1.1 什么是对象存储？
+
+传统文件系统就像你家衣柜：衣服按"上衣/裤子/裙子"分层放，你要找一件衬衫，得先打开衣柜→上衣区→衬衫格。这种"层级嵌套"的模式，在文件数量爆炸时会变得极其笨重。
+
+对象存储则像现代仓储物流：每个包裹都有一个唯一的"快递单号"（对象键），你只需报单号，仓库机器人就能从海量包裹中精准取出。
+
+<ObjectStorageDemo />
+
+**核心区别一览**：
+
+| 维度 | 传统文件系统 | 对象存储 |
+| :--- | :--- | :--- |
+| **组织方式** | 层级目录树 | 扁平键值对 |
+| **访问协议** | POSIX（本地文件操作） | HTTP/REST API |
+| **扩展性** | 单机容量有限 | 近乎无限水平扩展 |
+| **元数据** | 基础属性（大小、时间） | 丰富的自定义元数据 |
+| **典型场景** | 本地办公文档 | 图片/视频/备份/静态资源 |
+
+### 1.2 对象存储的核心概念
+
+#### 桶（Bucket）：你的"仓库分区"
+
+桶是对象存储的顶级容器，相当于一个独立的命名空间。所有对象都必须存放在某个桶中。
+
+**命名规则**（以阿里云 OSS 为例）：
+- 全局唯一：在整个云厂商的所有用户中不能重复
+- 只能包含小写字母、数字和短横线
+- 必须以小写字母或数字开头和结尾
+- 长度在 3-63 个字符之间
+
+**实战踩坑**：曾经有个团队按业务线创建了几十个桶，结果月底账单出来傻眼了——每个桶都有最低存储费用和请求费用。建议：按"环境+用途"组合规划桶，比如 `prod-static-assets`、`dev-backup-archive`。
+
+#### 对象（Object）：你的"数据包裹"
+
+对象是存储的基本单元，由三部分组成：
+
+1. **键（Key）**：对象的唯一标识，相当于"快递单号"
+   - 示例：`images/avatar/2024/user123.jpg`
+   - 虽然看起来像路径，但本质只是字符串
+
+2. **数据（Data）**：对象的内容本身
+   - 可以是任意二进制数据
+   - 大小限制取决于云厂商（通常单个对象 5TB 以内）
+
+3. **元数据（Metadata）**：描述对象的附加信息
+   - 系统元数据：Content-Type、ETag、Last-Modified 等
+   - 自定义元数据：如 `x-oss-meta-owner`、`x-oss-meta-project`
+
+#### 访问控制：谁能动我的"仓库"？
+
+对象存储提供多层权限控制：
+
+| 层级 | 控制方式 | 典型场景 |
+| :--- | :--- | :--- |
+| **桶级别** | Bucket Policy（资源策略） | 禁止所有外网访问、只允许特定 IP |
+| **对象级别** | ACL（访问控制列表） | 公开图片、私有文档 |
+| **临时授权** | STS（安全令牌服务） | 前端直传、移动端上传 |
+
+**安全红线**：永远不要把 AccessKey ID 和 AccessKey Secret 写在前端代码里！正确做法是：前端向你的后端申请临时 STS 凭证，后端验证身份后返回带过期时间的临时凭证。
+
+---
+
+## 2. CDN：你的"全球快递网络"
+
+### 2.1 为什么需要 CDN？
+
+想象你开了一家网店，服务器放在深圳。现在有个用户在北京访问你的图片：
+
+- **没有 CDN**：请求从北京→河北→河南→湖北→湖南→广东→深圳，跨越 2000 多公里，来回就是 4000 多公里。光网络传输就要几十毫秒，遇到网络拥堵更惨。
+
+- **有了 CDN**：请求从北京直接到北京的 CDN 节点（可能就在北京联通机房），距离从 2000 公里变成 20 公里，延迟从 50ms 变成 5ms。
+
+这就是 CDN 的核心价值：**让内容离用户更近**。
+
+<CdnAccelerationDemo />
+
+### 2.2 CDN 的核心架构
+
+#### 边缘节点：离用户最近的"快递站"
+
+边缘节点是 CDN 网络中最接近用户的层级，通常部署在：
+- 运营商机房（联通/电信/移动）
+- 大城市互联网交换中心
+- 重要交通枢纽
+
+**中国主要 CDN 节点分布**：
+- 一线城市：北京、上海、广州、深圳
+- 二线城市：杭州、南京、成都、武汉、西安
+- 海外：香港、新加坡、东京、硅谷、法兰克福
+
+<EdgeNodeDistributionDemo />
+
+#### 源站：内容的"总仓库"
+
+源站是 CDN 回源获取内容的地方，可以是：
+- 对象存储（OSS/COS/S3）
+- 自建服务器（ECS/物理机）
+- 负载均衡（SLB/CLB）
+
+**关键配置**：
+- **回源 HOST**：CDN 节点访问源站时使用的域名/IP
+- **回源协议**：HTTP 还是 HTTPS
+- **回源端口**：80、443 还是自定义端口
+
+#### 中间层节点："区域分拨中心"
+
+在边缘节点和源站之间，CDN 通常还有一层或多层中间节点：
+- **汇聚节点**：聚合多个边缘节点的回源请求，减少源站压力
+- **区域中心**：负责一个大区的内容分发和调度
+
+这种分层架构的好处：
+1. **降低源站压力**：1000 个边缘节点的请求，可能只需要向源站发起 10 次
+2. **提高命中率**：热门内容在中间层就被拦截，不需要回源
+3. **故障隔离**：某条链路出问题，可以自动切换到其他路径
+
+### 2.3 CDN 加速的完整流程
+
+让我们跟踪一次真实的用户请求：
+
+<CachePolicyDemo />
+
+**Step 1：DNS 解析**（智能调度）
+```
+用户输入：cdn.example.com/image.jpg
+↓
+DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
+```
+这里的关键是**智能 DNS**：根据用户的运营商、地理位置、节点负载，返回最优的 CDN 节点 IP。
+
+**Step 2：边缘节点查找**（缓存命中？）
+```
+请求到达北京联通 CDN 节点（1.2.3.4）
+↓
+节点检查本地缓存：
+├─ 命中？直接返回内容 ✓
+└─ 未命中？继续下一步
+```
+
+**Step 3：回源获取**（层层向上）
+```
+边缘节点未命中
+↓
+向父节点（如：华北区域中心）请求
+├─ 父节点命中？返回内容
+└─ 父节点未命中？继续向上
+    ↓
+    向源站请求
+    ↓
+    源站返回内容
+```
+
+**Step 4：缓存并返回**（下次更快）
+```
+内容沿链路返回
+↓
+每层节点都缓存一份
+↓
+最终到达用户
+```
+
+这样，下次有用户请求同一个文件时，就能直接从边缘节点返回，实现"秒开"。
+
+---
+
+## 3. 从上传到访问：完整链路解析
+
+### 3.1 文件上传的三种方式
+
+<UploadProcessDemo />
+
+#### 方式一：客户端 → 服务端 → 对象存储（传统模式）
+
+```
+浏览器 → 你的后端服务器 → 对象存储
+```
+
+**流程**：
+1. 用户选择文件，点击上传
+2. 文件先上传到你的后端服务器
+3. 后端接收完整文件后，再转上传到对象存储
+4. 返回上传结果给用户
+
+**优点**：
+- 实现简单，前后端都好控制
+- 可以在后端做文件校验、格式转换
+- 敏感操作可以记录日志、做权限校验
+
+**缺点**：
+- **带宽双吃**：用户上传占用一次带宽，服务器转传又占用一次
+- **服务器压力大**：大文件会占用大量内存和 CPU
+- **上传慢**：相当于多了一道中转，用户感知到的上传时间更长
+
+**适用场景**：小文件（<10MB）、需要后端处理（如图片压缩、加水印）、内部管理系统。
+
+#### 方式二：客户端直传对象存储（现代推荐）
+
+```
+浏览器 ──────→ 对象存储
+        ↑
+        后端只签发临时凭证
+```
+
+**流程**：
+1. 用户选择文件，前端先向后端申请"上传凭证"
+2. 后端验证用户身份，向对象存储服务申请**临时 STS 凭证**（带过期时间）
+3. 后端把临时凭证返回给前端
+4. 前端拿着凭证，**直接上传文件到对象存储**
+5. 对象存储返回上传结果，前端通知后端"上传完成"
+
+**优点**：
+- **上传快**：少了中转环节，用户感知速度最快
+- **服务器压力小**：只处理凭证签发，不处理文件流
+- **带宽省**：只走一次上传流量
+- **安全性高**：临时凭证有过期时间，泄露也危害有限
+
+**缺点**：
+- 实现稍复杂，需要理解 STS、签名机制
+- 前端需要处理分片上传、断点续传等逻辑
+- 跨域（CORS）需要配置
+
+**适用场景**：大文件上传、用户生成内容（UGC）、需要高并发上传的业务。
+
+#### 方式三：分片上传 + 断点续传（大文件必备）
+
+```
+10GB 视频文件
+↓
+切分成 1000 个 10MB 的分片
+↓
+并行上传（同时传 5 个分片）
+↓
+断网了！已传 600 个
+↓
+恢复网络，从第 601 个继续传
+↓
+所有分片传完，发起"合并"请求
+```
+
+**为什么需要分片？**
+
+| 场景 | 不分片 | 分片 |
+| :--- | :--- | :--- |
+| **网络波动** | 传了 99% 断网，全部重传 | 只重传失败的分片 |
+| **上传速度** | 单线程，速度慢 | 多线程并行，速度快 |
+| **内存占用** | 需要缓存整个文件 | 只需缓存当前分片 |
+| **进度显示** | 只有 0% 和 100% | 精确到每个分片的进度 |
+
+**主流云厂商的分片规格**：
+
+| 厂商 | 分片大小限制 | 最大分片数 | 最小分片大小 |
+| :--- | :--- | :--- | :--- |
+| **阿里云 OSS** | 100MB | 10000 | 100KB |
+| **腾讯云 COS** | 5GB | 10000 | 1MB |
+| **AWS S3** | 5GB | 10000 | 5MB（推荐） |
+| **七牛云** | 100MB | 10000 | 4MB |
+
+### 3.2 CDN 回源策略详解
+
+<CachePolicyDemo />
+
+#### 什么是"回源"？
+
+CDN 边缘节点缓存了源站的内容，但当：
+- 用户请求的内容**第一次被访问**
+- 缓存的内容**已过期（TTL 到期）**
+- 缓存被**手动刷新/预热**
+
+CDN 节点就需要向**源站**请求最新内容，这个过程就叫"回源"。
+
+#### 回源的三种模式
+
+| 模式 | 原理 | 适用场景 | 优缺点 |
+| :--- | :--- | :--- | :--- |
+| **直接回源** | CDN 节点 → 源站 | 源站有公网 IP，且流量不大 | 简单直接，但源站压力大 |
+| **中间源回源** | CDN 节点 → 中间层 → 源站 | 大型网站，多层缓存架构 | 分担源站压力，架构复杂 |
+| ** OSS/COS 作为源站** | CDN 节点 → 对象存储 | 静态资源、图片、视频 | 最佳实践，成本低、性能好 |
+
+#### 回源配置实战
+
+**场景 1：对象存储作为源站（推荐）**
+
+```
+用户访问：cdn.example.com/images/photo.jpg
+                    ↓
+            CDN 边缘节点（北京）
+                    ↓
+            未命中，回源到源站
+                    ↓
+            源站：bucket-name.oss-cn-beijing.aliyuncs.com
+                    ↓
+            返回图片，CDN 缓存并响应用户
+```
+
+关键配置项：
+- **源站类型**：OSS/COS 域名 或 自定义源站
+- **回源协议**：HTTP 还是 HTTPS（建议 HTTPS）
+- **回源 HOST**：访问源站时使用的 Host 头
+- **回源 SNI**：HTTPS 回源时的服务器名称指示
+
+**场景 2：多源站负载均衡**
+
+当单个源站扛不住回源压力时，可以配置多个源站：
+
+```
+CDN 边缘节点
+    ├─ 源站 A (权重 50%)
+    ├─ 源站 B (权重 30%)
+    └─ 源站 C (权重 20%)
+```
+
+主备模式：
+```
+CDN 边缘节点
+    ├─ 主源站 A (健康时全部流量)
+    └─ 备源站 B (主源故障时切换)
+```
+
+#### 回源带宽 vs CDN 带宽
+
+这里有个容易混淆的概念：
+
+| 指标 | 定义 | 计费关系 |
+| :--- | :--- | :--- |
+| **CDN 下行带宽** | 从 CDN 节点到用户的流量 | 通常按流量计费的 CDN 费用 |
+| **回源带宽** | 从源站到 CDN 节点的流量 | 通常对象存储或源站出流量费用 |
+
+**省钱技巧**：
+- 提高 CDN 命中率（让更多请求命中缓存，减少回源）
+- 设置合理的缓存时间（TTL）
+- 使用预热功能，在用户访问前就缓存热点内容
+- 开启"跟随 301/302"，避免不必要的回源跳转
+
+### 3.3 缓存策略配置
+
+<CachePolicyDemo />
+
+#### 缓存键（Cache Key）：决定什么算"同一个文件"
+
+CDN 如何判断两次请求是否应该返回同一个缓存副本？靠的就是**缓存键**。
+
+**默认缓存键通常包括**：
+- URL 路径（不含查询参数）
+- 例如：`/images/photo.jpg`
+
+**问题场景**：
+```
+用户 A 请求：/images/photo.jpg?w=100&h=100  (100x100 缩略图)
+用户 B 请求：/images/photo.jpg?w=800&h=600  (800x600 大图)
+```
+
+如果缓存键只包含路径，两张不同尺寸的图片会被认为是同一个文件，导致混乱。
+
+**解决方案：自定义缓存键规则**
+
+| 规则 | 示例 | 效果 |
+| :--- | :--- | :--- |
+| **保留指定查询参数** | 保留 `w`、`h` | 不同尺寸分别缓存 |
+| **保留所有查询参数** | 保留全部 | 完全精确匹配 |
+| **忽略特定查询参数** | 忽略 `token`、`timestamp` | 带时间戳的 URL 能命中缓存 |
+| **包含请求头** | 包含 `Accept-Language` | 不同语言返回不同内容 |
+
+**实战配置示例**（阿里云 CDN）：
+```
+缓存键规则：
+- URL 路径：/images/*
+- 保留查询参数：w, h, format
+- 忽略查询参数：token, timestamp, utm_source
+```
+
+#### 缓存时间（TTL）：内容"新鲜度"的平衡
+
+TTL（Time To Live）决定了内容在 CDN 节点上缓存多久。设置太短，回源多、成本高；设置太长，内容更新后用户看到旧内容。
+
+**按文件类型设置 TTL 的建议**：
+
+| 文件类型 | 建议 TTL | 原因 |
+| :--- | :--- | :--- |
+| HTML 页面 | 0-5 分钟 | 内容频繁更新，需要实时 |
+| JS/CSS 文件 | 1 年（配合文件名 hash） | 内容不变，文件名变化即缓存失效 |
+| 图片/视频 | 7-30 天 | 更新频率低，可长期缓存 |
+| 字体文件 | 1 年 | 几乎不变 |
+| API 响应 | 0-5 分钟（视业务） | 数据实时性要求高 |
+
+**前端工程化配合 CDN 的最佳实践**：
+
+```javascript
+// webpack/vite 配置
+output: {
+  filename: 'js/[name]-[contenthash:8].js',
+  chunkFilename: 'js/[name]-[contenthash:8].chunk.js',
+}
+```
+
+生成的文件名：`app-a3f2b1c9.js`
+
+- 文件内容变化 → hash 变化 → 新 URL → 自然缓存失效
+- 文件内容不变 → hash 不变 → URL 不变 → 长期缓存命中
+
+#### 缓存刷新与预热
+
+**手动刷新（应急场景）**：
+
+当你更新了源站内容，但 CDN 缓存还没过期，用户看到的还是旧内容：
+
+| 刷新类型 | 效果 | 耗时 | 适用场景 |
+| :--- | :--- | :--- | :--- |
+| **URL 刷新** | 指定 URL 的缓存失效 | 5-10 分钟 | 单个文件更新 |
+| **目录刷新** | 指定目录下所有内容失效 | 10-30 分钟 | 批量更新 |
+| **全站刷新** | 整个域名的缓存全部失效 | 30 分钟以上 | 紧急回滚 |
+
+**重要提醒**：刷新只是让缓存失效，下次请求会回源拉取新内容。不要在高峰期大批量刷新，否则可能导致源站被打爆。
+
+**预热（ proactive 优化）**：
+
+刷新是被动的（内容已更新），预热是主动的（提前缓存）。
+
+```
+场景：明天上午 10 点要发一篇爆款文章
+
+今晚就提交预热请求：
+- URL: https://cdn.example.com/articles/爆款文章.html
+- 预热范围：全国所有边缘节点
+
+效果：
+明天 10 点用户访问时，内容已经在边缘节点等着了
+→ 零回源延迟，秒开体验
+```
+
+---
+
+## 4. 流量调度：让用户访问"最近"的节点
+
+<TrafficSchedulingDemo />
+
+### 4.1 智能 DNS 调度
+
+传统 DNS 解析：
+```
+用户问：cdn.example.com 的 IP 是什么？
+DNS 答：1.2.3.4（固定的）
+```
+
+智能 DNS 解析：
+```
+用户（北京联通）问：cdn.example.com 的 IP 是什么？
+智能 DNS：让我查查... 北京联通的 CDN 节点是 1.2.3.4
+
+用户（上海电信）问：cdn.example.com 的 IP 是什么？
+智能 DNS：上海电信的 CDN 节点是 5.6.7.8
+```
+
+**调度维度**：
+| 维度 | 说明 | 效果 |
+| :--- | :--- | :--- |
+| **地理位置** | 按省/市/国家分配 | 就近访问，降低延迟 |
+| **运营商** | 联通/电信/移动/BGP | 同运营商传输，避免跨网 |
+| **节点负载** | 实时 CPU/带宽/QPS | 避开过载节点 |
+| **节点健康** | 探测可用性 | 自动剔除故障节点 |
+| **成本因素** | 带宽单价差异 | 平衡性能与成本 |
+
+### 4.2 HTTP DNS 与 IP 直连
+
+传统 DNS 有个问题：**DNS 劫持和解析延迟**。
+
+**HTTP DNS 方案**：
+```
+客户端 → 绕过系统 DNS → 直接问 HTTP DNS 服务（如 223.5.5.5:80）
+         ↓
+    返回最优 IP 列表（带权重）
+         ↓
+    客户端根据网络质量探测，选择最优 IP
+```
+
+优势：
+- 防劫持：不走运营商 DNS
+- 更精准：可以按客户端网络质量选择 IP
+- 实时性：故障切换更快
+
+**实战建议**：
+- 移动端 APP 强烈建议接入 HTTP DNS
+- Web 端可以使用 CDN 提供的 CNAME 调度
+- 关键业务可以做多 IP 容灾（一个域名返回多个 IP）
+
+---
+
+## 5. HTTPS 优化：安全与性能的平衡
+
+<HttpsOptimizationDemo />
+
+### 5.1 为什么 CDN 上 HTTPS 很重要？
+
+**场景对比**：
+```
+无 HTTPS：
+用户访问 http://cdn.example.com/image.jpg
+↓
+浏览器地址栏显示"不安全"
+↓
+某些浏览器/APP 直接拦截访问
+↓
+SEO 排名降低
+```
+
+```
+有 HTTPS：
+用户访问 https://cdn.example.com/image.jpg
+↓
+浏览器显示绿色锁标志
+↓
+HTTP/2 多路复用生效
+↓
+性能 + 安全双提升
+```
+
+### 5.2 CDN HTTPS 配置要点
+
+#### 证书管理
+
+| 方案 | 说明 | 成本 | 适用场景 |
+| :--- | :--- | :--- | :--- |
+| **云厂商免费证书** | 阿里云/腾讯云等提供 | 免费 | 单域名，快速上手 |
+| **Let's Encrypt** | 社区免费证书 | 免费 | 自动化部署 |
+| **商业 DV/OV/EV 证书** | 赛门铁克、GeoTrust 等 | ￥几百-几万/年 | 企业级、需要绿条 |
+| **泛域名证书** | *.example.com | ￥几千/年 | 多子域名 |
+
+**实战建议**：
+- 测试环境：Let's Encrypt 或云厂商免费证书
+- 生产环境：泛域名证书（省事）或单域名 OV 证书（省钱）
+- 注意证书过期时间，设置自动续期提醒
+
+#### HTTPS 优化配置
+
+**TLS 版本选择**：
+```
+推荐配置：仅 TLS 1.2 和 TLS 1.3
+兼容配置：TLS 1.1 + TLS 1.2 + TLS 1.3（兼容老旧浏览器）
+```
+
+**密码套件**：
+```
+推荐：ECDHE 密钥交换 + AES-GCM 加密
+禁用：DES、RC4、MD5、SHA1
+```
+
+**OCSP Stapling**：
+```
+功能：CDN 节点预获取证书吊销状态
+效果：减少客户端验证时间 200-500ms
+建议：务必开启
+```
+
+**TLS 会话复用**：
+```
+Session ID 复用：客户端带着上次 Session ID，服务端恢复会话
+Session Ticket 复用：服务端把会话状态加密发给客户端，下次带来
+效果：避免完整 TLS 握手，减少 1-RTT
+```
+
+### 5.3 HTTP/2 与 HTTP/3 在 CDN 上的应用
+
+**HTTP/2 多路复用**：
+```
+HTTP/1.1：
+请求 1 (index.html) ────────────────→
+响应 1 ←──────────────────────────────
+请求 2 (style.css) ─────────────────→
+响应 2 ←──────────────────────────────
+请求 3 (script.js) ─────────────────→
+响应 3 ←──────────────────────────────
+（串行，一个完了下一个）
+
+HTTP/2：
+请求 1 ──→
+请求 2 ──→   合并在一个 TCP 连接上，帧交错传输
+请求 3 ──→
+响应 1 ←──   按优先级流式返回
+响应 2 ←──
+响应 3 ←──
+（并行，一个连接多路复用）
+```
+
+**HTTP/2 服务端推送**：
+```
+场景：用户请求 index.html，里面引用了 style.css 和 script.js
+
+传统方式：
+1. 用户下载 index.html
+2. 解析发现需要 style.css 和 script.js
+3. 再发两个请求获取
+
+HTTP/2 推送：
+1. 用户请求 index.html
+2. CDN 节点返回 index.html 的同时，主动推送 style.css 和 script.js
+3. 用户解析 html 时，资源已经在缓存里了
+
+注意：推送要谨慎，推多了浪费带宽，推少了没效果
+```
+
+**HTTP/3 (QUIC)**：
+```
+HTTP/2 的问题：基于 TCP，队头阻塞
+→ 一个 TCP 包丢失，整个连接等待重传
+
+HTTP/3 的解决：基于 QUIC（UDP 之上实现可靠传输）
+→ 每个流独立，一个流阻塞不影响其他流
+→ 连接迁移：WiFi 切 4G，连接不中断
+→ 0-RTT 握手：第一次访问也能快速建立连接
+
+现状：2024 年主流 CDN 已支持 HTTP/3，建议开启
+```
+
+---
+
+## 6. 访问分析：看懂你的 CDN 报表
+
+<AccessAnalyticsDemo />
+
+### 6.1 核心指标解读
+
+#### 带宽（Bandwidth）
+
+```
+定义：单位时间内传输的数据量
+单位：bps（比特每秒）、Mbps、Gbps
+
+CDN 带宽 = 所有边缘节点的出流量总和
+
+注意区分：
+- 计费带宽：通常按 95 峰值或日峰值计费
+- 实际带宽：实时传输速率
+```
+
+**带宽与流量的关系**：
+```
+1 Mbps 带宽持续跑 1 小时 = 450 MB 流量
+（计算：1,000,000 bps × 3600s ÷ 8 ÷ 1024 ÷ 1024 ≈ 429 MB）
+```
+
+#### QPS（Queries Per Second）
+
+```
+定义：每秒查询/请求数
+
+CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
+
+注意：QPS 高不代表带宽高
+- 小文件场景：QPS 很高，带宽不高
+- 大文件场景：QPS 不高，带宽很高
+```
+
+#### 命中率（Hit Ratio）
+
+```
+定义：在 CDN 边缘节点命中的请求占总请求的比例
+
+计算公式：
+命中率 = (命中数 / 总请求数) × 100%
+或
+命中率 = (1 - 回源流量 / 总出流量) × 100%
+
+行业标准：
+- 图片/视频/JS/CSS：> 95%
+- HTML 页面：50-80%（视更新频率）
+- API 接口：通常不缓存或极低
+```
+
+**命中率低的常见原因**：
+
+| 原因 | 现象 | 解决方案 |
+| :--- | :--- | :--- |
+| 缓存时间太短 | TTL 只有几分钟 | 根据文件类型调整 TTL |
+| 查询参数变化 | URL 带随机数 | 配置忽略特定参数 |
+| 缓存键设置不当 | 不该区分的被区分了 | 优化缓存键规则 |
+| 内容更新频繁 | 文件经常被覆盖 | 使用版本号或 hash 文件名 |
+| 首次访问多 | 新内容或新节点 | 提前预热 |
+
+### 6.2 日志分析与问题排查
+
+#### CDN 日志字段解析
+
+典型 CDN 访问日志包含以下字段：
+
+```
+时间 | 客户端 IP | 请求方法 | URL | HTTP 状态码 | 响应大小 | 缓存状态 | 响应时间 | Referer | User-Agent
+
+示例：
+2024-01-15 14:32:01 | 114.114.114.114 | GET | https://cdn.example.com/images/photo.jpg | 200 | 153600 | HIT | 23 | https://example.com/ | Mozilla/5.0...
+```
+
+关键字段解释：
+
+| 字段 | 说明 | 分析价值 |
+| :--- | :--- | :--- |
+| `cache_status` | 缓存状态 | HIT（命中）、MISS（未命中）、EXPIRED（过期） |
+| `response_time` | 响应时间（ms） | 判断用户体验，>500ms 需优化 |
+| `http_status` | HTTP 状态码 | 404/500 错误排查 |
+| `bytes_sent` | 发送字节数 | 带宽统计 |
+
+#### 常见问题排查
+
+**问题 1：用户反映访问慢**
+
+排查步骤：
+```
+1. 看日志 response_time
+   - 如果很大（>500ms）：检查是缓存 MISS 还是源站慢
+
+2. 检查 cache_status
+   - HIT：缓存命中，慢可能是文件太大或节点问题
+   - MISS：未命中，需优化缓存策略或命中率
+
+3. 检查客户端 IP 分布
+   - 某些地区慢：可能是该节点负载高或覆盖不足
+```
+
+**问题 2：缓存不生效，每次都回源**
+
+排查清单：
+```
+□ 源站响应头是否有 Cache-Control: no-cache / private？
+□ URL 是否带随机参数（如 ?_=123456）？
+□ 缓存键配置是否正确？
+□ TTL 设置是否过短？
+□ 是否命中浏览器本地缓存而非 CDN？
+```
+
+**问题 3：费用暴涨**
+
+排查方向：
+```
+1. 看账单明细
+   - CDN 流量费高：检查是否有大文件被频繁访问，或被盗链
+   - 回源流量费高：检查命中率是否骤降
+   - 请求数费用高：检查是否有 CC 攻击或爬虫
+
+2. 看访问日志
+   - 是否有大量 404 请求（可能是扫描或配置错误）
+   - Referer 是否异常（判断是否被盗链）
+
+3. 安全设置
+   - 开启防盗链（Referer 白名单）
+   - 开启 IP 黑名单/白名单
+   - 配置 CC 防护
+```
+
+---
+
+## 7. 实战案例：从 0 搭建图片加速方案
+
+### 7.1 业务场景
+
+假设你是一个图片社区的技术负责人，面临以下挑战：
+
+- **用户上传**：用户每天上传 100 万张图片（平均 2MB/张）
+- **用户访问**：每天 5000 万次图片查看请求
+- **访问分布**：用户遍布全国，海外也有少量访问
+- **性能要求**：图片加载时间 < 500ms
+- **成本预算**：尽量控制在每月 5 万以内
+
+### 7.2 架构设计
+
+```
+                         ┌──────────────────────────────────────┐
+                         │           用户上传流程                  │
+                         └──────────────────────────────────────┘
+
+   用户浏览器                                    后端服务                      对象存储
+       │                                            │                            │
+       │  1. 申请上传凭证                            │                            │
+       │───────────────────────────────────────────>│                            │
+       │                                            │                            │
+       │                                            │  2. 申请 STS 临时凭证        │
+       │                                            │───────────────────────────>│
+       │                                            │                            │
+       │                                            │  3. 返回 STS 凭证          │
+       │                                            │<───────────────────────────│
+       │                                            │                            │
+       │  4. 返回上传凭证（含 STS）                  │
+       │<───────────────────────────────────────────│                            │
+       │                                            │                            │
+       │  5. 直接上传文件（使用 STS 签名）          │
+       │──────────────────────────────────────────────────────────────────────>│
+       │                                            │                            │
+       │  6. 返回上传结果（URL、ETag 等）           │
+       │<──────────────────────────────────────────────────────────────────────│
+       │                                            │                            │
+       │  7. 通知后端上传完成（保存到数据库）        │
+       │───────────────────────────────────────────>│                            │
+
+
+                         ┌──────────────────────────────────────┐
+                         │           用户访问流程                  │
+                         └──────────────────────────────────────┘
+
+   用户浏览器              DNS 解析              CDN 节点              对象存储（源站）
+       │                     │                     │                     │
+       │  1. 请求图片 URL    │                     │                     │
+       │────────────────────────────────────────>│                     │
+       │                     │                     │                     │
+       │                     │  2. DNS 查询        │                     │
+       │                     │────────────────────>│                     │
+       │                     │                     │                     │
+       │                     │  3. 返回最优节点 IP │                     │
+       │                     │<────────────────────│                     │
+       │                     │                     │                     │
+       │  4. 连接 CDN 节点   │                     │                     │
+       │────────────────────────────────────────>│                     │
+       │                     │                     │                     │
+       │                     │  5. 检查缓存        │                     │
+       │                     │                     ├─ 命中？直接返回     │
+       │                     │                     └─ 未命中？继续        │
+       │                     │                     │                     │
+       │                     │                     │  6. 回源获取       │
+       │                     │                     │──────────────────>│
+       │                     │                     │                     │
+       │                     │                     │  7. 返回文件       │
+       │                     │                     │<──────────────────│
+       │                     │                     │                     │
+       │                     │  8. 缓存并响应      │                     │
+       │<────────────────────────────────────────│                     │
+```
+
+### 7.3 关键配置详解
+
+#### 对象存储配置
+
+**存储桶规划**：
+```
+ Bucket: myapp-images-prod
+ ├─ 目录结构：
+ │   ├─ uploads/           # 用户上传的原图
+ │   │   ├─ 2024/01/15/user123-abc.jpg
+ │   │   └─ 2024/01/15/user456-def.png
+ │   ├─ thumbnails/        # 缩略图
+ │   │   ├─ small/         # 100x100
+ │   │   ├─ medium/        # 400x300
+ │   │   └─ large/         # 800x600
+ │   └─ processed/         # 处理后的图片（加水印等）
+ │
+ ├─ 访问权限：
+ │   ├─ 原图目录：私有（需签名访问）
+ │   ├─ 缩略图目录：公共读
+ │   └─ 跨域 CORS：允许 *.myapp.com 访问
+ │
+ └─ 生命周期策略：
+     ├─ 上传 7 天后：低频存储（省 40% 费用）
+     ├─ 上传 90 天后：归档存储（省 70% 费用）
+     └─ 上传 3 年后：自动删除（或转存到更便宜的冷存储）
+```
+
+**CORS 跨域配置**：
+```xml
+<CORSConfiguration>
+  <CORSRule>
+    <AllowedOrigin>https://myapp.com</AllowedOrigin>
+    <AllowedOrigin>https://www.myapp.com</AllowedOrigin>
+    <AllowedMethod>GET</AllowedMethod>
+    <AllowedMethod>HEAD</AllowedMethod>
+    <AllowedHeader>*</AllowedHeader>
+    <ExposeHeader>ETag</ExposeHeader>
+    <ExposeHeader>x-oss-request-id</ExposeHeader>
+    <MaxAgeSeconds>3600</MaxAgeSeconds>
+  </CORSRule>
+</CORSConfiguration>
+```
+
+#### CDN 加速配置
+
+**缓存策略配置**：
+```
+全局默认规则：
+├─ 缓存键：URL 路径 + 保留 w、h、format 查询参数
+├─ 默认 TTL：7 天
+└─ 回源 HOST：自动跟随
+
+按文件类型细分：
+├─ *.html：
+│   ├─ TTL：5 分钟
+│   └─ 优先从内存缓存读取
+│
+├─ *.js, *.css：
+│   ├─ TTL：1 年
+│   └─ 忽略查询参数（因为文件名有 hash）
+│
+├─ *.jpg, *.png, *.gif, *.webp：
+│   ├─ TTL：30 天
+│   ├─ 保留查询参数（w、h、format 用于动态裁剪）
+│   └─ 启用图片自动压缩优化
+│
+└─ /api/*：
+    ├─ TTL：0（不缓存）
+    └─ 直接回源
+```
+
+**HTTPS 优化配置**：
+```
+证书配置：
+├─ 证书类型：泛域名证书 *.myapp.com
+├─ 部署方式：CDN 控制台上传，自动续期
+└─ 备用证书：EV 证书用于主域名（显示绿色地址栏）
+
+TLS 配置：
+├─ 最低 TLS 版本：1.2（兼容性与安全平衡）
+├─ 最高 TLS 版本：1.3
+├─ 密码套件：仅启用强加密套件
+├─ OCSP Stapling：开启
+├─ TLS 会话复用：开启 Session Ticket
+└─ HSTS：开启（max-age=31536000）
+
+HTTP/2 与 HTTP/3：
+├─ HTTP/2：开启（多路复用、头部压缩）
+├─ HTTP/2 Server Push：按需开启（推荐用 Preload 替代）
+└─ HTTP/3 (QUIC)：开启（实验性功能，逐步放量）
+```
+
+### 7.4 成本控制策略
+
+#### 费用构成分析
+
+```
+月度 CDN + 对象存储费用构成：
+
+CDN 部分：
+├─ 下行流量费（大头，约 60%）
+│   ├─ 中国大陆：0.15-0.30 元/GB
+│   ├─ 亚太地区：0.40-0.80 元/GB
+│   └─ 欧美：0.30-0.60 元/GB
+│
+├─ 请求数费用（小头，约 5%）
+│   ├─ HTTP：0.01-0.05 元/万次
+│   └─ HTTPS：0.05-0.15 元/万次（因为 TLS 握手消耗资源）
+│
+├─ 带宽峰值费用（可选计费方式）
+│   └─ 95 峰值计费：适合流量波动大的场景
+│
+└─ 增值功能费（约 5%）
+    ├─ HTTPS 证书管理
+    ├─ WAF 防护
+    ├─ 实时日志推送
+    └─ 边缘脚本/函数
+
+对象存储部分：
+├─ 存储容量费（约 15%）
+│   ├─ 标准存储：0.12-0.15 元/GB/月
+│   ├─ 低频存储：0.08-0.10 元/GB/月
+│   └─ 归档存储：0.03-0.05 元/GB/月
+│
+├─ 请求费用（约 5%）
+│   ├─ PUT：0.01-0.05 元/万次
+│   └─ GET：0.005-0.01 元/万次
+│
+├─ 数据取回费用（低频/归档）
+│   └─ 提前删除或取回收额外费用
+│
+└─ 回源出流量费（约 10%）
+    └─ CDN 回源到对象存储的流量费
+```
+
+#### 省钱技巧实战
+
+**技巧 1：存储分级，自动生命周期管理**
+
+```yaml
+# 生命周期规则示例
+rules:
+  - id: image-lifecycle
+    prefix: uploads/
+    transitions:
+      # 7 天后转低频存储，省 30% 费用
+      - days: 7
+        storageClass: IA
+      # 90 天后转归档存储，省 70% 费用
+      - days: 90
+        storageClass: Archive
+    # 3 年后自动删除
+    expiration:
+      days: 1095
+```
+
+**技巧 2：提高 CDN 命中率，减少回源**
+
+```
+命中率从 90% 提升到 95% 意味着什么？
+
+假设：
+- 日流量：10 TB
+- 命中率 90%：回源 1 TB
+- 命中率 95%：回源 0.5 TB
+
+节省回源流量：0.5 TB/天 × 0.15 元/GB × 30 天 = 2250 元/月
+```
+
+**技巧 3：压缩与格式优化**
+
+```
+图片优化方案：
+├─ 原图存储在对象存储（不直接对外）
+├─ CDN 开启图片处理功能：
+│   ├─ 格式自动转换：JPEG → WebP/AVIF（省 30-50%）
+│   ├─ 质量自动压缩：视觉无损压缩（省 20-40%）
+│   ├─ 尺寸自适应：根据设备返回合适尺寸
+│   └─ 渐进式加载：先模糊后清晰
+└─ 效果：带宽成本降低 50-70%
+```
+
+**技巧 4：带宽峰值封顶与告警**
+
+```yaml
+# 带宽封顶配置
+bandwidth_cap:
+  daily_limit: 500  # Mbps，日峰值超过则自动停用 CDN
+  monthly_limit: 10000  # GB，月流量超过则停用
+
+  # 告警阈值
+  alerts:
+    - threshold: 70%  # 达到 70% 发告警
+      channels: [sms, email]
+    - threshold: 90%  # 达到 90% 打电话
+      channels: [phone]
+```
+
+---
+
+## 8. 总结：对象存储 + CDN 的黄金法则
+
+### 8.1 架构设计原则
+
+**原则 1：动静分离**
+```
+动态内容（API、HTML）→ 走源站或边缘函数
+静态内容（图片、JS、CSS、视频）→ 走 CDN + 对象存储
+```
+
+**原则 2：就近服务**
+```
+用户在哪里，内容就缓存到哪里
+→ 选择覆盖广的 CDN 服务商
+→ 启用智能 DNS 调度
+→ 重要内容提前预热
+```
+
+**原则 3：分层缓存**
+```
+浏览器本地缓存（最强）
+    ↓
+CDN 边缘节点缓存（次强）
+    ↓
+CDN 中间层/区域节点（兜底）
+    ↓
+对象存储/源站（最后防线）
+```
+
+**原则 4：成本与体验的平衡**
+```
+存储分级：热数据标准存储，冷数据归档存储
+缓存策略：高频内容长 TTL，低频内容短 TTL
+压缩优化：WebP/AVIF 格式，智能质量压缩
+监控告警：设置带宽封顶，防止异常流量
+```
+
+### 8.2 避坑清单
+
+**存储桶命名与权限**
+- [ ] 桶名全局唯一，避免被占用
+- [ ] 私有文件不要设置为公共读
+- [ ] AccessKey 不要写在前端代码里，用 STS 临时凭证
+- [ ] 启用服务端加密（SSE）保护敏感数据
+
+**CDN 缓存配置**
+- [ ] HTML 文件 TTL 不要太长（建议 < 5 分钟）
+- [ ] JS/CSS 建议用带 hash 的文件名，TTL 设为 1 年
+- [ ] 缓存键要合理，不要把用户信息等变量放进去
+- [ ] 重要更新后记得刷新缓存或预热
+
+**HTTPS 安全**
+- [ ] 证书不要过期，设置自动续期
+- [ ] 最低 TLS 版本建议 1.2
+- [ ] 开启 HSTS 防止降级攻击
+- [ ] 敏感 Cookie 设置 Secure 和 HttpOnly
+
+**成本控制**
+- [ ] 开启带宽封顶告警，防止异常流量
+- [ ] 低频/归档存储有最小存储时间和提前删除费，注意规则
+- [ ] 回源流量费也很贵，努力提高 CDN 命中率
+- [ ] 定期分析访问日志，清理僵尸资源
+
+---
+
+## 9. 实战代码模板
+
+### 9.1 前端直传对象存储（JavaScript）
+
+```javascript
+/**
+ * 对象存储直传工具类
+ * 支持：阿里云 OSS、腾讯云 COS、AWS S3
+ */
+class DirectUploader {
+  constructor(config) {
+    this.provider = config.provider // 'oss' | 'cos' | 's3'
+    this.region = config.region
+    this.bucket = config.bucket
+    this.getCredentials = config.getCredentials // 获取临时凭证的函数
+  }
+
+  /**
+   * 获取 STS 临时凭证
+   */
+  async fetchCredentials() {
+    // 向后端申请临时凭证
+    const credentials = await this.getCredentials()
+    return {
+      accessKeyId: credentials.accessKeyId,
+      accessKeySecret: credentials.accessKeySecret,
+      sessionToken: credentials.securityToken || credentials.sessionToken,
+      expiration: credentials.expiration
+    }
+  }
+
+  /**
+   * 生成上传签名（适用于前端计算签名）
+   */
+  generateSignature(credentials, fileKey, fileType, options = {}) {
+    const timestamp = new Date().toISOString()
+    const date = timestamp.slice(0, 10).replace(/-/g, '')
+
+    // 不同厂商的签名算法略有差异
+    switch (this.provider) {
+      case 'oss':
+        return this._ossSignature(credentials, fileKey, date, options)
+      case 'cos':
+        return this._cosSignature(credentials, fileKey, date, options)
+      case 's3':
+        return this._s3Signature(credentials, fileKey, date, options)
+      default:
+        throw new Error('Unknown provider')
+    }
+  }
+
+  /**
+   * 单文件上传（小文件 < 100MB）
+   */
+  async upload(file, options = {}) {
+    const credentials = await this.fetchCredentials()
+    const fileKey = this._generateFileKey(file, options.directory)
+
+    const formData = new FormData()
+
+    // 构建表单字段（不同厂商字段名不同）
+    const formFields = this._buildFormFields(credentials, fileKey, file.type, options)
+    Object.entries(formFields).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+
+    formData.append('file', file)
+
+    // 发送上传请求
+    const uploadUrl = this._getUploadUrl()
+    const response = await fetch(uploadUrl, {
+      method: 'POST',
+      body: formData,
+      // 如果上传大文件，可能需要设置更长的超时
+      signal: options.signal // 支持 AbortController 取消上传
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw new Error(`Upload failed: ${response.status} ${errorText}`)
+    }
+
+    return {
+      url: this._getFileUrl(fileKey),
+      key: fileKey,
+      etag: response.headers.get('ETag'),
+      size: file.size
+    }
+  }
+
+  /**
+   * 分片上传（大文件 > 100MB）
+   */
+  async multipartUpload(file, options = {}) {
+    const partSize = options.partSize || 10 * 1024 * 1024 // 默认 10MB/片
+    const parallel = options.parallel || 3 // 默认 3 个并发
+
+    const credentials = await this.fetchCredentials()
+    const fileKey = this._generateFileKey(file, options.directory)
+
+    // 1. 初始化分片上传
+    const uploadId = await this._initMultipartUpload(credentials, fileKey, file.type)
+
+    // 2. 计算分片
+    const parts = []
+    const totalParts = Math.ceil(file.size / partSize)
+    for (let i = 0; i < totalParts; i++) {
+      const start = i * partSize
+      const end = Math.min(start + partSize, file.size)
+      parts.push({
+        number: i + 1,
+        start,
+        end,
+        blob: file.slice(start, end)
+      })
+    }
+
+    // 3. 上传分片（带并发控制和断点续传）
+    const uploadedParts = []
+    const failedParts = []
+
+    // 支持断点续传：检查哪些分片已上传
+    if (options.resume) {
+      const existingParts = await this._listParts(credentials, fileKey, uploadId)
+      for (const part of existingParts) {
+        uploadedParts.push(part)
+      }
+    }
+
+    // 过滤出未上传的分片
+    const pendingParts = parts.filter(p =>
+      !uploadedParts.some(up => up.partNumber === p.number)
+    )
+
+    // 并发上传
+    const uploadPart = async (part) => {
+      try {
+        const etag = await this._uploadPart(credentials, fileKey, uploadId, part)
+        return { partNumber: part.number, etag }
+      } catch (error) {
+        failedParts.push({ part, error })
+        throw error
+      }
+    }
+
+    // 使用 Promise.all 控制并发
+    const chunks = []
+    for (let i = 0; i < pendingParts.length; i += parallel) {
+      chunks.push(pendingParts.slice(i, i + parallel))
+    }
+
+    for (const chunk of chunks) {
+      const results = await Promise.allSettled(chunk.map(uploadPart))
+      for (const result of results) {
+        if (result.status === 'fulfilled') {
+          uploadedParts.push(result.value)
+        }
+      }
+    }
+
+    // 检查是否所有分片都上传成功
+    if (uploadedParts.length !== totalParts) {
+      throw new Error(`Upload incomplete: ${uploadedParts.length}/${totalParts} parts uploaded`)
+    }
+
+    // 4. 完成分片上传（合并分片）
+    await this._completeMultipartUpload(credentials, fileKey, uploadId, uploadedParts)
+
+    return {
+      url: this._getFileUrl(fileKey),
+      key: fileKey,
+      size: file.size,
+      parts: totalParts
+    }
+  }
+
+  /**
+   * 生成文件存储路径
+   */
+  _generateFileKey(file, directory = '') {
+    const date = new Date()
+    const datePath = `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
+    const random = Math.random().toString(36).substring(2, 10)
+    const ext = file.name.split('.').pop() || 'bin'
+    const key = directory
+      ? `${directory}/${datePath}/${random}.${ext}`
+      : `${datePath}/${random}.${ext}`
+    return key
+  }
+
+  // ============ 各厂商特定方法 ============
+
+  _getUploadUrl() {
+    switch (this.provider) {
+      case 'oss':
+        return `https://${this.bucket}.oss-${this.region}.aliyuncs.com`
+      case 'cos':
+        return `https://${this.bucket}.cos.${this.region}.myqcloud.com`
+      case 's3':
+        return `https://${this.bucket}.s3.${this.region}.amazonaws.com`
+      default:
+        throw new Error('Unknown provider')
+    }
+  }
+
+  _getFileUrl(key) {
+    return `https://${this.bucket}.${this.provider === 'oss' ? 'oss' : 'cos'}-${this.region}.${
+      this.provider === 'oss' ? 'aliyuncs.com' : this.provider === 'cos' ? 'myqcloud.com' : 'amazonaws.com'
+    }/${key}`
+  }
+
+  // 各厂商的签名、分片上传等方法...（根据实际需求实现）
+  _buildFormFields(credentials, fileKey, fileType, options) {
+    // 各厂商表单字段构建逻辑
+    // 这里需要根据具体厂商的文档实现
+    return {}
+  }
+
+  async _initMultipartUpload(credentials, fileKey, fileType) {
+    // 各厂商初始化分片上传逻辑
+    return 'upload-id'
+  }
+
+  async _uploadPart(credentials, fileKey, uploadId, part) {
+    // 各厂商分片上传逻辑
+    return 'etag'
+  }
+
+  async _completeMultipartUpload(credentials, fileKey, uploadId, parts) {
+    // 各厂商完成分片上传逻辑
+  }
+
+  async _listParts(credentials, fileKey, uploadId) {
+    // 各厂商列出已上传分片逻辑
+    return []
+  }
+}
+
+// 使用示例
+const uploader = new DirectUploader({
+  provider: 'oss',
+  region: 'cn-beijing',
+  bucket: 'myapp-images-prod',
+  getCredentials: async () => {
+    // 向后端申请临时凭证
+    const res = await fetch('/api/upload/credentials')
+    return res.json()
+  }
+})
+
+// 小文件上传
+async function uploadAvatar(file) {
+  try {
+    const result = await uploader.upload(file, {
+      directory: 'avatars',
+      onProgress: (progress) => {
+        console.log(`上传进度: ${progress.percent}%`)
+      }
+    })
+    console.log('上传成功:', result.url)
+    return result
+  } catch (error) {
+    console.error('上传失败:', error)
+    throw error
+  }
+}
+
+// 大文件分片上传
+async function uploadVideo(file) {
+  try {
+    const result = await uploader.multipartUpload(file, {
+      directory: 'videos',
+      partSize: 10 * 1024 * 1024, // 10MB 每片
+      parallel: 3, // 3 个并发
+      resume: true, // 支持断点续传
+      onProgress: (progress) => {
+        console.log(`上传进度: ${progress.percent}%, 已传 ${progress.loaded}/${progress.total}`)
+      },
+      onPartComplete: (part) => {
+        console.log(`分片 ${part.number} 上传完成`)
+      }
+    })
+    console.log('上传成功:', result.url)
+    return result
+  } catch (error) {
+    console.error('上传失败:', error)
+    // 可以在这里实现重试逻辑或保存断点信息
+    throw error
+  }
+}
+```
+
+### 9.2 后端临时凭证服务（Node.js/Express）
+
+```javascript
+/**
+ * 对象存储 STS 临时凭证服务
+ * 支持：阿里云 OSS、腾讯云 COS、AWS S3
+ */
+const express = require('express')
+const STS = require('ali-oss').STS // 阿里云
+// const COS = require('cos-nodejs-sdk-v5') // 腾讯云
+const router = express.Router()
+
+// 配置
+const config = {
+  // 阿里云 OSS 配置
+  oss: {
+    accessKeyId: process.env.OSS_ACCESS_KEY_ID,
+    accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
+    region: 'oss-cn-beijing',
+    bucket: 'myapp-images-prod',
+    // STS 角色 ARN（需要在 RAM 控制台创建）
+    roleArn: process.env.OSS_STS_ROLE_ARN
+  }
+}
+
+/**
+ * 获取 STS 临时凭证（阿里云 OSS）
+ * POST /api/upload/credentials
+ */
+router.post('/credentials', async (req, res) => {
+  try {
+    // 1. 验证用户身份（根据实际情况实现）
+    const userId = req.user?.id
+    if (!userId) {
+      return res.status(401).json({ error: 'Unauthorized' })
+    }
+
+    // 2. 生成唯一的文件路径前缀（用于权限隔离）
+    const date = new Date()
+    const prefix = `uploads/${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${userId}/`
+
+    // 3. 创建 STS 客户端
+    const sts = new STS({
+      accessKeyId: config.oss.accessKeyId,
+      accessKeySecret: config.oss.accessKeySecret
+    })
+
+    // 4. 申请临时凭证
+    const result = await sts.assumeRole(
+      config.oss.roleArn,
+      {
+        // Policy 限制权限范围（最小权限原则）
+        Statement: [
+          {
+            Effect: 'Allow',
+            Action: [
+              'oss:PutObject',
+              'oss:InitiateMultipartUpload',
+              'oss:UploadPart',
+              'oss:CompleteMultipartUpload',
+              'oss:AbortMultipartUpload',
+              'oss:ListParts'
+            ],
+            Resource: [
+              `acs:oss:*:*:${config.oss.bucket}/${prefix}*`
+            ]
+          }
+        ],
+        Version: '1'
+      },
+      3600, // 凭证有效期 1 小时
+      'web-upload-session-' + Date.now()
+    )
+
+    // 5. 返回凭证和配置
+    res.json({
+      success: true,
+      data: {
+        // STS 临时凭证
+        credentials: {
+          accessKeyId: result.credentials.AccessKeyId,
+          accessKeySecret: result.credentials.AccessKeySecret,
+          sessionToken: result.credentials.SecurityToken,
+          expiration: result.credentials.Expiration
+        },
+        // 上传配置
+        config: {
+          provider: 'oss',
+          region: config.oss.region,
+          bucket: config.oss.bucket,
+          endpoint: `https://${config.oss.bucket}.${config.oss.region}.aliyuncs.com`,
+          prefix: prefix, // 文件路径前缀
+          // 安全限制
+          maxSize: 100 * 1024 * 1024, // 最大 100MB
+          allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4']
+        }
+      }
+    })
+  } catch (error) {
+    console.error('Get credentials failed:', error)
+    res.status(500).json({
+      success: false,
+      error: 'Failed to get upload credentials',
+      message: error.message
+    })
+  }
+})
+
+/**
+ * 回调通知：前端上传完成后通知后端
+ * POST /api/upload/callback
+ */
+router.post('/callback', async (req, res) => {
+  try {
+    const { key, etag, size, mimeType, originalName } = req.body
+    const userId = req.user?.id
+
+    // 1. 验证文件是否存在
+    // 2. 保存文件信息到数据库
+    const fileRecord = await db.files.create({
+      userId,
+      key,
+      etag,
+      size,
+      mimeType,
+      originalName,
+      url: `https://cdn.example.com/${key}`,
+      createdAt: new Date()
+    })
+
+    // 3. 异步处理：生成缩略图、提取元数据、内容审核等
+    await processFileAsync(fileRecord)
+
+    res.json({
+      success: true,
+      data: {
+        fileId: fileRecord.id,
+        url: fileRecord.url,
+        size: fileRecord.size
+      }
+    })
+  } catch (error) {
+    console.error('Upload callback failed:', error)
+    res.status(500).json({
+      success: false,
+      error: 'Failed to process uploaded file'
+    })
+  }
+})
+
+module.exports = router
+```
+
+### 9.3 防盗链与安全配置
+
+```javascript
+/**
+ * CDN 防盗链与安全配置示例
+ */
+
+// 1. Referer 防盗链（防止其他网站直接引用你的资源）
+const refererConfig = {
+  // 白名单模式：只允许以下 Referer 访问
+  allowList: [
+    '*.myapp.com',      // 主站
+    '*.myapp.cn',       // 国内站
+    'localhost:*',      // 本地开发
+    '127.0.0.1:*'
+  ],
+
+  // 黑名单模式（可选）：禁止以下 Referer
+  blockList: [
+    '*. competitor.com',  // 竞争对手
+    'spam-site.com'
+  ],
+
+  // 空 Referer 处理：是否允许直接访问（浏览器地址栏输入 URL）
+  allowEmptyReferer: false  // 生产环境建议 false，测试环境可 true
+}
+
+// 2. URL 鉴权（更安全的防盗链，带时间戳和签名）
+class URLAuth {
+  constructor(config) {
+    this.key = config.key  // 鉴权密钥，只在服务端保存
+    this.expireTime = config.expireTime || 3600  // 默认 1 小时有效期
+  }
+
+  /**
+   * 生成带鉴权的 URL
+   * @param {string} url - 原始 URL，如 https://cdn.example.com/images/photo.jpg
+   * @param {number} expireIn - 有效期（秒）
+   * @returns {string} 带鉴权参数的 URL
+   */
+  sign(url, expireIn = this.expireTime) {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const timestamp = Math.floor(Date.now() / 1000) + expireIn
+
+    // 构造签名字符串（不同厂商格式不同，这里是通用示例）
+    const signStr = `${pathname}-${timestamp}-${this.key}`
+    const signature = this._md5(signStr)
+
+    // 添加鉴权参数
+    urlObj.searchParams.set('sign', signature)
+    urlObj.searchParams.set('t', timestamp.toString())
+
+    return urlObj.toString()
+  }
+
+  /**
+   * 验证 URL 签名（在 CDN 边缘或源站使用）
+   */
+  verify(url) {
+    const urlObj = new URL(url)
+    const signature = urlObj.searchParams.get('sign')
+    const timestamp = parseInt(urlObj.searchParams.get('t'))
+    const pathname = urlObj.pathname
+
+    // 检查是否过期
+    if (timestamp < Math.floor(Date.now() / 1000)) {
+      return { valid: false, error: 'URL expired' }
+    }
+
+    // 验证签名
+    const signStr = `${pathname}-${timestamp}-${this.key}`
+    const expectedSign = this._md5(signStr)
+
+    if (signature !== expectedSign) {
+      return { valid: false, error: 'Invalid signature' }
+    }
+
+    return { valid: true }
+  }
+
+  _md5(str) {
+    // 实际项目中使用 crypto-js 或其他 MD5 库
+    // 这里仅作示例
+    return require('crypto').createHash('md5').update(str).digest('hex')
+  }
+}
+
+// 使用示例
+const auth = new URLAuth({
+  key: 'your-secret-key-only-known-by-server',
+  expireTime: 3600  // 1 小时有效期
+})
+
+// 服务端生成带签名的 URL
+const signedUrl = auth.sign('https://cdn.example.com/private/document.pdf', 7200)
+// 结果：https://cdn.example.com/private/document.pdf?sign=xxxxx&t=1699123456
+
+// CDN 边缘或源站验证
+const result = auth.verify(signedUrl)
+if (!result.valid) {
+  // 返回 403 Forbidden
+}
+
+// 3. IP 黑白名单
+const ipConfig = {
+  // 只允许特定 IP 访问（适合内部系统）
+  whiteList: [
+    '192.168.1.0/24',    // 内网网段
+    '10.0.0.0/8'
+  ],
+
+  // 禁止特定 IP 访问（封禁攻击者）
+  blackList: [
+    '1.2.3.4',
+    '5.6.7.8'
+  ]
+}
+
+// 4. UA（User-Agent）黑白名单
+const uaConfig = {
+  // 禁止爬虫/下载工具
+  blackList: [
+    'Wget',
+    'curl',
+    'python-requests',
+    'Scrapy',
+    'AhrefsBot',
+    'SemrushBot'
+  ],
+
+  // 只允许浏览器访问（严格模式）
+  whiteList: [
+    'Mozilla/*',  // 现代浏览器
+    'AppleWebKit/*'
+  ]
+}
+```
+
+---
+
+## 10. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Object Storage** | 对象存储 | 一种数据存储架构，将数据作为对象管理，而非文件系统层级结构。适合存储图片、视频、备份等非结构化数据。 |
+| **Bucket** | 存储桶 | 对象存储中的顶级容器，用于组织和隔离数据。每个桶有独立的权限控制和配置。 |
+| **Object** | 对象/文件对象 | 对象存储的基本单元，包含数据本身、元数据（Metadata）和全局唯一键（Key）。 |
+| **CDN** | 内容分发网络 | Content Delivery Network，通过在全球部署边缘节点，将网站内容缓存到离用户最近的位置，加速访问速度。 |
+| **Edge Node** | 边缘节点 | CDN 网络中部署在各地的缓存服务器，直接为用户提供内容访问服务。 |
+| **Origin** | 源站 | CDN 回源获取内容的服务器，可以是对象存储、ECS 或自建服务器。 |
+| **Cache Hit** | 缓存命中 | 用户请求的内容在 CDN 边缘节点已存在，直接返回，无需回源。 |
+| **Cache Miss** | 缓存未命中 | 边缘节点没有请求的内容，需要回源获取。 |
+| **Hit Ratio** | 命中率 | 缓存命中次数占总请求次数的比例。命中率越高，回源越少，成本越低。 |
+| **TTL** | 生存时间/缓存时间 | Time To Live，内容在 CDN 节点上缓存的有效期。过期后需要重新回源。 |
+| **Back to Source** | 回源 | CDN 边缘节点向源站请求内容的过程。 |
+| **Purge/Refresh** | 刷新缓存 | 强制使 CDN 缓存失效，下次请求回源获取最新内容。 |
+| **Preheat** | 预热 | 在正式发布前，主动将内容推送到 CDN 节点，让用户第一次访问就能命中缓存。 |
+| **CORS** | 跨域资源共享 | Cross-Origin Resource Sharing，浏览器的安全机制，控制不同域之间的资源访问。 |
+| **Referer** | 来源页面 | HTTP 请求头字段，指示请求是从哪个页面链接过来的。用于防盗链。 |
+| **STS** | 安全令牌服务 | Security Token Service，颁发临时访问凭证的服务，用于前端直传等场景。 |
+| **Multipart Upload** | 分片上传 | 将大文件切分成多个小分片并行上传，支持断点续传，提高上传效率和可靠性。 |
+| **ETag** | 实体标签 | HTTP 响应头，用于标识资源的特定版本，常用于缓存验证。 |
+| **S3 API** | S3 兼容接口 | AWS S3 的对象存储 API 规范，多数云厂商的对象存储都兼容此接口。 |
+| **Canonical Query String** | 规范查询字符串 | 签名字符串的一部分，用于计算请求签名，确保请求不被篡改。 |
+
+---
+
+## 总结：对象存储 + CDN 的黄金法则
+
+1. **上传走直传**：大文件用分片，安全用 STS
+2. **缓存分层次**：浏览器 -> CDN -> 源站，层层缓存
+3. **就近服务用户**：智能 DNS + 全球节点覆盖
+4. **安全不松懈**：HTTPS + 防盗链 + 访问控制
+5. **成本要监控**：命中率、带宽、存储分级，持续优化
+
+这套架构撑起了互联网绝大部分的静态资源访问，理解它，你就理解了现代 Web 性能优化的基石。
diff --git a/docs/zh-cn/appendix/component-state-management.md b/docs/zh-cn/appendix/component-state-management.md
new file mode 100644
index 0000000..ba24cb0
--- /dev/null
+++ b/docs/zh-cn/appendix/component-state-management.md
@@ -0,0 +1,1737 @@
+# 组件化与状态管理模式总览
+
+> **学习指南**：组件化解决的是"代码该怎么拆"，状态管理解决的是"数据该怎么流"。本章节会围绕一个问题展开：**当应用规模越来越大，组件之间该如何优雅地共享和同步数据？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **Vue/React 基础组件**：如果你还不熟悉组件的 props、events、生命周期等概念，建议先回顾一下 [前端框架入门](../stage-1/)。
+- **JavaScript 模块化**：了解 ES Module 和 CommonJS 的基本用法，有助于理解状态管理库的设计哲学。
+
+---
+
+## 0. 引言：从"一盘散沙"到"井然有序"
+
+<ComponentHierarchyDemo />
+
+很多前端开发者在项目初期都会经历这样的阶段：
+
+- 页面功能少的时候，数据直接放组件里，props 传来传去还能应付；
+- 业务复杂了，组件层级越来越深，props drilling（属性钻取）像打地鼠一样令人崩溃；
+- 两个不相干的组件需要共享同一份数据，开始搞事件总线、全局变量，结果代码像意大利面一样纠缠不清。
+
+**直觉上，我们会以为是："这个框架不够强大"。** 但大多数时候，问题并不在于工具，而在于我们**没有设计好组件的职责边界和数据流向**。
+
+面对这些挑战，单纯依靠"写更多代码"已经捉襟见肘。我们需要一套系统的方法论，来在复杂的组件树中优雅地管理共享状态。这正是**组件化与状态管理**试图解决的问题。
+
+---
+
+## 1. 什么是"组件化思维"？（定义 + 场景）
+
+先给一个简短的工作定义，再看几个典型场景。
+
+> 组件化思维，是一种将用户界面拆分为独立、可复用、职责单一的代码单元的工程方法，每个组件封装自己的结构（HTML）、表现（CSS）和行为（JS），并通过明确的接口与其他组件通信。
+
+你可以简单地把它理解成三件事：**高内聚、低耦合、可复用**。
+常见会用到它的场景包括：
+
+- **UI 组件库开发**（如 Element Plus、Ant Design）
+- **大型单页应用（SPA）**的页面拆分
+- **跨项目复用**的业务组件封装
+
+接下来，我们就从一个真实团队的"血泪教训"出发，看看他们是怎么一点点从"面条代码"进化到"组件化架构"的。
+
+---
+
+## 2. 从"血泪教训"说起：某电商团队的组件化重构
+
+### 2.1 初始阶段：一团乱麻的"大泥球"
+
+某电商团队在 2019 年启动了一个促销活动后台管理系统。初期为了快速上线，采用了传统的 jQuery + 服务端渲染模式。
+
+**代码结构大概长这样：**
+
+```html
+<!-- promotion-edit.html -->
+<div id="page">
+  <div class="header">...</div>
+
+  <!-- 活动基本信息表单 -->
+  <form id="basic-info">
+    <input name="activityName" />
+    <input name="startTime" type="datetime-local" />
+    <!-- 200+ 行的表单字段... -->
+  </form>
+
+  <!-- 商品选择弹窗（隐藏在页面里） -->
+  <div id="product-modal" style="display:none">
+    <!-- 商品列表、搜索、分页... -->
+  </div>
+
+  <!-- 优惠券规则配置（另一个弹窗） -->
+  <div id="coupon-modal" style="display:none">
+    <!-- 复杂的规则配置表单... -->
+  </div>
+
+  <script>
+    // 1000+ 行的 jQuery 代码，处理各种交互
+    $(function() {
+      // 初始化日期选择器
+      $('#startTime').datetimepicker({...});
+
+      // 打开商品弹窗
+      $('#select-product-btn').click(function() {
+        $('#product-modal').show();
+        loadProductList();
+      });
+
+      // 提交表单（200+ 行的表单验证和提交逻辑）
+      $('#submit-btn').click(function() {
+        // ...
+      });
+    });
+  </script>
+</div>
+```
+
+**当时的痛点：**
+
+| 问题 | 表现 | 影响 |
+| :--- | :--- | :--- |
+| **代码冗余** | 商品选择弹窗在 5 个页面复制粘贴 | 修改一次要改 5 处，经常漏改 |
+| **耦合严重** | 表单验证逻辑散落在 HTML、JS、CSS 中 | 改一个字段可能引发连锁 Bug |
+| **难以测试** | 所有逻辑都挂在 jQuery 回调里 | 无法单元测试，只能靠人工点 |
+| **团队协作难** | 5 个前端同时改一个文件 | Git 冲突频发，合并痛苦 |
+
+### 2.2 第一次重构：Vue 2 的曙光
+
+2020 年，团队决定用 Vue 2 重构系统。这次重构的核心目标是：**按页面维度拆分组件**。
+
+**重构后的代码结构：**
+
+```vue
+<!-- ActivityEdit.vue -->
+<template>
+  <div class="activity-edit">
+    <PageHeader title="编辑活动" />
+
+    <BasicInfoForm v-model="activityData" />
+
+    <ProductSelector
+      v-model="activityData.productIds"
+      @open="showProductModal = true"
+    />
+
+    <CouponRules
+      v-model="activityData.coupons"
+      @open="showCouponModal = true"
+    />
+
+    <div class="actions">
+      <el-button @click="save">保存</el-button>
+      <el-button @click="publish">发布</el-button>
+    </div>
+
+    <!-- 弹窗组件 -->
+    <ProductModal
+      v-model:visible="showProductModal"
+      @select="onProductSelect"
+    />
+    <CouponModal
+      v-model:visible="showCouponModal"
+      @confirm="onCouponConfirm"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    PageHeader,
+    BasicInfoForm,
+    ProductSelector,
+    CouponRules,
+    ProductModal,
+    CouponModal
+  },
+  data() {
+    return {
+      activityData: {
+        name: '',
+        startTime: null,
+        productIds: [],
+        coupons: []
+      },
+      showProductModal: false,
+      showCouponModal: false
+    }
+  },
+  methods: {
+    save() {
+      // 保存逻辑
+    },
+    publish() {
+      // 发布逻辑
+    }
+  }
+}
+</script>
+```
+
+**这次重构带来的改变：**
+
+- **组件复用**：商品选择弹窗从 5 个页面复制粘贴，变成了 1 个 `<ProductModal>` 组件到处复用
+- **职责分离**：每个组件只负责自己的逻辑，表单验证拆到 `<BasicInfoForm>` 内部
+- **团队协作**：5 个前端可以并行开发不同组件，Git 冲突大幅减少
+
+但很快，新的问题又出现了...
+
+### 2.3 第二次重构：状态管理的觉醒
+
+随着业务复杂度增加，组件之间的通信变得越来越复杂。
+
+**典型场景：购物车状态同步**
+
+用户在一个页面把商品加入购物车，购物车图标上的数字要实时更新。但购物车状态散落在多个组件中：
+
+```vue
+<!-- Header.vue -->
+<template>
+  <header>
+    <div class="cart-icon">
+      <i class="icon-cart"></i>
+      <span class="badge">{{ cartCount }}</span>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      cartCount: 0  // 自己的购物车数量
+    }
+  },
+  created() {
+    // 方案1：事件总线
+    this.$bus.$on('cart-updated', (count) => {
+      this.cartCount = count
+    })
+
+    // 方案2：localStorage 轮询
+    setInterval(() => {
+      this.cartCount = JSON.parse(localStorage.getItem('cart')).length
+    }, 1000)
+  }
+}
+</script>
+```
+
+**问题爆发：**
+
+| 反模式 | 代码表现 | 后果 |
+| :--- | :--- | :--- |
+| **事件总线地狱** | `$bus.$emit` 满天飞，不知道谁监听谁 | 调试困难，内存泄漏 |
+| **Props Drilling** | 数据层层传递，中间组件只是"搬运工" | 中间组件被迫耦合 |
+| **LocalStorage 滥用** | 把状态存 localStorage 然后轮询 | 性能差，数据不一致 |
+| **全局变量** | `window.sharedState` 直接修改 | 无法追踪变化，Bug 难定位 |
+
+**最终解决方案：Vuex + 组件化设计规范**
+
+团队引入了 Vuex 作为集中式状态管理，并制定了组件设计规范：
+
+```javascript
+// store/modules/cart.js
+export default {
+  namespaced: true,
+  state: {
+    items: [],
+    selectedIds: []
+  },
+  getters: {
+    totalCount: state => state.items.reduce((sum, item) => sum + item.quantity, 0),
+    totalPrice: state => state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  },
+  mutations: {
+    ADD_ITEM(state, item) {
+      const existing = state.items.find(i => i.id === item.id)
+      if (existing) {
+        existing.quantity += item.quantity
+      } else {
+        state.items.push(item)
+      }
+    },
+    REMOVE_ITEM(state, itemId) {
+      state.items = state.items.filter(i => i.id !== itemId)
+    }
+  },
+  actions: {
+    async addToCart({ commit }, product) {
+      // 可以在这里调用 API
+      commit('ADD_ITEM', { ...product, quantity: 1 })
+    }
+  }
+}
+```
+
+重构后的组件代码：
+
+```vue
+<!-- Header.vue -->
+<template>
+  <header>
+    <div class="cart-icon" @click="goToCart">
+      <i class="icon-cart"></i>
+      <span v-if="cartCount > 0" class="badge">{{ cartCount }}</span>
+    </div>
+  </header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('cart', ['totalCount'])
+  }
+}
+</script>
+```
+
+通过这两次重构，团队总结出了组件化开发的**核心心法**：
+
+1. **组件化是手段，不是目的**：不要为了拆而拆，组件的边界应该对应业务的边界。
+2. **状态往上提，事件往下传**：共享状态尽量放在共同的父组件或状态管理库中。
+3. **单向数据流是底线**：不要直接修改 props，不要跨组件直接修改状态。
+
+---
+
+## 3. 组件通信的"七种武器"
+
+在深入状态管理库之前，我们先搞清楚组件之间有哪些通信方式，以及它们各自的适用场景。
+
+### 3.1 Props / Emit：父子组件的"官方通道"
+
+这是 Vue/React 中最基础、最推荐的父子通信方式。
+
+<PropsFlowDemo />
+
+**Vue 示例：**
+
+```vue
+<!-- Parent.vue -->
+<template>
+  <div>
+    <Child
+      :user="currentUser"
+      :theme="darkMode"
+      @update:profile="handleProfileUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentUser: { id: 1, name: '张三' },
+      darkMode: true
+    }
+  },
+  methods: {
+    handleProfileUpdate(newProfile) {
+      this.currentUser = { ...this.currentUser, ...newProfile }
+    },
+    handleDelete(userId) {
+      console.log('删除用户:', userId)
+    }
+  }
+}
+</script>
+```
+
+```vue
+<!-- Child.vue -->
+<template>
+  <div :class="['user-card', theme ? 'dark' : 'light']">
+    <h3>{{ user.name }}</h3>
+    <input v-model="localProfile.bio" placeholder="个人简介" />
+    <button @click="saveProfile">保存</button>
+    <button @click="requestDelete">删除</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    user: { type: Object, required: true },
+    theme: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      localProfile: { bio: '' }
+    }
+  },
+  watch: {
+    user: {
+      immediate: true,
+      handler(newVal) {
+        this.localProfile = { ...newVal }
+      }
+    }
+  },
+  methods: {
+    saveProfile() {
+      // 通过事件通知父组件更新
+      this.$emit('update:profile', this.localProfile)
+    },
+    requestDelete() {
+      this.$emit('delete', this.user.id)
+    }
+  }
+}
+</script>
+```
+
+**最佳实践：**
+
+1. **Props 向下传递，Events 向上传递**：保持单向数据流
+2. **Props 尽量只读**：不要在子组件直接修改 props
+3. **事件命名要语义化**：`update:xxx` 表示更新，`delete`、`submit` 表示动作
+
+### 3.2 Event Bus：跨组件通信的"小道消息"
+
+当两个没有直接父子关系的组件需要通信时，Event Bus（事件总线）是一种简单的方案。
+
+<EventBusDemo />
+
+**实现方式：**
+
+```javascript
+// eventBus.js
+import { createApp } from 'vue'
+
+// 创建一个空的 Vue 实例作为事件总线
+const EventBus = createApp({})
+
+export default EventBus
+```
+
+**使用示例：**
+
+```vue
+<!-- 组件 A：发送消息 -->
+<template>
+  <button @click="notifyUserLoggedIn">用户登录</button>
+</template>
+
+<script>
+import EventBus from './eventBus'
+
+export default {
+  methods: {
+    notifyUserLoggedIn() {
+      // 发送事件，带上用户数据
+      EventBus.$emit('user:login', {
+        userId: 123,
+        username: '张三',
+        timestamp: Date.now()
+      })
+    }
+  }
+}
+</script>
+```
+
+```vue
+<!-- 组件 B：接收消息 -->
+<template>
+  <div class="notification-bar">
+    <span v-if="lastLoginUser">欢迎回来，{{ lastLoginUser.username }}!</span>
+  </div>
+</template>
+
+<script>
+import EventBus from './eventBus'
+
+export default {
+  data() {
+    return {
+      lastLoginUser: null
+    }
+  },
+  created() {
+    // 监听登录事件
+    EventBus.$on('user:login', this.handleUserLogin)
+  },
+  beforeUnmount() {
+    // 重要：组件销毁时取消监听，防止内存泄漏
+    EventBus.$off('user:login', this.handleUserLogin)
+  },
+  methods: {
+    handleUserLogin(userData) {
+      console.log('收到登录事件:', userData)
+      this.lastLoginUser = userData
+
+      // 3秒后清空提示
+      setTimeout(() => {
+        this.lastLoginUser = null
+      }, 3000)
+    }
+  }
+}
+</script>
+```
+
+**Event Bus 的优缺点：**
+
+| 优点 | 缺点 |
+| :--- | :--- |
+| 实现简单，无需额外依赖 | 难以追踪事件流向，调试困难 |
+| 适合小范围、临时性的通信 | 容易形成"事件 spaghetti" |
+| 解耦发送方和接收方 | 必须手动管理订阅/取消订阅，容易内存泄漏 |
+
+**什么时候用，什么时候不用：**
+
+- **可以用**：两个距离较远、但逻辑上有关联的组件，且通信频率不高
+- **不要用**：组件层级简单、可以用 props/emit 解决；或者通信逻辑复杂、需要状态持久化
+
+### 3.3 Provide / Inject：跨层级传值的"秘密通道"
+
+当数据需要从祖先组件传递给深层嵌套的后代组件时，逐层传递 props 会非常繁琐。Vue 的 Provide / Inject 机制可以解决这个问题。
+
+**使用场景：**
+
+- 主题配置（深色/浅色模式）
+- 用户信息（当前登录用户）
+- 国际化配置
+- 表单控件之间的通信
+
+**代码示例：**
+
+```vue
+<!-- 祖先组件：App.vue -->
+<template>
+  <div :class="['app', theme]">
+    <!-- 深层嵌套的组件树 -->
+    <Layout>
+      <Sidebar>
+        <Menu>
+          <MenuItem v-for="item in menuItems" :key="item.id" />
+        </Menu>
+      </Sidebar>
+      <MainContent>
+        <RouterView />
+      </MainContent>
+    </Layout>
+  </div>
+</template>
+
+<script>
+import { provide, ref } from 'vue'
+
+export default {
+  setup() {
+    // 响应式的主题配置
+    const theme = ref('light')
+    const userInfo = ref({
+      id: 123,
+      name: '张三',
+      role: 'admin'
+    })
+
+    // 切换主题的方法
+    const toggleTheme = () => {
+      theme.value = theme.value === 'light' ? 'dark' : 'light'
+    }
+
+    // 提供给后代组件
+    provide('theme', theme)
+    provide('userInfo', userInfo)
+    provide('toggleTheme', toggleTheme)
+
+    return { theme }
+  }
+}
+</script>
+```
+
+```vue
+<!-- 深层后代组件：MenuItem.vue（可能是第 5+ 层嵌套） -->
+<template>
+  <div :class="['menu-item', theme]">
+    <span class="icon">{{ icon }}</span>
+    <span class="label">{{ label }}</span>
+
+    <!-- 管理员才能看到设置按钮 -->
+    <button
+      v-if="userInfo?.role === 'admin'"
+      class="settings-btn"
+      @click="openSettings"
+    >
+      设置
+    </button>
+  </div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+export default {
+  props: {
+    icon: String,
+    label: String
+  },
+  setup() {
+    // 注入祖先提供的数据
+    const theme = inject('theme', 'light') // 提供默认值
+    const userInfo = inject('userInfo', {})
+
+    const openSettings = () => {
+      console.log('打开设置，当前主题:', theme.value)
+    }
+
+    return { theme, userInfo, openSettings }
+  }
+}
+</script>
+```
+
+**Provide / Inject 的特点：**
+
+| 优点 | 缺点 |
+| :--- | :--- |
+| 解决跨层级通信问题，无需逐层传递 props | 破坏了组件的封装性，难以追踪数据来源 |
+| 适合提供全局配置、主题、用户上下文等 | 过度使用会导致组件间耦合严重 |
+| 与响应式系统配合良好 | 不适合频繁变化的数据（如表单输入） |
+
+**使用建议：**
+
+- **适合**：主题、语言、当前用户、全局配置等相对稳定的数据
+- **不适合**：频繁变化的业务数据、组件间复杂的交互逻辑
+
+---
+
+## 4. 状态管理的"进化论"
+
+前面我们讲了组件之间的通信方式，但当应用规模进一步扩大，单纯依靠组件自身的机制已经不够用了。这时候就需要专门的状态管理方案。
+
+### 4.1 为什么需要专门的状态管理？
+
+<StateManagementComparisonDemo />
+
+让我们看一个典型的购物车场景：
+
+**没有状态管理时的问题：**
+
+```javascript
+// 问题1：状态分散在各个组件
+// Header.vue 有自己的 cartCount
+// CartPage.vue 有自己的 cartItems
+// ProductDetail.vue 也有自己的 localCart
+
+// 问题2：同步困难
+// 在 ProductDetail 添加商品到购物车
+// Header 的购物车数量不会自动更新
+
+// 问题3：数据不一致
+// 用户在 CartPage 删除了商品
+// 但 ProductDetail 的"已加入购物车"按钮还是选中状态
+
+// 问题4：难以持久化
+// 用户刷新页面，购物车数据丢失
+```
+
+**有状态管理时的好处：**
+
+```javascript
+// 1. 单一数据源
+// 整个应用只有一份购物车状态
+const store = {
+  cart: {
+    items: [],
+    selectedIds: []
+  }
+}
+
+// 2. 响应式同步
+// 任何地方修改购物车，所有相关组件自动更新
+
+// 3. 状态可追溯
+// 每次修改都有记录，可以调试、回滚
+
+// 4. 易于持久化
+// 可以方便地保存到 localStorage 或服务器
+```
+
+### 4.2 状态管理的核心概念
+
+无论你选择哪种状态管理方案，以下概念都是通用的：
+
+| 概念 | 解释 | 类比 |
+| :--- | :--- | :--- |
+| **State** | 应用的状态数据 | 数据库中的数据 |
+| **Getter** | 从 state 派生的计算属性 | SQL 查询视图 |
+| **Mutation** | 修改 state 的唯一方式（同步） | 数据库事务 |
+| **Action** | 提交 mutation 的方法（可异步） | 业务逻辑层 |
+| **Store** | 容纳以上所有内容的对象 | 数据库实例 |
+
+### 4.3 主流状态管理库对比
+
+<StateManagementComparisonDemo />
+
+| 特性 | Redux | Vuex | Pinia | MobX | Zustand | Jotai |
+| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
+| **框架** | React | Vue | Vue | React/Vue | React | React |
+| **学习曲线** | 陡峭 | 中等 | 平缓 | 中等 | 平缓 | 平缓 |
+| **样板代码** | 多 | 中等 | 少 | 少 | 极少 | 极少 |
+| **TypeScript** | 良好 | 良好 | 优秀 | 良好 | 优秀 | 优秀 |
+| **中间件支持** | 丰富 | 有 | 无 | 无 | 无 | 无 |
+| **适用场景** | 大型应用 | 中大型 Vue 应用 | 中小型 Vue 应用 | 中大型应用 | 中小型应用 | 原子化状态 |
+
+---
+
+## 5. 各框架状态管理详解
+
+### 5.1 Redux：严格而强大的状态管理
+
+<ReduxFlowDemo />
+
+Redux 是 React 生态中最经典的状态管理方案，以严格的单向数据流著称。
+
+**核心原则：**
+
+1. **单一数据源**：整个应用的 state 存储在一个对象树中
+2. **State 只读**：唯一改变 state 的方法是触发 action
+3. **使用纯函数修改**：Reducer 必须是纯函数
+
+**代码示例：**
+
+```javascript
+// 1. Action Types
+const ADD_TODO = 'ADD_TODO'
+const TOGGLE_TODO = 'TOGGLE_TODO'
+
+// 2. Action Creators
+const addTodo = (text) => ({
+  type: ADD_TODO,
+  payload: { id: Date.now(), text, completed: false }
+})
+
+const toggleTodo = (id) => ({
+  type: TOGGLE_TODO,
+  payload: { id }
+})
+
+// 3. Reducer
+const initialState = {
+  todos: [],
+  filter: 'all' // all, active, completed
+}
+
+const todoReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_TODO:
+      return {
+        ...state,
+        todos: [...state.todos, action.payload]
+      }
+    case TOGGLE_TODO:
+      return {
+        ...state,
+        todos: state.todos.map(todo =>
+          todo.id === action.payload.id
+            ? { ...todo, completed: !todo.completed }
+            : todo
+        )
+      }
+    default:
+      return state
+  }
+}
+
+// 4. Store
+import { createStore } from 'redux'
+const store = createStore(todoReducer)
+
+// 5. 在 React 中使用
+import { useSelector, useDispatch } from 'react-redux'
+
+function TodoList() {
+  const todos = useSelector(state => state.todos)
+  const dispatch = useDispatch()
+
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li
+          key={todo.id}
+          onClick={() => dispatch(toggleTodo(todo.id))}
+          style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
+        >
+          {todo.text}
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+**Redux 的优缺点：**
+
+| 优点 | 缺点 |
+| :--- | :--- |
+| 严格的数据流，易于调试 | 样板代码多，学习曲线陡峭 |
+| 时间旅行调试（Time Travel） | 简单的状态也需要写很多代码 |
+| 丰富的中间件生态（redux-thunk, redux-saga） | 不适合小型项目 |
+| 可预测的状态更新 | 需要理解函数式编程概念 |
+
+### 5.2 Vuex 与 Pinia：Vue 生态的状态管理双雄
+
+<VuexPiniaDemo />
+
+#### 5.2.1 Vuex：经典的选择
+
+Vuex 是 Vue 2 时代的官方状态管理库，设计理念与 Redux 类似，但更贴合 Vue 的响应式系统。
+
+**核心概念：**
+
+```javascript
+// store/index.js
+import { createStore } from 'vuex'
+
+export default createStore({
+  // State: 存储应用的状态数据
+  state: {
+    user: null,
+    cart: {
+      items: [],
+      selectedIds: []
+    },
+    theme: 'light'
+  },
+
+  // Getters: 从 state 派生的计算属性
+  getters: {
+    isLoggedIn: state => !!state.user,
+    cartTotal: state => {
+      return state.cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+    },
+    cartItemCount: state => {
+      return state.cart.items.reduce((count, item) => count + item.quantity, 0)
+    }
+  },
+
+  // Mutations: 修改 state 的唯一方式（必须是同步的）
+  mutations: {
+    SET_USER(state, user) {
+      state.user = user
+    },
+    ADD_TO_CART(state, product) {
+      const existing = state.cart.items.find(item => item.id === product.id)
+      if (existing) {
+        existing.quantity++
+      } else {
+        state.cart.items.push({ ...product, quantity: 1 })
+      }
+    },
+    REMOVE_FROM_CART(state, productId) {
+      state.cart.items = state.cart.items.filter(item => item.id !== productId)
+    },
+    SET_THEME(state, theme) {
+      state.theme = theme
+    }
+  },
+
+  // Actions: 提交 mutation 的方法（可以包含异步操作）
+  actions: {
+    // 用户登录
+    async login({ commit }, credentials) {
+      try {
+        const response = await fetch('/api/login', {
+          method: 'POST',
+          body: JSON.stringify(credentials)
+        })
+        const user = await response.json()
+        commit('SET_USER', user)
+        return { success: true }
+      } catch (error) {
+        return { success: false, error: error.message }
+      }
+    },
+
+    // 添加到购物车（可能涉及 API 调用）
+    async addToCart({ commit, state }, product) {
+      // 先乐观更新 UI
+      commit('ADD_TO_CART', product)
+
+      try {
+        // 同步到服务器
+        await fetch('/api/cart', {
+          method: 'POST',
+          body: JSON.stringify({
+            productId: product.id,
+            quantity: 1
+          })
+        })
+      } catch (error) {
+        // 如果失败，回滚状态
+        commit('REMOVE_FROM_CART', product.id)
+        throw error
+      }
+    }
+  },
+
+  // Modules: 将 store 分割成模块
+  modules: {
+    user: {
+      namespaced: true,
+      state: () => ({
+        profile: null,
+        preferences: {}
+      }),
+      mutations: {
+        SET_PROFILE(state, profile) {
+          state.profile = profile
+        }
+      }
+    },
+    cart: {
+      namespaced: true,
+      state: () => ({
+        items: [],
+        selectedIds: []
+      }),
+      getters: {
+        total: state => state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+      }
+    }
+  }
+})
+```
+
+**在组件中使用 Vuex：**
+
+```vue
+<template>
+  <div class="cart">
+    <span>购物车 ({{ cartItemCount }})</span>
+    <span>总计: ¥{{ cartTotal }}</span>
+    <button @click="addItem">添加商品</button>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    // 方式1：使用辅助函数
+    ...mapState(['user']),
+    ...mapGetters(['cartTotal', 'cartItemCount']),
+
+    // 方式2：使用命名空间模块
+    ...mapState('cart', ['items']),
+
+    // 方式3：直接访问（适合简单场景）
+    userName() {
+      return this.$store.state.user?.name
+    }
+  },
+  methods: {
+    ...mapActions(['addToCart']),
+
+    async addItem() {
+      await this.addToCart({ id: 1, name: '商品A', price: 100 })
+    }
+  }
+}
+</script>
+```
+
+#### 5.2.2 Pinia：新一代的优雅之选
+
+Pinia 是 Vue 团队官方推荐的新一代状态管理库，专为 Vue 3 设计，但也支持 Vue 2。
+
+**Pinia 相比 Vuex 的优势：**
+
+| 特性 | Vuex | Pinia |
+| :--- | :--- | :--- |
+| 语法 | 选项式 API | 组合式 API（更现代） |
+| 类型支持 | 需要额外配置 | 原生 TypeScript 支持 |
+| 代码量 | 需要 mutations、actions 分开 | 更简洁，直接修改 state |
+| 模块化 | 需要 namespaced | 自动模块化 |
+| 开发工具 | 支持 | 支持，且体验更好 |
+
+**Pinia 代码示例：**
+
+```javascript
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+// 方式1：选项式 API（类似 Vuex）
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    count: 0,
+    name: '计数器'
+  }),
+  getters: {
+    doubleCount: (state) => state.count * 2,
+    // 可以访问其他 getter
+    doubleCountPlusOne() {
+      return this.doubleCount + 1
+    }
+  },
+  actions: {
+    increment() {
+      this.count++
+    },
+    async fetchCount() {
+      const response = await fetch('/api/count')
+      const data = await response.json()
+      this.count = data.count
+    }
+  }
+})
+
+// 方式2：组合式 API（推荐，更符合 Vue3 风格）
+import { ref, computed } from 'vue'
+
+export const useCartStore = defineStore('cart', () => {
+  // State
+  const items = ref([])
+  const selectedIds = ref([])
+
+  // Getters
+  const totalCount = computed(() =>
+    items.value.reduce((sum, item) => sum + item.quantity, 0)
+  )
+
+  const totalPrice = computed(() =>
+    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  )
+
+  // Actions
+  function addItem(product) {
+    const existing = items.value.find(item => item.id === product.id)
+    if (existing) {
+      existing.quantity++
+    } else {
+      items.value.push({ ...product, quantity: 1 })
+    }
+  }
+
+  function removeItem(productId) {
+    items.value = items.value.filter(item => item.id !== productId)
+  }
+
+  async function checkout() {
+    // 调用支付 API
+    const response = await fetch('/api/checkout', {
+      method: 'POST',
+      body: JSON.stringify({ items: items.value })
+    })
+    if (response.ok) {
+      items.value = [] // 清空购物车
+    }
+  }
+
+  return {
+    items,
+    selectedIds,
+    totalCount,
+    totalPrice,
+    addItem,
+    removeItem,
+    checkout
+  }
+})
+```
+
+**在组件中使用 Pinia：**
+
+```vue
+<template>
+  <div class="cart-page">
+    <h2>购物车 ({{ cart.totalCount }})</h2>
+
+    <div v-for="item in cart.items" :key="item.id" class="cart-item">
+      <span>{{ item.name }}</span>
+      <span>¥{{ item.price }} x {{ item.quantity }}</span>
+      <button @click="cart.removeItem(item.id)">删除</button>
+    </div>
+
+    <div class="cart-summary">
+      <p>总计: ¥{{ cart.totalPrice }}</p>
+      <button @click="cart.checkout" :disabled="cart.items.length === 0">
+        结算
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCartStore } from '@/stores/cart'
+
+// 直接获取 store 实例，所有属性和方法都是响应式的
+const cart = useCartStore()
+</script>
+```
+
+**Vuex vs Pinia 的选择建议：**
+
+- **新项目**：直接选择 Pinia，官方推荐，体验更好
+- **Vue 2 老项目**：可以继续使用 Vuex，或者迁移到 Pinia（Pinia 支持 Vue 2）
+- **大型项目需要中间件**：如果依赖 Redux 生态的中间件（如 redux-saga），可以考虑 Redux
+
+### 5.3 MobX：响应式编程的魔法
+
+<MobxReactivityDemo />
+
+MobX 是一个基于响应式编程（Reactive Programming）的状态管理库，通过自动追踪依赖来实现状态更新。
+
+**核心概念：**
+
+```javascript
+import { makeAutoObservable } from 'mobx'
+
+class TodoStore {
+  todos = []
+  filter = 'all' // all, active, completed
+
+  constructor() {
+    // 自动将所有属性和方法转为响应式
+    makeAutoObservable(this)
+  }
+
+  // 计算属性（自动追踪依赖）
+  get filteredTodos() {
+    switch (this.filter) {
+      case 'active':
+        return this.todos.filter(t => !t.completed)
+      case 'completed':
+        return this.todos.filter(t => t.completed)
+      default:
+        return this.todos
+    }
+  }
+
+  get stats() {
+    return {
+      total: this.todos.length,
+      active: this.todos.filter(t => !t.completed).length,
+      completed: this.todos.filter(t => t.completed).length
+    }
+  }
+
+  // Action：修改状态
+  addTodo(text) {
+    this.todos.push({
+      id: Date.now(),
+      text,
+      completed: false
+    })
+  }
+
+  toggleTodo(id) {
+    const todo = this.todos.find(t => t.id === id)
+    if (todo) {
+      todo.completed = !todo.completed
+    }
+  }
+
+  removeTodo(id) {
+    this.todos = this.todos.filter(t => t.id !== id)
+  }
+
+  setFilter(filter) {
+    this.filter = filter
+  }
+}
+
+// 创建 store 实例
+const todoStore = new TodoStore()
+export default todoStore
+```
+
+**在 React 中使用：**
+
+```jsx
+import { observer } from 'mobx-react-lite'
+import todoStore from './TodoStore'
+
+// 使用 observer 包裹组件，使其自动追踪使用的状态
+const TodoList = observer(() => {
+  return (
+    <div>
+      <div className="filters">
+        {['all', 'active', 'completed'].map(filter => (
+          <button
+            key={filter}
+            onClick={() => todoStore.setFilter(filter)}
+            className={todoStore.filter === filter ? 'active' : ''}
+          >
+            {filter}
+          </button>
+        ))}
+      </div>
+
+      <ul>
+        {todoStore.filteredTodos.map(todo => (
+          <li key={todo.id}>
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => todoStore.toggleTodo(todo.id)}
+            />
+            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
+              {todo.text}
+            </span>
+            <button onClick={() => todoStore.removeTodo(todo.id)}>删除</button>
+          </li>
+        ))}
+      </ul>
+
+      <div className="stats">
+        总计: {todoStore.stats.total} |
+        进行中: {todoStore.stats.active} |
+        已完成: {todoStore.stats.completed}
+      </div>
+    </div>
+  )
+})
+```
+
+**MobX 的优缺点：**
+
+| 优点 | 缺点 |
+| :--- | :--- |
+| 自动追踪依赖，无需手动优化 | 魔法般的响应式可能让人困惑 |
+| 代码量少，接近原生 JavaScript | 装饰器语法需要额外配置 |
+| 面向对象风格，易于理解 | 调试工具不如 Redux 强大 |
+| 性能优秀，只更新需要的组件 | 大型团队需要约定规范 |
+
+### 5.4 Zustand 与 Jotai：轻量级的新星
+
+<ZustandJotaiDemo />
+
+#### 5.4.1 Zustand：极简主义的选择
+
+Zustand（德语"状态"）是一个轻量级的状态管理库，核心代码只有几百行。
+
+**基本用法：**
+
+```javascript
+import { create } from 'zustand'
+
+// 创建 store
+const useStore = create((set, get) => ({
+  // State
+  bears: 0,
+  fish: 100,
+
+  // Actions
+  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+  removeAllBears: () => set({ bears: 0 }),
+
+  // 使用 get 访问当前状态
+  eatFish: () => {
+    const { fish, bears } = get()
+    if (fish > 0) {
+      set({ fish: fish - 1, bears: bears + 0.1 })
+    }
+  },
+
+  // 异步 action
+  fetchBears: async () => {
+    const response = await fetch('/api/bears')
+    const bears = await response.json()
+    set({ bears })
+  }
+}))
+
+// 在 React 组件中使用
+function BearCounter() {
+  // 只订阅需要的字段，实现细粒度更新
+  const bears = useStore((state) => state.bears)
+  const increase = useStore((state) => state.increasePopulation)
+
+  return (
+    <div>
+      <h1>{bears} bears around here...</h1>
+      <button onClick={increase}>Add bear</button>
+    </div>
+  )
+}
+```
+
+**Zustand 的优势：**
+
+1. **极简 API**：核心只有 `create`、`set`、`get` 三个概念
+2. **无需 Provider**：没有 Context 的包裹问题
+3. **细粒度订阅**：组件只订阅需要的状态片段
+4. **中间件支持**：持久化、日志、 immer 等
+
+```javascript
+// 使用中间件
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create(
+  persist(
+    (set, get) => ({
+      bears: 0,
+      increase: () => set((state) => ({ bears: state.bears + 1 }))
+    }),
+    {
+      name: 'bear-storage', // localStorage 的 key
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+)
+```
+
+#### 5.4.2 Jotai：原子化的状态管理
+
+Jotai 采用"原子（Atom）"的概念来管理状态，灵感来自 Recoil。
+
+**核心概念：**
+
+```javascript
+import { atom, useAtom } from 'jotai'
+
+// 定义原子状态
+const countAtom = atom(0)
+
+// 派生原子（类似 computed）
+const doubledCountAtom = atom((get) => get(countAtom) * 2)
+
+// 可写派生原子
+const incrementAtom = atom(
+  (get) => get(countAtom),
+  (get, set, update) => {
+    set(countAtom, get(countAtom) + update)
+  }
+)
+
+// 在组件中使用
+function Counter() {
+  const [count, setCount] = useAtom(countAtom)
+  const [doubled] = useAtom(doubledCountAtom)
+  const [, increment] = useAtom(incrementAtom)
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <p>Doubled: {doubled}</p>
+      <button onClick={() => setCount(c => c + 1)}>+1</button>
+      <button onClick={() => increment(5)}>+5</button>
+    </div>
+  )
+}
+```
+
+**Jotai 的特点：**
+
+1. **原子化**：状态拆分成独立的小单元，按需组合
+2. **细粒度更新**：只有订阅的原子变化时才重渲染
+3. **派生状态**：类似 computed，自动追踪依赖
+4. **异步支持**：内置对异步原子的支持
+
+```javascript
+// 异步原子
+const userAtom = atom(null)
+
+const fetchUserAtom = atom(
+  (get) => get(userAtom),
+  async (get, set, userId) => {
+    const response = await fetch(`/api/users/${userId}`)
+    const user = await response.json()
+    set(userAtom, user)
+  }
+)
+
+// 使用
+function UserProfile({ userId }) {
+  const [user, fetchUser] = useAtom(fetchUserAtom)
+
+  useEffect(() => {
+    fetchUser(userId)
+  }, [userId])
+
+  if (!user) return <div>Loading...</div>
+  return <div>Hello, {user.name}</div>
+}
+```
+
+---
+
+## 6. 如何选择适合你的状态管理方案？
+
+面对这么多选择，你可能会感到困惑。以下是一些实用的决策建议：
+
+### 6.1 决策树
+
+```
+你的项目规模？
+├── 小型项目 (< 10 个组件)
+│   └── 使用组件自带的状态管理即可
+│       （useState / ref）
+│
+├── 中型项目 (10-50 个组件)
+│   ├── 使用 Vue？
+│   │   └── Pinia（推荐）或 Vuex
+│   └── 使用 React？
+│       ├── 需要严格的数据流？→ Redux Toolkit
+│       └── 追求简洁？→ Zustand
+│
+└── 大型项目 (> 50 个组件，多团队协作)
+    ├── 使用 Vue？
+    │   ├── 需要严格规范？→ Vuex + Modules
+    │   └── 追求开发效率？→ Pinia
+    ├── 使用 React？
+    │   ├── 企业级应用？→ Redux + Redux Toolkit
+    │   ├── 需要细粒度控制？→ Recoil / Jotai
+    │   └── 追求简洁？→ Zustand
+    └── 跨框架需求？
+        └── 考虑 RxJS 或原生事件机制
+```
+
+### 6.2 各方案适用场景速查表
+
+| 如果你... | 推荐方案 | 理由 |
+| :--- | :--- | :--- |
+| 刚开始学 Vue 3 | Pinia | 官方推荐，语法简单，TypeScript 支持好 |
+| 维护 Vue 2 老项目 | Vuex | 稳定成熟，生态丰富 |
+| 做企业级 React 项目 | Redux Toolkit | 规范严格，调试工具强大 |
+| 做中小型 React 项目 | Zustand | 极简，无样板代码 |
+| 需要原子化状态管理 | Jotai / Recoil | 细粒度控制，派生状态强大 |
+| 喜欢面向对象风格 | MobX | 自动追踪依赖，代码直观 |
+| 追求极致性能 | 原生 Context + useReducer | 零依赖，完全可控 |
+
+### 6.3 避坑指南
+
+**不要这样用：**
+
+```javascript
+// ❌ 错误：直接修改 state
+store.state.user.name = '李四'
+
+// ❌ 错误：在组件外修改 state
+setTimeout(() => {
+  store.count++
+}, 1000)
+
+// ❌ 错误：在 getter 中修改 state
+getters: {
+  doubleCount(state) {
+    state.count *= 2  // 副作用！
+    return state.count
+  }
+}
+
+// ❌ 错误：不取消事件监听
+export default {
+  created() {
+    EventBus.$on('event', this.handler)
+  }
+  // 忘记在 beforeUnmount 中取消订阅
+}
+```
+
+**推荐这样用：**
+
+```javascript
+// ✅ 正确：通过 mutation/action 修改 state
+store.commit('SET_USER_NAME', '李四')
+// 或 Pinia：
+store.userName = '李四'  // Pinia 允许直接修改，因为它底层已经处理了响应式
+
+// ✅ 正确：在 action 中处理异步
+actions: {
+  async fetchUser({ commit }) {
+    const user = await api.getUser()
+    commit('SET_USER', user)
+  }
+}
+
+// ✅ 正确：getter 是纯函数
+getters: {
+  doubleCount: (state) => state.count * 2
+}
+
+// ✅ 正确：及时取消订阅
+export default {
+  created() {
+    this.unsubscribe = store.$subscribe((mutation, state) => {
+      console.log(mutation, state)
+    })
+  },
+  beforeUnmount() {
+    this.unsubscribe()
+  }
+}
+```
+
+---
+
+## 7. 实战：电商购物车状态管理设计
+
+让我们综合运用前面的知识，设计一个电商购物车系统的状态管理方案。
+
+### 7.1 需求分析
+
+- 商品列表页可以添加商品到购物车
+- 购物车页面可以查看、修改数量、删除商品
+- 头部导航显示购物车商品数量
+- 支持选择/取消选择商品，计算选中商品总价
+- 支持全选/取消全选
+- 数据持久化到 localStorage
+
+### 7.2 状态设计（Pinia）
+
+```javascript
+// stores/cart.js
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useCartStore = defineStore('cart', () => {
+  // ============ State ============
+  const items = ref([])
+  const selectedIds = ref([])
+  const isLoading = ref(false)
+  const error = ref(null)
+
+  // 从 localStorage 恢复数据
+  const initFromStorage = () => {
+    const stored = localStorage.getItem('cart')
+    if (stored) {
+      try {
+        const data = JSON.parse(stored)
+        items.value = data.items || []
+        selectedIds.value = data.selectedIds || []
+      } catch (e) {
+        console.error('Failed to parse cart data:', e)
+      }
+    }
+  }
+
+  // 持久化到 localStorage
+  const persist = () => {
+    localStorage.setItem('cart', JSON.stringify({
+      items: items.value,
+      selectedIds: selectedIds.value
+    }))
+  }
+
+  // ============ Getters ============
+  const itemCount = computed(() =>
+    items.value.reduce((sum, item) => sum + item.quantity, 0)
+  )
+
+  const totalPrice = computed(() =>
+    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  )
+
+  // 选中商品相关计算
+  const selectedItems = computed(() =>
+    items.value.filter(item => selectedIds.value.includes(item.id))
+  )
+
+  const selectedTotalPrice = computed(() =>
+    selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  )
+
+  const isAllSelected = computed(() =>
+    items.value.length > 0 && selectedIds.value.length === items.value.length
+  )
+
+  // ============ Actions ============
+  const addItem = (product) => {
+    const existing = items.value.find(item => item.id === product.id)
+    if (existing) {
+      existing.quantity += product.quantity || 1
+    } else {
+      items.value.push({
+        ...product,
+        quantity: product.quantity || 1
+      })
+    }
+    persist()
+  }
+
+  const updateQuantity = (productId, quantity) => {
+    const item = items.value.find(item => item.id === productId)
+    if (item) {
+      if (quantity <= 0) {
+        removeItem(productId)
+      } else {
+        item.quantity = quantity
+        persist()
+      }
+    }
+  }
+
+  const removeItem = (productId) => {
+    items.value = items.value.filter(item => item.id !== productId)
+    selectedIds.value = selectedIds.value.filter(id => id !== productId)
+    persist()
+  }
+
+  const toggleSelection = (productId) => {
+    const index = selectedIds.value.indexOf(productId)
+    if (index > -1) {
+      selectedIds.value.splice(index, 1)
+    } else {
+      selectedIds.value.push(productId)
+    }
+    persist()
+  }
+
+  const toggleSelectAll = () => {
+    if (isAllSelected.value) {
+      selectedIds.value = []
+    } else {
+      selectedIds.value = items.value.map(item => item.id)
+    }
+    persist()
+  }
+
+  const clearCart = () => {
+    items.value = []
+    selectedIds.value = []
+    persist()
+  }
+
+  // 初始化
+  initFromStorage()
+
+  return {
+    // State
+    items,
+    selectedIds,
+    isLoading,
+    error,
+    // Getters
+    itemCount,
+    totalPrice,
+    selectedItems,
+    selectedTotalPrice,
+    isAllSelected,
+    // Actions
+    addItem,
+    updateQuantity,
+    removeItem,
+    toggleSelection,
+    toggleSelectAll,
+    clearCart
+  }
+})
+```
+
+### 7.3 组件中使用
+
+```vue
+<!-- CartIcon.vue -->
+<template>
+  <div class="cart-icon" @click="goToCart">
+    <i class="icon-cart"></i>
+    <span v-if="cart.itemCount > 0" class="badge">
+      {{ cart.itemCount }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { useCartStore } from '@/stores/cart'
+
+const cart = useCartStore()
+
+const goToCart = () => {
+  router.push('/cart')
+}
+</script>
+```
+
+```vue
+<!-- ProductCard.vue -->
+<template>
+  <div class="product-card">
+    <img :src="product.image" :alt="product.name" />
+    <h3>{{ product.name }}</h3>
+    <p class="price">¥{{ product.price }}</p>
+    <button @click="addToCart" :disabled="isInCart">
+      {{ isInCart ? '已加入' : '加入购物车' }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useCartStore } from '@/stores/cart'
+
+const props = defineProps({
+  product: Object
+})
+
+const cart = useCartStore()
+
+const isInCart = computed(() =>
+  cart.items.some(item => item.id === props.product.id)
+)
+
+const addToCart = () => {
+  cart.addItem({
+    id: props.product.id,
+    name: props.product.name,
+    price: props.product.price,
+    image: props.product.image
+  })
+}
+</script>
+```
+
+---
+
+## 8. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **State** | 状态 | 应用的数据存储，是状态管理的核心。 |
+| **Props** | 属性 | 父组件向子组件传递数据的方式。 |
+| **Event/Action** | 事件/动作 | 组件通知父组件或触发状态变更的方式。 |
+| **Store** | 存储/仓库 | 集中管理状态的对象。 |
+| **Getter** | 获取器 | 从 state 派生的计算属性。 |
+| **Mutation** | 变更 | Vuex 中修改 state 的唯一方式，必须是同步的。 |
+| **Reducer** | 归约器 | Redux 中处理 state 更新的纯函数。 |
+| **Dispatch** | 派发 | 触发 action 或 mutation 的操作。 |
+| **Subscribe** | 订阅 | 监听状态变化的操作。 |
+| **Reactive** | 响应式 | 数据变化自动触发更新的机制。 |
+| **Computed** | 计算属性 | 基于其他状态派生的状态。 |
+| **Module** | 模块 | 将 store 分割成多个子模块的方式。 |
+| **Namespaced** | 命名空间 | 模块内部的 action/mutation 自动带命名前缀。 |
+| **Hydration** | 注水 | SSR 中将服务端状态同步到客户端的过程。 |
+| **Time Travel** | 时间旅行 | Redux DevTools 中回溯状态变化的功能。 |
+
+---
+
+## 总结
+
+状态管理是前端开发中永恒的话题。从简单的 props 传递到复杂的全局状态管理，没有银弹，只有适合当前场景的方案。
+
+**记住这些核心原则：**
+
+1. **从简单开始**：不要过早引入复杂的状态管理库，props 和 emit 能解决大部分问题。
+2. **状态往上提**：共享状态尽量放在共同的父组件或状态管理库中。
+3. **单一数据源**：避免同一份数据在多个地方存储。
+4. **不可变性**：修改状态时创建新对象，而不是直接修改原对象。
+5. **按需选择**：根据团队技术栈和项目规模选择合适的方案。
+
+**不同场景的选择建议：**
+
+- **小型项目**：props / emit + Provide / Inject
+- **中型 Vue 项目**：Pinia
+- **中型 React 项目**：Zustand 或 React Query
+- **大型项目**：Redux Toolkit、Vuex/Pinia + 严格规范
+- **需要细粒度控制**：MobX、Jotai、Recoil
+
+希望这篇指南能帮助你在面对复杂的状态管理问题时，做出明智的选择。
diff --git a/docs/zh-cn/appendix/concurrency-models.md b/docs/zh-cn/appendix/concurrency-models.md
new file mode 100644
index 0000000..9e232c5
--- /dev/null
+++ b/docs/zh-cn/appendix/concurrency-models.md
@@ -0,0 +1,886 @@
+# 进程 / 线程 / 协程与服务并发模型
+
+> 💡 **学习指南**：并发编程是很多后端工程师的"阿喀琉斯之踵"——面试被问倒、线上出 Bug、性能调优没思路。本章节会围绕一个核心问题展开：**当10万个用户同时请求你的服务，你的代码会崩吗？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **CPU、内存、I/O 是什么**：如果不清楚这些基础概念，可以先回顾操作系统的基本知识。
+- **什么是阻塞/非阻塞**：如果还不熟悉同步/异步的概念，可以先通过实际编程体验感受一下。
+
+---
+
+## 0. 引言：为什么你的服务一到高峰期就"卡死"？
+
+<ProcessThreadCoroutineDemo />
+
+很多人在实际开发中都会遇到类似的情况：
+
+- 本地测试时服务响应飞快，一上线就"卡成 PPT"；
+- 明明买了很高的服务器配置，CPU 占用率却总是上不去；
+- 一到促销高峰期，服务就"雪崩"，不得不降级或熔断。
+
+直觉上，我们会以为是：**"服务器不够强"**。
+但大多数时候，问题并不在于硬件"不够快"，而在于我们**没有设计好并发模型**。
+
+**核心矛盾**：
+- 如果不并发处理：用户请求排队等待，体验极差；
+- 如果乱用多线程：锁竞争、上下文切换开销，性能反而下降。
+
+面对这些挑战，单纯依靠"加机器"已经捉襟见肘。我们需要一套系统的并发设计方法，在高并发场景下既保证性能，又确保稳定性。这正是本章节试图解决的问题。
+
+---
+
+## 1. 核心概念：进程、线程、协程，到底啥区别？
+
+### 1.1 一个餐厅的比喻
+
+想象你开了一家餐厅，要同时服务很多顾客：
+
+| 概念 | 餐厅比喻 | 技术含义 |
+| :--- | :--- | :--- |
+| **进程 (Process)** | **独立的餐厅分店** | 拥有独立的内存空间、资源分配，是操作系统资源分配的基本单位。一个进程崩溃不会影响其他进程。 |
+| **线程 (Thread)** | **分店内的厨师** | 是 CPU 调度的基本单位，共享进程内的内存空间。同一进程内的线程可以共享数据，但一个线程崩溃可能导致整个进程崩溃。 |
+| **协程 (Coroutine)** | **厨师的"分身术"** | 用户态的轻量级线程，由程序自己调度而非操作系统。切换开销极小，可以创建数百万个。 |
+
+### 1.2 深入对比：三者的本质差异
+
+<ProcessIsolationDemo />
+
+#### 进程：资源隔离的"集装箱"
+
+**核心特点**：
+- **隔离性强**：每个进程有独立的虚拟地址空间
+- **开销大**：创建/切换需要操作系统介入，耗时约 1-10ms
+- **通信复杂**：进程间通信(IPC)需要特殊机制（管道、消息队列、共享内存等）
+
+**适用场景**：
+- 需要强隔离的服务（如浏览器标签页、沙箱程序）
+- 多语言混合部署的服务
+- 需要独立重启/升级的服务单元
+
+#### 线程：共享内存的"轻骑兵"
+
+<ThreadSchedulingDemo />
+
+**核心特点**：
+- **共享内存**：同一进程内的线程共享代码段、数据段、堆
+- **独立栈空间**：每个线程有自己的栈（通常 1MB 左右）
+- **切换较快**：线程切换约 1-10μs，比进程快 1000 倍
+- **需要同步**：共享数据需要加锁保护
+
+**适用场景**：
+- CPU 密集型任务（计算、图像处理）
+- 需要共享大量数据的并发任务
+- 对延迟敏感的后台任务
+
+#### 协程：用户态的"绿色线程"
+
+<CoroutineLightweightDemo />
+
+**核心特点**：
+- **用户态调度**：由程序/运行时库调度，不经过操作系统
+- **极轻量级**：协程栈通常只有几 KB，可创建数百万个
+- **切换极快**：协程切换约 100ns，比线程快 100 倍
+- **非抢占式**：协程主动让出 CPU（协作式多任务）
+
+**适用场景**：
+- I/O 密集型高并发服务（Web 服务器、网关）
+- 需要维持大量长连接的场景（IM、游戏服务器）
+- 流式数据处理、流水线作业
+
+---
+
+## 2. 案例分析：某电商大促的"并发之痛"
+
+### 2.1 血泪教训：从"单机"到"分布式"的演进
+
+让我们看一个真实的电商系统演进故事：
+
+#### 阶段一：单机时代（日活 1000）
+
+```python
+# 简单的 Flask 应用
+from flask import Flask
+
+app = Flask(__name__)
+
+@app.route('/order')
+def create_order():
+    # 查询库存
+    stock = db.query("SELECT stock FROM products WHERE id=1")
+    if stock > 0:
+        # 扣减库存
+        db.execute("UPDATE products SET stock = stock - 1 WHERE id=1")
+        # 创建订单
+        db.execute("INSERT INTO orders ...")
+        return "Order created!"
+    return "Out of stock!"
+
+# 启动：flask run
+```
+
+**问题**：
+- 单进程单线程，一次只能处理一个请求
+- 库存扣减没有加锁，并发时会出现超卖
+- 数据库连接数有限，连接池很快被耗尽
+
+#### 阶段二：多进程时代（日活 1万）
+
+```python
+# 使用 Gunicorn 多进程部署
+gunicorn -w 4 -k sync app:app
+
+# 4个 worker 进程，每个进程独立处理请求
+```
+
+**新问题**：
+- 4 个进程同时查库存，都看到 stock=1，都扣减成功，超卖 3 个！
+- 需要引入分布式锁
+
+```python
+import redis
+
+# 使用 Redis 分布式锁
+lock = redis_client.lock("stock_lock", timeout=10)
+if lock.acquire():
+    try:
+        stock = db.query("SELECT stock FROM products WHERE id=1")
+        if stock > 0:
+            db.execute("UPDATE products SET stock = stock - 1 WHERE id=1")
+    finally:
+        lock.release()
+```
+
+#### 阶段三：协程时代（日活 10万）
+
+```python
+# 使用 FastAPI + asyncio
+from fastapi import FastAPI
+import asyncio
+
+app = FastAPI()
+
+async def check_stock(product_id: int) -> int:
+    # 异步查询数据库，不阻塞
+    result = await db.fetch_one(
+        "SELECT stock FROM products WHERE id = :id",
+        {"id": product_id}
+    )
+    return result["stock"]
+
+@app.get("/order")
+async def create_order(product_id: int):
+    # 并发检查库存和用户信息
+    stock_task = check_stock(product_id)
+    user_task = get_user_info(request.user_id)
+
+    stock, user = await asyncio.gather(stock_task, user_task)
+
+    if stock > 0:
+        # 异步扣减库存
+        await db.execute(
+            "UPDATE products SET stock = stock - 1 WHERE id = :id",
+            {"id": product_id}
+        )
+        return {"status": "success"}
+
+    return {"status": "out_of_stock"}
+
+# 启动：uvicorn main:app --workers 4
+# 每个 worker 内可以处理数千个并发协程
+```
+
+**优势**：
+- 单线程内可处理数千并发连接
+- I/O 操作时主动让出 CPU，不阻塞其他请求
+- 内存占用极低，适合高并发长连接场景
+
+### 2.2 并发模型演进对比表
+
+| 阶段 | 并发模型 | 支撑日活 | 核心问题 | 解决方案 |
+| :--- | :--- | :--- | :--- | :--- |
+| **单体** | 单进程单线程 | 1K | 无法并发处理 | 引入多进程 |
+| **多进程** | 多进程同步 | 10K | 数据竞争、超卖 | 分布式锁 |
+| **多线程** | 多线程+锁 | 50K | 上下文切换开销、死锁 | 线程池、无锁队列 |
+| **协程** | 异步 I/O | 100K+ | 代码复杂度、调试困难 | 框架封装、链路追踪 |
+| **混合** | 多进程+协程 | 1000K+ | 架构复杂度 | 服务治理、弹性伸缩 |
+
+---
+
+## 3. 原理深入：各种并发模型的工作原理
+
+### 3.1 进程模型：隔离性与通信
+
+#### 内存隔离机制
+
+<ProcessIsolationDemo />
+
+每个进程拥有独立的虚拟地址空间：
+
+```
+进程 A 的虚拟内存          进程 B 的虚拟内存
++----------------+        +----------------+
+|  内核空间      |        |  内核空间      |  <-- 共享（只读）
+|  (共享)        |        |  (共享)        |
++----------------+        +----------------+
+|  栈空间        |        |  栈空间        |  <-- 独立
+|  (向下增长)    |        |  (向下增长)    |
++----------------+        +----------------+
+|  堆空间        |        |  堆空间        |  <-- 独立
+|  (向上增长)    |        |  (向上增长)    |
++----------------+        +----------------+
+|  数据段        |        |  数据段        |  <-- 独立
+|  (.bss/.data)  |        |  (.bss/.data)  |
++----------------+        +----------------+
+|  代码段        |        |  代码段        |  <-- 独立
+|  (.text)       |        |  (.text)       |
++----------------+        +----------------+
+```
+
+#### 进程间通信(IPC)方式
+
+| 方式 | 原理 | 速度 | 适用场景 |
+| :--- | :--- | :--- | :--- |
+| **管道 (Pipe)** | 内核缓冲区，单向流 | 中等 | 父子进程间通信 |
+| **消息队列** | 内核消息链表 | 中等 | 异步消息传递 |
+| **共享内存** | 同一块物理内存映射 | 最快 | 大量数据共享 |
+| **信号量** | 内核计数器 | - | 同步与互斥 |
+| **Socket** | 网络协议栈 | 较慢 | 跨机器通信 |
+| **信号 (Signal)** | 软中断 | - | 事件通知 |
+
+### 3.2 线程模型：调度与同步
+
+#### 线程调度原理
+
+<ThreadSchedulingDemo />
+
+操作系统线程调度器的基本工作：
+
+```
+就绪队列                    运行中                    等待队列
++--------+                +--------+               +--------+
+| 线程 B |  <-- 时间片到   | 线程 A |  <-- I/O请求  | 线程 C |
+| 线程 D |                | (运行) |               | 线程 E |
+| 线程 F |                +--------+               | (阻塞) |
++--------+                                         +--------+
+    |                                                  |
+    v                                                  v
+调度器根据优先级选择下一个运行            I/O完成时移回就绪队列
+```
+
+#### 常见线程同步机制
+
+| 机制 | 原理 | 优点 | 缺点 |
+| :--- | :--- | :--- | :--- |
+| **互斥锁 (Mutex)** | 二元状态，独占访问 | 实现简单 | 竞争激烈时性能差 |
+| **读写锁 (RWLock)** | 读共享，写独占 | 读多写少场景效率高 | 实现复杂，有写饥饿风险 |
+| **自旋锁 (Spinlock)** | 忙等待，不释放 CPU | 等待时间短时效率高 | 等待时间长时浪费 CPU |
+| **条件变量** | 等待特定条件满足 | 避免忙等待 | 需要配合锁使用 |
+| **信号量 (Semaphore)** | 计数器控制访问数量 | 可控制并发数 | 使用不当易出错 |
+| **原子操作** | CPU 指令级原子性 | 无锁，性能最高 | 只能操作简单数据类型 |
+| **无锁队列** | CAS 操作实现 | 高并发下性能优异 | 实现复杂，ABA 问题 |
+
+### 3.3 协程模型：用户态调度
+
+<CoroutineLightweightDemo />
+
+#### 协程的核心优势
+
+```
+传统多线程                vs              协程模型
+
++------------+                       +------------+
+|  线程 1    |                       |  事件循环   |
+| (1MB栈)   |                       |  (调度器)   |
++------------+                       +------------+
+     |                                     |
+     v                                     v
++------------+                       +------------+
+|  线程 2    |                       |  协程 A    |
+| (1MB栈)   |                       | (几KB栈)   |
++------------+                       +------------+
+     |                                     |
+     v                                     v
++------------+                       +------------+
+|  线程 3    |                       |  协程 B    |
+| (1MB栈)   |                       | (几KB栈)   |
++------------+                       +------------+
+
+开销：N MB                           开销：N KB
+创建：~10μs                         创建：~100ns
+切换：~1μs                          切换：~100ns
+```
+
+#### async/await 的工作机制
+
+<AsyncAwaitDemo />
+
+```python
+import asyncio
+
+async def fetch_data(url):
+    # 遇到 await，协程挂起，让出 CPU
+    response = await aiohttp.get(url)
+    # I/O 完成后，事件循环唤醒协程，从这里继续执行
+    return response.json()
+
+async def main():
+    # 创建 3 个协程任务
+    tasks = [
+        fetch_data("https://api1.example.com"),
+        fetch_data("https://api2.example.com"),
+        fetch_data("https://api3.example.com")
+    ]
+    # 并发执行，总耗时 ≈ 最慢的那个请求
+    results = await asyncio.gather(*tasks)
+    return results
+
+# 启动事件循环
+asyncio.run(main())
+```
+
+**执行流程**：
+
+```
+时间线 -------------------------------------------------------------------->
+
+协程 A: [准备请求]--[await 挂起]=======[收到响应]--[处理数据]
+                     |
+协程 B:              [准备请求]--[await 挂起]=======[收到响应]--[处理数据]
+                                  |
+协程 C:                           [准备请求]--[await 挂起]=======[收到响应]
+                                               |
+                                               ↓
+                                         所有 I/O 完成
+
+说明：[ ] 表示 CPU 执行, === 表示 I/O 等待, | 表示协程切换
+```
+
+### 3.4 事件循环：协程的"心脏"
+
+<EventLoopDemo />
+
+事件循环是协程调度的核心机制：
+
+```python
+import selectors
+import heapq
+
+class EventLoop:
+    def __init__(self):
+        self.selector = selectors.DefaultSelector()
+        self.ready = []  # 就绪队列
+        self.scheduled = []  # 定时任务队列
+        self.current = None
+
+    def run(self):
+        while True:
+            # 1. 处理定时任务
+            now = time.time()
+            while self.scheduled and self.scheduled[0][0] <= now:
+                _, callback = heapq.heappop(self.scheduled)
+                self.ready.append(callback)
+
+            # 2. 等待 I/O 事件
+            timeout = 0 if self.ready else 0.1
+            events = self.selector.select(timeout)
+
+            for key, mask in events:
+                callback = key.data
+                self.ready.append(callback)
+
+            # 3. 执行就绪的回调
+            while self.ready:
+                callback = self.ready.popleft()
+                callback()
+```
+
+### 3.5 并发 vs 并行：不是一回事
+
+<ConcurrentVsParallelDemo />
+
+| 概念 | 英文 | 含义 | 比喻 | 需要条件 |
+| :--- | :--- | :--- | :--- | :--- |
+| **并发** | Concurrency | 多个任务交替执行，宏观上同时推进 | 一个人轮流做多个菜 | 单核 CPU 即可 |
+| **并行** | Parallelism | 多个任务真正同时执行 | 多个人同时做不同的菜 | 多核 CPU 或多机 |
+
+**图示说明**：
+
+```
+单核 CPU - 并发（Concurrent）
+时间 →  1    2    3    4    5    6    7    8
+任务 A: [执行][执行]      [执行][执行]
+任务 B:      [执行][执行]      [执行][执行]
+
+两个任务交替执行，宏观上"同时"推进
+
+========================================
+
+多核 CPU - 并行（Parallel）
+时间 →  1    2    3    4    5    6    7    8
+核心 1: [任务A][任务A][任务A][任务A]
+核心 2: [任务B][任务B][任务B][任务B]
+
+两个任务真正"同时"执行
+
+========================================
+
+现实中往往是：并发 + 并行
+时间 →  1    2    3    4    5    6    7    8
+核心 1: [A1][A1][B1][B1][C1][C1][D1][D1]
+核心 2: [A2][A2][B2][B2][C2][C2][D2][D2]
+
+多个任务先并发调度到不同核心，再在核心上并行执行
+```
+
+---
+
+## 4. 实战：Go 协程与绿色线程
+
+### 4.1 Go 的并发哲学
+
+<GoroutineGreenThreadDemo />
+
+Go 语言的并发设计哲学：**不要通过共享内存来通信，而要通过通信来共享内存**。
+
+```go
+package main
+
+import (
+    "fmt"
+    "time"
+)
+
+// 生产者
+func producer(ch chan<- int, id int) {
+    for i := 0; i < 5; i++ {
+        fmt.Printf("Producer %d sending: %d\n", id, i)
+        ch <- i  // 发送数据到 channel
+        time.Sleep(100 * time.Millisecond)
+    }
+}
+
+// 消费者
+func consumer(ch <-chan int, id int) {
+    for val := range ch {  // 从 channel 接收数据
+        fmt.Printf("Consumer %d received: %d\n", id, val)
+    }
+}
+
+func main() {
+    // 创建带缓冲的 channel
+    ch := make(chan int, 10)
+
+    // 启动 2 个生产者 goroutine
+    for i := 0; i < 2; i++ {
+        go producer(ch, i)
+    }
+
+    // 启动 2 个消费者 goroutine
+    for i := 0; i < 2; i++ {
+        go consumer(ch, i)
+    }
+
+    // 等待一段时间
+    time.Sleep(3 * time.Second)
+    close(ch)
+}
+```
+
+### 4.2 Goroutine 调度器：GMP 模型
+
+Go 的调度器采用了 GMP 模型：
+
+| 组件 | 含义 | 作用 |
+| :--- | :--- | :--- |
+| **G (Goroutine)** | 协程 | 待执行的任务，轻量级（2KB 栈，可动态伸缩） |
+| **M (Machine)** | 系统线程 | 实际执行 G 的载体，与内核线程 1:1 对应 |
+| **P (Processor)** | 逻辑处理器 | 调度上下文，包含可运行的 G 队列，数量默认等于 CPU 核心数 |
+
+**调度流程**：
+
+```
+全局队列
++----------------+
+|  G1  |  G2  |  G3  |
++----------------+
+
+P0 的本地队列       P1 的本地队列       P2 的本地队列       P3 的本地队列
++----------+       +----------+       +----------+       +----------+
+| G4 | G5  |       | G6 | G7  |       | G8 | G9  |       | G10| G11 |
++----------+       +----------+       +----------+       +----------+
+    |                     |                     |                     |
+    v                     v                     v                     v
++----------+       +----------+       +----------+       +----------+
+|    M0    |       |    M1    |       |    M2    |       |    M3    |
+| (OS线程) |       | (OS线程) |       | (OS线程) |       | (OS线程) |
++----------+       +----------+       +----------+       +----------+
+
+调度策略：
+1. 每个 P 维护一个本地 G 队列，减少锁竞争
+2. P 从本地队列取 G 交给 M 执行
+3. 本地队列空时，从其他 P"偷"一半的 G（Work Stealing）
+4. 全局队列作为兜底，每隔一段时间检查一次
+```
+
+---
+
+## 5. 实战代码模板
+
+### 5.1 Python asyncio 高并发模板
+
+```python
+import asyncio
+import aiohttp
+from typing import List, Dict
+import time
+
+class AsyncHTTPClient:
+    """基于 asyncio 的高性能 HTTP 客户端"""
+
+    def __init__(self, max_connections: int = 100, timeout: int = 30):
+        self.timeout = aiohttp.ClientTimeout(total=timeout)
+        # 限制并发连接数，防止把对方服务打挂
+        connector = aiohttp.TCPConnector(
+            limit=max_connections,
+            limit_per_host=10,  # 对单个域名的连接限制
+            enable_cleanup_closed=True,
+            force_close=True,
+        )
+        self.session = aiohttp.ClientSession(
+            connector=connector,
+            timeout=self.timeout,
+        )
+
+    async def fetch(self, url: str, method: str = 'GET', **kwargs) -> Dict:
+        """发送单个请求"""
+        try:
+            async with self.session.request(method, url, **kwargs) as response:
+                return {
+                    'url': url,
+                    'status': response.status,
+                    'data': await response.text(),
+                    'error': None
+                }
+        except asyncio.TimeoutError:
+            return {'url': url, 'status': None, 'data': None, 'error': 'Timeout'}
+        except Exception as e:
+            return {'url': url, 'status': None, 'data': None, 'error': str(e)}
+
+    async def fetch_many(self, urls: List[str], concurrency: int = 10) -> List[Dict]:
+        """并发获取多个 URL，限制并发数"""
+        semaphore = asyncio.Semaphore(concurrency)
+
+        async def fetch_with_limit(url):
+            async with semaphore:
+                return await self.fetch(url)
+
+        # 并发执行所有请求
+        tasks = [fetch_with_limit(url) for url in urls]
+        return await asyncio.gather(*tasks, return_exceptions=True)
+
+    async def close(self):
+        await self.session.close()
+
+
+# 使用示例
+async def main():
+    client = AsyncHTTPClient(max_connections=50)
+
+    # 要抓取的 URL 列表
+    urls = [
+        "https://api.github.com/users/github",
+        "https://api.github.com/users/google",
+        "https://api.github.com/users/microsoft",
+        # ... 更多 URL
+    ] * 10  # 模拟 300 个请求
+
+    start = time.time()
+    results = await client.fetch_many(urls, concurrency=20)
+    elapsed = time.time() - start
+
+    # 统计结果
+    success = sum(1 for r in results if r.get('status') == 200)
+    failed = len(results) - success
+
+    print(f"总请求数: {len(results)}")
+    print(f"成功: {success}, 失败: {failed}")
+    print(f"耗时: {elapsed:.2f}s")
+    print(f"QPS: {len(results)/elapsed:.1f}")
+
+    await client.close()
+
+if __name__ == "__main__":
+    asyncio.run(main())
+```
+
+### 5.2 Go 高并发服务模板
+
+```go
+package main
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"runtime"
+	"time"
+
+	"golang.org/x/sync/errgroup"
+)
+
+// Request/Response 结构
+type OrderRequest struct {
+	UserID    int64   `json:"user_id"`
+	ProductID int64   `json:"product_id"`
+	Quantity  int     `json:"quantity"`
+	Price     float64 `json:"price"`
+}
+
+type OrderResponse struct {
+	OrderID   int64   `json:"order_id"`
+	Status    string  `json:"status"`
+	Total     float64 `json:"total"`
+	CreatedAt string  `json:"created_at"`
+}
+
+// 模拟数据库操作
+type Database struct {
+	orders map[int64]*OrderResponse
+	mutex  chan struct{}
+}
+
+func NewDatabase() *Database {
+	db := &Database{
+		orders: make(map[int64]*OrderResponse),
+		mutex:  make(chan struct{}, 1), // 模拟互斥锁
+	}
+	return db
+}
+
+func (db *Database) CreateOrder(ctx context.Context, req *OrderRequest) (*OrderResponse, error) {
+	// 获取锁
+	select {
+	case db.mutex <- struct{}{}:
+		defer func() { <-db.mutex }()
+	case <-ctx.Done():
+		return nil, ctx.Err()
+	}
+
+	// 模拟数据库操作延迟
+	select {
+	case <-time.After(50 * time.Millisecond):
+	case <-ctx.Done():
+		return nil, ctx.Err()
+	}
+
+	order := &OrderResponse{
+		OrderID:   time.Now().UnixNano(),
+		Status:    "created",
+		Total:     req.Price * float64(req.Quantity),
+		CreatedAt: time.Now().Format(time.RFC3339),
+	}
+	db.orders[order.OrderID] = order
+	return order, nil
+}
+
+// HTTP 处理器
+type Handler struct {
+	db *Database
+}
+
+func NewHandler(db *Database) *Handler {
+	return &Handler{db: db}
+}
+
+func (h *Handler) CreateOrder(w http.ResponseWriter, r *http.Request) {
+	// 设置请求超时
+	ctx, cancel := context.WithTimeout(r.Context(), 2*time.Second)
+	defer cancel()
+
+	var req OrderRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	order, err := h.db.CreateOrder(ctx, &req)
+	if err != nil {
+		if err == context.DeadlineExceeded {
+			http.Error(w, "Request timeout", http.StatusGatewayTimeout)
+			return
+		}
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(order)
+}
+
+func (h *Handler) Health(w http.ResponseWriter, r *http.Request) {
+	info := map[string]interface{}{
+		"status":    "ok",
+		"goroutine": runtime.NumGoroutine(),
+		"cpu":       runtime.NumCPU(),
+		"version":   runtime.Version(),
+	}
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(info)
+}
+
+// 批量处理示例
+func BatchProcess(ctx context.Context, items []int) ([]int, error) {
+	g, ctx := errgroup.WithContext(ctx)
+	g.SetLimit(10) // 限制并发数为 10
+
+	results := make([]int, len(items))
+
+	for i, item := range items {
+		i, item := i, item // 避免闭包陷阱
+		g.Go(func() error {
+			select {
+			case <-ctx.Done():
+				return ctx.Err()
+			default:
+				// 模拟处理
+				time.Sleep(100 * time.Millisecond)
+				results[i] = item * 2
+				return nil
+			}
+		})
+	}
+
+	if err := g.Wait(); err != nil {
+		return nil, err
+	}
+	return results, nil
+}
+
+func main() {
+	// 初始化数据库
+	db := NewDatabase()
+
+	// 创建处理器
+	handler := NewHandler(db)
+
+	// 设置路由
+	mux := http.NewServeMux()
+	mux.HandleFunc("/order", handler.CreateOrder)
+	mux.HandleFunc("/health", handler.Health)
+
+	// 创建服务器
+	server := &http.Server{
+		Addr:         ":8080",
+		Handler:      mux,
+		ReadTimeout:  5 * time.Second,
+		WriteTimeout: 10 * time.Second,
+		IdleTimeout:  120 * time.Second,
+	}
+
+	fmt.Println("Server starting on :8080")
+	fmt.Printf("Go version: %s\n", runtime.Version())
+	fmt.Printf("CPU cores: %d\n", runtime.NumCPU())
+
+	if err := server.ListenAndServe(); err != nil {
+		log.Fatal(err)
+	}
+}
+```
+
+---
+
+## 6. 总结对照表
+
+### 6.1 核心概念对比
+
+| 特性 | 进程 | 线程 | 协程 |
+| :--- | :--- | :--- | :--- |
+| **调度者** | 操作系统 | 操作系统 | 用户程序/运行时 |
+| **切换开销** | ~1-10ms | ~1-10μs | ~100ns |
+| **内存占用** | ~10MB+ | ~1MB | ~2KB |
+| **通信方式** | IPC | 共享内存 | 共享内存/Channel |
+| **同步需求** | 不需要 | 需要锁 | 需要锁/协作式 |
+| **崩溃影响** | 仅本进程 | 整个进程 | 可控制 |
+| **适用场景** | 强隔离、多租户 | CPU 密集型 | I/O 密集型 |
+| **典型语言** | 所有语言 | 所有语言 | Go、Python、JS、Rust |
+
+### 6.2 并发模型选型指南
+
+| 场景 | 推荐模型 | 理由 |
+| :--- | :--- | :--- |
+| Web 服务网关 | 协程 + 异步 I/O | 高并发连接，低内存占用 |
+| 实时通信服务 | 协程 + 长连接 | 维持大量 WebSocket 连接 |
+| 数据处理管道 | 多进程 + 协程 | 利用多核，I/O 不阻塞 |
+| 科学计算 | 多线程/多进程 | CPU 密集型，需要并行计算 |
+| 微服务架构 | 多进程 + 协程 | 服务间隔离，内部高并发 |
+| 嵌入式系统 | 协程/单线程 | 资源受限，确定性调度 |
+
+### 6.3 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Process** | 进程 | 操作系统资源分配的基本单位，拥有独立的内存空间 |
+| **Thread** | 线程 | CPU 调度的基本单位，共享进程内存空间 |
+| **Coroutine** | 协程 | 用户态轻量级线程，由程序自主调度 |
+| **Concurrency** | 并发 | 多个任务交替执行，宏观上同时推进 |
+| **Parallelism** | 并行 | 多个任务真正同时执行，需要多核支持 |
+| **Context Switch** | 上下文切换 | CPU 从一个任务切换到另一个任务的过程 |
+| **Blocking I/O** | 阻塞 I/O | 发起 I/O 请求后等待完成，期间线程挂起 |
+| **Non-blocking I/O** | 非阻塞 I/O | 发起 I/O 请求后立即返回，不等待结果 |
+| **Async I/O** | 异步 I/O | I/O 完成时通过回调或通知机制告知调用者 |
+| **Event Loop** | 事件循环 | 协程调度机制，持续监听事件并分发处理 |
+| **Goroutine** | Go 协程 | Go 语言的轻量级线程实现 |
+| **Channel** | 通道 | Go 语言中协程间通信的机制 |
+| **Mutex** | 互斥锁 | 用于保护共享资源的同步原语 |
+| **Semaphore** | 信号量 | 控制同时访问某资源的线程数量 |
+| **Deadlock** | 死锁 | 多个线程互相等待对方释放资源，导致永久阻塞 |
+| **Race Condition** | 竞态条件 | 多个线程同时访问共享数据，导致结果不确定 |
+| **Thread Pool** | 线程池 | 预先创建一组线程，复用以减少创建销毁开销 |
+| **Work Stealing** | 工作窃取 | 空闲线程从忙碌线程的队列中"偷"任务执行 |
+| **Zero-copy** | 零拷贝 | 数据在内核态和用户态之间传输时不经过 CPU 拷贝 |
+| **C10K Problem** | C10K 问题 | 单机同时处理 1 万个连接的挑战 |
+| **C10M Problem** | C10M 问题 | 单机同时处理 1000 万个连接的终极挑战 |
+
+---
+
+## 7. 写在最后
+
+### 7.1 并发编程的黄金法则
+
+1. **不要过早优化**：先让代码正确运行，再考虑性能优化
+2. **避免共享状态**："不要通过共享内存来通信，而要通过通信来共享内存"
+3. **让错误尽早暴露**：并发 Bug 往往难以复现，要在测试阶段尽可能暴露
+4. **限制并发数**：无限并发等于没有保护，要用信号量或连接池限制
+5. **监控和可观测**：并发系统必须有完善的监控，才能快速定位问题
+
+### 7.2 学习路线图
+
+```
+阶段 1: 基础理解
+    ├── 理解进程/线程的基本概念
+    ├── 学习同步原语（锁、信号量、条件变量）
+    └── 编写简单的多线程程序
+
+阶段 2: 深入原理
+    ├── 理解内存模型和可见性
+    ├── 学习无锁编程和原子操作
+    ├── 理解线程池和工作窃取
+    └── 分析死锁和竞态条件
+
+阶段 3: 高级应用
+    ├── 掌握协程和异步编程
+    ├── 学习 Go/Python/Rust 的并发模型
+    ├── 理解分布式系统中的并发
+    └── 性能调优和容量规划
+
+阶段 4: 专家水平
+    ├── 设计高并发系统架构
+    ├── 解决复杂的并发 Bug
+    ├── 开发并发编程框架
+    └── 分享和传播并发知识
+```
+
+希望这篇指南能帮助你建立起对并发编程的系统认知。记住，**并发不是目的，而是手段**——真正的目标是构建高性能、高可用的服务。理解原理、选对模型、写好代码，你就能在并发这条路上越走越远。
diff --git a/docs/zh-cn/appendix/context-engineering.md b/docs/zh-cn/appendix/context-engineering.md
index 3fc3b2e..314e6f5 100644
--- a/docs/zh-cn/appendix/context-engineering.md
+++ b/docs/zh-cn/appendix/context-engineering.md
@@ -11,6 +11,8 @@
 
 ## 0. 引言：为什么聊着聊着，它就忘事，还越来越贵？
 
+<AgentContextFlow />
+
 很多人在实际使用大模型时都会遇到类似的情况：
 
 - 聊到一半，模型突然“忘记”之前说过的关键条件；
diff --git a/docs/zh-cn/appendix/database-intro.md b/docs/zh-cn/appendix/database-intro.md
index a76f91a..3227589 100644
--- a/docs/zh-cn/appendix/database-intro.md
+++ b/docs/zh-cn/appendix/database-intro.md
@@ -1,74 +1,82 @@
-# 数据库原理入门：从 Excel 到 SQL
+# 数据库原理入门：为什么淘宝能在 0.01 秒内找到你的订单？
 
-> 💡 **学习指南**：本章节无需编程基础，我们将从你熟悉的 Excel 表格出发，一步步深入数据库的底层原理。你会明白为什么数据库能从数十亿条数据中瞬间找到你想要的那一条，以及它背后那个神奇的 B+ 树是如何工作的。
-
-<DatabaseQuickStartDemo />
-
-## 0. 引言：当数据像滚雪球一样增长
-
-人类天生擅长处理小数据。一家小店里的账目、一个班级里的学生名单，我们可以轻松地记在脑子里，或者写在纸上。
-
-但是，当数据开始**像滚雪球一样增长**时——从 100 条变成 100 万条，从 1 个用户变成 1 亿个用户——我们遇到了一个核心问题：
-
-**如何高效地存取海量数据？**
-
-这个问题的答案，就是**数据库 (Database)**。
-
-本教程将带你从零开始，一步步拆解数据库这座大厦的构建过程：
-
-1. **存储**：数据是如何从 Excel 进化到数据库的？
-2. **组织**：表、列、行、关系，这些概念到底是什么？
-3. **语言**：如何用 SQL 与数据库对话？
-4. **速度**：为什么数据库能毫秒级查询？（揭秘 B+ 树索引）
+> 💡 **学习指南**：本章节无需编程基础。我们将从一个你熟悉的场景出发——当你在淘宝搜索订单时，系统如何在 10 亿条记录中瞬间定位到你购买的那件 T 恤？答案藏在数据库的底层原理里：B+ 树、索引、事务……我们会用真实的业务案例（淘宝、微信、12306）一步步拆解这些概念。
 
 ---
 
-## 1. 数据的进化：从记事本到数据库
+## 0. 引言：当你的 Excel 打不开时
 
-想象一下，你经营着一家小书店。
+想象一下：
 
-### 1.1 第一阶段：记事本
+- **场景 A**：你是淘宝的订单系统负责人，今天是大促，1 秒钟有 100 万笔新订单涌入。你的 Excel 还在转圈……
+- **场景 B**：你是微信的工程师，用户正在加载朋友圈，需要瞬间从百亿条动态里找到他好友的 20 条。你的代码还在循环遍历……
+- **场景 C**：你是 12306 的架构师，春运当天，几千万人同时抢票，系统必须保证同一张票不会被两个人同时买到。你的数据库连接池已经耗尽……
 
-刚开始，你每天卖出几本书，随手记在**记事本**上。
+这三个场景的共同点是：**数据规模已经从"千条"变成了"百亿条"，用户并发从"几人"变成了"千万人"**。
 
-- **优点**：简单，拿笔就能写。
-- **缺点**：
-  - 想知道"上个月一共卖了多少钱？"——你得一页页翻，按着计算器算半天。
-  - 想知道"哪本书卖得最好？"——你可能需要手动数每本书出现的次数。
+这时候，Excel 已经完全无法胜任，你需要的是**数据库 (Database)**。
+
+本教程将带你从零开始，理解数据库这座大厦是如何构建的：
+
+1. **存储革命**：数据是如何从 Excel 进化到数据库的？
+2. **关系模型**：表、行、列、主键、外键到底是什么？
+3. **查询语言**：如何用 SQL 与数据库对话？
+4. **性能核心**：为什么数据库能毫秒级查询？（揭秘 B+ 树索引）
+5. **事务安全**：如何保证数据不丢、不乱、不冲突？
+
+<DatabaseEvolutionDemo />
+
+---
+
+## 1. 为什么 Excel 不够用了？从记事本到数据库的进化
+
+### 1.1 当数据只有 100 条时：记事本时代
+
+假设你开了一家小书店，每天卖出几本书。你随手记在笔记本上：
+
+```
+2024-01-15：张三买了《百年孤独》，59元
+2024-01-16：李四买了《活着》，39元
+```
+
+**优点**：零门槛，拿笔就能写。
+
+**缺点**：
+- 想知道"上个月一共卖了多少钱？"——你得一页页翻，按着计算器算半天。
+- 想知道"哪本书卖得最好？"——你可能需要手动数每本书出现的次数。
 
 这就是**无结构化数据**的困境：数据是死的，想要获得洞察，需要人工大量加工。
 
-### 1.2 第二阶段：Excel 表格
+### 1.2 当数据增长到 1 万条时：Excel 时代
 
 生意好了，你开始用 **Excel**。
 
-你建了一张表，列出了：`书名`、`价格`、`购买者`、`日期`。
+你建了一张表，列出了：`订单号`、`书名`、`价格`、`购买者`、`购买日期`。
 
-| 书名 | 价格 | 购买者 | 日期 |
-|------|------|--------|------|
-| 百年孤独 | 59 | 张三 | 2024-01-15 |
-| 活着 | 39 | 李四 | 2024-01-16 |
+| 订单号 | 书名 | 价格 | 购买者 | 日期 |
+|--------|------|------|--------|------|
+| 001 | 百年孤独 | 59 | 张三 | 2024-01-15 |
+| 002 | 活着 | 39 | 李四 | 2024-01-16 |
 
-- **优点**：
-  - 可以**自动求和**（SUM 函数）。
-  - 可以**排序**（按价格从高到低）。
-  - 可以**筛选**（只看张三的购买记录）。
-- **缺点**：
-  - **容量有限**：当你有 100 万行数据时，Excel 打开都要几分钟，甚至直接卡死。
-  - **难以协作**：你和店员不能同时修改同一个文件，否则会冲突（你得等同事保存关闭后才能编辑）。
-  - **数据不安全**：不小心删了一行，Ctrl+Z 可能救不回来。如果硬盘坏了，数据可能永久丢失。
-  - **数据冗余**：如果张三买了 100 本书，你得在每一行重复写张三的地址和电话。如果张三换了电话，你得修改 100 行。
+**优点**：
+- 可以**自动求和**（SUM 函数）。
+- 可以**排序**（按价格从高到低）。
+- 可以**筛选**（只看张三的购买记录）。
+
+**缺点**：
+- **容量有限**：当你有 100 万行数据时，Excel 打开都要几分钟，甚至直接卡死。
+- **难以协作**：你和店员不能同时修改同一个文件，否则会冲突（你得等同事保存关闭后才能编辑）。
+- **数据不安全**：不小心删了一行，Ctrl+Z 可能救不回来。如果硬盘坏了，数据可能永久丢失。
+- **数据冗余**：如果张三买了 100 本书，你得在每一行重复写张三的地址和电话。如果张三换了电话，你得修改 100 行。
 
 这就是**单机文件型数据**的瓶颈：它只适合个人或小团队处理中等规模的数据。
 
-### 1.3 第三阶段：数据库 (Database)
+### 1.3 当数据达到 1 亿条时：数据库时代
 
 当你的书店变成了"亚马逊"，你需要处理亿级的订单，成千上万的用户同时访问。这时，你就需要**数据库**。
 
 **数据库，本质上就是一个"超级 Excel"**，但它专为**海量数据**、**高并发访问**和**数据安全**而设计。
 
-<DatabaseEvolutionDemo />
-
 **核心优势对比**：
 
 | 特性 | 记事本 | Excel | 数据库 |
@@ -81,7 +89,7 @@
 
 ---
 
-## 2. 数据库长什么样？
+## 2. 数据库长什么样？从图书馆的视角理解关系模型
 
 最流行的数据库类型是**关系型数据库 (Relational Database)**，比如 MySQL、PostgreSQL。它们的样子其实和 Excel 非常像，但概念更加严谨。
 
@@ -112,6 +120,8 @@
 - **行**：每一行是一个用户（书架上的每本书）
 - **主键**：`user_id`（ISBN 编号，1、2、3 永不重复）
 
+<DatabaseRelationDemo />
+
 ### 2.2 关系 (Relation)：数据库的灵魂
 
 这是数据库比 Excel 强大的关键。
@@ -161,11 +171,9 @@
 - **数据一致**：张三换电话，只需要改 `users` 表一行，所有订单关联的电话自动更新。
 - **灵活查询**：可以轻松回答复杂问题，比如"统计每个用户的总消费金额"。
 
-<DatabaseRelationDemo />
-
 ---
 
-## 3. 如何和数据库说话？（SQL 入门）
+## 3. 如何和数据库说话？SQL 入门与实战
 
 你不能直接用鼠标去点数据库（虽然有图形化工具，但本质也是转换成命令），你需要用一种特殊的、标准化的语言来指挥数据库工作。
 
@@ -184,7 +192,7 @@
 | **U**pdate | 更新/修改 | `UPDATE` | 修改单元格内容 |
 | **D**elete | 删除 | `DELETE` | 删除一行 |
 
-### 3.2 实战示例：书店管理系统
+### 3.2 实战示例：淘宝订单系统
 
 假设我们有以下两张表：
 
@@ -196,13 +204,13 @@
 | 2 | 李四 | 30 | 上海 |
 | 3 | 王五 | 28 | 北京 |
 
-**图书表 (books)**：
+**商品表 (products)**：
 
-| book_id | title | price | stock |
-|---------|-------|-------|-------|
-| 101 | 百年孤独 | 59 | 100 |
-| 102 | 活着 | 39 | 50 |
-| 103 | 三体 | 99 | 200 |
+| product_id | name | price | stock |
+|------------|------|-------|-------|
+| 101 | iPhone 15 | 5999 | 1000 |
+| 102 | MacBook Pro | 14999 | 500 |
+| 103 | AirPods Pro | 1999 | 2000 |
 
 #### 查询数据 (Read)
 
@@ -224,10 +232,10 @@ SELECT name, age FROM users WHERE age > 25;
 | 李四 | 30 |
 | 王五 | 28 |
 
-**示例 2**：查找价格在 40 到 100 之间的图书
+**示例 2**：查找价格在 5000 到 15000 之间的商品
 
 ```sql
-SELECT title, price FROM books WHERE price BETWEEN 40 AND 100;
+SELECT name, price FROM products WHERE price BETWEEN 5000 AND 15000;
 ```
 
 #### 插入数据 (Create)
@@ -270,32 +278,32 @@ DELETE FROM users WHERE user_id = 4;
 
 还记得我们讲过的"关系"吗？SQL 最强大的地方在于可以一次性查询多张关联的表。
 
-**示例场景**：查询"张三购买过的所有图书"
+**示例场景**：查询"张三购买过的所有商品"
 
 假设我们还有一张订单表 (orders)：
 
-| order_id | user_id | book_id | quantity |
-|----------|---------|---------|----------|
-| 1001 | 1 | 101 | 1 |
-| 1002 | 1 | 102 | 2 |
-| 1003 | 2 | 101 | 1 |
+| order_id | user_id | product_id | quantity | order_date |
+|----------|---------|--------------|----------|------------|
+| 1001 | 1 | 101 | 1 | 2024-01-15 |
+| 1002 | 1 | 103 | 2 | 2024-01-16 |
+| 1003 | 2 | 101 | 1 | 2024-01-17 |
 
 **SQL 查询**：
 
 ```sql
-SELECT u.name, b.title, o.quantity
+SELECT u.name, p.name AS product_name, o.quantity, o.order_date
 FROM orders o
 JOIN users u ON o.user_id = u.user_id
-JOIN books b ON o.book_id = b.book_id
+JOIN products p ON o.product_id = p.product_id
 WHERE u.name = '张三';
 ```
 
 **返回结果**：
 
-| name | title | quantity |
-|------|-------|----------|
-| 张三 | 百年孤独 | 1 |
-| 张三 | 活着 | 2 |
+| name | product_name | quantity | order_date |
+|------|--------------|----------|------------|
+| 张三 | iPhone 15 | 1 | 2024-01-15 |
+| 张三 | AirPods Pro | 2 | 2024-01-16 |
 
 通过 `JOIN`，我们把三张表的数据关联在了一起，得到了完整的答案。
 
@@ -303,7 +311,7 @@ WHERE u.name = '张三';
 
 ---
 
-## 4. 为什么数据库这么快？（索引原理揭秘）
+## 4. 为什么数据库这么快？索引原理与 B+ 树揭秘
 
 这是数据库最神奇的地方，也是面试中最爱问的问题。
 
@@ -343,8 +351,6 @@ WHERE u.name = '张三';
 
 **速度差距**：数千倍甚至数万倍！
 
-<DatabaseIndexDemo />
-
 ### 4.3 底层数据结构：B+ 树
 
 真实的索引并不是简单的"字母排序列表"，而是一种精心设计的数据结构，叫做 **B+ 树 (B+ Tree)**。
@@ -394,7 +400,152 @@ B+ 树有一个非常聪明的设计：**它非常"矮胖"**。
 
 ---
 
-## 5. 总结与学习路线
+## 5. 事务：当多人同时抢票时，系统如何保证不重复售票？
+
+想象一下春运期间的 12306：
+
+- 时间 T1：用户 A 查询，发现"G1234 次列车还剩 1 张票"。
+- 时间 T2：用户 B 也查询，也发现"还剩 1 张票"。
+- 时间 T3：用户 A 点击"购买"，系统减库存，票卖给了 A。
+- 时间 T4：用户 B 点击"购买"——如果没有保护机制，系统会再次减库存，把同一张票卖给 B！
+
+这就是典型的**并发冲突**问题。
+
+### 5.1 什么是事务 (Transaction)？
+
+**事务**是数据库的一组操作，这些操作要么全部成功，要么全部失败，不会出现"做了一半"的情况。
+
+事务有四大特性，简称 **ACID**：
+
+| 特性 | 英文 | 含义 | 12306 的例子 |
+|------|------|------|--------------|
+| **A**tomicity | 原子性 | 操作要么全做，要么全不做 | 买票时扣款和出票必须同时成功，不能只扣钱不出票 |
+| **C**onsistency | 一致性 | 数据始终保持合法状态 | 票卖完了，库存必须是 0，不能是负数 |
+| **I**solation | 隔离性 | 多个事务互不影响 | A 在买票时，B 看到的结果应该是"已售罄"或"还剩 1 张"，不会看到中间状态 |
+| **D**urability | 持久性 | 一旦提交，数据永久保存 | 订单成功后，即使服务器宕机，已售出的票也不会丢失 |
+
+### 5.2 事务的隔离级别：鱼与熊掌的权衡
+
+理论上，我们希望事务完全隔离（最高的隔离性）。但在实际系统中，**完全隔离 = 性能极差**（因为需要大量加锁，其他事务只能等待）。
+
+因此，数据库提供了四种**隔离级别**，让开发者根据业务场景权衡：
+
+| 隔离级别 | 脏读 | 不可重复读 | 幻读 | 适用场景 |
+|----------|------|------------|------|----------|
+| **读未提交** | 可能 | 可能 | 可能 | 几乎不用（数据可能错误） |
+| **读已提交** | 不可能 | 可能 | 可能 | 普通业务（Oracle 默认） |
+| **可重复读** | 不可能 | 不可能 | 可能 | 银行转账（MySQL 默认） |
+| **串行化** | 不可能 | 不可能 | 不可能 | 极端严格场景（极少用） |
+
+**名词解释**：
+- **脏读**：读到了其他事务还没提交的数据（可能回滚）。
+- **不可重复读**：同一个事务里，两次读同一个数据，结果不一样（因为被其他事务修改了）。
+- **幻读**：同一个事务里，两次查询，结果集的行数不一样（因为其他事务插入或删除了数据）。
+
+<TransactionACIDDemo />
+
+---
+
+## 6. 性能优化：如何让你的查询快 1000 倍？
+
+现在你已经理解了索引、事务这些核心概念。但在真实项目中，你可能会遇到这样的问题：
+
+- "明明建了索引，为什么查询还是很慢？"
+- "这条 SQL 昨天还很快，今天怎么突然卡死了？"
+- "并发一高，数据库就挂了，怎么办？"
+
+本节将给出**可直接落地的优化策略**。
+
+### 6.1 索引使用避坑指南
+
+**坑 1：在索引列上使用函数，导致索引失效**
+
+```sql
+-- 错误：对索引列使用函数，无法使用索引
+SELECT * FROM users WHERE YEAR(created_at) = 2024;
+
+-- 正确：改写为范围查询，可以使用索引
+SELECT * FROM users WHERE created_at >= '2024-01-01' AND created_at < '2025-01-01';
+```
+
+**坑 2：隐式类型转换，导致索引失效**
+
+```sql
+-- 假设 user_id 是 int 类型
+-- 错误：传字符串，可能导致隐式转换
+SELECT * FROM users WHERE user_id = '123';
+
+-- 正确：传对应类型
+SELECT * FROM users WHERE user_id = 123;
+```
+
+**坑 3：LIKE 查询以 % 开头，无法使用索引**
+
+```sql
+-- 错误：以 % 开头，无法使用索引
+SELECT * FROM users WHERE name LIKE '%张三%';
+
+-- 正确：以固定前缀开头，可以使用索引
+SELECT * FROM users WHERE name LIKE '张三%';
+```
+
+### 6.2 SQL 优化技巧模板
+
+**模板 1：分页优化（深分页问题）**
+
+```sql
+-- 问题：当 OFFSET 很大时，查询会越来越慢
+SELECT * FROM orders ORDER BY created_at DESC LIMIT 10 OFFSET 1000000;
+
+-- 优化方案 1：使用覆盖索引
+SELECT * FROM orders
+WHERE created_at < '上次查询的最小时间戳'
+ORDER BY created_at DESC LIMIT 10;
+
+-- 优化方案 2：使用主键范围查询
+SELECT * FROM orders
+WHERE order_id > 上次查询的最大order_id
+ORDER BY order_id LIMIT 10;
+```
+
+**模板 2：批量插入优化**
+
+```sql
+-- 低效：多次单条插入
+INSERT INTO users (name, age) VALUES ('张三', 25);
+INSERT INTO users (name, age) VALUES ('李四', 30);
+
+-- 高效：单条 SQL 批量插入
+INSERT INTO users (name, age) VALUES
+('张三', 25),
+('李四', 30),
+('王五', 28);
+```
+
+**模板 3：避免 SELECT **
+
+```sql
+-- 低效：返回所有列
+SELECT * FROM users WHERE user_id = 1;
+
+-- 高效：只返回需要的列
+SELECT user_id, name, email FROM users WHERE user_id = 1;
+```
+
+### 6.3 高并发场景应对策略
+
+| 场景 | 问题 | 解决方案 |
+|------|------|----------|
+| 热点数据 | 某行数据被频繁读写，导致锁竞争 | 缓存 + 读写分离；或分段锁 |
+| 秒杀场景 | 瞬间高并发扣减库存 | 乐观锁 + 库存预热 + 队列削峰 |
+| 慢查询 | 复杂查询拖垮数据库 | 索引优化 + 查询拆分 + 读写分离 |
+| 连接数耗尽 | 太多并发请求导致连接池耗尽 | 连接池优化 + 限流 + 服务降级 |
+
+<QueryOptimizationDemo />
+
+---
+
+## 7. 总结与学习路线
 
 现在你已经打通了从"Excel 表格"到"B+ 树索引"的任督二脉：
 
@@ -402,6 +553,8 @@ B+ 树有一个非常聪明的设计：**它非常"矮胖"**。
 2. **数据的组织**：通过**表**、**列**、**行**、**主键**组织数据，通过**关系**（外键）连接多张表，消除冗余。
 3. **SQL 语言**：使用 `SELECT`、`INSERT`、`UPDATE`、`DELETE` 等命令与数据库对话，通过 `JOIN` 实现多表查询。
 4. **索引原理**：使用 **B+ 树**作为底层数据结构，通过"矮胖"的树形结构，将磁盘 I/O 次数降至最低，实现毫秒级查询。
+5. **事务安全**：通过 **ACID 特性**和**隔离级别**，保证数据的一致性、完整性和并发安全。
+6. **性能优化**：通过合理的索引设计、SQL 优化和高并发策略，让查询效率提升 1000 倍。
 
 **下一步建议**：
 
@@ -411,7 +564,7 @@ B+ 树有一个非常聪明的设计：**它非常"矮胖"**。
 
 ---
 
-## 6. 名词速查表 (Glossary)
+## 8. 名词速查表 (Glossary)
 
 | 名词 | 英文 | 解释 |
 |------|------|------|
@@ -428,3 +581,9 @@ B+ 树有一个非常聪明的设计：**它非常"矮胖"**。
 | **B+ 树** | B+ Tree | 数据库索引常用的数据结构，具有矮胖、有序、支持范围查询的特点 |
 | **全表扫描** | Full Table Scan | 不通过索引，逐行扫描整张表的查询方式，效率低 |
 | **磁盘 I/O** | Disk I/O | 从磁盘读取或写入数据的操作，相对于内存操作非常慢 |
+| **事务** | Transaction | 一组数据库操作，要么全部成功，要么全部失败 |
+| **ACID** | Atomicity, Consistency, Isolation, Durability | 事务的四大特性：原子性、一致性、隔离性、持久性 |
+| **隔离级别** | Isolation Level | 事务并发时的隔离程度，分为读未提交、读已提交、可重复读、串行化 |
+| **脏读** | Dirty Read | 读到了其他事务未提交的数据 |
+| **不可重复读** | Non-repeatable Read | 同一事务内两次读取同一数据，结果不同 |
+| **幻读** | Phantom Read | 同一事务内两次查询，结果集的行数不同 |
diff --git a/docs/zh-cn/appendix/frontend-engineering.md b/docs/zh-cn/appendix/frontend-engineering.md
new file mode 100644
index 0000000..e4f7910
--- /dev/null
+++ b/docs/zh-cn/appendix/frontend-engineering.md
@@ -0,0 +1,772 @@
+# 前端工程化与构建流水线
+
+> 💡 **学习指南**：本章围绕一个问题展开：**如何把你写的一堆代码，变成用户浏览器里能跑、跑得快的网站？** 这就像是问：如何把原材料变成成品，还要保证质量、控制成本？
+
+在开始之前，建议你先了解：
+
+- **什么是模块化**：如果你还不熟悉 ES6 的 `import`/`export`，可以先了解一下基础概念。
+- **命令行基础**：会用 `cd`、`npm` 等基础命令会帮助你更好地理解构建流程。
+
+---
+
+## 0. 引言：为什么前端越来越"重"了？
+
+<BuildPipelineDemo />
+
+还记得十年前的前端开发吗？那时候的我们：
+
+- 写几个 HTML 页面，内嵌一些 CSS 和 JavaScript
+- 直接把文件拖到浏览器里就能看效果
+- 部署的时候，直接把文件夹上传到服务器
+- 一个网站的总代码量可能也就几十 KB
+
+但现在的前端开发，完全变了样：
+
+- 我们用 TypeScript 代替 JavaScript，需要编译
+- 我们用 Vue/React 的 JSX/SFC，需要转换
+- 我们用 Sass/Less 写 CSS，需要预处理
+- 我们用各种 npm 包，需要打包
+- 一个中大型项目的依赖可能上千个，总大小几百 MB
+
+**这就是"前端工程化"要解决的问题。**
+
+<BundlerComparisonDemo />
+
+### 1.1 前端工程的"三座大山"
+
+现代前端工程主要面临三大挑战：
+
+| 挑战 | 十年前 | 现在 | 解决方案 |
+|------|--------|------|----------|
+| **开发体验** | 刷新页面即可 | 热更新、类型检查、代码规范 | Vite、ESLint、TypeScript |
+| **产物优化** | 无需优化 | Tree Shaking、代码分割、压缩 | Webpack、Rollup、Terser |
+| **部署策略** | 直接上传 | CDN、缓存策略、版本控制 | CI/CD、Hash 文件名 |
+
+### 1.2 为什么你需要了解构建流程？
+
+你可能会说："我用 Vite 或者 Create React App，开箱即用，为什么还需要了解这些？"
+
+让我讲一个真实的故事：
+
+> **小明的踩坑记**
+>
+> 小明是一个前端新人，公司用 Vite 搭建的项目。有一天，产品经理说首页加载太慢了，要优化。
+>
+> 小明一顿操作：图片压缩、路由懒加载、启用 Gzip... 但首页依然慢。
+>
+> 后来他请教师傅，师傅一看：`vendor.js` 有 2MB！
+>
+> 原来小明为了用某个日期格式化函数，引入了 `moment.js` 整个库，而 `moment.js` 包含了 100 多种语言的 locale 文件。
+>
+> 解决方案：换成 `dayjs` 或者按需引入 `date-fns`。2MB 变成了 2KB。
+>
+> 小明从此明白：**不了解构建和打包原理，你连问题出在哪都不知道。**
+
+---
+
+## 2. 核心概念：构建、打包、转译都是啥？
+
+在深入工具之前，让我们先搞清楚几个经常被混淆的概念。
+
+### 2.1 转译（Transpile）
+
+**是什么？** 把一种编程语言（或其新版本）转换成另一种（或其旧版本）的过程。
+
+**为什么需要？**
+
+- 浏览器不支持最新的 ES2022 语法
+- 要把 TypeScript 转成 JavaScript
+- 要把 JSX/Vue SFC 转成纯 JS
+
+**常见工具：**
+
+- **Babel**：最老牌、生态最丰富的转译器
+- **SWC**：用 Rust 写的，速度极快（比 Babel 快 20 倍）
+- **esbuild**：Go 写的，也很快，但功能相对简单
+
+**举个例子：**
+
+```javascript
+// 你写的 (ES2020+)
+const result = data?.items?.map(item => item.name) ?? []
+
+// Babel 转译后 (ES5)
+var _data$items, _data$items$map
+var result =
+  (_data$items$map =
+    (_data$items = data == null ? void 0 : data.items) == null
+      ? void 0
+      : _data$items.map(function (item) {
+          return item.name
+        })) != null
+    ? _data$items$map
+    : []
+```
+
+### 2.2 打包（Bundle）
+
+**是什么？** 把多个分散的模块文件合并成一个（或几个）文件的过程。
+
+**为什么需要？**
+
+- 浏览器原生不支持 ES 模块（虽然有 `type="module"`，但生产环境还是需要考虑兼容性）
+- 减少 HTTP 请求数（HTTP/1.1 时代很重要，HTTP/2 有所改善但仍有限度）
+- 可以做更多的优化（Tree Shaking、代码分割等）
+
+**举个例子：**
+
+```
+源代码结构：
+src/
+├── index.js      (import a, b)
+├── utils/
+│   ├── a.js      (import c)
+│   ├── b.js
+│   └── c.js
+└── components/
+    └── Button.vue
+
+打包后：
+dist/
+└── bundle.js     (包含所有代码，按正确顺序组织)
+```
+
+### 2.3 构建（Build）
+
+**是什么？** 这是一个更广义的词，通常包含**转译 + 打包 + 各种优化**的完整流程。
+
+**一个完整的构建流程通常包括：**
+
+1. **预编译**：TypeScript → JavaScript、Sass → CSS
+2. **代码检查**：ESLint、类型检查
+3. **依赖解析**：分析模块依赖关系
+4. **转译**：Babel 转换语法
+5. **打包**：合并模块
+6. **优化**：压缩、Tree Shaking、代码分割
+7. **资源处理**：图片压缩、生成雪碧图
+8. **产物生成**：输出到 dist 目录
+
+### 2.4 三者的关系
+
+用一个餐厅比喻来理解：
+
+| 概念 | 餐厅比喻 | 实际作用 |
+|------|----------|----------|
+| **转译** | 把中文菜谱翻译成英文给外国厨师看 | 把新语法转成浏览器能懂的旧语法 |
+| **打包** | 把各桌点的菜装成一个个外卖盒 | 把分散的模块文件合并成 bundle |
+| **构建** | 从接单、做菜、打包到上菜的完整流程 | 从源代码到生产代码的完整转换过程 |
+
+---
+
+## 3. 实战案例：从0到1搭建工程化流程
+
+讲了这么多概念，让我们看一个真实的案例：某创业公司如何从"直接写 HTML"进化到"现代化工程化流程"。
+
+### 3.1 第一阶段：原始时代（痛点初现）
+
+**背景**：小团队，3个前端，做一个管理后台
+
+**当时的工作方式**：
+
+```
+项目结构：
+project/
+├── index.html
+├── login.html
+├── css/
+│   ├── bootstrap.css
+│   └── custom.css
+├── js/
+│   ├── jquery.js
+│   ├── bootstrap.js
+│   └── app.js
+└── images/
+```
+
+**遇到的问题**：
+
+1. **全局变量污染**：所有变量都在全局命名空间，经常冲突
+2. **依赖管理混乱**：jQuery 插件要先加载 jQuery，顺序错了就报错
+3. **代码难以复用**：想复用某个功能，只能复制粘贴
+4. **没有代码检查**：低级错误（如变量未定义）要运行后才发现
+
+**当时的解决方案**（临时的、不优雅的）：
+
+```javascript
+// 用自执行函数模拟模块化
+var ModuleA = (function () {
+  var privateVar = 'private'
+
+  function privateFn() {
+    console.log(privateVar)
+  }
+
+  return {
+    publicMethod: function () {
+      privateFn()
+    }
+  }
+})()
+
+// 依赖管理靠注释说明
+/**
+ * @requires jquery.js (must load first)
+ * @requires bootstrap.js
+ */
+```
+
+### 3.2 第二阶段：引入模块化（初见曙光）
+
+**转折点**：团队扩充到 8 人，项目变复杂，原生模块化（ES6）开始普及
+
+**引入的工具**：
+
+1. **Webpack**：模块打包
+2. **Babel**：ES6+ 转译
+3. **ESLint**：代码检查
+4. **npm/yarn**：依赖管理
+
+**新的项目结构**：
+
+```
+src/
+├── components/          # Vue/React 组件
+│   ├── Button/
+│   │   ├── index.js
+│   │   ├── Button.vue
+│   │   └── Button.test.js
+│   └── Modal/
+├── utils/               # 工具函数
+│   ├── index.js
+│   ├── date.js
+│   └── http.js
+├── services/            # API 服务
+│   ├── user.js
+│   └── order.js
+├── assets/              # 静态资源
+│   ├── images/
+│   └── styles/
+├── App.vue              # 根组件
+└── main.js              # 入口文件
+```
+
+**Webpack 配置（简化版）**：
+
+```javascript
+// webpack.config.js
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
+
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash:8].js',
+    clean: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        type: 'asset/resource'
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html'
+    })
+  ]
+}
+```
+
+**带来的改善**：
+
+1. **模块化开发**：每个文件就是一个模块，通过 import/export 清晰管理依赖
+2. **代码复用**：组件和工具函数可以在不同项目中复用
+3. **代码质量**：ESLint 在保存时自动检查，类型检查（后来引入 TypeScript）在编译时发现问题
+4. **性能优化**：Webpack 的代码分割、懒加载让首屏加载变快
+
+### 3.3 第三阶段：现代化工具链（当前实践）
+
+**新的痛点**（Webpack 时代）：
+
+1. **构建速度慢**：项目大了以后，Webpack 冷启动要 30 秒以上
+2. **配置复杂**：Webpack 配置往往几百行，新人难以上手
+3. **HMR 慢**：修改代码后，热更新要等好几秒
+
+**引入 Vite**：2021 年后，团队开始用 Vite 替代 Webpack
+
+**Vite 的优势**：
+
+| 对比项 | Webpack | Vite |
+|--------|---------|------|
+| 冷启动 | 30s+ | <1s |
+| HMR 更新 | 3-5s | <100ms |
+| 配置复杂度 | 高（需大量配置） | 低（约定优于配置） |
+| 构建产物 | 成熟稳定 | 现代浏览器优化 |
+
+**现在的开发体验**：
+
+```bash
+# 以前（Webpack）
+npm run dev
+# 等待 30 秒...
+# [INFO]  Compiled successfully in 30123ms
+# 修改代码 -> 保存 -> 等待 5 秒看到效果
+
+# 现在（Vite）
+npm run dev
+# 等待 300 毫秒...
+# [INFO]  ready in 312ms
+# 修改代码 -> 保存 -> 瞬间看到效果
+```
+
+### 3.4 团队踩过的坑（真实教训）
+
+**坑 1：依赖地狱**
+
+```javascript
+// 不要这样做：
+import moment from 'moment' // 2.5MB！
+
+// 推荐做法：
+import dayjs from 'dayjs' // 2KB
+// 或者按需导入
+import { format } from 'date-fns' // 按需打包
+```
+
+**坑 2：Tree Shaking 失效**
+
+```javascript
+// 问题：这会引入整个 lodash
+import _ from 'lodash'
+_.debounce(fn, 200)
+
+// 正确：只导入需要的函数
+import debounce from 'lodash/debounce'
+// 或者使用 lodash-es
+import { debounce } from 'lodash-es'
+```
+
+**坑 3：缓存策略不当**
+
+```javascript
+// 错误：没有 hash，更新后用户可能还在用旧代码
+import './utils.js'
+
+// 正确：使用 content hash
+import './utils.a3f7b2c.js'
+
+// 现代工具会自动处理：
+// Vite/Webpack 会自动添加 [contenthash]
+```
+
+---
+
+## 4. 原理深入：构建工具的工作机制
+
+了解了实际案例，让我们深入看看这些工具到底是怎么工作的。
+
+### 4.1 Vite 为什么这么快？
+
+Vite 的核心理念是：**利用浏览器原生的 ES 模块支持，让开发时无需打包**。
+
+**传统打包工具的工作方式（如 Webpack）**：
+
+```
+源代码 (100+ 文件)
+    ↓
+[构建时打包]
+    ↓
+Bundle (单个/几个大文件)
+    ↓
+浏览器
+```
+
+问题：无论改多小的代码，都要重新打包整个项目。
+
+**Vite 的工作方式**：
+
+```
+源代码 (100+ 文件)
+    ↓
+[不打包！直接按需编译]
+    ↓
+浏览器 ← 按需加载每个模块
+```
+
+具体流程：
+
+1. **冷启动**：Vite 启动时只做一些轻量级的预处理，不需要打包，所以秒开
+2. **浏览器请求**：浏览器请求 `index.html`
+3. **模块转换**：当浏览器通过 `<script type="module">` 请求 JS 文件时，Vite 拦截请求，实时转换代码：
+   - 把 `import { a } from './a.js'` 中的路径解析正确
+   - 把 TypeScript/Vue/Sass 等实时编译成浏览器能懂的 JS/CSS
+4. **HMR**：当你保存文件，Vite 通过 WebSocket 通知浏览器只更新那个模块，页面无需刷新
+
+**为什么生产构建还是打包？**
+
+开发时不打包是为了速度，但生产环境还是要打包的，因为：
+
+- 减少 HTTP 请求数（即使是 HTTP/2，太多小文件也有开销）
+- 可以进行更激进的优化（Tree Shaking、代码分割等）
+- 兼容旧浏览器
+
+Vite 生产构建使用 Rollup，生成高度优化的静态资源。
+
+### 4.2 Webpack 的 loader 和 plugin 机制
+
+Webpack 的核心设计理念是：**一切皆模块**。
+
+Webpack 通过两个核心概念来扩展功能：
+
+**Loader（加载器）**：
+
+- 职责：将非 JavaScript 模块转换为 Webpack 能处理的模块
+- 执行时机：在模块加载时（构建阶段）
+- 链式调用：一个文件可以被多个 loader 顺序处理
+
+```javascript
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/, // 匹配 .vue 文件
+        loader: 'vue-loader' // 用 vue-loader 处理
+      },
+      {
+        test: /\.ts$/, // 匹配 .ts 文件
+        use: [
+          {
+            loader: 'ts-loader', // 先交给 ts-loader
+            options: {
+              transpileOnly: true // 只做转译，不做类型检查
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css$/, // 匹配 .css 文件
+        use: [
+          'style-loader', // 把 CSS 注入到 DOM
+          'css-loader', // 解析 CSS 中的 import
+          'postcss-loader' // 用 PostCSS 处理（加前缀等）
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif)$/, // 匹配图片
+        type: 'asset', // Webpack 5 内置的资源模块
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024 // 小于 8KB 转成 base64
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+**Plugin（插件）**：
+
+- 职责：扩展 Webpack 的功能，可以干预构建过程的各个生命周期
+- 执行时机：贯穿整个构建流程
+- 能力更强：可以访问和修改 Webpack 的内部数据
+
+```javascript
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+module.exports = {
+  plugins: [
+    // 1. 清理旧的构建产物
+    new CleanWebpackPlugin(),
+
+    // 2. 自动生成 HTML，并自动注入打包后的资源
+    new HtmlWebpackPlugin({
+      template: './public/index.html', // 以这个为模板
+      title: 'My App',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true
+      }
+    }),
+
+    // 3. 把 CSS 提取成独立文件（而不是内嵌在 JS 里）
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[contenthash:8].css',
+      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
+    }),
+
+    // 4. 分析包体积（只在分析模式启用）
+    ...(process.env.ANALYZE
+      ? [
+          new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: true
+          })
+        ]
+      : [])
+  ]
+}
+```
+
+**Loader vs Plugin 总结**：
+
+| 对比项 | Loader | Plugin |
+|--------|--------|--------|
+| **职责** | 文件转换（TypeScript → JS，Sass → CSS） | 功能扩展（生成 HTML、提取 CSS、清理文件） |
+| **执行时机** | 模块加载时（对单个文件） | 贯穿整个构建生命周期 |
+| **配置方式** | `module.rules` 数组 | `plugins` 数组 |
+| **链式调用** | 支持多个 loader 串联 | 每个插件独立工作 |
+| **举例** | `babel-loader`、`vue-loader`、`sass-loader` | `HtmlWebpackPlugin`、`MiniCssExtractPlugin` |
+
+---
+
+## 5. 实战模板：vite.config.js 完整配置
+
+理论讲得差不多了，给你一个可直接使用的 Vite 配置模板：
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import AutoImport from 'unplugin-auto-import/vite'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  // 1. 基础配置
+  base: './', // 部署时的基础路径
+  publicDir: 'public', // 静态资源目录
+
+  // 2. 路径别名
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      '@components': resolve(__dirname, 'src/components'),
+      '@utils': resolve(__dirname, 'src/utils'),
+      '@api': resolve(__dirname, 'src/api')
+    }
+  },
+
+  // 3. CSS 配置
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/styles/vars.scss" as *;`
+      }
+    },
+    postcss: {
+      plugins: [
+        require('autoprefixer'),
+        require('postcss-nested')
+      ]
+    }
+  },
+
+  // 4. 开发服务器配置
+  server: {
+    port: 3000,
+    open: true, // 自动打开浏览器
+    cors: true, // 允许跨域
+    proxy: {
+      // 代理 API 请求到后端
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
+
+  // 5. 构建配置
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: mode !== 'production', // 生产环境不生成 sourcemap
+
+    // Rollup 打包配置
+    rollupOptions: {
+      output: {
+        // 代码分割策略
+        manualChunks: {
+          // 把 vue 相关库打包到一起
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          // UI 组件库
+          'ui-vendor': ['element-plus'],
+          // 工具库
+          'utils-vendor': ['lodash-es', 'axios', 'dayjs']
+        },
+        // 入口文件命名
+        entryFileNames: 'js/[name]-[hash].js',
+        // 代码分割后的 chunk 命名
+        chunkFileNames: 'js/[name]-[hash].js',
+        // 资源文件命名
+        assetFileNames: (assetInfo) => {
+          const info = assetInfo.name.split('.')
+          const ext = info[info.length - 1]
+          if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
+            return 'img/[name]-[hash][extname]'
+          }
+          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
+            return 'fonts/[name]-[hash][extname]'
+          }
+          return '[ext]/[name]-[hash][extname]'
+        }
+      }
+    },
+
+    // 压缩配置
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true, // 移除 console
+        drop_debugger: true // 移除 debugger
+      }
+    },
+
+    // 大于这个阈值的资源会被单独打包
+    chunkSizeWarningLimit: 500
+  },
+
+  // 6. 插件配置
+  plugins: [
+    // Vue 支持
+    vue(),
+
+    // 自动导入组件
+    Components({
+      resolvers: [ElementPlusResolver()],
+      dirs: ['src/components'],
+      deep: true
+    }),
+
+    // 自动导入 API
+    AutoImport({
+      imports: ['vue', 'vue-router', 'pinia'],
+      resolvers: [ElementPlusResolver()],
+      eslintrc: { enabled: true }
+    }),
+
+    // 打包分析（只在 ANALYZE 环境变量时启用）
+    mode === 'analyze' &&
+      visualizer({
+        open: true,
+        gzipSize: true,
+        brotliSize: true
+      })
+  ].filter(Boolean)
+}))
+```
+
+这个配置涵盖了：
+
+- **开发体验**：路径别名、热更新、代理
+- **代码质量**：ESLint、TypeScript、自动导入
+- **性能优化**：代码分割、Tree Shaking、压缩
+- **部署友好**：Hash 文件名、Source Map 控制
+
+---
+
+## 6. 总结对照表
+
+最后，用一张表来总结前端工程化的核心概念：
+
+| 概念 | 通俗解释 | 解决的问题 | 代表工具 |
+|------|----------|------------|----------|
+| **转译** | 把新语法翻译成旧语法 | 浏览器不支持新特性 | Babel、SWC、esbuild |
+| **打包** | 把多个文件合并成一个 | 模块化、减少 HTTP 请求 | Webpack、Rollup、Vite |
+| **构建** | 从源代码到生产代码的完整流程 | 自动化、优化、部署 | 上述所有 |
+| **Tree Shaking** | 删除未使用的代码 | 减少包体积 | Webpack、Rollup |
+| **Code Splitting** | 代码分割，按需加载 | 首屏加载优化 | Webpack、Vite |
+| **HMR** | 热模块替换，不刷新更新 | 提升开发体验 | Webpack、Vite |
+| **Source Map** | 映射压缩后的代码到源代码 | 调试 | 所有构建工具 |
+
+**记住这张图**：
+
+![前端工程化流程](https://example.com/frontend-engineering-flow.png)
+
+**简化的构建流程**：
+
+```
+源代码 (TypeScript/Vue/Sass)
+    ↓
+[转译] Babel/SWC (新语法 → 旧语法)
+    ↓
+[打包] Webpack/Rollup/Vite (模块 → Bundle)
+    ↓
+[优化] Terser/ESBuild (压缩、Tree Shaking)
+    ↓
+[输出] dist/ (index.html + assets/)
+    ↓
+[部署] CDN/服务器
+```
+
+---
+
+## 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+|----------|----------|------|
+| **Bundle** | 包/打包产物 | 将多个模块合并后的输出文件 |
+| **Chunk** | 代码块 | 代码分割后产生的独立文件 |
+| **Transpile** | 转译 | 将高级语言/新语法转换为低级/旧语法 |
+| **Minify** | 压缩 | 移除空白、缩短变量名等减小体积 |
+| **Source Map** | 源映射 | 压缩代码与源代码的映射关系 |
+| **HMR** | 热模块替换 | 不刷新页面实时更新修改 |
+| **Tree Shaking** | 摇树优化 | 删除未使用的代码 |
+| **Code Splitting** | 代码分割 | 将代码拆分成多个 chunk 按需加载 |
+| **Lazy Loading** | 懒加载 | 需要时才加载资源 |
+| **Prefetch** | 预获取 | 浏览器空闲时提前加载 |
+| **Preload** | 预加载 | 高优先级提前加载当前页面需要的资源 |
+| **Hash** | 哈希值 | 根据内容生成的唯一标识，用于缓存 |
+| **Content Hash** | 内容哈希 | 根据文件内容计算的 hash，内容变则 hash 变 |
+| **Module** | 模块 | 独立的代码单元，可导入导出 |
+| **ESM** | ES 模块 | ES6 标准的模块化方案 (import/export) |
+| **CJS** | CommonJS | Node.js 的模块规范 (require/module.exports) |
+| **UMD** | 通用模块定义 | 兼容多种模块规范的格式 |
+| **Polyfill** | 垫片/补丁 | 为旧环境添加新特性的兼容性代码 |
+| **Babel** | 转译工具 | 将新语法转为旧语法的工具 |
+| **SWC** | 快速转译器 | 基于 Rust 的超快转译工具 |
+| **esbuild** | 快速打包器 | 基于 Go 的超快打包工具 |
+| **Terser** | 压缩工具 | JavaScript 代码压缩器 |
+
+---
+
+## 写在最后
+
+前端工程化是一个很大的话题，本文只能覆盖最核心的部分。记住以下几点：
+
+1. **不要迷恋工具**：Webpack、Vite、Rollup 都是工具，了解原理比会配置更重要
+2. **从问题出发**：不要盲目上新技术，先找到痛点
+3. **关注用户体验**：一切优化的最终目标都是让用户用得爽
+
+希望这篇文章能帮助你建立起对前端工程化的整体认知。如果有任何疑问，欢迎交流！
diff --git a/docs/zh-cn/appendix/frontend-routing.md b/docs/zh-cn/appendix/frontend-routing.md
new file mode 100644
index 0000000..33fa150
--- /dev/null
+++ b/docs/zh-cn/appendix/frontend-routing.md
@@ -0,0 +1,575 @@
+# 前端路由与导航机制
+
+> **学习指南**：页面跳转不刷新？URL变化但页面没白屏？这就是前端路由的魔法。本文会带你从"传统多页面跳转"的惯性思维，切换到"单页面应用路由"的新世界。
+
+在阅读前，建议你先具备以下基础：
+
+- **SPA概念**：了解什么是单页面应用（Single Page Application）
+- **浏览器History API**：知道 `pushState` 和 `popstate` 事件的存在
+- **基础正则**：能读懂 `:id`、`*` 这类路由参数写法
+
+---
+
+## 0. 引言：为什么需要前端路由？
+
+还记得传统网站的体验吗？点击一个链接，页面白一下，然后整个页面重新加载。如果网络慢，你还要盯着加载圈发呆几秒。
+
+**前端路由的出现，彻底改变了这种体验。**
+
+### 从一个电商网站的演进说起
+
+2015年，某电商网站（我们叫它"买得多"）还是传统的多页面架构：
+
+```
+首页    →  点击商品  →  商品详情页  →  点击购买  →  订单确认页
+(刷新)     (刷新)       (刷新)         (刷新)
+```
+
+**用户吐槽**："每次跳转都要等，感觉好卡！"
+
+2016年，他们决定升级到SPA架构，引入前端路由：
+
+```
+首页  →  商品详情  →  订单确认
+(无刷新)  (无刷新)    (无刷新)
+```
+
+**用户反馈**："哇，好流畅！像App一样！"
+
+<RouteMatchingDemo />
+
+---
+
+## 1. 核心概念：SPA、路由、导航
+
+### 1.1 什么是SPA？
+
+**SPA（Single Page Application，单页面应用）** 是指在浏览器中运行的应用程序，它在首次加载时将所有必要的HTML、CSS和JavaScript下载到本地，之后的页面切换都通过JavaScript动态更新DOM实现，**不会触发完整的页面刷新**。
+
+**类比理解**：
+
+> 传统多页面应用（MPA）就像**翻书**——每看一页都要翻到新的一页。
+> 单页面应用（SPA）就像**幻灯片**——所有内容都在一个屏幕上，只是切换显示区域。
+
+<SpaNavigationDemo />
+
+### 1.2 什么是前端路由？
+
+**前端路由**是SPA中负责管理"当前显示哪个视图"的机制。它通过监听URL的变化，决定渲染哪个组件，同时保证浏览器的前进/后退按钮能正常工作。
+
+**核心职责**：
+
+1. **URL ↔ 视图的映射**：定义什么样的URL对应什么样的页面组件
+2. **导航控制**：处理点击链接、浏览器前进后退等导航行为
+3. **状态保持**：在URL变化时保持必要的应用状态
+
+**类比理解**：
+
+> 前端路由就像是**剧院的节目单和舞台切换系统**：
+> - 节目单（路由配置）告诉你每个节目（URL）对应什么表演（组件）
+> - 舞台切换系统（路由器）负责在观众不注意的时候换布景（无刷新切换）
+
+<RouterArchitectureDemo />
+
+### 1.3 路由模式：Hash vs History
+
+前端路由的实现主要有两种模式，它们在URL表现形式和底层实现上有本质区别。
+
+| 特性 | Hash 模式 | History 模式 |
+|------|-----------|--------------|
+| URL 示例 | `/#/user/123` | `/user/123` |
+| 实现原理 | 监听 `hashchange` 事件 | 使用 History API |
+| 服务端配置 | 不需要 | 需要配置 fallback |
+| 浏览器兼容性 | IE8+ | IE10+ |
+| SEO 友好度 | 较差 | 良好 |
+
+<HashVsHistoryDemo />
+
+---
+
+## 2. 案例分析：某SaaS平台的路由演进
+
+### 2.1 初期：简单的扁平路由
+
+2019年，"云管家"SaaS平台刚上线时，只有简单的几个页面：
+
+```javascript
+// router.js - 第一版
+const routes = [
+  { path: '/', component: Home },
+  { path: '/dashboard', component: Dashboard },
+  { path: '/settings', component: Settings },
+  { path: '/profile', component: Profile }
+]
+```
+
+**问题出现**：随着功能增加，路由文件迅速膨胀到200+行，维护困难。
+
+### 2.2 发展期：按模块拆分
+
+2020年，团队决定将路由按业务模块拆分：
+
+```javascript
+// router/index.js
+import dashboardRoutes from './modules/dashboard'
+import userRoutes from './modules/user'
+import projectRoutes from './modules/project'
+
+const routes = [
+  { path: '/', component: Home },
+  ...dashboardRoutes,
+  ...userRoutes,
+  ...projectRoutes,
+  { path: '/:path(.*)*', component: NotFound }
+]
+```
+
+```javascript
+// router/modules/project.js
+export default [
+  {
+    path: '/projects',
+    component: ProjectList,
+    meta: { title: '项目列表', requiresAuth: true }
+  },
+  {
+    path: '/projects/:id',
+    component: ProjectDetail,
+    meta: { title: '项目详情' },
+    children: [
+      { path: '', component: ProjectOverview },
+      { path: 'tasks', component: ProjectTasks },
+      { path: 'members', component: ProjectMembers }
+    ]
+  }
+]
+```
+
+**好处**：每个模块独立维护，新增功能只需修改对应模块。
+
+### 2.3 成熟期：动态权限路由
+
+2021年，平台引入RBAC权限系统，需要根据不同用户角色动态生成路由：
+
+```javascript
+// 后端返回的菜单/路由配置
+const serverRouteConfig = [
+  {
+    path: '/admin',
+    name: 'Admin',
+    component: 'Layout',
+    meta: { icon: 'setting', roles: ['admin', 'super_admin'] },
+    children: [
+      { path: 'users', component: 'UserManagement', meta: { title: '用户管理' } },
+      { path: 'roles', component: 'RoleManagement', meta: { title: '角色管理' } }
+    ]
+  },
+  {
+    path: '/finance',
+    name: 'Finance',
+    component: 'Layout',
+    meta: { icon: 'money', roles: ['finance', 'admin'] },
+    children: [
+      { path: 'invoices', component: 'InvoiceList', meta: { title: '发票管理' } },
+      { path: 'reports', component: 'FinanceReport', meta: { title: '财务报表' } }
+    ]
+  }
+]
+
+// 路由生成器
+function generateRoutes(config, userRoles) {
+  return config
+    .filter(route => {
+      // 检查用户是否有权限访问该路由
+      const requiredRoles = route.meta?.roles || []
+      return requiredRoles.some(role => userRoles.includes(role))
+    })
+    .map(route => ({
+      ...route,
+      component: () => import(`@/views/${route.component}.vue`),
+      children: route.children ? generateRoutes(route.children, userRoles) : undefined
+    }))
+}
+
+// 在路由守卫中动态添加
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore()
+
+  if (!userStore.hasGeneratedRoutes) {
+    const userRoles = userStore.roles
+    const accessRoutes = generateRoutes(serverRouteConfig, userRoles)
+
+    accessRoutes.forEach(route => router.addRoute(route))
+    userStore.hasGeneratedRoutes = true
+
+    // 重新导航到目标路由
+    next({ ...to, replace: true })
+  } else {
+    next()
+  }
+})
+```
+
+**演进总结**：
+
+| 阶段 | 特点 | 解决问题 |
+|------|------|----------|
+| 初期 | 扁平路由 | 快速上线 |
+| 发展期 | 模块拆分 | 维护性 |
+| 成熟期 | 动态权限 | 安全性 |
+
+---
+
+## 3. 原理深入：路由工作原理
+
+### 3.1 Hash 模式的实现原理
+
+Hash 模式的核心是利用 URL 中的 `hash` 部分（即 `#` 后面的内容）。hash 的变化不会触发页面刷新，但会产生历史记录。
+
+**工作流程**：
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     Hash 模式工作流程                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  1. 初始状态                                                 │
+│     URL: https://example.com/#/home                          │
+│     当前 hash: #/home                                        │
+│                                                             │
+│  2. 用户点击导航链接                                         │
+│     链接: <a href="#/user/123">用户中心</a>                 │
+│                                                             │
+│  3. hashchange 事件触发                                      │
+│     浏览器自动更新 URL:                                        │
+│     https://example.com/#/user/123                            │
+│                                                             │
+│  4. 路由处理器执行                                           │
+│     ┌─────────────────────┐                                  │
+│     │ 1. 解析 hash 值      │                                  │
+│     │    → 提取 /user/123 │                                  │
+│     │                      │                                  │
+│     │ 2. 匹配路由配置      │                                  │
+│     │    → 匹配 /user/:id │                                  │
+│     │                      │                                  │
+│     │ 3. 提取参数          │                                  │
+│     │    → { id: "123" }  │                                  │
+│     │                      │                                  │
+│     │ 4. 渲染组件          │                                  │
+│     │    → UserDetail.vue │                                  │
+│     └─────────────────────┘                                  │
+│                                                             │
+│  5. 浏览器历史栈                                             │
+│     history: ["/home", "/user/123"]                         │
+│     用户可点击后退按钮回到 /home                              │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**核心代码实现**：
+
+```javascript
+class HashRouter {
+  constructor(routes) {
+    this.routes = routes
+    this.currentPath = ''
+
+    // 初始化时解析当前 hash
+    this.parseHash()
+
+    // 监听 hashchange 事件
+    window.addEventListener('hashchange', () => {
+      this.parseHash()
+    })
+  }
+
+  parseHash() {
+    // 获取 hash，去掉开头的 #
+    const hash = window.location.hash.slice(1) || '/'
+    this.navigate(hash)
+  }
+
+  navigate(path) {
+    this.currentPath = path
+    const route = this.matchRoute(path)
+
+    if (route) {
+      this.render(route.component, route.params)
+    } else {
+      this.render(NotFoundComponent)
+    }
+  }
+
+  matchRoute(path) {
+    for (const route of this.routes) {
+      const match = this.parseRoute(route.path, path)
+      if (match) {
+        return { ...route, params: match.params }
+      }
+    }
+    return null
+  }
+
+  parseRoute(routePath, actualPath) {
+    // 将 /user/:id 转换为正则表达式
+    const paramNames = []
+    const regexPath = routePath.replace(/:([^/]+)/g, (match, name) => {
+      paramNames.push(name)
+      return '([^/]+)'
+    })
+
+    const regex = new RegExp(`^${regexPath}$`)
+    const match = actualPath.match(regex)
+
+    if (!match) return null
+
+    // 提取参数
+    const params = {}
+    paramNames.forEach((name, index) => {
+      params[name] = match[index + 1]
+    })
+
+    return { params }
+  }
+
+  render(component, params = {}) {
+    // 实际的DOM渲染逻辑
+    const app = document.getElementById('app')
+    app.innerHTML = ''
+    const instance = new component({ params })
+    app.appendChild(instance.mount())
+  }
+
+  push(path) {
+    window.location.hash = path
+  }
+}
+
+// 使用示例
+const router = new HashRouter([
+  { path: '/', component: Home },
+  { path: '/user', component: UserList },
+  { path: '/user/:id', component: UserDetail },
+  { path: '/products/:category/:id', component: ProductDetail }
+])
+
+// 编程式导航
+router.push('/user/123')
+```
+
+### 3.2 History 模式的实现原理
+
+History 模式利用 HTML5 History API（主要是 `pushState` 和 `replaceState`）来实现 URL 的改变，同时不会触发页面刷新。
+
+**与 Hash 模式的核心区别**：
+
+| 特性 | Hash 模式 | History 模式 |
+|------|-----------|--------------|
+| URL 变化 | 修改 `#` 部分 | 修改完整路径 |
+| 浏览器事件 | `hashchange` | `popstate` |
+| 服务端感知 | 不感知 hash | 会收到请求 |
+| SEO | 较差 | 良好 |
+
+**工作流程**：
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                   History 模式工作流程                       │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  1. 初始状态                                                 │
+│     URL: https://example.com/home                            │
+│     浏览器历史栈: ["/home"]                                   │
+│                                                             │
+│  2. 用户点击导航链接                                         │
+│     链接: <a href="/user/123" data-nav>用户中心</a>          │
+│                                                             │
+│  3. 拦截导航行为                                             │
+│     ┌──────────────────────────┐                             │
+│     │ 阻止默认行为             │                             │
+│     │ event.preventDefault()   │                             │
+│     └──────────────────────────┘                             │
+│                                                             │
+│  4. 调用 History API                                         │
+│     ┌────────────────────────────┐                           │
+│     │ history.pushState(         │                           │
+│     │   { userId: 123 },         │  // state 数据            │
+│     │   "用户中心",               │  // 页面标题              │
+│     │   "/user/123"              │  // 新 URL                │
+│     │ )                          │                           │
+│     └────────────────────────────┘                           │
+│                                                             │
+│     URL 更新为: https://example.com/user/123                  │
+│     ⚠️ 注意：此时页面不会刷新！                                │
+│                                                             │
+│  5. 路由匹配与渲染                                           │
+│     ┌─────────────────────────┐                              │
+│     │ 1. 解析路径 /user/123   │                              │
+│     │                         │                              │
+│     │ 2. 匹配路由配置         │                              │
+│     │    /user/:id            │                              │
+│     │                         │                              │
+│     │ 3. 提取参数             │                              │
+│     │    { id: "123" }        │                              │
+│     │                         │                              │
+│     │ 4. 渲染组件             │                              │
+│     │    UserDetail.vue       │                              │
+│     │                         │                              │
+│     │ 5. 更新页面标题         │                              │
+│     │    document.title       │                              │
+│     └─────────────────────────┘                              │
+│                                                             │
+│  6. 浏览器历史栈                                             │
+│     history: ["/home", "/user/123"]                          │
+│                                                             │
+│     用户可以：                                               │
+│     - 点击后退 → 回到 /home                                  │
+│     - 点击前进 → 回到 /user/123                            │
+│     - 直接修改URL访问                                        │
+│                                                             │
+│  7. 处理浏览器前进/后退                                       │
+│     ┌────────────────────────────────┐                       │
+│     │ window.addEventListener(       │                       │
+│     │   'popstate',                  │                       │
+│     │   (event) => {                │                       │
+│     │     // 获取 state 数据        │                       │
+│     │     const state = event.state  │                       │
+│     │                              │                       │
+│     │     // 根据当前 URL 重新渲染  │                       │
+│     │     const path = location.pathname │                   │
+│     │     router.match(path)        │                       │
+│     │   }                          │                       │
+│     │ )                            │                       │
+│     └────────────────────────────────┘                       │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**服务端配置的关键作用**：
+
+History 模式的最大陷阱在于**服务端配置**。当用户直接访问 `https://example.com/user/123` 或刷新页面时，浏览器会向服务端发送请求。
+
+```
+用户直接访问 /user/123
+       ↓
+浏览器发送 GET /user/123 到服务器
+       ↓
+服务器查找 /user/123 对应的文件
+       ↓
+❌ 找不到！返回 404
+```
+
+**正确的服务端配置**（以 Nginx 为例）：
+
+```nginx
+server {
+    listen 80;
+    server_name example.com;
+    root /var/www/app;
+    index index.html;
+
+    # 关键配置：所有路由都指向 index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+
+```
+用户直接访问 /user/123
+       ↓
+浏览器发送 GET /user/123 到服务器
+       ↓
+Nginx 尝试查找 /user/123 文件 → 不存在
+       ↓
+Nginx 回退到 /index.html
+       ↓
+浏览器加载 SPA，前端路由接管
+       ↓
+前端路由解析 /user/123 → 渲染 UserDetail 组件
+       ↓
+✅ 页面正常显示！
+```
+
+---
+
+## 4. 总结与学习建议
+
+前端路由是现代单页应用的核心技术之一。从早期的 Hash 模式到现在主流的 History 模式，路由技术在不断进化，为用户提供更流畅的浏览体验。
+
+### 核心要点回顾
+
+1. **理解两种路由模式的本质区别**：Hash 模式利用 URL hash 特性，History 模式利用 HTML5 History API
+2. **服务端配置至关重要**：使用 History 模式必须正确配置服务端 fallback 到 index.html
+3. **路由设计体现架构思维**：扁平化 vs 嵌套、静态 vs 动态，都反映了对业务的理解
+4. **权限路由要谨慎处理**：前后端都需要验证，不能依赖单一端做权限控制
+
+### 学习路线图
+
+```
+初级阶段
+├── 理解 SPA 与传统 MPA 的区别
+├── 掌握 Hash 和 History 模式的基本原理
+└── 能够使用 Vue Router / React Router 完成基础配置
+
+进阶阶段
+├── 深入理解 History API 的底层实现
+├── 能够手写一个简单的前端路由库
+├── 掌握路由守卫、懒加载、滚动行为等高级特性
+└── 理解服务端配置原理，能够独立部署 SPA
+
+高级阶段
+├── 设计复杂的路由架构（微前端、嵌套路由等）
+├── 实现基于权限的动态路由系统
+├── 路由性能优化（预加载、按需加载策略）
+└── 多端路由方案设计（Web、小程序、App 统一路由）
+```
+
+### 实践建议
+
+1. **动手实现一个迷你路由库**：不依赖框架，用原生 JS 实现 Hash 和 History 两种模式，这是理解原理的最佳方式。
+
+2. **阅读源码**：Vue Router 和 React Router 的源码都相对易读，从中可以学到很多工程化实践经验。
+
+3. **关注真实项目中的路由设计**：分析知名开源项目（如 GitLab、Jira、各种 Admin 系统）的路由结构，学习它们的组织方式。
+
+4. **解决实际问题**：尝试在你的项目中实现以下功能：
+   - 面包屑导航自动生成
+   - 页面切换动画
+   - 路由级权限控制
+   - 页面标题和 meta 信息动态更新
+
+记住：**路由不只是"页面跳转"，它反映了整个应用的信息架构**。一个好的路由设计，能让用户更容易理解你的产品，也能让代码更易维护。
+
+---
+
+## 5. 名词速查表 (Glossary)
+
+| 名词 | 英文全称 | 解释 |
+| :--- | :--- | :--- |
+| **SPA** | Single Page Application | **单页应用**。整个应用只有一个 HTML 页面，通过动态更新 DOM 实现页面切换，无需整页刷新。 |
+| **MPA** | Multi-Page Application | **多页应用**。每个页面对应独立的 HTML 文件，页面跳转会触发完整的浏览器刷新。 |
+| **Router** | - | **路由器/路由库**。负责管理 URL 与页面组件的映射关系，处理导航逻辑的库或模块。 |
+| **Route** | - | **路由**。URL 路径与组件的映射配置，定义了访问某个路径时应该渲染什么内容。 |
+| **Hash Mode** | - | **Hash 模式**。前端路由的一种实现方式，利用 URL 中的 hash（#）部分，不会触发页面刷新。 |
+| **History Mode** | - | **History 模式**。前端路由的一种实现方式，利用 HTML5 History API，URL 更美观但需要服务端配合。 |
+| **History API** | HTML5 History API | **历史记录 API**。浏览器提供的接口，允许在不刷新页面的情况下操作浏览器历史记录。 |
+| **pushState** | - | **压入状态**。History API 的方法，将指定状态添加到历史记录栈，改变 URL 但不刷新页面。 |
+| **replaceState** | - | **替换状态**。History API 的方法，修改当前历史记录条目，不会创建新记录。 |
+| **popstate** | - | **历史变化事件**。当用户点击前进/后退按钮或调用 history.back/forward 时触发的事件。 |
+| **hashchange** | - | **Hash 变化事件**。当 URL 中的 hash 部分发生变化时触发的事件。 |
+| **Nested Route** | - | **嵌套路由**。在一个路由内定义子路由，形成层级结构，对应页面的嵌套布局。 |
+| **Dynamic Route** | - | **动态路由**。包含参数的路由，如 `/user/:id`，可以匹配多个具体的 URL。 |
+| **Route Parameter** | - | **路由参数**。URL 中的动态部分，如 `:id`、`:name`，可以在组件中获取使用。 |
+| **Wildcard Route** | - | **通配符路由**。匹配任意路径的路由，通常用于 404 页面，如 `*` 或 `(.*)*`。 |
+| **Lazy Loading** | - | **懒加载/按需加载**。只在需要时才加载路由对应的组件，减少首屏加载时间。 |
+| **Route Guard** | - | **路由守卫**。在路由跳转前后执行的钩子函数，用于权限验证、日志记录等。 |
+| **Navigation** | - | **导航**。在应用中切换页面的行为，可以通过链接点击或编程方式触发。 |
+| **Programmatic Navigation** | - | **编程式导航**。通过代码而非点击链接来触发路由跳转，如 `router.push()`。 |
+| **Fallback** | - | **回退/兜底**。当请求的资源不存在时返回的默认内容，如 SPA 的 `index.html` 回退。 |
+| **SEO** | Search Engine Optimization | **搜索引擎优化**。提升网站在搜索引擎中排名的技术和方法。 |
+| **SSR** | Server-Side Rendering | **服务端渲染**。在服务器端生成 HTML 内容，有利于 SEO 和首屏加载。 |
+| **TTFB** | Time To First Byte | **首字节时间**。从发起请求到接收到服务器第一个字节的时间。 |
+| **Breadcrumb** | - | **面包屑导航**。显示当前页面在网站层级结构中位置的导航元素。 |
+| **Active Link** | - | **激活链接**。当前匹配路由的导航链接，通常有特殊样式标识。 |
+<|tool_calls_section_begin|><|tool_call_begin|>functions.Write:16<|tool_call_argument_begin|>{
\ No newline at end of file
diff --git a/docs/zh-cn/appendix/gateway-proxy.md b/docs/zh-cn/appendix/gateway-proxy.md
new file mode 100644
index 0000000..29fcd39
--- /dev/null
+++ b/docs/zh-cn/appendix/gateway-proxy.md
@@ -0,0 +1,1490 @@
+# 反向代理与网关：Nginx / API Gateway 在系统中的位置
+
+> 💡 **学习指南**：反向代理解决的是"流量怎么分发"，API 网关解决的是"请求怎么处理"。本章节会围绕一个问题展开：**在高并发的互联网架构中，如何把流量安全、高效地送到正确的服务？**
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **HTTP 基础**：可以先阅读 [Web 基础](./web-basics/) 的「HTTP 协议」部分。
+- **服务器部署**：如果你还不熟悉 [部署相关概念](./deployment/)，建议先了解基础。
+
+---
+
+## 0. 引言：为什么网站访问慢了、挂了、被攻击了？
+
+<ReverseProxyDemo />
+
+很多人在实际搭建网站时都会遇到类似的情况：
+
+- 网站流量一高就卡顿，用户体验很差；
+- 某台服务器宕机，整个网站就不可用了；
+- 网站被 DDoS 攻击，服务器直接被打垮；
+- 后台管理接口暴露在外网，被黑客扫描攻击。
+
+直觉上，我们会以为是：**"服务器配置不够"**。
+但大多数时候，问题并不在于服务器"性能差"，而在于我们**没有把流量处理好**。
+
+面对这些挑战，单纯依靠"升级服务器"已经捉襟见肘。我们需要一套更系统的流量管理方法，在高并发的场景下，把流量安全、高效地分发到正确的服务。这正是**反向代理与网关**试图解决的问题。
+
+---
+
+## 1. 什么是"反向代理"？（定义 + 场景）
+
+先给一个简短的工作定义，再看几个典型场景。
+
+> 反向代理，是部署在服务器端的"流量中转站"，接收客户端请求，转发给内部服务器，并将响应返回给客户端。客户端只知道反向代理的存在，不知道真实服务器的地址。
+
+你可以简单地把它理解成三件事：**接收请求、转发请求、返回响应**。
+常见会用到它的场景包括：
+
+- **负载均衡**：将流量分发到多台服务器，避免单点压力过大。
+- **安全防护**：隐藏真实服务器 IP，防止直接攻击。
+- **SSL 终结**：在网关层处理 HTTPS，后端服务使用 HTTP，降低计算开销。
+- **动静分离**：静态资源直接由 Nginx 返回，动态请求转发给应用服务器。
+
+接下来，我们就从一个真实团队的"踩坑经历"出发，看看他们是怎么一点点从"单机部署"进化到"网关架构"的。
+
+---
+
+## 2. 从"血泪教训"说起：某电商大促踩过的坑
+
+本章案例来自 **某电商平台**（日活千万级用户）。
+与普通网站不同，电商平台在双十一等大促期间，流量会呈指数级增长，对系统的稳定性、性能、安全性都提出了极高要求。
+
+这带来了核心矛盾：
+- **如果只用一台服务器**：流量一高就宕机，用户体验极差。
+- **如果直接暴露多台服务器**：客户端需要知道多个 IP，无法实现负载均衡，而且安全性极差。
+
+该平台的技术团队经历过多次架构重构，才明白一个道理：**流量不能只靠"挡"，而要靠"疏"和"导"。**
+
+### 2.1 四次重构教会我们什么？
+
+该平台的 CTO 在架构分享会上讲过一个"踩坑史"：
+
+| 阶段 | 遇到的问题 | 当时的想法 | 结果 |
+| :--- | :--- | :--- | :--- |
+| **第一次** | 单台服务器扛不住流量 | "换一台更好的服务器" | 流量再涨还是扛不住 |
+| **第二次** | 多台服务器不知如何分发流量 | "直接暴露多个 IP 给用户" | 用户访问混乱，无法实现负载均衡 |
+| **第三次** | 网站被 DDoS 攻击，真实 IP 暴露 | "在每台服务器上都配置防火墙" | 管理复杂，防护效果差 |
+| **第四次** | HTTPS 配置复杂，证书管理混乱 | "每台服务器都配置 SSL 证书" | 证书更新麻烦，配置不一致 |
+
+**核心领悟**：**不是服务器越多越好，而是流量管理越智能越好**。
+
+### 2.2 反向代理到底像什么？
+
+**直接暴露服务器** = **没有门卫的大楼**：
+- 任何人都可以直接找到房间（IP）。
+- 来访者（请求）不知道去哪个房间，可能都挤在一个房间。
+- 安全隐患大，坏人可以直接找到房间搞破坏。
+
+**反向代理** = **有前台的大楼**：
+- 来访者（客户端）只知道前台地址（反向代理 IP）。
+- 前台根据情况把来访者引导到不同的房间（服务器）。
+- 房间的真实位置对外保密，安全性高。
+
+**该平台的经验**：**大楼要有前台，流量要过网关**。
+
+---
+
+## 3. 第一步：Nginx 架构 - 为什么它能扛住百万并发？
+
+<NginxArchitectureDemo />
+
+在深入配置之前，我们需要理解 Nginx 为什么能处理如此高的并发。这不是魔法，而是精心设计的架构。
+
+### 3.1 Master-Worker 进程模型
+
+Nginx 采用**多进程**架构，而不是多线程：
+
+**Master 进程（管理者）**：
+- 负责读取和验证配置文件。
+- 管理 Worker 进程（启动、停止、重新加载）。
+- 不处理具体请求。
+
+**Worker 进程（工作者）**：
+- 实际处理 HTTP 请求。
+- 每个 Worker 是独立的进程，相互隔离。
+- 数量通常设置为 CPU 核心数，避免上下文切换开销。
+
+**优势**：
+- 一个 Worker 崩溃，不会影响其他 Worker。
+- 充分利用多核 CPU。
+- 避免多线程编程的复杂性。
+
+### 3.2 事件驱动 + 异步非阻塞
+
+这是 Nginx 高性能的核心秘密：
+
+**传统 Apache（多进程/线程模型）**：
+- 一个连接 = 一个进程/线程。
+- 并发数受限于系统进程/线程数。
+- 大量连接时，进程切换开销巨大。
+
+**Nginx（事件驱动模型）**：
+- 使用 epoll（Linux）/ kqueue（macOS）等高效 I/O 多路复用机制。
+- 一个 Worker 进程可以同时处理数万个连接。
+- 连接没有数据时，不会占用 CPU，有新数据时通过事件通知唤醒。
+
+**比喻**：
+- Apache 像餐厅里每个顾客配一个服务员（进程）。
+- Nginx 像一个超级服务员，同时服务所有顾客，谁需要服务就去谁那里，而不是一直站在某个顾客旁边。
+
+### 3.3 生产环境配置建议
+
+```nginx
+# 设置 Worker 进程数，通常等于 CPU 核心数
+worker_processes auto;
+
+# 设置每个 Worker 的最大连接数
+# 总并发连接数 = worker_processes * worker_connections
+events {
+    worker_connections 4096;
+    use epoll;  # Linux 下使用 epoll
+    multi_accept on;  # 尽可能接受更多连接
+}
+
+http {
+    # 开启文件高效传输
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+
+    # 长连接超时时间
+    keepalive_timeout 65;
+
+    # Gzip 压缩
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css application/json application/javascript;
+}
+```
+
+---
+
+## 4. 第二步：API 网关 - 系统的"统一大门"
+
+<ApiGatewayDemo />
+
+如果说反向代理是"流量中转站"，那么 API 网关就是"智能调度中心"。它不仅仅是转发请求，还承担了很多横切关注点的处理。
+
+### 4.1 为什么需要 API 网关？
+
+想象一个没有网关的系统：
+- 客户端需要知道多个服务的地址（用户服务、订单服务、支付服务...）。
+- 每个服务都要自己做认证、限流、日志。
+- 协议不统一，有的用 HTTP，有的用 gRPC。
+- 服务升级时，客户端也需要跟着改。
+
+**有了 API 网关之后**：
+- 客户端只需要知道网关地址，网关负责路由到正确服务。
+- 认证、限流、日志等横切逻辑统一在网关处理。
+- 网关可以做协议转换，对外统一暴露 HTTP。
+- 后端服务升级，只需要改网关配置，客户端无感知。
+
+### 4.2 API 网关的核心功能
+
+| 功能 | 说明 | 典型场景 |
+| :--- | :--- | :--- |
+| **路由转发** | 根据 URL、Header 等规则，将请求转发到不同服务 | `/api/users` → 用户服务，`/api/orders` → 订单服务 |
+| **负载均衡** | 同一个服务有多实例时，分摊流量 | 用户服务有 3 台实例，轮询分发请求 |
+| **认证鉴权** | 统一校验 JWT、OAuth Token | 未登录用户无法访问 `/api/admin` |
+| **限流熔断** | 控制流量上限，防止服务被压垮 | 每秒最多 1000 请求，超过返回 429 |
+| **协议转换** | 对外 HTTP，内部可转 gRPC | 客户端用 HTTP，网关转 gRPC 调用内部服务 |
+| **灰度发布** | 按 Header 或比例，将部分流量导到新版本 | 5% 用户体验新版本，95% 用旧版本 |
+| **日志监控** | 统一记录请求日志，便于分析和排障 | 记录每次请求的耗时、状态码、返回大小 |
+
+### 4.3 Nginx vs Kong vs Spring Cloud Gateway
+
+市面上有很多网关产品，如何选择？
+
+| 维度 | Nginx | Kong | Spring Cloud Gateway |
+| :--- | :--- | :--- | :--- |
+| **定位** | 高性能反向代理/负载均衡 | 开源 API 网关 | Spring 生态网关 |
+| **性能** | 极高（C 语言，事件驱动） | 高（基于 OpenResty） | 中等（Java，响应式） |
+| **功能** | 基础负载均衡、静态文件、缓存 | 丰富的插件生态（认证、限流、日志等） | 与 Spring Cloud 深度集成 |
+| **配置** | 配置文件（nginx.conf） | REST API + 配置文件 | Java 配置 / YAML |
+| **扩展** | C 模块 / Lua 脚本 | Lua 插件 | Java 过滤器 |
+| **适用场景** | 静态资源、七层负载均衡、SSL 终结 | 微服务 API 网关、多租户 SaaS | Spring Cloud 微服务架构 |
+
+**选型建议**：
+- **中小型项目 / 静态资源为主**：Nginx 足够。
+- **大型微服务 / 需要丰富插件**：Kong。
+- **Spring Cloud 全家桶**：Spring Cloud Gateway。
+
+---
+
+## 5. 第三步：路由与负载均衡 - 把请求送到正确的地方
+
+<RoutingRulesDemo />
+<LoadBalancingDemo />
+
+网关的核心职责之一，就是**把请求送到正确的地方**。这涉及两个关键能力：**路由**（去哪台服务器）和**负载均衡**（怎么分配流量）。
+
+### 5.1 路由规则：从 URL 到服务
+
+想象一个电商系统，不同的 URL 对应不同的服务：
+- `/api/users/*` → 用户服务
+- `/api/orders/*` → 订单服务
+- `/api/products/*` → 商品服务
+- `/api/pay/*` → 支付服务
+
+**Nginx 配置示例**：
+
+```nginx
+server {
+    listen 80;
+    server_name api.example.com;
+
+    # 用户服务
+    location /api/users/ {
+        proxy_pass http://user-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 订单服务
+    location /api/orders/ {
+        proxy_pass http://order-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 商品服务
+    location /api/products/ {
+        proxy_pass http://product-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 支付服务（需要更高安全级别）
+    location /api/pay/ {
+        # 限制 IP 访问
+        allow 10.0.0.0/8;
+        deny all;
+
+        proxy_pass http://payment-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+**高级路由规则**：
+
+```nginx
+# 基于请求方法的路由
+if ($request_method = POST) {
+    proxy_pass http://write-service;
+}
+
+# 基于 Header 的路由（灰度发布）
+if ($http_x_version = "v2") {
+    proxy_pass http://api-v2;
+}
+
+# 基于 Cookie 的路由（AB 测试）
+if ($cookie_test_group = "B") {
+    proxy_pass http://variant-b;
+}
+
+# 基于 Query 参数的路由
+if ($arg_format = "json") {
+    proxy_pass http://json-api;
+}
+```
+
+### 5.2 负载均衡：四种策略对比
+
+当同一个服务有多个实例时，如何选择？
+
+| 策略 | 原理 | 适用场景 | 优点 | 缺点 |
+| :--- | :--- | :--- | :--- | :--- |
+| **轮询** (Round Robin) | 按顺序依次分配给每台服务器 | 服务器性能相近 | 简单公平 | 不考虑服务器当前负载 |
+| **加权轮询** (Weighted RR) | 按权重比例分配，权重高的分配更多 | 服务器性能不均 | 充分利用高性能服务器 | 需要合理设置权重 |
+| **最少连接** (Least Connections) | 分配给当前连接数最少的服务器 | 长连接场景（WebSocket、视频流） | 动态适应负载变化 | 需要实时统计连接数 |
+| **IP 哈希** (IP Hash) | 根据客户端 IP 计算哈希，同一 IP 永远分配到同一台服务器 | 需要会话保持的场景 | 保证会话一致性 | 某个 IP 流量大时会造成单点压力 |
+
+**Nginx 配置示例**：
+
+```nginx
+# 定义 upstream 组
+upstream backend {
+    # 轮询（默认）
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+    server 10.0.1.12:8080;
+}
+
+upstream backend_weighted {
+    # 加权轮询
+    server 10.0.1.10:8080 weight=3;  # 性能好，承担更多流量
+    server 10.0.1.11:8080 weight=2;
+    server 10.0.1.12:8080 weight=1;  # 性能差，承担较少流量
+}
+
+upstream backend_least_conn {
+    # 最少连接
+    least_conn;
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+    server 10.0.1.12:8080;
+}
+
+upstream backend_ip_hash {
+    # IP 哈希（会话保持）
+    ip_hash;
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+    server 10.0.1.12:8080;
+}
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location / {
+        proxy_pass http://backend;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # 健康检查（需要第三方模块或 Nginx Plus）
+        # health_check;
+    }
+}
+```
+
+### 5.3 避坑指南：负载均衡的常见误区
+
+#### 误区 1：忽视健康检查
+
+```nginx
+# ❌ 错误：没有健康检查，后端服务宕机了，流量还会继续发送
+upstream backend {
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;  # 这台宕机了，请求会失败
+}
+
+# ✅ 正确：配置健康检查（Nginx Plus 或第三方模块）
+upstream backend {
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+
+    # 主动健康检查（Nginx Plus 或配置 check 模块）
+    check interval=3000 rise=2 fall=3 timeout=1000 type=http;
+    check_http_send "GET /health HTTP/1.0\r\n\r\n";
+    check_http_expect_alive http_2xx http_3xx;
+}
+```
+
+#### 误区 2：会话保持滥用
+
+```nginx
+# ❌ 错误：所有请求都使用 IP 哈希，导致负载不均
+upstream backend {
+    ip_hash;  # 某些 IP 流量特别大，导致单点压力
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+}
+
+# ✅ 正确：需要会话保持的才用 IP 哈希，其他用轮询
+upstream backend {
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+}
+
+upstream backend_session {
+    ip_hash;
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+}
+
+server {
+    location /api/ {
+        proxy_pass http://backend;  # 普通 API，无需会话保持
+    }
+
+    location /cart/ {
+        proxy_pass http://backend_session;  # 购物车，需要会话保持
+    }
+}
+```
+
+#### 误区 3：忽视后端获取真实 IP
+
+```nginx
+# ❌ 错误：后端应用获取到的 IP 是 Nginx 的 IP，不是客户端真实 IP
+server {
+    location / {
+        proxy_pass http://backend;
+        # 缺少 Header 设置
+    }
+}
+
+# ✅ 正确：传递真实 IP 和协议信息
+server {
+    location / {
+        proxy_pass http://backend;
+
+        # 必须设置的 Header
+        proxy_set_header Host $host;  # 原始 Host
+        proxy_set_header X-Real-IP $remote_addr;  # 客户端真实 IP
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 代理链
+        proxy_set_header X-Forwarded-Proto $scheme;  # 原始协议（http/https）
+
+        # 如果后端也是 Nginx，可以设置真实端口
+        proxy_set_header X-Forwarded-Port $server_port;
+    }
+}
+```
+
+后端应用（以 Node.js Express 为例）获取真实 IP：
+
+```javascript
+const express = require('express');
+const app = express();
+
+// 信任代理（必须设置，否则 X-Forwarded-* 会被忽略）
+app.set('trust proxy', true);
+
+app.get('/api/test', (req, res) => {
+    res.json({
+        // 客户端真实 IP（经过代理链后的第一个 IP）
+        realIp: req.ip,
+
+        // 完整的代理链（客户端, 代理1, 代理2, ...）
+        forwardedFor: req.get('X-Forwarded-For'),
+
+        // 原始协议（http 或 https）
+        protocol: req.protocol,
+
+        // 原始 Host
+        host: req.get('Host')
+    });
+});
+
+app.listen(3000);
+```
+
+---
+
+## 4. 第三步：限流与熔断 - 防止系统被"流量洪水"冲垮
+
+<RateLimitingDemo />
+
+在高并发场景下，保护系统不被突发流量压垮，是网关的核心职责之一。这需要用到**限流**和**熔断**机制。
+
+### 4.1 限流算法对比：令牌桶 vs 漏桶 vs 滑动窗口
+
+| 算法 | 核心思想 | 突发流量 | 适用场景 | 实现复杂度 |
+| :--- | :--- | :--- | :--- | :--- |
+| **令牌桶** | 桶里装令牌，有令牌才能通过 | 允许一定程度的突发 | API 限流、带宽控制 | 中等 |
+| **漏桶** | 请求进桶，匀速流出处理 | 强制平滑，突发会被缓存或拒绝 | 需要严格匀速处理的场景 | 中等 |
+| **滑动窗口** | 统计时间窗口内的请求数 | 严格按窗口计数，超出一律拒绝 | 精确统计（如"1分钟内最多100次"） | 较高 |
+
+### 4.2 Nginx 限流配置实战
+
+```nginx
+# 定义限流区域（放在 http 块中）
+
+# 1. 基于 IP 的限流（漏桶算法）
+# zone=mylimit:10m - 区域名称和内存大小（10MB 约可存储 16 万 IP）
+# rate=10r/s - 每秒允许 10 个请求
+limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;
+
+# 2. 基于 IP 的连接数限制（防止单个 IP 建立过多连接）
+limit_conn_zone $binary_remote_addr zone=addr:10m;
+
+# 3. 基于服务端点的限流（不区分 IP，保护后端整体）
+limit_req_zone $server_name zone=server_limit:10m rate=100r/s;
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    # 用户服务 - 普通限流
+    location /api/users/ {
+        # 应用限流
+        # burst=20 - 桶容量，允许突发 20 个请求
+        # nodelay - 不延迟处理突发请求（立即处理或拒绝）
+        limit_req zone=mylimit burst=20 nodelay;
+
+        # 限制单个 IP 的连接数
+        limit_conn addr 10;
+
+        proxy_pass http://user-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 订单服务 - 更严格的限流
+    location /api/orders/ {
+        # 更严格的限流：每秒 5 个请求
+        limit_req_zone $binary_remote_addr zone=order_limit:10m rate=5r/s;
+        limit_req zone=order_limit burst=10 nodelay;
+
+        proxy_pass http://order-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # 支付服务 - 最高级别保护
+    location /api/pay/ {
+        # 多层限流保护
+
+        # 第一层：单 IP 限流（每秒 2 个请求）
+        limit_req_zone $binary_remote_addr zone=pay_ip_limit:10m rate=2r/s;
+        limit_req zone=pay_ip_limit burst=5 nodelay;
+
+        # 第二层：全局限流（保护后端数据库）
+        limit_req zone=server_limit burst=50 nodelay;
+
+        # 第三层：连接数限制
+        limit_conn addr 5;
+
+        # 只允许内网访问（额外安全层）
+        allow 10.0.0.0/8;
+        deny all;
+
+        proxy_pass http://payment-service;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+
+        # 支付接口增加超时时间
+        proxy_connect_timeout 30s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 30s;
+    }
+
+    # 限流后的处理
+    # 当请求被限流时，返回 429 Too Many Requests
+    error_page 429 /429.html;
+    location = /429.html {
+        internal;
+        return 429 '{"error": "Too Many Requests", "message": "Rate limit exceeded. Please try again later."}';
+        add_header Content-Type application/json;
+    }
+}
+```
+
+### 4.3 熔断降级：当依赖服务出问题时
+
+限流是防止外部流量压垮系统，**熔断**是防止内部依赖故障扩散。
+
+**熔断器的工作原理**：
+1. **关闭状态**：正常转发请求，同时统计错误率。
+2. **开启状态**：当错误率超过阈值，熔断器开启，直接返回错误，不再转发请求。
+3. **半开状态**：经过一段时间后，允许少量请求通过试探，如果成功则关闭熔断器。
+
+**Nginx 实现熔断（使用 Lua 模块或第三方模块）**：
+
+```nginx
+# 使用 nginx-upsync-module 或 lua-resty-healthcheck 实现健康检查和熔断
+
+upstream backend {
+    server 10.0.1.10:8080;
+    server 10.0.1.11:8080;
+
+    # 健康检查（需要 nginx_upstream_check_module）
+    check interval=3000 rise=2 fall=3 timeout=1000 type=http;
+    check_http_send "GET /health HTTP/1.0\r\n\r\n";
+    check_http_expect_alive http_2xx http_3xx;
+}
+
+server {
+    location / {
+        proxy_pass http://backend;
+
+        # 代理错误时返回自定义错误页（降级）
+        proxy_intercept_errors on;
+        error_page 500 502 503 504 /fallback.html;
+    }
+
+    location = /fallback.html {
+        internal;
+        # 返回降级数据（如缓存数据、简化版页面）
+        return 200 '{"status": "degraded", "message": "Service temporarily unavailable. Showing cached data."}';
+        add_header Content-Type application/json;
+    }
+}
+```
+
+**使用 OpenResty + Lua 实现更完善的熔断**：
+
+```lua
+-- 使用 lua-resty-circuit-breaker 库实现熔断
+local circuit_breaker = require "resty.circuit-breaker"
+
+local cb = circuit_breaker.new({
+    name = "payment_service",
+    group = "payment",
+    -- 熔断策略
+    failure_threshold = 5,      -- 连续失败 5 次触发熔断
+    success_threshold = 2,    -- 连续成功 2 次关闭熔断
+    timeout = 60,              -- 熔断后等待 60 秒进入半开状态
+    -- 错误类型
+    expected_statuses = {200, 201},  -- 期望的 HTTP 状态码
+    ignored_statuses = {404, 422},   -- 不计入失败的 status
+})
+
+-- 使用熔断器执行请求
+local ok, err = cb:execute(function()
+    -- 发起 HTTP 请求
+    local httpc = require "resty.http".new()
+    local res, err = httpc:request_uri("http://payment-service/charge", {
+        method = "POST",
+        body = body,
+        headers = {
+            ["Content-Type"] = "application/json",
+        },
+    })
+
+    if not res then
+        return nil, err
+    end
+
+    return res
+end)
+
+if not ok then
+    -- 熔断器开启或请求失败，执行降级逻辑
+    ngx.log(ngx.WARN, "Circuit breaker open or request failed: ", err)
+
+    -- 返回降级响应
+    ngx.status = 503
+    ngx.say('{"error": "Service temporarily unavailable", "fallback": true}')
+    return
+end
+
+-- 请求成功，返回正常响应
+ngx.status = res.status
+ngx.say(res.body)
+```
+
+---
+
+## 6. 第四步：认证与安全 - 守护大门的"门卫"
+
+<AuthMiddlewareDemo />
+
+网关是系统的统一入口，自然也成为**安全防护的第一道防线**。在网关层处理认证和安全，可以避免每个后端服务重复实现。
+
+### 6.1 在网关层统一认证
+
+**传统方式（每个服务各自认证）**：
+- 用户服务、订单服务、支付服务...每个都要校验 JWT。
+- 代码重复，维护困难。
+-  secret 分散在各个服务，泄露风险高。
+
+**网关统一认证**：
+- 客户端携带 Token 访问网关。
+- 网关校验 Token 合法性（签名、过期时间）。
+- 校验通过后，将用户信息（如 user_id）添加到请求头，转发给后端服务。
+- 后端服务无需校验，直接从 Header 获取用户信息。
+
+**Nginx + Lua 实现 JWT 校验**：
+
+```nginx
+server {
+    listen 80;
+    server_name api.example.com;
+
+    location / {
+        # 使用 access_by_lua_block 进行认证
+        access_by_lua_block {
+            local jwt = require "resty.jwt"
+
+            -- 从请求头获取 Token
+            local auth_header = ngx.var.http_authorization
+            if not auth_header then
+                ngx.status = 401
+                ngx.say('{"error": "Missing authorization header"}')
+                ngx.exit(ngx.HTTP_UNAUTHORIZED)
+            end
+
+            -- 提取 Token（Bearer token）
+            local token = auth_header:match("^Bearer%s+(.+)$")
+            if not token then
+                ngx.status = 401
+                ngx.say('{"error": "Invalid authorization format"}')
+                ngx.exit(ngx.HTTP_UNAUTHORIZED)
+            end
+
+            -- 验证 JWT
+            local jwt_obj = jwt:verify("your-secret-key", token)
+            if not jwt_obj.verified then
+                ngx.status = 401
+                ngx.say('{"error": "Invalid or expired token"}')
+                ngx.exit(ngx.HTTP_UNAUTHORIZED)
+            end
+
+            -- 将用户信息设置到变量，供后续使用
+            ngx.var.user_id = jwt_obj.payload.sub
+            ngx.var.user_role = jwt_obj.payload.role
+        }
+
+        # 将用户信息传递给后端服务
+        proxy_set_header X-User-ID $user_id;
+        proxy_set_header X-User-Role $user_role;
+        proxy_set_header X-Real-IP $remote_addr;
+
+        proxy_pass http://backend;
+    }
+
+    # 公开接口，无需认证
+    location /api/public/ {
+        proxy_pass http://backend;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+### 6.2 HTTPS 与 SSL 终结
+
+<SslTerminationDemo />
+
+HTTPS 是现代 Web 应用的标配。但如果在每台后端服务器都配置 HTTPS，会带来很多麻烦：
+- 证书管理复杂，每台服务器都要部署、更新证书。
+- 后端服务需要处理 TLS 握手，消耗 CPU 资源。
+- 配置容易出错，不一致。
+
+**SSL 终结（SSL Termination）** 方案：
+- 只在网关（Nginx）层配置 HTTPS 和证书。
+- 网关负责 TLS 握手和加解密。
+- 网关和后端服务之间使用 HTTP 明文传输（内部网络可信）。
+- 后端服务专注于业务逻辑，无需处理 TLS。
+
+**SSL 终结流程**：
+1. 客户端发送 HTTPS 请求到 Nginx。
+2. Nginx 和客户端完成 TLS 握手，建立加密通道。
+3. Nginx 解密请求，得到明文 HTTP 请求。
+4. Nginx 将明文 HTTP 请求转发给后端服务（通过内部网络）。
+5. 后端服务处理请求，返回明文 HTTP 响应给 Nginx。
+6. Nginx 加密响应，通过 HTTPS 返回给客户端。
+
+**Nginx HTTPS 配置**：
+
+```nginx
+server {
+    # 监听 443 端口，启用 SSL
+    listen 443 ssl http2;
+    server_name api.example.com;
+
+    # SSL 证书配置
+    ssl_certificate /etc/nginx/ssl/api.example.com.crt;  # 证书文件
+    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;  # 私钥文件
+
+    # SSL 协议和密码套件（安全配置）
+    ssl_protocols TLSv1.2 TLSv1.3;  # 只启用安全的 TLS 版本
+    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;  # 强密码套件
+    ssl_prefer_server_ciphers off;  # 优先使用客户端支持的密码套件
+
+    # SSL 会话缓存（提升性能）
+    ssl_session_cache shared:SSL:50m;  # 会话缓存大小
+    ssl_session_timeout 1d;  # 会话超时时间
+    ssl_session_tickets off;  # 禁用会话票证（前向安全）
+
+    # OCSP Stapling（提升性能和隐私）
+    ssl_stapling on;  # 启用 OCSP Stapling
+    ssl_stapling_verify on;  # 验证 OCSP 响应
+    ssl_trusted_certificate /etc/nginx/ssl/chain.crt;  # 信任链
+    resolver 8.8.8.8 8.8.4.4 valid=300s;  # DNS 解析器
+    resolver_timeout 5s;  # DNS 解析超时
+
+    # 安全响应头
+    add_header Strict-Transport-Security "max-age=63072000" always;  # HSTS
+    add_header X-Frame-Options "SAMEORIGIN" always;  # 防止点击劫持
+    add_header X-Content-Type-Options "nosniff" always;  # 防止 MIME 嗅探
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;  # Referrer 策略
+
+    # SSL 终结后，转发到后端 HTTP 服务
+    location / {
+        proxy_pass http://backend;  # 后端使用 HTTP
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;  # 传递原始协议（https）
+        proxy_set_header X-Forwarded-Port 443;  # 传递原始端口
+    }
+}
+
+# HTTP 重定向到 HTTPS（强制 HTTPS）
+server {
+    listen 80;
+    server_name api.example.com;
+
+    # 所有 HTTP 请求 301 重定向到 HTTPS
+    return 301 https://$server_name$request_uri;
+}
+```
+
+### 6.3 安全配置清单
+
+| 配置项 | 说明 | 推荐值 |
+| :--- | :--- | :--- |
+| **SSL 协议** | 启用的 TLS 版本 | `TLSv1.2 TLSv1.3`（禁用 SSLv3、TLSv1.0/1.1） |
+| **密码套件** | 加密算法组合 | 优先使用 `ECDHE` + `AES-GCM`，禁用 `RC4`、`DES`、`MD5` |
+| **HSTS** | 强制 HTTPS | `max-age=63072000`（两年） |
+| **证书有效期** | SSL 证书过期时间 | 不超过 397 天（行业规范） |
+| **OCSP Stapling** | 证书状态检查 | 启用，提升性能和隐私 |
+| **Session Tickets** | 会话恢复机制 | 禁用（前向安全考虑）或定期轮换密钥 |
+
+---
+
+## 7. 系统整合：打造完整的网关架构
+
+现在，是时候把之前学到的所有组件整合起来，搭建一个完整的网关架构了。
+
+### 7.1 完整架构图
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                           客户端（浏览器/APP）                                 │
+└───────────────────────────────┬─────────────────────────────────────────────┘
+                                │ HTTPS
+                                ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                           外层：CDN + WAF                                    │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  CDN（内容分发网络）                                                 │   │
+│  │  - 静态资源缓存（图片、CSS、JS）                                      │   │
+│  │  - 就近访问，降低延迟                                                 │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  WAF（Web 应用防火墙）                                                │   │
+│  │  - 防护 SQL 注入、XSS 攻击                                            │   │
+│  │  - 拦截恶意 Bot、爬虫                                                 │   │
+│  │  - CC 攻击防护（Challenge Collapsar）                                 │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────────────────┘
+                                │
+                                ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        中层：API 网关（Nginx/Kong）                           │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  第一层：SSL 终结 + 安全防护                                          │   │
+│  │  - HTTPS / TLS 1.3                                                   │   │
+│  │  - HSTS、安全响应头                                                   │   │
+│  │  - OCSP Stapling                                                    │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  第二层：认证与鉴权                                                    │   │
+│  │  - JWT Token 校验                                                    │   │
+│  │  - OAuth 2.0 / SSO 集成                                               │   │
+│  │  - API Key 管理                                                       │   │
+│  │  - 权限校验（RBAC）                                                   │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  第三层：流量控制                                                      │   │
+│  │  - 限流（Rate Limiting）- 令牌桶/漏桶算法                              │   │
+│  │  - 熔断（Circuit Breaking）- 防止故障扩散                               │   │
+│  │  - 降级（Degradation）- 服务不可用时的备用方案                           │   │
+│  │  - 灰度发布（Canary Release）- 按比例分配流量                            │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  第四层：路由与负载均衡                                                 │   │
+│  │  - 路径路由（Path-based Routing）                                      │   │
+│  │  - 域名路由（Host-based Routing）                                      │   │
+│  │  - Header 路由（Header-based Routing）                                 │   │
+│  │  - 负载均衡算法（轮询/加权/最少连接/IP 哈希）                             │   │
+│  │  - 服务发现（Service Discovery）集成                                    │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │  第五层：协议转换与数据处理                                             │   │
+│  │  - SSL 终结（HTTPS ↔ HTTP）                                           │   │
+│  │  - 协议转换（HTTP ↔ gRPC / WebSocket）                                 │   │
+│  │  - 请求/响应转换（JSON ↔ XML）                                         │   │
+│  │  - 数据压缩（Gzip / Brotli）                                           │   │
+│  │  - 缓存（Cache）- 静态资源和 API 响应                                    │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────────────────┘
+                                │
+                                ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                         内层：微服务集群                                     │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
+│  │  用户服务    │  │  订单服务    │  │  商品服务    │  │  支付服务    │          │
+│  │  User Svc   │  │  Order Svc  │  │ Product Svc │  │ Payment Svc │          │
+│  │             │  │             │  │             │  │             │          │
+│  │  服务注册    │  │  服务注册    │  │  服务注册    │  │  服务注册    │          │
+│  │   Consul    │  │   Consul    │  │   Consul    │  │   Consul    │          │
+│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘          │
+│         │                │                │                │               │
+│         └────────────────┴────────────────┴────────────────┘               │
+│                                       │                                      │
+│                    服务发现与配置中心（Consul / etcd）                          │
+│                    - 服务注册与发现                                            │
+│                    - 健康检查                                                  │
+│                    - KV 配置存储                                              │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 7.2 实战代码模板：完整的 Nginx 网关配置
+
+```nginx
+# /etc/nginx/nginx.conf
+
+user nginx;
+worker_processes auto;  # 自动设置为 CPU 核心数
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+# 加载动态模块（根据实际需要启用）
+# load_module modules/ngx_http_geoip2_module.so;
+
+# 工作模式和连接数上限
+events {
+    use epoll;  # Linux 下使用 epoll
+    worker_connections 4096;  # 每个 Worker 的最大连接数
+    multi_accept on;  # 尽可能接受更多连接
+}
+
+http {
+    # 基础设置
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # 日志格式
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for" '
+                    'rt=$request_time uct="$upstream_connect_time" '
+                    'uht="$upstream_header_time" urt="$upstream_response_time"';
+
+    access_log /var/log/nginx/access.log main;
+
+    # 性能优化
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Gzip 压缩
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_min_length 1000;
+    gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
+
+    # 安全响应头
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # 防止点击劫持（可选）
+    # add_header Content-Security-Policy "default-src 'self'; frame-ancestors 'self';" always;
+
+    # 上游服务定义
+    # 用户服务（加权轮询）
+    upstream user_service {
+        server 10.0.1.10:8080 weight=3;
+        server 10.0.1.11:8080 weight=2;
+        keepalive 32;
+    }
+
+    # 订单服务（最少连接）
+    upstream order_service {
+        least_conn;
+        server 10.0.1.20:8080;
+        server 10.0.1.21:8080;
+        server 10.0.1.22:8080;
+        keepalive 32;
+    }
+
+    # 商品服务（IP 哈希，会话保持）
+    upstream product_service {
+        ip_hash;
+        server 10.0.1.30:8080;
+        server 10.0.1.31:8080;
+        keepalive 32;
+    }
+
+    # 支付服务（严格的负载均衡 + 健康检查）
+    upstream payment_service {
+        server 10.0.1.40:8080 weight=2;
+        server 10.0.1.41:8080 backup;  # 备份服务器
+        keepalive 32;
+    }
+
+    # 限流区域定义
+    # 普通 API 限流：每秒 10 请求
+    limit_req_zone $binary_remote_addr zone=api_limit:10m rate=10r/s;
+
+    # 严格限流：每秒 2 请求（用于敏感接口）
+    limit_req_zone $binary_remote_addr zone=strict_limit:10m rate=2r/s;
+
+    # 全局限流：保护后端整体
+    limit_req_zone $server_name zone=global_limit:10m rate=100r/s;
+
+    # 连接数限制
+    limit_conn_zone $binary_remote_addr zone=conn_limit:10m;
+
+    # 虚拟主机配置
+    server {
+        listen 80;
+        server_name api.example.com;
+
+        # 强制 HTTPS
+        return 301 https://$server_name$request_uri;
+    }
+
+    server {
+        listen 443 ssl http2;
+        server_name api.example.com;
+
+        # SSL 配置（略，见上文）
+        ssl_certificate /etc/nginx/ssl/api.example.com.crt;
+        ssl_certificate_key /etc/nginx/ssl/api.example.com.key;
+        # ... 其他 SSL 配置
+
+        # 全局限流
+        limit_req zone=global_limit burst=200 nodelay;
+
+        # ===== 用户服务路由 =====
+        location /api/users/ {
+            # 应用限流
+            limit_req zone=api_limit burst=20 nodelay;
+            limit_conn conn_limit 10;
+
+            # 超时设置
+            proxy_connect_timeout 5s;
+            proxy_send_timeout 10s;
+            proxy_read_timeout 10s;
+
+            proxy_pass http://user_service;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # 错误处理
+            proxy_intercept_errors on;
+            error_page 500 502 503 504 /error.html;
+        }
+
+        # ===== 订单服务路由 =====
+        location /api/orders/ {
+            # 更严格的限流
+            limit_req zone=strict_limit burst=10 nodelay;
+            limit_conn conn_limit 5;
+
+            proxy_pass http://order_service;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # ===== 商品服务路由 =====
+        location /api/products/ {
+            # 缓存静态资源
+            location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+                expires 30d;
+                add_header Cache-Control "public, immutable";
+            }
+
+            proxy_pass http://product_service;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # ===== 支付服务路由（最高安全级别） =====
+        location /api/pay/ {
+            # 多重限流保护
+            limit_req zone=strict_limit burst=5 nodelay;
+            limit_req zone=global_limit burst=50 nodelay;
+            limit_conn conn_limit 3;
+
+            # 只允许内网访问（额外安全层）
+            allow 10.0.0.0/8;
+            allow 172.16.0.0/12;
+            allow 192.168.0.0/16;
+            deny all;
+
+            # 详细日志记录
+            access_log /var/log/nginx/payment-access.log detailed;
+
+            proxy_pass http://payment_service;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            # 支付接口增加超时时间
+            proxy_connect_timeout 30s;
+            proxy_send_timeout 30s;
+            proxy_read_timeout 30s;
+        }
+
+        # 健康检查端点
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+
+        # 错误页面
+        location /error.html {
+            internal;
+            root /var/www/html;
+        }
+
+        # 限流错误处理
+        error_page 429 /429.html;
+        location = /429.html {
+            internal;
+            return 429 '{"error": "Too Many Requests", "message": "Rate limit exceeded. Please try again later."}';
+            add_header Content-Type application/json;
+        }
+    }
+}
+```
+
+### 7.3 为什么这样设计最强？
+
+这个架构的设计哲学，是为了解决三个核心矛盾：
+
+**1. 高性能与高可用（负载均衡 + 健康检查）**
+- **矛盾**：单台服务器性能有限，容易成为瓶颈；多台服务器需要协调，避免单点故障。
+- **解法**：使用 Nginx 作为负载均衡器，支持多种负载均衡算法（轮询、加权、最少连接、IP 哈希）。配合健康检查，自动剔除故障节点，保证服务高可用。
+
+**2. 安全性与易用性（SSL 终结 + 统一认证）**
+- **矛盾**：HTTPS 保证安全，但配置复杂、证书管理麻烦；每个服务都认证，代码重复、维护困难。
+- **解法**：在 Nginx 层统一做 SSL 终结和认证。客户端只需信任 Nginx 的证书，后端服务之间使用 HTTP 明文通信，简化配置。认证逻辑统一在网关处理，后端服务专注于业务逻辑。
+
+**3. 灵活性与稳定性（限流熔断 + 灰度发布）**
+- **矛盾**：新功能需要快速上线验证，但全量发布风险大；突发流量可能压垮系统，需要保护机制。
+- **解法**：使用 Nginx 的限流和熔断功能，防止系统被突发流量压垮。配合灰度发布，按 Header 或比例将部分流量导到新版本，验证稳定性后再全量上线。
+
+---
+
+## 8. 实战模板：直接抄作业
+
+为了让你更直观地理解这套机制是如何运作的，我们为你准备了**全链路配置模板**。
+
+### 场景 1：中小型 Web 应用（单域名，多服务）
+
+> 适用场景：创业公司官网 + 后台管理 + API 服务
+
+```nginx
+# /etc/nginx/nginx.conf
+
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    use epoll;
+    worker_connections 4096;
+    multi_accept on;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_min_length 1000;
+    gzip_types text/plain text/css text/xml application/json application/javascript;
+
+    # 安全响应头
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # 上游服务
+    upstream app_servers {
+        server 127.0.0.1:3000;
+        server 127.0.0.1:3001;
+        keepalive 32;
+    }
+
+    upstream api_servers {
+        server 127.0.0.1:4000;
+        keepalive 32;
+    }
+
+    # 限流配置
+    limit_req_zone $binary_remote_addr zone=general:10m rate=10r/s;
+    limit_req_zone $binary_remote_addr zone=api:10m rate=20r/s;
+
+    # HTTP 服务器
+    server {
+        listen 80;
+        server_name example.com www.example.com;
+
+        # 强制 HTTPS（生产环境启用）
+        # return 301 https://$server_name$request_uri;
+
+        # 静态文件
+        location /static/ {
+            alias /var/www/html/static/;
+            expires 30d;
+            add_header Cache-Control "public, immutable";
+        }
+
+        location /images/ {
+            alias /var/www/html/images/;
+            expires 90d;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # 前端应用
+        location / {
+            limit_req zone=general burst=20 nodelay;
+
+            proxy_pass http://app_servers;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # API 接口
+        location /api/ {
+            limit_req zone=api burst=40 nodelay;
+
+            proxy_pass http://api_servers;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # 健康检查
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+
+    # HTTPS 服务器（生产环境启用）
+    # server {
+    #     listen 443 ssl http2;
+    #     server_name example.com www.example.com;
+    #
+    #     ssl_certificate /etc/nginx/ssl/example.com.crt;
+    #     ssl_certificate_key /etc/nginx/ssl/example.com.key;
+    #     ssl_protocols TLSv1.2 TLSv1.3;
+    #     ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
+    #     ssl_prefer_server_ciphers off;
+    #     ssl_session_cache shared:SSL:50m;
+    #     ssl_session_timeout 1d;
+    #
+    #     # 复制 HTTP 服务器的 location 配置
+    #     # ...
+    # }
+}
+```
+
+### 场景 2：微服务架构（多域名，复杂路由）
+
+> 适用场景：大型互联网公司，多业务线，多团队协作
+
+```nginx
+# 微服务架构下的 Nginx 配置示例
+# 特点：多域名、复杂路由、服务发现集成
+
+# 服务发现集成（使用 Consul 或 etcd）
+# 需要 nginx-upsync-module 模块
+upstream user_service {
+    # 从 Consul 自动发现服务实例
+    upsync 127.0.0.1:8500/v1/catalog/service/user-service upsync_timeout=6m upsync_interval=500ms;
+    upsync_dump_path /var/nginx/conf/user_service.conf;
+
+    # 默认服务器（Consul 不可用时使用）
+    server 127.0.0.1:11111 down;
+
+    keepalive 64;
+    keepalive_timeout 60s;
+    keepalive_requests 1000;
+}
+
+# 动态 upstream 示例（Lua + Redis）
+upstream dynamic_backend {
+    server 0.0.0.0;  # 占位符
+
+    balancer_by_lua_block {
+        local balancer = require "ngx.balancer"
+        local resty_redis = require "resty.redis"
+
+        -- 从 Redis 获取可用后端列表
+        local redis = resty_redis:new()
+        redis:connect("127.0.0.1", 6379)
+
+        local backends, err = redis:smembers("backends:available")
+        if not backends or #backends == 0 then
+            ngx.log(ngx.ERR, "no available backends")
+            return ngx.exit(503)
+        end
+
+        -- 简单的轮询选择
+        local hash = ngx.var.remote_addr .. ngx.var.request_uri
+        local index = ngx.crc32_short(hash) % #backends + 1
+        local selected = backends[index]
+
+        -- 设置后端地址
+        local ok, err = balancer.set_current_peer(selected, 80)
+        if not ok then
+            ngx.log(ngx.ERR, "failed to set peer: ", err)
+            return ngx.exit(500)
+        end
+    }
+}
+
+# 基于 Host 的多域名路由
+server {
+    listen 80;
+    server_name api.user.example.com;
+    return 301 https://$server_name$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name api.user.example.com;
+
+    ssl_certificate /etc/nginx/ssl/user.example.com.crt;
+    ssl_certificate_key /etc/nginx/ssl/user.example.com.key;
+
+    # JWT 认证（使用 Lua）
+    access_by_lua_block {
+        local jwt = require "resty.jwt"
+
+        local auth_header = ngx.var.http_authorization
+        if not auth_header then
+            ngx.exit(401)
+        end
+
+        local token = auth_header:match("^Bearer%s+(.+)$")
+        if not token then
+            ngx.exit(401)
+        end
+
+        local jwt_obj = jwt:verify(os.getenv("JWT_SECRET"), token)
+        if not jwt_obj.verified then
+            ngx.exit(401)
+        end
+
+        -- 将用户信息设置到变量
+        ngx.var.user_id = jwt_obj.payload.sub
+        ngx.var.user_role = jwt_obj.payload.role
+    }
+
+    location / {
+        # 权限控制
+        if ($user_role != "user" && $user_role != "admin") {
+            return 403;
+        }
+
+        proxy_pass http://user_service;
+        proxy_set_header Host $host;
+        proxy_set_header X-User-ID $user_id;
+        proxy_set_header X-User-Role $user_role;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+
+# Admin API（管理后台，更严格的权限控制）
+server {
+    listen 443 ssl http2;
+    server_name api.admin.example.com;
+
+    ssl_certificate /etc/nginx/ssl/admin.example.com.crt;
+    ssl_certificate_key /etc/nginx/ssl/admin.example.com.key;
+
+    # IP 白名单（只允许公司内网访问）
+    allow 10.0.0.0/8;
+    allow 172.16.0.0/12;
+    allow 192.168.0.0/16;
+    deny all;
+
+    # 严格的限流
+    limit_req zone=strict_limit burst=5 nodelay;
+    limit_conn conn_limit 5;
+
+    # 只允许管理员角色访问
+    set $admin_required 1;
+
+    location / {
+        if ($user_role != "admin") {
+            return 403;
+        }
+
+        proxy_pass http://admin_service;
+        proxy_set_header Host $host;
+        proxy_set_header X-User-ID $user_id;
+        proxy_set_header X-User-Role $user_role;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+---
+
+## 9. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Reverse Proxy** | 反向代理 | 部署在服务器端，接收客户端请求并转发给内部服务器的代理服务。客户端只知道反向代理的存在，不知道真实服务器地址。 |
+| **Forward Proxy** | 正向代理 | 部署在客户端侧，代替客户端访问外部资源的代理服务。服务端看到的是代理的 IP，不知道真实客户端。典型应用：VPN、翻墙工具。 |
+| **API Gateway** | API 网关 | 位于客户端和后端服务之间的中间层，提供路由、认证、限流、日志等功能，是微服务架构的"统一大门"。 |
+| **Load Balancing** | 负载均衡 | 将请求流量分配到多台服务器，避免单台服务器过载，提高系统可用性和性能。 |
+| **Rate Limiting** | 限流 | 限制单位时间内的请求数量，防止系统被突发流量压垮。常用算法：令牌桶、漏桶、滑动窗口。 |
+| **Circuit Breaking** | 熔断 | 当依赖服务出现故障时，自动切断调用，防止故障扩散，并提供降级方案。 |
+| **SSL Termination** | SSL 终结 | 在网关层处理 HTTPS 加密解密，后端服务使用 HTTP，降低后端计算开销，简化证书管理。 |
+| **Health Check** | 健康检查 | 定期检查后端服务的健康状态，自动剔除故障节点，保证流量只发送到健康的服务实例。 |
+| **Sticky Session** | 会话保持 | 将同一客户端的请求始终路由到同一台后端服务器，用于需要保持会话状态的场景。 |
+| **Blue-Green Deployment** | 蓝绿部署 | 同时运行两个生产环境（蓝、绿），切换流量实现零停机发布。 |
+| **Canary Release** | 灰度发布 | 将少量流量导到新版本，验证稳定性后逐步扩大比例，降低发布风险。 |
+| **Upstream** | 上游 | 在 Nginx 配置中，指代后端服务器组。 |
+| **Location** | 位置块 | Nginx 中用于匹配请求 URL 并定义处理规则的配置块。 |
+| **Worker Process** | 工作进程 | Nginx 中实际处理请求的进程，多个 Worker 并行工作，充分利用多核 CPU。 |
+| **Master Process** | 主进程 | Nginx 中负责管理 Worker 进程（启动、停止、重新加载配置）的控制进程。 |
+| **Event-Driven** | 事件驱动 | 一种编程模型，通过监听和响应事件（如 I/O 就绪）来处理并发，Nginx 的核心架构。 |
+| **epoll / kqueue** | I/O 多路复用 | Linux/macOS 下的高性能 I/O 事件通知机制，允许单个进程同时处理大量连接。 |
+
+---
+
+## 总结：反向代理与网关的本质
+
+经过这一章的学习，我们可以得出几个核心结论：
+
+**从实践来看**：
+- 反向代理解决的是"流量怎么分发"的问题，通过负载均衡、健康检查、会话保持等机制，将流量高效、可靠地送达后端服务。
+- API 网关解决的是"请求怎么处理"的问题，在统一的入口点处理横切关注点（认证、限流、日志等），让后端服务专注于业务逻辑。
+
+**从架构视角看**：
+- 网关是系统的"门面"，所有流量都经过这里，是安全防护的第一道防线，也是性能优化的关键节点。
+- 合理的网关架构，可以将单台服务器的处理能力扩展到整个集群，将单点故障风险分散到多个节点，将复杂的安全策略收敛到统一入口。
+
+**从运维视角看**：
+- 证书管理、限流策略、路由规则，都应该在网关层统一配置，避免分散在各个服务。
+- 监控和日志也应该在网关层统一收集，便于分析流量模式、排查问题、审计安全事件。
+
+目标是：在给定的资源和性能约束下，让每一次请求都能被安全、高效、可靠地处理。
\ No newline at end of file
diff --git a/docs/zh-cn/appendix/image-gen-intro.md b/docs/zh-cn/appendix/image-gen-intro.md
index 800440b..c199728 100644
--- a/docs/zh-cn/appendix/image-gen-intro.md
+++ b/docs/zh-cn/appendix/image-gen-intro.md
@@ -1,155 +1,118 @@
 # AI 绘画与生图模型入门 (Image Generation Intro)
 
-> 💡 **学习指南**：从 Stable Diffusion 到 Sora，生成式 AI 正在重塑创意产业。本章节将带你理解从“噪点”中诞生“画作”的神奇过程。无论你是设计师还是开发者，理解这些底层原理都将帮助你更好地驾驭 AI 工具。
+> 💡 **学习指南**：提示词工程是“教 AI 说话”，而生图模型则是“教 AI 做梦”。本章节将带你拆解 AI 画笔背后的魔法——它是如何从一堆毫无意义的噪点中，变出足以乱真的艺术品的？
 
-## 0. 快速上手：如何生成第一张图？
+在开始之前，建议你先体验一下“神笔马良”的感觉。
+现在的 AI 绘画工具主要分为三类：
+*   **聊天机器人里带的**：GPT-4o (DALL·E 3), Gemini (Imagen 3) —— 简单，听得懂人话。
+*   **追求极致画质的**：Midjourney, Flux —— 审美无敌，每一张都是壁纸。
+*   **能精准控制的**：Stable Diffusion (WebUI/ComfyUI) —— 指哪打哪，设计师最爱。
 
-在你开始学习枯燥的原理之前，首先得体验一下"神笔马良"的感觉。AI 绘画不再需要你经过数年的美术训练，只需要一段文字（Prompt），计算机就能为你创造出令人惊叹的图像。
+---
 
-::: info 🎨 常见的 AI 绘画与编辑工具
+## 0. 引言：为什么电脑画画不用“像素”？
 
-**🤖 多模态大模型 (对话 + 生图 + 编辑)**
-这类模型集成在聊天机器人中，支持通过对话生成图片，并能理解指令进行**修改**（如"把猫换成狗"）。
+<ImageGenQuickStartDemo />
 
-1.  **GPT-4o (DALL·E 3)**：集成在 ChatGPT 中，语义理解极强，支持局部重绘（Inpainting）和对话式修改。
-2.  **Gemini (Imagen 3)**：Google 的顶级模型，生成速度快，写实风格出色，支持复杂的逻辑指令。
-3.  **通义万相 (Wanx) / Qwen**：阿里通义实验室出品，中文理解能力优秀，支持多种艺术风格。
+如果我们想让电脑画一张 1024x1024 的高清图，它需要决定 **300 多万** 个像素点（红绿蓝通道）的颜色。
+如果直接在这个“像素海洋”里作画，计算量会大到把你的显卡烧穿。
 
-**🎨 专业创作工具 (画质与艺术优先)**
+聪明的科学家想到了一个绝妙的办法：**“不要画照片，要画『压缩饼干』。”**
 
-1.  **Midjourney**：目前艺术感与审美最顶尖的工具（运行在 Discord/Web），支持扩图（Zoom）、平移（Pan）和局部重绘。
-2.  **Flux**：当前最强开源模型，文字生成（Typography）能力极强，画质媲美 Midjourney。
+这就是我们今天要学的第一个核心概念：**潜空间 (Latent Space)**。
 
-**💻 本地/开源生态 (极致控制)**
+---
 
-1.  **Stable Diffusion (WebUI/ComfyUI)**：拥有最庞大的插件生态（ControlNet, LoRA），可精确控制画面构图、姿态和风格。
-2.  **ComfyUI**：基于节点的工作流工具，适合构建复杂的自动化生图管线。
+## 1. 潜空间：AI 的“压缩饼干”
 
-:::
+想象一下，你要在电话里描述蒙娜丽莎：
+*   **方法 A (像素级)**：“第 1 行第 1 个点是深褐色，第 1 行第 2 个点是浅褐色……”（讲完需要一万年）
+*   **方法 B (特征级)**：“一个微胖的女人，长发，没有眉毛，神秘的微笑，背景是山水。”（讲完只需要 10 秒）
 
-### 0.1 为什么要学习 AI 绘画？(Why GenAI?)
+**方法 B 就是潜空间。** 它不存像素，只存“特征”。
 
-你可能会问：_“网上图片那么多，我为什么要用 AI 生成？”_ 或者 _“我是程序员，为什么要懂画画？”_
+### 1.1 VAE：那个把大象装进冰箱的家伙
 
-这并非为了替代人类画家，而是因为 **生成式 AI (Generative AI)** 带来了一种全新的生产力范式：
+AI 绘画的第一步，是把高清大图“压”进潜空间。这个工作由 **VAE (变分自编码器)** 完成。
+它把一张巨大的图片，压缩成一张只有原本 1/48 大小的“特征图”。AI 只需要在这张小图上画画，最后再由 VAE 把它“放大”回高清图。
 
-#### 1. 效率的质变：从小时到秒
-
-- **传统绘画**：构思 -> 草图 -> 线稿 -> 上色 -> 光影 -> 细化。一张精美插画可能需要数天。
-- **AI 生成**：构思 -> 提示词 -> 生成。只需要几秒钟。这让你可以在 10 分钟内尝试 100 种不同的构图和风格。
-
-#### 2. 创意的扩充：打破技能壁垒
-
-- **传统**：你脑子里有一个绝妙的创意，但你的手画不出来。
-- **AI**：它是你的“手”。只要你能描述出来，它就能画出来。它降低了表达的门槛，让每个人都能成为创作者。
-
-#### 3. 可编程的艺术
-
-- 对于开发者来说，AI 模型不仅仅是画笔，更是**API**。你可以将它集成到游戏、网站或应用中，实现动态生成头像、实时渲染材质等过去无法想象的功能。
-
-## 1. 核心架构：解耦的艺术 (The Big Picture)
-
-如果要让电脑学会画画，直接处理像素太累了（一张 1024x1024 的图有 300 多万个数值）。聪明的科学家们设计了一套分工明确的流水线。
-
-我们可以把 AI 画家看作一个由三个部门组成的**创意工作室**：
-
-### 2.1 角色分工
-
-- **👁️ 眼睛：VAE (变分自编码器)**
-  - **职责**：负责“翻译”。
-  - **编码 (Encode)**：把人类看的高清大图（Pixel Space），压缩成机器好处理的“浓缩特征图”（Latent Space）。
-  - **解码 (Decode)**：把机器画好的特征图，还原成我们能看懂的高清大图。
-  - _作用：大大降低了计算量，让 AI 可以在家用显卡上运行。_
-
-- **🧠 大脑：UNet / DiT (去噪模型)**
-  - **职责**：负责“作画”。
-  - **工作原理**：它主要在潜空间（Latent Space）工作。它的核心技能是**预测噪声**。给它一张模糊的噪点图，它能算出“这上面哪部分是噪点”，然后减去噪点，画面就清晰了。
-  - _进化_：早期的 Stable Diffusion 使用 **UNet** 架构；最新的 Sora 和 SD3 使用 **DiT (Transformer)** 架构，逻辑能力更强。
-
-- **👂 耳朵：CLIP / T5 (文本编码器)**
-  - **职责**：负责“听懂人话”。
-  - **工作原理**：它把你输入的 `Prompt`（如 "一只猫"）转换成计算机能理解的**数学向量 (Embeddings)**，并交给大脑，告诉它该画什么。
-
-<ImageGenArchitecture />
-
-## 3. 视觉模型：潜空间 (Latent Space)
-
-理解 **潜空间 (Latent Space)** 是理解现代 AI 的关键。
-
-想象一下，如果我们要描述一个人：
-
-- **Pixel Space (像素空间)**：我们需要描述他脸上每一个毛孔的颜色（几百万个数据）。
-- **Latent Space (潜空间)**：我们只需要描述几个关键特征——“性别：男，发型：短发，表情：笑，眼镜：有”。
-
-AI 并不是在画布上一点点涂颜色，而是在这个高维的“特征空间”里寻找坐标。
-
-- **压缩**：大图 -> 浓缩为 Latent 数值。
-- **操作**：在这个空间里移动（比如把“表情”这个维度的数值调大），图片就会从哭脸变成笑脸。
+👇 **动手点点看**：
+试着拖动滑块，感受一下“像素空间”和“潜空间”的区别。你会发现，在潜空间里移动一点点，图上的表情就会发生巨大的变化。
 
 <LatentSpaceViz />
 
-## 4. 生成机制：从噪声到画作 (Generation Process)
+---
 
-AI 是如何凭空变出画面的？主要有两种主流机制。
+## 2. 扩散模型 (Diffusion)：从混沌到秩序
 
-### 4.1 扩散模型 (Diffusion) —— 雕刻家
+既然有了画布（潜空间），AI 怎么动笔呢？
+它的画法非常反直觉：**它不是在一张白纸上画，而是对着一张全是雪花点的“废纸”硬看，直到看出东西来。**
 
-扩散模型的灵感来源于物理学中的热力学扩散。它包含两个过程：
+### 2.1 雕刻家理论
 
-1.  **破坏 (Forward)**：像往清水里滴墨水，或者把照片磨砂化。一步步加噪点，直到变成纯噪声。
-2.  **重构 (Reverse)**：AI 学习这一过程的**逆过程**。从一片雪花屏开始，猜测“这里原本应该是什么”，一点点去除噪声，直到露出清晰的画面。
+米开朗基罗说过：“雕像就在石头里，我只是去掉了多余的部分。”
+**扩散模型 (Diffusion Model)** 也是这么想的。
 
-_这就像米开朗基罗雕刻大卫像：“大卫就在石头里，我只是去掉了多余的部分。”_
+1.  **训练时 (前向过程)**：它把一张好图，一点点加上噪点，直到变成纯噪声。它记住了这个“搞破坏”的过程。
+2.  **生成时 (逆向过程)**：给它一张纯噪声，它就开始回想：“这玩意儿原本应该长什么样？”然后一步步把噪点减掉。
+
+👇 **动手点点看**：
+点击“开始去噪”，观察 AI 是如何像雕刻家一样，从一团混沌中把图像“挖”出来的。
 
 <DiffusionProcessDemo />
 
-### 4.2 流匹配 (Flow Matching) —— 传送门
+---
 
-**为什么 Diffusion 有时很慢？** 因为从“噪声”到“图片”的还原路径，Diffusion 往往走的是一条弯弯曲曲的、充满随机性的路（随机游走）。
+## 3. CLIP：让 AI 听懂你的话
 
-最新的模型（如 **Flux**, **Stable Diffusion 3**）采用了 **Flow Matching (流匹配)** 技术。
+AI 会画画了，但它怎么知道你要画猫还是画狗？
+这时候需要一个翻译官：**CLIP (文本编码器)**。
 
-- **核心思想**：我们不再盲目去噪，而是寻找从“噪声分布”到“图像分布”的 **最优传输路径 (Optimal Transport)**。
-- **优势**：这条路径是笔直的。AI 不需要走 50 步，往往只需要走几步（比如 4-8 步），就能顺着直线“滑”到终点。这也是为什么 Flux 既快又好的原因。
+它把你的文字（Prompt）变成一串数学向量，然后“注射”到 AI 的大脑里。
+当 AI 在去噪时，这些向量就像监工一样在旁边喊：
+*   “这里要画成毛茸茸的！” (关注 'cat')
+*   “背景要是赛博朋克的！” (关注 'cyberpunk')
 
-<FlowMatchingDemo />
-
-## 5. 操控机制：提示词的艺术 (Prompting)
-
-AI 画家空有一身技艺，怎么听懂你的指挥？
-
-这就涉及到了 **交叉注意力机制 (Cross-Attention)**。
-
-1.  **翻译**：你的 Prompt（如 "cyberpunk"）被 Text Encoder 变成了一串向量。
-2.  **注入**：这些向量被“注射”进生成模型的每一层。
-3.  **关注**：当 AI 在画画时，它会不断回头看这些向量。
-    - 画背景时，它会关注 "city", "neon lights"。
-    - 画主体时，它会关注 "cat", "glasses"。
-
-这就是为什么 Prompt 中词语的顺序和权重如此重要。
+这就是**交叉注意力 (Cross-Attention)** 机制。
 
 <PromptVisualizer />
 
-## 6. 总结 (Summary)
+---
 
-AI 绘画技术并不是魔法，而是**统计学、几何学与计算机科学**的完美结合。
+## 4. 进化：从“慢慢磨”到“传送门” (Flow Matching)
 
-- **VAE** 帮我们压缩了世界。
-- **Diffusion/Flow** 帮我们从混沌中建立秩序。
-- **Transformer** 帮我们连接了语言与视觉。
+早期的 Stable Diffusion 画一张图需要走 20-50 步，因为它是“盲人摸象”，在去噪的路上跌跌撞撞。
+最新的 **Flux** 和 **Stable Diffusion 3** 引入了 **Flow Matching (流匹配)** 技术。
 
-当你点击“生成”的那一刻，你实际上是指挥着数亿个参数，在高维空间中进行了一次精确的数学迁徙，最终将一个可能存在的平行宇宙坍缩到了你的屏幕上。
+如果说 Diffusion 是走迷宫找到出口，Flow Matching 就是直接在起点（噪声）和终点（图片）之间修了一条**直线高速公路**。
+它不需要猜，直接滑过去。所以 Flux 只需要 4-8 步就能画出极好的画。
 
-## 附录：常用术语表 (Vocabulary)
+👇 **动手点点看**：
+对比一下 Diffusion 的“随机游走”和 Flow Matching 的“直线传输”。
 
-| 术语         | 英文                    | 解释                                               |
-| :----------- | :---------------------- | :------------------------------------------------- |
-| **文生图**   | Text-to-Image           | 输入文字生成图像的任务。                           |
-| **图生图**   | Image-to-Image          | 输入参考图和文字生成新图像的任务。                 |
-| **扩散模型** | Diffusion Model         | 通过逐步去噪生成图像的一类模型架构。               |
-| **潜空间**   | Latent Space            | 压缩后的图像特征空间，计算效率更高。               |
-| **VAE**      | Variational Autoencoder | 负责图像与潜空间之间转换的编解码器。               |
-| **LoRA**     | Low-Rank Adaptation     | 一种轻量级微调技术，用于给模型添加特定画风或角色。 |
-| **种子**     | Seed                    | 初始化噪声的随机数种子，决定了生成的初始状态。     |
-| **提示词**   | Prompt                  | 指挥 AI 生成内容的文本指令。                       |
-| **采样器**   | Sampler                 | 决定去噪过程具体算法的组件（如 Euler, DPM++）。    |
+<FlowMatchingDemo />
+
+---
+
+## 5. 总结：AI 绘画的三驾马车
+
+现在，当你点击“生成”按钮时，你的电脑里正在发生一场精密的接力赛：
+
+1.  **CLIP (翻译官)**：听懂你的话，变成指令。
+2.  **Transformer/UNet (画家)**：在 **潜空间** 里，用 **Flow/Diffusion** 的方法，把噪声变成特征图。
+3.  **VAE (放大镜)**：把特征图还原成高清大图。
+
+这就是从噪点中诞生艺术的全过程。
+
+---
+
+## 附录：核心术语表
+
+| 术语 | 解释 | 比喻 |
+| :--- | :--- | :--- |
+| **Latent Space** | 潜空间 | 压缩后的特征世界，AI 的工作室 |
+| **VAE** | 变分自编码器 | 负责把大图变小（Encode）和把小图变大（Decode）的搬运工 |
+| **Diffusion** | 扩散模型 | 通过“去噪”来画画的算法，像雕刻石头 |
+| **Noise** | 噪声 | 随机的雪花点，AI 的原材料 |
+| **Sampler** | 采样器 | 决定去噪具体怎么走的“导航仪” (如 Euler, DPM++) |
+| **LoRA** | 低秩适应 | 给模型打的小补丁，专门画特定风格或角色 |
diff --git a/docs/zh-cn/appendix/load-balancing.md b/docs/zh-cn/appendix/load-balancing.md
new file mode 100644
index 0000000..80d714b
--- /dev/null
+++ b/docs/zh-cn/appendix/load-balancing.md
@@ -0,0 +1,481 @@
+# 负载均衡与多实例部署示意图
+
+> 💡 **学习指南**：本文将带你理解现代分布式系统中，如何通过负载均衡技术把流量"聪明地"分配到多个服务器实例上。我们会从四层/七层负载均衡讲起，逐步深入到健康检查、会话保持、自动扩缩容，最后到异地多活部署。建议你先阅读 [后端架构演进](./backend-evolution.md) 了解基本概念。
+
+在开始之前，建议你先补充两块"基础砖"：
+
+- **网络基础**：可以先阅读 [网络基础概念](./network-basics.md) 了解 TCP/IP、HTTP 等协议。
+- **容器与编排**：如果你还不熟悉 Docker 和 Kubernetes，可以先看 [容器化部署](./container-deployment.md)。
+
+---
+
+## 0. 引言：当一台服务器扛不住的时候
+
+<LoadBalancerTypesDemo />
+
+想象你开了一家网红奶茶店。刚开业时，店里只有一个收银台，顾客排队点单，一切井然有序。但随着口碑传播，排队的人越来越多，一个收银台根本应付不过来——顾客等得不耐烦，抱怨连连，甚至有人转身离开。
+
+**这时候你有两个选择：**
+
+1. **换一台更快的收银机（垂直扩展）**：但再快的机器也有极限，而且贵得离谱。
+2. **多开几个收银台，让顾客分流（水平扩展）**：每个收银台处理一部分顾客，整体效率大幅提升。
+
+**负载均衡（Load Balancing）就是第二个方案的"总指挥"。** 它站在所有收银台前面，帮顾客决定："你去1号台，你去2号台..." 确保每个收银台的 workload 相对平均，不让任何一个台累垮。
+
+<IntroProblemReasonSolution />
+
+---
+
+## 1. 负载均衡器的"分层": L4 vs L7
+
+就像快递分拣有"只看邮编"和"检查包裹内容"两种策略，负载均衡也分不同"层次"：
+
+### 1.1 四层负载均衡（L4）："只看门牌号"
+
+**工作在传输层（TCP/UDP）**，就像快递小哥只看你家的**门牌号（IP地址+端口号）**，不关心你家是做什么的。
+
+**特点：**
+- **速度超快**：只做简单的地址转发，不解析数据包内容
+- **适用场景**：数据库连接、Redis缓存、长连接游戏服务器
+- **代表产品**：LVS（Linux Virtual Server）、AWS NLB、Azure Load Balancer
+
+**真实案例：电商大促的流量入口**
+
+某头部电商在双11期间，使用L4负载均衡处理每秒数百万的TCP连接。由于L4不解析HTTP内容，处理速度极快，确保用户在秒杀开始瞬间就能建立连接，不因为负载均衡本身的处理延迟而错过抢购。
+
+### 1.2 七层负载均衡（L7）："检查包裹内容"
+
+**工作在应用层（HTTP/HTTPS）**，就像快递小哥不仅看门牌号，还会**打开包裹检查内容**，根据内容决定怎么送。
+
+**特点：**
+- **智能路由**：可以根据URL路径、HTTP头、Cookie等做精细化路由
+- **高级功能**：SSL卸载、内容缓存、压缩、安全WAF
+- **适用场景**：Web应用、API网关、微服务架构
+- **代表产品**：Nginx、HAProxy、AWS ALB、Envoy
+
+**真实案例：SaaS平台的多租户路由**
+
+某SaaS公司使用Nginx作为L7负载均衡，根据HTTP Header中的`X-Tenant-ID`将不同租户的数据请求路由到对应的数据库集群。tenant-a 的请求去 db-cluster-1，tenant-b 的请求去 db-cluster-2，实现了完全的数据隔离。
+
+### 1.3 L4 vs L7 对比一览
+
+| 维度 | 四层负载均衡 (L4) | 七层负载均衡 (L7) |
+|:---|:---|:---|
+| **工作层级** | 传输层 (TCP/UDP) | 应用层 (HTTP/HTTPS) |
+| **决策依据** | IP地址 + 端口号 | URL、Header、Cookie、Body |
+| **处理速度** | 极快（内核态处理） | 较快（用户态解析） |
+| **功能丰富度** | 基础转发 | SSL卸载、缓存、压缩、WAF |
+| **典型场景** | 数据库、游戏、长连接 | Web应用、API网关、微服务 |
+| **代表产品** | LVS、AWS NLB | Nginx、HAProxy、AWS ALB |
+
+---
+
+## 2. 健康检查：别让"坏掉"的服务器继续接客
+
+想象一下，你的某个收银台突然坏了，但顾客不知道，还在源源不断地排过去。结果队伍越来越长，顾客怨声载道。
+
+**健康检查（Health Check）就是防止这种情况发生的"哨兵"。** 它定期"体检"每台服务器，发现"生病"的立即从队列中移除，等"康复"了再请回来。
+
+<HealthCheckDemo />
+
+### 2.1 主动健康检查 vs 被动健康检查
+
+**主动健康检查（Active Health Check）**：负载均衡器主动"敲门"问服务器"你还在吗？"
+- 定期发送探测请求（如 HTTP /health、TCP ping）
+- 响应超时或返回错误码则认为不健康
+- **优点**：检测结果准确可靠
+- **缺点**：产生额外的探测流量
+
+**被动健康检查（Passive Health Check）**：负载均衡器"观察"真实业务流量的响应情况
+- 统计实际请求的响应时间、错误率
+- 连续多次失败则认为不健康
+- **优点**：不产生额外流量
+- **缺点**：需要足够的流量样本才能判定
+
+### 2.2 阈值设定：别让"小病"也触发告警
+
+健康检查的阈值就像体温计：37度是正常，38度是低烧，40度是高烧。
+
+**常见的阈值配置：**
+
+| 指标 | 健康阈值 | 不健康阈值 | 说明 |
+|:---|:---|:---|:---|
+| **HTTP 状态码** | 200-399 | 400+ 或超时 | 4xx/5xx 都认为失败 |
+| **TCP 连接** | 成功建立 | 连接超时 | 检查端口是否可达 |
+| **响应时间** | < 500ms | > 2000ms | 超时时间通常设为2-5s |
+| **连续失败次数** | - | 3次 | 避免单次抖动误判 |
+| **检查间隔** | - | 5s | 太频繁会增加负载 |
+
+**踩坑经验：阈值设置太"敏感"的教训**
+
+某团队将健康检查的响应时间阈值设为 100ms，而他们的应用平均响应时间在 80-120ms 之间波动。结果是服务器频繁被标记为"不健康"，导致流量在健康和不健康之间反复横跳，系统整体可用率反而下降。
+
+**正确的做法：** 阈值应该设置为**P99 响应时间的 2-3 倍**，给正常波动留出足够的缓冲空间。
+
+---
+
+## 3. 会话保持：让"老顾客"一直找同一个"收银员"
+
+想象你是奶茶店的常客，每次来都由同一个店员接待。她知道你的口味偏好（半糖、去冰），服务起来又快又贴心。但如果每次来都换一个新人，你得一遍遍重复同样的要求，效率大打折扣。
+
+**会话保持（Session Persistence/Sticky Session）** 就是解决这个问题的方法：确保同一个用户的请求，始终被路由到同一台后端服务器。
+
+<SessionPersistenceDemo />
+
+### 3.1 三种会话保持机制对比
+
+| 机制 | 实现原理 | 优点 | 缺点 | 适用场景 |
+|:---|:---|:---|:---|:---|
+| **Cookie 插入** | LB在响应中插入Cookie，后续请求携带此Cookie | 不受IP变化影响，首次请求即可保持 | 客户端需支持Cookie，可能被禁用 | 电商购物车、登录态保持 |
+| **IP 哈希** | 对客户端IP做哈希计算，映射到特定服务器 | 无需客户端支持，无状态 | IP变化会丢失会话，难以均匀分布 | 无Cookie环境、WebSocket |
+| **粘性会话表** | LB维护会话到服务器的映射表 | 支持会话复制和故障转移 | 占用LB内存，需要额外同步 | 高可用要求严格的场景 |
+
+### 3.2 真实案例：电商大促期间的会话保持策略
+
+某电商平台在大促期间面临以下挑战：
+
+1. **购物车数据需要保持**：用户可能跨多个页面添加商品，需要保证请求都落在同一台服务器，购物车数据才能正确累计。
+
+2. **秒杀场景下服务器动态扩容**：大促期间服务器数量从平时的10台动态扩展到50台。
+
+3. **部分服务器可能故障**：需要能够快速剔除故障节点，同时不影响用户会话。
+
+**他们的解决方案**：
+
+1. **采用 Cookie 插入机制**：负载均衡器（Nginx）在首次响应时设置 `SERVERID` Cookie，值为后端服务器的唯一标识。
+
+2. **会话表持久化**：将会话映射表存储在 Redis 集群中，即使某台 Nginx 重启，也能从 Redis 恢复会话映射关系。
+
+3. **故障转移策略**：当后端服务器健康检查失败时，将其从可用列表移除。对于已经绑定到该服务器的会话，下次请求时重新哈希分配到新的健康节点（牺牲一次会话保持，换取服务可用性）。
+
+---
+
+## 4. 部署策略：蓝绿部署与金丝雀发布
+
+当新版本上线时，如何确保零停机？当新版本有 Bug 时，如何快速回滚？这涉及到两种经典的部署策略。
+
+### 4.1 蓝绿部署："一键切换"的零停机发布
+
+**核心思想**：同时维护两套完全相同的生产环境（蓝环境和绿环境），但只有一个环境对外提供服务。
+
+<BlueGreenDeploymentDemo />
+
+**工作流程**：
+
+1. **初始状态**：蓝环境运行 v1.0（生产），绿环境待命。
+
+2. **部署新版本**：在绿环境部署 v1.1，进行内部冒烟测试。
+
+3. **切换流量**：将负载均衡器指向绿环境，流量瞬间切换到 v1.1。
+
+4. **监控观察**：观察绿环境运行状态，确认无异常。
+
+5. **保留旧版本**：蓝环境保持 v1.0 一段时间（如24小时），作为快速回滚的保险。
+
+**优缺点分析**：
+
+| 优点 | 缺点 |
+|:---|:---|
+| ✅ 零停机时间，切换在毫秒级完成 | ❌ 资源成本高，需要同时维护两套环境 |
+| ✅ 快速回滚，发现问题立即切回原环境 | ❌ 数据库Schema变更时需要特别处理兼容性 |
+| ✅ 新环境可完整测试后再接管流量 | ❌ 不适用于有状态服务（如WebSocket长连接） |
+
+**适用场景**：
+- 对可用性要求极高的金融、电商核心交易系统
+- 需要频繁发布但无法接受停机的 SaaS 服务
+- 有充足的硬件/云资源预算
+
+### 4.2 金丝雀发布："小步快跑"的灰度策略
+
+金丝雀发布得名于历史上的"煤矿金丝雀"——矿工带着金丝雀下井，如果金丝雀出现异常，说明有毒气体泄漏，矿工立即撤离。在软件发布中，金丝雀发布就是先让一小部分用户试用新版本，观察没有问题后再逐步扩大范围。
+
+<CanaryReleaseDemo />
+
+**核心思想**：
+
+1. **小流量先行**：先将 1% 的流量导入新版本服务器。
+
+2. **观察指标**：持续监控错误率、延迟、业务关键指标。
+
+3. **逐步放量**：如果一切正常，逐步将比例提升到 5%、10%、25%、50%、100%。
+
+4. **快速回滚**：一旦发现异常，立即将所有流量切回旧版本。
+
+**金丝雀发布的优势：**
+
+| 优势 | 说明 |
+|:---|:---|
+| 🎯 **风险可控** | 即使新版本有严重 Bug，也只影响少量用户 |
+| 📊 **真实验证** | 在真实生产环境验证，比测试环境更可靠 |
+| 🚀 **快速迭代** | 团队可以更自信地频繁发布新功能 |
+| 💰 **资源友好** | 不需要像蓝绿部署那样准备两套完整环境 |
+
+**金丝雀发布的典型流量分配策略：**
+
+```
+阶段 1 (5分钟):   1%  新版本  → 99% 旧版本
+阶段 2 (15分钟):  5%  新版本  → 95% 旧版本
+阶段 3 (30分钟):  10% 新版本  → 90% 旧版本
+阶段 4 (1小时):   25% 新版本  → 75% 旧版本
+阶段 5 (2小时):   50% 新版本  → 50% 旧版本
+阶段 6 (全量):    100%新版本
+```
+
+**注意**：每个阶段都需要持续监控关键指标，只有确认无异常后才进入下一阶段。
+
+---
+
+## 5. 自动扩缩容：让系统自己"呼吸"
+
+想象你开了一家餐厅。午餐高峰期需要10个服务员，但下午3点闲时只需要2个。如果一直维持10个人，人工成本爆炸；如果一直只有2个人，高峰期顾客等得不耐烦全跑了。
+
+**自动扩缩容（Auto Scaling）就是让系统像餐厅一样"灵活排班"**——忙的时候自动加服务器，闲的时候自动减服务器。
+
+<AutoScalingDemo />
+
+### 5.1 扩容指标的选择
+
+自动扩缩容的核心是回答一个问题：**什么时候该加机器？什么时候该减机器？**
+
+常见的决策指标：
+
+| 指标 | 扩容阈值 | 缩容阈值 | 适用场景 |
+|:---|:---|:---|:---|
+| **CPU 使用率** | > 70% | < 30% | 计算密集型应用 |
+| **内存使用率** | > 75% | < 40% | 内存密集型应用 |
+| **QPS (每秒请求数)** | > 1000/s | < 400/s | API 网关、Web 服务 |
+| **连接数** | > 5000 | < 1000 | 数据库、消息队列 |
+| **自定义业务指标** | 视业务而定 | 视业务而定 | 特定业务场景 |
+
+### 5.2 扩容策略的"坑"与"解"
+
+**踩坑1：扩容反应太慢，流量洪峰已经把系统打挂了**
+
+某电商大促期间，设置 CPU > 80% 触发扩容，但监控采集有1分钟延迟，新实例启动需要3分钟。结果流量来得太快，扩容还没完成，服务器已经被打挂。
+
+**解决方案**：
+- **提前扩容**：基于历史数据预测流量高峰，提前30分钟开始扩容
+- **多级阈值**：设置 60% 预警（开始预热新实例）、70% 正式扩容、80% 紧急扩容
+- **快速扩容**：使用容器化部署，新实例30秒内启动（相比虚拟机3-5分钟）
+
+**踩坑2：扩容太激进，成本爆炸**
+
+某创业公司设置了激进的自动扩容策略：CPU > 50% 就扩容。结果一个正常的业务波动就触发了扩容，服务器数量从5台膨胀到30台，月底云账单吓哭了 CTO。
+
+**解决方案**：
+- **设置扩容冷却时间**：一次扩容后，至少等待5分钟才能再次扩容
+- **设置最大实例数**：max = 当前实例数 × 2，防止无限膨胀
+- **区分突刺和趋势**：只有连续3个周期都超过阈值才扩容，避免单点突刺触发
+
+**踩坑3：缩容太快，刚扩容的机器马上就缩了**
+
+某团队设置了 CPU < 30% 缩容。扩容后流量还在消化，CPU 短暂回落到 25%，触发了缩容。刚缩完 CPU 又飙到 80%，又触发扩容——系统在"扩容-缩容-扩容"中疯狂震荡。
+
+**解决方案**：
+- **缩容更保守**：扩容阈值 70%，缩容阈值 25%，中间有足够的缓冲带
+- **缩容冷却时间更长**：扩容后至少等待10分钟才能缩容
+- **渐进式缩容**：一次只缩 1 台，观察后再决定要不要继续缩
+
+---
+
+## 6. 多区域部署：当"灾难"来临时
+
+想象你的奶茶店生意火爆，但你只有一个店面。某天突如其来的暴雨把店淹了，你得停业整修两周。这两周里，所有顾客都跑去竞争对手那里了，等你重新开业，客源已经流失大半。
+
+**单点故障是系统架构中的"阿喀琉斯之踵"**。多区域部署（Multi-Region Deployment）就是解决这个问题的方法：在不同地理位置部署多个数据中心，即使一个区域完全不可用，其他区域也能继续提供服务。
+
+<MultiRegionDemo />
+
+### 6.1 异地多活架构的核心概念
+
+**主备模式（Active-Standby）**：
+- 只有一个区域对外提供服务（主），其他区域待命（备）
+- 备区实时同步数据，但不处理流量
+- 主区故障时，手动或自动切换到备区
+- **优点**：架构简单，数据一致性好
+- **缺点**：备区资源利用率低，切换时有中断
+
+**多活模式（Active-Active）**：
+- 多个区域同时对外提供服务
+- 用户请求被路由到最近的区域
+- 区域之间实时同步数据
+- **优点**：资源利用率高，故障影响小
+- **缺点**：架构复杂，数据一致性挑战大
+
+### 6.2 数据同步：多活架构的"阿喀琉斯之踵"
+
+多活架构最大的挑战是**数据一致性**。当两个区域同时处理写入请求时，如何保证数据不会冲突？
+
+**场景示例**：
+- 北京区域：用户A给账户充值 100 元，余额从 200 变为 300
+- 上海区域：几乎同时，用户A消费 50 元，余额从 200 变为 150
+
+如果两个区域分别执行后同步，最终余额应该是多少？300？150？还是其他值？
+
+**解决方案对比：**
+
+| 方案 | 原理 | 优点 | 缺点 | 适用场景 |
+|:---|:---|:---|:---|:---|
+| **主从复制** | 只有一个主库可写，从库只读 | 实现简单，数据一致性好 | 主库单点，跨地域延迟大 | 读多写少，对一致性要求高 |
+| **多主复制** | 多个主库可同时写，异步同步 | 写入性能高，就近写入 | 冲突解决复杂，可能丢数据 | 写入频繁，可接受短暂不一致 |
+| **分布式事务** | 使用 2PC/3PC/TCC 等协议保证跨库事务 | 强一致性 | 性能开销大，复杂度高 | 金融交易等对一致性要求极高 |
+| **CRDT（无冲突复制数据类型）** | 数学上保证无冲突的数据结构 | 自动合并，无需锁 | 数据类型受限，实现复杂 | 计数器、集合等特定场景 |
+
+**真实案例：全球电商平台的订单系统**
+
+某跨境电商在全球5个区域部署了数据中心。订单系统的架构设计如下：
+
+- **订单创建**：使用"分区路由"策略，根据用户ID哈希确定主处理区域，该区域负责订单创建和初始状态变更，避免跨区域的写入冲突。
+
+- **库存扣减**：使用分布式锁 + 乐观锁。库存数据以用户所在区域的副本为主，当跨区域访问时，先获取分布式锁，检查版本号，避免超卖。
+
+- **最终一致性**：非关键数据（如推荐、统计）采用异步同步，允许秒级的延迟；关键数据（如支付状态）采用强同步，确保跨区一致性。
+
+这套架构在实践中实现了 99.99% 的可用性，同时控制了跨区域同步的平均延迟在 100ms 以内。
+
+---
+
+## 7. 实战模板：从零搭建负载均衡架构
+
+看完了理论，我们来动手实践。以下是一套可直接落地的架构方案。
+
+### 7.1 中小型 Web 应用的推荐架构
+
+**场景**：日活 10万 的电商平台，预算有限，团队规模 10人左右。
+
+**架构方案：**
+
+```
+用户请求
+    ↓
+[DNS 轮询] 多地域就近访问
+    ↓
+[CDN] 静态资源缓存（图片、JS、CSS）
+    ↓
+[L7 负载均衡 - Nginx] SSL卸载、URL路由、限流
+    ↓
+[Web 服务器 - Node.js/Java] 业务逻辑处理
+    ↓
+[缓存层 - Redis Cluster] 会话、热点数据
+    ↓
+[数据库 - MySQL 主从] 读写分离
+```
+
+**关键配置：**
+
+**Nginx 负载均衡配置示例：**
+
+```nginx
+upstream backend {
+    # 加权轮询，性能好的服务器权重更高
+    server 10.0.1.10 weight=5;
+    server 10.0.1.11 weight=3;
+    server 10.0.1.12 weight=2 backup;  # backup 标记为备用
+
+    keepalive 32;  # 长连接复用
+}
+
+server {
+    listen 80;
+    server_name api.example.com;
+
+    # 健康检查
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+        add_header Content-Type text/plain;
+    }
+
+    # 限流配置
+    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
+
+    location /api/ {
+        limit_req zone=api burst=20 nodelay;
+
+        proxy_pass http://backend;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+        # 会话保持配置（基于IP哈希）
+        # 注意：在 upstream 中配置 ip_hash; 代替加权轮询
+    }
+
+    # 静态资源缓存
+    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+### 7.2 系统架构演进建议
+
+**阶段一：起步期（日活 < 1万）**
+- 单台服务器部署
+- Nginx 做反向代理 + 负载均衡
+- 重点关注：监控告警、日志收集
+
+**阶段二：成长期（日活 1万-10万）**
+- 横向扩展：2-3 台 Web 服务器
+- 引入 Redis 做缓存和会话存储
+- MySQL 主从复制，读写分离
+- 引入 CDN 加速静态资源
+
+**阶段三：成熟期（日活 10万-100万）**
+- 多地域部署，就近访问
+- 引入消息队列削峰填谷
+- 数据库分库分表
+- 自动化运维：CI/CD、自动扩缩容
+
+---
+
+## 8. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+|:---|:---|:---|
+| **Load Balancer** | 负载均衡器 | 将流量分发到多个后端服务器的设备或软件 |
+| **L4 Load Balancing** | 四层负载均衡 | 基于传输层（TCP/UDP）的负载均衡 |
+| **L7 Load Balancing** | 七层负载均衡 | 基于应用层（HTTP/HTTPS）的负载均衡 |
+| **Health Check** | 健康检查 | 定期检查后端服务器健康状态的机制 |
+| **Session Persistence** | 会话保持 | 确保同一用户的请求始终路由到同一台服务器 |
+| **Sticky Session** | 粘性会话 | 另一种称呼，同 Session Persistence |
+| **Blue-Green Deployment** | 蓝绿部署 | 两套环境切换的零停机发布策略 |
+| **Canary Release** | 金丝雀发布 | 小流量先行验证的灰度发布策略 |
+| **Auto Scaling** | 自动扩缩容 | 根据负载自动增加或减少服务器数量 |
+| **Horizontal Scaling** | 水平扩展 | 增加服务器数量来提升处理能力 |
+| **Vertical Scaling** | 垂直扩展 | 提升单机配置（CPU、内存）来提升处理能力 |
+| **Multi-Region** | 多区域 | 在多个地理区域部署服务 |
+| **Active-Active** | 多活 | 多个区域同时对外提供服务 |
+| **Active-Standby** | 主备 | 只有一个区域提供服务，其他待命 |
+| **Data Replication** | 数据同步 | 跨区域的数据复制机制 |
+| **RTO** | 恢复时间目标 | 系统故障后需要在多长时间内恢复 |
+| **RPO** | 恢复点目标 | 系统故障后可以接受的数据丢失量 |
+
+---
+
+## 总结：负载均衡的核心思维
+
+通过本文的学习，我们可以提炼出负载均衡设计的几个核心思维：
+
+**1. 分层思维**
+- L4 处理"快递分拣"（快但简单）
+- L7 处理"内容检查"（慢但智能）
+- 根据场景选择合适的层次
+
+**2. 冗余思维**
+- 单点故障是架构的敌人
+- 通过多实例、多区域部署提升可用性
+- 健康检查确保"坏节点"及时剔除
+
+**3. 渐进思维**
+- 发布新版本不要"一刀切"
+- 蓝绿部署实现零停机
+- 金丝雀发布实现风险可控
+
+**4. 弹性思维**
+- 系统应该像生命体一样"呼吸"
+- 忙时自动扩容，闲时自动缩容
+- 多区域部署实现就近服务和容灾
+
+负载均衡不是简单的"流量分发"，而是一套关于**高可用、高性能、高弹性**的系统工程思维。希望本文能帮助你在实际工作中做出更好的架构决策。
diff --git a/docs/zh-cn/appendix/queue-design.md b/docs/zh-cn/appendix/queue-design.md
index 837debb..2b9896c 100644
--- a/docs/zh-cn/appendix/queue-design.md
+++ b/docs/zh-cn/appendix/queue-design.md
@@ -1,964 +1,818 @@
-# 消息队列设计：从原理到实战 (Interactive Guide to Message Queues)
+# 消息队列设计：从系统解耦到高可用架构
 
-> 💡 **学习指南**：本章节带你深入理解后端系统的"缓冲器"——消息队列。我们将从最基础的"为什么要用队列"讲起，一步步掌握消息队列的核心模式、可靠性保证、以及实战中的架构设计。
+> 💡 **学习指南**：消息队列是现代分布式系统的"缓冲器"和"解耦器"。本章节从一个核心问题出发：**当系统耦合严重、流量突增时，如何保证核心链路稳定？** 我们将通过真实案例（淘宝订单、秒杀系统）深入理解消息队列的设计哲学和工程实践。
 
-<MessageQueueDemo />
+在开始之前，建议你先了解以下基础概念：
 
-## 0. 引言：系统的"缓冲器"
+- **同步 vs 异步**：可以先阅读 [Web 基础概念](./web-basics.md) 的「HTTP 请求/响应」部分。
+- **分布式系统基础**：如果你还不了解 CAP 定理、一致性等概念，可以先看 [分布式系统入门](./distributed-systems.md)。
 
-### 0.1 从生活中的例子说起
+---
 
-想象一下这个场景：
+## 0. 引言：为什么系统耦合严重时会"一崩全崩"？
 
-**🏪 餐厅点餐的智慧**
+很多团队在业务快速增长时都会遇到类似的困境：
 
-你走进一家繁忙的餐厅，前台服务员（A）迅速给你点单、收钱，然后告诉你"请稍等，餐好了会叫号"。你不需要站在厨房门口等着厨师（B）直接把菜端给你，而是可以安心坐下刷手机。
+- 一个下游服务挂掉，导致整个订单流程卡住；
+- 大促期间流量突增，数据库被瞬间打崩；
+- 新增一个业务模块，需要修改十几个上游服务；
+- 系统响应越来越慢，用户投诉"转圈圈"。
 
-**为什么这么做？**
+直觉上，我们会以为是：**"服务器不够强"**。
+但大多数时候，问题并不在于硬件性能，而在于系统架构的设计——**服务之间耦合太紧，缺乏有效的缓冲和解耦机制**。
 
-- 如果每个顾客都站在厨房门口等（同步调用），厨房会乱成一团
-- 用"叫号系统"（消息队列），服务员快速完成点餐，厨房按自己的节奏做菜
-- 即使厨师临时休息了，点餐也不会受影响，订单会排队等他回来
+面对这些挑战，单纯依靠"加机器"已经捉襟见肘。我们需要一种更优雅的架构设计，来在服务之间建立"缓冲带"，让系统能够从容应对流量波动和服务故障。这正是**消息队列**试图解决的问题。
 
-**🛒 淘宝支付的秘密**
+---
 
-你在淘宝买完东西，点击"支付"后，系统显示"支付成功"，但你可能要等几秒甚至几分钟才收到短信通知。
+## 1. 什么是消息队列？（定义 + 核心三要素）
 
-**为什么不是立即收到？**
-因为支付系统要做的事情太多了：
+### 1.1 从一个真实案例说起：淘宝订单系统的演进
 
-- ✅ 扣款（必须立即完成）
-- ⏳ 发送短信通知（可以稍后）
-- ⏳ 更新积分（可以稍后）
-- ⏳ 给推荐系统发送数据（可以稍后）
+2012 年，淘宝订单系统遭遇了一次严重故障。双 11 零点，流量瞬间涌入，订单服务直接调用库存服务、支付服务、物流服务... 整个链路像多米诺骨牌一样接连倒下。
 
-如果把所有事情都卡在"支付"这个按钮上，你可能要等 5 秒才能看到"支付成功"。聪明的系统会：
-
-1. 先完成扣款
-2. 把其他任务扔进一个"待办事项池"（消息队列）
-3. 立即告诉你"支付成功"
-4. 后台慢慢处理那些待办事项
-
-**这就是消息队列的核心价值：把"必须现在做"和"可以稍后做"的事情分开。**
-
-### 0.2 什么是消息队列？
-
-**消息队列**就像一个智能的"中转站"或"缓冲区"：
+**当时的架构（紧耦合）：**
 
 ```
-如果同步调用是"打电话"（要求对方立即响应）
-那消息队列就是"发微信"（可以等对方稍后处理）
+用户下单 → 订单服务 → 同步调用库存服务 → 同步调用支付服务 → 同步调用物流服务
+                    ↓                    ↓                    ↓
+                 响应 200ms            响应 500ms           响应 300ms
 ```
 
-**用一个比喻理解**：
+**问题：**
+- 总响应时间 = 200 + 500 + 300 = 1000ms（用户等 1 秒）
+- 库存服务挂了，订单服务也挂
+- 支付服务慢了，整个链路被拖慢
+- 无法水平扩展，只能垂直加机器
 
-> **没有消息队列**：你直接把文件交给同事，他正在开会，你只能干等。
->
-> **有消息队列**：你把文件放到他的办公桌（队列），继续做自己的事。他开完会自己来拿。
+**改进后的架构（引入消息队列）：**
 
-### 0.3 为什么要用消息队列？
+```
+用户下单 → 订单服务 → 发送"订单创建"消息 → 立即返回（50ms）
+                              ↓
+                        消息队列（Kafka）
+                              ↓
+        ┌─────────────┬─────────────┬─────────────┐
+        ▼             ▼             ▼             ▼
+   库存服务      支付服务      物流服务      通知服务
+   （异步扣减）  （异步处理）  （异步创建）  （异步发送）
+```
 
-核心原因就两个：**解耦**和**削峰**。
+**改进后：**
+- 用户响应时间 = 50ms（体验提升 20 倍）
+- 库存服务挂了，消息暂存队列，恢复后继续处理
+- 支付服务慢了，不影响订单创建
+- 可以水平扩展消费者，提升处理能力
 
-#### 📌 解耦：让系统更灵活
+<MQArchitectureDemo />
 
-**问题**：A 直接调用 B，一旦 B 出问题，A 也跟着完蛋。
+### 1.2 消息队列的核心三要素
+
+从上面的案例可以看出，消息队列的本质是**在生产者和消费者之间建立一个"邮局"**。
+
+#### 要素一：生产者（Producer）
+
+**职责**：创建并发送消息到队列。
+
+**关键设计要点**：
+- **发送方式**：同步发送（可靠但阻塞）vs 异步发送（高性能但需处理回调）
+- **消息确认**：等待 Broker 确认（At Least Once）vs 发送即忘（At Most Once）
+- **失败处理**：重试策略、本地日志备份、死信队列
 
 ```python
-# 紧耦合的例子（不好）
-def create_order(user_id, product_id):
-    order = db.save_order(user_id, product_id)
+# 生产者代码示例（带可靠发送）
+class OrderProducer:
+    def __init__(self, mq_connection):
+        self.mq = mq_connection
+        self.pending_messages = []  # 本地待确认消息
 
-    # 如果通知服务挂了，整个订单创建就失败
-    notification.send_sms(user_id, "订单创建成功")
-    notification.send_email(user_id, "订单创建成功")
+    def send_order_created(self, order_data):
+        """发送订单创建消息（带可靠投递）"""
+        message = {
+            "event_type": "order.created",
+            "order_id": order_data["id"],
+            "user_id": order_data["user_id"],
+            "product_id": order_data["product_id"],
+            "amount": order_data["amount"],
+            "timestamp": time.time()
+        }
 
-    return order
+        # 1. 先写入本地日志（防止发送失败丢失）
+        msg_record = {
+            "id": generate_uuid(),
+            "status": "PENDING",
+            "message": message,
+            "retry_count": 0,
+            "created_at": time.time()
+        }
+        self.save_to_local_log(msg_record)
+
+        try:
+            # 2. 发送消息到 MQ（异步发送 + 回调确认）
+            self.mq.send_async(
+                exchange="order.events",
+                routing_key="order.created",
+                body=message,
+                on_success=lambda: self.on_send_success(msg_record["id"]),
+                on_failure=lambda e: self.on_send_failure(msg_record["id"], e)
+            )
+
+            return {"success": True, "message_id": msg_record["id"]}
+
+        except Exception as e:
+            # 发送异常，等待定时任务重试
+            logger.error(f"消息发送异常：{e}")
+            return {"success": False, "error": str(e)}
+
+    def on_send_success(self, msg_id):
+        """发送成功回调"""
+        self.update_local_log_status(msg_id, "SENT")
+        logger.info(f"消息 {msg_id} 发送成功")
+
+    def on_send_failure(self, msg_id, error):
+        """发送失败回调"""
+        logger.error(f"消息 {msg_id} 发送失败：{error}")
+        # 状态保持 PENDING，等待定时任务重试
 ```
 
-**解决**：用消息队列做"中介"，A 只管发消息，不关心 B 是否在线。
+<ProducerConsumerDemo />
+
+#### 要素二：消费者（Consumer）
+
+**职责**：从队列获取消息并处理。
+
+**关键设计要点**：
+- **消费模式**：推模式（Push，Broker 主动推送）vs 拉模式（Pull，消费者主动拉取）
+- **消费确认**：自动 ACK（高效但可能丢消息）vs 手动 ACK（可靠但需处理超时）
+- **并发控制**：单线程顺序消费 vs 多线程并行消费
+- **失败处理**：重试策略、死信队列、补偿机制
 
 ```python
-# 松耦合的例子（好）
-def create_order(user_id, product_id):
-    order = db.save_order(user_id, product_id)
+# 消费者代码示例（带可靠处理）
+class OrderConsumer:
+    def __init__(self, mq_connection, db_connection, redis_client):
+        self.mq = mq_connection
+        self.db = db_connection
+        self.redis = redis_client
+        self.processing_messages = {}  # 正在处理的消息（防重复）
 
-    # 扔到队列里就完事了，不管通知服务是否在线
-    queue.publish("order.created", {
-        "user_id": user_id,
-        "order_id": order.id
-    })
+    def start(self):
+        """启动消费者"""
+        self.mq.consume(
+            queue="order.created.queue",
+            callback=self.handle_message,
+            prefetch_count=10,  # 预取 10 条，平衡吞吐量和内存
+            auto_ack=False     # 手动 ACK，保证可靠性
+        )
 
-    return order
+    def handle_message(self, message):
+        """处理消息（带幂等性和异常处理）"""
+        msg_id = message.headers.get("message_id")
+
+        try:
+            # 1. 幂等性检查：是否正在处理或已处理
+            if self.is_duplicate(msg_id):
+                logger.warning(f"消息 {msg_id} 重复，跳过处理")
+                message.ack()  # 确认消息，避免重复投递
+                return
+
+            # 标记为正在处理
+            self.mark_processing(msg_id)
+
+            # 2. 解析消息
+            event_data = json.loads(message.body)
+            order_id = event_data["order_id"]
+            user_id = event_data["user_id"]
+            product_id = event_data["product_id"]
+
+            logger.info(f"开始处理订单 {order_id}")
+
+            # 3. 数据库事务处理
+            with self.db.transaction() as tx:
+                # 3.1 扣减库存（使用乐观锁防并发）
+                stock_result = tx.execute("""
+                    UPDATE products
+                    SET stock = stock - 1
+                    WHERE id = ? AND stock > 0
+                """, product_id)
+
+                if stock_result.affected_rows == 0:
+                    raise InsufficientStockException(f"商品 {product_id} 库存不足")
+
+                # 3.2 创建订单
+                tx.execute("""
+                    INSERT INTO orders (id, user_id, product_id, status, created_at)
+                    VALUES (?, ?, ?, 'CONFIRMED', NOW())
+                """, order_id, user_id, product_id)
+
+                # 3.3 记录库存变动日志
+                tx.execute("""
+                    INSERT INTO inventory_logs (order_id, product_id, change, created_at)
+                    VALUES (?, ?, -1, NOW())
+                """, order_id, product_id)
+
+            # 4. 更新 Redis 缓存
+            self.redis.hset(f"order:{order_id}", "status", "CONFIRMED")
+
+            # 5. 发送后续事件（如通知服务）
+            self.mq.publish(
+                exchange="order.events",
+                routing_key="order.confirmed",
+                body={"order_id": order_id, "user_id": user_id}
+            )
+
+            # 6. 标记为已处理并确认消息
+            self.mark_processed(msg_id)
+            message.ack()
+
+            logger.info(f"订单 {order_id} 处理成功")
+
+        except InsufficientStockException as e:
+            # 库存不足，业务逻辑失败，不重试
+            logger.warning(f"订单处理失败（库存不足）：{e}")
+            self.mark_processed(msg_id)
+            message.ack()  # 确认消息，避免重复
+
+        except RetryableException as e:
+            # 可重试异常（如网络超时）
+            logger.error(f"订单处理失败（可重试）：{e}")
+            retry_count = message.headers.get("retry_count", 0)
+
+            if retry_count < 3:
+                # 重新入队，增加重试计数
+                message.headers["retry_count"] = retry_count + 1
+                message.nack(requeue=True)
+            else:
+                # 超过重试次数，进入死信队列
+                logger.error(f"消息 {msg_id} 超过最大重试次数，进入死信队列")
+                self.mark_processed(msg_id)
+                message.nack(requeue=False)
+
+        except Exception as e:
+            # 未知异常，记录日志并进入死信队列
+            logger.critical(f"订单处理发生未知异常：{e}", exc_info=True)
+            self.mark_processed(msg_id)
+            message.nack(requeue=False)
+
+    def is_duplicate(self, msg_id):
+        """检查消息是否重复"""
+        # 1. 检查是否正在处理
+        if msg_id in self.processing_messages:
+            return True
+
+        # 2. 检查 Redis 中是否已处理
+        return self.redis.sismember("processed_messages", msg_id)
+
+    def mark_processing(self, msg_id):
+        """标记消息正在处理"""
+        self.processing_messages[msg_id] = time.time()
+
+    def mark_processed(self, msg_id):
+        """标记消息已处理"""
+        self.processing_messages.pop(msg_id, None)
+        # 存入 Redis Set，设置过期时间（如 24 小时）
+        self.redis.sadd("processed_messages", msg_id)
+        self.redis.expire("processed_messages", 24 * 3600)
 ```
 
-**好处**：
+#### 要素三：Broker（消息代理）
 
-- ✅ 订单系统不依赖通知系统
-- ✅ 可以随时增加新的消费者（比如加一个"积分系统"）
-- ✅ 通知系统升级不影响订单系统
+**职责**：接收、存储、转发消息。
 
-#### 📌 削峰：把洪峰变成平缓的水流
+**关键设计要点**：
+- **存储模型**：内存存储（低延迟）vs 磁盘存储（高可靠）
+- **复制策略**：主从复制、多副本同步
+- **高可用机制**：集群部署、自动故障转移
+- **扩展性**：分区（Partition）、分片（Sharding）
 
-**问题**：瞬间流量太高，系统扛不住。
+```python
+# Broker 配置示例（Kafka 集群配置）
+kafka_config = {
+    # 集群节点配置
+    "bootstrap.servers": "kafka-1:9092,kafka-2:9092,kafka-3:9092",
 
-**场景**：双11秒杀
+    # 生产者配置（可靠性优先）
+    "producer": {
+        "acks": "all",                    # 等待所有 ISR 副本确认
+        "retries": 3,                     # 发送失败重试 3 次
+        "retry.backoff.ms": 1000,         # 重试间隔 1 秒
+        "enable.idempotence": True,       # 启用幂等性，防止重复发送
+        "max.in.flight.requests.per.connection": 5,  # 允许 5 个未确认请求
+        "compression.type": "lz4",        # 消息压缩，提升吞吐
+        "batch.size": 16384,              # 批量发送大小 16KB
+        "linger.ms": 10                   # 最多等待 10ms 批量发送
+    },
 
-- 1 秒内有 10 万个请求涌进来
-- 数据库每秒只能处理 1000 个
-- 如果直接打到数据库，数据库会直接"爆掉"
+    # 消费者配置（平衡性能与可靠性）
+    "consumer": {
+        "group.id": "order-service-group",  # 消费者组 ID
+        "auto.offset.reset": "earliest",    # 无偏移量时从最早开始
+        "enable.auto.commit": False,        # 关闭自动提交，手动 ACK
+        "max.poll.records": 500,            # 单次拉取最大 500 条
+        "max.poll.interval.ms": 300000,     # 消费超时 5 分钟
+        "session.timeout.ms": 10000,        # 会话超时 10 秒
+        "heartbeat.interval.ms": 3000       # 心跳间隔 3 秒
+    },
 
-**解决**：用消息队列当"蓄水池"
+    # Topic 配置（分区与副本）
+    "topic": {
+        "order.events": {
+            "partitions": 12,           # 12 个分区，提升并行度
+            "replication.factor": 3,    # 3 个副本，保证高可用
+            "min.insync.replicas": 2,   # 至少 2 个副本同步才算写入成功
+            "retention.ms": 604800000  # 消息保留 7 天
+        }
+    }
+}
+```
+
+---
+
+## 2. 核心问题一：如何解耦系统，避免"牵一发而动全身"？
+
+### 2.1 紧耦合的悲剧：一个服务挂了，全盘皆输
+
+**场景还原**：某电商平台的早期架构
 
 ```
-洪水来了（10 万请求/秒）
-    ↓
-[大坝] 消息队列暂存
-    ↓
-平缓流出（1000 请求/秒）
-    ↓
-[农田] 数据库慢慢处理
+订单服务直接调用下游服务：
+┌─────────────┐
+│  订单服务   │
+└──────┬──────┘
+       │
+       ├───────────┬───────────┬───────────┐
+       ▼           ▼           ▼           ▼
+┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
+│库存服务  │ │支付服务  │ │物流服务  │ │短信服务  │
+│  200ms   │ │  500ms   │ │  300ms   │ │  100ms   │
+└──────────┘ └──────────┘ └──────────┘ └──────────┘
+```
+
+**痛点分析：**
+
+| 痛点 | 具体表现 | 后果 |
+|------|----------|------|
+| **级联故障** | 库存服务挂掉，订单服务同步调用超时 | 订单服务线程池耗尽，无法处理新请求 |
+| **响应延迟** | 必须等待所有下游服务响应 | 用户等待 1 秒以上，体验极差 |
+| **扩展困难** | 新增积分服务，需要修改订单服务代码 | 发布周期变长，风险增加 |
+| **资源浪费** | 订单服务必须等待短信服务 | 数据库连接被长时间占用 |
+
+### 2.2 解耦方案：引入消息队列作为"中间层"
+
+**解耦后的架构：**
+
+```
+订单服务只负责发消息，不关心谁消费：
+
+┌─────────────┐
+│  订单服务   │ ──发送"订单创建"消息──┐
+└─────────────┘                       │
+                                      ▼
+                            ┌───────────────────┐
+                            │   消息队列         │
+                            │  (Kafka/RabbitMQ) │
+                            │   - 可靠存储       │
+                            │   - 多副本         │
+                            │   - 顺序保证       │
+                            └─────────┬─────────┘
+                                      │
+              ┌───────────────────────┼───────────────────────┐
+              │                       │                       │
+              ▼                       ▼                       ▼
+       ┌──────────────┐      ┌──────────────┐      ┌──────────────┐
+       │  库存服务     │      │  支付服务     │      │  物流服务     │
+       │  订阅订单事件 │      │  订阅订单事件 │      │  订阅订单事件 │
+       └──────────────┘      └──────────────┘      └──────────────┘
+```
+
+**解耦带来的好处：**
+
+| 维度 | 解耦前 | 解耦后 |
+|------|--------|--------|
+| **故障隔离** | 库存挂 = 订单挂 | 库存挂，消息暂存队列，恢复后消费 |
+| **响应时间** | 1000ms（同步等待） | 50ms（发完消息即返回） |
+| **扩展性** | 新增服务需改订单代码 | 新增服务只需订阅主题 |
+| **系统复杂度** | 订单服务强依赖下游 | 订单服务只依赖消息队列 |
+
+<DecouplingDemo />
+
+### 2.3 解耦的本质：从"直接调用"到"事件驱动"
+
+**思维模式的转变：**
+
+```
+传统思维（命令式）：
+"订单服务命令库存服务：给我扣库存！"
+  ↓ 直接调用
+  ↓ 耦合度高，被调用方必须在线
+  ↓ 调用方需要知道被调用方的接口
+
+事件驱动思维（声明式）：
+"订单服务声明：订单已创建，谁关心谁来处理。"
+  ↓ 发送事件到消息队列
+  ↓ 解耦，消费者可以离线
+  ↓ 生产者不需要知道消费者的存在
+```
+
+---
+
+## 3. 核心问题二：如何削峰填谷，应对流量突增？
+
+### 3.1 秒杀场景：10 万 QPS 如何平稳处理？
+
+**场景还原**：某电商平台双 11 秒杀活动，预计峰值 10 万 QPS，但数据库只能承受 1000 QPS。
+
+**直接冲击的后果：**
+
+```
+用户请求 ──→ 应用服务器 ──→ 数据库
+  10万/s       10万/s          1000/s（极限）
+                              ↓
+                         连接池耗尽
+                         响应超时
+                         数据库崩溃
+                              ↓
+                         雪崩效应（所有依赖数据库的服务都挂）
+```
+
+### 3.2 削峰填谷方案：消息队列作为"蓄水池"
+
+**架构设计：**
+
+```
+┌───────────────────────────────────────────────────────────────┐
+│                        秒杀系统架构                           │
+├───────────────────────────────────────────────────────────────┤
+│                                                               │
+│  第一层：网关层（硬限流）                                        │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │  - 令牌桶限流：10万/s → 1万/s（丢弃 90% 请求）          │  │
+│  │  - CDN 缓存静态资源（商品详情页）                       │  │
+│  │  - 验证码/排队页面（削峰第一层）                        │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                            │                                 │
+│                            ▼                                 │
+│  第二层：服务层（软限流）                                        │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │  - Nginx 限流：1万/s → 5000/s                         │  │
+│  │  - Redis 预扣库存（原子操作）：                       │  │
+│  │    * 使用 Lua 脚本保证原子性                          │  │
+│  │    * 库存不足直接返回"已售罄"                         │  │
+│  │  - 生成订单令牌（排队凭证）                             │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                            │                                 │
+│                            ▼                                 │
+│  第三层：消息队列层（核心削峰）                                   │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │  Kafka/RocketMQ：                                     │  │
+│  │  - 批量写入：5000/s → 1000/s（数据库承受能力）         │  │
+│  │  - 消息持久化：落盘保证不丢消息                         │  │
+│  │  - 多分区并行消费：提升吞吐量                           │  │
+│  │  - 消费位点管理：支持故障恢复                           │  │
+│  │                                                       │  │
+│  │  关键指标监控：                                         │  │
+│  │  - 生产速率（Produce Rate）                             │  │
+│  │  - 消费速率（Consume Rate）                             │  │
+│  │  - 消息堆积（Lag）                                      │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                            │                                 │
+│                            ▼                                 │
+│  第四层：消费层（异步处理）                                        │
+│  ┌───────────────────────────────────────────────────────┐  │
+│  │  订单处理消费者（多实例）：                              │  │
+│  │  - 从 Kafka 拉取消息（1000/s，匹配数据库能力）           │  │
+│  │  - 数据库事务：创建订单 + 扣减库存                        │  │
+│  │  - 更新订单状态为"已创建"                               │  │
+│  │  - 发送订单创建成功通知（邮件/短信/推送）                  │  │
+│  │  - 确认消息消费（ACK）                                   │  │
+│  │                                                         │  │
+│  │  消费者扩容策略：                                        │  │
+│  │  - 当 Lag > 10000 时，自动增加消费者实例                  │  │
+│  │  - 当 Lag < 1000 时，减少消费者实例（节省成本）           │  │
+│  └───────────────────────────────────────────────────────┘  │
+│                                                               │
+└───────────────────────────────────────────────────────────────┘
 ```
 
 <PeakShavingDemo />
 
-### 0.4 消息队列的本质
+### 3.3 削峰填谷的数学原理
 
-**一句话总结**：消息队列的本质是**异步通信**，通过把"立即执行"变成"稍后处理"，提升系统的吞吐量和可用性。
+**流量平滑效果：**
 
-**关键特点**：
+```
+原始流量（尖峰）：                平滑后流量：
 
-- ✅ **异步**：不需要等任务完成，立即返回
-- ✅ **解耦**：服务之间不直接依赖
-- ✅ **缓冲**：暂存消息，平滑流量
-- ✅ **可靠**：消息持久化，不怕丢失
+10万/s │    ╱╲                  1000/s │████████████████
+       │   ╱  ╲                        │
+       │  ╱    ╲                       │
+ 1000/s│╱        ╲                 0/s │
+       └───────────────               └────────────────
+       0s   1s   2s                   0s              20s
+
+原始：10万/s 峰值，持续 1 秒
+平滑：1000/s 恒定速率，持续 100 秒
+```
+
+**关键公式：**
+
+```
+队列长度 = 生产者速率 × 持续时间 - 消费者速率 × 持续时间
+        = 100,000 × 1 - 1,000 × 1
+        = 99,000 条消息（峰值时队列堆积）
+
+消费完所有消息所需时间 = 队列长度 / 消费者速率
+                      = 99,000 / 1,000
+                      = 99 秒
+```
 
 ---
 
-## 🗺️ 全局观：消息队列知识地图
+## 4. 核心问题三：如何保证消息不丢失、不重复、有序？
 
-### 消息队列的核心价值
+### 4.1 消息可靠性：三道防线
 
-> **用"空间换时间，用异步换性能"** —— 让系统可以"快速响应请求，慢慢处理任务"
+消息可能在三个环节丢失：生产者发送时、Broker 存储时、消费者处理时。
 
-### 知识体系地图
-
-```
-消息队列知识体系
-│
-├── 📦 基础概念（必学）
-│   ├── 生产者（Producer）：发送消息的一方
-│   ├── 消费者（Consumer）：接收并处理消息的一方
-│   ├── 消息代理（Broker）：存储和转发消息的中介
-│   └── 消息模式
-│       ├── 点对点（P2P）：一条消息被一个消费者消费
-│       └── 发布订阅（Pub/Sub）：一条消息被多个消费者消费
-│
-├── 🎯 核心应用场景（必学）
-│   ├── 异步处理：把同步改成异步，提升响应速度
-│   ├── 削峰填谷：缓冲高峰流量，保护系统
-│   ├── 系统解耦：消除服务之间的直接依赖
-│   └── 数据分发：一条消息分发给多个消费者
-│
-├── 🔒 可靠性保证（重要）
-│   ├── 消息不丢失：持久化 + ACK 机制 + 多副本
-│   ├── 消息不重复：幂等性设计
-│   └── 消息顺序：单分区或内存排序
-│
-├── 🚀 高级特性（进阶）
-│   ├── 死信队列（DLQ）：处理无法消费的消息
-│   ├── 延迟消息：指定时间后才消费
-│   └── 事务消息：保证本地事务和消息发送的一致性
-│
-├── 🛠️ 主流消息队列（了解）
-│   ├── RabbitMQ：传统消息队列，功能丰富
-│   ├── Kafka：分布式日志系统，吞吐量极大
-│   ├── RocketMQ：电商级消息队列，功能全面
-│   └── Redis Stream：轻量级队列，适合小规模应用
-│
-└── 📊 实战设计（综合应用）
-    └── 秒杀系统、订单系统、异步任务处理
-```
-
-### 学习路径建议（0 基础小白）
-
-#### 🎒 第一阶段：建立直觉（1-2 小时）
-
-**目标**：理解消息队列是什么，为什么需要它
-
-1. **阅读本章节的 0. 引言部分**
-   - 理解"餐厅点餐"和"淘宝支付"的例子
-   - 掌握"解耦"和"削峰"两个核心价值
-
-2. **动手体验**（可选）
-   - 找一个生活中的"队列"例子（如餐厅叫号、客服排队）
-   - 画出它的流程图
-
-#### 📚 第二阶段：掌握基础（1-2 天）
-
-**目标**：理解核心概念和基本用法
-
-1. **学习基础概念**
-   - 生产者、消费者、Broker
-   - 点对点 vs 发布订阅
-   - 阅读本章节第 1 部分
-
-2. **选择一个消息队列上手**
-   - 推荐从 **Redis Stream** 或 **RabbitMQ** 开始（学习曲线低）
-   - 跟着官方文档写一个"生产者-消费者"的 Hello World
-
-3. **实现第一个异步任务**
-   - 场景：用户注册后，异步发送欢迎邮件
-   - 用代码实现：注册接口 → 发消息到队列 → 消费者发送邮件
-
-#### 🔥 第三阶段：深入核心（1 周）
-
-**目标**：掌握消息队列的核心用法
-
-1. **学习核心设计模式**
-   - 异步处理：提升响应速度
-   - 削峰填谷：保护系统
-   - 系统解耦：降低依赖
-   - 阅读本章节第 3 部分
-
-2. **保证可靠性**
-   - 消息不丢失：持久化 + ACK
-   - 消息不重复：幂等性设计
-   - 阅读本章节第 4 部分
-
-3. **实战练习**
-   - 设计一个"秒杀系统"：用消息队列削峰
-   - 设计一个"订单系统"：用消息队列解耦
-
-#### 🚀 第四阶段：精通高级特性（2-4 周）
-
-**目标**：处理复杂场景
-
-1. **高级特性**
-   - 死信队列：处理异常消息
-   - 延迟消息：定时任务
-   - 事务消息：保证一致性
-   - 阅读本章节第 5 部分
-
-2. **完整系统设计**
-   - 设计一个带监控的异步处理系统
-   - 处理各种异常场景（消息丢失、重复、顺序错乱）
-
-3. **深入学习特定 MQ**
-   - Kafka：学习高可用架构（多副本、分区）
-   - RocketMQ：学习事务消息
-
-### 学习建议
-
-- ✅ **先理解，再动手**：不要一开始就陷入代码细节，先理解为什么需要消息队列
-- ✅ **从简单开始**：不要一上来就学 Kafka，从 Redis Stream 或 RabbitMQ 开始
-- ✅ **边学边练**：每学一个概念，就写代码实践一下
-- ✅ **关注应用场景**：不仅要知其然，还要知其所以然
-- ✅ **阅读真实案例**：看看淘宝、抖音等大厂如何使用消息队列
-
----
-
-## 1. 第一步：理解消息队列的核心概念
-
-### 1.1 消息队列的三要素
-
-1.  **生产者 (Producer)**：发送消息的一方。
-    - _例子_：订单服务（下单成功后发送消息）。
-2.  **消息代理 (Broker)**：存储和转发消息的中介。
-    - _例子_：RabbitMQ、Kafka、RocketMQ。
-3.  **消费者 (Consumer)**：接收并处理消息的一方。
-    - _例子_：库存服务（扣减库存）、短信服务（发送通知）。
-
-<MessageQueueComponentsDemo />
-
-### 1.2 消息模式 (Messaging Patterns)
-
-#### 点对点 (Point-to-Point)
-
-一条消息只能被**一个消费者**消费。
-
-- _场景_：任务分配（如批量导入 Excel，分发给多个工作节点处理）。
-- _特点_：负载均衡，多个消费者竞争消费。
-
-#### 发布订阅 (Pub/Sub)
-
-一条消息可以被**多个消费者**同时消费。
-
-- _场景_：事件通知（如用户注册后，同时发邮件、发短信、发放优惠券）。
-- _特点_：广播，每个订阅者都能收到完整消息。
-
-<PointToPointVsPubSubDemo />
-
-**关键点**：点对点是"任务分配"，发布订阅是"事件通知"。
-
----
-
-## 2. 主流消息队列对比
-
-| 特性         | RabbitMQ           | Kafka              | RocketMQ            | Redis Stream     |
-| :----------- | :----------------- | :----------------- | :------------------ | :--------------- |
-| **定位**     | 传统消息队列       | 分布式日志系统     | 电商级消息队列      | 轻量级队列       |
-| **吞吐量**   | ~1 万/秒           | ~100 万/秒         | ~10 万/秒           | ~5 万/秒         |
-| **延迟**     | 微秒级             | 毫秒级             | 毫秒级              | 毫秒级           |
-| **可靠性**   | 高（持久化）       | 高（多副本）       | 高（同步/异步刷盘） | 中（AOF 持久化） |
-| **消息顺序** | 支持（单队列）     | 支持（分区内）     | 支持                | 支持             |
-| **消息回溯** | 不支持             | 支持               | 支持                | 支持             |
-| **学习曲线** | 中                 | 高                 | 高                  | 低               |
-| **适用场景** | 传统业务、任务队列 | 日志收集、流式处理 | 电商、金融          | 小规模、简单队列 |
-
-### 2.1 如何选择？
-
-- **RabbitMQ**：
-  - ✅ 需要复杂的路由规则（如根据订单类型分发到不同队列）。
-  - ✅ 对延迟敏感（要求微秒级响应）。
-  - ✅ 团队熟悉 AMQP 协议。
-
-- **Kafka**：
-  - ✅ 吞吐量极大（百万级 TPS）。
-  - ✅ 需要消息回溯（重新消费历史数据）。
-  - ✅ 大数据生态（Flink、Spark 集成）。
-
-- **RocketMQ**：
-  - ✅ 电商、交易场景（事务消息、顺序消息）。
-  - ✅ 金融级可靠性要求。
-  - ✅ 需要定时消息、延迟消息。
-
-- **Redis Stream**：
-  - ✅ 小团队、MVP 项目。
-  - ✅ 已经有 Redis，不想引入新组件。
-  - ⚠️ 不适合对可靠性要求极高的场景。
-
-<MessageQueueComparisonDemo />
-
-**关键点**：没有最好的消息队列，只有最适合的。初学者可以从 RabbitMQ 或 Redis Stream 入手。
-
----
-
-## 3. 核心设计模式
-
-### 3.1 异步处理 (Asynchronous Processing)
-
-把同步调用改成异步，提升响应速度。
-
-**场景**：用户注册流程
+#### 防线 1：生产者确认（Producer ACK）
 
 ```python
-# 同步方式（总耗时 = 1500ms）
-def register(username, password):
-    save_user(username, password)       # 300ms
-    send_email(username)                 # 500ms
-    send_sms(username)                   # 400ms
-    give_coupon(username)                # 300ms
-    return {"status": "success"}
+# 可靠的生产者实现
+class ReliableProducer:
+    def __init__(self, mq_connection, db_connection):
+        self.mq = mq_connection
+        self.db = db_connection
 
-# 异步方式（总耗时 = 300ms）
-def register(username, password):
-    save_user(username, password)        # 300ms
+    def send_with_reliability(self, message):
+        """
+        可靠消息发送：本地日志 + 异步发送 + 定时重试
+        """
+        # 1. 生成消息 ID
+        msg_id = generate_uuid()
 
-    # 发送消息到队列，立即返回
-    mq.publish("user.registered", {
-        "username": username,
-        "timestamp": time.time()
-    })
+        # 2. 先写本地数据库（本地事务）
+        with self.db.transaction() as tx:
+            tx.execute("""
+                INSERT INTO outgoing_messages
+                (id, topic, body, status, retry_count, created_at)
+                VALUES (?, ?, ?, 'PENDING', 0, NOW())
+            """, msg_id, message['topic'], json.dumps(message['body']))
 
-    return {"status": "success"}
-
-# 后台消费者（慢慢处理）
-def handle_user_registered(data):
-    send_email(data["username"])
-    send_sms(data["username"])
-    give_coupon(data["username"])
+        # 3. 异步发送消息
+        try:
+            self.mq.send_async(
+                topic=message['topic'],
+                body=message['body'],
+                headers={'msg_id': msg_id},
+                on_success=lambda: self.on_send_success(msg_id),
+                on_failure=lambda e: self.on_send_failure(msg_id, e)
+            )
+        except Exception as e:
+            # 发送异常，等待定时任务重试
+            logger.error(f"消息 {msg_id} 发送异常：{e}")
 ```
 
-**效果**：接口响应时间从 1500ms 降到 300ms，用户体验大幅提升。
-
-### 3.2 削峰填谷 (Peak Shaving)
-
-用队列缓冲高峰流量。
-
-**场景**：秒杀活动
-
-```
-用户请求 (10 万/秒)
-    ↓
-[网关层] 限流：只放行 1 万/秒
-    ↓
-[消息队列] 缓冲 9 万/秒
-    ↓
-[订单服务] 持续处理 1000/秒
-```
+#### 防线 2：Broker 持久化
 
 ```python
-# 生产者：秒杀接口
-def seckill(user_id, product_id):
-    # 快速校验
-    if not redis.is_available(product_id):
-        return {"error": "已售罄"}
+# Kafka 生产者配置（可靠性优先）
+kafka_producer_config = {
+    # 1. ACK 配置（最关键）
+    "acks": "all",                    # 等待所有 ISR 副本确认
 
-    # 扔进队列，立即返回
-    mq.publish("seckill.order", {
-        "user_id": user_id,
-        "product_id": product_id,
-        "timestamp": time.time()
-    })
+    # 2. 重试配置
+    "retries": 3,                     # 发送失败重试 3 次
+    "retry.backoff.ms": 1000,         # 重试间隔 1 秒
 
-    return {"status": "排队中"}
+    # 3. 幂等性配置（防止重复发送）
+    "enable.idempotence": True,       # 启用幂等性生产者
 
-# 消费者：后台处理订单
-def handle_seckill_order(data):
-    user_id = data["user_id"]
-    product_id = data["product_id"]
+    # 4. 批量配置（吞吐 vs 延迟权衡）
+    "batch.size": 16384,              # 批量发送大小 16KB
+    "linger.ms": 10,                  # 最多等待 10ms 批量发送
 
-    # 扣减库存（数据库可以慢慢处理）
-    success = db.deduct_stock(product_id, user_id)
-    if success:
-        create_order(user_id, product_id)
-        mq.publish("order.created", {...})
-    else:
-        mq.publish("order.failed", {...})
+    # 5. 压缩配置
+    "compression.type": "lz4",         # 消息压缩，提升吞吐
+
+    # 6. 缓冲区配置
+    "buffer.memory": 33554432,       # 生产者缓冲区 32MB
+
+    # 7. 事务配置（原子性发送多条消息）
+    "transactional.id": "seckill-producer-1",
+}
 ```
 
-<SeckillQueueDemo />
-
-**关键点**：用户不需要等待真实处理完成，只要"排队成功"就满足预期。
-
-### 3.3 系统解耦 (Decoupling)
-
-消除服务之间的直接依赖。
-
-**场景**：订单系统 → 通知系统
+#### 防线 3：消费者确认（Consumer ACK）
 
 ```python
-# 紧耦合（不好）
-def create_order(user_id, product_id):
-    order = db.create_order(user_id, product_id)
+# 消费者可靠处理代码
 
-    # 直接调用，如果通知服务挂了，订单就创建失败
-    notification_service.send_sms(user_id, "订单创建成功")
-    notification_service.send_email(user_id, "订单创建成功")
+# ACK 策略选择：
+ack_strategies = {
+    "auto_ack": {
+        "description": "自动确认，消息送达即确认",
+        "pros": ["性能最高", "代码最简单"],
+        "cons": ["消息可能在处理前丢失", "无法保证可靠性"],
+        "use_case": "日志收集等对可靠性要求不高的场景"
+    },
 
-    return order
+    "manual_ack_sync": {
+        "description": "手动同步确认，处理成功后确认",
+        "pros": ["可靠性高", "可以控制确认时机"],
+        "cons": ["性能略低", "需要处理超时"],
+        "use_case": "订单处理、支付等对可靠性要求高的场景"
+    },
 
-# 松耦合（好）
-def create_order(user_id, product_id):
-    order = db.create_order(user_id, product_id)
+    "manual_ack_async": {
+        "description": "手动异步确认，批量确认",
+        "pros": ["性能高", "可靠性平衡"],
+        "cons": ["实现复杂", "可能重复处理"],
+        "use_case": "日志处理、大数据等高吞吐场景"
+    }
+}
 
-    # 发送消息，不管通知服务是否在线
-    mq.publish("order.created", {
-        "order_id": order.id,
-        "user_id": user_id
-    })
-
-    return order
-
-# 通知系统独立消费
-def handle_order_created(data):
-    # 如果通知服务挂了，消息会暂存在队列里，等它恢复后再处理
-    send_sms(data["user_id"], "订单创建成功")
-    send_email(data["user_id"], "订单创建成功")
+# 推荐策略：手动同步确认 + 幂等性设计
+consumer_config = {
+    "auto_ack": False,              # 关闭自动确认
+    "prefetch_count": 10,           # 预取 10 条，平衡吞吐和内存
+    "max_retries": 3,               # 最大重试 3 次
+    "retry_backoff": [1, 5, 30],    # 退避策略：1秒、5秒、30秒
+    "dead_letter_enabled": True,    # 启用死信队列
+    "idempotency_enabled": True     # 启用幂等性检查
+}
 ```
 
-**好处**：
+<ReliabilityDemo />
 
-- 订单系统不依赖通知系统。
-- 可以随时增加新的消费者（如积分系统、大数据分析）。
-- 通知系统升级不影响订单系统。
+### 4.2 如何处理消息重复消费？
 
-<CouplingDemo />
+消息重复可能在以下场景发生：
 
-### 3.4 数据分发 (Data Distribution)
+1. **生产者重试**：生产者发送消息后未收到 ACK，重试发送同一条消息
+2. **消费者 ACK 超时**：消费者处理完成但 ACK 超时，Broker 重新投递
+3. **网络抖动**：消费者 ACK 未到达 Broker，Broker 认为未消费
+4. **消费者重启**：消费者重启后重新消费同一批消息
 
-一条消息分发给多个消费者。
+**解决方案：幂等性设计**
 
-**场景**：用户行为分析
-
-```python
-# 用户点击了商品
-def on_product_click(user_id, product_id):
-    mq.publish("user.action", {
-        "type": "click",
-        "user_id": user_id,
-        "product_id": product_id,
-        "timestamp": time.time()
-    })
-
-# 消费者 1：推荐系统（更新用户画像）
-def update_user_profile(data):
-    if data["type"] == "click":
-        profile.add_interest(data["user_id"], data["product_id"])
-
-# 消费者 2：实时统计（点击量计数）
-def increment_click_count(data):
-    redis.incr(f"product:{data['product_id']}:clicks")
-
-# 消费者 3：数据仓库（离线分析）
-def save_to_data_warehouse(data):
-    warehouse.insert("user_actions", data)
-```
-
-<PubSubDemo />
-
-**关键点**：发布订阅模式让数据可以"一写多读"，每个系统各取所需。
-
----
-
-## 4. 可靠性保证
-
-### 4.1 消息不丢失
-
-从三个维度保证：
-
-#### 生产者不丢
-
-```python
-# 确认机制 (ACK)
-try:
-    mq.publish_with_confirm("order.created", order_data)
-    # 收到 Broker 确认后才认为发送成功
-except Exception as e:
-    # 发送失败，重试或记录日志
-    log.error(f"发送失败: {e}")
-    retry_later(order_data)
-```
-
-#### Broker 不丢
-
-- **持久化**：消息写入磁盘，而不是只存在内存。
-- **多副本**：Kafka 的多副本机制，保证一台机器挂了数据不丢。
-
-```python
-# Kafka 配置示例
-# acks=all: 所有副本都确认才算成功
-producer.send(
-    topic="orders",
-    value=order_data,
-    acks="all"  # 或 -1
-).get()
-```
-
-#### 消费者不丢
-
-```python
-# 手动确认 (Manual ACK)
-def process_message(msg):
-    try:
-        # 处理业务逻辑
-        handle_order(msg.body)
-
-        # 业务成功后才确认消息
-        msg.ack()
-    except Exception as e:
-        # 业务失败，拒绝消息（会重新投递）
-        msg.nack(requeue=True)
-```
-
-<MessageReliabilityDemo />
-
-### 4.2 消息不重复
-
-消息可能会重复投递（网络抖动、消费者重启），所以需要**幂等性**。
-
-**什么是幂等性？**
-
-- 执行一次和执行多次，结果相同。
-- _例子_：`SET x = 1` 是幂等的，`INCREMENT x` 不是。
-
-**实现幂等性**：
-
-```python
-# 方案 1: 数据库唯一约束
-def create_order(order_id, user_id, product_id):
-    try:
-        db.execute(
-            "INSERT INTO orders (id, user_id, product_id) VALUES (?, ?, ?)",
-            order_id, user_id, product_id
-        )
-    except DuplicateKeyError:
-        # 订单已存在，直接返回（幂等）
-        return get_order(order_id)
-
-# 方案 2: Redis 去重表
-def process_message(msg):
-    message_id = msg.id
-
-    # 检查是否已处理
-    if redis.set(f"processed:{message_id}", "1", nx=True, ex=3600):
-        # 第一次处理
-        handle_business(msg.body)
-    else:
-        # 已处理过，跳过
-        log.info(f"消息 {message_id} 已处理，跳过")
-```
+**核心思想**：同一操作执行多次和执行一次的效果相同。
 
 <IdempotenceDemo />
 
-### 4.3 消息顺序性
-
-某些场景需要保证消息的顺序（如订单状态：创建 → 支付 → 发货）。
-
-**问题**：多个消费者并发消费，可能导致顺序错乱。
-
-**解决方案**：
-
-1.  **单分区 / 单队列**：
-    - 把需要有序的消息发到同一个分区/队列。
-    - 一个分区只能被一个消费者消费。
+**幂等性实现方案对比：**
 
 ```python
-# Kafka 示例：根据 user_id 分区
-producer.send(
-    topic="orders",
-    value=order_data,
-    partition_key=order_data["user_id"]  # 同一个用户的消息会进入同一个分区
-)
-```
+# 方案对比
+idempotency_solutions = {
+    "database_unique_constraint": {
+        "name": "数据库唯一约束",
+        "implementation": "UNIQUE 索引 + INSERT IGNORE",
+        "pros": ["简单可靠", "数据库保证原子性"],
+        "cons": ["需要数据库支持", "写入性能有损耗"],
+        "use_case": "订单创建、用户注册等核心业务流程"
+    },
 
-2.  **内存排序**：
-    - 消费者在内存中缓存消息，排序后再处理。
+    "redis_setnx": {
+        "name": "Redis SETNX",
+        "implementation": "SET key value NX EX",
+        "pros": ["高性能", "支持过期时间"],
+        "cons": ["需要额外 Redis 资源", "极端情况下可能不一致"],
+        "use_case": "高并发场景下的幂等性检查"
+    },
 
-```python
-from collections import defaultdict
+    "token_bucket": {
+        "name": "业务令牌",
+        "implementation": "前端生成唯一 Token，服务端校验",
+        "pros": ["前端友好", "可防重放攻击"],
+        "cons": ["需要 Token 生成策略", "Token 可能被盗用"],
+        "use_case": "表单提交、支付确认等用户交互场景"
+    },
 
-messages = defaultdict(list)
-
-def process_message(msg):
-    sequence_number = msg.sequence_number
-    user_id = msg.user_id
-
-    # 缓存消息
-    messages[user_id].append((sequence_number, msg))
-
-    # 排序并处理
-    messages[user_id].sort()
-    for seq, m in messages[user_id]:
-        if not is_processed(m):
-            handle_business(m)
-            mark_processed(m)
-```
-
-<MessageOrderingDemo />
-
-**关键点**：全局有序性能差，通常只需要**局部有序**（如单个用户的消息有序）。
-
----
-
-## 5. 高级特性
-
-### 5.1 死信队列 (DLQ, Dead Letter Queue)
-
-处理无法消费的消息。
-
-**场景**：消息格式错误、业务逻辑失败（重试 N 次后仍失败）。
-
-```python
-# RabbitMQ 示例
-queue_args = {
-    "x-dead-letter-exchange": "dlx",        # 死信交换机
-    "x-dead-letter-routing-key": "dlq",     # 死信队列
-    "x-max-retries": 3                      # 最大重试次数
+    "state_machine": {
+        "name": "状态机",
+        "implementation": "定义状态流转规则，拒绝非法状态变更",
+        "pros": ["业务语义清晰", "天然支持幂等"],
+        "cons": ["设计复杂", "需要维护状态图"],
+        "use_case": "订单状态流转、工作流引擎等复杂业务"
+    }
 }
-
-def process_message(msg):
-    try:
-        handle_business(msg.body)
-        msg.ack()
-    except Exception as e:
-        msg.retries += 1
-        if msg.retries >= 3:
-            # 超过重试次数，发送到死信队列
-            msg.reject(requeue=False)
-        else:
-            # 重新入队，稍后重试
-            msg.nack(requeue=True)
 ```
 
-**死信队列的作用**：
-
-- 隔离异常消息，避免阻塞正常消息。
-- 保留失败消息，方便后续人工介入或分析。
-
-<DeadLetterQueueDemo />
-
-### 5.2 延迟消息 (Delayed Message)
-
-指定时间后才消费消息。
-
-**场景**：
-
-- 订单 30 分钟后自动取消。
-- 定时提醒（明天 9 点提醒我开会）。
-
-```python
-# RocketMQ 示例
-def send_delay_message(order_id, delay_level):
-    # delay_level = 1 表示 1s, 2 表示 5s, ... 16 表示 2h
-    producer.send(
-        topic="order.cancel",
-        body={"order_id": order_id},
-        delay_level=14  # 15 分钟后取消
-    )
-
-# Redis + 定时任务方案
-def schedule_order_cancellation(order_id, delay_seconds):
-    redis.zadd(
-        "order.cancellations",
-        {order_id: time.time() + delay_seconds}
-    )
-
-# 定时扫描（每秒执行一次）
-def cancel_expired_orders():
-    now = time.time()
-    expired_orders = redis.zrangebyscore(
-        "order.cancellations",
-        0,
-        now
-    )
-
-    for order_id in expired_orders:
-        cancel_order(order_id)
-        redis.zrem("order.cancellations", order_id)
-```
-
-<DelayedMessageDemo />
-
-### 5.3 事务消息 (Transactional Message)
-
-保证本地事务和消息发送的一致性。
-
-**场景**：订单创建成功 → 发送"扣减库存"消息。
-
-**问题**：订单创建了，但消息没发送成功（网络故障）。
-
-**解决方案**（RocketMQ 事务消息）：
-
-```python
-# 1. 发送半消息（half message）
-producer.send_half_message(topic="order.deduct_stock", body=order_data)
-
-# 2. 执行本地事务
-def execute_local_transaction(msg):
-    try:
-        create_order_in_db(msg.body)
-        return COMMIT  # 本地事务成功，提交消息
-    except Exception as e:
-        return ROLLBACK  # 本地事务失败，回滚消息
-
-# 3. RocketMQ 回查（如果长时间未收到确认）
-def check_local_transaction(msg):
-    order = db.get_order(msg.body["order_id"])
-    if order:
-        return COMMIT  # 订单存在，说明本地事务成功
-    else:
-        return ROLLBACK
-```
-
-<TransactionMessageDemo />
-
-**关键点**：事务消息保证了"要么都成功，要么都失败"。
-
 ---
 
-## 6. 实战：设计一个秒杀系统
+## 5. 实战：完整的消息队列架构设计
 
-### 6.1 需求分析
+### 5.1 四大主流消息队列选型对比
 
-- **高并发**：1 秒内有 10 万个请求。
-- **不超卖**：库存 100 个，不能卖出 101 个。
-- **用户体验**：立即返回"排队中"，而不是让用户等待。
+| 特性 | RabbitMQ | Kafka | RocketMQ | Redis Stream |
+|------|----------|-------|----------|--------------|
+| **定位** | 传统消息队列 | 分布式日志流 | 电商级消息队列 | 轻量级队列 |
+| **吞吐量** | ~1 万/秒 | ~100 万/秒 | ~10 万/秒 | ~5 万/秒 |
+| **延迟** | 微秒级 | 毫秒级 | 毫秒级 | 毫秒级 |
+| **可靠性** | 高（持久化） | 高（多副本） | 高（同步刷盘） | 中（AOF） |
+| **消息回溯** | 不支持 | 支持 | 支持 | 支持 |
+| **事务消息** | 支持（弱） | 不支持 | 支持（强） | 不支持 |
+| **延迟消息** | 支持 | 不支持 | 支持 | 不支持 |
+| **适用场景** | 传统企业应用 | 日志、大数据 | 电商、金融 | 小规模应用 |
 
-### 6.2 架构设计
+<MQComparisonDemo />
+
+### 5.2 选型决策树
 
 ```
-用户请求
-    ↓
-[网关] 限流：只放行 1 万/秒
-    ↓
-[Redis] 预扣减库存（原子操作）
-    ↓ 成功
-[消息队列] 缓冲订单请求
-    ↓
-[订单服务] 慢慢创建订单
-    ↓
-[消息队列] 订单完成通知
-    ↓
-[通知服务] 发送短信/推送
+选择消息队列：
+│
+├─ 需要事务消息（分布式事务）？
+│  ├─ 是 → RocketMQ（首选）或 RabbitMQ
+│  └─ 否 → 继续
+│
+├─ 需要处理海量日志/实时流？
+│  ├─ 是 → Kafka（首选）
+│  └─ 否 → 继续
+│
+├─ QPS > 1万/秒？
+│  ├─ 是 → RocketMQ 或 Kafka
+│  └─ 否 → 继续
+│
+├─ 需要复杂路由（如 headers 匹配）？
+│  ├─ 是 → RabbitMQ
+│  └─ 否 → 继续
+│
+├─ 已有 Redis 基础设施？
+│  ├─ 是 → Redis Stream（快速开始）
+│  └─ 否 → RabbitMQ（功能全面，学习曲线适中）
+│
 ```
 
-### 6.3 代码实现
-
-```python
-# 秒杀接口
-def seckill(user_id, product_id):
-    # 1. Redis 预扣减库存（原子操作）
-    stock_key = f"seckill:stock:{product_id}"
-    success = redis.eval(
-        """
-        if redis.call('get', KEYS[1]) > 0 then
-            redis.call('decr', KEYS[1])
-            return 1
-        else
-            return 0
-        end
-        """,
-        1,
-        stock_key
-    )
-
-    if not success:
-        return {"error": "库存不足"}
-
-    # 2. 发送消息到队列
-    mq.publish(
-        "seckill.orders",
-        {
-            "user_id": user_id,
-            "product_id": product_id,
-            "timestamp": time.time()
-        }
-    )
-
-    # 3. 立即返回
-    return {"status": "排队中", "queue_position": get_queue_position()}
-
-# 订单服务消费者
-def handle_seckill_order(data):
-    user_id = data["user_id"]
-    product_id = data["product_id"]
-
-    # 1. 创建订单（数据库）
-    try:
-        order = db.create_order(user_id, product_id, status="PROCESSING")
-    except Exception as e:
-        # 创建失败，恢复库存
-        redis.incr(f"seckill:stock:{product_id}")
-        log.error(f"创建订单失败: {e}")
-        return
-
-    # 2. 发送"订单创建成功"消息
-    mq.publish(
-        "seckill.order.created",
-        {
-            "order_id": order.id,
-            "user_id": user_id,
-            "product_id": product_id
-        }
-    )
-
-# 通知服务消费者
-def handle_order_created(data):
-    order_id = data["order_id"]
-    user_id = data["user_id"]
-
-    # 1. 发送短信
-    sms.send(user_id, f"您的订单 {order_id} 已创建成功")
-
-    # 2. 发送推送
-    push.send(user_id, {"title": "订单创建成功", "body": "..."})
-
-    # 3. 更新订单状态
-    db.update_order_status(order_id, "NOTIFIED")
-```
-
-### 6.4 监控与告警
-
-```python
-# 监控指标
-metrics = {
-    "queue_length": mq.get_queue_length("seckill.orders"),      # 队列长度
-    "processing_speed": mq.get_processing_speed(),              # 处理速度
-    "success_rate": calculate_success_rate(),                    # 成功率
-    "average_latency": calculate_average_latency(),              # 平均延迟
-}
-
-# 告警规则
-if metrics["queue_length"] > 10000:
-    alert("队列积压过多，请增加消费者")
-
-if metrics["success_rate"] < 0.95:
-    alert("成功率过低，请检查业务逻辑")
-```
-
-<SeckillSystemDemo />
-
-**关键点**：
-
-- 用 Redis 做第一道防线（快速拦截）。
-- 用消息队列做缓冲（削峰）。
-- 异步处理真正的业务逻辑。
-
 ---
 
-## 7. 总结与学习路线
+## 6. 总结：消息队列设计心法
 
-消息队列是后端系统的"核心基础设施"，掌握它能让你的系统更可靠、更高效。
+### 6.1 核心原则回顾
 
-### 7.1 核心知识点
+| 原则 | 含义 | 实践要点 |
+|------|------|----------|
+| **解耦** | 服务间不直接依赖 | 通过消息队列通信，消费者故障不影响生产者 |
+| **削峰** | 平滑流量波动 | 消息队列作为蓄水池，消费者按恒定速率处理 |
+| **可靠** | 消息不丢失 | 生产者确认 + Broker 持久化 + 消费者确认 |
+| **幂等** | 重复消费无影响 | 业务层面保证幂等性（唯一键、状态机） |
+| **有序** | 消息顺序保证 | 单分区有序或消费者端排序 |
 
-| 知识点                 | 重要程度   | 难度 | 实战频率 |
-| :--------------------- | :--------- | :--- | :------- |
-| **点对点 / 发布订阅**  | ⭐⭐⭐⭐⭐ | 低   | 极高     |
-| **削峰填谷**           | ⭐⭐⭐⭐⭐ | 中   | 极高     |
-| **消息可靠性（不丢）** | ⭐⭐⭐⭐⭐ | 高   | 极高     |
-| **幂等性**             | ⭐⭐⭐⭐⭐ | 中   | 极高     |
-| **消息顺序**           | ⭐⭐⭐⭐   | 高   | 中       |
-| **死信队列**           | ⭐⭐⭐⭐   | 低   | 高       |
-| **延迟消息**           | ⭐⭐⭐⭐   | 中   | 中       |
-| **事务消息**           | ⭐⭐⭐     | 高   | 低       |
+### 6.2 设计检查清单
 
-### 7.2 学习路线
+在引入消息队列前，问自己以下问题：
 
-1.  **入门**（1-2 天）：
-    - 理解消息队列的核心概念（生产者、消费者、Broker）。
-    - 掌握点对点和发布订阅两种模式。
-    - 用 Redis Stream 或 RabbitMQ 实现简单的异步任务。
+- [ ] 是否真的需要消息队列？（简单异步可以用线程池）
+- [ ] 消息丢失是否可以接受？（决定可靠性级别）
+- [ ] 消息重复是否会影响业务？（决定幂等性投入）
+- [ ] 消息顺序是否重要？（决定分区策略）
+- [ ] 消费者处理能力如何？（决定队列大小和告警阈值）
+- [ ] 如何处理消费失败？（决定重试和死信策略）
 
-2.  **进阶**（1 周）：
-    - 实现削峰填谷（如秒杀系统）。
-    - 保证消息可靠性（持久化、ACK、重试）。
-    - 实现幂等性（唯一 ID、去重表）。
+### 6.3 学习路径推荐
 
-3.  **实战**（2-4 周）：
-    - 设计一个完整的异步处理系统（订单、通知、积分）。
-    - 接入监控，实时观测队列长度、消费速度。
-    - 处理异常场景（死信队列、重试策略）。
+```
+入门阶段（1-2 周）：
+├── 理解消息队列核心概念（生产者、消费者、Broker）
+├── 选择一种消息队列上手（推荐 RabbitMQ 或 Redis Stream）
+└── 实现第一个"生产者-消费者" Demo
 
-4.  **深入**（持续）：
-    - 学习 Kafka 的高可用架构（多副本、分区）。
-    - 研究 RocketMQ 的事务消息。
-    - 探索消息队列在流式处理中的应用（Flink、Spark）。
+进阶阶段（2-4 周）：
+├── 深入学习一种消息队列的高级特性
+│   ├── Kafka：分区、副本、消费者组
+│   └── RocketMQ：事务消息、延迟消息
+├── 实现可靠消息投递（ACK 机制、重试策略）
+└── 实现幂等性消费
 
-### 7.3 推荐资源
-
-- **书籍**：
-  - 《Kafka 权威指南》
-  - 《RabbitMQ 实战指南》
-- **文章**：
-  - RabbitMQ 官方文档: https://www.rabbitmq.com/getstarted.html
-  - Kafka 官方文档: https://kafka.apache.org/documentation/
-- **工具**：
-  - RabbitMQ Management Plugin (Web 管理界面)
-  - Kafka Tool (Kafka 可视化)
+实战阶段（1-2 月）：
+├── 设计一个完整的秒杀系统（削峰填谷）
+├── 设计一个订单系统（解耦、最终一致性）
+└── 搭建消息队列监控告警体系
+```
 
 ---
 
-## 8. 名词速查表 (Glossary)
+## 7. 名词速查表 (Glossary)
 
-| 名词                    | 全称              | 解释                                                                  |
-| :---------------------- | :---------------- | :-------------------------------------------------------------------- |
-| **MQ**                  | Message Queue     | **消息队列**。用于异步通信的中间件，实现生产者和消费者的解耦。        |
-| **Producer**            | -                 | **生产者**。发送消息的一方。                                          |
-| **Consumer**            | -                 | **消费者**。接收并处理消息的一方。                                    |
-| **Broker**              | -                 | **消息代理**。存储和转发消息的服务端程序。                            |
-| **Topic**               | -                 | **主题**。消息的逻辑分类（如 "orders"）。                             |
-| **Queue**               | -                 | **队列**。存储消息的物理容器。                                        |
-| **Partition**           | -                 | **分区**。Kafka 的概念，一个 Topic 可以分成多个 Partition，提升并发。 |
-| **ACK**                 | Acknowledgment    | **确认**。消费者处理完消息后，向 Broker 确认。                        |
-| **Pub/Sub**             | Publish/Subscribe | **发布订阅**。一种消息模式，一条消息可被多个消费者接收。              |
-| **P2P**                 | Point-to-Point    | **点对点**。一种消息模式，一条消息只能被一个消费者接收。              |
-| **DLQ**                 | Dead Letter Queue | **死信队列**。存放无法消费的消息。                                    |
-| **Idempotence**         | -                 | **幂等性**。多次执行结果相同。                                        |
-| **Throughput**          | -                 | **吞吐量**。单位时间内处理的消息数量。                                |
-| **Latency**             | -                 | **延迟**。消息从发送到被接收的时间差。                                |
-| **Persistence**         | -                 | **持久化**。消息写入磁盘，而非仅存内存。                              |
-| **Replication**         | -                 | **副本**。为了高可用，消息被复制到多个节点。                          |
-| **Transaction Message** | -                 | **事务消息**。保证本地事务和消息发送的一致性。                        |
+| 名词 | 全称 | 解释 |
+|------|------|------|
+| **MQ** | Message Queue | **消息队列**。用于异步通信的中间件，实现生产者和消费者的解耦。 |
+| **Producer** | - | **生产者**。发送消息的一方。 |
+| **Consumer** | - | **消费者**。接收并处理消息的一方。 |
+| **Broker** | - | **消息代理**。存储和转发消息的服务端程序。 |
+| **Topic** | - | **主题**。消息的逻辑分类（如 "orders"）。 |
+| **Queue** | - | **队列**。存储消息的物理容器。 |
+| **Partition** | - | **分区**。Kafka 的概念，一个 Topic 可以分成多个 Partition，提升并发。 |
+| **ACK** | Acknowledgment | **确认**。消费者处理完消息后，向 Broker 确认。 |
+| **Pub/Sub** | Publish/Subscribe | **发布订阅**。一种消息模式，一条消息可被多个消费者接收。 |
+| **P2P** | Point-to-Point | **点对点**。一种消息模式，一条消息只能被一个消费者接收。 |
+| **DLQ** | Dead Letter Queue | **死信队列**。存放无法消费的消息。 |
+| **Idempotence** | - | **幂等性**。多次执行结果相同。 |
+| **Throughput** | - | **吞吐量**。单位时间内处理的消息数量。 |
+| **Latency** | - | **延迟**。消息从发送到被接收的时间差。 |
+| **Persistence** | - | **持久化**。消息写入磁盘，而非仅存内存。 |
+| **Replication** | - | **副本**。为了高可用，消息被复制到多个节点。 |
+| **Transaction Message** | - | **事务消息**。保证本地事务和消息发送的一致性。 |
+| **Backpressure** | - | **背压**。消费者处理不过来时，通知生产者降速。 |
+| **Offset** | - | **偏移量**。消费者在分区中的消费位置。 |
+| **Rebalance** | - | **重平衡**。消费者组成员变化时，重新分配分区。 |
diff --git a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
index 67ddad6..7c3a8fe 100644
--- a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
+++ b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
@@ -3,9 +3,11 @@
 这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
 不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
 
+<div style="text-align: center;">
 <div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
   <span style="font-size: 15px; font-weight: 500; color: #666;">完成比完美更重要 🐣</span>
 </div>
+</div>
 
 <script setup>
 const duration = '约 <strong>4 小时</strong>，可分多次完成'
diff --git a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
index ed00e24..95cf855 100644
--- a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
+++ b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
@@ -139,11 +139,16 @@ VS Code 的核心理念是“一切皆插件”。它通过插件机制支持各
 > - 自动生成测试：IDE 可以自动生成针对不同函数和模块的测试代码，方便你进行有针对性的测试。
 > - Agent 式任务执行：智能 Agent 可以自动生成、打包、安装、运行和修改代码，在很多任务上可以部分替代初级软件工程师的工作。
 
+::: details Trae
+
 ### [Trae](https://www.trae.ai/)
 
 ![](images/image8.png)
 
 Trae 是字节跳动推出的一款 AI 编程助手，支持 100 多种编程语言，并能集成到主流 IDE 中。它的功能包括：用自然语言生成代码、自动调试、把设计稿转换为 React/Vue 组件等。在 2025 年 8 月的更新之后，Trae 新增了智能依赖导入、重命名建议、任务清单管理等功能；SOLO 模式也开始支持后端代码生成和技术架构文档编辑。
+:::
+
+::: details Cursor
 
 ### [Cursor](https://cursor.com/)
 
@@ -152,18 +157,27 @@ Cursor 是 Anysphere 开发的一款 AI 代码编辑器，基于 VS Code 定制
 目前，Cursor 可以说是“带前端界面的 AI IDE”中综合体验最好的一款之一，用户数量庞大，功能迭代频率也很高。它最大的缺点是价格较高——专业版大约需要每月 20 美元。
 
 ![](images/image9.png)
+:::
+
+::: details Qoder
 
 ### [Qoder](https://qoder.com/)
 
 Qoder 是阿里巴巴推出的一款强调“透明协作”和“增强上下文工程能力”的 AI IDE。它通过 Action Flow 支持把任务拆解成多个步骤，并实时跟踪 AI 的执行过程；还支持多模型动态路由和任务状态机管理，非常适合在中大型项目中做架构治理和对遗留系统进行“反向工程”分析。
 
 ![](images/image10.png)
+:::
+
+::: details CodeBuddy
 
 ### [CodeBuddy](https://www.codebuddy.com/)
 
 CodeBuddy 是腾讯云推出的一款 AI 编程工具，强调对中文指令的支持以及企业级合规能力。它提供代码补全、批量代码审查和多模型切换等功能；其中的 Craft 智能体可以实现多文件代码生成和 API 集成。企业版支持私有化部署，并通过了三级等保认证，适合金融、医疗等对数据安全要求较高的行业。
 
 ![](images/image11.png)
+:::
+
+::: details VS Code + Cline
 
 ### VS Code + [Cline](https://cline.bot/)
 
@@ -172,6 +186,7 @@ Cline 是 VS Code（Visual Studio Code）的一款 AI 编程 Agent 插件，可
 ![](images/image13.png)
 
 ![](images/image14.png)
+:::
 
 <div style="margin: 50px 0;">
   <ClientOnly>
@@ -614,7 +629,7 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
       <span style="font-size: 12px; color: #909399">看到不懂的计算机名词时，来这里快速查含义，推荐通读一遍。</span>
     </el-col>
     <el-col :span="12">
-      <a href="../../appendix/ide-intro/index.md#appendix-2-map" style="text-decoration: none; color: inherit;"><b>附录二：Visual Studio Code 菜单栏解析</b></a><br/>
+      <a href="../../appendix/ide-intro/" style="text-decoration: none; color: inherit;"><b>附录二：Visual Studio Code 菜单栏解析</b></a><br/>
       <span style="font-size: 12px; color: #909399">不知道 AI IDE 的界面有什么用的时候，拿以下内容和 AI 对话进行查阅，或者直接查看。</span>
     </el-col>
   </el-row>
diff --git a/package-lock.json b/package-lock.json
index 9c579f4..1fca3b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "claude": "^0.1.1",
-        "codex": "^0.2.3",
         "element-plus": "^2.13.1",
         "typeit": "^8.8.7",
         "viewerjs": "^1.11.7",
@@ -1971,35 +1970,6 @@
         "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",
@@ -2077,66 +2047,6 @@
       "integrity": "sha512-j7oSibqQdIODNhkI1sEJzHMiPsF43L/GqNbcA+eDDyGM10+x2sH9NW/PK6vM3z0J2tLDKMBcc5ZjVaoRinhuCA==",
       "license": "ISC"
     },
-    "node_modules/codex": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmmirror.com/codex/-/codex-0.2.3.tgz",
-      "integrity": "sha512-+MQbh3UIJRZFawxQUgPAEXKyL9o06fy8JmrgW4EnMeMlj8kh3Jljh4+CcOdH9yt82FTkmEwUR2qOrOev3ZoJJA==",
-      "dependencies": {
-        "connect": "1.8.x",
-        "dox": "0.3.x",
-        "drip": "0.2.x",
-        "fez": "0.0.x",
-        "highlight.js": "1.2.x",
-        "jade": "0.26.x",
-        "marked": "0.2.x",
-        "ncp": "0.2.x",
-        "nib": "0.4.x",
-        "oath": "0.2.x",
-        "optimist": "0.3.x",
-        "rimraf": "2.0.x",
-        "stylus": "0.26.x",
-        "tea": "0.0.x",
-        "yaml": "0.2.x"
-      },
-      "bin": {
-        "codex": "bin/codex"
-      },
-      "engines": {
-        "node": ">= 0.4.8"
-      }
-    },
-    "node_modules/codex/node_modules/marked": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmmirror.com/marked/-/marked-0.2.10.tgz",
-      "integrity": "sha512-LyFB4QvdBaJFfEIn33plrxtBuRjeHoDE2QJdP58i2EWMUTpa6GK6MnjJh3muCvVibFJompyr6IxecK2fjp4RDw==",
-      "bin": {
-        "marked": "bin/marked"
-      }
-    },
-    "node_modules/codex/node_modules/stylus": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmmirror.com/stylus/-/stylus-0.26.1.tgz",
-      "integrity": "sha512-33J3iBM2Ueh/wDFzkQXmjHSDxNRWQ7J2I2dqiInAKkGR4j+3hkojRRSbv3ITodxJBIodVfv0l10CHZhJoi0Ubw==",
-      "dependencies": {
-        "cssom": "0.2.x",
-        "debug": "*",
-        "mkdirp": "0.3.x"
-      },
-      "bin": {
-        "stylus": "bin/stylus"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/codex/node_modules/yaml": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-0.2.3.tgz",
-      "integrity": "sha512-LzdhmhritYCRww8GLH95Sk5A2c18ddRQMeooOUnqWkDUnBbmVfqgg2fXH2MxAHYHCVTHDK1EEbmgItQ8kOpM0Q==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -2174,24 +2084,12 @@
       "resolved": "https://registry.npmmirror.com/commander/-/commander-6.2.1.tgz",
       "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 6"
       }
     },
-    "node_modules/connect": {
-      "version": "1.8.7",
-      "resolved": "https://registry.npmmirror.com/connect/-/connect-1.8.7.tgz",
-      "integrity": "sha512-j72iQ8i6td2YLZD37ADpGOa4C5skHNrJSGQkJh/t+DCoE6nm8NbHslFTs17q44EJsiVrry+W13yrxd46M32jbA==",
-      "deprecated": "connect 1.x series is deprecated",
-      "dependencies": {
-        "formidable": "1.0.x",
-        "mime": ">= 0.0.1",
-        "qs": ">= 0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.4.1 < 0.7.0"
-      }
-    },
     "node_modules/copy-anything": {
       "version": "4.0.5",
       "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.0.5.tgz",
@@ -2255,14 +2153,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/cssom": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.2.5.tgz",
-      "integrity": "sha512-b9ecqKEfWrNcyzx5+1nmcfi80fPp8dVM8rlAh7fFK14PZbNjp++gRjyZTZfLJQa/Lw0qeCJho7WBIl0nw0v6HA==",
-      "engines": {
-        "node": ">=0.2.0"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
@@ -2280,6 +2170,8 @@
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -2388,48 +2280,6 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/dox": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmmirror.com/dox/-/dox-0.3.3.tgz",
-      "integrity": "sha512-5bSKbTcpFm+0wPRnxMkJhY5dFoWWxsTQdTLFg2d1HyLl0voy9GoBVVOKM+yPSdTdKCXrHqwEwUcdS7s4BTst7w==",
-      "dependencies": {
-        "commander": "0.6.1",
-        "github-flavored-markdown": ">= 0.0.1"
-      },
-      "bin": {
-        "dox": "bin/dox"
-      }
-    },
-    "node_modules/dox/node_modules/commander": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-0.6.1.tgz",
-      "integrity": "sha512-0fLycpl1UMTGX257hRsu/arL/cUbcvQM4zMKwvLvzXtfdezIV4yotPS2dYtknF+NmEfWSoCEF6+hj9XLm/6hEw==",
-      "engines": {
-        "node": ">= 0.4.x"
-      }
-    },
-    "node_modules/drip": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmmirror.com/drip/-/drip-0.2.4.tgz",
-      "integrity": "sha512-/qhB7CjfmfZYHue9SwicWNqsSp1DNzkHTCVsud92Tb43qKTiIAXBHIdCJYUn93r7MScM++H+nimkWPmvNTg/Qw==",
-      "engines": {
-        "node": ">= 0.4.8"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2483,36 +2333,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.27.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.27.2.tgz",
@@ -2611,14 +2431,6 @@
         }
       }
     },
-    "node_modules/fez": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmmirror.com/fez/-/fez-0.0.3.tgz",
-      "integrity": "sha512-W+igVHjiRB4ai7h25ay/7OYNwI8IihdABOnRIS3Bcm4UxEWKoenCB6m68HLSq41TxZwbnqzFAqlz/CjKB3rTvg==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/focus-trap": {
       "version": "7.8.0",
       "resolved": "https://registry.npmmirror.com/focus-trap/-/focus-trap-7.8.0.tgz",
@@ -2646,15 +2458,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/formidable": {
-      "version": "1.0.17",
-      "resolved": "https://registry.npmmirror.com/formidable/-/formidable-1.0.17.tgz",
-      "integrity": "sha512-95MFT5qipMvUiesmuvGP1BI4hh5XWCzyTapiNJ/k8JBQda7rPy7UCWYItz2uZEdTgGNy1eInjzlL9Wx1O9fedg==",
-      "deprecated": "Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -2669,61 +2472,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/github-flavored-markdown": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/github-flavored-markdown/-/github-flavored-markdown-1.0.1.tgz",
-      "integrity": "sha512-qkpFaYzQ+JbZw7iuZCpvjqas5E8ZNq/xuTtBtdPkAlowX8VXBmkZE2DCgNGCTW5KZsCvqX5lSef/2yrWMTztBQ==",
-      "deprecated": "This project is long out of date. Use 'marked' instead.",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/glob": {
       "version": "10.5.0",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-10.5.0.tgz",
@@ -2746,53 +2494,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-1.1.14.tgz",
-      "integrity": "sha512-JUrvoFoQbLZpOZilKTXZX2e1EV0DTnuG5vsRFNFv4mPf/mnYbwNAFw/5x0rxeyaJslIdObGSgTTsMnM/acRaVw==",
-      "deprecated": "please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js",
-      "license": "BSD",
-      "optional": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/hast-util-to-html": {
       "version": "9.0.5",
       "resolved": "https://registry.npmmirror.com/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
@@ -2829,21 +2530,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-1.2.0.tgz",
-      "integrity": "sha512-k19Rm9OuIGiZvD+0G2Lao6kPr01XMEbEK67/n+GqOMTgxc7HhgzfLzX71Q9j5Qu+bkzYXbPFHums8tl0dzV4Uw==",
-      "deprecated": "Version no longer supported. Upgrade to @latest",
-      "dependencies": {
-        "commander": "*"
-      },
-      "bin": {
-        "hljs": "bin/hljs"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
@@ -2946,27 +2632,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/jade": {
-      "version": "0.26.3",
-      "resolved": "https://registry.npmmirror.com/jade/-/jade-0.26.3.tgz",
-      "integrity": "sha512-mkk3vzUHFjzKjpCXeu+IjXeZD+QOTjUUdubgmHtHTDwvAO2ZTkMTTVrapts5CWz3JvJryh/4KWZpjeZrCepZ3A==",
-      "deprecated": "Jade has been renamed to pug, please install the latest version of pug instead of jade",
-      "dependencies": {
-        "commander": "0.6.1",
-        "mkdirp": "0.3.0"
-      },
-      "bin": {
-        "jade": "bin/jade"
-      }
-    },
-    "node_modules/jade/node_modules/commander": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-0.6.1.tgz",
-      "integrity": "sha512-0fLycpl1UMTGX257hRsu/arL/cUbcvQM4zMKwvLvzXtfdezIV4yotPS2dYtknF+NmEfWSoCEF6+hj9XLm/6hEw==",
-      "engines": {
-        "node": ">= 0.4.x"
-      }
-    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
@@ -3093,15 +2758,6 @@
       "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==",
       "dev": true
     },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/mathjax-full": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/mathjax-full/-/mathjax-full-3.2.1.tgz",
@@ -3253,6 +2909,8 @@
       "resolved": "https://registry.npmmirror.com/mime/-/mime-2.6.0.tgz",
       "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -3308,27 +2966,13 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/mkdirp": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.3.0.tgz",
-      "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
-      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
-      "license": "MIT/X11",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/nan": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/nan/-/nan-1.0.0.tgz",
-      "integrity": "sha512-Wm2/nFOm2y9HtJfgOLnctGbfvF23FcQZeyUZqDD8JQG3zO5kXh3MkQKiUaA68mJiVWrOzLFkAV1u6bC8P52DJA==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
@@ -3348,23 +2992,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/ncp": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmmirror.com/ncp/-/ncp-0.2.7.tgz",
-      "integrity": "sha512-wPUepcV37u3Mw+ktjrUbl3azxwAkcD9RrVLQGlpSapWcEQM5jL0g8zwKo6ukOjVQAAEjqpRdLeojOalqqySpCg==",
-      "license": "MIT",
-      "bin": {
-        "ncp": "bin/ncp"
-      }
-    },
-    "node_modules/nib": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/nib/-/nib-0.4.1.tgz",
-      "integrity": "sha512-q8n5RAcLLpA5YewcH9UplGzPTu4XbC6t9hVPB1RsnvKD5aYWT+V+2NHGH/dgw/6YDjgETEa7hY54kVhvn1i5DQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -3407,26 +3034,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/oath": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmmirror.com/oath/-/oath-0.2.3.tgz",
-      "integrity": "sha512-/uTqn2KKy671SunNXhULGbumn2U3ZN84LvYZdnfSqqqBkM6cppm+jcUodWELd9CYVNYGh6QwJEEAQ0WM95qjpA==",
-      "engines": {
-        "node": ">= 0.4.8"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/oniguruma-parser": {
       "version": "0.12.1",
       "resolved": "https://registry.npmmirror.com/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
@@ -3444,36 +3051,6 @@
         "regex-recursion": "^6.0.2"
       }
     },
-    "node_modules/optimist": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmmirror.com/optimist/-/optimist-0.3.7.tgz",
-      "integrity": "sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==",
-      "license": "MIT/X11",
-      "dependencies": {
-        "wordwrap": "~0.0.2"
-      }
-    },
-    "node_modules/options": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmmirror.com/options/-/options-0.0.6.tgz",
-      "integrity": "sha512-bOj3L1ypm++N+n7CEbbe473A414AB7z+amKYshRb//iuL3MpdDCLhPnw6aVTdKB9g5ZRVHIEp8eUln6L2NUStg==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/orchid": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmmirror.com/orchid/-/orchid-0.0.3.tgz",
-      "integrity": "sha512-jkbcOxPnbo9M0WZbvjvTKLY+2lhxyWnoJXKESHodJAD00bsqOe5YPrJZ2rjgBKJ4YIgmbKSMlsjNIZ8NNhXbOA==",
-      "dependencies": {
-        "drip": "0.2.x",
-        "oath": "0.2.x",
-        "ws": "0.4.x"
-      },
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -3608,21 +3185,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/qs": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.14.1.tgz",
-      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/react": {
       "version": "19.2.3",
       "resolved": "https://registry.npmmirror.com/react/-/react-19.2.3.tgz",
@@ -3663,16 +3225,6 @@
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "license": "MIT"
     },
-    "node_modules/rimraf": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-2.0.3.tgz",
-      "integrity": "sha512-uR09PSoW2+1hW0hquRqxb+Ae2h6R5ls3OAy2oNekQFtqbSJkltkhKRa+OhZKoxWsN9195Gp1vg7sELDRoJ8a3w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "license": "MIT",
-      "optionalDependencies": {
-        "graceful-fs": "~1.1"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.55.1",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.55.1.tgz",
@@ -3776,78 +3328,6 @@
         "@types/hast": "^3.0.4"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -4120,19 +3600,6 @@
       "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
       "license": "MIT"
     },
-    "node_modules/tea": {
-      "version": "0.0.13",
-      "resolved": "https://registry.npmmirror.com/tea/-/tea-0.0.13.tgz",
-      "integrity": "sha512-wpVkMmrK83yrwjnBYtN/GKzA0ixt1k68lq4g0s0H38fZTPHeApnToCVzpQgDEToNoBbviHQaOhXcMldHnM+XwQ==",
-      "dependencies": {
-        "drip": "0.2.x",
-        "oath": "0.2.x",
-        "orchid": "0.0.x"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/throttleit": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/throttleit/-/throttleit-2.1.0.tgz",
@@ -4145,14 +3612,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/tinycolor": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmmirror.com/tinycolor/-/tinycolor-0.0.1.tgz",
-      "integrity": "sha512-+CorETse1kl98xg0WAzii8DTT4ABF4R3nquhrkIbVGcw1T8JYs5Gfx9xEfGINPUZGDj9C4BmOtuKeaTtuuRolg==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -4620,15 +4079,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/wordwrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmmirror.com/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -4734,32 +4184,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ws": {
-      "version": "0.4.32",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-0.4.32.tgz",
-      "integrity": "sha512-htqsS0U9Z9lb3ITjidQkRvkLdVhQePrMeu475yEfOWkAYvJ6dSjQp1tOH6ugaddzX5b7sQjMPNtY71eTzrV/kA==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "commander": "~2.1.0",
-        "nan": "~1.0.0",
-        "options": ">=0.0.5",
-        "tinycolor": "0.x"
-      },
-      "bin": {
-        "wscat": "bin/wscat"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/ws/node_modules/commander": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.1.0.tgz",
-      "integrity": "sha512-J2wnb6TKniXNOtoHS8TSrG9IOQluPrsmyAJ8oCUJOBmv+uLBCyPYAZkD2jFvw2DCzIXNnISIM01NIvr35TkBMQ==",
-      "engines": {
-        "node": ">= 0.6.x"
-      }
-    },
     "node_modules/yaml": {
       "version": "2.8.2",
       "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.2.tgz",
diff --git a/package.json b/package.json
index b64879d..515373a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
     "claude": "^0.1.1",
-    "codex": "^0.2.3",
     "element-plus": "^2.13.1",
     "typeit": "^8.8.7",
     "viewerjs": "^1.11.7",