改进

src/views/documents/List.vue

@@ -1,29 +1,56 @@
 <template>
   <div>{{ documents }}</div>
+  <div>
+    <v-row >
+      <v-col cols="6" md="4">
+        <v-skeleton-loader
+          class="mx-auto border"
+          max-width="300"
+          type="image, article"
+        ></v-skeleton-loader>
+      </v-col>
+
+      <v-col cols="6" md="4">
+        <v-skeleton-loader
+          class="mx-auto border"
+          max-width="300"
+          type="image, article"
+        ></v-skeleton-loader>
+      </v-col>
+      <v-col cols="6" md="4">
+        <v-skeleton-loader
+          class="mx-auto border"
+          max-width="300"
+          type="image, article"
+        ></v-skeleton-loader>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script setup>
-import { document } from '@/plugins/api';
-import router from '@/router';
-import {ref} from 'vue'
+import { document } from "@/plugins/api";
+import router from "@/router";
+import { ref } from "vue";
 
-const libraryId = router.currentRoute.value.params.LibraryId
-const page = ref(1)
-const documents = ref([])
-const loading = ref(false)
+const libraryId = router.currentRoute.value.params.LibraryId;
+const page = ref(1);
+const documents = ref([]);
+const loading = ref(false);
 
 function load() {
-  loading.value = true
+  loading.value = true;
 
-  document.libraryLibraryIdDocumentsGet(libraryId, page.value).then((r) => {
-    documents.value = r.data
-  }).finally(() => {
-    loading.value = false
-  })
+  document
+    .libraryLibraryIdDocumentsGet(libraryId, page.value)
+    .then((r) => {
+      documents.value = r.data;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
-load()
-console.log(libraryId)
-
-
+load();
+console.log(libraryId);
 </script>