From 5e127ce4eca2085324eb3c94192da113a0e09517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 18 Sep 2026 16:13:03 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=AE=BF=E5=AE=A2=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5=E4=B8=89=E6=A0=8FTab=E5=8C=96=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Code --- .../2026-09-18-visitor-detail-tabs-design.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md 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 new file mode 100644 index 0000000..fa0557c --- /dev/null +++ b/docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md @@ -0,0 +1,45 @@ +# 访客详情页三栏 Tab 化 — 设计文档 + +日期：2026-09-18 +分支：m1 +状态：设计已获用户批准 +文件：admin/src/views/tracker/visitor/detail.vue（唯一改动文件，1479 行） + +## 背景 + +访客详情页现状：头部访客卡 → 4 统计卡（全宽横排）→ 双栏主体（左=访问时间线卡，右=来源证据+访问环境）→ 底部卡片（已有 ElTabs：会话/原始数据）。用户要求把「访问时间线/会话/原始数据」合并为一组 tab，页面重组为三栏。 + +## 目标布局 + +``` +头部访客卡（全宽，不动） +┌────────────────────────┬──────────────┬──────────────┐ +│ 左栏 2fr │ 中栏 1fr │ 右栏 1fr │ +│ ElTabs： │ 4 统计卡 │ 访问环境 │ +│ [访问时间线|会话(N)|原始数据] │ （2×2 网格） │ （行式字段） │ +│ │ ──────────── │ │ +│ tab 内容区 │ 来源证据 │ │ +└────────────────────────┴──────────────┴──────────────┘ +``` + +- 原全宽横排 4 统计卡区取消，卡片迁入中栏改 2×2（窄卡形态：图标+标签+数字，"3分24秒"类值字号略缩） +- 左栏 ElTabs 三 pane：**访问时间线（默认）**/会话（N）（label 带计数，沿用现有写法）/原始数据 +- 时间线工具行（近7/30/90天 RadioGroup + 正序/倒序按钮）随迁入 tab pane 顶部 +- 底部 vd-bottom-card 整卡删除，两个 ElTabPane 原样迁入左栏 tabs +- 会话详情抽屉、原始数据抽屉**不动**（跨 tab 触发正常） + +## 响应式降级 + +- **>1400px**：三栏（2fr / 1fr / 1fr，gap 沿用现值） +- **≤1400px**：两栏——右栏（访问环境）下沉至中栏底部（来源证据下方） +- **≤1000px**：单栏堆叠，顺序：tabs → 统计卡 → 来源证据 → 访问环境 + +## 行为约定 + +- 默认激活 tab = timeline；activeTab 状态沿用现有 ref，keepAlive 访客切换时 tab 选中态保留 +- 纯 UI 重组：数据加载、API、抽屉逻辑、时间线/表格/来源证据/访问环境的内部实现**零改动** +- 表格迁入后列 min-width 保留，ElTable 自带横向滚动兜底窄容器 + +## 验证 + +Playwright 三档视口（1920/1365/900）截图核对布局与降级形态；tab 切换/抽屉打开/时间线工具行功能冒烟；pnpm build 通过；标准部署流程上线。