style(ui): 美化机器人卡片，优化响应式布局

[ocetars]

先前的机器人适配器卡片视觉利用率较低，多数情况下留白过多

Modifications / 改动点

重构机器人卡片 ItemCard 布局并实现响应式网格显示

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

正常状态 UI

2025-12-25.17-41-12.mp4

异常状态 UI

2025-12-26.17-36-31.mp4

---

Checklist / 检查清单

• 😊 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。/ If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
• 👀 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。/ My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
• 🤓 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到了 requirements.txt 和 pyproject.toml 文件相应位置。/ I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
• 😮 我的更改没有引入恶意代码。/ My changes do not introduce malicious code.

Summary by Sourcery

重构共享的 ItemCard 组件布局，并将平台列表页面更新为更紧凑的网格卡片布局。

增强内容：

• 将 ItemCard 重新设计为双列布局，将内容与操作分离，添加带图标的操作按钮，并调整卡片尺寸、不透明度和边框，以实现更清晰的视觉层级。
• 将 PlatformPage 的平台列表从响应式行/列布局更改为 CSS 网格布局，通过统一的间距和内边距来提升响应性与信息密度。

Original summary in English

Summary by Sourcery

Refactor the shared ItemCard component layout and update the platform listing page to use a denser, grid-based card layout.

Enhancements:

• Redesign ItemCard into a two-column layout that separates content from actions, adds iconified action buttons, and adjusts card sizing, opacity, and borders for clearer visual hierarchy.
• Change the PlatformPage platform list from a responsive row/column layout to a CSS grid layout with consistent spacing and padding for better responsiveness and information density.

增强内容：

• 将 ItemCard 组件重新设计为两列布局，更清晰地区分内容和操作，更新带有图标的按钮样式，并调整卡片尺寸和边框，以提升视觉层级。
• 将 PlatformPage 上的平台列表从行/列布局切换为基于 CSS Grid 的条目布局，通过统一的间距和水平内边距提升响应性和信息密度。

Original summary in English

Summary by Sourcery

重构共享的 ItemCard 组件布局，并将平台列表页面更新为更紧凑的网格卡片布局。

增强内容：

• 将 ItemCard 重新设计为双列布局，将内容与操作分离，添加带图标的操作按钮，并调整卡片尺寸、不透明度和边框，以实现更清晰的视觉层级。
• 将 PlatformPage 的平台列表从响应式行/列布局更改为 CSS 网格布局，通过统一的间距和内边距来提升响应性与信息密度。

Original summary in English

Summary by Sourcery

Refactor the shared ItemCard component layout and update the platform listing page to use a denser, grid-based card layout.

Enhancements:

• Redesign ItemCard into a two-column layout that separates content from actions, adds iconified action buttons, and adjusts card sizing, opacity, and borders for clearer visual hierarchy.
• Change the PlatformPage platform list from a responsive row/column layout to a CSS grid layout with consistent spacing and padding for better responsiveness and information density.

[sourcery-ai]

Hey - 我发现了 1 个问题，并且给出了一些整体性的反馈：

• 重新设计的 ItemCard 使用了多处行内样式（例如 opacity、gaps、min-width），这些可以考虑迁移到局部作用域的 CSS 类中，方便主题定制和后续维护，尤其是在其他卡片也会采用类似布局模式的情况下。
• 当前对左侧内容区域整体使用透明度变化来表示条目被禁用，这可能会影响文本可读性；可以考虑使用更有针对性的视觉标识（例如只弱化 logo，或使用更柔和的背景）来在保留文本对比度的同时体现禁用状态。
• 新的 item-grid 为卡片使用了硬编码的边框颜色和最小宽度；可以考虑引用 Vuetify/主题变量或共享布局 token，这样在整体设计系统调整时，卡片的外观仍能保持一致。

给 AI 代理的提示

Please address the comments from this code review:

