diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index b821bcd..b5092c9 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -581,10 +581,7 @@ $primary-color: #5e7ce0;
 .delay-200 { animation-delay: 200ms; }
 .delay-300 { animation-delay: 300ms; }
 
-
-// ----------------------------------------------------
-// 基础样式 (保持不变)
-// ----------------------------------------------------
+// 基础样式
 .home-container {
   width: 100%;
   height: 100%;
@@ -633,7 +630,7 @@ $primary-color: #5e7ce0;
       justify-content: space-between;
       align-items: center;
       padding: 12px;
-      transition: all 0.3s ease; // 添加过渡
+      transition: all 0.3s ease;
 
       &:hover {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -659,7 +656,7 @@ $primary-color: #5e7ce0;
         justify-content: center;
         align-items: center;
         gap: 8px;
-        transition: color 0.3s ease; // 添加过渡
+        transition: color 0.3s ease;
 
         &:hover {
           color: $primary-color;
@@ -689,7 +686,7 @@ $primary-color: #5e7ce0;
 .glow-border {
   border: 1px solid var(--devui-form-control-line, #d7d8da);
   border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
-  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15)); // 调整光晕颜色透明度
+  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15));
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -962,13 +959,13 @@ $primary-light: #e8f0fe;
   }
 }
 
-/* 时间线样式调整，保持与原有布局一致 */
+/* 时间线样式 */
 :deep(.devui-timeline) {
-  --devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
+  --devui-timeline-item-padding: 0 0 24px 0;
 }
 
 :deep(.devui-timeline-item-time) {
-  /* 年份标签样式，与原有红色标签保持一致 */
+  /* 年份标签样式 */
   background-color: #fee2e2; /* 浅红背景 */
   color: #dc2626; /* 红色文字 */
   font-size: 12px;
diff --git a/src/views/Jyh/TestingCenter/index.vue b/src/views/Jyh/TestingCenter/index.vue
index afd9b00..8c99dac 100644
--- a/src/views/Jyh/TestingCenter/index.vue
+++ b/src/views/Jyh/TestingCenter/index.vue
@@ -8,11 +8,13 @@
 
   <div class="page-wrap">
     <!-- 检测方式选择区域 -->
-    <Card class="upload-card">
-      <div class="upload-title">选择检测方式</div>
+    <Card class="upload-card animate-fade-in">
+      <div class="upload-title">
+        <i class="fa fa-shield text-primary mr-2"></i>选择检测方式
+      </div>
 
       <div class="upload-tabs">
-        <d-tabs v-model="activeUploadType" @change="handleUploadTypeChange">
+        <d-tabs v-model="activeUploadType" @change="handleUploadTypeChange" :animated="true">
           <d-tab id="file" title="上传文件">
             <div class="upload-area" @click="triggerFileUpload" :class="{ dragging: isDragging }">
               <input
@@ -24,19 +26,22 @@
                 @dragleave.prevent="isDragging = false"
                 @drop.prevent="handleFileDrop"
               >
-              <i class="fa fa-cloud-upload text-primary text-4xl mb-2"></i>
-              <p>点击或拖拽文件到此处上传</p>
-              <p class="text-sm text-gray-medium">支持格式：.zip, .tar, .gz, .json (最大100MB)</p>
+              <div class="upload-icon-container">
+                <i class="fa fa-cloud-upload text-primary text-4xl mb-2 transition-transform hover:scale-110"></i>
+              </div>
+              <p class="upload-text">点击或拖拽文件到此处上传</p>
+              <p class="text-sm text-gray-medium mt-1">支持格式：.zip, .tar, .gz, .json (最大100MB)</p>
             </div>
           </d-tab>
 
           <d-tab id="url" title="输入URL">
-            <d-form layout="horizontal">
+            <d-form layout="horizontal" class="form-container">
               <d-form-item field="scanUrl" label="检测URL">
                 <d-input
                   v-model="scanUrl"
                   placeholder="请输入需要检测的URL地址（例如：https://example.com）"
                   style="width: 100%"
+                  class="transition-all"
                 ></d-input>
               </d-form-item>
               <d-form-item>
@@ -44,21 +49,23 @@
                   @click="startUrlScan"
                   variant="solid"
                   :disabled="!scanUrl"
+                  class="btn-primary transform transition-all hover:scale-105"
                 >
-                  开始检测
+                  <i class="fa fa-play-circle mr-1"></i>开始检测
                 </d-button>
               </d-form-item>
             </d-form>
           </d-tab>
 
           <d-tab id="sbom" title="输入SBOM">
-            <d-form layout="horizontal">
+            <d-form layout="horizontal" class="form-container">
               <d-form-item field="sbomContent" label="SBOM内容">
                 <d-textarea
                   v-model="sbomContent"
                   placeholder="请输入SBOM内容（支持SPDX或CycloneDX格式）"
                   :rows="8"
                   style="width: 100%"
+                  class="transition-all"
                 ></d-textarea>
               </d-form-item>
               <d-form-item>
@@ -66,8 +73,9 @@
                   @click="startSbomScan"
                   variant="solid"
                   :disabled="!sbomContent"
+                  class="btn-primary transform transition-all hover:scale-105"
                 >
-                  开始检测
+                  <i class="fa fa-play-circle mr-1"></i>开始检测
                 </d-button>
               </d-form-item>
             </d-form>
@@ -77,12 +85,14 @@
     </Card>
 
     <!-- 检测状态展示 -->
-    <Card class="mt-4" v-if="currentScan">
-
-      <div class="scan-status-title">
-        <h3>当前检测状态</h3>
-        <div class="upload-title">当前检测状态</div>
-        <d-tag :color="getStatusColor(currentScan.status)">{{ getStatusText(currentScan.status) }}</d-tag>
+    <Card class="mt-4 scan-status-card animate-fade-in delay-100" v-if="currentScan">
+      <div class="scan-status-header">
+        <div class="scan-status-title">
+          <i class="fa fa-tasks text-primary mr-2"></i>当前检测状态
+        </div>
+        <d-tag :color="getStatusColor(currentScan.status)" class="status-tag">
+          {{ getStatusText(currentScan.status) }}
+        </d-tag>
       </div>
 
       <div class="scan-progress mt-4">
@@ -90,14 +100,16 @@
           :percentage="currentScan.progress"
           :status="getProgressStatus(currentScan.status)"
           stroke-width="6"
+          class="progress-bar"
         ></d-progress>
-        <p class="progress-text mt-2">
-          {{ currentScan.progress }}% 完成 - {{ currentScan.currentStep || '准备开始检测' }}
+        <p class="progress-text mt-2 flex items-center">
+          <span class="progress-percentage">{{ currentScan.progress }}% 完成</span>
+          <span class="progress-step ml-2"> - {{ currentScan.currentStep || '准备开始检测' }}</span>
         </p>
       </div>
 
       <div class="scan-details mt-4" v-if="currentScan.status !== 'pending'">
-        <d-descriptions column="1" bordered>
+        <d-descriptions column="1" bordered class="details-table">
           <d-description-item term="检测目标">{{ currentScan.target }}</d-description-item>
           <d-description-item term="开始时间">{{ formatTime(currentScan.startTime) }}</d-description-item>
           <d-description-item term="预计完成时间" v-if="currentScan.status === 'scanning'">
@@ -113,19 +125,28 @@
       </div>
 
       <div class="scan-actions mt-4" v-if="currentScan.status === 'completed'">
-        <d-button @click="showReportDetails(currentScan)" variant="solid">查看报告详情</d-button>
+        <d-button
+          @click="showReportDetails(currentScan)"
+          variant="solid"
+          class="transform transition-all hover:scale-105"
+        >
+          <i class="fa fa-file-text-o mr-1"></i>查看报告详情
+        </d-button>
       </div>
     </Card>
 
     <!-- 历史检测记录 -->
-    <Card class="mt-4">
-      <div class="upload-title">历史检测记录</div>
-      <div class="history-title">
+    <Card class="mt-4 history-card animate-fade-in delay-200">
+      <div class="history-header">
+        <div class="upload-title">
+          <i class="fa fa-history text-primary mr-2"></i>历史检测记录
+        </div>
         <d-select
-          style="width: 30%"
+          style="width: 200px"
           v-model="historyFilter"
           :options="filterOptions"
           placeholder="筛选状态"
+          class="history-filter"
         ></d-select>
       </div>
 
@@ -135,21 +156,30 @@
         :data="filteredHistory"
         v-if="filteredHistory.length > 0"
         table-layout="auto"
+        row-hover
       >
         <d-column type="index" width="40"></d-column>
         <d-column field="target" header="检测目标" :width="300">
           <template #default="scope">
-            <div class="target-text">{{ scope.row.target }}</div>
+            <div class="target-text">
+              <i :class="getTargetIcon(scope.row.type)" class="mr-1 text-primary"></i>
+              {{ scope.row.target }}
+            </div>
           </template>
         </d-column>
         <d-column field="type" header="检测类型">
           <template #default="scope">
-            <d-tag :type="getTypeColor(scope.row.type)">{{ getTypeText(scope.row.type) }}</d-tag>
+            <d-tag :type="getTypeColor(scope.row.type)" class="type-tag">{{ getTypeText(scope.row.type) }}</d-tag>
           </template>
         </d-column>
         <d-column field="status" header="状态">
           <template #default="scope">
-            <d-tag :type="getStatusColor(scope.row.status)">{{ getStatusText(scope.row.status) }}</d-tag>
+            <d-tag :type="getStatusColor(scope.row.status)" class="status-tag">
+              <span v-if="scope.row.status === 'scanning'" class="loading-dot">
+                <i class="fa fa-circle-o-notch fa-spin mr-1"></i>
+              </span>
+              {{ getStatusText(scope.row.status) }}
+            </d-tag>
           </template>
         </d-column>
         <d-column field="startTime" header="开始时间">
@@ -157,23 +187,23 @@
         </d-column>
         <d-column field="riskLevel" header="风险等级">
           <template #default="scope">
-            <d-tag :color="getRiskColor(scope.row.riskLevel)">{{ scope.row.riskLevel || '无风险' }}</d-tag>
+            <d-tag :color="getRiskColor(scope.row.riskLevel)" class="risk-tag">{{ scope.row.riskLevel || '无风险' }}</d-tag>
           </template>
         </d-column>
         <d-column header="操作" fixed-right="0px" width="130">
           <template #default="scope">
-            <a class="devui-link" @click="showReportDetails(scope.row)" v-if="scope.row.status === 'completed'">
-              查看报告
+            <a class="devui-link operation-link" @click="showReportDetails(scope.row)" v-if="scope.row.status === 'completed'">
+              <i class="fa fa-eye mr-1"></i>查看报告
             </a>
-            <a class="devui-link" @click="rescan(scope.row)" v-else-if="scope.row.status === 'failed'">
-              重新检测
+            <a class="devui-link operation-link" @click="rescan(scope.row)" v-else-if="scope.row.status === 'failed'">
+              <i class="fa fa-refresh mr-1"></i>重新检测
             </a>
             <span v-else>--</span>
           </template>
         </d-column>
       </d-table>
 
-      <NoData v-else :small="false"></NoData>
+      <NoData v-else :small="false" class="no-data"></NoData>
 
       <div class="mt-20 mb-20 flex justify-end" v-if="filteredHistory.length > 0">
         <d-pagination
@@ -188,6 +218,7 @@
           total-item-text="总计"
           @page-index-change="getHistoryList"
           @page-size-change="getHistoryList"
+          class="pagination"
         />
       </div>
     </Card>
@@ -198,6 +229,9 @@
     v-model="reportVisible"
     :width="800"
     title="检测报告详情"
+    :show-close="true"
+    class="report-drawer"
+    @open="handleDrawerOpen"
   >
     <ReportDetail
       :report-data="currentReport"
@@ -207,7 +241,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted,onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import NoData from '@/components/NoData/NoData.vue';
 import ReportDetail from './ReportDetail.vue';
@@ -225,23 +259,17 @@ const sbomContent = ref('');
 const isDragging = ref(false);
 
 // 检测状态相关
-// 替换原有的 const currentScan = ref(null);
 const currentScan = ref({
-  taskId: 'scan_1689234567890', // 任务唯一标识
-  type: 'file', // 检测类型：file/url/sbom
-  target: 'app-release-v2.1.apk', // 检测目标
-  status: 'scanning', // 任务状态：pending/scanning/completed/failed
-  progress: 65, // 检测进度（0-100）
-  startTime: '2024-07-15T10:30:22', // 开始时间
-  estimatedCompleteTime: '2024-07-15T10:35:10', // 预计完成时间
-  currentStep: '执行漏洞深度扫描', // 当前执行步骤
-  totalChecks: 42, // 总检测项数
-  completedChecks: 27, // 已完成检测项数
-  // 以下字段在状态为 completed 时存在
-  // riskStats: { critical: 1, high: 3, medium: 2, low: 5 },
-  // completeTime: '2024-07-15T10:34:55',
-  // 以下字段在状态为 failed 时存在
-  // errorMsg: '检测引擎连接超时'
+  taskId: 'scan_1689234567890',
+  type: 'file',
+  target: 'app-release-v2.1.apk',
+  status: 'scanning',
+  progress: 65,
+  startTime: '2024-07-15T10:30:22',
+  estimatedCompleteTime: '2024-07-15T10:35:10',
+  currentStep: '执行漏洞深度扫描',
+  totalChecks: 42,
+  completedChecks: 27,
 });
 const scanInterval = ref(null);
 const loading = ref(false);
@@ -254,9 +282,7 @@ const pager = ref({
 });
 
 // 历史记录相关
-// 模拟历史检测记录数据（可直接替换到组件的 historyList 初始化中）
 const historyList = ref([
-  // 文件检测 - 已完成（高危）
   {
     taskId: 'scan_1720012345678',
     target: 'enterprise-app-v3.2.1.zip',
@@ -265,11 +291,10 @@ const historyList = ref([
     riskLevel: '高危',
     startTime: '2024-07-01T09:15:30',
     completeTime: '2024-07-01T09:28:45',
-    duration: 810000, // 13分30秒
+    duration: 810000,
     riskStats: { critical: 1, high: 4, medium: 3, low: 2 },
-    fileSize: 28560000 // 约28.5MB
+    fileSize: 28560000
   },
-  // URL检测 - 已完成（低危）
   {
     taskId: 'scan_1720015678901',
     target: 'https://internal-api.company.com',
@@ -278,10 +303,9 @@ const historyList = ref([
     riskLevel: '低危',
     startTime: '2024-07-01T14:30:22',
     completeTime: '2024-07-01T14:32:10',
-    duration: 108000, // 1分48秒
+    duration: 108000,
     riskStats: { critical: 0, high: 0, medium: 0, low: 1 }
   },
-  // SBOM检测 - 失败
   {
     taskId: 'scan_1720018901234',
     target: 'SBOM-cyclonedx-project.json',
@@ -290,10 +314,9 @@ const historyList = ref([
     riskLevel: '-',
     startTime: '2024-07-02T10:05:18',
     completeTime: '2024-07-02T10:06:03',
-    duration: 45000, // 45秒
+    duration: 45000,
     errorMsg: 'SBOM格式错误：缺少components字段'
   },
-  // 文件检测 - 已完成（中危）
   {
     taskId: 'scan_1720022345678',
     target: 'mobile-client-v2.8.apk',
@@ -302,11 +325,10 @@ const historyList = ref([
     riskLevel: '中危',
     startTime: '2024-07-02T16:40:55',
     completeTime: '2024-07-02T16:52:30',
-    duration: 695000, // 11分35秒
+    duration: 695000,
     riskStats: { critical: 0, high: 0, medium: 2, low: 5 },
-    fileSize: 42800000 // 约42.8MB
+    fileSize: 42800000
   },
-  // URL检测 - 进行中
   {
     taskId: 'scan_1720025678901',
     target: 'https://admin-portal.company.com',
@@ -317,7 +339,6 @@ const historyList = ref([
     progress: 65,
     currentStep: '检测API接口漏洞'
   },
-  // SBOM检测 - 已完成（无风险）
   {
     taskId: 'scan_1720028901234',
     target: 'SBOM-spdx-v2.3.json',
@@ -326,10 +347,9 @@ const historyList = ref([
     riskLevel: '无风险',
     startTime: '2024-07-03T11:30:00',
     completeTime: '2024-07-03T11:31:20',
-    duration: 80000, // 1分20秒
+    duration: 80000,
     riskStats: { critical: 0, high: 0, medium: 0, low: 0 }
   },
-  // 文件检测 - 失败
   {
     taskId: 'scan_1720032345678',
     target: 'legacy-system.tar.gz',
@@ -338,11 +358,10 @@ const historyList = ref([
     riskLevel: '-',
     startTime: '2024-07-03T15:20:40',
     completeTime: '2024-07-03T15:21:10',
-    duration: 30000, // 30秒
+    duration: 30000,
     errorMsg: '文件损坏：无法解压缩归档内容',
-    fileSize: 157000000 // 约157MB
+    fileSize: 157000000
   },
-  // URL检测 - 已完成（致命）
   {
     taskId: 'scan_1720035678901',
     target: 'https://old-website.company.com',
@@ -351,10 +370,9 @@ const historyList = ref([
     riskLevel: '致命',
     startTime: '2024-07-04T09:50:15',
     completeTime: '2024-07-04T09:51:50',
-    duration: 95000, // 1分35秒
+    duration: 95000,
     riskStats: { critical: 2, high: 1, medium: 0, low: 0 }
   },
-  // SBOM检测 - 已完成（中危）
   {
     taskId: 'scan_1720038901234',
     target: 'microservice-sbom.xml',
@@ -363,10 +381,9 @@ const historyList = ref([
     riskLevel: '中危',
     startTime: '2024-07-04T13:18:30',
     completeTime: '2024-07-04T13:19:45',
-    duration: 75000, // 1分15秒
+    duration: 75000,
     riskStats: { critical: 0, high: 0, medium: 1, low: 3 }
   },
-  // 文件检测 - 已完成（高危）
   {
     taskId: 'scan_1720042345678',
     target: 'desktop-software-v5.1.exe',
@@ -375,9 +392,9 @@ const historyList = ref([
     riskLevel: '高危',
     startTime: '2024-07-05T10:08:22',
     completeTime: '2024-07-05T10:25:10',
-    duration: 1008000, // 16分48秒
+    duration: 1008000,
     riskStats: { critical: 0, high: 3, medium: 2, low: 1 },
-    fileSize: 85600000 // 约85.6MB
+    fileSize: 85600000
   }
 ]);
 const historyFilter = ref('all');
@@ -405,6 +422,21 @@ const triggerFileUpload = () => {
 const handleFileUpload = (e) => {
   const file = e.target.files[0];
   if (file) {
+    // 验证文件格式和大小
+    const validFormats = ['.zip', '.tar', '.gz', '.json'];
+    const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+    const isFormatValid = validFormats.includes(fileExt);
+    const isSizeValid = file.size <= 100 * 1024 * 1024; // 100MB
+
+    if (!isFormatValid) {
+      showToast('不支持的文件格式，请上传.zip, .tar, .gz, .json格式', 'warning');
+      return;
+    }
+    if (!isSizeValid) {
+      showToast('文件大小超过限制，最大支持100MB', 'warning');
+      return;
+    }
+
     startFileScan(file);
     // 清空输入以允许重复上传同一文件
     e.target.value = '';
@@ -415,7 +447,7 @@ const handleFileDrop = (e) => {
   isDragging.value = false;
   const file = e.dataTransfer.files[0];
   if (file) {
-    startFileScan(file);
+    handleFileUpload({ target: { files: [file] } });
   }
 };
 
@@ -435,15 +467,24 @@ const startFileScan = async (file) => {
     if (data.success) {
       currentScan.value = data.data;
       startScanPolling();
+      showToast('文件检测任务已提交', 'success');
     }
   } catch (error) {
     console.error('文件检测提交失败', error);
+    showToast('文件检测提交失败，请重试', 'error');
   } finally {
     loading.value = false;
   }
 };
 
 const startUrlScan = async () => {
+  // 简单验证URL格式
+  const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
+  if (!urlRegex.test(scanUrl.value)) {
+    showToast('请输入有效的URL地址', 'warning');
+    return;
+  }
+
   try {
     loading.value = true;
     const { data } = await submitScanTask({
@@ -455,15 +496,22 @@ const startUrlScan = async () => {
       currentScan.value = data.data;
       startScanPolling();
       scanUrl.value = '';
+      showToast('URL检测任务已提交', 'success');
     }
   } catch (error) {
     console.error('URL检测提交失败', error);
+    showToast('URL检测提交失败，请重试', 'error');
   } finally {
     loading.value = false;
   }
 };
 
 const startSbomScan = async () => {
+  if (!sbomContent.value.trim()) {
+    showToast('请输入SBOM内容', 'warning');
+    return;
+  }
+
   try {
     loading.value = true;
     const { data } = await submitScanTask({
@@ -476,9 +524,11 @@ const startSbomScan = async () => {
       currentScan.value = data.data;
       startScanPolling();
       sbomContent.value = '';
+      showToast('SBOM检测任务已提交', 'success');
     }
   } catch (error) {
     console.error('SBOM检测提交失败', error);
+    showToast('SBOM检测提交失败，请重试', 'error');
   } finally {
     loading.value = false;
   }
@@ -494,7 +544,7 @@ const startScanPolling = () => {
   // 立即获取一次状态
   fetchScanStatus();
 
-  // 设置定时器
+  // 设置定时器（5秒一次）
   scanInterval.value = setInterval(() => {
     fetchScanStatus();
   }, 5000);
@@ -506,14 +556,27 @@ const fetchScanStatus = async () => {
   try {
     const { data } = await getScanStatus(currentScan.value.taskId);
     if (data.success) {
+      // 进度变化时添加数字动画
+      const oldProgress = currentScan.value.progress;
       currentScan.value = data.data;
 
-      // 如果扫描完成或失败，停止轮询
+      // 进度更新动画
+      if (currentScan.value.progress > oldProgress) {
+        animateProgress(oldProgress, currentScan.value.progress);
+      }
+
+      // 如果扫描完成或失败，停止轮询并更新历史记录
       if (['completed', 'failed'].includes(currentScan.value.status)) {
         clearInterval(scanInterval.value);
         scanInterval.value = null;
-        // 刷新历史列表
         getHistoryList();
+
+        // 任务结束提示
+        if (currentScan.value.status === 'completed') {
+          showToast('检测已完成', 'success');
+        } else {
+          showToast(`检测失败: ${currentScan.value.errorMsg || '未知错误'}`, 'error');
+        }
       }
     }
   } catch (error) {
@@ -521,6 +584,21 @@ const fetchScanStatus = async () => {
   }
 };
 
+// 进度条数字动画
+const animateProgress = (start, end) => {
+  let current = start;
+  const step = Math.ceil((end - start) / 20); // 分20步完成动画
+  const timer = setInterval(() => {
+    current += step;
+    if (current >= end) {
+      current = end;
+      clearInterval(timer);
+    }
+    // 临时更新进度显示（实际会被轮询结果覆盖，仅为动画效果）
+    currentScan.value.progress = current;
+  }, 50);
+};
+
 // 获取历史记录
 const getHistoryList = async () => {
   try {
@@ -537,6 +615,7 @@ const getHistoryList = async () => {
     }
   } catch (error) {
     console.error('获取历史记录失败', error);
+    showToast('获取历史记录失败，请重试', 'error');
   } finally {
     loading.value = false;
   }
@@ -546,11 +625,16 @@ const getHistoryList = async () => {
 const showReportDetails = async (record) => {
   try {
     loading.value = true;
-    // 这里应该调用获取报告详情的API
-    currentReport.value = record; // 临时使用记录数据，实际应替换为API调用
+    // 实际项目中应调用API获取详细报告
+    // const { data } = await getScanReport(record.taskId);
+    // currentReport.value = data.data;
+
+    // 临时使用记录数据
+    currentReport.value = record;
     reportVisible.value = true;
   } catch (error) {
     console.error('获取报告详情失败', error);
+    showToast('获取报告详情失败，请重试', 'error');
   } finally {
     loading.value = false;
   }
@@ -561,18 +645,55 @@ const rescan = (record) => {
   switch (record.type) {
     case 'file':
       activeUploadType.value = 'file';
+      // 滚动到上传区域
+      scrollToUploadArea();
       break;
     case 'url':
       activeUploadType.value = 'url';
       scanUrl.value = record.target;
+      scrollToUploadArea();
       break;
     case 'sbom':
       activeUploadType.value = 'sbom';
       sbomContent.value = record.content || '';
+      scrollToUploadArea();
       break;
   }
 };
 
+// 滚动到上传区域
+const scrollToUploadArea = () => {
+  document.querySelector('.upload-card')?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start'
+  });
+};
+
+// 显示提示信息
+const showToast = (message, type = 'info') => {
+  // 创建提示框元素
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type} animate-fade-in-out`;
+  toast.innerHTML = `<i class="fa ${getToastIcon(type)} mr-2"></i>${message}`;
+  document.body.appendChild(toast);
+
+  // 3秒后自动移除
+  setTimeout(() => {
+    document.body.removeChild(toast);
+  }, 3000);
+};
+
+// 获取提示框图标
+const getToastIcon = (type) => {
+  const iconMap = {
+    'success': 'fa-check-circle',
+    'error': 'fa-exclamation-circle',
+    'warning': 'fa-exclamation-triangle',
+    'info': 'fa-info-circle'
+  };
+  return iconMap[type] || 'fa-info-circle';
+};
+
 // 格式化时间
 const formatTime = (time) => {
   return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
@@ -631,6 +752,7 @@ const getTypeColor = (type) => {
 // 风险等级颜色映射
 const getRiskColor = (level) => {
   const colorMap = {
+    '致命': 'danger',
     '高危': 'danger',
     '中危': 'warning',
     '低危': 'info',
@@ -639,6 +761,16 @@ const getRiskColor = (level) => {
   return colorMap[level] || 'default';
 };
 
+// 获取目标类型图标
+const getTargetIcon = (type) => {
+  const iconMap = {
+    'file': 'fa-file-archive-o',
+    'url': 'fa-link',
+    'sbom': 'fa-file-code-o'
+  };
+  return iconMap[type] || 'fa-question-circle';
+};
+
 // 筛选历史记录
 const filteredHistory = computed(() => {
   if (historyFilter.value === 'all') {
@@ -653,9 +785,20 @@ watch(historyFilter, () => {
   getHistoryList();
 });
 
+// 抽屉打开时的回调
+const handleDrawerOpen = () => {
+  // 可以添加抽屉打开动画或数据初始化逻辑
+};
+
 // 页面加载时获取历史记录
 onMounted(() => {
   getHistoryList();
+  // 页面载入动画
+  document.querySelectorAll('.animate-fade-in').forEach((el, index) => {
+    setTimeout(() => {
+      el.classList.add('visible');
+    }, 100 * index);
+  });
 });
 
 // 组件卸载时清除定时器
@@ -667,12 +810,46 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+// 基础布局样式
 .page-wrap {
   margin: 16px;
+  padding-bottom: 40px;
 }
 
+// 动画相关
+.animate-fade-in {
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  &.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.delay-100 { transition-delay: 0.1s; }
+.delay-200 { transition-delay: 0.2s; }
+
+.animate-fade-in-out {
+  animation: fadeInOut 3s ease-in-out;
+}
+
+@keyframes fadeInOut {
+  0% { opacity: 0; transform: translateY(-20px); }
+  15% { opacity: 1; transform: translateY(0); }
+  85% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-20px); }
+}
+
+// 上传区域样式
 .upload-card {
-  padding: 20px;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.3s ease;
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  }
 }
 
 .upload-title {
@@ -680,6 +857,12 @@ onUnmounted(() => {
   font-weight: 600;
   margin-bottom: 20px;
   color: #191919;
+  display: flex;
+  align-items: center;
+}
+
+.upload-tabs {
+  margin-top: 10px;
 }
 
 .upload-area {
@@ -689,62 +872,250 @@ onUnmounted(() => {
   text-align: center;
   cursor: pointer;
   transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
 
   &:hover {
     border-color: var(--devui-primary);
+    background-color: rgba(22, 93, 255, 0.03);
   }
 
   &.dragging {
     border-color: var(--devui-primary);
-    background-color: rgba(22, 93, 255, 0.05);
+    background-color: rgba(22, 93, 255, 0.08);
+    transform: scale(1.01);
   }
 }
 
+.upload-icon-container {
+  transition: transform 0.3s ease;
+  &:hover {
+    transform: translateY(-5px);
+  }
+}
+
+.upload-text {
+  font-size: 15px;
+  color: #4e5969;
+  margin-top: 10px;
+}
+
 .file-input {
   display: none;
 }
 
-.scan-status-title {
+// 表单样式
+.form-container {
+  margin-top: 10px;
+  padding: 10px;
+}
+
+// 按钮样式
+.btn-primary {
+  background-color: var(--devui-primary);
+  border-color: var(--devui-primary);
+  &:hover {
+    background-color: var(--devui-primary-light-300);
+    border-color: var(--devui-primary-light-300);
+  }
+}
+
+// 检测状态区域样式
+.scan-status-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: 24px;
+  transition: all 0.3s ease;
+}
+
+.scan-status-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 10px;
+}
+
+.scan-status-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #191919;
+  display: flex;
+  align-items: center;
+}
+
+.status-tag {
+  font-size: 13px;
+  padding: 4px 10px;
+  border-radius: 4px;
 }
 
 .scan-progress {
   margin: 20px 0;
 }
 
+.progress-bar {
+  transition: width 0.5s ease;
+}
+
 .progress-text {
   color: var(--devui-text-secondary);
   margin-top: 8px;
   font-size: 14px;
+  display: flex;
+  align-items: center;
 }
 
-.history-title {
+.progress-percentage {
+  font-weight: 500;
+  color: #191919;
+}
+
+.progress-step {
+  color: #6b7280;
+}
+
+.scan-details {
+  margin-top: 20px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.details-table {
+  background-color: #f9fafb;
+  border: 1px solid #f0f2f5;
+}
+
+.scan-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+// 历史记录区域样式
+.history-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: 24px;
+}
+
+.history-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }
 
+.history-filter {
+  min-width: 180px;
+}
+
+.jyh-table {
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  &:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  }
+}
+
 .target-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 280px;
+  display: flex;
+  align-items: center;
 }
 
+.type-tag, .risk-tag {
+  font-size: 12px;
+  padding: 2px 8px;
+}
 
+.operation-link {
+  transition: all 0.2s ease;
+  &:hover {
+    color: var(--devui-primary);
+    transform: translateX(2px);
+  }
+}
+
+.no-data {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.pagination {
+  transition: transform 0.2s ease;
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+// 面包屑样式
 .secret-breadcrumb {
   padding: 7px 20px 12px;
   background: #ffffff;
+  border-bottom: 1px solid #f0f2f5;
 }
 
-///deep/ .devui-tabs-content {
-//  padding: 16px 0;
-//}
-//
-///deep/ .devui-form-item {
-//  margin-bottom: 16px;
-//}
+// 提示框样式
+.toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  border-radius: 4px;
+  color: white;
+  z-index: 9999;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.toast-success {
+  background-color: #52c41a;
+}
+
+.toast-error {
+  background-color: #ff4d4f;
+}
+
+.toast-warning {
+  background-color: #faad14;
+}
+
+.toast-info {
+  background-color: #1890ff;
+}
+
+// 抽屉样式
+.report-drawer {
+  .devui-drawer-content {
+    padding: 0;
+    overflow-y: auto;
+  }
+}
+
+// 覆盖组件样式
+::v-deep .devui-tabs-nav {
+  margin-bottom: 20px;
+}
+
+::v-deep .devui-tabs-content {
+  padding: 10px 0;
+}
+
+::v-deep .devui-form-item {
+  margin-bottom: 16px;
+}
+
+::v-deep .devui-table-row {
+  transition: background-color 0.2s ease;
+}
+
+::v-deep .devui-table-row:hover {
+  background-color: rgba(22, 93, 255, 0.03);
+}
 </style>