tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): 管理后台 - 收敛重复边框并提升运维信息密度

Browse Source
This commit is contained in:
ddCat
2026-09-22 06:09:03 +08:00
parent 0b285f66e8
commit 505d6076cc
18 changed files with 489 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/pages/admin/theme/admin-ant-theme.ts
View File

@@ -7,9 +7,9 @@ export function getIsolatedAdminAntTheme(dark: boolean, skinID: unknown = "class
const skin = getSkinAntOverrides(skinID, dark ? "dark" : "light");
const text = dark ? "#f5f5f5" : "#111111";
const textSecondary = dark ? "#c4c4c4" : "#525252";
const canvas = dark ? "#0f0f0f" : "#f5f5f5";
const surface = dark ? "#181818" : "#ffffff";
const surfaceMuted = dark ? "#222222" : "#f6f6f6";
const canvas = dark ? "#111317" : "#f7f8fa";
const surface = dark ? "#191c21" : "#ffffff";
const surfaceMuted = dark ? "#23272e" : "#f2f4f7";
const border = dark ? "rgba(245, 245, 245, 0.12)" : "rgba(17, 17, 17, 0.12)";
const primary = skin.primary || (dark ? "#f5f5f5" : "#171717");
const primaryFg = skin.primaryForeground || (dark ? "#171717" : "#ffffff");

118
web/src/pages/admin/theme/admin-chrome.css
View File

@@ -21,7 +21,7 @@
width: var(--admin-sidebar-width);
flex-basis: var(--admin-sidebar-width);
background: var(--admin-sidebar);
border-right: 1px solid var(--admin-border);
border-right: 0;
box-shadow: none;
border-radius: 0 !important;
}
@@ -36,7 +36,7 @@
height: 56px;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid var(--admin-border);
border-bottom: 0;
}
[data-admin-root] .admin-sidebar-brand-button {
@@ -83,7 +83,7 @@
}
[data-admin-root] .admin-nav-group + .admin-nav-group {
margin-top: 18px;
margin-top: 14px;
}
[data-admin-root] .admin-nav-group-label,
@@ -115,7 +115,7 @@
[data-admin-root] .admin-nav-group-items:not(.is-collapsed) {
display: flex;
flex-direction: column;
gap: 6px;
gap: 2px;
margin-left: 0 !important;
padding-left: 0 !important;
border: 0 !important;
@@ -235,10 +235,34 @@
}
[data-admin-root] .admin-page-header {
min-height: 48px;
gap: 12px !important;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--admin-border);
padding-bottom: 0;
border-bottom: 0;
}
[data-admin-root] .admin-density-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--admin-control-h);
padding: 0 8px;
border: 0;
border-radius: var(--admin-radius);
background: transparent;
color: var(--admin-text-secondary);
font-size: 12px;
cursor: pointer;
}
[data-admin-root] .admin-density-toggle:hover {
background: var(--admin-surface-2);
}
[data-admin-root] :is(.admin-density-toggle, .admin-log-detail-link):focus-visible {
outline: 2px solid var(--admin-text-secondary);
outline-offset: 2px;
}
[data-admin-root] .admin-page-location {
@@ -288,9 +312,9 @@
width: 32px;
height: 32px;
place-items: center;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius);
background: var(--admin-surface);
background: transparent;
color: var(--admin-text-secondary);
}
@@ -354,19 +378,30 @@
}
[data-admin-root] .admin-list-toolbar-main,
[data-admin-root] .admin-list-toolbar-actions,
[data-admin-root] .admin-list-toolbar-filters {
[data-admin-root] .admin-list-toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
[data-admin-root] .admin-list-toolbar-filters {
display: none;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
[data-admin-root] .admin-list-toolbar-filters.is-open {
display: flex;
}
[data-admin-root] .admin-list-toolbar .ant-input-affix-wrapper,
[data-admin-root] .admin-list-toolbar .ant-select-selector,
[data-admin-root] .admin-list-toolbar .ant-btn,
[data-admin-root] .admin-page-actions .ant-btn {
height: var(--admin-control-h) !important;
min-height: var(--admin-control-h) !important;
border-radius: var(--admin-radius) !important;
}
@@ -389,7 +424,7 @@
flex: 1;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius-lg);
background: var(--admin-surface);
box-shadow: none;
@@ -414,17 +449,16 @@
border-bottom: 1px solid var(--admin-border) !important;
background: var(--admin-surface-2) !important;
color: var(--admin-text-muted) !important;
font-size: 11px !important;
font-size: 12px !important;
font-weight: 650 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
letter-spacing: 0;
}
[data-admin-root] .admin-table-surface .ant-table-tbody > tr > td {
height: var(--admin-row-h);
padding: 6px 12px !important;
padding: var(--admin-row-padding) 12px !important;
border-bottom: 1px solid var(--admin-row-border) !important;
background: transparent !important;
background: var(--admin-surface) !important;
color: var(--admin-text) !important;
font-size: 13px;
font-variant-numeric: tabular-nums;
@@ -434,9 +468,13 @@
background: var(--admin-row-hover) !important;
}
[data-admin-root] .admin-table-surface .ant-table-tbody > tr.ant-table-row-selected > td {
background: var(--admin-surface-2) !important;
}
[data-admin-root] .admin-table-pagination {
display: flex;
min-height: 44px;
min-height: 40px;
align-items: center;
justify-content: flex-end;
padding: 0 10px;
@@ -508,12 +546,12 @@
height: 22px;
align-items: center;
gap: 6px;
padding: 0 8px;
border: 1px solid var(--admin-border);
border-radius: 999px;
background: var(--admin-surface-2);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--admin-text-secondary);
font-size: 11px;
font-size: 12px;
font-weight: 650;
line-height: 1;
white-space: nowrap;
@@ -572,10 +610,25 @@
line-height: 18px;
}
[data-admin-root] .admin-inline-load-error {
display: flex;
min-height: 96px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px;
color: var(--admin-status-error);
font-size: 12px;
}
[data-admin-root] .admin-inline-load-error .ant-btn {
flex: none;
}
[data-admin-root] .admin-stat-tile {
min-height: 84px;
min-height: 76px;
padding: 12px 14px;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius-lg);
background: var(--admin-surface);
box-shadow: none;
@@ -608,12 +661,12 @@
[data-admin-root] .admin-settings-stack {
display: flex;
flex-direction: column;
gap: 12px;
gap: 8px;
}
[data-admin-root] .admin-settings-section {
overflow: hidden;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius-lg);
background: var(--admin-surface);
box-shadow: none;
@@ -631,7 +684,7 @@
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--admin-border);
border-bottom: 0;
}
[data-admin-root] .admin-settings-section-summary h2 {
@@ -710,12 +763,12 @@
[data-admin-root] .admin-feature-board {
display: flex;
flex-direction: column;
gap: 12px;
gap: 8px;
}
[data-admin-root] .admin-feature-domain {
overflow: hidden;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius-lg);
background: var(--admin-surface);
box-shadow: none;
@@ -726,8 +779,8 @@
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--admin-border);
background: var(--admin-surface);
border-bottom: 0;
background: var(--admin-surface-2);
}
[data-admin-root] .admin-feature-domain-header h2 {
@@ -749,7 +802,7 @@
width: 28px;
height: 28px;
place-items: center;
border: 1px solid var(--admin-border);
border: 0;
border-radius: var(--admin-radius);
background: var(--admin-surface-2);
color: var(--admin-text-secondary);
@@ -980,4 +1033,3 @@
animation-iteration-count: 1 !important;
}
}

