优化部分页面体验 点击IP可以直接跳转ip138进行查询, 优化非固定大小文件的下载体验

src/layout/Layout.vue

@@ -158,7 +158,7 @@ watch(
   transition: all 0.3s;
   overflow: hidden;
   position: relative;
-  z-index: 10;
+  z-index: 2001;
 }
 
 .logo {
@@ -290,7 +290,7 @@ watch(
     right: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, 0.705);
-    z-index: 9;
+    z-index: 2000;
     backdrop-filter: blur(8px);
     opacity: 1;
     transition: opacity 0.3s ease;
@@ -305,7 +305,7 @@ watch(
     left: 0;
     top: 0;
     bottom: 0;
-    z-index: 10;
+    z-index: 2001;
     box-shadow: 2px 0 8px rgba(0,0,0,0.15);
     transform: translateX(0);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -324,7 +324,7 @@ watch(
   .header {
     position: sticky;
     top: 0;
-    z-index: 8;
+    z-index: 1999;
   }
 
   /* 调整主容器样式 */

src/views/TaskManagement.vue

@@ -34,7 +34,17 @@
         :header-cell-style="{ background: '#f5f7fa' }"
         border>
         <el-table-column prop="tid" label="任务UUID" width="350" />
-        <el-table-column prop="client_ip" label="客户端IP" width="140" />
+        <el-table-column prop="client_ip" label="客户端IP" width="140">
+          <template #default="{ row }">
+            <el-link 
+              type="primary" 
+              :href="`https://ip138.com/iplookup.php?ip=${row.client_ip}`"
+              target="_blank"
+              :underline="false">
+              {{ row.client_ip }}
+            </el-link>
+          </template>
+        </el-table-column>
         <el-table-column prop="add_time" label="添加时间" width="180">
           <template #default="scope">
             {{ formatDateTime(scope.row.add_time) }}
@@ -235,6 +245,12 @@
           <el-button type="primary" @click="downloadFile" :disabled="!currentTaskDetails.url">
             <el-icon><Download /></el-icon>下载文件
           </el-button>
+          <el-button 
+            type="success" 
+            @click="downloadProxiedFile"
+            :disabled="!canDownloadProxied">
+            <el-icon><Connection /></el-icon>下载文件(已代理)
+          </el-button>
         </div>
       </div>
     </el-dialog>
@@ -249,8 +265,9 @@ import {
   Plus, Delete, Monitor, Search, 
   InfoFilled, DocumentCopy, Download,
   VideoPlay, VideoPause, RefreshRight,
-  Top 
+  Top, Connection
 } from '@element-plus/icons-vue'
+import { API_BASE_URL } from '../config/api.config'
 
 const loading = ref(false)
 const total = ref(0)
@@ -643,6 +660,25 @@ onUnmounted(() => {
     isMobile.value = window.innerWidth <= 768
   })
 })
+
+// 判断是否可以使用代理下载
+const canDownloadProxied = computed(() => {
+  if (!currentTaskDetails.value) return false
+  
+  const validStatus = [3, 4]  // 3: 已完成, 4: 已缓存
+  return (
+    validStatus.includes(currentTaskDetails.value.status) && 
+    currentTaskDetails.value.tag !== 'CLEANED'
+  )
+})
+
+// 添加代理下载方法
+const downloadProxiedFile = () => {
+  if (!currentTaskDetails.value || !canDownloadProxied.value) return
+  
+  const downloadUrl = `${API_BASE_URL}/Download/${currentTaskDetails.value.tid}`
+  window.open(downloadUrl, '_blank')
+}
 </script>
 
 <style scoped>
@@ -769,6 +805,7 @@ onUnmounted(() => {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
+  flex-wrap: wrap;  /* 允许按钮换行 */
 }
 
 :deep(.el-descriptions__cell) {
@@ -863,6 +900,16 @@ onUnmounted(() => {
       }
     }
   }
+
+  .details-actions {
+    flex-direction: column;
+    gap: 8px;
+    
+    .el-button {
+      width: 100%;
+      justify-content: center;
+    }
+  }
 }
 
 /* 平板端样式调整 */

src/views/UserEvents.vue

@@ -72,7 +72,17 @@
         <el-table-column 
           prop="eventIP" 
           label="IP地址" 
-          :width="isMobile ? '100' : '140'" />
+          :width="isMobile ? '100' : '140'">
+          <template #default="{ row }">
+            <el-link 
+              type="primary" 
+              :href="`https://ip138.com/iplookup.php?ip=${row.eventIP}`"
+              target="_blank"
+              :underline="false">
+              {{ row.eventIP }}
+            </el-link>
+          </template>
+        </el-table-column>
         <el-table-column 
           prop="eventDetail" 
           label="详细信息" 

src/views/visitor/TaskList.vue

@@ -31,10 +31,19 @@
 
         <el-table-column 
           label="大小" 
-          prop="size"
-          :formatter="formatFileSize"
           width="120"
-          class-name="hidden-on-mobile" />
+          class-name="hidden-on-mobile">
+          <template #default="{ row }">
+            <span>{{ formatFileSize(row.size) }}</span>
+            <template v-if="row.size < 0">
+              <el-tooltip 
+                content="这个大小可能不准确, 实际文件大小将会在下载完成后更新" 
+                placement="top">
+                <el-icon class="ml-2"><InfoFilled /></el-icon>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
 
         <el-table-column 
           label="提交时间" 
@@ -97,6 +106,7 @@
 <script setup>
 import { ref, onMounted, inject } from 'vue'
 import { ElMessage } from 'element-plus'
+import { InfoFilled } from '@element-plus/icons-vue'
 import { getRandomTip } from '@/utils/visitorTips'
 import { VisitorAPI } from '@/api/visitor'
 import { API_BASE_URL } from '@/config/api.config'
@@ -129,16 +139,16 @@ const formatDateTime = (dateStr) => {
   return new Date(dateStr).toLocaleString()
 }
 
-const formatFileSize = (row, column, cellValue) => {
+const formatFileSize = (size) => {
-  if (!cellValue) return '0 B'
+  if (!size && size !== 0) return '0 B'
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let size = cellValue
+  let value = Math.abs(size)  // 使用绝对值来处理负数
   let unitIndex = 0
-  while (size >= 1024 && unitIndex < units.length - 1) {
+  while (value >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024
+    value /= 1024
     unitIndex++
   }
-  return `${size.toFixed(2)} ${units[unitIndex]}`
+  return `${value.toFixed(2)} ${units[unitIndex]}`
 }
 
 const fetchTasks = async () => {
@@ -224,4 +234,11 @@ onMounted(() => {
     }
   }
 }
+
+.ml-2 {
+  margin-left: 4px;
+  color: #909399;
+  font-size: 14px;
+  vertical-align: middle;
+}
 </style>