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

fix: show loading overlay on chat delete actions

Browse Source
This commit is contained in:
ngfchl
2026-07-07 15:21:15 +08:00
parent 5d5a25f753
commit a979ab3ea5
5 changed files with 346 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/App.vue
+7 -3
View File
@@ -517,7 +517,7 @@ onBeforeUnmount(() => {
<SCard id="chat" class="panel chat-panel" title="聊天记录" :description="`${chatCount} 条`">
<div class="scroll-area chat-scroll">
<div v-if="!chatLogs.length" class="empty">等待消息...</div>
<article v-for="(item, i) in chatLogs" :key="item.id || i" :class="chatItemClass(item)">
<article v-for="(item, i) in chatLogs" :key="item.id || i" :class="[chatItemClass(item), { deleting: item._deleting }]">
<div class="chat-head">
<div class="chat-user-line">
<STag size="xs" :color="tagColor(item)" variant="soft">{{ chatStatusText(item) }}</STag>
@@ -536,11 +536,15 @@ onBeforeUnmount(() => {
<div class="chat-actions">
<STag v-if="item.deleted" size="xs" color="secondary" variant="soft">已删 · {{ formatTime(item.deleted_at) }}</STag>
<template v-else>
<SButton size="xs" variant="link" color="destructive" :loading="item._deleting" :disabled="item._deleting" @click="deleteChatMessage(item, false)">删除</SButton>
<SButton v-if="item.user_id" size="xs" variant="link" color="warning" :loading="item._deleting" :disabled="item._deleting" @click="deleteChatMessage(item, true)">删封</SButton>
<SButton size="xs" variant="link" color="destructive" :disabled="item._deleting" @click="deleteChatMessage(item, false)">{{ item._deleting ? '删除中...' : '删除' }}</SButton>
<SButton v-if="item.user_id" size="xs" variant="link" color="warning" :disabled="item._deleting" @click="deleteChatMessage(item, true)">{{ item._deleting ? '处理中...' : '删封' }}</SButton>
</template>
</div>
</div>
<div v-if="item._deleting" class="chat-loading-mask">
<span class="mini-spinner"></span>
<strong>正在处理当前消息...</strong>
</div>
</article>
</div>
</SCard>
front/src/style.css
+8
View File
@@ -278,3 +278,11 @@ body { background: #f3f6fb; }
.main-grid { height: auto; min-height: 0; padding-bottom: 72px; }
.main-grid .panel { height: 46vh; min-height: 320px; }
}
/* Current chat row operation feedback */
.chat-item.deleting { pointer-events: none; opacity: .78; border-color: #c7d2fe; box-shadow: 0 0 0 2px rgba(99,102,241,.10), 0 10px 24px rgba(15,23,42,.08); }
.chat-loading-mask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: inherit; background: rgba(255,255,255,.74); backdrop-filter: blur(3px); color: #3730a3; font-size: 13px; font-weight: 800; }
.chat-item.spam .chat-loading-mask { background: rgba(255,247,247,.78); color: #991b1b; }
.mini-spinner { width: 15px; height: 15px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: mini-spin .7s linear infinite; }
@keyframes mini-spin { to { transform: rotate(360deg); } }
web/static/assets/index-DezWyZkY.js
+328
View File
File diff suppressed because one or more lines are too long
web/static/assets/index-qfZfu3aR.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-CTevFLeK.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-CZjkYhOf.css">
<script type="module" crossorigin src="/static/assets/index-DezWyZkY.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-qfZfu3aR.css">
</head>
<body>
<div id="app"></div>