mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-16 11:17:35 +08:00
add shutcuts
This commit is contained in:
jxxghp
@@ -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>
|
||||
|
||||
72
src/layouts/components/SearchBar.vue
Normal file
72
src/layouts/components/SearchBar.vue
Normal file
@@ -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>
|
||||
54
src/layouts/components/ShortcutBar.vue
Normal file
54
src/layouts/components/ShortcutBar.vue
Normal file
@@ -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