Merge pull request #99 from aice030/main

Feat: 更新前端代码，移除读写localStorage缓存操作，全部数据均通过api获取最新数据

Author: Erickw87

client/src/mock/services.ts

@@ -1707,44 +1707,21 @@ export const mockAlertRuleChangelog: AlertRuleChangelogResponse = {
 // 使用 localStorage 实现前端数据持久化
 
 /**
- * 保存数据到 localStorage
+ * 保存数据到 localStorage（已禁用）
  */
 const saveDataToStorage = () => {
-  try {
-    localStorage.setItem('mockServiceActiveVersions', JSON.stringify(mockServiceActiveVersions))
-    localStorage.setItem('mockAvailableVersions', JSON.stringify(mockAvailableVersions))
-    console.log('数据已保存到 localStorage')
-  } catch (error) {
-    console.error('保存数据到 localStorage 失败:', error)
-  }
+  // 不再保存到 localStorage，所有数据从API获取
 }
 
 /**
- * 从 localStorage 加载数据
+ * 从 localStorage 加载数据（已禁用）
  */
 const loadDataFromStorage = () => {
-  try {
-    const activeVersionsData = localStorage.getItem('mockServiceActiveVersions')
-    const availableVersionsData = localStorage.getItem('mockAvailableVersions')
-    
-    if (activeVersionsData) {
-      const parsedData = JSON.parse(activeVersionsData)
-      Object.assign(mockServiceActiveVersions, parsedData)
-      console.log('已从 localStorage 加载活跃版本数据')
-    }
-    
-    if (availableVersionsData) {
-      const parsedData = JSON.parse(availableVersionsData)
-      Object.assign(mockAvailableVersions, parsedData)
-      console.log('已从 localStorage 加载可发布版本数据')
-    }
-  } catch (error) {
-    console.error('从 localStorage 加载数据失败:', error)
-  }
+  // 不再从 localStorage 加载，所有数据从API获取
 }
 
-// 页面加载时自动从 localStorage 恢复数据
-loadDataFromStorage()
+// 页面加载时不再从 localStorage 恢复数据（已禁用）
+// loadDataFromStorage()
 
 // ==================== 服务告警状态管理 ====================
 // 管理服务节点的告警状态，用于改变拓扑图中节点的颜色
@@ -1760,31 +1737,17 @@ export type ServiceAlertStatus = 'normal' | 'pending' | 'processing'
 export const serviceAlertStatusMap: Record<string, ServiceAlertStatus> = {}
 
 /**
- * 保存服务告警状态到 localStorage
+ * 保存服务告警状态（已禁用localStorage）
  */
 const saveServiceAlertStatus = () => {
-  try {
-    localStorage.setItem('serviceAlertStatusMap', JSON.stringify(serviceAlertStatusMap))
-    console.log('服务告警状态已保存到 localStorage')
-  } catch (error) {
-    console.error('保存服务告警状态失败:', error)
-  }
+  // 不再保存到 localStorage，只在内存中维护
 }
 
 /**
- * 从 localStorage 加载服务告警状态
+ * 从 localStorage 加载服务告警状态（已禁用）
  */
 const loadServiceAlertStatus = () => {
-  try {
-    const data = localStorage.getItem('serviceAlertStatusMap')
-    if (data) {
-      const parsedData = JSON.parse(data)
-      Object.assign(serviceAlertStatusMap, parsedData)
-      console.log('已从 localStorage 加载服务告警状态')
-    }
-  } catch (error) {
-    console.error('从 localStorage 加载服务告警状态失败:', error)
-  }
+  // 不再从 localStorage 加载，改为从API获取
 }
 
 /**
@@ -1834,8 +1797,8 @@ export const clearServiceAlertStatus = (serviceName: string) => {
   console.log(`已清除服务 ${serviceName} 的告警状态`)
 }
 
-// 页面加载时自动从 localStorage 恢复服务告警状态
-loadServiceAlertStatus()
+// 页面加载时不再从 localStorage 恢复服务告警状态（已禁用）
+// loadServiceAlertStatus()
 
 // ==================== 服务版本告警状态管理 ====================
 // 让首页服务详情中的各版本颜色与告警状态同步
@@ -1917,31 +1880,17 @@ export type DeploymentStatus = 'idle' | 'deploying'
 export const serviceDeploymentStatusMap: Record<string, DeploymentStatus> = {}
 
 /**
- * 保存服务发布状态到 localStorage
+ * 保存服务发布状态（已禁用localStorage）
  */
 const saveServiceDeploymentStatus = () => {
-  try {
-    localStorage.setItem('serviceDeploymentStatusMap', JSON.stringify(serviceDeploymentStatusMap))
-    console.log('服务发布状态已保存到 localStorage')
-  } catch (error) {
-    console.error('保存服务发布状态失败:', error)
-  }
+  // 不再保存到 localStorage，只在内存中维护
 }
 
 /**
- * 从 localStorage 加载服务发布状态
+ * 从 localStorage 加载服务发布状态（已禁用）
  */
 const loadServiceDeploymentStatus = () => {
-  try {
-    const data = localStorage.getItem('serviceDeploymentStatusMap')
-    if (data) {
-      const parsedData = JSON.parse(data)
-      Object.assign(serviceDeploymentStatusMap, parsedData)
-      console.log('已从 localStorage 加载服务发布状态')
-    }
-  } catch (error) {
-    console.error('从 localStorage 加载服务发布状态失败:', error)
-  }
+  // 不再从 localStorage 加载，改为从API获取
 }
 
 /**
@@ -1973,8 +1922,8 @@ export const clearServiceDeploymentStatus = (serviceName: string) => {
   console.log(`已清除服务 ${serviceName} 的发布状态`)
 }
 
-// 页面加载时自动从 localStorage 恢复服务发布状态
-loadServiceDeploymentStatus()
+// 页面加载时不再从 localStorage 恢复服务发布状态（已禁用）
+// loadServiceDeploymentStatus()
 
 // ==================== 数据操作函数 ====================
 // 这些函数模拟后端操作数据的过程，用于支持前端的发布和回滚功能

client/src/views/AlertsView.vue

@@ -218,7 +218,6 @@ import {
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { apiService } from '@/api'
-import { updateServiceAlertStatus, updateServiceVersionAlertStatus } from '@/mock/services'
 import type { AlertsResponse, AlertIssue, AlertDetail } from '@/mock/services'
 import { marked } from 'marked'
 
@@ -397,8 +396,6 @@ const loadAlerts = async () => {
 
       alerts.value = merged.slice(0, 10)
       allAlerts.value = merged
-      // 同步拓扑服务状态
-      syncServiceAlertStatuses(allAlerts.value)
       console.log('告警数据加载成功: All', { total: merged.length })
     } else {
       const state = filterState.value === 'open' ? 'Open' : 'Closed'
@@ -415,8 +412,6 @@ const loadAlerts = async () => {
       const mergedAll = [...openResp.data.items, ...closedResp.data.items]
         .sort((a: any, b: any) => new Date(b.alertSince).getTime() - new Date(a.alertSince).getTime())
       allAlerts.value = mergedAll
-      // 同步拓扑服务状态
-      syncServiceAlertStatuses(allAlerts.value)
       console.log('告警数据加载成功:', { filter: state, count: alerts.value.length, total: mergedAll.length })
     }
   } catch (err) {
@@ -428,59 +423,6 @@ const loadAlerts = async () => {
   }
 }
 
-// 将告警状态同步到首页拓扑的服务节点颜色
-const syncServiceAlertStatuses = (issues: AlertIssue[]) => {
-  // 优先级：Pending > InProcessing > Restored > AutoRestored
-  const priority: Record<string, number> = {
-    Pending: 4,
-    InProcessing: 3,
-    Restored: 2,
-    AutoRestored: 1
-  }
-
-  // 可能需要从其他标签映射到首页的服务名
-  const prophetToServiceMap: Record<string, string> = {
-    s3apiv2: 's3'
-  }
-
-  const latestStateByService = new Map<string, { state: AlertIssue['alertState']; ts: number; prio: number }>()
-
-  for (const issue of issues) {
-    // 解析服务名：优先 labels.service，其次 prophet_service 的映射
-    const serviceLabel = issue.labels.find(l => l.key === 'service')?.value
-    const prophetService = issue.labels.find(l => l.key === 'prophet_service')?.value
-    const mapped = prophetService ? prophetToServiceMap[prophetService] : undefined
-    const serviceName = serviceLabel || mapped
-    if (!serviceName) continue
-
-    const ts = new Date(issue.alertSince).getTime()
-    const prio = priority[issue.alertState] || 0
-    const existing = latestStateByService.get(serviceName)
-    if (!existing || prio > existing.prio || (prio === existing.prio && ts > existing.ts)) {
-      latestStateByService.set(serviceName, { state: issue.alertState, ts, prio })
-    }
-
-    // 同步版本状态（如果存在 service_version 标签）
-    // 版本标签检测：兼容多种后端命名
-    const versionLabel =
-      issue.labels.find(l => l.key === 'service_version')?.value ||
-      issue.labels.find(l => l.key === 'version')?.value ||
-      issue.labels.find(l => l.key === 'serviceVersion')?.value ||
-      issue.labels.find(l => l.key === 'svc_version')?.value ||
-      issue.labels.find(l => l.key === 'deploy_version')?.value ||
-      issue.labels.find(l => l.key === 'deployVersion')?.value ||
-      issue.labels.find(l => l.key.toLowerCase().includes('version'))?.value
-    if (versionLabel) {
-      updateServiceVersionAlertStatus(serviceName, versionLabel, issue.alertState)
-    }
-  }
-
-  // 写入共享状态映射（持久化到 localStorage）
-  latestStateByService.forEach((val, service) => {
-    updateServiceAlertStatus(service, val.state)
-  })
-}
-
 // 生命周期
 onMounted(() => {
   loadAlerts()

client/src/views/HomeView.vue

@@ -643,18 +643,65 @@ const generateVersionsFromDeployState = (service: any) => {
   }
 }
 
+// 解析告警列表，提取服务告警状态
+const parseAlertsToServiceStatus = (alertsData: any) => {
+  // 优先级：Pending > InProcessing > Restored > AutoRestored
+  const priority: Record<string, number> = {
+    Pending: 4,
+    InProcessing: 3,
+    Restored: 2,
+    AutoRestored: 1
+  }
+
+  // 服务名映射
+  const prophetToServiceMap: Record<string, string> = {
+    s3apiv2: 's3'
+  }
+
+  const latestStateByService = new Map<string, { state: string; ts: number; prio: number }>()
+
+  for (const issue of alertsData) {
+    // 解析服务名：优先 labels.service，其次 prophet_service 的映射
+    const serviceLabel = issue.labels.find((l: any) => l.key === 'service')?.value
+    const prophetService = issue.labels.find((l: any) => l.key === 'prophet_service')?.value
+    const mapped = prophetService ? prophetToServiceMap[prophetService] : undefined
+    const serviceName = serviceLabel || mapped
+    if (!serviceName) continue
+
+    const ts = new Date(issue.alertSince).getTime()
+    const prio = priority[issue.alertState] || 0
+    const existing = latestStateByService.get(serviceName)
+    if (!existing || prio > existing.prio || (prio === existing.prio && ts > existing.ts)) {
+      latestStateByService.set(serviceName, { state: issue.alertState, ts, prio })
+    }
+  }
+
+  // 更新到全局状态映射
+  latestStateByService.forEach((val, service) => {
+    updateServiceAlertStatus(service, val.state)
+  })
+}
+
 // API调用函数
 const loadServicesData = async () => {
   loading.value = true
   error.value = null
   
   try {
-    // 加载服务数据 - 调用真实后端API
-    const response = await apiService.getServices()
-    const servicesResponse = response.data
+    // 并行加载服务数据和告警数据
+    const [servicesRes, openAlertsRes, closedAlertsRes] = await Promise.all([
+      apiService.getServices(),
+      apiService.getAlerts(undefined, 100, 'Open'),
+      apiService.getAlerts(undefined, 100, 'Closed')
+    ])
     
+    const servicesResponse = servicesRes.data
     servicesData.value = servicesResponse
     
+    // 解析告警状态并更新到内存
+    const allAlerts = [...openAlertsRes.data.items, ...closedAlertsRes.data.items]
+    parseAlertsToServiceStatus(allAlerts)
+    
     // 转换数据
     try {
       const { nodes: transformedNodes, edges: transformedEdges } = transformServiceData(servicesResponse)