fix:fix site info

src/views/audit/AllSites.vue

@@ -4,7 +4,7 @@
     <div class="page-header">
       <div class="left">
          <h2 class="title">所有站点</h2>
-         <el-tag type="info" effect="plain" class="count-tag">共 {{ pagination.total }} 个容器</el-tag>
+         <el-tag type="info" effect="plain" class="count-tag">共 {{ pagination.total }} 个站点</el-tag>
       </div>
       <div class="actions">
         <el-button type="primary" @click="handleRefresh" :icon="Refresh" class="action-btn">刷新</el-button>
@@ -18,28 +18,28 @@
         <div class="stat-icon"><el-icon><Monitor /></el-icon></div>
         <div class="stat-content">
           <div class="stat-value">{{ pagination.total }}</div>
-          <div class="stat-label">总容器数</div>
+          <div class="stat-label">总站点数</div>
         </div>
       </div>
        <div class="stat-card normal-card">
          <div class="stat-icon"><el-icon><CircleCheck /></el-icon></div>
          <div class="stat-content">
            <div class="stat-value">{{ siteStats.normal }}</div>
-           <div class="stat-label">已构建容器</div>
+           <div class="stat-label">正常连接</div>
          </div>
        </div>
        <div class="stat-card warning-card">
          <div class="stat-icon"><el-icon><Warning /></el-icon></div>
          <div class="stat-content">
            <div class="stat-value">{{ siteStats.warning }}</div>
-           <div class="stat-label">未构建/未知容器</div>
+           <div class="stat-label">连接失败</div>
          </div>
        </div>
        <div class="stat-card violation-card">
          <div class="stat-icon"><el-icon><CircleClose /></el-icon></div>
          <div class="stat-content">
            <div class="stat-value">{{ siteStats.violation }}</div>
-           <div class="stat-label">异常容器</div>
+           <div class="stat-label">违规站点</div>
          </div>
        </div>
     </div>
