改进

src/components/Loading.vue

@@ -3,7 +3,7 @@
     class="d-flex text-center"
     style="
       width: 100%;
-      height: 100%;
+      height: 50%;
       justify-content: center;
       align-items: center;
     "

src/views/libraries/List.vue

@@ -1,13 +1,14 @@
 <template>
-  <LoadingComponent v-if="loading">
+  <LoadingComponent v-if="loading"> </LoadingComponent>
-
-  </LoadingComponent>
   <v-container v-else>
     <h1>资料库</h1>
 
+    <div>
       {{ selected_ids }}
+    </div>
 
-    <v-card>
+    <v-btn @click="selectAll">全选</v-btn>
+    <v-card class="mt-3">
       <v-list>
         <v-list-item
           v-for="item in libraries.Data"
@@ -36,6 +37,9 @@
       </v-list>
     </v-card>
 
+   
+  </v-container>
+
   <div class="text-center">
       <v-container>
         <v-row justify="center">
@@ -45,6 +49,8 @@
                 v-model="page"
                 class="my-4"
                 :length="libraries.Total"
+                :disabled="loading"
+                @update:model-value="load"
               ></v-pagination>
             </v-container>
           </v-col>
@@ -52,8 +58,6 @@
       </v-container>
     </div>
 
-  </v-container>
-
 
 </template>
 
@@ -62,19 +66,22 @@ import { library } from "@/plugins/api";
 import { ref } from "vue";
 import LoadingComponent from "@/components/Loading.vue";
 
-const loading = ref(false)
+const loading = ref(false);
 
 const page = ref(1);
 const libraries = ref({});
 
 const load = () => {
-  loading.value = true
+  loading.value = true;
-  library.librariesGet(page.value).then((r) => {
+  library
+    .librariesGet(page.value)
+    .then((r) => {
       libraries.value = r.data;
       console.log(r.data.Data);
-  }).finally(() => {
-    loading.value = false
     })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 load();
@@ -85,7 +92,6 @@ const goto = (libraryId) => {
 
 const selected_ids = ref([]);
 
-
 function isSelected(id) {
   return this.selected_ids.includes(id);
 }
@@ -100,4 +106,20 @@ function toggleSelection(id) {
     this.selected_ids.push(id);
   }
 }
+
+/**
+ * Selects all items if none are selected, otherwise clears the selection.
+ *
+ * @return {void} 
+ */
+function selectAll() {
+  if (selected_ids.value.length > 0) {
+    selected_ids.value = [];
+  } else {
+    const data = libraries.value.Data;
+    if (data.length > 0) {
+      data.forEach((item) => selected_ids.value.push(item.ID));
+    }
+  }
+}
 </script>