feat(导出功能): 添加导出下拉菜单组件
- 实现 ExportDropdown 组件 - 支持 Markdown/JSON/HTML/PDF 格式选择 - 添加导出进度和成功/失败状态提示 - 支持点击外部关闭菜单
This commit is contained in:
gaoziman
parent
2c292b0a8f
commit
0acbc74192
257
src/components/features/ExportDropdown.tsx
Normal file
257
src/components/features/ExportDropdown.tsx
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
MoreHorizontal,
|
||||||
|
FileText,
|
||||||
|
FileJson,
|
||||||
|
FileCode,
|
||||||
|
FileType,
|
||||||
|
Loader2,
|
||||||
|
Check,
|
||||||
|
AlertCircle,
|
||||||
|
Download,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import {
|
||||||
|
generateExportFilename,
|
||||||
|
generatePdfInBrowser,
|
||||||
|
type ExportFormat,
|
||||||
|
type ExportData,
|
||||||
|
} from '@/lib/export';
|
||||||
|
|
||||||
|
interface ExportDropdownProps {
|
||||||
|
conversationId: string;
|
||||||
|
conversationTitle: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出格式配置
|
||||||
|
const EXPORT_FORMATS: {
|
||||||
|
format: ExportFormat;
|
||||||
|
label: string;
|
||||||
|
icon: typeof FileText;
|
||||||
|
description: string;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
format: 'markdown',
|
||||||
|
label: 'Markdown',
|
||||||
|
icon: FileText,
|
||||||
|
description: '纯文本格式，易于编辑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
format: 'json',
|
||||||
|
label: 'JSON',
|
||||||
|
icon: FileJson,
|
||||||
|
description: '完整数据，便于备份',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
format: 'html',
|
||||||
|
label: 'HTML',
|
||||||
|
icon: FileCode,
|
||||||
|
description: '网页格式，保留样式',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
format: 'pdf',
|
||||||
|
label: 'PDF',
|
||||||
|
icon: FileType,
|
||||||
|
description: '文档格式，适合打印',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function ExportDropdown({
|
||||||
|
conversationId,
|
||||||
|
conversationTitle,
|
||||||
|
disabled,
|
||||||
|
}: ExportDropdownProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [exporting, setExporting] = useState<ExportFormat | null>(null);
|
||||||
|
const [exportSuccess, setExportSuccess] = useState<ExportFormat | null>(null);
|
||||||
|
const [exportError, setExportError] = useState<string | null>(null);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// 点击外部关闭菜单
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// 清除成功/错误状态
|
||||||
|
useEffect(() => {
|
||||||
|
if (exportSuccess) {
|
||||||
|
const timer = setTimeout(() => setExportSuccess(null), 2000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [exportSuccess]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (exportError) {
|
||||||
|
const timer = setTimeout(() => setExportError(null), 3000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [exportError]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 触发文件下载
|
||||||
|
*/
|
||||||
|
const downloadFile = (content: string | Blob, filename: string, mimeType: string) => {
|
||||||
|
const blob = content instanceof Blob ? content : new Blob([content], { type: mimeType });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理导出
|
||||||
|
*/
|
||||||
|
const handleExport = async (format: ExportFormat) => {
|
||||||
|
if (exporting) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setExporting(format);
|
||||||
|
setExportError(null);
|
||||||
|
|
||||||
|
if (format === 'pdf') {
|
||||||
|
// PDF 需要先获取数据，然后在客户端生成
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/conversations/${conversationId}/export?format=pdf`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('获取导出数据失败');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json() as ExportData;
|
||||||
|
|
||||||
|
// 在客户端生成 PDF
|
||||||
|
const pdfBlob = await generatePdfInBrowser(data, {
|
||||||
|
format: 'pdf',
|
||||||
|
includeThinking: true,
|
||||||
|
includeToolCalls: true,
|
||||||
|
includeImages: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const filename = generateExportFilename(conversationTitle, 'pdf');
|
||||||
|
downloadFile(pdfBlob, filename, 'application/pdf');
|
||||||
|
} else {
|
||||||
|
// 其他格式直接从 API 获取
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/conversations/${conversationId}/export?format=${format}`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('导出失败');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从 Content-Disposition 获取文件名，或生成默认文件名
|
||||||
|
const contentDisposition = response.headers.get('Content-Disposition');
|
||||||
|
let filename = generateExportFilename(conversationTitle, format);
|
||||||
|
|
||||||
|
if (contentDisposition) {
|
||||||
|
const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)/);
|
||||||
|
if (filenameMatch) {
|
||||||
|
filename = decodeURIComponent(filenameMatch[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const content = await response.text();
|
||||||
|
const mimeType = response.headers.get('Content-Type') || 'text/plain';
|
||||||
|
downloadFile(content, filename, mimeType);
|
||||||
|
}
|
||||||
|
|
||||||
|
setExportSuccess(format);
|
||||||
|
setIsOpen(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export error:', error);
|
||||||
|
setExportError(error instanceof Error ? error.message : '导出失败');
|
||||||
|
} finally {
|
||||||
|
setExporting(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={menuRef}>
|
||||||
|
{/* 触发按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
disabled={disabled || !!exporting}
|
||||||
|
className={cn(
|
||||||
|
'w-8 h-8 flex items-center justify-center rounded-lg transition-colors',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)]',
|
||||||
|
(disabled || exporting) && 'opacity-50 cursor-not-allowed'
|
||||||
|
)}
|
||||||
|
title="更多选项"
|
||||||
|
>
|
||||||
|
{exporting ? (
|
||||||
|
<Loader2 size={18} className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<MoreHorizontal size={18} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 下拉菜单 */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-md shadow-lg py-1 z-30 min-w-[200px]">
|
||||||
|
{/* 导出选项标题 */}
|
||||||
|
<div className="px-3 py-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider border-b border-[var(--color-border)]">
|
||||||
|
<Download size={12} className="inline mr-1.5" />
|
||||||
|
导出对话
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 导出格式列表 */}
|
||||||
|
{EXPORT_FORMATS.map(({ format, label, icon: Icon, description }) => (
|
||||||
|
<button
|
||||||
|
key={format}
|
||||||
|
onClick={() => handleExport(format)}
|
||||||
|
disabled={!!exporting}
|
||||||
|
className={cn(
|
||||||
|
'w-full px-3 py-2.5 text-left text-sm flex items-center gap-3 transition-colors',
|
||||||
|
'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]',
|
||||||
|
exporting === format && 'bg-[var(--color-bg-hover)]',
|
||||||
|
exportSuccess === format && 'bg-green-50 text-green-600'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
{exporting === format ? (
|
||||||
|
<Loader2 size={16} className="animate-spin" />
|
||||||
|
) : exportSuccess === format ? (
|
||||||
|
<Check size={16} className="text-green-500" />
|
||||||
|
) : (
|
||||||
|
<Icon size={16} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="font-medium">{label}</div>
|
||||||
|
<div className="text-xs text-[var(--color-text-tertiary)] truncate">
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 错误提示 */}
|
||||||
|
{exportError && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 bg-red-50 border border-red-200 rounded-lg shadow-lg p-3 z-40 min-w-[200px] flex items-center gap-2 text-sm text-red-600">
|
||||||
|
<AlertCircle size={16} />
|
||||||
|
<span>{exportError}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user