From a2d28ad360e3d9d3f8bcb2bf072cd2fe3bfb1407 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 2 Jun 2024 11:13:03 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=81=9A=E5=90=88=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=EF=BC=88working...=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 -
 src/@core/components/DialogCloseBtn.vue       |   5 +-
 .../DefaultLayoutWithVerticalNav.vue          |  14 +--
 src/layouts/components/SearchBar.vue          | 114 +++---------------
 src/views/system/SearchBarView.vue            | 107 ++++++++++++++++
 5 files changed, 131 insertions(+), 110 deletions(-)
 create mode 100644 src/views/system/SearchBarView.vue

diff --git a/package.json b/package.json
index 1fbef021..075f9aac 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     ]
   },
   "dependencies": {
-    "@bytebase/vue-kbar": "^0.1.8",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
     "@fullcalendar/interaction": "^6.1.7",
diff --git a/src/@core/components/DialogCloseBtn.vue b/src/@core/components/DialogCloseBtn.vue
index 7a5e4e76..1bdfd59b 100644
--- a/src/@core/components/DialogCloseBtn.vue
+++ b/src/@core/components/DialogCloseBtn.vue
@@ -14,7 +14,10 @@ function onClick() {
 </script>
 
 <template>
-  <IconBtn :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'" @click.stop="onClick">
+  <IconBtn
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
+    @click.stop="onClick"
+  >
     <VIcon icon="mdi-close" />
   </IconBtn>
 </template>
diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 95ae0138..26cc26dd 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -2,8 +2,6 @@
 import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
 import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
 import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
-
-// Components
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
 import UserNofification from '@/layouts/components/UserNotification.vue'
@@ -25,21 +23,16 @@ const superUser = store.state.auth.superUser
         <IconBtn class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />
         </IconBtn>
-
         <!-- 👉 Search Bar -->
         <SearchBar />
-
+        <!-- 👉 Spacer -->
         <VSpacer />
-
         <!-- 👉 Shortcuts -->
         <ShortcutBar v-if="superUser" />
-
         <!-- 👉 Theme -->
         <NavbarThemeSwitcher />
-
         <!-- 👉 Notification -->
         <UserNofification />
-
         <!-- 👉 UserProfile -->
         <UserProfile />
       </div>
@@ -53,7 +46,6 @@ const superUser = store.state.auth.superUser
           to: '/dashboard',
         }"
       />
-
       <!-- 👉 发现 -->
       <VerticalNavSectionTitle
         :item="{
@@ -74,7 +66,6 @@ const superUser = store.state.auth.superUser
           to: '/resource',
         }"
       />
-
       <!-- 👉 订阅 -->
       <VerticalNavSectionTitle
         :item="{
@@ -131,7 +122,6 @@ const superUser = store.state.auth.superUser
           to: '/filemanager',
         }"
       />
-
       <!-- 👉 系统 -->
       <VerticalNavSectionTitle
         v-if="superUser"
@@ -166,10 +156,8 @@ const superUser = store.state.auth.superUser
     </template>
 
     <template #after-vertical-nav-items />
-
     <!-- 👉 Pages -->
     <slot />
-
     <!-- 👉 Footer -->
     <template #footer>
       <Footer />
diff --git a/src/layouts/components/SearchBar.vue b/src/layouts/components/SearchBar.vue
index 60836ff7..6ed4f6db 100644
--- a/src/layouts/components/SearchBar.vue
+++ b/src/layouts/components/SearchBar.vue
@@ -1,109 +1,33 @@
 <script lang="ts" setup>
-// 路由
-const router = useRouter()
+import SearchBarView from '@/views/system/SearchBarView.vue'
 
-// 搜索词
-const searchWord = ref(null)
-
-// 搜索弹窗
 const searchDialog = ref(false)
 
-// ref
-const searchWordInput = ref<HTMLElement | null>(null)
-
-// 当前的搜索类型 media/person
-const searchType = ref('media')
-
-// 搜索提示词列表
-const searchHintList = ref<string[]>([])
-
-// Search
-function search() {
-  if (!searchWord.value) return
-  if (!searchHintList.value.includes(searchWord.value)) searchHintList.value.push(searchWord.value)
-  searchDialog.value = false
-  router.push({
-    path: '/browse/media/search',
-    query: {
-      title: searchWord.value,
-      type: searchType.value,
-    },
-  })
-}
-
-// 切换搜索类型
-function switchSearchType() {
-  searchType.value = searchType.value === 'media' ? 'person' : 'media'
-}
-
-// 打开搜索弹窗
 function openSearchDialog() {
   searchDialog.value = true
-  nextTick(() => {
-    searchWordInput.value?.focus()
-  })
 }
 </script>
 
 <template>
