fix(pager): [pager] fix pager hover style

opentiny · Sep 12, 2024 · 3707d6a · 3707d6a
1 parent ecc4f7d
commit 3707d6a
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -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
@@ -87,7 +87,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: props.totalFixedLeft ?? designConfig?.state?.totalFixedLeft ?? false,

diff --git 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
@@ -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;
@@ -432,6 +437,7 @@
 
     .sizes {
       margin-right: var(--ti-pager-sizes-num-margin-right);
+      font-family: var(--ti-pager-number-font-family);
     }
   }
 

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -18,7 +18,7 @@
   // 分页页码选中项文字色
   --ti-pager-active-font-color: var(--ti-common-color-text-primary);
   // 分页页码选中项背景色
-  --ti-pager-active-bg-color: #F5F5F5;
+  --ti-pager-active-bg-color: #f5f5f5;
   // 自定义上下页按钮文本色
   --ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc);
   // 分页跳转输入框激活颜色
@@ -85,11 +85,11 @@
   --ti-pager-li-item-hover-font-weight: var(--ti-common-font-weight-6);
 
   // 分页项默认悬浮背景色
-  --ti-pager-poplist-item-hover-bg-color: #F5F5F5;
+  --ti-pager-poplist-item-hover-bg-color: #f5f5f5;
   // 分页下拉框项|列表项悬浮文本色
   --ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-primary);
   // 分页下拉框选中项默认背景色
-  --ti-pager-poplist-item-selected-bg-color: #F5F5F5;
+  --ti-pager-poplist-item-selected-bg-color: #f5f5f5;
   // 分页下拉框项选中字体颜色
   --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
   // 分页页码项默认悬浮边框色
@@ -162,4 +162,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
@@ -43,7 +43,7 @@
             @input="handleJumperInput"
             @change="handleJumperChange"
           />
-          <span v-if="state.showJumperSufix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
+          <span v-if="state.showJumperSuffix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
             t('ui.page.pageClassifier')
           }}</span>
         </div>
@@ -146,7 +146,9 @@
           </template>
           <template v-else>
             <span>{{ t('ui.page.totals') }}</span>
-            <span> {{ customTotal ? state.totalText : state.internalTotal }} </span>
+            <span :class="{ 'tiny-pager__total-num': !customTotal }">
+              {{ customTotal ? state.totalText : state.internalTotal }}
+            </span>
           </template>
         </div>
       </div>