ObsiView 开发日志

ObsiView 是一个轻量级的 Obsidian Markdown 浏览器，旨在提供高性能的笔记浏览体验。

项目概述

创建一个支持完整 Obsidian 语法的 Markdown 浏览器，包括 Wiki Links、Callouts、Mermaid 图表和 KaTeX 数学公式。

技术栈

前端框架: React + TypeScript
构建工具: Vite
Markdown 解析: Remark + Rehype
数学公式: KaTeX
图表渲染: Mermaid
样式: Tailwind CSS

开发进度

Phase 1: 基础架构 ✅

项目初始化
Markdown 基础渲染
文件系统抽象层
路由系统

Phase 2: Obsidian 特性 🚧

Wiki Links 解析
Frontmatter 支持
Tag 系统
Callout 块渲染
双向链接图谱
标签页管理

Phase 3: 高级功能 📋

Mermaid 图表支持
KaTeX 数学公式
代码高亮优化
搜索功能
主题切换

Phase 4: 性能优化 📋

虚拟滚动
懒加载
缓存策略
Service Worker

开发流程图

技术难点与解决方案

1. Wiki Links 解析

[!challenge] 挑战 Obsidian 的 [[]] 语法不是标准 Markdown，需要自定义解析器。

解决方案：

2. Callout 块支持

参考 Obsidian 语法：

实现思路：识别 blockquote 中的特殊语法，转换为自定义组件。

3. 性能优化

的思维每次优化 1% 的性能，持续迭代，最终获得显著提升。

已实施：

使用 React.memo 减少不必要的重渲染
代码分割（Code Splitting）
图片懒加载

计划中：

虚拟滚动（react-window）
Web Worker 处理 Markdown 解析
IndexedDB 缓存解析结果

每日进展

2026-03-11

✅ 创建示例 Vault 文件
✅ 完善项目文档
🚧 实现 Callout 渲染

遇到的问题： Remark 的 AST 转换比预期复杂，需要深入理解 unified 生态系统。

参考资料：

- 考虑是否用 RSC 优化首屏加载
- 未来可能用 Tauri 构建桌面版

2026-03-10

✅ Wiki Links 解析完成
✅ Frontmatter 提取
✅ 基础路由系统

2026-03-09

✅ 项目初始化
✅ 技术栈选型
✅ 基础 Markdown 渲染

决策记录

为什么选择 Vite 而不是 CRA？

参考中的决策框架：

系统 1 直觉： Vite 很快，社区流行

系统 2 分析：

因素ViteCreate React App开发服务器启动<1s~30sHMR 速度毫秒级秒级构建速度快（Rollup）慢（Webpack）生态成熟度快速增长成熟但停滞TypeScript 支持原生需配置

结论： Vite 胜出

为什么不使用 Obsidian API？

✅ 独立性 - 不依赖 Obsidian 安装
✅ 跨平台 - Web 端可直接使用
✅ 可控性 - 完全掌握渲染逻辑
❌ 工作量 - 需要重新实现所有特性

权衡后认为值得投入。

下一步计划

完成 Callout 渲染
添加 Mermaid 图表支持
实现搜索功能
编写测试用例
性能基准测试

相关资源

Remark 文档
Obsidian Developer Docs
- 如果添加笔记数据库存储

最后更新: 2026-03-11标签: #开发日志 #项目管理 #进度追踪

My Vault

ObsiView 开发日志

反向链接

相关笔记