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">
+<script lang="ts" setup>
-  import { computed, defineComponent } from 'vue';
+  import { computed } from 'vue';
   import { getPrefixCls, getLegalPage } from './utils';
   import MsIcon from '../ms-icon-font/index.vue';
 
-  export default defineComponent({
+  defineOptions({
-    name: 'EllipsisPager',
+    name: 'PageItemElipsis',
-    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');
-
-      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) => {
-        emit('click', nextPage.value);
-      };
-
-      const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
-
-      return {
-        prefixCls,
-        cls,
-        handleClick,
-      };
-    },
   });
+
+  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,
+    })
+  );
+  const handleClick = () => {
+    emit('click', nextPage.value);
+  };
+  const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);
 </script>

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

@@ -1,88 +1,68 @@
 <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-if="isNext" size="12px" type="icon-icon_right_outlined" />
-      <MsIcon v-else type="icon-icon_left_outlined" />
+      <MsIcon v-else size="12px" type="icon-icon_left_outlined" />
     </slot>
   </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent } from 'vue';
+  import { computed } from 'vue';
   import { getPrefixCls, getLegalPage } from './utils';
   import MsIcon from '../ms-icon-font/index.vue';
 
-  export default defineComponent({
+  defineOptions({
-    name: 'StepPager',
+    name: 'PageItemStep',
-    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 }) {
-      const prefixCls = getPrefixCls('pagination-item');
-      const isNext = props.type === 'next';
-      const mergedDisabled = computed(() => {
-        if (props.disabled) {
-          return props.disabled;
-        }
-        if (!props.pages) {
-          return true;
-        }
-        if (isNext && props.current === props.pages) {
-          return true;
-        }
-        return !isNext && props.current <= 1;
-      });
-      const nextPage = computed(() =>
-        getLegalPage(props.current + (isNext ? 1 : -1), {
-          min: 1,
-          max: props.pages,
-        })
-      );
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const handleClick = (e: MouseEvent) => {
-        if (!mergedDisabled.value) {
-          emit('click', nextPage.value);
-        }
-      };
-
-      const cls = computed(() => [
-        prefixCls,
-        `${prefixCls}-${props.type}`,
-        {
-          [`${prefixCls}-disabled`]: mergedDisabled.value,
-        },
-      ]);
-
-      return {
-        prefixCls,
-        cls,
-        isNext,
-        handleClick,
-      };
-    },
   });
+
+  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(() => {
+    if (props.disabled) {
+      return props.disabled;
+    }
+    if (!props.pages) {
+      return true;
+    }
+    if (isNext && props.current === props.pages) {
+      return true;
+    }
+    return !isNext && props.current <= 1;
+  });
+  const nextPage = computed(() =>
+    getLegalPage(props.current + (isNext ? 1 : -1), {
+      min: 1,
+      max: props.pages,
+    })
+  );
+
+  const handleClick = () => {
+    if (!mergedDisabled.value) {
+      emit('click', nextPage.value);
+    }
+  };
+
+  const cls = computed(() => [
+    prefixCls,
+    `${prefixCls}-${props.type}`,
+    {
+      [`${prefixCls}-disabled`]: mergedDisabled.value,
+    },
+  ]);
 </script>

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

@@ -6,59 +6,47 @@
   </li>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import type { PropType, CSSProperties } from 'vue';
+  import type { CSSProperties } from 'vue';
-  import { computed, defineComponent } from 'vue';
+  import { computed } from 'vue';
   import { getPrefixCls } from './utils';
 
-  export default defineComponent({
+  defineOptions({
     name: 'Pager',
-    props: {
+  });
-      pageNumber: {
+
-        type: Number,
+  export interface PageItemProps {
-      },
+    pageNumber?: number;
-      current: {
+    current?: number;
-        type: Number,
+    disabled: boolean;
-      },
+    style?: CSSProperties;
-      disabled: {
+    activeStyle?: CSSProperties;
-        type: Boolean,
+  }
-        default: false,
+
-      },
+  const props = withDefaults(defineProps<PageItemProps>(), {
-      style: {
+    disabled: false,
-        type: Object as PropType<CSSProperties>,
+  });
-      },
+
-      activeStyle: {
+  const emit = defineEmits<{
-        type: Object as PropType<CSSProperties>,
+    (e: 'click', value: number, event: MouseEvent): void;
-      },
+  }>();
+
+  const handleClick = (e: MouseEvent) => {
+    if (!props.disabled) {
+      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`]: props.current === props.pageNumber,
     },
-    emits: ['click'],
+  ]);
-    setup(props, { emit }) {
-      const prefixCls = getPrefixCls('pagination-item');
-      const isActive = computed(() => props.current === props.pageNumber);
 
-      const handleClick = (e: MouseEvent) => {
+  const mergedStyle = computed(() => {
-        if (!props.disabled) {
+    return isActive.value ? props.activeStyle : props.style;
-          emit('click', props.pageNumber, e);
-        }
-      };
-
-      const cls = computed(() => [
-        prefixCls,
-        {
-          [`${prefixCls}-active`]: isActive.value,
-        },
-      ]);
-
-      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,82 +22,60 @@
   </span>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue';
+  import { computed, nextTick, ref, watch } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import { getPrefixCls } from './utils';
 
-  export default defineComponent({
+  defineOptions({ name: 'PageJumper' });
-    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 }) {
-      const prefixCls = getPrefixCls('pagination-jumper');
-      const { t } = useI18n();
-      const inputValue = ref(props.simple ? props.current : undefined);
 
-      const handleFormatter = (value: number) => {
+  export interface PageJumperProps {
-        const parseIntVal = parseInt(value.toString(), 10);
+    current: number;
-        return Number.isNaN(parseIntVal) ? undefined : String(parseIntVal);
+    simple: boolean;
-      };
+    disabled: boolean;
+    pages: number;
+    size?: 'small' | 'mini' | 'medium' | 'large';
+    onChange?: (value: number) => void;
+  }
 
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const props = withDefaults(defineProps<PageJumperProps>(), {
-      const handleChange = (value: number | undefined) => {
+    simple: false,
-        emit('change', inputValue.value);
+    disabled: false,
-        nextTick(() => {
-          if (!props.simple) {
-            inputValue.value = undefined;
-          }
-        });
-      };
-
-      watch(
-        () => props.current,
-        (value) => {
-          if (props.simple && value !== inputValue.value) {
-            inputValue.value = value;
-          }
-        }
-      );
-
-      const cls = computed(() => [
-        prefixCls,
-        {
-          [`${prefixCls}-simple`]: props.simple,
-        },
-      ]);
-
-      return {
-        prefixCls,
-        cls,
-        t,
-        inputValue,
-        handleChange,
-        handleFormatter,
-      };
-    },
   });
+
+  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);
+  };
+  const handleChange = () => {
+    emit('change', inputValue.value as number);
+    nextTick(() => {
+      if (!props.simple) {
+        inputValue.value = undefined;
+      }
+    });
+  };
+
+  watch(
+    () => props.current,
+    (value) => {
+      if (props.simple && value !== inputValue.value) {
+        inputValue.value = value;
+      }
+    }
+  );
+
+  const cls = computed(() => [
+    prefixCls,
+    {
+      [`${prefixCls}-simple`]: props.simple,
+    },
+  ]);
 </script>