From e41063a1cde12d850ec6540519ef6012904dc6af Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Sun, 18 Jan 2026 12:21:49 +0800 Subject: [PATCH] feat: update docs and components, fix DLQ demo bug --- README.md | 21 +- docs/.vitepress/config.mjs | 33 +- .../agent-intro/AgentArchitectureDemo.vue | 95 +- .../agent-intro/AgentChallengesDemo.vue | 131 +- .../appendix/agent-intro/AgentFutureDemo.vue | 89 +- .../appendix/agent-intro/AgentLevelDemo.vue | 74 +- .../agent-intro/AgentTaskFlowDemo.vue | 130 +- .../agent-intro/AgentWorkflowDemo.vue | 106 +- .../agent-intro/FrameworkComparisonDemo.vue | 138 +- .../agent-intro/FrameworkSelectionDemo.vue | 111 +- .../appendix/ai-history/AiEvolutionDemo.vue | 354 ++- .../appendix/ai-history/PerceptronDemo.vue | 63 +- .../ai-history/RuleBasedVsLearningDemo.vue | 62 +- .../appendix/auth-design/AuthBasicsDemo.vue | 457 ++++ .../auth-design/AuthEvolutionDemo.vue | 416 +++ .../appendix/auth-design/AuthNvsAuthZDemo.vue | 654 +++++ .../appendix/auth-design/CSRFDefenseDemo.vue | 773 ++++++ .../appendix/auth-design/JWTWorkflowDemo.vue | 688 +++++ .../appendix/auth-design/OAuth2FlowDemo.vue | 673 +++++ .../auth-design/PasswordHashingDemo.vue | 700 +++++ .../auth-design/SessionCookieDemo.vue | 689 +++++ .../appendix/auth-design/SessionVsJWTDemo.vue | 890 ++++++ .../BackendEvolutionDemo.vue | 286 +- .../backend-evolution/CacheHitRatioDemo.vue | 177 ++ .../backend-evolution/CgiQueueDemo.vue | 232 ++ .../MicroserviceLatencyDemo.vue | 264 ++ .../MonolithReleaseRiskDemo.vue | 263 ++ .../MonolithVsMicroserviceDemo.vue | 83 +- .../ServerlessCostAutoScaleDemo.vue | 193 ++ .../BackendLanguagesDemo.vue | 688 +++++ .../ConcurrencyModelDemo.vue | 769 ++++++ .../DeveloperEfficiencyDemo.vue | 523 ++++ .../LanguageComparisonDemo.vue | 290 ++ .../LanguageEcosystemDemo.vue | 980 +++++++ .../LanguageSelectorDemo.vue | 575 ++++ .../PerformanceBenchmarkDemo.vue | 386 +++ .../SyntaxComparisonDemo.vue | 471 ++++ .../browser-devtools/BrowserDevToolsDemo.vue | 2408 ++++++++++++----- .../BrowserDevToolsLiveDemo.vue | 699 +++-- .../cache-design/CacheArchitectureDemo.vue | 339 +++ .../cache-design/CacheLifecycleDemo.vue | 621 +++++ .../cache-design/CachePatternsDemo.vue | 808 ++++++ .../cache-design/CacheProblemsDemo.vue | 999 +++++++ .../LocalVsDistributedCacheDemo.vue | 603 +++++ .../cache-design/LocalityPrincipleDemo.vue | 538 ++++ .../cache-design/MultiLevelCacheDemo.vue | 620 +++++ .../cache-design/ProductCacheDemo.vue | 914 +++++++ .../canvas-intro/AnimationLoopDemo.vue | 607 +++++ .../canvas-intro/CanvasBasicsDemo.vue | 421 +++ .../canvas-intro/CoordinateSystemDemo.vue | 416 +++ .../canvas-intro/EventHandlingDemo.vue | 669 +++++ .../canvas-intro/ParticleSystemDemo.vue | 571 ++++ .../appendix/canvas-intro/PerformanceDemo.vue | 794 ++++++ .../appendix/deployment/CdnCacheDemo.vue | 4 +- .../appendix/deployment/CicdPipelineDemo.vue | 28 +- .../deployment/DeploymentArchitecture.vue | 82 +- .../appendix/deployment/DnsFlowDemo.vue | 7 +- .../appendix/deployment/HttpsNginxDemo.vue | 20 +- .../deployment/ObservabilityBackupDemo.vue | 10 +- .../deployment/RollbackSwitchDemo.vue | 5 +- .../appendix/deployment/ServerSizerDemo.vue | 17 +- .../CachingStrategyDemo.vue | 679 +++++ .../CriticalRenderingPathDemo.vue | 560 ++++ .../ImageOptimizationDemo.vue | 475 ++++ .../frontend-performance/LazyLoadingDemo.vue | 423 +++ .../PerformanceMetricsDemo.vue | 371 +++ .../ReflowRepaintDemo.vue | 467 ++++ .../appendix/git-intro/GitBranchMergeDemo.vue | 149 +- .../appendix/git-intro/GitCommandDemo.vue | 67 +- .../appendix/git-intro/GitConflictDemo.vue | 113 +- .../appendix/git-intro/GitRemoteDemo.vue | 156 +- .../appendix/git-intro/GitStashDemo.vue | 143 +- .../appendix/git-intro/GitStorageDemo.vue | 32 +- .../appendix/git-intro/GitThreeAreasDemo.vue | 255 +- .../appendix/git-intro/GitWorkflowDemo.vue | 76 +- .../appendix/ide-intro/AiHelpDemo.vue | 387 ++- .../ide-intro/IdeArchitectureDemo.vue | 144 +- .../appendix/ide-intro/VirtualVSCodeDemo.vue | 333 ++- .../appendix/llm-intro/LlmQuickStartDemo.vue | 8 +- .../appendix/llm-intro/TokenizerToMatrix.vue | 14 +- .../appendix/operations/AlertFlowDemo.vue | 501 ++++ .../operations/CapacityPlanningDemo.vue | 485 ++++ .../operations/IncidentResponseDemo.vue | 463 ++++ .../operations/MonitoringDashboardDemo.vue | 446 +++ .../operations/TraceVisualizationDemo.vue | 647 +++++ .../prompt-engineering/ChainOfThoughtDemo.vue | 119 +- .../prompt-engineering/FewShotDemo.vue | 127 +- .../PromptComparisonDemo.vue | 85 +- .../PromptQuickStartDemo.vue | 101 +- .../appendix/queue-design/CouplingDemo.vue | 564 ++++ .../queue-design/DeadLetterQueueDemo.vue | 559 ++++ .../queue-design/DelayedMessageDemo.vue | 696 +++++ .../MessageQueueComparisonDemo.vue | 563 ++++ .../MessageQueueComponentsDemo.vue | 561 ++++ .../queue-design/MessageQueueDemo.vue | 425 +++ .../appendix/queue-design/PeakShavingDemo.vue | 504 ++++ .../queue-design/PointToPointVsPubSubDemo.vue | 462 ++++ .../appendix/queue-design/PubSubDemo.vue | 668 +++++ .../queue-design/SeckillSystemDemo.vue | 792 ++++++ .../tracking-design/DataCollectionDemo.vue | 288 ++ .../tracking-design/DataModelDesignDemo.vue | 906 +++++++ .../tracking-design/DataPipelineDemo.vue | 579 ++++ .../tracking-design/PrivacyComplianceDemo.vue | 833 ++++++ .../tracking-design/RealWorldCaseDemo.vue | 687 +++++ .../tracking-design/ToolSelectionDemo.vue | 492 ++++ .../TrackingMethodsComparisonDemo.vue | 553 ++++ .../tracking-design/TrackingOverviewDemo.vue | 479 ++++ .../tracking-design/TrackingTypesDemo.vue | 622 +++++ .../appendix/vlm-intro/AttentionDemo.vue | 97 +- .../ModelArchitectureComparisonDemo.vue | 15 +- .../appendix/vlm-intro/PatchifyDemo.vue | 97 +- .../appendix/vlm-intro/ViTOutputDemo.vue | 12 +- .../web-basics/BigFrontendScopeDemo.vue | 221 ++ .../web-basics/BrowserRenderingDemo.vue | 345 ++- .../appendix/web-basics/BundlerSizeDemo.vue | 151 ++ .../web-basics/ComponentReusabilityDemo.vue | 32 +- .../appendix/web-basics/CssBoxModel.vue | 47 +- .../web-basics/CssCommonProperties.vue | 172 +- .../appendix/web-basics/CssFlexbox.vue | 39 +- .../appendix/web-basics/CssLayoutDemo.vue | 53 +- .../appendix/web-basics/CssPlaygroundDemo.vue | 10 +- .../appendix/web-basics/CssSelectorsDemo.vue | 77 +- .../appendix/web-basics/DnsLookupDemo.vue | 20 +- .../appendix/web-basics/DomManipulator.vue | 85 +- .../web-basics/FrontendEvolutionDemo.vue | 146 +- .../appendix/web-basics/HttpExchangeDemo.vue | 73 +- .../ImperativeVsDeclarativeDemo.vue | 74 +- .../appendix/web-basics/JQueryVsStateDemo.vue | 383 +++ .../web-basics/RenderingStrategyDemo.vue | 144 + .../web-basics/ResponsiveGridDemo.vue | 116 + .../appendix/web-basics/RoutingModeDemo.vue | 159 ++ .../appendix/web-basics/SemanticTagsDemo.vue | 93 +- .../appendix/web-basics/SliceRequestDemo.vue | 131 + .../web-basics/SpaStatePreservationDemo.vue | 309 +++ .../appendix/web-basics/TcpHandshakeDemo.vue | 92 +- .../appendix/web-basics/UrlParserDemo.vue | 149 +- .../appendix/web-basics/UrlToBrowserDemo.vue | 27 +- .../web-basics/VueReactComparisonDemo.vue | 352 +++ .../appendix/web-basics/WebTechTriad.vue | 209 +- docs/.vitepress/theme/index.js | 189 +- docs/zh-cn/appendix/ai-evolution.md | 29 +- docs/zh-cn/appendix/auth-design.md | 919 +++++++ docs/zh-cn/appendix/backend-evolution.md | 208 +- docs/zh-cn/appendix/backend-languages.md | 940 +++++++ docs/zh-cn/appendix/browser-devtools/index.md | 15 +- docs/zh-cn/appendix/cache-design.md | 833 ++++++ docs/zh-cn/appendix/canvas-intro.md | 959 +++++++ docs/zh-cn/appendix/deployment.md | 79 +- docs/zh-cn/appendix/frontend-evolution.md | 300 +- docs/zh-cn/appendix/frontend-performance.md | 835 ++++++ docs/zh-cn/appendix/git-intro.md | 38 +- docs/zh-cn/appendix/ide-intro/index.md | 42 +- docs/zh-cn/appendix/operations.md | 640 +++++ docs/zh-cn/appendix/prompt-engineering.md | 71 +- docs/zh-cn/appendix/queue-design.md | 735 +++++ docs/zh-cn/appendix/tracking-design.md | 1093 ++++++++ docs/zh-cn/appendix/url-to-browser.md | 14 +- docs/zh-cn/appendix/vlm-intro.md | 23 +- docs/zh-cn/appendix/web-basics.md | 83 +- 159 files changed, 54236 insertions(+), 2525 deletions(-) create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/CacheHitRatioDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/CgiQueueDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CachePatternsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/CacheProblemsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/LocalVsDistributedCacheDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/LocalityPrincipleDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/MultiLevelCacheDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/cache-design/ProductCacheDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/CachingStrategyDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/ImageOptimizationDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/LazyLoadingDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceMetricsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/frontend-performance/ReflowRepaintDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/BundlerSizeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/RenderingStrategyDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/SliceRequestDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue create mode 100644 docs/zh-cn/appendix/auth-design.md create mode 100644 docs/zh-cn/appendix/backend-languages.md create mode 100644 docs/zh-cn/appendix/cache-design.md create mode 100644 docs/zh-cn/appendix/canvas-intro.md create mode 100644 docs/zh-cn/appendix/frontend-performance.md create mode 100644 docs/zh-cn/appendix/operations.md create mode 100644 docs/zh-cn/appendix/queue-design.md create mode 100644 docs/zh-cn/appendix/tracking-design.md diff --git a/README.md b/README.md index fdeb494..c9b55f9 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@

