From 0fbae257c243a9a661068e711d3b96b930111417 Mon Sep 17 00:00:00 2001
From: MoYingJi <moyingjiaw@outlook.com>
Date: Mon, 29 Dec 2025 01:07:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(player):=20=E6=B7=BB=E5=8A=A0=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E6=97=B6=E9=97=B4=E6=A0=BC=E5=BC=8F=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player/MainPlayer.vue    | 19 ++++---
 src/components/Player/PlayerControl.vue | 18 +++++--
 src/components/Setting/PlaySetting.vue  | 68 ++++++++++++++++++++-----
 src/stores/setting.ts                   |  7 +++
 src/utils/format.ts                     | 26 ++++++++++
 5 files changed, 115 insertions(+), 23 deletions(-)

diff --git a/src/components/Player/MainPlayer.vue b/src/components/Player/MainPlayer.vue
index a891672a5..5665b8d08 100644
--- a/src/components/Player/MainPlayer.vue
+++ b/src/components/Player/MainPlayer.vue
@@ -160,10 +160,9 @@
             class="time-container"
             vertical
           >
-            <div class="time" @click="showCountDown = !showCountDown">
-              <n-text v-if="showCountDown" depth="2">-{{ msToTime(statusStore.duration - statusStore.currentTime) }}</n-text>
-              <n-text v-else depth="2">{{ msToTime(statusStore.currentTime) }}</n-text>
-              <n-text depth="2">{{ msToTime(statusStore.duration) }}</n-text>
+            <div class="time" @click="toggleTimeFormat">
+              <n-text depth="2">{{ timeDisplay0 }}</n-text>
+              <n-text depth="2">{{ timeDisplay1 }}</n-text>
             </div>
             <!-- 定时关闭 -->
             <n-tag
@@ -190,7 +189,7 @@
 <script setup lang="ts">
 import type { DropdownOption } from "naive-ui";
 import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
