fix: some style bugs

* i18n: change the naming convention of keys
* refactor(BewSelect):  using composition api

src/_locales/cmn-CN.yml

@@ -15,8 +15,8 @@ settings:
   select_language: 界面语文
   select_language_opt:
     english: 英文
-    Mandarin_CN: 官话
-    Mandarin_TW: 官話
+    mandarin_cn: 官话
+    mandarin_tw: 官話
     jyut: 廣東話
   authorize_app: 授权 BewlyBewly 使用 access key
   authorize_app_desc: |

src/_locales/cmn-TW.yml

@@ -15,8 +15,8 @@ settings:
   select_language: 介面語文
   select_language_opt:
     english: 英文
-    Mandarin_CN: 官话
-    Mandarin_TW: 官話
+    mandarin_cn: 官话
+    mandarin_tw: 官話
     jyut: 廣東話
   authorize_app: 授權 BewlyBewly 使用 access key
   authorize_app_desc: |

src/_locales/en.yml

@@ -15,8 +15,8 @@ settings:
   select_language: Language
   select_language_opt:
     english: English
-    Mandarin_CN: Mandarin (Simplified Chinese)
-    Mandarin_TW: Mandarin (Traditional Chinese)
+    mandarin_cn: Mandarin - Simplified Chinese
+    mandarin_tw: Mandarin - Traditional Chinese
     jyut: Cantonese
   authorize_app: Authorize BewlyBewly to use access key
   authorize_app_desc: >

src/_locales/jyut.yml

@@ -15,8 +15,8 @@ settings:
   select_language: 介面語文
   select_language_opt:
     english: 英文
-    Mandarin_CN: 官话
-    Mandarin_TW: 官話
+    mandarin_cn: 官话
+    mandarin_tw: 官話
     jyut: 廣東話
   authorize_app: 授權 BewlyBewly 使用 access key
   authorize_app_desc: |

src/components/BewSelect.vue

@@ -1,56 +1,51 @@
-<script lang="ts">
-// TODO: refactor to composition api
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 
-// import { useI18n } from 'vue-i18n'
-// const { locale } = useI18n()
+const props = defineProps<{
+  options: OptionType[]
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const { locale } = useI18n()
 
 interface OptionType {
   value: string
   label: string
 }
 
-export default defineComponent({
-  props: {
-    modelValue: String,
-    options: Array as () => OptionType[],
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      label: '' as string,
-      showOptions: false as boolean,
-    }
-  },
-  // watch: {
-  //   locale(newValue) {
-  //     console.log(newValue)
-  //     this.$forceUpdate()
-  //   },
-  // },
-  created() {
-    if (!this.options)
-      return
-    this.label = `${this.options.find((item: OptionType) => item.value === this.modelValue)?.label}`
-  },
-  methods: {
-    onClickOption(val: { value: string; label: string }) {
-      window.removeEventListener('click', () => {})
-      this.label = val.label
-      this.$emit('update:modelValue', val.value)
-      this.showOptions = false
-    },
-    closeOptions() {
-      this.showOptions = false
-    },
-    /** when you click on it outside, the selection option will be turned off  */
-    onMouseLeave() {
-      window.addEventListener('click', this.closeOptions)
-    },
-    onMouseEnter() {
-      window.removeEventListener('click', this.closeOptions)
-    },
-  },
+const label = ref<string>('')
+const showOptions = ref<boolean>(false)
+
+watch(() => locale.value, (newValue, oldValue) => {
+
 })
+
+onMounted(() => {
+  if (props.options)
+    label.value = `${props.options.find((item: OptionType) => item.value === props.modelValue)?.label}`
+})
+
+function onClickOption(val: { value: string; label: string }) {
+  window.removeEventListener('click', () => {})
+  label.value = val.label
+  emit('update:modelValue', val.value)
+  showOptions.value = false
+}
+
+function closeOptions() {
+  showOptions.value = false
+}
+
+/** when you click on it outside, the selection option will be turned off  */
+function onMouseLeave() {
+  window.addEventListener('click', closeOptions)
+}
+
+function onMouseEnter() {
+  window.removeEventListener('click', closeOptions)
+}
 </script>
 
 <template>
@@ -72,7 +67,7 @@ export default defineComponent({
       @click="showOptions = !showOptions"
     >
       <div
-        text="space-nowrap overflow-ellipsis"
+        truncate
         overflow="hidden"
         m="r-2"
       >

src/components/Settings.vue

@@ -19,11 +19,11 @@ const langs = computed(() => {
     },
     {
       value: 'cmn-CN',
-      label: t('settings.select_language_opt.Mandarin_CN'),
+      label: t('settings.select_language_opt.mandarin_cn'),
     },
     {
       value: 'cmn-TW',
-      label: t('settings.select_language_opt.Mandarin_TW'),
+      label: t('settings.select_language_opt.mandarin_tw'),
     },
     {
       value: 'jyut',

src/contentScripts/views/Anime/Anime.vue

@@ -334,6 +334,8 @@ function getPopularAnimeList() {
                   aspect="12/16"
                   transition="all duration-300"
                   bg="cover center"
+                  relative
+                  z-1
                   :style="{
                     backgroundImage: `url(${removeHttpFromUrl(
                       item.cover,
@@ -350,7 +352,6 @@ function getPopularAnimeList() {
                   transition="all duration-1000"
                   bg="cover center"
                   pos="absolute top-0 left-0"
-                  z--1
                   :style="{
                     backgroundImage: `url(${removeHttpFromUrl(
                       item.hover.img,

src/contentScripts/views/App.vue

@@ -37,7 +37,9 @@ const mainApp = ref<HTMLElement>()
 watch(
   () => activatedPage.value,
   (newValue, oldValue) => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    setTimeout(() => {
+      window.scrollTo(0, 0)
+    }, 500)
   },
 )