Fix: 优化告警记录页面，限制了每一个告警栏中的各个标签的展示长度

[aice030]

变更背景和解决方案

关联issue: #

文档更新（架构文档、API文档、升级文档）

Checklist

• 确认是否有文档更新
• 确认是否自测
• 确认是否考虑兼容升级，不兼容升级需要有对应的解决方案
• 确认是否考虑添加监控指标
• API 设计是否符合 API 设计规范, 如果没有 API 变更，请忽略
• 我已经添加了相关人员到 Reviewers 列表中
• 我已经设置了 Development 关联的 Issue

[gemini-code-assist]

Summary of Changes

Hello @aice030, I'm Gemini Code Assist¹! 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

• 告警标签显示优化: 限制了告警记录页面中每个告警栏内标签的显示长度，过长的标签将显示省略号，并确保标签能够正确换行，提升了可读性。
• 布局间距调整: 增加了告警内容区域的整体间距，将 gap 值从 12px 调整为 16px，以提升视觉舒适度。
• 标题和头部布局改进: 优化了告警标题和头部区域的弹性布局，确保在内容过长时能够正确断词、换行和显示，避免溢出，并保持元素的稳定性。

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

本次变更对告警记录页面的UI进行了优化，主要解决了标签内容过长时导致的布局问题。通过为标签设置最大宽度并使用文本溢出省略号，有效地提升了界面的整洁度和可读性。CSS的改动合理，运用了现代CSS技术来处理弹性布局和文本截断。代码质量不错，我只发现一处可以简化CSS的地方，以提高代码的可维护性。

[gemini-code-assist]

在 .label-tag 规则中，overflow, text-overflow 和 white-space 属性是多余的。因为这些属性已经在 :deep(.el-tag__content) 选择器中为内部元素设置了，而文本截断正是在该内部元素上发生的。为了保持CSS的简洁和可维护性，建议从父元素中移除这些重复的属性。我还建议添加 vertical-align: middle; 以改善标签与其他行内元素的对齐。

.label-tag {
  font-size: 12px;
  max-width: 200px;
  display: inline-block;
  direction: ltr;
  vertical-align: middle;
}

[github-actions]

🚀 Frontend deployed successfully!

📱 Preview URL: https://zeroops-kdfkgwcxr-liuscrafts-projects.vercel.app

✅ Build completed successfully

[niupilot]

Code Review Summary

Overall Assessment: The CSS changes are well-implemented and follow best practices. However, a critical XSS vulnerability exists in the codebase that needs immediate attention.

✅ Approved Changes

• Clean CSS implementation with proper flexbox handling
• Good text truncation strategy with max-width: 200px on labels
• Correct use of Vue 3 deep selectors for Element Plus components
• Performance-positive changes that prevent layout thrashing

🚨 Critical Security Issue

XSS vulnerability at line 160 - v-html renders unsanitized markdown. This must be fixed before merging.

Recommendation: Implement DOMPurify sanitization before deployment.

[niupilot]

💡 Enhancement Suggestion: Add a tooltip to show full label content when truncated. Users may need to see the complete label text for security auditing or troubleshooting.

<el-tag 
  v-for="label in alert.labels" 
  :key="label.key"
  size="small" 
  type="info" 
  class="label-tag"
  :title="`${label.key}=${label.value}`"
>
  {{ label.key }}={{ label.value }}
</el-tag>