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:
2026-09-22 08:01:00 +08:00
parent 99c22d17bd
commit 618409854c
3 changed files with 19 additions and 2 deletions
+1
View File
@@ -57,6 +57,7 @@
### 界面与体验
- 复古票根色系(主色 `#e67e22` 橙)的响应式设计,移动端断点适配(600 / 768px)。
- 导航为下拉菜单,自动高亮当前页;顶部始终显示当前用户头像与用户名。
- **点导航栏左上角的「🎬 电影日志」即可回到首页**(右键 / Ctrl+点击还能在新标签页打开),不必再展开右侧折叠菜单去找「首页」。
- 登录页为深色渐变 + 毛玻璃风格。
---
+14
View File
@@ -82,6 +82,20 @@ body {
font-weight: 700;
color: var(--text-primary);
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 {
font-size: 26px;
+4 -2
View File
@@ -16,10 +16,12 @@ $current_page = basename($_SERVER['PHP_SELF']);
?>
<nav class="navbar">
<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-name">电影日志</span>
</div>
</a>
<div class="nav-actions">
<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;">