@@ -68,20 +68,45 @@
         stripe
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="container_id" label="容器id" width="300"/>
-           <el-table-column label="容器状态" align="center">
+        <el-table-column prop="container_id" label="容器ID" width="280" show-overflow-tooltip />
+        <el-table-column prop="url" label="访问地址" min-width="200" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-tag 
-              :type="getStatusType(row.status)" 
-              effect="plain"
-              size="small"
-            >
-              {{ getStatusText(row.status) }}
+            <el-link :href="row.url" target="_blank" type="primary" v-if="row.url">
+              {{ row.url }}
+            </el-link>
+            <span v-else class="text-muted">无访问地址</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="连接类型" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getConnectTypeColor(row.connect_type)" size="small">
+              {{ getConnectTypeText(row.connect_type) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="lastCheck" label="最后检查时间"  />
-        <el-table-column prop="createTime" label="创建时间"  />
+        <el-table-column label="连接状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag 
+              :type="getConnectionStatusType(row.connect)" 
+              effect="plain"
+              size="small"
+            >
+              {{ getConnectionStatusText(row.connect) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="违规状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag 
+              :type="row.is_violation ? 'danger' : 'success'" 
+              effect="plain"
+              size="small"
+            >
+              {{ row.is_violation ? '违规' : '正常' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" />
         <el-table-column label="操作" fixed="right" align="center">
           <template #default="{ row }">
             <div class="action-buttons">
@@ -161,67 +186,154 @@ const siteStats = reactive({
 // 是否需要获取统计数据的标志
 const needsStatsUpdate = ref(true)
 
+// 缓存所有站点数据
+const allSitesCache = ref([])
+const cacheTimestamp = ref(0)
+const cacheExpiry = 60000 // 1分钟缓存
+
 // 对话框相关
 const detailDialogVisible = ref(false)
 const currentSite = ref(null)
 
 
 
+// 获取所有容器数据的函数
+const getAllContainers = async () => {
+  try {
+    // 检查缓存是否有效
+    const now = Date.now()
+    if (allSitesCache.value.length > 0 && (now - cacheTimestamp.value) < cacheExpiry) {
+      console.log('使用缓存的站点数据')
+      return allSitesCache.value
+    }
+
+    console.log('开始获取所有容器数据...')
+    let allContainers = []
+    let currentPage = 1
+    const pageSize = 100 // 每次请求100个容器
+    let hasMoreData = true
+
+    while (hasMoreData) {
+      const params = {
+        page: currentPage,
+        count: pageSize,
+        server_id: '',
+        user_id: '',
+        key: queryParams.domain || ''
+      }
+
+      console.log(`正在获取第${currentPage}页容器数据...`)
+      const response = await getSiteList(params)
+      
+      if (response && response.data && response.data.data) {
+        const containerList = response.data.data || []
+        allContainers = allContainers.concat(containerList)
+        
+        console.log(`第${currentPage}页获取到${containerList.length}个容器，总计${allContainers.length}个`)
+        
+        // 检查是否还有更多数据
+        if (containerList.length < pageSize) {
+          hasMoreData = false
+          console.log('已获取所有容器数据')
+        } else {
+          currentPage++
+        }
+      } else {
+        hasMoreData = false
+        console.log('API响应异常，停止获取')
+      }
+    }
+
+    // 遍历所有容器，合并所有web_list数据
+    let allWebSites = []
+    
+    allContainers.forEach(container => {
+      if (container.web_list && Array.isArray(container.web_list)) {
+        const containerWebSites = container.web_list.map(webItem => ({
+          ...webItem,
+          container_info: {
+            container_id: container.container_id || container.id,
+            container_name: container.name || container.container_name,
+            server_id: container.server_id,
+            user_id: container.user_id
+          }
+        }))
+        
+        allWebSites = allWebSites.concat(containerWebSites)
+      }
+    })
+
+    // 将合并后的数据转换为页面需要的格式
+    const transformedData = allWebSites.map(item => {
+      let webAudit = {}
+      try {
+        webAudit = JSON.parse(item.web_audit || '{}')
+      } catch (e) {
+        console.warn('解析web_audit失败:', e)
+        webAudit = {}
+      }
+      
+      return {
+        container_id: item.container_id,
+        connect_id: item.connect_id,
+        url: webAudit.url || `http://${item.server_ip}:${item.server_port}`,
+        domain: item.domain || webAudit.web_key,
+        connect_type: item.connect_type,
+        server_ip: item.server_ip,
+        server_port: item.server_port,
+        container_ip: item.container_ip,
+        container_port: item.container_port,
+        floating_ip: item.floating_ip,
+        state: item.state,
+        connect: webAudit.connect || false,
+        is_violation: webAudit.is_violation || false,
+        violation_keys: webAudit.violation_keys || [],
+        createTime: formatTime(item.created_at),
+        ssl_cert: item.ssl_cert,
+        container_info: item.container_info
+      }
+    })
+
+    // 更新缓存
+    allSitesCache.value = transformedData
+    cacheTimestamp.value = now
+    
+    console.log(`总计获取到${transformedData.length}个站点数据`)
+    return transformedData
+    
+  } catch (error) {
+    console.error('获取所有容器数据失败:', error)
+    throw error
+  }
+}
+
 // 获取站点列表数据
 const getList = async () => {
   loading.value = true
   try {
-    // 构造API请求参数
-    const params = {
-      page: queryParams.pageNum,
-      count: queryParams.pageSize,
-      server_id: '', // 可以根据需要添加服务器ID筛选
-      user_id: '', // 可以根据需要添加用户ID筛选
-      key: queryParams.domain || '' // 使用域名作为搜索关键字
+    // 获取所有站点数据
+    const allSitesData = await getAllContainers()
+    
+    // 应用搜索筛选
+    let filteredData = allSitesData
+    if (queryParams.domain) {
+      filteredData = filteredData.filter(site => 
+        site.container_id?.toLowerCase().includes(queryParams.domain.toLowerCase()) ||
+        site.url?.toLowerCase().includes(queryParams.domain.toLowerCase()) ||
+        site.domain?.toLowerCase().includes(queryParams.domain.toLowerCase())
+      )
     }
     
-    // 调用API获取站点列表
-    const response = await getSiteList(params)
-    console.log("获取站点列表结果",response)
-    if (response && response.data) {
-      // 处理API返回的数据
-      const apiData = response.data.data || []
-      
-      // 将API数据转换为页面需要的格式
-      const transformedData = apiData.map(item => ({
-        container_id: item.container_id ,
-        domain: item.domain || item.Domain || item.web_key,
-        title: item.title || item.Title || item.web_name || '未知站点',
-        status: getStatusFromApi(item.container_state),
-        lastCheck: formatTime(item.become_time),
-        createTime: formatTime(item.create_time || item.CreateTime || item.created_at || item.CreatedAt),
-        description: item.description || item.Description || '',
-        checkHistory: [] // API可能不返回历史记录，可以单独获取
-      }))
-      
-      // 如果有状态筛选，在前端进行过滤
-      let filteredData = transformedData
-     
-      
-      siteList.value = filteredData
-      pagination.total = response.data.total || response.data.count || filteredData.length
-      
-      // 检查API是否返回了统计信息
-      if (response.data.stats) {
-        // 如果API返回了统计信息，直接使用
-        updateStatsFromApi(response.data.stats)
-        needsStatsUpdate.value = false
-      } else {
-        // 如果需要获取统计数据且是第一页，获取全部数据进行统计
-        if (needsStatsUpdate.value && queryParams.pageNum === 1) {
-          await getFullStatsData()
-        }
-      }
-    } else {
-      siteList.value = []
-      pagination.total = 0
-      updateStats([])
-    }
+    // 实现前端分页
+    const startIndex = (queryParams.pageNum - 1) * queryParams.pageSize
+    const endIndex = startIndex + queryParams.pageSize
+    const paginatedData = filteredData.slice(startIndex, endIndex)
+    
+    siteList.value = paginatedData
+    pagination.total = filteredData.length
+    
+    // 更新统计数据（基于所有筛选后的数据，不是分页后的数据）
+    updateStats(filteredData)
     
   } catch (error) {
     console.error('获取站点列表失败:', error)
@@ -287,9 +399,9 @@ const formatTime = (timeStr) => {
 const updateStats = (data = []) => {
   console.log("更新统计数据",data)
   siteStats.total = data.length
-  siteStats.normal = data.filter(site => site.status === 'normal').length
-  siteStats.warning = data.filter(site => site.status === 'warning').length
-  siteStats.violation = data.filter(site => site.status === 'violation').length
+  siteStats.normal = data.filter(site => site.connect && !site.is_violation).length
+  siteStats.warning = data.filter(site => !site.connect).length
+  siteStats.violation = data.filter(site => site.is_violation).length
 }
 
 // 从API统计信息更新
@@ -339,25 +451,35 @@ const getFullStatsData = async () => {
   }
 }
 
-// 获取状态类型
-const getStatusType = (status) => {
-  const statusMap = {
-    normal: 'success',
-    warning: 'warning',
-    violation: 'danger'
+// 获取连接类型颜色
+const getConnectTypeColor = (type) => {
+  const typeMap = {
+    'port_forward': 'primary',
+    'domain': 'success',
+    'floating_ip': 'warning'
   }
-  return statusMap[status] || 'info'
+  return typeMap[type] || 'info'
 }
 
- // 获取状态文本
- const getStatusText = (status) => {
-   const statusMap = {
-     normal: '已构建',      // 对应容器状态 2
-     warning: '未构建',     // 对应容器状态 1 和 3(未知)
-     violation: '异常'      // 对应容器状态 0(未支付) 和 4(已删除)
-   }
-   return statusMap[status] || '未知'
- }
+// 获取连接类型文本
+const getConnectTypeText = (type) => {
+  const typeMap = {
+    'port_forward': '端口转发',
+    'domain': '域名绑定',
+    'floating_ip': '浮动IP'
+  }
+  return typeMap[type] || type || '未知'
+}
+
+// 获取连接状态类型
+const getConnectionStatusType = (connect) => {
+  return connect ? 'success' : 'danger'
+}
+
+// 获取连接状态文本
+const getConnectionStatusText = (connect) => {
+  return connect ? '已连接' : '连接失败'
+}
 
 // 查询按钮
 const handleQuery = () => {
@@ -401,7 +523,10 @@ const handleRefresh = () => {
     type: 'info',
     duration: 2000
   })
-  needsStatsUpdate.value = true // 刷新时需要更新统计
+  // 清除缓存，强制重新获取数据
+  allSitesCache.value = []
+  cacheTimestamp.value = 0
+  needsStatsUpdate.value = true
   getList()
 }
 
@@ -706,4 +831,10 @@ onMounted(() => {
     grid-template-columns: 1fr;
   }
 }
+
+/* 自定义样式 */
+.text-muted {
+  color: #909399;
+  font-style: italic;
+}
 </style>

src/views/audit/ViolationSites.vue

@@ -97,20 +97,33 @@
         stripe
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="container_id" label="容器id" width="300"/>
-        <el-table-column label="容器状态" align="center">
+        <el-table-column prop="container_id" label="容器ID" width="280" show-overflow-tooltip />
+        <el-table-column prop="url" label="违规地址" min-width="200" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-tag 
-              :type="getStatusType(row.status)" 
-              effect="plain"
-              size="small"
-            >
-              {{ getStatusText(row.status) }}
+            <el-link :href="row.url" target="_blank" type="danger" v-if="row.url">
+              {{ row.url }}
+            </el-link>
+            <span v-else class="text-muted">无访问地址</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="违规类型" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag type="danger" size="small" v-if="row.violation_keys && row.violation_keys.length > 0">
+              {{ row.violation_keys.join(', ') }}
+            </el-tag>
+            <el-tag type="warning" size="small" v-else>
+              检测到违规
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="lastCheck" label="最后检查时间"  />
-        <el-table-column prop="createTime" label="创建时间"  />
+        <el-table-column label="连接类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getConnectTypeColor(row.connect_type)" size="small">
+              {{ getConnectTypeText(row.connect_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" />
         <el-table-column label="操作" fixed="right" align="center">
           <template #default="{ row }">
             <div class="action-buttons">
@@ -278,6 +291,11 @@ const violationStats = reactive({
   pending: 0
 })
 
+// 缓存所有站点数据
+const allSitesCache = ref([])
+const cacheTimestamp = ref(0)
+const cacheExpiry = 60000 // 1分钟缓存
+
 // 对话框相关
 const detailDialogVisible = ref(false)
 const processDialogVisible = ref(false)
@@ -355,69 +373,170 @@ const mockViolationData = [
   }
 ]
 
+// 获取所有容器数据的函数
+const getAllContainers = async () => {
+  try {
+    // 检查缓存是否有效
+    const now = Date.now()
+    if (allSitesCache.value.length > 0 && (now - cacheTimestamp.value) < cacheExpiry) {
+      console.log('使用缓存的站点数据')
+      return allSitesCache.value
+    }
+
+    console.log('开始获取所有容器数据...')
+    let allContainers = []
+    let currentPage = 1
+    const pageSize = 100 // 每次请求100个容器
+    let hasMoreData = true
+
+    while (hasMoreData) {
+      const params = {
+        page: currentPage,
+        count: pageSize,
+        server_id: '',
+        user_id: '',
+        key: queryParams.domain || ''
+      }
+
+      console.log(`正在获取第${currentPage}页容器数据...`)
+      const response = await getSiteList(params)
+      
+      if (response && response.data && response.data.data) {
+        const containerList = response.data.data || []
+        allContainers = allContainers.concat(containerList)
+        
+        console.log(`第${currentPage}页获取到${containerList.length}个容器，总计${allContainers.length}个`)
+        
+        // 检查是否还有更多数据
+        if (containerList.length < pageSize) {
+          hasMoreData = false
+          console.log('已获取所有容器数据')
+        } else {
+          currentPage++
+        }
+      } else {
+        hasMoreData = false
+        console.log('API响应异常，停止获取')
+      }
+    }
+
+    // 遍历所有容器，合并所有web_list数据
+    let allWebSites = []
+    
+    allContainers.forEach(container => {
+      if (container.web_list && Array.isArray(container.web_list)) {
+        const containerWebSites = container.web_list.map(webItem => ({
+          ...webItem,
+          container_info: {
+            container_id: container.container_id || container.id,
+            container_name: container.name || container.container_name,
+            server_id: container.server_id,
+            user_id: container.user_id
+          }
+        }))
+        
+        allWebSites = allWebSites.concat(containerWebSites)
+      }
+    })
+
+    // 将合并后的数据转换为页面需要的格式
+    const transformedData = allWebSites.map(item => {
+      let webAudit = {}
+      try {
+        webAudit = JSON.parse(item.web_audit || '{}')
+      } catch (e) {
+        console.warn('解析web_audit失败:', e)
+        webAudit = {}
+      }
+      
+      return {
+        container_id: item.container_id,
+        connect_id: item.connect_id,
+        url: webAudit.url || `http://${item.server_ip}:${item.server_port}`,
+        domain: item.domain || webAudit.web_key,
+        connect_type: item.connect_type,
+        server_ip: item.server_ip,
+        server_port: item.server_port,
+        container_ip: item.container_ip,
+        container_port: item.container_port,
+        floating_ip: item.floating_ip,
+        state: item.state,
+        connect: webAudit.connect || false,
+        is_violation: webAudit.is_violation || false,
+        violation_keys: webAudit.violation_keys || [],
+        createTime: formatTime(item.created_at),
+        ssl_cert: item.ssl_cert,
+        violationType: 'content',
+        severity: 'moderate',
+        processStatus: 'pending',
+        violationTime: formatTime(item.created_at),
+        reportCount: 1,
+        isBlocked: false,
+        violationDescription: webAudit.violation_keys ? webAudit.violation_keys.join(', ') : '检测到违规内容',
+        processHistory: [],
+        reportHistory: [],
+        container_info: item.container_info
+      }
+    })
+
+    // 更新缓存
+    allSitesCache.value = transformedData
+    cacheTimestamp.value = now
+    
+    console.log(`总计获取到${transformedData.length}个站点数据`)
+    return transformedData
+    
+  } catch (error) {
+    console.error('获取所有容器数据失败:', error)
+    throw error
+  }
+}
+
 // 获取违规站点列表数据
 const getList = async () => {
   loading.value = true
   try {
-    // 构造API请求参数
-    const params = {
-      page: queryParams.pageNum,
-      count: queryParams.pageSize,
-      key: queryParams.domain || '' // 使用域名作为搜索关键字
+    // 获取所有站点数据
+    const allSitesData = await getAllContainers()
+    
+    // 只保留违规站点
+    let violationData = allSitesData.filter(item => item.is_violation)
+    
+    // 前端筛选逻辑
+    let filteredData = violationData
+    
+    if (queryParams.violationType) {
+      filteredData = filteredData.filter(site => site.violationType === queryParams.violationType)
     }
     
-    // 调用API获取违规站点列表
-    const response = await getAuditList(params)
-    
-    if (response && response.data) {
-      // 处理API返回的数据
-      const apiData = response.data.data || []
-      
-      // 将API数据转换为页面需要的格式
-      const transformedData = apiData.map(item => ({
-        container_id: item.container_id || item.id || item.ID,
-        domain: item.domain || item.Domain || item.web_key,
-        title: item.title || item.Title || item.web_name || '违规站点',
-        status: getStatusFromApi(item.container_state),
-        lastCheck: formatTime(item.become_time),
-        createTime: formatTime(item.create_time || item.CreateTime || item.created_at || item.CreatedAt),
-        violationType: getViolationTypeFromApi(item.violation_type || item.type),
-        severity: getSeverityFromApi(item.severity || item.level),
-        processStatus: getProcessStatusFromApi(item.process_status || item.status),
-        violationTime: formatTime(item.violation_time || item.created_at || item.CreatedAt),
-        reportCount: item.report_count || item.count || 0,
-        isBlocked: item.is_blocked || item.blocked || false,
-        violationDescription: item.description || item.violation_desc || '检测到违规内容',
-        processHistory: [], // API可能不返回处理历史，可以单独获取
-        reportHistory: [] // API可能不返回举报历史，可以单独获取
-      }))
-      
-      // 前端筛选逻辑
-      let filteredData = transformedData
-      
-      if (queryParams.violationType) {
-        filteredData = filteredData.filter(site => site.violationType === queryParams.violationType)
-      }
-      
-      if (queryParams.severity) {
-        filteredData = filteredData.filter(site => site.severity === queryParams.severity)
-      }
-      
-      if (queryParams.processStatus) {
-        filteredData = filteredData.filter(site => site.processStatus === queryParams.processStatus)
-      }
-      
-      violationList.value = filteredData
-      pagination.total = response.data.total || response.data.count || filteredData.length
-      
-      // 更新统计数据
-      updateStats(filteredData)
-    } else {
-      violationList.value = []
-      pagination.total = 0
-      updateStats([])
+    if (queryParams.severity) {
+      filteredData = filteredData.filter(site => site.severity === queryParams.severity)
     }
     
+    if (queryParams.processStatus) {
+      filteredData = filteredData.filter(site => site.processStatus === queryParams.processStatus)
+    }
+    
+    // 应用搜索筛选
+    if (queryParams.domain) {
+      filteredData = filteredData.filter(site => 
+        site.container_id?.toLowerCase().includes(queryParams.domain.toLowerCase()) ||
+        site.url?.toLowerCase().includes(queryParams.domain.toLowerCase()) ||
+        site.domain?.toLowerCase().includes(queryParams.domain.toLowerCase())
+      )
+    }
+    
+    // 实现前端分页
+    const startIndex = (queryParams.pageNum - 1) * queryParams.pageSize
+    const endIndex = startIndex + queryParams.pageSize
+    const paginatedData = filteredData.slice(startIndex, endIndex)
+    
+    violationList.value = paginatedData
+    pagination.total = filteredData.length
+    
+    // 更新统计数据（基于所有筛选后的数据，不是分页后的数据）
+    updateStats(filteredData)
+    
   } catch (error) {
     console.error('获取违规站点列表失败:', error)
     ElMessage.error('获取违规站点列表失败')
@@ -538,24 +657,24 @@ const updateStats = (data = []) => {
   violationStats.pending = data.filter(site => site.processStatus === 'pending').length
 }
 
-// 获取状态类型
-const getStatusType = (status) => {
-  const statusMap = {
-    normal: 'success',
-    warning: 'warning',
-    violation: 'danger'
+// 获取连接类型颜色
+const getConnectTypeColor = (type) => {
+  const typeMap = {
+    'port_forward': 'primary',
+    'domain': 'success',
+    'floating_ip': 'warning'
   }
-  return statusMap[status] || 'info'
+  return typeMap[type] || 'info'
 }
 
-// 获取状态文本
-const getStatusText = (status) => {
-  const statusMap = {
-    normal: '已构建',      // 对应容器状态 2
-    warning: '未构建',     // 对应容器状态 1 和 3(未知)
-    violation: '异常'      // 对应容器状态 0(未支付) 和 4(已删除)
+// 获取连接类型文本
+const getConnectTypeText = (type) => {
+  const typeMap = {
+    'port_forward': '端口转发',
+    'domain': '域名绑定',
+    'floating_ip': '浮动IP'
   }
-  return statusMap[status] || '未知'
+  return typeMap[type] || type || '未知'
 }
 
 // 获取违规类型颜色
@@ -663,6 +782,9 @@ const handleRefresh = () => {
     type: 'info',
     duration: 2000
   })
+  // 清除缓存，强制重新获取数据
+  allSitesCache.value = []
+  cacheTimestamp.value = 0
   getList()
 }
 
@@ -1038,4 +1160,10 @@ onMounted(() => {
     grid-template-columns: 1fr;
   }
 }
+
+/* 自定义样式 */
+.text-muted {
+  color: #909399;
+  font-style: italic;
+}
 </style>