From eb8995e990809520dada0f73c0d50c2b4b521a86 Mon Sep 17 00:00:00 2001 From: wuyiping0628 <1106773985@qq.com> Date: Fri, 13 Sep 2024 00:03:24 -0700 Subject: [PATCH 1/2] feat(guide): [guide] replace x with icon --- packages/renderless/src/guide/index.ts | 17 +++++++++++++++++ packages/theme/src/guide/index.less | 4 +++- packages/theme/src/guide/vars.less | 12 ++++++------ 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/renderless/src/guide/index.ts b/packages/renderless/src/guide/index.ts index 7ec05f705a..f21143605b 100644 --- a/packages/renderless/src/guide/index.ts +++ b/packages/renderless/src/guide/index.ts @@ -132,6 +132,23 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => { const currentStep = Shepherd.activeTour && Shepherd.activeTour.getCurrentStep() const currentStepElement = currentStep && currentStep.getElement() const footer = currentStepElement && currentStepElement.querySelector('.shepherd-footer') + const cancelIcon = + currentStepElement && currentStepElement.querySelector('.shepherd-header .shepherd-cancel-icon span') + const cloesIcon = ` + + + + + + ` + + cancelIcon.innerHTML = cloesIcon const progress = document.createElement('span') progress.classList.add('progress-style') progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${ diff --git a/packages/theme/src/guide/index.less b/packages/theme/src/guide/index.less index 81d9007749..6c022799f4 100644 --- a/packages/theme/src/guide/index.less +++ b/packages/theme/src/guide/index.less @@ -4,12 +4,14 @@ @guide-prefix-cls: ~'@{css-prefix}guide'; .@{guide-prefix-cls} { .component-css-vars-guide(); + .shepherd-arrow { height: calc(var(--ti-guide-arrow-height) * 1.4); position: absolute; width: calc(var(--ti-guide-arrow-width) * 1.4); z-index: -10; overflow: hidden; + &:before { width: var(--ti-guide-arrow-width); position: absolute; @@ -67,7 +69,7 @@ width: var(--ti-guide-cancel-icon-width); height: var(--ti-guide-cancel-icon-height); line-height: var(--ti-guide-cancel-icon-line-height); - color: var(--ti-guide-cancel-icon-color); + fill: var(--ti-guide-cancel-icon-color); display: inline-flex; justify-content: center; font-weight: var(--ti-guide-cancel-icon-font-weight); diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less index 324caaedd7..840d2309bb 100644 --- a/packages/theme/src/guide/vars.less +++ b/packages/theme/src/guide/vars.less @@ -26,11 +26,11 @@ // 引导框标题字号 --ti-guide-title-text-font-size: var(--ti-common-font-size-2); // 引导框关闭按钮图标字号 - --ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5, 24px); + --ti-guide-cancel-icon-font-size: var(--ti-common-font-size-4, 16px); // 引导框关闭按钮图标宽度 - --ti-guide-cancel-icon-width: var(--ti-common-size-5x, 20px); + --ti-guide-cancel-icon-width: var(--ti-common-size-4x, 16px); // 引导框关闭按钮图标高度 - --ti-guide-cancel-icon-height: var(--ti-common-size-5x, 20px); + --ti-guide-cancel-icon-height: var(--ti-common-size-4x, 16px); // 引导框关闭按钮图标行高 --ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4, 20px); // 引导框关闭按钮图标颜色 @@ -38,9 +38,9 @@ // 引导框关闭按钮图标字重 --ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1, 100); // 引导框关闭按钮图标顶部外边距 - --ti-guide-cancel-icon-margin-top: calc(var(--ti-common-space-base) * (-6)); + --ti-guide-cancel-icon-margin-top: calc(var(--ti-common-space-base) * (-3)); // 引导框关闭按钮图标顶部外边距 - --ti-guide-cancel-icon-margin-right: calc(var(--ti-common-space-base) * (-2)); + --ti-guide-cancel-icon-margin-right: calc(var(--ti-common-space-base) * (-1)); // 引导框关闭按钮图标顶部外边距 --ti-guide-progress-style-left: var(--ti-common-space-6x); // 引导框关闭按钮图标悬浮色 @@ -122,7 +122,7 @@ // 引导框按钮高度 --ti-guide-button-height: var(--ti-common-line-height-2); // 引导框边框圆角 - --ti-guide-shepherd-element-border-radius: var(--ti-common-border-radius-1, 4px); + --ti-guide-shepherd-element-border-radius: 8px; // 分页提示文字颜色 --ti-guide-progresss-text-color: #808080; } From fa6a282c6a4465361d5c8e256bdc7ac05243d33b Mon Sep 17 00:00:00 2001 From: wuyiping0628 <1106773985@qq.com> Date: Fri, 13 Sep 2024 00:12:09 -0700 Subject: [PATCH 2/2] feat(guide): [guide] replace x with close-icon --- packages/theme/src/guide/index.less | 2 +- packages/theme/src/guide/vars.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/guide/index.less b/packages/theme/src/guide/index.less index 6c022799f4..edd7e2ede8 100644 --- a/packages/theme/src/guide/index.less +++ b/packages/theme/src/guide/index.less @@ -79,7 +79,7 @@ } span:hover { - color: var(--ti-guide-cancel-hover-icon-color); + fill: var(--ti-guide-cancel-hover-icon-color); } } } diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less index 840d2309bb..dd40796744 100644 --- a/packages/theme/src/guide/vars.less +++ b/packages/theme/src/guide/vars.less @@ -44,7 +44,7 @@ // 引导框关闭按钮图标顶部外边距 --ti-guide-progress-style-left: var(--ti-common-space-6x); // 引导框关闭按钮图标悬浮色 - --ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); + --ti-guide-cancel-hover-icon-color: #191919; // 引导框内容文本色 --ti-guide-text-text-color: #595959; // 引导框内容行高