58 lines
3.8 KiB
Markdown
58 lines
3.8 KiB
Markdown
# WriteFlow Changelog
|
||
|
||
## Phase 1 – MVP 基础编辑器
|
||
|
||
### 迭代 1.1 – 项目骨架与编辑器内核 (2026-07-15)
|
||
|
||
#### 新增
|
||
- 配置 `vite.config.ts` 与 `tsconfig.json` 的 `@` 别名，指向 `src` 目录
|
||
- 集成 Milkdown 编辑器：`@milkdown/kit` + `@milkdown/vue`，配置 CommonMark 预设
|
||
- 创建 `Editor.vue` 编辑器组件，支持 v-model 双向绑定、历史记录 (history)、剪贴板 (clipboard)
|
||
- 实现纯键盘驱动所见即所得编辑（无工具栏）
|
||
- 自定义标题栏：含 WriteFlow Logo、主题切换按钮、窗口控制（最小化/最大化/关闭）
|
||
- 使用 `@vicons/ionicons5` 图标库，通过 Naive UI `n-icon` 组件渲染（`CreateOutline`、`SunnyOutline`、`MoonOutline`、`RemoveOutline`、`ExpandOutline`、`ContractOutline`、`CloseOutline`）
|
||
- 亮色 / 暗色主题切换：CSS 变量驱动，标题栏、编辑器、滚动条同步变化
|
||
- 集成 Naive UI 组件库，使用 `n-config-provider` 管理全局主题
|
||
- 编辑器样式覆盖：标题、列表、引用、代码块、表格、链接等 Markdown 元素样式完整
|
||
- Markdown 内容变化通过 `listener` 插件实时同步到 v-model
|
||
|
||
#### 技术要点
|
||
- Milkdown v7 编辑器通过 `useEditor` composable 创建实例
|
||
- 自定义标题栏使用 Tauri `data-tauri-drag-region` 实现窗口拖拽
|
||
- 主题通过 `html.dark` CSS 类切换，Naive UI 同步切换 `darkTheme`
|
||
- 编辑器 `ProseMirror` 输出 markdown 通过 `listenerCtx.markdownUpdated` 实时获取
|
||
|
||
#### 修复
|
||
- 修复页面空白：`MilkdownProvider` 需作为 `useEditor` 的祖先组件提供上下文，将其从 Editor.vue 提升至 App.vue
|
||
- 修复窗口拖拽权限：补充 `core:window:allow-is-maximized`、`allow-maximize`、`allow-unmaximize`
|
||
- 修复编辑器无法滚动：`#app` 改用 `padding-top: 40px` 替代 `.app-body` 的 `margin-top: 40px`，避免 `overflow: hidden` 裁掉底部内容导致高度计算错误
|
||
- 移除 `milkdown.css` 中 `min-height: 100%` 避免干扰 flex 布局高度约束
|
||
- 导入 ProseMirror 和 Tables 基础 CSS（`@milkdown/kit/prose/view/style/prosemirror.css`、`tables.css`）
|
||
|
||
### 迭代 1.2 – 文件系统集成 (2026-07-15)
|
||
|
||
#### 新增
|
||
- **Rust 后端**：添加 `tauri-plugin-fs` + `tauri-plugin-dialog` 插件，实现文件系统 Tauri commands
|
||
- `read_directory` — 递归读取目录，返回文件树结构（仅 `.md` 文件和非空目录）
|
||
- `read_file_content` / `write_file_content` — 读写文件内容
|
||
- `create_file` / `rename_file` / `delete_file` / `file_exists` — 文件增删改查
|
||
- **前端插件**：安装 `@tauri-apps/plugin-fs` + `@tauri-apps/plugin-dialog`
|
||
- **文件树侧边栏** (`Sidebar.vue` + `FileTree.vue`)：使用 Naive UI `n-tree` 渲染目录结构
|
||
- 支持展开/折叠文件夹，点击 `.md` 文件在编辑器中打开
|
||
- 顶部工具栏：打开工作区、刷新、最近文件切换
|
||
- **新建/打开/保存文件**
|
||
- `Ctrl+N` 新建空白文件，`Ctrl+O` 打开文件对话框
|
||
- `Ctrl+S` 保存当前文件，`Ctrl+Shift+S` 另存为
|
||
- 首次启动自动弹出工作区目录选择
|
||
- **工作区管理**：工作区路径持久化到 `localStorage`，后续启动自动加载
|
||
- **最近文件列表**：记录最近 10 个打开的文件，存储在 `localStorage`，重启保留
|
||
- **标题栏增强**：显示当前文件名 + 未保存标记（●）
|
||
- **Editor 组件增强**：支持外部内容替换（`replaceAll`），用于打开文件时更新编辑器
|
||
|
||
#### 技术要点
|
||
- 文件操作通过 Rust `std::fs` 实现，前端通过 `invoke` 调用 Tauri commands
|
||
- 目录遍历过滤隐藏文件和 `node_modules`/`target` 目录，仅展示 `.md` 文件
|
||
- 编辑器使用 `@milkdown/kit/utils` 的 `replaceAll` 实现外部内容替换
|
||
- 使用 `@tauri-apps/plugin-dialog` 的 `open`/`save` 实现原生文件对话框
|
||
- 快捷键通过全局 `keydown` 监听，区分 `Ctrl`/`Cmd` + 组合键
|