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

style(admin): unify dialog layouts and dense readonly presentation

Browse Source
This commit is contained in:
ouyangxq
2026-10-20 10:11:31 +08:00
parent 7ff7c9914f
commit 3267679758
214 changed files with 10931 additions and 2654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/adminDensity.css
+58 -6
View File
@@ -67,6 +67,42 @@
.admin-density-dialog.el-dialog .el-empty__image { display: none; }
.admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }
/* Opted-in detail and editor content reuse the existing compact drawer frame. */
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-code-block { margin:0; padding:var(--admin-space-3); border:1px solid var(--admin-table-border); border-radius:var(--admin-radius); background:var(--admin-surface); color:var(--cc-text); font:var(--admin-font-caption)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Explicit section opt-in; existing dialogs retain their approved body layout. */
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section {
min-width: 0;
margin: 0 0 var(--admin-space-5);
padding: var(--admin-space-4) var(--admin-space-5);
border: 1px solid var(--admin-table-border);
border-radius: var(--admin-dialog-section-radius);
background: var(--admin-surface);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section:last-child { margin-bottom: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-sections { display: grid; gap: var(--admin-space-5); }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-sections > .density-dialog-section { margin: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="summary"] {
border-color: var(--admin-dialog-summary-border);
background: var(--admin-dialog-summary-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="source"] {
border-color: var(--admin-dialog-source-border);
background: var(--admin-dialog-source-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="work"] {
border-color: var(--admin-dialog-work-border);
background: var(--admin-dialog-work-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section > .density-dialog-section__title {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-3);
margin: 0 0 var(--admin-space-4); color: var(--cc-text); font-size: var(--admin-font-section); font-weight: 600;
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section__title small { color: var(--cc-muted); font-size: var(--admin-font-caption); font-weight: 400; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-note { margin: 0 0 var(--admin-space-3); color: var(--cc-muted); font-size: var(--admin-font-caption); }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section > .el-form > .el-form-item:last-child { margin-bottom: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section .el-table { --el-table-tr-bg-color: var(--admin-surface); }
/* Headers must keep units visible even when a saved column width is narrow. */
.admin-density .el-table th.el-table__cell .cell,
.admin-density-dialog .el-table th.el-table__cell .cell { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 18px; }
@@ -149,6 +185,7 @@
/* 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(--cc-row-action-gap, var(--admin-space-2)); }
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--editor)) .density-actions--footer { justify-content: flex-end; flex-wrap: wrap; gap: var(--admin-space-3); }
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
@@ -190,6 +227,7 @@
.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); }
.admin-density-dialog .density-form--flush-end > .el-form-item:last-child { margin-bottom: 0; }
/* Opted-in FormSection consumers share form headings without page-level paint. */
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section { padding: var(--admin-space-5) 0; }
@@ -201,12 +239,26 @@
:is(.admin-density, .admin-density-dialog) .density-form :is(.el-select, .el-input-number, .el-date-editor) { width: 100%; }
/* 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); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-body); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .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, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table th { background: var(--admin-label-bg); color: var(--cc-muted); font-weight: 600; }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table td { background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table tbody tr:nth-child(even) td { background: var(--admin-row-stripe); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table tbody tr:hover td { background: var(--admin-row-hover); }
/* Explicit cell editors keep one continuous table; focus retains Element's primary border. */
:is(.admin-density, .admin-density-dialog) .density-table--editable :is(.el-input, .el-textarea) {
--el-input-border-color: transparent;
--el-input-hover-border-color: var(--admin-table-border);
--el-input-bg-color: transparent;
}
:is(.admin-density, .admin-density-dialog) .density-table-editor { display: flex; align-items: center; gap: var(--admin-space-3); min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table-editor .el-input-number { flex: 1; width: 100%; min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-input__inner { text-align: left; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item { margin-bottom: 0; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item.is-error { margin-bottom: var(--admin-space-5); }
:is(.admin-density, .admin-density-dialog) .density-table--editable :is(.el-input-number, .el-segmented, .el-date-editor) { width: 100%; min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table-editor > span { flex: 0 0 auto; color: var(--cc-muted); white-space: nowrap; }
/* 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); }