## Overall Comments
- The redesigned ItemCard uses several inline styles (e.g., opacity, gaps, min-width) that could be moved into scoped CSS classes for easier theming and maintenance, especially if other cards will adopt similar layout patterns.
- The opacity change applied to the entire left content area when an item is disabled may impact text readability; consider using a more targeted visual indicator (e.g., dimming only the logo or using a subtle background) to preserve contrast for text.
- The new item-grid uses a hard-coded border color and min-width for cards; consider referencing Vuetify/theme variables or shared layout tokens so card appearance stays consistent if the overall design system changes.

## Individual Comments

### Comment 1
<location> `dashboard/src/components/shared/ItemCard.vue:5` </location>
<code_context>
+  <v-card class="item-card hover-elevation pa-4" elevation="0">
+    <div class="d-flex flex-row fill-height">
+      <!-- Left Content -->
+      <div class="d-flex flex-column flex-grow-1" :style="{ position: 'relative', overflow: 'hidden', opacity: getItemEnabled() ? 1 : 0.6 }">
+        <div class="text-h4 font-weight-bold mb-2" :title="getItemTitle()">
+          {{ getItemTitle() }}
</code_context>

<issue_to_address>
**issue (bug_risk):** Applying opacity to the entire left column may create low-contrast text for disabled items.

`opacity: 0.6` on the entire column will reduce contrast for all text and controls and can drop below accessibility guidelines, especially for smaller fonts. Prefer a more targeted disabled styling (e.g., use different text color tokens or only dim decorative elements like the logo) so primary text stays high contrast while still indicating the disabled state.
</issue_to_address>

---

Sourcery 对开源项目是免费的 —— 如果你觉得我们的代码评审有帮助，欢迎分享 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈改进后续的代码评审。}

Original comment in English

Hey - I've found 1 issue, and left some high level feedback:

• The redesigned ItemCard uses several inline styles (e.g., opacity, gaps, min-width) that could be moved into scoped CSS classes for easier theming and maintenance, especially if other cards will adopt similar layout patterns.
• The opacity change applied to the entire left content area when an item is disabled may impact text readability; consider using a more targeted visual indicator (e.g., dimming only the logo or using a subtle background) to preserve contrast for text.
• The new item-grid uses a hard-coded border color and min-width for cards; consider referencing Vuetify/theme variables or shared layout tokens so card appearance stays consistent if the overall design system changes.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The redesigned ItemCard uses several inline styles (e.g., opacity, gaps, min-width) that could be moved into scoped CSS classes for easier theming and maintenance, especially if other cards will adopt similar layout patterns.
- The opacity change applied to the entire left content area when an item is disabled may impact text readability; consider using a more targeted visual indicator (e.g., dimming only the logo or using a subtle background) to preserve contrast for text.
- The new item-grid uses a hard-coded border color and min-width for cards; consider referencing Vuetify/theme variables or shared layout tokens so card appearance stays consistent if the overall design system changes.

## Individual Comments

### Comment 1
<location> `dashboard/src/components/shared/ItemCard.vue:5` </location>
<code_context>
+  <v-card class="item-card hover-elevation pa-4" elevation="0">
+    <div class="d-flex flex-row fill-height">
+      <!-- Left Content -->
+      <div class="d-flex flex-column flex-grow-1" :style="{ position: 'relative', overflow: 'hidden', opacity: getItemEnabled() ? 1 : 0.6 }">
+        <div class="text-h4 font-weight-bold mb-2" :title="getItemTitle()">
+          {{ getItemTitle() }}
</code_context>

<issue_to_address>
**issue (bug_risk):** Applying opacity to the entire left column may create low-contrast text for disabled items.

`opacity: 0.6` on the entire column will reduce contrast for all text and controls and can drop below accessibility guidelines, especially for smaller fonts. Prefer a more targeted disabled styling (e.g., use different text color tokens or only dim decorative elements like the logo) so primary text stays high contrast while still indicating the disabled state.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}