feat(docs): add interactive demos and complete content for development tools
- Add Vue components for interactive demos (SSH auth, regex, env vars, ports) - Complete markdown content for SSH, regex, environment variables, and ports - Remove placeholder "待实现" sections and replace with detailed guides - Add visual explanations for key concepts like ports and localhost - Include practical examples and troubleshooting tips - Add component for showing evolution from transistors to CPU - Improve documentation structure and navigation - Add security best practices for API keys and environment variables
This commit is contained in:
sanbuphy
@@ -112,6 +112,8 @@ import TransistorDemo from './components/appendix/computer-fundamentals/Transist
|
||||
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 RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.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'
|
||||
@@ -216,6 +218,17 @@ import EvolutionJQueryVsStateDemo from './components/appendix/frontend-evolution
|
||||
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'
|
||||
@@ -554,6 +567,28 @@ 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'
|
||||
@@ -670,6 +705,8 @@ export default {
|
||||
app.component('LogicGateDemo', LogicGateDemo)
|
||||
app.component('AdderDemo', AdderDemo)
|
||||
app.component('CpuArchitectureDemo', CpuArchitectureDemo)
|
||||
app.component('RegisterDemo', RegisterDemo)
|
||||
app.component('EvolutionFlowDemo', EvolutionFlowDemo)
|
||||
app.component('ProcessDemo', ProcessDemo)
|
||||
app.component('MemoryDemo', MemoryDemo)
|
||||
app.component('FilesystemDemo', FilesystemDemo)
|
||||
@@ -689,7 +726,10 @@ export default {
|
||||
app.component('OSSystemOverviewDemo', OSSystemOverviewDemo)
|
||||
app.component('ProcessMemoryFilesystemDemo', ProcessMemoryFilesystemDemo)
|
||||
app.component('DataLifecycleDemo', DataLifecycleDemo)
|
||||
app.component('EncodingStorageTransmissionDemo', EncodingStorageTransmissionDemo)
|
||||
app.component(
|
||||
'EncodingStorageTransmissionDemo',
|
||||
EncodingStorageTransmissionDemo
|
||||
)
|
||||
app.component('NetworkOverviewDemo', NetworkOverviewDemo)
|
||||
app.component('PhysicalLayerDemo', PhysicalLayerDemo)
|
||||
app.component('DataLinkLayerDemo', DataLinkLayerDemo)
|
||||
@@ -707,7 +747,10 @@ export default {
|
||||
app.component('LanguageEvolutionDemo', LanguageEvolutionDemo)
|
||||
app.component('ProgrammingParadigmDemo', ProgrammingParadigmDemo)
|
||||
app.component('LanguageScenarioDemo', LanguageScenarioDemo)
|
||||
app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
|
||||
app.component(
|
||||
'ProgrammingLanguageComparisonDemo',
|
||||
ProgrammingLanguageComparisonDemo
|
||||
)
|
||||
app.component('CompilerAnalogyDemo', CompilerAnalogyDemo)
|
||||
app.component('SearchAlgorithmDemo', SearchAlgorithmDemo)
|
||||
app.component('SortingAlgorithmDemo', SortingAlgorithmDemo)
|
||||
@@ -768,6 +811,17 @@ export default {
|
||||
|
||||
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)
|
||||
@@ -943,7 +997,10 @@ export default {
|
||||
|
||||
// Backend Languages Components Registration
|
||||
app.component('BackendLanguagesDemo', BackendLanguagesDemo)
|
||||
app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
|
||||
app.component(
|
||||
'ProgrammingLanguageComparisonDemo',
|
||||
ProgrammingLanguageComparisonDemo
|
||||
)
|
||||
app.component('PerformanceBenchmarkDemo', PerformanceBenchmarkDemo)
|
||||
app.component('SyntaxComparisonDemo', SyntaxComparisonDemo)
|
||||
app.component('ConcurrencyModelDemo', ConcurrencyModelDemo)
|
||||
@@ -966,7 +1023,10 @@ export default {
|
||||
app.component('ComponentHierarchyDemo', ComponentHierarchyDemo)
|
||||
app.component('PropsFlowDemo', PropsFlowDemo)
|
||||
app.component('EventBusDemo', EventBusDemo)
|
||||
app.component('StateManagementComparisonDemo', StateManagementComparisonDemo)
|
||||
app.component(
|
||||
'StateManagementComparisonDemo',
|
||||
StateManagementComparisonDemo
|
||||
)
|
||||
app.component('ReduxFlowDemo', ReduxFlowDemo)
|
||||
app.component('VuexPiniaDemo', VuexPiniaDemo)
|
||||
app.component('MobxReactivityDemo', MobxReactivityDemo)
|
||||
@@ -1061,7 +1121,10 @@ export default {
|
||||
app.component('CacheArchitectureOverview', CacheArchitectureOverview)
|
||||
app.component('CacheHierarchyDemo', CacheHierarchyDemo)
|
||||
app.component('CachePatternComparisonDemo', CachePatternComparisonDemo)
|
||||
app.component('EcommerceCacheArchitectureDemo', EcommerceCacheArchitectureDemo)
|
||||
app.component(
|
||||
'EcommerceCacheArchitectureDemo',
|
||||
EcommerceCacheArchitectureDemo
|
||||
)
|
||||
app.component('CacheMonitoringDashboardDemo', CacheMonitoringDashboardDemo)
|
||||
|
||||
// Cloud Storage CDN Extra Components Registration
|
||||
@@ -1115,6 +1178,28 @@ export default {
|
||||
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)
|
||||
|
||||
Reference in New Issue
Block a user