mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-04 23:18:44 +08:00
add shutcuts
This commit is contained in:
jxxghp
@@ -6,35 +6,15 @@ import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
|
|||||||
// Components
|
// Components
|
||||||
import Footer from "@/layouts/components/Footer.vue";
|
import Footer from "@/layouts/components/Footer.vue";
|
||||||
import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.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 UserProfile from "@/layouts/components/UserProfile.vue";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import { useToast } from "vue-toast-notification";
|
import { useToast } from "vue-toast-notification";
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
// 搜索词
|
|
||||||
const searchWord = ref<string>("");
|
|
||||||
|
|
||||||
// 搜索弹窗
|
|
||||||
const searchDialog = ref(false);
|
|
||||||
|
|
||||||
// 提示框
|
// 提示框
|
||||||
const $toast = useToast();
|
const $toast = useToast();
|
||||||
|
|
||||||
// Search
|
|
||||||
const search = () => {
|
|
||||||
if (!searchWord.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
searchDialog.value = false;
|
|
||||||
router.push({
|
|
||||||
path: "/browse/media/search",
|
|
||||||
query: {
|
|
||||||
title: searchWord.value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 消息SSE
|
// 消息SSE
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const token = store.state.auth.token;
|
const token = store.state.auth.token;
|
||||||
@@ -58,66 +38,20 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VerticalNavLayout>
|
<VerticalNavLayout>
|
||||||
<!-- 👉 navbar -->
|
<!-- 👉 Navbar -->
|
||||||
<template #navbar="{ toggleVerticalOverlayNavActive }">
|
<template #navbar="{ toggleVerticalOverlayNavActive }">
|
||||||
<div class="d-flex h-100 align-center mx-1">
|
<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)">
|
<IconBtn class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
|
||||||
<VIcon icon="mdi-menu" />
|
<VIcon icon="mdi-menu" />
|
||||||
</IconBtn>
|
</IconBtn>
|
||||||
|
|
||||||
<!-- 👉 Search -->
|
<!-- 👉 Search Bar -->
|
||||||
<div class="d-flex align-center cursor-pointer" style="user-select: none;">
|
<SearchBar />
|
||||||
<!-- 👉 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>
|
|
||||||
|
|
||||||
<VSpacer />
|
<VSpacer />
|
||||||
|
|
||||||
|
<!-- 👉 Github -->
|
||||||
<IconBtn
|
<IconBtn
|
||||||
class="me-2"
|
class="me-2"
|
||||||
href="https://github.com/jxxghp/MoviePilot"
|
href="https://github.com/jxxghp/MoviePilot"
|
||||||
@@ -127,12 +61,13 @@ onMounted(() => {
|
|||||||
<VIcon icon="mdi-github" />
|
<VIcon icon="mdi-github" />
|
||||||
</IconBtn>
|
</IconBtn>
|
||||||
|
|
||||||
<IconBtn class="me-2">
|
<!-- 👉 Shortcuts -->
|
||||||
<VIcon icon="mdi-bell-outline" />
|
<ShortcutBar />
|
||||||
</IconBtn>
|
|
||||||
|
|
||||||
|
<!-- 👉 Theme -->
|
||||||
<NavbarThemeSwitcher class="me-2" />
|
<NavbarThemeSwitcher class="me-2" />
|
||||||
|
|
||||||
|
<!-- 👉 UserProfile -->
|
||||||
<UserProfile />
|
<UserProfile />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user