init the project

2026-05-25 15:09:42 +08:00
commit 7fc0e7852e
122 changed files with 14557 additions and 0 deletions
@@ -0,0 +1,74 @@
+// 用例导出面板：格式切换 + 导出下载
+
+'use client';
+
+import { useState } from 'react';
+import type { ExportFormat } from '@/lib/types';
+import { exportTestCases } from '@/lib/api';
+
+interface ExportPanelProps {
+  tcSetId: string;
+}
+
+const EXPORT_FORMATS: { key: ExportFormat; label: string; description: string }[] = [
+  { key: 'yaml', label: 'YAML', description: '自动化测试可解析的结构化用例' },
+  { key: 'csv', label: 'CSV 表格', description: '适合 Excel 查看与评审归档' },
+  { key: 'xmind', label: 'XMind', description: '思维导图，便于评审展示' },
+];
+
+export default function ExportPanel({ tcSetId }: ExportPanelProps) {
+  const [activeFormat, setActiveFormat] = useState<ExportFormat>('yaml');
+  const [exporting, setExporting] = useState(false);
+
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      const blob = await exportTestCases(tcSetId, activeFormat);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `testcases.${activeFormat === 'csv' ? 'csv' : activeFormat === 'yaml' ? 'yaml' : 'xmind'}`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Export failed:', err);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6">
+      <h3 className="mb-4 text-lg font-semibold text-gray-900">导出测试用例</h3>
+
+      {/* 格式切换标签 */}
+      <div className="mb-6 flex gap-2">
+        {EXPORT_FORMATS.map((fmt) => (
+          <button
+            key={fmt.key}
+            onClick={() => setActiveFormat(fmt.key)}
+            className={`rounded-lg border px-4 py-3 text-sm transition
+              ${activeFormat === fmt.key
+                ? 'border-blue-500 bg-blue-50 text-blue-700'
+                : 'border-gray-200 text-gray-600 hover:border-gray-300 hover:bg-gray-50'}`}
+          >
+            <div className="font-medium">{fmt.label}</div>
+            <div className="mt-0.5 text-xs text-gray-400">{fmt.description}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* 导出按钮 */}
+      <button
+        onClick={handleExport}
+        disabled={exporting}
+        className="flex items-center gap-2 rounded bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 disabled:opacity-50"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+        {exporting ? '导出中...' : `下载 ${activeFormat.toUpperCase()}`}
+      </button>
+    </div>
+  );
+}