feat(docs): restructure appendix content into organized directories

- Move standalone AI-related files into 8-artificial-intelligence directory
- Move development tools content into 2-development-tools directory
- Move server/backend content into 4-server-and-backend directory
- Create new index files for each section
- Update .gitignore to exclude old backup directories
- Update theme imports for new component locations
This commit is contained in:
sanbuphy
2026-02-15 01:57:52 +08:00
parent 004496f1d5
commit 07d82d046b
120 changed files with 409 additions and 405 deletions
+2
View File
@@ -4,6 +4,8 @@ tools/*
docs/.vitepress/dist docs/.vitepress/dist
docs/.vitepress/cache docs/.vitepress/cache
temp/* temp/*
docs/zh-cn/appendix-old-backup*/
docs/zh-cn/appendix-dirs-backup*/
CLAUDE.md CLAUDE.md
MULTI_LANGUAGE_PLAN.md MULTI_LANGUAGE_PLAN.md
.trae .trae
+128 -125
View File
@@ -344,7 +344,7 @@ export default defineConfig({
text: '高级开发', text: '高级开发',
link: '/zh-cn/stage-3/intro' link: '/zh-cn/stage-3/intro'
}, },
{ text: '附录', link: '/zh-cn/appendix/intro' } { text: '附录', link: '/zh-cn/appendix/index' }
], ],
sidebar: { sidebar: {
'/zh-cn/stage-0/': productManagerSidebar, '/zh-cn/stage-0/': productManagerSidebar,
@@ -570,152 +570,155 @@ export default defineConfig({
], ],
'/zh-cn/appendix/': [ '/zh-cn/appendix/': [
{ {
text: '人工智能基础', text: '一、计算机是怎么回事',
collapsed: false, collapsed: false,
items: [ items: [
{ { text: '从晶体管到 CPU', link: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu' },
text: '提示词工程', { text: '操作系统(进程 / 内存 / 文件系统)', link: '/zh-cn/appendix/1-computer-fundamentals/operating-systems' },
link: '/zh-cn/appendix/prompt-engineering' { text: '数据的编码、存储与传输', link: '/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage' },
}, { text: '网络:两台电脑如何对话', link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks' },
{ { text: '数据结构', link: '/zh-cn/appendix/1-computer-fundamentals/data-structures' },
text: '人工智能进化史', { text: '算法思维入门', link: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking' },
link: '/zh-cn/appendix/ai-evolution' { text: '编程语言图谱', link: '/zh-cn/appendix/1-computer-fundamentals/programming-languages' },
}, { text: '类型系统与编译原理入门', link: '/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers' }
{ text: '大语言模型', link: '/zh-cn/appendix/llm-intro' },
{ text: '多模态大模型', link: '/zh-cn/appendix/vlm-intro' },
{
text: 'AI 绘画原理',
link: '/zh-cn/appendix/image-gen-intro'
},
{ text: 'AI 音频模型', link: '/zh-cn/appendix/audio-intro' },
{
text: '上下文工程',
link: '/zh-cn/appendix/context-engineering'
},
{ text: 'Agent 智能体', link: '/zh-cn/appendix/agent-intro' },
{
text: 'AI 能力词典',
link: '/zh-cn/appendix/ai-capability-dictionary'
}
] ]
}, },
{ {
text: '前端开发', text: '二、开发环境与工具',
collapsed: false, collapsed: false,
items: [ items: [
{ { text: '命令行与 Shell 脚本', link: '/zh-cn/appendix/2-development-tools/command-line-shell' },
text: 'HTML/CSS/JS 基础', { text: '编辑器与 AI 编程助手', link: '/zh-cn/appendix/2-development-tools/editors-and-ai' },
link: '/zh-cn/appendix/web-basics' { text: 'Git:代码的时光机', link: '/zh-cn/appendix/2-development-tools/git-version-control' },
}, { text: '环境变量与 PATH', link: '/zh-cn/appendix/2-development-tools/environment-path' },
{ { text: '端口与 localhost', link: '/zh-cn/appendix/2-development-tools/ports-localhost' },
text: '前端进化史', { text: 'SSH 与密钥认证', link: '/zh-cn/appendix/2-development-tools/ssh-authentication' },
link: '/zh-cn/appendix/frontend-evolution' { text: '包管理器(npm / pip / cargo', link: '/zh-cn/appendix/2-development-tools/package-managers' },
}, { text: '调试的艺术', link: '/zh-cn/appendix/2-development-tools/debugging-art/' },
{ { text: '正则表达式', link: '/zh-cn/appendix/2-development-tools/regex' }
text: '前端性能优化',
link: '/zh-cn/appendix/frontend-performance'
},
{
text: 'Canvas 2D 入门',
link: '/zh-cn/appendix/canvas-intro'
},
{
text: 'URL 到浏览器显示',
link: '/zh-cn/appendix/url-to-browser'
},
{
text: '浏览器调试器',
link: '/zh-cn/appendix/browser-devtools'
},
{
text: '浏览器渲染原理',
link: '/zh-cn/appendix/browser-rendering-pipeline'
},
{
text: '前端路由原理',
link: '/zh-cn/appendix/frontend-routing'
},
{
text: '组件状态管理',
link: '/zh-cn/appendix/component-state-management'
},
{
text: '前端工程化',
link: '/zh-cn/appendix/frontend-engineering'
}
] ]
}, },
{ {
text: '后端开发', text: '三、浏览器与前端',
collapsed: false, collapsed: false,
items: [ items: [
{ { text: 'JavaScript 语言深入', link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive' },
text: '后端进化史', { text: 'TypeScript:给 JS 加上类型系统', link: '/zh-cn/appendix/3-browser-and-frontend/typescript' },
link: '/zh-cn/appendix/backend-evolution' { text: '前端框架对比(React / Vue / Svelte / Angular', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks' },
}, { text: '浏览器是一个操作系统', link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os' },
{ { text: '浏览器渲染管道', link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering' },
text: '后端分层架构', { text: 'HTML / CSS 布局体系', link: '/zh-cn/appendix/3-browser-and-frontend/html-css-layout' },
link: '/zh-cn/appendix/backend-layered-architecture' { text: 'JavaScript 运行时', link: '/zh-cn/appendix/3-browser-and-frontend/javascript-runtime' },
}, { text: '前端框架的本质', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature' },
{ { text: '状态管理哲学', link: '/zh-cn/appendix/3-browser-and-frontend/state-management' },
text: '后端编程语言', { text: '路由与导航', link: '/zh-cn/appendix/3-browser-and-frontend/routing-navigation' },
link: '/zh-cn/appendix/backend-languages' { text: '图形与动画(Canvas / SVG / WebGL', link: '/zh-cn/appendix/3-browser-and-frontend/graphics-animation' },
}, { text: '实时通信(WebSocket / SSE', link: '/zh-cn/appendix/3-browser-and-frontend/realtime-communication' },
{ { text: '网页性能的度量与优化', link: '/zh-cn/appendix/3-browser-and-frontend/web-performance' },
text: '并发编程模型', { text: '前端工程化全貌', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering' },
link: '/zh-cn/appendix/concurrency-models' { text: '无障碍与国际化', link: '/zh-cn/appendix/3-browser-and-frontend/a11n-i18n' }
},
{
text: '接口设计规范',
link: '/zh-cn/appendix/api-design'
},
{ text: '数据库原理', link: '/zh-cn/appendix/database-intro' },
{ text: '系统缓存设计', link: '/zh-cn/appendix/cache-design' },
{ text: '消息队列设计', link: '/zh-cn/appendix/queue-design' },
{ text: '鉴权原理与实战', link: '/zh-cn/appendix/auth-design' },
{
text: '网关与反向代理',
link: '/zh-cn/appendix/gateway-proxy'
},
{
text: '负载均衡策略',
link: '/zh-cn/appendix/load-balancing'
},
{ text: '埋点设计', link: '/zh-cn/appendix/tracking-design' },
{ text: '线上运维', link: '/zh-cn/appendix/operations' }
] ]
}, },
{ {
text: '云计算与服务', text: '四、服务器与后端',
collapsed: false, collapsed: false,
items: [ items: [
{ { text: '后端语言对比(Node.js / Go / Java / Rust', link: '/zh-cn/appendix/4-server-and-backend/backend-languages' },
text: '云服务基础', { text: '客户端语言对比(Swift / Kotlin / Dart', link: '/zh-cn/appendix/4-server-and-backend/client-languages' },
link: '/zh-cn/appendix/cloud-services' { text: '跨平台方案对比(React Native / Flutter / Electron / Tauri', link: '/zh-cn/appendix/4-server-and-backend/cross-platform' },
}, { text: 'HTTP 协议', link: '/zh-cn/appendix/4-server-and-backend/http-protocol' },
{ { text: '一个请求的完整旅程', link: '/zh-cn/appendix/4-server-and-backend/request-journey' },
text: 'IAM 权限管理', { text: 'Web 框架的本质', link: '/zh-cn/appendix/4-server-and-backend/web-frameworks' },
link: '/zh-cn/appendix/cloud-iam' { text: 'API 设计哲学(REST / GraphQL / gRPC', link: '/zh-cn/appendix/4-server-and-backend/api-design' },
}, { text: 'API 入门', link: '/zh-cn/appendix/4-server-and-backend/api-intro' },
{ { text: '序列化与数据格式', link: '/zh-cn/appendix/4-server-and-backend/serialization' },
text: '对象存储与 CDN', { text: '认证与授权体系', link: '/zh-cn/appendix/4-server-and-backend/auth-authorization' },
link: '/zh-cn/appendix/cloud-storage-cdn' { text: '并发、异步与多线程', link: '/zh-cn/appendix/4-server-and-backend/concurrency-async' },
} { text: '缓存的层次与策略', link: '/zh-cn/appendix/4-server-and-backend/caching' },
{ text: '消息队列与事件驱动', link: '/zh-cn/appendix/4-server-and-backend/message-queues' },
{ text: '异步任务队列与生产消费模型', link: '/zh-cn/appendix/4-server-and-backend/async-task-queues' },
{ text: '限流与背压控制', link: '/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure' },
{ text: '搜索引擎原理', link: '/zh-cn/appendix/4-server-and-backend/search-engines' },
{ text: '文件存储与对象存储', link: '/zh-cn/appendix/4-server-and-backend/file-storage' },
{ text: '后端分层架构', link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture' }
] ]
}, },
{ {
text: '通用技能', text: '五、数据',
collapsed: false, collapsed: false,
items: [ items: [
{ text: 'API 入门', link: '/zh-cn/appendix/api-intro' }, { text: 'SQL', link: '/zh-cn/appendix/5-data/sql' },
{ text: 'IDE 原理', link: '/zh-cn/appendix/ide-intro' }, { text: '数据库原理(索引 / 事务 / 查询优化)', link: '/zh-cn/appendix/5-data/database-fundamentals' },
{ text: '终端入门', link: '/zh-cn/appendix/terminal-intro' }, { text: '数据模型全景(文档 / 图 / 时序 / 向量)', link: '/zh-cn/appendix/5-data/data-models' },
{ text: 'Git 详细介绍', link: '/zh-cn/appendix/git-intro' }, { text: '数据埋点与用户行为采集', link: '/zh-cn/appendix/5-data/data-tracking' },
{ { text: '数据分析基础(统计 / 指标 / 漏斗)', link: '/zh-cn/appendix/5-data/data-analysis' },
text: '计算机网络', { text: 'A/B 测试与实验驱动', link: '/zh-cn/appendix/5-data/ab-testing' },
link: '/zh-cn/appendix/computer-networks' { text: '数据可视化与仪表盘', link: '/zh-cn/appendix/5-data/data-visualization' },
}, { text: '数据治理与数据质量', link: '/zh-cn/appendix/5-data/data-governance' }
{ text: '部署与上线', link: '/zh-cn/appendix/deployment' } ]
},
{
text: '六、架构与系统设计',
collapsed: false,
items: [
{ text: '从单体到微服务的演进', link: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices' },
{ text: '分布式系统的挑战', link: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems' },
{ text: '高可用与容灾', link: '/zh-cn/appendix/6-architecture-and-system-design/high-availability' },
{ text: '系统设计方法论', link: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology' }
]
},
{
text: '七、基础设施与运维',
collapsed: false,
items: [
{ text: 'Linux 基础', link: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics' },
{ text: 'Docker 容器化', link: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers' },
{ text: 'Kubernetes 编排', link: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes' },
{ text: 'CI / CD 自动化', link: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd' },
{ text: '域名、DNS 与 HTTPS', link: '/zh-cn/appendix/7-infrastructure-and-operations/dns-https' },
{ text: '负载均衡与网关', link: '/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway' },
{ text: '网关与反向代理', link: '/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy' },
{ text: '云平台实战', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms' },
{ text: 'IAM 权限管理', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam' },
{ text: '对象存储与 CDN', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn' },
{ text: '基础设施即代码', link: '/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code' },
{ text: '监控、日志与告警', link: '/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging' },
{ text: '故障排查与应急响应', link: '/zh-cn/appendix/7-infrastructure-and-operations/incident-response' }
]
},
{
text: '八、人工智能',
collapsed: false,
items: [
{ text: 'AI 简史与核心概念', link: '/zh-cn/appendix/8-artificial-intelligence/ai-history' },
{ text: '神经网络与深度学习', link: '/zh-cn/appendix/8-artificial-intelligence/neural-networks' },
{ text: 'Transformer 与注意力机制', link: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention' },
{ text: '大语言模型的工作原理', link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles' },
{ text: '提示词工程', link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering' },
{ text: '上下文工程', link: '/zh-cn/appendix/8-artificial-intelligence/context-engineering' },
{ text: '多模态模型(视觉 / 音频 / 视频)', link: '/zh-cn/appendix/8-artificial-intelligence/multimodal-models' },
{ text: '图像生成原理', link: '/zh-cn/appendix/8-artificial-intelligence/image-generation' },
{ text: '语音合成与识别', link: '/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition' },
{ text: 'Embedding 与向量检索', link: '/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval' },
{ text: 'RAG 架构', link: '/zh-cn/appendix/8-artificial-intelligence/rag' },
{ text: 'AI Agent 与工具调用', link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents' },
{ text: 'AI 协议(MCP 等)', link: '/zh-cn/appendix/8-artificial-intelligence/ai-protocols' },
{ text: '模型微调与部署', link: '/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment' },
{ text: 'AI 原生应用设计', link: '/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design' },
{ text: 'AI 能力词典', link: '/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary' }
]
},
{
text: '九、工程素养',
collapsed: false,
items: [
{ text: '代码质量与重构', link: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring' },
{ text: '测试策略', link: '/zh-cn/appendix/9-engineering-excellence/testing-strategies' },
{ text: '设计模式', link: '/zh-cn/appendix/9-engineering-excellence/design-patterns' },
{ text: '安全思维与攻防基础', link: '/zh-cn/appendix/9-engineering-excellence/security-thinking' },
{ text: '技术文档写作', link: '/zh-cn/appendix/9-engineering-excellence/technical-writing' },
{ text: '开源协作', link: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration' },
{ text: '技术选型方法论', link: '/zh-cn/appendix/9-engineering-excellence/technology-selection' }
] ]
} }
] ]
+16
View File
@@ -81,6 +81,12 @@ import AudioWaveformDemo from './components/appendix/audio-intro/AudioWaveformDe
import AudioTokenizationDemo from './components/appendix/audio-intro/AudioTokenizationDemo.vue' import AudioTokenizationDemo from './components/appendix/audio-intro/AudioTokenizationDemo.vue'
import SpectrogramViz from './components/appendix/audio-intro/SpectrogramViz.vue' import SpectrogramViz from './components/appendix/audio-intro/SpectrogramViz.vue'
import AutoregressiveAudioDemo from './components/appendix/audio-intro/AutoregressiveAudioDemo.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 // Web Basics Components
import WebTechTriad from './components/appendix/web-basics/WebTechTriad.vue' import WebTechTriad from './components/appendix/web-basics/WebTechTriad.vue'
@@ -122,6 +128,9 @@ import TcpHandshakeDemo from './components/appendix/web-basics/TcpHandshakeDemo.
import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue' import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue'
import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue' import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue'
import BrowserRenderingDemo from './components/appendix/web-basics/BrowserRenderingDemo.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 FrontendEvolutionDemo from './components/appendix/web-basics/FrontendEvolutionDemo.vue'
import SliceRequestDemo from './components/appendix/web-basics/SliceRequestDemo.vue' import SliceRequestDemo from './components/appendix/web-basics/SliceRequestDemo.vue'
import ResponsiveGridDemo from './components/appendix/web-basics/ResponsiveGridDemo.vue' import ResponsiveGridDemo from './components/appendix/web-basics/ResponsiveGridDemo.vue'
@@ -550,10 +559,17 @@ export default {
app.component('AudioTokenizationDemo', AudioTokenizationDemo) app.component('AudioTokenizationDemo', AudioTokenizationDemo)
app.component('SpectrogramViz', SpectrogramViz) app.component('SpectrogramViz', SpectrogramViz)
app.component('AutoregressiveAudioDemo', AutoregressiveAudioDemo) 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 // Web Basics Components Registration
app.component('WebTechTriad', WebTechTriad) app.component('WebTechTriad', WebTechTriad)
app.component('UrlToBrowserDemo', UrlToBrowserDemo) app.component('UrlToBrowserDemo', UrlToBrowserDemo)
app.component('UrlToBrowserQuickStart', UrlToBrowserQuickStart)
app.component('GitWorkflowDemo', GitWorkflowDemo) app.component('GitWorkflowDemo', GitWorkflowDemo)
app.component('GitThreeAreasDemo', GitThreeAreasDemo) app.component('GitThreeAreasDemo', GitThreeAreasDemo)
app.component('GitStorageDemo', GitStorageDemo) app.component('GitStorageDemo', GitStorageDemo)
@@ -0,0 +1,3 @@
# 算法思维入门
> 待实现
@@ -1,5 +1,4 @@
# 计算机网络:互联网的运作原理 # 网络:两台电脑如何对话
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**当你在浏览器输入 www.baidu.com 并按下回车,到底发生了什么?** 这个简单动作背后,其实隐藏着一个庞大的"快递系统":从填写订单(URL)到查询地址簿(DNS),从建立运输通道(TCP)到快递员送货(HTTP),最终在你屏幕上展示(渲染)。本章带你完整理解这个神奇的过程。 **当你在浏览器输入 www.baidu.com 并按下回车,到底发生了什么?** 这个简单动作背后,其实隐藏着一个庞大的"快递系统":从填写订单(URL)到查询地址簿(DNS),从建立运输通道(TCP)到快递员送货(HTTP),最终在你屏幕上展示(渲染)。本章带你完整理解这个神奇的过程。
::: :::
@@ -0,0 +1,3 @@
# 数据的编码、存储与传输
> 待实现
@@ -0,0 +1,3 @@
# 数据结构
> 待实现
@@ -0,0 +1,3 @@
# 操作系统(进程 / 内存 / 文件系统)
> 待实现
@@ -0,0 +1,3 @@
# 编程语言图谱
> 待实现
@@ -0,0 +1,3 @@
# 从晶体管到 CPU
> 待实现
@@ -0,0 +1,3 @@
# 类型系统与编译原理入门
> 待实现
@@ -1,5 +1,4 @@
# 终端原理 (Introduction to Terminal Principles) # 命令行与 Shell 脚本
> 💡 **学习指南**:本章节旨在为零基础读者提供一个关于终端(Terminal)工作原理的系统性认知。无需具备计算机专业背景,我们将通过交互式演示,由浅入深地解析终端的运行机制。 > 💡 **学习指南**:本章节旨在为零基础读者提供一个关于终端(Terminal)工作原理的系统性认知。无需具备计算机专业背景,我们将通过交互式演示,由浅入深地解析终端的运行机制。
## 0. 快速上手:如何打开终端? ## 0. 快速上手:如何打开终端?
@@ -0,0 +1,2 @@
# 调试的艺术
> 待实现
@@ -0,0 +1,3 @@
# 编辑器与 AI 编程助手
> 待实现

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

@@ -0,0 +1,3 @@
# 环境变量与 PATH
> 待实现
@@ -1,5 +1,4 @@
# Git 版本控制:代码世界的时光机 # Git:代码的时光机
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**写代码时最怕什么?** 写错了想回退、改崩了想重来、多人同时改同一个文件...这些头疼的事,Git 都能帮你搞定!它就像是代码世界的"时光机",让你随时回到过去,又能和队友在各自的"平行宇宙"里安全开发。 **写代码时最怕什么?** 写错了想回退、改崩了想重来、多人同时改同一个文件...这些头疼的事,Git 都能帮你搞定!它就像是代码世界的"时光机",让你随时回到过去,又能和队友在各自的"平行宇宙"里安全开发。
::: :::
@@ -181,9 +181,9 @@ onMounted(() => {
为了方便大家理解每个选项的含义,在这里我们对菜单栏进行深入解析: 为了方便大家理解每个选项的含义,在这里我们对菜单栏进行深入解析:
![](images/index-2026-01-09-11-35-55.png) ![](editors-and-ai/images/index-2026-01-09-11-35-55.png)
![](images/index-2026-01-09-11-36-23.png) ![](editors-and-ai/images/index-2026-01-09-11-36-23.png)
<details class="custom-block details" id="vscode-file-menu"> <details class="custom-block details" id="vscode-file-menu">
<summary>File(文件):项目与文件的打开/保存/工作区管理</summary> <summary>File(文件):项目与文件的打开/保存/工作区管理</summary>
@@ -0,0 +1,3 @@
# 包管理器(npm / pip / cargo
> 待实现
@@ -0,0 +1,3 @@
# 端口与 localhost
> 待实现
@@ -0,0 +1,3 @@
# 正则表达式
> 待实现
@@ -0,0 +1,3 @@
# SSH 与密钥认证
> 待实现
@@ -0,0 +1,3 @@
# 无障碍与国际化
> 待实现
@@ -1,5 +1,4 @@
# 浏览器渲染管线与事件循环 # 浏览器渲染管
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么有些网页流畅如丝,有些却卡成PPT?** 浏览器是怎么把一堆HTML、CSS、JavaScript代码变成你眼前看到的网页的?本章将带你深入浏览器的"车间",理解它的工作流程,从而写出性能更好的网页。 **为什么有些网页流畅如丝,有些却卡成PPT?** 浏览器是怎么把一堆HTML、CSS、JavaScript代码变成你眼前看到的网页的?本章将带你深入浏览器的"车间",理解它的工作流程,从而写出性能更好的网页。
::: :::
@@ -1,8 +1,4 @@
# 从 URL 到网页显示:一次网络"快递"之旅 # 浏览器是一个操作系统
<script setup>
import UrlToBrowserQuickStart from '../../.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
</script>
> **学习指南**:本章节无需编程基础。我们将用**"网购"**的生活化比喻,配合**真实的技术过程**,带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。 > **学习指南**:本章节无需编程基础。我们将用**"网购"**的生活化比喻,配合**真实的技术过程**,带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
@@ -1,5 +1,4 @@
# 前端工程化与构建流水线 # 前端工程化全貌
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**如何把你写的代码,变成用户浏览器能跑的网站?** 这就像是问:如何把原材料变成成品,还要保证质量、控制成本?本章将带你深入理解前端工程化的核心概念和构建流程。 **如何把你写的代码,变成用户浏览器能跑的网站?** 这就像是问:如何把原材料变成成品,还要保证质量、控制成本?本章将带你深入理解前端工程化的核心概念和构建流程。
::: :::
@@ -0,0 +1,3 @@
# 前端框架的本质
> 待实现
@@ -1,5 +1,4 @@
# 前端开发演进史:从"贴海报"到"搭乐高" # 前端框架对比(React / Vue / Svelte / Angular
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么网页越来越复杂?前端技术为什么要不断演进?** 这个问题会带你理解从简单网页到现代 Web 应用的技术演变之路。 **为什么网页越来越复杂?前端技术为什么要不断演进?** 这个问题会带你理解从简单网页到现代 Web 应用的技术演变之路。
::: :::
@@ -1,5 +1,4 @@
# Canvas 2D 入门:从像素到动画 # 图形与动画(Canvas / SVG / WebGL
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**如何在网页上画图、做动画、甚至开发游戏?** Canvas 提供了一个强大的 2D 绘图能力,让你用代码创造视觉内容。 **如何在网页上画图、做动画、甚至开发游戏?** Canvas 提供了一个强大的 2D 绘图能力,让你用代码创造视觉内容。
::: :::
@@ -1,5 +1,4 @@
# HTML/CSS/JavaScript 基础 (Web Basics) # HTML / CSS 布局体系
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**网页是怎么做出来的?为什么有的网页只有文字,有的却像应用一样可以交互?** 这个问题会引出 Web 开发的三大基石,让你理解每一个网页背后的结构。 **网页是怎么做出来的?为什么有的网页只有文字,有的却像应用一样可以交互?** 这个问题会引出 Web 开发的三大基石,让你理解每一个网页背后的结构。
::: :::
@@ -0,0 +1,3 @@
# JavaScript 语言深入
> 待实现
@@ -0,0 +1,3 @@
# JavaScript 运行时
> 待实现
@@ -0,0 +1,3 @@
# 实时通信(WebSocket / SSE
> 待实现
@@ -1,5 +1,4 @@
# 前端路由:单页应用的导航系统 # 路由与导航
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么有些网站切换页面时不会白屏刷新,像 App 一样流畅?** 这就是前端路由的魔法。本章将带你从传统网站的"翻书式跳转",进入到单页应用的"幻灯片切换"世界,理解前端路由如何让用户体验提升一个档次。 **为什么有些网站切换页面时不会白屏刷新,像 App 一样流畅?** 这就是前端路由的魔法。本章将带你从传统网站的"翻书式跳转",进入到单页应用的"幻灯片切换"世界,理解前端路由如何让用户体验提升一个档次。
::: :::
@@ -1,5 +1,4 @@
# 组件化与状态管理模式总览 # 状态管理哲学
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**当应用越来越大,组件之间该如何优雅地共享和同步数据?** 你可能会遇到这样的困境:用户在商品页添加了购物车,但头部的购物车数量没更新;两个不相关的组件需要同一份数据,却不知道该怎么传递。本章将带你从"混乱的数据传递"进化到"清晰的状态管理"。 **当应用越来越大,组件之间该如何优雅地共享和同步数据?** 你可能会遇到这样的困境:用户在商品页添加了购物车,但头部的购物车数量没更新;两个不相关的组件需要同一份数据,却不知道该怎么传递。本章将带你从"混乱的数据传递"进化到"清晰的状态管理"。
::: :::
@@ -0,0 +1,3 @@
# TypeScript:给 JS 加上类型系统
> 待实现
@@ -1,5 +1,4 @@
# 前端性能优化 # 网页性能的度量与优化
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么你的网页加载很慢,用户还在疯狂抱怨卡顿?** 这就像是问:为什么餐厅上菜慢、顾客等得不耐烦?本章将带你深入理解前端性能优化的核心概念,让你的网页"飞"起来。 **为什么你的网页加载很慢,用户还在疯狂抱怨卡顿?** 这就像是问:为什么餐厅上菜慢、顾客等得不耐烦?本章将带你深入理解前端性能优化的核心概念,让你的网页"飞"起来。
::: :::
@@ -1,5 +1,4 @@
# API 设计与错误处理:请求、响应与状态码结构 # API 设计哲学(REST / GraphQL / gRPC
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**前后端如何高效对话?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?上菜怎么规范,客人满意?API 设计解决的就是"对话规则"的问题。 **前后端如何高效对话?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?上菜怎么规范,客人满意?API 设计解决的就是"对话规则"的问题。
::: :::
@@ -1,5 +1,4 @@
# API 入门 # API 入门
<ApiQuickStartDemo /> <ApiQuickStartDemo />
👆 看见了吗?点一下按钮,230 毫秒后,一句格言就回来了。 👆 看见了吗?点一下按钮,230 毫秒后,一句格言就回来了。
@@ -0,0 +1,3 @@
# 异步任务队列与生产消费模型
> 待实现
@@ -1,5 +1,4 @@
# 鉴权原理与实战:从 HTTP Basic 到 JWT (Interactive Guide to Authentication) # 认证与授权体系
> 💡 **学习指南**:本章节带你深入理解后端系统的"门禁系统"——鉴权与授权。我们将从最基础的"你是谁"讲起,一步步掌握 Session、JWT、OAuth2.0 等现代鉴权方案。 > 💡 **学习指南**:本章节带你深入理解后端系统的"门禁系统"——鉴权与授权。我们将从最基础的"你是谁"讲起,一步步掌握 Session、JWT、OAuth2.0 等现代鉴权方案。
<AuthEvolutionDemo /> <AuthEvolutionDemo />
@@ -1,5 +1,4 @@
# 后端编程语言选型指南:从问题出发做决策 # 后端语言对比(Node.js / Go / Java / Rust
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**"我们后端该用什么语言?"** 这就像问:"我应该买什么工具?" 答案永远不是"最好的",而是"最适合你的"。本章将带你全面了解主流后端编程语言的特点、应用场景和选择策略,帮助你做出明智的决策。 **"我们后端该用什么语言?"** 这就像问:"我应该买什么工具?" 答案永远不是"最好的",而是"最适合你的"。本章将带你全面了解主流后端编程语言的特点、应用场景和选择策略,帮助你做出明智的决策。
::: :::
@@ -1,5 +1,4 @@
# 后端分层架构:Controller / Service / Repository / Domain # 后端分层架构
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**代码越写越乱,怎么组织才能清晰易懂?** 这就像问:你是把所有食材、厨具、调料都扔在一个抽屉里,还是用橱柜、冰箱、抽屉分类摆放?分层架构就是让代码"物归其位"的方法。 **代码越写越乱,怎么组织才能清晰易懂?** 这就像问:你是把所有食材、厨具、调料都扔在一个抽屉里,还是用橱柜、冰箱、抽屉分类摆放?分层架构就是让代码"物归其位"的方法。
::: :::
@@ -1,5 +1,4 @@
# 缓存系统设计:从零到高性能架构 # 缓存的层次与策略
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么有些网站打开只需 50 毫秒,而有些却要等 5 秒?** 这就像问:为什么从书包拿书只要 1 秒,而要去图书馆找书要 10 分钟?答案就是——缓存。本章将带你深入理解缓存的核心原理、设计模式和实战技巧,让你的系统性能提升 100 倍。 **为什么有些网站打开只需 50 毫秒,而有些却要等 5 秒?** 这就像问:为什么从书包拿书只要 1 秒,而要去图书馆找书要 10 分钟?答案就是——缓存。本章将带你深入理解缓存的核心原理、设计模式和实战技巧,让你的系统性能提升 100 倍。
::: :::
@@ -0,0 +1,3 @@
# 客户端语言对比(Swift / Kotlin / Dart
> 待实现
@@ -1,5 +1,4 @@
# 进程 / 线程 / 协程与服务并发模型 # 并发、异步与多线程
> 💡 **学习指南**:并发编程是很多后端工程师的"阿喀琉斯之踵"——面试被问倒、线上出 Bug、性能调优没思路。本章节会围绕一个核心问题展开:**当10万个用户同时请求你的服务,你的代码会崩吗?** > 💡 **学习指南**:并发编程是很多后端工程师的"阿喀琉斯之踵"——面试被问倒、线上出 Bug、性能调优没思路。本章节会围绕一个核心问题展开:**当10万个用户同时请求你的服务,你的代码会崩吗?**
在开始之前,建议你先补两块"基础砖": 在开始之前,建议你先补两块"基础砖":
@@ -0,0 +1,3 @@
# 跨平台方案对比(React Native / Flutter / Electron / Tauri
> 待实现
@@ -0,0 +1,3 @@
# 文件存储与对象存储
> 待实现
@@ -0,0 +1,3 @@
# HTTP 协议
> 待实现
@@ -1,5 +1,4 @@
# 消息队列设计:从系统解耦到高可用架构 # 消息队列与事件驱动
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**当系统耦合严重、流量突增时,如何保证核心链路稳定?** 消息队列是现代分布式系统的"缓冲器"和"解耦器"。本文通过真实案例(餐厅叫号、快递分拣、秒杀系统)深入理解消息队列的设计哲学和工程实践。 **当系统耦合严重、流量突增时,如何保证核心链路稳定?** 消息队列是现代分布式系统的"缓冲器"和"解耦器"。本文通过真实案例(餐厅叫号、快递分拣、秒杀系统)深入理解消息队列的设计哲学和工程实践。
::: :::
@@ -0,0 +1,3 @@
# 限流与背压控制
> 待实现
@@ -0,0 +1,3 @@
# 一个请求的完整旅程
> 待实现
@@ -0,0 +1,3 @@
# 搜索引擎原理
> 待实现
@@ -0,0 +1,3 @@
# 序列化与数据格式
> 待实现
@@ -1,5 +1,4 @@
# 后端架构演进:从单机到云原生 # Web 框架的本质
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**代码写好了,怎么让全世界的人都能访问?** 这就像问:你是想开一家路边小摊,还是经营一家跨国连锁餐厅?后端架构的选择,决定了你的"餐厅"能服务多少顾客。 **代码写好了,怎么让全世界的人都能访问?** 这就像问:你是想开一家路边小摊,还是经营一家跨国连锁餐厅?后端架构的选择,决定了你的"餐厅"能服务多少顾客。
::: :::
+3
View File
@@ -0,0 +1,3 @@
# A/B 测试与实验驱动
> 待实现
@@ -0,0 +1,3 @@
# 数据分析基础(统计 / 指标 / 漏斗)
> 待实现
@@ -0,0 +1,3 @@
# 数据治理与数据质量
> 待实现
@@ -0,0 +1,3 @@
# 数据模型全景(文档 / 图 / 时序 / 向量)
> 待实现
@@ -1,5 +1,4 @@
# 埋点设计:从原理到实战 (Interactive Guide to Event Tracking) # 数据埋点与用户行为采集
> 💡 **学习指南**:本章节带你深入理解数据采集的基石——埋点设计。我们将从最基础的"为什么要埋点"讲起,一步步掌握埋点方案、数据模型、处理流程,以及实战中的坑与解决方案。 > 💡 **学习指南**:本章节带你深入理解数据采集的基石——埋点设计。我们将从最基础的"为什么要埋点"讲起,一步步掌握埋点方案、数据模型、处理流程,以及实战中的坑与解决方案。
<TrackingOverviewDemo /> <TrackingOverviewDemo />
@@ -0,0 +1,3 @@
# 数据可视化与仪表盘
> 待实现
@@ -1,5 +1,4 @@
# 数据库原理入门:为什么淘宝能在 0.01 秒内找到你的订单? # 数据库原理(索引 / 事务 / 查询优化)
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**为什么你的 Excel 查询要 10 秒,而淘宝搜索只要 0.01 秒?** 当数据从"几千条"变成"十亿条",从"单人使用"变成"千万人同时访问",Excel 就不够用了。数据库就是为解决这个问题而生的——它是专门处理海量数据、高并发访问的"超级 Excel"。本章将带你从零开始理解数据库的核心原理。 **为什么你的 Excel 查询要 10 秒,而淘宝搜索只要 0.01 秒?** 当数据从"几千条"变成"十亿条",从"单人使用"变成"千万人同时访问",Excel 就不够用了。数据库就是为解决这个问题而生的——它是专门处理海量数据、高并发访问的"超级 Excel"。本章将带你从零开始理解数据库的核心原理。
::: :::
+3
View File
@@ -0,0 +1,3 @@
# SQL
> 待实现
@@ -0,0 +1,3 @@
# 分布式系统的挑战
> 待实现
@@ -0,0 +1,3 @@
# 高可用与容灾
> 待实现
@@ -0,0 +1,3 @@
# 从单体到微服务的演进
> 待实现
@@ -0,0 +1,3 @@
# 系统设计方法论
> 待实现
@@ -1,5 +1,4 @@
# 服务上线之旅:从零开始的完整指南 # CI / CD 自动化
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**代码在本地跑得好好的,怎么让全世界的人都能访问?** **代码在本地跑得好好的,怎么让全世界的人都能访问?**
::: :::
@@ -1,5 +1,4 @@
# 云账号与权限管理模型:IAM / RAM 角色与权限关系 # 云身份与权限管理
> **学习指南**:提示词工程解决的是"怎么把话说清楚",云账号权限管理解决的是"谁能做什么事"。本章节会围绕一个问题展开:**在云端世界里,如何既能方便地授权,又不把钥匙交给不该给的人?** > **学习指南**:提示词工程解决的是"怎么把话说清楚",云账号权限管理解决的是"谁能做什么事"。本章节会围绕一个问题展开:**在云端世界里,如何既能方便地授权,又不把钥匙交给不该给的人?**
在开始之前,建议你先补两块"基础砖": 在开始之前,建议你先补两块"基础砖":
@@ -1,5 +1,4 @@
# 云服务厂商入门指南 (Cloud Services Guide) # 云平台实战
> **学习指南**:云服务厂商不是"买服务器的网站",而是"像水电公司一样提供计算能力的基础设施"。本章节会围绕一个核心问题展开:**从零开始,如何理解并使用云服务?** 我们会用真实场景、生动类比和实战步骤,帮你建立云服务的完整认知地图。 > **学习指南**:云服务厂商不是"买服务器的网站",而是"像水电公司一样提供计算能力的基础设施"。本章节会围绕一个核心问题展开:**从零开始,如何理解并使用云服务?** 我们会用真实场景、生动类比和实战步骤,帮你建立云服务的完整认知地图。
在开始之前,建议你先了解: 在开始之前,建议你先了解:
@@ -1,5 +1,4 @@
# 对象存储 + CDN 加速路径:从上传到用户访问 # 对象存储 CDN
> 💡 **学习指南**:本文会带你走完一条完整的链路——从文件上传到用户下载。你会看到对象存储如何像"智能仓库"一样管理海量文件,CDN 如何像"快递网点"一样把内容送到用户家门口,以及这中间有哪些"坑"等着你跳进去。建议先了解基础的 HTTP 请求和 DNS 解析原理。 > 💡 **学习指南**:本文会带你走完一条完整的链路——从文件上传到用户下载。你会看到对象存储如何像"智能仓库"一样管理海量文件,CDN 如何像"快递网点"一样把内容送到用户家门口,以及这中间有哪些"坑"等着你跳进去。建议先了解基础的 HTTP 请求和 DNS 解析原理。
在开始之前,建议你先补几块"基础砖": 在开始之前,建议你先补几块"基础砖":
@@ -0,0 +1,3 @@
# 域名、DNS 与 HTTPS
> 待实现
@@ -0,0 +1,3 @@
# Docker 容器化
> 待实现
@@ -1,5 +1,4 @@
# 反向代理与网关:Nginx / API Gateway 在系统中的位置 # 网关与反向代理
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**在高并发的互联网架构中,如何把流量安全、高效地送到正确的服务?** 反向代理解决"流量怎么分发",API网关解决"请求怎么处理"。本文通过真实案例(前台接待、保安系统、智能路由)深入理解网关的设计哲学和工程实践。 **在高并发的互联网架构中,如何把流量安全、高效地送到正确的服务?** 反向代理解决"流量怎么分发",API网关解决"请求怎么处理"。本文通过真实案例(前台接待、保安系统、智能路由)深入理解网关的设计哲学和工程实践。
::: :::
@@ -0,0 +1,3 @@
# 故障排查与应急响应
> 待实现
@@ -0,0 +1,3 @@
# 基础设施即代码
> 待实现
@@ -0,0 +1,3 @@
# Kubernetes 编排
> 待实现
@@ -0,0 +1,3 @@
# Linux 基础
> 待实现
@@ -1,5 +1,4 @@
# 负载均衡与多实例部署 # 负载均衡与网关
::: tip 🎯 核心问题 ::: tip 🎯 核心问题
**当单台服务器扛不住时,如何把流量"聪明地"分配到多个服务器实例?** 负载均衡是现代分布式系统的"分发员"。本文通过真实案例(奶茶店收银、快递分拣、交通指挥)深入理解负载均衡的设计哲学和工程实践。 **当单台服务器扛不住时,如何把流量"聪明地"分配到多个服务器实例?** 负载均衡是现代分布式系统的"分发员"。本文通过真实案例(奶茶店收银、快递分拣、交通指挥)深入理解负载均衡的设计哲学和工程实践。
::: :::
@@ -1,5 +1,4 @@
# 线上运维:从监控到故障排查 (Interactive Guide to Operations) # 监控、日志与告警
> 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你了解运维的完整知识体系。从监控告警到故障排查,从容量规划到自动化运维,全面掌握线上系统运维技能。 > 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你了解运维的完整知识体系。从监控告警到故障排查,从容量规划到自动化运维,全面掌握线上系统运维技能。
## 0. 引言:系统上线只是开始 ## 0. 引言:系统上线只是开始
@@ -1,5 +1,4 @@
# Agent 智能体入门 (Interactive Intro to AI Agent) # AI Agent 与工具调用
> 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你深入了解 AI Agent(智能体)的工作原理。我们将从最基本的"工具调用"讲起,一直到 Agent 是如何规划、记忆和协作的。 > 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你深入了解 AI Agent(智能体)的工作原理。我们将从最基本的"工具调用"讲起,一直到 Agent 是如何规划、记忆和协作的。
<AgentQuickStartDemo /> <AgentQuickStartDemo />
@@ -1,5 +1,4 @@
# AI 词典:主流模型、产品形态与应用场景一览 # AI 能力词典
随着生成式 AI 技术在各类产品和业务场景中的广泛落地,一个越来越现实的问题摆在每个我们面前: **到底有哪些 AI 能力可以用?** 在具体的需求里,又 **该选择哪一种能力、哪一类模型或哪一个产品来承载?** 随着生成式 AI 技术在各类产品和业务场景中的广泛落地,一个越来越现实的问题摆在每个我们面前: **到底有哪些 AI 能力可以用?** 在具体的需求里,又 **该选择哪一种能力、哪一类模型或哪一个产品来承载?**
面对这种困惑,最直观的做法或许是 “临时抱佛脚”:**遇到需求再搜索市面上云服务厂商的产品 API,或者是对应模型,搜索市面上的商业级解决方案对照文档与 Demo进行处理** 。看到图片需求就想到图像生成,碰到文本任务就找来大模型,涉及语音交互就想起 ASR 和 TTS,再在海量 API 与服务中货比三家。然而,把零散的产品堆在一起,与在企业级场景中系统性地规划、选型和组合 AI 能力,是两件截然不同的事情。仅靠临时查资料与经验判断,会带来能力认知碎片化、方案设计随意、能力复用困难等一系列严峻挑战。 面对这种困惑,最直观的做法或许是 “临时抱佛脚”:**遇到需求再搜索市面上云服务厂商的产品 API,或者是对应模型,搜索市面上的商业级解决方案对照文档与 Demo进行处理** 。看到图片需求就想到图像生成,碰到文本任务就找来大模型,涉及语音交互就想起 ASR 和 TTS,再在海量 API 与服务中货比三家。然而,把零散的产品堆在一起,与在企业级场景中系统性地规划、选型和组合 AI 能力,是两件截然不同的事情。仅靠临时查资料与经验判断,会带来能力认知碎片化、方案设计随意、能力复用困难等一系列严峻挑战。
@@ -1,5 +1,4 @@
# 人工智能进化史:从"教它规则"到"让它创造" # AI 简史与核心概念
> 💡 **学习指南**:本章节通过交互式演示,带你回顾 AI 如何从“只会算数的机器”进化成“能写诗的艺术家”。 > 💡 **学习指南**:本章节通过交互式演示,带你回顾 AI 如何从“只会算数的机器”进化成“能写诗的艺术家”。
> >
> 我们将聚焦于三次核心的思维跃迁:从**教它规则**,到**让它模仿**,最终实现**让它创造**。同时,我们也会梳理关键的历史节点,带你理清技术发展的脉络。 > 我们将聚焦于三次核心的思维跃迁:从**教它规则**,到**让它模仿**,最终实现**让它创造**。同时,我们也会梳理关键的历史节点,带你理清技术发展的脉络。
@@ -0,0 +1,3 @@
# AI 原生应用设计
> 待实现
@@ -0,0 +1,3 @@
# AI 协议(MCP 等)
> 待实现
@@ -1,5 +1,4 @@
# 上下文工程入门 (Context Engineering) # 上下文工程
> 💡 **学习指南**:提示词工程解决的是“怎么把话说清楚”,上下文工程解决的是“让模型在合适的时刻看到合适的信息”。本章节会围绕一个问题展开:**在有限的上下文窗口里,如何既让模型懂你,又不把钱烧光?** > 💡 **学习指南**:提示词工程解决的是“怎么把话说清楚”,上下文工程解决的是“让模型在合适的时刻看到合适的信息”。本章节会围绕一个问题展开:**在有限的上下文窗口里,如何既让模型懂你,又不把钱烧光?**
在开始之前,建议你先补两块“基础砖”: 在开始之前,建议你先补两块“基础砖”:
@@ -0,0 +1,3 @@
# Embedding 与向量检索
> 待实现
@@ -1,5 +1,4 @@
# AI 绘画与生图模型入门 (Image Generation Intro) # 图像生成原理
> 💡 **学习指南**:提示词工程是“教 AI 说话”,而生图模型则是“教 AI 做梦”。本章节将带你拆解 AI 画笔背后的魔法——它是如何从一堆毫无意义的噪点中,变出足以乱真的艺术品的? > 💡 **学习指南**:提示词工程是“教 AI 说话”,而生图模型则是“教 AI 做梦”。本章节将带你拆解 AI 画笔背后的魔法——它是如何从一堆毫无意义的噪点中,变出足以乱真的艺术品的?
在开始之前,建议你先体验一下“神笔马良”的感觉。 在开始之前,建议你先体验一下“神笔马良”的感觉。
@@ -22,7 +22,7 @@ AI 本质上是一个**概率预测机器**Next Token Predictor),它不
当我们谈论“工程”时,我们强调的是:**可复现、可验证、可转移**。 当我们谈论“工程”时,我们强调的是:**可复现、可验证、可转移**。
![](images/image7.png) ![](prompt-engineering/images/image7.png)
AI 模型像一个**黑盒子**:我们知道输入(提示词)和输出(回答),但很难完全掌控中间发生了什么。 AI 模型像一个**黑盒子**:我们知道输入(提示词)和输出(回答),但很难完全掌控中间发生了什么。
@@ -69,7 +69,7 @@ AI 模型像一个**黑盒子**:我们知道输入(提示词)和输出(
大多数传统大模型(如 GPT-3.5, Llama 2)属于此类。它们**直觉式地反应**,说完上句接下句,不做深层逻辑推演。 大多数传统大模型(如 GPT-3.5, Llama 2)属于此类。它们**直觉式地反应**,说完上句接下句,不做深层逻辑推演。
![](images/image14.png) ![](prompt-engineering/images/image14.png)
- **特点**:快,但容易在复杂逻辑上犯错。 - **特点**:快,但容易在复杂逻辑上犯错。
- **策略**:需要你把步骤拆解得非常细(Chain of Thought),一步步喂给它。 - **策略**:需要你把步骤拆解得非常细(Chain of Thought),一步步喂给它。
@@ -78,7 +78,7 @@ AI 模型像一个**黑盒子**:我们知道输入(提示词)和输出(
新一代模型(如 o1, R1)在回答前会进行“隐式推理”。 新一代模型(如 o1, R1)在回答前会进行“隐式推理”。
![](images/image13.png) ![](prompt-engineering/images/image13.png)
- **特点**:慢,但逻辑能力强,能自我纠错。 - **特点**:慢,但逻辑能力强,能自我纠错。
- **策略**:通常不需要复杂的 Prompt 技巧,直接说清楚目标即可,过多的“指手画脚”反而可能干扰它。 - **策略**:通常不需要复杂的 Prompt 技巧,直接说清楚目标即可,过多的“指手画脚”反而可能干扰它。
@@ -356,7 +356,7 @@ AI 最容易犯的毛病就是**不懂装懂**。
我们推荐使用 [SiliconFlow Playground](https://cloud.siliconflow.com/me/playground/chat)(或任何你习惯的 LLM 平台),按照下面的**3 个挑战**来验证你学到的技巧。 我们推荐使用 [SiliconFlow Playground](https://cloud.siliconflow.com/me/playground/chat)(或任何你习惯的 LLM 平台),按照下面的**3 个挑战**来验证你学到的技巧。
![](images/image15.png) ![](prompt-engineering/images/image15.png)
> **💡 操作提示**:点击右侧侧边栏的 "Add Model for Comparison",可以左右分屏对比两个模型(比如 Qwen-Max vs Llama-3)对同一个 Prompt 的反应。 > **💡 操作提示**:点击右侧侧边栏的 "Add Model for Comparison",可以左右分屏对比两个模型(比如 Qwen-Max vs Llama-3)对同一个 Prompt 的反应。
@@ -1,5 +1,4 @@
# 大语言模型入门 (Interactive Intro to LLM) # 大语言模型的工作原理
> 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你深入了解大语言模型(LLM)的底层工作原理。我们将从最基础的分词讲起,一直到 GPT 是如何训练和推理的。 > 💡 **学习指南**:本章节无需编程基础,通过交互式演示带你深入了解大语言模型(LLM)的底层工作原理。我们将从最基础的分词讲起,一直到 GPT 是如何训练和推理的。
<LlmQuickStartDemo /> <LlmQuickStartDemo />
@@ -0,0 +1,3 @@
# 模型微调与部署
> 待实现
@@ -1,5 +1,4 @@
# 多模态模型入门 (VLM Intro) # 多模态模型(视觉 / 音频 / 视频)
> 💡 **学习指南**:本章节无需深厚的计算机视觉背景,通过交互式演示带你理解 AI 是如何拥有“眼睛”的。我们将揭秘 GPT-4V、Qwen-VL 等模型背后的核心原理。 > 💡 **学习指南**:本章节无需深厚的计算机视觉背景,通过交互式演示带你理解 AI 是如何拥有“眼睛”的。我们将揭秘 GPT-4V、Qwen-VL 等模型背后的核心原理。
<VlmQuickStartDemo /> <VlmQuickStartDemo />
@@ -0,0 +1,3 @@
# 神经网络与深度学习
> 待实现
@@ -0,0 +1,3 @@
# 提示词工程
> 待实现

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 132 KiB

Before

Width:  |  Height:  |  Size: 263 KiB

After

Width:  |  Height:  |  Size: 263 KiB

Some files were not shown because too many files have changed in this diff Show More