feat: 视频搜索

src/AppContent.vue

@@ -1,12 +1,27 @@
 <script setup lang="tsx">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, provide } from 'vue'
 import { useStore } from './store.ts'
 import LogDialog from './dialogs/LogDialog.vue'
-import { PhClockCounterClockwise, PhInfo, PhGearSix } from '@phosphor-icons/vue'
+import {
+  PhClockCounterClockwise,
+  PhInfo,
+  PhGearSix,
+  PhMagnifyingGlass,
+  PhStar,
+  PhClock,
+  PhDownload,
+} from '@phosphor-icons/vue'
 import AboutDialog from './dialogs/AboutDialog.vue'
 import { platform } from '@tauri-apps/plugin-os'
 import TitleBar from './components/TitleBar.vue'
 import SettingsDialog from './dialogs/SettingsDialog/SettingsDialog.vue'
+import SearchPane from './panes/SearchPane/SearchPane.vue'
+import FavPane from './panes/FavPane/FavPane.vue'
+import WatchLaterPane from './panes/WatchLaterPane/WatchLaterPane.vue'
+import DownloadPane from './panes/DownloadPane/DownloadPane.vue'
+import { searchPaneRefKey, navDownloadButtonRefKey } from './injection_keys.ts'
+
+export type CurrentNavName = 'search' | 'fav' | 'watch_later' | 'download'
 
 const currentPlatform = platform()
 
@@ -16,6 +31,12 @@ const logDialogShowing = ref<boolean>(false)
 const aboutDialogShowing = ref<boolean>(false)
 const settingsDialogShowing = ref<boolean>(false)
 
+const searchPaneRef = ref<InstanceType<typeof SearchPane>>()
+const downloadButtonRef = ref<HTMLDivElement>()
+
+provide(searchPaneRefKey, searchPaneRef)
+provide(navDownloadButtonRefKey, downloadButtonRef)
+
 onMounted(() => {
   // 屏蔽浏览器右键菜单
   document.oncontextmenu = (event) => {
@@ -26,7 +47,7 @@ onMounted(() => {
 
 <template>
   <div
-      :class="[
+    :class="[
       'h-screen flex flex-col',
       {
         'box-border border border-solid border-gray-3': currentPlatform === 'linux',
@@ -36,6 +57,55 @@ onMounted(() => {
 
     <div v-if="store.config !== undefined" class="h-full w-full flex overflow-hidden select-none">
       <div class="flex flex-col box-border p-1 border-r-solid border-r-1 border-r-[#DADADA] bg-[#F9F9F9] flex-shrink-0">
+        <n-tooltip placement="right" trigger="hover" :show-arrow="false">
+          搜索
+          <template #trigger>
+            <div
+              class="flex cursor-pointer hover:text-sky-5 hover:bg-gray-2/70 rounded py-1 my-1 px-2"
+              @click="store.currentNavName = 'search'"
+              :class="{ 'text-sky-5': store.currentNavName === 'search' }">
+              <PhMagnifyingGlass :weight="store.currentNavName === 'search' ? 'fill' : 'regular'" size="28" />
+            </div>
+          </template>
+        </n-tooltip>
+
+        <n-tooltip placement="right" trigger="hover" :show-arrow="false">
+          收藏
+          <template #trigger>
+            <div
+              class="flex cursor-pointer hover:text-sky-5 hover:bg-gray-2/70 rounded py-1 my-1 px-2"
+              @click="store.currentNavName = 'fav'"
+              :class="{ 'text-sky-5': store.currentNavName === 'fav' }">
+              <PhStar :weight="store.currentNavName === 'fav' ? 'fill' : 'regular'" size="28" />
+            </div>
+          </template>
+        </n-tooltip>
+
+        <n-tooltip placement="right" trigger="hover" :show-arrow="false">
+          稍后再看
+          <template #trigger>
+            <div
+              class="flex cursor-pointer hover:text-sky-5 hover:bg-gray-2/70 rounded py-1 my-1 px-2"
+              @click="store.currentNavName = 'watch_later'"
+              :class="{ 'text-sky-5': store.currentNavName === 'watch_later' }">
+              <PhClock :weight="store.currentNavName === 'watch_later' ? 'fill' : 'regular'" size="28" />
+            </div>
+          </template>
+        </n-tooltip>
+
+        <n-tooltip placement="right" trigger="hover" :show-arrow="false">
+          下载
+          <template #trigger>
+            <div
+              ref="downloadButtonRef"
+              class="flex cursor-pointer hover:text-sky-5 hover:bg-gray-2/70 rounded py-1 my-1 px-2"
+              @click="store.currentNavName = 'download'"
+              :class="{ 'text-sky-5': store.currentNavName === 'download' }">
+              <PhDownload :weight="store.currentNavName === 'download' ? 'fill' : 'regular'" size="28" />
+            </div>
+          </template>
+        </n-tooltip>
+
         <n-tooltip placement="right" trigger="hover" :show-arrow="false">
           配置
           <template #trigger>
@@ -69,6 +139,12 @@ onMounted(() => {
           </template>
         </n-tooltip>
       </div>
+      <div class="w-full overflow-hidden">
+        <SearchPane v-show="store.currentNavName === 'search'" ref="searchPaneRef" />
+        <FavPane v-show="store.currentNavName === 'fav'" />
+        <WatchLaterPane v-show="store.currentNavName === 'watch_later'" />
+        <DownloadPane v-show="store.currentNavName === 'download'" />
+      </div>
     </div>
 
     <SettingsDialog v-model:showing="settingsDialogShowing" />