feat：聚合搜索（working...）

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 />

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>