laoyang
618409854c
原来要回首页得先点开右侧折叠菜单再点「首页」（两步操作，在手机上尤其别扭）， 现在点左上角系统名一下就能到。 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 一致。
90 lines
4.3 KiB
PHP
90 lines
4.3 KiB
PHP
<?php
|
||
// ============================================
|
||
// 文件: nav.php (导航栏组件，显示用户头像)
|
||
// ============================================
|
||
|
||
if (!isset($admin)) {
|
||
if (isset($_SESSION['admin_id'])) {
|
||
require_once 'config.php';
|
||
$admin = getCurrentAdmin();
|
||
} else {
|
||
$admin = ['username' => '未登录'];
|
||
}
|
||
}
|
||
|
||
$current_page = basename($_SERVER['PHP_SELF']);
|
||
?>
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<!-- 左上角系统名做成一个「回到首页」的链接：
|
||
右侧折叠菜单里的「首页」要点两下（先展开再点），这里一下就到。 -->
|
||
<a href="index.php" class="nav-brand" title="回到首页" aria-label="回到首页">
|
||
<span class="brand-icon">🎬</span>
|
||
<span class="brand-name">电影日志</span>
|
||
</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;">
|
||
<?= h($admin['username'] ?? '管理员') ?>
|
||
</span>
|
||
<a href="add.php" class="btn btn-primary btn-sm">➕ 添加电影</a>
|
||
<div class="nav-dropdown">
|
||
<button class="dropbtn" onclick="toggleDropdown(event)">☰ 菜单 <span class="arrow">▼</span></button>
|
||
<div class="dropdown-content" id="dropdownMenu">
|
||
<a href="index.php" <?= $current_page == 'index.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">🏠</span> 首页
|
||
</a>
|
||
<a href="search.php" <?= $current_page == 'search.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">🔍</span> 高级搜索
|
||
</a>
|
||
<a href="stats.php" <?= $current_page == 'stats.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">📊</span> 统计
|
||
</a>
|
||
<a href="annual_report.php" <?= $current_page == 'annual_report.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">📅</span> 年度报告
|
||
</a>
|
||
<div class="divider"></div>
|
||
<a href="cinemas.php" <?= $current_page == 'cinemas.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">🏛️</span> 影院管理
|
||
</a>
|
||
<a href="persons.php" <?= $current_page == 'persons.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">👥</span> 观影人管理
|
||
</a>
|
||
<a href="import.php" <?= $current_page == 'import.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">📥</span> CSV导入
|
||
</a>
|
||
<div class="divider"></div>
|
||
<a href="change_password.php" <?= $current_page == 'change_password.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">🔑</span> 修改密码
|
||
</a>
|
||
<a href="users.php" <?= $current_page == 'users.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">👤</span> 用户管理
|
||
</a>
|
||
<div class="divider"></div>
|
||
<a href="settings.php" <?= $current_page == 'settings.php' ? 'class="active"' : '' ?>>
|
||
<span class="icon">⚙️</span> 系统设置
|
||
</a>
|
||
<div class="divider"></div>
|
||
<a href="logout.php" style="color: #e74c3c;">
|
||
<span class="icon">🚪</span> 退出登录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<script>
|
||
function toggleDropdown(e) {
|
||
e.stopPropagation();
|
||
var menu = document.getElementById('dropdownMenu');
|
||
menu.classList.toggle('show');
|
||
}
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.nav-dropdown')) {
|
||
document.querySelectorAll('.nav-dropdown .dropdown-content').forEach(function(el) {
|
||
el.classList.remove('show');
|
||
});
|
||
}
|
||
});
|
||
</script>
|