feat: add “About” item to settings panel

src/_locales/cmn-CN.yml

@@ -25,6 +25,7 @@ settings:
   menu_general: 通用
   menu_appearance: 外观
   menu_home: 首页
+  menu_about: 关于
 
   select_language: 界面语文
   select_language_opt:

src/_locales/cmn-TW.yml

@@ -25,6 +25,7 @@ settings:
   menu_general: 一般
   menu_appearance: 外觀
   menu_home: 首頁
+  menu_about: 關於
 
   select_language: 介面語文
   select_language_opt:

src/_locales/en.yml

@@ -25,6 +25,7 @@ settings:
   menu_general: General
   menu_appearance: Appearance
   menu_home: Home
+  menu_about: About
 
   select_language: Language
   select_language_opt:

src/_locales/jyut.yml

@@ -25,6 +25,7 @@ settings:
   menu_general: 一般
   menu_appearance: 版面
   menu_home: 主頁
+  menu_about: 關於
 
   select_language: 介面語文
   select_language_opt:

src/components/Settings/Settings.vue

@@ -3,13 +3,14 @@ import { useI18n } from 'vue-i18n'
 import General from './components/General.vue'
 import Appearance from './components/Appearance.vue'
 import Home from './components/Home.vue'
+import About from './components/About.vue'
 import { MenuType } from './types'
 
 const emit = defineEmits(['close'])
 
 const { t } = useI18n()
 
-const settingsMenu = { General, Appearance, Home }
+const settingsMenu = { General, Appearance, Home, About }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 
 const settingsMenuItems = computed(() => {
@@ -26,6 +27,10 @@ const settingsMenuItems = computed(() => {
       value: MenuType.Home,
       label: t('settings.menu_home'),
     },
+    {
+      value: MenuType.About,
+      label: t('settings.menu_about'),
+    },
   ]
 })
 
@@ -64,6 +69,7 @@ function changeMenuItem(menuItem: MenuType) {
               <tabler:settings v-if="item.value === MenuType.General" />
               <tabler:brush v-else-if="item.value === MenuType.Appearance" />
               <tabler:home v-else-if="item.value === MenuType.Home" />
+              <tabler:info-circle v-else-if="item.value === MenuType.About" />
             </i>
             <span shrink-0>{{ item.label }}</span>
           </a>

src/components/Settings/components/About.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import browser from 'webextension-polyfill'
+import { version } from '../../../../package.json'
+</script>
+
+<template>
+  <div flex items-center justify-center>
+    <div flex="~ col gap-1" items-center>
+      <img :src="`${browser.runtime.getURL('/assets/icon-512.png')}`" alt="" width="80">
+      <p text-xl>
+        BewlyBewly <a href="https://github.com/hakadao/BewlyBewly/releases" target="_blank" un-text="sm $bew-theme-color">v{{ version }}</a>
+      </p>
+      <p text="sm $bew-text-3">
+        Made by Hakadao
+      </p>
+      <a
+        type="primary" p="y-2 x-4" mt-6 flex items-center bg="black dark:white" un-text="white dark:black" rounded-12
+        href="https://github.com/hakadao/BewlyBewly" target="_blank"
+      >
+        <tabler:brand-github mr-2 /> Github
+      </a>
+    </div>
+  </div>
+</template>

src/components/Settings/types.ts

@@ -2,4 +2,5 @@ export enum MenuType {
   General = 'General',
   Appearance = 'Appearance',
   Home = 'Home',
+  About = 'About',
 }