From 42ffcf73c5a14a9c9d01714f7b136b63a30a9254 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 18 Sep 2026 16:16:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20spec=E5=90=B8=E6=94=B6=E5=AE=A1?= =?UTF-8?q?=E6=9F=A5=E4=BF=AE=E6=AD=A3=E2=80=94=E2=80=94=E6=97=A7=E5=AA=92?= =?UTF-8?q?=E4=BD=93=E6=9F=A5=E8=AF=A2=E5=BF=85=E9=A1=BB=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?/activeTab=E7=B1=BB=E5=9E=8B=E4=B8=8E=E5=88=9D=E5=A7=8B?= =?UTF-8?q?=E5=80=BC/1100=E9=AA=8C=E8=AF=81=E8=A7=86=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Code --- .../specs/2026-09-18-visitor-detail-tabs-design.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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 通过；标准部署流程上线。