seaislee1209
|
6b13cfff70
|
fix(admin): 笔记本 14寸 Safari 翻页按钮被截 — 根因三件套修法
用户报:Mac Safari + 14寸笔记本,/admin/records 翻页按钮永远在屏幕外,
拖动能看到内容超出但滚到底也看不见翻页按钮。
根因三个叠加:
1. 100vh 在 Safari 桌面端不可靠 — 算的是含工具栏/书签栏的 layout viewport,
不是用户实际能看到的 visual viewport。.layout { height: 100vh } 实际比可见高,
底部被 UI bar 盖住。
2. Flex overflow 经典 bug — .content { flex: 1; overflow-y: auto } 没加 min-height: 0,
flex 子默认 min-height: auto 跟随内容撑开,Safari/Chrome 都不让 flex 父约束高度,
导致 overflow-y: auto 形同虚设,.content 不滚动,底部按钮被外层 .layout
overflow:hidden 切掉。
3. 翻页按钮无 padding-bottom — 即使前两个修了,贴着容器边缘也不舒服。
根因修法(不打 padding 补丁):
1. AdminLayout.module.css .layout — 用 100dvh + fallback 100vh
(Dynamic Viewport Height,浏览器动态算可见区域,Safari 17+/Chrome 108+/FF 101+ 支持)
2. AdminLayout.module.css .content — 加 min-height: 0,让 flex 子元素正确 shrink
3. 4 个 admin 管理页 .pagination 加 padding-bottom: 8px(RecordsPage/UsersPage/LoginRecordsPage/AuditLogsPage)
作为视觉缓冲(三件套里最末层的 polish)
4. ProfilePage 同样 100vh 模式 → 加 100dvh fallback,防同款 bug 在用户端复现
为什么不只加 padding-bottom:
- padding 是治标 — 假设 viewport 不会再变,加缓冲就行
- 但 Safari 用户切换 zoom / 显示书签栏 / 切换 fullscreen 时实际可见区会变,
固定 padding 仍会被切
- 100dvh 是浏览器动态计算可见区域,永远准
- min-height: 0 修的是 flex 容器自身的滚动机制,根因层面解决
验收:
- 14寸笔记本 Safari → /admin/records 翻页按钮可见可点 ✓
- 桌面大屏不受影响(dvh == vh == 视口)
- Safari < 17 fallback 到 100vh,行为同改前(不变好也不变差)
- Chrome / Firefox dvh 都支持,正常
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
2026-05-12 18:26:54 +08:00 |
|
seaislee1209
|
0c9aaa11cd
|
fix(theme): V2-fix — 清除残留 30+ 处死黑/死白硬编码 (用户反馈表格线死黑)
用户反馈: UsersPage 表格线浅色下死黑死黑。
全扫定位:V1 sub-agent 当年标注 "unmapped/near-match" 保留的硬编码,
在 V2 浅色重做下集中暴露为"死黑/死白"问题。
新增 5 个主题感知 token:
--color-bg-glass-hover DARK rgba(255,255,255,0.12) / LIGHT rgba(0,0,0,0.06)
--color-border-glass-hover DARK rgba(255,255,255,0.15) / LIGHT rgba(0,0,0,0.12)
--color-bg-thumbnail DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.05)
--color-bg-thumbnail-hover DARK rgba(0,0,0,0.15) / LIGHT rgba(0,0,0,0.04)
--color-shadow-thumb DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.10)
修复(10 个文件, 30+ 处):
表格死黑线 (用户主诉):
UsersPage / TeamsPage .table td border-bottom: rgba(42,42,56,0.5) 死紫黑
→ var(--color-border-row) (浅色 rgba(0,0,0,0.06) 浅灰)
.table tr:hover td bg: rgba(255,255,255,0.02) 浅色下消失
→ var(--color-bg-row-hover) (浅色 rgba(0,0,0,0.03))
玻璃面 hover 白透 alpha (浅色下死白看不见):
VideoDetailModal closeBtn/floatingBtn/iconBtn hover:
rgba(255,255,255,0.12-0.15) → var(--color-bg-glass-hover)
TeamsPage detailClose hover: 同上
GenerationCard moreBtn:hover border:
rgba(255,255,255,0.15) → var(--color-border-glass-hover)
视频缩略图 bg (浅色下不该死黑):
AssetsPage thumbnail bg / hover overlay: rgba(0,0,0,0.3/0.15)
→ var(--color-bg-thumbnail / -hover)
UniversalUpload thumbInner box-shadow: rgba(0,0,0,0.3)
→ var(--color-shadow-thumb)
Modal/Upload overlay & hover:
UsersPage drawerOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft)
TeamsPage detailOverlay: rgba(0,0,0,0.65) → var(--color-modal-overlay)
UniversalUpload uploadOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft)
Upload trigger 虚线边 hover:
KeyframeUpload / UniversalUpload trigger hover: #5a5a6a / #1e1e2a
→ var(--color-border-modal-hover / -bg-modal-hover) (已有 var)
trigger bg: rgba(255,255,255,0.03) → var(--color-bg-upload)
TeamsPage memberTable:
memberTableWrapper bg: rgba(255,255,255,0.03) → var(--color-bg-upload)
memberTable th bg: rgba(255,255,255,0.02) → var(--color-bg-row-hover)
AssetLibraryModal 状态 / 主色 alpha:
addAssetCard hover bg rgba(108,99,255,0.04) → var(--color-primary-bg)
dropZone hover/active: 同上 + var(--color-primary-bg-hover)
statusActive 0.12: rgba(0,184,148,0.12) → var(--color-success-bg)
statusProcessing 0.12: rgba(243,156,18,0.12) → var(--color-warning-bg)
statusFailed 0.12: rgba(231,76,60,0.12) → var(--color-danger-bg)
dropZoneWarning #ff4d4f + alpha → var(--color-danger-hover/-bg/-border)
UniversalUpload uploadError:
rgba(239,68,68,0.25) → var(--color-danger-bg)
ProfilePage warningBanner:
rgba(243,156,18,0.12/0.3) → var(--color-warning-bg / -border)
验证: tsc 通过, vitest 71 fail / 162 pass 与基线一致, 24 张 V2 截图重出
关键页对比 (docs/screenshots/v2/):
- UsersPage / TeamsPage 浅色表格线变浅灰 GitBook 风
- VideoDetailModal close 浅色下能看到 hover
- 视频缩略图浅色不死黑
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
2026-05-11 20:24:24 +08:00 |
|
seaislee1209
|
f8a39d55c7
|
feat(theme): 浅色主题 V2 — 玻璃质感重做 + LandingPage 浅色化 + 双语言系统
Phase A: index.css 完全重写 [data-theme="light"] block
- 玻璃方向修正: bg-card 从 rgba(0,0,0,0.05) 黑透明 → 双 token 拆分
--color-bg-card: #ffffff 实体白 (admin 卡)
--color-bg-glass: rgba(255,255,255,0.65) 透明白玻璃 (sidebar/modal/banner)
- Aurora 浅色不再 display:none, 改 pastel 紫蓝桃 0.20-0.32 alpha
- Inset highlight 方向反转: 浅色用 rgba(255,255,255,0.50) 白高光 (玻璃顶边标志)
- Backdrop-filter 五档标准: --bf-glass-sm/md/lg/xl (12-40px + saturate 140-180%)
- Multi-layer shadow: --shadow-card-light (2 stops) + --shadow-glass-light (3 stops + inset)
- 暖调 chip: --color-chip-warm-* GitBook 公告风格
- 文字主色: #171823 微紫 → #171717 Vercel Black
Phase B: LandingPage + AuroraCanvas 浅色化
- 移除 LandingPage 的 data-theme="dark" 强制 (V1 的回避)
- LandingPage.module.css 21 处颜色全 var 化
- AuroraCanvas: 订阅 useThemeStore, 新 LIGHT_ORBS 数组 pastel 紫蓝桃,
vignette 浅色用白色, grain opacity 减半
Phase C: 13 个玻璃面升级 (3 sub-agent 并行)
- Modal 类 (Login/ForceChange/VideoDetail.infoPanel/RecordDetail/AssetLibrary/
Announcement/Confirm/TeamsPage.detailModal): 接入 bg-modal-glass +
bf-glass-lg/xl + shadow-glass-light (含 inset highlight)
- Bar/Dropdown/Toast (AnnouncementBanner/Toast/Dropdown/Select/DatePicker):
bg-glass-strong + bf-glass-md + inset-highlight
- Sidebar + 生成页 (Sidebar/PromptInput/GenerationCard): glass + 顶边白高光
- AnnouncementBanner 写双套独立 [data-theme] 规则 (CSS gradient 内不能 var alpha)
Phase D: admin 实体卡 multi-layer shadow (13 处, 1 sub-agent)
- DashboardPage / TeamsPage / UsersPage / RecordsPage / AdminAssetsPage /
LoginRecordsPage / AuditLogsPage / ProfilePage / SettingsPage
的 .statCard / .tableWrapper / .chartWrapper / .accordionItem 等
加 var(--shadow-card-light) 双层柔阴影
AdminLayout 修复 (V1 漏的):
- .layout 改 transparent, 让 AmbientBackground pastel aurora 在主区透出
- .sidebar 加 bf-glass-md + inset highlight + 立体阴影
LoginModal / ForceChangePassword 残留 mint 清理:
- submitBtn bg/border/color 用 mint-accent var, 字重 500→600 + 字距 0.04em
- input:focus border 用 var(--color-mint-accent)
- 加 bf-glass-sm + inset highlight
验证:
- TS 编译过
- vitest 71 fail / 162 pass 与 V1 基线完全一致, 无新增回归
- 24 张 V2 截图位于 docs/screenshots/v2/ (本地, .gitignore 排除 png)
完成报告: docs/todo/亮色主题切换V2-完成报告.md
V2 plan: docs/todo/亮色主题切换V2.md
视觉对齐稿: docs/todo/showcase.html
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
2026-05-11 19:46:55 +08:00 |
|
