cirry/tunji

Fork 0

Files

cirry acd311a0d6 feat: 功能迭代

2026-05-31 21:06:22 +08:00

7.6 KiB

Raw Permalink Blame History

Tunji - Markdown 编辑器

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

功能特性

核心功能

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

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

功能概述

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

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

使用方式

基本使用

<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]

7.6 KiB Raw Permalink Blame History Unescape Escape