tunji/README.md

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