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

修改了页面风格

Browse Source
This commit is contained in:
leokaka1
2026-01-18 21:15:15 +08:00
parent b2f19d9583
commit ea8d5a28dd
4 changed files with 579 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
web/pages/main.html
View File

@@ -84,6 +84,10 @@
<!-- 第二分区：资源管理 -->
<div class="sidebar-section-title mt-6">资源管理</div>
<a href="#" data-page="model-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-sidebarBg/20 transition-colors">
<i class="fa fa-cube w-5 text-center"></i>
<span class="ml-2">模型管理</span>
</a>
<a href="#" data-page="dataset-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-sidebarBg/20 transition-colors">
<i class="fa fa-file-text w-5 text-center"></i>
<span class="ml-2">数据集管理</span>
@@ -95,13 +99,9 @@
<!-- 第三分区：系统设置 -->
<div class="sidebar-section-title mt-6">系统设置</div>
<a href="#" data-page="permission" class="nav-link flex items-center px-4 py-2.5 hover:bg-sidebarBg/20 transition-colors">
<i class="fa fa-user-circle-o w-5 text-center"></i>
<span class="ml-2">权限管理</span>
</a>
<a href="#" data-page="config" class="nav-link flex items-center px-4 py-2.5 hover:bg-sidebarBg/20 transition-colors">
<i class="fa fa-cog w-5 text-center"></i>
<span class="ml-2">平台配置</span>
<i class="fa fa-bar-chart w-5 text-center"></i>
<span class="ml-2">平台性能</span>
</a>
</nav>
@@ -242,21 +242,23 @@
],
actions: ['stop', 'detail', 'delete']
},
'permission': {
title: '权限管理',
api: 'permission',
'model-manage': {
title: '模型管理',
api: 'model-manage',
hasCreate: true,
createText: '添加用户',
createText: '添加模型',
columns: [
{ title: '用户名', key: 'username' },
{ title: '角色', key: 'role' },
{ title: '权限', key: 'permissions', render: (val) => val || '-' },
{ title: '模型名称', key: 'name' },
{ title: '模型类型', key: 'type' },
{ title: '模型版本', key: 'version' },
{ title: '模型路径', key: 'path', render: (val) => val || '-' },
{ title: '描述', key: 'description', render: (val) => val || '-' },
{ title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
],
actions: ['edit', 'delete']
},
'config': {
title: '平台配置',
title: '平台性能',
api: 'sys-config',
hasCreate: false,
isForm: true,
@@ -285,8 +287,21 @@
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 加载默认页面
loadPage('fine-tune');
// 检查URL参数
const urlParams = new URLSearchParams(window.location.search);
const pageParam = urlParams.get('page');
// 加载页面（优先使用URL参数）
const defaultPage = pageParam || 'fine-tune';
loadPage(defaultPage);
// 更新侧边栏高亮状态
document.querySelectorAll('.nav-link').forEach(link => {
if (link.dataset.page === defaultPage) {
link.classList.add('sidebar-item-active');
link.classList.remove('hover:bg-sidebarBg/20', 'transition-colors');
}
});
// 绑定导航点击事件
document.querySelectorAll('.nav-link').forEach(link => {
@@ -361,25 +376,25 @@
// 删除数据
async function deleteItem(api, id) {
if (!confirm('确定要删除这条记录吗？')) return;
try {
const response = await fetch(`${API_BASE}/${api}/${id}`, {
method: 'DELETE'
});
const result = await response.json();
if (result.code === 0) {
// 刷新当前页面
const activeLink = document.querySelector('.nav-link.sidebar-item-active');
if (activeLink) {
loadPage(activeLink.dataset.page);
showConfirm('确认删除', '确定要删除这条记录吗？', async () => {
try {
const response = await fetch(`${API_BASE}/${api}/${id}`, {
method: 'DELETE'
});
const result = await response.json();
if (result.code === 0) {
// 刷新当前页面
const activeLink = document.querySelector('.nav-link.sidebar-item-active');
if (activeLink) {
loadPage(activeLink.dataset.page);
}
} else {
showMessage('错误', result.message || '删除失败', 'error');
}
} else {
alert(result.message || '删除失败');
} catch (error) {
showMessage('错误', '删除失败: ' + error.message, 'error');
}
} catch (error) {
alert('删除失败: ' + error.message);
}
});
}
// 渲染表格页面
@@ -420,7 +435,7 @@
<td class="px-4 py-4 text-sm">
<div class="flex space-x-2">
${config.actions.map(action => `
<button onclick="${action === 'delete' ? `deleteItem('${config.api}', ${item.id})` : `alert('${actionLabels[action] || action}功能开发中...')`}"
<button onclick="${action === 'delete' ? `deleteItem('${config.api}', ${item.id})` : `showMessage('提示', '${actionLabels[action] || action}功能开发中...', 'info')`}"
class="${action === 'delete' ? 'text-danger hover:text-danger/80' : 'text-primary hover:text-primary/80'}">
${actionLabels[action] || action}
</button>
@@ -490,7 +505,7 @@
}
function saveConfig() {
alert('配置保存功能开发中...');
showMessage('提示', '配置保存功能开发中...', 'info');
}
// 当前页面状态
@@ -499,16 +514,17 @@
// 显示创建表单页面
function showCreateModal(apiType) {
const container = document.getElementById('page-content');
if (apiType === 'fine-tune') {
currentParentPage = currentPage;
currentPage = 'fine-tune-create';
const container = document.getElementById('page-content');
container.innerHTML = renderFineTuneCreatePage();
bindCreatePageEvents();
loadDatasets();
} else if (apiType === 'model-manage') {
window.location.href = 'model-manage-create.html';
} else {
alert('该功能开发中...');
showMessage('提示', '该功能开发中...', 'info');
}
}
@@ -1099,6 +1115,96 @@
}
}
// ============ 自定义消息弹窗 ============
// 显示消息弹窗
function showMessage(title, message, type = 'info', onConfirm) {
const modal = document.getElementById('customModal');
const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage');
const modalIcon = document.getElementById('modalIcon');
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
const modalConfirmBtn2 = document.getElementById('modalConfirmBtn2');
const modalBtnGroup = document.getElementById('modalBtnGroup');
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
// 设置标题
modalTitle.textContent = title;
modalTitle.className = 'text-lg font-medium text-gray-800 mb-2';
// 设置消息
modalMessage.innerHTML = message;
// 设置图标和按钮颜色
if (type === 'success') {
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center"><i class="fa fa-check text-xl text-green-600"></i></div>';
} else if (type === 'error') {
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center"><i class="fa fa-times text-xl text-red-600"></i></div>';
} else if (type === 'warning') {
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center"><i class="fa fa-exclamation text-xl text-yellow-600"></i></div>';
} else {
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-info text-xl text-blue-600"></i></div>';
}
// 单按钮模式
modalBtnGroup.classList.add('hidden');
modalSingleBtnGroup.classList.remove('hidden');
const confirmBtn = modalConfirmBtn2;
if (type === 'error') {
confirmBtn.className = 'px-6 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors';
} else {
confirmBtn.className = 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
}
// 显示弹窗
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// 绑定确认按钮事件
confirmBtn.onclick = () => {
closeModal();
if (onConfirm) onConfirm();
};
}
// 关闭消息弹窗
function closeModal() {
const modal = document.getElementById('customModal');
modal.classList.add('hidden');
document.body.style.overflow = '';
}
// 确认弹窗（两个按钮）
function showConfirm(title, message, onConfirm, onCancel) {
const modal = document.getElementById('customModal');
const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage');
const modalIcon = document.getElementById('modalIcon');
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
const modalCancelBtn = document.getElementById('modalCancelBtn');
const modalBtnGroup = document.getElementById('modalBtnGroup');
modalTitle.textContent = title;
modalMessage.innerHTML = message;
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-question text-xl text-blue-600"></i></div>';
modalBtnGroup.classList.remove('hidden');
modalConfirmBtn.textContent = '确定';
modalConfirmBtn.className = 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
modalConfirmBtn.onclick = () => {
closeModal();
if (onConfirm) onConfirm();
};
modalCancelBtn.onclick = () => {
closeModal();
if (onCancel) onCancel();
};
}
// 提交创建表单
async function submitCreateForm() {
const form = document.getElementById('createForm');
@@ -1117,15 +1223,15 @@
};
if (!data.name) {
alert('请输入任务名称');
showMessage('提示', '请输入任务名称', 'warning');
return;
}
if (!data.base_model) {
alert('请选择基础模型');
showMessage('提示', '请选择基础模型', 'warning');
return;
}
if (!data.dataset_id) {
alert('请选择训练集');
showMessage('提示', '请选择训练集', 'warning');
return;
}
@@ -1137,15 +1243,40 @@
});
const result = await response.json();
if (result.code === 0) {
alert('创建成功！');
goBack();
showMessage('成功', '训练任务创建成功！', 'success', () => {
goBack();
});
} else {
alert(result.message || '创建失败');
showMessage('错误', result.message || '创建失败', 'error');
}
} catch (error) {
alert('创建失败: ' + error.message);
showMessage('错误', '创建失败: ' + error.message, 'error');
}
}
</script>
<!-- 自定义消息弹窗 -->
<div id="customModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onclick="if(event.target === this) closeModal();">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 overflow-hidden transform transition-all">
<div class="p-6 text-center">
<div id="modalIcon"></div>
<h3 id="modalTitle" class="text-lg font-medium text-gray-800 mb-2"></h3>
<p id="modalMessage" class="text-gray-600 text-sm"></p>
</div>
<div id="modalBtnGroup" class="hidden px-6 pb-6 flex justify-center space-x-3">
<button id="modalCancelBtn" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
取消
</button>
<button id="modalConfirmBtn" class="px-6 py-2 text-white rounded-lg transition-colors">
确定
</button>
</div>
<div id="modalSingleBtnGroup" class="px-6 pb-6 flex justify-center">
<button id="modalConfirmBtn2" class="px-6 py-2 text-white rounded-lg transition-colors">
确定
</button>
</div>
</div>
</div>
</body>
</html>