From b74f237ee91ea297f00c4eee49b18c1d24280da4 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sun, 13 Sep 2026 20:38:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96(filter):=20=E9=BB=91?=
 =?UTF-8?q?=E7=99=BD=E5=90=8D=E5=8D=95=E7=AE=A1=E7=90=86=E7=B4=A7=E5=87=91?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B9=B6=E6=B6=88=E9=99=A4=E6=A8=AA=E7=BA=B5?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/HomeHeader/HomeHeader.vue      |  2 +-
 .../SenderFilterManagement.css                | 72 ++++++++++++-------
 .../SenderFilterManagement.js                 |  2 +-
 .../SenderFilterManagement.vue                | 31 ++++----
 4 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/frontend/src/views/components/HomeHeader/HomeHeader.vue b/frontend/src/views/components/HomeHeader/HomeHeader.vue
index 1ae47211..6c0f1798 100644
--- a/frontend/src/views/components/HomeHeader/HomeHeader.vue
+++ b/frontend/src/views/components/HomeHeader/HomeHeader.vue
@@ -20,7 +20,7 @@
   <!-- 设置抽屉保留右侧导航，一级分类不影响内部标签页。 -->
   <el-drawer
     v-model="globalStatus.settingsDrawerVisible"
-    :size="isMobile ? '100%' : 'min(100vw, max(50vw, 820px))'"
+    :size="isMobile ? '100%' : 'min(100vw, max(56vw, 880px))'"
     :title="lang.settings"
     class="settings-drawer"
     :with-header="true"
diff --git a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.css b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.css
index 57851c09..5398c2b9 100644
--- a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.css
+++ b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.css
@@ -2,60 +2,59 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 10px;
 }
 
