知识中心 - 应用程序我开源了一款全栈编程学习神器：327 篇教程 + AI 助手 + 代码高亮 + 知识图谱，单文件

我开源了一款全栈编程学习神器：327 篇教程 + AI 助手 + 代码高亮 + 知识图谱，单文件 exe 仅 77MB

图片.png

基于 React + TypeScript + Vite 构建的本地知识库，内置 Python / JavaScript / C# / 系统·模块·递归 四大模块，集成 DeepSeek + Ollama 双引擎 AI 助手，支持 26 种语言语法高亮、Mermaid / PlantUML 图表渲染、D3 交互式知识图谱、全文搜索与学习路径规划。Web 即开即用，Electron 桌面版单文件可离线运行。

为什么做这个项目？

作为开发者，我相信大家都遇到过这些烦恼：

📚 教程太分散：Python、JavaScript、C# 的入门资料散落在各大博客、文档站和 PDF 里，想复习时翻半天找不到。
🤖 想查代码没人问：遇到不理解的概念，反复切换浏览器和 IDE，效率极低。
📝 笔记格式混乱：Markdown、Word、PDF、网页收藏夹混用，代码片段和图表经常丢失格式。
🌐 离线没法看：出门在外没网，在线文档全罢工。
🔍 搜索靠记忆：只记得一个关键词，却要在几十个文件里逐一手动查找。

于是，我做了一个本地优先、格式统一、可离线运行、内置 AI 助手的知识中心：把所有教程整合到一个应用里，打开就能看，不懂就问 AI，搜索即得，还能用图表和代码高亮辅助理解。

知识中心是什么

知识中心是一款面向程序员和自学者的本地知识库应用。它把多篇教程以模块化的方式组织起来，提供沉浸式的阅读体验和高效的知识管理工具。

当前版本内置 327 篇文档，总字数超过 10 万字，全部可离线访问。

知识中心主页转存失败，建议直接上传图片文件 图 1：知识中心主页 —— 左侧工作区 + 右侧模块卡片，顶部全局搜索，一键呼出 AI 助手（Ctrl+J）

四大核心模块

图片.png

图 2：四大核心模块 —— 327 篇文档总览

模块	文档数	主要内容	适合人群
🐍 Python 从入门到全栈	105 篇	基础语法、数据结构、面向对象、文件 IO、爬虫、Flask Web 实战	Python 初学者、全栈开发者
📜 JavaScript 从入门到全栈	104 篇	ES6+、DOM、异步、模块化、Node.js、Vue 框架实战	前端/全栈开发者
🎯 C# 从入门到全栈	104 篇	语法基础、OOP、LINQ、异步、.NET Core、ASP.NET 实战	.NET 开发者
🔄 系统·模块·递归	14 篇	系统论、模块化、递归原理及其跨学科应用	架构师、系统思考爱好者

每个模块都有独立的学习进度追踪、术语表和章节目录，点击进入模块后可以看到精心设计的 Hero 区和概念卡片。

图 3：模块主页 —— 包含引言、核心概念卡片、关联关系与行业应用

七大功能亮点

1. 内置 AI 编程助手（DeepSeek + Ollama 双引擎）

这是知识中心最新版本的核心升级。点击右下角的 🤖 AI 助手（Ctrl+J） 即可呼出侧边栏，支持：

双模型引擎：DeepSeek 云端模型 + Ollama 本地模型自由切换。
六大 Agent 角色：聊天、研究、导师、写作、分析、导入，满足不同场景。
API Key 加密存储：使用 Web Crypto API 对 API Key 进行本地加密，安全可控。
一键测试连接：配置页面自带连接测试，保存后立即生效。

图片.png 图 4：AI 助手功能概览 —— 6 大 Agent 角色与双模型引擎

图 5：AI 聊天面板 —— 在阅读过程中随时向 AI 提问，无需切换窗口

图 6：AI 设置页面 —— 支持 DeepSeek / Ollama 配置、API Key 加密、连接测试

2. 沉浸式 Markdown 阅读器

文档阅读器支持目录导航、上一篇/下一篇切换、阅读进度记忆，以及一键切换到 Markdown 编辑模式。

图 7：文档阅读器 —— 左侧目录 + 右侧正文，长文也能快速定位

3. 26 种编程语言语法高亮

基于 react-syntax-highlighter + Prism 实现，覆盖主流开发语言：

JavaScript / TypeScript / JSX / TSX
Python / Java / C / C++ / Go / Rust
HTML / CSS / Bash / JSON / YAML / SQL / Markdown

代码块会自动识别语言并渲染为深色主题，复制学习非常方便。

4. Mermaid & PlantUML 图表渲染

教程里的流程图、时序图、类图终于不再是纯文本了：

Mermaid：本地实时渲染为 SVG。
PlantUML：通过编码后调用官方图片服务渲染。

无论是算法流程图还是系统架构图，都能一目了然。

5. D3 交互式知识图谱

基于 D3.js 力导向图，把模块、文档、分类之间的关系可视化：

