diff --git a/components/i/library/collect.vue b/components/i/library/collect.vue
index 2eb1b15e5c487bba309191203514527f1845ee71..d8038498240a88932b9946eaaf86e611368bb7a9 100644
--- a/components/i/library/collect.vue
+++ b/components/i/library/collect.vue
@@ -2,7 +2,7 @@
     <ULink to="/library/123">
         <UCard :ui="cardUI">
             <div class="flex flex-col gap-1">
-                <div>前端开发</div>
+                <div>{{item.name}}</div>
                 <div class="flex">
                     <div class="flex items-center text-gray-500 text-sm gap-0.5">
                         <UIcon name="i-heroicons-square-3-stack-3d" />
@@ -14,6 +14,12 @@
     </ULink>
 </template>
 <script setup>
+defineProps({
+    item: {
+        type: Object,
+        default: (() => {})()
+    }
+})
 const cardUI = {
     body: {
         padding: 'sm:p-3 p-3',
diff --git a/pages/library/index.vue b/pages/library/index.vue
index 62318fa20ff5b0ad5219b28991bafea5c292f269..eef08a51ad3553e3d7ba510887c46b88ab6aa03a 100644
--- a/pages/library/index.vue
+++ b/pages/library/index.vue
@@ -25,8 +25,10 @@
                         />
                     </div>
                     <div class="flex flex-col gap-4 mt-4">
-                        <ILibraryCollect />
-                        <ILibraryCollect />
+                        <ILibraryCollect
+                            v-for="item in collection"
+                            :item="item"
+                        />
                     </div>
                 </div>
             </div>
@@ -35,8 +37,17 @@
 </template>
 <script setup>
 const { $openLibraryCreate } = useLibraryStore()
+const { getCollection } = useCollectionRequest()
+
 function handleOpenCreateLibrary () {
     $openLibraryCreate()
 }
-
+// 合集列表
+const collection = ref([])
+async function getCollectionData () {
+    collection.value = await getCollection()    
+}
+nextTick(() => {
+    getCollectionData()
+})
 </script>