左侧导航栏样式做到了统一
This commit is contained in:
@@ -7,6 +7,18 @@
|
||||
<script src="../lib/tailwindcss/tailwind.js"></script>
|
||||
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* 侧边栏滑块动画 */
|
||||
.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;
|
||||
}
|
||||
.sidebar-section-title {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
@@ -18,6 +30,13 @@
|
||||
.nav-link:hover {
|
||||
background-color: rgba(0, 21, 41, 0.2);
|
||||
}
|
||||
.nav-item-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
@@ -71,53 +90,72 @@
|
||||
<!-- 侧边导航 -->
|
||||
<aside class="w-64 text-[#bfcbd9] flex-shrink-0 hidden md:block flex flex-col h-full" style="background-color: #001529;">
|
||||
<!-- 平台LOGO区域 -->
|
||||
<div class="p-4 border-b border-[#001529]/30 flex items-center">
|
||||
<img src="../assets/logo/logo.png" alt="Logo" class="w-6 h-6 object-contain mr-2">
|
||||
<span class="text-white font-medium">远光软件微调平台</span>
|
||||
<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">
|
||||
<nav class="flex-1 overflow-y-auto py-2 relative">
|
||||
<!-- 滑块指示器 -->
|
||||
<div class="sidebar-slider" id="sidebar-slider"></div>
|
||||
|
||||
<!-- 第一分区：模型服务 -->
|
||||
<div class="sidebar-section-title">模型服务</div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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 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>
|
||||
</nav>
|
||||
|
||||
<!-- 底部信息区域 -->
|
||||
@@ -136,7 +174,7 @@
|
||||
<header class="bg-white border-b border-gray-200 shadow-sm">
|
||||
<div class="flex items-center justify-between px-6 h-14">
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="#" onclick="goBack()" class="text-gray-500 hover:text-gray-700 flex items-center">
|
||||
<a href="main.html?page=dataset-manage" class="text-gray-500 hover:text-gray-700 flex items-center">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
<span class="ml-1">上一步</span>
|
||||
</a>
|
||||
@@ -393,6 +431,28 @@
|
||||
await loadDatasetData(editId);
|
||||
}
|
||||
|
||||
// 设置侧边栏当前页高亮
|
||||
const currentPage = 'dataset-manage';
|
||||
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', 'transition-colors');
|
||||
}
|
||||
});
|
||||
|
||||
// 更新滑块位置
|
||||
updateSidebarSlider();
|
||||
|
||||
// 绑定导航点击事件
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
if (!this.href.includes('dataset-create')) {
|
||||
e.preventDefault();
|
||||
window.location.href = this.href;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 文件上传区域拖拽逻辑
|
||||
const uploadArea = document.getElementById('upload-area');
|
||||
const fileUpload = document.getElementById('file-upload');
|
||||
@@ -436,29 +496,25 @@
|
||||
fileUpload.value = '';
|
||||
});
|
||||
|
||||
// 绑定导航点击事件
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
if (!this.href.includes('dataset-create')) {
|
||||
e.preventDefault();
|
||||
window.location.href = this.href;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 初始化单选框选中样式
|
||||
initRadioStyles();
|
||||
|
||||
// 设置侧边栏当前页高亮
|
||||
const currentPage = 'dataset-manage';
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
if (link.dataset.page === currentPage) {
|
||||
link.classList.add('active');
|
||||
link.classList.remove('hover:bg-[#001529]/20', 'transition-colors');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 更新侧边栏滑块位置
|
||||
function updateSidebarSlider() {
|
||||
const slider = document.getElementById('sidebar-slider');
|
||||
if (!slider) return;
|
||||
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载数据集数据（编辑模式）
|
||||
async function loadDatasetData(id) {
|
||||
try {
|
||||
@@ -746,13 +802,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 清空所有文件
|
||||
function clearAllFiles() {
|
||||
selectedFiles = [];
|
||||
updateDataStats();
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
// 渲染文件列表
|
||||
function renderFileList() {
|
||||
const fileListEl = document.getElementById('fileList');
|
||||
|
||||
Reference in New Issue
Block a user