浅念
50 lines
3.5 KiB
Markdown
50 lines
3.5 KiB
Markdown
# 访客详情页三栏 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 沿用现值 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,·)` 防内容撑破）。
|
||
|
||
## 行为约定
|
||
|
||
- `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/1100/900）截图核对三栏/两栏/单栏形态（1100 专为覆盖新旧断点交界）；tab 切换/抽屉打开/时间线工具行功能冒烟；pnpm build 通过；标准部署流程上线。
|