|
基于 Tiptap (ProseMirror) 的所见即所得编辑体验
|
多提供商 AI 聊天面板，辅助写作
|
|
编辑器内直接插入 9 种图表类型
|
基于 KaTeX 的高质量数学公式渲染
|
|
|
|
|
前置要求
- Node.js >= 18
- npm >= 9
| 命令 | 说明 |
|---|---|
npm install |
安装依赖 |
npm run dev |
启动 Vite 开发服务器（浏览器预览） |
npm run electron:dev |
启动 Electron 应用 |
npm start |
同时启动 Vite + Electron（热重载） |
npm run build |
构建生产版本 |
npm run pack |
打包为 Windows 安装包（`release/` 目录） |
- 📄 新建笔记 — 点击「新建笔记」或按 ⌘N
- ✍️ 写作 — 直接在编辑区输入，支持 Markdown 语法
- 🎨 格式化 — 工具栏按钮或选中文本弹出浮动工具栏
- ⚡ 插入内容 — 输入 / 唤出斜杠菜单
- 🤖 AI 对话 — 选中文字 → 浮动工具栏 AI 图标 → 右侧面板
- 📁 文件管理 — 侧边栏浏览，可关联本地文件夹
- 🎭 主题切换 — 工具栏主题按钮（亮色 → 暗色 → Sycamore）
- 🔍 专注模式 — 状态栏切换，隐藏干扰元素
- 打开 设置（工具栏 ⚙️ 图标）→ AI 选项卡
- 选择 AI 提供商（OpenAI、DeepSeek、OpenRouter 等）
- 输入 API Key
- 输入 模型名称
- 点 检测 验证连接
- 可选调整 Max Tokens / Temperature
| 提供商 | 基础 URL | 推荐模型 |
|---|---|---|
| OpenAI | https://api.openai.com/v1 |
gpt-4o, gpt-4o-mini |
| DeepSeek | https://api.deepseek.com |
deepseek-chat, deepseek-reasoner |
| OpenRouter | https://openrouter.ai/api/v1 |
openai/gpt-4o, anthropic/claude-sonnet-4 |
| Groq | https://api.groq.com/openai/v1 |
llama-4-scout, mixtral-8x7b |
| 智谱 GLM | https://open.bigmodel.cn/api/paas/v4 |
glm-4, glm-4v |
| 阿里百炼 | https://dashscope.aliyuncs.com/compatible-mode/v1 |
qwen-plus, qwen-turbo |
| 硅基流动 | https://api.siliconflow.cn/v1 |
deepseek-ai/DeepSeek-V3 |
| 月之暗面 | https://api.moonshot.cn/v1 |
moonshot-v1 |
| Ollama | http://localhost:11434/v1 |
qwen2.5, deepseek-r1 |
支持任何兼容 OpenAI 格式的自定义 API 端点。
| 操作 | 快捷键 | 操作 | 快捷键 |
|---|---|---|---|
| 新建 | ⌘N | 打开 | ⌘O |
| 保存 | ⌘S | 另存为 | ⌘⇧S |
| 撤销 | ⌘Z | 重做 | ⌘⇧Z |
| 加粗 | ⌘B | 斜体 | ⌘I |
| 删除线 | ⌘⇧X | 高亮 | ⌘⇧H |
| 代码 | ⌘E | 链接 | ⌘K |
| 导出 HTML | ⌘⇧H | 导出 MD | ⌘⇧M |
| 导入 MD | ⌘⇧I | 导出 PDF | ⌘⇧P |
所有快捷键可在 设置 → 快捷键 中自定义。
展开查看
Sycamore/
├── build-assets/ # 应用图标
│ ├── icon.svg & icon.ico
├── electron/ # Electron 主进程
│ ├── main.ts # 窗口管理、IPC、文件操作
│ ├── preload.ts # contextBridge API
│ └── export-template.ts # HTML 导出模板
├── src/
│ ├── components/ # React 组件
│ │ ├── AiChatPanel.tsx # AI 聊天面板
│ │ ├── SettingsPanel.tsx # 设置面板
│ │ ├── Toolbar.tsx # 主工具栏
│ │ ├── Sidebar.tsx # 侧边栏
│ │ ├── WelcomePage.tsx # 欢迎页
│ │ └── ...更多
│ ├── editor/ # 编辑器核心
│ │ ├── Editor.tsx # 编辑器主组件
│ │ ├── extensions/ # Tiptap 扩展
│ │ └── MathBlockView.tsx
│ ├── hooks/ # React Hooks
│ │ ├── useTheme.ts
│ │ ├── useFileSystem.ts
│ │ └── ...11 个 hook
│ ├── utils/ # 工具函数
│ │ ├── markdown-convert.ts
│ │ ├── openai.ts
│ │ └── ...
│ └── App.tsx # 应用根组件
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json
- Fork 本项目
- 创建你的特性分支：
git checkout -b feat/my-feature - 提交你的改动：
git commit -m 'feat: add something' - 推送到分支：
git push origin feat/my-feature - 发起 Pull Request
| 命令 | 功能 |
|---|---|
npm run dev |
启动 Vite |
npm run electron:dev |
启动 Electron |
npm run typecheck |
TypeScript 类型检查 |
npm run lint |
ESLint 代码检查 |
npm run format |
Prettier 格式化 |
| 类别 | 技术 |
|---|---|
| 框架 | Electron 33 + React 18 + TypeScript 5 |
| 编辑器 | Tiptap 3 (ProseMirror) |
| 构建 | Vite 5 + vite-plugin-electron |
| 样式 | Tailwind CSS 3 + PostCSS |
| 图标 | Lucide React |
| AI | OpenAI 兼容 API（多提供商） |
| 图表 | Mermaid 11 |
| 公式 | KaTeX 0.16 |
| 代码高亮 | lowlight (highlight.js) |
| Markdown | marked + TurndownService |
| 打包 | electron-builder (NSIS) |
用 ❤️ 和 ☕ 打造