From 244f324a06ee27e9b658c98a7b741df0c4aab6e5 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 30 May 2024 10:15:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=A4=B9=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/i/library/select.vue | 46 +++++++++++++++++++++++++++++++++
 pages/library.vue               |  2 ++
 2 files changed, 48 insertions(+)
 create mode 100644 components/i/library/select.vue

diff --git a/components/i/library/select.vue b/components/i/library/select.vue
new file mode 100644
index 0000000..bca0d0a
--- /dev/null
+++ b/components/i/library/select.vue
@@ -0,0 +1,46 @@
+<template>
+    <UModal v-model="isOpenSelect" :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>
+                    <UButton
+                        leading-icon="i-heroicons-x-mark-20-solid"
+                        color="gray"
+                        variant="ghost"
+                        @click="handleClose"
+                    />
+                </div>
+            </template>
+            <div class="flex flex-col gap-4">
+                <UButton
+                    leading-icon="i-heroicons-plus-20-solid"
+                    label="创建新集合"
+                    color="gray"
+                />
+                <div class="flex flex-col gap-2">
+                    <UButton color="white" size="md" class="flex">
+                        <div class="flex flex-grow justify-between items-center">
+                            <div>前端开发</div>
+                            <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
+                        </div>
+                    </UButton>
+                    <UButton color="white" size="md" class="flex">
+                        <div class="flex flex-grow justify-between items-center">
+                            <div>后端开发</div>
+                        </div>
+                    </UButton>
+                </div>
+            </div>
+        </UCard>
+    </UModal>
+</template>
+<script setup>
+const isOpenSelect = ref(false)
+function handleClose () {
+    isOpenSelect.value = false
+}
+function handleOpen () {
+    isOpenSelect.value = true
+}
+</script>
diff --git a/pages/library.vue b/pages/library.vue
index 93e29e1..f89a559 100644
--- a/pages/library.vue
+++ b/pages/library.vue
@@ -53,10 +53,12 @@
         </div>
     </div>
     <ILibraryCreate ref="refCreate" />
+    <ILibrarySelect ref="refSelect" />
 </template>
 <script setup>
 const searchQuery = ref('')
 const refCreate = ref(null)
+const refSelect = ref(null)
 function handleOpenCreateLibrary () {
     refCreate.value.handleOpen()
 }
-- 
GitLab