diff --git a/src/views/documents/List.vue b/src/views/documents/List.vue
index d682c01..4ddf434 100644
--- a/src/views/documents/List.vue
+++ b/src/views/documents/List.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>{{ documents }}</div>
   <div v-if="loading">
     <v-row justify="center">
       <v-col cols="12" md="4" xl="2" v-for="n in 3" :key="n">
-        <v-skeleton-loader v-for="n in 2" :key="n"
+        <v-skeleton-loader
+          v-for="n in 2"
+          :key="n"
           class="mx-auto border mt-3"
           max-width="300"
           type="image, article"
@@ -11,12 +12,50 @@
       </v-col>
     </v-row>
   </div>
+  <div v-else>
+    <v-row>
+      <v-col cols="12" md="4" xl="2" v-for="document in documents.Data" :key="document.id">
+        <v-card class="mt-3">
+      <v-card-title>{{ document.Title }}</v-card-title>
+      <v-card-subtitle>{{
+        document.Chunked ? "分块的文档" : "还没有处理"
+      }}</v-card-subtitle>
+      <v-card-subtitle>
+        {{ new Date(document.CreatedAt).toLocaleString() }}
+      </v-card-subtitle>
+      <v-card-text>{{ document.content }}</v-card-text>
+      <v-card-actions>
+        <v-btn text color="primary">详情</v-btn>
+        <v-btn text color="secondary">编辑</v-btn>
+      </v-card-actions>
+    </v-card>
+      </v-col>
+    </v-row>
+    
+  </div>
   <div v-if="documents.Total == 0">
     <v-alert text="看样子你还没有创建任何文档。"></v-alert>
   </div>
 
-  <v-btn class="mt-3" @click="goto_create_document">创建</v-btn>
+  <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="documents.Total"
+              :disabled="loading"
+              @update:model-value="load"
+            ></v-pagination>
+          </v-container>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 
+  <v-btn class="mt-3" @click="goto_create_document">创建</v-btn>
 </template>
 
 <script setup>
@@ -45,14 +84,12 @@ function load() {
 load();
 console.log(libraryId);
 
-
 function goto_create_document() {
   router.push({
     name: "library.documents.create",
     params: {
-      LibraryId: libraryId
-    }
-  })
+      LibraryId: libraryId,
+    },
+  });
 }
-
 </script>
diff --git a/src/views/libraries/List.vue b/src/views/libraries/List.vue
index 103655f..fa4dcd4 100644
--- a/src/views/libraries/List.vue
+++ b/src/views/libraries/List.vue
@@ -1,85 +1,89 @@
 <template>
   <div>
     <LoadingComponent v-if="loading"> </LoadingComponent>
-  <div v-else>
-    <h1>资料库</h1>
+    <div v-else>
+      <h1>资料库</h1>
 
-    <!-- <div>
+      <!-- <div>
       {{ selected_ids }}
     </div> -->
 
-    <v-btn @click="selectAll" :color="selected_ids.length > 0 ? 'primary' : ''"
-      >全选</v-btn
-    >
+      <v-btn
+        @click="selectAll"
+        :color="selected_ids.length > 0 ? 'primary' : ''"
+        >全选</v-btn
+      >
 
-    <v-btn
-      class="ml-2"
-      :disabled="selected_ids.length === 0"
-      :loading="is_deleting"
-      >删除所选
+      <v-btn
+        class="ml-2"
+        :disabled="selected_ids.length === 0"
+        :loading="is_deleting"
+        >删除所选
 
-      <v-dialog v-model="show_dialog" activator="parent" width="auto">
-        <v-card>
-          <v-card-text v-text="is_deleting ? '正在为你准备新项目。' : '确认删除所选项?'"></v-card-text>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              @click="deleteSelected"
-              :loading="is_deleting"
-              >确认删除</v-btn
-            >
-            <v-btn @click="show_dialog = false">取消</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-btn>
-    <v-card class="mt-3">
-      <v-list>
-        <v-list-item
-          v-for="item in libraries.Data"
-          :key="item.ID"
-          @click.stop="goto(item.ID)"
-        >
-          <template v-slot:prepend="{ isActive }">
-            <v-list-item-action start>
-              <v-checkbox-btn
-                :model-value="isSelected(item.ID)"
-                @click.stop="toggleSelection(item.ID)"
-              ></v-checkbox-btn>
-            </v-list-item-action>
-          </template>
+        <v-dialog v-model="show_dialog" activator="parent" width="auto">
+          <v-card>
+            <v-card-text
+              v-text="is_deleting ? '正在为你准备新项目。' : '确认删除所选项?'"
+            ></v-card-text>
+            <v-card-actions>
+              <v-btn
+                color="primary"
+                @click="deleteSelected"
+                :loading="is_deleting"
+                >确认删除</v-btn
+              >
+              <v-btn @click="show_dialog = false">取消</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-btn>
+      <v-card class="mt-3">
+        <v-list>
+          <v-list-item
+            v-for="item in libraries.Data"
+            :key="item.ID"
+            @click.stop="goto(item.ID)"
+          >
+            <template v-slot:prepend="{ isActive }">
+              <v-list-item-action start>
+                <v-checkbox-btn
+                  :model-value="isSelected(item.ID)"
+                  @click.stop="toggleSelection(item.ID)"
+                ></v-checkbox-btn>
+              </v-list-item-action>
+            </template>
 
-          <template v-slot:append="{ isActive }">
-            <v-list-item-action end>
-              <v-btn rounded="xl" @click.stop="console.log(isActive)">
-                <v-icon>mdi-check</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </template>
+            <template v-slot:append="{ isActive }">
+              <v-list-item-action end>
+                <v-btn rounded="xl" @click.stop="console.log(isActive)">
+                  <v-icon>mdi-check</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </template>
 
-          <v-list-item-title>{{ item.Name }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card>
-  </div>
+            <v-list-item-title>{{ item.Name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </div>
 
-  <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>
+    <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>
   </div>
 </template>
 
@@ -123,9 +127,9 @@ const goto = (libraryId) => {
   router.push({
     name: "library.documents",
     params: {
-      LibraryId: libraryId
-    }
-  })
+      LibraryId: libraryId,
+    },
+  });
 };
 
 function isSelected(id) {
@@ -179,7 +183,7 @@ function deleteSelected() {
         page.value = page.value - 1;
       }
       if (page.value == 0) {
-        page.value = 1
+        page.value = 1;
       }
 
       load(false);