From 6593225d0f2fb4d35d0514687209beeeddf7fa5c Mon Sep 17 00:00:00 2001
From: Yuhang Wu <YuhangWu@orbitmes.com>
Date: Fri, 14 Aug 2026 17:40:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E6=A0=8F=E5=92=8C=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除WindowTitlbar组件中的装饰点元素及其相关样式
- 在MainLayout中添加flex占位符以改善布局结构
- 更新组件类型定义，添加Naive UI组件类型声明
- 重构SettingsView使用Naive UI布局组件，提升响应式体验
- 移除过时的侧边栏描述文本和样式配置
- 调整菜单选中状态的视觉效果
---
 src/components/WindowTitlebar.vue | 12 +---
 src/layouts/MainLayout.vue        | 10 +++-
 src/types/components.d.ts         |  7 +++
 src/views/SettingsView.vue        | 97 ++++++++++++++-----------------
 4 files changed, 60 insertions(+), 66 deletions(-)

diff --git a/src/components/WindowTitlebar.vue b/src/components/WindowTitlebar.vue
index 76133f3..4f59601 100644
--- a/src/components/WindowTitlebar.vue
+++ b/src/components/WindowTitlebar.vue
@@ -1,7 +1,6 @@
 <template>
   <header class="window-titlebar" :class="{ 'window-titlebar--macos': isMacos }">
     <div class="window-titlebar__drag" data-tauri-drag-region>
-      <!-- <span class="window-titlebar__dot"></span> -->
       <span class="window-titlebar__title">YwYMusic</span>
     </div>
 
@@ -72,15 +71,6 @@ function closeWindow() {
   padding-left: 14px;
 }
 
-.window-titlebar__dot {
-  width: 9px;
-  height: 9px;
-  flex: 0 0 auto;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #d98b5f 0%, var(--app-primary) 100%);
-  box-shadow: 0 0 0 3px rgba(180, 83, 42, 0.12);
-}
-
 .window-titlebar__title {
   min-width: 0;
   overflow: hidden;
@@ -124,7 +114,7 @@ function closeWindow() {
 }
 
 .window-titlebar--macos .window-titlebar__controls,
-.window-titlebar--macos .window-titlebar__dot {
+.window-titlebar--macos {
   display: none;
 }
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 61e50bd..d2e429f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -25,6 +25,8 @@
             @update:value="handleMenuSelect"
           />
 
+          <div class="flex"></div>
+
           <div class="nav-settings">
             <n-menu
               :collapsed="collapsed"
@@ -191,10 +193,14 @@ watch(
   min-width: 0;
 }
 
+.flex {
+  flex-grow: 1;
+}
+
 .nav-settings {
   margin-top: auto;
-  padding-top: 12px;
-  border-top: 1px solid var(--app-border);
+  /* padding-top: 12px;
+  border-top: 1px solid var(--app-border); */
 }
 
 .nav-settings--collapsed {
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index f463cdd..8c49e77 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -15,17 +15,24 @@ declare module 'vue' {
     FullscreenPlayer: typeof import('./../components/FullscreenPlayer.vue')['default']
     MusicCard: typeof import('./../components/MusicCard.vue')['default']
     NBackTop: typeof import('naive-ui')['NBackTop']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NIcon: typeof import('naive-ui')['NIcon']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NRadio: typeof import('naive-ui')['NRadio']
     PlayerBar: typeof import('./../components/PlayerBar.vue')['default']
     QrLogin: typeof import('./../components/QrLogin.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SongTable: typeof import('./../components/SongTable.vue')['default']
+    WindowTitlebar: typeof import('./../components/WindowTitlebar.vue')['default']
   }
 }
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index e1c7a35..f18f492 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="settings-layout">
-    <aside class="settings-sidebar">
-      <!-- <div class="settings-heading">
-        <span class="settings-eyebrow">PREFERENCES</span>
-        <h2>设置</h2>
-        <p>管理应用偏好与播放体验</p>
-      </div> -->
-
+  <n-layout class="settings-layout" has-sider>
+    <n-layout-sider
+      class="settings-sidebar"
+      :width="150"
+      :native-scrollbar="false"
+      :bordered="false"
+    >
       <n-menu
         :value="activeSetting"
         :options="settingOptions"
         class="settings-menu"
         @update:value="handleSettingChange"
       />
-    </aside>
+    </n-layout-sider>
 
-    <main class="settings-content">
+    <n-layout-content class="settings-content" :native-scrollbar="false">
       <RouterView />
-    </main>
-  </div>
+    </n-layout-content>
+  </n-layout>
 </template>
 
 <script setup lang="ts">
@@ -33,13 +32,11 @@ const settingOptions: MenuOption[] = [
   {
     label: "音乐源",
     key: "settings-source",
-    description: "搜索与解析来源",
   },
   {
     label: "外观",
     key: "settings-appearance",
-    description: "主题与布局设置",
-  }
+  },
 ]
 
 const activeSetting = computed(() => String(route.name ?? "settings-source"))
@@ -51,46 +48,23 @@ function handleSettingChange(key: string) {
 
 <style scoped>
 .settings-layout {
-  display: grid;
-  grid-template-columns: 190px minmax(0, 1fr);
-  gap: clamp(24px, 4vw, 52px);
+  width: 100%;
   max-width: 1180px;
+  height: 100%;
   min-height: 100%;
   margin: 0 auto;
+  overflow: hidden;
 }
 
 .settings-sidebar {
-  position: sticky;
-  top: 0;
-  align-self: start;
-}
-
-.settings-heading {
-  margin-bottom: 22px;
-  padding: 4px 12px 0;
-}
-
-.settings-eyebrow {
-  color: var(--app-primary);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1.6px;
-}
-
-.settings-heading h2 {
-  margin: 5px 0 4px;
-  font-size: 26px;
-  line-height: 1.2;
-}
-
-.settings-heading p {
-  margin: 0;
-  color: var(--app-text-muted);
-  font-size: 12px;
-  line-height: 1.6;
+  flex: 0 0 190px;
+  min-height: 0;
+  padding: 0 12px 0 0;
+  background: transparent;
 }
 
 .settings-menu {
+  width: 100%;
   --n-item-text-color: var(--app-text-secondary);
   --n-item-text-color-hover: var(--app-text);
   --n-item-text-color-active: var(--app-primary);
@@ -98,22 +72,39 @@ function handleSettingChange(key: string) {
   --n-item-color-active-hover: rgba(180, 83, 42, 0.16);
 }
 
+.settings-menu :deep(.n-menu-item-content) {
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.settings-menu :deep(.n-menu-item-content:hover),
+.settings-menu :deep(.n-menu-item-content--selected),
+.settings-menu :deep(.n-menu-item-content::before),
+.settings-menu :deep(.n-menu-item-content:hover::before),
+.settings-menu :deep(.n-menu-item-content--selected::before) {
+  box-shadow: none;
+}
+
+.settings-menu :deep(.n-menu-item-content--selected) {
+  font-weight: 600;
+}
+
 .settings-content {
+  min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 @media (max-width: 760px) {
   .settings-layout {
-    grid-template-columns: 1fr;
-    gap: 18px;
+    display: block;
+    overflow: visible;
   }
 
   .settings-sidebar {
-    position: static;
-  }
-
-  .settings-heading {
-    margin-bottom: 12px;
+    width: 100%;
+    height: auto;
+    padding: 0 0 18px;
   }
 
   .settings-menu {