feat: 实现虚拟列表、拖拽排序、实时预览防抖,更新文档

- DataPreview: 大数据量(>100条)自动启用虚拟滚动,仅渲染可见区域
- FieldList: 基于 @dnd-kit/sortable 实现拖拽排序
- index.tsx: 配置变更时300ms防抖生成预览数据
- ui-design.md: 去除平板/移动端响应式、快捷键,更新交互说明
- technical-implementation.md: 去除downloadAsZip,更新虚拟列表说明
This commit is contained in:
雨霖铃
2026-06-06 09:42:58 +08:00
parent 1a92e88934
commit 49e7f1ea55
6 changed files with 329 additions and 171 deletions
@@ -1481,28 +1481,15 @@ export class DataExporter {
});
}
// 下载为 ZIP(需要引入 jszip 库)
static async downloadAsZip(
files: ExportFile[],
zipFilename: string = 'export.zip',
): Promise<void> {
// 动态导入 jszip
const JSZip = (await import('jszip')).default;
const zip = new JSZip();
files.forEach((file) => {
zip.file(file.filename, file.content);
});
const content = await zip.generateAsync({ type: 'blob' });
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = zipFilename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 复制到剪贴板
static async copyToClipboard(content: string): Promise<boolean> {
try {
await navigator.clipboard.writeText(content);
return true;
} catch (error) {
console.error('[DataExporter] 复制失败:', error);
return false;
}
}
}
```
@@ -1860,9 +1847,9 @@ toast.error('生成失败:生成器不存在');
### 4. 虚拟列表
- 大数据预览使用虚拟列表
- 只渲染可见区域
- 减少 DOM 渲染
- 大数据预览>100 条)自动启用虚拟滚动
- 行高固定 20px,仅渲染可见区域 ±5 行缓冲
- 大幅减少 DOM 节点数量,优化滚动性能
---
+11 -21
View File
@@ -446,39 +446,29 @@
- 字段配置区占 60%
- 数据预览区占 40%
### 平板端 (768px-1024px)
- 左右分栏布局
- 字段配置区占 50%
- 数据预览区占 50%
### 移动端 (<768px)
- 单栏布局
- 字段配置和数据预览上下排列
- 预览区默认折叠
---
## 交互细节
### 拖拽排序
- 字段支持拖拽排序
- 拖拽时显示占位符
- 释放后立即生效
- 字段支持拖拽排序(基于 @dnd-kit/sortable
- 拖拽手柄(GripVertical 图标)位于字段左侧
- 拖拽时显示半透明效果和阴影
- 释放后立即生效,自动更新字段顺序
### 实时预览
- 配置参数时实时更新预览
- 延迟 300ms 防抖
- 加载状态显示
- 延迟 300ms 防抖,避免频繁重渲染
- 预览最多显示 10 条示例数据
- 生成完成后切换为完整结果预览
### 快捷操作
### 虚拟列表
- Ctrl+C 复制选中数据
- Ctrl+V 粘贴规则配置
- Ctrl+S 保存当前配置
- 数据量超过 100 条时自动启用虚拟滚动
- 仅渲染可见区域的行,大幅减少 DOM 节点
- 行高固定 20px,支持快速滚动
---