refactor: 调整应用布局与标题栏

src/renderer/App.vue

@@ -22,6 +22,7 @@ import { useRouter } from 'vue-router';
 import DisclaimerModal from '@/components/common/DisclaimerModal.vue';
 import TrafficWarningDrawer from '@/components/TrafficWarningDrawer.vue';
 import { usePlayerStore } from '@/store/modules/player';
+import { usePlayerCoreStore } from '@/store/modules/playerCore';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
 import { isElectron, isLyricWindow } from '@/utils';
@@ -36,6 +37,7 @@ import { useAppShortcuts } from './utils/appShortcuts';
 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
 const playerStore = usePlayerStore();
+const playerCoreStore = usePlayerCoreStore();
 const userStore = useUserStore();
 const router = useRouter();
 
@@ -128,6 +130,9 @@ onMounted(async () => {
   // 初始化播放状态
   await playerStore.initializePlayState();
 
+  // 初始化音频设备变化监听器
+  playerCoreStore.initAudioDeviceListener();
+
   // 初始化落雪音源（如果有激活的音源）
   const activeLxApiId = settingsStore.setData?.activeLxMusicApiId;
   if (activeLxApiId) {

src/renderer/layout/AppLayout.vue

@@ -50,15 +50,6 @@
     <update-modal v-if="isElectron" />
     <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
     <sleep-timer-top v-if="!settingsStore.isMobile" />
-    <!-- 下载管理抽屉 -->
-    <download-drawer
-      v-if="
-        isElectron &&
-        (settingsStore.setData?.alwaysShowDownloadButton ||
-          settingsStore.showDownloadDrawer ||
-          settingsStore.setData?.hasDownloadingTasks)
-      "
-    />
     <!-- 播放列表抽屉 -->
     <playing-list-drawer />
   </div>
@@ -68,7 +59,6 @@
 import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import SleepTimerTop from '@/components/player/SleepTimerTop.vue';

src/renderer/layout/components/SearchBar.vue

@@ -62,6 +62,11 @@
         </div>
       </n-popover>
     </div>
+    <div v-if="showDownloadButton" class="download-btn" @click="navigateToDownloads">
+      <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0" :offset="[-2, 2]">
+        <i class="ri-download-cloud-2-line"></i>
+      </n-badge>
+    </div>
     <n-popover trigger="hover" placement="bottom" :show-arrow="false" raw>
       <template #trigger>
         <div class="user-box">
@@ -174,7 +179,8 @@ import { getSearchSuggestions } from '@/api/search';
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
-import { SEARCH_TYPE, SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { useDownloadStatus } from '@/hooks/useDownloadStatus';
 import { useZoom } from '@/hooks/useZoom';
 import { useSearchStore } from '@/store/modules/search';
 import { useSettingsStore } from '@/store/modules/settings';
@@ -191,6 +197,16 @@ const userStore = useUserStore();
 const userSetOptions = ref(USER_SET_OPTIONS);
 const { t, locale } = useI18n();
 
+// 下载状态
+const { downloadingCount, navigateToDownloads } = useDownloadStatus();
+
+// 显示下载按钮逻辑
+const showDownloadButton = computed(() => {
+  return (
+    isElectron && (settingsStore.setData?.alwaysShowDownloadButton || downloadingCount.value > 0)
+  );
+});
+
 // 使用缩放hook
 const { zoomFactor, initZoomFactor, increaseZoom, decreaseZoom, resetZoom, isZoom100 } = useZoom();
 
@@ -274,13 +290,20 @@ const search = () => {
     return;
   }
 
-  if (router.currentRoute.value.path === '/search') {
+  if (router.currentRoute.value.path === '/search-result') {
     searchStore.searchValue = value;
+    router.replace({
+      path: '/search-result',
+      query: {
+        keyword: value,
+        type: searchStore.searchType
+      }
+    });
     return;
   }
 
   router.push({
-    path: '/search',
+    path: '/search-result',
     query: {
       keyword: value,
       type: searchStore.searchType
@@ -294,11 +317,11 @@ const search = () => {
 const selectSearchType = (key: number) => {
   searchStore.searchType = key;
   if (searchValue.value) {
-    if (router.currentRoute.value.path === '/search') {
+    if (router.currentRoute.value.path === '/search-result') {
       search();
     } else {
       router.push({
-        path: '/search',
+        path: '/search-result',
         query: {
           keyword: searchValue.value,
           type: key
@@ -312,7 +335,7 @@ const rawSearchTypes = ref(SEARCH_TYPES);
 const searchTypeOptions = computed(() => {
   locale.value;
   return rawSearchTypes.value
-    .filter((type) => isElectron || type.key !== SEARCH_TYPE.BILIBILI)
+    .filter(() => isElectron)
     .map((type) => ({
       label: t(type.label),
       key: type.key
@@ -459,6 +482,15 @@ const handleKeydown = (event: KeyboardEvent) => {
   @apply bg-light dark:bg-gray-800;
 }
 
+.download-btn {
+  @apply ml-4 flex items-center justify-center text-xl cursor-pointer;
+  @apply w-9 h-9 rounded-full;
+  @apply bg-light dark:bg-gray-800 text-gray-900 dark:text-white;
+  @apply border dark:border-gray-600 border-gray-200;
+  @apply hover:border-gray-400 dark:hover:border-gray-400;
+  @apply transition-all duration-200;
+}
+
 .search-box {
   @apply pb-4 pr-4;
 }

src/renderer/layout/components/TitleBar.vue

@@ -27,32 +27,91 @@
     </div>
   </div>
 
-  <n-modal
+  <Teleport to="body">
-    v-model:show="showCloseModal"
+    <Transition
-    preset="dialog"
+      enter-active-class="transition duration-200 ease-out"
-    :title="t('comp.titleBar.closeApp')"
+      enter-from-class="opacity-0 scale-95"
-    :style="{ width: '400px' }"
+      enter-to-class="opacity-100 scale-100"
-    :mask-closable="true"
+      leave-active-class="transition duration-150 ease-in"
-  >
+      leave-from-class="opacity-100 scale-100"
-    <div class="close-dialog-content">
+      leave-to-class="opacity-0 scale-95"
-      <p>{{ t('comp.titleBar.closeTitle') }}</p>
+    >
-      <div class="remember-choice">
+      <div
-        <n-checkbox v-model:checked="rememberChoice">
+        v-if="showCloseModal"
-          {{ t('comp.titleBar.rememberChoice') }}
+        class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-sm"
-        </n-checkbox>
+        @click.self="showCloseModal = false"
+      >
+        <div
+          class="relative w-[360px] transform overflow-hidden rounded-2xl bg-white p-6 shadow-2xl transition-all dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800"
+        >
+          <!-- Close Icon -->
+          <button
+            class="absolute top-4 right-4 p-1 rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 transition-colors focus:outline-none"
+            @click="showCloseModal = false"
+          >
+            <i class="ri-close-line text-xl leading-none"></i>
+          </button>
+
+          <h3 class="text-lg font-bold leading-6 text-neutral-900 dark:text-white mb-2">
+            {{ t('comp.titleBar.closeApp') }}
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              {{ t('comp.titleBar.closeTitle') }}
+            </p>
+          </div>
+
+          <div
+            class="mt-4 flex w-fit cursor-pointer items-center gap-2 group"
+            @click="rememberChoice = !rememberChoice"
+          >
+            <div
+              class="relative flex h-5 w-5 items-center justify-center transition-colors duration-200"
+              :class="
+                rememberChoice
+                  ? 'text-green-500'
+                  : 'text-neutral-400 group-hover:text-neutral-500 dark:text-neutral-500 dark:group-hover:text-neutral-400'
+              "
+            >
+              <i
+                class="text-xl"
+                :class="
+                  rememberChoice ? 'ri-checkbox-circle-fill' : 'ri-checkbox-blank-circle-line'
+                "
+              ></i>
+            </div>
+            <span
+              class="select-none text-xs text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300"
+              :class="{ 'text-neutral-800 dark:text-neutral-200': rememberChoice }"
+            >
+              {{ t('comp.titleBar.rememberChoice') }}
+            </span>
+          </div>
+
+          <div class="mt-6 flex justify-end gap-3">
+            <button
+              class="rounded-full px-4 py-2 text-sm font-medium text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 transition-colors focus:outline-none"
+              @click="showCloseModal = false"
+            >
+              {{ t('common.cancel') }}
+            </button>
+            <button
+              class="rounded-full px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 transition-colors focus:outline-none"
+              @click="handleAction('close')"
+            >
+              {{ t('comp.titleBar.exitApp') }}
+            </button>
+            <button
+              class="rounded-full bg-green-500 px-6 py-2 text-sm font-medium text-white hover:bg-green-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 transition-colors shadow-lg shadow-green-500/20"
+              @click="handleAction('minimize')"
+            >
+              {{ t('comp.titleBar.minimizeToTray') }}
+            </button>
+          </div>
+        </div>
       </div>
-    </div>
+    </Transition>
-    <template #action>
+  </Teleport>
-      <div class="dialog-footer">
-        <n-button type="primary" @click="handleAction('minimize')">
-          {{ t('comp.titleBar.minimizeToTray') }}
-        </n-button>
-        <n-button @click="handleAction('close')">
-          {{ t('comp.titleBar.exitApp') }}
-        </n-button>
-      </div>
-    </template>
-  </n-modal>
 </template>
 
 <script setup lang="ts">
@@ -95,11 +154,15 @@ const handleAction = (action: 'minimize' | 'close') => {
   }
 
   if (action === 'minimize') {
-    window.api.miniTray();
+    showCloseModal.value = false;
+    setTimeout(() => {
+      window.api.miniTray();
+    }, 200);
   } else {
-    window.api.close();
+    // Fix: Use quitApp instead of close to ensure app exits on macOS
+    window.api.quitApp();
+    showCloseModal.value = false;
   }
-  showCloseModal.value = false;
 };
 
 const handleClose = () => {