677 lines
23 KiB
HTML
677 lines
23 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>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 侧边栏 */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: #001529;
|
|
color: #fff;
|
|
padding: 24px;
|
|
position: fixed;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 20px;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nav .nav-item-item:hover,
|
|
.active {
|
|
background: #1890ff;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main {
|
|
flex: 1;
|
|
margin-left: 240px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.header {
|
|
background: #fff;
|
|
padding: 16px 24px;
|
|
margin-bottom: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
background: #fff;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-card.blue {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.stat-card.green {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
|
|
.stat-card.orange {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.stat-card.purple {
|
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
}
|
|
|
|
.stat-card h3 {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-card .value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 表格 */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
th {
|
|
background: #fafafa;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.btn {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #ff4d4f;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #ff7875;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #52c41a;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #73d13d;
|
|
}
|
|
|
|
/* 表单 */
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus,
|
|
.form-group textarea:focus {
|
|
border-color: #1890ff;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
/* 标签 */
|
|
.badge {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge-success {
|
|
background: #f6ffed;
|
|
color: #52c41a;
|
|
border: 1px solid #b7eb8f;
|
|
}
|
|
|
|
.badge-error {
|
|
background: #fff2f0;
|
|
color: #ff4d4f;
|
|
border: 1px solid #ffccc7;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: #fffbe6;
|
|
color: #faad14;
|
|
border: 1px solid #ffe58f;
|
|
}
|
|
|
|
.badge-info {
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
border: 1px solid #91d5ff;
|
|
}
|
|
|
|
/* 隐藏/显示页面 */
|
|
.page {
|
|
display: none;
|
|
}
|
|
|
|
.page.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 搜索框 */
|
|
.search-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.search-bar input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 分页 */
|
|
.pagination {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.pagination button {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pagination button:hover {
|
|
border-color: #1890ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.pagination button.active {
|
|
background: #1890ff;
|
|
color: #fff;
|
|
border-color: #1890ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<h1>🎯 管理系统</h1>
|
|
<div class="nav-item active" onclick="showPage('dashboard')">📊 数据概览</div>
|
|
<div class="nav-item" onclick="showPage('users')">👥 用户管理</div>
|
|
<div class="nav-item" onclick="showPage('streamers')">🎤 主播管理</div>
|
|
<div class="nav-item" onclick="showPage('system')">⚙️ 系统设置</div>
|
|
<div class="nav-item" onclick="showPage('announcements')">📢 公告管理</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main">
|
|
<!-- 顶部导航 -->
|
|
<div class="header">
|
|
<h2>欢迎回来，管理员</h2>
|
|
<button class="btn btn-primary">退出登录</button>
|
|
</div>
|
|
|
|
<!-- 数据概览页 -->
|
|
<div id="dashboard" class="page active">
|
|
<div class="stats-grid">
|
|
<div class="stat-card blue">
|
|
<h3>用户总数</h3>
|
|
<div class="value">1,234</div>
|
|
</div>
|
|
<div class="stat-card green">
|
|
<h3>主播数量</h3>
|
|
<div class="value">56</div>
|
|
</div>
|
|
<div class="stat-card orange">
|
|
<h3>活跃宝箱</h3>
|
|
<div class="value">89</div>
|
|
</div>
|
|
<div class="stat-card purple">
|
|
<h3>今日交易</h3>
|
|
<div class="value">¥12,345</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h3 style="margin-bottom: 16px;">系统状态</h3>
|
|
<p>✅ 系统运行正常</p>
|
|
<p>✅ 数据库连接正常</p>
|
|
<p>✅ Redis缓存正常</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户管理页 -->
|
|
<div id="users" class="page">
|
|
<div class="content">
|
|
<h3 style="margin-bottom: 16px;">用户管理</h3>
|
|
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="搜索用户名/邮箱/昵称" id="userSearch">
|
|
<select id="roleFilter">
|
|
<option value="">全部角色</option>
|
|
<option value="USER">普通用户</option>
|
|
<option value="STREAMER">主播</option>
|
|
<option value="ADMIN">管理员</option>
|
|
</select>
|
|
<select id="statusFilter">
|
|
<option value="">全部状态</option>
|
|
<option value="ACTIVE">正常</option>
|
|
<option value="DISABLED">禁用</option>
|
|
<option value="BANNED">封禁</option>
|
|
</select>
|
|
<button class="btn btn-primary" onclick="searchUsers()">搜索</button>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>邮箱</th>
|
|
<th>角色</th>
|
|
<th>状态</th>
|
|
<th>余额</th>
|
|
<th>注册时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>user001</td>
|
|
<td>user001@example.com</td>
|
|
<td><span class="badge badge-info">普通用户</span></td>
|
|
<td><span class="badge badge-success">正常</span></td>
|
|
<td>¥1,000</td>
|
|
<td>2024-01-01</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editUser(1)">编辑</button>
|
|
<button class="btn btn-danger" onclick="banUser(1)">封禁</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>streamer001</td>
|
|
<td>streamer001@example.com</td>
|
|
<td><span class="badge badge-warning">主播</span></td>
|
|
<td><span class="badge badge-success">正常</span></td>
|
|
<td>¥5,000</td>
|
|
<td>2024-01-02</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editUser(2)">编辑</button>
|
|
<button class="btn btn-danger" onclick="banUser(2)">封禁</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button>« 上一页</button>
|
|
<button class="active">1</button>
|
|
<button>2</button>
|
|
<button>3</button>
|
|
<button>下一页 »</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主播管理页 -->
|
|
<div id="streamers" class="page">
|
|
<div class="content">
|
|
<h3 style="margin-bottom: 16px;">主播管理</h3>
|
|
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="搜索主播名称" id="streamerSearch">
|
|
<select id="streamerStatusFilter">
|
|
<option value="">全部状态</option>
|
|
<option value="ACTIVE">正常</option>
|
|
<option value="SUSPENDED">暂停</option>
|
|
<option value="BANNED">封禁</option>
|
|
</select>
|
|
<button class="btn btn-primary" onclick="searchStreamers()">搜索</button>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>主播名称</th>
|
|
<th>抽成比例</th>
|
|
<th>宝箱数量</th>
|
|
<th>总收益</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>超级主播A</td>
|
|
<td>5%</td>
|
|
<td>10/20</td>
|
|
<td>¥50,000</td>
|
|
<td><span class="badge badge-success">正常</span></td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editStreamer(1)">编辑</button>
|
|
<button class="btn btn-warning" onclick="suspendStreamer(1)">暂停</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>金牌主播B</td>
|
|
<td>6%</td>
|
|
<td>5/10</td>
|
|
<td>¥30,000</td>
|
|
<td><span class="badge badge-success">正常</span></td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editStreamer(2)">编辑</button>
|
|
<button class="btn btn-warning" onclick="suspendStreamer(2)">暂停</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button>« 上一页</button>
|
|
<button class="active">1</button>
|
|
<button>2</button>
|
|
<button>3</button>
|
|
<button>下一页 »</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系统设置页 -->
|
|
<div id="system" class="page">
|
|
<div class="content">
|
|
<h3 style="margin-bottom: 16px;">系统设置</h3>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
|
|
<div>
|
|
<h4 style="margin-bottom: 16px;">基础配置</h4>
|
|
<div class="form-group">
|
|
<label>新用户注册奖励</label>
|
|
<input type="number" value="1000" placeholder="喵币数量">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>主播抽成比例</label>
|
|
<input type="number" value="5" step="0.1" placeholder="百分比">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>平台抽成比例</label>
|
|
<input type="number" value="5" step="0.1" placeholder="百分比">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>主播最大宝箱数</label>
|
|
<input type="number" value="10" placeholder="数量">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 style="margin-bottom: 16px;">业务配置</h4>
|
|
<div class="form-group">
|
|
<label>低保金额</label>
|
|
<input type="number" value="100" placeholder="分">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>允许的域名</label>
|
|
<textarea rows="3" placeholder="每行一个域名"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>系统维护模式</label>
|
|
<select>
|
|
<option value="off">关闭</option>
|
|
<option value="on">开启</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 24px; text-align: right;">
|
|
<button class="btn btn-success">保存设置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公告管理页 -->
|
|
<div id="announcements" class="page">
|
|
<div class="content">
|
|
<h3 style="margin-bottom: 16px;">公告管理</h3>
|
|
|
|
<button class="btn btn-primary" style="margin-bottom: 16px;" onclick="showCreateAnnouncement()">发布新公告</button>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>标题</th>
|
|
<th>类型</th>
|
|
<th>优先级</th>
|
|
<th>是否置顶</th>
|
|
<th>过期时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>系统维护通知</td>
|
|
<td><span class="badge badge-warning">警告</span></td>
|
|
<td>100</td>
|
|
<td><span class="badge badge-success">是</span></td>
|
|
<td>2024-12-31</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editAnnouncement(1)">编辑</button>
|
|
<button class="btn btn-danger" onclick="deleteAnnouncement(1)">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>新年活动开启</td>
|
|
<td><span class="badge badge-info">信息</span></td>
|
|
<td>50</td>
|
|
<td><span class="badge badge-error">否</span></td>
|
|
<td>2025-01-31</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editAnnouncement(2)">编辑</button>
|
|
<button class="btn btn-danger" onclick="deleteAnnouncement(2)">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button>« 上一页</button>
|
|
<button class="active">1</button>
|
|
<button>2</button>
|
|
<button>3</button>
|
|
<button>下一页 »</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面切换
|
|
function showPage(pageId) {
|
|
// 隐藏所有页面
|
|
document.querySelectorAll('.page').forEach(page => {
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// 移除所有导航项的active状态
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// 显示选中页面
|
|
document.getElementById(pageId).classList.add('active');
|
|
|
|
// 添加选中导航项的active状态
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
// 搜索用户
|
|
function searchUsers() {
|
|
console.log('搜索用户');
|
|
}
|
|
|
|
// 搜索主播
|
|
function searchStreamers() {
|
|
console.log('搜索主播');
|
|
}
|
|
|
|
// 编辑用户
|
|
function editUser(userId) {
|
|
alert('编辑用户: ' + userId);
|
|
}
|
|
|
|
// 封禁用户
|
|
function banUser(userId) {
|
|
if (confirm('确认要封禁这个用户吗？')) {
|
|
alert('封禁用户: ' + userId);
|
|
}
|
|
}
|
|
|
|
// 编辑主播
|
|
function editStreamer(streamerId) {
|
|
alert('编辑主播: ' + streamerId);
|
|
}
|
|
|
|
// 暂停主播
|
|
function suspendStreamer(streamerId) {
|
|
if (confirm('确认要暂停这个主播吗？')) {
|
|
alert('暂停主播: ' + streamerId);
|
|
}
|
|
}
|
|
|
|
// 显示创建公告
|
|
function showCreateAnnouncement() {
|
|
alert('显示创建公告对话框');
|
|
}
|
|
|
|
// 编辑公告
|
|
function editAnnouncement(id) {
|
|
alert('编辑公告: ' + id);
|
|
}
|
|
|
|
// 删除公告
|
|
function deleteAnnouncement(id) {
|
|
if (confirm('确认要删除这个公告吗？')) {
|
|
alert('删除公告: ' + id);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|