🌈 style: 完善播放器组件样式

Author: imsyy

auto-eslint.mjs

@@ -26,6 +26,7 @@ declare module 'vue' {
     CommentFilter: typeof import('./src/components/Modal/CommentFilter.vue')['default']
     CommentList: typeof import('./src/components/List/CommentList.vue')['default']
     ConfigurableInputNumber: typeof import('./src/components/Setting/items/ConfigurableInputNumber.vue')['default']
+    copy: typeof import('./src/components/Global/Provider copy.vue')['default']
     CopyLyrics: typeof import('./src/components/Modal/CopyLyrics.vue')['default']
     CoverList: typeof import('./src/components/List/CoverList.vue')['default']
     CoverMenu: typeof import('./src/components/Menu/CoverMenu.vue')['default']
@@ -155,6 +156,7 @@ declare module 'vue' {
     PlayerData: typeof import('./src/components/Player/PlayerMeta/PlayerData.vue')['default']
     PlayerLyric: typeof import('./src/components/Player/PlayerLyric/index.vue')['default']
     PlayerMenu: typeof import('./src/components/Player/PlayerMenu.vue')['default']
+    PlayerProvider: typeof import('./src/components/Global/PlayerProvider.vue')['default']
     PlayerRightMenu: typeof import('./src/components/Player/PlayerRightMenu.vue')['default']
     PlayerSlider: typeof import('./src/components/Player/PlayerComponents/PlayerSlider.vue')['default']
     PlayerSpectrum: typeof import('./src/components/Player/PlayerComponents/PlayerSpectrum.vue')['default']

components.d.ts

@@ -1,7 +1,7 @@
 /* auto-generated by NAPI-RS */
 /* eslint-disable */
 /** 关闭 Discord RPC */
-export declare function disableDiscordRpc(): void
+export declare function disableDiscordRpc(): void;
 
 /**
  * 禁用媒体控件
@@ -10,7 +10,7 @@ export declare function disableDiscordRpc(): void
  *
  * 会在调用 API 失败时抛出错误
  */
-export declare function disableSystemMedia(): void
+export declare function disableSystemMedia(): void;
 
 /** Discord 配置参数 */
 export interface DiscordConfigPayload {
@@ -19,22 +19,23 @@ export interface DiscordConfigPayload {
    *
    * 注意暂停时进度会固定为 0
    */
-  showWhenPaused: boolean
+  showWhenPaused: boolean;
   /** 显示模式，参考 [`DiscordDisplayMode`] */
-  displayMode?: DiscordDisplayMode
+  displayMode?: DiscordDisplayMode;
 }
 
 /**
  * Discord 显示模式枚举
  *
  * 不打开详细信息面板时，在用户名下方显示的小字
  */
-export type DiscordDisplayMode = /** Listening to SPlayer */
-'Name'|
-/** Listening to Rick Astley */
-'State'|
-/** Listening to Never Gonna Give You Up */
-'Details';
+export type DiscordDisplayMode =
+  /** Listening to SPlayer */
+  | "Name"
+  /** Listening to Rick Astley */
+  | "State"
+  /** Listening to Never Gonna Give You Up */
+  | "Details";
 
 /**
  * 启用 Discord RPC
@@ -43,7 +44,7 @@ export type DiscordDisplayMode = /** Listening to SPlayer */
  *
  * 启用后会立刻尝试连接，如果 Discord 未启动，或因为其他未知原因连接失败，会每 5 秒尝试连接一次
  */
-export declare function enableDiscordRpc(): void
+export declare function enableDiscordRpc(): void;
 
 /**
  * 启用媒体控件
@@ -52,7 +53,7 @@ export declare function enableDiscordRpc(): void
  *
  * 会在调用 API 失败时抛出错误
  */
-export declare function enableSystemMedia(): void
+export declare function enableSystemMedia(): void;
 
 /**
  * 初始化插件
@@ -69,20 +70,20 @@ export declare function enableSystemMedia(): void
  *
  * 如果其他 API 调用失败，则只会打印日志并静默失败
  */
-export declare function initialize(logDir: string): void
+export declare function initialize(logDir: string): void;
 
 export interface MetadataParam {
-  songName: string
-  authorName: string
-  albumName: string
+  songName: string;
+  authorName: string;
+  albumName: string;
   /** 封面的原始字节数据，适用于除 Discord RPC 之外的其他平台 */
-  coverData?: Buffer
+  coverData?: Buffer;
   /**
    * 封面的 HTTP URL，更新 Discord RPC 时必传，其他平台可不传
    *
    * Linux 平台在没有提供 `cover_data` 时会使用它
    */
-  originalCoverUrl?: string
+  originalCoverUrl?: string;
   /**
    * 网易云音乐中对应的曲目 ID
    *
@@ -91,26 +92,25 @@ export interface MetadataParam {
    * - 生成 Discord RPC 的按钮链接
    * - MacOS 和 Linux 会使用此值来填充唯一的曲目 ID
    */
-  ncmId?: number
+  ncmId?: number;
   /**
    * 当前歌曲时长，单位是毫秒
    *
    * 用于 Linux、MacOS、Discord RPC 的元数据更新。Windows 使用 [`TimelinePayload`] 的
    * `total_time` 字段。
    */
-  duration?: number
+  duration?: number;
 }
 
-export type PlaybackStatus =  'Playing'|
-'Paused';
+export type PlaybackStatus = "Playing" | "Paused";
 
 export interface PlayModePayload {
-  isShuffling: boolean
-  repeatMode: RepeatMode
+  isShuffling: boolean;
+  repeatMode: RepeatMode;
 }
 
 export interface PlayStatePayload {
-  status: PlaybackStatus
+  status: PlaybackStatus;
 }
 
 /**
@@ -124,35 +124,34 @@ export interface PlayStatePayload {
  *
  * 如果 N-API 创建线程安全函数失败，会抛出错误。通常不应该发生，除非 JS 环境已经销毁了
  */
-export declare function registerEventHandler(callback: (arg: SystemMediaEvent) => void): void
+export declare function registerEventHandler(callback: (arg: SystemMediaEvent) => void): void;
 
-export type RepeatMode =  'None'|
-'Track'|
-'List';
+export type RepeatMode = "None" | "Track" | "List";
 
 /** 关闭插件，清理资源 */
-export declare function shutdown(): void
+export declare function shutdown(): void;
 
 export interface SystemMediaEvent {
-  type: SystemMediaEventType
-  positionMs?: number
+  type: SystemMediaEventType;
+  positionMs?: number;
 }
 
-export type SystemMediaEventType =  'Play'|
-'Pause'|
-'Stop'|
-'NextSong'|
-'PreviousSong'|
-'ToggleShuffle'|
-'ToggleRepeat'|
-/** 绝对位置，毫秒 */
-'Seek';
+export type SystemMediaEventType =
+  | "Play"
+  | "Pause"
+  | "Stop"
+  | "NextSong"
+  | "PreviousSong"
+  | "ToggleShuffle"
+  | "ToggleRepeat"
+  /** 绝对位置，毫秒 */
+  | "Seek";
 
 export interface TimelinePayload {
   /** 单位是毫秒 */
-  currentTime: number
+  currentTime: number;
   /** 单位是毫秒 */
-  totalTime: number
+  totalTime: number;
 }
 
 /**
@@ -163,7 +162,7 @@ export interface TimelinePayload {
  * * `payload` - 配置信息，可以配置是否在暂停后也显示 Discord Activity 和 状态显示风格。详情请查看
  *   [`DiscordConfigPayload`]
  */
-export declare function updateDiscordConfig(payload: DiscordConfigPayload): void
+export declare function updateDiscordConfig(payload: DiscordConfigPayload): void;
 
 /**
  * 更新歌曲元数据
@@ -174,7 +173,7 @@ export declare function updateDiscordConfig(payload: DiscordConfigPayload): void
  *
  * 更新 Discord RPC 的元数据时，必须提供 `original_cover_url`
  */
-export declare function updateMetadata(payload: MetadataParam): void
+export declare function updateMetadata(payload: MetadataParam): void;
 
 /**
  * 更新播放模式
@@ -183,14 +182,14 @@ export declare function updateMetadata(payload: MetadataParam): void
  *
  * 只会更新媒体控件的信息，不会更新 Discord RPC 上的信息
  */
-export declare function updatePlayMode(payload: PlayModePayload): void
+export declare function updatePlayMode(payload: PlayModePayload): void;
 
 /**
  * 更新播放状态 (播放/暂停)
  *
  * 同时也会更新 Discord 的播放状态 (如果启用了 Discord RPC)
  */
-export declare function updatePlayState(payload: PlayStatePayload): void
+export declare function updatePlayState(payload: PlayStatePayload): void;
 
 /**
  * 更新进度信息
@@ -201,4 +200,4 @@ export declare function updatePlayState(payload: PlayStatePayload): void
  *
  * Discord RPC 实现的进度更新有节流，调用此函数无需担心 Discord RPC 的速率限制
  */
-export declare function updateTimeline(payload: TimelinePayload): void
+export declare function updateTimeline(payload: TimelinePayload): void;

native/external-media-integration/index.d.ts

@@ -101,7 +101,9 @@
             </n-tag>
             <!-- 脏标 -->
             <n-tag
-              v-if="settingStore.showSongExplicitTag && (song.mark && (song.mark & EXPLICIT_CONTENT_MARK))"
+              v-if="
+                settingStore.showSongExplicitTag && song.mark && song.mark & EXPLICIT_CONTENT_MARK
+              "
               :bordered="false"
               class="explicit"
               type="error"

src/components/Card/SongCard.vue

@@ -0,0 +1,78 @@
+<!-- 全局配置 -->
+<template>
+  <n-config-provider :theme-overrides="themeOverrides" abstract preflight-style-disabled>
+    <slot />
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import type { GlobalThemeOverrides } from "naive-ui";
+import { useStatusStore } from "@/stores";
+
+const statusStore = useStatusStore();
+
+// 轻量的 rgba 构造器
+const toRGBA = (rgb: string, alpha: number) => `rgba(${rgb}, ${alpha})`;
+
+const themeOverrides = computed<GlobalThemeOverrides>(() => {
+  const { r, g, b } = statusStore.songCoverTheme.main ?? { r: 239, g: 239, b: 239 };
+  const coverRGB = `${r},${g},${b}`;
+  const commonBase = {
+    primaryColor: `rgb(${coverRGB})`,
+    primaryColorHover: toRGBA(coverRGB, 0.78),
+    primaryColorPressed: toRGBA(coverRGB, 0.26),
+    primaryColorSuppl: toRGBA(coverRGB, 0.12),
+  } as GlobalThemeOverrides["common"];
+
+  return {
+    common: {
+      ...commonBase,
+      textColorBase: coverRGB,
+      textColor1: coverRGB,
+      textColor2: toRGBA(coverRGB, 0.82),
+      textColor3: toRGBA(coverRGB, 0.52),
+      cardColor: toRGBA(coverRGB, 0.2),
+      tagColor: toRGBA(coverRGB, 0.2),
+      modalColor: toRGBA(coverRGB, 0.2),
+      popoverColor: toRGBA(coverRGB, 0.2),
+      buttonColor2: toRGBA(coverRGB, 0.08),
+      buttonColor2Hover: toRGBA(coverRGB, 0.12),
+      buttonColor2Pressed: toRGBA(coverRGB, 0.08),
+      iconColor: coverRGB,
+      iconColorHover: toRGBA(coverRGB, 0.475),
+      closeIconColor: toRGBA(coverRGB, 0.58),
+      hoverColor: toRGBA(coverRGB, 0.09),
+      borderColor: toRGBA(coverRGB, 0.09),
+      textColorDisabled: toRGBA(coverRGB, 0.3),
+      placeholderColorDisabled: toRGBA(coverRGB, 0.3),
+      iconColorDisabled: toRGBA(coverRGB, 0.3),
+    },
+    Button: {
+      textColorHover: toRGBA(coverRGB, 0.82),
+      textColorFocus: toRGBA(coverRGB, 0.82),
+      colorPrimary: toRGBA(coverRGB, 0.9),
+      colorHoverPrimary: toRGBA(coverRGB, 0.8),
+      colorPressedPrimary: toRGBA(coverRGB, 0.7),
+      colorFocusPrimary: toRGBA(coverRGB, 0.6),
+    },
+    Slider: {
+      handleColor: toRGBA(coverRGB, 0.9),
+      fillColor: toRGBA(coverRGB, 0.9),
+      fillColorHover: toRGBA(coverRGB, 0.9),
+      railColor: toRGBA(coverRGB, 0.2),
+      railColorHover: toRGBA(coverRGB, 0.3),
+      indicatorColor: toRGBA(coverRGB, 0.2),
+      indicatorTextColor: toRGBA(coverRGB, 0.9),
+    },
+    Popover: {
+      color: toRGBA(coverRGB, 0.2),
+    },
+    Icon: {
+      color: coverRGB,
+    },
+    Tooltip: {
+      color: coverRGB,
+    },
+  };
+});
+</script>

src/components/Global/PlayerProvider.vue

@@ -50,7 +50,7 @@ const settingStore = useSettingStore();
 // 操作系统主题
 const osTheme = useOsTheme();
 
-// 全局主题（使用 shallowRef 避免深层追踪开销）
+// 全局主题
 const themeOverrides = shallowRef<GlobalThemeOverrides>({});
 // 轻量的 rgba 构造器
 const toRGBA = (rgb: string, alpha: number) => `rgba(${rgb}, ${alpha})`;

src/components/Global/Provider.vue

@@ -2,12 +2,12 @@
   <Transition name="fade" mode="out-in">
     <n-flex v-if="data.length > 0" :size="20" :class="['comment-list', { transparent }]" vertical>
       <n-flex
-      v-for="(item, index) in data"
-      :key="index"
-      :size="20"
-      class="comments"
-      @dblclick="handleDoubleClick(item)"
-    >
+        v-for="(item, index) in data"
+        :key="index"
+        :size="20"
+        class="comments"
+        @dblclick="handleDoubleClick(item)"
+      >
         <div v-if="!transparent" class="user">
           <div class="avatar">
             <n-image

src/components/List/CommentList.vue

@@ -135,12 +135,5 @@ const formatTooltip = (value: number) => {
       }
     }
   }
-  &.player {
-    --n-rail-color: rgba(var(--main-cover-color), 0.14);
-    --n-rail-color-hover: rgba(var(--main-cover-color), 0.3);
-    --n-fill-color: rgb(var(--main-cover-color));
-    --n-handle-color: rgb(var(--main-cover-color));
-    --n-fill-color-hover: rgb(var(--main-cover-color));
-  }
 }
 </style>

src/components/Player/PlayerComponents/PlayerSlider.vue

@@ -105,13 +105,13 @@
           <!-- 进度条 -->
           <div class="slider">
             <span @click="toggleTimeFormat">{{ timeDisplay[0] }}</span>
-            <PlayerSlider class="player" :show-tooltip="false" />
+            <PlayerSlider :show-tooltip="false" />
             <span @click="toggleTimeFormat">{{ timeDisplay[1] }}</span>
           </div>
         </div>
         <n-flex class="right" align="center" justify="end">
           <!-- 功能区 -->
-          <PlayerRightMenu player />
+          <PlayerRightMenu />
         </n-flex>
       </div>
     </Transition>

src/components/Player/PlayerControl.vue

@@ -153,7 +153,7 @@ const lyricMode = computed(() => {
 
 // 左侧外边距
 const leftMargin = computed(() => {
-  if (props.center) return "0px";
+  if (props.center || !props.light) return "0px";
   const offset = settingStore.lyricHorizontalOffset;
   return settingStore.useAMLyrics ? `${offset + 40}px` : `${offset + 10}px`;
 });