feat(desktop): 添加快捷搜索

packages/web/src/components/Search/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    v-if="searchVisible"
+    ref="searchRef"
+    class="fixed top-5 left-50% translate-x--50% rounded-4 overflow-hidden w-400 flex flex-col bg-[--main-background] p-10"
+    :style="{
+      boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.2)'
+    }"
+  >
+    <a-input-search ref="inputRef" v-model="searchText" placeholder="输入关键词，回车键搜索" class="w-full" @keyup.enter="onSearch" />
+  </div>
+</template>
+
+<script setup>
+import { v4 as uuidV4 } from 'uuid';
+import { useSearchBox } from '@/utils/bus';
+import { onClickOutside } from '@vueuse/core';
+
+const router = useRouter();
+const searchRef = ref();
+const searchText = ref('');
+const inputRef = ref();
+
+const searchVisible = ref(false);
+const searchBox = useSearchBox();
+
+function openSearchBox() {
+  searchText.value = '';
+  searchVisible.value = true;
+  nextTick(() => {
+    inputRef.value.focus();
+  });
+}
+
+const unsubscribe = searchBox.on(openSearchBox);
+
+onDeactivated(() => {
+  unsubscribe();
+});
+
+onClickOutside(searchRef, () => {
+  searchVisible.value = false;
+});
+
+function onSearch() {
+  searchVisible.value = false;
+  if (!searchText.value) return;
+  router.push({
+    name: 'search',
+    query: {
+      keyword: searchText.value,
+      _uuid: uuidV4()
+    }
+  });
+}
+</script>

packages/web/src/pages/pc/books/Book.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ name: string; cover: string; author: string; filePath?: string; ruleId?: string }>();
+const props = defineProps<{ name: string; cover?: string; author?: string; filePath?: string; ruleId?: string }>();
 
 const router = useRouter();
 

packages/web/src/pages/pc/layout/index.vue

@@ -8,6 +8,11 @@
     >
       <div class="topbar__left w-20%" />
       <div class="w-60% flex gap-4 items-center justify-center flex-1 text-[--titleBar-inactiveForeground]">
+        <span
+          v-if="route.path !== '/pc/books'"
+          class="w-22 codicon codicon-home cursor-pointer hover:op-70 app-region-none"
+          @click="router.push('/pc/books')"
+        ></span>
         <span class="w-22 codicon codicon-arrow-left cursor-pointer hover:op-70 app-region-none" @click="router.back"></span>
         <span class="w-22 codicon codicon-arrow-right cursor-pointer hover:op-70 app-region-none" @click="router.forward"></span>
         <div
@@ -17,11 +22,14 @@
             v-if="route.path === '/pc/content'"
             class="w-full h-full flex items-center justify-center"
             :title="readStore.title"
-            @click="openChaptersBox.emit"
+            @click.stop="openChaptersBox.emit"
           >
             <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{ readStore.title }}</span>
           </div>
-          <div v-else>开发中</div>
+          <div v-else class="w-full h-full flex items-center justify-center" @click.stop="searchBox.emit">
+            <span class="codicon codicon-search mr-10"></span>
+            <span class="overflow-hidden whitespace-nowrap text-ellipsis">搜索</span>
+          </div>
         </div>
       </div>
       <div class="w-20% h-full flex gap-4 items-center justify-end text-[--titleBar-inactiveForeground]">
@@ -85,29 +93,32 @@
       <div class="flex-1 overflow-hidden bg-[--main-background]">
         <RouterView v-slot="{ Component, route: _route }">
           <KeepAlive>
-            <component :is="Component" v-if="_route.meta.keepAlive" :key="_route.fullPath" />
+            <component :is="Component" v-if="_route.meta.keepAlive" :key="_route.path" />
           </KeepAlive>
-          <component :is="Component" v-if="!_route.meta.keepAlive" :key="_route.fullPath" />
+          <component :is="Component" v-if="!_route.meta.keepAlive" :key="_route.path" />
         </RouterView>
       </div>
     </div>
   </div>
+  <Search />
 </template>
 
 <script setup lang="jsx">
 import { Modal } from '@arco-design/web-vue';
 import { PLATFORM } from '@/constants';
 import { minimize, maximize, exit } from '@/api/electron';
-import { useOpenChaptersBox } from '@/utils/bus';
+import { useOpenChaptersBox, useSearchBox } from '@/utils/bus';
 import { useSettingStore } from '@/stores/setting';
 import { useReadStore } from '@/stores/read';
 import Setting from '@/components/Setting/index.vue';
+import Search from '@/components/Search/index.vue';
 
 const route = useRoute();
 const router = useRouter();
 const settingStore = useSettingStore();
 const readStore = useReadStore();
 const openChaptersBox = useOpenChaptersBox();
+const searchBox = useSearchBox();
 
 function changeSidebar() {
   settingStore.data.sidebar = settingStore.data.sidebar === 'hidden' ? 'left' : 'hidden';

packages/web/src/pages/pc/search/index.vue

@@ -66,11 +66,13 @@ import { CONTENT_TYPES, CONTENT_TYPE } from '@/constants';
 import { searchByRuleId } from '@/api';
 import { useFavoritesStore } from '@/stores/favorites';
 import { useRulesStore } from '@/stores/rules';
+
 const favoritesStore = useFavoritesStore();
 const rulesStore = useRulesStore();
 
 const router = useRouter();
-const runPromise = pLimit(5);
+const route = useRoute();
+const runPromise = pLimit(10);
 
 favoritesStore.sync();
 
@@ -83,14 +85,13 @@ const runCount = ref(0);
 
 const list = ref<any[]>([]);
 
-function onSearch() {
-  const lastUuid = uuidV4();
+function onSearch(uid: string) {
+  const lastUuid = uid || uuidV4();
   uuid = lastUuid;
   list.value = [];
   total.value = 0;
   runCount.value = 0;
   loading.value = true;
-
   rulesStore.sync().then(async () => {
     const rules = rulesStore.list.filter((e) => contentTypes.value.includes(e.contentType) && e.enableSearch);
     total.value = rules.length;
@@ -119,6 +120,18 @@ function cancelSearch() {
   uuid = uuidV4();
   loading.value = false;
 }
+
+function init() {
+  const { keyword, _uuid } = route.query;
+  if (searchText.value === keyword && uuid === _uuid) return;
+  if (keyword) {
+    searchText.value = keyword as string;
+    onSearch(_uuid as string);
+  }
+}
+
+onActivated(init);
+onMounted(init);
 </script>
 
 <style scoped lang="scss">

packages/web/src/router/router.ts

@@ -19,7 +19,11 @@ const router = createRouter({
         },
         {
           path: 'search',
-          component: () => import('@/pages/pc/search/index.vue')
+          name: 'search',
+          component: () => import('@/pages/pc/search/index.vue'),
+          meta: {
+            keepAlive: true
+          }
         },
         {
           path: 'category',

packages/web/src/utils/bus.ts

@@ -1,7 +1,12 @@
 import { useEventBus } from '@vueuse/core';
 
-export const OPEN_CHAPTERS_BOX = Symbol();
+export const EVENT_CHAPTERS_BOX = Symbol();
+export const EVENT_SEARCH_BOX = Symbol();
 
 export function useOpenChaptersBox() {
-  return useEventBus(OPEN_CHAPTERS_BOX);
+  return useEventBus(EVENT_CHAPTERS_BOX);
+}
+
+export function useSearchBox() {
+  return useEventBus(EVENT_SEARCH_BOX);
 }