CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

添加初始化页面

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-04 16:53:41 +08:00
parent e69424dab2
commit c6c3dd2134
4 changed files with 349 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
public/init.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统初始化 - 数据可视化展示大屏</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.init-container {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 40px;
width: 100%;
max-width: 460px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
z-index: 10;
}
.init-header {
text-align: center;
margin-bottom: 28px;
}
.init-header h2 {
margin: 0 0 10px 0;
color: var(--text-main);
font-size: 24px;
}
.init-header p {
margin: 0;
color: var(--text-muted);
font-size: 14px;
}
.form-message {
margin-top: 16px;
padding: 12px;
border-radius: 6px;
display: none;
font-size: 14px;
word-break: break-all;
}
.form-message.success {
display: block;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.form-message.error {
display: block;
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.actions {
display: flex;
gap: 12px;
margin-top: 24px;
}
.actions .btn {
flex: 1;
justify-content: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Animated Background -->
<div class="bg-grid"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="init-container">
<div class="init-header">
<h2>系统初始化</h2>
<p>请配置您的 MySQL 数据库连接信息以完成首次设置</p>
</div>
<div class="init-form" id="initForm">
<div class="form-row">
<div class="form-group" style="flex: 2;">
<label for="host">数据库地址 (Host)</label>
<input type="text" id="host" value="localhost" autocomplete="off">
</div>
<div class="form-group" style="flex: 1;">
<label for="port">端口 (Port)</label>
<input type="number" id="port" value="3306" autocomplete="off">
</div>
</div>
<div class="form-row">
<div class="form-group form-group-wide">
<label for="user">用户名 (User)</label>
<input type="text" id="user" value="root" autocomplete="off">
</div>
</div>
<div class="form-row">
<div class="form-group form-group-wide">
<label for="password">密码 (Password)</label>
<input type="password" id="password" placeholder="留空则无密码">
</div>
</div>
<div class="form-row">
<div class="form-group form-group-wide">
<label for="database">数据库名 (Database)</label>
<input type="text" id="database" value="display_wall" autocomplete="off">
</div>
</div>
<div class="form-message" id="messageBox"></div>
<div class="actions">
<button class="btn btn-test" id="btnTest">测试连接</button>
<button class="btn btn-add" id="btnInit">初始化数据库</button>
</div>
</div>
</div>
<script src="/js/init.js"></script>
</body>
</html>