QWQLwToo
144 lines
7.3 KiB
HTML
144 lines
7.3 KiB
HTML
<!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="stylesheet" href="/css/admin.css">
|
||
<link rel="icon" href="/img/favicon.png" type="image/png">
|
||
</head>
|
||
<body>
|
||
<div class="admin-container">
|
||
<header class="admin-header">
|
||
<div class="header-left">
|
||
<a href="/admin" class="back-link">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="15 18 9 12 15 6"/>
|
||
</svg>
|
||
</a>
|
||
<h1>系统设置</h1>
|
||
</div>
|
||
<div class="header-right">
|
||
<span id="current-user"></span>
|
||
<button id="logout-btn" class="btn btn-secondary">登出</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="admin-content">
|
||
<div class="settings-container">
|
||
<!-- 数据库设置 -->
|
||
<section class="settings-section">
|
||
<div class="section-header">
|
||
<h2>数据库设置</h2>
|
||
<p class="section-description">管理数据库连接和配置</p>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div class="database-info" id="database-info">
|
||
<div class="info-item">
|
||
<span class="info-label">数据库类型</span>
|
||
<span class="info-value" id="db-type">-</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">连接状态</span>
|
||
<span class="info-value status-badge" id="db-status">-</span>
|
||
</div>
|
||
<div class="info-item" id="db-file-item" style="display: none;">
|
||
<span class="info-label">数据库文件</span>
|
||
<span class="info-value" id="db-file">-</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据库密码修改（仅 MySQL） -->
|
||
<div class="database-password" id="database-password-section" style="display: none;">
|
||
<h3>修改数据库 Root 密码</h3>
|
||
<p class="password-warning">⚠️ 警告：修改密码后需要更新环境变量 DB_PASSWORD 并重启服务器！</p>
|
||
<form id="password-form" class="password-form">
|
||
<div class="form-group">
|
||
<label>当前密码</label>
|
||
<input type="password" id="current-password" class="form-input" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>新密码</label>
|
||
<input type="password" id="new-password" class="form-input" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>确认新密码</label>
|
||
<input type="password" id="confirm-password" class="form-input" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-danger">更新密码</button>
|
||
</form>
|
||
<div id="password-result"></div>
|
||
</div>
|
||
|
||
<!-- 数据库转换 -->
|
||
<div class="database-convert">
|
||
<h3>数据库转换</h3>
|
||
<p class="convert-warning">⚠️ 警告：数据库转换会导出当前数据并导入到新数据库，请确保已备份数据！</p>
|
||
<div class="convert-form">
|
||
<select id="target-db-type">
|
||
<option value="sqlite">SQLite</option>
|
||
<option value="mysql">MySQL</option>
|
||
</select>
|
||
<button class="btn btn-danger" id="convert-db-btn">转换数据库</button>
|
||
</div>
|
||
<div id="convert-result"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 系统信息 -->
|
||
<section class="settings-section">
|
||
<div class="section-header">
|
||
<h2>系统信息</h2>
|
||
<p class="section-description">查看系统运行状态和统计信息</p>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div class="system-stats" id="system-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-label">用户总数</span>
|
||
<span class="stat-value" id="stat-users">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">路由总数</span>
|
||
<span class="stat-value" id="stat-routes">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">日志条目</span>
|
||
<span class="stat-value" id="stat-logs">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">服务器时间</span>
|
||
<span class="stat-value" id="stat-time">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 操作系统信息 -->
|
||
<section class="settings-section">
|
||
<div class="section-header">
|
||
<h2>运行环境</h2>
|
||
<p class="section-description">查看服务器运行环境信息</p>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div class="os-info" id="os-info">
|
||
<div class="info-item">
|
||
<span class="info-label">操作系统</span>
|
||
<span class="info-value" id="os-type">-</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">系统架构</span>
|
||
<span class="info-value" id="os-arch">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="/js/admin.js"></script>
|
||
<script src="/js/settings.js"></script>
|
||
</body>
|
||
</html>
|