From 66b5aac224a4b52c7ac82f5ae35c769dae5c610a Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 15 Mar 2026 15:13:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=B8=85=E7=90=86=20CategorySelector?=
 =?UTF-8?q?=20=E5=92=8C=20TitleBar=20=E4=B8=AD=E7=9A=84=20@apply=20?=
 =?UTF-8?q?=E8=BF=9D=E8=A7=84=20(M-UI-10/M-UI-12)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/CategorySelector.vue    | 37 ++++++-------------
 src/renderer/layout/components/TitleBar.vue   | 29 +++++----------
 2 files changed, 20 insertions(+), 46 deletions(-)

diff --git a/src/renderer/components/common/CategorySelector.vue b/src/renderer/components/common/CategorySelector.vue
index 5a5fd0f..8c6e0d8 100644
--- a/src/renderer/components/common/CategorySelector.vue
+++ b/src/renderer/components/common/CategorySelector.vue
@@ -1,14 +1,19 @@
 <template>
-  <div
-    class="category-selector border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10"
-  >
+  <div class="border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10">
     <n-scrollbar ref="scrollbarRef" x-scrollable>
-      <div class="categories-wrapper py-4 page-padding" @wheel.prevent="handleWheel">
+      <div
+        class="flex items-center py-4 page-padding"
+        style="white-space: nowrap"
+        @wheel.prevent="handleWheel"
+      >
         <span
           v-for="(category, index) in categories"
           :key="getItemKey(category, index)"
-          class="category-item"
-          :class="[animationClass, { active: isActive(category) }]"
+          class="py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300 text-sm font-medium bg-gray-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-gray-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white"
+          :class="[
+            animationClass,
+            isActive(category) ? 'bg-primary text-white shadow-lg shadow-primary/25 scale-105' : ''
+          ]"
           :style="getAnimationDelay(index)"
           @click="handleClickCategory(category)"
         >
@@ -96,23 +101,3 @@ defineExpose({
   scrollbarRef
 });
 </script>
-
-<style lang="scss" scoped>
-.category-selector {
-  .categories-wrapper {
-    @apply flex items-center;
-    white-space: nowrap;
-  }
-
-  .category-item {
-    @apply py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300;
-    @apply text-sm font-medium;
-    @apply bg-gray-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400;
-    @apply hover:bg-gray-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white;
-
-    &.active {
-      @apply bg-primary text-white shadow-lg shadow-primary/25 scale-105;
-    }
-  }
-}
-</style>
diff --git a/src/renderer/layout/components/TitleBar.vue b/src/renderer/layout/components/TitleBar.vue
index de32c68..bb78975 100644
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -1,7 +1,11 @@
 <template>
-  <div id="title-bar" @mousedown="drag">
+  <div
+    id="title-bar"
+    class="flex justify-between px-6 py-2 select-none relative text-dark dark:text-white"
+    @mousedown="drag"
+  >
     <div id="title">Alger Music</div>
-    <div id="buttons">
+    <div id="buttons" class="flex gap-4">
       <n-button
         v-if="!isElectron"
         type="primary"
@@ -14,13 +18,13 @@
         下载桌面版
       </n-button>
       <template v-if="isElectron">
-        <div class="button" @click="miniWindow">
+        <div class="text-gray-600 dark:text-gray-400 hover:text-green-500" @click="miniWindow">
           <i class="iconfont ri-picture-in-picture-line"></i>
         </div>
-        <div class="button" @click="minimize">
+        <div class="text-gray-600 dark:text-gray-400 hover:text-green-500" @click="minimize">
           <i class="iconfont icon-minisize"></i>
         </div>
-        <div class="button" @click="handleClose">
+        <div class="text-gray-600 dark:text-gray-400 hover:text-green-500" @click="handleClose">
           <i class="iconfont icon-close"></i>
         </div>
       </template>
@@ -188,25 +192,10 @@ const drag = (event: MouseEvent) => {
 <style scoped lang="scss">
 #title-bar {
   -webkit-app-region: drag;
-  @apply flex justify-between px-6 py-2 select-none relative;
-  @apply text-dark dark:text-white;
   z-index: 3000;
 }
 
 #buttons {
-  @apply flex gap-4;
   -webkit-app-region: no-drag;
 }
-
-.button {
-  @apply text-gray-600 dark:text-gray-400 hover:text-green-500;
-}
-
-.close-dialog-content {
-  @apply flex flex-col gap-4;
-}
-
-.dialog-footer {
-  @apply flex gap-4 justify-end;
-}
 </style>