fix: 收藏问题

components/i/library/select.vue

@@ -13,7 +13,6 @@
                 </div>
             </template>
             <div class="flex flex-col gap-4">
-                {{ collection }}
                 <UButton
                     leading-icon="i-heroicons-plus-20-solid"
                     label="创建新集合"
@@ -21,36 +20,39 @@
                     @click="handleOpenCreate"
                 />
                 <div class="flex flex-col gap-2">
-                    <UButton color="white" size="md" class="flex">
+                    <UButton 
+                        v-for="item in collection"
+                        color="white" 
+                        size="md" 
+                        class="flex" 
+                        :key="item.id"
+                        @click="handleSelected(item.id)"
+                    >
                         <div class="flex flex-grow justify-between items-center">
-                            <div>前端开发</div>
-                            <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
-                        </div>
-                    </UButton>
-                    <UButton color="white" size="md" class="flex">
-                        <div class="flex flex-grow justify-between items-center">
-                            <div>后端开发</div>
+                            <div>{{item.name}}</div>
+                            <UIcon v-if="selectedCollection.includes(item.id)" name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
                         </div>
                     </UButton>
                 </div>
             </div>
-            <template #footer>
+            <!-- <template #footer>
                 <div class="flex justify-end">
                     <UButton
                         size="md"
                         label="保存"
                     />
                 </div>
-            </template>
+            </template> -->
         </UCard>
     </UModal>
 </template>
 <script setup>
-const { $isLibrarySelectOpen } = storeToRefs(useLibraryStore())
-const { $openLibrarySelect, $closeLibrarySelect, $openLibraryCreate } = useLibraryStore()
-const { getCollection } = useCollectionRequest()
-// 收藏夹数据
+const { $isLibrarySelectOpen, $selectCollectionId, $selectThreadId } = storeToRefs(useLibraryStore())
+const { $openLibrarySelect, $closeLibrarySelect, $openLibraryCreate, $setSelectCollectionId } = useLibraryStore()
+const { getCollection, saveCollection } = useCollectionRequest()
+// 合集列表
 const collection = ref([])
+const selectedCollection = ref([])
 function handleClose () {
     $closeLibrarySelect()
 }
@@ -62,10 +64,20 @@ function handleOpenCreate () {
     $openLibraryCreate()
 }
 async function getCollectionData () {
-    collection.value = await getCollection()
-    
+    collection.value = await getCollection()    
+}
+async function handleSelected(id) {
+    selectedCollection.value = [id]
+    $setSelectCollectionId(selectedCollection.value)
+    const { error } = await saveCollection({ collection_id: id, c_id: $selectThreadId.value })
+    if (error.value) {
+        selectedCollection.value = []
+        return
+    }
+    handleClose()
 }
 watch(() => $isLibrarySelectOpen.value, () => {
+    selectedCollection.value = $selectCollectionId.value
     getCollectionData()
 })
 </script>

components/i/search/Header.vue

@@ -17,7 +17,7 @@
                     color="gray"
                     variant="ghost"
                     leading-icon="i-heroicons-plus-20-solid"
-                    label="收藏"
+                    :label="$selectCollectionId.length > 0 ? '已收藏' : '收藏'"
                     @click="handleOpenSelect"
                 />
             </div>
@@ -79,7 +79,10 @@
 <script setup>
 const toast = useToast()
 const route = useRoute()
-const { $openLibraryCreate, $openLibrarySelect } = useLibraryStore()
+const { $isSignIn } = storeToRefs(useUserStore())
+const { $selectCollectionId } = storeToRefs(useLibraryStore())
+const { $openLibraryCreate, $openLibrarySelect, $setSelectCollectionId } = useLibraryStore()
+const { findRecordCollection } = useCollectionRequest()
 const props = defineProps({
     query: String,
     isPublic: {
@@ -134,6 +137,18 @@ async function handleSetOpenState() {
 function handleOpenSelect () {
     $openLibrarySelect(route.params.id)
 }
+async function initData () {
+    const { data, error } = await findRecordCollection(route.params.id)
+    if (!error.value) {
+        const ids = data.value.data.map(item => item.collection_id)
+        console.log(`ids:`, ids)
+        $setSelectCollectionId(ids)
+    }
+}
+// 初始化登录的时候判断是否已收藏
+if ($isSignIn.value) {
+    await initData()
+}
 defineExpose({
     isOpen,
     handleUpdateOpenState,

composables/useCollectionRequest.js

@@ -19,7 +19,7 @@ export default () => {
         const { data, error } = await useRequest('/v1/collection/list', { 
             method: 'get'
         })
-        if (!error.value) {
+        if (error.value) {
             return []
         }
         return data.value.data || []

stores/library.js

@@ -4,6 +4,7 @@ export const useLibraryStore = defineStore('library', () => {
     const $isLibraryCreateOpen = ref(false)
     const $isLibrarySelectOpen = ref(false)
     const $selectThreadId = ref('')
+    const $selectCollectionId = ref([])
 
     function $openLibraryCreate () {
         $isLibraryCreateOpen.value = true
@@ -11,20 +12,26 @@ export const useLibraryStore = defineStore('library', () => {
     function $closeLibraryCreate () {
         $isLibraryCreateOpen.value = false
     }
-    function $openLibrarySelect (id) {
+    function $openLibrarySelect (id, collectionId) {
         $isLibrarySelectOpen.value = true
         if (id) $selectThreadId.value = id
+        if (collectionId) $selectCollectionId.value = collectionId
     }
     function $closeLibrarySelect () {
         $isLibrarySelectOpen.value = false
     }
-
+    function $setSelectCollectionId (ids) {
+        $selectCollectionId.value = ids
+    }
     return {
+        $selectThreadId,
         $isLibraryCreateOpen,
         $isLibrarySelectOpen,
         $openLibraryCreate,
         $closeLibraryCreate,
         $openLibrarySelect,
-        $closeLibrarySelect
+        $closeLibrarySelect,
+        $selectCollectionId,
+        $setSelectCollectionId
     }
 })