3.8 KiB
3.8 KiB
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 UIn-icon组件渲染(CreateOutline、SunnyOutline、MoonOutline、RemoveOutline、ExpandOutline、ContractOutline、CloseOutline)
- 使用
- 亮色 / 暗色主题切换:CSS 变量驱动,标题栏、编辑器、滚动条同步变化
- 集成 Naive UI 组件库,使用
n-config-provider管理全局主题 - 编辑器样式覆盖:标题、列表、引用、代码块、表格、链接等 Markdown 元素样式完整
- Markdown 内容变化通过
listener插件实时同步到 v-model
技术要点
- Milkdown v7 编辑器通过
useEditorcomposable 创建实例 - 自定义标题栏使用 Tauri
data-tauri-drag-region实现窗口拖拽 - 主题通过
html.darkCSS 类切换,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 commandsread_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 UIn-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+ 组合键