ai-LiaoWangweb-app/app/templates/partials/sidebar.html

    <div class="w-64 tech-panel flex flex-col transition-all duration-300 transform -translate-x-full md:translate-x-0 fixed md:relative z-30 h-full border-r-0 md:border-r border-blue-900/30" id="sidebar">
        <div class="p-6 flex items-center justify-between transition-all duration-300" id="sidebar-header">
            <span class="text-xl font-bold tech-title tracking-wider flex items-center gap-2 whitespace-nowrap overflow-hidden" id="sidebar-brand">
                <i class="fas fa-globe-asia text-blue-500 min-w-[1.5rem] text-center"></i> 
                <span class="sidebar-text transition-opacity duration-300">{{ app_name }}</span>
            </span>
            <button class="md:hidden text-gray-300 hover:text-white focus:outline-none" id="close-sidebar">
                <i class="fas fa-times"></i>
            </button>
            <button class="hidden md:block text-gray-400 hover:text-white focus:outline-none transition-transform duration-300" id="toggle-sidebar">
                <i class="fas fa-chevron-left"></i>
            </button>
        </div>
        <nav class="flex-1 overflow-y-auto px-3 py-2">
            <ul class="space-y-1">
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'main.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('main.dashboard') }}">
                        <i class="fas fa-tachometer-alt w-6 text-center {% if request.endpoint == 'main.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i> 
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">后台主页</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'collection.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('collection.dashboard') }}">
                        <i class="fas fa-tasks w-6 text-center {% if request.endpoint == 'collection.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">采集管理</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'source.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('source.dashboard') }}">
                        <i class="fas fa-spider w-6 text-center {% if request.endpoint == 'source.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">爬虫管理</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'data.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('data.dashboard') }}">
                        <i class="fas fa-database w-6 text-center {% if request.endpoint == 'data.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">数据管理</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'deep.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('deep.dashboard') }}">
                        <i class="fas fa-search-plus w-6 text-center {% if request.endpoint == 'deep.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">深采管理</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'ai.dashboard' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('ai.dashboard') }}">
                        <i class="fas fa-robot w-6 text-center {% if request.endpoint == 'ai.dashboard' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">AI模型管理</span>
                    </a>
                </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'ai.analysis' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('ai.analysis') }}">
                        <i class="fas fa-chart-line w-6 text-center {% if request.endpoint == 'ai.analysis' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">AI分析报告</span>
                    </a>
                </li>
                <li>
            <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'main.screen_page' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('main.screen_page') }}">
                <i class="fas fa-tv w-6 text-center {% if request.endpoint == 'main.screen_page' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                <span class="ml-2 font-medium sidebar-text whitespace-nowrap">AI数智大屏</span>
            </a>
        </li>
                <li>
                    <a class="flex items-center px-4 py-3 rounded-lg {% if request.endpoint == 'knowledge.knowledge_page' %}bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %} transition-all duration-200 group" href="{{ url_for('knowledge.knowledge_page') }}">
                        <i class="fas fa-book w-6 text-center {% if request.endpoint == 'knowledge.knowledge_page' %}text-white{% else %}text-gray-500 group-hover:text-blue-400{% endif %} transition-colors"></i>
                        <span class="ml-2 font-medium sidebar-text whitespace-nowrap">样本中心</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="p-4 mx-3 mb-4 mt-auto rounded-xl bg-gray-800/50 backdrop-blur-sm transition-all duration-300">
            <a href="{{ url_for('main.logout') }}" class="flex items-center justify-center text-gray-400 hover:text-red-400 transition duration-200 group">
                <i class="fas fa-sign-out-alt w-5 text-center group-hover:scale-110 transition-transform"></i> 
                <span class="ml-2 text-sm font-medium sidebar-text whitespace-nowrap">退出登录</span>
            </a>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const sidebarHeader = document.getElementById('sidebar-header');
            const toggleBtn = document.getElementById('toggle-sidebar');
            const toggleIcon = toggleBtn.querySelector('i');
            const sidebarTexts = document.querySelectorAll('.sidebar-text');
            const sidebarBrand = document.getElementById('sidebar-brand');
            const brandText = sidebarBrand.querySelector('.sidebar-text');
            
            // Load state
            const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
            if (isCollapsed) {
                collapseSidebar(false);
            }
    
            toggleBtn.addEventListener('click', function() {
                const collapsed = sidebar.classList.contains('w-20');
                if (collapsed) {
                    expandSidebar();
                } else {
                    collapseSidebar(true);
                }
            });
    
            function collapseSidebar(animate) {
                if(animate) sidebar.classList.add('transition-all', 'duration-300');
                sidebar.classList.remove('w-64');
                sidebar.classList.add('w-20');
                
                // Adjust Header Layout
                sidebarHeader.classList.remove('p-6', 'justify-between');
                sidebarHeader.classList.add('p-4', 'flex-col', 'justify-center', 'gap-4');
                
                sidebarTexts.forEach(text => {
                    text.classList.add('opacity-0', 'w-0', 'ml-0', 'overflow-hidden');
                    text.classList.remove('ml-2');
                });
                
                toggleIcon.classList.add('rotate-180');
                localStorage.setItem('sidebar-collapsed', 'true');
            }
    
            function expandSidebar() {
                sidebar.classList.add('transition-all', 'duration-300');
                sidebar.classList.remove('w-20');
                sidebar.classList.add('w-64');
                
                // Restore Header Layout
                sidebarHeader.classList.add('p-6', 'justify-between');
                sidebarHeader.classList.remove('p-4', 'flex-col', 'justify-center', 'gap-4');
                
                sidebarTexts.forEach(text => {
                    text.classList.remove('opacity-0', 'w-0', 'ml-0', 'overflow-hidden');
                    text.classList.add('ml-2');
                });
    
                toggleIcon.classList.remove('rotate-180');
                localStorage.setItem('sidebar-collapsed', 'false');
            }
        });
    </script>