docs: 访客详情页三栏Tab化设计文档

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-18 16:13:03 +08:00
parent 6173d97df0
commit 5e127ce4ec
1 changed files with 45 additions and 0 deletions
@@ -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 通过；标准部署流程上线。