分享

components/i/search/Header.vue

@@ -17,7 +17,47 @@
             </div>
             <div class="flex gap-2">
                 <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
-                <UButton @click="handleShare" leading-icon="i-heroicons-share-20-solid">分享</UButton>
+                <UPopover>
+                    <UButton leading-icon="i-heroicons-share-20-solid">分享</UButton>
+                    <template #panel>
+                        <div class="flex flex-col p-4 gap-2 min-w-72">
+                            <div>访问权限</div>
+                            <div class="flex flex-col border dark:border-gray-800 rounded">
+                                <div
+                                    class="flex flex-grow justify-between m-1 p-1 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+                                    @click="handleUpdateOpenState(false)"
+                                >
+                                    <div class="flex-grow flex flex-col gap-1">
+                                        <div class="flex items-center gap-1" :class="{ 'text-primary-500': !isOpen }">
+                                            <UIcon name="i-heroicons-lock-closed-20-solid" />
+                                            <span>私密</span>
+                                        </div>
+                                        <div class="text-xs text-gray-500">只有作者可以查看</div>
+                                    </div>
+                                    <div v-if="!isOpen">
+                                        <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary-500 text-xl" />
+                                    </div>
+                                </div>
+                                <UDivider />
+                                <div
+                                    class="flex flex-grow justify-between m-1 p-1 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+                                    @click="handleUpdateOpenState(true)"
+                                >
+                                    <div class="flex-grow flex flex-col gap-1" :class="{ 'text-primary-500': isOpen }">
+                                        <div class="flex items-center gap-1">
+                                            <UIcon name="i-heroicons-share-20-solid" />
+                                            <span>可分享的</span>
+                                        </div>
+                                        <div class="text-xs text-gray-500">任何持有链接的人都可以查看</div>
+                                    </div>
+                                    <div v-if="isOpen">
+                                        <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary-500 text-xl" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </UPopover>
             </div>
         </div>
         <UDivider />
@@ -32,6 +72,7 @@ const emits = defineEmits(['update-query'])
 const isEditTitle = ref(false)
 const titleRef = ref(null)
 const editTitle = ref('')
+const isOpen = ref(false)
 
 watch(()=> props.query, () => {
     editTitle.value = props.query
@@ -52,4 +93,8 @@ function handleShare () {
         title: '链接已复制到剪贴板'
     })
 }
+function handleUpdateOpenState (state) {
+    isOpen.value = state
+    handleShare()
+}
 </script>
\ No newline at end of file