Draft草稿自动保存

提供自动草稿保存功能，防止用户因意外关闭页面而丢失数据。

何时使用

需要填写长表单，防止数据丢失
需要编辑复杂配置，支持草稿恢复
需要离线编辑，本地保存草稿

Examples

基本使用

使用 DraftMonitor 组件对任意类型的数据进行草稿监控和自动保存。适用于不使用 Form 组件的场景。

特性：

支持任意数据类型
自动检测数据变化并保存
支持双向绑定或回调方式更新数据
灵活的配置选项

表单集成

使用 DraftMonitor 组件与 Form 组合，实现表单草稿自动保存功能。当表单数据发生变化时，会自动延迟保存到本地存储。当用户重新打开页面时，会提示是否恢复未完成的草稿。

通过组合而非继承的方式，可以灵活地为任何表单添加草稿功能。

特性：

自动检测表单变更并延迟保存
支持自定义延迟时长（默认 1000ms）
支持版本控制，只恢复匹配版本的草稿
支持三种恢复模式：确认弹窗、自动恢复、手动恢复
组件化设计，易于集成

本地化

DraftMonitor 组件支持国际化，默认使用当前locale的配置。你也可以通过 Locale 参数自定义文本。

自定义恢复对话框内容

通过 RecoveryContentTemplate 参数可以自定义草稿恢复确认对话框的内容，支持渲染复杂的 HTML 内容。

版本号对比

通过自定义版本比较函数,实现只恢复版本号相同或更新的草稿,自动删除过期草稿。

使用场景

防止旧数据覆盖新数据:服务器数据已更新,避免用户恢复旧草稿覆盖最新数据
多用户协作:在多人编辑场景下,确保只恢复当前版本的草稿
版本化管理:基于版本号进行草稿管理,自动清理不兼容的旧草稿

测试步骤

编辑文档内容,等待自动保存草稿
点击"模拟服务器更新(版本+1)"按钮,模拟服务器端数据版本升级
刷新页面,旧版本草稿将被自动删除(不会弹出恢复对话框)

核心配置

private DraftOptions draftOptions => new DraftOptions
{
    Version = formData.Version.ToString(),
    EnableVersionCheck = true,
    // 自定义版本比较:只有草稿版本 >= 当前版本才恢复
    ShouldRecoverDraft = (draftVer, currentVer) =>
    {
        if (int.TryParse(draftVer, out var dv) && 
            int.TryParse(currentVer, out var cv))
        {
            return dv >= cv; // 草稿版本必须 >= 当前版本
        }
        return false;
    }
};

API#

DraftMonitor

参数	说明	类型	默认值
Data	要监控的数据	TData	-
DataChanged	数据变更回调	EventCallback	-
Options	草稿配置选项	DraftOptions	-
Enabled	是否启用	bool	true
Locale	本地化配置	DraftLocale	LocaleProvider.CurrentLocale.Draft
RecoveryContentTemplate	自定义恢复对话框内容模板	RenderFragment<DraftData>	-
OnRecovered	草稿恢复回调	EventCallback	-
OnDeleted	草稿删除回调	EventCallback	-

DraftLocale

参数	说明	类型	默认值 (zh-CN / en-US)
RecoveryTitle	恢复确认框标题	string	"发现草稿" / "Draft Found"
RecoveryContent	恢复确认框内容	string	"检测到未完成的草稿，是否恢复？" / "An unfinished draft was detected..."
RecoveryOkText	恢复按钮文本	string	"恢复" / "Recover"
RecoveryCancelText	删除按钮文本	string	"删除" / "Delete"
SavedAtLabel	保存时间标签	string	"保存时间" / "Saved at"

DraftOptions

参数	说明	类型	默认值
Key	草稿唯一标识符	string	-
DelayMilliseconds	延迟保存时长（毫秒）	int	1000
RecoveryMode	恢复模式	DraftRecoveryMode	Confirm
Version	版本号	string	"1.0.0"
EnableVersionCheck	是否启用版本检查	bool	true
Enabled	是否启用草稿功能	bool	true
StorageProvider	自定义存储提供者	IDraftStorageProvider	null
ShouldRecoverDraft	自定义版本比较函数。(draftVersion, currentVersion) => bool	Func<string, string, bool>	null

DraftRecoveryMode

值	说明
Confirm	弹出确认框，让用户选择是否恢复
Auto	自动恢复草稿
Manual	不自动恢复，需要手动处理

DraftMonitor 方法

方法	说明	参数	返回值
SaveDraftAsync	手动立即保存草稿	-	Task
ClearDraftAsync	手动清除草稿	-	Task

高级用法

自定义存储提供者

public class DatabaseDraftProvider : IDraftStorageProvider
{
    private readonly MyDbContext _db;
    
    public async Task SaveAsync(string key, string data)
    {
        // 保存到数据库
    }
    
    public async Task<string> LoadAsync(string key)
    {
        // 从数据库加载
    }
    
    public async Task RemoveAsync(string key)
    {
        // 从数据库删除
    }
    
    public async Task<bool> ExistsAsync(string key)
    {
        // 检查是否存在
    }
}

// 注册自定义提供者
builder.Services.AddAntDesign();
builder.Services.AddScoped<IDraftStorageProvider, DatabaseDraftProvider>();

直接使用 IDraftService

@inject IDraftService DraftService

@code {
    private async Task SaveDraft()
    {
        await DraftService.SaveDraftAsync("key", data, options);
    }
    
    private async Task LoadDraft()
    {
        var draft = await DraftService.LoadDraftAsync<MyData>("key", options);
    }
}

注意事项

版本控制：建议为每个草稿设置版本号，当数据结构变更时更新版本号，避免恢复不兼容的旧草稿。
存储限制：LocalStorage 通常有 5-10MB 的存储限制，对于大型数据建议使用自定义存储提供者。
敏感数据：不要在草稿中存储敏感信息（如密码），或使用加密的自定义存储提供者。
定期清理：建议定期清理过期的草稿数据，避免占用过多存储空间。
多标签页：当前实现基于 LocalStorage，多个标签页会共享同一个草稿。如需隔离，请使用带有标签页标识的 Key。