27
web/src/pages/admin/theme/admin-tokens.css
View File

@@ -11,17 +11,18 @@
--admin-radius-lg: 8px;
--admin-control-h: 32px;
--admin-control-h-sm: 28px;
--admin-row-h: 40px;
--admin-head-h: 36px;
--admin-sidebar-width: 224px;
--admin-row-h: 36px;
--admin-row-padding: 4px;
--admin-head-h: 32px;
--admin-sidebar-width: 208px;
--admin-sidebar-collapsed: 64px;
--admin-motion: 120ms ease;
--admin-shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.16);
--admin-canvas: #f5f5f5;
--admin-sidebar: #f5f5f5;
--admin-canvas: #f7f8fa;
--admin-sidebar: #f7f8fa;
--admin-surface: #ffffff;
--admin-surface-2: #f6f6f6;
--admin-surface-2: #f2f4f7;
--admin-surface-3: #ececec;
--admin-text: #111111;
--admin-text-secondary: #525252;
@@ -99,10 +100,10 @@
.dark :is([data-admin-root], .admin-drawer, .admin-secondary-drawer, .admin-modal-root, .admin-channel-modal-root, .admin-mobile-navigation-menu),
.dark body.admin-overlays {
--admin-canvas: #0f0f0f;
--admin-sidebar: #0f0f0f;
--admin-surface: #181818;
--admin-surface-2: #222222;
--admin-canvas: #111317;
--admin-sidebar: #111317;
--admin-surface: #191c21;
--admin-surface-2: #23272e;
--admin-surface-3: #2a2a2a;
--admin-text: #f5f5f5;
--admin-text-secondary: #c4c4c4;
@@ -129,3 +130,9 @@
--admin-chart-warning: #fbbf24;
--admin-shadow-overlay: 0 22px 56px rgba(0, 0, 0, 0.48);
}
[data-admin-root][data-admin-density="comfortable"] {
--admin-row-h: 44px;
--admin-row-padding: 8px;
--admin-head-h: 36px;
}