改进

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>
+  <LoadingComponent v-if="loading"> </LoadingComponent>
   <v-container v-else>
     <h1>资料库</h1>
 
-    {{ selected_ids }}
+    <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,25 +37,28 @@
       </v-list>
     </v-card>
 
-    <div class="text-center">
-    <v-container>
-      <v-row justify="center">
-        <v-col cols="8">
-          <v-container class="max-width">
-            <v-pagination
-              v-model="page"
-              class="my-4"
-              :length="libraries.Total"
-            ></v-pagination>
-          </v-container>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-  
+   
   </v-container>
 
-  
+  <div class="text-center">
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="8">
+            <v-container class="max-width">
+              <v-pagination
+                v-model="page"
+                class="my-4"
+                :length="libraries.Total"
+                :disabled="loading"
+                @update:model-value="load"
+              ></v-pagination>
+            </v-container>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+
+
 </template>
 
 <script setup>
@@ -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
-  library.librariesGet(page.value).then((r) => {
-    libraries.value = r.data;
-    console.log(r.data.Data);
-  }).finally(() => {
-    loading.value = false
-  })
+  loading.value = true;
+  library
+    .librariesGet(page.value)
+    .then((r) => {
+      libraries.value = r.data;
+      console.log(r.data.Data);
+    })
+    .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>