优化项目配置和页面结构

- 更新settings.local.json，移除冗余的权限设置，添加新的Playwright相关权限。
- 删除exhibition_demo_project_2025.md文档，清理不再使用的文件。
- 更新多个HTML页面，统一viewport设置，添加页面加载动画、错误处理和性能优化脚本。
- 统一使用Tailwind CSS的引入方式，提升页面加载性能。
- 增强导航组件，支持移动端菜单和返回顶部功能，改善用户体验。

web_frontend/web_result/js/nav-component.js

@@ -10,8 +10,8 @@
         { href: 'index.html', icon: 'fa-home', text: '首页', id: 'index' },
         { href: 'overview.html', icon: 'fa-info-circle', text: '展会概览', id: 'overview' },
         { href: 'exhibition.html', icon: 'fa-th-large', text: '展览内容', id: 'exhibition' },
+        { href: 'operation.html', icon: 'fa-drafting-compass', text: '布局设计', id: 'operation' },
         { href: 'marketing.html', icon: 'fa-bullhorn', text: '营销推广', id: 'marketing' },
-        { href: 'operation.html', icon: 'fa-cogs', text: '运营服务', id: 'operation' },
         { href: 'budget.html', icon: 'fa-chart-pie', text: '预算分析', id: 'budget' },
         { href: 'risk.html', icon: 'fa-shield-alt', text: '风险评估', id: 'risk' }
     ];
@@ -34,82 +34,230 @@
     // 生成导航HTML
     function generateNavHTML() {
         return `
-        <div class="container mx-auto px-6 py-4">
+        <div class="nav-container container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center fade-in-left">
-                    <div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
+                <div class="flex items-center nav-logo">
+                    <div class="logo-icon w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3 transition-transform hover:scale-110">
                         <i class="fas fa-charging-station text-white"></i>
                     </div>
                     <div>
-                        <h1 class="text-lg font-bold">NEVIT 2024</h1>
+                        <h1 class="text-lg font-bold text-gray-800">NEVIT 2024</h1>
                         <p class="text-xs text-gray-500">新能源汽车产业博览会</p>
                     </div>
                 </div>
-                <div class="hidden md:flex space-x-8">
+                <div class="hidden md:flex space-x-6 lg:space-x-8">
                     ${navItems.map(item => `
                         <a href="${getCorrectPath(item.href)}" 
-                           class="nav-link ${isActive(item.href) ? 'active' : ''} text-gray-700 hover:text-emerald-500 transition-colors"
+                           class="nav-link ${isActive(item.href) ? 'active text-emerald-500' : 'text-gray-700'} hover:text-emerald-500 transition-all duration-300 relative group"
                            data-nav="${item.id}">
                             <i class="fas ${item.icon} mr-2"></i>${item.text}
+                            ${isActive(item.href) ? '<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500"></span>' : '<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 transition-all duration-300 group-hover:w-full"></span>'}
                         </a>
                     `).join('')}
                 </div>
-                <button class="md:hidden" id="mobile-menu-button">
-                    <i class="fas fa-bars text-2xl text-gray-700"></i>
+                <button class="md:hidden menu-toggle" id="mobile-menu-button">
+                    <span class="menu-icon">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
                 </button>
             </div>
         </div>
         
         <!-- Mobile Menu -->
-        <div class="hidden md:hidden fixed top-16 left-0 w-full bg-white shadow-lg" id="mobile-menu">
-            <div class="px-6 py-4 space-y-3">
-                ${navItems.map(item => `
-                    <a href="${getCorrectPath(item.href)}" 
-                       class="block py-2 px-4 rounded ${isActive(item.href) ? 'bg-emerald-50 text-emerald-500' : 'text-gray-700 hover:bg-gray-50'}"
-                       data-nav="${item.id}">
-                        <i class="fas ${item.icon} mr-2"></i>${item.text}
-                    </a>
-                `).join('')}
+        <div class="mobile-menu-overlay hidden" id="mobile-menu-overlay"></div>
+        <div class="mobile-menu transform translate-x-full transition-transform duration-300 fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50" id="mobile-menu">
+            <div class="p-6">
+                <button class="absolute top-6 right-6 text-gray-500 hover:text-gray-700" id="close-menu">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+                <div class="mb-8">
+                    <h2 class="text-2xl font-bold text-gray-800">NEVIT 2024</h2>
+                    <p class="text-sm text-gray-500">新能源汽车产业博览会</p>
+                </div>
+                <div class="space-y-4">
+                    ${navItems.map(item => `
+                        <a href="${getCorrectPath(item.href)}" 
+                           class="block py-3 px-4 rounded-lg ${isActive(item.href) ? 'bg-emerald-50 text-emerald-500' : 'text-gray-700 hover:bg-gray-50'} transition-all duration-300"
+                           data-nav="${item.id}">
+                            <i class="fas ${item.icon} mr-3 w-5"></i>${item.text}
+                        </a>
+                    `).join('')}
+                </div>
+                <div class="mt-8 pt-8 border-t border-gray-200">
+                    <p class="text-sm text-gray-500">2024年9月12-15日</p>
+                    <p class="text-sm text-gray-500">国家会展中心（上海）</p>
+                </div>
             </div>
         </div>`;
     }
     
