feat(settings): add BewlyBewly pages to manage relative settings

src/_locales/cmn-CN.yml

@@ -60,6 +60,7 @@ settings:
   menu_general: 常规
   menu_desktop_and_dock: 桌面和 Dock 栏
   menu_appearance: 外观
+  menu_bewly_pages: BewlyBewly 页面
   menu_search_page: 搜索页
   menu_home: 首页
   menu_compatibility: 兼容性

src/_locales/cmn-TW.yml

@@ -60,6 +60,7 @@ settings:
   menu_general: 一般
   menu_desktop_and_dock: 桌面與 Dock
   menu_appearance: 外觀
+  menu_bewly_pages: BewlyBewly 頁面
   menu_home: 首頁
   menu_search_page: 搜尋頁
   menu_about: 關於

src/_locales/en.yml

@@ -60,6 +60,7 @@ settings:
   menu_general: General
   menu_desktop_and_dock: Desktop & Dock
   menu_appearance: Appearance
+  menu_bewly_pages: BewlyBewly Pages
   menu_search_page: Search Page
   menu_home: Home
   menu_compatibility: Compatibility

src/_locales/jyut.yml

@@ -60,6 +60,7 @@ settings:
   menu_general: 一般
   menu_desktop_and_dock: 桌面同 Dock
   menu_appearance: 版面
+  menu_bewly_pages: BewlyBewly 頁面
   menu_home: 主頁
   menu_search_page: 搵嘢頁
   menu_compatibility: 相容性

src/components/Settings/BewlyPages/BewlyPages.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { BewlyPage } from '../types'
+
+const { t } = useI18n()
+
+const activePage = ref<BewlyPage>(BewlyPage.Home)
+
+const pages = [
+  {
+    value: BewlyPage.Home,
+    title: t('settings.menu_home'),
+    icon: 'i-mingcute:home-5-line',
+    iconActivated: 'i-mingcute:home-5-fill',
+    component: defineAsyncComponent(() => import('./Home/Home.vue')),
+  },
+  {
+    value: BewlyPage.Search,
+    title: t('settings.menu_search_page'),
+    icon: 'i-mingcute:search-2-line',
+    iconActivated: 'i-mingcute:search-2-fill',
+    component: defineAsyncComponent(() => import('./SearchPage/SearchPage.vue')),
+  },
+]
+</script>
+
+<template>
+  <div flex="~ gap-2">
+    <!-- Sidebar -->
+    <div w-140px>
+      <div w-inherit pos="fixed">
+        <ul flex="~ col gap-1">
+          <li
+            v-for="page in pages"
+            :key="page.value"
+            :style="{ backgroundColor: activePage === page.value ? 'var(--bew-fill-3)' : '' }"
+            cursor-pointer p="y-2 x-4" ml--4 rounded="$bew-radius" bg="hover:$bew-fill-2"
+            duration-300
+            @click="activePage = page.value"
+          >
+            <div class="flex items-center">
+              <div :class="activePage === page.value ? page.iconActivated : page.icon" class="mr-2 text-lg" />
+              <span>{{ page.title }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 p-4">
+      <Component :is="pages.find(page => page.value === activePage)?.component" />
+    </div>
+  </div>
+</template>

src/components/Settings/BewlyPages/Home/Home.vue

@@ -7,8 +7,8 @@ import { accessKey, settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
 
-import SettingsItem from '../components/SettingsItem.vue'
-import SettingsItemGroup from '../components/SettingsItemGroup.vue'
+import SettingsItem from '../../components/SettingsItem.vue'
+import SettingsItemGroup from '../../components/SettingsItemGroup.vue'
 import SearchPage from '../SearchPage/SearchPage.vue'
 import FilterByTitleTable from './components/FilterByTitleTable.vue'
 import FilterByUserTable from './components/FilterByUserTable.vue'

src/components/Settings/BewlyPages/SearchPage/SearchPage.vue

@@ -2,9 +2,9 @@
 import { SEARCH_BAR_CHARACTERS } from '~/constants/imgs'
 import { settings } from '~/logic'
 
-import ChangeWallpaper from '../components/ChangeWallpaper.vue'
-import SettingsItem from '../components/SettingsItem.vue'
-import SettingsItemGroup from '../components/SettingsItemGroup.vue'
+import ChangeWallpaper from '../../components/ChangeWallpaper.vue'
+import SettingsItem from '../../components/SettingsItem.vue'
+import SettingsItemGroup from '../../components/SettingsItemGroup.vue'
 
 watch(() => settings.value.individuallySetSearchPageWallpaper, (newValue) => {
   if (newValue)

src/components/Settings/Settings.vue

@@ -14,8 +14,7 @@ const settingsMenu = {
   [MenuType.General]: defineAsyncComponent(() => import('./General/General.vue')),
   [MenuType.DesktopAndDock]: defineAsyncComponent(() => import('./DesktopAndDock/DesktopAndDock.vue')),
   [MenuType.Appearance]: defineAsyncComponent(() => import('./Appearance/Appearance.vue')),
-  [MenuType.SearchPage]: defineAsyncComponent(() => import('./SearchPage/SearchPage.vue')),
-  [MenuType.Home]: defineAsyncComponent(() => import('./Home/Home.vue')),
+  [MenuType.BewlyPages]: defineAsyncComponent(() => import('./BewlyPages/BewlyPages.vue')),
   [MenuType.Compatibility]: defineAsyncComponent(() => import('./Compatibility/Compatibility.vue')),
   // [MenuType.BilibiliSettings]: defineAsyncComponent(() => import('./BilibiliSettings/BilibiliSettings.vue')),
   [MenuType.About]: defineAsyncComponent(() => import('./About/About.vue')),
@@ -53,16 +52,10 @@ const settingsMenuItems = computed((): MenuItem[] => {
       iconActivated: 'i-mingcute:paint-brush-fill',
     },
     {
-      value: MenuType.SearchPage,
-      icon: 'i-mingcute:search-2-line',
-      iconActivated: 'i-mingcute:search-2-fill',
-      title: t('settings.menu_search_page'),
-    },
-    {
-      value: MenuType.Home,
-      icon: 'i-mingcute:home-5-line',
-      iconActivated: 'i-mingcute:home-5-fill',
-      title: t('settings.menu_home'),
+      value: MenuType.BewlyPages,
+      icon: 'i-mingcute:table-2-line',
+      iconActivated: 'i-mingcute:table-2-fill',
+      title: t('settings.menu_bewly_pages'),
     },
     {
       value: MenuType.Compatibility,

src/components/Settings/types.ts

@@ -2,13 +2,17 @@ export enum MenuType {
   General = 'General',
   DesktopAndDock = 'DesktopAndDock',
   Appearance = 'Appearance',
-  SearchPage = 'SearchPage',
-  Home = 'Home',
+  BewlyPages = 'BewlyPages',
   Compatibility = 'Compatibility',
   BilibiliSettings = 'BilibiliSettings',
   About = 'About',
 }
 
+export enum BewlyPage {
+  Home = 'Home',
+  Search = 'Search',
+}
+
 export interface MenuItem {
   value: MenuType
   title: string