From ea39960d59ac2be2d61e7c6585968f3e09083fcc Mon Sep 17 00:00:00 2001 From: gimmyhehe <975402925@qq.com> Date: Sat, 14 Sep 2024 14:19:00 +0800 Subject: [PATCH] fix(pager): [pager] fix pager hover style (#2111) * fix(pager): [pager] fix pager hover style * feat(pager): [pager] add simplest pager to adaptive x-design --- packages/design/aurora/src/pager/index.ts | 2 +- packages/design/saas/src/pager/index.ts | 2 +- packages/renderless/src/pager/vue.ts | 2 +- packages/renderless/types/pager.type.ts | 2 +- packages/theme/src/pager/index.less | 25 ++++++++++++++--------- packages/theme/src/pager/vars.less | 4 +++- packages/vue/src/pager/src/pc.vue | 6 ++++-- 7 files changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/design/aurora/src/pager/index.ts b/packages/design/aurora/src/pager/index.ts index afaa64650d..e08b704742 100644 --- a/packages/design/aurora/src/pager/index.ts +++ b/packages/design/aurora/src/pager/index.ts @@ -1,6 +1,6 @@ export default { state: { - showJumperSufix: false, + showJumperSuffix: false, align: 'right', totalI18n: 'total', totalFixedLeft: true diff --git a/packages/design/saas/src/pager/index.ts b/packages/design/saas/src/pager/index.ts index afaa64650d..e08b704742 100644 --- a/packages/design/saas/src/pager/index.ts +++ b/packages/design/saas/src/pager/index.ts @@ -1,6 +1,6 @@ export default { state: { - showJumperSufix: false, + showJumperSuffix: false, align: 'right', totalI18n: 'total', totalFixedLeft: true diff --git a/packages/renderless/src/pager/vue.ts b/packages/renderless/src/pager/vue.ts index d897f27930..643d0262ed 100644 --- a/packages/renderless/src/pager/vue.ts +++ b/packages/renderless/src/pager/vue.ts @@ -91,7 +91,7 @@ export const renderless = ( internalLayout: computed(() => api.computedInternalLayout()), totalText: computed(() => api.computedTotalText()), internalPageCount: computed(() => api.computedInternalPageCount()), - showJumperSufix: designConfig?.state?.showJumperSufix ?? true, + showJumperSuffix: designConfig?.state?.showJumperSuffix ?? true, align: props.align || designConfig?.state?.align || 'left', totalI18n: designConfig?.state?.totalI18n || 'totals', totalFixedLeft: computed( diff --git a/packages/renderless/types/pager.type.ts b/packages/renderless/types/pager.type.ts index 7b01c69467..4b438968e2 100644 --- a/packages/renderless/types/pager.type.ts +++ b/packages/renderless/types/pager.type.ts @@ -52,7 +52,7 @@ export interface IPagerState { internalLayout: string[] totalText: string internalPageCount: number | null - showJumperSufix: boolean + showJumperSuffix: boolean align: 'left' | 'center' | 'right' totalI18n: 'total' | 'totals' totalFixedLeft: boolean diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less index 1e7e876218..0aa1f53158 100644 --- a/packages/theme/src/pager/index.less +++ b/packages/theme/src/pager/index.less @@ -45,6 +45,10 @@ line-height: var(--ti-pager-total-line-height); font-size: var(--ti-pager-total-font-size); color: var(--ti-pager-normal-text-color); + + &-num { + font-family: var(--ti-pager-number-font-family); + } } & &__total-allpage { @@ -59,6 +63,7 @@ & &__pages { display: inline-flex; font-size: var(--ti-pager-font-size); + font-family: var(--ti-pager-number-font-family); li { background: transparent; @@ -296,7 +301,8 @@ &.@{popover-prefix-cls}.@{popper-prefix-cls} { min-width: var(--ti-pager-sizes-input-min-width); - padding: 0; + border: 0; + padding: 8px 0; border-radius: var(--ti-pager-pop-body-border-radius); &[x-placement^='bottom'] { @@ -317,13 +323,12 @@ &-poplist { .list-item { min-height: var(--ti-pager-poplist-item-min-height); - padding: 0 8px; + padding: 0 16px; line-height: var(--ti-pager-poplist-item-min-height); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - text-align: center; &:hover { cursor: pointer; @@ -346,7 +351,12 @@ &.is-selected { color: var(--ti-pager-poplist-item-selected-text-color); - background: var(--ti-pager-poplist-item-selected-bg-color); + background: transparent; + font-weight: bold; + + &:hover { + background: var(--ti-pager-poplist-item-selected-bg-color); + } } } } @@ -435,6 +445,7 @@ .sizes { margin-right: var(--ti-pager-sizes-num-margin-right); + font-family: var(--ti-pager-number-font-family); } } @@ -536,14 +547,8 @@ .component-css-vars-pager(); .tiny-option-label { - text-align: center; font-family: var(--ti-pager-number-font-family); } - - .tiny-option.selected { - color: var(--ti-pager-poplist-item-selected-text-color); - background: var(--ti-pager-poplist-item-selected-bg-color); - } } } diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less index 4ffc585d6a..fa444362ef 100644 --- a/packages/theme/src/pager/vars.less +++ b/packages/theme/src/pager/vars.less @@ -95,7 +95,7 @@ // 分页下拉框选中项默认背景色 --ti-pager-poplist-item-selected-bg-color: #f5f5f5; // 分页下拉框项选中字体颜色 - --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff); + --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight); // 分页页码项默认悬浮边框色 --ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent); // 分页下拉框圆角 @@ -166,4 +166,6 @@ --ti-pager-sizes-num-margin-right: var(--ti-common-dropdown-gap); // 页码悬浮文本色 --ti-pager-list-item-hover-text-color: var(--ti-common-color-text-primary, #252b3a); + // 分页数字字体 + --ti-pager-number-font-family: arial, helvetica, sans-serif; } diff --git a/packages/vue/src/pager/src/pc.vue b/packages/vue/src/pager/src/pc.vue index 93ed835971..2d2b72e945 100644 --- a/packages/vue/src/pager/src/pc.vue +++ b/packages/vue/src/pager/src/pc.vue @@ -43,7 +43,7 @@ @input="handleJumperInput" @change="handleJumperChange" /> - {{ + {{ t('ui.page.pageClassifier') }} @@ -160,7 +160,9 @@