mirror of
https://github.com/MeowLynxSea/CatismImage.git
synced 2025-07-09 10:54:35 +00:00
221 lines
11 KiB
HTML
221 lines
11 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>CatismImage - 仪表盘</title>
|
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/static/css/theme.css" rel="stylesheet">
|
|
<link href="/static/css/theme.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="background-layer"></div>
|
|
<div class="container py-4">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="user-info">
|
|
<h3>用户信息 <button class="btn btn-sm btn-danger" id="logoutBtn">退出登录</button>
|
|
<div class="btn-group ms-2">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
主题
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="themeDropdown">
|
|
<li><a class="dropdown-item" href="#" data-theme="light">浅色</a></li>
|
|
<li><a class="dropdown-item" href="#" data-theme="dark">深色</a></li>
|
|
<li><a class="dropdown-item" href="#" id="themeSettingsBtn">更多设置</a></li>
|
|
</ul>
|
|
</div></h3>
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-7 mb-2">
|
|
<label class="form-label">登录密钥</label>
|
|
<div class="d-flex align-items-center">
|
|
<span id="userKey"></span>
|
|
<button class="btn btn-sm btn-outline-secondary ms-2" id="copyKeyBtn">复制</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-5">
|
|
<label class="form-label">昵称</label>
|
|
<div class="d-flex align-items-center">
|
|
<span id="userNickname"></span>
|
|
<button class="btn btn-sm btn-outline-primary ms-2" id="editNicknameBtn" data-bs-toggle="modal" data-bs-target="#editNicknameModal">修改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h5 class="mb-2">用量情况</h5>
|
|
<div class="col-12 col-lg-12 mb-2">
|
|
<label class="form-label">MeowCoin余额</label>
|
|
<div class="d-flex align-items-center">
|
|
<span id="userMeowcoin">Loading...</span>
|
|
<button class="btn btn-sm btn-primary ms-2" id="rechargeBtn">充值</button>
|
|
<button class="btn btn-sm btn-info ms-2" id="queryBillBtn">查询</button>
|
|
</div>
|
|
</div>
|
|
<div class="my-2" id="trafficUsage"></div>
|
|
<div class="mb-3" id="storageUsage"></div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h4>上传图片</h4>
|
|
<form id="uploadForm">
|
|
<div class="my-3">
|
|
<div class="drop-zone" id="dropZone">
|
|
<input class="form-control" type="file" id="imageFile" accept="image/*" multiple required style="display: none;">
|
|
<p style="margin-top: 10px; cursor: pointer;">点击或拖拽图片到此处</p>
|
|
<div id="uploadArea"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<div id="uploadResult" class="mt-4 d-none">
|
|
<div class="alert alert-success">
|
|
<h5>上传成功!</h5>
|
|
<p>图片URL: <a href="#" id="imageUrl" target="_blank"></a></p>
|
|
</div>
|
|
<div class="text-center">
|
|
<img id="uploadPreviewImage" class="img-thumbnail" style="max-height: 300px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div id="imageListContainer">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h3>我的图片</h3>
|
|
<button class="btn btn-sm btn-outline-secondary d-md-none my-2" type="button" data-bs-toggle="collapse" data-bs-target="#imageListCollapse" aria-expanded="false" aria-controls="imageListCollapse">
|
|
显示/隐藏
|
|
</button>
|
|
</div>
|
|
<div class="collapse d-md-block mx-2" id="imageListCollapse">
|
|
<div class="row" id="imageList">
|
|
<!-- 图片列表将通过JS动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toastContainer" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
|
|
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- 主题设置模态框 -->
|
|
<div class="modal fade" id="themeSettingsModal" tabindex="-1" aria-labelledby="themeSettingsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="themeSettingsModalLabel">主题设置</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">主题模式</label>
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle mx-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
选择主题
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="themeDropdown">
|
|
<li><a class="dropdown-item" href="#" data-theme="light">浅色</a></li>
|
|
<li><a class="dropdown-item" href="#" data-theme="dark">深色</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="themeColorPicker" class="form-label">主题颜色</label>
|
|
<input type="color" class="form-control form-control-color w-50" id="themeColorPicker" value="#0d6efd">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 昵称修改模态框 -->
|
|
<div class="modal fade" id="editNicknameModal" tabindex="-1" aria-labelledby="editNicknameModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editNicknameModalLabel">修改昵称</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="newNickname" class="form-label">新昵称</label>
|
|
<input type="text" class="form-control" id="newNickname">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="saveNicknameBtn">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 充值模态框 -->
|
|
<div class="modal fade" id="rechargeModal" tabindex="-1" aria-labelledby="rechargeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="rechargeModalLabel">充值 MeowCoin</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="rechargeAmount" class="form-label">充值金额</label>
|
|
<input type="number" class="form-control" id="rechargeAmount" min="1" step="1">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirmRechargeBtn">确认充值</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 账单查询模态框 -->
|
|
<div class="modal fade" id="billQueryModal" tabindex="-1" aria-labelledby="billQueryModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-fullscreen-lg-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="billQueryModalLabel">账单查询</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-5">
|
|
<label for="startDate" class="form-label">开始日期</label>
|
|
<input type="date" class="form-control" id="startDate">
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label for="endDate" class="form-label">结束日期</label>
|
|
<input type="date" class="form-control" id="endDate">
|
|
</div>
|
|
<div class="col-md-2 d-flex align-items-end">
|
|
<button class="btn btn-primary w-100" id="queryBillSubmit">查询</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>订单号</th>
|
|
<th>时间</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="billTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |