左侧导航栏样式做到了统一

This commit is contained in:
2026-01-21 15:33:43 +08:00
parent fb136fc778
commit 93c8f1fcb6
20 changed files with 61411 additions and 442 deletions

View File

@@ -393,18 +393,12 @@
},
'model-eval': {
title: '模型评测',
api: 'model-eval',
hasCreate: true,
createText: '新建评测',
columns: [
{ title: '模型名称', key: 'model_name' },
{ title: '数据集', key: 'dataset' },
{ title: '指标', key: 'metric' },
{ title: '得分', key: 'score', render: (val) => val ? `${val}%` : '-' },
{ title: '状态', key: 'status' },
{ title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
],
actions: ['report', 'delete']
isExternalPage: true,
createConfig: {
page: 'model-eval-create',
hasCreate: true,
createText: '新建评测'
}
},
'model-compare': {
title: '模型对比',
@@ -682,7 +676,39 @@
const scriptContent = scriptMatch ? scriptMatch[1] : '';
// 移除脚本标签后插入HTML
const htmlWithoutScript = html.replace(/<script>[\s\S]*?<\/script>/g, '');
container.innerHTML = htmlWithoutScript;
// 如果有创建配置,添加 Tab 切换和创建按钮
let headerHtml = '';
if (config.createConfig && config.createConfig.hasCreate) {
headerHtml = `
<div class="bg-white rounded-lg shadow-sm mb-6 p-4 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center space-x-8">
<button class="tab-btn active pb-3 text-sm font-medium flex items-center text-primary" data-tab="tasks" onclick="switchTab(this, 'tasks')">
<i class="fa fa-tasks mr-2"></i>评测任务
</button>
<button class="tab-btn pb-3 text-sm font-medium flex items-center text-gray-500" data-tab="leaderboard" onclick="switchTab(this, 'leaderboard')">
<i class="fa fa-trophy mr-2"></i>排行榜
</button>
<button class="tab-btn pb-3 text-sm font-medium flex items-center text-gray-500" data-tab="dimensions" onclick="switchTab(this, 'dimensions')">
<i class="fa fa-sliders mr-2"></i>评测维度
</button>
</div>
<div id="headerActionButtons">
<button onclick="navigateToPage('${config.createConfig.page}')" class="bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center">
<i class="fa fa-plus mr-2"></i>${config.createConfig.createText}
</button>
</div>
</div>
<style>
.tab-btn { position: relative; transition: all 0.2s; }
.tab-btn.active { color: #1890ff; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -16px; left: 0; right: 0; height: 2px; background-color: #1890ff; }
.tab-btn:hover:not(.active) { color: #1890ff; }
</style>
`;
}
container.innerHTML = headerHtml + htmlWithoutScript;
// 执行脚本
if (scriptContent) {
try {
@@ -2341,6 +2367,56 @@
showMessage('错误', '创建失败: ' + error.message, 'error');
}
}
// 跳转到页面
function navigateToPage(pageName) {
// 如果页面名以 -create 结尾,直接跳转到 HTML 页面
if (pageName.endsWith('-create')) {
window.location.href = `${pageName}.html`;
} else {
window.location.href = `main.html?page=${pageName}`;
}
}
// 切换 Tab
function switchTab(btn, tabId) {
// 更新按钮状态
const parent = btn.parentElement;
parent.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('active', 'text-primary');
b.classList.add('text-gray-500');
});
btn.classList.add('active');
btn.classList.remove('text-gray-500');
// 更新内容显示 - 需要通知外部页面
if (typeof window.switchTabContent === 'function') {
window.switchTabContent(tabId);
}
// 更新右侧按钮 - 从 tableConfigs 获取当前页面配置
const btnContainer = document.getElementById('headerActionButtons');
const currentConfig = tableConfigs[currentPage];
if (btnContainer) {
if (tabId === 'tasks') {
const page = currentConfig?.createConfig?.page || 'model-eval-create';
const text = currentConfig?.createConfig?.createText || '新建评测';
btnContainer.innerHTML = `
<button onclick="navigateToPage('${page}')" class="bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center">
<i class="fa fa-plus mr-2"></i>${text}
</button>
`;
} else if (tabId === 'leaderboard') {
btnContainer.innerHTML = ''; // 排行榜隐藏按钮
} else if (tabId === 'dimensions') {
btnContainer.innerHTML = `
<button onclick="addDimension()" class="bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center">
<i class="fa fa-plus mr-2"></i>添加维度
</button>
`;
}
}
}
</script>
<!-- 自定义消息弹窗 -->