From 5c8e8b817facdf7771c3f51671839fb766df5bb3 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Mon, 3 Jun 2024 10:47:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=90=88=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/i/action/Collect.vue | 37 +++++++++++++++++++++++++++++
 components/i/library/Create.vue | 42 ++++++++++++++++++++++++++++++---
 components/i/library/Edit.vue   | 18 ++++++++++++++
 components/i/library/Header.vue | 23 ++++++++++++------
 pages/library/[id].vue          |  1 +
 5 files changed, 111 insertions(+), 10 deletions(-)
 create mode 100644 components/i/action/Collect.vue
 create mode 100644 components/i/library/Edit.vue

diff --git a/components/i/action/Collect.vue b/components/i/action/Collect.vue
new file mode 100644
index 0000000..d83e9b8
--- /dev/null
+++ b/components/i/action/Collect.vue
@@ -0,0 +1,37 @@
+<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>
diff --git a/components/i/library/Create.vue b/components/i/library/Create.vue
index 5e091c4..7425b8c 100644
--- a/components/i/library/Create.vue
+++ b/components/i/library/Create.vue
@@ -1,9 +1,14 @@
 <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>
diff --git a/components/i/library/Edit.vue b/components/i/library/Edit.vue
new file mode 100644
index 0000000..4959541
--- /dev/null
+++ b/components/i/library/Edit.vue
@@ -0,0 +1,18 @@
+<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
diff --git a/components/i/library/Header.vue b/components/i/library/Header.vue
index 0dccb44..1cd1b1b 100644
--- a/components/i/library/Header.vue
+++ b/components/i/library/Header.vue
@@ -21,13 +21,18 @@
                         </div>
                     </template>
                 </div>
-                <div class="flex">
-                    <UInput
-                        v-model="searchQuery"
-                        icon="i-heroicons-magnifying-glass-20-solid"
-                        placeholder="搜索你的主题..."
-                        size="md"
-                    />
+                <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"
+                            icon="i-heroicons-magnifying-glass-20-solid"
+                            placeholder="搜索你的主题..."
+                            size="md"
+                        />
+                    </div>
                 </div>
             </div>
             <div v-if="description" class="text-gray-500 ml-12 mt-2">{{ description }}</div>
@@ -48,6 +53,10 @@ defineProps({
     count: {
         type: Number,
         default: 0
+    },
+    collectId: {
+        type: [String, Number],
+        default: ''
     }
 })
 const searchQuery = ref('')
diff --git a/pages/library/[id].vue b/pages/library/[id].vue
index c1dd184..1894586 100644
--- a/pages/library/[id].vue
+++ b/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">
-- 
GitLab