lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-03 14:20:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
alger
2026-03-15 15:13:56 +08:00
parent a7b05e6d02
commit 66b5aac224
2 changed files with 20 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/components/common/CategorySelector.vue
View File

@@ -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>

29
src/renderer/layout/components/TitleBar.vue
View File

@@ -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>