41 lines
2.5 KiB
Markdown
41 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: "公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix"
|
|||
|
|
type: quick-fix
|
|||
|
|
date: 2026-06-07
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix
|
|||
|
|
|
|||
|
|
## Bug
|
|||
|
|
1. 桌面 Header 内容固定在 `max-w-[1280px]`，更宽的视口下不能 expand，左右出现大面积空白。
|
|||
|
|
2. 在中等宽度（约 1000–1280px）`<nav>` 通过 `overflow-x-auto` 横向滚动来塞 6 个导航项，结果首尾字符被滚动容器边缘切掉，看起来像 "All assets" 变成 "ll assets"、"Popular" 变成 "Popula"，类似被 overlay 挡住。
|
|||
|
|
|
|||
|
|
## Root Cause
|
|||
|
|
- `PublicLayout.tsx` 桌面 Header 内层容器固定 `mx-auto max-w-[1280px]`，限制了宽屏扩展。
|
|||
|
|
- nav 在 `min-[1000px]` 就显示出来，但实际所需宽度（≈1230px）大于该断点下的可用空间，于是用 `overflow-x-auto` 做兜底，造成视觉裁切。
|
|||
|
|
|
|||
|
|
## Fix
|
|||
|
|
- 移除 Header 桌面内层容器的 `max-w-[1280px]`，改用 `w-full`，宽屏会自然 expand 到视口宽度。
|
|||
|
|
- 将 nav 与移动菜单按钮的显示断点从 `min-[1000px]` 提升到 `xl`（1280px），nav 出现时永远有足够空间，不需要横向滚动。
|
|||
|
|
- 删除 nav 上的 `overflow-x-auto overflow-y-hidden` 和 `header-nav-scroll` 类，以及 `index.css` 中废弃的 `.header-nav-scroll` 规则。
|
|||
|
|
|
|||
|
|
### Files Modified
|
|||
|
|
- `src/layouts/PublicLayout.tsx`
|
|||
|
|
- Header 桌面行：`mx-auto max-w-[1280px] xl:px-6` → `w-full xl:px-10`，整体可随视口扩展。
|
|||
|
|
- nav：`min-[1000px]:flex` → `xl:flex`，去掉 `overflow-x-auto` 与 `header-nav-scroll`。
|
|||
|
|
- 右侧操作区与桌面 burger：`min-[1000px]:*` → `xl:*`，保持与 nav 同步切换。
|
|||
|
|
- 移动菜单抽屉：`min-[1000px]:hidden` → `xl:hidden`。
|
|||
|
|
- `src/index.css` — 移除已无用的 `.header-nav-scroll` 规则。
|
|||
|
|
|
|||
|
|
## Verification
|
|||
|
|
- `npx tsc --noEmit` 通过。
|
|||
|
|
- `npm run format:check` 通过。
|
|||
|
|
- `npm test` 全 49 测试通过。
|
|||
|
|
- 行为预期：
|
|||
|
|
- 视口 ≥1280px：nav 完整显示，无任何边缘裁切；Header 内容随视口加宽继续 expand。
|
|||
|
|
- 视口 <1280px：自动切换到 burger 抽屉（原本 1000–1280 的横向滚动 nav 不再出现）。
|
|||
|
|
|
|||
|
|
## Notes
|
|||
|
|
- 中等宽度（1000–1280）原本能直接看到 nav，现在改成 burger，这是为了完全消除文字裁切。是否要保留中等宽度的 nav 是设计取舍，目前以用户「不允许文字被裁」的要求为优先。
|
|||
|
|
- 主内容 `<main>` 仍保留 `max-w-[1280px]`；如需主内容也跟随扩展，可后续单独调整。
|