🎨 style(theme): 对齐表概览主题表面并优化工具栏与时间展示

- 主内容区与侧栏统一 panel-2,消除表概览空白区色差
- 查询工具栏保存按钮改为 default 图标样式,提升暗色可读性
- 表概览时间格式化为 YYYY-MM-DD HH:mm:ss,保留小数秒
- 补充多语言文案与相关测试
This commit is contained in:
Syngnat
2026-08-02 12:43:02 +08:00
parent 24873709f5
commit 218e9388d2
16 changed files with 674 additions and 135 deletions

View File

@@ -156,11 +156,16 @@ body[data-ui-version="v2"] [class*="monospace"] {
ANT DESIGN OVERRIDES — surfaces & chrome
────────────────────────────────────────────────────────── */
body[data-ui-version="v2"] .ant-layout,
body[data-ui-version="v2"] .ant-layout-content {
body[data-ui-version="v2"] .ant-layout {
background: var(--gn-bg-app) !important;
}
/* 主内容区与左侧 sider 同用 panel-2原先 app 近黑、panel 更深一档,
与 sider 的 panel-2 并排时会出现明显色差(表概览空白区尤其扎眼)。 */
body[data-ui-version="v2"] .ant-layout-content {
background: var(--gn-bg-panel-2) !important;
}
body[data-ui-version="v2"] .ant-layout-sider {
background: var(--gn-bg-panel-2) !important;
border-right: 0.5px solid var(--gn-br-1) !important;
@@ -319,31 +324,7 @@ body[data-ui-version="v2"] .ant-btn-primary:active {
color: var(--gn-ant-on-primary, var(--gn-on-accent, #fff)) !important;
}
/* 查询工具栏「保存」降为次级样式:描边 + 中性底。
原先它与「执行」一样是实心饱满按钮而两者在内置主题下的填充色accent 与 info
区分度仅 1.051.25 —— 相邻两个同色实心方块,一眼分不出哪个是执行、哪个是保存。
由于 Midnight Navy / Nord Slate 的 accent 本身就是蓝青系,靠拉开色相无法解决,
改用层级区分:工具栏里只有「执行」是实心主按钮,其余降级,主操作因此真正突出。 */
body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary {
background: transparent !important;
border-color: var(--gn-br-3) !important;
color: var(--gn-fg-2) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary:hover,
body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary:focus-visible {
background: var(--gn-bg-hover) !important;
border-color: var(--gn-accent) !important;
color: var(--gn-fg-1) !important;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary:active {
background: var(--gn-bg-active) !important;
border-color: var(--gn-accent) !important;
color: var(--gn-fg-1) !important;
}
/* 查询工具栏「保存」在 v2 已改为 default 图标按钮;样式见 v2-theme-workbench.css。 */
body[data-ui-version="v2"] .ant-btn-primary:disabled {
background: var(--gn-bg-active) !important;
@@ -454,17 +435,47 @@ body[data-ui-version="v2"] .ant-picker-dropdown .ant-picker-panel-container {
}
body[data-ui-version="v2"] .ant-dropdown-menu-item,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .ant-select-item {
display: flex !important;
align-items: center !important;
gap: 0;
border-radius: 6px !important;
padding: 6px 10px !important;
color: var(--gn-fg-1) !important;
min-height: 28px !important;
min-height: 32px !important;
line-height: 1.25 !important;
font-size: 12.5px !important;
/* Flat item surface — no outline/box that makes submenu rows look different */
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Icon + label share one baseline/vertical center (leaf and submenu rows) */
body[data-ui-version="v2"] .ant-dropdown-menu-title-content {
display: inline-flex !important;
align-items: center !important;
min-width: 0;
line-height: 1.25 !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-item:hover,
body[data-ui-version="v2"] .ant-dropdown-menu-item-active,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title:hover,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-active > .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-open > .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
background: var(--gn-bg-active) !important;
color: var(--gn-fg-1) !important;
border: none !important;
box-shadow: none !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-selected > .ant-dropdown-menu-submenu-title {
background: var(--gn-bg-active) !important;
color: var(--gn-fg-1) !important;
font-weight: 400 !important;
}
body[data-ui-version="v2"] .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
@@ -479,9 +490,43 @@ body[data-ui-version="v2"] .ant-dropdown-menu-item-divider {
}
/* Right-click menu items get a tighter, sectioned look */
body[data-ui-version="v2"] .ant-dropdown-menu-item-icon {
color: var(--gn-fg-4);
body[data-ui-version="v2"] .ant-dropdown-menu-item-icon,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title .ant-dropdown-menu-item-icon,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-expand-icon {
color: var(--gn-fg-4) !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-item-icon,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title .ant-dropdown-menu-item-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 16px !important;
width: 16px !important;
height: 16px !important;
margin-inline-end: 8px !important;
margin-right: 8px !important;
font-size: 14px !important;
line-height: 1 !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-item-icon > .anticon,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title .ant-dropdown-menu-item-icon > .anticon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-expand-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin-inline-end: 2px !important;
height: 16px !important;
line-height: 1 !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-item-danger {
@@ -490,10 +535,62 @@ body[data-ui-version="v2"] .ant-dropdown-menu-item-danger {
body[data-ui-version="v2"] .ant-dropdown-menu-item-danger:hover {
background: rgba(220, 38, 38, 0.08) !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title {
border-radius: 6px !important;
padding: 6px 10px !important;
font-size: 12.5px !important;
/* Nested dropdown menus: collapse double border, no glow/halo */
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-popup,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-submenu,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-submenu-popup {
margin-inline-start: -2px !important;
padding: 0 !important;
}
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-popup > .ant-dropdown-menu,
body[data-ui-version="v2"] .ant-dropdown-menu-submenu-popup.ant-dropdown-menu,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-submenu .ant-dropdown-menu,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-submenu.ant-dropdown-menu {
/* Match primary menu border only — strip outer glow that reads as white rim in dark theme */
border: 0.5px solid var(--gn-br-2) !important;
border-inline-start: none !important;
border-radius: 10px !important;
border-start-start-radius: 8px !important;
border-end-start-radius: 8px !important;
box-shadow: none !important;
filter: none !important;
}
/* Title-bar cascade: keep both levels flat (no shadow/halo on either panel) */
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu {
box-shadow: none !important;
filter: none !important;
}
/* Title-bar more menu: leaf rows and submenu rows share the same hover fill + alignment */
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-item,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-item,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-submenu-title {
display: flex !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
min-height: 32px !important;
}
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-item:hover,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-item-active,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-submenu-title:hover,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-submenu-active > .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-dropdown .ant-dropdown-menu-submenu-open > .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-item:hover,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-item-active,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-submenu-title:hover,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-submenu-active > .ant-dropdown-menu-submenu-title,
body[data-ui-version="v2"] .gn-v2-titlebar-quick-menu .ant-dropdown-menu-submenu-open > .ant-dropdown-menu-submenu-title {
background: var(--gn-bg-active) !important;
border: none !important;
box-shadow: none !important;
}
/* ─── Tables (ant-table, used by some legacy panes) ────── */
@@ -1494,12 +1591,15 @@ body[data-ui-version="v2"] .ant-divider {
body[data-ui-version="v2"] .gn-v2-object-explorer .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected::before {
content: '';
position: absolute;
left: -6px;
top: 4px;
bottom: 4px;
width: 2px;
left: 2px;
top: 5px;
bottom: 5px;
width: 3px;
background: var(--gn-accent);
border-radius: 2px;
display: block;
pointer-events: none;
z-index: 1;
}
body[data-ui-version="v2"] .ant-tree .ant-tree-node-content-wrapper {
@@ -1950,9 +2050,10 @@ body[data-ui-version="v2"] .gn-v2-connection-rail {
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: calc(4px * var(--gn-v2-rail-scale));
padding: calc(8px * var(--gn-v2-rail-scale)) 0;
gap: 0;
padding: calc(6px * var(--gn-v2-rail-scale)) 0 0;
border-right: 0.5px solid var(--gn-br-1);
/* Match explorer panel — no tint strip (tinted empty rail looked worse) */
background: transparent;
}
@@ -2087,17 +2188,21 @@ body[data-ui-version="v2"] .gn-v2-rail-secondary-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(6px * var(--gn-v2-rail-scale));
gap: calc(4px * var(--gn-v2-rail-scale));
}
/* Top tool cluster — compact, not floating in empty space */
body[data-ui-version="v2"] .gn-v2-rail-primary-actions {
padding-top: calc(4px * var(--gn-v2-rail-scale));
padding: calc(2px * var(--gn-v2-rail-scale)) 0 calc(4px * var(--gn-v2-rail-scale));
}
/* Bottom system actions — pin to foot with a hairline only, no fill */
body[data-ui-version="v2"] .gn-v2-rail-secondary-actions {
margin-top: auto;
flex: 0 0 auto;
padding-bottom: calc(4px * var(--gn-v2-rail-scale));
padding: calc(6px * var(--gn-v2-rail-scale)) 0 calc(8px * var(--gn-v2-rail-scale));
border-top: 0.5px solid var(--gn-br-1);
background: transparent;
}
body[data-ui-version="v2"] .gn-v2-rail-action-group,
@@ -2148,19 +2253,39 @@ body[data-ui-version="v2"] .gn-v2-rail-tool {
justify-content: center;
gap: 0;
padding: 0;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
/* Compact square hit target for rail tools (locate / AI / settings) */
body[data-ui-version="v2"] .gn-v2-rail-tool {
width: calc(24px * var(--gn-v2-rail-scale));
height: calc(32px * var(--gn-v2-rail-scale));
border-radius: calc(8px * var(--gn-v2-rail-scale));
width: calc(28px * var(--gn-v2-rail-scale));
height: calc(28px * var(--gn-v2-rail-scale));
border-radius: calc(7px * var(--gn-v2-rail-scale));
justify-content: center;
padding: 0;
color: var(--gn-fg-3);
}
body[data-ui-version="v2"] .gn-v2-rail-tool .anticon {
font-size: calc(15px * var(--gn-v2-rail-scale));
line-height: 1;
}
body[data-ui-version="v2"] .gn-v2-rail-item:hover,
body[data-ui-version="v2"] .gn-v2-rail-tool:hover {
body[data-ui-version="v2"] .gn-v2-rail-tool:hover:not(:disabled) {
background: var(--gn-bg-hover);
color: var(--gn-fg-1);
}
body[data-ui-version="v2"] .gn-v2-rail-tool:hover:not(:disabled) {
background: color-mix(in srgb, var(--gn-accent) 12%, var(--gn-bg-hover));
color: var(--gn-accent);
}
body[data-ui-version="v2"] .gn-v2-rail-tool:focus-visible {
outline: 2px solid var(--gn-accent);
outline-offset: 1px;
}
body[data-ui-version="v2"] .gn-v2-rail-item.is-active {
@@ -2326,7 +2451,7 @@ body[data-ui-version="v2"] .gn-v2-active-connection-copy span {
body[data-ui-version="v2"] .gn-v2-active-connection-copy strong {
color: var(--gn-fg-1);
font-size: 13px;
font-weight: 400;
font-weight: 600;
line-height: 1.2;
}
@@ -2338,6 +2463,11 @@ body[data-ui-version="v2"] .gn-v2-active-connection-copy span {
line-height: 1.2;
}
/* Empty database selection: guide tone, not error tone */
body[data-ui-version="v2"] .gn-v2-active-connection-copy span.is-placeholder {
color: var(--gn-fg-5);
}
body[data-ui-version="v2"] .gn-v2-active-connection-tooltip {
display: flex;
flex-direction: column;
@@ -2366,6 +2496,13 @@ body[data-ui-version="v2"] .gn-v2-active-connection-actions {
align-items: center;
gap: 4px;
flex: 0 0 auto;
opacity: 0.72;
transition: opacity 140ms ease;
}
body[data-ui-version="v2"] .gn-v2-active-connection-header:hover .gn-v2-active-connection-actions,
body[data-ui-version="v2"] .gn-v2-active-connection-header:focus-within .gn-v2-active-connection-actions {
opacity: 1;
}
@container gn-v2-object-explorer (max-width: 440px) {
@@ -2815,19 +2952,26 @@ body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs::-webkit-scrollbar {
body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs button {
flex: 0 0 auto;
height: 22px;
padding: 0 6px;
padding: 0 7px;
border: none;
border-radius: 5px;
border-radius: 6px;
background: transparent;
color: var(--gn-fg-4);
font-size: 11px;
font-weight: 600;
font-weight: 500;
white-space: nowrap;
transition: background-color 140ms ease, color 140ms ease;
}
body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs button:hover {
background: var(--gn-bg-hover);
color: var(--gn-fg-2);
}
body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs button.is-active {
background: var(--gn-bg-active);
color: var(--gn-fg-1);
background: color-mix(in srgb, var(--gn-accent) 14%, var(--gn-bg-panel-2));
color: var(--gn-accent);
font-weight: 700;
}
body[data-ui-version="v2"] .gn-v2-explorer-toolbar {
@@ -2910,6 +3054,11 @@ body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-treenode {
align-items: center;
}
/* Connection rows sit one step taller than object rows for hierarchy */
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-treenode:has(.gn-v2-tree-title.is-connection) {
min-height: 30px !important;
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-switcher {
width: 16px !important;
min-width: 16px !important;
@@ -2919,6 +3068,10 @@ body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-switcher {
color: var(--gn-fg-4);
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-treenode:has(.gn-v2-tree-title.is-connection) .ant-tree-switcher {
line-height: 30px !important;
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-indent-unit {
width: 12px !important;
}
@@ -2927,21 +3080,26 @@ body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wra
min-width: 100%;
width: max-content !important;
min-height: 26px !important;
padding: 0 6px !important;
padding: 0 6px 0 8px !important;
display: flex !important;
align-items: center;
border-radius: 6px !important;
color: var(--gn-fg-3) !important;
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-treenode:has(.gn-v2-tree-title.is-connection) .ant-tree-node-content-wrapper {
min-height: 30px !important;
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wrapper:hover {
background: var(--gn-bg-hover) !important;
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: var(--gn-bg-selected) !important;
background: color-mix(in srgb, var(--gn-accent) 10%, var(--gn-bg-selected)) !important;
color: var(--gn-fg-1) !important;
font-weight: 400 !important;
box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--gn-accent) 16%, transparent);
}
body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle {
@@ -3041,6 +3199,8 @@ body[data-ui-version="v2"] .gn-v2-tree-title.is-group {
body[data-ui-version="v2"] .gn-v2-tree-title.is-connection {
align-items: center;
gap: 6px;
font-weight: 500 !important;
color: var(--gn-fg-1);
}
body[data-ui-version="v2"] .gn-v2-tree-status {
@@ -3243,9 +3403,7 @@ body[data-ui-version="v2"] .gn-v2-table-pin-indicator {
color: var(--gn-warn);
}
body[data-ui-version="v2"] .gn-v2-object-explorer .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected::before {
display: none;
}
/* Selected accent bar kept on; see rule near Small additions block */
body[data-ui-version="v2"] .gn-v2-tree-title[data-node-type="database"] {
font-weight: 400 !important;
@@ -3747,7 +3905,7 @@ body[data-ui-version="v2"] .gn-v2-workspace-body {
}
body[data-ui-version="v2"] .gn-v2-workspace-main {
background: var(--gn-bg-panel) !important;
background: var(--gn-bg-panel-2) !important;
}
body[data-ui-version="v2"] .gn-v2-ai-panel-dock {