拖拽节点调整布局
滚轮缩放
点击节点直接跳转到对应文档

图 8：知识图谱 —— 327 篇文档的关系网络，点击节点即可跳转

6. 客户端全文搜索

内置基于内存索引的搜索引擎，支持标题 + 正文关键词检索，带相关性评分和匹配片段高亮，完全无需后端服务器。

7. 智能学习路径

根据模块内容自动生成学习路线，支持难度分级（入门 → 进阶 → 高级），可以标记已完成步骤并查看总体完成百分比。

图 9：学习路径 —— 按"理论基石→应用域探索→综合终章"梯度推进，可标记完成

技术架构

整个项目采用现代前端技术栈，兼顾开发体验与运行性能：

图片.png 图 10：知识中心技术架构 —— 展示层、数据层、AI 层、工具链与 Electron 桌面封装

展示层        数据层          AI 层              工具链            桌面封装
├ 知识主页    ├ 文档元数据     ├ DeepSeek 客户端   ├ Vite 5         ├ Electron
├ 模块主页    ├ 搜索索引       ├ Ollama 客户端     ├ TypeScript 5   ├ HashRouter
├ 文档阅读    ├ 向量存储       ├ Agent Loop        ├ Tailwind CSS   ├ IPC 文件读取
├ 知识图谱    ├ 学习路径       ├ Agent Panel       ├ Mermaid
├ 学习路径    ├ 图谱数据       └ 配置管理器         ├ D3.js
└ AI 助手                                                  └ Framer Motion

关键技术选择说明：

Vite：秒级冷启动，生产构建体积可控。
Tailwind CSS：原子化样式，快速还原设计稿。
Framer Motion：流畅的页面过渡和交互动效。
Mermaid + PlantUML：原生支持技术文档中的图表表达。
Electron + HashRouter：解决桌面版 file:// 协议下的路由与本地文件加载问题。
LLMClient + AgentLoop：封装 AI 调用逻辑，支持配置热刷新。

Electron 桌面版

除了 Web 版本，我还打包了 Windows 桌面版，特性如下：

特性	说明
单文件便携版	`知识中心-1.0.0-portable.exe`，仅 77MB，双击即用
完全离线	所有文档封装在 `app.asar` 内，无需联网
无依赖运行	不需要 Node.js、不需要 Python 环境
独立窗口	拥有原生标题栏、托盘和桌面快捷方式
内置 AI 代理	Electron 主进程自动启动本地代理服务，AI 助手开箱可用

图 11：Electron 桌面版 —— 与 Web 版一致的体验，支持离线运行

体积优化过程

一开始打包出来的 asar 接近 300MB，原因是文档被复制了三份，而且整个 node_modules 也被打了进去。通过以下优化，最终把 asar 压缩到 29MB，便携版降到 77MB：

移除 extraResources 冗余文档复制。
files 字段仅保留 dist/、electron/ 和 package.json。
明确排除 node_modules/**/*（前端依赖已被 Vite 打包进 dist）。

如何获取与使用

方式一：Web 版（推荐快速体验）

git clone https://gitcode.com/lza_csdn2019/system-module-recursion-app
cd system-module-recursion-app
npm install
npm run dev

浏览器访问 http://localhost:5173 即可。

方式二：生产构建

npm run build
npm run preview

方式三：Electron 桌面版

npm run electron:build

产物位于 release/ 目录：

release/知识中心-1.0.0-portable.exe —— 单文件便携版
release/win-unpacked/知识中心.exe —— 解压版

桌面版启动后，进入 设置 → AI 设置，配置你的 DeepSeek API Key 或 Ollama 本地地址，点击"测试连接"通过后，即可使用 AI 助手。

未来计划

知识中心目前还是 1.0，接下来计划加入：

更多模块：Go、Rust、TypeScript、系统设计、算法等
基于向量存储的 RAG 检索增强生成，让 AI 更懂本地文档
云同步：可选的 Git / WebDAV 同步方案
移动端适配：PWA 支持
插件系统：允许用户自定义导入和渲染插件

如果你对这些方向感兴趣，欢迎在评论区交流想法！

结语

知识中心是我为了解决"教程分散、查阅低效、学习孤单"这个问题做的一次尝试。它不一定完美，但已经能很好地满足我个人日常学习和查阅的需求 —— 尤其是现在加入了 AI 助手后，遇到不懂的概念可以直接在应用里提问，学习效率提升了很多。

如果你也是：

正在系统学习 Python / JavaScript / C#
厌倦在多个文档站之间来回切换
希望有一个离线可用、格式统一、带 AI 助手的知识库

那么不妨试试这款工具，也欢迎提出宝贵建议！

如果觉得有用，请点个 ⭐ Star，转发给需要的朋友，或在评论区留下你的想法～

附录：项目信息

项目名：知识中心（Knowledge Center）
技术栈：React 18 + TypeScript + Vite + Tailwind CSS + Electron + DeepSeek/Ollama
当前版本：v1.0.0
内置文档：327 篇
打包体积：便携版 77MB