feat: 实现按页面进行快照管理

[xingxingzaixian]

功能概述

实现了按页面进行快照管理的功能，解决了之前所有页面共享快照导致的混乱问题。现在每个页面都有独立的快照历史，撤销/重做操作只影响当前页面。

主要改进

🔧 核心功能

• 页面隔离: 每个页面拥有独立的快照历史
• 智能管理: 自动根据页面ID管理快照上下文
• 向后兼容: 支持旧版本快照数据，数据库自动升级

📊 数据库升级

• 升级 Dexie 数据库到版本2
• 在快照表中添加 pageId 字段和索引
• 保持对旧数据的完全兼容

🎯 用户体验提升

• 不同页面的撤销/重做操作互不干扰
• 页面切换时自动切换到对应的快照上下文
• 新建页面使用临时ID，已保存页面使用实际ID

技术实现

修改的文件

• packages/designer/src/db.ts - 升级数据库结构
• packages/designer/src/state/snapshot.ts - 重构快照管理逻辑
• packages/designer/src/state/canvas.ts - 添加页面ID管理
• examples/src/pages/DesignerView/View.vue - 设置页面ID
• examples/src/pages/Preview.vue - 更新预览页面逻辑

新增的API

SnapshotState

setCurrentPageId(pageId: string): void
getCurrentPageId(): string
clearSnapshot(pageId?: string): Promise<void>

CanvasState

setCurrentPageId(pageId: string): void
getCurrentPageId(): string
switchPage(newPageId: string): void

测试和文档

• ✅ 添加了完整的单元测试
• 📚 创建了详细的使用文档和迁移指南
• 🔧 提供了故障排除说明

向后兼容性

• ✅ 旧的快照数据完全保留
• ✅ 数据库自动升级，无需手动干预
• ✅ 现有API使用方式不变

使用示例

// 设置当前页面ID
canvasState.setCurrentPageId(pageId || 'unsaved')

// 快照操作自动关联到当前页面
snapshotState.saveSnapshot(canvasData, canvasStyle, dataSlotters)

// 撤销/重做只影响当前页面
const lastSnapshot = await snapshotState.lastRecord()

测试说明

请测试以下场景：

1. 在不同页面间切换，验证快照独立性
2. 在一个页面进行撤销/重做，切换到另一个页面验证不受影响
3. 清空特定页面的快照，验证其他页面不受影响
4. 从旧版本升级，验证数据完整性

相关Issue

解决了用户反馈的快照管理混乱问题，提升了多页面编辑的用户体验。

---

Pull Request opened by Augment Code with guidance from the PR author