🎨 style(workbench): 统一 V2 工作台主题表面与结果筛选

- 统一 Redis、Nacos、对象区和查询结果区域的主题背景

- 让手动查询条件、筛选控件和数据表格铺满工作台表面

- 强化结果视图选中态并移除多余卡片边框

- 补充主题表面与布局回归测试
This commit is contained in:
Syngnat
2026-07-31 16:22:08 +08:00
parent 4402f4ae1b
commit cf891504f6
5 changed files with 194 additions and 43 deletions

View File

@@ -1867,7 +1867,7 @@ body[data-ui-version="v2"] .ant-modal-body input[type="number"] {
inline styles can't reach. */
body[data-ui-version="v2"] .redis-viewer-workbench {
background: var(--gn-bg-app) !important;
background: var(--gn-bg-panel-2) !important;
/* the inner cards still read workbenchTheme — those return v2 palette
once the workbench theme files honor uiVersion */
}
@@ -2403,7 +2403,7 @@ body[data-ui-version="v2"] .gn-v2-explorer-command-trigger {
border: 0.5px solid var(--gn-br-2);
border-radius: 7px;
padding: 0 8px;
background: var(--gn-bg-input);
background: var(--gn-bg-panel-2);
color: var(--gn-fg-4);
cursor: text;
font-size: 12px;
@@ -2434,7 +2434,7 @@ body[data-ui-version="v2"] .gn-v2-explorer-filter-action {
justify-content: center;
border: 0.5px solid var(--gn-br-2);
border-radius: 7px;
background: var(--gn-bg-input);
background: var(--gn-bg-panel-2);
color: var(--gn-fg-4);
cursor: pointer;
}
@@ -2739,7 +2739,7 @@ body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input-affix-wrapper {
border-radius: 7px !important;
border: 0.5px solid var(--gn-br-2) !important;
padding: 0 8px !important;
background: var(--gn-bg-input) !important;
background: var(--gn-bg-panel-2) !important;
color: var(--gn-fg-2) !important;
font-size: 12px !important;
font-weight: 500 !important;
@@ -4064,14 +4064,14 @@ body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-frame {
border-width: 0 0 0.5px !important;
border-color: var(--gn-br-1) !important;
border-radius: 0 !important;
background: var(--gn-bg-panel) !important;
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-toolbar-scroll {
min-height: 44px;
padding: 7px 12px !important;
gap: 4px !important;
background: var(--gn-bg-panel) !important;
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-toolbar-scroll .ant-btn {
@@ -4245,17 +4245,37 @@ body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-query-result-toolbar-hide:hov
}
body[data-ui-version="v2"] .gn-v2-smart-filter-panel {
background: var(--gn-bg-panel-2) !important;
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
border-top: 0.5px solid var(--gn-br-1);
font-size: var(--gn-font-size, 14px);
}
body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"] {
min-height: 38px;
padding-inline: 0 !important;
margin-bottom: 8px !important;
border: 0.5px solid var(--gn-br-2) !important;
border-radius: 8px !important;
background: var(--gn-bg-panel) !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
/* Keep manual query entry aligned with the condition checkbox and compact on wide screens. */
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .gn-v2-smart-filter-manual-input {
flex: 1 1 360px !important;
max-width: 680px !important;
}
/* Filter controls stay on the result workbench surface instead of the global input well. */
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input,
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-affix-wrapper,
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-textarea,
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-select-selector {
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-affix-wrapper > input.ant-input,
body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-affix-wrapper .ant-input {
background: transparent !important;
}
body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"],
@@ -4289,11 +4309,19 @@ body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where-inpu
body[data-ui-version="v2"] .gn-v2-data-grid-table-shell {
border: none !important;
border-radius: 0 !important;
background: var(--gn-bg-panel) !important;
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid-table-wrap {
background: var(--gn-bg-panel);
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2));
}
body[data-ui-version="v2"] .gn-v2-data-grid .ant-table,
body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-container,
body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-content,
body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-tbody-virtual-holder,
body[data-ui-version="v2"] .gn-v2-data-grid .rc-virtual-list-holder {
background: var(--gn-query-workbench-bg, var(--gn-bg-panel-2)) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th {
@@ -4788,8 +4816,19 @@ body[data-ui-version="v2"] .gn-v2-data-grid-visually-hidden {
border: 0 !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected .ant-segmented-item-label {
color: var(--gn-fg-1);
/* Result format is a mode switch, so its selected segment uses the theme accent
without a border or floating-card treatment. */
body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected,
body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-thumb {
background: var(--gn-accent-strong, var(--gn-accent)) !important;
border: 0 !important;
border-radius: 5px !important;
box-shadow: none !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected .ant-segmented-item-label,
body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected .anticon {
color: var(--gn-on-accent, #fff) !important;
}
body[data-ui-version="v2"] .gn-v2-data-grid-page-find-overlay {