Feat: 更新前端代码，移除读写localStorage缓存操作，全部数据均通过api获取最新数据 #99
Conversation
Summary of ChangesHello @aice030, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在优化前端数据管理策略，通过完全移除对 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
🚀 Frontend deployed successfully! 📱 Preview URL: https://zeroops-9d8a9i065-liuscrafts-projects.vercel.app ✅ Build completed successfully |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次PR的目标是移除前端的localStorage缓存，改为每次都通过API获取最新数据。整体代码变更符合这个目标。
我的审查意见主要集中在以下两点：
- 代码清理：在
client/src/mock/services.ts中，与localStorage相关的函数被置空但未被移除，建议进行彻底清理以提高代码可维护性。 - 潜在的逻辑回归：在
client/src/views/HomeView.vue中，新实现的parseAlertsToServiceStatus函数相比它所替代的旧函数，缺少了对服务版本告警状态的更新逻辑，这可能导致UI显示不正确。同时，该函数也存在类型定义不明确的问题。
具体的修改建议请见文件中的评论。
| 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) | ||
| }) | ||
| } |
There was a problem hiding this comment.
新添加的 parseAlertsToServiceStatus 函数存在两个问题：
- 类型不明确: 参数
alertsData和循环变量l使用了any类型，这降低了代码的类型安全性和可读性。 - 缺少关键逻辑: 该函数遗漏了同步服务版本告警状态的逻辑。这部分逻辑在被替换的
syncServiceAlertStatuses函数中是存在的，对于在UI上正确显示各版本的状态颜色至关重要，遗漏它可能导致显示错误。
建议进行如下修改，同时解决这两个问题。请注意，你需要在文件顶部导入 AlertIssue, AlertLabel 和 updateServiceVersionAlertStatus 类型和函数。
const parseAlertsToServiceStatus = (alertsData: 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: string; ts: number; prio: number }>()
for (const issue of alertsData) {
// 解析服务名：优先 labels.service，其次 prophet_service 的映射
const serviceLabel = issue.labels.find((l: AlertLabel) => l.key === 'service')?.value
const prophetService = issue.labels.find((l: AlertLabel) => 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: AlertLabel) => l.key === 'service_version')?.value ||
issue.labels.find((l: AlertLabel) => l.key === 'version')?.value ||
issue.labels.find((l: AlertLabel) => l.key === 'serviceVersion')?.value ||
issue.labels.find((l: AlertLabel) => l.key === 'svc_version')?.value ||
issue.labels.find((l: AlertLabel) => l.key === 'deploy_version')?.value ||
issue.labels.find((l: AlertLabel) => l.key === 'deployVersion')?.value ||
issue.labels.find((l: AlertLabel) => l.key.toLowerCase().includes('version'))?.value
if (versionLabel) {
updateServiceVersionAlertStatus(serviceName, versionLabel, issue.alertState)
}
}
// 更新到全局状态映射
latestStateByService.forEach((val, service) => {
updateServiceAlertStatus(service, val.state)
})
}
| 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获取 | ||
| } |
There was a problem hiding this comment.
这个PR移除了 localStorage 的使用，非常好。但目前只是将相关函数 (saveDataToStorage, loadDataFromStorage, saveServiceAlertStatus, loadServiceAlertStatus 等) 的函数体清空，而函数本身和对它们的调用仍然保留在代码中。
为了使代码更整洁、更易于维护，建议将这些已无实际作用的函数以及所有对它们的调用完全移除。例如，saveDataToStorage 函数的调用在 removeVersionFromAvailable 和 addVersionToAvailable 等函数中仍然存在。
如果未来可能需要恢复这些功能，通过 Git 历史记录来找回会是更好的选择。
2 participants
变更背景和解决方案
关联issue: #
文档更新（架构文档、API文档、升级文档）
Checklist