feature: 添加收藏绘画功能

components/i/library/select.vue

@@ -30,29 +30,32 @@
                     >
                         <div class="flex flex-grow justify-between items-center">
                             <div>{{item.name}}</div>
-                            <UIcon v-if="selectedCollection.includes(item.id)" name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
+                            <UIcon v-if="selected.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="保存"
+                        :loading="loading"
+                        @click="handleSave"
                     />
                 </div>
-            </template> -->
+            </template>
         </UCard>
     </UModal>
 </template>
 <script setup>
 const { $isLibrarySelectOpen, $selectCollectionId, $selectThreadId } = storeToRefs(useLibraryStore())
 const { $openLibrarySelect, $closeLibrarySelect, $openLibraryCreate, $setSelectCollectionId } = useLibraryStore()
-const { getCollection, saveCollection } = useCollectionRequest()
+const { getCollection, saveCollection, deleteCollectionRecord } = useCollectionRequest()
 // 合集列表
 const collection = ref([])
-const selectedCollection = ref([])
+const selected = ref([])
+const loading = ref(false)
 function handleClose () {
     $closeLibrarySelect()
 }
@@ -67,20 +70,28 @@ async function getCollectionData () {
     collection.value = await getCollection()    
 }
 async function handleSelected(id) {
-    if (selectedCollection.value.includes(id)) {
-        await deleteCollectionRecord(id, $selectThreadId.value)
+    selected.value = [id]
+}
+async function handleSave() {
+    if (loading.value) return
+    loading.value = true
+    // 取消合集
+    const hasSelected = $selectCollectionId.value
+    if (hasSelected.length) {
+        const { error } = await deleteCollectionRecord(hasSelected[0], $selectThreadId.value)
+        !error.value && $setSelectCollectionId([])
     }
-    selectedCollection.value = [id]
-    $setSelectCollectionId(selectedCollection.value)
-    const { error } = await saveCollection({ collection_id: id, c_id: $selectThreadId.value })
-    if (error.value) {
-        selectedCollection.value = []
-        return
+    // 添加合集
+    if (selected.value.length) {
+        const selectedItem = selected.value[0]
+        const { error } = await saveCollection({ collection_id: selectedItem, c_id: $selectThreadId.value })
+        !error.value && $setSelectCollectionId([selectedItem]) 
     }
+    loading.value = false
     handleClose()
 }
 watch(() => $isLibrarySelectOpen.value, () => {
-    selectedCollection.value = $selectCollectionId.value
+    selected.value = [...$selectCollectionId.value]
     getCollectionData()
 })
 </script>

components/i/search/Header.vue

@@ -136,7 +136,6 @@ 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)
     }
 }