优化(filter): 黑白名单管理紧凑布局并消除横纵滚动条
Some checks are pending
Security Checks / security (push) Waiting to run
Some checks are pending
Security Checks / security (push) Waiting to run
This commit is contained in:
parent
0d7248727a
commit
fb1c22c4bb
@ -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"
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user