YG-Soft/YG_FT_Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构了main.html的主函数

Browse Source 
重构了大量的页面的sidebar
优化了代码结构
This commit is contained in:
WIN-JHFT4D3SIVT\caoxiaozhu
2026-02-02 09:22:52 +08:00
parent c9575b2553 85710d865c
commit 513e96082c
33 changed files with 5566 additions and 2383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/pages/components/sidebar.html
View File

@@ -1,11 +1,11 @@
<!-- 共享侧边栏组件 -->
<!-- 使用方法：在页面中通过 JavaScript 动态加载此组件 -->
<!-- 使用方法：在页面中添加 <div id="sidebar-container"></div> 并引入 sidebar-loader.js -->
<!-- 侧边导航 -->
<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">
<img id="sidebar-logo" 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>
@@ -17,17 +17,11 @@
<!-- 第一分区：模型服务 -->
<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">
<a href="main.html?page=fine-tune" 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>
@@ -56,8 +50,8 @@
</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>
<a href="tools.html" data-page="tools" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-wrench w-5 text-center"></i>
<span class="ml-2">其他工具</span>
</a>
</div>
@@ -65,13 +59,13 @@
<!-- 第三分区：系统设置 -->
<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">
<a href="hardware.html" data-page="hardware" 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">
<a href="logs.html" 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>
@@ -87,84 +81,3 @@
</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>