From 086be9a364e87362e1a084eed6f7328e87f079a1 Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 10:06:07 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=94=9A=E7=82=B9?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8ssr=E4=B8=AD=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=97=B6=E6=9C=BA=E8=A7=A6=E5=8F=91=E4=B8=8D?= =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/_utils/dom.ts | 10 ++++++++-- packages/opendesign/src/anchor/OAnchor.vue | 4 ++-- packages/opendesign/src/anchor/style/style.scss | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/opendesign/src/_utils/dom.ts b/packages/opendesign/src/_utils/dom.ts index dbca6473..799be49e 100644 --- a/packages/opendesign/src/_utils/dom.ts +++ b/packages/opendesign/src/_utils/dom.ts @@ -146,7 +146,7 @@ export function scrollTo(y: number, opts: ScrollTopOptions) { const { scrollTop } = getScroll(container); const startTime = Date.now(); - return new Promise((res) => { + return new Promise((resolve) => { const frameFn = () => { const timeStamp = Date.now(); const time = timeStamp - startTime; @@ -163,7 +163,13 @@ export function scrollTo(y: number, opts: ScrollTopOptions) { if (time < duration) { throttleRAF(frameFn)(); } else { - throttleRAF(res)(); + // TODO:正确处理ssr中滚动事件执行完毕时机 + setTimeout(() => { + resolve(nextScrollTop); + }, 800); + + // 滚动事件可能未执行完成,故下一帧执行resolve + // throttleRAF(resolve)(); } }; diff --git a/packages/opendesign/src/anchor/OAnchor.vue b/packages/opendesign/src/anchor/OAnchor.vue index deb53ecf..2fb1e897 100644 --- a/packages/opendesign/src/anchor/OAnchor.vue +++ b/packages/opendesign/src/anchor/OAnchor.vue @@ -40,8 +40,8 @@ const updateIndicatorPosition = () => { indicatorStyle.value = {}; } else { const { offsetTop, offsetHeight } = el; - indicatorStyle.value.top = `${offsetTop}px`; - indicatorStyle.value.height = `${offsetHeight}px`; + indicatorStyle.value.top = `${offsetTop + 11}px`; + indicatorStyle.value.height = `${offsetHeight - 2 * 11}px`; indicatorStyle.value.opacity = 1; } }; diff --git a/packages/opendesign/src/anchor/style/style.scss b/packages/opendesign/src/anchor/style/style.scss index 4aca24e8..17fb8007 100644 --- a/packages/opendesign/src/anchor/style/style.scss +++ b/packages/opendesign/src/anchor/style/style.scss @@ -17,8 +17,8 @@ .o-anchor-indicator { position: absolute; - width: var(--anchor-line-width); - border-radius: var(--anchor-line-width); + width: var(--anchor-indicator-width); + border-radius: var(--anchor-indicator-width); background-color: var(--anchor-indicator-bg-color); opacity: 0; transition: all var(--o-easing-standard-in) var(--o-duration-m1); -- Gitee From ef4ec1e4f1d5bea7fcebb2920f36a7ade22fd72f Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 10:37:04 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dcard=E7=BB=84?= =?UTF-8?q?=E4=BB=B6detailMaxRow=E5=B1=9E=E6=80=A7=E5=91=BD=E5=90=8D?= =?UTF-8?q?=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/card/OCard.vue | 4 ++-- packages/opendesign/src/card/types.ts | 2 +- packages/portal-ak/src/ak/theme/card.a.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/opendesign/src/card/OCard.vue b/packages/opendesign/src/card/OCard.vue index 2145e424..4556c76d 100644 --- a/packages/opendesign/src/card/OCard.vue +++ b/packages/opendesign/src/card/OCard.vue @@ -17,7 +17,7 @@ const isTitleLimited = computed(() => { return !isUndefined(props.titleMaxRow); }); const isDetailLimited = computed(() => { - return !isUndefined(props.detaiMaxRow); + return !isUndefined(props.detailMaxRow); }); @@ -85,7 +85,7 @@ const isDetailLimited = computed(() => { v-if="props.detail || $slots.detail" class="o-card-detail" :class="{ 'o-card-detail-limited': isDetailLimited }" - :style="{ '--card-detail-row': props.detailRow, '--card-detail-max-row': props.detaiMaxRow }" + :style="{ '--card-detail-row': props.detailRow, '--card-detail-max-row': props.detailMaxRow }" > {{ props.detail }} diff --git a/packages/opendesign/src/card/types.ts b/packages/opendesign/src/card/types.ts index 9f00557a..e718f2e4 100644 --- a/packages/opendesign/src/card/types.ts +++ b/packages/opendesign/src/card/types.ts @@ -75,7 +75,7 @@ export const cardProps = { /** * 详情最大行数 */ - detaiMaxRow: { + detailMaxRow: { type: Number, }, /** diff --git a/packages/portal-ak/src/ak/theme/card.a.scss b/packages/portal-ak/src/ak/theme/card.a.scss index 6a517d96..92f9b9bc 100644 --- a/packages/portal-ak/src/ak/theme/card.a.scss +++ b/packages/portal-ak/src/ak/theme/card.a.scss @@ -21,7 +21,7 @@ } } -@include respond-to('up-pad') { +@include hoverable { .c-card-ascend-hover { position: relative; } -- Gitee From d92b0f8881a65cf1b9b329dec76b896c7c50e7ec Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 16:39:51 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=94=9A=E7=82=B9?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=BB=9A=E5=8A=A8=E8=BF=87=E7=A8=8B=E4=B8=AD?= =?UTF-8?q?=E5=86=8D=E6=AC=A1=E7=82=B9=E5=87=BB=E5=AF=BC=E8=87=B4=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E4=BA=8B=E4=BB=B6=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/_utils/dom.ts | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/opendesign/src/_utils/dom.ts b/packages/opendesign/src/_utils/dom.ts index 799be49e..c6d8b7d2 100644 --- a/packages/opendesign/src/_utils/dom.ts +++ b/packages/opendesign/src/_utils/dom.ts @@ -1,6 +1,6 @@ import { easeInOutCubic } from './easing'; import { throttleRAF } from './helper'; -import { isArray, isWindow } from './is'; +import { isArray, isFunction, isWindow } from './is'; import { PositionT } from './types'; export type ScrollTarget = HTMLElement | Window | Document; @@ -141,11 +141,19 @@ interface ScrollTopOptions { duration?: number; } +// 取消上一次未完全执行的滚动事件 +let cancelScrollRAF: Function | null = null; + export function scrollTo(y: number, opts: ScrollTopOptions) { const { container = window, duration = 450 } = opts; const { scrollTop } = getScroll(container); const startTime = Date.now(); + if (isFunction(cancelScrollRAF)) { + cancelScrollRAF(); + cancelScrollRAF = null; + } + return new Promise((resolve) => { const frameFn = () => { const timeStamp = Date.now(); @@ -161,15 +169,12 @@ export function scrollTo(y: number, opts: ScrollTopOptions) { } if (time < duration) { - throttleRAF(frameFn)(); + const fn = throttleRAF(frameFn); + cancelScrollRAF = fn.cancel; + fn(); } else { - // TODO:正确处理ssr中滚动事件执行完毕时机 - setTimeout(() => { - resolve(nextScrollTop); - }, 800); - // 滚动事件可能未执行完成,故下一帧执行resolve - // throttleRAF(resolve)(); + throttleRAF(resolve)(); } }; -- Gitee From 07e17e56bc2a51869c5735ceb9504cc0e4041eaf Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 18:46:04 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E9=94=9A=E7=82=B9?= =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8=E9=AB=98=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/anchor/OAnchor.vue | 4 ++-- .../opendesign/src/anchor/style/style.scss | 19 ++++++++++++++----- packages/opendesign/src/anchor/style/var.scss | 3 ++- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/opendesign/src/anchor/OAnchor.vue b/packages/opendesign/src/anchor/OAnchor.vue index 2fb1e897..deb53ecf 100644 --- a/packages/opendesign/src/anchor/OAnchor.vue +++ b/packages/opendesign/src/anchor/OAnchor.vue @@ -40,8 +40,8 @@ const updateIndicatorPosition = () => { indicatorStyle.value = {}; } else { const { offsetTop, offsetHeight } = el; - indicatorStyle.value.top = `${offsetTop + 11}px`; - indicatorStyle.value.height = `${offsetHeight - 2 * 11}px`; + indicatorStyle.value.top = `${offsetTop}px`; + indicatorStyle.value.height = `${offsetHeight}px`; indicatorStyle.value.opacity = 1; } }; diff --git a/packages/opendesign/src/anchor/style/style.scss b/packages/opendesign/src/anchor/style/style.scss index 17fb8007..bd2220b1 100644 --- a/packages/opendesign/src/anchor/style/style.scss +++ b/packages/opendesign/src/anchor/style/style.scss @@ -18,17 +18,26 @@ .o-anchor-indicator { position: absolute; width: var(--anchor-indicator-width); - border-radius: var(--anchor-indicator-width); - background-color: var(--anchor-indicator-bg-color); + background-color: transparent; opacity: 0; transition: all var(--o-easing-standard-in) var(--o-duration-m1); + + &::after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + height: var(--anchor-indicator-height); + border-radius: var(--anchor-line-width); + background-color: var(--o-color-primary1); + } } .o-anchor-item { min-width: var(--anchor-item-min-width); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + width: var(--anchor-item-width); } .o-anchor-item-link { diff --git a/packages/opendesign/src/anchor/style/var.scss b/packages/opendesign/src/anchor/style/var.scss index 9b33efa9..8d13c1f8 100644 --- a/packages/opendesign/src/anchor/style/var.scss +++ b/packages/opendesign/src/anchor/style/var.scss @@ -3,6 +3,7 @@ --anchor-line-bg-color: var(--o-color-control4); --anchor-indicator-width: 2px; + --anchor-indicator-height: 16px; --anchor-indicator-bg-color: var(--o-color-primary1); } @@ -19,7 +20,7 @@ --anchor-item-link-bg-color-hover: var(--o-color-control2-light); --anchor-item-link-bg-color-active: var(--o-color-control3-light); - --anchor-item-link-padding: 8px 8px; + --anchor-item-link-padding: 7px 8px; --anchor-item-link-radius: var(--o-radius_control-s); --anchor-item-link-gap: 2px; -- Gitee From 535eaa05d05b7e33c8e802b51136220e568dc5fd Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 19:27:48 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/carousel/style/var.scss | 2 +- packages/portal-ak/src/ak/theme/carousel.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/opendesign/src/carousel/style/var.scss b/packages/opendesign/src/carousel/style/var.scss index 24fe734f..bbf061ea 100644 --- a/packages/opendesign/src/carousel/style/var.scss +++ b/packages/opendesign/src/carousel/style/var.scss @@ -15,5 +15,5 @@ --carousel-indicator-bg-color: var(--o-color-control1); --carousel-indicator-bg-color-hover: var(--o-color-control2); --carousel-indicator-bg-color-active: var(--o-color-control3); - --carousel-indicator-bg-color-selected: var(--o-color-info1); + --carousel-indicator-bg-color-selected: var(--o-color-primary1); } diff --git a/packages/portal-ak/src/ak/theme/carousel.scss b/packages/portal-ak/src/ak/theme/carousel.scss index 162ca868..16e3b962 100644 --- a/packages/portal-ak/src/ak/theme/carousel.scss +++ b/packages/portal-ak/src/ak/theme/carousel.scss @@ -1,5 +1,9 @@ @use './mixin.scss' as *; +.o-carousel { + --carousel-indicator-bg-color-selected: var(--o-color-info1); +} + @include respond-to('<=pad') { .o-carousel.carousel-floor { --carousel-indicator-width: 24px; -- Gitee From 8c91270592bb3774bc97fc2d350fc4ba9f4bc951 Mon Sep 17 00:00:00 2001 From: Bang <15622356989@163.com> Date: Wed, 13 Sep 2023 19:53:02 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20anchor=E6=8C=87=E7=A4=BA=E5=99=A8fle?= =?UTF-8?q?x=E5=B8=83=E5=B1=80=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/anchor/style/style.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/opendesign/src/anchor/style/style.scss b/packages/opendesign/src/anchor/style/style.scss index bd2220b1..f7dba5fe 100644 --- a/packages/opendesign/src/anchor/style/style.scss +++ b/packages/opendesign/src/anchor/style/style.scss @@ -17,6 +17,8 @@ .o-anchor-indicator { position: absolute; + display: flex; + align-items: center; width: var(--anchor-indicator-width); background-color: transparent; opacity: 0; @@ -24,11 +26,7 @@ &::after { content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 0; - right: 0; + width: var(--anchor-indicator-width); height: var(--anchor-indicator-height); border-radius: var(--anchor-line-width); background-color: var(--o-color-primary1); -- Gitee