From f4a98d24b75cda700ae5b40b3b6c6736d3a04ad8 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 18 Jul 2023 12:44:10 +0800
Subject: [PATCH] add shutcuts

---
 .../DefaultLayoutWithVerticalNav.vue          | 87 +++----------------
 src/layouts/components/SearchBar.vue          | 72 +++++++++++++++
 src/layouts/components/ShortcutBar.vue        | 54 ++++++++++++
 3 files changed, 137 insertions(+), 76 deletions(-)
 create mode 100644 src/layouts/components/SearchBar.vue
 create mode 100644 src/layouts/components/ShortcutBar.vue

diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index a5c0217f..6c2955d9 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -6,35 +6,15 @@ import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
 // Components
 import Footer from "@/layouts/components/Footer.vue";
 import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
+import SearchBar from "@/layouts/components/SearchBar.vue";
+import ShortcutBar from "@/layouts/components/ShortcutBar.vue";
 import UserProfile from "@/layouts/components/UserProfile.vue";
 import store from "@/store";
 import { useToast } from "vue-toast-notification";
 
-const router = useRouter();
-
-// 搜索词
-const searchWord = ref<string>("");
-
-// 搜索弹窗
-const searchDialog = ref(false);
-
 // 提示框
 const $toast = useToast();
 
