feat: add compatibility page on settings panel

src/components/Settings/Settings.vue

@@ -5,6 +5,7 @@ import General from './components/General.vue'
 import Appearance from './components/Appearance.vue'
 import SearchPage from './components/SearchPage.vue'
 import Home from './components/Home.vue'
+import Compatibility from './components/Compatibility.vue'
 import About from './components/About.vue'
 import type { MenuItem } from './types'
 import { MenuType } from './types'
@@ -14,7 +15,7 @@ const emit = defineEmits(['close'])
 
 const { t } = useI18n()
 
-const settingsMenu = { General, Appearance, SearchPage, Home, About }
+const settingsMenu = { General, Appearance, SearchPage, Home, Compatibility, About }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
 const preventCloseSettings = ref<boolean>(false)
@@ -56,6 +57,12 @@ const settingsMenuItems = computed((): MenuItem[] => {
       iconActivated: 'mingcute:home-5-fill',
       title: t('settings.menu_home'),
     },
+    {
+      value: MenuType.Compatibility,
+      icon: 'mingcute:polygon-line',
+      iconActivated: 'mingcute:polygon-fill',
+      title: 'Compatibility',
+    },
     {
       value: MenuType.About,
       icon: 'mingcute:information-line',

src/components/Settings/components/Compatibility.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { settings } from '~/logic'
+
+const bilibiliEvolvedThemeColor = computed(() => {
+  return getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim() ?? '#00a1d6'
+})
+
+function changeThemeColor(color: string) {
+  settings.value.themeColor = color
+}
+</script>
+
+<template>
+  <div>
+    <SettingsItemGroup :title="$t('settings.group_common')">
+      <SettingsItemGroup :title="$t('settings.group_color')">
+        <SettingsItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
+          <Radio v-model="settings.adaptToOtherPageStyles" />
+        </SettingsItem>
+      </SettingsItemGroup>
+    </SettingsItemGroup>
+
+    <SettingsItemGroup title="Bilibili Evolved">
+      <SettingsItemGroup :title="$t('settings.group_color')">
+        <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
+          <div
+            w-20px h-20px rounded-8 cursor-pointer transition
+            duration-300 box-border
+            :style="{
+              background: bilibiliEvolvedThemeColor,
+              transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
+              border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid white' : '2px solid transparent',
+              boxShadow: bilibiliEvolvedThemeColor === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
+            }"
+            @click="changeThemeColor(bilibiliEvolvedThemeColor)"
+          />
+        </SettingsItem>
+      </SettingsItemGroup>
+
+      <SettingsItemGroup :title="$t('settings.group_topbar')">
+        <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+          <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+        </SettingsItem>
+      </SettingsItemGroup>
+    </SettingsItemGroup>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Settings/types.ts

@@ -3,6 +3,7 @@ export enum MenuType {
   Appearance = 'Appearance',
   SearchPage = 'SearchPage',
   Home = 'Home',
+  Compatibility = 'Compatibility',
   About = 'About',
 }