add: i18n support

2025-04-14 13:15:29 +00:00 · 2022-04-06 22:26:58 +08:00
parent 0798a0d664
commit 02e5dcbded
18 changed files with 728 additions and 228 deletions
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -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
--- a/src/components/Topbar/LogoMenuDropdown.vue
+++ b/src/components/Topbar/LogoMenuDropdown.vue
@@ -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;
--- a/src/components/Topbar/NotificationsDropdown.vue
+++ b/src/components/Topbar/NotificationsDropdown.vue
@@ -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,
        },
--- a/src/components/Topbar/UploadDropdown.vue
+++ b/src/components/Topbar/UploadDropdown.vue
@@ -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>
--- a/src/components/Topbar/UserPanelDropdown.vue
+++ b/src/components/Topbar/UserPanelDropdown.vue
@@ -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;
      }
    }
  }
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -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">
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -1,11 +1,13 @@
 /* eslint-disable no-console */
 import { onMessage } from 'webext-bridge'
 import { createApp } from 'vue'
-import App from './views/App.vue'
-import { getCookie, setCookie, SVG_ICONS } from '~/utils'
+import { createI18n } from 'vue-i18n'

 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
-;(() => {
+
+import App from './views/App.vue'
+import { getCookie, i18n, setCookie, SVG_ICONS } from '~/utils'
+(() => {
  console.info('[vitesse-webext] Hello world from content script')

  // communication example: send previous tab title from background page
@@ -40,7 +42,8 @@ import { getCookie, setCookie, SVG_ICONS } from '~/utils'
    container.appendChild(styleEl)
    container.appendChild(root)
    document.body.appendChild(container)
-    createApp(App).mount(root)
+
+    createApp(App).use(i18n).mount(root)

    // inject svg icons
    const svgDiv = document.createElement('div')
--- a/src/contentScripts/views/Home/RecommendContent.vue
+++ b/src/contentScripts/views/Home/RecommendContent.vue
@@ -1,98 +1,3 @@
-<template>
-  <div
-    m="x-22 b-0 t-0"
-    grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
-  >
-    <transition-group
-      name="list"
-      @enter="onEnter"
-    >
-      <div
-        v-for="(video, index) in videoList"
-        :key="video.idx"
-        :data-index="index"
-        class="video-card"
-      >
-        <a :href="'/video/av' + video.uri.split('/')[3]" target="_blank">
-          <div class="thumbnail">
-            <div class="duration">{{ calcCurrentTime(video.duration) }}</div>
-            <div
-              class="overflow-hidden w-full relative rounded-$bew-radius z-1"
-              style="aspect-ratio: 16/9"
-            >
-              <img class="cover" :src="video.cover + '@672w_378h_1c'" loading="lazy" />
-            </div>
-            <img class="cover-shadow" :src="video.cover + '@672w_378h_1c'" loading="lazy" />
-          </div>
-          <div class="detail">
-            <div class="flex">
-              <a class="avatar" @click="gotoChannel(video.mid)">
-                <img
-                  :src="(video.face + '').replace('http:', '') + '@60w_60h_1c'"
-                  width="48"
-                  height="48"
-                  loading="lazy"
-                />
-              </a>
-            </div>
-            <div class="meta">
-              <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
-              <div class="channel-name" @click="gotoChannel(video.mid)">{{ video.name }}</div>
-              <div class="video-info">
-                {{ numFormatter(video.play) }} views
-                <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }} ago
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </transition-group>
-  </div>
-
-  <div
-    v-if="isLoading"
-    w="full"
-    h="46px"
-    p="y-8"
-    flex="~"
-    justify="center"
-    items="center"
-  >
-    <img
-      src="https://s2.loli.net/2022/03/20/4YZhnF1cmya6tHO.gif"
-      alt="loading"
-      w="46px"
-      h="46px"
-      m="r-2"
-    />
-    Loading more...
-  </div>
-
-  <div
-    v-if="!isLoading"
-    style="height: 100px"
-    w="full"
-    p="y-8"
-    flex="~"
-    items="center"
-    justify="center"
-  >
-    <button
-      style="box-shadow: var(--bew-shadow-1);"
-      bg="$bew-content-1"
-      p="x-8 y-4"
-      text="$bew-text-1"
-      rounded="$bew-radius"
-      flex="~"
-      items="center"
-      @click="onRefresh"
-    >
-      <tabler:refresh class="mr-2" />Click to refresh
-    </button>
-  </div>
-</template>
-
 <script lang="ts">
 import { accessKey } from '~/logic/storage'
 import { numFormatter, calcTimeSince, calcCurrentTime } from '~/utils'
@@ -163,6 +68,103 @@ export default defineComponent({
 })
 </script>

+<template>
+  <div
+    m="x-22 b-0 t-0"
+    grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
+  >
+    <transition-group
+      name="list"
+      @enter="onEnter"
+    >
+      <div
+        v-for="(video, index) in videoList"
+        :key="video.idx"
+        :data-index="index"
+        class="video-card"
+      >
+        <a :href="'/video/av' + video.uri.split('/')[3]" target="_blank">
+          <div class="thumbnail">
+            <div class="duration">{{ calcCurrentTime(video.duration) }}</div>
+            <div
+              class="overflow-hidden w-full relative rounded-$bew-radius z-1"
+              style="aspect-ratio: 16/9"
+            >
+              <img class="cover" :src="video.cover + '@672w_378h_1c'" loading="lazy" />
+            </div>
+            <img class="cover-shadow" :src="video.cover + '@672w_378h_1c'" loading="lazy" />
+          </div>
+          <div class="detail">
+            <div class="flex">
+              <a class="avatar" @click="gotoChannel(video.mid)">
+                <img
+                  :src="(video.face + '').replace('http:', '') + '@60w_60h_1c'"
+                  width="48"
+                  height="48"
+                  loading="lazy"
+                />
+              </a>
+            </div>
+            <div class="meta">
+              <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
+              <div class="channel-name" @click="gotoChannel(video.mid)">{{ video.name }}</div>
+              <div class="video-info">
+                {{ numFormatter(video.play) }} views
+                <span class="text-xs font-light">•</span>
+                {{ calcTimeSince(new Date(video.ctime * 1000)) }} ago
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </transition-group>
+  </div>
+
+  <div
+    v-if="isLoading"
+    w="full"
+    h="46px"
+    p="y-8"
+    flex="~"
+    justify="center"
+    items="center"
+  >
+    <img
+      src="https://s2.loli.net/2022/03/20/4YZhnF1cmya6tHO.gif"
+      alt="loading"
+      w="46px"
+      h="46px"
+      m="r-2"
+    />
+    {{ $t('home.loading_more') }}
+  </div>
+
+  <div
+    v-if="!isLoading"
+    style="height: 100px"
+    w="full"
+    p="y-8"
+    flex="~"
+    items="center"
+    justify="center"
+  >
+    <button
+      style="box-shadow: var(--bew-shadow-1);"
+      bg="!$bew-theme-color"
+      w="60px"
+      h="60px"
+      text="white 2xl"
+      rounded="full"
+      flex="~"
+      justify="center"
+      items="center"
+      @click="onRefresh"
+    >
+      <tabler:refresh />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .list-move,
 .list-enter-active,
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -0,0 +1,9 @@
+import { createI18n } from 'vue-i18n'
+import messages from '@intlify/vite-plugin-vue-i18n/messages'
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'jyut',
+  globalInjection: true,
+  messages,
+})
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,10 +1,12 @@
 import { grantAccessKey, revokeAccessKey } from './auth-provider'
 import { SVG_ICONS } from './svgIcons'
+import { i18n } from './i18n'

 export {
  grantAccessKey,
  revokeAccessKey,
  SVG_ICONS,
+  i18n,
 }
 export * from './dataFormatter'