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

chore: 部分寫法修正

Browse Source
This commit is contained in:
Hakadao
2023-01-29 03:20:45 +08:00
parent 17b5db88ec
commit b44df2dddc
12 changed files with 76 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/BewSelect.vue
View File

@@ -17,12 +17,13 @@ export default defineComponent({
}
},
created() {
if (!this.options) return
if (!this.options)
return
this.label = `${this.options.find((item: OptionType) => item.value === this.modelValue)?.label}`
},
methods: {
onClickOption(val: {value: string; label: string}) {
onClickOption(val: { value: string; label: string }) {
window.removeEventListener('click', () => {})
this.label = val.label
this.$emit('update:modelValue', val.value)
@@ -77,7 +78,7 @@ export default defineComponent({
display="inline-block"
transform="~ rotate-45 -translate-y-1/4"
transition="all duration-300"
></div>
/>
</div>
<transition>
<div
@@ -103,7 +104,7 @@ export default defineComponent({
cursor="pointer"
@click="onClickOption(option)"
>
<span v-text="option.label"></span>
<span v-text="option.label" />
</div>
</div>
</transition>
@@ -113,11 +114,11 @@ export default defineComponent({
<style lang="scss" scoped>
.v-enter-active,
.v-leave-active {
@apply transition-all duration-500;
--at-apply: transition-all duration-500;
}
.v-enter-from,
.v-leave-to {
@apply opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm;
--at-apply: opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm;
}
</style>

12
src/components/Settings.vue
View File

@@ -122,29 +122,29 @@ export default defineComponent({
<style lang="scss" scoped>
#settings-window {
@apply fixed top-1/5 left-1/2 w-700px
--at-apply: fixed top-1/5 left-1/2 w-700px
transform -translate-x-1/2
rounded-$bew-radius p-8
bg-$bew-content-solid-1;
box-shadow: var(--bew-shadow-3);
.settings-item {
@apply flex justify-between items-center py-2 text-base;
--at-apply: flex justify-between items-center py-2 text-base;
.desc {
@apply text-sm text-$bew-text-3;
--at-apply: text-sm text-$bew-text-3;
}
> *:first-child {
@apply w-5/7 mr-4;
--at-apply: w-5/7 mr-4;
}
> *:last-child {
@apply w-2/7;
--at-apply: w-2/7;
}
}
}
button,
select {
@apply w-120px
--at-apply: w-120px
}
</style>

16
src/components/Topbar/Topbar.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { Ref, UnwrapNestedRefs } from 'vue'
import { Transition, onMounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type { UnReadDm, UnReadMessage, UserInfo } from './types'
import { updateInterval } from './notify'
import { getUserID } from '~/utils'
@@ -14,7 +13,6 @@ const props = withDefaults(defineProps<Props>(), {
showSearchBar: true,
})
const { t } = useI18n()
const mid = getUserID() || ''
const userInfo = reactive<UserInfo | {}>({}) as UnwrapNestedRefs<UserInfo>
@@ -230,7 +228,7 @@ function getNewMomentsCount() {
<div v-if="!isLogin" class="right-side-item">
<a href="https://passport.bilibili.com/login" class="login">
<ic:outline-account-circle class="text-base mr-2" />{{
t('topbar.sign_in')
$t('topbar.sign_in')
}}
</a>
</div>
@@ -301,7 +299,7 @@ function getNewMomentsCount() {
<a
href="https://message.bilibili.com"
target="_blank"
:title="t('topbar.notifications')"
:title="$t('topbar.notifications')"
>
<tabler:bell />
</a>
@@ -328,7 +326,7 @@ function getNewMomentsCount() {
<a
href="https://t.bilibili.com"
target="_blank"
:title="t('topbar.moments')"
:title="$t('topbar.moments')"
>
<tabler:windmill />
</a>
@@ -348,7 +346,7 @@ function getNewMomentsCount() {
<a
:href="`https://space.bilibili.com/${mid}/favlist`"
target="_blank"
:title="t('topbar.favorites')"
:title="$t('topbar.favorites')"
>
<tabler:star />
</a>
@@ -371,7 +369,7 @@ function getNewMomentsCount() {
<a
href="https://www.bilibili.com/account/history"
target="_blank"
:title="t('topbar.history')"
:title="$t('topbar.history')"
>
<tabler:clock />
</a>
@@ -386,7 +384,7 @@ function getNewMomentsCount() {
<a
href="https://member.bilibili.com/platform/home"
target="_blank"
:title="t('topbar.creative_center')"
:title="$t('topbar.creative_center')"
>
<tabler:bulb />
</a>
@@ -434,7 +432,7 @@ function getNewMomentsCount() {
>
<tabler:upload flex-shrink-0 />
<span m="l-2" display="xl:block none">{{
t('topbar.upload')
$t('topbar.upload')
}}</span>
</a>

32
src/components/Topbar/TopbarFavoritesPop.vue
View File

@@ -1,10 +1,8 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import type { Ref } from 'vue'
import { TransitionGroup, onMounted, reactive, ref, watch } from 'vue'
import type { FavoriteCategory, FavoriteResource } from './types'
import { calcCurrentTime, getUserID } from '~/utils'
const { t } = useI18n()
import { calcCurrentTime, getUserID, removeHttpFromUrl } from '~/utils'
const favoriteCategories = reactive<Array<FavoriteCategory>>([])
const favoriteResources = reactive<Array<FavoriteResource>>([])
@@ -176,7 +174,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
</h3>
<a :href="favoritesPageUrl" target="_blank" flex="~" items="center">
<span text="sm">{{ t('common.view_all') }}</span>
<span text="sm">{{ $t('common.view_all') }}</span>
</a>
</div>
@@ -223,7 +221,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
h="full"
flex="~"
items="center"
border="rounded-$bew-radius"
rounded="$bew-radius"
/>
<!-- empty -->
@@ -241,25 +239,25 @@ function scrollToTop(element: HTMLElement, duration: number) {
:href="`//www.bilibili.com/video/${item.bvid}`"
target="_blank"
hover:bg="$bew-fill-2"
border="rounded-$bew-radius"
rounded="$bew-radius"
p="2"
m="first:t-50px last:b-4"
class="group"
transition="~ duration-300"
>
<section flex="~ gap-4" align="item-start">
<section flex="~ gap-4" item-start>
<div
bg="$bew-fill-1"
w="150px"
flex="shrink-0"
border="rounded-$bew-radius-half"
rounded="$bew-radius-half"
overflow="hidden"
>
<div pos="relative">
<img
w="150px"
class="aspect-video"
:src="`${item.cover.replace('http:', '')}@256w_144h_1c`"
:src="`${removeHttpFromUrl(item.cover)}@256w_144h_1c`"
:alt="item.title"
bg="contain"
>
@@ -269,7 +267,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
m="1"
p="x-2 y-1"
text="white xs"
border="rounded-full"
rounded-full
>
{{ calcCurrentTime(item.duration) }}
</div>
@@ -279,13 +277,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
<!-- Description -->
<div>
<h3
style="
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
"
overflow="hidden"
text="overflow-ellipsis"
class="keep-two-lines"
>
{{ item.title }}
</h3>
@@ -293,7 +285,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
text="$bew-text-2 sm"
m="t-4"
flex="~"
align="items-center"
items-center
>
{{ item.upper.name }}
</div>
@@ -316,10 +308,10 @@ function scrollToTop(element: HTMLElement, duration: number) {
}
.list-enter-from,
.list-leave-to {
@apply opacity-0 transform translate-y-2 transform-gpu;
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
.activated-category {
@apply bg-$bew-theme-color text-white;
--at-apply: bg-$bew-theme-color text-white;
}
</style>

10
src/components/Topbar/TopbarHistoryPop.vue
View File

@@ -401,23 +401,23 @@ function scrollToTop(element: HTMLElement, duration: number) {
}
.list-enter-from,
.list-leave-to {
@apply opacity-0 transform translate-y-2 transform-gpu;
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
.tab {
@apply relative text-$bew-text-2;
--at-apply: relative text-$bew-text-2;
&::after {
@apply absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
--at-apply: absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
content: '';
}
}
.tab-selected {
@apply font-bold text-$bew-text-1;
--at-apply: font-bold text-$bew-text-1;
&::after {
@apply scale-x-80 opacity-40;
--at-apply: scale-x-80 opacity-40;
}
}
</style>

12
src/components/Topbar/TopbarMomentsPop.vue
View File

@@ -417,7 +417,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
w="82px"
h="46px"
m="l-4"
rounded="$bew-radius"
rounded="$bew-radius-half"
>
</div>
</a>
@@ -436,23 +436,23 @@ function scrollToTop(element: HTMLElement, duration: number) {
}
.list-enter-from,
.list-leave-to {
@apply opacity-0 transform translate-y-2 transform-gpu;
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
.tab {
@apply relative text-$bew-text-2;
--at-apply: relative text-$bew-text-2;
&::after {
@apply absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
--at-apply: absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
content: '';
}
}
.tab-selected {
@apply font-bold text-$bew-text-1;
--at-apply: font-bold text-$bew-text-1;
&::after {
@apply scale-x-80 opacity-40;
--at-apply: scale-x-80 opacity-40;
}
}
</style>

4
src/components/Topbar/TopbarUploadPop.vue
View File

@@ -266,12 +266,12 @@
<style lang="scss" scoped>
.upload-item {
@apply flex items-center p-2 rounded-$bew-radius mb-1 last:mb-0
--at-apply: flex items-center p-2 rounded-$bew-radius mb-1 last:mb-0
transition-all duration-300
hover:bg-$bew-fill-2;
.item-icon {
@apply mr-2;
--at-apply: mr-2;
}
}

24
src/components/Topbar/TopbarUserPanelPop.vue
View File

@@ -145,59 +145,59 @@ export default defineComponent({
<style lang="scss" scoped>
#user-info-panel {
@apply p-4 rounded-$bew-radius w-300px -z-1
--at-apply: p-4 rounded-$bew-radius w-300px -z-1
bg-$bew-content-solid-1;
box-shadow: var(--bew-shadow-3);
}
#base-info {
@apply mt-8 text-xl font-medium flex items-center justify-center;
--at-apply: mt-8 text-xl font-medium flex items-center justify-center;
}
#channel-info {
@apply grid grid-cols-3 gap-x-2 mb-2;
--at-apply: grid grid-cols-3 gap-x-2 mb-2;
a {
@apply p-2 m-0 rounded-$bew-radius text-sm
--at-apply: p-2 m-0 rounded-$bew-radius text-sm
flex flex-col items-center transition-all duration-300
bg-$bew-fill-1
// hover:bg-$bew-theme-color
hover:text-white;
> * {
// @apply transition-all duration-300;
// --at-apply: transition-all duration-300;
}
&:hover .num + div{
@apply text-white;
--at-apply: text-white;
}
.num {
@apply font-semibold text-xl;
--at-apply: font-semibold text-xl;
+ div {
@apply text-$bew-text-2 mt-1 text-xs font-semibold;
--at-apply: text-$bew-text-2 mt-1 text-xs font-semibold;
}
}
}
}
#other-link {
@apply flex justify-between flex-col mt-4;
--at-apply: flex justify-between flex-col mt-4;
a {
@apply px-4 py-2 mb-1 flex justify-between items-center
--at-apply: px-4 py-2 mb-1 flex justify-between items-center
rounded-$bew-radius transition-all duration-300
hover:bg-$bew-fill-2;
span {
@apply text-$bew-text-2;
--at-apply: text-$bew-text-2;
}
}
}
#logout {
@apply text-red-400 important:block px-4 py-2 rounded-$bew-radius
--at-apply: text-red-400 important:block px-4 py-2 rounded-$bew-radius
duration-300 cursor-pointer
hover:bg-$bew-fill-2;
}

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

@@ -1,7 +1,12 @@
<script lang="ts" setup>
import type { Video } from './types'
import { accessKey, language } from '~/logic/index'
import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
import {
calcCurrentTime,
calcTimeSince,
numFormatter,
removeHttpFromUrl,
} from '~/utils'
import { LanguageType } from '~/enums/appEnums'
const props = defineProps<{
@@ -157,7 +162,7 @@ function gotoChannel(mid: number) {
>
<!-- Video cover -->
<img
:src="`${videoData.pic.replace('http:', '')}@672w_378h_1c`"
:src="`${removeHttpFromUrl(videoData.pic)}@672w_378h_1c`"
loading="lazy"
class="aspect-auto"
w="full"
@@ -172,7 +177,7 @@ function gotoChannel(mid: number) {
<!-- Shadow of the video cover -->
<img
:src="`${videoData.pic.replace('http:', '')}@672w_378h_1c`"
:src="`${removeHttpFromUrl(videoData.pic)}@672w_378h_1c`"
loading="lazy"
class="aspect-video"
w="full"
@@ -202,10 +207,7 @@ function gotoChannel(mid: number) {
@click="gotoChannel(videoData.owner.mid)"
>
<img
:src="`${`${videoData.owner.face}`.replace(
'http:',
'',
)}@60w_60h_1c`"
:src="`${removeHttpFromUrl(videoData.owner.face)}@60w_60h_1c`"
width="48"
height="48"
loading="lazy"
@@ -323,7 +325,7 @@ function gotoChannel(mid: number) {
<style lang="scss" scoped>
.video-card.is-dislike {
> *:not(#dislike-control) {
@apply invisible pointer-events-none duration-0 transition-none;
--at-apply: invisible pointer-events-none duration-0 transition-none;
}
}
</style>

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

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
// import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
import type { AnimeItem } from './types'
import { getUserID, removeHttpFromUrl } from '~/utils'

4
src/contentScripts/views/App.vue
View File

@@ -123,7 +123,7 @@ function changeActivatePage(pageName: AppPage) {
.topbar-enter-from,
.topbar-leave-to {
@apply opacity-0 transform -translate-y-full;
--at-apply: opacity-0 transform -translate-y-full;
}
.fade-enter-active,
@@ -133,7 +133,7 @@ function changeActivatePage(pageName: AppPage) {
.fade-enter-from,
.fade-leave-to {
@apply opacity-0;
--at-apply: opacity-0;
}
.tab-item {

12
src/styles/main.scss
View File

@@ -27,7 +27,7 @@ body {
}
.btn {
@apply px-4 py-2 rounded-$bew-radius inline-block
--at-apply: px-4 py-2 rounded-$bew-radius inline-block
cursor-pointer transform duration-300
filter outline-none
border-2 border-solid border-$bew-theme-color
@@ -39,7 +39,7 @@ body {
}
.line-btn {
@apply px-4 py-2 rounded-$bew-radius inline-block
--at-apply: px-4 py-2 rounded-$bew-radius inline-block
cursor-pointer transform duration-300
bg-transparent filter
border-2 border-solid border-$bew-fill-4
@@ -49,21 +49,21 @@ body {
}
.icon-btn {
@apply inline-block cursor-pointer select-none
--at-apply: inline-block cursor-pointer select-none
opacity-75 transition duration-200 ease-in-out
hover:opacity-100 hover:text-$bew-theme-color;
font-size: 1rem;
}
.chk-btn {
@apply flex px-4 py-2 items-center select-none;
--at-apply: flex px-4 py-2 items-center select-none;
input {
@apply ml-4;
--at-apply: ml-4;
}
}
select {
@apply px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
--at-apply: px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
text-center appearance-none text-$bew-text-1 outline-none;
}