收藏夹放到菠萝

components/i/library/create.vue

 <template>
-    <UModal v-model="isOpenCreate" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
+    <UModal v-model="$isLibraryCreateOpen" :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">
@@ -49,14 +49,14 @@
     </UModal>
 </template>
 <script setup>
-const isOpenCreate = ref(false)
+const { $isLibraryCreateOpen } = storeToRefs(useLibraryStore())
+const { $openLibraryCreate, $closeLibraryCreate } = useLibraryStore()
 const title = ref('')
 const description = ref('')
 function handleClose () {
-    isOpenCreate.value = false
+    $closeLibraryCreate()
 }
 function handleOpen () {
-    isOpenCreate.value = true
+    $openLibraryCreate
 }
-defineExpose({ handleOpen })
 </script>

components/i/library/select.vue

 <template>
-    <UModal v-model="isOpenSelect" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
+    <UModal v-model="$isLibrarySelectOpen" :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">
@@ -37,17 +37,16 @@
     </UModal>
 </template>
 <script setup>
-const Library = inject('Library')
-const isOpenSelect = ref(false)
+const { $isLibrarySelectOpen } = storeToRefs(useLibraryStore())
+const { $openLibrarySelect, $closeLibrarySelect, $openLibraryCreate } = useLibraryStore()
 function handleClose () {
-    isOpenSelect.value = false
+    $closeLibrarySelect()
 }
 function handleOpen (id) {
-    isOpenSelect.value = true
+    $openLibrarySelect()
 }
-defineExpose({ handleOpen })
 function handleOpenCreate () {
     handleClose()
-    Library.handleOpenCreateLibrary()
+    $openLibraryCreate()
 }
 </script>

components/i/library/thread.vue

@@ -56,7 +56,7 @@
     <UDivider />
 </template>
 <script setup>
-const Library = inject('Library')
+const { $openLibrarySelect } = useLibraryStore()
 const textColor = 'text-gray-500 dark:text-gray-400'
 const actionItems = [
     [
@@ -85,6 +85,6 @@ const actionItems = [
     ]
 ]
 function handleOpenSelect (id) {
-    Library.handleOpenSelect(id)
+    $openLibrarySelect(id)
 }
 </script>
\ No newline at end of file

components/i/search/Header.vue

@@ -13,7 +13,13 @@
                     @blur="handleBlurTitle"
                 />
                 <span>/</span>
-                <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
+                <UButton
+                    color="gray"
+                    variant="ghost"
+                    leading-icon="i-heroicons-plus-20-solid"
+                    label="收藏"
+                    @click="handleOpenSelect"
+                />
             </div>
             <div class="flex gap-2">
                 <ClientOnly>
@@ -68,6 +74,7 @@
         </div>
         <UDivider />
     </header>
+
 </template>
 <script setup>
 const toast = useToast()

layouts/default.vue

@@ -29,6 +29,8 @@
             <IAside />
         </USlideover>
     </div>
+    <ILibraryCreate />
+    <ILibrarySelect />
 </template>
 <script setup>
 const isOpenAside = ref(false)

pages/library.vue

@@ -52,21 +52,12 @@
             </div>
         </div>
     </div>
-    <ILibraryCreate ref="refCreate" />
-    <ILibrarySelect ref="refSelect" />
 </template>
 <script setup>
+const { $openLibraryCreate } = useLibraryStore()
 const searchQuery = ref('')
-const refCreate = ref(null)
 function handleOpenCreateLibrary () {
-    refCreate.value.handleOpen()
+    $openLibraryCreate()
 }
-const refSelect = ref(null)
-function handleOpenSelect (id) {
-    refSelect.value.handleOpen(id)
-}
-provide('Library', {
-    handleOpenSelect,
-    handleOpenCreateLibrary
-})
+
 </script>

stores/library.js

+import { defineStore } from 'pinia'
+
+export const useLibraryStore = defineStore('library', () => {
+    const $isLibraryCreateOpen = ref(false)
+    const $isLibrarySelectOpen = ref(false)
+    const $selectThreadId = ref('')
+
+    function $openLibraryCreate () {
+        $isLibraryCreateOpen.value = true
+    }
+    function $closeLibraryCreate () {
+        $isLibraryCreateOpen.value = false
+    }
+    function $openLibrarySelect (id) {
+        $isLibrarySelectOpen.value = true
+        if (id) $selectThreadId.value = id
+    }
+    function $closeLibrarySelect () {
+        $isLibrarySelectOpen.value = false
+    }
+
+    return {
+        $isLibraryCreateOpen,
+        $isLibrarySelectOpen,
+        $openLibraryCreate,
+        $closeLibraryCreate,
+        $openLibrarySelect,
+        $closeLibrarySelect
+    }
+})