style: 分页样式调整

frontend/src/assets/style/arco-reset.less

@@ -502,12 +502,12 @@
   &-list {
     display: flex;
     flex-direction: row;
+    gap: 8px;
   }
   &-jumper {
     display: flex;
     align-items: center;
     padding: 2px 8px;
-    width: 160px;
     background: var(--color-text-n9);
     gap: 8px;
     .ms-pagination-jumper-input {
@@ -542,6 +542,7 @@
     width: 32px;
     height: 32px;
     box-sizing: border-box;
+    cursor: pointer;
     &-previous {
       margin-left: 14px !important;
     }

frontend/src/components/pure/ms-pagination/page-jumper.vue

@@ -15,7 +15,9 @@
       @change="handleChange"
     />
     <span v-if="$slots['jumper-append']" :class="`${prefixCls}-append`"><slot name="jumper-append" /></span>
-    <span :class="`${prefixCls}-total-page`">{{ t('msPagination.page', { page: pages }) }}</span>
+    <span :class="`${prefixCls}-total-page`" :style="{ width: totalPageWidth }">{{
+      t('msPagination.page', { page: pages })
+    }}</span>
   </span>
 </template>
 
@@ -23,6 +25,7 @@
   import { computed, ref, watch } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import { getPrefixCls } from './utils';
+  import useLocale from '@/locale/useLocale';
 
   defineOptions({ name: 'PageJumper' });
 
@@ -44,6 +47,8 @@
     (e: 'change', value: number): void;
   }>();
 
+  const { currentLocale } = useLocale();
+
   const prefixCls = getPrefixCls('pagination-jumper');
   const { t } = useI18n();
   const inputValue = ref(props.simple ? props.current : undefined);
@@ -70,4 +75,8 @@
       [`${prefixCls}-simple`]: props.simple,
     },
   ]);
+
+  const totalPageWidth = computed(() => {
+    return currentLocale.value === 'en-US' ? '64px' : '43px';
+  });
 </script>

frontend/src/views/bug-management/index.vue

@@ -1,7 +1,7 @@
 <template>
   <MsCard simple>
     <h1>BugManagement is waiting for development </h1>
-    <ms-pagination size="small" :total="100" show-jumper />
+    <ms-pagination size="small" :total="100" show-total show-jumper show-page-size />
   </MsCard>
 </template>