-// Search
-const search = () => {
-  if (!searchWord.value) {
-    return;
-  }
-  searchDialog.value = false;
-  router.push({
-    path: "/browse/media/search",
-    query: {
-      title: searchWord.value,
-    },
-  });
-};
-
 // 消息SSE
 onMounted(() => {
   const token = store.state.auth.token;
@@ -58,66 +38,20 @@ onMounted(() => {
 
 <template>
   <VerticalNavLayout>
-    <!-- 👉 navbar -->
+    <!-- 👉 Navbar -->
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center mx-1">
-        <!-- 👉 Vertical nav toggle in overlay mode -->
+        <!-- 👉 Vertical Nav Toggle -->
         <IconBtn class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />
         </IconBtn>
 
-        <!-- 👉 Search -->
-        <div class="d-flex align-center cursor-pointer" style="user-select: none;">
-          <!-- 👉 Search Trigger button -->
-          <VDialog
-            v-model="searchDialog"
-            max-width="600"
-            transition="dialog-top-transition"
-          >
-            <!-- Dialog Activator -->
-            <template #activator="{ props }">
-              <IconBtn class="d-lg-none" v-bind="props">
-                <VIcon icon="mdi-magnify" />
-              </IconBtn>
-            </template>
-            <!-- Dialog Content -->
-            <VCard title="搜索">
-              <VCardText>
-                <VRow>
-                  <VCol cols="12">
-                    <VTextField v-model="searchWord" label="电影、电视剧名称" />
-                  </VCol>
-                </VRow>
-              </VCardText>
-
-              <VCardActions>
-                <VSpacer />
-                <VBtn @click="search" @keydown.enter="search"> 搜索 </VBtn>
-              </VCardActions>
-            </VCard>
-          </VDialog>
-        </div>
-
-        <span class="w-1/5">
-          <VTextField
-            key="search_navbar"
-            v-model="searchWord"
-            class="d-none d-lg-block text-disabled"
-            density="compact"
-            variant="solo"
-            label="搜索电影、电视剧"
-            append-inner-icon="mdi-magnify"
-            single-line
-            hide-details
-            @click:append-inner="search"
-            @keydown.enter="search"
-            flat
-            rounded
-          />
-        </span>
+        <!-- 👉 Search Bar -->
+        <SearchBar />
 
         <VSpacer />
 
+        <!-- 👉 Github -->
         <IconBtn
           class="me-2"
           href="https://github.com/jxxghp/MoviePilot"
@@ -127,12 +61,13 @@ onMounted(() => {
           <VIcon icon="mdi-github" />
         </IconBtn>
 
-        <IconBtn class="me-2">
-          <VIcon icon="mdi-bell-outline" />
-        </IconBtn>
+        <!-- 👉 Shortcuts -->
+        <ShortcutBar />
 
+        <!-- 👉 Theme -->
         <NavbarThemeSwitcher class="me-2" />
 
+        <!-- 👉 UserProfile -->
         <UserProfile />
       </div>
     </template>
diff --git a/src/layouts/components/SearchBar.vue b/src/layouts/components/SearchBar.vue
new file mode 100644
index 00000000..bd35df76
--- /dev/null
+++ b/src/layouts/components/SearchBar.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+// 路由
+const router = useRouter();
+
+// 搜索词
+const searchWord = ref<string>("");
+
+// 搜索弹窗
+const searchDialog = ref(false);
+
+// Search
+const search = () => {
+  if (!searchWord.value) {
+    return;
+  }
+  searchDialog.value = false;
+  router.push({
+    path: "/browse/media/search",
+    query: {
+      title: searchWord.value,
+    },
+  });
+};
+</script>
+
+<template>
+  <!-- 👉 Search Button -->
+  <div class="d-flex align-center cursor-pointer" style="user-select: none">
+    <VDialog v-model="searchDialog" max-width="600" transition="dialog-top-transition">
+      <!-- Dialog Activator -->
+      <template #activator="{ props }">
+        <IconBtn class="d-lg-none" v-bind="props">
+          <VIcon icon="mdi-magnify" />
+        </IconBtn>
+      </template>
+      <!-- Dialog Content -->
+      <VCard title="搜索">
+        <VCardText>
+          <VRow>
+            <VCol cols="12">
+              <VTextField v-model="searchWord" label="电影、电视剧名称" />
+            </VCol>
+          </VRow>
+        </VCardText>
+
+        <VCardActions>
+          <VSpacer />
+          <VBtn @click="search" @keydown.enter="search"> 搜索 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+
+  <!-- 👉 Search Textfield -->
+  <span class="w-1/5">
+    <VTextField
+      key="search_navbar"
+      v-model="searchWord"
+      class="d-none d-lg-block text-disabled"
+      density="compact"
+      variant="solo"
+      label="搜索电影、电视剧"
+      append-inner-icon="mdi-magnify"
+      single-line
+      hide-details
+      @click:append-inner="search"
+      @keydown.enter="search"
+      flat
+      rounded
+    />
+  </span>
+</template>
diff --git a/src/layouts/components/ShortcutBar.vue b/src/layouts/components/ShortcutBar.vue
new file mode 100644
index 00000000..b94c6f71
--- /dev/null
+++ b/src/layouts/components/ShortcutBar.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+// App捷径
+const appsMenu = ref(false);
+</script>
+
+<template>
+  <VMenu
+    v-model="appsMenu"
+    max-width="600"
+    width="340"
+    max-height="560"
+    close-on-content-click
+  >
+    <!-- Menu Activator -->
+    <template #activator="{ props }">
+      <IconBtn class="me-2" v-bind="props">
+        <VIcon icon="mdi-apps" />
+      </IconBtn>
+    </template>
+    <!-- Menu Content -->
+    <VCard title="捷径">
+      <VDivider />
+      <div class="ps ps--active-y">
+        <VRow class="ma-0 mt-n1">
+          <VCol
+            cols="6"
+            class="text-center border-t cursor-pointer pa-0 shortcut-icon border-e"
+          >
+            <VListItem @click="() => {}" class="pa-4">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-text-recognition" />
+              </VAvatar>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
+              <span class="text-sm">名称识别测试</span>
+            </VListItem>
+          </VCol>
+          <VCol
+            @click="() => {}"
+            cols="6"
+            class="text-center border-t cursor-pointer pa-0 shortcut-icon"
+          >
+            <VListItem @click="() => {}" class="pa-4">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-network-outline" />
+              </VAvatar>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
+              <span class="text-sm">测试网速连通性</span>
+            </VListItem>
+          </VCol>
+        </VRow>
+      </div>
+    </VCard>
+  </VMenu>
+</template>