style: 清理 CategorySelector 和 TitleBar 中的 @apply 违规 (M-UI-10/M-UI-12)

src/renderer/components/common/CategorySelector.vue

@@ -1,14 +1,19 @@
 <template>
-  <div
+  <div class="border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10">
-    class="category-selector 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="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, { active: isActive(category) }]"
+          :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>

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>