✨ feat: 支持AB循环

components.d.ts

@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ABLoop: typeof import('./src/components/Modal/ABLoop.vue')['default']
     AboutSetting: typeof import('./src/components/Setting/AboutSetting.vue')['default']
     AMLLServer: typeof import('./src/components/Modal/Setting/AMLLServer.vue')['default']
     AMLyric: typeof import('./src/components/Player/PlayerLyric/AMLyric.vue')['default']

src/components/Modal/ABLoop.vue

@@ -0,0 +1,144 @@
+<template>
+  <n-flex :size="20" class="ab-loop" align="center" vertical>
+    <!-- Enable Switch -->
+    <n-card class="open">
+      <n-flex align="center" justify="space-between">
+        <n-flex size="small" align="center">
+          <SvgIcon name="Repeat" size="22" />
+          <n-text>AB 循环模式</n-text>
+        </n-flex>
+        <n-switch
+          v-model:value="statusStore.abLoop.enable"
+          :disabled="!canEnable"
+          :round="false"
+        />
+      </n-flex>
+    </n-card>
+
+    <!-- Point A -->
+    <n-card class="point-card">
+      <n-flex align="center" justify="space-between">
+        <n-flex vertical size="small">
+          <n-text strong>起点 A</n-text>
+          <n-text depth="3">{{ formatTime(statusStore.abLoop.pointA) }}</n-text>
+        </n-flex>
+        <n-flex>
+          <n-button size="small" secondary type="primary" @click="setPoint('A')">设为当前</n-button>
+          <n-button
+            size="small"
+            secondary
+            type="error"
+            @click="clearPoint('A')"
+            v-if="statusStore.abLoop.pointA !== null"
+          >
+            清除
+          </n-button>
+        </n-flex>
+      </n-flex>
+      <!-- Fine Tune -->
+      <n-input-number
+        v-if="statusStore.abLoop.pointA !== null"
+        v-model:value="statusStore.abLoop.pointA"
+        :step="0.1"
+        size="small"
+        style="margin-top: 10px"
+        placeholder="微调时间 (秒)"
+      >
+        <template #suffix>秒</template>
+      </n-input-number>
+    </n-card>
+
+    <!-- Point B -->
+    <n-card class="point-card">
+      <n-flex align="center" justify="space-between">
+        <n-flex vertical size="small">
+          <n-text strong>终点 B</n-text>
+          <n-text depth="3">{{ formatTime(statusStore.abLoop.pointB) }}</n-text>
+        </n-flex>
+        <n-flex>
+          <n-button size="small" secondary type="primary" @click="setPoint('B')">设为当前</n-button>
+          <n-button
+            size="small"
+            secondary
+            type="error"
+            @click="clearPoint('B')"
+            v-if="statusStore.abLoop.pointB !== null"
+          >
+            清除
+          </n-button>
+        </n-flex>
+      </n-flex>
+      <!-- Fine Tune -->
+      <n-input-number
+        v-if="statusStore.abLoop.pointB !== null"
+        v-model:value="statusStore.abLoop.pointB"
+        :step="0.1"
+        size="small"
+        style="margin-top: 10px"
+        placeholder="微调时间 (秒)"
+      >
+        <template #suffix>秒</template>
+      </n-input-number>
+    </n-card>
+
+    <n-text depth="3" style="font-size: 12px">
+      提示：若 B 点小于或等于 A 点，循环将不会生效。
+    </n-text>
+  </n-flex>
+</template>
+
+<script setup lang="ts">
+import { useStatusStore } from "@/stores";
+import { useAudioManager } from "@/core/player/AudioManager";
+import { convertSecondsToTime } from "@/utils/time";
+
+const statusStore = useStatusStore();
+const audioManager = useAudioManager();
+
+const canEnable = computed(() => {
+  return (
+    statusStore.abLoop.pointA !== null &&
+    statusStore.abLoop.pointB !== null &&
+    statusStore.abLoop.pointB > statusStore.abLoop.pointA
+  );
+});
+
+const formatTime = (time: number | null) => {
+  if (time === null) return "未设置";
+  return convertSecondsToTime(time);
+};
+
+const setPoint = (point: "A" | "B") => {
+  const current = audioManager.currentTime;
+  if (point === "A") {
+    statusStore.abLoop.pointA = Number(current.toFixed(2));
+  } else {
+    statusStore.abLoop.pointB = Number(current.toFixed(2));
+  }
+  // Auto disable if invalid
+  const { pointA, pointB } = statusStore.abLoop;
+  if (pointA !== null && pointB !== null && pointA >= pointB) {
+    statusStore.abLoop.enable = false;
+  }
+};
+
+const clearPoint = (point: "A" | "B") => {
+  if (point === "A") {
+    statusStore.abLoop.pointA = null;
+  } else {
+    statusStore.abLoop.pointB = null;
+  }
+  statusStore.abLoop.enable = false;
+};
+</script>
+
+<style scoped lang="scss">
+.ab-loop {
+  width: 100%;
+  .open,
+  .point-card {
+    width: 100%;
+    border-radius: 8px;
+  }
+}
+</style>