-  <!-- 👉 Search Button -->
-  <div class="d-flex align-center cursor-pointer" style="user-select: none">
-    <VDialog v-model="searchDialog" max-width="50rem" transition="dialog-top-transition">
-      <!-- Dialog Content -->
-      <VCard title="搜索">
-        <VCardText>
-          <VRow>
-            <VCol cols="12">
-              <VCombobox
-                ref="searchWordInput"
-                v-model="searchWord"
-                :items="searchHintList"
-                :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie'"
-                :label="searchType == 'person' ? '搜索演员' : '搜索电影、电视剧'"
-                @keydown.enter="search"
-                @click:prepend-inner="switchSearchType"
-                clearable
-              />
-            </VCol>
-          </VRow>
-        </VCardText>
-
-        <VCardActions>
-          <VSpacer />
-          <VBtn variant="tonal" @click="search"> 搜索 </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
   <!-- 👉 Search Icon -->
-  <IconBtn class="d-md-none" @click="openSearchDialog">
-    <VIcon icon="mdi-magnify" />
-  </IconBtn>
-  <!-- 👉 Search Textfield -->
-  <span class="w-full me-3">
-    <VCombobox
-      key="search_navbar"
-      v-model="searchWord"
-      :items="searchHintList"
-      class="d-none d-md-block text-disabled search-box"
-      density="compact"
-      variant="solo"
-      :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie'"
-      :label="searchType == 'person' ? '搜索演员' : '搜索电影、电视剧'"
-      append-inner-icon="mdi-magnify"
-      single-line
-      hide-details
-      flat
-      rounded
-      @click:append-inner="search"
-      @click:prepend-inner="switchSearchType"
-      @keydown.enter="search"
-    />
-  </span>
+  <div class="d-flex align-center cursor-pointer ms-lg-n2" style="user-select: none">
+    <IconBtn @click="openSearchDialog">
+      <VIcon icon="ri-search-line" />
+    </IconBtn>
+    <span class="d-none d-md-flex align-center text-disabled ms-2" @click="openSearchDialog">
+      <span class="me-3">搜索</span>
+      <span class="meta-key">⌘K</span>
+    </span>
+  </div>
+  <!-- 搜索弹窗 -->
+  <SearchBarView v-model="searchDialog" @close="searchDialog = false" />
 </template>
-
-<style lang="scss">
-.search-box div.v-input__control div[role='textbox'] {
-  border: 1px solid rgb(var(--v-theme-background));
+<style type="scss" scoped>
+.meta-key {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 6px;
+  block-size: 1.75rem;
+  padding-block: 0.1rem;
+  padding-inline: 0.25rem;
 }
 </style>
diff --git a/src/views/system/SearchBarView.vue b/src/views/system/SearchBarView.vue
new file mode 100644
index 00000000..89fc1096
--- /dev/null
+++ b/src/views/system/SearchBarView.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// 路由
+const router = useRouter()
+
+// 定义事件
+const emit = defineEmits(['close'])
+
+// 搜索词
+const searchWord = ref(null)
+
+// ref
+const searchWordInput = ref<HTMLElement | null>(null)
+
+// 搜索提示词列表
+const searchHintList = ref<string[]>([])
+
+// Search
+function search(searchType: string) {
+  // 搜索类型 media/person
+  if (!searchWord.value) return
+  if (!searchHintList.value.includes(searchWord.value)) searchHintList.value.push(searchWord.value)
+  router.push({
+    path: '/browse/media/search',
+    query: {
+      title: searchWord.value,
+      type: searchType,
+    },
+  })
+  emit('close')
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    searchWordInput.value?.focus()
+  }, 500)
+})
+</script>
+<template>
+  <VDialog max-width="40rem">
+    <VCard>
+      <VCardText class="pe-12">
+        <VCombobox
+          ref="searchWordInput"
+          v-model="searchWord"
+          density="compact"
+          variant="plain"
+          class="text-high-emphasis"
+          placeholder="搜索 ..."
+          :items="searchHintList"
+        >
+          <template #prepend>
+            <VIcon icon="ri-search-line" style="opacity: 1" />
+          </template>
+        </VCombobox>
+      </VCardText>
+      <DialogCloseBtn inner-class="absolute right-3 top-5 text-high-emphasis" @click="emit('close')" />
+      <VDivider />
+      <div class="ps h-100">
+        <VList lines="one" v-if="searchWord">
+          <!-- 搜索结果 -->
+          <VListSubheader v-if="searchWord"> 媒体 </VListSubheader>
+          <VHover>
+            <template #default="hover">
+              <VListItem
+                prepend-icon="mdi-movie-search"
+                density="compact"
+                link
+                v-bind="hover.props"
+                @click="search('media')"
+              >
+                <VListItemTitle>
+                  搜索 <span class="font-bold">{{ searchWord }} </span> 相关的电影、电视剧
+                </VListItemTitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="ri-corner-down-left-line" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+          <VHover>
+            <template #default="hover">
+              <VListItem
+                prepend-icon="mdi-people"
+                density="compact"
+                link
+                v-bind="hover.props"
+                @click="search('person')"
+              >
+                <VListItemTitle>
+                  搜索 <span class="font-bold">{{ searchWord }}</span> 相关的人物
+                </VListItemTitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="ri-corner-down-left-line" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+          <VListSubheader v-if="searchWord"> 功能 </VListSubheader>
+          <VListSubheader v-if="searchWord"> 插件 </VListSubheader>
+        </VList>
+        <div v-else>
+          <!-- 默认 -->
+        </div>
+      </div>
+    </VCard>
+  </VDialog>
+</template>