YG_FT_Platform/web/pages/components/sidebar.html

<!-- 共享侧边栏组件 -->
<!-- 使用方法：在页面中通过 JavaScript 动态加载此组件 -->

<!-- 侧边导航 -->
<aside class="w-64 text-[#bfcbd9] flex-shrink-0 hidden md:block flex flex-col h-full" style="background-color: #001529;">
    <!-- 平台LOGO区域 -->
    <div class="pt-5 pb-3 border-b border-[#001529]/30 flex items-center justify-center pl-2">
        <img src="assets/logo/logo.png" alt="Logo" class="w-8 h-8 object-contain mr-2">
        <span class="text-white font-medium text-base">远光软件微调平台</span>
    </div>

    <!-- 导航主区域 -->
    <nav class="flex-1 overflow-y-auto py-2 relative">
        <!-- 滑块指示器 -->
        <div class="sidebar-slider" id="sidebar-slider"></div>

        <!-- 第一分区：模型服务 -->
        <div class="sidebar-section-title">模型服务</div>
        <div class="nav-item-wrapper">
            <a href="main.html" data-page="fine-tune" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-cogs w-5 text-center"></i>
                <span class="ml-2">模型调优</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=my-models" data-page="my-models" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-database w-5 text-center"></i>
                <span class="ml-2">我的模型</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=model-eval" data-page="model-eval" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-line-chart w-5 text-center"></i>
                <span class="ml-2">模型评测</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=model-compare" data-page="model-compare" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-server w-5 text-center"></i>
                <span class="ml-2">模型对比</span>
            </a>
        </div>

        <!-- 第二分区：资源管理 -->
        <div class="sidebar-section-title mt-6">资源管理</div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=model-manage" data-page="model-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-cube w-5 text-center"></i>
                <span class="ml-2">模型管理</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=dataset-manage" data-page="dataset-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-file-text w-5 text-center"></i>
                <span class="ml-2">数据集管理</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=data-generate" data-page="data-generate" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-database w-5 text-center"></i>
                <span class="ml-2">其他工具</span>
            </a>
        </div>

        <!-- 第三分区：系统设置 -->
        <div class="sidebar-section-title mt-6">系统设置</div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=config" data-page="config" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-bar-chart w-5 text-center"></i>
                <span class="ml-2">平台性能</span>
            </a>
        </div>
        <div class="nav-item-wrapper">
            <a href="main.html?page=logs" data-page="logs" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
                <i class="fa fa-file-text w-5 text-center"></i>
                <span class="ml-2">查看日志</span>
            </a>
        </div>
    </nav>

    <!-- 底部信息区域 -->
    <div class="p-4 border-t border-[#001529]/30 text-xs mt-auto">
        <div class="mb-2 text-[#bfcbd9]/80">默认业务空间</div>
        <div class="flex items-center justify-between">
            <span class="text-[#bfcbd9]">版本 v1.0.0</span>
            <i class="fa fa-question-circle-o text-[#bfcbd9]/70"></i>
        </div>
    </div>
</aside>

<style>
    .sidebar-section-title {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        color: rgba(191, 203, 217, 0.7);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .nav-link:hover {
        background-color: rgba(0, 21, 41, 0.2);
    }
    .sidebar-slider {
        position: absolute;
        width: 4px;
        height: 0;
        background-color: #1890ff;
        border-radius: 0 2px 2px 0;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        z-index: 10;
    }
    .nav-item-wrapper {
        position: relative;
    }
    .nav-link {
        position: relative;
        z-index: 1;
    }
</style>

<script>
    // 更新侧边栏滑块位置和高亮当前页
    function initSidebar(currentPage) {
        // 设置当前页高亮
        if (currentPage) {
            document.querySelectorAll('.nav-link').forEach(link => {
                if (link.dataset.page === currentPage) {
                    link.classList.add('bg-[#1890ff]/10', 'text-[#1890ff]');
                    link.classList.remove('hover:bg-[#001529]/20');
                }
            });
        }

        // 更新滑块位置
        const slider = document.getElementById('sidebar-slider');
        if (slider) {
            const activeLink = document.querySelector('.nav-link.bg-\\[\\#1890ff\\]\\/10');
            if (activeLink) {
                const wrapper = activeLink.closest('.nav-item-wrapper');
                if (wrapper) {
                    slider.style.top = wrapper.offsetTop + 'px';
                    slider.style.height = wrapper.offsetHeight + 'px';
                }
            }
        }

        // 绑定导航点击事件
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                // 如果是当前页的链接，不阻止
                if (this.dataset.page === currentPage) return;
                // 外部链接不阻止
                if (!this.href.includes('main.html')) return;
                e.preventDefault();
                window.location.href = this.href;
            });
        });
    }

    // 页面加载后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 延迟执行以确保DOM完全就绪
        setTimeout(() => {
            const currentPage = window.currentPageName || 'fine-tune';
            initSidebar(currentPage);
        }, 100);
    });
</script>