永不丢失的灵感：Auto-Novel编辑器历史记录的智能保存方案

永不丢失的灵感：Auto-Novel编辑器历史记录的智能保存方案

【免费下载链接】auto-novel 轻小说机翻网站，支持网络小说/文库小说/本地小说 项目地址: https://gitcode.com/GitHub_Trending/au/auto-novel

在轻小说创作与翻译过程中，作者常常需要反复修改文本内容。Auto-Novel项目的Markdown编辑器通过独特的历史记录保存机制，确保用户在编辑过程中不会因意外操作或页面刷新丢失宝贵的创作内容。本文将深入解析这一功能的技术实现细节。

核心功能架构

编辑器历史记录功能采用三层架构设计，从界面交互到数据持久化形成完整闭环：

1. 用户交互层：MarkdownEditor.vue提供编辑界面与工具栏操作
2. 状态管理层：useDraftStore.ts实现数据逻辑与存储策略
3. 持久化层：基于localStorage的键值对存储确保数据本地留存

图1：编辑器功能架构示意图（项目Banner图）

实时保存机制实现

编辑器通过输入事件监听与节流处理实现高效的内容保存。在MarkdownEditor.vue中，textarea组件绑定了input事件：

<n-input
  ref="editor"
  v-model:value="value"
  type="textarea"
  @input="saveDraft"
  :autosize="autosize || { minRows: 8 }"
/>

这里的saveDraft方法会在用户输入时立即触发，但实际存储操作经过了节流优化。在useDraftStore.ts中，通过lodash的throttle函数将保存频率限制为5秒一次：

const addDraftLimited = throttle(addDraft, 5000);

这种设计既保证了内容的实时性，又避免了频繁存储操作对性能的影响。

数据结构设计

系统采用两级索引结构存储草稿数据，在useDraftStore.ts中定义了清晰的数据模型：

interface DraftRegistry {
  [draftId: string]: { [createdAt: number]: string };
}

export interface Draft {
  text: string;
  createdAt: Date;
}

• 一级键：draftId - 标识不同编辑场景（如不同文章或评论）
• 二级键：createdAt - 时间戳作为版本标识
• 值：text - 实际的Markdown内容

这种结构支持多文档并行编辑，每个文档可保留多个历史版本。

本地存储策略

项目使用localStorage作为持久化方案，通过封装的useLocalStorage工具实现数据存取。在useDraftStore.ts中：

const registry = useLocalStorage<DraftRegistry>(LSKey.Draft, {});

为防止存储膨胀，系统还实现了自动清理机制，定期删除超过3天的历史记录：

const cleanupExpiredDrafts = () => {
  const expirationTime = 1000 * 60 * 60 * 24 * 3; // 3天有效期
  const now = Date.now();
  
  // 遍历清理过期草稿
  Object.keys(registry.value).forEach((draftId) => {
    // 具体清理逻辑...
  });
};

用户体验优化

编辑器在多个环节进行了用户体验优化：

1. 窗口关闭保护：在MarkdownEditor.vue中监听页面关闭事件，提示用户保存未提交的内容：

useEventListener(window, 'beforeunload', (e) => {
  if (value.value.trim()) {
    e.preventDefault();
    return '有未保存的编辑，确定要离开吗？';
  }
});

2. 响应式工具栏：根据屏幕尺寸自动调整工具栏位置，在移动设备上优化显示：

<template v-if="showEditorToolbar && isWideScreen" #suffix>
  <MarkdownToolbar ... />
</template>

3. 草稿管理界面：通过MarkdownToolbar.vue提供历史记录查看与恢复功能，用户可随时回溯到之前的编辑版本。

代码组织与模块划分

该功能涉及多个模块的协同工作，主要代码分布如下：

• 编辑器核心：web/src/components/markdown/

  • MarkdownEditor.vue - 编辑界面实现
  • MarkdownToolbar.vue - 工具栏与历史记录操作
  • MarkdownView.vue - 预览功能实现

• 状态管理：web/src/stores/forum/useDraftStore.ts

  • 数据存储逻辑
  • 历史记录管理
  • 持久化处理

• 工具函数：web/src/util/useStorage/index.ts

  • localStorage封装
  • 通用存储工具

图2：编辑器功能模块关系图（项目图标）

总结与扩展建议

Auto-Novel的Markdown编辑器历史记录功能通过简洁而高效的设计，解决了创作过程中的数据安全问题。核心亮点包括：

1. 节流存储机制平衡了实时性与性能
2. 分级数据结构支持多文档多版本管理
3. 自动清理策略防止存储膨胀
4. 完善的用户交互保护机制

未来可考虑的扩展方向：

• 增加基于云同步的跨设备草稿同步
• 实现更精细的版本对比与合并功能
• 添加手动创建版本快照的功能
• 优化移动端的历史记录浏览体验

通过这些技术实现，Auto-Novel确保用户在轻小说创作过程中能够专注于内容本身，无需担心意外丢失辛苦创作的成果。

【免费下载链接】auto-novel 轻小说机翻网站，支持网络小说/文库小说/本地小说 项目地址: https://gitcode.com/GitHub_Trending/au/auto-novel