html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-09-14 20:21:02 +08:00
parent 349e8f60df
commit bd6d54ac33
16 changed files with 208 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/adminDensity.css
+26 -11
View File
@@ -99,6 +99,16 @@
:is(.admin-density, .admin-density-dialog) .el-button.density-action:disabled { color: var(--el-button-disabled-text-color); border-color: var(--el-button-disabled-border-color); background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }
/* Detail headings and summaries shared by domestic and overseas pages. */
.admin-density .density-detail-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); margin-bottom: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
.admin-density .density-detail-heading { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
.admin-density .density-detail-title { min-width: 0; margin: 0; color: #172033; font-size: var(--admin-font-title, 16px); line-height: 1.5; overflow-wrap: anywhere; }
.admin-density .density-detail-overview { border-bottom: 1px solid var(--cc-border); display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
.admin-density .density-detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
.admin-density .density-detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
.admin-density .density-detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-density .density-detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
/* Back navigation stays in the detail heading, beside its business identifier. */
.admin-density .el-button.density-back { height: var(--admin-control-height); padding: 0; border: 0; background: transparent; color: var(--cc-muted); font-size: var(--admin-font-body); font-weight: 400; box-shadow: none; }
.admin-density .el-button.density-back:hover { color: var(--cc-primary); background: transparent; }
@@ -106,12 +116,18 @@
/* Navigation tabs shared by customer/order details. Layout-specific borders stay local. */
.admin-density .density-tabs { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; background: var(--admin-surface); scrollbar-width: thin; }
.admin-density .density-tabs > button { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
.admin-density .density-tabs > button::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
.admin-density .density-tabs > button:hover { background: #fafbff; color: #344054; }
.admin-density .density-tabs > button.active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
.admin-density .density-tabs > button.active::after { background: var(--cc-primary); }
.admin-density .density-tabs > button:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
.admin-density .density-tabs > button,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
.admin-density .density-tabs > button::after,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
.admin-density .density-tabs > button:hover,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:hover { background: #fafbff; color: #344054; }
.admin-density .density-tabs > button.active,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
.admin-density .density-tabs > button.active::after,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after { background: var(--cc-primary); }
.admin-density .density-tabs > button:focus-visible,
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
.admin-density .density-tab-icon { display: inline-flex; width: var(--admin-tab-icon-slot); height: var(--admin-tab-icon-slot); flex: 0 0 var(--admin-tab-icon-slot); align-items: center; justify-content: center; font: var(--admin-tab-icon-size)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
@@ -126,16 +142,15 @@
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
/* Element tabs retain their keyboard handling and use the shared detail-tab scale. */
.admin-density .density-element-tabs { min-width: 0; background: var(--admin-surface); border-bottom: 1px solid var(--admin-table-border); }
.admin-density .density-element-tabs > .el-tabs__header { margin: 0; }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item { height: var(--admin-tab-height); padding: 0 var(--admin-space-6); font-size: var(--admin-font-body); font-weight: 500; color: #475467; }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item.is-active { color: var(--cc-primary); font-weight: 600; }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__item:hover { color: var(--cc-primary); }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__active-bar { background-color: var(--cc-primary); }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav-wrap::after { height: 1px; background: var(--cc-border); }
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__active-bar { display: none; }
.admin-density .density-element-tabs:not(.density-contained-tabs) > .el-tabs__content { display: none; }
.admin-density .density-contained-tabs > .el-tabs__content { padding: var(--admin-space-5); }
.admin-density .density-element-tabs .el-tabs__item { gap: var(--admin-space-2); }
/* Explicit page descriptions share the teleported detail table scale. */
.admin-density .density-descriptions .el-descriptions__label.el-descriptions__cell { width: var(--admin-label-width); font-size: var(--admin-font-caption); background: var(--admin-label-bg); }