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); // 加载图标文本垂直方向外边距