sanbuphy
ec9d52033f
Added comprehensive interactive demos covering: - Operating systems (2): OS overview, process/memory/filesystem - Data encoding (2): data lifecycle, encoding/storage/transmission - Network basics (5): overview, physical/data-link/transport/application layers - Data structures (5): overview, linear structures, hash table, tree, selector - Algorithms (4): overview, recursion, greedy thinking, paradigms - Programming languages (5): evolution, paradigms, scenarios, comparison, type models - Compilers (2): analogy, practice demo - Additional (5): search/sort algorithms, network principles, encoding basics, storage hierarchy, graph structures Also updated component registration in theme index.js and fixed minor formatting issues in related docs.
1256 lines
76 KiB
JavaScript
1256 lines
76 KiB
JavaScript
import DefaultTheme from 'vitepress/theme'
|
||
import ElementPlus from 'element-plus'
|
||
import 'element-plus/dist/index.css'
|
||
import Viewer from 'viewerjs'
|
||
import 'viewerjs/dist/viewer.css'
|
||
import TypeIt from 'typeit'
|
||
import { onMounted, watch, nextTick } from 'vue'
|
||
import { useRoute, useData } from 'vitepress'
|
||
import './style.css'
|
||
import Layout from './Layout.vue'
|
||
import HomeFeatures from './components/HomeFeatures.vue'
|
||
import NavGrid from './components/NavGrid.vue'
|
||
import NavCard from './components/NavCard.vue'
|
||
import CategoryIndex from './components/CategoryIndex.vue'
|
||
import ArticleGrid from './components/ArticleGrid.vue'
|
||
import StepBar from './components/StepBar.vue'
|
||
import ChapterIntroduction from './components/ChapterIntroduction.vue'
|
||
import ReadingProgress from './components/ReadingProgress.vue'
|
||
import SummaryCard from './components/SummaryCard.vue'
|
||
import WebTerminal from './components/appendix/terminal-intro/WebTerminal.vue'
|
||
import TerminalGrid from './components/appendix/terminal-intro/TerminalGrid.vue'
|
||
import CellInspector from './components/appendix/terminal-intro/CellInspector.vue'
|
||
import EscapeSequences from './components/appendix/terminal-intro/EscapeSequences.vue'
|
||
import InputVisualizer from './components/appendix/terminal-intro/InputVisualizer.vue'
|
||
import SignalsDemo from './components/appendix/terminal-intro/SignalsDemo.vue'
|
||
import FlowDiagram from './components/appendix/terminal-intro/FlowDiagram.vue'
|
||
import BufferSwitchDemo from './components/appendix/terminal-intro/BufferSwitchDemo.vue'
|
||
import AdvancedTUIDemo from './components/appendix/terminal-intro/AdvancedTUIDemo.vue'
|
||
import ArchitectureDemo from './components/appendix/terminal-intro/ArchitectureDemo.vue'
|
||
import TerminalDefinition from './components/appendix/terminal-intro/TerminalDefinition.vue'
|
||
import TerminalOSDemo from './components/appendix/terminal-intro/TerminalOSDemo.vue'
|
||
import TerminalHandsOn from './components/appendix/terminal-intro/TerminalHandsOn.vue'
|
||
|
||
import EscapeParserDemo from './components/appendix/terminal-intro/EscapeParserDemo.vue'
|
||
import CookedRawDemo from './components/appendix/terminal-intro/CookedRawDemo.vue'
|
||
|
||
// API Intro Components
|
||
import ApiQuickStartDemo from './components/appendix/api-intro/ApiQuickStartDemo.vue'
|
||
import ApiConceptDemo from './components/appendix/api-intro/ApiConceptDemo.vue'
|
||
import RequestResponseFlow from './components/appendix/api-intro/RequestResponseFlow.vue'
|
||
import ApiMethodDemo from './components/appendix/api-intro/ApiMethodDemo.vue'
|
||
import ApiDocumentDemo from './components/appendix/api-intro/ApiDocumentDemo.vue'
|
||
import ApiPlayground from './components/appendix/api-intro/ApiPlayground.vue'
|
||
import RealWorldApiDemo from './components/appendix/api-intro/RealWorldApiDemo.vue'
|
||
|
||
// LLM Intro Components
|
||
import EmbeddingDemo from './components/appendix/llm-intro/EmbeddingDemo.vue'
|
||
import LinearAttentionDemo from './components/appendix/llm-intro/LinearAttentionDemo.vue'
|
||
import LlmQuickStartDemo from './components/appendix/llm-intro/LlmQuickStartDemo.vue'
|
||
import MoEDemo from './components/appendix/llm-intro/MoEDemo.vue'
|
||
import NextTokenPrediction from './components/appendix/llm-intro/NextTokenPrediction.vue'
|
||
import RNNvsTransformer from './components/appendix/llm-intro/RNNvsTransformer.vue'
|
||
import ThinkingModelDemo from './components/appendix/llm-intro/ThinkingModelDemo.vue'
|
||
import TokenizationDemo from './components/appendix/llm-intro/TokenizationDemo.vue'
|
||
import TokenizerToMatrix from './components/appendix/llm-intro/TokenizerToMatrix.vue'
|
||
import TrainingInferenceDemo from './components/appendix/llm-intro/TrainingInferenceDemo.vue'
|
||
|
||
// VLM Intro Components
|
||
import AttentionDemo from './components/appendix/vlm-intro/AttentionDemo.vue'
|
||
import FeatureAlignmentDemo from './components/appendix/vlm-intro/FeatureAlignmentDemo.vue'
|
||
import LinearProjectionDemo from './components/appendix/vlm-intro/LinearProjectionDemo.vue'
|
||
import ModelArchitectureComparisonDemo from './components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue'
|
||
import PatchifyDemo from './components/appendix/vlm-intro/PatchifyDemo.vue'
|
||
import PositionalEmbeddingDemo from './components/appendix/vlm-intro/PositionalEmbeddingDemo.vue'
|
||
import ProjectorDemo from './components/appendix/vlm-intro/ProjectorDemo.vue'
|
||
import TrainingPipelineDemo from './components/appendix/vlm-intro/TrainingPipelineDemo.vue'
|
||
import VLMInferenceDemo from './components/appendix/vlm-intro/VLMInferenceDemo.vue'
|
||
import ViTOutputDemo from './components/appendix/vlm-intro/ViTOutputDemo.vue'
|
||
import VlmQuickStartDemo from './components/appendix/vlm-intro/VlmQuickStartDemo.vue'
|
||
|
||
// Image Gen Intro Components
|
||
import ImageGenArchitecture from './components/appendix/image-gen-intro/ImageGenArchitecture.vue'
|
||
import LatentSpaceViz from './components/appendix/image-gen-intro/LatentSpaceViz.vue'
|
||
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'
|
||
import AudioTokenizationDemo from './components/appendix/audio-intro/AudioTokenizationDemo.vue'
|
||
import SpectrogramViz from './components/appendix/audio-intro/SpectrogramViz.vue'
|
||
import AutoregressiveAudioDemo from './components/appendix/audio-intro/AutoregressiveAudioDemo.vue'
|
||
import AudioQuickStartDemo from './components/appendix/audio-intro/AudioQuickStartDemo.vue'
|
||
import MelSpectrogramDemo from './components/appendix/audio-intro/MelSpectrogramDemo.vue'
|
||
import TTSPipelineDemo from './components/appendix/audio-intro/TTSPipelineDemo.vue'
|
||
import VoiceCloningDemo from './components/appendix/audio-intro/VoiceCloningDemo.vue'
|
||
import ASRvsTTSDemo from './components/appendix/audio-intro/ASRvsTTSDemo.vue'
|
||
import EmotionControlDemo from './components/appendix/audio-intro/EmotionControlDemo.vue'
|
||
|
||
// Web Basics Components
|
||
import WebTechTriad from './components/appendix/web-basics/WebTechTriad.vue'
|
||
import UrlToBrowserDemo from './components/appendix/web-basics/UrlToBrowserDemo.vue'
|
||
// Git Intro Components
|
||
import GitWorkflowDemo from './components/appendix/git-intro/GitWorkflowDemo.vue'
|
||
import GitThreeAreasDemo from './components/appendix/git-intro/GitThreeAreasDemo.vue'
|
||
import GitStorageDemo from './components/appendix/git-intro/GitStorageDemo.vue'
|
||
import GitCommandDemo from './components/appendix/git-intro/GitCommandDemo.vue'
|
||
import GitBranchMergeDemo from './components/appendix/git-intro/GitBranchMergeDemo.vue'
|
||
import GitConflictDemo from './components/appendix/git-intro/GitConflictDemo.vue'
|
||
import GitStashDemo from './components/appendix/git-intro/GitStashDemo.vue'
|
||
import GitRemoteDemo from './components/appendix/git-intro/GitRemoteDemo.vue'
|
||
import GitScenariosDemo from './components/appendix/git-intro/GitScenariosDemo.vue'
|
||
// （保留网络相关，未修改）
|
||
import NetworkLayers from './components/appendix/web-basics/NetworkLayers.vue'
|
||
import TcpUdpComparison from './components/appendix/web-basics/TcpUdpComparison.vue'
|
||
import SubnetCalculator from './components/appendix/web-basics/SubnetCalculator.vue'
|
||
import NetworkTroubleshooting from './components/appendix/web-basics/NetworkTroubleshooting.vue'
|
||
|
||
// Computer Fundamentals Components
|
||
import TransistorDemo from './components/appendix/computer-fundamentals/TransistorDemo.vue'
|
||
import LogicGateDemo from './components/appendix/computer-fundamentals/LogicGateDemo.vue'
|
||
import AdderDemo from './components/appendix/computer-fundamentals/AdderDemo.vue'
|
||
import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
|
||
import ProcessDemo from './components/appendix/computer-fundamentals/ProcessDemo.vue'
|
||
import MemoryDemo from './components/appendix/computer-fundamentals/MemoryDemo.vue'
|
||
import FilesystemDemo from './components/appendix/computer-fundamentals/FilesystemDemo.vue'
|
||
import EncodingDemo from './components/appendix/computer-fundamentals/EncodingDemo.vue'
|
||
import StorageDemo from './components/appendix/computer-fundamentals/StorageDemo.vue'
|
||
import TransmissionDemo from './components/appendix/computer-fundamentals/TransmissionDemo.vue'
|
||
import DataStructureDemo from './components/appendix/computer-fundamentals/DataStructureDemo.vue'
|
||
import AlgorithmDemo from './components/appendix/computer-fundamentals/AlgorithmDemo.vue'
|
||
import LanguageMapDemo from './components/appendix/computer-fundamentals/LanguageMapDemo.vue'
|
||
import TypeSystemDemo from './components/appendix/computer-fundamentals/TypeSystemDemo.vue'
|
||
import CompilerDemo from './components/appendix/computer-fundamentals/CompilerDemo.vue'
|
||
import CFNetworkLayers from './components/appendix/computer-fundamentals/NetworkLayers.vue'
|
||
import CFSubnetCalculator from './components/appendix/computer-fundamentals/SubnetCalculator.vue'
|
||
import CFTcpUdpComparison from './components/appendix/computer-fundamentals/TcpUdpComparison.vue'
|
||
|
||
// Computer Fundamentals Additional Components
|
||
import OSSystemOverviewDemo from './components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue'
|
||
import ProcessMemoryFilesystemDemo from './components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue'
|
||
import DataLifecycleDemo from './components/appendix/computer-fundamentals/DataLifecycleDemo.vue'
|
||
import EncodingStorageTransmissionDemo from './components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue'
|
||
import NetworkOverviewDemo from './components/appendix/computer-fundamentals/NetworkOverviewDemo.vue'
|
||
import PhysicalLayerDemo from './components/appendix/computer-fundamentals/PhysicalLayerDemo.vue'
|
||
import DataLinkLayerDemo from './components/appendix/computer-fundamentals/DataLinkLayerDemo.vue'
|
||
import TransportLayerDemo from './components/appendix/computer-fundamentals/TransportLayerDemo.vue'
|
||
import ApplicationLayerDemo from './components/appendix/computer-fundamentals/ApplicationLayerDemo.vue'
|
||
import DataStructureOverviewDemo from './components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue'
|
||
import LinearStructuresDemo from './components/appendix/computer-fundamentals/LinearStructuresDemo.vue'
|
||
import HashTableDemo from './components/appendix/computer-fundamentals/HashTableDemo.vue'
|
||
import TreeStructureDemo from './components/appendix/computer-fundamentals/TreeStructureDemo.vue'
|
||
import DataStructureSelectorDemo from './components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue'
|
||
import AlgorithmOverviewDemo from './components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue'
|
||
import RecursiveThinkingDemo from './components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue'
|
||
import GreedyThinkingDemo from './components/appendix/computer-fundamentals/GreedyThinkingDemo.vue'
|
||
import AlgorithmParadigmDemo from './components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue'
|
||
import LanguageEvolutionDemo from './components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue'
|
||
import ProgrammingParadigmDemo from './components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue'
|
||
import LanguageScenarioDemo from './components/appendix/computer-fundamentals/LanguageScenarioDemo.vue'
|
||
import ProgrammingLanguageComparisonDemo from './components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue'
|
||
import CompilerAnalogyDemo from './components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue'
|
||
import SearchAlgorithmDemo from './components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue'
|
||
import SortingAlgorithmDemo from './components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue'
|
||
import NetworkPrincipleDemo from './components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue'
|
||
import DataEncodingBasicsDemo from './components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue'
|
||
import StorageHierarchyDemo from './components/appendix/computer-fundamentals/StorageHierarchyDemo.vue'
|
||
import GraphStructureDemo from './components/appendix/computer-fundamentals/GraphStructureDemo.vue'
|
||
import LanguageTypeModelDemo from './components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue'
|
||
import CompilationPracticeDemo from './components/appendix/computer-fundamentals/CompilationPracticeDemo.vue'
|
||
|
||
// Deployment appendix components
|
||
import DeploymentOverviewDemo from './components/appendix/deployment/DeploymentOverviewDemo.vue'
|
||
import DeploymentBuildDemo from './components/appendix/deployment/DeploymentBuildDemo.vue'
|
||
import DeploymentServerDemo from './components/appendix/deployment/DeploymentServerDemo.vue'
|
||
import DeploymentDnsDemo from './components/appendix/deployment/DeploymentDnsDemo.vue'
|
||
import DeploymentHttpsDemo from './components/appendix/deployment/DeploymentHttpsDemo.vue'
|
||
import DeploymentCicdDemo from './components/appendix/deployment/DeploymentCicdDemo.vue'
|
||
import DeploymentMonitorDemo from './components/appendix/deployment/DeploymentMonitorDemo.vue'
|
||
import CssBoxModel from './components/appendix/web-basics/CssBoxModel.vue'
|
||
import CssFlexbox from './components/appendix/web-basics/CssFlexbox.vue'
|
||
import CssLayoutDemo from './components/appendix/web-basics/CssLayoutDemo.vue'
|
||
import CssPlaygroundDemo from './components/appendix/web-basics/CssPlaygroundDemo.vue'
|
||
import CssCommonProperties from './components/appendix/web-basics/CssCommonProperties.vue'
|
||
import CssSelectorsDemo from './components/appendix/web-basics/CssSelectorsDemo.vue'
|
||
import DomManipulator from './components/appendix/web-basics/DomManipulator.vue'
|
||
import SemanticTagsDemo from './components/appendix/web-basics/SemanticTagsDemo.vue'
|
||
import DnsLookupDemo from './components/appendix/web-basics/DnsLookupDemo.vue'
|
||
import TcpHandshakeDemo from './components/appendix/web-basics/TcpHandshakeDemo.vue'
|
||
import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue'
|
||
import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue'
|
||
import BrowserRenderingDemo from './components/appendix/web-basics/BrowserRenderingDemo.vue'
|
||
|
||
// URL to Browser Components
|
||
import UrlToBrowserQuickStart from './components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
|
||
import FrontendEvolutionDemo from './components/appendix/web-basics/FrontendEvolutionDemo.vue'
|
||
import SliceRequestDemo from './components/appendix/web-basics/SliceRequestDemo.vue'
|
||
import ResponsiveGridDemo from './components/appendix/web-basics/ResponsiveGridDemo.vue'
|
||
import JQueryVsStateDemo from './components/appendix/web-basics/JQueryVsStateDemo.vue'
|
||
import VueReactComparisonDemo from './components/appendix/web-basics/VueReactComparisonDemo.vue'
|
||
import RoutingModeDemo from './components/appendix/web-basics/RoutingModeDemo.vue'
|
||
import SpaStatePreservationDemo from './components/appendix/web-basics/SpaStatePreservationDemo.vue'
|
||
import BundlerSizeDemo from './components/appendix/web-basics/BundlerSizeDemo.vue'
|
||
import RenderingStrategyDemo from './components/appendix/web-basics/RenderingStrategyDemo.vue'
|
||
import BigFrontendScopeDemo from './components/appendix/web-basics/BigFrontendScopeDemo.vue'
|
||
import AiEvolutionDemo from './components/appendix/ai-history/AiEvolutionDemo.vue'
|
||
import RuleBasedVsLearningDemo from './components/appendix/ai-history/RuleBasedVsLearningDemo.vue'
|
||
import PerceptronDemo from './components/appendix/ai-history/PerceptronDemo.vue'
|
||
import AIEvolutionTimelineDemo from './components/appendix/ai-history/AIEvolutionTimelineDemo.vue'
|
||
import CombinatorialExplosionDemo from './components/appendix/ai-history/CombinatorialExplosionDemo.vue'
|
||
import NeuralNetworkVisualizationDemo from './components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue'
|
||
import BackpropagationDemo from './components/appendix/ai-history/BackpropagationDemo.vue'
|
||
import AttentionMechanismDemo from './components/appendix/ai-history/AttentionMechanismDemo.vue'
|
||
import DiscriminativeVsGenerativeDemo from './components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue'
|
||
import GPTEvolutionDemo from './components/appendix/ai-history/GPTEvolutionDemo.vue'
|
||
|
||
import ImperativeVsDeclarativeDemo from './components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue'
|
||
import ComponentReusabilityDemo from './components/appendix/web-basics/ComponentReusabilityDemo.vue'
|
||
|
||
// Frontend Evolution Components
|
||
import FrontendEvolutionTimelineDemo from './components/appendix/frontend-evolution/FrontendEvolutionDemo.vue'
|
||
import EvolutionSliceRequestDemo from './components/appendix/frontend-evolution/SliceRequestDemo.vue'
|
||
import EvolutionResponsiveGridDemo from './components/appendix/frontend-evolution/ResponsiveGridDemo.vue'
|
||
import EvolutionJQueryVsStateDemo from './components/appendix/frontend-evolution/JQueryVsStateDemo.vue'
|
||
import EvolutionRoutingModeDemo from './components/appendix/frontend-evolution/RoutingModeDemo.vue'
|
||
import EvolutionRenderingStrategyDemo from './components/appendix/frontend-evolution/RenderingStrategyDemo.vue'
|
||
import EvolutionImperativeVsDeclarativeDemo from './components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.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'
|
||
import MicroserviceLatencyDemo from './components/appendix/backend-evolution/MicroserviceLatencyDemo.vue'
|
||
import CacheHitRatioDemo from './components/appendix/backend-evolution/CacheHitRatioDemo.vue'
|
||
import ServerlessCostAutoScaleDemo from './components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue'
|
||
|
||
// Frontend Performance Components
|
||
import PerformanceMetricsDemo from './components/appendix/frontend-performance/PerformanceMetricsDemo.vue'
|
||
import PerformanceOverviewDemo from './components/appendix/frontend-performance/PerformanceOverviewDemo.vue'
|
||
import ReflowRepaintDemo from './components/appendix/frontend-performance/ReflowRepaintDemo.vue'
|
||
import ImageOptimizationDemo from './components/appendix/frontend-performance/ImageOptimizationDemo.vue'
|
||
import LazyLoadingDemo from './components/appendix/frontend-performance/LazyLoadingDemo.vue'
|
||
import CachingStrategyDemo from './components/appendix/frontend-performance/CachingStrategyDemo.vue'
|
||
import CriticalRenderingPathDemo from './components/appendix/frontend-performance/CriticalRenderingPathDemo.vue'
|
||
import VirtualScrollingDemo from './components/appendix/frontend-performance/VirtualScrollingDemo.vue'
|
||
|
||
// Canvas Intro Components
|
||
import CanvasBasicsDemo from './components/appendix/canvas-intro/CanvasBasicsDemo.vue'
|
||
import CoordinateSystemDemo from './components/appendix/canvas-intro/CoordinateSystemDemo.vue'
|
||
import AnimationLoopDemo from './components/appendix/canvas-intro/AnimationLoopDemo.vue'
|
||
import EventHandlingDemo from './components/appendix/canvas-intro/EventHandlingDemo.vue'
|
||
import ParticleSystemDemo from './components/appendix/canvas-intro/ParticleSystemDemo.vue'
|
||
import PerformanceDemo from './components/appendix/canvas-intro/PerformanceDemo.vue'
|
||
|
||
// Cache Design Components
|
||
import CacheArchitectureDemo from './components/appendix/cache-design/CacheArchitectureDemo.vue'
|
||
import LocalityPrincipleDemo from './components/appendix/cache-design/LocalityPrincipleDemo.vue'
|
||
import CacheLifecycleDemo from './components/appendix/cache-design/CacheLifecycleDemo.vue'
|
||
import LocalVsDistributedCacheDemo from './components/appendix/cache-design/LocalVsDistributedCacheDemo.vue'
|
||
import MultiLevelCacheDemo from './components/appendix/cache-design/MultiLevelCacheDemo.vue'
|
||
import CachePatternsDemo from './components/appendix/cache-design/CachePatternsDemo.vue'
|
||
import CacheProblemsDemo from './components/appendix/cache-design/CacheProblemsDemo.vue'
|
||
import ProductCacheDemo from './components/appendix/cache-design/ProductCacheDemo.vue'
|
||
|
||
// Auth Design Components
|
||
import AuthEvolutionDemo from './components/appendix/auth-design/AuthEvolutionDemo.vue'
|
||
import AuthBasicsDemo from './components/appendix/auth-design/AuthBasicsDemo.vue'
|
||
import AuthInteractiveLoginDemo from './components/appendix/auth-design/AuthInteractiveLoginDemo.vue'
|
||
import AuthNvsAuthZDemo from './components/appendix/auth-design/AuthNvsAuthZDemo.vue'
|
||
import SessionCookieDemo from './components/appendix/auth-design/SessionCookieDemo.vue'
|
||
import JWTWorkflowDemo from './components/appendix/auth-design/JWTWorkflowDemo.vue'
|
||
import SessionVsJWTDemo from './components/appendix/auth-design/SessionVsJWTDemo.vue'
|
||
import OAuth2FlowDemo from './components/appendix/auth-design/OAuth2FlowDemo.vue'
|
||
import PasswordHashingDemo from './components/appendix/auth-design/PasswordHashingDemo.vue'
|
||
import CSRFDefenseDemo from './components/appendix/auth-design/CSRFDefenseDemo.vue'
|
||
|
||
// Queue Design Components
|
||
import MessageQueueDemo from './components/appendix/queue-design/MessageQueueDemo.vue'
|
||
import PeakShavingDemo from './components/appendix/queue-design/PeakShavingDemo.vue'
|
||
import MessageQueueComponentsDemo from './components/appendix/queue-design/MessageQueueComponentsDemo.vue'
|
||
import PointToPointVsPubSubDemo from './components/appendix/queue-design/PointToPointVsPubSubDemo.vue'
|
||
import MessageQueueComparisonDemo from './components/appendix/queue-design/MessageQueueComparisonDemo.vue'
|
||
import CouplingDemo from './components/appendix/queue-design/CouplingDemo.vue'
|
||
import DecouplingDemo from './components/appendix/queue-design/DecouplingDemo.vue'
|
||
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'
|
||
import PromptComparisonDemo from './components/appendix/prompt-engineering/PromptComparisonDemo.vue'
|
||
import FewShotDemo from './components/appendix/prompt-engineering/FewShotDemo.vue'
|
||
import ChainOfThoughtDemo from './components/appendix/prompt-engineering/ChainOfThoughtDemo.vue'
|
||
import PromptTemplatesDemo from './components/appendix/prompt-engineering/PromptTemplatesDemo.vue'
|
||
import PromptRobustnessDemo from './components/appendix/prompt-engineering/PromptRobustnessDemo.vue'
|
||
import PromptSecurityDemo from './components/appendix/prompt-engineering/PromptSecurityDemo.vue'
|
||
import TrainingProcessDemo from './components/appendix/prompt-engineering/TrainingProcessDemo.vue'
|
||
|
||
// Context Engineering Components
|
||
import AgentContextFlow from './components/appendix/context-engineering/AgentContextFlow.vue'
|
||
import IntroProblemReasonSolution from './components/appendix/context-engineering/IntroProblemReasonSolution.vue'
|
||
import ContextWindowVisualizer from './components/appendix/context-engineering/ContextWindowVisualizer.vue'
|
||
import SlidingWindowDemo from './components/appendix/context-engineering/SlidingWindowDemo.vue'
|
||
import SelectiveContextDemo from './components/appendix/context-engineering/SelectiveContextDemo.vue'
|
||
import RAGSimulationDemo from './components/appendix/context-engineering/RAGSimulationDemo.vue'
|
||
import ContextCompressionDemo from './components/appendix/context-engineering/ContextCompressionDemo.vue'
|
||
import MemoryPalaceDemo from './components/appendix/context-engineering/MemoryPalaceDemo.vue'
|
||
import MemoryPalaceActionDemo from './components/appendix/context-engineering/MemoryPalaceActionDemo.vue'
|
||
import KVCacheDemo from './components/appendix/context-engineering/KVCacheDemo.vue'
|
||
import LostInMiddleDemo from './components/appendix/context-engineering/LostInMiddleDemo.vue'
|
||
|
||
// Frontend Engineering Components
|
||
import BuildPipelineDemo from './components/appendix/frontend-engineering/BuildPipelineDemo.vue'
|
||
import BundlerComparisonDemo from './components/appendix/frontend-engineering/BundlerComparisonDemo.vue'
|
||
import TreeShakingDemo from './components/appendix/frontend-engineering/TreeShakingDemo.vue'
|
||
import CodeSplittingDemo from './components/appendix/frontend-engineering/CodeSplittingDemo.vue'
|
||
import HotReloadDemo from './components/appendix/frontend-engineering/HotReloadDemo.vue'
|
||
import DependencyGraphDemo from './components/appendix/frontend-engineering/DependencyGraphDemo.vue'
|
||
import SourceMapDemo from './components/appendix/frontend-engineering/SourceMapDemo.vue'
|
||
import AssetFingerprintDemo from './components/appendix/frontend-engineering/AssetFingerprintDemo.vue'
|
||
|
||
// Frontend Routing Components
|
||
import HashVsHistoryDemo from './components/appendix/frontend-routing/HashVsHistoryDemo.vue'
|
||
import DynamicRoutesDemo from './components/appendix/frontend-routing/DynamicRoutesDemo.vue'
|
||
import MpaRoutingDemo from './components/appendix/frontend-routing/MpaRoutingDemo.vue'
|
||
import NestedRoutesDemo from './components/appendix/frontend-routing/NestedRoutesDemo.vue'
|
||
import RouteGuardsDemo from './components/appendix/frontend-routing/RouteGuardsDemo.vue'
|
||
import RouteMatchingDemo from './components/appendix/frontend-routing/RouteMatchingDemo.vue'
|
||
import RouterArchitectureDemo from './components/appendix/frontend-routing/RouterArchitectureDemo.vue'
|
||
import RoutingModesDemo from './components/appendix/frontend-routing/RoutingModesDemo.vue'
|
||
import SpaNavigationDemo from './components/appendix/frontend-routing/SpaNavigationDemo.vue'
|
||
|
||
// Agent Intro Components
|
||
import AgentWorkflowDemo from './components/appendix/agent-intro/AgentWorkflowDemo.vue'
|
||
import AgentLevelDemo from './components/appendix/agent-intro/AgentLevelDemo.vue'
|
||
import AgentArchitectureDemo from './components/appendix/agent-intro/AgentArchitectureDemo.vue'
|
||
import AgentTaskFlowDemo from './components/appendix/agent-intro/AgentTaskFlowDemo.vue'
|
||
import FrameworkComparisonDemo from './components/appendix/agent-intro/FrameworkComparisonDemo.vue'
|
||
import FrameworkSelectionDemo from './components/appendix/agent-intro/FrameworkSelectionDemo.vue'
|
||
import AgentChallengesDemo from './components/appendix/agent-intro/AgentChallengesDemo.vue'
|
||
import AgentFutureDemo from './components/appendix/agent-intro/AgentFutureDemo.vue'
|
||
import AgentQuickStartDemo from './components/appendix/agent-intro/AgentQuickStartDemo.vue'
|
||
import AgentToolUseDemo from './components/appendix/agent-intro/AgentToolUseDemo.vue'
|
||
import AgentPlanningDemo from './components/appendix/agent-intro/AgentPlanningDemo.vue'
|
||
import AgentMemoryDemo from './components/appendix/agent-intro/AgentMemoryDemo.vue'
|
||
import AgentMultiToolPrinciple from './components/appendix/agent-intro/AgentMultiToolPrinciple.vue'
|
||
import AgentMemoryPrinciple from './components/appendix/agent-intro/AgentMemoryPrinciple.vue'
|
||
|
||
// Database Intro Components
|
||
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'
|
||
import IdeArchitectureDemo from './components/appendix/ide-intro/IdeArchitectureDemo.vue'
|
||
import AiHelpDemo from './components/appendix/ide-intro/AiHelpDemo.vue'
|
||
import BrowserDevToolsDemo from './components/appendix/browser-devtools/BrowserDevToolsDemo.vue'
|
||
import BrowserDevToolsLiveDemo from './components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue'
|
||
import DevToolsElementsDemo from './components/appendix/browser-devtools/DevToolsElementsDemo.vue'
|
||
import DevToolsConsoleDemo from './components/appendix/browser-devtools/DevToolsConsoleDemo.vue'
|
||
import DevToolsNetworkDemo from './components/appendix/browser-devtools/DevToolsNetworkDemo.vue'
|
||
import DevToolsSourcesDemo from './components/appendix/browser-devtools/DevToolsSourcesDemo.vue'
|
||
import DevToolsApplicationDemo from './components/appendix/browser-devtools/DevToolsApplicationDemo.vue'
|
||
|
||
// Tracking Design Components
|
||
import TrackingOverviewDemo from './components/appendix/tracking-design/TrackingOverviewDemo.vue'
|
||
import TrackingTypesDemo from './components/appendix/tracking-design/TrackingTypesDemo.vue'
|
||
import TrackingMethodsComparisonDemo from './components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue'
|
||
import DataModelDesignDemo from './components/appendix/tracking-design/DataModelDesignDemo.vue'
|
||
import DataCollectionDemo from './components/appendix/tracking-design/DataCollectionDemo.vue'
|
||
import DataPipelineDemo from './components/appendix/tracking-design/DataPipelineDemo.vue'
|
||
import PrivacyComplianceDemo from './components/appendix/tracking-design/PrivacyComplianceDemo.vue'
|
||
import RealWorldCaseDemo from './components/appendix/tracking-design/RealWorldCaseDemo.vue'
|
||
import ToolSelectionDemo from './components/appendix/tracking-design/ToolSelectionDemo.vue'
|
||
|
||
// Operations Components
|
||
import MonitoringDashboardDemo from './components/appendix/operations/MonitoringDashboardDemo.vue'
|
||
import AlertFlowDemo from './components/appendix/operations/AlertFlowDemo.vue'
|
||
import TraceVisualizationDemo from './components/appendix/operations/TraceVisualizationDemo.vue'
|
||
import IncidentResponseDemo from './components/appendix/operations/IncidentResponseDemo.vue'
|
||
import CapacityPlanningDemo from './components/appendix/operations/CapacityPlanningDemo.vue'
|
||
|
||
// Backend Languages Components
|
||
import BackendLanguagesDemo from './components/appendix/backend-languages/BackendLanguagesDemo.vue'
|
||
import LanguageComparisonDemo from './components/appendix/backend-languages/LanguageComparisonDemo.vue'
|
||
import PerformanceBenchmarkDemo from './components/appendix/backend-languages/PerformanceBenchmarkDemo.vue'
|
||
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'
|
||
|
||
// Cloud Services Simple Components (new)
|
||
import CloudServicesOverview from './components/appendix/cloud-services/CloudServicesOverview.vue'
|
||
import ProviderComparison from './components/appendix/cloud-services/ProviderComparison.vue'
|
||
import PricingCalculator from './components/appendix/cloud-services/PricingCalculator.vue'
|
||
import ComputeInstanceDemo from './components/appendix/cloud-services/ComputeInstanceDemo.vue'
|
||
import StorageTypeDemo from './components/appendix/cloud-services/StorageTypeDemo.vue'
|
||
import ApiCallDemo from './components/appendix/cloud-services/ApiCallDemo.vue'
|
||
import CloudHistoryDemo from './components/appendix/cloud-services/CloudHistoryDemo.vue'
|
||
import DeployWorkflowDemo from './components/appendix/cloud-services/DeployWorkflowDemo.vue'
|
||
import RegionLatencyDemo from './components/appendix/cloud-services/RegionLatencyDemo.vue'
|
||
|
||
// Cloud IAM Simple Components (new)
|
||
import IAMStructure from './components/appendix/cloud-iam/IAMStructure.vue'
|
||
import PolicyEditorDemo from './components/appendix/cloud-iam/PolicyEditorDemo.vue'
|
||
|
||
// Gateway Proxy Components
|
||
import ReverseProxyDemo from './components/appendix/gateway-proxy/ReverseProxyDemo.vue'
|
||
import ApiGatewayDemo from './components/appendix/gateway-proxy/ApiGatewayDemo.vue'
|
||
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'
|
||
import RenderingPipelineDemo from './components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.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'
|
||
|
||
// JavaScript Intro Components
|
||
import VariableBoxDemo from './components/appendix/javascript-intro/VariableBoxDemo.vue'
|
||
import ReferenceDemo from './components/appendix/javascript-intro/ReferenceDemo.vue'
|
||
import FunctionMachineDemo from './components/appendix/javascript-intro/FunctionMachineDemo.vue'
|
||
import ScopeDemo from './components/appendix/javascript-intro/ScopeDemo.vue'
|
||
import ClosureDemo from './components/appendix/javascript-intro/ClosureDemo.vue'
|
||
import DOMTreeDemo from './components/appendix/javascript-intro/DOMTreeDemo.vue'
|
||
import AsyncRestaurantDemo from './components/appendix/javascript-intro/AsyncRestaurantDemo.vue'
|
||
import JSEventLoopDemo from './components/appendix/javascript-intro/JSEventLoopDemo.vue'
|
||
import VariableScopeDemo from './components/appendix/javascript-intro/VariableScopeDemo.vue'
|
||
import DataTypeDemo from './components/appendix/javascript-intro/DataTypeDemo.vue'
|
||
import ThisContextDemo from './components/appendix/javascript-intro/ThisContextDemo.vue'
|
||
import PrototypeDemo from './components/appendix/javascript-intro/PrototypeDemo.vue'
|
||
import AsyncDemo from './components/appendix/javascript-intro/AsyncDemo.vue'
|
||
|
||
// JavaScript Runtime Components
|
||
import RuntimeEnvironmentDemo from './components/appendix/js-runtime/RuntimeEnvironmentDemo.vue'
|
||
import CallStackDemo from './components/appendix/js-runtime/CallStackDemo.vue'
|
||
import TaskQueueDemo from './components/appendix/js-runtime/TaskQueueDemo.vue'
|
||
import MemoryLeakDemo from './components/appendix/js-runtime/MemoryLeakDemo.vue'
|
||
import GarbageCollectionDemo from './components/appendix/js-runtime/GarbageCollectionDemo.vue'
|
||
|
||
// TypeScript Intro Components
|
||
import TypeAnnotationDemo from './components/appendix/typescript-intro/TypeAnnotationDemo.vue'
|
||
import InterfaceDemo from './components/appendix/typescript-intro/InterfaceDemo.vue'
|
||
import GenericDemo from './components/appendix/typescript-intro/GenericDemo.vue'
|
||
import TypeInferenceDemo from './components/appendix/typescript-intro/TypeInferenceDemo.vue'
|
||
|
||
export default {
|
||
extends: DefaultTheme,
|
||
Layout,
|
||
enhanceApp({ app }) {
|
||
app.use(ElementPlus)
|
||
app.component('HomeFeatures', HomeFeatures)
|
||
app.component('NavGrid', NavGrid)
|
||
app.component('NavCard', NavCard)
|
||
app.component('CategoryIndex', CategoryIndex)
|
||
app.component('ArticleGrid', ArticleGrid)
|
||
app.component('StepBar', StepBar)
|
||
app.component('ChapterIntroduction', ChapterIntroduction)
|
||
app.component('ReadingProgress', ReadingProgress)
|
||
app.component('SummaryCard', SummaryCard)
|
||
app.component('WebTerminal', WebTerminal)
|
||
app.component('TerminalGrid', TerminalGrid)
|
||
app.component('CellInspector', CellInspector)
|
||
app.component('EscapeSequences', EscapeSequences)
|
||
app.component('EscapeParserDemo', EscapeParserDemo)
|
||
app.component('CookedRawDemo', CookedRawDemo)
|
||
app.component('InputVisualizer', InputVisualizer)
|
||
app.component('SignalsDemo', SignalsDemo)
|
||
app.component('FlowDiagram', FlowDiagram)
|
||
app.component('BufferSwitchDemo', BufferSwitchDemo)
|
||
app.component('AdvancedTUIDemo', AdvancedTUIDemo)
|
||
app.component('ArchitectureDemo', ArchitectureDemo)
|
||
app.component('TerminalDefinition', TerminalDefinition)
|
||
app.component('TerminalOSDemo', TerminalOSDemo)
|
||
app.component('TerminalHandsOn', TerminalHandsOn)
|
||
|
||
// API Intro Components Registration
|
||
app.component('ApiQuickStartDemo', ApiQuickStartDemo)
|
||
app.component('ApiConceptDemo', ApiConceptDemo)
|
||
app.component('RequestResponseFlow', RequestResponseFlow)
|
||
app.component('ApiMethodDemo', ApiMethodDemo)
|
||
app.component('ApiDocumentDemo', ApiDocumentDemo)
|
||
app.component('ApiPlayground', ApiPlayground)
|
||
app.component('RealWorldApiDemo', RealWorldApiDemo)
|
||
|
||
// LLM Intro Components Registration
|
||
app.component('EmbeddingDemo', EmbeddingDemo)
|
||
app.component('LinearAttentionDemo', LinearAttentionDemo)
|
||
app.component('LlmQuickStartDemo', LlmQuickStartDemo)
|
||
app.component('MoEDemo', MoEDemo)
|
||
app.component('NextTokenPrediction', NextTokenPrediction)
|
||
app.component('RNNvsTransformer', RNNvsTransformer)
|
||
app.component('ThinkingModelDemo', ThinkingModelDemo)
|
||
app.component('TokenizationDemo', TokenizationDemo)
|
||
app.component('TokenizerToMatrix', TokenizerToMatrix)
|
||
app.component('TrainingInferenceDemo', TrainingInferenceDemo)
|
||
|
||
// VLM Intro Components Registration
|
||
app.component('AttentionDemo', AttentionDemo)
|
||
app.component('FeatureAlignmentDemo', FeatureAlignmentDemo)
|
||
app.component('LinearProjectionDemo', LinearProjectionDemo)
|
||
app.component(
|
||
'ModelArchitectureComparisonDemo',
|
||
ModelArchitectureComparisonDemo
|
||
)
|
||
app.component('PatchifyDemo', PatchifyDemo)
|
||
app.component('PositionalEmbeddingDemo', PositionalEmbeddingDemo)
|
||
app.component('ProjectorDemo', ProjectorDemo)
|
||
app.component('TrainingPipelineDemo', TrainingPipelineDemo)
|
||
app.component('VLMInferenceDemo', VLMInferenceDemo)
|
||
app.component('ViTOutputDemo', ViTOutputDemo)
|
||
app.component('VlmQuickStartDemo', VlmQuickStartDemo)
|
||
|
||
// Image Gen Intro Components Registration
|
||
app.component('ImageGenArchitecture', ImageGenArchitecture)
|
||
app.component('LatentSpaceViz', LatentSpaceViz)
|
||
app.component('DiffusionProcessDemo', DiffusionProcessDemo)
|
||
app.component('FlowMatchingDemo', FlowMatchingDemo)
|
||
app.component('PromptVisualizer', PromptVisualizer)
|
||
app.component('ImageGenQuickStartDemo', ImageGenQuickStartDemo)
|
||
|
||
// Audio Intro Components Registration
|
||
app.component('AudioWaveformDemo', AudioWaveformDemo)
|
||
app.component('AudioTokenizationDemo', AudioTokenizationDemo)
|
||
app.component('SpectrogramViz', SpectrogramViz)
|
||
app.component('AutoregressiveAudioDemo', AutoregressiveAudioDemo)
|
||
app.component('AudioQuickStartDemo', AudioQuickStartDemo)
|
||
app.component('MelSpectrogramDemo', MelSpectrogramDemo)
|
||
app.component('TTSPipelineDemo', TTSPipelineDemo)
|
||
app.component('VoiceCloningDemo', VoiceCloningDemo)
|
||
app.component('ASRvsTTSDemo', ASRvsTTSDemo)
|
||
app.component('EmotionControlDemo', EmotionControlDemo)
|
||
|
||
// Web Basics Components Registration
|
||
app.component('WebTechTriad', WebTechTriad)
|
||
app.component('UrlToBrowserDemo', UrlToBrowserDemo)
|
||
app.component('UrlToBrowserQuickStart', UrlToBrowserQuickStart)
|
||
app.component('GitWorkflowDemo', GitWorkflowDemo)
|
||
app.component('GitThreeAreasDemo', GitThreeAreasDemo)
|
||
app.component('GitStorageDemo', GitStorageDemo)
|
||
app.component('GitCommandDemo', GitCommandDemo)
|
||
app.component('GitBranchMergeDemo', GitBranchMergeDemo)
|
||
app.component('GitConflictDemo', GitConflictDemo)
|
||
app.component('GitStashDemo', GitStashDemo)
|
||
app.component('GitRemoteDemo', GitRemoteDemo)
|
||
app.component('GitScenariosDemo', GitScenariosDemo)
|
||
app.component('NetworkLayers', NetworkLayers)
|
||
app.component('TcpUdpComparison', TcpUdpComparison)
|
||
app.component('SubnetCalculator', SubnetCalculator)
|
||
app.component('NetworkTroubleshooting', NetworkTroubleshooting)
|
||
|
||
// Computer Fundamentals Components Registration
|
||
app.component('TransistorDemo', TransistorDemo)
|
||
app.component('LogicGateDemo', LogicGateDemo)
|
||
app.component('AdderDemo', AdderDemo)
|
||
app.component('CpuArchitectureDemo', CpuArchitectureDemo)
|
||
app.component('ProcessDemo', ProcessDemo)
|
||
app.component('MemoryDemo', MemoryDemo)
|
||
app.component('FilesystemDemo', FilesystemDemo)
|
||
app.component('EncodingDemo', EncodingDemo)
|
||
app.component('StorageDemo', StorageDemo)
|
||
app.component('TransmissionDemo', TransmissionDemo)
|
||
app.component('DataStructureDemo', DataStructureDemo)
|
||
app.component('AlgorithmDemo', AlgorithmDemo)
|
||
app.component('LanguageMapDemo', LanguageMapDemo)
|
||
app.component('TypeSystemDemo', TypeSystemDemo)
|
||
app.component('CompilerDemo', CompilerDemo)
|
||
app.component('CFNetworkLayers', CFNetworkLayers)
|
||
app.component('CFSubnetCalculator', CFSubnetCalculator)
|
||
app.component('CFTcpUdpComparison', CFTcpUdpComparison)
|
||
|
||
// Computer Fundamentals Additional Components Registration
|
||
app.component('OSSystemOverviewDemo', OSSystemOverviewDemo)
|
||
app.component('ProcessMemoryFilesystemDemo', ProcessMemoryFilesystemDemo)
|
||
app.component('DataLifecycleDemo', DataLifecycleDemo)
|
||
app.component('EncodingStorageTransmissionDemo', EncodingStorageTransmissionDemo)
|
||
app.component('NetworkOverviewDemo', NetworkOverviewDemo)
|
||
app.component('PhysicalLayerDemo', PhysicalLayerDemo)
|
||
app.component('DataLinkLayerDemo', DataLinkLayerDemo)
|
||
app.component('TransportLayerDemo', TransportLayerDemo)
|
||
app.component('ApplicationLayerDemo', ApplicationLayerDemo)
|
||
app.component('DataStructureOverviewDemo', DataStructureOverviewDemo)
|
||
app.component('LinearStructuresDemo', LinearStructuresDemo)
|
||
app.component('HashTableDemo', HashTableDemo)
|
||
app.component('TreeStructureDemo', TreeStructureDemo)
|
||
app.component('DataStructureSelectorDemo', DataStructureSelectorDemo)
|
||
app.component('AlgorithmOverviewDemo', AlgorithmOverviewDemo)
|
||
app.component('RecursiveThinkingDemo', RecursiveThinkingDemo)
|
||
app.component('GreedyThinkingDemo', GreedyThinkingDemo)
|
||
app.component('AlgorithmParadigmDemo', AlgorithmParadigmDemo)
|
||
app.component('LanguageEvolutionDemo', LanguageEvolutionDemo)
|
||
app.component('ProgrammingParadigmDemo', ProgrammingParadigmDemo)
|
||
app.component('LanguageScenarioDemo', LanguageScenarioDemo)
|
||
app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
|
||
app.component('CompilerAnalogyDemo', CompilerAnalogyDemo)
|
||
app.component('SearchAlgorithmDemo', SearchAlgorithmDemo)
|
||
app.component('SortingAlgorithmDemo', SortingAlgorithmDemo)
|
||
app.component('NetworkPrincipleDemo', NetworkPrincipleDemo)
|
||
app.component('DataEncodingBasicsDemo', DataEncodingBasicsDemo)
|
||
app.component('StorageHierarchyDemo', StorageHierarchyDemo)
|
||
app.component('GraphStructureDemo', GraphStructureDemo)
|
||
app.component('LanguageTypeModelDemo', LanguageTypeModelDemo)
|
||
app.component('CompilationPracticeDemo', CompilationPracticeDemo)
|
||
|
||
// Deployment appendix
|
||
app.component('DeploymentOverviewDemo', DeploymentOverviewDemo)
|
||
app.component('DeploymentBuildDemo', DeploymentBuildDemo)
|
||
app.component('DeploymentServerDemo', DeploymentServerDemo)
|
||
app.component('DeploymentDnsDemo', DeploymentDnsDemo)
|
||
app.component('DeploymentHttpsDemo', DeploymentHttpsDemo)
|
||
app.component('DeploymentCicdDemo', DeploymentCicdDemo)
|
||
app.component('DeploymentMonitorDemo', DeploymentMonitorDemo)
|
||
app.component('CssBoxModel', CssBoxModel)
|
||
app.component('CssFlexbox', CssFlexbox)
|
||
app.component('CssLayoutDemo', CssLayoutDemo)
|
||
app.component('CssPlaygroundDemo', CssPlaygroundDemo)
|
||
app.component('CssCommonProperties', CssCommonProperties)
|
||
app.component('CssSelectorsDemo', CssSelectorsDemo)
|
||
app.component('DomManipulator', DomManipulator)
|
||
app.component('SemanticTagsDemo', SemanticTagsDemo)
|
||
app.component('DnsLookupDemo', DnsLookupDemo)
|
||
app.component('TcpHandshakeDemo', TcpHandshakeDemo)
|
||
app.component('UrlParserDemo', UrlParserDemo)
|
||
app.component('HttpExchangeDemo', HttpExchangeDemo)
|
||
app.component('BrowserRenderingDemo', BrowserRenderingDemo)
|
||
app.component('FrontendEvolutionDemo', FrontendEvolutionDemo)
|
||
app.component('SliceRequestDemo', SliceRequestDemo)
|
||
app.component('ResponsiveGridDemo', ResponsiveGridDemo)
|
||
app.component('JQueryVsStateDemo', JQueryVsStateDemo)
|
||
app.component('VueReactComparisonDemo', VueReactComparisonDemo)
|
||
app.component('RoutingModeDemo', RoutingModeDemo)
|
||
app.component('SpaStatePreservationDemo', SpaStatePreservationDemo)
|
||
app.component('BundlerSizeDemo', BundlerSizeDemo)
|
||
app.component('RenderingStrategyDemo', RenderingStrategyDemo)
|
||
app.component('BigFrontendScopeDemo', BigFrontendScopeDemo)
|
||
app.component('AiEvolutionDemo', AiEvolutionDemo)
|
||
app.component('RuleBasedVsLearningDemo', RuleBasedVsLearningDemo)
|
||
app.component('PerceptronDemo', PerceptronDemo)
|
||
app.component('AIEvolutionTimelineDemo', AIEvolutionTimelineDemo)
|
||
app.component('CombinatorialExplosionDemo', CombinatorialExplosionDemo)
|
||
app.component(
|
||
'NeuralNetworkVisualizationDemo',
|
||
NeuralNetworkVisualizationDemo
|
||
)
|
||
app.component('BackpropagationDemo', BackpropagationDemo)
|
||
app.component('AttentionMechanismDemo', AttentionMechanismDemo)
|
||
app.component(
|
||
'DiscriminativeVsGenerativeDemo',
|
||
DiscriminativeVsGenerativeDemo
|
||
)
|
||
app.component('GPTEvolutionDemo', GPTEvolutionDemo)
|
||
|
||
app.component('ImperativeVsDeclarativeDemo', ImperativeVsDeclarativeDemo)
|
||
app.component('ComponentReusabilityDemo', ComponentReusabilityDemo)
|
||
|
||
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)
|
||
app.component('MicroserviceLatencyDemo', MicroserviceLatencyDemo)
|
||
app.component('CacheHitRatioDemo', CacheHitRatioDemo)
|
||
app.component('ServerlessCostAutoScaleDemo', ServerlessCostAutoScaleDemo)
|
||
|
||
// Frontend Performance Components
|
||
app.component('PerformanceMetricsDemo', PerformanceMetricsDemo)
|
||
app.component('PerformanceOverviewDemo', PerformanceOverviewDemo)
|
||
app.component('ReflowRepaintDemo', ReflowRepaintDemo)
|
||
app.component('ImageOptimizationDemo', ImageOptimizationDemo)
|
||
app.component('LazyLoadingDemo', LazyLoadingDemo)
|
||
app.component('CachingStrategyDemo', CachingStrategyDemo)
|
||
app.component('CriticalRenderingPathDemo', CriticalRenderingPathDemo)
|
||
app.component('VirtualScrollingDemo', VirtualScrollingDemo)
|
||
|
||
// Canvas Intro Components Registration
|
||
app.component('CanvasBasicsDemo', CanvasBasicsDemo)
|
||
app.component('CoordinateSystemDemo', CoordinateSystemDemo)
|
||
app.component('AnimationLoopDemo', AnimationLoopDemo)
|
||
app.component('EventHandlingDemo', EventHandlingDemo)
|
||
app.component('ParticleSystemDemo', ParticleSystemDemo)
|
||
app.component('PerformanceDemo', PerformanceDemo)
|
||
|
||
// Cache Design Components Registration
|
||
app.component('CacheArchitectureDemo', CacheArchitectureDemo)
|
||
app.component('LocalityPrincipleDemo', LocalityPrincipleDemo)
|
||
app.component('CacheLifecycleDemo', CacheLifecycleDemo)
|
||
app.component('LocalVsDistributedCacheDemo', LocalVsDistributedCacheDemo)
|
||
app.component('MultiLevelCacheDemo', MultiLevelCacheDemo)
|
||
app.component('CachePatternsDemo', CachePatternsDemo)
|
||
app.component('CacheProblemsDemo', CacheProblemsDemo)
|
||
app.component('ProductCacheDemo', ProductCacheDemo)
|
||
|
||
// Auth Design Components Registration
|
||
app.component('AuthEvolutionDemo', AuthEvolutionDemo)
|
||
app.component('AuthBasicsDemo', AuthBasicsDemo)
|
||
app.component('AuthInteractiveLoginDemo', AuthInteractiveLoginDemo)
|
||
app.component('AuthNvsAuthZDemo', AuthNvsAuthZDemo)
|
||
app.component('SessionCookieDemo', SessionCookieDemo)
|
||
app.component('JWTWorkflowDemo', JWTWorkflowDemo)
|
||
app.component('SessionVsJWTDemo', SessionVsJWTDemo)
|
||
app.component('OAuth2FlowDemo', OAuth2FlowDemo)
|
||
app.component('PasswordHashingDemo', PasswordHashingDemo)
|
||
app.component('CSRFDefenseDemo', CSRFDefenseDemo)
|
||
|
||
// Queue Design Components Registration
|
||
app.component('MessageQueueDemo', MessageQueueDemo)
|
||
app.component('PeakShavingDemo', PeakShavingDemo)
|
||
app.component('MessageQueueComponentsDemo', MessageQueueComponentsDemo)
|
||
app.component('PointToPointVsPubSubDemo', PointToPointVsPubSubDemo)
|
||
app.component('MessageQueueComparisonDemo', MessageQueueComparisonDemo)
|
||
app.component('CouplingDemo', CouplingDemo)
|
||
app.component('DecouplingDemo', DecouplingDemo)
|
||
app.component('PubSubDemo', PubSubDemo)
|
||
app.component('DeadLetterQueueDemo', DeadLetterQueueDemo)
|
||
app.component('DelayedMessageDemo', DelayedMessageDemo)
|
||
app.component('SeckillSystemDemo', SeckillSystemDemo)
|
||
|
||
// Prompt Engineering Components Registration
|
||
app.component('PromptQuickStartDemo', PromptQuickStartDemo)
|
||
app.component('PromptComparisonDemo', PromptComparisonDemo)
|
||
app.component('FewShotDemo', FewShotDemo)
|
||
app.component('ChainOfThoughtDemo', ChainOfThoughtDemo)
|
||
app.component('PromptTemplatesDemo', PromptTemplatesDemo)
|
||
app.component('PromptRobustnessDemo', PromptRobustnessDemo)
|
||
app.component('PromptSecurityDemo', PromptSecurityDemo)
|
||
app.component('TrainingProcessDemo', TrainingProcessDemo)
|
||
|
||
// Context Engineering Components Registration
|
||
app.component('AgentContextFlow', AgentContextFlow)
|
||
app.component('IntroProblemReasonSolution', IntroProblemReasonSolution)
|
||
app.component('ContextWindowVisualizer', ContextWindowVisualizer)
|
||
app.component('SlidingWindowDemo', SlidingWindowDemo)
|
||
app.component('SelectiveContextDemo', SelectiveContextDemo)
|
||
app.component('RAGSimulationDemo', RAGSimulationDemo)
|
||
app.component('ContextCompressionDemo', ContextCompressionDemo)
|
||
app.component('MemoryPalaceDemo', MemoryPalaceDemo)
|
||
app.component('MemoryPalaceActionDemo', MemoryPalaceActionDemo)
|
||
app.component('KVCacheDemo', KVCacheDemo)
|
||
app.component('LostInMiddleDemo', LostInMiddleDemo)
|
||
|
||
// Frontend Engineering Components Registration
|
||
app.component('BuildPipelineDemo', BuildPipelineDemo)
|
||
app.component('BundlerComparisonDemo', BundlerComparisonDemo)
|
||
app.component('TreeShakingDemo', TreeShakingDemo)
|
||
app.component('CodeSplittingDemo', CodeSplittingDemo)
|
||
app.component('HotReloadDemo', HotReloadDemo)
|
||
app.component('DependencyGraphDemo', DependencyGraphDemo)
|
||
app.component('SourceMapDemo', SourceMapDemo)
|
||
app.component('AssetFingerprintDemo', AssetFingerprintDemo)
|
||
|
||
// Frontend Routing Components Registration
|
||
app.component('HashVsHistoryDemo', HashVsHistoryDemo)
|
||
app.component('DynamicRoutesDemo', DynamicRoutesDemo)
|
||
app.component('MpaRoutingDemo', MpaRoutingDemo)
|
||
app.component('NestedRoutesDemo', NestedRoutesDemo)
|
||
app.component('RouteGuardsDemo', RouteGuardsDemo)
|
||
app.component('RouteMatchingDemo', RouteMatchingDemo)
|
||
app.component('RouterArchitectureDemo', RouterArchitectureDemo)
|
||
app.component('RoutingModesDemo', RoutingModesDemo)
|
||
app.component('SpaNavigationDemo', SpaNavigationDemo)
|
||
|
||
// Agent Intro Components Registration
|
||
app.component('AgentWorkflowDemo', AgentWorkflowDemo)
|
||
app.component('AgentLevelDemo', AgentLevelDemo)
|
||
app.component('AgentArchitectureDemo', AgentArchitectureDemo)
|
||
app.component('AgentTaskFlowDemo', AgentTaskFlowDemo)
|
||
app.component('FrameworkComparisonDemo', FrameworkComparisonDemo)
|
||
app.component('FrameworkSelectionDemo', FrameworkSelectionDemo)
|
||
app.component('AgentChallengesDemo', AgentChallengesDemo)
|
||
app.component('AgentFutureDemo', AgentFutureDemo)
|
||
app.component('AgentQuickStartDemo', AgentQuickStartDemo)
|
||
app.component('AgentToolUseDemo', AgentToolUseDemo)
|
||
app.component('AgentPlanningDemo', AgentPlanningDemo)
|
||
app.component('AgentMemoryDemo', AgentMemoryDemo)
|
||
app.component('AgentMultiToolPrinciple', AgentMultiToolPrinciple)
|
||
app.component('AgentMemoryPrinciple', AgentMemoryPrinciple)
|
||
|
||
// Database Intro Components Registration
|
||
app.component('DatabaseIndexDemo', DatabaseIndexDemo)
|
||
app.component('RelationalDataDemo', RelationalDataDemo)
|
||
app.component('SqlPlaygroundDemo', SqlPlaygroundDemo)
|
||
|
||
// IDE Intro Components Registration
|
||
app.component('VirtualVSCodeDemo', VirtualVSCodeDemo)
|
||
app.component('DemoIde', VirtualVSCodeDemo) // Alias
|
||
app.component('IdeArchitectureDemo', IdeArchitectureDemo)
|
||
app.component('AiHelpDemo', AiHelpDemo)
|
||
app.component('BrowserDevToolsDemo', BrowserDevToolsDemo)
|
||
app.component('BrowserDevToolsLiveDemo', BrowserDevToolsLiveDemo)
|
||
app.component('DevToolsElementsDemo', DevToolsElementsDemo)
|
||
app.component('DevToolsConsoleDemo', DevToolsConsoleDemo)
|
||
app.component('DevToolsNetworkDemo', DevToolsNetworkDemo)
|
||
app.component('DevToolsSourcesDemo', DevToolsSourcesDemo)
|
||
app.component('DevToolsApplicationDemo', DevToolsApplicationDemo)
|
||
|
||
// Tracking Design Components Registration
|
||
app.component('TrackingOverviewDemo', TrackingOverviewDemo)
|
||
app.component('TrackingTypesDemo', TrackingTypesDemo)
|
||
app.component(
|
||
'TrackingMethodsComparisonDemo',
|
||
TrackingMethodsComparisonDemo
|
||
)
|
||
app.component('DataModelDesignDemo', DataModelDesignDemo)
|
||
app.component('DataCollectionDemo', DataCollectionDemo)
|
||
app.component('DataPipelineDemo', DataPipelineDemo)
|
||
app.component('PrivacyComplianceDemo', PrivacyComplianceDemo)
|
||
app.component('RealWorldCaseDemo', RealWorldCaseDemo)
|
||
app.component('ToolSelectionDemo', ToolSelectionDemo)
|
||
|
||
// Operations Components Registration
|
||
app.component('MonitoringDashboardDemo', MonitoringDashboardDemo)
|
||
app.component('AlertFlowDemo', AlertFlowDemo)
|
||
app.component('TraceVisualizationDemo', TraceVisualizationDemo)
|
||
app.component('IncidentResponseDemo', IncidentResponseDemo)
|
||
app.component('CapacityPlanningDemo', CapacityPlanningDemo)
|
||
|
||
// Backend Languages Components Registration
|
||
app.component('BackendLanguagesDemo', BackendLanguagesDemo)
|
||
app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
|
||
app.component('PerformanceBenchmarkDemo', PerformanceBenchmarkDemo)
|
||
app.component('SyntaxComparisonDemo', SyntaxComparisonDemo)
|
||
app.component('ConcurrencyModelDemo', ConcurrencyModelDemo)
|
||
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 Services Simple Components Registration (new)
|
||
app.component('CloudServicesOverview', CloudServicesOverview)
|
||
app.component('ProviderComparison', ProviderComparison)
|
||
app.component('PricingCalculator', PricingCalculator)
|
||
app.component('ComputeInstanceDemo', ComputeInstanceDemo)
|
||
app.component('StorageTypeDemo', StorageTypeDemo)
|
||
app.component('ApiCallDemo', ApiCallDemo)
|
||
app.component('CloudHistoryDemo', CloudHistoryDemo)
|
||
app.component('DeployWorkflowDemo', DeployWorkflowDemo)
|
||
app.component('RegionLatencyDemo', RegionLatencyDemo)
|
||
|
||
// Cloud IAM Simple Components Registration (new)
|
||
app.component('IAMStructure', IAMStructure)
|
||
app.component('PolicyEditorDemo', PolicyEditorDemo)
|
||
|
||
// Cloud IAM Components Registration
|
||
app.component('IamRamComparisonDemo', IamRamComparisonDemo)
|
||
app.component('IdentityProviderDemo', IdentityProviderDemo)
|
||
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)
|
||
app.component('RenderingPipelineDemo', RenderingPipelineDemo)
|
||
app.component('EventLoopDemo', JSEventLoopDemo) // Alias for browser rendering context
|
||
|
||
// 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)
|
||
|
||
// JavaScript Intro Components Registration
|
||
app.component('VariableBoxDemo', VariableBoxDemo)
|
||
app.component('ReferenceDemo', ReferenceDemo)
|
||
app.component('FunctionMachineDemo', FunctionMachineDemo)
|
||
app.component('ScopeDemo', ScopeDemo)
|
||
app.component('VariableScopeDemo', VariableScopeDemo)
|
||
app.component('DataTypeDemo', DataTypeDemo)
|
||
app.component('ClosureDemo', ClosureDemo)
|
||
app.component('ThisContextDemo', ThisContextDemo)
|
||
app.component('PrototypeDemo', PrototypeDemo)
|
||
app.component('AsyncDemo', AsyncDemo)
|
||
app.component('DOMTreeDemo', DOMTreeDemo)
|
||
app.component('AsyncRestaurantDemo', AsyncRestaurantDemo)
|
||
app.component('JSEventLoopDemo', JSEventLoopDemo)
|
||
|
||
// JavaScript Runtime Components Registration
|
||
app.component('RuntimeEnvironmentDemo', RuntimeEnvironmentDemo)
|
||
app.component('CallStackDemo', CallStackDemo)
|
||
app.component('TaskQueueDemo', TaskQueueDemo)
|
||
app.component('MemoryLeakDemo', MemoryLeakDemo)
|
||
app.component('GarbageCollectionDemo', GarbageCollectionDemo)
|
||
|
||
// TypeScript Intro Components Registration
|
||
app.component('TypeAnnotationDemo', TypeAnnotationDemo)
|
||
app.component('InterfaceDemo', InterfaceDemo)
|
||
app.component('GenericDemo', GenericDemo)
|
||
app.component('TypeInferenceDemo', TypeInferenceDemo)
|
||
},
|
||
setup() {
|
||
const route = useRoute()
|
||
const { frontmatter } = useData()
|
||
let viewer = null
|
||
|
||
// Skip browser-only initialization during SSR
|
||
if (import.meta.env.SSR) {
|
||
return
|
||
}
|
||
|
||
const initViewer = () => {
|
||
// 销毁旧实例
|
||
if (viewer) {
|
||
viewer.destroy()
|
||
viewer = null
|
||
}
|
||
|
||
// 找到文章内容容器
|
||
const doc = document.querySelector('.vp-doc')
|
||
if (doc) {
|
||
// 初始化 Viewer，配置一些常用选项
|
||
viewer = new Viewer(doc, {
|
||
button: true, // 显示右上角关闭按钮
|
||
navbar: true, // 显示底部缩略图导航
|
||
title: true, // 显示图片标题（alt 属性）
|
||
toolbar: true, // 显示工具栏（缩放、旋转等）
|
||
tooltip: true, // 显示缩放百分比
|
||
movable: true, // 允许拖拽
|
||
zoomable: true, // 允许缩放
|
||
rotatable: true, // 允许旋转
|
||
scalable: true, // 允许翻转
|
||
transition: false, // 禁用自带动画，确保打开瞬间无飞入
|
||
fullscreen: true, // 允许全屏播放
|
||
shown() {
|
||
// 打开完成后，标记为 ready，CSS 此时才会介入 transition
|
||
document.body.classList.add('viewer-ready')
|
||
},
|
||
hide() {
|
||
// 关闭前移除标记，确保关闭瞬间无动画
|
||
document.body.classList.remove('viewer-ready')
|
||
},
|
||
keyboard: true, // 允许键盘控制
|
||
url: 'src', // 图片源
|
||
// 过滤掉不想查看的图片（比如表情包等小图标，如果需要的话）
|
||
filter(image) {
|
||
return !image.classList.contains('no-viewer')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const initTypewriter = () => {
|
||
const taglineData = frontmatter.value.hero?.tagline
|
||
if (Array.isArray(taglineData) && taglineData.length > 0) {
|
||
const taglineEl = document.querySelector('.VPHomeHero .tagline')
|
||
if (taglineEl) {
|
||
taglineEl.innerHTML = ''
|
||
|
||
const typeIt = new TypeIt(taglineEl, {
|
||
speed: 50,
|
||
startDelay: 500,
|
||
loop: true
|
||
})
|
||
|
||
taglineData.forEach((text) => {
|
||
typeIt.type(text).pause(2000).delete().pause(500)
|
||
})
|
||
|
||
typeIt.go()
|
||
}
|
||
}
|
||
}
|
||
|
||
const optimizeImages = () => {
|
||
const images = document.querySelectorAll('.vp-doc img')
|
||
images.forEach((img) => {
|
||
if (img.complete) {
|
||
applyImageStyle(img)
|
||
} else {
|
||
img.onload = () => applyImageStyle(img)
|
||
}
|
||
})
|
||
}
|
||
|
||
const applyImageStyle = (img) => {
|
||
const { naturalWidth, naturalHeight } = img
|
||
if (!naturalWidth || !naturalHeight) return
|
||
|
||
const ratio = naturalHeight / naturalWidth
|
||
img.classList.remove(
|
||
'img-tall',
|
||
'img-very-tall',
|
||
'img-ultra-tall',
|
||
'img-limit-width',
|
||
'img-limit-height'
|
||
)
|
||
|
||
img.style.maxWidth = ''
|
||
img.style.maxHeight = ''
|
||
img.style.width = ''
|
||
img.style.height = ''
|
||
|
||
if (ratio <= 1) {
|
||
img.classList.add('img-limit-width')
|
||
return
|
||
}
|
||
|
||
img.classList.add('img-tall')
|
||
if (ratio > 2.2) {
|
||
img.classList.add('img-ultra-tall')
|
||
} else if (ratio > 1.3) {
|
||
img.classList.add('img-very-tall')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
initViewer()
|
||
initTypewriter()
|
||
optimizeImages()
|
||
})
|
||
|
||
watch(
|
||
() => route.path,
|
||
() =>
|
||
nextTick(() => {
|
||
initViewer()
|
||
initTypewriter()
|
||
optimizeImages()
|
||
})
|
||
)
|
||
}
|
||
}
|