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

优化设置页面按钮布局

Browse Source
This commit is contained in:
smail 2026-10-16 01:33:43 +08:00
parent e850a91a47
commit 6ec7cada43
4 changed files with 166 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.css
View File

@ -6,7 +6,7 @@
.overview-heading {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
gap: 12px;
}
@ -40,7 +40,16 @@
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
padding-top: 2px;
padding-top: 0;
}
.overview-actions :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
margin: 0;
white-space: nowrap;
}
.action-row {

6
frontend/src/views/components/ConfigSettings/ConfigSettings.css
View File

@ -180,12 +180,18 @@
}
.action-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.action-row > .el-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
margin-left: 0;
margin-right: 0;
}
.maintenance-heading {
display: flex;

73
frontend/src/views/components/RuleSettings/RuleSettings.css
View File

@ -56,21 +56,41 @@
.row-actions {
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
opacity: 0.7;
transition: opacity 0.2s;
}
.row-actions :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
}
.modern-table :deep(tr:hover) .row-actions {
opacity: 1;
}
.form-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-start;
margin-top: 12px;
}
.form-actions :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
margin: 0;
}
.add-btn {
border-radius: var(--pm-radius-sm);
}
@ -123,14 +143,53 @@
align-items: center;
}
.rule-line :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
}
.add-condition-action {
margin-top: 12px;
}
.action-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.action-row > * {
min-width: 0;
}
.action-row .flex-grow {
flex: 1 1 240px;
min-width: 180px;
}
.action-row .w-48 {
flex: 0 1 180px;
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.dialog-footer :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 88px;
min-height: 32px;
margin: 0;
}
.custom-divider {
@ -152,3 +211,15 @@
margin-bottom: 8px;
}
}
@container settings-content (max-width: 560px) {
.action-row {
align-items: stretch;
}
.action-row .w-48,
.action-row .flex-grow {
flex-basis: 100%;
width: 100%;
}
}

77
frontend/src/views/components/UserManagement/UserManagement.css
View File

@ -16,6 +16,7 @@
font-weight: 600;
color: var(--pm-text-primary);
margin: 0;
min-width: 0;
}
.table-container {
@ -172,8 +173,37 @@
}
.group-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
flex: 0 1 auto;
min-width: 0;
}
.group-toolbar :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 32px;
margin: 0;
white-space: nowrap;
}
.modern-table :deep(.el-table__cell:last-child .cell) {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.modern-table :deep(.el-table__cell:last-child .el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
white-space: nowrap;
}
.account-group-panel {
@ -187,6 +217,7 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--el-fill-color-light);
}
@ -197,6 +228,7 @@
.account-group-toggle {
flex: 1;
min-width: 0;
border: 0;
padding: 4px 0;
background: transparent;
@ -207,6 +239,15 @@
cursor: pointer;
}
.account-group-header :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
.account-group-toggle:focus-visible {
outline: 2px solid var(--el-color-primary);
outline-offset: 4px;
@ -235,8 +276,12 @@
}
.membership-selector-header :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
.membership-option {
@ -317,8 +362,40 @@
}
.membership-manage-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.dialog-footer :deep(.el-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 88px;
min-height: 32px;
margin: 0;
}
@container settings-content (max-width: 760px) {
.settings-header {
align-items: center;
}
.group-toolbar {
flex: 1 1 100%;
justify-content: flex-start;
}
}
.account-form {