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

style: tighten rules detector and ban rows

Browse Source
This commit is contained in:
ngfchl
2026-07-07 20:15:37 +08:00
parent 39d39b07f9
commit d8dd77e56b
5 changed files with 82 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/App.vue
+6 -6
View File
@@ -892,7 +892,7 @@ onBeforeUnmount(() => {
<section v-show="activePage === 'rules'" class="tab-page rule-manage-page">
<SCard class="panel page-panel rule-detect-card compact-detect-card" title="🧪 规则检测" description="粘贴聊天内容，快速判断广告 / 垃圾 / 灰产，并可写入规则库">
<div class="rule-detect-compact">
<div class="rule-detect-compact rule-detect-row">
<label class="rule-text-field">
<span>聊天内容</span>
<textarea v-model="spamTestText" class="form-input rule-textarea compact" placeholder="粘贴可疑聊天内容，例如：点击 https://xxx 领取福利"></textarea>
@@ -911,11 +911,11 @@ onBeforeUnmount(() => {
<div class="compact-counts">关键词 {{ spamTestResult.rule_counts?.keywords }} / 正则 {{ spamTestResult.rule_counts?.regex }} / 域名 {{ spamTestResult.rule_counts?.adblock_domains || spamRules.counts.adblock_domains || 0 }}</div>
</template>
</div>
</div>
<div class="rule-action-bar">
<label class="switch-line compact"><input v-model="spamUseAi" type="checkbox" /> AI 兜底</label>
<SButtonLoading color="primary" :loading="spamTesting" :disabled="spamTesting" @click="testSpamText">开始检测</SButtonLoading>
<SButtonLoading variant="outline" color="warning" :loading="ruleSaving" :disabled="ruleSaving || !spamTestText.trim()" @click="addSpamTextToRules">AI生成规则并入库</SButtonLoading>
<div class="rule-action-bar">
<label class="switch-line compact"><input v-model="spamUseAi" type="checkbox" /> AI 兜底</label>
<SButtonLoading color="primary" :loading="spamTesting" :disabled="spamTesting" @click="testSpamText">检测</SButtonLoading>
<SButtonLoading variant="outline" color="warning" :loading="ruleSaving" :disabled="ruleSaving || !spamTestText.trim()" @click="addSpamTextToRules">AI入库</SButtonLoading>
</div>
</div>
<div v-if="generatedRuleHint" class="generated-rule-hint">{{ generatedRuleHint }}</div>
<div class="rule-write-grid inline-rule-writer compact-rule-writer">
front/src/style.css
+71
View File
@@ -551,3 +551,74 @@ body { background: #f3f6fb; }
.overview-ban-list .ban-meta .s-button { height: 22px; min-height: 22px; padding: 0 8px; font-size: 10px; }
.generated-rule-hint { margin-top: 6px; padding: 6px 9px; border-radius: 10px; background: #f0fdf4; color: #166534; border: 1px solid rgba(34,197,94,.24); font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Desktop rule detection: single-line tool style; mobile keeps stacked cards */
@media (min-width: 981px) {
.compact-detect-card .s-card__content { gap: 8px !important; }
.rule-detect-compact { grid-template-columns: minmax(420px, 1fr) minmax(260px, 340px) !important; gap: 10px !important; align-items: end !important; }
.rule-text-field { gap: 4px !important; }
.rule-textarea.compact { height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 9px 12px !important; line-height: 22px !important; resize: none !important; overflow: hidden !important; white-space: nowrap !important; }
.rule-result-card.compact { height: 42px !important; min-height: 42px !important; padding: 7px 10px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.rule-result-card.compact .empty { width: 100%; font-size: 13px; }
.rule-result-head { flex: 0 0 auto; min-width: 96px; }
.compact-reason { flex: 1 1 auto; min-width: 0; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: unset !important; }
.compact-counts { flex: 0 1 auto; max-width: 150px; padding: 4px 6px !important; }
.rule-action-bar { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: -2px; }
.switch-line.compact { margin-right: 0 !important; white-space: nowrap; }
.rule-action-bar .s-button { white-space: nowrap; }
.generated-rule-hint { margin-top: 0 !important; height: 30px; line-height: 18px; }
.compact-rule-writer { padding-top: 8px !important; grid-template-columns: 110px 90px minmax(260px, 1fr) 72px !important; gap: 8px !important; }
}
/* Ban records: fixed row height, list scrolls naturally when rows increase */
.overview-ban-list.v-overflow { display: flex !important; flex-direction: column !important; gap: 9px !important; overflow-y: auto !important; }
.overview-ban-list .ban-item { box-sizing: border-box; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: 16px 14px; gap: 2px !important; padding: 5px 8px !important; overflow: hidden !important; }
.overview-ban-list .ban-main { min-height: 0 !important; overflow: hidden !important; }
.overview-ban-list .ban-main b { display: block !important; height: 15px; line-height: 15px !important; }
.overview-ban-list .ban-main span { display: block !important; height: 14px; line-height: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.overview-ban-list .ban-meta { height: 14px !important; line-height: 14px !important; min-height: 0 !important; overflow: hidden !important; }
.overview-ban-list .ban-meta .s-button { height: 18px !important; min-height: 18px !important; padding: 0 6px !important; line-height: 18px !important; }
/* Rules desktop row: content input + result + actions in one line */
@media (min-width: 981px) {
.rule-detect-row { grid-template-columns: minmax(360px, 1fr) minmax(210px, 300px) auto !important; align-items: end !important; }
.rule-detect-row .rule-action-bar { margin-top: 0 !important; height: 42px; align-self: end; justify-content: flex-end !important; }
.rule-detect-row .rule-action-bar .s-button { height: 36px; min-height: 36px; padding: 0 12px; }
.rule-detect-row .rule-action-bar .s-button:last-child { max-width: 142px; overflow: hidden; text-overflow: ellipsis; }
.rule-detect-row .switch-line.compact { height: 36px; display: inline-flex; align-items: center; }
.rule-detect-row .rule-result-card.compact { min-width: 0; }
}
@media (max-width: 980px) {
.rule-detect-row { grid-template-columns: 1fr !important; }
.rule-detect-row .rule-action-bar { justify-content: flex-start !important; }
}
/* Final desktop tightening for rule detector */
@media (min-width: 981px) {
.rule-detect-row { grid-template-columns: minmax(400px, 1fr) minmax(240px, 300px) 210px !important; height: 42px !important; align-items: center !important; }
.rule-detect-row .rule-text-field { display: block !important; align-self: center !important; }
.rule-detect-row .rule-text-field > span { display: none !important; }
.rule-detect-row .rule-textarea.compact,
.rule-detect-row .rule-result-card.compact,
.rule-detect-row .rule-action-bar { align-self: center !important; margin: 0 !important; }
.rule-detect-row .rule-action-bar { width: 210px; display: grid !important; grid-template-columns: 66px 56px 72px; gap: 8px !important; }
.rule-detect-row .switch-line.compact { font-size: 12px; justify-content: center; }
.rule-detect-row .rule-action-bar .s-button { width: 100%; padding: 0 8px !important; font-size: 12px; }
.rule-detect-row .rule-action-bar .s-button:last-child { max-width: none !important; }
}
/* Keep rule detector action buttons single-line on desktop */
@media (min-width: 981px) {
.rule-detect-row { grid-template-columns: minmax(360px, 1fr) minmax(230px, 300px) 250px !important; }
.rule-detect-row .rule-action-bar { width: 250px !important; grid-template-columns: 70px 66px 96px !important; }
.rule-detect-row .rule-action-bar,
.rule-detect-row .rule-action-bar * { white-space: nowrap !important; }
.rule-detect-row .rule-action-bar .s-button,
.rule-detect-row .rule-action-bar button { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.rule-detect-row .rule-action-bar .s-button:last-child,
.rule-detect-row .rule-action-bar button:last-child { width: 96px !important; }
}
web/static/assets/index-BTCfe6yH.css → web/static/assets/index-B9Kyvn7u.css
+1 -1
View File
File diff suppressed because one or more lines are too long
web/static/assets/index-D8A3wB6d.js → web/static/assets/index-CkIgY8f5.js
+2 -2
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-D8A3wB6d.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-BTCfe6yH.css">
<script type="module" crossorigin src="/static/assets/index-CkIgY8f5.js"></script>
<link rel="stylesheet" crossorigin href="/static/assets/index-B9Kyvn7u.css">
</head>
<body>
<div id="app"></div>