xinyouhe/fangke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 计划修正底卡/抽屉行号锚点（329止，332+抽屉严禁触碰）+断点advisory吸收

Browse Source 
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-18 16:23:44 +08:00
parent a38da904f1
commit 14d1caf9e8
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/superpowers/plans/2026-09-18-visitor-detail-tabs.md
+9 -12
View File
@@ -10,9 +10,9 @@
**Spec:** docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md **Spec:** docs/superpowers/specs/2026-09-18-visitor-detail-tabs-design.md
**现状锚点（实现者必读）**： **现状锚点（实现者必读，行号已对照实测）**：
- 模板：62-75 行 4 统计卡横排（`div.vd-stats`）；77-228 行 `div.vd-main` 双栏（78-227 左=时间线卡 `vd-timeline-card`；167-227 右=`div.vd-side` 含来源证据+访问环境）；230-370 行 `div.vd-bottom-card`（ElTabs：sessions/raw 两 pane） - 模板：62-75 行 4 统计卡横排（`div.vd-stats`）；77-228 行 `div.vd-main` 双栏（78-227 左=时间线卡 `vd-timeline-card`；167-227 右=`div.vd-side` 含来源证据+访问环境）；**231-329 行 `div.vd-bottom-card`**（ElTabs：235-272 sessions pane；276-326 raw pane；底卡闭合 328-329）；**332-369 行是原始数据抽屉 ElDrawer——绝对不动**；330 行 `</template>` 闭合 v-else 边界，重组不得越界
- 状态：695 行 `const activeTab = ref<'sessions' | 'raw'>('sessions')`；811 行附近 `watch(activeTab, ...)` 只匹配 `'raw'`（懒加载 rawBatches，**无需改动**） - 状态：695 行 `const activeTab = ref<'sessions' | 'raw'>('sessions')`；811 行附近 `watch(activeTab, ...)` 只匹配 `'raw'`（懒加载 rawBatches，**无需改动**）；858-874 `ensureLoad` 无条件加载时间线，默认 timeline tab 无需额外加载逻辑
- 样式：1093-1099 `.vd-main`（`minmax(0,1fr) 340px`）；1101-1106 `.vd-side`；1409-1412 `.vd-bottom-card`；1463-1478 旧媒体查询（1200px 单栏 + 900px stats 两列） - 样式：1093-1099 `.vd-main`（`minmax(0,1fr) 340px`）；1101-1106 `.vd-side`；1409-1412 `.vd-bottom-card`；1463-1478 旧媒体查询（1200px 单栏 + 900px stats 两列）
- 统计卡数据：`statTiles` computed（模板 v-for），**不改动** - 统计卡数据：`statTiles` computed（模板 v-for），**不改动**
@@ -31,13 +31,13 @@ const activeTab = ref<'timeline' | 'sessions' | 'raw'>('timeline')
（TS 会强制模板 v-model 类型吻合；`watch(activeTab)` 只匹配 'raw' 不动。） （TS 会强制模板 v-model 类型吻合；`watch(activeTab)` 只匹配 'raw' 不动。）
- [ ] **Step 2: 模板重组**（62-370 行区段重排，结构如下）： - [ ] **Step 2: 模板重组**（62-329 行区段重排；**330 行 `</template>` 与 332+ 抽屉严禁触碰**）：
``` ```
删除：div.vd-stats（62-75 全宽横排区）——statTiles v-for 块移入中栏 删除：div.vd-stats（62-75 全宽横排区）——statTiles v-for 块移入中栏
删除：div.vd-bottom-card 外壳（230-231 与 369-370 的开闭标签）——两个 ElTabPane 内容保留 删除：div.vd-bottom-card 外壳（231 与 328-329 的开闭标签）——两个 ElTabPane 内容保留
新的主体结构（替换现 77-370）： 新的主体结构（替换现 77-329）：
<div class="vd-main"> <div class="vd-main">
<!-- 左栏：三 tab --> <!-- 左栏：三 tab -->
<div class="vd-card vd-tabs-card"> <div class="vd-card vd-tabs-card">
@@ -51,7 +51,7 @@ const activeTab = ref<'timeline' | 'sessions' | 'raw'>('timeline')
<!-- 原底部 sessions pane 内容原样迁入（235-272） --> <!-- 原底部 sessions pane 内容原样迁入（235-272） -->
</ElTabPane> </ElTabPane>
<ElTabPane label="原始数据" name="raw"> <ElTabPane label="原始数据" name="raw">
<!-- 原底部 raw pane 内容原样迁入（276-368） --> <!-- 原底部 raw pane 内容原样迁入（276-326） -->
</ElTabPane> </ElTabPane>
</ElTabs> </ElTabs>
</div> </div>
@@ -117,12 +117,12 @@ Co-Authored-By: Claude Code <noreply@anthropic.com>"
- [ ] **Step 4: 断点替换**（1463-1478 整块替换）： - [ ] **Step 4: 断点替换**（1463-1478 整块替换）：
```scss ```scss
// 响应式：两栏（访问环境下沉中栏底）→ 单栏 // 响应式：两栏（访问环境整行下沉）→ 单栏
@media (max-width: 1400px) { @media (max-width: 1400px) {
.vd-main { .vd-main {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
} }
// 第三栏（访问环境）flow 到下方占满两栏 // 第三栏（访问环境）flow 到下方占满整行（与 spec"来源证据下方"等价实现：整行下沉，1100 档截图确认观感）
.vd-main > :last-child { .vd-main > :last-child {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -131,9 +131,6 @@ Co-Authored-By: Claude Code <noreply@anthropic.com>"
.vd-main { .vd-main {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
.vd-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} }
``` ```