sanbuphy
1426 lines
86 KiB
JavaScript
1426 lines
86 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'
|
||
import FunctionApiDemo from './components/appendix/api-intro/FunctionApiDemo.vue'
|
||
import ApiTypesComparison from './components/appendix/api-intro/ApiTypesComparison.vue'
|
||
import ApiFunctionVsHttp from './components/appendix/api-intro/ApiFunctionVsHttp.vue'
|
||
import DocumentTypesComparison from './components/appendix/api-intro/DocumentTypesComparison.vue'
|
||
import HttpMethodsDemo from './components/appendix/api-intro/HttpMethodsDemo.vue'
|
||
import StatusCodeCategories from './components/appendix/api-intro/StatusCodeCategories.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 GitCommitFlow from './components/appendix/git-intro/GitCommitFlow.vue'
|
||
import GitBranchVisual from './components/appendix/git-intro/GitBranchVisual.vue'
|
||
import GitSyncDemo from './components/appendix/git-intro/GitSyncDemo.vue'
|
||
import GitCommandCheatsheet from './components/appendix/git-intro/GitCommandCheatsheet.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 BinaryAdditionRulesDemo from './components/appendix/computer-fundamentals/BinaryAdditionRulesDemo.vue'
|
||
import HalfAdderDemo from './components/appendix/computer-fundamentals/HalfAdderDemo.vue'
|
||
import FullAdderDemo from './components/appendix/computer-fundamentals/FullAdderDemo.vue'
|
||
import AdderDemo from './components/appendix/computer-fundamentals/AdderDemo.vue'
|
||
import AdderChainDemo from './components/appendix/computer-fundamentals/AdderChainDemo.vue'
|
||
import CompleteAdderDemo from './components/appendix/computer-fundamentals/CompleteAdderDemo.vue'
|
||
import FunctionalUnitDemo from './components/appendix/computer-fundamentals/FunctionalUnitDemo.vue'
|
||
import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
|
||
import RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.vue'
|
||
import FlipFlopDemo from './components/appendix/computer-fundamentals/FlipFlopDemo.vue'
|
||
// import EvolutionFlowDemo from './components/appendix/computer-fundamentals/EvolutionFlowDemo.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 OSArchitectureDemo from './components/appendix/computer-fundamentals/OSArchitectureDemo.vue'
|
||
import ProgramLaunchDemo from './components/appendix/computer-fundamentals/ProgramLaunchDemo.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'
|
||
|
||
// Data Encoding Components
|
||
import GarbledTextDemo from './components/appendix/data-encoding/GarbledTextDemo.vue'
|
||
import CharacterEncodingExplorer from './components/appendix/data-encoding/CharacterEncodingExplorer.vue'
|
||
import StoragePyramidDemo from './components/appendix/data-encoding/StoragePyramidDemo.vue'
|
||
import DataTransmissionDemo from './components/appendix/data-encoding/DataTransmissionDemo.vue'
|
||
import PhotoUploadJourneyDemo from './components/appendix/data-encoding/PhotoUploadJourneyDemo.vue'
|
||
import ImageEncodingDemo from './components/appendix/data-encoding/ImageEncodingDemo.vue'
|
||
import AudioEncodingDemo from './components/appendix/data-encoding/AudioEncodingDemo.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 FoundationDemo from './components/appendix/ai-history/FoundationDemo.vue'
|
||
import ExpertSystemWaveDemo from './components/appendix/ai-history/ExpertSystemWaveDemo.vue'
|
||
import AIErasComparisonDemo from './components/appendix/ai-history/AIErasComparisonDemo.vue'
|
||
|
||
// AI Protocols Components
|
||
import McpVisualDemo from './components/appendix/ai-protocols/McpVisualDemo.vue'
|
||
import A2AVisualDemo from './components/appendix/ai-protocols/A2AVisualDemo.vue'
|
||
import McpDetailedDemo from './components/appendix/ai-protocols/McpDetailedDemo.vue'
|
||
import A2ADetailedDemo from './components/appendix/ai-protocols/A2ADetailedDemo.vue'
|
||
import ProtocolComparisonDemo from './components/appendix/ai-protocols/ProtocolComparisonDemo.vue'
|
||
import ProtocolWorkflowDemo from './components/appendix/ai-protocols/ProtocolWorkflowDemo.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 FrameworkMotivationDemo from './components/appendix/framework-nature/FrameworkMotivationDemo.vue'
|
||
import ReactivityMechanismDemo from './components/appendix/framework-nature/ReactivityMechanismDemo.vue'
|
||
import ManualVsAutoSyncDemo from './components/appendix/framework-nature/ManualVsAutoSyncDemo.vue'
|
||
import VirtualDomDiffDemo from './components/appendix/framework-nature/VirtualDomDiffDemo.vue'
|
||
import FrameworkSpectrumDemo from './components/appendix/framework-nature/FrameworkSpectrumDemo.vue'
|
||
import DataUIGapDemo from './components/appendix/framework-nature/DataUIGapDemo.vue'
|
||
import DeclarativeFormulaDemo from './components/appendix/framework-nature/DeclarativeFormulaDemo.vue'
|
||
import DomOperationCostDemo from './components/appendix/framework-nature/DomOperationCostDemo.vue'
|
||
import ComponentTreeDemo from './components/appendix/framework-nature/ComponentTreeDemo.vue'
|
||
import WhatIsDomDemo from './components/appendix/framework-nature/WhatIsDomDemo.vue'
|
||
import WhyNoAutoSyncDemo from './components/appendix/framework-nature/WhyNoAutoSyncDemo.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 Components
|
||
import ApiRequestDemo from './components/appendix/api-design/ApiRequestDemo.vue'
|
||
import RestfulUrlDemo from './components/appendix/api-design/RestfulUrlDemo.vue'
|
||
import StatusCodeDemo from './components/appendix/api-design/StatusCodeDemo.vue'
|
||
import ErrorHandlingDemo from './components/appendix/api-design/ErrorHandlingDemo.vue'
|
||
import ApiVersioningDemo from './components/appendix/api-design/ApiVersioningDemo.vue'
|
||
import ApiStyleCompare from './components/appendix/api-design/ApiStyleCompare.vue'
|
||
import ResponseStructureDemo from './components/appendix/api-design/ResponseStructureDemo.vue'
|
||
import DataFieldDesignDemo from './components/appendix/api-design/DataFieldDesignDemo.vue'
|
||
import ErrorResponseDesignDemo from './components/appendix/api-design/ErrorResponseDesignDemo.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'
|
||
|
||
// Development Tools Components
|
||
import EnvVarOverviewDemo from './components/appendix/development-tools/EnvVarOverviewDemo.vue'
|
||
import PathSearchDemo from './components/appendix/development-tools/PathSearchDemo.vue'
|
||
import EnvScopeDemo from './components/appendix/development-tools/EnvScopeDemo.vue'
|
||
import EnvExportDemo from './components/appendix/development-tools/EnvExportDemo.vue'
|
||
import ApiKeyDangerDemo from './components/appendix/development-tools/ApiKeyDangerDemo.vue'
|
||
import DotEnvDemo from './components/appendix/development-tools/DotEnvDemo.vue'
|
||
import ServerSecretDemo from './components/appendix/development-tools/ServerSecretDemo.vue'
|
||
|
||
// Ports & Localhost Components
|
||
import PortAnalogyDemo from './components/appendix/ports-localhost/PortAnalogyDemo.vue'
|
||
import LocalhostLoopbackDemo from './components/appendix/ports-localhost/LocalhostLoopbackDemo.vue'
|
||
import PortConflictDemo from './components/appendix/ports-localhost/PortConflictDemo.vue'
|
||
import CommonPortsDemo from './components/appendix/ports-localhost/CommonPortsDemo.vue'
|
||
import DevServerFlowDemo from './components/appendix/ports-localhost/DevServerFlowDemo.vue'
|
||
import PortTroubleshootDemo from './components/appendix/ports-localhost/PortTroubleshootDemo.vue'
|
||
import PackageManagerOverviewDemo from './components/appendix/development-tools/PackageManagerOverviewDemo.vue'
|
||
import PackageInstallDemo from './components/appendix/development-tools/PackageInstallDemo.vue'
|
||
import DependencyTreeDemo from './components/appendix/development-tools/DependencyTreeDemo.vue'
|
||
import SSHAuthDemo from './components/appendix/development-tools/SSHAuthDemo.vue'
|
||
import RegexDemo from './components/appendix/development-tools/RegexDemo.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'
|
||
|
||
// Server & Backend Components
|
||
import SerializationDemo from './components/appendix/server-backend/SerializationDemo.vue'
|
||
import HttpProtocolDemo from './components/appendix/server-backend/HttpProtocolDemo.vue'
|
||
|
||
// Data Components
|
||
import SqlDemo from './components/appendix/data/SqlDemo.vue'
|
||
import DataModelsDemo from './components/appendix/data/DataModelsDemo.vue'
|
||
import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
|
||
import DataAnalysisDemo from './components/appendix/data/DataAnalysisDemo.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)
|
||
app.component('FunctionApiDemo', FunctionApiDemo)
|
||
app.component('ApiTypesComparison', ApiTypesComparison)
|
||
app.component('ApiFunctionVsHttp', ApiFunctionVsHttp)
|
||
app.component('DocumentTypesComparison', DocumentTypesComparison)
|
||
app.component('HttpMethodsDemo', HttpMethodsDemo)
|
||
app.component('StatusCodeCategories', StatusCodeCategories)
|
||
|
||
// 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('GitCommitFlow', GitCommitFlow)
|
||
app.component('GitBranchVisual', GitBranchVisual)
|
||
app.component('GitSyncDemo', GitSyncDemo)
|
||
app.component('GitCommandCheatsheet', GitCommandCheatsheet)
|
||
|
||
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('BinaryAdditionRulesDemo', BinaryAdditionRulesDemo)
|
||
app.component('HalfAdderDemo', HalfAdderDemo)
|
||
app.component('FullAdderDemo', FullAdderDemo)
|
||
app.component('AdderDemo', AdderDemo)
|
||
app.component('AdderChainDemo', AdderChainDemo)
|
||
app.component('CompleteAdderDemo', CompleteAdderDemo)
|
||
app.component('FunctionalUnitDemo', FunctionalUnitDemo)
|
||
app.component('CpuArchitectureDemo', CpuArchitectureDemo)
|
||
app.component('RegisterDemo', RegisterDemo)
|
||
app.component('FlipFlopDemo', FlipFlopDemo)
|
||
// app.component('EvolutionFlowDemo', EvolutionFlowDemo)
|
||
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('OSArchitectureDemo', OSArchitectureDemo)
|
||
app.component('ProgramLaunchDemo', ProgramLaunchDemo)
|
||
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)
|
||
|
||
// Data Encoding Components Registration
|
||
app.component('GarbledTextDemo', GarbledTextDemo)
|
||
app.component('CharacterEncodingExplorer', CharacterEncodingExplorer)
|
||
app.component('StoragePyramidDemo', StoragePyramidDemo)
|
||
app.component('DataTransmissionDemo', DataTransmissionDemo)
|
||
app.component('PhotoUploadJourneyDemo', PhotoUploadJourneyDemo)
|
||
app.component('ImageEncodingDemo', ImageEncodingDemo)
|
||
app.component('AudioEncodingDemo', AudioEncodingDemo)
|
||
|
||
// 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('FoundationDemo', FoundationDemo)
|
||
app.component('ExpertSystemWaveDemo', ExpertSystemWaveDemo)
|
||
app.component('AIErasComparisonDemo', AIErasComparisonDemo)
|
||
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)
|
||
|
||
// AI Protocols Components Registration
|
||
app.component('McpVisualDemo', McpVisualDemo)
|
||
app.component('A2AVisualDemo', A2AVisualDemo)
|
||
app.component('McpDetailedDemo', McpDetailedDemo)
|
||
app.component('A2ADetailedDemo', A2ADetailedDemo)
|
||
app.component('ProtocolComparisonDemo', ProtocolComparisonDemo)
|
||
app.component('ProtocolWorkflowDemo', ProtocolWorkflowDemo)
|
||
|
||
app.component('ImperativeVsDeclarativeDemo', ImperativeVsDeclarativeDemo)
|
||
app.component('ComponentReusabilityDemo', ComponentReusabilityDemo)
|
||
app.component('FrameworkMotivationDemo', FrameworkMotivationDemo)
|
||
app.component('ManualVsAutoSyncDemo', ManualVsAutoSyncDemo)
|
||
app.component('ReactivityMechanismDemo', ReactivityMechanismDemo)
|
||
app.component('VirtualDomDiffDemo', VirtualDomDiffDemo)
|
||
app.component('FrameworkSpectrumDemo', FrameworkSpectrumDemo)
|
||
app.component('DataUIGapDemo', DataUIGapDemo)
|
||
app.component('DeclarativeFormulaDemo', DeclarativeFormulaDemo)
|
||
app.component('DomOperationCostDemo', DomOperationCostDemo)
|
||
app.component('ComponentTreeDemo', ComponentTreeDemo)
|
||
app.component('WhatIsDomDemo', WhatIsDomDemo)
|
||
app.component('WhyNoAutoSyncDemo', WhyNoAutoSyncDemo)
|
||
|
||
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 Components Registration
|
||
app.component('ApiRequestDemo', ApiRequestDemo)
|
||
app.component('RestfulUrlDemo', RestfulUrlDemo)
|
||
app.component('StatusCodeDemo', StatusCodeDemo)
|
||
app.component('ErrorHandlingDemo', ErrorHandlingDemo)
|
||
app.component('ApiVersioningDemo', ApiVersioningDemo)
|
||
app.component('ApiStyleCompare', ApiStyleCompare)
|
||
app.component('ResponseStructureDemo', ResponseStructureDemo)
|
||
app.component('DataFieldDesignDemo', DataFieldDesignDemo)
|
||
app.component('ErrorResponseDesignDemo', ErrorResponseDesignDemo)
|
||
|
||
// 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)
|
||
|
||
// Development Tools Components Registration
|
||
app.component('EnvVarOverviewDemo', EnvVarOverviewDemo)
|
||
app.component('PathSearchDemo', PathSearchDemo)
|
||
app.component('EnvScopeDemo', EnvScopeDemo)
|
||
app.component('EnvExportDemo', EnvExportDemo)
|
||
app.component('ApiKeyDangerDemo', ApiKeyDangerDemo)
|
||
app.component('DotEnvDemo', DotEnvDemo)
|
||
app.component('ServerSecretDemo', ServerSecretDemo)
|
||
|
||
// Ports & Localhost Components Registration
|
||
app.component('PortAnalogyDemo', PortAnalogyDemo)
|
||
app.component('LocalhostLoopbackDemo', LocalhostLoopbackDemo)
|
||
app.component('PortConflictDemo', PortConflictDemo)
|
||
app.component('CommonPortsDemo', CommonPortsDemo)
|
||
app.component('DevServerFlowDemo', DevServerFlowDemo)
|
||
app.component('PortTroubleshootDemo', PortTroubleshootDemo)
|
||
app.component('PackageManagerOverviewDemo', PackageManagerOverviewDemo)
|
||
app.component('PackageInstallDemo', PackageInstallDemo)
|
||
app.component('DependencyTreeDemo', DependencyTreeDemo)
|
||
app.component('SSHAuthDemo', SSHAuthDemo)
|
||
app.component('RegexDemo', RegexDemo)
|
||
|
||
// TypeScript Intro Components Registration
|
||
app.component('TypeAnnotationDemo', TypeAnnotationDemo)
|
||
app.component('InterfaceDemo', InterfaceDemo)
|
||
app.component('GenericDemo', GenericDemo)
|
||
app.component('TypeInferenceDemo', TypeInferenceDemo)
|
||
|
||
// Server & Backend Components Registration
|
||
app.component('SerializationDemo', SerializationDemo)
|
||
app.component('HttpProtocolDemo', HttpProtocolDemo)
|
||
|
||
// Data Components Registration
|
||
app.component('SqlDemo', SqlDemo)
|
||
app.component('DataModelsDemo', DataModelsDemo)
|
||
app.component('ABTestingDemo', ABTestingDemo)
|
||
app.component('DataAnalysisDemo', DataAnalysisDemo)
|
||
},
|
||
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()
|
||
})
|
||
)
|
||
}
|
||
}
|