|
|
@@ -0,0 +1,1054 @@
|
|
|
+import { useState, useRef } from 'react';
|
|
|
+import * as XLSX from 'xlsx';
|
|
|
+import PizZip from 'pizzip';
|
|
|
+import Docxtemplater from 'docxtemplater';
|
|
|
+import ImageModule from 'open-docxtemplater-image-module-2';
|
|
|
+import JSZip from 'jszip';
|
|
|
+import { Button } from '@/client/components/ui/button';
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
+import { Input } from '@/client/components/ui/input';
|
|
|
+import { Label } from '@/client/components/ui/label';
|
|
|
+import { Alert, AlertDescription } from '@/client/components/ui/alert';
|
|
|
+import {
|
|
|
+ FileText, Upload, Download, Eye, FileWarning, FileSpreadsheet,
|
|
|
+ RefreshCw, CheckCircle, AlertCircle, DownloadCloud, Image, Package,
|
|
|
+ X, ZoomIn, ZoomOut, ChevronLeft, ChevronRight
|
|
|
+} from 'lucide-react';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import WordViewer from '@/client/home-shadcn/components/WordViewer';
|
|
|
+import { Badge } from '@/client/components/ui/badge';
|
|
|
+import { Progress } from '@/client/components/ui/progress';
|
|
|
+import {
|
|
|
+ Dialog,
|
|
|
+ DialogContent,
|
|
|
+ DialogHeader,
|
|
|
+ DialogTitle,
|
|
|
+} from '@/client/components/ui/dialog';
|
|
|
+
|
|
|
+interface WordFile {
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ size: number;
|
|
|
+ url: string;
|
|
|
+ previewUrl?: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface ExcelRow {
|
|
|
+ [key: string]: string | number;
|
|
|
+}
|
|
|
+
|
|
|
+interface ImageMapping {
|
|
|
+ [key: string]: {
|
|
|
+ [imageName: string]: File;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+interface ProcessingResult {
|
|
|
+ originalFile: File;
|
|
|
+ generatedFiles: Array<{
|
|
|
+ name: string;
|
|
|
+ content: Blob;
|
|
|
+ fields: Record<string, string>;
|
|
|
+ }>;
|
|
|
+ total: number;
|
|
|
+}
|
|
|
+
|
|
|
+export default function WordPreview() {
|
|
|
+ const [selectedWordFile, setSelectedWordFile] = useState<File | null>(null);
|
|
|
+ const [selectedExcelFile, setSelectedExcelFile] = useState<File | null>(null);
|
|
|
+ const [imageZipFile, setImageZipFile] = useState<File | null>(null);
|
|
|
+ const [previewFile, setPreviewFile] = useState<WordFile | null>(null);
|
|
|
+ const [isLoading, setIsLoading] = useState(false);
|
|
|
+ const [previewLoading, setPreviewLoading] = useState(false);
|
|
|
+ const [showPreview, setShowPreview] = useState(false);
|
|
|
+ const [processingResult, setProcessingResult] = useState<ProcessingResult | null>(null);
|
|
|
+ const [excelData, setExcelData] = useState<ExcelRow[]>([]);
|
|
|
+ const [processingProgress, setProcessingProgress] = useState(0);
|
|
|
+ const [imageMappings, setImageMappings] = useState<ImageMapping>({});
|
|
|
+ const [imagePreviewUrls, setImagePreviewUrls] = useState<Record<string, Record<string, string>>>({});
|
|
|
+ const [selectedImage, setSelectedImage] = useState<{
|
|
|
+ url: string;
|
|
|
+ name: string;
|
|
|
+ folder: string;
|
|
|
+ } | null>(null);
|
|
|
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
+ const [allImages, setAllImages] = useState<Array<{ url: string; name: string; folder: string }>>([]);
|
|
|
+
|
|
|
+ const wordFileInputRef = useRef<HTMLInputElement>(null);
|
|
|
+ const excelFileInputRef = useRef<HTMLInputElement>(null);
|
|
|
+ const imageZipInputRef = useRef<HTMLInputElement>(null);
|
|
|
+
|
|
|
+ // 文件选择处理
|
|
|
+ const handleWordFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ const file = event.target.files?.[0];
|
|
|
+ if (file) {
|
|
|
+ const validTypes = [
|
|
|
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
|
|
+ ];
|
|
|
+ const maxSize = 10 * 1024 * 1024;
|
|
|
+
|
|
|
+ if (!validTypes.includes(file.type)) {
|
|
|
+ toast.error('请选择有效的Word文件（.docx格式）');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (file.size > maxSize) {
|
|
|
+ toast.error('文件大小超过10MB限制');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setSelectedWordFile(file);
|
|
|
+ setShowPreview(false);
|
|
|
+ toast.success('Word模板已选择');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleExcelFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ const file = event.target.files?.[0];
|
|
|
+ if (file) {
|
|
|
+ const validTypes = [
|
|
|
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
|
+ 'application/vnd.ms-excel'
|
|
|
+ ];
|
|
|
+ const maxSize = 10 * 1024 * 1024;
|
|
|
+
|
|
|
+ if (!validTypes.includes(file.type)) {
|
|
|
+ toast.error('请选择有效的Excel文件（.xlsx/.xls格式）');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (file.size > maxSize) {
|
|
|
+ toast.error('文件大小超过10MB限制');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setSelectedExcelFile(file);
|
|
|
+ parseExcelFile(file);
|
|
|
+ toast.success('Excel数据文件已选择');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleImageZipSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ const file = event.target.files?.[0];
|
|
|
+ if (file) {
|
|
|
+ const validTypes = ['application/zip', 'application/x-zip-compressed'];
|
|
|
+ const maxSize = 50 * 1024 * 1024;
|
|
|
+
|
|
|
+ if (!validTypes.includes(file.type)) {
|
|
|
+ toast.error('请选择有效的ZIP压缩文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (file.size > maxSize) {
|
|
|
+ toast.error('压缩文件大小超过50MB限制');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setImageZipFile(file);
|
|
|
+ await parseImageZip(file);
|
|
|
+ toast.success('图片压缩文件已选择');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 解析Excel文件
|
|
|
+ const parseExcelFile = async (file: File) => {
|
|
|
+ try {
|
|
|
+ const data = await file.arrayBuffer();
|
|
|
+ const workbook = XLSX.read(data, { type: 'array' });
|
|
|
+ const firstSheetName = workbook.SheetNames[0];
|
|
|
+ const worksheet = workbook.Sheets[firstSheetName];
|
|
|
+ const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];
|
|
|
+
|
|
|
+ if (jsonData.length < 2) {
|
|
|
+ toast.error('Excel文件格式不正确，需要包含表头和至少一行数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const headers = jsonData[0] as string[];
|
|
|
+ const rows: ExcelRow[] = [];
|
|
|
+
|
|
|
+ for (let i = 1; i < jsonData.length; i++) {
|
|
|
+ const row = jsonData[i];
|
|
|
+ const rowData: ExcelRow = {};
|
|
|
+ headers.forEach((header, index) => {
|
|
|
+ rowData[header] = row[index] || '';
|
|
|
+ });
|
|
|
+ rows.push(rowData);
|
|
|
+ }
|
|
|
+
|
|
|
+ setExcelData(rows);
|
|
|
+ toast.success(`成功解析 ${rows.length} 条数据记录`);
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('Excel文件解析失败');
|
|
|
+ console.error('Excel parsing error:', error);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 解析图片压缩文件
|
|
|
+ const parseImageZip = async (file: File) => {
|
|
|
+ try {
|
|
|
+ const zip = new JSZip();
|
|
|
+ const zipContent = await zip.loadAsync(file);
|
|
|
+ const newImageMappings: ImageMapping = {};
|
|
|
+ const newImagePreviewUrls: Record<string, Record<string, string>> = {};
|
|
|
+ const allImages: Array<{ url: string; name: string; folder: string }> = [];
|
|
|
+
|
|
|
+ // 解析文件夹结构：第一层为序号，第二层为图片
|
|
|
+ for (const [path, zipEntry] of Object.entries(zipContent.files)) {
|
|
|
+ if (!zipEntry.dir && isImageFile(path)) {
|
|
|
+ const pathParts = path.split('/');
|
|
|
+ if (pathParts.length >= 2) {
|
|
|
+ const folderIndex = pathParts[0]; // 序号文件夹
|
|
|
+ const imageName = pathParts[pathParts.length - 1].split('.')[0]; // 去掉扩展名的文件名
|
|
|
+ const fullImageName = pathParts[pathParts.length - 1]; // 完整文件名
|
|
|
+
|
|
|
+ if (!newImageMappings[folderIndex]) {
|
|
|
+ newImageMappings[folderIndex] = {};
|
|
|
+ newImagePreviewUrls[folderIndex] = {};
|
|
|
+ }
|
|
|
+
|
|
|
+ const imageFile = await zipEntry.async('blob');
|
|
|
+ newImageMappings[folderIndex][imageName] = new File([imageFile], imageName, {
|
|
|
+ type: getImageMimeType(path)
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建预览URL
|
|
|
+ const previewUrl = URL.createObjectURL(imageFile);
|
|
|
+ newImagePreviewUrls[folderIndex][imageName] = previewUrl;
|
|
|
+
|
|
|
+ allImages.push({
|
|
|
+ url: previewUrl,
|
|
|
+ name: fullImageName,
|
|
|
+ folder: folderIndex
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setImageMappings(newImageMappings);
|
|
|
+ setImagePreviewUrls(newImagePreviewUrls);
|
|
|
+ setAllImages(allImages);
|
|
|
+ toast.success(`成功解析 ${Object.keys(newImageMappings).length} 个文件夹的图片`);
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('图片压缩文件解析失败');
|
|
|
+ console.error('Image zip parsing error:', error);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 工具函数
|
|
|
+ const isImageFile = (filename: string): boolean => {
|
|
|
+ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
|
|
|
+ return imageExtensions.some(ext => filename.toLowerCase().endsWith(ext));
|
|
|
+ };
|
|
|
+
|
|
|
+ const getImageMimeType = (filename: string): string => {
|
|
|
+ const extension = filename.toLowerCase().split('.').pop();
|
|
|
+ const mimeTypes: Record<string, string> = {
|
|
|
+ 'jpg': 'image/jpeg',
|
|
|
+ 'jpeg': 'image/jpeg',
|
|
|
+ 'png': 'image/png',
|
|
|
+ 'gif': 'image/gif',
|
|
|
+ 'bmp': 'image/bmp',
|
|
|
+ 'webp': 'image/webp'
|
|
|
+ };
|
|
|
+ return mimeTypes[extension || ''] || 'image/jpeg';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 替换Word字段并插入图片
|
|
|
+ const replaceFieldsInWord = async (wordFile: File, excelRow: ExcelRow, rowIndex: number): Promise<Blob> => {
|
|
|
+ try {
|
|
|
+ const arrayBuffer = await wordFile.arrayBuffer();
|
|
|
+ const zip = new PizZip(arrayBuffer);
|
|
|
+
|
|
|
+ // 预加载所有图片数据，避免Promise问题
|
|
|
+ const folderIndex = (rowIndex + 1).toString();
|
|
|
+ const imageDataMap: Record<string, ArrayBuffer> = {};
|
|
|
+
|
|
|
+ // 预加载当前文件夹的所有图片
|
|
|
+ if (imageMappings[folderIndex]) {
|
|
|
+ for (const [imageName, imageFile] of Object.entries(imageMappings[folderIndex])) {
|
|
|
+ try {
|
|
|
+ imageDataMap[imageName] = await imageFile.arrayBuffer();
|
|
|
+ } catch (error) {
|
|
|
+ console.warn(`Failed to load image ${imageName}:`, error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 配置图片模块 - 使用实际图片尺寸
|
|
|
+ const imageSizeCache = new Map<string, [number, number]>();
|
|
|
+
|
|
|
+ const imageOpts = {
|
|
|
+ centered: false,
|
|
|
+ getImage: (tagValue: string): ArrayBuffer | null => {
|
|
|
+ if (tagValue && typeof tagValue === 'string') {
|
|
|
+ return imageDataMap[tagValue] || null;
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+ getSize: (img: ArrayBuffer, tagValue: string, tagName: string) => {
|
|
|
+ console.log('tagName', tagName)
|
|
|
+ console.log('tagValue', tagValue)
|
|
|
+ // 从图片数据中获取实际尺寸
|
|
|
+ try {
|
|
|
+ // 为每个图片创建唯一的缓存键
|
|
|
+ const cacheKey = `${tagValue}_${img.byteLength}`;
|
|
|
+
|
|
|
+ // 如果已经缓存了尺寸，直接返回
|
|
|
+ if (imageSizeCache.has(cacheKey)) {
|
|
|
+ return imageSizeCache.get(cacheKey)!;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 简化的图片尺寸检测（基于图片数据特征）
|
|
|
+ // 这里我们使用一个合理的方法来从图片数据推断尺寸
|
|
|
+ const view = new DataView(img);
|
|
|
+
|
|
|
+ // PNG格式检测
|
|
|
+ if (view.getUint32(0) === 0x89504E47 && view.getUint32(4) === 0x0D0A1A0A) {
|
|
|
+ // PNG IHDR chunk: width at offset 16, height at offset 20
|
|
|
+ const width = view.getUint32(16);
|
|
|
+ const height = view.getUint32(20);
|
|
|
+ const size: [number, number] = [width, height];
|
|
|
+ console.log('size', size)
|
|
|
+ imageSizeCache.set(cacheKey, size);
|
|
|
+ return size;
|
|
|
+ }
|
|
|
+
|
|
|
+ // JPEG格式检测
|
|
|
+ if (view.getUint16(0) === 0xFFD8) {
|
|
|
+ // 简化的JPEG尺寸检测
|
|
|
+ let offset = 2;
|
|
|
+ while (offset < img.byteLength - 10) {
|
|
|
+ if (view.getUint8(offset) === 0xFF) {
|
|
|
+ const marker = view.getUint8(offset + 1);
|
|
|
+ if (marker >= 0xC0 && marker <= 0xC3) {
|
|
|
+ // SOF marker found
|
|
|
+ const height = view.getUint16(offset + 5);
|
|
|
+ const width = view.getUint16(offset + 7);
|
|
|
+ const size: [number, number] = [width, height];
|
|
|
+ console.log('size', size)
|
|
|
+ imageSizeCache.set(cacheKey, size);
|
|
|
+ return size;
|
|
|
+ }
|
|
|
+ const length = view.getUint16(offset + 2);
|
|
|
+ offset += length + 2;
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ offset++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果无法检测尺寸，使用默认尺寸
|
|
|
+ const defaultSize: [number, number] = [200, 150];
|
|
|
+ imageSizeCache.set(cacheKey, defaultSize);
|
|
|
+ console.log('defaultSize', defaultSize)
|
|
|
+ return defaultSize;
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.warn('Failed to get image size, using default:', error);
|
|
|
+ return [200, 150];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const imageModule = new ImageModule(imageOpts);
|
|
|
+
|
|
|
+ const doc = new Docxtemplater(zip, {
|
|
|
+ paragraphLoop: true,
|
|
|
+ linebreaks: true,
|
|
|
+ modules: [imageModule]
|
|
|
+ })
|
|
|
+
|
|
|
+ // 处理嵌套数据结构
|
|
|
+ const processedData: Record<string, any> = {};
|
|
|
+
|
|
|
+ // 处理普通字段
|
|
|
+ Object.entries(excelRow).forEach(([key, value]) => {
|
|
|
+ if (key.includes('.')) {
|
|
|
+ const parts = key.split('.');
|
|
|
+ let current = processedData;
|
|
|
+ for (let i = 0; i < parts.length - 1; i++) {
|
|
|
+ if (!current[parts[i]]) {
|
|
|
+ current[parts[i]] = {};
|
|
|
+ }
|
|
|
+ current = current[parts[i]];
|
|
|
+ }
|
|
|
+ current[parts[parts.length - 1]] = value;
|
|
|
+ } else {
|
|
|
+ processedData[key] = value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理图片字段 - 确保图片名称正确传递给模板
|
|
|
+ if (imageMappings[folderIndex]) {
|
|
|
+ for (const [imageName] of Object.entries(imageMappings[folderIndex])) {
|
|
|
+ // 确保图片名称作为标签值传递给模板
|
|
|
+ processedData[imageName] = imageName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ doc.render(processedData);
|
|
|
+
|
|
|
+ const generatedDoc = doc.getZip().generate({
|
|
|
+ type: 'blob',
|
|
|
+ mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
|
|
+ });
|
|
|
+
|
|
|
+ return generatedDoc;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Word处理错误:', error);
|
|
|
+ throw new Error('Word文档处理失败，请检查模板格式');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理文件
|
|
|
+ const processFiles = async () => {
|
|
|
+ if (!selectedWordFile || !selectedExcelFile || excelData.length === 0) {
|
|
|
+ toast.error('请先选择Word模板和Excel数据文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setIsLoading(true);
|
|
|
+ setProcessingProgress(0);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const generatedFiles: ProcessingResult['generatedFiles'] = [];
|
|
|
+
|
|
|
+ for (let i = 0; i < excelData.length; i++) {
|
|
|
+ const row = excelData[i];
|
|
|
+ const processedBlob = await replaceFieldsInWord(selectedWordFile, row, i);
|
|
|
+
|
|
|
+ const fileName = `processed_${i + 1}_${selectedWordFile.name}`;
|
|
|
+ generatedFiles.push({
|
|
|
+ name: fileName,
|
|
|
+ content: processedBlob,
|
|
|
+ fields: row
|
|
|
+ });
|
|
|
+
|
|
|
+ setProcessingProgress(((i + 1) / excelData.length) * 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ const result: ProcessingResult = {
|
|
|
+ originalFile: selectedWordFile,
|
|
|
+ generatedFiles,
|
|
|
+ total: generatedFiles.length
|
|
|
+ };
|
|
|
+
|
|
|
+ setProcessingResult(result);
|
|
|
+ toast.success(`成功生成 ${generatedFiles.length} 个文档`);
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('文档处理失败');
|
|
|
+ console.error('Processing error:', error);
|
|
|
+ } finally {
|
|
|
+ setIsLoading(false);
|
|
|
+ setProcessingProgress(0);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 预览功能
|
|
|
+ const handlePreview = async () => {
|
|
|
+ if (!selectedWordFile) {
|
|
|
+ toast.error('请先选择Word文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setPreviewLoading(true);
|
|
|
+ setShowPreview(true);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const fileUrl = URL.createObjectURL(selectedWordFile);
|
|
|
+ const wordFile: WordFile = {
|
|
|
+ id: Date.now().toString(),
|
|
|
+ name: selectedWordFile.name,
|
|
|
+ size: selectedWordFile.size,
|
|
|
+ url: fileUrl,
|
|
|
+ previewUrl: fileUrl
|
|
|
+ };
|
|
|
+
|
|
|
+ setPreviewFile(wordFile);
|
|
|
+ toast.success('正在预览Word模板...');
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('文件预览失败');
|
|
|
+ console.error('Preview error:', error);
|
|
|
+ setShowPreview(false);
|
|
|
+ } finally {
|
|
|
+ setPreviewLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 下载功能
|
|
|
+ const downloadProcessedFile = (file: ProcessingResult['generatedFiles'][0]) => {
|
|
|
+ const url = URL.createObjectURL(file.content);
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = url;
|
|
|
+ a.download = file.name;
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ URL.revokeObjectURL(url);
|
|
|
+ };
|
|
|
+
|
|
|
+ const downloadAllFiles = () => {
|
|
|
+ if (!processingResult) return;
|
|
|
+
|
|
|
+ processingResult.generatedFiles.forEach((file, index) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ downloadProcessedFile(file);
|
|
|
+ }, index * 500);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const clearAllFiles = () => {
|
|
|
+ setSelectedWordFile(null);
|
|
|
+ setSelectedExcelFile(null);
|
|
|
+ setImageZipFile(null);
|
|
|
+ setExcelData([]);
|
|
|
+ setProcessingResult(null);
|
|
|
+ setImageMappings({});
|
|
|
+ setImagePreviewUrls({});
|
|
|
+ setSelectedImage(null);
|
|
|
+ setAllImages([]);
|
|
|
+ setPreviewFile(null);
|
|
|
+ setShowPreview(false);
|
|
|
+
|
|
|
+ if (wordFileInputRef.current) wordFileInputRef.current.value = '';
|
|
|
+ if (excelFileInputRef.current) excelFileInputRef.current.value = '';
|
|
|
+ if (imageZipInputRef.current) imageZipInputRef.current.value = '';
|
|
|
+
|
|
|
+ toast.success('已清除所有文件');
|
|
|
+ };
|
|
|
+
|
|
|
+ const formatFileSize = (bytes: number) => {
|
|
|
+ if (bytes === 0) return '0 Bytes';
|
|
|
+ const k = 1024;
|
|
|
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
|
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
|
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
|
+ };
|
|
|
+
|
|
|
+ // 图片预览功能
|
|
|
+ const openImagePreview = (url: string, name: string, folder: string) => {
|
|
|
+ const imageIndex = allImages.findIndex(img => img.url === url);
|
|
|
+ setCurrentImageIndex(imageIndex !== -1 ? imageIndex : 0);
|
|
|
+ setSelectedImage({ url, name, folder });
|
|
|
+ };
|
|
|
+
|
|
|
+ const closeImagePreview = () => {
|
|
|
+ setSelectedImage(null);
|
|
|
+ };
|
|
|
+
|
|
|
+ const navigateImage = (direction: 'prev' | 'next') => {
|
|
|
+ if (allImages.length === 0) return;
|
|
|
+
|
|
|
+ let newIndex = currentImageIndex;
|
|
|
+ if (direction === 'prev') {
|
|
|
+ newIndex = currentImageIndex > 0 ? currentImageIndex - 1 : allImages.length - 1;
|
|
|
+ } else {
|
|
|
+ newIndex = currentImageIndex < allImages.length - 1 ? currentImageIndex + 1 : 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ setCurrentImageIndex(newIndex);
|
|
|
+ setSelectedImage(allImages[newIndex]);
|
|
|
+ };
|
|
|
+
|
|
|
+ const getTotalImages = () => {
|
|
|
+ return Object.values(imagePreviewUrls).reduce((total, folder) => total + Object.keys(folder).length, 0);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-6">
|
|
|
+ <div>
|
|
|
+ <h1 className="text-3xl font-bold tracking-tight">Word批量处理工具（增强版）</h1>
|
|
|
+ <p className="text-muted-foreground">支持图片压缩文件，自动生成替换字段和图片的文档</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 文件上传区域 */}
|
|
|
+ <div className="grid gap-6 md:grid-cols-3">
|
|
|
+ {/* Word模板上传 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <FileText className="h-5 w-5" />
|
|
|
+ 选择Word模板
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 支持 .docx 格式的Word文档，最大10MB
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="space-y-4">
|
|
|
+ <div className="grid w-full items-center gap-1.5">
|
|
|
+ <Label htmlFor="word-file">Word模板文件</Label>
|
|
|
+ <Input
|
|
|
+ ref={wordFileInputRef}
|
|
|
+ id="word-file"
|
|
|
+ type="file"
|
|
|
+ accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
|
|
+ onChange={handleWordFileSelect}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {selectedWordFile && (
|
|
|
+ <Alert>
|
|
|
+ <FileText className="h-4 w-4" />
|
|
|
+ <AlertDescription>
|
|
|
+ <div className="space-y-1">
|
|
|
+ <p><strong>文件名:</strong> {selectedWordFile.name}</p>
|
|
|
+ <p><strong>大小:</strong> {formatFileSize(selectedWordFile.size)}</p>
|
|
|
+ </div>
|
|
|
+ </AlertDescription>
|
|
|
+ </Alert>
|
|
|
+ )}
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* Excel数据上传 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <FileSpreadsheet className="h-5 w-5" />
|
|
|
+ 选择Excel数据
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 支持 .xlsx/.xls 格式的Excel文档，最大10MB
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="space-y-4">
|
|
|
+ <div className="grid w-full items-center gap-1.5">
|
|
|
+ <Label htmlFor="excel-file">Excel数据文件</Label>
|
|
|
+ <Input
|
|
|
+ ref={excelFileInputRef}
|
|
|
+ id="excel-file"
|
|
|
+ type="file"
|
|
|
+ accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
|
|
|
+ onChange={handleExcelFileSelect}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {selectedExcelFile && (
|
|
|
+ <Alert>
|
|
|
+ <FileSpreadsheet className="h-4 w-4" />
|
|
|
+ <AlertDescription>
|
|
|
+ <div className="space-y-1">
|
|
|
+ <p><strong>文件名:</strong> {selectedExcelFile.name}</p>
|
|
|
+ <p><strong>大小:</strong> {formatFileSize(selectedExcelFile.size)}</p>
|
|
|
+ {excelData.length > 0 && (
|
|
|
+ <p><strong>数据行数:</strong> {excelData.length}</p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </AlertDescription>
|
|
|
+ </Alert>
|
|
|
+ )}
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 图片压缩文件上传 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <Package className="h-5 w-5" />
|
|
|
+ 选择图片压缩包
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 支持 .zip 格式压缩包，最大50MB
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="space-y-4">
|
|
|
+ <div className="grid w-full items-center gap-1.5">
|
|
|
+ <Label htmlFor="image-zip">图片压缩文件</Label>
|
|
|
+ <Input
|
|
|
+ ref={imageZipInputRef}
|
|
|
+ id="image-zip"
|
|
|
+ type="file"
|
|
|
+ accept=".zip,application/zip,application/x-zip-compressed"
|
|
|
+ onChange={handleImageZipSelect}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {imageZipFile && (
|
|
|
+ <Alert>
|
|
|
+ <Image className="h-4 w-4" />
|
|
|
+ <AlertDescription>
|
|
|
+ <div className="space-y-1">
|
|
|
+ <p><strong>文件名:</strong> {imageZipFile.name}</p>
|
|
|
+ <p><strong>大小:</strong> {formatFileSize(imageZipFile.size)}</p>
|
|
|
+ {Object.keys(imageMappings).length > 0 && (
|
|
|
+ <p><strong>文件夹数:</strong> {Object.keys(imageMappings).length}</p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </AlertDescription>
|
|
|
+ </Alert>
|
|
|
+ )}
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 操作按钮 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>操作区域</CardTitle>
|
|
|
+ <CardDescription>选择文件后执行相应操作</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="space-y-4">
|
|
|
+ <div className="flex gap-2 flex-wrap">
|
|
|
+ <Button
|
|
|
+ onClick={handlePreview}
|
|
|
+ disabled={!selectedWordFile || previewLoading}
|
|
|
+ variant="outline"
|
|
|
+ >
|
|
|
+ <Eye className="h-4 w-4 mr-2" />
|
|
|
+ 预览模板
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ onClick={processFiles}
|
|
|
+ disabled={!selectedWordFile || !selectedExcelFile || excelData.length === 0 || isLoading}
|
|
|
+ className="bg-blue-600 hover:bg-blue-700"
|
|
|
+ >
|
|
|
+ {isLoading ? (
|
|
|
+ <>
|
|
|
+ <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
|
|
+ 处理中...
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Upload className="h-4 w-4 mr-2" />
|
|
|
+ 开始处理
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ onClick={clearAllFiles}
|
|
|
+ variant="outline"
|
|
|
+ className="text-red-600 hover:text-red-700"
|
|
|
+ >
|
|
|
+ 清除所有
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {isLoading && (
|
|
|
+ <div className="space-y-2">
|
|
|
+ <Progress value={processingProgress} className="w-full" />
|
|
|
+ <p className="text-sm text-muted-foreground text-center">
|
|
|
+ 正在处理文档... {Math.round(processingProgress)}%
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 预览区域 */}
|
|
|
+ {showPreview && selectedWordFile && (
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <FileText className="h-5 w-5" />
|
|
|
+ 文档预览
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ {selectedWordFile.name}
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <WordViewer file={selectedWordFile} />
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 图片映射预览 */}
|
|
|
+ {Object.keys(imageMappings).length > 0 && (
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <Image className="h-5 w-5" />
|
|
|
+ 图片映射预览
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 共 {getTotalImages()} 张图片，点击缩略图查看大图
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-4">
|
|
|
+ {Object.entries(imagePreviewUrls).map(([folder, images]) => (
|
|
|
+ <div key={folder} className="border rounded-lg p-4">
|
|
|
+ <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
|
|
|
+ <Package className="h-4 w-4" />
|
|
|
+ 文件夹 {folder} ({Object.keys(images).length} 张图片)
|
|
|
+ </h4>
|
|
|
+ <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
|
+ {Object.entries(images).map(([imageName, previewUrl]) => (
|
|
|
+ <div
|
|
|
+ key={imageName}
|
|
|
+ className="group relative cursor-pointer"
|
|
|
+ onClick={() => openImagePreview(previewUrl, imageName, folder)}
|
|
|
+ >
|
|
|
+ <div className="aspect-square rounded-lg overflow-hidden border hover:border-blue-500 transition-colors">
|
|
|
+ <img
|
|
|
+ src={previewUrl}
|
|
|
+ alt={imageName}
|
|
|
+ className="w-full h-full object-cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="mt-1">
|
|
|
+ <p className="text-xs text-center truncate text-gray-600 group-hover:text-blue-600">
|
|
|
+ {imageName}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-opacity rounded-lg flex items-center justify-center">
|
|
|
+ <ZoomIn className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 数据预览 */}
|
|
|
+ {excelData.length > 0 && (
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <FileSpreadsheet className="h-5 w-5" />
|
|
|
+ Excel数据预览
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 显示前5行数据，共 {excelData.length} 行
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="overflow-x-auto">
|
|
|
+ <table className="w-full text-sm">
|
|
|
+ <thead>
|
|
|
+ <tr className="border-b">
|
|
|
+ {Object.keys(excelData[0]).map(header => (
|
|
|
+ <th key={header} className="text-left p-2 font-medium">
|
|
|
+ {header}
|
|
|
+ </th>
|
|
|
+ ))}
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ {excelData.slice(0, 5).map((row, index) => (
|
|
|
+ <tr key={index} className="border-b">
|
|
|
+ {Object.values(row).map((value, valueIndex) => (
|
|
|
+ <td key={valueIndex} className="p-2">
|
|
|
+ {String(value)}
|
|
|
+ </td>
|
|
|
+ ))}
|
|
|
+ </tr>
|
|
|
+ ))}
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ {excelData.length > 5 && (
|
|
|
+ <p className="text-sm text-muted-foreground mt-2 text-center">
|
|
|
+ 还有 {excelData.length - 5} 行数据...
|
|
|
+ </p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 处理结果预览 */}
|
|
|
+ {processingResult && processingResult.generatedFiles.length > 0 && (
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <FileText className="h-5 w-5" />
|
|
|
+ 处理结果预览
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 预览第一个生成的文档
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <WordViewer file={processingResult.generatedFiles[0].content} />
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 处理结果 */}
|
|
|
+ {processingResult && (
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <CheckCircle className="h-5 w-5 text-green-500" />
|
|
|
+ 处理完成
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 共生成 {processingResult.total} 个文档
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-4">
|
|
|
+ <Button
|
|
|
+ onClick={downloadAllFiles}
|
|
|
+ className="w-full"
|
|
|
+ >
|
|
|
+ <DownloadCloud className="h-4 w-4 mr-2" />
|
|
|
+ 下载全部文档
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <div className="space-y-2 max-h-64 overflow-y-auto">
|
|
|
+ {processingResult.generatedFiles.map((file, index) => (
|
|
|
+ <div
|
|
|
+ key={index}
|
|
|
+ className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <p className="font-medium">{file.name}</p>
|
|
|
+ <p className="text-sm text-muted-foreground">
|
|
|
+ 包含 {Object.keys(file.fields).length} 个字段
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => downloadProcessedFile(file)}
|
|
|
+ >
|
|
|
+ <Download className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 使用说明 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>使用说明（增强版）</CardTitle>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-3 text-sm">
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-1">1. 准备Word模板</h4>
|
|
|
+ <p className="text-muted-foreground">
|
|
|
+ 使用 {'{字段名}'} 格式作为文本占位符，使用 {'{%图片名}'} 格式作为图片占位符
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-1">2. 准备Excel数据</h4>
|
|
|
+ <p className="text-muted-foreground">
|
|
|
+ Excel文件第一行为表头，列名应与Word模板中的字段名对应
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-1">3. 准备图片压缩包</h4>
|
|
|
+ <p className="text-muted-foreground">
|
|
|
+ 压缩包结构：第一层为序号文件夹（1,2,3...对应Excel行），第二层为图片文件（文件名对应模板中的图片名）
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-1">4. 图片命名规则</h4>
|
|
|
+ <p className="text-muted-foreground">
|
|
|
+ 例如：模板中使用 {'{%logo}'}，则图片文件应命名为 logo.jpg/png等
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 注意事项 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle className="flex items-center gap-2">
|
|
|
+ <AlertCircle className="h-5 w-5" />
|
|
|
+ 注意事项
|
|
|
+ </CardTitle>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-2 text-sm">
|
|
|
+ <p>• Word模板中的字段名必须与Excel表头完全匹配</p>
|
|
|
+ <p>• 图片文件名必须与模板中的图片占位符匹配（不含扩展名）</p>
|
|
|
+ <p>• 文件夹序号必须与Excel行号对应（第1行对应文件夹"1"）</p>
|
|
|
+ <p>• 如果图片不存在，对应位置将留空</p>
|
|
|
+ <p>• 支持jpg、jpeg、png、gif、bmp、webp格式图片</p>
|
|
|
+ <p>• 图片占位符使用 {'{%图片名%}'} 格式，如 {'{%logo%}'}</p>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 图片查看器模态框 */}
|
|
|
+ <Dialog open={selectedImage !== null} onOpenChange={closeImagePreview}>
|
|
|
+ <DialogContent className="max-w-4xl max-h-[90vh] p-0">
|
|
|
+ <DialogHeader className="px-6 py-4 border-b">
|
|
|
+ <DialogTitle className="flex items-center justify-between">
|
|
|
+ <span>图片预览</span>
|
|
|
+ <div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
|
+ <span>{selectedImage?.folder} / {selectedImage?.name}</span>
|
|
|
+ <span>({currentImageIndex + 1} / {allImages.length})</span>
|
|
|
+ </div>
|
|
|
+ </DialogTitle>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {selectedImage && (
|
|
|
+ <div className="relative">
|
|
|
+ <div className="flex items-center justify-center p-4">
|
|
|
+ <img
|
|
|
+ src={selectedImage.url}
|
|
|
+ alt={selectedImage.name}
|
|
|
+ className="max-w-full max-h-[70vh] object-contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 导航按钮 */}
|
|
|
+ {allImages.length > 1 && (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ className="absolute left-2 top-1/2 -translate-y-1/2"
|
|
|
+ onClick={() => navigateImage('prev')}
|
|
|
+ >
|
|
|
+ <ChevronLeft className="h-5 w-5" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ className="absolute right-2 top-1/2 -translate-y-1/2"
|
|
|
+ onClick={() => navigateImage('next')}
|
|
|
+ >
|
|
|
+ <ChevronRight className="h-5 w-5" />
|
|
|
+ </Button>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 底部信息 */}
|
|
|
+ <div className="px-6 py-3 border-t bg-gray-50">
|
|
|
+ <div className="flex items-center justify-between text-sm">
|
|
|
+ <div>
|
|
|
+ <span className="font-medium">文件名:</span> {selectedImage.name}
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => {
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = selectedImage.url;
|
|
|
+ a.download = selectedImage.name;
|
|
|
+ a.click();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Download className="h-4 w-4 mr-2" />
|
|
|
+ 下载图片
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
yourname