src/components/Player/PlayerRightMenu.vue

@@ -92,7 +92,7 @@ import { usePlayerController } from "@/core/player/PlayerController";
 import { useDataStore, useSettingStore, useStatusStore, useMusicStore } from "@/stores";
 import { isElectron } from "@/utils/env";
 import { renderIcon } from "@/utils/helper";
-import { openAutoClose, openChangeRate, openEqualizer } from "@/utils/modal";
+import { openAutoClose, openChangeRate, openEqualizer, openABLoop } from "@/utils/modal";
 import type { DropdownOption } from "naive-ui";
 import { useQualityControl } from "@/composables/useQualityControl";
 
@@ -146,6 +146,11 @@ const controlsOptions = computed<DropdownOption[]>(() => [
     key: "autoClose",
     icon: renderIcon("TimeAuto"),
   },
+  {
+    label: "AB 循环",
+    key: "abLoop",
+    icon: renderIcon("Repeat"),
+  },
   {
     label: "播放速度",
     key: "rate",
@@ -167,6 +172,9 @@ const handleControls = (key: string) => {
     case "autoClose":
       openAutoClose();
       break;
+    case "abLoop":
+      openABLoop();
+      break;
     case "rate":
       openChangeRate();
       break;

src/core/player/PlayerController.ts

@@ -168,6 +168,10 @@ class PlayerController {
       // 设置加载状态
       statusStore.playLoading = true;
       statusStore.lyricLoading = true;
+      // 重置 AB 循环
+      statusStore.abLoop.enable = false;
+      statusStore.abLoop.pointA = null;
+      statusStore.abLoop.pointB = null;
       // 通知桌面歌词
       if (isElectron) {
         window.electron.ipcRenderer.send("update-desktop-lyric-data", {
@@ -465,6 +469,14 @@ class PlayerController {
 
     // 进度更新
     this.onTimeUpdate = throttle(() => {
+      // 1. AB 循环 (200ms 精度)
+      const { enable, pointA, pointB } = statusStore.abLoop;
+      if (enable && pointA !== null && pointB !== null) {
+        if (audioManager.currentTime >= pointB) {
+          audioManager.seek(pointA);
+        }
+      }
+
       const rawTime = audioManager.currentTime;
       const currentTime = Math.floor(rawTime * 1000);
       const duration = Math.floor(audioManager.duration * 1000) || statusStore.duration;

src/stores/status.ts

@@ -141,6 +141,12 @@ interface StatusState {
   };
   /** 可用音质列表 */
   availableQualities: SongLevelDataType[];
+  /** AB 循环 */
+  abLoop: {
+    enable: boolean;
+    pointA: number | null;
+    pointB: number | null;
+  };
 }
 
 export const useStatusStore = defineStore("status", {
@@ -213,6 +219,11 @@ export const useStatusStore = defineStore("status", {
       isSolid: false,
     },
     availableQualities: [],
+    abLoop: {
+      enable: false,
+      pointA: null,
+      pointB: null,
+    },
   }),
   getters: {
     // 播放音量图标

src/utils/modal.ts

@@ -391,6 +391,21 @@ export const openAutoClose = async () => {
   });
 };
 
+/** 打开 AB 循环弹窗 */
+export const openABLoop = async () => {
+  const { default: ABLoop } = await import("@/components/Modal/ABLoop.vue");
+  window.$modal.create({
+    preset: "card",
+    transformOrigin: "center",
+    autoFocus: false,
+    style: { width: "500px" },
+    title: "AB 循环",
+    content: () => {
+      return h(ABLoop);
+    },
+  });
+};
+
 /** 打开均衡器弹窗 */
 export const openEqualizer = async () => {
   const { default: Equalizer } = await import("@/components/Modal/Equalizer.vue");