renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement keyword search in favorites page

Browse Source
This commit is contained in:
Hakadao
2023-08-16 01:49:58 +08:00
parent f944f8f928
commit 33a30a6731
2 changed files with 46 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/SearchBar/SearchBar.vue
View File

@@ -127,14 +127,14 @@ function handleKeyDown() {
<template>
<div id="search-wrap" w="full" max-w="500px" m="x-8" pos="relative">
<!-- <div
v-if="isFocus"
<div
v-if="!darkenOnFocus && isFocus"
pos="fixed top-0 left-0"
w="full"
h="full"
content="~"
@click="isFocus = false"
/> -->
/>
<Transition name="mask">
<div
v-if="darkenOnFocus && isFocus" pos="fixed top-0 left-0" w-full h-full bg="black opacity-60"
@@ -142,7 +142,7 @@ function handleKeyDown() {
/>
</Transition>
<div class="search-bar group" flex="~" items-center pos="relative">
<div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
<Transition name="focus-character">
<img v-show="focusedCharacter && isFocus" :src="focusedCharacter" width="100" object-contain pos="absolute right-0 bottom-30px">
</Transition>
@@ -286,6 +286,11 @@ function handleKeyDown() {
box-shadow: 0 6px 16px var(--bew-theme-color-40), inset 0 0 6px var(--bew-theme-color-30)
}
}
&.focus input {
--at-apply: border-$bew-theme-color rounded-$bew-radius;
box-shadow: 0 6px 16px var(--bew-theme-color-40), inset 0 0 6px var(--bew-theme-color-30)
}
}
@mixin search-content {

84
src/contentScripts/views/Favorites/Favorites.vue
View File

@@ -9,25 +9,14 @@ const { t } = useI18n()
const favoriteCategories = reactive<Array<FavoriteCategory>>([])
const favoriteResources = reactive<Array<FavoriteResource>>([])
const activatedCategoryId = ref<number>(0)
const activatedFavoriteTitle = ref<string>()
const selectedCategory = ref<FavoriteCategory>()
const currentPageNum = ref<number>(1)
const keyword = ref<string>()
const keyword = ref<string>('')
const isLoading = ref<boolean>()
const noMoreContent = ref<boolean>()
watch(activatedCategoryId, (newVal: number, oldVal: number) => {
if (newVal === oldVal)
return
favoriteResources.length = 0
// if (favoriteVideosWrap.value)
// scrollToTop(favoriteVideosWrap.value, 300)
getFavoriteResources(newVal, 1)
})
onMounted(async () => {
await getFavoriteCategories()
changeCategory(favoriteCategories[0])
@@ -38,7 +27,7 @@ onMounted(async () => {
return
if (!noMoreContent.value)
getFavoriteResources(activatedCategoryId.value, ++currentPageNum.value, keyword.value)
getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
})
})
@@ -118,27 +107,22 @@ function getFavoriteResources(
})
}
function deleteWatchLaterItem(index: number, aid: number) {
// browser.runtime
// .sendMessage({
// contentScriptQuery: 'removeFromWatchLater',
// aid,
// csrf: getCSRF(),
// })
// .then((res) => {
// if (res.code === 0)
// watchLaterList.splice(index, 1)
// })
}
function changeCategory(categoryItem: FavoriteCategory) {
currentPageNum.value = 1
activatedCategoryId.value = categoryItem.id
activatedFavoriteTitle.value = categoryItem.title
selectedCategory.value = categoryItem
favoriteResources.length = 0
getFavoriteResources(categoryItem.id, 1)
}
function handleSearch() {
currentPageNum.value = 1
favoriteResources.length = 0
getFavoriteResources(selectedCategory.value!.id, currentPageNum.value, keyword.value)
}
function handlePlayAll() {
openLinkToNewTab('https://www.bilibili.com/list/watchlater')
openLinkToNewTab(`https://www.bilibili.com/list/ml${selectedCategory.value?.id}`)
}
function jumpToLoginPage() {
@@ -148,24 +132,30 @@ function jumpToLoginPage() {
<template>
<div v-if="getCSRF()" flex="~ col md:row lg:row" gap-6>
<main w="full md:60% lg:70% xl:75%" order="2 md:1 lg:1" mb-6 relative>
<h3 text="3xl $bew-text-1" font-bold mb-6>
{{ activatedFavoriteTitle }}
</h3>
<!-- <div
fixed z-10 absolute h-60px px-4 flex items-center backdrop-glass
bg="$bew-content-1"
<main w="full md:60% lg:70% xl:75%" order="2 md:1 lg:1" relative>
<!-- <h3 text="3xl $bew-text-1" font-bold mb-6>
{{ selectedCategory?.title }}
</h3> -->
<div
fixed z-10 absolute p-2 flex="~ gap-2" items-center backdrop-glass
bg="$bew-content-1" rounded="$bew-radius" shadow="$bew-shadow-2" mt--4
>
<h3
text="3xl $bew-text-1" font-bold
<Input v-model="keyword" w-250px @enter="handleSearch" />
<Button type="primary" @click="handleSearch">
<template #left>
<tabler:search />
</template>
</Button>
<!-- <h3
text="2xl $bew-text-1" font-bold w-150px
>
{{ activatedFavoriteTitle }}
</h3>
</div> -->
<Empty v-if="favoriteResources.length === 0 && !isLoading" />
{{ selectedCategory?.title }}
</h3> -->
</div>
<Empty v-if="favoriteResources.length === 0 && !isLoading" m="t-55px b-6" />
<template v-else>
<!-- favorite list -->
<div grid="~ 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-2 gap-4">
<div grid="~ 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-2 gap-4" m="t-55px b-6">
<VideoCard
v-for="item in favoriteResources" :id="item.id" :key="item.id"
:item="item"
@@ -211,7 +201,7 @@ function jumpToLoginPage() {
</picture>
<h3 text="3xl white" fw-600 style="text-shadow: 0 0 12px rgba(0,0,0,.3)">
{{ activatedFavoriteTitle }}
{{ selectedCategory?.title }}
</h3>
<p flex="~ col" gap-4>
<Button
@@ -230,7 +220,7 @@ function jumpToLoginPage() {
border-b="1 color-[rgba(255,255,255,.2)]"
lh-30px px-4 cursor-pointer hover:bg="[rgba(255,255,255,.35)]"
duration-300 color-white flex justify-between
:style="{ background: item.id === activatedCategoryId ? 'rgba(255,255,255,.35)' : '' }"
:style="{ background: item.id === selectedCategory?.id ? 'rgba(255,255,255,.35)' : '' }"
@click="changeCategory(item)"
>
<span>{{ item.title }}</span> <span ml-2 color-white color-opacity-60>{{ item.media_count }}</span>