diff --git a/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
index a5e248e7f8..4449c4cd3a 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
@@ -75,6 +75,6 @@ const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js b/examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js
index bd5f290430..b11c35b72b 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js
+++ b/examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js
@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
test('自定义列样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-custom-style#custom-style-class-name')
- await expect(page.locator('.gridClassName').first()).toHaveCSS('background-color', 'rgb(230, 247, 255)')
+ await expect(page.locator('.gridClassName').first()).toHaveCSS('background-color', 'rgb(45, 183, 245)')
})
diff --git a/examples/sites/demos/pc/app/grid/custom-style/class-name.vue b/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
index 84c58c9bd4..d35e723952 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
@@ -84,6 +84,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
index 5845a6a11f..b9317de450 100644
--- a/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
@@ -78,6 +78,6 @@ function cellClassName({ row, column }) {
diff --git a/examples/sites/demos/pc/app/grid/editor/active-strictly.vue b/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
index bce2452b11..cc563b43d2 100644
--- a/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
+++ b/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
@@ -87,6 +87,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
index 22d3e5bf4a..8d48eba5ec 100644
--- a/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
@@ -73,6 +73,6 @@ function cellClassName({ row, column }) {
diff --git a/examples/sites/demos/pc/app/grid/editor/editor-bg.vue b/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
index 9d8fd32ea9..43b5680764 100644
--- a/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
+++ b/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
@@ -82,6 +82,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
index 158e9ee068..d3173af995 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
@@ -70,6 +70,6 @@ const loadingComponent = () => (
display: flex;
align-items: center;
justify-content: center;
- background: rgba(0, 0, 0, 0.3);
+ background: var(--tv-color-bg-mask);
}
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
index 5b138eca9c..ff1bf546cb 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
@@ -83,6 +83,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
- background: rgba(0, 0, 0, 0.3);
+ background: var(--tv-color-bg-mask);
}
diff --git a/packages/theme/src/grid/filter.less b/packages/theme/src/grid/filter.less
index b2e844aa7e..9240b51ae3 100644
--- a/packages/theme/src/grid/filter.less
+++ b/packages/theme/src/grid/filter.less
@@ -62,12 +62,57 @@
}
.@{grid-prefix-cls}__filter-body {
- padding: 0;
+ padding: 10px;
list-style-type: none;
- background-color: #fff;
+ background-color: var(--tv-Grid-bg-color);
overflow-x: hidden;
overflow-y: auto;
+ input:not([type='radio']) {
+ border: 1px solid var(--tv-Grid-input-border-color);
+ border-radius: var(--tv-Grid-input-border-radius);
+ color: var(--tv-Grid-input-text-color);
+ background-color: var(--tv-Grid-input-bg-color);
+ font-size: var(--tv-Grid-input-font-size);
+ height: var(--tv-Grid-input-height);
+ line-height: var(--tv-Grid-input-height);
+ padding: var(--tv-Grid-input-padding-x) var(--tv-Grid-input-padding-y);
+ outline: 0;
+ display: inline-block;
+ box-sizing: border-box;
+ appearance: none;
+ transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+ margin-right: 24px;
+
+ &:hover,
+ &:focus,
+ &:active {
+ outline: 0;
+ border-color: var(--tv-Grid-input-border-color-hover);
+ }
+ }
+
+ button {
+ font-weight: var(--tv-Grid-button-font-weight);
+ border: 1px solid var(--tv-Grid-button-border-color-default);
+ line-height: var(--tv-Grid-button-line-height);
+ border-radius: var(--tv-Grid-button-border-radius);
+ font-size: var(--tv-Grid-button-font-size);
+ height: var(--tv-Grid-button-height);
+ color: var(--tv-Grid-button-text-color-default);
+ padding: 0 var(--tv-Grid-button-padding-x);
+ background-color: var(--tv-Grid-button-bg-color-default);
+ margin-left: 0;
+ margin-right: 24px;
+
+ &:hover,
+ &:active {
+ border-color: var(--tv-Grid-button-border-color-active-default);
+ }
+ }
+
+
+
.@{grid-prefix-cls}__filter-panel {
margin: 0;
width: 100%;
@@ -114,6 +159,7 @@
.@{grid-prefix-cls}__filter-empty {
text-align: center;
line-height: 30px;
+ color: var(--tv-Grid-text-color);
}
.@{grid-prefix-cls}__filter-option {
@@ -138,12 +184,24 @@
outline: none;
vertical-align: middle;
- &:hover {
- fill: var(--tv-Grid-checkbox-icon-color-hover);
+ path:first-child {
+ fill: transparent;
}
&.is-checked {
fill: var(--tv-Grid-checkbox-icon-color-selected);
+
+ path:first-child {
+ fill: var(--tv-Grid-checkbox-icon-color-selected);
+ }
+
+ path:last-child {
+ fill: #fff;
+ }
+ }
+
+ &:hover {
+ fill: var(--tv-Grid-checkbox-icon-color-hover);
}
}
}
@@ -181,7 +239,7 @@
max-width: 80%;
}
- & + .@{grid-radio-prefix-cls} {
+ &+.@{grid-radio-prefix-cls} {
margin-left: 0;
}
@@ -216,7 +274,7 @@
}
}
- .filter-option__input > input {
+ .filter-option__input>input {
width: 100%;
border: solid 1px var(--tv-Grid-border-color);
border-radius: var(--tv-Grid-filter-input-border-radius);
@@ -225,6 +283,7 @@
box-sizing: border-box;
line-height: inherit;
height: 30px;
+ background: var(--tv-Grid-filter-input-bg-color);
&:focus {
border: 1px solid var(--tv-Grid-filter-input-border-color-hover);
@@ -250,6 +309,7 @@
.@{grid-prefix-cls}__filter-date {
padding: 0 10px;
min-width: 270px;
+
.@{grid-prefix-cls}__filter-date-item {
display: flex;
justify-content: space-between;
@@ -270,4 +330,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/theme/src/grid/loading.less b/packages/theme/src/grid/loading.less
index 625f594d75..4a5dd55e31 100644
--- a/packages/theme/src/grid/loading.less
+++ b/packages/theme/src/grid/loading.less
@@ -24,7 +24,7 @@
top: 0;
left: 0;
z-index: 99;
- background-color: rgba(255, 255, 255, 0.67);
+ background-color: var(--tv-Grid-loading-mask-bg-color);
& &__wrap {
position: absolute;
diff --git a/packages/theme/src/grid/menu.less b/packages/theme/src/grid/menu.less
index 805720e771..c4f5b51f23 100644
--- a/packages/theme/src/grid/menu.less
+++ b/packages/theme/src/grid/menu.less
@@ -25,7 +25,7 @@
left: 0;
z-index: 5000;
font-size: var(--tv-Grid-font-size);
- background-color: #fff;
+ background-color: var(--tv-Grid-bg-color);
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
padding: 8px 0;
color: var(--tv-Grid-text-color);
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index e839aad56b..46a9371c0e 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -430,7 +430,7 @@
}
}
- &.row__highlight &-body__row:hover {
+ &.row__highlight &-body__row:not(.row__selected):hover {
background-color: var(--tv-Grid-bg-color-hover);
.fixed__column {
@@ -954,19 +954,23 @@
color: var(--tv-Grid-text-color);
border-radius: var(--tv-Grid-input-border-radius);
border: 1px solid var(--tv-Grid-border-color-divider);
- background-color: var(--tv-Grid-Input-bg-color);
+ background-color: var(--tv-Grid-input-bg-color);
&:focus {
border: 1px solid var(--tv-Grid-input-border-color-hover);
}
}
+ select.@{grid-prefix-cls}-default-select option {
+ background-color: var(--tv-Grid-select-option-bg-color);
+ }
+
.@{grid-prefix-cls}-editor {
width: 100%;
height: var(--tv-Grid-input-height);
line-height: normal;
color: var(--tv-Grid-text-color);
- background-color: var(--tv-Grid-Input-bg-color);
+ background-color: var(--tv-Grid-input-bg-color);
.@{input-prefix-cls} {
width: 100%;
diff --git a/packages/theme/src/grid/toolbar.less b/packages/theme/src/grid/toolbar.less
index fe95de76cf..1187ae848b 100644
--- a/packages/theme/src/grid/toolbar.less
+++ b/packages/theme/src/grid/toolbar.less
@@ -57,7 +57,7 @@
width: 100%;
height: 100%;
z-index: 1;
- background-color: rgba(255, 255, 255, 0.67);
+ background-color: var(--tv-Grid-loading-mask-bg-color);
}
}
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index 5da4b7eb9a..58c72b36e9 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -139,6 +139,8 @@
--tv-Grid-filter-input-border-color-hover: var(--tv-color-border-hover);
// 筛选输入框边框圆角
--tv-Grid-filter-input-border-radius: var(--tv-border-radius-md);
+ // 筛选输入框边框背景
+ --tv-Grid-filter-input-bg-color: var(--tv-color-bg-secondary);
// -------工具栏相关样式-------
// 工具栏垂直边距
--tv-Grid-toolbar-padding-y: var(--tv-space-xl);
@@ -178,12 +180,44 @@
--tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
// 内置输入框高度
--tv-Grid-input-height: var(--tv-size-height-md);
+ // 内置输入框垂直方向内边距
+ --tv-Grid-input-padding-x: 0;
+ // 内置输入框水平方向内边距
+ --tv-Grid-input-padding-y: 12px;
+ // 内置输入框文本颜色
+ --tv-Grid-input-text-color: var(--tv-color-text);
+ // 内置输入框边框色
+ --tv-Grid-input-border-color: var(--tv-color-border);
+ // 内置输入框框字体大小
+ --tv-Grid-input-font-size: var(--tv-font-size-default);
// 内置输入框背景色
- --tv-Grid-Input-bg-color: var(--tv-color-bg-secondary);
+ --tv-Grid-input-bg-color: var(--tv-color-bg-3);
// 内置输入框边框圆角
--tv-Grid-input-border-radius: var(--tv-border-radius-md);
// 内置输入框悬浮边框颜色
--tv-Grid-input-border-color-hover: var(--tv-color-border-hover);
+ // 内置按钮背景色
+ --tv-Grid-button-bg-color-default: var(--tv-color-bg-secondary);
+ // 内置按钮行号
+ --tv-Grid-button-line-height: var(--tv-line-height-number);
+ // 内置按钮高度
+ --tv-Grid-button-height: var(--tv-size-height-md);
+ // 内置按钮边框色
+ --tv-Grid-button-border-color-default: var(--tv-color-border-secondary);
+ // 内置按钮文字色
+ --tv-Grid-button-text-color-default: var(--tv-color-text);
+ // 内置按钮文字色
+ --tv-Grid-button-border-radius: var(--tv-border-radius-md);
+ // 内置按钮激活状态边框色
+ --tv-Grid-button-border-color-active-default: var(--tv-color-border-secondary-hover);
+ // 内置按钮padding
+ --tv-Grid-button-padding-x: 24px;
+ // 内置select的下拉框背景色
+ --tv-Grid-select-option-bg-color: var(--tv-color-bg-2);
+ // 内置select的下拉框选中状态背景色
+ --tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover);
+ // 加载中背景色
+ --tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask);
// 表格无数据背景图片
--tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
}
diff --git a/packages/theme/src/loading/vars.less b/packages/theme/src/loading/vars.less
index 1590946065..9ef3b945f3 100644
--- a/packages/theme/src/loading/vars.less
+++ b/packages/theme/src/loading/vars.less
@@ -16,7 +16,7 @@
// 加载文本色
--tv-Loading-text-color: var(--tv-color-text-secondary);
// 加载背景色
- --tv-Loading-mask-bg-color: var(--tv-color-bg-active-dark);
+ --tv-Loading-mask-bg-color: var(--tv-color-bg-mask);
// 加载文本字号
--tv-Loading-text-font-size: var(--tv-font-size-lg);
// 加载图标文本垂直方向外边距