fix(biji): 优化笔记编辑器自动保存机制并修复相关问题

- 实现了更可靠的自动保存功能,仅在用户停止输入后触发保存操作
- 修复了切换笔记时意外触发自动保存的问题
- 优化了重命名文件后的预览更新逻辑
- 调整了保存成功后的状态清理策略,提高了用户体验
This commit is contained in:
2025-08-14 14:44:27 +08:00
parent 337645f27b
commit 56465ffa75
12 changed files with 198 additions and 82 deletions

View File

@@ -1,56 +1,2 @@
# Bug 分析与修复报告:优化笔记编辑器自动保存机制
**日期:** 2025-08-13
**作者:** 你的智能小助手
---
## 1. 问题描述
在笔记应用中,自动保存功能存在一个体验问题:即使用户正在积极地编辑文本(持续输入),计时器也不会被正确地重置或停止。这导致了在用户输入间隙,即使是非常短暂的停顿,也会触发不必要的、频繁的保存操作。
理想的行为是:**只有当用户停止输入一段时间后,自动保存才应该被触发。**
**相关文件:** `biji-qianduan/src/components/home/NoteEditor.vue`
## 2. 分析与诊断过程
### 2.1. 初步代码审查
我首先审查了 `NoteEditor.vue` 的源代码,重点关注以下几个方面:
* **Vditor 编辑器集成**: 代码通过 `new Vditor()` 正确初始化了编辑器。
* **事件监听**: 使用了 Vditor 的 `input` 事件回调来侦测内容变化。
* **防抖Debounce逻辑**: 在 `input` 回调中,存在一个看似正确的防抖实现:
* 使用 `let debounceTimer = null;` 在组件作用域内声明了一个计时器变量。
* 每次 `input` 事件触发时,都会先执行 `clearTimeout(debounceTimer);`
* 然后通过 `debounceTimer = setTimeout(...)` 设置一个新的 2 秒延迟的计时器来执行保存操作 `handleSave`
从表面上看,这段代码逻辑是健全的,它确实实现了防抖的核心思想。
### 2.2. 深入诊断:发现真正原因
既然代码逻辑本身没有问题,为什么还会出现用户描述的现象呢?我提出了一个新的假设:**问题并非出在用户输入时,而是出在切换笔记时。**
1. **`watch` 监听器**: 组件中使用 `watch` 来监听 `props.editData` 的变化。当用户从笔记列表选择一篇新笔记时,这个 `prop` 会更新。
2. **`setValue` 的副作用**: `watch` 回调函数会调用 `vditor.value.setValue(newData.content || '')` 来将新笔记的内容加载到编辑器中。
3. **意外的 `input` 事件**: 关键在于Vditor 的 `setValue` 方法在设置内容后,会**自动触发一次 `input` 事件**。
4. **问题触发流程**:
* 用户点击一篇新笔记。
* `watch` 监听到 `props.editData` 变化。
* `vditor.value.setValue()` 被调用,加载新内容。
* `setValue()` 触发了 `input` 事件。
* `input` 事件的回调被执行,启动了一个为期 2 秒的自动保存计时器。
* 即使用户立刻开始在这篇新笔记上输入(这会正确地重置计时器),那个由 `setValue` 启动的初始计时器依然可能在 2 秒后触发一次保存。
因此,**根本原因**是程序化地设置编辑器内容(`setValue`)意外地触发了为用户手动输入设计的自动保存逻辑。
## 3. 修复方案
为了解决这个问题,我们需要区分**用户手动输入**和**程序加载内容**这两种情况。只有前者才应该触发自动保存。
我采用了一个**标志位flag**的方案来解决此问题:
1. **引入标志位**: 在 `script setup` 中增加一个 `ref`
# 当前活动任务上下文
// 准备记录新任务...

View File

@@ -3,4 +3,20 @@
This file tracks the overall progress of the project. Major milestones and completed tasks will be logged here.
## Initial Setup
- [x] Created the basic Memory Bank structure.
- [x] Created the basic Memory Bank structure.
## Bug Fixes (2025-08-14)
### Bug #1: 保存后自动返回首页
**根本原因**
父组件`HomePage.vue`监听了子组件未使用的`save-success`事件(历史遗留问题)
**修复方案**
修改`biji-qianduan/src/components/HomePage.vue`第27行
```diff
- @save-success="handleSaveSuccess"
+ @update:edit-data="handleSaveSuccess"
```
**验证结果**
✅ 修复后保存操作正常返回预览页,保持编辑状态