优化

src/styles/adminDensity.css

@@ -1,66 +1,123 @@
+@import './adminDensityTokens.css';
+
 /* Explicit opt-in for approved dense business workspaces and teleported dialogs. */
-.admin-density, .admin-density-dialog {
-  --el-font-size-base: 13px;
-  --el-component-size: 32px;
-  --cc-list-table-font-size: 13px;
-  --cc-list-action-font-size: 13px;
-  font-size: 13px;
+.admin-density, .admin-density-dialog, .admin-density-drawer {
+  --el-font-size-base: var(--admin-font-body);
+  --el-component-size: var(--admin-control-height);
+  --cc-list-table-font-size: var(--admin-font-body);
+  --cc-list-action-font-size: var(--admin-font-body);
+  --cc-list-query-font-size: var(--admin-font-body);
+  font-size: var(--admin-font-body, 13px);
 }
 .admin-density .surface-panel, .admin-density .query-toolbar {
-  border-radius: 4px; box-shadow: none;
+  border-radius: var(--admin-radius, 4px); box-shadow: none;
 }
 .admin-density .el-table, .admin-density-dialog .el-table {
-  --el-table-header-bg-color: #f8fafc;
-  --el-table-border-color: #e5e7eb;
-  --el-table-row-hover-bg-color: #f3f7fb;
-  font-size: 13px;
+  --el-table-header-bg-color: var(--admin-label-bg);
+  --el-table-border-color: var(--admin-table-border);
+  --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: 36px; padding: 4px 0; }
+.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: 28px; padding: 4px 8px; }
+.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 .data-table .data-table__toolbar { min-height: 44px; padding: 6px 12px; }
-.admin-density .data-table .data-table__pagination { min-height: 48px; padding: 8px 12px; }
-.admin-density .el-empty { padding: 12px 0; }
+.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; }
 .admin-density .el-empty__image { display: none; }
 .admin-density .el-empty__description { margin-top: 0; }
-.admin-density .el-empty__description p { font-size: 13px; }
+.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: 12px; background: #f8fafc; }
-.admin-density-dialog .el-descriptions__content.el-descriptions__cell { font-size: 13px; overflow-wrap: anywhere; }
+.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: #f8fafc; }
+.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; }
 .admin-density-dialog .el-dialog__headerbtn { top: 0; }
 .admin-density-dialog .app-dialog__native-fullscreen-control { top: 6px; }
-.admin-density .density-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; font: 17px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
-.admin-density-confirm.el-message-box { --el-font-size-base: 13px; border-radius: 4px; padding: 12px 16px; }
-.admin-density-confirm .el-message-box__title { font-size: 16px; }
+.admin-density-confirm.el-message-box { --el-font-size-base: var(--admin-font-body); border-radius: var(--admin-radius, 4px); padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
+.admin-density-confirm .el-message-box__title { font-size: var(--admin-font-title, 16px); }
 
 /* Dialogs are teleported; opt in explicitly instead of styling all AppDialog instances. */
 .admin-density-dialog.el-dialog {
-  --el-font-size-base: 13px;
-  --el-component-size: 32px;
+  --el-font-size-base: var(--admin-font-body);
+  --el-component-size: var(--admin-control-height);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: 0;
-  border-radius: 4px;
+  border-radius: var(--admin-radius, 4px);
 }
 .admin-density-dialog.el-dialog:not(.is-fullscreen) { margin-top: 6vh; max-height: 88vh; }
-.admin-density-dialog.el-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: 10px 48px 10px 16px; border-bottom: 1px solid var(--cc-border); }
-.admin-density-dialog.el-dialog .el-dialog__title { font-size: 16px; line-height: 24px; font-weight: 600; }
-.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; }
-.admin-density-dialog.el-dialog .el-dialog__footer { flex: 0 0 auto; padding: 8px 16px; border-top: 1px solid var(--cc-border); }
-.admin-density-dialog.el-dialog .el-table { font-size: 13px; }
-.admin-density-dialog.el-dialog .el-table__cell { height: 36px; padding: 4px 0; }
+.admin-density-dialog.el-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
+.admin-density-dialog.el-dialog .el-dialog__title { font-size: var(--admin-font-title, 16px); line-height: 24px; font-weight: 600; }
+.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
+.admin-density-dialog.el-dialog .el-dialog__footer { flex: 0 0 auto; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-top: 1px solid var(--cc-border); }
+.admin-density-dialog.el-dialog .el-table { font-size: var(--admin-font-body, 13px); }
+.admin-density-dialog.el-dialog .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
 .admin-density-dialog.el-dialog .el-table .cell { line-height: 22px; }
 .admin-density-dialog.el-dialog .el-form-item { margin-bottom: 14px; }
-.admin-density-dialog.el-dialog .el-form-item__label { font-size: 13px; }
-.admin-density-dialog.el-dialog .el-alert { padding: 8px 10px; border-radius: 3px; }
-.admin-density-dialog.el-dialog .el-empty { padding: 12px 0; }
+.admin-density-dialog.el-dialog .el-form-item__label { font-size: var(--admin-font-body, 13px); }
+.admin-density-dialog.el-dialog .el-alert { padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); border-radius: 3px; }
+.admin-density-dialog.el-dialog .el-empty { padding: var(--admin-space-5, 12px) 0; }
 .admin-density-dialog.el-dialog .el-empty__image { display: none; }
 .admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }
 
 /* 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; }
+
+/* Shared outlined business actions. Pages choose tone, never redefine paint/size. */
+:is(.admin-density, .admin-density-dialog) .el-button.density-action {
+  --action-color: var(--admin-action-neutral);
+  --action-border: var(--admin-action-neutral-border);
+  --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-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-disabled-text-color: #a1a1aa;
+  --el-button-disabled-border-color: var(--admin-table-border);
+  --el-button-disabled-bg-color: var(--admin-surface);
+  height: var(--admin-action-height); min-height: var(--admin-action-height);
+  padding: var(--admin-space-1) var(--admin-space-4); margin: 0;
+  border: 1px solid var(--action-border); border-radius: var(--admin-action-radius);
+  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) .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; }
+
+/* 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-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); }
+.admin-density-drawer .el-drawer__title { font-size: var(--admin-font-title); }
+.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 > :is(.el-button, .el-dropdown) { margin-left: 0; }
+
+/* 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); }
+:is(.admin-density, .admin-density-dialog) .density-fields dt { display: flex; align-items: center; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: var(--cc-muted); background: var(--admin-label-bg); font-size: var(--admin-font-caption); line-height: 20px; }
+:is(.admin-density, .admin-density-dialog) .density-fields dd { align-self: center; min-width: 0; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: #25324a; font-size: var(--admin-font-body); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; white-space: normal; }