review: 重构代码.

orion-ops-ui/src/components/app/setting/index.vue

@@ -26,8 +26,7 @@
   import { useAppStore } from '@/store';
   import Block from './block.vue';
   import useVisible from '@/hooks/visible';
-  import { usePagination as useTablePagination } from '@/types/table';
-  import { usePagination as useCardPagination } from '@/types/card';
+  import { CardPageSizeOptions, TablePageSizeOptions } from '@/types/const';
 
   const appStore = useAppStore();
   const { visible, setVisible } = useVisible();
@@ -82,11 +81,11 @@
   const dataOpts = computed(() => [
     {
       name: '表格默认页数',
-      key: 'defaultPageSize',
+      key: 'defaultTablePageSize',
       type: 'select',
       margin: '0 0 4px 0',
-      defaultVal: appStore.defaultPageSize,
-      options: (useTablePagination().pageSizeOptions || []).map(s => {
+      defaultVal: appStore.defaultTablePageSize,
+      options: TablePageSizeOptions.map(s => {
         return {
           value: s,
           label: `${s} 条/页`
@@ -95,10 +94,10 @@
     },
     {
       name: '卡片默认页数',
-      key: 'defaultCardSize',
+      key: 'defaultCardPageSize',
       type: 'select',
-      defaultVal: appStore.defaultCardSize,
-      options: (useCardPagination().pageSizeOptions || []).map(s => {
+      defaultVal: appStore.defaultCardPageSize,
+      options: CardPageSizeOptions.map(s => {
         return {
           value: s,
           label: `${s} 条/页`

orion-ops-ui/src/store/modules/app/index.ts

@@ -1,5 +1,6 @@
 import type { AppState } from './types';
 import { defineStore } from 'pinia';
+import { CardPageSizeOptions, TablePageSizeOptions } from '@/types/const';
 
 const defaultConfig: AppState = {
   // 应用设置
@@ -16,8 +17,8 @@ const defaultConfig: AppState = {
   menuWidth: 220,
   colorWeak: false,
   // 用户偏好-数据设置
-  defaultPageSize: 10,
-  defaultCardSize: 12,
+  defaultTablePageSize: TablePageSizeOptions[0],
+  defaultCardPageSize: CardPageSizeOptions[0],
   // 用户偏好-页面视图
   hostView: 'table',
   hostKeyView: 'table',

orion-ops-ui/src/store/modules/app/types.ts

@@ -36,8 +36,8 @@ export interface UserPreferenceLayout {
  * 用户偏好 - 数据设置
  */
 export interface UserPreferenceData {
-  defaultPageSize: number;
-  defaultCardSize: number;
+  defaultTablePageSize: number;
+  defaultCardPageSize: number;
 }
 
 /**

orion-ops-ui/src/types/card.ts

@@ -3,6 +3,7 @@ import type { VNodeChild } from 'vue';
 import { reactive } from 'vue';
 import { useAppStore } from '@/store';
 import { isNumber } from '@/utils/is';
+import { CardPageSizeOptions } from '@/types/const';
 
 /**
  * 字段对齐方式
@@ -110,9 +111,9 @@ export const usePagination = (): PaginationProps => {
   return reactive({
     total: 0,
     current: 1,
-    pageSize: isNumber(appStore.defaultCardSize) ? appStore.defaultCardSize : 12,
+    pageSize: isNumber(appStore.defaultCardPageSize) ? appStore.defaultCardPageSize : CardPageSizeOptions[0],
     showTotal: true,
     showPageSize: true,
-    pageSizeOptions: [12, 18, 36, 48, 96]
+    pageSizeOptions: CardPageSizeOptions
   });
 };

orion-ops-ui/src/types/const.ts

@@ -1,2 +1,8 @@
 // 管理员角色编码
 export const AdminRoleCode = 'admin';
+
+// 表格视图分页数配置
+export const TablePageSizeOptions = [10, 20, 30, 50, 100];
+
+// 卡片视图分页数配置
+export const CardPageSizeOptions = [12, 18, 36, 48, 96];

orion-ops-ui/src/types/table.ts

@@ -2,6 +2,7 @@ import type { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
 import { reactive } from 'vue';
 import { useAppStore } from '@/store';
 import { isNumber } from '@/utils/is';
+import { TablePageSizeOptions } from '@/types/const';
 
 /**
  * 创建列表分页
@@ -11,10 +12,10 @@ export const usePagination = (): PaginationProps => {
   return reactive({
     total: 0,
     current: 1,
-    pageSize: isNumber(appStore.defaultPageSize) ? appStore.defaultPageSize : 12,
+    pageSize: isNumber(appStore.defaultTablePageSize) ? appStore.defaultTablePageSize : TablePageSizeOptions[0],
     showTotal: true,
     showPageSize: true,
-    pageSizeOptions: [10, 20, 30, 50, 100]
+    pageSizeOptions: TablePageSizeOptions
   });
 };