feat(导出功能): 添加导出下拉菜单组件

- 实现 ExportDropdown 组件
- 支持 Markdown/JSON/HTML/PDF 格式选择
- 添加导出进度和成功/失败状态提示
- 支持点击外部关闭菜单

src/components/features/ExportDropdown.tsx

@@ -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>
+  );
+}