diff --git a/docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md b/docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md index fa0557c..3ebbde0 100644 --- a/docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md +++ b/docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md @@ -30,16 +30,20 @@ ## 响应式降级 -- **>1400px**:三栏(2fr / 1fr / 1fr,gap 沿用现值) +- **>1400px**:三栏(2fr / 1fr / 1fr,gap 沿用现值 20px) - **≤1400px**:两栏——右栏(访问环境)下沉至中栏底部(来源证据下方) - **≤1000px**:单栏堆叠,顺序:tabs → 统计卡 → 来源证据 → 访问环境 +**旧媒体查询替换(必须)**:现有样式尾部 `@media (max-width: 1200px)` 的 `.vd-main` 单栏规则与 `@media (max-width: 900px)` 的 `.vd-stats` 两列规则**删除**,由上述新断点方案整体取代(否则 1001-1200px 区间旧规则抢先塌单栏,与新 ≤1400 两栏矛盾);900px 规则中 `.vd-hstat-divider` 属头部卡(不动区),保留。三栏网格建议复用 `.vd-main` 类改 `grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)`(`minmax(0,·)` 防内容撑破)。 + ## 行为约定 -- 默认激活 tab = timeline;activeTab 状态沿用现有 ref,keepAlive 访客切换时 tab 选中态保留 +- `activeTab`(detail.vue:695)类型联合扩展为 `'timeline' | 'sessions' | 'raw'`,**初始值改为 'timeline'**;keepAlive 访客切换时 tab 选中态保留 +- 现有 `watch(activeTab)` 懒加载只匹配 `'raw'`(detail.vue:811)——**无需扩展**(时间线/会话随详情加载) +- 时间线 truncated 提示 ElAlert(115-122 行)随工具行一起迁入 tab pane - 纯 UI 重组:数据加载、API、抽屉逻辑、时间线/表格/来源证据/访问环境的内部实现**零改动** - 表格迁入后列 min-width 保留,ElTable 自带横向滚动兜底窄容器 ## 验证 -Playwright 三档视口(1920/1365/900)截图核对布局与降级形态;tab 切换/抽屉打开/时间线工具行功能冒烟;pnpm build 通过;标准部署流程上线。 +Playwright 四档视口(1920/1365/1100/900)截图核对三栏/两栏/单栏形态(1100 专为覆盖新旧断点交界);tab 切换/抽屉打开/时间线工具行功能冒烟;pnpm build 通过;标准部署流程上线。