add: i18n support

This commit is contained in:
Hakadao
2022-04-06 22:26:58 +08:00
parent 0798a0d664
commit 02e5dcbded
18 changed files with 728 additions and 228 deletions

View File

@@ -1,60 +1,3 @@
<template>
<div class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-30" z="9998" @click="close"></div>
<div id="settings-window" z="9999">
<div
class="absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2"
text="2xl"
font="leading-0"
bg="$bew-content-solid-1"
w="32px"
h="32px"
p="1"
rounded="full"
shadow="md"
cursor="pointer"
@click="close"
>
<ic-baseline-clear />
</div>
<div text="3xl" m="b-4">
Settings
</div>
<div class="settings-item">
<div>
Authorize BewlyBewly to use Access Key
<br />
<span class="desc">This change will make you able to get some suggested videos</span>
</div>
<button
v-if="accessKey + '' === 'undefined' || accessKey + '' === 'null'"
ref="authorizeBtn"
class="btn"
@click="onAuthorize"
>
Authorize
</button>
<button v-else class="line-btn" @click="onRevoke">
<span>Revoke</span>
</button>
</div>
<div class="settings-item">
<div>
Topbar visiable
<br />
<span class="desc">Compatible with bilibili evolved</span>
</div>
<div>
<label for="topbarVisiable" class="chk-btn" cursor="pointer" pointer="auto">
<template v-if="isShowTopbar">Show</template>
<template v-else>Hidden</template>
<input id="topbarVisiable" v-model="isShowTopbar" type="checkbox" />
</label>
</div>
</div>
</div>
</template>
<script lang="ts">
import { grantAccessKey, revokeAccessKey } from '~/utils/index'
import { isShowTopbar, apperance, accessKey } from '~/logic/storage'
@@ -83,6 +26,63 @@ export default defineComponent({
})
</script>
<template>
<div class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-30" z="9998" @click="close"></div>
<div id="settings-window" z="9999">
<div
class="absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2"
text="2xl"
font="leading-0"
bg="$bew-content-solid-1"
w="32px"
h="32px"
p="1"
rounded="full"
shadow="md"
cursor="pointer"
@click="close"
>
<ic-baseline-clear />
</div>
<div text="3xl" m="b-4">
{{ $t('settings.title') }}
</div>
<div class="settings-item">
<div>
{{ $t('settings.authorize_app') }}
<br />
<span class="desc">{{ $t('settings.authorize_app_desc') }}</span>
</div>
<button
v-if="accessKey + '' === 'undefined' || accessKey + '' === 'null'"
ref="authorizeBtn"
class="btn"
@click="onAuthorize"
>
{{ $t('settings.btn.authorize') }}
</button>
<button v-else class="line-btn" @click="onRevoke">
<span>{{ $t('settings.btn.revoke') }}</span>
</button>
</div>
<div class="settings-item">
<div>
{{ $t('settings.topbar_visiable') }}
<br />
<span class="desc">{{ $t('settings.topbar_visiable_desc') }}</span>
</div>
<div>
<label for="topbarVisiable" class="chk-btn" cursor="pointer" pointer="auto">
<template v-if="isShowTopbar">{{ $t('settings.chk_box.show') }}</template>
<template v-else>{{ $t('settings.chk_box.hidden') }}</template>
<input id="topbarVisiable" v-model="isShowTopbar" type="checkbox" />
</label>
</div>
</div>
</div>
</template>
<style lang="scss">
#settings-window {
@apply fixed top-1/5 left-1/2 w-700px h-1/2

View File

