update: anime page and i18n files

src/contentScripts/views/Anime/Anime.vue

@@ -115,7 +115,6 @@ function getPopularAnimeList() {
           <a
             :href="`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`"
             target="_blank"
-            un-text="$bew-theme-color"
           >{{ $t('common.view_all') }}</a>
         </div>
 
@@ -183,7 +182,7 @@ function getPopularAnimeList() {
       <section mb-8>
         <div flex justify-between items-end mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
-            Popular Anime
+            {{ $t('anime.popular_anime') }}
           </h3>
           <a
             href="https://www.bilibili.com/v/popular/rank/bangumi"
@@ -250,9 +249,13 @@ function getPopularAnimeList() {
                   mr-2
                   rounded-4
                   lh-loose
-                >{{ item.rating }}
+                >{{ item.rating.replace('分', '') }}
                 </span>
-                {{ numFormatter(Number(item.stat.series_follow)) }} follow
+                {{
+                  $t('anime.follow', {
+                    num: numFormatter(item.stat.series_follow),
+                  })
+                }}
               </p>
             </article>
           </div>
@@ -263,7 +266,7 @@ function getPopularAnimeList() {
       <section mb-8>
         <div flex justify-between items-end mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
-            Anime Timetable
+            {{ $t('anime.anime_timetable.title') }}
           </h3>
         </div>
 

src/contentScripts/views/Anime/components/AnimeTimeTable.vue

@@ -1,12 +1,26 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { AnimeTimeTableItem } from '../types'
 import { removeHttpFromUrl } from '~/utils'
 
+const { t } = useI18n()
+
 const animeTimeTable = reactive<AnimeTimeTableItem[]>([])
-const daysOfTheWeekList = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
 const animeTimeTableWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
+const daysOfTheWeekList = computed(() => {
+  return [
+    t('anime.anime_timetable.days_of_week.mon'),
+    t('anime.anime_timetable.days_of_week.tue'),
+    t('anime.anime_timetable.days_of_week.wed'),
+    t('anime.anime_timetable.days_of_week.thu'),
+    t('anime.anime_timetable.days_of_week.fri'),
+    t('anime.anime_timetable.days_of_week.sat'),
+    t('anime.anime_timetable.days_of_week.sun'),
+  ]
+})
+
 onMounted(() => {
   getAnimeTimeTable()
 })
@@ -58,11 +72,14 @@ function getAnimeTimeTable() {
                 background-image: url(//s1.hdslb.com/bfs/static/bangumi-timeline/asserts/icons.png);
               "
             />
-            <h3 :text="item.is_today ? '$bew-text-2' : '$bew-text-3'">
+            <h3 :text="item.is_today ? '$bew-text-1' : '$bew-text-3'">
               <span text="2xl" font-bold>{{
                 daysOfTheWeekList[item.day_of_week - 1]
               }}</span>
-              <span text="base $bew-text-2" ml-2>{{ item.date }}</span>
+              <span
+                :text="`base ${item.is_today ? '$bew-text-2' : '$bew-text-3'}`"
+                ml-2
+              >{{ item.date }}</span>
             </h3>
           </div>
           <span