ngfchl/tg-spam-guard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: compact dashboard overview layout

Browse Source
This commit is contained in:
ngfchl
2026-07-07 14:45:53 +08:00
parent 2946305286
commit b52b3bec89
5 changed files with 376 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/App.vue
+6 -9
View File
@@ -499,21 +499,18 @@ onBeforeUnmount(() => {
<h2>{{ pageTitle }}</h2>
<p>{{ pageDesc }}</p>
</div>
<div class="top-actions">
<SButton size="xs" variant="outline" @click="goPage('shop')">商城管理</SButton>
<SButton size="xs" variant="outline" @click="goPage('lottery')">抽奖管理</SButton>
<SButton size="xs" variant="outline" @click="goPage('bans')">封禁记录</SButton>
<div class="top-actions compact-actions">
<SButton size="xs" variant="outline" @click="logout">退出</SButton>
<SButton size="xs" variant="outline" color="primary" :loading="restartingBot" :disabled="restartingBot" @click="restartBot">重启 Bot</SButton>
<SButton size="xs" variant="soft" color="warning" :loading="restarting" :disabled="restarting" @click="restartService">重启服务</SButton>
</div>
</header>
<section v-show="activePage === 'dashboard'" class="stats-grid">
<SCard class="stat-card blue"><span>今日封禁</span><strong>{{ stats.today_bans || 0 }}</strong></SCard>
<SCard class="stat-card red"><span>累计封禁</span><strong>{{ stats.total_bans || 0 }}</strong></SCard>
<SCard class="stat-card orange"><span>当前封禁</span><strong>{{ stats.active_bans || 0 }}</strong></SCard>
<SCard class="stat-card green"><span>聊天记录</span><strong>{{ chatCount }}</strong></SCard>
<section v-show="activePage === 'dashboard'" class="stats-grid compact-stats">
<SCard class="stat-card blue"><div class="stat-row"><span class="stat-icon">今</span><div><span>今日封禁</span><strong>{{ stats.today_bans || 0 }}</strong></div></div></SCard>
<SCard class="stat-card red"><div class="stat-row"><span class="stat-icon">总</span><div><span>累计封禁</span><strong>{{ stats.total_bans || 0 }}</strong></div></div></SCard>
<SCard class="stat-card orange"><div class="stat-row"><span class="stat-icon">封</span><div><span>当前封禁</span><strong>{{ stats.active_bans || 0 }}</strong></div></div></SCard>
<SCard class="stat-card green"><div class="stat-row"><span class="stat-icon">聊</span><div><span>聊天记录</span><strong>{{ chatCount }}</strong></div></div></SCard>
</section>
<section v-show="activePage === 'dashboard'" class="main-grid">
front/src/style.css
+39
View File
@@ -239,3 +239,42 @@ body { background: #f3f6fb; }
@media (max-width: 860px) {
.seg-buttons, .quick-times { display: grid; grid-template-columns: 1fr; }
}
/* Dashboard compact overview */
.admin-header { min-height: 72px; padding: 12px 16px; margin-bottom: 10px; }
.admin-header h2 { margin: 1px 0; font-size: 22px; }
.admin-header p { max-width: 520px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.compact-actions { gap: 6px; flex-wrap: nowrap; }
.compact-stats { grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.compact-stats .stat-card { min-height: 66px; border-radius: 15px !important; }
.compact-stats .stat-card .s-card__content { min-height: 0; padding: 10px 12px !important; }
.stat-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-icon { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 12px; background: rgba(79,70,229,.12); color: #4f46e5; font-size: 13px; font-weight: 900; }
.stat-card.red .stat-icon { background: rgba(239,68,68,.12); color: #dc2626; }
.stat-card.orange .stat-icon { background: rgba(245,158,11,.14); color: #d97706; }
.stat-card.green .stat-icon { background: rgba(16,185,129,.14); color: #059669; }
.stat-row div { min-width: 0; display: grid; gap: 2px; }
.compact-stats .stat-card span:not(.stat-icon) { font-size: 12px; color: #64748b; white-space: nowrap; }
.compact-stats .stat-card strong { font-size: 24px; line-height: 1; }
.compact-stats .stat-card::after { width: 48px; height: 48px; right: -16px; top: -16px; }
.admin-shell .floating-chat-send { height: 52px; display: flex; align-items: center; gap: 10px; }
.admin-shell .floating-chat-send > *:first-child { flex: 1; }
.main-grid { height: calc(100vh - 254px); min-height: 0; padding-bottom: 0; overflow: hidden; }
.main-grid .panel { height: 100%; min-height: 0; }
.main-grid .panel .s-card__content { height: calc(100% - 52px); min-height: 0; overflow: hidden; }
.main-grid .scroll-area, .main-grid .log-window { height: 100%; overflow-y: auto; }
@media (max-width: 1100px) {
.compact-actions { flex-wrap: wrap; }
.compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main-grid { height: calc(100vh - 330px); min-height: 420px; padding-bottom: 72px; }
}
@media (max-width: 720px) {
.admin-header { gap: 10px; }
.admin-header p { white-space: normal; }
.compact-stats { grid-template-columns: 1fr 1fr; }
.compact-stats .stat-card strong { font-size: 21px; }
.stat-icon { width: 30px; height: 30px; flex-basis: 30px; }
.main-grid { height: auto; min-height: 0; padding-bottom: 72px; }
.main-grid .panel { height: 46vh; min-height: 320px; }
}
web/static/assets/index-CTevFLeK.js
+328
View File
File diff suppressed because one or more lines are too long
web/static/assets/index-CZjkYhOf.css
+1
View File
File diff suppressed because one or more lines are too long
web/static/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/static/icon.svg" />
<title>TG Spam Guard</title>
<script type="module" crossorigin src="/static/assets/index-DPwRdHjl.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-CGm8xHHJ.css">
<script type="module" crossorigin src="/static/assets/index-CTevFLeK.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-CZjkYhOf.css">
</head>
<body>
<div id="app"></div>