114 lines
4.0 KiB
HTML
114 lines
4.0 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="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🔐 管理员后台</h1>
|
||
<a href="/" class="btn btn-secondary">返回普通页面</a>
|
||
</header>
|
||
|
||
<!-- 简单的密码验证 -->
|
||
<section id="authSection" class="auth-section">
|
||
<h2>请输入管理员密码</h2>
|
||
<form id="authForm">
|
||
<div class="form-group">
|
||
<input type="password" id="adminPassword" placeholder="管理员密码" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">登录</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- 管理员操作区域 -->
|
||
<section id="adminSection" class="data-section" style="display: none;">
|
||
<div class="section-header">
|
||
<h2>数据管理</h2>
|
||
<button onclick="loadAdminData()" class="btn btn-secondary">🔄 刷新</button>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table id="adminTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="sortable" onclick="sortTable('id')">序号 <span class="sort-icon">⇅</span></th>
|
||
<th class="sortable" onclick="sortTable('submitTime')">提交时间 <span class="sort-icon">⇅</span></th>
|
||
<th class="sortable" onclick="sortTable('name')">提交人 <span class="sort-icon">⇅</span></th>
|
||
<th>牌谱链接</th>
|
||
<th>备注说明</th>
|
||
<th class="sortable" onclick="sortTable('hasNaga')">是否有 Naga <span class="sort-icon">⇅</span></th>
|
||
<th>Naga 链接</th>
|
||
<th>Naga 说明</th>
|
||
<th>图片</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="adminTableBody">
|
||
<tr>
|
||
<td colspan="10" class="loading">加载中...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 编辑模态框 -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeEditModal()">×</span>
|
||
<h2>编辑 Naga 信息</h2>
|
||
<form id="editForm">
|
||
<input type="hidden" id="editId">
|
||
|
||
<div class="form-group">
|
||
<label>基本信息（只读）</label>
|
||
<div class="readonly-info" id="readonlyInfo"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editNagaLink">Naga 链接</label>
|
||
<input type="url" id="editNagaLink" placeholder="https://example.com/naga">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editNagaNote">Naga 说明</label>
|
||
<textarea id="editNagaNote" rows="4" maxlength="200" placeholder="请输入 Naga 说明 (最多200字)"></textarea>
|
||
<span class="hint char-count">当前字数: <span id="nagaNoteCount">0</span> / 200</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editImages">上传图片</label>
|
||
<input type="file" id="editImages" name="images" accept="image/*" multiple>
|
||
<span class="hint">支持 jpg, png, gif, webp 格式，单个文件最大 5MB，最多 10 张</span>
|
||
<div id="imagePreview" class="image-preview"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>已上传的图片</label>
|
||
<div id="existingImages" class="existing-images"></div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存修改</button>
|
||
<button type="button" onclick="closeEditModal()" class="btn btn-secondary">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片查看模态框 -->
|
||
<div id="imageModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<div id="modalImages" class="modal-images"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="admin.js"></script>
|
||
</body>
|
||
</html> |