refactor: 分页子组件改为setup

frontend/src/components/pure/ms-icon-font/index.vue

@@ -17,9 +17,3 @@
     extraProps: { ...props },
   });
 </script>
-
-<style lang="less">
-  .arco-icon {
-    font-size: 14px !important;
-  }
-</style>

frontend/src/components/pure/ms-pagination/page-item-ellipsis.vue

@@ -6,53 +6,37 @@
   </li>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { getPrefixCls, getLegalPage } from './utils';
   import MsIcon from '../ms-icon-font/index.vue';
 
-  export default defineComponent({
-    name: 'EllipsisPager',
-    components: {
-      MsIcon,
-    },
-    props: {
-      current: {
-        type: Number,
-        required: true,
-      },
-      step: {
-        type: Number,
-        default: 5,
-      },
-      pages: {
-        type: Number,
-        required: true,
-      },
-    },
-    emits: ['click'],
-    setup(props, { emit }) {
-      const prefixCls = getPrefixCls('pagination-item');
+  defineOptions({
+    name: 'PageItemElipsis',
+  });
 
+  export interface PageItemElipsisProps {
+    current: number;
+    step: number;
+    pages: number;
+  }
+
+  const props = withDefaults(defineProps<PageItemElipsisProps>(), {
+    step: 5,
+  });
+  const emit = defineEmits<{
+    (e: 'click', value: number): void;
+  }>();
+
+  const prefixCls = getPrefixCls('pagination-item');
   const nextPage = computed(() =>
     getLegalPage(props.current + props.step, {
       min: 1,
       max: props.pages,
     })
   );
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const handleClick = (e: MouseEvent) => {
+  const handleClick = () => {
     emit('click', nextPage.value);
   };
-
   const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
-
-      return {
-        prefixCls,
-        cls,
-        handleClick,
-      };
-    },
-  });
 </script>

frontend/src/components/pure/ms-pagination/page-item-step.vue

@@ -1,46 +1,36 @@
 <template>
   <component :is="simple ? 'span' : 'li'" :class="cls" @click="handleClick">
     <slot :type="isNext ? 'next' : 'previous'">
-      <MsIcon v-if="isNext" type="icon-icon_right_outlined" />
-      <MsIcon v-else type="icon-icon_left_outlined" />
+      <MsIcon v-if="isNext" size="12px" type="icon-icon_right_outlined" />
+      <MsIcon v-else size="12px" type="icon-icon_left_outlined" />
     </slot>
   </component>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { getPrefixCls, getLegalPage } from './utils';
   import MsIcon from '../ms-icon-font/index.vue';
 
-  export default defineComponent({
-    name: 'StepPager',
-    components: {
-      MsIcon,
-    },
-    props: {
-      pages: {
-        type: Number,
-        required: true,
-      },
-      current: {
-        type: Number,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      simple: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    emits: ['click'],
-    setup(props, { emit }) {
+  defineOptions({
+    name: 'PageItemStep',
+  });
+
+  export interface PageItemStepProps {
+    pages: number;
+    current: number;
+    type: 'next' | 'previous';
+    disabled: boolean;
+    simple: boolean;
+  }
+
+  const props = withDefaults(defineProps<PageItemStepProps>(), {
+    disabled: false,
+    simple: false,
+  });
+  const emit = defineEmits<{
+    (e: 'click', value: number): void;
+  }>();
   const prefixCls = getPrefixCls('pagination-item');
   const isNext = props.type === 'next';
   const mergedDisabled = computed(() => {
@@ -62,8 +52,7 @@
     })
   );
 
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const handleClick = (e: MouseEvent) => {
+  const handleClick = () => {
     if (!mergedDisabled.value) {
       emit('click', nextPage.value);
     }
@@ -76,13 +65,4 @@
       [`${prefixCls}-disabled`]: mergedDisabled.value,
     },
   ]);
-
-      return {
-        prefixCls,
-        cls,
-        isNext,
-        handleClick,
-      };
-    },
-  });
 </script>

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

@@ -6,59 +6,47 @@
   </li>
 </template>
 
-<script lang="ts">
-  import type { PropType, CSSProperties } from 'vue';
-  import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { computed } from 'vue';
   import { getPrefixCls } from './utils';
 
-  export default defineComponent({
+  defineOptions({
     name: 'Pager',
-    props: {
-      pageNumber: {
-        type: Number,
-      },
-      current: {
-        type: Number,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      style: {
-        type: Object as PropType<CSSProperties>,
-      },
-      activeStyle: {
-        type: Object as PropType<CSSProperties>,
-      },
-    },
-    emits: ['click'],
-    setup(props, { emit }) {
-      const prefixCls = getPrefixCls('pagination-item');
-      const isActive = computed(() => props.current === props.pageNumber);
+  });
+
+  export interface PageItemProps {
+    pageNumber?: number;
+    current?: number;
+    disabled: boolean;
+    style?: CSSProperties;
+    activeStyle?: CSSProperties;
+  }
+
+  const props = withDefaults(defineProps<PageItemProps>(), {
+    disabled: false,
+  });
+
+  const emit = defineEmits<{
+    (e: 'click', value: number, event: MouseEvent): void;
+  }>();
 
   const handleClick = (e: MouseEvent) => {
     if (!props.disabled) {
-          emit('click', props.pageNumber, e);
+      emit('click', props.pageNumber as number, e);
     }
   };
 
+  const prefixCls = getPrefixCls('pagination-item');
+  const isActive = computed(() => props.current === props.pageNumber);
   const cls = computed(() => [
     prefixCls,
     {
-          [`${prefixCls}-active`]: isActive.value,
+      [`${prefixCls}-active`]: props.current === props.pageNumber,
     },
   ]);
 
   const mergedStyle = computed(() => {
     return isActive.value ? props.activeStyle : props.style;
   });
-
-      return {
-        prefixCls,
-        cls,
-        mergedStyle,
-        handleClick,
-      };
-    },
-  });
 </script>

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

@@ -22,51 +22,40 @@
   </span>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue';
+<script lang="ts" setup>
+  import { computed, nextTick, ref, watch } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import { getPrefixCls } from './utils';
 
-  export default defineComponent({
-    name: 'PageJumper',
-    props: {
-      current: {
-        type: Number,
-        required: true,
-      },
-      simple: {
-        type: Boolean,
-        default: false,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      pages: {
-        type: Number,
-        required: true,
-      },
-      size: {
-        type: String as PropType<'small' | 'mini' | 'medium' | 'large' | undefined>,
-      },
-      onChange: {
-        type: Function as PropType<(value: number) => void>,
-      },
-    },
-    emits: ['change'],
-    setup(props, { emit }) {
+  defineOptions({ name: 'PageJumper' });
+
+  export interface PageJumperProps {
+    current: number;
+    simple: boolean;
+    disabled: boolean;
+    pages: number;
+    size?: 'small' | 'mini' | 'medium' | 'large';
+    onChange?: (value: number) => void;
+  }
+
+  const props = withDefaults(defineProps<PageJumperProps>(), {
+    simple: false,
+    disabled: false,
+  });
+
+  const emit = defineEmits<{
+    (e: 'change', value: number): void;
+  }>();
+
   const prefixCls = getPrefixCls('pagination-jumper');
   const { t } = useI18n();
   const inputValue = ref(props.simple ? props.current : undefined);
-
   const handleFormatter = (value: number) => {
     const parseIntVal = parseInt(value.toString(), 10);
     return Number.isNaN(parseIntVal) ? undefined : String(parseIntVal);
   };
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const handleChange = (value: number | undefined) => {
-        emit('change', inputValue.value);
+  const handleChange = () => {
+    emit('change', inputValue.value as number);
     nextTick(() => {
       if (!props.simple) {
         inputValue.value = undefined;
@@ -89,15 +78,4 @@
       [`${prefixCls}-simple`]: props.simple,
     },
   ]);
-
-      return {
-        prefixCls,
-        cls,
-        t,
-        inputValue,
-        handleChange,
-        handleFormatter,
-      };
-    },
-  });
 </script>