Feat/55(View&Controller): 实现告警记录和AI处理记录界面及其api

client/package.json

@@ -19,6 +19,7 @@
     "axios": "^1.11.0",
     "echarts": "^5.6.0",
     "element-plus": "^2.11.2",
+    "marked": "^16.2.1",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-echarts": "^7.0.3",

client/src/api/index.ts

@@ -102,10 +102,24 @@ export const apiService = {
 
   // 获取告警规则变更记录
   getAlertRuleChangelog: (start?: string, limit?: number) => {
-    const params: { start?: string; limit?: number } = {}
+    const params: any = {}
     if (start) params.start = start
     if (limit) params.limit = limit
     return api.get('/v1/changelog/alertrules', { params })
+  },
+
+  // 获取告警列表
+  getAlerts: (start?: string, limit?: number, state?: string) => {
+    const params: any = {}
+    if (start) params.start = start
+    if (limit) params.limit = limit
+    if (state) params.state = state
+    return api.get('/v1/issues', { params })
+  },
+
+  // 获取告警详情
+  getAlertDetail: (issueID: string) => {
+    return api.get(`/v1/issues/${issueID}`)
   }
 }
 

client/src/mock/api.ts

@@ -1,5 +1,5 @@
 // Mock API服务
-import { mockServicesData, mockServiceDetails, mockVersionOptions, mockScheduledReleases, mockServiceActiveVersions, mockServiceMetrics, mockAvailableVersions, mockDeploymentPlans, mockMetricsData, mockDeploymentChangelog, mockAlertRuleChangelog, type ServicesResponse, type ServiceDetail, type ServiceActiveVersionsResponse, type ServiceMetricsResponse, type AvailableVersionsResponse, type DeploymentPlansResponse, type MetricsResponse, type DeploymentChangelogResponse, type AlertRuleChangelogResponse } from './services'
+import { mockServicesData, mockServiceDetails, mockVersionOptions, mockScheduledReleases, mockServiceActiveVersions, mockServiceMetrics, mockAvailableVersions, mockDeploymentPlans, mockMetricsData, mockDeploymentChangelog, mockAlertRuleChangelog, mockAlertsData, mockAlertDetails, type ServicesResponse, type ServiceDetail, type ServiceActiveVersionsResponse, type ServiceMetricsResponse, type AvailableVersionsResponse, type DeploymentPlansResponse, type MetricsResponse, type DeploymentChangelogResponse, type AlertRuleChangelogResponse, type AlertsResponse, type AlertDetail } from './services'
 
 // 模拟网络延迟
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
@@ -152,29 +152,76 @@ export class MockApiService {
     }
   }
 
-  // 获取告警规则变更记录 - 新的API接口
+  // 获取告警规则变更记录
   static async getAlertRuleChangelog(start?: string, limit?: number): Promise<AlertRuleChangelogResponse> {
-    await delay(300)
+    await delay(400) // 模拟网络延迟
     console.log(`Mock API: 获取告警规则变更记录 - start: ${start}, limit: ${limit}`)
-
-    // 模拟分页逻辑
+
     let items = [...mockAlertRuleChangelog.items]
-
-    // 如果有start参数，模拟从该时间点开始的数据
+
+    // 1. 先按时间排序（从新到旧）
+    items.sort((a, b) => new Date(b.editTime).getTime() - new Date(a.editTime).getTime())
+
+    // 2. 根据 start 参数筛选数据（分页逻辑）
     if (start) {
       const startTime = new Date(start)
       items = items.filter(item => new Date(item.editTime) <= startTime)
     }
+
+    // 3. 根据limit限制返回数量
+    if (limit && limit > 0) {
+      items = items.slice(0, limit)
+    }
+
+    return {
+      items,
+      next: items.length > 0 ? items[items.length - 1].editTime : undefined
+    }
+  }
+
+  // 获取告警列表
+  static async getAlerts(start?: string, limit: number = 10, state?: string): Promise<AlertsResponse> {
+    await delay(400) // 模拟网络延迟
+    console.log(`Mock API: 获取告警列表 - start: ${start}, limit: ${limit}, state: ${state}`)
 
-    // 如果有limit参数，限制返回数量
+    let items = [...mockAlertsData.items]
+
+    // 1. 先按时间排序（从新到旧）
+    items.sort((a, b) => new Date(b.alertSince).getTime() - new Date(a.alertSince).getTime())
+
+    // 2. 根据 start 参数筛选数据（分页逻辑）
+    if (start) {
+      const startTime = new Date(start)
+      items = items.filter(alert => new Date(alert.alertSince) <= startTime)
+    }
+
+    // 3. 根据state参数过滤数据
+    if (state) {
+      items = items.filter(alert => alert.state === state)
+    }
+
+    // 4. 根据limit限制返回数量
     if (limit && limit > 0) {
       items = items.slice(0, limit)
     }
 
     return {
       items,
-      next: items.length > 0 ? items[items.length - 1].editTime : undefined
+      next: items.length > 0 ? items[items.length - 1].alertSince : ''
+    }
+  }
+
+  // 获取告警详情
+  static async getAlertDetail(issueID: string): Promise<AlertDetail> {
+    await delay(300) // 模拟网络延迟
+    console.log(`Mock API: 获取告警详情 - issueID: ${issueID}`)
+
+    const alertDetail = mockAlertDetails[issueID]
+    if (!alertDetail) {
+      throw new Error(`告警详情不存在: ${issueID}`)
     }
+
+    return alertDetail
   }
 }