-.settings-header {
+.sf-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
+  align-items: center;
+  gap: 12px;
   margin-bottom: 0;
 }
 
 .header-main h3 {
-  margin: 0 0 6px 0;
-  font-size: 18px;
+  margin: 0;
+  font-size: 17px;
   font-weight: 600;
   color: var(--pm-text-primary, #303133);
 }
 
-.settings-desc {
-  margin: 0;
-  font-size: 13px;
-  color: var(--pm-text-secondary, #909399);
-  line-height: 1.5;
-}
-
 .sf-badges {
   display: flex;
-  gap: 8px;
+  gap: 6px;
   flex-shrink: 0;
 }
 
 .sf-badge {
   font-size: 12px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 22px;
 }
 
 .sf-quick-add-box {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
+  gap: 8px;
+  padding: 8px 12px;
   background-color: var(--el-fill-color-light, #f8fafc);
   border: 1px solid var(--el-border-color-lighter, #ebeef5);
   border-radius: 8px;
 }
 
 .sf-input-email {
-  width: 320px;
+  flex: 1 1 200px;
+  min-width: 140px;
 }
 
 .sf-select-type {
-  width: 130px;
+  width: 116px;
+  flex-shrink: 0;
 }
 
 .sf-quick-add-box .el-button--primary {
+  flex-shrink: 0;
   background-color: var(--pm-primary-color, #2563eb) !important;
   border-color: var(--pm-primary-color, #2563eb) !important;
   color: #ffffff !important;
@@ -71,12 +70,11 @@
   transform: translateY(-1px);
 }
 
-
 .sf-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   flex-wrap: wrap;
 }
 
@@ -84,8 +82,12 @@
   margin-bottom: 0;
 }
 
+.sf-search {
+  flex: 0 1 220px;
+}
+
 .sf-search-input {
-  width: 260px;
+  width: 100%;
 }
 
 .sf-table-wrapper {
@@ -98,24 +100,38 @@
   width: 100%;
 }
 
+.sf-table :deep(.el-table__cell) {
+  padding: 6px 0;
+}
+
+.sf-table :deep(.cell) {
+  padding: 0 8px;
+  font-size: 13px;
+}
+
 .sf-actions {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+}
+
+.sf-actions .el-button {
+  padding: 2px 4px;
+  font-size: 12px;
 }
 
 .sf-pagination {
   display: flex;
   justify-content: flex-end;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 @media (max-width: 768px) {
-  .settings-header {
+  .sf-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
+    gap: 6px;
   }
   .sf-quick-add-box {
     flex-direction: column;
@@ -129,7 +145,11 @@
     flex-direction: column;
     align-items: flex-start;
   }
+  .sf-search {
+    width: 100%;
+    flex: 1 1 100%;
+  }
   .sf-search-input {
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.js b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.js
index b736a169..90961de4 100644
--- a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.js
+++ b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.js
@@ -10,7 +10,7 @@ export function useSenderFilters() {
   const blacklistCount = ref(0)
 
   const currentPage = ref(1)
-  const pageSize = ref(10)
+  const pageSize = ref(7)
   const searchKeyword = ref('')
   const currentTab = ref('all') // 'all' | 'whitelist' | 'blacklist'
 
diff --git a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.vue b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.vue
index 5ef1267e..c5c0add6 100644
--- a/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.vue
+++ b/frontend/src/views/components/SenderFilterManagement/SenderFilterManagement.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="settings-card sender-filter-card" v-loading="loading">
-    <div class="settings-header">
+    <div class="settings-header sf-header">
       <div class="header-main">
         <h3>发件人黑白名单</h3>
-        <p class="settings-desc">
-          管理受信任的白名单与受拦截的黑名单发件人。白名单邮件不提示风险，黑名单发件人邮件将强行标记风险警示。
-        </p>
       </div>
       <div class="sf-badges">
         <el-tag type="success" effect="plain" class="sf-badge">
-          信任白名单: {{ whitelistCount }}
+          白名单: {{ whitelistCount }}
         </el-tag>
         <el-tag type="danger" effect="plain" class="sf-badge">
-          拦截黑名单: {{ blacklistCount }}
+          黑名单: {{ blacklistCount }}
         </el-tag>
       </div>
     </div>
@@ -54,8 +51,8 @@
         @change="handleTabChange"
       >
         <el-radio-button value="all">全部 ({{ total }})</el-radio-button>
-        <el-radio-button value="whitelist">仅白名单 ({{ whitelistCount }})</el-radio-button>
-        <el-radio-button value="blacklist">仅黑名单 ({{ blacklistCount }})</el-radio-button>
+        <el-radio-button value="whitelist">白名单 ({{ whitelistCount }})</el-radio-button>
+        <el-radio-button value="blacklist">黑名单 ({{ blacklistCount }})</el-radio-button>
       </el-radio-group>
       <div class="sf-search">
         <el-input
@@ -79,12 +76,12 @@
       <el-table
         :data="filterList"
         stripe
-        size="default"
+        size="small"
         class="sf-table"
         empty-text="暂无匹配的发件人名单"
       >
-        <el-table-column prop="email" label="发件人邮箱" min-width="220" show-overflow-tooltip />
-        <el-table-column label="名单属性" width="130" align="center">
+        <el-table-column prop="email" label="发件人邮箱" min-width="160" show-overflow-tooltip />
+        <el-table-column label="名单属性" width="95" align="center">
           <template #default="{ row }">
             <el-tag
               v-if="row.filter_type === 'whitelist'"
@@ -92,7 +89,7 @@
               size="small"
               effect="light"
             >
-              信任白名单
+              白名单
             </el-tag>
             <el-tag
               v-else
@@ -100,16 +97,16 @@
               size="small"
               effect="light"
             >
-              拦截黑名单
+              黑名单
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="更新时间" width="160" align="center">
+        <el-table-column label="更新时间" width="130" align="center">
           <template #default="{ row }">
             <span>{{ formatDate(row.updated_at || row.created_at) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="管理操作" width="180" align="center">
+        <el-table-column label="管理操作" width="140" align="center">
           <template #default="{ row }">
             <div class="sf-actions">
               <el-button
@@ -119,7 +116,7 @@
                 size="small"
                 @click="handleToggle(row)"
               >
-                拉入黑名单
+                转黑名单
               </el-button>
               <el-button
                 v-else
@@ -128,7 +125,7 @@
                 size="small"
                 @click="handleToggle(row)"
               >
-                转为白名单
+                转白名单
               </el-button>
               <el-button
                 type="danger"