From 33f8d427958f8af1994cc3c726026517c26ad335 Mon Sep 17 00:00:00 2001
From: kckDeepak <kckdeepak29@gmail.com>
Date: Fri, 22 May 2026 15:45:37 +0530
Subject: [PATCH] Download report feature implemented

---
 frontend/src/api/report.js              |  8 +++++
 frontend/src/components/Step4Report.vue | 44 ++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/frontend/src/api/report.js b/frontend/src/api/report.js
index c89a67d8..d541a32f 100644
--- a/frontend/src/api/report.js
+++ b/frontend/src/api/report.js
@@ -42,6 +42,14 @@ export const getReport = (reportId) => {
   return service.get(`/api/report/${reportId}`)
 }
 
+/**
+ * Download report as Markdown file
+ * @param {string} reportId
+ */
+export const downloadReport = (reportId) => {
+  return service.get(`/api/report/${reportId}/download`, { responseType: 'blob' })
+}
+
 /**
  * 与 Report Agent 对话
  * @param {Object} data - { simulation_id, message, chat_history? }
diff --git a/frontend/src/components/Step4Report.vue b/frontend/src/components/Step4Report.vue
index 8e53ceb5..4bec1570 100644
--- a/frontend/src/components/Step4Report.vue
+++ b/frontend/src/components/Step4Report.vue
@@ -127,6 +127,16 @@
             </div>
           </div>
 
+          <!-- Download Button -->
+          <button v-if="isComplete" class="download-btn" @click="handleDownload">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="7 10 12 15 17 10"></polyline>
+              <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
+            <span>{{ $t('step4.downloadReport') || 'Download Report' }}</span>
+          </button>
+
           <!-- Next Step Button - 在完成后显示 -->
           <button v-if="isComplete" class="next-step-btn" @click="goToInteraction">
             <span>{{ $t('step4.goToInteraction') }}</span>
@@ -393,7 +403,7 @@
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, h, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { getAgentLog, getConsoleLog } from '../api/report'
+import { getAgentLog, getConsoleLog, downloadReport } from '../api/report'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -413,6 +423,16 @@ const goToInteraction = () => {
   }
 }
 
+const handleDownload = async () => {
+  const res = await downloadReport(props.reportId)
+  const url = URL.createObjectURL(new Blob([res.data]))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${props.reportId}.md`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
 // State
 const agentLogs = ref([])
 const consoleLogs = ref([])
@@ -3402,6 +3422,28 @@ watch(() => props.reportId, (newId) => {
   font-size: 14px;
 }
 
+.download-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: calc(100% - 40px);
+  margin: 4px 20px 0 20px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #D1FAE5;
+  background: #065F46;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.download-btn:hover {
+  background: #047857;
+}
+
 .next-step-btn {
   display: flex;
   align-items: center;