Enhance week report functionality to support multiple images per task. Updated validation rules and report generation logic to accommodate an array of image paths. Improved UI for image previews and added functionality for batch image uploads, ensuring a more flexible and user-friendly experience.

app/Http/Controllers/WeekReportController.php

@@ -30,10 +30,10 @@ class WeekReportController extends Controller
         try {
             $file = $request->file('image');
             $filename = time() . '_' . uniqid() . '.' . $file->getClientOriginalExtension();
-            
+
             // 存储到public目录
             $path = $file->storeAs('uploads', $filename, 'public');
-            
+
             return response()->json([
                 'success' => true,
                 'path' => $path,
@@ -54,11 +54,12 @@ class WeekReportController extends Controller
     {
         // 设置较长的执行时间，因为AI生成可能需要较长时间
         set_time_limit(300); // 5分钟
-        
+
         $request->validate([
             'tasks' => 'required|array|min:1',
             'tasks.*.description' => 'required|string|max:2000',
-            'tasks.*.image' => 'nullable|string',
+            'tasks.*.images' => 'nullable|array',          // 支持多图
+            'tasks.*.images.*' => 'nullable|string',       // 每张图片路径
             'week_start' => 'nullable|date',
             'week_end' => 'nullable|date',
             'author' => 'nullable|string|max:100',
@@ -80,7 +81,7 @@ class WeekReportController extends Controller
         try {
             // 调用千问API
             $reportContent = $this->callQwenApi($prompt);
-            
+
             // 插入图片到报告中
             $reportWithImages = $this->insertImagesToReport($reportContent, $tasks);
 
@@ -106,7 +107,10 @@ class WeekReportController extends Controller
         foreach ($tasks as $index => $task) {
             $num = $index + 1;
             $desc = trim($task['description']);
-            $hasImage = !empty($task['image']) ? '（有截图）' : '';
+            // 支持多图：检查 images 数组
+            $images = $task['images'] ?? [];
+            $imageCount = count(array_filter($images));
+            $hasImage = $imageCount > 0 ? "（有{$imageCount}张截图）" : '';
             $list[] = "{$num}. {$desc}{$hasImage}";
         }
         return implode("\n", $list);
@@ -120,7 +124,7 @@ class WeekReportController extends Controller
         if (empty($tasks)) {
             return '';
         }
-        
+
         $list = [];
         foreach ($tasks as $index => $desc) {
             if (!empty(trim($desc))) {
@@ -137,18 +141,18 @@ class WeekReportController extends Controller
     private function buildPrompt(string $taskList, string $weekStart, string $weekEnd, string $author, string $nextWeekList = ''): string
     {
         $authorInfo = $author ? "作者：{$author}" : "";
-        
+
         // 根据是否有下周计划来调整要求
         $nextWeekSection = '';
         $nextWeekRequirement = '';
-        
+
         if (!empty(trim($nextWeekList))) {
             $nextWeekSection = "\n\n下周计划任务：\n{$nextWeekList}";
             $nextWeekRequirement = "\n8. 添加\"下周工作计划\"部分，简要列出计划要做的事项";
         } else {
             $nextWeekRequirement = "\n8. 不要添加下周工作计划部分";
         }
-        
+
         return <<<PROMPT
 你是一位经验丰富的职场人士，擅长撰写简洁实用的工作周报。请根据以下任务信息，用自然、朴实的语言写一份周报。
 
@@ -165,10 +169,12 @@ class WeekReportController extends Controller
 4. 不要使用"高效完成"、"圆满完成"、"取得显著成效"等套话
 5. 每个任务用简短的一两句话描述即可，说清楚做了什么
 6. 可以按项目或类型简单分组，但不要过度分类
-7. 【重要】只有标注了"（有截图）"的任务才添加"[图片占位符-任务X]"，其他任务不要添加{$nextWeekRequirement}
-9. 总结部分一两句话概括即可，不要写得太官方
+7. 【重要】只有标注了"（有截图）"的任务才在该任务描述后紧接着添加"[图片占位符-任务X]"（X是原始任务序号），其他任务不要添加{$nextWeekRequirement}
+9. 【重要】不要添加任何总结、小结、回顾等内容
 10. 不要出现具体的完成时间、耗时等信息
 11. 整体篇幅适中，不要太长
+12. 【重要】图片占位符的序号要与原始任务序号的序号一致，不要出现错位
+
 
 直接输出周报内容：
 PROMPT;
@@ -215,7 +221,7 @@ PROMPT;
         }
 
         $data = $response->json();
-        
+
         if (!isset($data['choices'][0]['message']['content'])) {
             throw new \Exception('API返回数据格式错误');
         }
@@ -224,13 +230,14 @@ PROMPT;
     }
 
     /**
-     * 在报告中插入图片
+     * 在报告中插入图片（支持多图）
      */
     private function insertImagesToReport(string $report, array $tasks): string
     {
+        // 首先尝试替换AI生成的占位符
         foreach ($tasks as $index => $task) {
             $num = $index + 1;
-            
+
             // 支持多种占位符格式
             $placeholders = [
                 "[图片占位符-任务{$num}]",
@@ -240,12 +247,23 @@ PROMPT;
                 "【图片占位符-{$num}】",
                 "【图片占位符{$num}】",
             ];
-            
-            if (!empty($task['image'])) {
-                $imageUrl = asset('storage/' . $task['image']);
-                $imageMarkdown = "\n\n![任务{$num}截图]({$imageUrl})\n";
+
+            // 获取该任务的所有图片
+            $images = $task['images'] ?? [];
+            $validImages = array_filter($images);
+
+            if (!empty($validImages)) {
+                // 构建多图Markdown
+                $imagesMarkdown = "\n\n";
+                foreach ($validImages as $imgIndex => $imagePath) {
+                    $imageUrl = asset('storage/' . $imagePath);
+                    $imgNum = $imgIndex + 1;
+                    $imagesMarkdown .= "![任务{$num}-截图{$imgNum}]({$imageUrl})\n\n";
+                }
+
+                // 替换占位符
                 foreach ($placeholders as $placeholder) {
-                    $report = str_replace($placeholder, $imageMarkdown, $report);
+                    $report = str_replace($placeholder, $imagesMarkdown, $report);
                 }
             } else {
                 // 没有图片时移除所有占位符
@@ -254,15 +272,15 @@ PROMPT;
                 }
             }
         }
-        
+
         // 清理所有未使用的占位符（各种格式）
         $report = preg_replace('/\[图片占位符[-]?任务?\d*\]/', '', $report);
         $report = preg_replace('/【图片占位符[-]?任务?\d*】/', '', $report);
         $report = preg_replace('/\[?图片占位符[-—]?\d+\]?/', '', $report);
-        
+
         // 清理可能产生的多余空行
         $report = preg_replace('/\n{3,}/', "\n\n", $report);
-        
+
         return $report;
     }
 
@@ -309,7 +327,7 @@ PROMPT;
         $pdf->setPaper('A4', 'portrait');
         $pdf->setOption('isRemoteEnabled', true);
         $pdf->setOption('defaultFont', 'sans-serif');
-        
+
         return $pdf->download($filename);
     }
 

resources/views/weekreport/index.blade.php

@@ -6,8 +6,8 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>智能周报生成器</title>
     <link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.css" rel="stylesheet">
-    <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.1.6/marked.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <script src="https://unpkg.com/marked@9.1.6/marked.min.js"></script>
+    <script src="https://unpkg.com/html2pdf.js@0.10.1/dist/html2pdf.bundle.min.js"></script>
     <style>
         
         :root {
@@ -353,24 +353,32 @@
             display: none;
         }
         
-        .image-preview {
-            position: relative;
+        .image-preview-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
             margin-top: 10px;
         }
         
-        .image-preview img {
-            max-width: 100%;
-            max-height: 150px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--border);
+        .image-preview-item {
+            position: relative;
+            display: inline-block;
         }
         
-        .image-preview .remove-image {
+        .image-preview-item img {
+            max-width: 120px;
+            max-height: 100px;
+            border-radius: var(--radius-sm);
+            border: 1px solid var(--border);
+            object-fit: cover;
+        }
+        
+        .image-preview-item .remove-image {
             position: absolute;
             top: -8px;
             right: -8px;
-            width: 24px;
-            height: 24px;
+            width: 22px;
+            height: 22px;
             background: var(--danger);
             border: none;
             border-radius: 50%;
@@ -379,14 +387,26 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 0.9rem;
+            font-size: 0.8rem;
             transition: transform 0.2s ease;
         }
         
-        .image-preview .remove-image:hover {
+        .image-preview-item .remove-image:hover {
             transform: scale(1.1);
         }
         
+        .image-count-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 8px;
+            background: var(--primary);
+            color: white;
+            border-radius: 10px;
+            font-size: 0.75rem;
+            margin-left: 8px;
+        }
+        
         /* 按钮样式 */
         .btn {
             display: inline-flex;
@@ -1140,8 +1160,8 @@
                         tasks.push({
                             id: Date.now() + Math.random(),
                             description: task.description,
-                            image: null,
-                            imagePath: '',
+                            images: [],
+                            imagePaths: [],
                             zentaoId: task.id
                         });
                     });
@@ -1235,8 +1255,8 @@
             tasks.push({
                 id: taskId,
                 description: '',
-                image: null,
-                imagePath: ''
+                images: [],      // 支持多图
+                imagePaths: []   // 对应的URL列表
             });
             renderTasks();
             updateTaskCount();
@@ -1260,11 +1280,35 @@
             container.innerHTML = '';
             
             tasks.forEach((task, index) => {
+                // 生成多图预览HTML
+                let imagesPreviewHtml = '';
+                if (task.imagePaths && task.imagePaths.length > 0) {
+                    imagesPreviewHtml = `
+                        <div class="image-preview-list">
+                            ${task.imagePaths.map((url, imgIndex) => `
+                                <div class="image-preview-item">
+                                    <img src="${url}" alt="截图${imgIndex + 1}">
+                                    <button class="remove-image" onclick="removeImage(${task.id}, ${imgIndex})">
+                                        <i class="ri-close-line"></i>
+                                    </button>
+                                </div>
+                            `).join('')}
+                        </div>
+                    `;
+                }
+                
+                const imageCountBadge = task.imagePaths && task.imagePaths.length > 0 
+                    ? `<span class="image-count-badge"><i class="ri-image-line"></i>${task.imagePaths.length}</span>` 
+                    : '';
+                
                 const taskEl = document.createElement('div');
                 taskEl.className = 'task-item';
                 taskEl.innerHTML = `
                     <div class="task-header">
-                        <span class="task-number">${index + 1}</span>
+                        <div style="display: flex; align-items: center;">
+                            <span class="task-number">${index + 1}</span>
+                            ${imageCountBadge}
+                        </div>
                         <button class="task-delete" onclick="deleteTask(${task.id})" title="删除任务">
                             <i class="ri-delete-bin-line"></i>
                         </button>
@@ -1282,19 +1326,12 @@
                              ondragover="handleDragOver(event, this)"
                              ondragleave="handleDragLeave(event, this)"
                              ondrop="handleDrop(event, ${task.id}, this)">
-                            <input type="file" id="image-input-${task.id}" accept="image/*" 
+                            <input type="file" id="image-input-${task.id}" accept="image/*" multiple
                                    onchange="handleImageSelect(${task.id}, this)" hidden>
                             <i class="ri-image-add-line"></i>
-                            <span>点击或拖拽上传任务截图（可选）</span>
+                            <span>点击或拖拽上传任务截图（支持多张，可选）</span>
                         </div>
-                        ${task.imagePath ? `
-                            <div class="image-preview">
-                                <img src="${task.imagePath}" alt="任务截图">
-                                <button class="remove-image" onclick="removeImage(${task.id})">
-                                    <i class="ri-close-line"></i>
-                                </button>
-                            </div>
-                        ` : ''}
+                        ${imagesPreviewHtml}
                     </div>
                 `;
                 container.appendChild(taskEl);
@@ -1323,56 +1360,76 @@
             e.preventDefault();
             el.classList.remove('dragover');
             const files = e.dataTransfer.files;
-            if (files.length > 0 && files[0].type.startsWith('image/')) {
-                uploadImage(taskId, files[0]);
+            // 支持拖拽多张图片
+            const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
+            if (imageFiles.length > 0) {
+                uploadImages(taskId, imageFiles);
             }
         }
         
-        // 选择图片
+        // 选择图片（支持多选）
         function handleImageSelect(taskId, input) {
             if (input.files.length > 0) {
-                uploadImage(taskId, input.files[0]);
+                uploadImages(taskId, Array.from(input.files));
             }
         }
         
-        // 上传图片
-        async function uploadImage(taskId, file) {
-            const formData = new FormData();
-            formData.append('image', file);
-            
-            try {
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': csrfToken
-                    },
-                    body: formData
-                });
-                
-                const data = await response.json();
-                
-                if (data.success) {
-                    const task = tasks.find(t => t.id === taskId);
-                    if (task) {
-                        task.image = data.path;
-                        task.imagePath = data.url;
-                        renderTasks();
-                        showToast('图片上传成功', 'success');
-                    }
-                } else {
-                    showToast(data.message || '图片上传失败', 'error');
-                }
-            } catch (error) {
-                showToast('图片上传失败: ' + error.message, 'error');
-            }
-        }
-        
-        // 移除图片
-        function removeImage(taskId) {
+        // 批量上传图片
+        async function uploadImages(taskId, files) {
             const task = tasks.find(t => t.id === taskId);
-            if (task) {
-                task.image = null;
-                task.imagePath = '';
+            if (!task) return;
+            
+            // 初始化数组（兼容旧数据）
+            if (!task.images) task.images = [];
+            if (!task.imagePaths) task.imagePaths = [];
+            
+            let successCount = 0;
+            let failCount = 0;
+            
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('image', file);
+                
+                try {
+                    const response = await fetch('/upload', {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: formData
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        task.images.push(data.path);
+                        task.imagePaths.push(data.url);
+                        successCount++;
+                    } else {
+                        failCount++;
+                    }
+                } catch (error) {
+                    failCount++;
+                    console.error('图片上传失败:', error);
+                }
+            }
+            
+            renderTasks();
+            
+            if (successCount > 0) {
+                showToast(`成功上传 ${successCount} 张图片`, 'success');
+            }
+            if (failCount > 0) {
+                showToast(`${failCount} 张图片上传失败`, 'error');
+            }
+        }
+        
+        // 移除指定索引的图片
+        function removeImage(taskId, imageIndex) {
+            const task = tasks.find(t => t.id === taskId);
+            if (task && task.images && task.imagePaths) {
+                task.images.splice(imageIndex, 1);
+                task.imagePaths.splice(imageIndex, 1);
                 renderTasks();
             }
         }
@@ -1403,7 +1460,7 @@
                     body: JSON.stringify({
                         tasks: validTasks.map(t => ({
                             description: t.description,
-                            image: t.image
+                            images: t.images || []  // 支持多图
                         })),
                         week_start: weekStart,
                         week_end: weekEnd,
@@ -1435,7 +1492,20 @@
             document.getElementById('preview-placeholder').style.display = 'none';
             const previewEl = document.getElementById('markdown-preview');
             previewEl.style.display = 'block';
-            previewEl.innerHTML = marked.parse(markdown);
+            
+            // 检查 marked 是否可用
+            if (typeof marked !== 'undefined') {
+                previewEl.innerHTML = marked.parse(markdown);
+            } else {
+                // 简单的Markdown转换
+                previewEl.innerHTML = markdown
+                    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                    .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+                    .replace(/\*(.*)\*/gim, '<em>$1</em>')
+                    .replace(/\n/gim, '<br>');
+            }
             
             document.getElementById('download-buttons').style.display = 'flex';
             document.getElementById('copy-btn').disabled = false;
@@ -1517,103 +1587,90 @@
             document.querySelector('.loading-text').textContent = '正在生成PDF...';
             
             try {
-                // 创建临时容器用于PDF生成
-                const tempDiv = document.createElement('div');
-                tempDiv.id = 'pdf-content';
-                tempDiv.innerHTML = `
-                    <div class="pdf-wrapper">
-                        ${marked.parse(generatedReport)}
-                    </div>
-                `;
-                tempDiv.style.cssText = `
-                    position: absolute;
-                    left: -9999px;
-                    top: 0;
-                    width: 210mm;
-                    background: white;
-                    font-family: "Microsoft YaHei", "SimHei", "PingFang SC", -apple-system, sans-serif;
-                    font-size: 12pt;
-                    line-height: 1.6;
-                    color: #333;
-                `;
+                // 转换Markdown为HTML
+                let htmlContent = '';
+                if (typeof marked !== 'undefined') {
+                    htmlContent = marked.parse(generatedReport);
+                } else {
+                    htmlContent = generatedReport
+                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                        .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+                        .replace(/\*(.*)\*/gim, '<em>$1</em>')
+                        .replace(/\n/gim, '<br>');
+                }
                 
-                // 添加内联样式
-                const style = document.createElement('style');
-                style.textContent = `
-                    #pdf-content .pdf-wrapper {
-                        padding: 15mm 20mm;
-                        box-sizing: border-box;
-                    }
-                    #pdf-content h1 {
-                        font-size: 18pt;
-                        color: #1a1a1a;
-                        border-bottom: 2px solid #4a90d9;
-                        padding-bottom: 8px;
-                        margin: 0 0 15px 0;
-                    }
-                    #pdf-content h2 {
-                        font-size: 14pt;
-                        color: #2c3e50;
-                        margin: 20px 0 10px 0;
-                        padding-left: 10px;
-                        border-left: 4px solid #4a90d9;
-                    }
-                    #pdf-content h3 {
-                        font-size: 12pt;
-                        color: #34495e;
-                        margin: 15px 0 8px 0;
-                    }
-                    #pdf-content p {
-                        margin: 0 0 10px 0;
-                        text-align: justify;
-                    }
-                    #pdf-content ul, #pdf-content ol {
-                        margin: 0 0 10px 20px;
-                        padding: 0;
-                    }
-                    #pdf-content li {
-                        margin-bottom: 5px;
-                    }
-                    #pdf-content img {
-                        max-width: 100%;
-                        height: auto;
-                        margin: 10px 0;
-                        border: 1px solid #ddd;
-                        border-radius: 4px;
-                    }
-                    #pdf-content strong {
-                        color: #2c3e50;
-                    }
-                    #pdf-content blockquote {
-                        margin: 10px 0;
-                        padding: 10px 15px;
-                        border-left: 4px solid #4a90d9;
-                        background: #f8f9fa;
-                    }
-                `;
-                tempDiv.prepend(style);
+                // 使用新窗口打印方式生成PDF
+                const printWindow = window.open('', '_blank');
+                printWindow.document.write(`
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <meta charset="UTF-8">
+                        <title>周报_${document.getElementById('week-start').value}</title>
+                        <style>
+                            @media print {
+                                body { margin: 0; padding: 20mm; }
+                            }
+                            body {
+                                font-family: "Microsoft YaHei", "SimHei", "PingFang SC", sans-serif;
+                                font-size: 12pt;
+                                line-height: 1.8;
+                                color: #333;
+                                padding: 20mm;
+                                max-width: 210mm;
+                                margin: 0 auto;
+                                background: white;
+                            }
+                            h1 {
+                                font-size: 18pt;
+                                color: #1a1a1a;
+                                border-bottom: 2px solid #3b82f6;
+                                padding-bottom: 8px;
+                                margin: 0 0 16px 0;
+                            }
+                            h2 {
+                                font-size: 14pt;
+                                color: #1e40af;
+                                margin: 20px 0 10px 0;
+                                padding-left: 10px;
+                                border-left: 4px solid #3b82f6;
+                            }
+                            h3 {
+                                font-size: 12pt;
+                                color: #374151;
+                                margin: 16px 0 8px 0;
+                                font-weight: 600;
+                            }
+                            p { margin: 0 0 10px 0; }
+                            ul, ol { margin: 0 0 10px 20px; padding: 0; }
+                            li { margin-bottom: 5px; }
+                            strong { color: #1e40af; }
+                            img { max-width: 100%; height: auto; margin: 10px 0; }
+                            blockquote {
+                                margin: 10px 0;
+                                padding: 10px 15px;
+                                border-left: 4px solid #3b82f6;
+                                background: #f0f9ff;
+                            }
+                        </style>
+                    </head>
+                    <body>
+                        ${htmlContent}
+                        <script>
+                            window.onload = function() {
+                                setTimeout(function() {
+                                    window.print();
+                                }, 300);
+                            };
+                        <\/script>
+                    </body>
+                    </html>
+                `);
+                printWindow.document.close();
                 
-                document.body.appendChild(tempDiv);
-                
-                const opt = {
-                    margin: 0,
-                    filename: `周报_${document.getElementById('week-start').value}.pdf`,
-                    image: { type: 'jpeg', quality: 0.98 },
-                    html2canvas: { 
-                        scale: 2, 
-                        useCORS: true, 
-                        logging: false,
-                        width: tempDiv.querySelector('.pdf-wrapper').scrollWidth,
-                        windowWidth: tempDiv.querySelector('.pdf-wrapper').scrollWidth
-                    },
-                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
-                    pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
-                };
-                
-                await html2pdf().set(opt).from(tempDiv.querySelector('.pdf-wrapper')).save();
-                
-                document.body.removeChild(tempDiv);
-                showToast('PDF 下载成功', 'success');
+                showToast('请在打印对话框中选择"另存为PDF"', 'info');
             } catch (error) {
                 showToast('下载失败: ' + error.message, 'error');
                 console.error('PDF生成错误:', error);