feat: 缓存页面分页条数 (#2337)

Refs #2159 #1765

frontend/src/components/backup/index.vue

@@ -63,6 +63,7 @@ const loading = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'backup-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/components/complex-table/index.vue

@@ -32,7 +32,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { GlobalStore } from '@/store';
 
 defineOptions({ name: 'ComplexTable' });
@@ -60,6 +60,7 @@ function currentChange() {
 
 function sizeChange() {
     props.paginationConfig.currentPage = 1;
+    localStorage.setItem(props.paginationConfig.cacheSizeKey, props.paginationConfig.pageSize);
     emit('search');
 }
 
@@ -78,6 +79,13 @@ defineExpose({
     clearSelects,
     sort,
 });
+
+onMounted(() => {
+    let itemSize = Number(localStorage.getItem(props.paginationConfig.cacheSizeKey));
+    if (itemSize) {
+        props.paginationConfig.pageSize = itemSize;
+    }
+});
 </script>
 
 <style lang="scss">

frontend/src/components/upload/index.vue

@@ -100,6 +100,7 @@ const baseDir = ref();
 const data = ref();
 const title = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'upload-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/app-store/apps/index.vue

@@ -155,6 +155,7 @@ const mobile = computed(() => {
 const language = useI18n().locale.value;
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'app-page-size',
     currentPage: 1,
     pageSize: 60,
     total: 0,

frontend/src/views/app-store/installed/index.vue

@@ -295,6 +295,7 @@ const loading = ref(false);
 const syncLoading = ref(false);
 let timer: NodeJS.Timer | null = null;
 const paginationConfig = reactive({
+    cacheSizeKey: 'app-installed-page-size',
     currentPage: 1,
     pageSize: 20,
     total: 0,

frontend/src/views/container/compose/detail/index.vue

@@ -154,6 +154,7 @@ const acceptParams = (props: DialogProps): void => {
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/compose/index.vue

@@ -112,6 +112,7 @@ const isOnDetail = ref(false);
 const baseDir = ref();
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-compose-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/container/index.vue

@@ -220,6 +220,7 @@ const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/image/index.vue

@@ -121,6 +121,7 @@ const loading = ref(false);
 const data = ref();
 const repos = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-image-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/network/index.vue

@@ -118,6 +118,7 @@ const codemirror = ref();
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-network-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/repo/index.vue

@@ -89,6 +89,7 @@ const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'image-repo-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/template/index.vue

@@ -80,6 +80,7 @@ const data = ref();
 const selects = ref<any>([]);
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'compose-template-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/container/volume/index.vue

@@ -120,6 +120,7 @@ const codemirror = ref();
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'container-volume-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/cronjob/index.vue

@@ -183,6 +183,7 @@ const isRecordShow = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'cronjob-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/cronjob/record/index.vue

@@ -412,6 +412,11 @@ const delLoading = ref();
 const cleanData = ref();
 
 const acceptParams = async (params: DialogProps): Promise<void> => {
+    let itemSize = Number(localStorage.getItem(searchInfo.cacheSizeKey));
+    if (itemSize) {
+        searchInfo.pageSize = itemSize;
+    }
+
     recordShow.value = true;
     dialogData.value = params;
     if (dialogData.value.rowData.type === 'database') {
@@ -442,6 +447,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
 
 const handleSizeChange = (val: number) => {
     searchInfo.pageSize = val;
+    localStorage.setItem(searchInfo.cacheSizeKey, val + '');
     search();
 };
 const handleCurrentChange = (val: number) => {
@@ -509,6 +515,7 @@ const timeRangeLoad = ref<[Date, Date]>([
     new Date(new Date().setHours(23, 59, 59, 999)),
 ]);
 const searchInfo = reactive({
+    cacheSizeKey: 'cronjob-record-page-size',
     page: 1,
     pageSize: 8,
     recordTotal: 0,

frontend/src/views/database/mysql/index.vue

@@ -267,6 +267,7 @@ const dialogPortJumpRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'mysql-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/database/mysql/remote/index.vue

@@ -106,6 +106,7 @@ const dialogRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'mysql-remote-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/database/redis/setting/persistence/index.vue

@@ -158,6 +158,7 @@ const selects = ref<any>([]);
 const currentRow = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'redis-backup-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/host/file-management/index.vue

@@ -276,6 +276,7 @@ const deleteRef = ref();
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'file-page-size',
     currentPage: 1,
     pageSize: 100,
     total: 0,

frontend/src/views/host/firewall/ip/index.vue

@@ -155,6 +155,7 @@ const fireStatuRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'firewall-ip-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/host/firewall/port/index.vue

@@ -194,6 +194,7 @@ const fireStatuRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'firewall-port-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/host/ssh/log/log.vue

@@ -93,6 +93,7 @@ import i18n from '@/lang';
 const loading = ref();
 const data = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'ssh-log-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,
@@ -118,7 +119,7 @@ function select2address(): string {
 const onDeny = async () => {
     let address = select2address();
     if (!address) return;
-    await operateIPRule({ operation: 'add', address: address, strategy: 'drop' }).then(() => {
+    await operateIPRule({ operation: 'add', address: address, strategy: 'drop', description: '' }).then(() => {
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         search();
     });

frontend/src/views/host/terminal/command/index.vue

@@ -90,6 +90,7 @@ const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'terminal-command-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/host/terminal/host/index.vue

@@ -93,6 +93,7 @@ const data = ref();
 const groupList = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'terminal-host-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/log/login/index.vue

@@ -92,6 +92,7 @@ const loading = ref();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'login-log-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/log/operation/index.vue

@@ -122,6 +122,7 @@ const loading = ref();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'operation-log-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/setting/snapshot/index.vue

@@ -164,6 +164,7 @@ const loading = ref(false);
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
+    cacheSizeKey: 'snapshot-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/website/runtime/index.vue

@@ -80,6 +80,7 @@ import i18n from '@/lang';
 import { useDeleteData } from '@/hooks/use-delete-data';
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'runtime-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/website/ssl/acme-account/index.vue

@@ -35,6 +35,7 @@ let loading = ref(false);
 let data = ref();
 let createRef = ref();
 const paginationConfig = reactive({
+    cacheSizeKey: 'acme-account-page-size',
     currentPage: 1,
     pageSize: 20,
     total: 0,

frontend/src/views/website/ssl/dns-account/index.vue

@@ -38,6 +38,7 @@ import i18n from '@/lang';
 import { useDeleteData } from '@/hooks/use-delete-data';
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'dns-account-page-size',
     currentPage: 1,
     pageSize: 20,
     total: 0,

frontend/src/views/website/ssl/index.vue

@@ -100,6 +100,7 @@ import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'ssl-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,

frontend/src/views/website/website/index.vue

@@ -246,6 +246,7 @@ let dateRefs: Map<number, any> = new Map();
 let groups = ref<Group.GroupInfo[]>([]);
 
 const paginationConfig = reactive({
+    cacheSizeKey: 'website-page-size',
     currentPage: 1,
     pageSize: 10,
     total: 0,