1. 修改了侧边栏的问题
This commit is contained in:
@@ -7,6 +7,22 @@
|
||||
<script src="../lib/tailwindcss/tailwind.js"></script>
|
||||
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<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-item-active {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
border-left: 4px solid #1890ff;
|
||||
}
|
||||
.bg-primary { background-color: #1890ff; }
|
||||
.text-primary { color: #1890ff; }
|
||||
:root { --primary: #1890ff; }
|
||||
@@ -63,13 +79,140 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased bg-gray-50 h-screen flex flex-col">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-2 flex items-center justify-end flex-shrink-0">
|
||||
<button id="restartBtn" class="px-3 py-1 bg-primary text-white rounded text-sm hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-refresh mr-1"></i>重新提问
|
||||
</button>
|
||||
</div>
|
||||
<body class="antialiased bg-gray-50 flex h-screen overflow-hidden">
|
||||
<!-- 侧边导航 -->
|
||||
<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-section-title">模型服务</div>
|
||||
<div class="nav-item-wrapper">
|
||||
<a href="#" 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="#" 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="#" 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="#" data-page="model-compare" class="nav-link sidebar-item-active 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="#" 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="#" 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="#" 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="#" 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="#" 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>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- 顶部导航 -->
|
||||
<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-6">
|
||||
<button class="md:hidden text-gray-500 hover:text-gray-700">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 系统性能监控 -->
|
||||
<a href="?page=config" class="flex items-center space-x-4 text-xs text-gray-500 hover:text-primary transition-colors">
|
||||
<div class="flex items-center" title="CPU使用率">
|
||||
<i class="fa fa-microchip mr-1 text-blue-500"></i>
|
||||
<span id="cpuUsage">--</span>%
|
||||
</div>
|
||||
<div class="flex items-center" title="内存使用率">
|
||||
<i class="fa fa-database mr-1 text-green-500"></i>
|
||||
<span id="memUsage">--</span>%
|
||||
</div>
|
||||
<div class="flex items-center" title="磁盘使用率">
|
||||
<i class="fa fa-hdd-o mr-1 text-orange-500"></i>
|
||||
<span id="diskUsage">--</span>%
|
||||
</div>
|
||||
</a>
|
||||
<div class="h-6 w-px bg-gray-200"></div>
|
||||
<div class="relative group">
|
||||
<img src="https://picsum.photos/id/1005/32/32" class="w-8 h-8 rounded-full cursor-pointer" alt="用户头像">
|
||||
<div class="absolute right-0 top-full pt-2 hidden group-hover:block z-50">
|
||||
<div class="bg-white rounded shadow-lg py-1 border border-gray-100 min-w-[140px]">
|
||||
<a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap">
|
||||
<i class="fa fa-sign-out mr-1"></i>退出登录
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main class="flex-1 overflow-hidden flex flex-col">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-2 flex items-center justify-end flex-shrink-0">
|
||||
<button id="restartBtn" class="px-3 py-1 bg-primary text-white rounded text-sm hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-refresh mr-1"></i>重新提问
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 用户提问显示区 -->
|
||||
<div class="px-6 py-4 flex-shrink-0">
|
||||
|
||||
Reference in New Issue
Block a user