Tunji - Markdown 编辑器

一个受 Typora 启发的 Markdown 编辑器桌面应用，使用 Electron + Vue 3 构建。

功能特性

核心功能

• Markdown 编辑：支持实时预览、分屏编辑、源码模式
• 笔记本管理：支持多级笔记本结构
• 标签系统：灵活的标签管理
• 主题切换：浅色、深色、跟随系统
• 工作区管理：支持自定义工作区路径

最新功能：笔记本树形结构

功能概述

使用 PrimeVue Tree 组件实现笔记本的树形结构显示，支持：

1. 树形结构展示：笔记本和文档以树形结构展示
2. 层级关系：支持父子笔记本关系
3. 展开/折叠：可以展开或折叠笔记本节点
4. 节点选择：点击笔记本或文档节点可进行选择
5. 自定义图标：笔记本使用书本图标，文档使用文件图标

使用方式

基本使用

<script setup>
import { useNotebookTree } from '@/composables/useNotebookTree'

const { notebookTree, expandedKeys, loadNotebooks, loadNotes } = useNotebookTree()

onMounted(async () => {
  await loadNotebooks()
  await loadNotes()
})

function onNodeSelect(event) {
  console.log('Selected node:', event.node)
}
</script>

<template>
  <Tree
    :value="notebookTree"
    :expandedKeys="expandedKeys"
    selectionMode="single"
    @node-select="onNodeSelect"
  />
</template>

高级功能

import { useFilteredNotebookTree } from '@/composables/useNotebookTreeExample'

const filterText = ref('')
const { filteredTree } = useFilteredNotebookTree(filterText)

技术实现

数据结构

// 树节点格式
{
  key: 'notebook-{id}',
  label: '节点名称',
  data: {
    type: 'notebook' | 'note',
    id: '节点ID',
    name: '笔记本名称',
    title: '文档标题',
    notebook_id: '所属笔记本ID'
  },
  icon: 'pi pi-book' | 'pi pi-file',
  children: [],
  selectable: true
}

核心逻辑

• 树形结构构建：将扁平的笔记本列表转换为树形结构
• 展开状态管理：默认展开所有笔记本节点
• 节点选择处理：支持笔记本和文档节点的选择

样式定制

.notebook-tree :deep(.p-tree-node-content) {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.notebook-tree :deep(.p-tree-node-selected) {
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-weight: 500;
}

项目结构

src/
├── main/                    # Electron 主进程
│   ├── index.js            # 主窗口创建
│   ├── indexpreload.js     # 预加载脚本
│   └── services/           # 服务层
│       ├── StorageService.js  # 统一存储服务
│       ├── MetaStore.js       # SQLite 元数据存储
│       └── FileStorage.js     # 文件存储
├── renderer/                # Vue 渲染进程
│   ├── src/
│   │   ├── components/     # Vue 组件
│   │   │   ├── SideBar.vue      # 侧边栏组件
│   │   │   ├── NotesOverview.vue # 笔记概览
│   │   │   └── EditorPanel.vue   # 编辑器面板
│   │   ├── composables/    # Vue 组合式函数
│   │   │   ├── useNotebookTree.js      # 笔记本树形结构
│   │   │   ├── useNotebookTreeExample.js # 使用示例
│   │   │   ├── useNotebooks.js          # 笔记本管理
│   │   │   ├── useNotes.js              # 笔记管理
│   │   │   └── useTheme.js              # 主题管理
│   │   ├── stores/         # Pinia 状态管理
│   │   │   ├── notebooks.js   # 笔记本状态
│   │   │   ├── notes.js       # 笔记状态
│   │   │   ├── tags.js        # 标签状态
│   │   │   └── theme.js       # 主题状态
│   │   └── assets/         # 静态资源
│   └── index.html          # 入口 HTML
└── electron.vite.config.mjs # Electron Vite 配置

开发指南

环境要求

• Node.js >= 16
• npm >= 8

安装依赖

npm install

开发模式

npm run dev

构建生产版本

npm run build

打包应用

npm run package

技术栈

前端框架

• Vue 3：渐进式 JavaScript 框架
• Pinia：Vue 状态管理库
• PrimeVue：Vue UI 组件库
• Tailwind CSS v4：实用优先的 CSS 框架

桌面框架

• Electron：跨平台桌面应用框架
• electron-vite：Electron 构建工具

数据存储

• SQLite (sql.js)：轻量级数据库
• 文件系统：Markdown 文件存储

开发工具

• Vite：前端构建工具
• ESLint：代码检查工具
• Prettier：代码格式化工具

功能模块

1. 笔记本管理

• 创建、重命名、删除笔记本
• 支持多级笔记本结构
• 树形结构展示

2. 笔记管理

• 创建、编辑、删除笔记
• Markdown 实时预览
• 支持多种编辑模式

3. 标签系统

• 创建、删除标签
• 为笔记添加标签
• 按标签筛选笔记

4. 主题系统

• 浅色主题
• 深色主题
• 跟随系统主题

5. 工作区管理

• 自定义工作区路径
• 工作区初始化
• 数据导入导出

组件说明

SideBar.vue

侧边栏组件，包含：

• 搜索功能
• 导航菜单
• 笔记本树形结构
• 标签列表
• 主题切换
• 设置入口

NotesOverview.vue

笔记概览组件，显示：

• 笔记列表
• 笔记预览
• 筛选和排序功能

EditorPanel.vue

编辑器面板，提供：

• Markdown 编辑
• 实时预览
• 分屏模式
• 工具栏

状态管理

notebooks.js

笔记本状态管理：

• 笔记本列表
• 创建、重命名、删除操作
• 笔记本查询

notes.js

笔记状态管理：

• 笔记列表
• 创建、编辑、删除操作
• 笔记搜索

tags.js

标签状态管理：

• 标签列表
• 创建、删除操作
• 标签关联

theme.js

主题状态管理：

• 主题切换
• 主题持久化
• 系统主题同步

组合式函数

useNotebookTree.js

笔记本树形结构：

• 树形数据构建
• 展开状态管理
• 节点查找功能

useNotebooks.js

笔记本管理：

• 笔记本 CRUD 操作
• 笔记本查询
• 笔记本排序

useNotes.js

笔记管理：

• 笔记 CRUD 操作
• 笔记搜索
• 笔记筛选

useTheme.js

主题管理：

• 主题切换
• 主题持久化
• 系统主题检测

存储架构

MetaStore.js

SQLite 元数据存储：

• 笔记本元数据
• 笔记元数据
• 标签元数据
• 关联关系

FileStorage.js

文件存储：

• Markdown 文件读写
• 文件目录管理
• 文件同步

StorageService.js

统一存储服务：

• 协调 MetaStore 和 FileStorage
• 提供统一 API
• 数据一致性保证

构建配置

electron.vite.config.mjs

Electron Vite 配置：

• 主进程构建
• 预加载脚本构建
• 渲染进程构建

package.json

项目配置：

• 依赖管理
• 脚本命令
• 构建配置

部署说明

开发环境

npm run dev

生产环境

npm run build
npm run package

平台支持

• Windows
• macOS
• Linux

贡献指南

开发规范

• 使用 Vue 3 Composition API
• 遵循 ESLint 规则
• 使用 Prettier 格式化代码

提交规范

• 使用 Conventional Commits
• 每个提交解决一个问题
• 提交前运行测试

代码审查

• 至少一人审查
• 通过所有测试
• 无代码异味

许可证

MIT License

联系方式

• 项目地址：[GitHub Repository]
• 问题反馈：[Issues]
• 文档：[Documentation]