From aa78fcf775be2f7994d6703e7d5feb4bcded078a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 21 Oct 2024 01:19:51 +0800
Subject: [PATCH] feat(settings): add `BewlyBewly pages` to manage relative
 settings

---
 src/_locales/cmn-CN.yml                       |  1 +
 src/_locales/cmn-TW.yml                       |  1 +
 src/_locales/en.yml                           |  1 +
 src/_locales/jyut.yml                         |  1 +
 .../Settings/BewlyPages/BewlyPages.vue        | 57 +++++++++++++++++++
 .../Settings/{ => BewlyPages}/Home/Home.vue   |  4 +-
 .../Home/components/FilterByTitleTable.vue    |  0
 .../Home/components/FilterByUserTable.vue     |  0
 .../SearchPage/SearchPage.vue                 |  6 +-
 src/components/Settings/Settings.vue          | 17 ++----
 src/components/Settings/types.ts              |  8 ++-
 11 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Settings/BewlyPages/BewlyPages.vue
 rename src/components/Settings/{ => BewlyPages}/Home/Home.vue (99%)
 rename src/components/Settings/{ => BewlyPages}/Home/components/FilterByTitleTable.vue (100%)
 rename src/components/Settings/{ => BewlyPages}/Home/components/FilterByUserTable.vue (100%)
 rename src/components/Settings/{ => BewlyPages}/SearchPage/SearchPage.vue (95%)

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index b074e102..0e7213e6 100644
--- a/src/_locales/cmn-CN.yml
+++ b/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: 兼容性
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 29373f62..c9a302a7 100644
--- a/src/_locales/cmn-TW.yml
+++ b/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: 關於
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 6e9b55cc..e0c6a52d 100644
--- a/src/_locales/en.yml
+++ b/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
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 3f73cb5f..b3088e62 100644
--- a/src/_locales/jyut.yml
+++ b/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: 相容性
diff --git a/src/components/Settings/BewlyPages/BewlyPages.vue b/src/components/Settings/BewlyPages/BewlyPages.vue
new file mode 100644
index 00000000..ffc412d6
--- /dev/null
+++ b/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>
diff --git a/src/components/Settings/Home/Home.vue b/src/components/Settings/BewlyPages/Home/Home.vue
similarity index 99%
rename from src/components/Settings/Home/Home.vue
rename to src/components/Settings/BewlyPages/Home/Home.vue
index d94da5bd..92c02508 100644
--- a/src/components/Settings/Home/Home.vue
+++ b/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'
diff --git a/src/components/Settings/Home/components/FilterByTitleTable.vue b/src/components/Settings/BewlyPages/Home/components/FilterByTitleTable.vue
similarity index 100%
rename from src/components/Settings/Home/components/FilterByTitleTable.vue
rename to src/components/Settings/BewlyPages/Home/components/FilterByTitleTable.vue
diff --git a/src/components/Settings/Home/components/FilterByUserTable.vue b/src/components/Settings/BewlyPages/Home/components/FilterByUserTable.vue
similarity index 100%
rename from src/components/Settings/Home/components/FilterByUserTable.vue
rename to src/components/Settings/BewlyPages/Home/components/FilterByUserTable.vue
diff --git a/src/components/Settings/SearchPage/SearchPage.vue b/src/components/Settings/BewlyPages/SearchPage/SearchPage.vue
similarity index 95%
rename from src/components/Settings/SearchPage/SearchPage.vue
rename to src/components/Settings/BewlyPages/SearchPage/SearchPage.vue
index 35e3e939..57787656 100644
--- a/src/components/Settings/SearchPage/SearchPage.vue
+++ b/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)
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index d65f69f8..16a69833 100644
--- a/src/components/Settings/Settings.vue
+++ b/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,
diff --git a/src/components/Settings/types.ts b/src/components/Settings/types.ts
index 026da462..a0e0670b 100644
--- a/src/components/Settings/types.ts
+++ b/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