⭐ 欢迎点击 Star 加速更新 ❤️

-

+

@@ -55,18 +55,19 @@ 很多人即便有了 AI 助手，依然会被“代码看不懂”、“环境不会配”劝退。**Easy-Vibe 为此而生。** 假设每个人都是零基础，手把手带你从写出第一行代码，到理解前后端逻辑，最后把产品上线。 -- **面向人群**：初学者、产品经理、前后端 / 全栈开发者 -- **主题**：AI 编程、全栈 Web 应用开发、AI Agent、工作流和 RAG 系统 +- **面向人群**：初学者、产品经理、前后端 / 全栈开发者 +- **主题**：AI 编程、全栈 Web 应用开发、AI Agent、工作流和 RAG 系统 + --- -Easy-Vibe 通过以下几个阶段，带你从 0 到 1： +Easy-Vibe 通过以下几个阶段，带你从 0 到 1： -| 阶段 | 核心技能 | 产出 | -|----|---------|---------| -| **第零阶段** | 小游戏开发、AI 编程入门 | 完成第一个互动小游戏 | -| **第一阶段** | 产品思维、需求分析、原型设计 | 可交互的 Web 应用原型 | -| **第二阶段** | 全栈开发、AI 集成、数据库 | 完整的全栈 AI 应用 | -| **第三阶段** | claude code 进阶、小程序安卓开发 | 生产级多平台应用 | +| 阶段 | 核心技能 | 产出 | +| ------------ | -------------------------------- | --------------------- | +| **第零阶段** | 小游戏开发、AI 编程入门 | 完成第一个互动小游戏 | +| **第一阶段** | 产品思维、需求分析、原型设计 | 可交互的 Web 应用原型 | +| **第二阶段** | 全栈开发、AI 集成、数据库 | 完整的全栈 AI 应用 | +| **第三阶段** | claude code 进阶、小程序安卓开发 | 生产级多平台应用 | ### 📖 内容导航 diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 769d72a..ba19b3f 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -542,7 +542,10 @@ export default defineConfig({ text: '上下文工程', link: '/zh-cn/appendix/context-engineering' }, - { text: '人工智能进化史', link: '/zh-cn/appendix/ai-evolution' }, + { + text: '人工智能进化史', + link: '/zh-cn/appendix/ai-evolution' + }, { text: '大语言模型', link: '/zh-cn/appendix/llm-intro' }, { text: '多模态大模型', link: '/zh-cn/appendix/vlm-intro' }, { @@ -569,15 +572,30 @@ export default defineConfig({ text: '前端进化史', link: '/zh-cn/appendix/frontend-evolution' }, + { + text: '前端性能优化', + link: '/zh-cn/appendix/frontend-performance' + }, + { + text: 'Canvas 2D 入门', + link: '/zh-cn/appendix/canvas-intro' + }, { text: '后端进化史', link: '/zh-cn/appendix/backend-evolution' }, + { + text: '后端编程语言', + link: '/zh-cn/appendix/backend-languages' + }, { text: 'URL 到浏览器显示', link: '/zh-cn/appendix/url-to-browser' }, - { text: '浏览器调试器', link: '/zh-cn/appendix/browser-devtools' } + { + text: '浏览器调试器', + link: '/zh-cn/appendix/browser-devtools' + } ] }, { @@ -594,6 +612,17 @@ export default defineConfig({ }, { text: '部署与上线', link: '/zh-cn/appendix/deployment' } ] + }, + { + text: '后端进阶', + collapsed: false, + items: [ + { text: '系统缓存设计', link: '/zh-cn/appendix/cache-design' }, + { text: '消息队列设计', link: '/zh-cn/appendix/queue-design' }, + { text: '鉴权原理与实战', link: '/zh-cn/appendix/auth-design' }, + { text: '埋点设计', link: '/zh-cn/appendix/tracking-design' }, + { text: '线上运维', link: '/zh-cn/appendix/operations' } + ] } ] } diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue index 2edd943..aa00cfd 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue @@ -107,11 +107,25 @@ const current = ref(modules[0]) gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 12px; +} .diagram { background: var(--vp-c-bg); @@ -135,18 +149,67 @@ const current = ref(modules[0]) text-align: left; } -.node.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } -.icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); } -.name { font-weight: 800; } +.node.active { + border-color: var(--vp-c-brand); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); +} +.icon { + width: 28px; + height: 28px; + border-radius: 8px; + display: grid; + place-items: center; + background: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-divider); +} +.name { + font-weight: 800; +} -.pipes { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--vp-c-divider); } -.pipe { color: var(--vp-c-text-2); font-size: 13px; line-height: 1.5; } -.pipe.small { font-size: 12px; color: var(--vp-c-text-3); } +.pipes { + margin-top: 6px; + padding-top: 10px; + border-top: 1px dashed var(--vp-c-divider); +} +.pipe { + color: var(--vp-c-text-2); + font-size: 13px; + line-height: 1.5; +} +.pipe.small { + font-size: 12px; + color: var(--vp-c-text-3); +} -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } -.panel-title { font-weight: 800; } -.panel-body { color: var(--vp-c-text-2); line-height: 1.6; } -.io-title { font-weight: 700; margin-bottom: 6px; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 12px; + display: flex; + flex-direction: column; + gap: 10px; +} +.panel-title { + font-weight: 800; +} +.panel-body { + color: var(--vp-c-text-2); + line-height: 1.6; +} +.io-title { + font-weight: 700; + margin-bottom: 6px; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 10px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue index 33dbc5c..74880d6 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue @@ -15,10 +15,19 @@
- - - - + + + +
@@ -77,32 +86,106 @@ const enabledList = computed(() => { }) const advice = computed(() => { - if (!maxSteps.value && !confirm.value) return '先加“最大步数”和“二次确认”，这是最低成本的安全感。' - if (score.value <= 35) return '很稳了：可以开始做更复杂的任务，但记得加日志与监控。' + if (!maxSteps.value && !confirm.value) + return '先加“最大步数”和“二次确认”，这是最低成本的安全感。' + if (score.value <= 35) + return '很稳了：可以开始做更复杂的任务，但记得加日志与监控。' if (score.value <= 60) return '还不错：建议再加预算或沙箱，避免极端情况。' return '风险偏高：建议优先补护栏，再让 Agent 真去执行。' }) - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue index 543469c..f1936d3 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue @@ -77,21 +77,80 @@ const current = ref(trends[0]) - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue index e107da2..15a74c8 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue @@ -99,19 +99,67 @@ const current = computed(() => levels[level.value]) gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } -.badge { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 999px; padding: 8px 12px; font-weight: 800; } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} +.badge { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 999px; + padding: 8px 12px; + font-weight: 800; +} -.slider { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 10px 12px; } -input[type='range'] { width: 100%; } -.ticks { display: flex; justify-content: space-between; color: var(--vp-c-text-2); font-size: 12px; margin-top: 6px; } +.slider { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 10px 12px; +} +input[type='range'] { + width: 100%; +} +.ticks { + display: flex; + justify-content: space-between; + color: var(--vp-c-text-2); + font-size: 12px; + margin-top: 6px; +} -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } -.card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; } -.k { font-weight: 800; margin-bottom: 6px; } -.v { color: var(--vp-c-text-2); line-height: 1.6; } -ul { margin: 0; padding-left: 18px; color: var(--vp-c-text-2); line-height: 1.6; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 12px; +} +.card { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 12px; +} +.k { + font-weight: 800; + margin-bottom: 6px; +} +.v { + color: var(--vp-c-text-2); + line-height: 1.6; +} +ul { + margin: 0; + padding-left: 18px; + color: var(--vp-c-text-2); + line-height: 1.6; +} - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue index 146f9de..3f9fcb2 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue @@ -10,8 +10,20 @@
点步骤，看“工具调用”和“中间结果”。
- - + +
@@ -94,24 +106,102 @@ const steps = [ flex-direction: column; gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } -.actions { display: flex; gap: 8px; flex-wrap: wrap; } -.btn { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 10px; cursor: pointer; } -.btn.primary { border-color: var(--vp-c-brand); color: var(--vp-c-brand); } -.btn:disabled { opacity: 0.6; cursor: not-allowed; } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} +.actions { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.btn { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + padding: 8px 12px; + border-radius: 10px; + cursor: pointer; +} +.btn.primary { + border-color: var(--vp-c-brand); + color: var(--vp-c-brand); +} +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} -.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } -.t { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; text-align: left; } -.t.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } -.n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); font-weight: 800; } -.txt { font-weight: 800; } +.timeline { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 10px; +} +.t { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 10px; + display: flex; + gap: 10px; + align-items: center; + cursor: pointer; + text-align: left; +} +.t.active { + border-color: var(--vp-c-brand); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); +} +.n { + width: 26px; + height: 26px; + border-radius: 8px; + display: grid; + place-items: center; + background: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-divider); + font-weight: 800; +} +.txt { + font-weight: 800; +} -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; } -.panel-title { font-weight: 700; margin-bottom: 6px; } -.panel-body { color: var(--vp-c-text-2); line-height: 1.6; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 12px; +} +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 12px; +} +.panel-title { + font-weight: 700; + margin-bottom: 6px; +} +.panel-body { + color: var(--vp-c-text-2); + line-height: 1.6; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 10px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue index 6e5c144..d818a38 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue @@ -13,7 +13,9 @@
- +
@@ -124,12 +126,35 @@ const reset = () => { gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } -.actions { display: flex; gap: 8px; flex-wrap: wrap; } -.btn { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 10px; cursor: pointer; } -.btn.primary { border-color: var(--vp-c-brand); color: var(--vp-c-brand); } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} +.actions { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.btn { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + padding: 8px 12px; + border-radius: 10px; + cursor: pointer; +} +.btn.primary { + border-color: var(--vp-c-brand); + color: var(--vp-c-brand); +} .cycle { display: grid; @@ -147,17 +172,62 @@ const reset = () => { cursor: pointer; text-align: left; } -.step.active { border-color: var(--vp-c-brand); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } -.icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider); } -.name { font-weight: 800; } +.step.active { + border-color: var(--vp-c-brand); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); +} +.icon { + width: 28px; + height: 28px; + border-radius: 8px; + display: grid; + place-items: center; + background: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-divider); +} +.name { + font-weight: 800; +} -.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 12px; padding: 12px; } -.panel-title { font-weight: 700; margin-bottom: 6px; } -.panel-body { color: var(--vp-c-text-2); line-height: 1.6; } +.panels { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 12px; +} +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 12px; + padding: 12px; +} +.panel-title { + font-weight: 700; + margin-bottom: 6px; +} +.panel-body { + color: var(--vp-c-text-2); + line-height: 1.6; +} -.log { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 12px; padding: 12px; } -.log-title { font-weight: 700; margin-bottom: 8px; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 10px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } +.log { + background: var(--vp-c-bg); + border: 1px dashed var(--vp-c-divider); + border-radius: 12px; + padding: 12px; +} +.log-title { + font-weight: 700; + margin-bottom: 8px; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 10px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue index 94a9b97..a1da030 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue @@ -29,7 +29,11 @@
多 Agent
适合做什么
-
+
{{ fw.name }}
{{ fw.learn }}
{{ fw.control }}
@@ -57,9 +61,27 @@ const focuses = [ const focus = ref('control') const frameworks = [ - { name: 'LangChain / LangGraph', learn: '中', control: '高', multi: '中', use: '可控的工具调用、工作流、企业集成' }, - { name: 'AutoGen', learn: '中', control: '中', multi: '高', use: '多 Agent 对话协作、编程/分析助手' }, - { name: 'CrewAI', learn: '低', control: '中', multi: '高', use: '角色分工清晰的团队协作任务' } + { + name: 'LangChain / LangGraph', + learn: '中', + control: '高', + multi: '中', + use: '可控的工具调用、工作流、企业集成' + }, + { + name: 'AutoGen', + learn: '中', + control: '中', + multi: '高', + use: '多 Agent 对话协作、编程/分析助手' + }, + { + name: 'CrewAI', + learn: '低', + control: '中', + multi: '高', + use: '角色分工清晰的团队协作任务' + } ] const best = computed(() => { @@ -69,30 +91,100 @@ const best = computed(() => { }) const reason = computed(() => { - if (focus.value === 'start') return '概念更直观（角色+任务），适合先跑通一个最小团队。' - if (focus.value === 'team') return '多 Agent 对话与协作是强项，适合需要分工的场景。' + if (focus.value === 'start') + return '概念更直观（角色+任务），适合先跑通一个最小团队。' + if (focus.value === 'team') + return '多 Agent 对话与协作是强项，适合需要分工的场景。' return '把流程“画成图/写成步骤”，更利于调试、上线与长期维护。' }) - diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue index afcc460..5447f73 100644 --- a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue @@ -14,21 +14,42 @@
1) 你更在乎什么？
- +
2) 你的任务像哪种？
- +
3) 需要多 Agent 分工吗？
- +
@@ -104,20 +125,76 @@ const rec = computed(() => { - diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue index 9acd536..e0af6db 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue @@ -3,11 +3,14 @@
-
- Bias: + Bias:
@@ -48,9 +62,14 @@
- Formula: ({{ x1 }} * {{ w1 }}) + ({{ x2 }} * {{ w2 }}) + {{ bias }} = {{ weightedSum.toFixed(1) }} -
- Activation: Step( {{ weightedSum.toFixed(1) }} ) = {{ output }} + Formula: + ({{ x1 }} * {{ w1 }}) + ({{ x2 }} * {{ w2 }}) + {{ bias }} = + {{ weightedSum.toFixed(1) }} +
+ Activation: + Step( {{ weightedSum.toFixed(1) }} ) = {{ output }}
@@ -65,7 +84,7 @@ const w2 = ref(-1.0) const bias = ref(0) const weightedSum = computed(() => { - return (x1.value * w1.value) + (x2.value * w2.value) + bias.value + return x1.value * w1.value + x2.value * w2.value + bias.value }) const output = computed(() => { @@ -91,14 +110,16 @@ const output = computed(() => { gap: 1rem; } -.inputs-col, .output-col { +.inputs-col, +.output-col { display: flex; flex-direction: column; gap: 2rem; align-items: center; } -.input-node, .output-node { +.input-node, +.output-node { width: 60px; height: 60px; border-radius: 50%; @@ -187,8 +208,12 @@ const output = computed(() => { .sum-part { text-align: center; } -.math { font-size: 1.5rem; } -.val { font-weight: bold; } +.math { + font-size: 1.5rem; +} +.val { + font-weight: bold; +} .bias-control { position: absolute; @@ -222,5 +247,7 @@ const output = computed(() => { border: 1px dashed #cbd5e1; } -input[type=range] { width: 60px; } - \ No newline at end of file +input[type='range'] { + width: 60px; +} + diff --git a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue index 317ed48..ee47c00 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue @@ -8,15 +8,28 @@
- if (size > ) {
-   return "Big 🍎"
- } else {
-   return "Small 🍒"
+ if (size > + ) + {
+   return "Big 🍎"
+ } else {
+   return "Small 🍒"
}
- Test Input: {{ testInput }} -
+ Test Input: + + {{ testInput }} +
Result: {{ ruleResult }}
@@ -38,15 +51,26 @@ {{ isTrained ? 'Model Trained ✅' : '⚡ Train Model' }}
- +
- Test Input: {{ testInput }} -
+ Test Input: + + {{ testInput }} +
Result: {{ mlResult }}
- Model "learned" threshold is ~{{ learnedThreshold }}.
+ Model "learned" threshold is ~{{ learnedThreshold }}.
(Derived from data, not coded)
@@ -105,7 +129,9 @@ const mlResult = computed(() => { } @media (max-width: 640px) { - .demo-grid { grid-template-columns: 1fr; } + .demo-grid { + grid-template-columns: 1fr; + } } .panel { @@ -171,8 +197,16 @@ const mlResult = computed(() => { background: white; border: 1px solid var(--vp-c-divider); } -.result-box.big { color: #ef4444; border-color: #fecaca; background: #fef2f2; } -.result-box.small { color: #db2777; border-color: #fce7f3; background: #fdf2f8; } +.result-box.big { + color: #ef4444; + border-color: #fecaca; + background: #fef2f2; +} +.result-box.small { + color: #db2777; + border-color: #fce7f3; + background: #fdf2f8; +} .note { font-size: 0.75rem; @@ -210,4 +244,4 @@ const mlResult = computed(() => { background: #10b981; cursor: default; } - \ No newline at end of file + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue new file mode 100644 index 0000000..1698efe --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue @@ -0,0 +1,457 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue new file mode 100644 index 0000000..8370596 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue @@ -0,0 +1,416 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue new file mode 100644 index 0000000..23454a7 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue @@ -0,0 +1,654 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue new file mode 100644 index 0000000..34427ba --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue @@ -0,0 +1,773 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue new file mode 100644 index 0000000..822f83b --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue @@ -0,0 +1,688 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue new file mode 100644 index 0000000..2732154 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue @@ -0,0 +1,673 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue new file mode 100644 index 0000000..4ddf6d9 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue @@ -0,0 +1,700 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue new file mode 100644 index 0000000..0457c67 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue @@ -0,0 +1,689 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue new file mode 100644 index 0000000..d4756d2 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue @@ -0,0 +1,890 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue index da906c4..41126f4 100644 --- a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue @@ -3,11 +3,14 @@
-
@@ -1436,9 +1426,7 @@ onUnmounted(() => {
@@ -2416,8 +2404,17 @@ onUnmounted(() => { } @keyframes highlightPulse { - 0% { transform: scale(1); opacity: 0.7; } - 50% { transform: scale(1.02); opacity: 0.9; } - 100% { transform: scale(1); opacity: 0.7; } + 0% { + transform: scale(1); + opacity: 0.7; + } + 50% { + transform: scale(1.02); + opacity: 0.9; + } + 100% { + transform: scale(1); + opacity: 0.7; + } } diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue index fb16c5a..a7a8bfd 100644 --- a/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue +++ b/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue @@ -35,11 +35,9 @@ >|
- {{ msg.content }}| diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue index 00412ba..6811847 100644 --- a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue +++ b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue @@ -46,8 +46,16 @@

Step 1: Tokenization (分词)

计算机首先将文本切分为最小的语义单位（Token）。 - - (注：此处演示简化为按字切分，真实模型通常使用 BPE 算法，如“人工智能”可能合并为一个 Token) + + (注：此处演示简化为按字切分，真实模型通常使用 BPE + 算法，如“人工智能”可能合并为一个 Token)

@@ -181,7 +189,7 @@ const getHeatmapColor = (val) => { // val is -1 to 1 // Map to blue (negative) -> white (0) -> red (positive) // Reduce max opacity to avoid confusion with "selection" or "special token" - const opacity = Math.abs(val) * 0.6 + 0.1 + const opacity = Math.abs(val) * 0.6 + 0.1 if (val > 0) return `rgba(239, 68, 68, ${opacity})` // Red return `rgba(59, 130, 246, ${opacity})` // Blue } diff --git a/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue b/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue new file mode 100644 index 0000000..3410b4a --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue @@ -0,0 +1,501 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue b/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue new file mode 100644 index 0000000..7ee4236 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue @@ -0,0 +1,485 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue b/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue new file mode 100644 index 0000000..eacf841 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue @@ -0,0 +1,463 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue b/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue new file mode 100644 index 0000000..82a92c6 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue @@ -0,0 +1,446 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue new file mode 100644 index 0000000..52fc2bc --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue @@ -0,0 +1,647 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue index 17b0db1..449628e 100644 --- a/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue +++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue @@ -107,26 +107,107 @@ const output = computed(() => { gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} -.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } -select { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 8px 10px; background: var(--vp-c-bg); color: var(--vp-c-text-1); } -.mode { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; } -.mode.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } +.controls { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; +} +select { + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 8px 10px; + background: var(--vp-c-bg); + color: var(--vp-c-text-1); +} +.mode { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + padding: 8px 12px; + border-radius: 999px; + cursor: pointer; +} +.mode.active { + border-color: var(--vp-c-brand); + color: var(--vp-c-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } -.panel-title { font-weight: 700; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 8px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } -.output { white-space: pre-wrap; line-height: 1.6; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 12px; +} +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 12px; + display: flex; + flex-direction: column; + gap: 10px; +} +.panel-title { + font-weight: 700; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 8px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} +.output { + white-space: pre-wrap; + line-height: 1.6; +} -.why { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 10px; padding: 12px; } -.why-title { font-weight: 700; margin-bottom: 8px; } -.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } -.why-card { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 10px; background: var(--vp-c-bg-soft); } -.k { font-weight: 800; } -.v { color: var(--vp-c-text-2); font-size: 13px; margin-top: 4px; line-height: 1.5; } +.why { + background: var(--vp-c-bg); + border: 1px dashed var(--vp-c-divider); + border-radius: 10px; + padding: 12px; +} +.why-title { + font-weight: 700; + margin-bottom: 8px; +} +.why-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; +} +.why-card { + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 10px; + background: var(--vp-c-bg-soft); +} +.k { + font-weight: 800; +} +.v { + color: var(--vp-c-text-2); + font-size: 13px; + margin-top: 4px; + line-height: 1.5; +} - diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue index 6f93476..594dc5a 100644 --- a/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue +++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue @@ -19,7 +19,10 @@ -
@@ -107,25 +110,109 @@ const hint = computed(() => { gap: 12px; } -.header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } -.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } -select { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 8px 10px; background: var(--vp-c-bg); color: var(--vp-c-text-1); } -.toggle { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); padding: 8px 12px; border-radius: 999px; cursor: pointer; } -.toggle.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } +.header { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} +.controls { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; +} +select { + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 8px 10px; + background: var(--vp-c-bg); + color: var(--vp-c-text-1); +} +.toggle { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + padding: 8px 12px; + border-radius: 999px; + cursor: pointer; +} +.toggle.active { + border-color: var(--vp-c-brand); + color: var(--vp-c-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } -.panel-title { font-weight: 700; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 8px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } -.output { white-space: pre-wrap; line-height: 1.6; } -.hint { color: var(--vp-c-text-2); font-size: 13px; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 12px; +} +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 12px; + display: flex; + flex-direction: column; + gap: 10px; +} +.panel-title { + font-weight: 700; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 8px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} +.output { + white-space: pre-wrap; + line-height: 1.6; +} +.hint { + color: var(--vp-c-text-2); + font-size: 13px; +} -.examples { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 10px; padding: 12px; } -.examples-title { font-weight: 700; margin-bottom: 8px; } -.examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } -.ex { border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 10px; background: var(--vp-c-bg-soft); } -.in { color: var(--vp-c-text-2); font-size: 13px; } -.out { font-weight: 700; margin-top: 4px; } +.examples { + background: var(--vp-c-bg); + border: 1px dashed var(--vp-c-divider); + border-radius: 10px; + padding: 12px; +} +.examples-title { + font-weight: 700; + margin-bottom: 8px; +} +.examples-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 10px; +} +.ex { + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 10px; + background: var(--vp-c-bg-soft); +} +.in { + color: var(--vp-c-text-2); + font-size: 13px; +} +.out { + font-weight: 700; + margin-top: 4px; +} diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue index 96e4df6..74e09e1 100644 --- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue +++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue @@ -19,9 +19,17 @@
- - - + + +
@@ -64,7 +72,8 @@ const prompt = computed(() => { if (useRole.value) lines.push('你是资深前端工程师。') lines.push('请写一段技术博客的开头，主题：提示词工程。') if (useAudience.value) lines.push('目标读者：零基础新手。') - if (useConstraints.value) lines.push('要求：80-120 字，口语化，带一个生活类比。') + if (useConstraints.value) + lines.push('要求：80-120 字，口语化，带一个生活类比。') if (useFormat.value) lines.push('输出：只输出一段文字，不要标题。') return lines.join('\n') } @@ -99,8 +108,10 @@ const warnings = computed(() => { const w = [] if (!useAudience.value) w.push('语气可能过专业或太泛') if (!useConstraints.value) w.push('长度/结构可能不稳定') - if (task.value === 'json' && !useFormat.value) w.push('可能输出成一大段话，不是 JSON') - if (task.value === 'blog' && !useFormat.value) w.push('可能加标题/分段，超出预期') + if (task.value === 'json' && !useFormat.value) + w.push('可能输出成一大段话，不是 JSON') + if (task.value === 'blog' && !useFormat.value) + w.push('可能加标题/分段，超出预期') return w }) @@ -139,8 +150,13 @@ const output = computed(() => { flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} select { border: 1px solid var(--vp-c-divider); @@ -177,7 +193,9 @@ select { gap: 10px; } -.panel-title { font-weight: 700; } +.panel-title { + font-weight: 700; +} pre { margin: 0; background: #0b1221; @@ -190,15 +208,44 @@ pre { white-space: pre-wrap; } -.checklist { display: grid; gap: 6px; } -.item { display: flex; gap: 8px; align-items: center; color: var(--vp-c-text-2); font-size: 13px; } -.dot { width: 10px; height: 10px; border-radius: 50%; } -.dot.ok { background: #22c55e; } -.dot.bad { background: #ef4444; } +.checklist { + display: grid; + gap: 6px; +} +.item { + display: flex; + gap: 8px; + align-items: center; + color: var(--vp-c-text-2); + font-size: 13px; +} +.dot { + width: 10px; + height: 10px; + border-radius: 50%; +} +.dot.ok { + background: #22c55e; +} +.dot.bad { + background: #ef4444; +} -.output { white-space: pre-wrap; line-height: 1.6; } -.warn { border-top: 1px dashed var(--vp-c-divider); padding-top: 10px; } -.warn-title { font-weight: 700; margin-bottom: 6px; } -ul { margin: 0; padding-left: 18px; color: var(--vp-c-text-2); } +.output { + white-space: pre-wrap; + line-height: 1.6; +} +.warn { + border-top: 1px dashed var(--vp-c-divider); + padding-top: 10px; +} +.warn-title { + font-weight: 700; + margin-bottom: 6px; +} +ul { + margin: 0; + padding-left: 18px; + color: var(--vp-c-text-2); +} - diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue index 6b5f9ba..ae48eec 100644 --- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue +++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue @@ -95,7 +95,8 @@ const prompt = computed(() => { const output = computed(() => { if (taskId.value === 'copy') { - if (levelId.value === 'vague') return '这是一款很好用的咖啡杯，适合日常使用...' + if (levelId.value === 'vague') + return '这是一款很好用的咖啡杯，适合日常使用...' if (levelId.value === 'clear') return '早八通勤救星！这只保温杯颜值在线，放包里不漏，热咖啡到下午还温温的...' return '通勤党必备！奶油配色超耐看，密封圈一拧就稳，放包里也不怕洒；保温够久，早上冲的拿铁下午还是温热...想要链接评论区见～' @@ -115,13 +116,16 @@ const output = computed(() => { const promptHint = computed(() => { if (levelId.value === 'vague') return '问题：AI 不知道你要什么标准。' - if (levelId.value === 'clear') return '好一点：有风格/长度，但仍缺少“检查标准”。' + if (levelId.value === 'clear') + return '好一点：有风格/长度，但仍缺少“检查标准”。' return '最好：角色 + 任务 + 要求 + 输出格式，AI 很难跑偏。' }) const outputHint = computed(() => { - if (levelId.value === 'vague') return '常见结果：泛泛而谈、风格不稳、格式不对。' - if (levelId.value === 'clear') return '常见结果：更像你要的，但细节/格式可能还会飘。' + if (levelId.value === 'vague') + return '常见结果：泛泛而谈、风格不稳、格式不对。' + if (levelId.value === 'clear') + return '常见结果：更像你要的，但细节/格式可能还会飘。' return '常见结果：风格稳定、结构清晰、可直接复制使用。' }) @@ -164,10 +168,20 @@ const tips = computed(() => { flex-wrap: wrap; } -.title { font-weight: 800; } -.subtitle { color: var(--vp-c-text-2); font-size: 13px; } +.title { + font-weight: 800; +} +.subtitle { + color: var(--vp-c-text-2); + font-size: 13px; +} -.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } +.controls { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; +} select { border: 1px solid var(--vp-c-divider); border-radius: 10px; @@ -176,7 +190,11 @@ select { color: var(--vp-c-text-1); } -.levels { display: flex; gap: 8px; flex-wrap: wrap; } +.levels { + display: flex; + gap: 8px; + flex-wrap: wrap; +} .level { border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); @@ -190,16 +208,61 @@ select { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } -.panel { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 10px; padding: 12px; } -.panel-title { font-weight: 700; margin-bottom: 6px; } -pre { margin: 0; background: #0b1221; color: #e5e7eb; border-radius: 8px; padding: 12px; font-family: var(--vp-font-family-mono); font-size: 13px; overflow-x: auto; white-space: pre-wrap; } -.output { color: var(--vp-c-text-1); white-space: pre-wrap; line-height: 1.6; } -.hint { margin-top: 6px; color: var(--vp-c-text-2); font-size: 13px; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 12px; +} +.panel { + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 10px; + padding: 12px; +} +.panel-title { + font-weight: 700; + margin-bottom: 6px; +} +pre { + margin: 0; + background: #0b1221; + color: #e5e7eb; + border-radius: 8px; + padding: 12px; + font-family: var(--vp-font-family-mono); + font-size: 13px; + overflow-x: auto; + white-space: pre-wrap; +} +.output { + color: var(--vp-c-text-1); + white-space: pre-wrap; + line-height: 1.6; +} +.hint { + margin-top: 6px; + color: var(--vp-c-text-2); + font-size: 13px; +} -.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } -.tip { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-divider); border-radius: 10px; padding: 10px; } -.tip-title { font-weight: 700; margin-bottom: 4px; } -.tip-body { color: var(--vp-c-text-2); font-size: 13px; line-height: 1.5; } +.tips { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; +} +.tip { + background: var(--vp-c-bg); + border: 1px dashed var(--vp-c-divider); + border-radius: 10px; + padding: 10px; +} +.tip-title { + font-weight: 700; + margin-bottom: 4px; +} +.tip-body { + color: var(--vp-c-text-2); + font-size: 13px; + line-height: 1.5; +} - diff --git a/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue new file mode 100644 index 0000000..19b2124 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue @@ -0,0 +1,564 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue new file mode 100644 index 0000000..b3e0db9 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue @@ -0,0 +1,559 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue new file mode 100644 index 0000000..d20a20c --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue @@ -0,0 +1,696 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue new file mode 100644 index 0000000..98fbdf2 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue @@ -0,0 +1,563 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue new file mode 100644 index 0000000..f3c5a71 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue @@ -0,0 +1,561 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue new file mode 100644 index 0000000..682f0da --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue @@ -0,0 +1,425 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue new file mode 100644 index 0000000..4996893 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue @@ -0,0 +1,504 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue new file mode 100644 index 0000000..a8a1b44 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue @@ -0,0 +1,462 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue new file mode 100644 index 0000000..a2a4e84 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue @@ -0,0 +1,668 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue new file mode 100644 index 0000000..ce35093 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue @@ -0,0 +1,792 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue new file mode 100644 index 0000000..f7609a4 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue @@ -0,0 +1,288 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue new file mode 100644 index 0000000..8781a78 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue @@ -0,0 +1,906 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue new file mode 100644 index 0000000..251abd0 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue @@ -0,0 +1,579 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue new file mode 100644 index 0000000..96d75f8 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue @@ -0,0 +1,833 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue new file mode 100644 index 0000000..838ee04 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue @@ -0,0 +1,687 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue new file mode 100644 index 0000000..4f42b98 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue @@ -0,0 +1,492 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue new file mode 100644 index 0000000..a07db91 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue @@ -0,0 +1,553 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue new file mode 100644 index 0000000..47fb16b --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue @@ -0,0 +1,479 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue new file mode 100644 index 0000000..7c93770 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue @@ -0,0 +1,622 @@ + + + + + + diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue index 11a7c1f..44392af 100644 --- a/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue @@ -11,8 +11,19 @@ - - + + @@ -38,10 +49,11 @@ v-for="(item, index) in items" :key="index" class="grid-cell" - :class="{ + :class="{ 'is-source': hoverIndex === index, 'is-target': hoverIndex !== -1 && hoverIndex !== index, - 'is-strong-attn': hoverIndex !== -1 && getAttentionScore(hoverIndex, index) > 0.5 + 'is-strong-attn': + hoverIndex !== -1 && getAttentionScore(hoverIndex, index) > 0.5 }" @mouseenter="hoverIndex = index" :style="{ @@ -54,10 +66,12 @@ {{ item.label }}
-
{{ (getAttentionScore(hoverIndex, index) * 100).toFixed(0) }}%
@@ -68,7 +82,7 @@
👆 - 把鼠标悬停在任意方块上，
观察它在"关注"谁 + 把鼠标悬停在任意方块上，
观察它在"关注"谁
@@ -77,10 +91,10 @@ {{ items[hoverIndex].icon }} {{ items[hoverIndex].label }}
- +
Attention Weights (注意力权重)
-
-
+
{{ (score * 100).toFixed(0) }}%
- +
💡 @@ -125,7 +142,7 @@ const items = [ { icon: '🌿', label: '草地' }, // 5 { icon: '🧶', label: '毛球' }, // 6 { icon: '🐾', label: '猫爪' }, // 7 - { icon: '🌿', label: '草地' } // 8 + { icon: '🌿', label: '草地' } // 8 ] // Layout Logic @@ -144,19 +161,19 @@ const getCenter = (index) => { // Attention Logic const getAttentionScore = (source, target) => { if (source === target) return 0 - + // Cat Head (4) attends strongly to: if (source === 4) { if (target === 7) return 0.95 // Paws (Body parts connected) - if (target === 2) return 0.8 // Butterfly (Interest) - if (target === 6) return 0.6 // Yarn (Toy) + if (target === 2) return 0.8 // Butterfly (Interest) + if (target === 6) return 0.6 // Yarn (Toy) return 0.1 // Background } // Cat Paws (7) attends strongly to: if (source === 7) { if (target === 4) return 0.95 // Head - if (target === 6) return 0.9 // Yarn (Touching) + if (target === 6) return 0.9 // Yarn (Touching) return 0.1 } @@ -203,19 +220,20 @@ const getTopAttentions = (source) => { // Sort descending const sortedKeys = Object.keys(scores).sort((a, b) => scores[b] - scores[a]) const top3 = {} - sortedKeys.slice(0, 3).forEach(key => { + sortedKeys.slice(0, 3).forEach((key) => { top3[key] = scores[key] }) return top3 } const getInsightText = (idx) => { - if (idx === 4) return "猫头最关注猫爪（组成身体）和蝴蝶（捕猎目标）。" - if (idx === 7) return "猫爪最关注毛球（正在玩耍）和猫头。" - if (idx === 2) return "蝴蝶关注到了猫，可能是因为它是个威胁。" - if ([0,1,3,5,8].includes(idx)) return "草地主要关注周围的草地，确认背景纹理。" - if (idx === 6) return "毛球和猫爪有很强的互动关系。" - return "Self-Attention 让每个部分找到它的上下文关联。" + if (idx === 4) return '猫头最关注猫爪（组成身体）和蝴蝶（捕猎目标）。' + if (idx === 7) return '猫爪最关注毛球（正在玩耍）和猫头。' + if (idx === 2) return '蝴蝶关注到了猫，可能是因为它是个威胁。' + if ([0, 1, 3, 5, 8].includes(idx)) + return '草地主要关注周围的草地，确认背景纹理。' + if (idx === 6) return '毛球和猫爪有很强的互动关系。' + return 'Self-Attention 让每个部分找到它的上下文关联。' } @@ -287,7 +305,7 @@ const getInsightText = (idx) => { cursor: pointer; z-index: 2; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - box-shadow: 0 4px 6px rgba(0,0,0,0.05); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .cell-content { @@ -308,12 +326,13 @@ const getInsightText = (idx) => { } /* Interaction States */ -.grid-cell:hover, .grid-cell.is-source { +.grid-cell:hover, +.grid-cell.is-source { z-index: 10; border-color: var(--vp-c-brand); background: var(--vp-c-bg); transform: scale(1.15); - box-shadow: 0 8px 20px rgba(0,0,0,0.15); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .grid-cell.is-strong-attn { @@ -331,7 +350,7 @@ const getInsightText = (idx) => { padding: 2px 6px; border-radius: 10px; font-weight: bold; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Info Panel */ @@ -407,8 +426,13 @@ const getInsightText = (idx) => { width: 80px; } -.item-icon { font-size: 16px; } -.item-name { font-size: 12px; font-weight: 500; } +.item-icon { + font-size: 16px; +} +.item-name { + font-size: 12px; + font-weight: 500; +} .item-right { flex: 1; @@ -449,7 +473,9 @@ const getInsightText = (idx) => { align-items: flex-start; } -.bulb { font-size: 16px; } +.bulb { + font-size: 16px; +} .insight-text { font-size: 12px; color: var(--vp-c-text-1); @@ -457,8 +483,13 @@ const getInsightText = (idx) => { } @keyframes bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-5px); } + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } } @media (max-width: 768px) { diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue index e5b8822..6998e00 100644 --- a/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue +++ b/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue @@ -101,7 +101,10 @@
- Concat: [Vision Tokens] + [Text Tokens] (拼接：视觉在前，文字在后) + Concat: [Vision Tokens] + [Text Tokens] + (拼接：视觉在前，文字在后) Only [Text Tokens] (只有文字 Token)
@@ -132,8 +135,14 @@

VLM = LLM + Vision Encoder (视觉大模型原理)

  • ViT (The Eye): 把图片编码成视觉特征。
    • -
  • Projector (The Translator): 把视觉特征映射到 LLM 的 Token 空间。
    • -
  • Concatenation (拼接): 把视觉 Token 放在文字 Token 之前，作为同一条输入序列。
    • +
  • + Projector (The Translator): 把视觉特征映射到 LLM + 的 Token 空间。 +
    • +
  • + Concatenation (拼接): 把视觉 Token 放在文字 Token + 之前，作为同一条输入序列。 +
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue index 67602d0..3d242da 100644 --- a/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue +++ b/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue @@ -6,16 +6,16 @@
- Step {{ currentStep + 1 }} / 4 -