+    // 添加样式
+    function addStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            .nav-container {
+                transition: all 0.3s ease;
+            }
+            .navbar-scrolled {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            }
+            .navbar-scrolled .nav-container {
+                padding-top: 0.75rem;
+                padding-bottom: 0.75rem;
+            }
+            .nav-logo {
+                animation: fadeInLeft 0.6s ease-out;
+            }
+            .nav-link {
+                position: relative;
+                padding: 0.5rem 0;
+                font-weight: 500;
+            }
+            .menu-icon {
+                width: 24px;
+                height: 20px;
+                position: relative;
+                display: block;
+                cursor: pointer;
+            }
+            .menu-icon span {
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                background-color: #374151;
+                transition: all 0.3s ease;
+            }
+            .menu-icon span:nth-child(1) {
+                top: 0;
+            }
+            .menu-icon span:nth-child(2) {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+            .menu-icon span:nth-child(3) {
+                bottom: 0;
+            }
+            .menu-open .menu-icon span:nth-child(1) {
+                transform: rotate(45deg) translate(6px, 6px);
+            }
+            .menu-open .menu-icon span:nth-child(2) {
+                opacity: 0;
+            }
+            .menu-open .menu-icon span:nth-child(3) {
+                transform: rotate(-45deg) translate(6px, -6px);
+            }
+            .mobile-menu-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: 40;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            }
+            .mobile-menu-overlay.show {
+                opacity: 1;
+            }
+            .mobile-menu.show {
+                transform: translateX(0);
+            }
+            @keyframes fadeInLeft {
+                from {
+                    opacity: 0;
+                    transform: translateX(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            @media (max-width: 768px) {
+                .nav-container {
+                    padding: 1rem 1.5rem;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
     // 初始化导航
     function initNav() {
         const navElement = document.querySelector('nav') || document.getElementById('navbar');
         if (navElement) {
-            // 统一设置导航栏样式 - 确保所有页面一致
-            navElement.className = 'fixed top-0 w-full bg-white shadow-md z-50 transition-all duration-300';
+            // 统一设置导航栏样式
+            navElement.className = 'fixed top-0 w-full bg-white z-50 transition-all duration-300';
             navElement.id = 'navbar';
-            navElement.style.backgroundColor = 'white';
-            navElement.style.zIndex = '9999';
+            
+            // 添加样式
+            addStyles();
             
             // 更新导航内容
             navElement.innerHTML = generateNavHTML();
             
-            // 添加移动端菜单交互
+            // 添加滚动效果
+            let lastScrollTop = 0;
+            window.addEventListener('scroll', function() {
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                
+                // 添加滚动阴影
+                if (scrollTop > 50) {
+                    navElement.classList.add('navbar-scrolled');
+                } else {
+                    navElement.classList.remove('navbar-scrolled');
+                }
+                
+                lastScrollTop = scrollTop;
+            });
+            
+            // 移动端菜单交互
             const mobileMenuButton = document.getElementById('mobile-menu-button');
             const mobileMenu = document.getElementById('mobile-menu');
+            const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
+            const closeMenuButton = document.getElementById('close-menu');
             
             if (mobileMenuButton && mobileMenu) {
-                mobileMenuButton.addEventListener('click', () => {
-                    mobileMenu.classList.toggle('hidden');
+                // 打开菜单
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.add('show');
+                    if (mobileMenuOverlay) {
+                        mobileMenuOverlay.classList.remove('hidden');
+                        setTimeout(function() {
+                            mobileMenuOverlay.classList.add('show');
+                        }, 10);
+                    }
+                    mobileMenuButton.classList.add('menu-open');
+                    document.body.style.overflow = 'hidden';
                 });
                 
-                // 点击菜单项后关闭移动端菜单
-                mobileMenu.querySelectorAll('a').forEach(link => {
-                    link.addEventListener('click', () => {
-                        mobileMenu.classList.add('hidden');
-                    });
+                // 关闭菜单功能
+                const closeMenu = function() {
+                    mobileMenu.classList.remove('show');
+                    if (mobileMenuOverlay) {
+                        mobileMenuOverlay.classList.remove('show');
+                        setTimeout(function() {
+                            mobileMenuOverlay.classList.add('hidden');
+                        }, 300);
+                    }
+                    mobileMenuButton.classList.remove('menu-open');
+                    document.body.style.overflow = '';
+                };
+                
+                // 点击关闭按钮
+                closeMenuButton.addEventListener('click', closeMenu);
+                
+                // 点击遮罩关闭
+                mobileMenuOverlay.addEventListener('click', closeMenu);
+                
+                // 点击菜单项后关闭
+                mobileMenu.querySelectorAll('a').forEach(function(link) {
+                    link.addEventListener('click', closeMenu);
                 });
             }
-            
-            // 保持导航栏始终可见，不添加滚动隐藏效果
-            // 确保导航栏始终在最顶层
-            navElement.style.position = 'fixed';
-            navElement.style.top = '0';
-            navElement.style.left = '0';
-            navElement.style.right = '0';
         }
     }