✨ feat: 新增全屏封面

imsyy · imsyy · commit 22589b4a4e9d · 2026-01-29T17:59:49.000+08:00
diff --git a/electron/server/index.ts b/electron/server/index.ts
@@ -61,7 +61,7 @@ const initAppServer = async () => {
     server.register(initQQMusicAPI, { prefix: "/api" });
     // 启动端口
     const port = Number(process.env["VITE_SERVER_PORT"] || 25884);
-    await server.listen({ port });
+    await server.listen({ port, host: "127.0.0.1" });
     serverLog.info(`🌐 Starting AppServer on port ${port}`);
     return server;
   } catch (error) {
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "splayer",
   "productName": "SPlayer",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-beta.9",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",
diff --git a/src/components/Player/FullPlayer.vue b/src/components/Player/FullPlayer.vue
@@ -28,6 +28,8 @@
           </Transition>
           <!-- 菜单 -->
           <PlayerMenu @mouseenter.stop="stopHide" @mouseleave.stop="playerMove" />
+          <!-- 全屏封面 -->
+          <PlayerCover v-if="settingStore.playerType === 'fullscreen' && !pureLyricMode" />
           <!-- 主内容 -->
           <Transition name="zoom" mode="out-in">
             <div
@@ -36,20 +38,18 @@
                 'player-content',
                 {
                   'no-lrc': noLrc,
-                  pure: statusStore.pureLyricMode && musicStore.isHasLrc,
+                  'full-screen': settingStore.playerType === 'fullscreen',
+                  pure: pureLyricMode && musicStore.isHasLrc,
                 },
               ]"
               @mousemove="playerMove"
             >
               <Transition name="zoom">
                 <div
-                  v-if="!pureLyricMode"
+                  v-if="!pureLyricMode && settingStore.playerType !== 'fullscreen'"
                   :key="musicStore.playSong.id"
                   class="content-left"
-                  :style="{
-                    width: `${settingStore.playerStyleRatio}%`,
-                    minWidth: `${settingStore.playerStyleRatio}%`,
-                  }"
+                  :style="layoutStyles.left"
                 >
                   <!-- 封面 -->
                   <PlayerCover />
@@ -58,21 +58,18 @@
                 </div>
               </Transition>
               <!-- 歌词 -->
-              <div
-                class="content-right"
-                :style="{
-                  width: `${100 - settingStore.playerStyleRatio}%`,
-                  maxWidth: `${100 - settingStore.playerStyleRatio}%`,
-                }"
-              >
+              <div class="content-right" :style="layoutStyles.right">
                 <!-- 数据 -->
                 <PlayerData
-                  v-if="statusStore.pureLyricMode && musicStore.isHasLrc"
-                  :center="statusStore.pureLyricMode"
-                  :light="pureLyricMode"
+                  v-if="
+                    (pureLyricMode && musicStore.isHasLrc) ||
+                    settingStore.playerType === 'fullscreen'
+                  "
+                  :center="pureLyricMode || noLrc"
+                  :light="!(settingStore.playerType === 'fullscreen' && noLrc)"
                 />
                 <!-- 歌词 -->
-                <PlayerLyric />
+                <PlayerLyric v-if="!noLrc" />
               </div>
             </div>
           </Transition>
