feat: 实现虚拟列表、拖拽排序、实时预览防抖,更新文档
- DataPreview: 大数据量(>100条)自动启用虚拟滚动,仅渲染可见区域 - FieldList: 基于 @dnd-kit/sortable 实现拖拽排序 - index.tsx: 配置变更时300ms防抖生成预览数据 - ui-design.md: 去除平板/移动端响应式、快捷键,更新交互说明 - technical-implementation.md: 去除downloadAsZip,更新虚拟列表说明
This commit is contained in:
@@ -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 节点数量,优化滚动性能
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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,支持快速滚动
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user