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 18:34:34 +08:00
parent 25825685c3
commit 66f49b97e5
40 changed files with 472 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/adminDensity.css
+45 -12
View File
@@ -18,10 +18,10 @@
--el-table-row-hover-bg-color: var(--admin-row-hover);
font-size: var(--admin-font-body, 13px);
}
.admin-density .data-table .el-table .el-table__cell, .admin-density-dialog .el-table .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
.admin-density .el-table .el-table__cell, .admin-density .data-table .el-table .el-table__cell, .admin-density-dialog .el-table .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
.admin-density .el-table .cell, .admin-density-dialog .el-table .cell { line-height: 22px; }
.admin-density .el-table .el-button--small, .admin-density-dialog .el-table .el-button--small { height: var(--admin-action-height, 28px); padding: var(--admin-space-1, 4px) var(--admin-space-3, 8px); }
.admin-density .el-table__body tr.el-table__row--striped td.el-table__cell { background: #fcfcfd; }
.admin-density .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--admin-row-stripe); }
.admin-density .data-table .data-table__toolbar { min-height: 44px; padding: var(--admin-space-2, 6px) var(--admin-space-5, 12px); }
.admin-density .data-table .data-table__pagination { min-height: 48px; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
.admin-density .el-empty { padding: var(--admin-space-5, 12px) 0; }
@@ -29,7 +29,7 @@
.admin-density .el-empty__description { margin-top: 0; }
.admin-density .el-empty__description p { font-size: var(--admin-font-body, 13px); }
.admin-density-dialog .el-form-item__label { line-height: 22px; }
.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: #f8fafc; }
.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: var(--admin-label-bg); }
.admin-density-dialog .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
.admin-density-dialog.el-dialog.is-fullscreen { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
.admin-density-dialog.el-dialog.admin-density-workspace:not(.is-fullscreen) { height: 92vh; max-height: 92vh; margin-top: 4vh; }
@@ -71,15 +71,16 @@
:is(.admin-density, .admin-density-dialog) .el-button.density-action {
--action-color: var(--admin-action-neutral);
--action-border: var(--admin-action-neutral-border);
--action-hover-bg: var(--admin-label-bg);
--el-button-text-color: var(--action-color);
--el-button-border-color: var(--action-border);
--el-button-bg-color: var(--admin-surface);
--el-button-hover-text-color: var(--action-color);
--el-button-hover-border-color: var(--action-color);
--el-button-hover-bg-color: var(--admin-label-bg);
--el-button-hover-bg-color: var(--action-hover-bg);
--el-button-active-text-color: var(--action-color);
--el-button-active-border-color: var(--action-color);
--el-button-active-bg-color: var(--admin-label-bg);
--el-button-active-bg-color: var(--action-hover-bg);
--el-button-disabled-text-color: #a1a1aa;
--el-button-disabled-border-color: var(--admin-table-border);
--el-button-disabled-bg-color: var(--admin-surface);
@@ -89,15 +90,20 @@
color: var(--action-color); background: var(--admin-surface);
font-size: var(--admin-font-body); font-weight: 600; box-shadow: none;
}
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="warning"] { --action-color: var(--admin-action-warning); --action-border: var(--admin-action-warning-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="purple"] { --action-color: var(--admin-action-purple); --action-border: var(--admin-action-purple-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="primary"] { --action-color: var(--admin-action-primary); --action-border: var(--admin-action-primary-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="success"] { --action-color: var(--admin-action-success); --action-border: var(--admin-action-success-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="danger"] { --action-color: var(--admin-action-danger); --action-border: var(--admin-action-danger-border); }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:hover:not(:disabled) { color: var(--action-color); border-color: var(--action-color); background: var(--admin-label-bg); box-shadow: none; }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="warning"] { --action-color: var(--admin-action-warning); --action-border: var(--admin-action-warning-border); --action-hover-bg: var(--admin-action-warning-hover); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="purple"] { --action-color: var(--admin-action-purple); --action-border: var(--admin-action-purple-border); --action-hover-bg: var(--admin-action-purple-hover); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="primary"] { --action-color: var(--admin-action-primary); --action-border: var(--admin-action-primary-border); --action-hover-bg: var(--admin-action-primary-hover); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="success"] { --action-color: var(--admin-action-success); --action-border: var(--admin-action-success-border); --action-hover-bg: var(--admin-action-success-hover); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="danger"] { --action-color: var(--admin-action-danger); --action-border: var(--admin-action-danger-border); --action-hover-bg: var(--admin-action-danger-hover); }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:hover:not(:disabled) { color: var(--action-color); border-color: var(--action-color); background: var(--action-hover-bg); box-shadow: none; }
: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; }
/* 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; }
.admin-density .el-button.density-back:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }
/* 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; }
@@ -113,9 +119,36 @@
.admin-density-drawer .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }
/* Reusable row action group; no business action names in the shared layer. */
.admin-density .data-table .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--admin-space-2); }
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
/* The same action spacing also applies to native tables and teleported content. */
: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; }
/* 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__content { display: none; }
/* Opted-in grouped forms use the same labels and spacing on pages and in dialogs. */
:is(.admin-density, .admin-density-dialog) .density-form,
.admin-density.density-form { --el-form-label-font-size: var(--admin-font-body); }
:is(.admin-density, .admin-density-dialog) .density-form .el-form-item,
.admin-density.density-form .el-form-item { margin-bottom: var(--admin-space-5); }
/* Existing native data tables keep their business column widths and sticky cells. */
:is(.admin-density, .admin-density-dialog) .density-table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-body); }
:is(.admin-density, .admin-density-dialog) .density-table :is(th, td) { height: var(--admin-row-height); padding: var(--admin-space-1) var(--admin-space-3); border: 1px solid var(--admin-table-border); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
:is(.admin-density, .admin-density-dialog) .density-table th { background: var(--admin-label-bg); color: var(--cc-muted); font-weight: 600; }
:is(.admin-density, .admin-density-dialog) .density-table td { background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .density-table tbody tr:nth-child(even) td { background: var(--admin-row-stripe); }
:is(.admin-density, .admin-density-dialog) .density-table tbody tr:hover td { background: var(--admin-row-hover); }
/* Continuous description grid. Page owns column count and wide-field spans only. */
:is(.admin-density, .admin-density-dialog) .density-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .density-fields > div { display: grid; grid-template-columns: var(--admin-field-label-width, var(--admin-label-width)) minmax(0, 1fr); min-width: 0; min-height: var(--admin-row-height); gap: 0; padding: 0; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); border-radius: 0; background: var(--admin-surface); }