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

refactor: #204

Browse Source
This commit is contained in:
Hakadao
2024-02-15 02:09:44 +08:00
parent 2adad911f1
commit f7f7698403
8 changed files with 77 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/LongCoverCard/LongCoverCard.vue
View File

@@ -18,20 +18,20 @@ defineProps<{
</script>
<template>
<div
<a
class="group"
:style="{
display: horizontal ? 'flex' : 'block',
}"
gap-4
class="group"
hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
:href="url" target="_blank" rel="noopener noreferrer"
gap-4 hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
transition="all ease-in-out 300"
rounded="$bew-radius" h-fit
>
<!-- Cover -->
<a
<div
:style="{ width: horizontal ? '170px' : '100%' }"
:href="url" target="_blank" tabindex="-1" block
tabindex="-1" block
rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
>
<div aspect="12/16" overflow-hidden rounded="$bew-radius">
@@ -118,7 +118,7 @@ defineProps<{
/> -->
</div>
</div>
</a>
</div>
<div
flex-1
:style="{
@@ -127,8 +127,7 @@ defineProps<{
>
<p un-text="lg" mb-4>
<a
:href="url"
target="_blank"
:href="url" target="_blank" rel="noopener noreferrer"
class="keep-two-lines"
:title="title"
>
@@ -150,5 +149,5 @@ defineProps<{
<span> {{ desc }} </span>
</div>
</div>
</div>
</a>
</template>

39
src/components/TopBar/components/HistoryPop.vue
View File

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
import { useDateFormat } from '@vueuse/core'
import type { HistoryItem } from '../types'
import { HistoryType } from '../types'
import { removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
import { calcCurrentTime } from '~/utils/dataFormatter'
const { t } = useI18n()
@@ -199,7 +199,10 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
{{ tab.name }}
</div>
</div>
<a href="https://www.bilibili.com/account/history" target="_blank" flex="~" items="center">
<a
href="https://www.bilibili.com/account/history" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
flex="~ items-center"
>
<span text="sm">{{ $t('common.view_all') }}</span>
</a>
</header>
@@ -208,7 +211,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
<main overflow-hidden rounded="$bew-radius">
<div
ref="historysWrap"
flex="~ col gap-4"
flex="~ col gap-2"
h="430px"
overflow="y-scroll"
p="x-4"
@@ -216,36 +219,32 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
<!-- loading -->
<Loading
v-if="isLoading && historys.length === 0"
pos="absolute left-0"
bg="$bew-content-1"
z="1"
w="full"
h="full"
flex="~"
items="center"
border="rounded-$bew-radius"
/>
<!-- empty -->
<Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
<Empty
v-if="!isLoading && historys.length === 0"
pos="absolute top-0 left-0"
bg="$bew-content-1"
z="0" w="full" h="full"
flex="~ items-center"
/>
<!-- historys -->
<transition-group name="list">
<TransitionGroup name="list">
<a
v-for="historyItem in historys"
:key="historyItem.kid"
:href="getHistoryUrl(historyItem)"
target="_blank"
hover:bg="$bew-fill-2"
:href="getHistoryUrl(historyItem)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
m="last:b-4 first:t-50px" p="2"
rounded="$bew-radius"
p="2"
m="first:t-50px last:b-4"
class="group"
transition="duration"
hover:bg="$bew-fill-2"
duration-300
block
>
<section flex="~ gap-4" item-start>
<section flex="~ gap-4 item-start">
<!-- Video cover, live cover, ariticle cover -->
<div
bg="$bew-fill-1"
@@ -381,7 +380,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
</div>
</section>
</a>
</transition-group>
</TransitionGroup>
<!-- loading -->
<Transition name="fade">

32
src/components/TopBar/components/MomentsPop.vue
View File

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
import { isNewArticle, isNewVideo, setLastestOffsetID } from '../notify'
import { MomentType } from '../types'
import type { MomentItem } from '../types'
import { getCSRF, getUserID, smoothScrollToTop } from '~/utils/main'
import { getCSRF, getUserID, isHomePage, smoothScrollToTop } from '~/utils/main'
import { calcTimeSince } from '~/utils/dataFormatter'
const { t } = useI18n()
@@ -308,7 +308,10 @@ function toggleWatchLater(aid: number) {
{{ tab.name }}
</div>
</div>
<a href="https://t.bilibili.com/" target="_blank" flex="~" items="center">
<a
href="https://t.bilibili.com/" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
flex="~ items-center"
>
<span text="sm">{{ $t('common.view_all') }}</span>
</a>
</header>
@@ -317,7 +320,7 @@ function toggleWatchLater(aid: number) {
<main overflow-hidden rounded="$bew-radius">
<div ref="momentsWrap" h="430px" overflow="y-scroll x-hidden" p="x-4">
<!-- loading -->
<loading
<Loading
v-if="isLoading && moments.length === 0"
h="full"
flex="~"
@@ -329,12 +332,8 @@ function toggleWatchLater(aid: number) {
v-if="!isLoading && moments.length === 0"
pos="absolute top-0 left-0"
bg="$bew-content-1"
z="0"
w="full"
h="full"
flex="~"
items="center"
border="rounded-$bew-radius"
z="0" w="full" h="full"
flex="~ items-center"
/>
<!-- moments -->
@@ -342,17 +341,12 @@ function toggleWatchLater(aid: number) {
<a
v-for="(moment, index) in moments"
:key="index"
:href="moment.url"
target="_blank"
flex="~"
justify="between"
m="b-4"
first:m="t-16"
p="2"
:href="moment.url" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
flex="~ justify-between"
m="b-2 first:t-50px" p="2"
rounded="$bew-radius"
hover:bg="$bew-fill-2"
transition="all duration-300"
cursor="pointer"
duration-300
pos="relative"
>
<!-- new moment dot -->
@@ -373,7 +367,7 @@ function toggleWatchLater(aid: number) {
? `https://space.bilibili.com/${moment.uid}`
: moment.url
"
target="_blank"
:target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
>
<img
:src="`${moment.face}@50w_50h_1c`"

36
src/components/VideoCard/VideoCard.vue
View File

@@ -195,7 +195,10 @@ function handelMouseLeave() {
hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
:style="{ contentVisibility }"
>
<div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
<a
:style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
:href="videoUrl" target="_blank" rel="noopener noreferrer"
>
<!-- Cover -->
<div
:style="{ width: horizontal ? '300px' : '100%' }"
@@ -279,7 +282,7 @@ function handelMouseLeave() {
class="opacity-0 group-hover/cover:opacity-100"
transform="scale-70 group-hover/cover:scale-100"
duration-300
@click.stop="toggleWatchLater"
@click.prevent="toggleWatchLater"
>
<Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
<mingcute:carplay-line />
@@ -290,15 +293,13 @@ function handelMouseLeave() {
</button>
<!-- Video cover -->
<a :href="videoUrl" target="_blank">
<img
:src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
loading="lazy"
w="full" max-w-full align-middle aspect-video
bg="cover center"
rounded="$bew-radius"
>
</a>
<img
:src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
loading="lazy"
w="full" max-w-full align-middle aspect-video
bg="cover center"
rounded="$bew-radius"
>
</div>
<!-- Other Information -->
@@ -314,10 +315,8 @@ function handelMouseLeave() {
<a
v-if="authorFace"
m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden"
object="center cover"
bg="$bew-fill-4" cursor="pointer"
style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
:href="`//space.bilibili.com/${mid}`" target="_blank"
object="center cover" bg="$bew-fill-4" cursor="pointer"
:href="`//space.bilibili.com/${mid}`" target="_blank" rel="noopener noreferrer"
@click.stop=""
>
<img
@@ -335,8 +334,9 @@ function handelMouseLeave() {
text="lg overflow-ellipsis $bew-text-1"
cursor="pointer"
>
<a :href="videoUrl" target="_blank" :title="title">
{{ title }}</a>
<a :href="videoUrl" target="_blank" :title="title" rel="noopener noreferrer">
{{ title }}
</a>
</h3>
<!-- <div
@@ -466,7 +466,7 @@ function handelMouseLeave() {
</div>
</div>
</div>
</div>
</a>
</div>
<!-- skeleton -->

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

@@ -195,7 +195,6 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
<TransitionGroup name="list">
<VideoCard
v-for="item in favoriteResources" :id="item.id" :key="item.id"
:item="item"
:duration="item.duration"
:title="item.title"
:cover="item.cover"
@@ -214,7 +213,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
rounded="$bew-radius"
text="!white xl"
bg="black opacity-60 hover:$bew-error-color-80"
@click.stop="handleUnfavorite(item)"
@click.prevent="handleUnfavorite(item)"
>
<Tooltip :content="$t('favorites.unfavorite')" placement="bottom" type="dark">
<ic-baseline-clear />

28
src/contentScripts/views/History/History.vue
View File

@@ -261,12 +261,12 @@ function jumpToLoginPage() {
<transition-group name="list">
<a
v-for="(historyItem, index) in historyList"
:key="historyItem.kid"
:key="historyItem.kid" :href="getHistoryUrl(historyItem)"
target="_blank"
block
class="group"
flex
cursor-pointer
@click="openLinkToNewTab(`${getHistoryUrl(historyItem)}`)"
>
<!-- time slot -->
<div
@@ -396,24 +396,22 @@ function jumpToLoginPage() {
<!-- Description -->
<div flex justify-between w-full>
<div flex="~ col">
<a :href="`${getHistoryUrl(historyItem)}`" target="_blank" @click.stop="">
<a
:href="`${getHistoryUrl(historyItem)}`" target="_blank" rel="noopener noreferrer"
:title="historyItem.show_title ? historyItem.show_title : historyItem.title"
>
<h3
class="keep-two-lines"
overflow="hidden"
text="lg overflow-ellipsis"
>
{{
historyItem.show_title
? historyItem.show_title
: historyItem.title
}}
{{ historyItem.show_title ? historyItem.show_title : historyItem.title }}
</h3>
</a>
<a
un-text="$bew-text-2 sm"
m="t-4 b-2"
flex="~"
items-center
flex="~ items-center"
cursor-pointer
w-fit
rounded="$bew-radius"
@@ -421,13 +419,7 @@ function jumpToLoginPage() {
hover:bg="$bew-theme-color-10"
duration-300
pr-2
:href="
historyItem.author_mid
? `https://space.bilibili.com/${historyItem.author_mid}`
: historyItem.uri
"
target="_blank"
@click.stop=""
:href="historyItem.author_mid ? `https://space.bilibili.com/${historyItem.author_mid}` : historyItem.uri" target="_blank" rel="noopener noreferrer"
>
<img
:src="
@@ -472,7 +464,7 @@ function jumpToLoginPage() {
opacity-0 group-hover:opacity-100
p-2
duration-300
@click.stop="deleteHistoryItem(index, historyItem)"
@click.prevent="deleteHistoryItem(index, historyItem)"
>
<tabler:trash />
</button>

14
src/contentScripts/views/WatchLater/WatchLater.vue
View File

@@ -117,11 +117,9 @@ function jumpToLoginPage() {
<a
v-for="(item, index) in watchLaterList"
:key="item.aid"
block
:href="`https://www.bilibili.com/video/${item.bvid}`" target="_blank" rel="noopener noreferrer"
class="group"
flex
cursor-pointer
@click="openLinkToNewTab(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)"
block flex cursor-pointer
>
<section
rounded="$bew-radius"
@@ -197,8 +195,7 @@ function jumpToLoginPage() {
class="keep-two-lines"
overflow="hidden"
un-text="lg overflow-ellipsis"
:href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
@click.stop=""
:href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank" rel="noopener noreferrer"
>
{{ item.title }}
</a>
@@ -214,8 +211,7 @@ function jumpToLoginPage() {
hover:bg="$bew-theme-color-10"
duration-300
pr-2
:href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
@click.stop=""
:href="`//space.bilibili.com/${item.owner.mid}`" target="_blank" rel="noopener noreferrer"
>
<img
:src="removeHttpFromUrl(`${item.owner.face}@40w_40h_1c`)"
@@ -245,7 +241,7 @@ function jumpToLoginPage() {
opacity-0 group-hover:opacity-100
p-2
duration-300
@click.stop="deleteWatchLaterItem(index, item.aid)"
@click.prevent="deleteWatchLaterItem(index, item.aid)"
>
<tabler:trash />
</button>

3
src/utils/main.ts
View File

@@ -8,6 +8,7 @@ export function getCookie(name: string): string {
const parts: Array<string> = value.split(`; ${name}=`)
if (parts.length === 2)
return parts?.pop()?.split(';').shift() || ''
return ''
}
/**
@@ -43,7 +44,7 @@ export function removeHttpFromUrl(url: string): string {
}
export function openLinkToNewTab(url: string) {
window.open(url, '_blank')
window.open(url, '_blank', 'noopener noreferrer')
}
/**