Skip to content

Commit 4b7ae8c

Browse files
wuyiping0628wuyiping0628
authored
fix(grid): [grid] add grid no-data icon (#3257)
* fix(theme): [grid,switch] update dark theme * fix(grid): [grid] add grid no-data icon
1 parent 5fa8d72 commit 4b7ae8c

File tree

11 files changed

+89
-8
lines changed

11 files changed

+89
-8
lines changed

‎packages/theme-saas/src/svgs/grid-no-data.svg

+41
Loading

‎packages/theme/src/base/dark-theme.less

+5
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,11 @@
334334
// -- 暗色新增 --
335335
--tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
336336
--tv-color-icon-inverse-tint: var(--tv-base-color-common-13); // #000 暗色反色成黑色：按钮下拉线头
337+
// -- 空状态图标 --
338+
--tv-color-no-data-gary-1: var(--tv-base-color-common-10); // #262626
339+
--tv-color-no-data-gary-2: var(--tv-base-color-common-9); // #333333
340+
--tv-color-no-data-border: var(--tv-base-color-common-5); // #999999
341+
--tv-color-no-data-brand: var(--tv-base-color-brand-7); // #317AF7
337342

338343
/** 2.6 背景色 **/
339344

‎packages/theme/src/base/vars.less

+5-1
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,11 @@
334334
// -- 暗色新增 --
335335
--tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
336336
--tv-color-icon-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：按钮下拉线头
337-
337+
// -- 空状态图标 --
338+
--tv-color-no-data-gary-1: var(--tv-base-color-common-4); // #f0f0f0
339+
--tv-color-no-data-gary-2: var(--tv-base-color-common-1); // #ffffff
340+
--tv-color-no-data-border: var(--tv-base-color-common-8); // #808080
341+
--tv-color-no-data-brand: var(--tv-base-color-brand-6); // #317af7
338342

339343
/** 2.6 背景色 **/
340344

‎packages/theme/src/grid/table.less

-1
Original file line numberDiff line numberDiff line change
@@ -761,7 +761,6 @@
761761
width: 100%;
762762
height: 100px;
763763
margin: 0;
764-
background: var(--tv-Grid-empty-img) 50% no-repeat;
765764
}
766765

767766
& &__empty-text {

‎packages/theme/src/grid/vars.less

-2
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,6 @@
224224
--tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
225225
// 加载中背景色
226226
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask-block, rgba(255, 255, 255, 70%));
227-
// 表格无数据背景图片
228-
--tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
229227
// 边框模式复选框禁用边框色
230228
--tv-Grid-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
231229
// 复选框过滤器模式底色

‎packages/theme/src/svgs/grid-no-data.svg

+20
Loading

‎packages/vue-icon-saas/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,7 @@ import IconMaterial from './src/material'
455455
import IconMilestone from './src/milestone'
456456
import IconMinscreenRight from './src/minscreen-right'
457457
import IconNoData from './src/no-data'
458+
import IconGridNoData from './src/grid-no-data'
458459
import IconNoNews from './src/no-news'
459460
import IconNoPerm from './src/no-perm'
460461
import IconNoResult from './src/no-result'
@@ -1520,6 +1521,8 @@ export {
15201521
IconMinscreenRight as iconMinscreenRight,
15211522
IconNoData,
15221523
IconNoData as iconNoData,
1524+
IconGridNoData,
1525+
IconGridNoData as iconGridNoData,
15231526
IconNoNews,
15241527
IconNoNews as iconNoNews,
15251528
IconNoPerm,
@@ -2063,6 +2066,7 @@ export default {
20632066
IconMilestone,
20642067
IconMinscreenRight,
20652068
IconNoData,
2069+
IconGridNoData,
20662070
IconNoNews,
20672071
IconNoPerm,
20682072
IconNoResult,

‎packages/vue-icon/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,7 @@ import IconMaterial from './src/material'
455455
import IconMilestone from './src/milestone'
456456
import IconMinscreenRight from './src/minscreen-right'
457457
import IconNoData from './src/no-data'
458+
import IconGridNoData from './src/grid-no-data'
458459
import IconNoNews from './src/no-news'
459460
import IconNoPerm from './src/no-perm'
460461
import IconNoResult from './src/no-result'
@@ -1520,6 +1521,8 @@ export {
15201521
IconMinscreenRight as iconMinscreenRight,
15211522
IconNoData,
15221523
IconNoData as iconNoData,
1524+
IconGridNoData,
1525+
IconGridNoData as iconGridNoData,
15231526
IconNoNews,
15241527
IconNoNews as iconNoNews,
15251528
IconNoPerm,
@@ -2063,6 +2066,7 @@ export default {
20632066
IconMilestone,
20642067
IconMinscreenRight,
20652068
IconNoData,
2069+
IconGridNoData,
20662070
IconNoNews,
20672071
IconNoPerm,
20682072
IconNoResult,

‎packages/vue-icon/src/grid-no-data/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { svg } from '@opentiny/vue-common'
2+
import NoData from '@opentiny/vue-theme/svgs/grid-no-data.svg'
3+
4+
export default () => svg({ name: 'IconGridNoData', component: NoData })()

‎packages/vue/src/grid/src/body/src/body.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ import {
3636
} from '@opentiny/vue-renderless/grid/utils'
3737
import { getCellLabel } from '../../tools'
3838
import GlobalConfig from '../../config'
39-
import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
39+
import { iconChevronRight, iconChevronDown, iconGridNoData } from '@opentiny/vue-icon'
4040
import { h, hooks, $prefix, defineComponent } from '@opentiny/vue-common'
4141
import { getTreeChildrenKey, getTreeShowKey, handleRowGroupFold, isVirtualRow } from '../../table/src/strategy'
4242
import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
43-
43+
const GridNoData = iconGridNoData()
4444
// 滚动、拖动过程中不需要触发鼠标移入移出事件
4545
const isOperateMouse = ($table) =>
4646
$table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
@@ -752,7 +752,7 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
752752

753753
function renderDefEmpty(h) {
754754
return [
755-
h('p', {
755+
h(GridNoData, {
756756
class: 'tiny-grid__empty-img'
757757
}),
758758
h(

0 commit comments

Comments
 (0)