From c9a89ad5d5edfd6382640204c164ee407042bd45 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Thu, 21 Nov 2024 22:10:30 -0800 Subject: [PATCH 1/7] fix(tooltip): fix tooltip's offset demo --- packages/renderless/src/common/deps/popper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/renderless/src/common/deps/popper.ts b/packages/renderless/src/common/deps/popper.ts index 49cb8e93cb..6d2421cbee 100644 --- a/packages/renderless/src/common/deps/popper.ts +++ b/packages/renderless/src/common/deps/popper.ts @@ -782,7 +782,7 @@ class Popper { if (this._options.updateHiddenPopperOnScroll) { this.state.updateBoundFn() } else { - if (isDisplayNone(this._popper)) return + if (isDisplayNone(this._reference)) return this.state.updateBoundFn() } } From 2066ae42add76e02a9ff7e0ce4dc8e86d3751fe7 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Thu, 21 Nov 2024 22:33:34 -0800 Subject: [PATCH 2/7] =?UTF-8?q?fix(modal):=20fix=20=20=E7=A1=AE=E5=AE=9A?= =?UTF-8?q?=20not=20in=20center?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/button/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less index 478a11fb81..d04599b7a3 100644 --- a/packages/theme/src/button/index.less +++ b/packages/theme/src/button/index.less @@ -10,6 +10,7 @@ display: inline-flex; align-items: center; + justify-content: center; appearance: none; text-align: center; white-space: nowrap; From f99aa4eb81a521bfdac112fe388f58d53cde8cd2 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Fri, 22 Nov 2024 00:59:12 -0800 Subject: [PATCH 3/7] fix(button): fix button's old-theme --- packages/theme/src/base/old-theme.less | 14 ++++++++++++- packages/theme/src/base/vars.less | 14 ++++++++++++- packages/theme/src/button/index.less | 2 ++ packages/theme/src/button/old-theme.less | 17 ++++++++++------ packages/theme/src/button/vars.less | 26 +++++++++++++++++++++++- 5 files changed, 64 insertions(+), 9 deletions(-) diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less index e55bc82e72..2d18cc6294 100644 --- a/packages/theme/src/base/old-theme.less +++ b/packages/theme/src/base/old-theme.less @@ -162,7 +162,9 @@ --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-brand-3); // #beccfa 幽灵hover边框色-2.2 --tv-color-act-primary-border-light-active-1: var(--tv-base-color-brand-3); // #beccfa 幽灵active边框色-2.2 - /* 成功-success */ + --tv-color-act-primary-plain-text-hover: var(--tv-base-color-common-1); // #fff + + /* 成功-success */ --tv-color-act-success-text: var(--tv-base-color-success-6); // #50d4ab 成功文本色-1(成功主色): 朴素/幽灵/纯文本/链接 --tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #50d4ab 成功hover文本色-1 --tv-color-act-success-text-active: var(--tv-base-color-success-6); // #50d4ab 成功active文本色-1 @@ -189,6 +191,8 @@ --tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色 --tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色 + --tv-color-act-success-plain-text-hover: var(--tv-base-color-common-1); // #fff + /* 告警-warning */ --tv-color-act-warning-text: var(--tv-base-color-warn-7); // #e37d29 告警文本色-1(告警主色):朴素/幽灵/纯文本/链接 --tv-color-act-warning-text-hover: var(--tv-base-color-warn-7); // #e37d29 告警hover文本色-1 @@ -216,6 +220,8 @@ --tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色 --tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色 + --tv-color-act-warning-plain-text-hover: var(--tv-base-color-common-1); // #fff + /* 危险-danger */ --tv-color-act-danger-text: var(--tv-base-color-error-12); // #c7000b 危险文本色-1(成功主色):朴素/幽灵/纯文本/链接 --tv-color-act-danger-text-hover: var(--tv-base-color-error-12); // #c7000b 危险hover文本色-1 @@ -243,6 +249,8 @@ --tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #ffeceb 危险hover边框色 --tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #ffeceb 危险active边框色 + --tv-color-act-danger-plain-text-hover: var(--tv-base-color-common-1); // #fff + /* 信息-info */ --tv-color-act-info-text: var(--tv-base-color-info-7);// 信息文本色-1(信息主色):朴素/幽灵/纯文本/链接 --tv-color-act-info-text-hover: var(--tv-base-color-info-7); // #5e7ce0 信息hover文本色-1 @@ -270,6 +278,8 @@ --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色 --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色 + --tv-color-act-info-plain-text-hover: var(--tv-base-color-common-1); // #fff + /** 2.4 文本色 **/ --tv-color-text: var(--tv-base-color-common-8); // #252b3a 一级文本色-正文主色,重要信息、标题颜色、输入类文本颜色、导航栏文字图标 --tv-color-text-secondary: var(--tv-base-color-common-7); // #575d6c 二级文本色-次要信息 @@ -283,6 +293,8 @@ --tv-color-text-link-hover: var(--tv-base-color-brand-10); // #344899 链接悬浮色 --tv-color-text-darbg: var(--tv-base-color-common-5); // 深色背景文本色,顶级导航/一级tab文本色 + --tv-color-plain-text-hover: var(--tv-base-color-brand-6); // #5e7c60 + /** 2.5 图标色 **/ --tv-color-icon: var(--tv-base-color-common-7); // #575d6c 默认图标色 --tv-color-icon-hover: var(--tv-base-color-brand-6); // #5e7ce0 图标悬浮色 diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less index 2ae3f03110..b38decf5ee 100644 --- a/packages/theme/src/base/vars.less +++ b/packages/theme/src/base/vars.less @@ -166,6 +166,8 @@ --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵hover边框色-2.2 --tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵active边框色-2.2 + --tv-color-act-primary-plain-text-hover: var(--tv-base-color-brand); // #191919 + /* 成功-success */ --tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1(成功主色): 朴素/幽灵/纯文本/链接 --tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1 @@ -193,6 +195,8 @@ --tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色 --tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色 + --tv-color-act-success-plain-text-hover: var(--tv-base-color-success-6); // #5cb300 + /* 告警-warning */ --tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800 告警文本色-1(告警主色):朴素/幽灵/纯文本/链接 --tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800 告警hover文本色-1 @@ -220,6 +224,8 @@ --tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色 --tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色 + --tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800 + /* 危险-danger */ --tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030 危险文本色-1(成功主色):朴素/幽灵/纯文本/链接 --tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030 #f23030 危险hover文本色-1 @@ -247,6 +253,8 @@ --tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover边框色 --tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active边框色 + --tv-color-act-danger-plain-text-hover: var(--tv-base-color-error-6); // #f23030 + /* 信息-info */ --tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1(信息主色):朴素/幽灵/纯文本/链接 --tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1 @@ -274,6 +282,8 @@ --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色 --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色 + --tv-color-act-info-plain-text-hover: var(--tv-base-color-info-6); // #1476ff + /** 2.4 文本色 **/ --tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色,重要信息、标题颜色、输入类文本颜色、导航栏文字图标 --tv-color-text-secondary: var(--tv-base-color-common-9); // #595959 二级文本色-次要信息 @@ -286,6 +296,8 @@ --tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色(链接按钮) --tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色 + --tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919 + /** 2.5 图标色 **/ --tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色 --tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色 @@ -366,7 +378,7 @@ --tv-font-size-lg: 16px; --tv-font-size-xl: 18px; --tv-font-size-xxl: 20px; - --tv-font-size-default:var(--tv-font-size-md); + --tv-font-size-default: var(--tv-font-size-md); --tv-font-size-heading-xs: 16px; // 卡片标题 --tv-font-size-heading-sm: 18px; // 页面标题 diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less index d04599b7a3..2ed86a08cf 100644 --- a/packages/theme/src/button/index.less +++ b/packages/theme/src/button/index.less @@ -106,6 +106,7 @@ .color-active-mixin(@theme, @plain) { @bg: %('var(--tv-Button-bg-color%a-active-%a)', @plain, @theme); @border: %('var(--tv-Button-border-color%a-active-%a)', @plain, @theme); + @c: %('var(--tv-Button-text-color%a-active-%a)', @plain, @theme); &:active, &:focus, @@ -113,6 +114,7 @@ &.is-active { background-color: e(@bg); border-color: e(@border); + color: e(@c); } } // 激活态: 叠加到 ghost 状态上。 diff --git a/packages/theme/src/button/old-theme.less b/packages/theme/src/button/old-theme.less index f840a4f733..fe0fa8bdad 100644 --- a/packages/theme/src/button/old-theme.less +++ b/packages/theme/src/button/old-theme.less @@ -1,7 +1,12 @@ -@import '../custom.less'; -@button-prefix-cls: ~'@{css-prefix}button'; - -.@{button-prefix-cls} { - // 默认时按钮圆角 - --tv-Button-border-radius: 2px; +.tiny-button { + // 默认时按钮内图标的大小 + --tv-Button-size-icon-font-size: 14px; + // 超大按钮内图标的大小 + --tv-Button-size-icon-font-size-large: 16px; + // 中等按钮内图标的大小 + --tv-Button-size-icon-font-size-medium: 14px; + // 小型按钮内图标的大小 + --tv-Button-size-icon-font-size-small: 12px; + // 超小按钮内图标的大小 + --tv-Button-size-icon-font-size-mini: 12px; } diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less index b9f82394e3..914eaac230 100644 --- a/packages/theme/src/button/vars.less +++ b/packages/theme/src/button/vars.less @@ -221,10 +221,14 @@ --tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary); // 现规范,激活态时,只影响边框和背景 // 默认时按钮激活的边框色 --tv-Button-border-color-active-default: var(--tv-color-border); + // 默认时按钮激活的文本 + --tv-Button-text-color-active-default: var(--tv-color-text); // 默认时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-default: var(--tv-color-bg); // 默认时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框,所以等于背景色。 + // 默认时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-default: var(--tv-color-plain-text-hover); // 默认时按钮激活的幽灵边框色 --tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active); @@ -232,21 +236,29 @@ --tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-active); // primary 主题时按钮激活的边框色 --tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-active); + // primary 主题时按钮激活的文本色 + --tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-white-active); // primary 主题时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active); // primary 主题时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active); // 无边框 + // primary 主题时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover); // primary 主题时按钮激活的幽灵边框色 - --tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-border-light-active-1); + --tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover); // success 主题时按钮激活的背景色 --tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-active); // success 主题时按钮激活的边框色 --tv-Button-border-color-active-success: var(--tv-color-act-success-border-active); + // success 主题时按钮激活的文本色 + --tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active); // success 主题时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-active); // success 主题时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-active); // 无边框 + // success 主题时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover); // success 主题时按钮激活的幽灵边框色 --tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-active-1); @@ -254,10 +266,14 @@ --tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active); // warning 主题时按钮激活的边框色 --tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-active); + // warning 主题时按钮激活的文本色 + --tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active); // warning 主题时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active); // warning 主题时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active); // 无边框 + // warning 主题时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover); // warning 主题时按钮激活的幽灵边框色 --tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1); @@ -265,10 +281,14 @@ --tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-active); // danger 主题时按钮激活的边框色 --tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-active); + // danger 主题时按钮激活的文本色 + --tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active); // danger 主题时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active); // danger 主题时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active); + // danger 主题时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover); // danger 主题时按钮激活的幽灵边框色 --tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-active-1); @@ -276,10 +296,14 @@ --tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active); // info 主题时按钮激活的边框色 --tv-Button-border-color-active-info: var(--tv-color-act-info-border-active); + // info 主题时按钮激活的文本色 + --tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active); // info 主题时按钮激活的朴素背景色 --tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-active); // info 主题时按钮激活的朴素边框色 --tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active); + // info 主题时按钮激活的朴素文本色 + --tv-Button-text-color-plain-active-info: var(--tv-color-act-info-plain-text-hover); // info 主题时按钮激活的幽灵边框色 --tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1); // level3 结束------ From 94f34e154c1a2a05404d1021a7cdb96a3bb50bc9 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sun, 24 Nov 2024 18:19:43 -0800 Subject: [PATCH 4/7] fix(date-picker): fix date-picker's visibleArrow --- packages/renderless/src/picker/index.ts | 2 +- packages/theme/src/base/index.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts index 421182ca57..05a3ca4e47 100644 --- a/packages/renderless/src/picker/index.ts +++ b/packages/renderless/src/picker/index.ts @@ -1328,7 +1328,7 @@ export const initPopper = ({ props, hooks, vnode }) => { props: { ...props, popperOptions: Object.assign({ boundariesPadding: 0, gpuAcceleration: false }, props.popperOptions), - visibleArrow: true, + visibleArrow: false, offset: 0, boundariesPadding: 5, arrowOffset: 35, diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less index aa2077840a..9e8ce35ba6 100644 --- a/packages/theme/src/base/index.less +++ b/packages/theme/src/base/index.less @@ -11,6 +11,6 @@ */ @import './reset.less'; -@import './vars.less'; -// @import './old-theme.less'; +// @import './vars.less'; +@import './old-theme.less'; @import './transition.less'; From 3afb1946fb88eaee7a713b137836ae43a5d344e3 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sun, 24 Nov 2024 19:52:52 -0800 Subject: [PATCH 5/7] fix(modal): fix tag's padding --- packages/theme/src/tag/vars.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less index 201b99b995..232b460c22 100644 --- a/packages/theme/src/tag/vars.less +++ b/packages/theme/src/tag/vars.less @@ -58,7 +58,7 @@ // 标签在仅图标模式时,图标的大小 --tv-Tag-only-icon-font-size: 14px; // 标签在仅图标模式时,标签的内边距 - --tv-Tag-only-icon-padding: 0.5px; + --tv-Tag-only-icon-padding: 4px; // 中等标签字号 --tv-Tag-font-size-medium: var(--tv-font-size-default); From 7a79b6ab64063c72e035e9066543d7f0afb5c3f2 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sun, 24 Nov 2024 22:48:29 -0800 Subject: [PATCH 6/7] fix(tree-node): increase the robustness of the location --- packages/renderless/src/tree-node/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts index 82bd72179e..917b760c58 100644 --- a/packages/renderless/src/tree-node/index.ts +++ b/packages/renderless/src/tree-node/index.ts @@ -164,7 +164,7 @@ export const handleContextMenu = const treeWidth = state.tree.$parent.$el.offsetWidth if (event.clientY > -10) { - state.menuposition.top = `${vm.$refs.node.offsetTop + vm.$refs.node.childNodes[0].offsetHeight / 2}px` + state.menuposition.top = `${vm.$refs.node.offsetTop + vm.$refs.content.offsetHeight / 2}px` } if (event.clientX > -10) { From 9302cf3a438ca6769ffc82355e51cb81cb5f9c98 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sun, 24 Nov 2024 23:24:13 -0800 Subject: [PATCH 7/7] fix(base): fix --- packages/theme/src/base/index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less index 9e8ce35ba6..aa2077840a 100644 --- a/packages/theme/src/base/index.less +++ b/packages/theme/src/base/index.less @@ -11,6 +11,6 @@ */ @import './reset.less'; -// @import './vars.less'; -@import './old-theme.less'; +@import './vars.less'; +// @import './old-theme.less'; @import './transition.less';