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

Merge pull request #294 from hakadao/main

Browse Source 
sync: main to dev
This commit is contained in:
Hakadao
2024-02-15 02:51:03 +08:00
committed by GitHub
parent 5864e2b09a cbf8d8bc47
commit bce74ba617
13 changed files with 107 additions and 122 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>

24
src/components/TopBar/components/FavoritesPop.vue
View File

@@ -2,7 +2,7 @@
import type { Ref } from 'vue'
import { onMounted, reactive, ref, watch } from 'vue'
import type { FavoriteCategory, FavoriteResource } from '../types'
import { getUserID, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
import { calcCurrentTime } from '~/utils/dataFormatter'
const favoriteCategories = reactive<Array<FavoriteCategory>>([])
@@ -148,20 +148,20 @@ defineExpose({
{{ activatedFavoriteTitle }}
</h3>
<a :href="favoritesPageUrl" target="_blank" flex="~" items="center">
<a
:href="favoritesPageUrl" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
flex="~" items="center"
>
<span text="sm">{{ $t('common.view_all') }}</span>
</a>
</header>
<main flex="~" overflow-hidden rounded="$bew-radius">
<aside
w="120px"
h="430px"
overflow="y-scroll"
un-border="rounded-l-$bew-radius"
flex="shrink-0"
w="120px" h="430px" overflow="y-scroll" rounded="l-$bew-radius"
flex="shrink-0" bg="$bew-fill-1"
>
<ul grid="~ cols-1" bg="$bew-fill-2">
<ul grid="~ cols-1">
<li
v-for="item in favoriteCategories"
:key="item.id"
@@ -180,7 +180,7 @@ defineExpose({
<!-- Favorite videos wrapper -->
<div
ref="favoriteVideosWrap"
flex="~ col gap-4 1"
flex="~ col gap-2 1"
h="430px"
overflow="y-scroll"
p="x-4"
@@ -211,12 +211,10 @@ defineExpose({
<a
v-for="item in favoriteResources"
:key="item.id"
:href="`//www.bilibili.com/video/${item.bvid}`"
target="_blank"
:href="`//www.bilibili.com/video/${item.bvid}`" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
hover:bg="$bew-fill-2"
rounded="$bew-radius"
p="2"
m="first:t-50px last:b-4"
m="first:t-50px last:b-4" p="2"
class="group"
transition="~ duration-300"
>

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`"

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

@@ -22,6 +22,7 @@ interface Props {
capsuleText?: string
bvid?: string
aid?: number
uri?: string
/** If you want to show preview video, you should set the cid value */
cid?: number
epid?: number
@@ -42,6 +43,8 @@ const videoUrl = computed(() => {
return `https://www.bilibili.com/video/${props.bvid ?? `av${props.aid}`}`
else if (props.epid)
return `https://www.bilibili.com/bangumi/play/ep${props.epid}`
else if (props.uri)
return props.uri
else
return ''
})
@@ -192,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%' }"
@@ -276,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 />
@@ -287,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 -->
@@ -311,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
@@ -332,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
@@ -463,7 +466,7 @@ function handelMouseLeave() {
</div>
</div>
</div>
</div>
</a>
</div>
<!-- skeleton -->

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

@@ -204,7 +204,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"
@@ -223,7 +222,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 />

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

@@ -2,7 +2,7 @@
import { useDateFormat } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
import { getCSRF, removeHttpFromUrl } from '~/utils/main'
import { calcCurrentTime } from '~/utils/dataFormatter'
import { Business } from '~/models/video/history'
import type { List as HistoryItem, HistoryResult } from '~/models/video/history'
@@ -241,12 +241,12 @@ function jumpToLoginPage() {
<TransitionGroup 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
@@ -376,24 +376,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"
@@ -401,13 +399,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="
@@ -452,7 +444,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>

4
src/contentScripts/views/Home/components/ForYou.vue
View File

@@ -201,6 +201,7 @@ function jumpToLoginPage() {
:published-timestamp="video.pubdate"
:bvid="video.bvid"
:cid="video.cid"
:uri="video.uri"
show-preview
/>
</template>
@@ -219,7 +220,8 @@ function jumpToLoginPage() {
:bvid="video.bvid"
:view-str="video.cover_left_text_1"
:danmaku-str="video.cover_left_text_2"
:cid="video?.player_args?.cid "
:cid="video?.player_args?.cid"
:uri="video.uri"
show-preview
/>
</template>

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

@@ -116,11 +116,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"
@@ -196,8 +194,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>
@@ -213,8 +210,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`)"
@@ -244,7 +240,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>

7
src/styles/adaptedStyles/comments.scss
View File

@@ -57,12 +57,7 @@
color: var(--bew-theme-color-80);
}
.reply-content-container .reply-content .icon {
filter: saturate(0) brightness(2)
drop-shadow(0 0 1px var(--bew-theme-color))
drop-shadow(0 0 4px var(--bew-theme-color));
}
.reply-content-container .reply-content .icon,
.bb-comment .comment-list .list-item .text .jump-img,
.comment-bilibili-fold .comment-list .list-item .text .jump-img,
.bb-comment .comment-list .list-item .text-con .jump-img,

8
src/styles/main.scss
View File

@@ -31,8 +31,12 @@ html.bewly-design > ::-webkit-scrollbar-track {
}
::selection {
color: white;
background: var(--bew-theme-color-80);
color: var(--bew-text-1);
background: var(--bew-fill-2);
}
.dark ::selection {
background: var(--bew-fill-3);
}
html.bewly-design,

7
src/styles/variables.scss
View File

@@ -5,8 +5,11 @@
--bew-filter-glass: blur(20px) saturate(180%);
--bew-filter-icon-glow: saturate(0) brightness(2)
drop-shadow(0 0 2px var(--bew-theme-color))
drop-shadow(0 0 4px var(--bew-theme-color));
drop-shadow(0 0 0.2px white)
drop-shadow(0 0 0.5px var(--bew-theme-color))
drop-shadow(0 0 0.5px var(--bew-theme-color))
drop-shadow(0 0 0.5px var(--bew-theme-color))
drop-shadow(0 0 2px var(--bew-theme-color-80));
// #region shadow
--bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),

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')
}
/**