xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

优化系统发信配置一页布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source 
为系统通知发信页面增加明确的管理面板与详情面板布局类，修正桌面端两栏排列和窄窗口回退规则，压缩配置区间距。
This commit is contained in:
smail 2026-09-27 11:34:29 +08:00
parent ad1012121d
commit 525dc78de6
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/views/components/SystemNotification/SystemNotification.css
View File

@ -221,127 +221,127 @@
}
/* Desktop manager layout: keep the authorization list and selected account settings visible together. */
.notification-settings:has(> .notification-panel .el-table) {
.notification-settings:has(> .notification-manager-panel) {
display: grid;
grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 1.18fr);
align-items: start;
gap: 12px;
min-width: 0;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-header,
.notification-settings:has(> .notification-panel .el-table) > .el-alert {
.notification-settings:has(> .notification-manager-panel) > .notification-header,
.notification-settings:has(> .notification-manager-panel) > .el-alert {
grid-column: 1 / -1;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type {
.notification-settings:has(> .notification-manager-panel) > .notification-manager-panel {
grid-column: 1;
min-width: 0;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel {
grid-column: 2;
min-width: 0;
padding: 14px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type h3 {
.notification-settings:has(> .notification-manager-panel) > .notification-manager-panel h3 {
margin-bottom: 8px;
}
.notification-settings:has(> .notification-panel .el-table) :deep(.el-table .cell) {
.notification-settings:has(> .notification-manager-panel) :deep(.el-table .cell) {
padding-inline: 8px;
line-height: 1.35;
}
.notification-settings:has(> .notification-panel .el-table) :deep(.el-table__cell) {
.notification-settings:has(> .notification-manager-panel) :deep(.el-table__cell) {
padding-block: 7px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type .el-pagination {
.notification-settings:has(> .notification-manager-panel) > .notification-manager-panel .el-pagination {
margin-top: 8px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-heading {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-heading {
margin-bottom: 8px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-credential {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-credential {
margin: 8px 0;
padding: 8px 10px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 10px 14px;
align-items: start;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-form) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-form) {
grid-column: 1;
grid-row: 1;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions) {
grid-column: 1;
grid-row: 2;
min-width: 0;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) {
grid-column: 2;
grid-row: 1 / span 2;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.notification-hint) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.notification-hint) {
grid-column: 1;
grid-row: 3;
margin: 0;
font-size: 12px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions + .notification-hint) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions + .notification-hint) {
grid-column: 2;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-alert) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-alert) {
grid-column: 1 / -1;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-form-item) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-form-item) {
margin-bottom: 10px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-limits {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-limits {
gap: 8px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__header) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__header) {
margin-bottom: 6px;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__cell) {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__cell) {
padding: 7px 10px;
}
@media (max-width: 920px) {
.notification-settings:has(> .notification-panel .el-table) {
.notification-settings:has(> .notification-manager-panel) {
display: flex;
flex-direction: column;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel {
.notification-settings:has(> .notification-manager-panel) > .notification-panel {
width: 100%;
box-sizing: border-box;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns {
display: flex;
flex-direction: column;
}
.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > * {
.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > * {
width: 100%;
box-sizing: border-box;
}

4
frontend/src/views/components/SystemNotification/SystemNotification.vue
View File

@ -17,7 +17,7 @@
:closable="false"
/>
<div v-if="manager && !userId" class="notification-panel">
<div v-if="manager && !userId" class="notification-panel notification-manager-panel">
<h3>账号授权管理</h3>
<el-table :data="accounts" stripe>
<el-table-column prop="account" label="账号" min-width="110" />
@ -46,7 +46,7 @@
</div>
<el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
<div v-loading="loading" class="notification-panel" aria-live="polite">
<div v-loading="loading" class="notification-panel notification-detail-panel" aria-live="polite">
<template v-if="status">
<div class="notification-heading">
<h3>账号：{{ status.account }}</h3>