feat: 导航栏左上角的系统名做成「回到首页」链接
原来要回首页得先点开右侧折叠菜单再点「首页」(两步操作,在手机上尤其别扭), 现在点左上角系统名一下就能到。 nav.php - <div class="nav-brand"> 改为 <a href="index.php" class="nav-brand">, 并补上 title 与 aria-label(无障碍:屏幕阅读器能读出这是个「回到首页」链接)。 - 因为是原生 <a>,Ctrl/中键点击可在新标签页打开,不再需要 JS。 css/style.css - 给 .nav-brand 加点击热区:padding + 等量负 margin 抵消, 保证文字的视觉位置与改动前完全一致(600/768px 两个断点下 navbar 的 padding 变窄时,两者依然自然抵消)。 - 加 hover 底色反馈,让「这是可点的」有视觉提示。 - 加 :focus-visible 轮廓:键盘 Tab 聚焦时可见,鼠标点击时不出现, 避免多出一层多余描边。 验证 - nav.php 语法通过(双 PHP 版本 7.4 / 8.1),内联 JS 用「模拟 PHP 渲染」方式 做 node --check 通过。 - CSS 大括号配平(83/83)。 - fetch_movie_test.py 端到端 79 项、storage_test.py 回归 196 项全通过。 - A/B 渲染比对 47 个响应:45 个含导航的页面有差异,但**差异只有那一行** <div> → <a>(含注释与闭合标签),其余内容逐字节一致;不含导航的 登录失败页与退出页完全未变。 - 线上双 PHP 版本真实渲染导航栏:链接形态、title/aria-label、折叠菜单均在, 无 PHP 报错泄漏;公网 style.css 与本地 sha256 一致。
This commit is contained in:
@@ -57,6 +57,7 @@
|
|||||||
### 界面与体验
|
### 界面与体验
|
||||||
- 复古票根色系(主色 `#e67e22` 橙)的响应式设计,移动端断点适配(600 / 768px)。
|
- 复古票根色系(主色 `#e67e22` 橙)的响应式设计,移动端断点适配(600 / 768px)。
|
||||||
- 导航为下拉菜单,自动高亮当前页;顶部始终显示当前用户头像与用户名。
|
- 导航为下拉菜单,自动高亮当前页;顶部始终显示当前用户头像与用户名。
|
||||||
|
- **点导航栏左上角的「🎬 电影日志」即可回到首页**(右键 / Ctrl+点击还能在新标签页打开),不必再展开右侧折叠菜单去找「首页」。
|
||||||
- 登录页为深色渐变 + 毛玻璃风格。
|
- 登录页为深色渐变 + 毛玻璃风格。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -82,6 +82,20 @@ body {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
/* 作为「回到首页」的链接,给它一块够大的点击热区;
|
||||||
|
用等量负外边距抵消内边距,保证文字的视觉位置与原来完全一致。 */
|
||||||
|
padding: 6px 10px;
|
||||||
|
margin-left: -10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
.nav-brand:hover {
|
||||||
|
background: rgba(127, 127, 127, 0.12);
|
||||||
|
}
|
||||||
|
/* 键盘 Tab 聚焦时要有可见轮廓(鼠标点击时不出现,避免多余描边) */
|
||||||
|
.nav-brand:focus-visible {
|
||||||
|
outline: 2px solid var(--primary);
|
||||||
|
outline-offset: 1px;
|
||||||
}
|
}
|
||||||
.nav-brand .brand-icon {
|
.nav-brand .brand-icon {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
|||||||
@@ -16,10 +16,12 @@ $current_page = basename($_SERVER['PHP_SELF']);
|
|||||||
?>
|
?>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<div class="nav-brand">
|
<!-- 左上角系统名做成一个「回到首页」的链接:
|
||||||
|
右侧折叠菜单里的「首页」要点两下(先展开再点),这里一下就到。 -->
|
||||||
|
<a href="index.php" class="nav-brand" title="回到首页" aria-label="回到首页">
|
||||||
<span class="brand-icon">🎬</span>
|
<span class="brand-icon">🎬</span>
|
||||||
<span class="brand-name">电影日志</span>
|
<span class="brand-name">电影日志</span>
|
||||||
</div>
|
</a>
|
||||||
<div class="nav-actions">
|
<div class="nav-actions">
|
||||||
<span class="nav-user">
|
<span class="nav-user">
|
||||||
<img src="<?= getAvatarUrl($admin['avatar'] ?? null, $admin['username'] ?? '') ?>" style="width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:4px;">
|
<img src="<?= getAvatarUrl($admin['avatar'] ?? null, $admin['username'] ?? '') ?>" style="width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:4px;">
|
||||||
|
|||||||
Reference in New Issue
Block a user