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

38
src/main.py
View File

@@ -129,6 +129,18 @@ def init_database():
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)""",
# 模型管理表
"""CREATE TABLE IF NOT EXISTS model_manage (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
type VARCHAR(100),
version VARCHAR(50),
path VARCHAR(500),
description TEXT,
create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)""",
# 系统配置表
"""CREATE TABLE IF NOT EXISTS sys_config (
id INT AUTO_INCREMENT PRIMARY KEY,
@@ -436,6 +448,32 @@ def delete_permission(id):
return jsonify({'code': 0, 'message': '删除成功'})
# ============ 模型管理接口 ============
@app.route('/api/model-manage', methods=['GET'])
def get_model_manage():
return jsonify({'code': 0, 'data': generic_get_all('model_manage')})
@app.route('/api/model-manage', methods=['POST'])
def create_model_manage():
data = request.json
new_id = generic_create('model_manage', data)
return jsonify({'code': 0, 'message': '创建成功', 'id': new_id})
@app.route('/api/model-manage/<int:id>', methods=['PUT'])
def update_model_manage(id):
data = request.json
generic_update('model_manage', id, data)
return jsonify({'code': 0, 'message': '更新成功'})
@app.route('/api/model-manage/<int:id>', methods=['DELETE'])
def delete_model_manage(id):
generic_delete('model_manage', id)
return jsonify({'code': 0, 'message': '删除成功'})
# ============ 系统配置接口 ============
@app.route('/api/sys-config', methods=['GET'])
def get_sys_config():

8
web/pages/fine-tune-create.html
View File

@@ -48,7 +48,13 @@
<!-- 页面标题 -->
<div class="px-8 py-4">
<h1 class="text-xl font-medium text-gray-800">模型调优 / 创建训练任务</h1>
<div class="bg-white rounded-lg shadow-sm p-4 border-b border-gray-100">
<div class="flex items-center text-sm">
<span class="text-primary cursor-pointer hover:underline" onclick="window.location.href='main.html'">模型调优</span>
<span class="mx-2 text-gray-300">/</span>
<span class="text-gray-800 font-medium">创建训练任务</span>
</div>
</div>
</div>
<!-- 表单内容 -->

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>

358
web/pages/model-manage-create.html Normal file
View File

@@ -0,0 +1,358 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加模型 / 远光软件微调平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
sidebarBg: '#001529',
sidebarText: '#bfcbd9',
headerBg: '#fff',
danger: '#f5222d',
success: '#52c41a',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.sidebar-item-active {
@apply bg-primary/10 text-primary border-l-4 border-primary;
}
.sidebar-section-title {
@apply px-4 py-2 text-xs text-sidebarText/70 font-medium uppercase tracking-wider;
}
.form-input {
@apply w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none transition-colors;
}
.form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
}
</style>
</head>
<body class="antialiased bg-gray-50 flex h-screen overflow-hidden">
<!-- 侧边导航 -->
<aside class="w-64 bg-sidebarBg text-sidebarText flex-shrink-0 hidden md:block flex flex-col h-full">
<!-- 平台LOGO区域 -->
<div class="p-4 border-b border-sidebarBg/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>
<!-- 导航主区域 -->
<nav class="flex-1 overflow-y-auto py-2">
<!-- 第一分区：模型服务 -->
<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-sidebarBg/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-sidebarBg/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-sidebarBg/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-deploy" data-page="model-deploy" class="nav-link flex items-center px-4 py-2.5 hover:bg-sidebarBg/20 transition-colors">
<i class="fa fa-server w-5 text-center"></i>
<span class="ml-2">模型部署</span>
</a>
<!-- 第二分区：资源管理 -->
<div class="sidebar-section-title mt-6">资源管理</div>
<a href="main.html?page=model-manage" data-page="model-manage" class="nav-link sidebar-item-active 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="main.html?page=dataset-manage" 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>
</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-sidebarBg/20 transition-colors">
<i class="fa fa-database w-5 text-center"></i>
<span class="ml-2">数据生成</span>
</a>
<!-- 第三分区：系统设置 -->
<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-sidebarBg/20 transition-colors">
<i class="fa fa-bar-chart w-5 text-center"></i>
<span class="ml-2">平台性能</span>
</a>
</nav>
<!-- 底部信息区域 -->
<div class="p-4 border-t border-sidebarBg/30 text-xs mt-auto">
<div class="mb-2 text-sidebarText/80">默认业务空间</div>
<div class="flex items-center justify-between">
<span class="text-sidebarText">版本 v1.0.0</span>
<i class="fa fa-question-circle-o text-sidebarText/70"></i>
</div>
</div>
</aside>
<!-- 主内容区 -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- 顶部导航 -->
<header class="bg-headerBg 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="main.html?page=model-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>
<span class="text-gray-300">|</span>
<span class="text-gray-800 font-medium">添加模型</span>
</div>
<div class="flex items-center space-x-4">
<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 mt-2 bg-white rounded shadow-lg py-1 hidden group-hover:block 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>
</header>
<!-- 内容区域 -->
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
<!-- 大标题 -->
<div class="bg-white rounded-lg shadow-sm p-4 border-b border-gray-100">
<div class="flex items-center text-sm">
<span class="text-primary cursor-pointer hover:underline" onclick="window.location.href='main.html?page=model-manage'">资源管理</span>
<span class="mx-2 text-gray-300">/</span>
<span class="text-gray-800 font-medium">添加模型</span>
</div>
</div>
<!-- 表单内容 -->
<div class="bg-white rounded-lg shadow-sm">
<div class="p-6">
<form id="modelForm">
<!-- 基本信息 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">基本信息</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="form-label">
<span class="text-red-500 mr-1">*</span>模型名称
</label>
<input type="text" name="name" class="form-input" placeholder="请输入模型名称" maxlength="100">
<p class="text-xs text-gray-400 mt-1">支持中文、英文、数字、下划线，最多100个字符</p>
</div>
<div>
<label class="form-label">
<span class="text-red-500 mr-1">*</span>模型类型
</label>
<select name="type" class="form-input">
<option value="">请选择</option>
<option value="LLM">大语言模型 (LLM)</option>
<option value="CV">计算机视觉 (CV)</option>
<option value="NLP">自然语言处理 (NLP)</option>
<option value="Embedding">向量模型 (Embedding)</option>
<option value="Other">其他</option>
</select>
</div>
</div>
</div>
<!-- 版本信息 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">版本信息</h3>
<div class="max-w-md">
<label class="form-label">
<span class="text-red-500 mr-1">*</span>模型版本
</label>
<input type="text" name="version" class="form-input" placeholder="如：v1.0.0" maxlength="50">
<p class="text-xs text-gray-400 mt-1">建议使用语义化版本号，如：v1.0.0、v2.1.0</p>
</div>
</div>
<!-- 模型路径 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">模型路径</h3>
<div class="max-w-xl">
<label class="form-label">
<span class="text-red-500 mr-1">*</span>模型存储路径
</label>
<input type="text" name="path" class="form-input" placeholder="如：s3://bucket/models/my-model">
<p class="text-xs text-gray-400 mt-1">支持本地路径或云存储路径（OSS、S3、HDFS等）</p>
</div>
</div>
<!-- 描述信息 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">描述信息</h3>
<div>
<label class="form-label">模型描述</label>
<textarea name="description" rows="4" class="form-input resize-none" placeholder="请输入模型描述，包含模型特点、适用场景等信息" maxlength="500"></textarea>
<p class="text-xs text-gray-400 mt-1"><span id="descCount">0</span> / 500</p>
</div>
</div>
<!-- 底部按钮 -->
<div class="flex items-center justify-between pt-6 border-t border-gray-100">
<div class="flex items-center space-x-3">
<button type="button" onclick="submitForm()" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center">
<i class="fa fa-check mr-2"></i>保存
</button>
<a href="main.html?page=model-manage" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors flex items-center">
<i class="fa fa-times mr-2"></i>取消
</a>
</div>
</div>
</form>
</div>
</div>
</main>
</div>
<script>
// API 基础地址
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
return `${protocol}//${hostname}:8080/api`;
};
const API_BASE = getApiBase();
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 描述字数统计
const descInput = document.querySelector('textarea[name="description"]');
if (descInput) {
descInput.addEventListener('input', () => {
document.getElementById('descCount').textContent = descInput.value.length;
});
}
// 绑定导航点击事件
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
if (!this.href.includes('model-manage-create')) {
e.preventDefault();
window.location.href = this.href;
}
});
});
});
// 提交表单
async function submitForm() {
const form = document.getElementById('modelForm');
const formData = new FormData(form);
const data = {
name: formData.get('name'),
type: formData.get('type'),
version: formData.get('version'),
path: formData.get('path'),
description: formData.get('description')
};
// 验证
if (!data.name) {
showMessage('提示', '请输入模型名称', 'warning');
return;
}
if (!data.type) {
showMessage('提示', '请选择模型类型', 'warning');
return;
}
if (!data.version) {
showMessage('提示', '请输入模型版本', 'warning');
return;
}
if (!data.path) {
showMessage('提示', '请输入模型路径', 'warning');
return;
}
try {
const response = await fetch(`${API_BASE}/model-manage`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
if (result.code === 0) {
showMessage('成功', '模型添加成功！', 'success', () => {
window.location.href = 'main.html?page=model-manage';
});
} else {
showMessage('错误', result.message || '添加失败', 'error');
}
} catch (error) {
showMessage('错误', '添加失败: ' + error.message, 'error');
}
}
// ============ 自定义消息弹窗 ============
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('modalConfirmBtn2');
const modalBtnGroup = document.getElementById('modalBtnGroup');
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
modalTitle.textContent = title;
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');
modalConfirmBtn.className = type === 'error' ? 'px-6 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors' : '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 = () => {
modal.classList.add('hidden');
document.body.style.overflow = '';
if (onConfirm) onConfirm();
};
}
</script>
<!-- 自定义消息弹窗 -->
<div id="customModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
<div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 overflow-hidden">
<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="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>