From c6bf4c80dd16dfb374a0972a2d33b5d6501a11cd Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 20 Jul 2023 03:09:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20=E2=80=9CAbout=E2=80=9D=20item=20?=
 =?UTF-8?q?to=20settings=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_locales/cmn-CN.yml                      |  1 +
 src/_locales/cmn-TW.yml                      |  1 +
 src/_locales/en.yml                          |  1 +
 src/_locales/jyut.yml                        |  1 +
 src/components/Settings/Settings.vue         |  8 ++++++-
 src/components/Settings/components/About.vue | 24 ++++++++++++++++++++
 src/components/Settings/types.ts             |  1 +
 7 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Settings/components/About.vue

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index 0dc733da..2eed1b80 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -25,6 +25,7 @@ settings:
   menu_general: 通用
   menu_appearance: 外观
   menu_home: 首页
+  menu_about: 关于
 
   select_language: 界面语文
   select_language_opt:
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index ce3cfaff..83cbe16f 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -25,6 +25,7 @@ settings:
   menu_general: 一般
   menu_appearance: 外觀
   menu_home: 首頁
+  menu_about: 關於
 
   select_language: 介面語文
   select_language_opt:
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index a6408397..daab5eba 100644
--- a/src/_locales/en.yml
+++ b/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:
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index f04be5e6..23b2eaf5 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -25,6 +25,7 @@ settings:
   menu_general: 一般
   menu_appearance: 版面
   menu_home: 主頁
+  menu_about: 關於
 
   select_language: 介面語文
   select_language_opt:
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 27778888..05e3d3f2 100644
--- a/src/components/Settings/Settings.vue
+++ b/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>
diff --git a/src/components/Settings/components/About.vue b/src/components/Settings/components/About.vue
new file mode 100644
index 00000000..10d9f48f
--- /dev/null
+++ b/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>
diff --git a/src/components/Settings/types.ts b/src/components/Settings/types.ts
index eedbe879..4d7a9b77 100644
--- a/src/components/Settings/types.ts
+++ b/src/components/Settings/types.ts
@@ -2,4 +2,5 @@ export enum MenuType {
   General = 'General',
   Appearance = 'Appearance',
   Home = 'Home',
+  About = 'About',
 }