-import { msToTime, convertSecondsToTime } from "@/utils/time";
+import { convertSecondsToTime } from "@/utils/time";
 import { renderIcon, coverLoaded, copyData } from "@/utils/helper";
 import { toLikeSong } from "@/utils/auth";
 import {
@@ -202,6 +201,7 @@ import {
 } from "@/utils/modal";
 import { useSongManager } from "@/core/player/SongManager";
 import { usePlayerController } from "@/core/player/PlayerController";
+import { getTimeDisplay, TIME_FORMATS } from "@/utils/format";
 
 const router = useRouter();
 const dataStore = useDataStore();
@@ -212,7 +212,14 @@ const settingStore = useSettingStore();
 const player = usePlayerController();
 const songManager = useSongManager();
 
-const showCountDown = ref(false);
+const timeDisplay = getTimeDisplay(() => settingStore.timeFormatMainPlayer, statusStore);
+const timeDisplay0 = timeDisplay(0);
+const timeDisplay1 = timeDisplay(1);
+
+const toggleTimeFormat = () => {
+  const currentIndex = TIME_FORMATS.indexOf(settingStore.timeFormatMainPlayer)
+  settingStore.timeFormatMainPlayer = TIME_FORMATS[(currentIndex + 1) % TIME_FORMATS.length];
+};
 
 // 歌曲更多操作
 const songMoreOptions = computed<DropdownOption[]>(() => {
diff --git a/src/components/Player/PlayerControl.vue b/src/components/Player/PlayerControl.vue
index 22afad339..a259e45b8 100644
--- a/src/components/Player/PlayerControl.vue
+++ b/src/components/Player/PlayerControl.vue
@@ -80,9 +80,9 @@
           </div>
           <!-- 进度条 -->
           <div class="slider">
-            <span>{{ msToTime(statusStore.currentTime) }}</span>
+            <span @click="toggleTimeFormat">{{ timeDisplay0 }}</span>
             <PlayerSlider :show-tooltip="false" />
-            <span>{{ msToTime(statusStore.duration) }}</span>
+            <span @click="toggleTimeFormat">{{ timeDisplay1 }}</span>
           </div>
         </div>
         <n-flex class="right" align="center" justify="end">
@@ -95,19 +95,29 @@
 </template>
 
 <script setup lang="ts">
-import { useMusicStore, useStatusStore, useDataStore } from "@/stores";
-import { msToTime } from "@/utils/time";
+import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { openDownloadSong, openPlaylistAdd } from "@/utils/modal";
 import { toLikeSong } from "@/utils/auth";
 import { useSongManager } from "@/core/player/SongManager";
 import { usePlayerController } from "@/core/player/PlayerController";
+import { getTimeDisplay, TIME_FORMATS } from "@/utils/format";
 
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 
 const songManager = useSongManager();
 const player = usePlayerController();
+
+const timeDisplay = getTimeDisplay(() => settingStore.timeFormatFullPlayer, statusStore);
+const timeDisplay0 = timeDisplay(0);
+const timeDisplay1 = timeDisplay(1);
+
+const toggleTimeFormat = () => {
+  const currentIndex = TIME_FORMATS.indexOf(settingStore.timeFormatFullPlayer);
+  settingStore.timeFormatFullPlayer = TIME_FORMATS[(currentIndex + 1) % TIME_FORMATS.length];
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Setting/PlaySetting.vue b/src/components/Setting/PlaySetting.vue
index e4fa1576e..7e96ad4dc 100644
--- a/src/components/Setting/PlaySetting.vue
+++ b/src/components/Setting/PlaySetting.vue
@@ -236,6 +236,17 @@
           />
         </n-card>
       </n-collapse-transition>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">播放器时间样式</n-text>
+          <n-text class="tip" :depth="3">播放页面底部的时间如何显示（单击底部时间可以快速切换）</n-text>
+        </div>
+        <n-select
+          v-model:value="settingStore.timeFormatFullPlayer"
+          :options="timeFormatOptions"
+          class="set"
+        />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">播放器主色跟随封面</n-text>
@@ -250,13 +261,6 @@
         </div>
         <n-switch v-model:value="settingStore.countDownShow" class="set" :round="false" />
       </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">底栏歌词显示</n-text>
-          <n-text class="tip" :depth="3">在播放时将歌手信息更改为歌词</n-text>
-        </div>
-        <n-switch v-model:value="settingStore.barLyricShow" class="set" :round="false" />
-      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">播放器元素自动隐藏</n-text>
@@ -271,12 +275,6 @@
         </div>
         <n-switch v-model:value="settingStore.showPlayMeta" class="set" :round="false" />
       </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">播放列表歌曲数量</n-text>
-        </div>
-        <n-switch v-model:value="settingStore.showPlaylistCount" class="set" :round="false" />
-      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">动态封面</n-text>
@@ -304,6 +302,35 @@
         />
       </n-card>
     </div>
+    <div class="set-list">
+      <n-h3 prefix="bar"> 全局播放器 </n-h3>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">底栏时间样式</n-text>
+          <n-text class="tip" :depth="3">
+            全局播放器右侧的时间如何显示（单击底栏时间可以快速切换）
+          </n-text>
+        </div>
+        <n-select
+          v-model:value="settingStore.timeFormatMainPlayer"
+          :options="timeFormatOptions"
+          class="set"
+        />
+      </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">播放列表歌曲数量</n-text>
+        </div>
+        <n-switch v-model:value="settingStore.showPlaylistCount" class="set" :round="false" />
+      </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">底栏歌词显示</n-text>
+          <n-text class="tip" :depth="3">在播放时将歌手信息更改为歌词</n-text>
+        </div>
+        <n-switch v-model:value="settingStore.barLyricShow" class="set" :round="false" />
+      </n-card>
+    </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 系统集成 </n-h3>
       <n-card class="set-item">
@@ -390,6 +417,21 @@ const songLevelData = {
   },
 };
 
+const timeFormatOptions = [
+  {
+    label: "播放时间 / 总时长",
+    value: "current-total",
+  },
+  {
+    label: "剩余时间 / 总时长",
+    value: "remaining-total",
+  },
+  {
+    label: "播放时间 / 剩余时间",
+    value: "current-remaining",
+  },
+];
+
 // 获取全部输出设备
 const getOutputDevices = async () => {
   const allDevices = await navigator.mediaDevices.enumerateDevices();
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index 56f7de18d..43f3e04e8 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -4,6 +4,7 @@ import { SongUnlockServer } from "@/core/player/SongManager";
 import type { SongLevelType } from "@/types/main";
 import { defaultAMLLDbServer } from "@/utils/meta";
 import { CURRENT_SETTING_SCHEMA_VERSION, settingMigrations } from "./migrations/settingMigrations";
+import { TimeFormat } from "@/utils/format";
 
 export interface SettingState {
   /** Schema 版本号（可选，用于数据迁移） */
@@ -129,6 +130,10 @@ export interface SettingState {
   countDownShow: boolean;
   /** 显示歌词条 */
   barLyricShow: boolean;
+  /** 全局播放器时间格式 **/
+  timeFormatMainPlayer: TimeFormat;
+  /** 播放页面时间格式 */
+  timeFormatFullPlayer: TimeFormat;
   /** 播放器类型 */
   playerType: "cover" | "record";
   /** 背景类型 */
@@ -317,6 +322,8 @@ export const useSettingStore = defineStore("setting", {
     ],
     countDownShow: true,
     barLyricShow: true,
+    timeFormatMainPlayer: "current-total",
+    timeFormatFullPlayer: "current-total",
     playerType: "cover",
     playerBackgroundType: "blur",
     playerBackgroundFps: 30,
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 1f7fe6eeb..7d53102ab 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -353,3 +353,29 @@ export const getPlayerInfo = (song?: SongType, sep: string = "/"): string | null
   if (!info) return null;
   return `${info.name} - ${info.artist}`;
 };
+
+// 歌曲播放时间显示类型
+export type TimeDisplayType = "current" | "total" | "remaining";
+
+// 歌曲播放时间显示格式
+export const TIME_FORMATS = ["current-total", "remaining-total", "current-remaining"] as const;
+export type TimeFormat = typeof TIME_FORMATS[number];
+
+export const displayTimeFormat = (format: TimeFormat): [TimeDisplayType, TimeDisplayType] => {
+  switch (format) {
+    case "current-total":     return ["current",   "total"];
+    case "remaining-total":   return ["remaining", "total"];
+    case "current-remaining": return ["current",   "remaining"];
+  }
+};
+
+export const getTimeDisplay = (
+  format: () => TimeFormat, statusStore: { currentTime: number, duration: number }
+) => (index: number) => computed(() => {
+  const display = displayTimeFormat(format())[index];
+  switch (display) {
+    case "current":   return msToTime(statusStore.currentTime);
+    case "total":     return msToTime(statusStore.duration);
+    case "remaining": return "-" + msToTime(statusStore.duration - statusStore.currentTime);
+  }
+});