Files
chatroom/resources/views/layouts/app.blade.php
lkddi c75a9d8069 修复:清理大厅导航栏重复的老代码
- 彻底移除 rooms/index.blade.php 中的 nav-right 定义块
- 移除 layouts/app.blade.php 中多增加的资料按钮
- 修正退出登录按钮的文案
- 修复前台页面由于继承引起的头部菜单重复显示问题
2026-02-27 01:36:05 +08:00

150 lines
6.8 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{--
文件功能:前台统一布局模板
提供公共 <head>、顶部导航栏、消息提示、内容区域和底部
所有前台页面(除 chat/frame index 登录页外)统一使用此模板
可用 section
@section('title') - 页面标题
@section('head') - 额外 <head> 内容JS/CSS
@section('body-class') - <body> 额外 class
@section('body-data') - <body> x-data 等属性
@section('nav-icon') - 导航栏图标 emoji 🌟)
@section('nav-title') - 导航栏标题文字
@section('nav-left') - 导航栏左侧额外内容(如返回按钮)
@section('nav-right') - 导航栏右侧操作区
@section('content') - 页面主体内容
@section('scripts') - 页面底部脚本
@author ChatRoom Laravel
--}}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', '飘落流星聊天室')</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
/* 通用滚动条美化 */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
</style>
@yield('head')
</head>
<body class="bg-gray-100 min-h-screen text-gray-800 text-sm @yield('body-class')" @yield('body-data')>
{{-- ═══════════ 顶部导航栏(统一风格) ═══════════ --}}
<header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md sticky top-0 z-50 shrink-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-14">
{{-- 左侧:返回 + 标题 --}}
<div class="flex items-center space-x-4">
@hasSection('nav-left')
@yield('nav-left')
<div class="h-6 w-px bg-indigo-700"></div>
@endif
<div class="flex items-center space-x-2">
<span class="text-xl">@yield('nav-icon', '🌟')</span>
<h1 class="text-lg font-extrabold tracking-wider">@yield('nav-title', '飘落流星')</h1>
</div>
</div>
{{-- 右侧:操作区 --}}
<div class="flex items-center space-x-3 text-sm">
{{-- 公共导航链接 --}}
<a href="{{ route('rooms.index') }}"
class="text-indigo-200 hover:text-white font-bold flex items-center transition hidden sm:flex">
<span class="mr-1">🏠</span> 大厅
</a>
<a href="{{ route('leaderboard.index') }}"
class="text-yellow-400 hover:text-yellow-300 font-bold flex items-center transition hidden sm:flex">
<span class="mr-1">🏆</span> 风云榜
</a>
<a href="{{ route('guestbook.index') }}"
class="text-indigo-200 hover:text-white font-bold flex items-center transition hidden sm:flex">
<span class="mr-1">✉️</span> 留言板
</a>
{{-- 通用快捷操作区 --}}
@auth
@if (Auth::user()->user_level >= 15)
<a href="{{ route('admin.dashboard') }}"
class="text-indigo-200 hover:text-white font-bold transition hidden sm:flex items-center">
<span class="mr-1">⚙️</span> 后台
</a>
@endif
<a href="{{ route('guide') }}"
class="text-indigo-200 hover:text-white font-bold transition hidden sm:flex items-center">
<span class="mr-1">📖</span> 说明
</a>
@endauth
@yield('nav-right')
{{-- 用户信息(通用)及退出 --}}
@auth
<div class="flex items-center space-x-3 ml-2 pl-2 border-l border-indigo-700">
<div class="flex items-center space-x-2">
<img src="/images/headface/{{ Auth::user()->headface ?? '01.gif' }}"
class="w-7 h-7 rounded border border-indigo-500 object-cover bg-white">
<span class="font-bold hidden sm:inline">{{ Auth::user()->username }}</span>
<span
class="bg-white/20 px-1.5 py-0.5 rounded text-xs border border-white/10">LV.{{ Auth::user()->user_level }}</span>
</div>
<form action="{{ route('logout') }}" method="POST" class="inline">
@csrf
<button type="submit"
class="text-xs border border-white/30 hover:bg-white/10 px-2 py-1.5 rounded transition font-medium text-white/80 hover:text-white">
退出登录
</button>
</form>
</div>
@endauth
</div>
</div>
</div>
</header>
{{-- ═══════════ 全局提示消息 ═══════════ --}}
@if (session('success'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-sm">
<p class="font-bold">操作成功</p>
<p>{{ session('success') }}</p>
</div>
</div>
@endif
@if (session('error'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm">
<p class="font-bold">操作失败</p>
<p>{{ session('error') }}</p>
</div>
</div>
@endif
{{-- ═══════════ 页面主体内容 ═══════════ --}}
@yield('content')
{{-- ═══════════ 底部脚本 ═══════════ --}}
@yield('scripts')
</body>
</html>