feat: 优化前端布局为流动式响应式设计

- 移除 Dashboard max-width 限制，充分利用屏幕空间
- Summary Cards 和 Target Cards 改为 Flexbox wrap 流动布局
- 卡片固定宽度 280px，根据页面宽度自动调整单行数量
- 添加平滑过渡动画效果（0.3s ease）
- 移除移动端媒体查询覆盖规则
- 同步更新 card-dashboard 规格文档

openspec/specs/card-dashboard/spec.md

@@ -20,15 +20,27 @@ Dashboard SHALL 按分组展示所有拨测目标，每个分组包含带统计
 - **THEN** 分组标题 SHALL 显示 "默认分组"
 
 ### Requirement: 响应式卡片网格
-Dashboard SHALL 使用固定宽度的卡片配合响应式网格布局。
+Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器无最大宽度限制。
+
+#### Scenario: Dashboard 容器占满宽度
+- **WHEN** 用户打开 Dashboard 页面
+- **THEN** Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制
 
 #### Scenario: 卡片固定宽度
-- **WHEN** 页面渲染卡片
-- **THEN** 每个卡片 SHALL 固定宽度 280px
+- **WHEN** 页面渲染卡片（包括 Summary Cards 和 Target Cards）
+- **THEN** 每个卡片 SHALL 固定宽度 280px，使用 `flex-shrink: 0` 防止收缩
 
-#### Scenario: 响应式列数
+#### Scenario: 流动式布局
 - **WHEN** 视口宽度变化
-- **THEN** 卡片网格 SHALL 自动调整列数，使用 CSS Grid auto-fill 适配可用空间
+- **THEN** 卡片网格 SHALL 使用 Flexbox wrap 自动换行，根据可用宽度调整单行卡片数量
+
+#### Scenario: 卡片左对齐
+- **WHEN** 页面渲染卡片网格
+- **THEN** 卡片 SHALL 左对齐排列，右侧自然留白
+
+#### Scenario: 统一间距
+- **WHEN** 页面渲染 Summary Cards 和 Target Cards
+- **THEN** 两种卡片网格 SHALL 使用相同的 gap 间距（16px）
 
 ### Requirement: 目标卡片内容
 每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线。
@@ -61,3 +73,14 @@ Dashboard SHALL 使用固定宽度的卡片配合响应式网格布局。
 #### Scenario: 卡片点击打开详情
 - **WHEN** 用户点击某个目标卡片
 - **THEN** 系统 SHALL 打开该目标的详情模态框
+
+### Requirement: 平滑过渡动画
+卡片 SHALL 具有平滑的交互过渡动画效果。
+
+#### Scenario: 卡片悬停动画
+- **WHEN** 鼠标悬停在卡片上
+- **THEN** 卡片 SHALL 平滑过渡显示上浮效果（阴影加深、轻微上移），过渡时长 0.3s
+
+#### Scenario: 布局变化过渡
+- **WHEN** 视口宽度变化导致卡片重新排列
+- **THEN** 卡片位置变化 SHALL 有平滑的过渡动画