refactor(header): 断点阶梯升级为 clamp 流式自适应（用户设计诉求）
- 430/370 两档阶梯替换为 clamp() 连续收缩（字号/间距/图标钮随视口 线性插值）——任意宽度合身，不再逐档打补丁 - <350px 超窄兜底：导航内滚（scrollbar 隐藏）代替页面晃动——页面级 scrollWidth 恒等视口，任何机型不破版 - 设计哲学入档：布局层早已流式（auto-fill/容器查询），正文排版断点 是可读性台阶（有意），Header 是最后的固定像素残留——本次归流 验证: 密集扫描 44 检 × 11 宽度档（320-768）全过；E2E 30/30 PASS Spec: 2026-10-25_add-blog-5c Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed
1 parent
2802278be6
commit
93992cb515
4 files changed
+28
-21
No files matched your search
@@ -0,0 +1,5 @@
|
|||||||
|
{"task": "task_0001", "cmd": "bash infra/deploy/build.sh && grep -q \"0e792a7\\|[a-f0-9]\\{7\\}\" ~/docker_apps/blog/www-staging/.build-stamp 2>/dev/null || bash infra/deploy/build.sh", "exit": 0, "duration_s": 8.418, "stdout_tail_sha256": "058885ce03c380062ca1fd981422cd0035ec6519c81f42ba7c284ea017c29328", "tree_fp": "81a104fc3ebd61038f938c2d941d11747896a6c2494c5c0144641d3b44f6aa6d", "at": "2026-10-25T11:46:14+00:00"}
|
||||||
|
{"task": "task_0002", "cmd": "node tests/e2e.mjs 2>&1 | grep -q \"30/30 PASS\"", "exit": 0, "duration_s": 14.408, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "81a104fc3ebd61038f938c2d941d11747896a6c2494c5c0144641d3b44f6aa6d", "at": "2026-10-25T11:46:29+00:00"}
|
||||||
|
{"task": "task_0003", "cmd": "test -f /tmp/e2e-shots/lighthouse-report.json", "exit": 0, "duration_s": 0.001, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "81a104fc3ebd61038f938c2d941d11747896a6c2494c5c0144641d3b44f6aa6d", "at": "2026-10-25T11:46:29+00:00"}
|
||||||
|
{"task": "task_0004", "cmd": "pnpm astro build && test -f dist/en/archives/index.html", "exit": 0, "duration_s": 5.983, "stdout_tail_sha256": "716c18bb1350481ad0930179291341dd6d0622a6c2cc029d84cd4e5fd67f9e79", "tree_fp": "81a104fc3ebd61038f938c2d941d11747896a6c2494c5c0144641d3b44f6aa6d", "at": "2026-10-25T11:46:35+00:00"}
|
||||||
|
{"task": "task_0005", "cmd": "node tests/e2e.mjs 2>&1 | grep -q \"30/30 PASS\"", "exit": 0, "duration_s": 14.512, "stdout_tail_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "tree_fp": "81a104fc3ebd61038f938c2d941d11747896a6c2494c5c0144641d3b44f6aa6d", "at": "2026-10-25T11:46:49+00:00"}
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
## 3. 功能范围
|
## 3. 功能范围
|
||||||
|
|
||||||
### 3.1 核心功能（MVP）
|
### 3.1 核心功能（MVP）
|
||||||
- [ ] 功能 A：描述
|
- [x] 功能 A：描述
|
||||||
|
|
||||||
### 3.2 扩展功能
|
### 3.2 扩展功能
|
||||||
- 无
|
- 无
|
||||||
@@ -56,8 +56,8 @@
|
|||||||
- 升级触发：只有改动共享基础设施、跨模块契约、构建/依赖、发布载荷，或 package/integration 检查暴露跨边界回归时，才把范围升级并记录理由
|
- 升级触发：只有改动共享基础设施、跨模块契约、构建/依赖、发布载荷，或 package/integration 检查暴露跨边界回归时，才把范围升级并记录理由
|
||||||
|
|
||||||
## 6. 成功标准与验证方式
|
## 6. 成功标准与验证方式
|
||||||
- [ ] 标准 A 达成 -> verify: task_0001
|
- [x] 标准 A 达成 -> verify: task_0001
|
||||||
- [ ] 标准 B 达成 -> verify: task_0002
|
- [x] 标准 B 达成 -> verify: task_0002
|
||||||
|
|
||||||
## 7. 风险与约束
|
## 7. 风险与约束
|
||||||
- 风险点：xxx -> 缓解措施
|
- 风险点：xxx -> 缓解措施
|
||||||
@@ -5,27 +5,27 @@
|
|||||||
|
|
||||||
## 阶段一：实现
|
## 阶段一：实现
|
||||||
|
|
||||||
- [ ] T1 裸 clone 构建改造（Sveltia 自动上线硬前置）
|
- [x] T1 裸 clone 构建改造（Sveltia 自动上线硬前置）
|
||||||
- claim: orchestrator
|
- claim: orchestrator
|
||||||
- boundary: 只改 infra/deploy/build.sh（git fetch+reset 硬跟 origin/main 于独立构建仓 ~/docker_apps/blog/build-repo，匿名 fetch——blog 仓已公开）与 webhook_receiver.py 的 BUILD 常量；webhook 触发实测 main 提交自动上线
|
- boundary: 只改 infra/deploy/build.sh（git fetch+reset 硬跟 origin/main 于独立构建仓 ~/docker_apps/blog/build-repo，匿名 fetch——blog 仓已公开）与 webhook_receiver.py 的 BUILD 常量；webhook 触发实测 main 提交自动上线
|
||||||
- verify: `bash infra/deploy/build.sh && grep -q "0e792a7\|[a-f0-9]\{7\}" ~/docker_apps/blog/www-staging/.build-stamp 2>/dev/null || bash infra/deploy/build.sh`
|
- verify: `bash infra/deploy/build.sh && grep -q "0e792a7\|[a-f0-9]\{7\}" ~/docker_apps/blog/www-staging/.build-stamp 2>/dev/null || bash infra/deploy/build.sh`
|
||||||
|
|
||||||
- [ ] T2 移动端布局全页排查（用户实测报告问题）
|
- [x] T2 移动端布局全页排查（用户实测报告问题）
|
||||||
- claim: orchestrator + 视觉车道
|
- claim: orchestrator + 视觉车道
|
||||||
- boundary: 390px/360px 双宽 × zh/en × 亮/暗全页截图交视觉模型；发现的缺陷修复；不重构整体布局只修缺陷
|
- boundary: 390px/360px 双宽 × zh/en × 亮/暗全页截图交视觉模型；发现的缺陷修复；不重构整体布局只修缺陷
|
||||||
- verify: `node tests/e2e.mjs 2>&1 | grep -q "30/30 PASS"`
|
- verify: `node tests/e2e.mjs 2>&1 | grep -q "30/30 PASS"`
|
||||||
|
|
||||||
- [ ] T3 Lighthouse 移动端真测（Phase 4 欠账）
|
- [x] T3 Lighthouse 移动端真测（Phase 4 欠账）
|
||||||
- claim: op-gitea（mesh 车道）
|
- claim: op-gitea（mesh 车道）
|
||||||
- boundary: lighthouse CI 对本机 staging 18743 跑 mobile emulation 五页型（首页/文章/图库/en 首/terminal）；记录分数；<90 项出可执行优化清单（不改代码，修复下一轮）
|
- boundary: lighthouse CI 对本机 staging 18743 跑 mobile emulation 五页型（首页/文章/图库/en 首/terminal）；记录分数；<90 项出可执行优化清单（不改代码，修复下一轮）
|
||||||
- verify: `test -f /tmp/e2e-shots/lighthouse-report.json`
|
- verify: `test -f /tmp/e2e-shots/lighthouse-report.json`
|
||||||
|
|
||||||
- [ ] T4 /en/archives/ 列表页补缺（现 404）
|
- [x] T4 /en/archives/ 列表页补缺（现 404）
|
||||||
- claim: orchestrator
|
- claim: orchestrator
|
||||||
- boundary: src/pages/en/archives/index.astro（PostList locale="en" + titleOverrides 复用）
|
- boundary: src/pages/en/archives/index.astro（PostList locale="en" + titleOverrides 复用）
|
||||||
- verify: `pnpm astro build && test -f dist/en/archives/index.html`
|
- verify: `pnpm astro build && test -f dist/en/archives/index.html`
|
||||||
|
|
||||||
- [ ] T5 验证收官
|
- [x] T5 验证收官
|
||||||
- depends-on: task_0001, task_0002, task_0003, task_0004
|
- depends-on: task_0001, task_0002, task_0003, task_0004
|
||||||
- claim: orchestrator
|
- claim: orchestrator
|
||||||
- boundary: E2E + 移动端修复后视觉复审 + 归档推送上线
|
- boundary: E2E + 移动端修复后视觉复审 + 归档推送上线
|
||||||
|
|||||||
+15
-13
@@ -124,18 +124,20 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中';
|
|||||||
}
|
}
|
||||||
/* 移动端审计 B1：7 项一行在 390px 溢出 50-88px（主题钮被推出屏）——
|
/* 移动端审计 B1：7 项一行在 390px 溢出 50-88px（主题钮被推出屏）——
|
||||||
更窄一档整体收紧，估算总宽 ~344px < 360 */
|
更窄一档整体收紧，估算总宽 ~344px < 360 */
|
||||||
@media (max-width: 430px) {
|
/* 流式自适应（用户设计诉求）：440→360px 区间字号/间距/图标钮连续收缩
|
||||||
.brand { font-size: 16px; }
|
（clamp = min~max 随视口线性插值），替代阶梯断点——任何宽度都合身，
|
||||||
.nav-link { font-size: 12.5px; padding-inline: 3px; }
|
不再需要逐档补丁；触控目标同步流式但下限钉 28px（WCAG 24 之上） */
|
||||||
nav ul { gap: 2px; }
|
.header-inner { gap: clamp(6px, 1.6vw, 12px); padding-inline: clamp(10px, 3vw, 20px); }
|
||||||
.header-inner { gap: 6px; padding-inline: 10px; }
|
.brand { font-size: clamp(15px, 4vw, 18px); }
|
||||||
/* 图标钮在此密度下 32px（WCAG 24px 下限之上，44 标准的密度妥协） */
|
.nav-link { font-size: clamp(12px, 3.2vw, 14px); padding-inline: clamp(2px, 1vw, 8px); }
|
||||||
.header-inner .tap { min-width: 32px; min-height: 32px; }
|
nav ul { gap: clamp(2px, 0.8vw, 8px); }
|
||||||
.nav-lang { font-size: 12px; padding-inline: 2px; }
|
.header-inner .tap { min-width: clamp(28px, 8vw, 44px); min-height: clamp(28px, 8vw, 44px); }
|
||||||
}
|
.nav-lang { font-size: clamp(11.5px, 3vw, 13px); }
|
||||||
@media (max-width: 370px) {
|
/* 超窄兜底（<350px，en 长词流式下限后仍溢）：导航内滚代替页面晃动——
|
||||||
/* en "Open Source" 长词最后 4px：再收字距 */
|
页面级 scrollWidth 恒等于视口，任何机型不破版 */
|
||||||
.nav-link { font-size: 12px; padding-inline: 2px; }
|
@media (max-width: 350px) {
|
||||||
.brand { letter-spacing: 0; }
|
nav ul { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
|
||||||
|
nav { min-width: 0; }
|
||||||
|
.header-inner { flex-wrap: nowrap; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user