@@ -1,3 +1,45 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const genres = [
{ name: t('topbar.logo_dropdown.anime'), icon: '#channel-anime', href: 'https://www.bilibili.com/anime' },
{ name: t('topbar.logo_dropdown.movies'), icon: '#channel-movie', href: 'https://www.bilibili.com/movie' },
{ name: t('topbar.logo_dropdown.chinese_anime'), icon: '#channel-guochuang', href: 'https://www.bilibili.com/guochuang' },
{ name: t('topbar.logo_dropdown.tv_shows'), icon: '#channel-teleplay', href: 'https://www.bilibili.com/tv' },
{ name: t('topbar.logo_dropdown.variety_shows'), icon: '#channel-zongyi', href: 'https://www.bilibili.com/variety' },
{ name: t('topbar.logo_dropdown.documentary_films'), icon: '#channel-documentary', href: 'https://www.bilibili.com/documentary' },
{ name: t('topbar.logo_dropdown.animations'), icon: '#channel-douga', href: 'https://www.bilibili.com/v/douga' },
{ name: t('topbar.logo_dropdown.gaming'), icon: '#channel-game', href: 'https://www.bilibili.com/v/game' },
{ name: t('topbar.logo_dropdown.kichiku'), icon: '#channel-kichiku', href: 'https://www.bilibili.com/v/kichiku' },
{ name: t('topbar.logo_dropdown.music'), icon: '#channel-music', href: 'https://www.bilibili.com/v/music' },
{ name: t('topbar.logo_dropdown.dance'), icon: '#channel-dance', href: 'https://www.bilibili.com/v/dance' },
{ name: t('topbar.logo_dropdown.cinephile'), icon: '#channel-cinephile', href: 'https://www.bilibili.com/v/cinephile' },
{ name: t('topbar.logo_dropdown.showbiz'), icon: '#channel-ent', href: 'https://www.bilibili.com/v/ent' },
{ name: t('topbar.logo_dropdown.knowledge'), icon: '#channel-knowledge', href: 'https://www.bilibili.com/v/knowledge' },
{ name: t('topbar.logo_dropdown.technology'), icon: '#channel-tech', href: 'https://www.bilibili.com/v/tech' },
{ name: t('topbar.logo_dropdown.news'), icon: '#channel-information', href: 'https://www.bilibili.com/v/information' },
{ name: t('topbar.logo_dropdown.foods'), icon: '#channel-food', href: 'https://www.bilibili.com/v/food' },
{ name: t('topbar.logo_dropdown.life'), icon: '#channel-life', href: 'https://www.bilibili.com/v/life' },
{ name: t('topbar.logo_dropdown.cars'), icon: '#channel-car', href: 'https://www.bilibili.com/v/car' },
{ name: t('topbar.logo_dropdown.fashion'), icon: '#channel-fashion', href: 'https://www.bilibili.com/v/fashion' },
{ name: t('topbar.logo_dropdown.sports'), icon: '#channel-sports', href: 'https://www.bilibili.com/v/sports' },
{ name: t('topbar.logo_dropdown.animals'), icon: '#channel-animal', href: 'https://www.bilibili.com/v/animal' },
{ name: t('topbar.logo_dropdown.vlog'), icon: '#channel-vlog', href: 'https://www.bilibili.com/v/life/daily/#/530003' },
{ name: t('topbar.logo_dropdown.funny'), icon: '#channel-gaoxiao', href: 'https://www.bilibili.com/v/life/funny' },
{ name: t('topbar.logo_dropdown.standalone_gaming'), icon: '#channel-danjiyouxi', href: 'https://www.bilibili.com/v/game/stand_alone' },
{ name: t('topbar.logo_dropdown.vtubers'), icon: '#channel-vtuber', href: 'https://www.bilibili.com/v/virtual' },
{ name: t('topbar.logo_dropdown.charitable_events'), icon: '#channel-love', href: 'https://love.bilibili.com' },
{ name: t('topbar.logo_dropdown.moocs'), icon: '#channel-gongkaike', href: 'https://www.bilibili.com/mooc' },
{ name: t('topbar.logo_dropdown.articles'), icon: '#channel-read', href: 'https://www.bilibili.com/read/home' },
{ name: t('topbar.logo_dropdown.live'), icon: '#channel-live', href: 'https://live.bilibili.com' },
{ name: t('topbar.logo_dropdown.activities'), icon: '#channel-activity', href: 'https://www.bilibili.com/blackboard/activity-list.html' },
{ name: t('topbar.logo_dropdown.paid_courses'), icon: '#channel-zhishi', href: 'https://www.bilibili.com/cheese' },
{ name: t('topbar.logo_dropdown.community'), icon: '#channel-blackroom', href: 'https://www.bilibili.com/blackboard/activity-5zJxM3spoS.html' },
{ name: t('topbar.logo_dropdown.music_plus'), icon: '#channel-musicplus', href: 'https://www.bilibili.com/v/musicplus' },
]
</script>
<template>
<div
style="backdrop-filter: var(--bew-filter-glass); box-shadow: var(--bew-shadow-3);"
@@ -38,45 +80,6 @@
</div>
</template>
<script setup lang="ts">
const genres = [
{ name: 'Anime', icon: '#channel-anime', href: 'https://www.bilibili.com/anime' },
{ name: 'Movies', icon: '#channel-movie', href: 'https://www.bilibili.com/movie' },
{ name: 'Chinese anime', icon: '#channel-guochuang', href: 'https://www.bilibili.com/guochuang' },
{ name: 'TV shows', icon: '#channel-teleplay', href: 'https://www.bilibili.com/tv' },
{ name: 'Variety shows', icon: '#channel-zongyi', href: 'https://www.bilibili.com/variety' },
{ name: 'Documentary films', icon: '#channel-documentary', href: 'https://www.bilibili.com/documentary' },
{ name: 'Animations', icon: '#channel-douga', href: 'https://www.bilibili.com/v/douga' },
{ name: 'Gaming', icon: '#channel-game', href: 'https://www.bilibili.com/v/game' },
{ name: 'Kichiku', icon: '#channel-kichiku', href: 'https://www.bilibili.com/v/kichiku' },
{ name: 'Music', icon: '#channel-music', href: 'https://www.bilibili.com/v/music' },
{ name: 'Dance', icon: '#channel-dance', href: 'https://www.bilibili.com/v/dance' },
{ name: 'Cinephile', icon: '#channel-cinephile', href: 'https://www.bilibili.com/v/cinephile' },
{ name: 'Showbiz', icon: '#channel-ent', href: 'https://www.bilibili.com/v/ent' },
{ name: 'Knowledge', icon: '#channel-knowledge', href: 'https://www.bilibili.com/v/knowledge' },
{ name: 'Technology', icon: '#channel-tech', href: 'https://www.bilibili.com/v/tech' },
{ name: 'News', icon: '#channel-information', href: 'https://www.bilibili.com/v/information' },
{ name: 'Foods', icon: '#channel-food', href: 'https://www.bilibili.com/v/food' },
{ name: 'Life', icon: '#channel-life', href: 'https://www.bilibili.com/v/life' },
{ name: 'Cars', icon: '#channel-car', href: 'https://www.bilibili.com/v/car' },
{ name: 'Fashion', icon: '#channel-fashion', href: 'https://www.bilibili.com/v/fashion' },
{ name: 'Sports', icon: '#channel-sports', href: 'https://www.bilibili.com/v/sports' },
{ name: 'Animals', icon: '#channel-animal', href: 'https://www.bilibili.com/v/animal' },
{ name: 'VLOG', icon: '#channel-vlog', href: 'https://www.bilibili.com/v/life/daily/#/530003' },
{ name: 'Funny', icon: '#channel-gaoxiao', href: 'https://www.bilibili.com/v/life/funny' },
{ name: 'Standalone gaming', icon: '#channel-danjiyouxi', href: 'https://www.bilibili.com/v/game/stand_alone' },
{ name: 'Vtubers & Vups', icon: '#channel-vtuber', href: 'https://www.bilibili.com/v/virtual' },
{ name: 'Charitable events', icon: '#channel-love', href: 'https://love.bilibili.com' },
{ name: 'MOOCs', icon: '#channel-gongkaike', href: 'https://www.bilibili.com/mooc' },
{ name: 'Articles', icon: '#channel-read', href: 'https://www.bilibili.com/read/home' },
{ name: 'Live', icon: '#channel-live', href: 'https://live.bilibili.com' },
{ name: 'Activities', icon: '#channel-activity', href: 'https://www.bilibili.com/blackboard/activity-list.html' },
{ name: 'Paid courses', icon: '#channel-zhishi', href: 'https://www.bilibili.com/cheese' },
{ name: 'Community', icon: '#channel-blackroom', href: 'https://www.bilibili.com/blackboard/activity-5zJxM3spoS.html' },
{ name: 'Music plus', icon: '#channel-musicplus', href: 'https://www.bilibili.com/v/musicplus' },
]
</script>
<style lang="scss" scoped>
.svg-icon {
width: 2em;

View File

@@ -48,27 +48,27 @@ export default defineComponent({
return {
list: [
{
name: 'Replys',
name: this.$t('topbar.noti_dropdown.replys'),
url: 'https://message.bilibili.com/#/reply',
unreadCount: 0,
},
{
name: 'Mentions',
name: this.$t('topbar.noti_dropdown.mentions'),
url: 'https://message.bilibili.com/#/at',
unreadCount: 0,
},
{
name: 'Likes',
name: this.$t('topbar.noti_dropdown.likes'),
url: 'https://message.bilibili.com/#/love',
unreadCount: 0,
},
{
name: 'Messages',
name: this.$t('topbar.noti_dropdown.messages'),
url: 'https://message.bilibili.com/#/system',
unreadCount: 0,
},
{
name: 'Chats',
name: this.$t('topbar.noti_dropdown.chats'),
url: 'https://message.bilibili.com/#/whisper',
unreadCount: 0,
},

View File

@@ -5,7 +5,7 @@
rounded="$bew-radius"
style="box-shadow: var(--bew-shadow-3);"
p="4"
w="180px"
w="150px"
>
<a
class="upload-item"
@@ -60,7 +60,7 @@
/>
</svg>
<div>Article</div>
<div>{{ $t('topbar.upload_dropdown.article') }}</div>
</a>
<a
class="upload-item"
@@ -123,7 +123,7 @@
/>
</svg>
<div>Music</div>
<div>{{ $t('topbar.upload_dropdown.music') }}</div>
</a>
<a
class="upload-item"
@@ -182,7 +182,7 @@
/>
</svg>
<div>Sticker</div>
<div>{{ $t('topbar.upload_dropdown.sticker') }}</div>
</a>
<a
class="upload-item"
@@ -228,7 +228,7 @@
/>
</svg>
<div>Video</div>
<div>{{ $t('topbar.upload_dropdown.video') }}</div>
</a>
<a
class="upload-item"
@@ -259,7 +259,7 @@
/>
</svg>
<div>Management</div>
<div>{{ $t('topbar.upload_dropdown.manager') }}</div>
</a>
</div>
</template>

View File

@@ -54,11 +54,11 @@ export default defineComponent({
class="mr-4"
href="https://account.bilibili.com/account/coin"
target="_blank"
>Money: {{ userInfo.money }}</a>
>{{ $t('topbar.user_dropdown.money') + userInfo.money }}</a>
<a
href="https://pay.bilibili.com/pay-v2-web/bcoin_index"
target="_blank"
>B-coin: {{ userInfo.wallet?.bcoin_balance }}</a>
>{{ $t('topbar.user_dropdown.b_coins') + userInfo.wallet?.bcoin_balance }}</a>
</div>
<div id="channel-info">
<a
@@ -67,7 +67,7 @@ export default defineComponent({
:title="userStat.following"
>
<div class="num">{{ userStat.following ? numFormatter(userStat.following) : '0' }}</div>
<div>following</div>
<div>{{ $t('topbar.user_dropdown.following') }}</div>
</a>
<a
:href="'https://space.bilibili.com/' + mid + '/fans/fans'"
@@ -75,7 +75,7 @@ export default defineComponent({
:title="userStat.follower"
>
<div class="num">{{ userStat.follower ? numFormatter(userStat.follower) : '0' }}</div>
<div>follower</div>
<div>{{ $t('topbar.user_dropdown.followers') }}</div>
</a>
<a
href="https://t.bilibili.com/"
@@ -83,36 +83,36 @@ export default defineComponent({
:title="userStat.dynamic_count"
>
<div class="num">{{ userStat.dynamic_count ? numFormatter(userStat.dynamic_count) : '0' }}</div>
<div>posts</div>
<div>{{ $t('topbar.user_dropdown.posts') }}</div>
</a>
</div>
<div id="other-link">
<a href="https://account.bilibili.com/account/home" target="_blank">
Account settings
{{ $t('topbar.user_dropdown.accout_settings') }}
<tabler:arrow-right />
</a>
<a href="https://member.bilibili.com/v2#/upload-manager/article" target="_blank">
Uploads manager
{{ $t('topbar.user_dropdown.uploads_manager') }}
<tabler:arrow-right />
</a>
<a href="https://pay.bilibili.com/" target="_blank">
B-coin Wallet
{{ $t('topbar.user_dropdown.b_coins_wallet') }}
<tabler:arrow-right />
</a>
<a href="https://show.bilibili.com/orderlist" target="_blank">
Orders
{{ $t('topbar.user_dropdown.orders') }}
<tabler:arrow-right />
</a>
<a href="https://link.bilibili.com/p/center/index" target="_blank">
My stream info
{{ $t('topbar.user_dropdown.my_stream_info') }}
<tabler:arrow-right />
</a>
<a href="https://www.bilibili.com/cheese/mine/list" target="_blank">
My course
{{ $t('topbar.user_dropdown.my_courses') }}
<tabler:arrow-right />
</a>
<div id="logout" @click="logout()">
Log out
{{ $t('topbar.user_dropdown.log_out') }}
</div>
</div>
</div>
@@ -144,10 +144,10 @@ export default defineComponent({
}
.num {
@apply font-bold text-xl;
@apply font-semibold text-xl;
+ div {
@apply text-$bew-text-2;
@apply text-$bew-text-2 mt-1 text-xs font-semibold;
}
}
}

View File

@@ -152,7 +152,7 @@ export default defineComponent({
<div class="right-side">
<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" />LOGIN IN
<ic-outline-account-circle class="text-base mr-2" />{{ $t('topbar.sign_in') }}
</a>
</div>
<template v-if="isLogin">
@@ -196,7 +196,11 @@ export default defineComponent({
>
{{ unReadmessageCount > 999 ? '999+' : unReadmessageCount }}
</div>
<a href="https://message.bilibili.com" target="_blank" title="Notifications">
<a
href="https://message.bilibili.com"
target="_blank"
:title="$t('topbar.notifications')"
>
<tabler:bell />
</a>
@@ -215,7 +219,11 @@ export default defineComponent({
>
{{ newMomentsCount > 999 ? '999+' : newMomentsCount }}
</div>
<a href="https://t.bilibili.com" target="_blank" title="Moments">
<a
href="https://t.bilibili.com"
target="_blank"
:title="$t('topbar.moments')"
>
<tabler:windmill />
</a>
</div>
@@ -223,13 +231,17 @@ export default defineComponent({
<a
:href="'https://space.bilibili.com/' + mid + '/favlist'"
target="_blank"
title="Faviours"
:title="$t('topbar.favorites')"
>
<tabler:star />
</a>
</div>
<div class="right-side-item">
<a href="https://www.bilibili.com/account/history" target="_blank" title="History">
<a
href="https://www.bilibili.com/account/history"
target="_blank"
:title="$t('topbar.history')"
>
<tabler:clock />
</a>
</div>
@@ -237,7 +249,7 @@ export default defineComponent({
<a
href="https://member.bilibili.com/platform/home"
target="_blank"
title="Creative Center"
:title="$t('topbar.creative_center')"
>
<tabler:bulb />
</a>
@@ -259,7 +271,7 @@ export default defineComponent({
<span
m="l-2"
display="xl:block <xl:hidden"
>Upload</span>
>{{ $t('topbar.upload') }}</span>
</a>
<transition name="slide">