feat: 功能迭代

2026-05-31 21:06:22 +08:00
parent e49865600b
commit acd311a0d6
25 changed files with 3199 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,363 @@
+# Tunji - Markdown 编辑器
+
+一个受 Typora 启发的 Markdown 编辑器桌面应用，使用 Electron + Vue 3 构建。
+
+## 功能特性
+
+### 核心功能
+- **Markdown 编辑**：支持实时预览、分屏编辑、源码模式
+- **笔记本管理**：支持多级笔记本结构
+- **标签系统**：灵活的标签管理
+- **主题切换**：浅色、深色、跟随系统
+- **工作区管理**：支持自定义工作区路径
+
+### 最新功能：笔记本树形结构
+
+#### 功能概述
+使用 PrimeVue Tree 组件实现笔记本的树形结构显示，支持：
+
+1. **树形结构展示**：笔记本和文档以树形结构展示
+2. **层级关系**：支持父子笔记本关系
+3. **展开/折叠**：可以展开或折叠笔记本节点
+4. **节点选择**：点击笔记本或文档节点可进行选择
+5. **自定义图标**：笔记本使用书本图标，文档使用文件图标
+
+#### 使用方式
+
+##### 基本使用
+```vue
+<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>
+```
+
+##### 高级功能
+```javascript
+import { useFilteredNotebookTree } from '@/composables/useNotebookTreeExample'
+
+const filterText = ref('')
+const { filteredTree } = useFilteredNotebookTree(filterText)
+```
+
+#### 技术实现
+
+##### 数据结构
+```javascript
+// 树节点格式
+{
+  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
+}
+```
+
+##### 核心逻辑
+- **树形结构构建**：将扁平的笔记本列表转换为树形结构
+- **展开状态管理**：默认展开所有笔记本节点
+- **节点选择处理**：支持笔记本和文档节点的选择
+
+##### 样式定制
+```css
+.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
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 开发模式
+```bash
+npm run dev
+```
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+### 打包应用
+```bash
+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
+项目配置：
+- 依赖管理
+- 脚本命令
+- 构建配置
+
+## 部署说明
+
+### 开发环境
+```bash
+npm run dev
+```
+
+### 生产环境
+```bash
+npm run build
+npm run package
+```
+
+### 平台支持
+- Windows
+- macOS
+- Linux
+
+## 贡献指南
+
+### 开发规范
+- 使用 Vue 3 Composition API
+- 遵循 ESLint 规则
+- 使用 Prettier 格式化代码
+
+### 提交规范
+- 使用 Conventional Commits
+- 每个提交解决一个问题
+- 提交前运行测试
+
+### 代码审查
+- 至少一人审查
+- 通过所有测试
+- 无代码异味
+
+## 许可证
+
+MIT License
+
+## 联系方式
+- 项目地址：[GitHub Repository]
+- 问题反馈：[Issues]
+- 文档：[Documentation]