更新合集

components/i/action/Collect.vue

+<template>
+    <UDropdown class="flex flex-grow" :items="actionItems">
+        <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-ellipsis-horizontal"
+        />
+    </UDropdown>
+    <ILibraryEdit :id="id" ref="refEdit" />
+</template>
+<script setup>
+const props = defineProps({
+    id: {
+        type: [String, Number],
+        default: ''
+    }
+})
+const actionItems = [
+    [
+        {
+            label: '编辑合集',
+            icon: 'i-heroicons-pencil-square',
+            click: () => {
+                handleOpen()
+            }
+        },
+        {
+            label: '删除合集',
+            icon: 'i-heroicons-trash'
+        }
+    ]
+]
+const refEdit = ref(null)
+function handleOpen () {
+    refEdit.value.open()
+}
+</script>

components/i/library/Create.vue

 <template>
-    <UModal v-model="$isLibraryCreateOpen" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
+    <UModal
+        :model-value="!id ? $isLibraryCreateOpen : updateVisible"
+        @update:modelValue="handleCloseModal"
+        :ui="{ width: 'w-96 sm:max-w-screen-md' }"
+    >
         <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
             <template #header>
                 <div class="flex items-center justify-between">
-                    <div class="text-xl">创建合集</div>
+                    <div class="text-xl" v-if="!id">创建合集</div>
+                    <div class="text-xl" v-else>更新合集</div>
                     <UButton
                         leading-icon="i-heroicons-x-mark-20-solid"
                         color="gray"
@@ -39,12 +44,21 @@
             <template #footer>
                 <div class="flex justify-end">
                     <UButton
+                        v-if="!id"
                         size="md"
                         label="创建"
                         :loading="loading"
                         :disabled="!title"
                         @click="handleCreate"
                     />
+                    <UButton
+                        v-else
+                        size="md"
+                        label="更新"
+                        :loading="loading"
+                        :disabled="!title"
+                        @click="handleUpdate"
+                    />
                 </div>
             </template>
         </UCard>
@@ -54,11 +68,19 @@
 const { $isLibraryCreateOpen } = storeToRefs(useLibraryStore())
 const { $closeLibraryCreate, $getCollection } = useLibraryStore()
 const { setOrUpdateCollection } = useCollectionRequest()
+const props = defineProps({
+    id: {
+        type: [String, Number],
+        default: ''
+    }
+})
+const updateVisible = ref(false)
 const title = ref('')
 const description = ref('')
 const loading = ref(false)
 function handleClose () {
-    $closeLibraryCreate()
+    if (!props.id) $closeLibraryCreate()
+    else updateVisible.value = false
 }
 async function handleCreate () {
     if (loading.value) return
@@ -72,4 +94,18 @@ async function handleCreate () {
     $closeLibraryCreate()
     $getCollection()
 }
+function handleCloseModal () {
+    if (!props.id) $isLibraryCreateOpen.value = false
+    else updateVisible.value = false
+}
+function handleUpdate () {
+
+}
+function openUpdate () {
+    updateVisible.value = true
+    // todo 获取合集数据
+}
+defineExpose({
+    openUpdate
+})
 </script>

components/i/library/Edit.vue

+<template>
+    <ILibraryCreate :id="id" ref="refCreate" />
+</template>
+<script setup>
+defineProps({
+    id: {
+        type: [String, Number],
+        default: ''
+    }
+})
+const refCreate = ref(null)
+function open () {
+    refCreate.value.openUpdate()
+}
+defineExpose({
+    open
+})
+</script>
\ No newline at end of file

components/i/library/Header.vue

@@ -21,6 +21,10 @@
                         </div>
                     </template>
                 </div>
+                <div class="flex flex-grow justify-end items-center gap-4">
+                    <div class="flex">
+                        <IActionCollect :id="collectId" />
+                    </div>
                     <div class="flex">
                         <UInput
                             v-model="searchQuery"
@@ -30,6 +34,7 @@
                         />
                     </div>
                 </div>
+            </div>
             <div v-if="description" class="text-gray-500 ml-12 mt-2">{{ description }}</div>
         </div>
         <UDivider />
@@ -48,6 +53,10 @@ defineProps({
     count: {
         type: Number,
         default: 0
+    },
+    collectId: {
+        type: [String, Number],
+        default: ''
     }
 })
 const searchQuery = ref('')

pages/library/[id].vue

@@ -5,6 +5,7 @@
             :collect="currentCollect.name"
             :description="currentCollect.description"
             :count="currentCollect.record_count"
+            :collect-id="currentCollect.id"
         />
         <div class="container max-w-screen-lg flex flex-col p-6">
             <div class="flex gap-10">