From 314b60e6d8ea94d44c20516579ae875cf00338ce Mon Sep 17 00:00:00 2001 From: wuyiping0628 <1106773985@qq.com> Date: Thu, 6 Mar 2025 01:54:48 -0800 Subject: [PATCH 1/2] fix(theme): [card,qr-code,skeleton] add dark theme --- .../app/card/basic-usage-composition-api.vue | 2 +- .../sites/demos/pc/app/card/basic-usage.vue | 2 +- .../card/card-disabled-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-disabled.vue | 2 +- .../app/card/card-events-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-events.vue | 2 +- .../app/card/card-group-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-group.vue | 2 +- .../app/card/card-select-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-select.vue | 2 +- .../pc/app/card/card-size-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-size.vue | 2 +- .../app/card/card-status-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-status.vue | 2 +- .../pc/app/card/card-type-composition-api.vue | 2 +- .../sites/demos/pc/app/card/card-type.vue | 2 +- .../app/card/check-mode-composition-api.vue | 2 +- .../sites/demos/pc/app/card/check-mode.vue | 2 +- .../check-type-checkbox-composition-api.vue | 2 +- .../demos/pc/app/card/check-type-checkbox.vue | 2 +- .../card/check-type-radio-composition-api.vue | 2 +- .../demos/pc/app/card/check-type-radio.vue | 2 +- .../app/card/custom-class-composition-api.vue | 2 +- .../sites/demos/pc/app/card/custom-class.vue | 2 +- .../app/card/operate-bar-composition-api.vue | 2 +- .../sites/demos/pc/app/card/operate-bar.vue | 2 +- .../pc/app/card/slot-composition-api.vue | 2 +- examples/sites/demos/pc/app/card/slot.vue | 2 +- packages/theme/src/qr-code/index.less | 80 +++++++++---------- packages/theme/src/qr-code/vars.less | 4 + packages/theme/src/skeleton-item/vars.less | 2 +- packages/theme/src/vars.less | 1 + packages/vue/src/qr-code/src/pc.vue | 2 +- 33 files changed, 75 insertions(+), 70 deletions(-) create mode 100644 packages/theme/src/qr-code/vars.less diff --git a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue index 46fa04cd52..bb3b233c10 100644 --- a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue +++ b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue @@ -18,7 +18,7 @@ const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.p diff --git a/examples/sites/demos/pc/app/card/basic-usage.vue b/examples/sites/demos/pc/app/card/basic-usage.vue index 0f472b9372..d4c6239a15 100644 --- a/examples/sites/demos/pc/app/card/basic-usage.vue +++ b/examples/sites/demos/pc/app/card/basic-usage.vue @@ -26,7 +26,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue index 9936f99d08..f90691eca8 100644 --- a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue @@ -39,7 +39,7 @@ const options = ref([ diff --git a/examples/sites/demos/pc/app/card/card-disabled.vue b/examples/sites/demos/pc/app/card/card-disabled.vue index c07a89627c..e7dced53c1 100644 --- a/examples/sites/demos/pc/app/card/card-disabled.vue +++ b/examples/sites/demos/pc/app/card/card-disabled.vue @@ -47,7 +47,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-events-composition-api.vue b/examples/sites/demos/pc/app/card/card-events-composition-api.vue index c269060324..b9432576a6 100644 --- a/examples/sites/demos/pc/app/card/card-events-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-events-composition-api.vue @@ -60,7 +60,7 @@ function iconClick(item, index) { diff --git a/examples/sites/demos/pc/app/card/card-events.vue b/examples/sites/demos/pc/app/card/card-events.vue index c7404b1e77..88666954e8 100644 --- a/examples/sites/demos/pc/app/card/card-events.vue +++ b/examples/sites/demos/pc/app/card/card-events.vue @@ -69,7 +69,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-group-composition-api.vue b/examples/sites/demos/pc/app/card/card-group-composition-api.vue index 34c651ff16..9fb097b62c 100644 --- a/examples/sites/demos/pc/app/card/card-group-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-group-composition-api.vue @@ -63,7 +63,7 @@ function change(val) { diff --git a/examples/sites/demos/pc/app/card/card-group.vue b/examples/sites/demos/pc/app/card/card-group.vue index 7ffca04ed9..afa38f3672 100644 --- a/examples/sites/demos/pc/app/card/card-group.vue +++ b/examples/sites/demos/pc/app/card/card-group.vue @@ -73,7 +73,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue index 1fb34f5c7f..3b72cd537d 100644 --- a/examples/sites/demos/pc/app/card/card-select-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-select-composition-api.vue @@ -86,7 +86,7 @@ const dataArr = ref([ diff --git a/examples/sites/demos/pc/app/card/card-size.vue b/examples/sites/demos/pc/app/card/card-size.vue index 259b2d0eb1..dcc226a2f0 100644 --- a/examples/sites/demos/pc/app/card/card-size.vue +++ b/examples/sites/demos/pc/app/card/card-size.vue @@ -61,7 +61,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-status-composition-api.vue b/examples/sites/demos/pc/app/card/card-status-composition-api.vue index 7535e6219f..cbdc9ef274 100644 --- a/examples/sites/demos/pc/app/card/card-status-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-status-composition-api.vue @@ -43,7 +43,7 @@ import { TinyCard } from '@opentiny/vue' diff --git a/examples/sites/demos/pc/app/card/card-status.vue b/examples/sites/demos/pc/app/card/card-status.vue index 9373afc68a..ac1154fe34 100644 --- a/examples/sites/demos/pc/app/card/card-status.vue +++ b/examples/sites/demos/pc/app/card/card-status.vue @@ -52,7 +52,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/card-type-composition-api.vue b/examples/sites/demos/pc/app/card/card-type-composition-api.vue index 5865b5e3d5..21bedc087d 100644 --- a/examples/sites/demos/pc/app/card/card-type-composition-api.vue +++ b/examples/sites/demos/pc/app/card/card-type-composition-api.vue @@ -41,7 +41,7 @@ const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/us diff --git a/examples/sites/demos/pc/app/card/card-type.vue b/examples/sites/demos/pc/app/card/card-type.vue index c2928e3048..94632586f2 100644 --- a/examples/sites/demos/pc/app/card/card-type.vue +++ b/examples/sites/demos/pc/app/card/card-type.vue @@ -49,7 +49,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue index aafe332082..5639f75fd1 100644 --- a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue +++ b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue @@ -76,7 +76,7 @@ const dataArr = ref([ diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox.vue b/examples/sites/demos/pc/app/card/check-type-checkbox.vue index 07a553e3fc..1ea5e93a12 100644 --- a/examples/sites/demos/pc/app/card/check-type-checkbox.vue +++ b/examples/sites/demos/pc/app/card/check-type-checkbox.vue @@ -34,7 +34,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue index 2b4c9333f6..99c02da187 100644 --- a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue +++ b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue @@ -25,7 +25,7 @@ const value = ref('1') diff --git a/examples/sites/demos/pc/app/card/check-type-radio.vue b/examples/sites/demos/pc/app/card/check-type-radio.vue index cd413ccbd8..fa95978f9d 100644 --- a/examples/sites/demos/pc/app/card/check-type-radio.vue +++ b/examples/sites/demos/pc/app/card/check-type-radio.vue @@ -33,7 +33,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue index 0f7a281295..c1e68c252c 100644 --- a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue +++ b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue @@ -16,6 +16,6 @@ import { TinyCard } from '@opentiny/vue' diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue index 70b983b4b9..b115380bec 100644 --- a/examples/sites/demos/pc/app/card/custom-class.vue +++ b/examples/sites/demos/pc/app/card/custom-class.vue @@ -22,6 +22,6 @@ export default { diff --git a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue index 0eac59b957..082e6dc3db 100644 --- a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue +++ b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue @@ -47,7 +47,7 @@ const options = ref([ diff --git a/examples/sites/demos/pc/app/card/operate-bar.vue b/examples/sites/demos/pc/app/card/operate-bar.vue index 882f6e6cc8..1749bc21f7 100644 --- a/examples/sites/demos/pc/app/card/operate-bar.vue +++ b/examples/sites/demos/pc/app/card/operate-bar.vue @@ -54,7 +54,7 @@ export default { diff --git a/examples/sites/demos/pc/app/card/slot-composition-api.vue b/examples/sites/demos/pc/app/card/slot-composition-api.vue index 9ffabf30b1..6de18acda3 100644 --- a/examples/sites/demos/pc/app/card/slot-composition-api.vue +++ b/examples/sites/demos/pc/app/card/slot-composition-api.vue @@ -61,7 +61,7 @@ const isOpen = ref(true) diff --git a/examples/sites/demos/pc/app/card/slot.vue b/examples/sites/demos/pc/app/card/slot.vue index 5a7a40df96..37cfbffd3c 100644 --- a/examples/sites/demos/pc/app/card/slot.vue +++ b/examples/sites/demos/pc/app/card/slot.vue @@ -70,7 +70,7 @@ export default { diff --git a/packages/theme/src/qr-code/index.less b/packages/theme/src/qr-code/index.less index e7b269eecc..a42ebc6fb7 100644 --- a/packages/theme/src/qr-code/index.less +++ b/packages/theme/src/qr-code/index.less @@ -10,59 +10,59 @@ * */ @import '../custom.less'; - +@import './vars.less'; @qr-code-prefix-cls: ~'@{css-prefix}qr-code'; .@{qr-code-prefix-cls} { - &-container { - position: relative; - padding: 12px; + .inject-QrCode-vars(); + position: relative; + padding: 12px; + background-color: var(--tv-QrCode-container-bg-color); - &.border { - border: 1px solid rgb(5 5 5 / 6%); - border-radius: 8px; - } + &.border { + border: 1px solid rgba(231, 220, 220, 0.06); + border-radius: 8px; + } - .qrcode-border { - padding: 2px; - border: 1px solid rgb(5 5 5 / 6%); - border-radius: 8px; + .qrcode-border { + padding: 2px; + border: 1px solid rgb(5 5 5 / 6%); + border-radius: 8px; + } + + .qrcode-expried { + font-size: 14px; + } + + .mask { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; + color: rgb(0 0 0 / 88%); + inset-block-start: 0; + inset-inline-start: 0; + flex-direction: column; + + &-icon { + z-index: 10; } - .qrcode-expried { - font-size: 14px; + &-status { + z-index: 20; + background: rgb(255 255 255 / 96%); } - .mask { + .icon { position: absolute; display: flex; align-items: center; justify-content: center; - width: 100%; - height: 100%; - text-align: center; - color: rgb(0 0 0 / 88%); - inset-block-start: 0; - inset-inline-start: 0; - flex-direction: column; - - &-icon { - z-index: 10; - } - - &-status { - z-index: 20; - background: rgb(255 255 255 / 96%); - } - - .icon { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: white; - } + border: none; + background: white; } } } diff --git a/packages/theme/src/qr-code/vars.less b/packages/theme/src/qr-code/vars.less new file mode 100644 index 0000000000..4a01355f49 --- /dev/null +++ b/packages/theme/src/qr-code/vars.less @@ -0,0 +1,4 @@ +.inject-QrCode-vars() { + // 二维码背景色 + --tv-QrCode-container-bg-color: var(--tv-color-bg-inverse-tint-1); +} diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less index c2b236b49f..0031c64426 100644 --- a/packages/theme/src/skeleton-item/vars.less +++ b/packages/theme/src/skeleton-item/vars.less @@ -28,5 +28,5 @@ // 大图片宽度设置 --tv-SkeletonItem-image-large-size-width: 200px; // 渐变颜色设置(hide) - --tv-SkeletonItem-linear-gradient: linear-gradient(to right, #fafafa, #ebebeb, #fafafa); + --tv-SkeletonItem-linear-gradient: linear-gradient(to right, var(--tv-color-bg-hover), var(--tv-color-border-container), var(--tv-color-bg-hover)); } diff --git a/packages/theme/src/vars.less b/packages/theme/src/vars.less index 9be0a3e2e8..c2b954c66a 100644 --- a/packages/theme/src/vars.less +++ b/packages/theme/src/vars.less @@ -68,5 +68,6 @@ @import './skeleton/vars.less'; @import './skeleton-item/vars.less'; @import './color-picker/vars.less'; +@import './qr-code/vars.less'; @import './color-select-panel/vars.less'; @import './popeditor/vars.less'; diff --git a/packages/vue/src/qr-code/src/pc.vue b/packages/vue/src/qr-code/src/pc.vue index 3ac72e4b12..64606c360b 100644 --- a/packages/vue/src/qr-code/src/pc.vue +++ b/packages/vue/src/qr-code/src/pc.vue @@ -1,7 +1,7 @@