+
+
+
+
+ {{ round }}
+ 当前轮次
+
+
+
+ {{ totalTokens }}
+ Token 占用
+
+
+
+ ${{ currentCost }}
+ 本轮成本
+
-
- 参考基准：一轮完全不做优化大约 {{ baseCostPerRound.toFixed(4) }} 美元。
- 在当前轮次下，通过复用前缀，这轮的成本约为 {{ currentCost }} 美元。
+
+
+
+
+
+
+ 🗑️
+ 溢出截断：前 {{ forgottenRounds }} 轮对话已被遗忘！
+
+
+ ✅
+ 记忆完整
+
+
+
+
+
+
+
+ Context Window Limit ({{ windowLimit }})
+
+
+
+
+
+
+
+
+ System Prompt ({{ systemPromptTokens }})
+
+
+
+
+
+ History ({{ round - 1 }} rounds)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
new file mode 100644
index 0000000..87f0935
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ B+树索引演示组件占位符 - 待实现具体交互
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
new file mode 100644
index 0000000..f2ea58e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 数据库演进历程演示组件占位符 - 待实现具体交互
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
new file mode 100644
index 0000000..662e556
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 数据库关系演示组件占位符 - 待实现具体交互
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
new file mode 100644
index 0000000..877c6f4
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 查询优化演示组件占位符 - 待实现具体交互
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
new file mode 100644
index 0000000..7507a90
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 事务ACID特性演示组件占位符 - 待实现具体交互
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
new file mode 100644
index 0000000..0910bb3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
@@ -0,0 +1,863 @@
+
+
+
+
+
+ 🔖
+ 资源指纹 (Hash)
+ 长期缓存与版本控制
+
+
+
+
+ 🔄 重新构建
+
+
+
+
+ 启用 Hash
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ getFileIcon(file.type) }}
+
+
+
+
+ {{ file.baseName }}
+ .{{ file.hash }}
+ .{{ file.ext }}
+ 更新
+
+
+ {{ formatSize(file.size) }}
+ •
+ {{ formatTime(file.mtime) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 缓存命中 (Hash 匹配)
+
+
+ 缓存未命中 (Hash 变化)
+
+
+ 新文件 (无缓存)
+
+
+
+
+
+
{{ block.icon }}
+
{{ block.name }}
+
{{ block.hash }}
+
+
+
+
+
+
📊 缓存策略效果
+
+
+
{{ cacheHitRate }}%
+
缓存命中率
+
+
+
{{ bandwidthSaved }}
+
节省带宽
+
+
+
{{ loadTime }}
+
平均加载时间
+
+
+
+
+
+
+
+
+
+
+
+
+
📋 文件信息
+
+
+ 大小:
+ {{ formatSize(selectedFile.size) }}
+
+
+ 类型:
+ {{ selectedFile.type.toUpperCase() }}
+
+
+ 修改时间:
+ {{ formatTime(selectedFile.mtime) }}
+
+
+ Hash:
+ {{ selectedFile.hash }}
+
+
+
+
+
+
🔗 依赖的模块 ({{ selectedFile.dependencies.length }})
+
+
+ {{ getNode(depId)?.name || depId }}
+
+
+
+
+
+
💡 缓存策略
+
+
+ ✅ 启用 Hash ：文件名包含内容哈希 ({{ selectedFile.hash }})。
+ 文件内容变化时，URL 会改变，浏览器会重新请求。
+ 适合配置 Cache-Control: immutable 长期缓存。
+
+
+ ⚠️ 无 Hash ：文件名固定为 {{ selectedFile.baseName }}.{{ selectedFile.ext }}。
+ 更新文件后，需要手动刷新缓存或使用版本号查询参数。
+ 容易遇到"缓存不更新"的问题。
+
+
+
+
+
+
+
+
+ 💡
+ 资源指纹的作用：
+ 通过给文件名添加内容哈希（如 main.a3f7b2c.js），可以实现
+ 永久缓存 策略。
+ 只有文件内容变化时哈希才会改变，浏览器才会重新下载。
+ 这样用户每次访问都能享受极速加载，同时又能及时获取最新代码。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
new file mode 100644
index 0000000..33510c4
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
@@ -0,0 +1,588 @@
+
+
+
+
+
+ 🏭
+ 构建流水线
+ 从代码到部署的完整旅程
+
+
+
+ {{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
+
+
+ ↺ 重置
+
+
+ 速度:
+
+ 0.5x
+ 1x
+ 2x
+ 4x
+
+
+
+
+
+
+
+
+
{{ stage.icon }}
+
+
{{ stage.name }}
+
+ {{ stageDurations[index] }}ms
+
+
+
+ ✓
+
+
+ ○
+
+
+
+
+
+
+
+
+
+
+
+
📝 阶段说明
+
{{ stages[selectedStage].description }}
+
+
+
🔧 执行的工具
+
+
+ {{ tool }}
+
+
+
+
+
📂 输入输出
+
+
+ 输入:
+ {{ stages[selectedStage].input }}
+
+
+ 输出:
+ {{ stages[selectedStage].output }}
+
+
+
+
+
+
+
+
+ 💡
+ 构建流水线的作用：
+ 就像工厂的生产线一样，代码也需要经过一系列"加工工序"才能变成用户可以访问的网站。
+ 每个阶段都有特定的任务，确保最终产出的代码是优化过、无错误且性能良好的。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
new file mode 100644
index 0000000..039dcaf
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
@@ -0,0 +1,760 @@
+
+
+
+
+
+ ⚖️
+ 打包工具对比
+ Vite vs Webpack vs Rollup
+
+
+
+ {{ view.icon }} {{ view.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ dim.name }}
+
+
+
+
+
+
+
+
+ {{ tool.name }}
+ {{ tool.shortDesc }}
+
+
+
+
+
+
+
+
+
+ 对比维度
+
+
+
+
+
+
+
+
+ {{ dim.icon }}
+ {{ dim.name }}
+
+
+
+
+
{{ tool.scores[dimIndex] }}/10
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🏆 首选推荐
+
+
+ {{ getTool(scenario.bestChoice).icon }} {{ getTool(scenario.bestChoice).name }}
+
+
{{ scenario.bestReason }}
+
+
+
+
+
🥈 备选方案
+
+
+ {{ getTool(scenario.alternative).icon }} {{ getTool(scenario.alternative).name }}
+
+
{{ scenario.altReason }}
+
+
+
+
+
+
+
+
+
+
+ 💡
+ 选择建议：
+ {{ currentView === 'radar' ? '雷达图展示了各工具在多个维度的能力分布，面积越大代表综合能力越强。' :
+ currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分，方便精确对比。' :
+ '根据你的项目类型和团队情况，选择最适合的工具往往比选择"最好"的工具更重要。' }}
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
new file mode 100644
index 0000000..238b352
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
@@ -0,0 +1,532 @@
+
+
+
+
+
+
+
+
+
🚦 路由配置
+
+
+
+
{{ route.path }}
+
{{ route.name }}
+
+
+
+ 加载中...
+ 已缓存
+ 按需加载
+
+
+
+ {{ formatSize(route.size) }}
+
+
+
+
+
+
+
+
📊 加载分析
+
+
+
+
+
+
+
+
+ {{ chunk.name }}
+ {{ formatSize(chunk.size) }}
+
+
+
+
+
+
+
+
+
+
+ {{ chunk.loaded ? '✓' : '○' }}
+ {{ chunk.name }}
+ {{ formatSize(chunk.size) }}
+
+
+
+
💡 点击上方模块可模拟按需加载
+
+
+
+
+
+ 未优化总大小
+ {{ formatSize(totalSize) }}
+
+
+
→
+
+
+ 首屏加载
+ {{ formatSize(initialLoadSize) }}
+
+
+
+ 节省
+ {{ savingsPercent }}%
+
+
+
+
+
+
+
+
+ 💡
+ 代码分割的核心思想：
+ 不是所有代码都需要在首屏加载。通过动态导入 `import()`，
+ 我们可以把非核心功能延迟到真正需要时再加载。
+ 这就像餐厅的点餐制——不是把所有菜一次性端上来，而是按需上菜。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
new file mode 100644
index 0000000..41c591a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
@@ -0,0 +1,840 @@
+
+
+
+
+
+ 🕸️
+ 依赖图谱
+ 模块依赖关系可视化
+
+
+
+
+ 布局:
+
+ 力导向图
+ 环形布局
+ 层次布局
+
+
+
+
+ ↺ 重置视图
+
+
+
+ {{ isAnimating ? '⏸ 暂停' : '▶ 动画' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.icon }}
+
+
+
+
+ {{ node.name }}
+
+
+
+
+
+
+
+ +
+ {{ Math.round(zoom * 100) }}%
+ -
+
+
+
+
+
+
+
+
+
+
📦 依赖信息
+
+
+ 引入:
+ {{ selectedNodeData.dependencies?.length || 0 }} 个模块
+
+
+ 被引用:
+ {{ getIncomingDeps(selectedNodeData.id).length }} 个模块
+
+
+
+
+
+
🔗 引用的模块
+
+
+ {{ getNode(depId)?.name || depId }}
+
+
+
+
+
+
📊 模块大小
+
+
+
{{ selectedNodeData.size || 0 }} KB
+
+
+
+
+
+
+
+ 💡
+ 依赖图谱的作用：
+ 就像地图一样，依赖图谱帮助你理解项目中的模块是如何相互关联的。
+ 你可以快速找到某个模块被哪些地方引用，或者发现循环依赖等问题。
+ 在大型项目中，良好的依赖结构是维护性的关键。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
new file mode 100644
index 0000000..b369426
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
@@ -0,0 +1,429 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ i + 1 }}
+ {{ step }}
+
+
+
+
+
+
VS
+
+
+
+
+
+ {{ i + 1 }}
+ {{ step }}
+
+
+
+
+
+
+
+
+
HMR 工作流程
+
+
+
+ {{ step.icon }}
+ {{ step.label }}
+
+
→
+
+
+
+
+
+
+
各构建工具 HMR 支持
+
+
+
+ 构建工具
+ HMR 支持
+ 更新速度
+ 特点
+
+
+
+
+ {{ tool.name }}
+ {{ tool.support }}
+
+ {{ tool.speed }}
+ {{ tool.feature }}
+
+
+
+
+
+
+
+
+ 💡
+ HMR 的核心原理：
+ 构建工具通过 WebSocket 与浏览器保持连接。当文件修改后，工具编译变更模块，通过 WebSocket 通知浏览器。
+ 浏览器中的 HMR Runtime 接收更新，替换旧模块，同时保持应用状态不变。
+ 这就像是给飞行中的飞机换引擎——不停机就能完成更新。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
new file mode 100644
index 0000000..fb22650
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
@@ -0,0 +1,295 @@
+
+
+
+
+
+
+
+
+
📄 源代码 (Source)
+
function calculateSum(a, b) {
+ // 计算两个数的和
+ const result = a + b;
+ console.log('结果:', result);
+ return result;
+}
+
+const sum = calculateSum(10, 20);
+console.log('总和:', sum);
+
+
+
+
+
+
🔧 压缩后 (Minified)
+
function n(n,r){var t=n+r;return console.log("结果:",t),t}var r=n(10,20);console.log("总和:",r);
+//# sourceMappingURL=app.js.map
+
+
+
+
+
+
📦 SourceMap 文件内容示例
+
{
+ "version": 3,
+ "sources": ["src/utils.js", "src/main.js"],
+ "names": ["calculateSum", "a", "b", "result"],
+ "mappings": "AAAA,SAASA...",
+ "file": "app.min.js"
+}
+
+ version : SourceMap 规范版本（当前是 3）sources : 原始源文件列表names : 压缩前后的变量名映射mappings : 位置映射信息（VLQ 编码）file : 对应的压缩文件名
+
+
+
+
💡 使用建议
+
+
+
🚀
+
+
开发环境
+
开启 SourceMap，方便调试
+
+
+
+
🔒
+
+
生产环境
+
不部署 .map 文件，防止源码泄露
+
+
+
+
🗂️
+
+
单独存放
+
使用 `sourceMappingURL` 指向独立服务器
+
+
+
+
+
+
+
+
+
+ 💡
+ SourceMap 工作原理：
+ 压缩代码时，构建工具会记录每个字符在源代码中的位置，生成 .map 文件。
+ 浏览器调试时，通过映射关系把压缩后的代码"还原"成源代码显示。
+ 注意：生产环境不要暴露 .map 文件，防止源码泄露！
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
new file mode 100644
index 0000000..9f41926
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
@@ -0,0 +1,336 @@
+
+
+
+
+
+
+
+
+
📦 utils.js (源代码)
+
+
+ {{ index + 1 }}
+ {{ func.code }}
+
+
+
+
+
+
+
🎛️ 选择需要的功能
+
+
+ {{ func.name }}
+ {{ func.size }}B
+
+
+
+
+
+ 原始大小
+ {{ originalSize }}B
+
+
→
+
+ Tree Shaking 后
+ {{ optimizedSize }}B
+
+
+ 节省
+ {{ savingsPercent }}%
+
+
+
+
+
+
+
+ 💡
+ Tree Shaking 原理：
+ 现代打包工具会分析 ES 模块的导出/导入关系，自动移除未被使用的代码。
+ 前提条件：1) 使用 ES 模块 (import/export)；2) 代码无副作用；3) 打包工具支持（Webpack、Rollup 等）
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
index a701dc3..dca4dc7 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
@@ -1,231 +1,150 @@
-
-
-
🍽️ 👨🍳 📝
-
餐厅服务员模拟器
-
想象一下你在餐厅当服务员，有两种工作方式，你会选哪种？
+
+
+
+
👨🍳📒🤖
+
老张的餐厅账本
+
+ 老张开了家餐厅，每天要点菜、做菜、算账。有两种记账方式：传统方式：老张手工记 （jQuery 模式） vs 智能方式：请个管家 （Vue/React 模式）
-