@@ -118,8 +115,6 @@ const isShowComment = computed<boolean>(
 const noLrc = computed<boolean>(() => {
   const noNormalLrc = !musicStore.isHasLrc;
   const noYrcAvailable = !musicStore.isHasYrc || !settingStore.showYrc;
-  // const notLoading = !statusStore.lyricLoading;
-
   return noNormalLrc && noYrcAvailable;
 });
 
@@ -131,6 +126,21 @@ const pureLyricMode = computed<boolean>(
 // 主内容 key
 const playerContentKey = computed(() => `${musicStore.playSong.id}-${statusStore.pureLyricMode}`);
 
+// 左右布局样式
+const layoutStyles = computed(() => {
+  const ratio = settingStore.playerType === "fullscreen" ? 50 : settingStore.playerStyleRatio;
+  return {
+    left: {
+      width: `${ratio}%`,
+      minWidth: `${ratio}%`,
+    },
+    right: {
+      width: `${100 - ratio}%`,
+      maxWidth: `${100 - ratio}%`,
+    },
+  };
+});
+
 // 数据是否居中
 const playerDataCenter = computed<boolean>(
   () =>
@@ -295,13 +305,24 @@ onBeforeUnmount(() => {
     }
     // 无歌词
     &.no-lrc {
-      .content-left {
-        width: 50% !important;
-        transform: translateX(50%);
+      &:not(.full-screen) {
+        .content-left {
+          width: 50% !important;
+          transform: translateX(50%);
+        }
+        .content-right {
+          opacity: 0;
+          pointer-events: none;
+        }
       }
-      .content-right {
-        opacity: 0;
-        pointer-events: none;
+      &.full-screen {
+        .content-right {
+          .player-data {
+            width: 100%;
+            max-width: 100%;
+            transform: translateY(30vh);
+          }
+        }
       }
     }
   }
diff --git a/src/components/Player/PlayerControl.vue b/src/components/Player/PlayerControl.vue
@@ -234,7 +234,6 @@ const { timeDisplay, toggleTimeFormat } = useTimeFormat();
         --n-color-hover: rgba(var(--main-cover-color), 0.2);
         --n-color-focus: rgba(var(--main-cover-color), 0.2);
         --n-color-pressed: rgba(var(--main-cover-color), 0.12);
-        backdrop-filter: blur(10px);
         margin: 0 12px;
         transition:
           background-color 0.3s,
diff --git a/src/components/Player/PlayerMeta/PlayerCover.vue b/src/components/Player/PlayerMeta/PlayerCover.vue
@@ -1,5 +1,24 @@
 <template>
-  <div :class="['player-cover', settingStore.playerType, { playing: statusStore.playStatus }]">
+  <!-- 全屏封面 -->
+  <div
+    v-if="settingStore.playerType === 'fullscreen' && !isTablet"
+    class="full-screen"
+    :style="{ '--gradient-percent': settingStore.playerFullscreenGradient + '%' }"
+  >
+    <s-image
+      :src="musicStore.getSongCover('xl')"
+      :alt="musicStore.playSong.name"
+      :title="musicStore.playSong.name"
+      :lazy="false"
+      :width="'100%'"
+      :height="'100%'"
+    />
+  </div>
+  <!-- 普通封面 -->
+  <div
+    v-else
+    :class="['player-cover', settingStore.playerType, { playing: statusStore.playStatus }]"
+  >
     <!-- 指针 -->
     <img
       v-if="settingStore.playerType === 'record'"
@@ -33,6 +52,7 @@
 
 <script setup lang="ts">
 import { songDynamicCover } from "@/api/song";
+import { useMobile } from "@/composables/useMobile";
 import { useSettingStore, useStatusStore, useMusicStore } from "@/stores";
 import { isLogin } from "@/utils/auth";
 import { isEmpty } from "lodash-es";
@@ -41,6 +61,8 @@ const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
 
+const { isTablet } = useMobile();
+
 // 动态封面
 const dynamicCover = ref<string>("");
 const dynamicCoverLoaded = ref<boolean>(false);
@@ -273,4 +295,19 @@ onBeforeUnmount(() => {
     }
   }
 }
+.full-screen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 60vw;
+  z-index: 0;
+  mask-image: linear-gradient(to right, #000 var(--gradient-percent), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, #000 var(--gradient-percent), transparent 100%);
+  :deep(img) {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>
diff --git a/src/components/Player/PlayerMeta/PlayerData.vue b/src/components/Player/PlayerMeta/PlayerData.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="['player-data', settingStore.playerType, { center, light }]">
+  <div
+    :class="['player-data', settingStore.playerType, { center, light }]"
+    :style="{ marginLeft: leftMargin }"
+  >
     <!-- 名称 -->
     <div class="name">
       <span class="name-text text-hidden">
@@ -124,9 +127,10 @@ import { debounce, isObject } from "lodash-es";
 import { removeBrackets } from "@/utils/format";
 import { SongUnlockServer } from "@/core/player/SongManager";
 
-defineProps<{
+const props = defineProps<{
+  /** 数据居中 */
   center?: boolean;
-  // 少量数据模式
+  /** 少量数据模式 */
   light?: boolean;
 }>();
 
@@ -147,6 +151,13 @@ const lyricMode = computed(() => {
   return musicStore.isHasLrc ? "LRC" : "NO-LRC";
 });
 
+// 左侧外边距
+const leftMargin = computed(() => {
+  if (props.center) return "0px";
+  const offset = settingStore.lyricHorizontalOffset;
+  return settingStore.useAMLyrics ? `${offset + 40}px` : `${offset + 10}px`;
+});
+
 /** 歌曲解锁服务器名称映射 */
 const sourceMap: Record<string, string> = {
   [SongUnlockServer.NETEASE]: "Netease",
diff --git a/src/components/Setting/config/general.ts b/src/components/Setting/config/general.ts
@@ -148,6 +148,7 @@ export const useGeneralSettings = (): SettingConfig => {
             description: "注入自定义 CSS 和 JavaScript 代码",
             buttonLabel: "配置",
             action: openCustomCode,
+            show: statusStore.isDeveloperMode,
           },
         ],
       },
diff --git a/src/components/Setting/config/play.ts b/src/components/Setting/config/play.ts
@@ -295,7 +295,8 @@ export const usePlaySettings = (): SettingConfig => {
             key: "autoPlay",
             label: "自动播放",
             type: "switch",
-            description: isElectron ? "启动时是否自动播放" : "网页端不支持该功能",
+            description: "启动软件时是否自动播放",
+            show: isElectron,
             value: computed({
               get: () => settingStore.autoPlay,
               set: (v) => (settingStore.autoPlay = v),
@@ -466,7 +467,6 @@ export const usePlaySettings = (): SettingConfig => {
             disabled: computed(
               () => settingStore.playbackEngine !== "mpv" && settingStore.audioEngine === "ffmpeg",
             ),
-
             value: computed({
               get: () => settingStore.playDevice,
               set: (v) => playDeviceChange(v),
@@ -477,6 +477,7 @@ export const usePlaySettings = (): SettingConfig => {
       {
         title: "音乐解锁",
         tags: [{ text: "Beta", type: "warning" }],
+        show: isElectron,
         items: [
           {
             key: "useSongUnlock",
@@ -487,7 +488,6 @@ export const usePlaySettings = (): SettingConfig => {
               get: () => settingStore.useSongUnlock,
               set: (v) => (settingStore.useSongUnlock = v),
             }),
-            show: isElectron,
           },
           {
             key: "songUnlockConfig",
@@ -497,7 +497,6 @@ export const usePlaySettings = (): SettingConfig => {
             buttonLabel: "配置",
             action: openSongUnlockManager,
             disabled: computed(() => !settingStore.useSongUnlock),
-            show: isElectron,
           },
         ],
       },
@@ -526,26 +525,47 @@ export const usePlaySettings = (): SettingConfig => {
             options: [
               { label: "封面模式", value: "cover" },
               { label: "唱片模式", value: "record" },
+              { label: "全屏封面", value: "fullscreen" },
             ],
             value: computed({
               get: () => settingStore.playerType,
               set: (v) => (settingStore.playerType = v),
             }),
-          },
-          {
-            key: "playerStyleRatio",
-            label: "封面/歌词占比",
-            type: "slider",
-            description: "调整全屏模式下封面与歌词的宽度比例",
-            min: 30,
-            max: 70,
-            step: 1,
-            marks: { 50: "默认" },
-            formatTooltip: (v) => `${v}%`,
-            value: computed({
-              get: () => settingStore.playerStyleRatio,
-              set: (v) => (settingStore.playerStyleRatio = v),
-            }),
+            condition: () => true,
+            children: [
+              {
+                key: "playerStyleRatio",
+                label: "封面 / 歌词占比",
+                type: "slider",
+                description: "调整全屏播放器的封面与歌词的宽度比例",
+                min: 30,
+                max: 70,
+                step: 1,
+                marks: { 50: "默认" },
+                show: () => settingStore.playerType !== "fullscreen",
+                formatTooltip: (v) => `${v}%`,
+                value: computed({
+                  get: () => settingStore.playerStyleRatio,
+                  set: (v) => (settingStore.playerStyleRatio = v),
+                }),
+              },
+              {
+                key: "playerFullscreenGradient",
+                label: "封面过渡位置",
+                type: "slider",
+                description: "调整全屏封面右侧的渐变过渡位置",
+                show: () => settingStore.playerType === "fullscreen",
+                min: 0,
+                max: 100,
+                step: 1,
+                marks: { 15: "默认" },
+                formatTooltip: (v) => `${v}%`,
+                value: computed({
+                  get: () => settingStore.playerFullscreenGradient,
+                  set: (v) => (settingStore.playerFullscreenGradient = v),
+                }),
+              },
+            ],
           },
           {
             key: "playerBackgroundType",
diff --git a/src/components/Setting/config/third.ts b/src/components/Setting/config/third.ts
@@ -192,9 +192,11 @@ export const useThirdSettings = (): SettingConfig => {
         items: [
           {
             key: "smtcOpen",
-            label: "开启系统音频集成",
+            label: isElectron ? "开启系统音频集成" : "开启浏览器媒体会话",
             type: "switch",
-            description: "与系统集成以显示媒体元数据，支持高清封面显示",
+            description: isElectron
+              ? "与系统集成以显示媒体元数据，支持高清封面显示"
+              : "向浏览器发送 Media Session 媒体元数据",
             value: computed({
               get: () => settingStore.smtcOpen,
               set: (v) => (settingStore.smtcOpen = v),
diff --git a/src/config/settings/play.ts b/src/config/settings/play.ts
diff --git a/src/router/routes.ts b/src/router/routes.ts
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
diff --git a/src/style/main.scss b/src/style/main.scss

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "splayer",`
`3`	`3`	`"productName": "SPlayer",`
`4`		`- "version": "3.0.0-rc.1",`
	`4`	`+ "version": "3.0.0-beta.9",`
`5`	`5`	`"description": "A minimalist music player",`
`6`	`6`	`"main": "./out/main/index.js",`
`7`	`7`	`"author": "imsyy",`