feat: 更新组件以支持新的功能和优化用户体验

- 在components.d.ts中添加NSwitch组件声明
- 在ManageLayout.vue中新增收藏功能相关的存储逻辑
- 在DashboardView.vue和SettingsManageView.vue中使用useRouteQuery自动同步URL查询参数
- 在SongListManageView.vue中移除不必要的按钮样式

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']

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)

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"

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[];
 
-  // 路由查询参数优先级高于默认值
+  // 使用 useRouteQuery 自动同步 URL 查询参数
-  const selectedOption = ref(route.query.template?.toString() ?? 'index');
+  const selectedOption = useRouteQuery('template', 'index', { transform: String });
-  const selectedTab = ref(route.query.setting?.toString() ?? 'general');
+  const selectedTab = useRouteQuery('setting', 'general', { transform: String });
 
   // 动态表单相关
   const dynamicConfigRef = shallowRef();
@@ -582,14 +583,9 @@
     message.success('已保存');
   }
 
-  // 路由激活时更新选项卡
+  // 路由激活时的处理（useRouteQuery 已自动处理参数同步）
   onActivated(() => {
-    if (route.query.tab) {
+    // useRouteQuery 会自动同步，这里可以添加其他激活时的逻辑
-      selectedTab.value = route.query.setting?.toString() ?? 'general';
-    }
-    if (route.query.template) {
-      selectedOption.value = route.query.template.toString();
-    }
   });
 
   // 组件挂载时初始化数据

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' } })"
     >