feat: 添加默认分页数量偏好设置.

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

@@ -2,7 +2,9 @@
   <div class="block">
     <h5 class="title">{{ title }}</h5>
     <template v-for="option in options" :key="option.name">
-      <div class="option-wrapper" v-permission="option.permission || []">
+      <div class="option-wrapper"
+           v-permission="option.permission || []"
+           :style="{ 'margin': option.margin || '' }">
         <!-- 偏好项 -->
         <span>{{ option.name }}</span>
         <!-- 偏好值 -->
@@ -19,6 +21,7 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
+  import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
   import { useAppStore } from '@/store';
   import FormWrapper from './form-wrapper.vue';
   import { updatePreferencePartial } from '@/api/user/preference';
@@ -30,7 +33,8 @@
     type?: string;
     permission?: string[];
     defaultVal?: boolean | string | number;
-    options?: Array<RadioOption>;
+    options?: Array<RadioOption | SelectOption>;
+    margin?: string;
   }
 
   defineProps({

orion-ops-ui/src/components/app/setting/form-wrapper.vue

@@ -3,6 +3,7 @@
   <a-input-number v-if="type === 'number'"
                   :style="{ width: '80px' }"
                   size="small"
+                  :precision="0"
                   :default-value="defaultValue as number"
                   @change="handleChange"
                   hide-button />
@@ -15,15 +16,23 @@
   <!-- 单选按钮 -->
   <a-radio-group v-else-if="type === 'radio-group'"
                  type="button"
-                 size="mini"
+                 size="small"
                  :default-value="defaultValue"
-                 :options="options"
+                 :options="options as Array<RadioOption>"
                  @change="handleChange" />
+  <!-- 选择框 -->
+  <a-select v-else-if="type === 'select'"
+            size="small"
+            style="width: 128px;"
+            :default-value="defaultValue"
+            :options="options as Array<SelectOption>"
+            @change="handleChange" />
 </template>
 
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
+  import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
 
   const props = defineProps({
     type: {
@@ -39,7 +48,7 @@
       default: '',
     },
     options: {
-      type: Array as PropType<Array<RadioOption>>,
+      type: Array as PropType<Array<RadioOption | SelectOption>>,
       default: []
     }
   });

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

@@ -12,7 +12,11 @@
             :footer="false"
             :unmount-on-close="true"
             @cancel="() => setVisible(false)">
+    <!-- 布局设置 -->
     <Block :options="layoutOpts" title="布局设置" />
+    <!-- 数据设置 -->
+    <Block :options="dataOpts" title="数据设置" />
+    <!-- 页面视图 -->
     <Block :options="viewsOpts" title="页面视图" />
   </a-drawer>
 </template>
@@ -22,6 +26,8 @@
   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';
 
   const appStore = useAppStore();
   const { visible, setVisible } = useVisible();
@@ -72,12 +78,43 @@
     },
   ]);
 
+  // 布局设置
+  const dataOpts = computed(() => [
+    {
+      name: '表格默认页数',
+      key: 'defaultPageSize',
+      type: 'select',
+      margin: '0 0 4px 0',
+      defaultVal: appStore.defaultPageSize,
+      options: (useTablePagination().pageSizeOptions || []).map(s => {
+        return {
+          value: s,
+          label: `${s} 条/页`
+        };
+      })
+    },
+    {
+      name: '卡片默认页数',
+      key: 'defaultCardSize',
+      type: 'select',
+      defaultVal: appStore.defaultCardSize,
+      options: (useCardPagination().pageSizeOptions || []).map(s => {
+        return {
+          value: s,
+          label: `${s} 条/页`
+        };
+      })
+    },
+  ]);
+
+
   // 页面视图配置
   const viewsOpts = computed(() => [
     {
       name: '主机列表',
       key: 'hostView',
       type: 'radio-group',
+      margin: '0 0 4px 0',
       permission: ['asset:host:query'],
       defaultVal: appStore.hostView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
@@ -86,6 +123,7 @@
       name: '主机秘钥',
       key: 'hostKeyView',
       type: 'radio-group',
+      margin: '0 0 4px 0',
       permission: ['asset:host-key:query'],
       defaultVal: appStore.hostKeyView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
@@ -94,6 +132,7 @@
       name: '主机身份',
       key: 'hostIdentityView',
       type: 'radio-group',
+      margin: '0 0 4px 0',
       permission: ['asset:host-identity:query'],
       defaultVal: appStore.hostIdentityView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]

orion-ops-ui/src/components/view/card-list/index.vue

@@ -437,7 +437,6 @@
   }
 
   .filter-bottom-container {
-    padding-top: 14px;
     display: flex;
     justify-content: flex-end;
   }