优化：使用说明页面增加右侧固定导航栏

- 双栏布局：左侧主内容 + 右侧 sticky 导航
- 8 个锚点快速跳转（经验/金币/魅力/礼物/VIP/权限/排行/操作）
- 滚动时自动高亮当前板块
- smooth scroll 平滑滚动效果

resources/views/rooms/guide.blade.php

@@ -19,6 +19,36 @@
     </a>
 @endsection
 
+@section('head')
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+
+        .guide-nav a {
+            display: block;
+            padding: 6px 12px;
+            font-size: 13px;
+            color: #6b7280;
+            border-left: 3px solid transparent;
+            transition: all 0.15s;
+            text-decoration: none;
+        }
+
+        .guide-nav a:hover {
+            color: #4338ca;
+            background: #eef2ff;
+        }
+
+        .guide-nav a.active {
+            color: #4338ca;
+            border-left-color: #4338ca;
+            font-weight: 700;
+            background: #eef2ff;
+        }
+    </style>
+@endsection
+
 @php
     use App\Models\Sysparam;
     use App\Models\VipLevel;
@@ -54,7 +84,24 @@
 @endphp
 
 @section('content')
-    <main class="max-w-4xl mx-auto py-10 px-6">
+    <main class="max-w-6xl mx-auto py-10 px-6 flex gap-8">
+
+        {{-- 右侧固定导航 --}}
+        <aside class="hidden lg:block w-44 shrink-0 order-2">
+            <nav class="guide-nav sticky top-24 space-y-1" id="guide-nav">
+                <a href="#sec-exp">⭐ 经验与等级</a>
+                <a href="#sec-gold">💰 金币系统</a>
+                <a href="#sec-charm">✨ 魅力系统</a>
+                <a href="#sec-gift">🎁 礼物系统</a>
+                <a href="#sec-vip">👑 VIP 会员</a>
+                <a href="#sec-admin">🛡️ 管理权限</a>
+                <a href="#sec-rank">🏆 排行榜</a>
+                <a href="#sec-basic">💬 基础操作</a>
+            </nav>
+        </aside>
+
+        {{-- 左侧主内容 --}}
+        <div class="flex-1 min-w-0 order-1">
 
             {{-- 页面标题 --}}
             <div class="text-center mb-10">
@@ -63,7 +110,7 @@
             </div>
 
             {{-- ═══ 1. 经验与等级 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-exp" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-indigo-700 mb-4 flex items-center gap-2">⭐ 经验与等级</h2>
 
                 <div class="space-y-3 text-sm text-gray-700">
@@ -92,7 +139,8 @@
                                     @foreach ($levelExp as $i => $exp)
                                         @if ($i % 2 === 0)
                                             <tr class="{{ $i % 4 === 0 ? 'bg-white' : 'bg-gray-50' }}">
-                                            <td class="px-3 py-1.5 font-bold text-indigo-600">LV.{{ $i + 1 }}</td>
+                                                <td class="px-3 py-1.5 font-bold text-indigo-600">LV.{{ $i + 1 }}
+                                                </td>
                                                 <td class="px-3 py-1.5">{{ number_format($exp) }}</td>
                                                 @if (isset($levelExp[$i + 1]))
                                                     <td class="px-3 py-1.5 font-bold text-indigo-600">
@@ -113,7 +161,7 @@
             </section>
 
             {{-- ═══ 2. 金币系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-gold" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-amber-700 mb-4 flex items-center gap-2">💰 金币系统</h2>
 
                 <div class="bg-amber-50 rounded-lg p-4 text-sm text-gray-700">
@@ -133,7 +181,7 @@
             </section>
 
             {{-- ═══ 3. 魅力系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-charm" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-pink-700 mb-4 flex items-center gap-2">✨ 魅力系统</h2>
 
                 <div class="space-y-3 text-sm text-gray-700">
@@ -160,14 +208,15 @@
             </section>
 
             {{-- ═══ 4. 礼物系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-gift" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-rose-700 mb-4 flex items-center gap-2">🎁 礼物系统</h2>
 
                 <p class="text-sm text-gray-600 mb-4">双击用户名打开名片，即可选择礼物赠送。送出礼物消耗金币，对方获得魅力。</p>
 
                 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                     @foreach ($gifts as $gift)
-                    <div class="bg-gray-50 rounded-xl p-3 text-center border border-gray-100 hover:shadow-sm transition">
+                        <div
+                            class="bg-gray-50 rounded-xl p-3 text-center border border-gray-100 hover:shadow-sm transition">
                             <img src="/images/gifts/{{ $gift->image }}" alt="{{ $gift->name }}"
                                 class="w-12 h-12 mx-auto object-contain mb-2">
                             <div class="font-bold text-sm text-gray-800">{{ $gift->emoji }} {{ $gift->name }}</div>
@@ -180,7 +229,7 @@
 
             {{-- ═══ 5. VIP 会员 ═══ --}}
             @if ($vipLevels->count() > 0)
-            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <section id="sec-vip" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                     <h2 class="text-xl font-bold text-purple-700 mb-4 flex items-center gap-2">👑 VIP 会员</h2>
 
                     <p class="text-sm text-gray-600 mb-4">VIP 会员享受经验和金币获取加倍、专属进场特效等特权。</p>
@@ -218,7 +267,7 @@
             @endif
 
             {{-- ═══ 6. 管理权限 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-admin" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-red-700 mb-4 flex items-center gap-2">🛡️ 管理权限</h2>
 
                 <p class="text-sm text-gray-600 mb-4">等级越高，可使用的管理功能越多。双击用户名片中可执行以下操作：</p>
@@ -256,7 +305,7 @@
             </section>
 
             {{-- ═══ 7. 排行榜 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-rank" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-emerald-700 mb-4 flex items-center gap-2">🏆 排行榜</h2>
 
                 <div class="bg-emerald-50 rounded-lg p-4 text-sm text-gray-700">
@@ -270,7 +319,7 @@
             </section>
 
             {{-- ═══ 8. 基础操作 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+            <section id="sec-basic" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
                 <h2 class="text-xl font-bold text-gray-700 mb-4 flex items-center gap-2">💬 基础操作</h2>
 
                 <div class="space-y-3 text-sm text-gray-700">
@@ -294,5 +343,41 @@
                     🚀 返回星光大厅
                 </a>
             </div>
+
+        </div> {{-- /flex-1 主内容结束 --}}
     </main>
+
+@section('scripts')
+    <script>
+        /**
+         * 滚动时高亮右侧导航当前所在板块
+         */
+        (function() {
+            const nav = document.getElementById('guide-nav');
+            if (!nav) return;
+            const links = nav.querySelectorAll('a');
+            const sections = [];
+            links.forEach(a => {
+                const id = a.getAttribute('href').slice(1);
+                const el = document.getElementById(id);
+                if (el) sections.push({
+                    el,
+                    link: a
+                });
+            });
+
+            function onScroll() {
+                let current = sections[0];
+                for (const s of sections) {
+                    if (s.el.getBoundingClientRect().top <= 120) current = s;
+                }
+                links.forEach(a => a.classList.remove('active'));
+                if (current) current.link.classList.add('active');
+            }
+            window.addEventListener('scroll', onScroll, {
+                passive: true
+            });
+            onScroll();
+        })();
+    </script>
 @endsection