From 6fd3a0a83376629e385c5946dfc5cecf9dafea18 Mon Sep 17 00:00:00 2001 From: hwx1309243 Date: Mon, 19 Feb 2024 23:22:34 -0800 Subject: [PATCH 1/5] fix: add smb-theme --- packages/theme/src/skeleton-item/smb-theme.js | 5 +++++ packages/theme/src/skeleton/index.less | 1 + packages/theme/src/skeleton/smb-theme.js | 5 +++++ packages/theme/src/skeleton/vars.less | 1 + 4 files changed, 12 insertions(+) create mode 100644 packages/theme/src/skeleton-item/smb-theme.js create mode 100644 packages/theme/src/skeleton/smb-theme.js diff --git a/packages/theme/src/skeleton-item/smb-theme.js b/packages/theme/src/skeleton-item/smb-theme.js new file mode 100644 index 0000000000..0e8d5a4bf5 --- /dev/null +++ b/packages/theme/src/skeleton-item/smb-theme.js @@ -0,0 +1,5 @@ +export const tinySkeletonItemSmbTheme = { + 'ti-skeleton-item-bg-color': 'var(--ti-common-color-bg-disabled)', + 'ti-skeleton-item-border-radius': '2px', + 'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-disabled)' +} diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less index 139296ead2..27f20c9af7 100644 --- a/packages/theme/src/skeleton/index.less +++ b/packages/theme/src/skeleton/index.less @@ -28,6 +28,7 @@ &-item__title { width: var(--ti-skeleton-title-width); + height: var(--ti-skeleton-title-height); margin-bottom: var(--ti-skeleton-title-margin-bottom); } diff --git a/packages/theme/src/skeleton/smb-theme.js b/packages/theme/src/skeleton/smb-theme.js new file mode 100644 index 0000000000..00918bd353 --- /dev/null +++ b/packages/theme/src/skeleton/smb-theme.js @@ -0,0 +1,5 @@ +export const tinySkeletonSmbTheme = { + 'ti-skeleton-title-width': '20%', + 'ti-skeleton-title-height': 'var(--ti-common-space-6x)', + 'ti-skeleton-title-margin-bottom': 'var(--ti-common-space-6x)' +} diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less index 2a3e41136f..91b947e3c3 100644 --- a/packages/theme/src/skeleton/vars.less +++ b/packages/theme/src/skeleton/vars.less @@ -6,4 +6,5 @@ --ti-skeleton-title-width: 40%; --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px); --ti-skeleton-last-row-width: 60%; + --ti-skeleton-title-height: 16px; } From a1f966af3b7d2f063761f6c769e21ffbf079d139 Mon Sep 17 00:00:00 2001 From: hwx1309243 Date: Tue, 20 Feb 2024 17:17:44 -0800 Subject: [PATCH 2/5] fix: update skeleton of smb theme --- packages/theme/src/skeleton-item/index.less | 4 ++-- packages/theme/src/skeleton-item/smb-theme.js | 4 ++-- packages/theme/src/skeleton-item/vars.less | 2 ++ packages/theme/src/skeleton/index.less | 6 +++++- packages/theme/src/skeleton/smb-theme.js | 3 ++- packages/theme/src/skeleton/vars.less | 2 ++ packages/theme/src/theme.config.js | 4 +++- packages/theme/src/vars.less | 4 +++- packages/vue/src/skeleton/src/pc.vue | 12 +++++++----- 9 files changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/skeleton-item/index.less b/packages/theme/src/skeleton-item/index.less index 4495bf2cdf..e5be62f13d 100644 --- a/packages/theme/src/skeleton-item/index.less +++ b/packages/theme/src/skeleton-item/index.less @@ -8,10 +8,10 @@ &--active { &.@{skeleton-item-prefix-cls} { - background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3; + background: var(--ti-skeleton-item-linear-gradient); background-size: 200% 100%; background-position-x: 180%; - animation: 2s skeleton-loading ease-in-out infinite; + animation: 1.5s skeleton-loading ease-in-out infinite; } } diff --git a/packages/theme/src/skeleton-item/smb-theme.js b/packages/theme/src/skeleton-item/smb-theme.js index 0e8d5a4bf5..d0a9b07998 100644 --- a/packages/theme/src/skeleton-item/smb-theme.js +++ b/packages/theme/src/skeleton-item/smb-theme.js @@ -1,5 +1,5 @@ export const tinySkeletonItemSmbTheme = { - 'ti-skeleton-item-bg-color': 'var(--ti-common-color-bg-disabled)', 'ti-skeleton-item-border-radius': '2px', - 'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-disabled)' + 'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-normal)', + 'ti-skeleton-item-linear-gradient': 'linear-gradient(to right, #FAFAFA, #EBEBEB, #FAFAFA)' } diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less index 935e91b6b6..0cd426de38 100644 --- a/packages/theme/src/skeleton-item/vars.less +++ b/packages/theme/src/skeleton-item/vars.less @@ -13,4 +13,6 @@ --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px); --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px); --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px); + // 渐变颜色设置(hide) + --ti-skeleton-item-linear-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3; } diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less index 27f20c9af7..373eda5da1 100644 --- a/packages/theme/src/skeleton/index.less +++ b/packages/theme/src/skeleton/index.less @@ -29,7 +29,11 @@ &-item__title { width: var(--ti-skeleton-title-width); height: var(--ti-skeleton-title-height); - margin-bottom: var(--ti-skeleton-title-margin-bottom); + } + + &-item__rows { + margin-top: var(--ti-skeleton-row-margin-top); + margin-bottom: var(--ti-skeleton-rows-margin-bottom); } &-item--square { diff --git a/packages/theme/src/skeleton/smb-theme.js b/packages/theme/src/skeleton/smb-theme.js index 00918bd353..f8fa1e65e0 100644 --- a/packages/theme/src/skeleton/smb-theme.js +++ b/packages/theme/src/skeleton/smb-theme.js @@ -1,5 +1,6 @@ export const tinySkeletonSmbTheme = { 'ti-skeleton-title-width': '20%', 'ti-skeleton-title-height': 'var(--ti-common-space-6x)', - 'ti-skeleton-title-margin-bottom': 'var(--ti-common-space-6x)' + 'ti-skeleton-row-margin-top': 'var(--ti-common-space-6x)', + 'ti-skeleton-rows-margin-bottom': 'var(--ti-common-space-6x)' } diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less index 91b947e3c3..b1ec554f3c 100644 --- a/packages/theme/src/skeleton/vars.less +++ b/packages/theme/src/skeleton/vars.less @@ -7,4 +7,6 @@ --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px); --ti-skeleton-last-row-width: 60%; --ti-skeleton-title-height: 16px; + --ti-skeleton-row-margin-top: var(--ti-common-space-3x, 12px); + --ti-skeleton-rows-margin-bottom: var(--ti-common-space-3x); } diff --git a/packages/theme/src/theme.config.js b/packages/theme/src/theme.config.js index 14ac085af2..b14be5df82 100644 --- a/packages/theme/src/theme.config.js +++ b/packages/theme/src/theme.config.js @@ -76,5 +76,7 @@ export default { 'user-contact': 'user-contact', 'user-head': 'user-head', 'user-link': 'user-link', - 'year-table': 'year-table' + 'year-table': 'year-table', + 'skeleton': 'skeleton', + 'skeleton-item': 'skeleton-item' } diff --git a/packages/theme/src/vars.less b/packages/theme/src/vars.less index ee944b3e6b..1743760c61 100644 --- a/packages/theme/src/vars.less +++ b/packages/theme/src/vars.less @@ -64,4 +64,6 @@ @import './user-contact/vars.less'; @import './user-head/vars.less'; @import './year-table/vars.less'; -@import './transfer/vars.less' +@import './transfer/vars.less'; +@import './skeleton/vars.less'; +@import './skeleton-item/vars.less' diff --git a/packages/vue/src/skeleton/src/pc.vue b/packages/vue/src/skeleton/src/pc.vue index 75de9ff94b..600301a2d0 100644 --- a/packages/vue/src/skeleton/src/pc.vue +++ b/packages/vue/src/skeleton/src/pc.vue @@ -6,11 +6,13 @@
- +
+ +
From e3eda8db80c5ef941924c774d38ae6e1b8977265 Mon Sep 17 00:00:00 2001 From: hwx1309243 Date: Wed, 21 Feb 2024 01:31:18 -0800 Subject: [PATCH 3/5] fix: update code review --- packages/theme/src/skeleton/vars.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less index b1ec554f3c..b504fb0c29 100644 --- a/packages/theme/src/skeleton/vars.less +++ b/packages/theme/src/skeleton/vars.less @@ -6,7 +6,7 @@ --ti-skeleton-title-width: 40%; --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px); --ti-skeleton-last-row-width: 60%; - --ti-skeleton-title-height: 16px; - --ti-skeleton-row-margin-top: var(--ti-common-space-3x, 12px); + --ti-skeleton-title-height: var(--ti-common-space-4x); + --ti-skeleton-row-margin-top: var(--ti-common-space-3x); --ti-skeleton-rows-margin-bottom: var(--ti-common-space-3x); } From b03a3df4c2841347cb10b1d5a4d0eb0972e8e2ac Mon Sep 17 00:00:00 2001 From: hwx1309243 Date: Thu, 22 Feb 2024 03:01:44 -0800 Subject: [PATCH 4/5] fix: update code review --- packages/theme/src/skeleton-item/smb-theme.js | 1 + packages/theme/src/skeleton-item/vars.less | 38 +++++++++++++------ packages/theme/src/skeleton/index.less | 2 +- packages/theme/src/skeleton/smb-theme.js | 2 +- packages/theme/src/skeleton/vars.less | 2 +- 5 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/theme/src/skeleton-item/smb-theme.js b/packages/theme/src/skeleton-item/smb-theme.js index d0a9b07998..a76d86698a 100644 --- a/packages/theme/src/skeleton-item/smb-theme.js +++ b/packages/theme/src/skeleton-item/smb-theme.js @@ -1,5 +1,6 @@ export const tinySkeletonItemSmbTheme = { 'ti-skeleton-item-border-radius': '2px', + 'ti-skeleton-item-bg-color': 'var(--ti-common-color-bg-normal)', 'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-normal)', 'ti-skeleton-item-linear-gradient': 'linear-gradient(to right, #FAFAFA, #EBEBEB, #FAFAFA)' } diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less index 0cd426de38..fb16970a7d 100644 --- a/packages/theme/src/skeleton-item/vars.less +++ b/packages/theme/src/skeleton-item/vars.less @@ -1,18 +1,32 @@ .component-css-vars-skeleton-item() { + // 骨架屏元素背景设置 --ti-skeleton-item-bg-color: var(--ti-base-color-bg-5, #f5f5f6); - --ti-skeleton-item-border-radius: var(--ti-common-border-radius-1, 4px); - --ti-skeleton-item-image-icon-color: var(--ti-base-color-common-2, #adb0b8); - --ti-skeleton-item-square-height: var(--ti-common-size-4x, 16px); + // 骨架屏元素半径设置 + --ti-skeleton-item-border-radius: var(--ti-common-border-radius-1); + // 图片颜色设置 + --ti-skeleton-item-image-icon-color: var(--ti-common-color-icon-darkbg-normal, #adb0b8); + // 方形高度设置 + --ti-skeleton-item-square-height: var(--ti-common-size-4x); + // 圆角半径设置 --ti-skeleton-item-circle-border-radius: var(--ti-common-border-radius-3, 50%); - --ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px); - --ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x, 40px); - --ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px); - --ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px); - --ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px); - --ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px); - --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px); - --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px); - --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px); + // 圆形大尺寸设置 + --ti-skeleton-item-circle-large-size: var(--ti-common-size-15x); + // 圆形中尺寸设置 + --ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x); + // 圆形小尺寸设置 + --ti-skeleton-item-circle-small-size: var(--ti-common-size-5x); + // 小图片高度设置 + --ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x); + // 小图片宽度设置 + --ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x); + // 中图片高度设置 + --ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x); + // 中图片宽度设置 + --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x); + // 大图片高度设置 + --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x); + // 大图片宽度设置 + --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x); // 渐变颜色设置(hide) --ti-skeleton-item-linear-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3; } diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less index 373eda5da1..c424743efe 100644 --- a/packages/theme/src/skeleton/index.less +++ b/packages/theme/src/skeleton/index.less @@ -32,7 +32,7 @@ } &-item__rows { - margin-top: var(--ti-skeleton-row-margin-top); + margin-top: var(--ti-skeleton-rows-margin-top); margin-bottom: var(--ti-skeleton-rows-margin-bottom); } diff --git a/packages/theme/src/skeleton/smb-theme.js b/packages/theme/src/skeleton/smb-theme.js index f8fa1e65e0..f7b021e225 100644 --- a/packages/theme/src/skeleton/smb-theme.js +++ b/packages/theme/src/skeleton/smb-theme.js @@ -1,6 +1,6 @@ export const tinySkeletonSmbTheme = { 'ti-skeleton-title-width': '20%', 'ti-skeleton-title-height': 'var(--ti-common-space-6x)', - 'ti-skeleton-row-margin-top': 'var(--ti-common-space-6x)', + 'ti-skeleton-rows-margin-top': 'var(--ti-common-space-6x)', 'ti-skeleton-rows-margin-bottom': 'var(--ti-common-space-6x)' } diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less index b504fb0c29..c45b876b04 100644 --- a/packages/theme/src/skeleton/vars.less +++ b/packages/theme/src/skeleton/vars.less @@ -7,6 +7,6 @@ --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px); --ti-skeleton-last-row-width: 60%; --ti-skeleton-title-height: var(--ti-common-space-4x); - --ti-skeleton-row-margin-top: var(--ti-common-space-3x); + --ti-skeleton-rows-margin-top: var(--ti-common-space-3x); --ti-skeleton-rows-margin-bottom: var(--ti-common-space-3x); } From ecef04ce9beb23b86155498b5bd5c7ef7b4e40f8 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Mon, 26 Feb 2024 18:14:16 -0800 Subject: [PATCH 5/5] fix: update code review --- packages/theme/src/skeleton-item/smb-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/skeleton-item/smb-theme.js b/packages/theme/src/skeleton-item/smb-theme.js index a76d86698a..727209dd52 100644 --- a/packages/theme/src/skeleton-item/smb-theme.js +++ b/packages/theme/src/skeleton-item/smb-theme.js @@ -2,5 +2,5 @@ export const tinySkeletonItemSmbTheme = { 'ti-skeleton-item-border-radius': '2px', 'ti-skeleton-item-bg-color': 'var(--ti-common-color-bg-normal)', 'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-normal)', - 'ti-skeleton-item-linear-gradient': 'linear-gradient(to right, #FAFAFA, #EBEBEB, #FAFAFA)' + 'ti-skeleton-item-linear-gradient': 'linear-gradient(to right, #fafafa, #ebebeb, #fafafa)' }