From 93992cb5150f027d99ef4dd9b7fd098e8158a751 Mon Sep 17 00:00:00 2001 From: wait4xx Date: Sun, 25 Oct 2026 19:49:53 +0800 Subject: [PATCH] =?UTF-8?q?refactor(header):=20=E6=96=AD=E7=82=B9=E9=98=B6?= =?UTF-8?q?=E6=A2=AF=E5=8D=87=E7=BA=A7=E4=B8=BA=20clamp=20=E6=B5=81?= =?UTF-8?q?=E5=BC=8F=E8=87=AA=E9=80=82=E5=BA=94=EF=BC=88=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E8=AF=89=E6=B1=82=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .spec/specs/2026-10-25_add-blog-5c/runs.jsonl | 5 ++++ .spec/specs/2026-10-25_add-blog-5c/spec.md | 6 ++-- .spec/specs/2026-10-25_add-blog-5c/tasks.md | 10 +++---- src/components/Header.astro | 28 ++++++++++--------- 4 files changed, 28 insertions(+), 21 deletions(-) create mode 100644 .spec/specs/2026-10-25_add-blog-5c/runs.jsonl diff --git a/.spec/specs/2026-10-25_add-blog-5c/runs.jsonl b/.spec/specs/2026-10-25_add-blog-5c/runs.jsonl new file mode 100644 index 0000000..ada89cd --- /dev/null +++ b/.spec/specs/2026-10-25_add-blog-5c/runs.jsonl @@ -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"} diff --git a/.spec/specs/2026-10-25_add-blog-5c/spec.md b/.spec/specs/2026-10-25_add-blog-5c/spec.md index cd60f5e..a925681 100644 --- a/.spec/specs/2026-10-25_add-blog-5c/spec.md +++ b/.spec/specs/2026-10-25_add-blog-5c/spec.md @@ -27,7 +27,7 @@ ## 3. 功能范围 ### 3.1 核心功能（MVP） -- [ ] 功能 A：描述 +- [x] 功能 A：描述 ### 3.2 扩展功能 - 无 @@ -56,8 +56,8 @@ - 升级触发：只有改动共享基础设施、跨模块契约、构建/依赖、发布载荷，或 package/integration 检查暴露跨边界回归时，才把范围升级并记录理由 ## 6. 成功标准与验证方式 -- [ ] 标准 A 达成 -> verify: task_0001 -- [ ] 标准 B 达成 -> verify: task_0002 +- [x] 标准 A 达成 -> verify: task_0001 +- [x] 标准 B 达成 -> verify: task_0002 ## 7. 风险与约束 - 风险点：xxx -> 缓解措施 \ No newline at end of file diff --git a/.spec/specs/2026-10-25_add-blog-5c/tasks.md b/.spec/specs/2026-10-25_add-blog-5c/tasks.md index ec40a70..20bb646 100644 --- a/.spec/specs/2026-10-25_add-blog-5c/tasks.md +++ b/.spec/specs/2026-10-25_add-blog-5c/tasks.md @@ -5,27 +5,27 @@ ## 阶段一：实现 -- [ ] T1 裸 clone 构建改造（Sveltia 自动上线硬前置） +- [x] T1 裸 clone 构建改造（Sveltia 自动上线硬前置） - 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 提交自动上线 - 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 + 视觉车道 - boundary: 390px/360px 双宽 × zh/en × 亮/暗全页截图交视觉模型；发现的缺陷修复；不重构整体布局只修缺陷 - 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 车道） - boundary: lighthouse CI 对本机 staging 18743 跑 mobile emulation 五页型（首页/文章/图库/en 首/terminal）；记录分数；<90 项出可执行优化清单（不改代码，修复下一轮） - verify: `test -f /tmp/e2e-shots/lighthouse-report.json` -- [ ] T4 /en/archives/ 列表页补缺（现 404） +- [x] T4 /en/archives/ 列表页补缺（现 404） - claim: orchestrator - boundary: src/pages/en/archives/index.astro（PostList locale="en" + titleOverrides 复用） - verify: `pnpm astro build && test -f dist/en/archives/index.html` -- [ ] T5 验证收官 +- [x] T5 验证收官 - depends-on: task_0001, task_0002, task_0003, task_0004 - claim: orchestrator - boundary: E2E + 移动端修复后视觉复审 + 归档推送上线 diff --git a/src/components/Header.astro b/src/components/Header.astro index 0257481..b0253ad 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -124,18 +124,20 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中'; } /* 移动端审计 B1：7 项一行在 390px 溢出 50-88px（主题钮被推出屏）—— 更窄一档整体收紧，估算总宽 ~344px < 360 */ - @media (max-width: 430px) { - .brand { font-size: 16px; } - .nav-link { font-size: 12.5px; padding-inline: 3px; } - nav ul { gap: 2px; } - .header-inner { gap: 6px; padding-inline: 10px; } - /* 图标钮在此密度下 32px（WCAG 24px 下限之上，44 标准的密度妥协） */ - .header-inner .tap { min-width: 32px; min-height: 32px; } - .nav-lang { font-size: 12px; padding-inline: 2px; } - } - @media (max-width: 370px) { - /* en "Open Source" 长词最后 4px：再收字距 */ - .nav-link { font-size: 12px; padding-inline: 2px; } - .brand { letter-spacing: 0; } + /* 流式自适应（用户设计诉求）：440→360px 区间字号/间距/图标钮连续收缩 + （clamp = min~max 随视口线性插值），替代阶梯断点——任何宽度都合身， + 不再需要逐档补丁；触控目标同步流式但下限钉 28px（WCAG 24 之上） */ + .header-inner { gap: clamp(6px, 1.6vw, 12px); padding-inline: clamp(10px, 3vw, 20px); } + .brand { font-size: clamp(15px, 4vw, 18px); } + .nav-link { font-size: clamp(12px, 3.2vw, 14px); padding-inline: clamp(2px, 1vw, 8px); } + nav ul { gap: clamp(2px, 0.8vw, 8px); } + .header-inner .tap { min-width: clamp(28px, 8vw, 44px); min-height: clamp(28px, 8vw, 44px); } + .nav-lang { font-size: clamp(11.5px, 3vw, 13px); } + /* 超窄兜底（<350px，en 长词流式下限后仍溢）：导航内滚代替页面晃动—— + 页面级 scrollWidth 恒等于视口，任何机型不破版 */ + @media (max-width: 350px) { + nav ul { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } + nav { min-width: 0; } + .header-inner { flex-wrap: nowrap; } }