feat: import/export settings (#60)

src/_locales/cmn-CN.yml

@@ -118,6 +118,10 @@ settings:
   settings_shared_with_the_search_page_desc: 这些设置都与搜索页共用
   search_page_mode_wallpaper_fixed: 将搜索页模式的壁纸固定
 
+  # About
+  import_settings: 导入设置
+  export_settings: 导出设置
+
 auth:
   err_tip: 授权 access key 失败
   plz_login_first: 请先登录 bilibili

src/_locales/cmn-TW.yml

@@ -118,6 +118,10 @@ settings:
   settings_shared_with_the_search_page_desc: 這些設定都與搜尋頁共用
   search_page_mode_wallpaper_fixed: 將搜尋頁模式的背景固定
 
+  # About
+  import_settings: 匯入設定
+  export_settings: 匯出設定
+
 auth:
   err_tip: 無法授權 access key
   plz_login_first: 請先登入 bilibili

src/_locales/en.yml

@@ -119,6 +119,10 @@ settings:
   settings_shared_with_the_search_page_desc: Those settings are used in common with the search page
   search_page_mode_wallpaper_fixed: Make the wallpaper of the search page mode fixed
 
+  # About
+  import_settings: Import settings
+  export_settings: Export settings
+
 auth:
   err_tip: Failed to grant access key
   plz_login_first: Please login to bilibili first

src/_locales/jyut.yml

@@ -118,6 +118,10 @@ settings:
   settings_shared_with_the_search_page_desc: 呢啲設定都同搵嘢頁共用
   search_page_mode_wallpaper_fixed: 定住搵嘢頁模式嘅背景
 
+  # About
+  import_settings: 匯入設定
+  export_settings: 匯出設定
+
 auth:
   err_tip: 無法授權 access key
   plz_login_first: 唔該登入 bilibili 先

src/components/Settings/components/About.vue

@@ -1,6 +1,50 @@
 <script setup lang="ts">
 import browser from 'webextension-polyfill'
 import { version } from '../../../../package.json'
+import { settings } from '~/logic'
+
+const importSettingsRef = ref<HTMLElement>()
+
+function handleImportSettings() {
+  if (importSettingsRef.value) {
+    importSettingsRef.value.click()
+
+    const handleChange = (event: Event) => {
+      const input = event.target as HTMLInputElement
+      if (input.files && input.files.length > 0) {
+        // A file has been selected
+        const selectedFile = input.files[0]
+        // Clear all previous file contents
+        input.value = ''
+
+        const reader = new FileReader()
+        reader.onload = (event: Event) => {
+          const fileReaderTarget = event.target as FileReader
+          const fileContent = fileReaderTarget.result as string
+          const jsonObject = JSON.parse(fileContent)
+
+          settings.value = jsonObject
+
+          importSettingsRef.value?.removeEventListener('change', handleChange)
+        }
+        reader.readAsText(selectedFile)
+      }
+    }
+
+    importSettingsRef.value.addEventListener('change', handleChange)
+  }
+}
+
+function handleExportSettings() {
+  const jsonStr = JSON.stringify(settings.value)
+  const blob = new Blob([jsonStr], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'bewly-settings.json'
+  a.click()
+  URL.revokeObjectURL(url)
+}
 </script>
 
 <template>
@@ -29,6 +73,28 @@ import { version } from '../../../../package.json'
           <tabler:brand-bilibili mr-2 /> Bilibili
         </a>
       </p>
+      <p pos="relative top-14">
+        <Button class="btn" @click="handleImportSettings">
+          <template #left>
+            <mingcute:arrow-right-down-line />
+          </template>
+          <input ref="importSettingsRef" type="file" accept=".json" hidden>
+          {{ $t('settings.import_settings') }}
+        </Button>
+        <Button class="btn" mt-2 @click="handleExportSettings">
+          <template #left>
+            <mingcute:arrow-left-up-line />
+          </template>
+          {{ $t('settings.export_settings') }}
+        </Button>
+      </p>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.btn {
+  --b-button-color: var(--bew-fill-1);
+  --b-button-color-hover: var(--bew-fill-2);
+}
+</style>