From 3707d6a477a7e94c49813db4835718a8fa110a1d Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 12 Sep 2024 20:36:42 +0800
Subject: [PATCH] fix(pager): [pager] fix pager hover style

---
 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       | 6 ++++++
 packages/theme/src/pager/vars.less        | 8 +++++---
 packages/vue/src/pager/src/pc.vue         | 6 ++++--
 7 files changed, 19 insertions(+), 9 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 1ebde02f72..2eef2c2476 100644
--- 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
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 766ee8405f..8aa4856458 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;
@@ -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
index 3b67f7f06a..98624d029a 100644
--- 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
index 3a22a1da06..97c6392931 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"
           />
-          <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>