From ca575a623e65d7d44c5ba68c956418705686780c Mon Sep 17 00:00:00 2001
From: Megghy <yhggeM@gmail.com>
Date: Tue, 8 Jul 2025 00:21:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E6=96=B0=E7=9A=84=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在components.d.ts中添加NSwitch组件声明
- 在ManageLayout.vue中新增收藏功能相关的存储逻辑
- 在DashboardView.vue和SettingsManageView.vue中使用useRouteQuery自动同步URL查询参数
- 在SongListManageView.vue中移除不必要的按钮样式
---
 src/components.d.ts                     |  1 +
 src/views/ManageLayout.vue              |  3 +++
 src/views/manage/DashboardView.vue      |  6 +++++-
 src/views/manage/SettingsManageView.vue | 16 ++++++----------
 src/views/manage/SongListManageView.vue |  1 -
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 9d3790b..ff637fb 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTime: typeof import('naive-ui')['NTime']
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 19a20a9..95fdae9 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -66,6 +66,9 @@ const route = useRoute()
 const windowWidth = window.innerWidth
 const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 
+// 收藏功能相关
+const favoriteMenuItems = useStorage<string[]>('Settings.FavoriteMenuItems', [])
+
 // 侧边栏和布局相关
 const sider = ref()
 const { width } = useElementSize(sider)
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index d7c1c9d..266eee1 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -29,6 +29,7 @@ import {
   useMessage
 } from 'naive-ui'
 import { onUnmounted, ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
 import VueTurnstile from 'vue-turnstile'
 import SettingPaymentView from './Setting_PaymentView.vue'
 import SettingsManageView from './SettingsManageView.vue'
@@ -41,6 +42,9 @@ const turnstile = ref()
 const accountInfo = useAccount()
 const message = useMessage()
 
+// 使用 useRouteQuery 自动同步 URL 查询参数
+const selectedTab = useRouteQuery('tab', 'info', { transform: String })
+
 const resetEmailModalVisiable = ref(false)
 const resetPasswordModalVisiable = ref(false)
 const bindBiliCodeModalVisiable = ref(false)
@@ -311,10 +315,10 @@ onUnmounted(() => {
   >
     <NTabs
       v-if="accountInfo"
+      v-model:value="selectedTab"
       type="segment"
       animated
       style="width: 100%;"
-      :default-value="$route.query.tab?.toString() ?? 'info'"
     >
       <NTabPane
         name="info"
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index bf58df1..33a1618 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -59,6 +59,7 @@
   } from 'naive-ui';
   import { computed, h, nextTick, onActivated, onMounted, ref, shallowRef, markRaw } from 'vue';
   import { useRoute } from 'vue-router';
+  import { useRouteQuery } from '@vueuse/router';
 
   // 模板定义类型接口
   interface TemplateDefineTypes {
@@ -231,9 +232,9 @@
     { label: '日程表', value: 'schedule' },
   ] as SelectOption[];
 
-  // 路由查询参数优先级高于默认值
-  const selectedOption = ref(route.query.template?.toString() ?? 'index');
-  const selectedTab = ref(route.query.setting?.toString() ?? 'general');
+  // 使用 useRouteQuery 自动同步 URL 查询参数
+  const selectedOption = useRouteQuery('template', 'index', { transform: String });
+  const selectedTab = useRouteQuery('setting', 'general', { transform: String });
 
   // 动态表单相关
   const dynamicConfigRef = shallowRef();
@@ -582,14 +583,9 @@
     message.success('已保存');
   }
 
-  // 路由激活时更新选项卡
+  // 路由激活时的处理（useRouteQuery 已自动处理参数同步）
   onActivated(() => {
-    if (route.query.tab) {
-      selectedTab.value = route.query.setting?.toString() ?? 'general';
-    }
-    if (route.query.template) {
-      selectedOption.value = route.query.template.toString();
-    }
+    // useRouteQuery 会自动同步，这里可以添加其他激活时的逻辑
   });
 
   // 组件挂载时初始化数据
diff --git a/src/views/manage/SongListManageView.vue b/src/views/manage/SongListManageView.vue
index c948085..b2bdeef 100644
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -765,7 +765,6 @@ onMounted(async () => {
       添加歌曲
     </NButton>
     <NButton
-      secondary
       type="primary"
       @click="$router.push({ name: 'manage-index', query: { tab: 'setting', setting: 'template', template: 'songlist' } })"
     >