From 2b963e4bfefeb891dde740484d720dd8a4b0df8d Mon Sep 17 00:00:00 2001
From: owen <itcsx@126.com>
Date: Thu, 17 Sep 2026 08:45:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/basic/VinylAudioPlayer.vue | 1194 +++++++++++++++++
 WebVue/src/views/master/PreviewAudio.vue      |   76 +-
 2 files changed, 1215 insertions(+), 55 deletions(-)
 create mode 100644 WebVue/src/components/basic/VinylAudioPlayer.vue

diff --git a/WebVue/src/components/basic/VinylAudioPlayer.vue b/WebVue/src/components/basic/VinylAudioPlayer.vue
new file mode 100644
index 0000000..43a6309
--- /dev/null
+++ b/WebVue/src/components/basic/VinylAudioPlayer.vue
@@ -0,0 +1,1194 @@
+<template>
+    <div class="vap" :class="{ 'vap--glow': effectOn }">
+        <audio ref="audioRef" :src="current?.url" preload="metadata" @timeupdate="onTimeUpdate"
+            @loadedmetadata="onLoadedMetadata" @durationchange="onLoadedMetadata" @ended="onEnded" @play="isPlaying = true"
+            @pause="isPlaying = false" @error="onError"></audio>
+
+        <!-- 空列表 -->
+        <div v-if="!current" class="vap-empty">
+            <CustomerServiceOutlined />
+            <p>暂无音频</p>
+        </div>
+
+        <div v-else class="vap-body">
+            <!-- 收起 -->
+            <button class="vap-collapse" type="button" title="收起播放器" @click="emit('close')">
+                <DownOutlined />
+            </button>
+
+            <!-- 唱片 + 唱臂 -->
+            <div class="vap-stage">
+                <div class="vap-turntable">
+                    <div class="vap-disc" :class="{ 'is-spinning': isPlaying }">
+                        <img v-if="current.cover && !coverError" class="vap-disc-cover" :src="current.cover" alt=""
+                            @error="coverError = true" />
+                        <div v-else class="vap-disc-holder">
+                            <CustomerServiceOutlined />
+                        </div>
+                        <span class="vap-disc-hole"></span>
+                    </div>
+                    <div class="vap-arm" :class="{ 'is-on': isPlaying }">
+                        <span class="vap-arm-rod"></span>
+                        <span class="vap-arm-cap"></span>
+                        <span class="vap-arm-joint"></span>
+                        <span class="vap-arm-head"></span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 歌词 -->
+            <div class="vap-lyric">
+                <p v-if="!lyricLines.length" class="vap-lyric-empty">无歌词</p>
+                <div v-else class="vap-lyric-inner" :style="lyricStyle">
+                    <p v-for="(line, i) in lyricLines" :key="i" class="vap-lyric-line"
+                        :class="{ 'is-active': i === lyricIndex }" :title="line.text" @click="seekTo(line.time)">
+                        {{ line.text }}</p>
+                </div>
+            </div>
+
+            <!-- 标题 / 歌手 -->
+            <div class="vap-meta">
+                <h2 class="vap-title">
+                    <span class="vap-title-text">{{ current.name }}</span>
+                    <button class="vap-info" type="button" title="歌曲信息" @click="onInfo">
+                        <InfoCircleOutlined />
+                    </button>
+                </h2>
+                <p class="vap-artist">{{ current.author || "未知歌手" }}</p>
+            </div>
+
+            <!-- 功能图标行 -->
+            <div class="vap-actions">
+                <button class="vap-act" :class="{ 'is-fav': isFaved }" type="button" title="喜欢" @click="onFav">
+                    <HeartFilled v-if="isFaved" />
+                    <HeartOutlined v-else />
+                </button>
+                <button class="vap-act" type="button" title="下载" @click="onDownload">
+                    <DownloadOutlined />
+                    <span class="vap-badge" :class="{ 'is-on': downloaded }">{{ downloaded ? "ON" : "OFF" }}</span>
+                </button>
+                <button class="vap-act" type="button" title="音效" @click="effectOn = !effectOn">
+                    <span class="vap-eq" :class="{ 'is-on': effectOn }"><i></i><i></i><i></i></span>
+                    <span class="vap-badge" :class="{ 'is-on': effectOn }">{{ effectOn ? "ON" : "OFF" }}</span>
+                </button>
+                <button class="vap-act" :class="{ 'is-on': sleepAt > 0 || stopAfterEnd }" type="button" title="定时关闭"
+                    @click.stop="toggleMenu('timer')">
+                    <FieldTimeOutlined />
+                </button>
+                <button class="vap-act" :class="{ 'is-muted': isMuted }" type="button" title="音量"
+                    @click.stop="toggleMenu('volume')">
+                    <AudioMutedOutlined v-if="isMuted" />
+                    <AudioOutlined v-else />
+                </button>
+                <button class="vap-act" type="button" title="更多" @click.stop="toggleMenu('more')">
+                    <EllipsisOutlined class="vap-rot90" />
+                </button>
+
+                <!-- 弹层：定时关闭 -->
+                <div v-if="menu === 'timer'" class="vap-pop">
+                    <button v-for="o in timerOptions" :key="o.value" type="button"
+                        :class="{ 'is-on': sleepMinutes === o.value }" @click="onSleep(o.value)">
+                        {{ o.label }}<template v-if="sleepMinutes === o.value && sleepLeft">（{{ sleepLeft }}）</template>
+                    </button>
+                </div>
+
+                <!-- 弹层：音量 -->
+                <div v-if="menu === 'volume'" class="vap-pop vap-pop-vol">
+                    <span class="vap-vol-num">{{ Math.round(volume * 100) }}</span>
+                    <div class="vap-vol-track" ref="volRef" @pointerdown="onVolDown" @pointermove="onVolMove"
+                        @pointerup="onVolUp" @pointercancel="onVolUp">
+                        <span class="vap-vol-fill" :style="{ height: volume * 100 + '%' }"></span>
+                    </div>
+                </div>
+
+                <!-- 弹层：更多（倍速） -->
+                <div v-if="menu === 'more'" class="vap-pop">
+                    <button v-for="r in rateOptions" :key="r" type="button" :class="{ 'is-on': rate === r }"
+                        @click="rate = r">倍速 {{ r }}x</button>
+                </div>
+            </div>
+
+            <!-- 进度 -->
+            <div class="vap-progress" ref="barRef" @pointerdown="onBarDown" @pointermove="onBarMove" @pointerup="onBarUp"
+                @pointercancel="onBarUp">
+                <div class="vap-bar">
+                    <span class="vap-bar-fill" :style="{ width: displayRatio * 100 + '%' }"></span>
+                    <span class="vap-bar-thumb" :style="{ left: displayRatio * 100 + '%' }"></span>
+                </div>
+                <div class="vap-times">
+                    <span>{{ fmt(displayTime) }}</span>
+                    <span>{{ fmt(duration) }}</span>
+                </div>
+            </div>
+
+            <!-- 主控制 -->
+            <div class="vap-controls">
+                <button class="vap-ctl" type="button" :title="modeTitle" @click="cycleMode">
+                    <RetweetOutlined v-if="mode !== 'random'" />
+                    <SwapOutlined v-else />
+                    <span v-if="mode === 'one'" class="vap-mode-one">1</span>
+                </button>
+                <button class="vap-ctl" type="button" title="上一首" @click="goPrev">
+                    <StepBackwardFilled />
+                </button>
+                <button class="vap-play" type="button" :title="isPlaying ? '暂停' : '播放'" @click="toggle">
+                    <PauseOutlined v-if="isPlaying" />
+                    <CaretRightFilled v-else />
+                </button>
+                <button class="vap-ctl" type="button" title="下一首" @click="goNext(false)">
+                    <StepForwardFilled />
+                </button>
+                <button class="vap-ctl" type="button" title="播放列表" @click="showList = !showList">
+                    <UnorderedListOutlined />
+                </button>
+            </div>
+        </div>
+
+        <!-- 播放列表 -->
+        <transition name="vap-sheet">
+            <section v-if="showList && tracks.length" class="vap-list">
+                <header class="vap-list-head">
+                    <span>播放列表（{{ tracks.length }}）</span>
+                    <button type="button" title="关闭" @click="showList = false">
+                        <CloseOutlined />
+                    </button>
+                </header>
+                <ul class="vap-list-body">
+                    <li v-for="(t, i) in tracks" :key="i" :class="{ 'is-active': i === index }" @click="playAt(i)">
+                        <span class="vap-list-idx">
+                            <span v-if="i === index && isPlaying" class="vap-eq is-on"><i></i><i></i><i></i></span>
+                            <template v-else>{{ i + 1 }}</template>
+                        </span>
+                        <span class="vap-list-name">{{ t.name }}</span>
+                        <span class="vap-list-author">{{ t.author }}</span>
+                    </li>
+                </ul>
+            </section>
+        </transition>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { message } from "ant-design-vue";
+import { request } from "@/utils/request";
+import {
+    DownOutlined, HeartOutlined, HeartFilled, DownloadOutlined, FieldTimeOutlined,
+    AudioOutlined, AudioMutedOutlined, EllipsisOutlined, InfoCircleOutlined,
+    RetweetOutlined, SwapOutlined, StepBackwardFilled, StepForwardFilled,
+    CaretRightFilled, PauseOutlined, UnorderedListOutlined, CloseOutlined,
+    CustomerServiceOutlined,
+} from "@ant-design/icons-vue";
+
+/** 一首歌 */
+export interface VinylTrack {
+    /** 歌名 */
+    name: string;
+    /** 歌手 */
+    author?: string;
+    /** 音频地址 */
+    url: string;
+    /** 封面地址 */
+    cover?: string;
+    /** 歌词：LRC 文本，或 LRC 文件地址 */
+    lrc?: string;
+}
+
+const props = withDefaults(defineProps<{ tracks?: VinylTrack[] }>(), { tracks: () => [] });
+const emit = defineEmits<{ (e: "close"): void }>();
+
+/* ---------------- 基础状态 ---------------- */
+const audioRef = ref<HTMLAudioElement | null>(null);
+const index = ref(0);
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const volume = ref(0.9);
+const muted = ref(false);
+const rate = ref(1);
+const mode = ref<"list" | "one" | "random">("list");
+const showList = ref(false);
+const menu = ref<"" | "timer" | "volume" | "more">("");
+const effectOn = ref(false);
+const downloaded = ref(false);
+const coverError = ref(false);
+/** 切歌后是否接着播（点上一首/下一首/列表点歌时为 true） */
+let resumeAfterSwitch = false;
+
+const tracks = computed(() => props.tracks || []);
+const current = computed<VinylTrack | null>(() => tracks.value[index.value] ?? null);
+const isMuted = computed(() => muted.value || volume.value === 0);
+const modeTitle = computed(() => ({ list: "列表循环", one: "单曲循环", random: "随机播放" }[mode.value]));
+const rateOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+/* ---------------- 播放控制 ---------------- */
+const tryPlay = () => {
+    // 自动播放被浏览器拦截时静默失败，等用户点播放键
+    audioRef.value?.play().catch(() => { });
+};
+const toggle = () => {
+    const a = audioRef.value;
+    if (!a || !current.value) return;
+    if (a.paused) tryPlay();
+    else a.pause();
+};
+const playAt = (i: number) => {
+    if (i === index.value) {
+        toggle();
+        return;
+    }
+    resumeAfterSwitch = true;
+    index.value = i;
+};
+const goPrev = () => {
+    const n = tracks.value.length;
+    if (!n) return;
+    resumeAfterSwitch = true;
+    index.value = (index.value - 1 + n) % n;
+};
+const goNext = (auto: boolean) => {
+    const n = tracks.value.length;
+    if (!n) return;
+    resumeAfterSwitch = true;
+    if (auto && mode.value === "random" && n > 1) {
+        let r = index.value;
+        while (r === index.value) r = Math.floor(Math.random() * n);
+        index.value = r;
+    } else {
+        index.value = (index.value + 1) % n;
+    }
+};
+const cycleMode = () => {
+    mode.value = mode.value === "list" ? "one" : mode.value === "one" ? "random" : "list";
+};
+const seekTo = (t: number) => {
+    const a = audioRef.value;
+    if (a && isFinite(t)) a.currentTime = Math.max(0, t);
+};
+
+/* ---------------- audio 事件 ---------------- */
+const onTimeUpdate = () => {
+    const a = audioRef.value;
+    if (!a || dragRatio.value !== null) return;
+    currentTime.value = a.currentTime;
+    syncLyric();
+};
+const onLoadedMetadata = () => {
+    const a = audioRef.value;
+    if (a && isFinite(a.duration)) duration.value = a.duration;
+};
+const onEnded = () => {
+    if (stopAfterEnd.value) {
+        stopAfterEnd.value = false;
+        sleepMinutes.value = 0;
+        return;
+    }
+    if (mode.value === "one") {
+        const a = audioRef.value;
+        if (a) {
+            a.currentTime = 0;
+            tryPlay();
+        }
+        return;
+    }
+    goNext(true);
+};
+const onError = () => {
+    // 音频地址拉不起来时只静默处理，避免打断页面
+};
+
+/* ---------------- 歌词 ---------------- */
+interface LyricLine {
+    time: number;
+    text: string;
+}
+const LYRIC_TAG = /\[(\d{1,3}):(\d{1,2})(?:[.:](\d{1,3}))?\]/g;
+const LYRIC_LINE_H = 26;
+const lyricLines = ref<LyricLine[]>([]);
+const lyricIndex = ref(-1);
+
+const parseLrc = (text: string): LyricLine[] => {
+    const out: LyricLine[] = [];
+    text.split(/\r?\n/).forEach((raw) => {
+        const tags = Array.from(raw.matchAll(LYRIC_TAG));
+        if (!tags.length) return;
+        const body = raw.replace(LYRIC_TAG, "").trim();
+        tags.forEach((m) => {
+            const frac = m[3] ? Number("0." + m[3]) : 0;
+            out.push({ time: Number(m[1]) * 60 + Number(m[2]) + frac, text: body });
+        });
+    });
+    return out.filter((l) => l.text).sort((a, b) => a.time - b.time);
+};
+const loadLrc = async (src?: string) => {
+    lyricLines.value = [];
+    lyricIndex.value = -1;
+    if (!src) return;
+    try {
+        let text = src;
+        // 不是 LRC 文本就当作文件地址去拉
+        if (!/\[\d{1,3}:\d{1,2}/.test(src)) {
+            const res = await fetch(src, { credentials: "include" });
+            if (!res.ok) return;
+            text = await res.text();
+        }
+        const lines = parseLrc(text);
+        // 切歌后旧请求迟到，不允许覆盖新歌的歌词
+        if (current.value?.lrc === src) lyricLines.value = lines;
+    } catch {
+        // 歌词拉取失败就当作无歌词
+    }
+};
+const syncLyric = () => {
+    const t = currentTime.value;
+    let i = -1;
+    for (let k = 0; k < lyricLines.value.length; k++) {
+        if (lyricLines.value[k].time <= t + 0.2) i = k;
+        else break;
+    }
+    lyricIndex.value = i;
+};
+const lyricStyle = computed(() => ({
+    transform: `translateY(${39 - (lyricIndex.value + 0.5) * LYRIC_LINE_H}px)`,
+}));
+
+/* ---------------- 进度条（支持鼠标/触摸拖动） ---------------- */
+const barRef = ref<HTMLElement | null>(null);
+let draggingBar = false;
+const dragRatio = ref<number | null>(null);
+const ratioFromEvent = (e: PointerEvent) => {
+    const el = barRef.value;
+    if (!el) return 0;
+    const r = el.getBoundingClientRect();
+    return Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+};
+const onBarDown = (e: PointerEvent) => {
+    if (!current.value || !duration.value) return;
+    draggingBar = true;
+    dragRatio.value = ratioFromEvent(e);
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+};
+const onBarMove = (e: PointerEvent) => {
+    if (draggingBar) dragRatio.value = ratioFromEvent(e);
+};
+const onBarUp = (e: PointerEvent) => {
+    if (!draggingBar) return;
+    draggingBar = false;
+    const r = ratioFromEvent(e);
+    if (audioRef.value && duration.value > 0) audioRef.value.currentTime = r * duration.value;
+    dragRatio.value = null;
+};
+const displayRatio = computed(
+    () => dragRatio.value ?? (duration.value > 0 ? currentTime.value / duration.value : 0)
+);
+const displayTime = computed(() =>
+    dragRatio.value !== null && duration.value > 0 ? dragRatio.value * duration.value : currentTime.value
+);
+
+/* ---------------- 音量 ---------------- */
+const volRef = ref<HTMLElement | null>(null);
+let draggingVol = false;
+const volFromEvent = (e: PointerEvent) => {
+    const el = volRef.value;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    volume.value = Math.min(1, Math.max(0, 1 - (e.clientY - r.top) / r.height));
+    muted.value = false;
+};
+const onVolDown = (e: PointerEvent) => {
+    draggingVol = true;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    volFromEvent(e);
+};
+const onVolMove = (e: PointerEvent) => {
+    if (draggingVol) volFromEvent(e);
+};
+const onVolUp = () => {
+    draggingVol = false;
+};
+
+/* ---------------- 定时关闭 ---------------- */
+const timerOptions = [
+    { label: "不开启", value: 0 },
+    { label: "15 分钟", value: 15 },
+    { label: "30 分钟", value: 30 },
+    { label: "60 分钟", value: 60 },
+    { label: "播完当前", value: -1 },
+];
+const sleepMinutes = ref(0);
+const sleepAt = ref(0);
+const stopAfterEnd = ref(false);
+const nowTick = ref(Date.now());
+const sleepLeft = computed(() => {
+    if (sleepAt.value <= nowTick.value) return "";
+    const s = Math.ceil((sleepAt.value - nowTick.value) / 1000);
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+});
+const onSleep = (v: number) => {
+    sleepMinutes.value = v;
+    stopAfterEnd.value = v === -1;
+    sleepAt.value = v > 0 ? Date.now() + v * 60000 : 0;
+    menu.value = "";
+};
+
+/* ---------------- 喜欢 / 下载 / 信息 ---------------- */
+const FAV_KEY = "vap-favs";
+const loadFavs = (): Set<string> => {
+    try {
+        return new Set<string>(JSON.parse(localStorage.getItem(FAV_KEY) || "[]"));
+    } catch {
+        return new Set<string>();
+    }
+};
+const favs = ref<Set<string>>(loadFavs());
+const isFaved = computed(() => !!current.value && favs.value.has(current.value.url));
+const onFav = () => {
+    if (!current.value) return;
+    const s = new Set(favs.value);
+    if (s.has(current.value.url)) s.delete(current.value.url);
+    else s.add(current.value.url);
+    favs.value = s;
+    localStorage.setItem(FAV_KEY, JSON.stringify([...s]));
+};
+const onDownload = async () => {
+    if (!current.value) return;
+    // 参考 DmsFileEnquiry.vue：先取回字节流，再用 Blob + <a download> 落盘
+    try {
+        const res = await request<ArrayBuffer>({
+            url: current.value.url,
+            method: "get",
+            responseType: "arraybuffer",
+        });
+        const blobUrl = window.URL.createObjectURL(new Blob([res]));
+        const ext = (current.value.url.match(/\.(\w{2,5})(?:\?|#|$)/) || [])[1];
+        const a = document.createElement("a");
+        a.href = blobUrl;
+        a.download = `${current.value.name || "audio"}.${ext || "mp3"}`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(() => window.URL.revokeObjectURL(blobUrl), 1000);
+        downloaded.value = true;
+    } catch {
+        message.error("下载失败");
+    }
+};
+const onInfo = () => {
+    if (current.value) message.info(`${current.value.name} - ${current.value.author || "未知歌手"}`);
+};
+
+/* ---------------- 弹层开合 ---------------- */
+const toggleMenu = (m: "" | "timer" | "volume" | "more") => {
+    menu.value = menu.value === m ? "" : m;
+};
+const onDocClick = (e: MouseEvent) => {
+    const t = e.target as HTMLElement;
+    if (menu.value && !t.closest(".vap-pop") && !t.closest(".vap-act")) menu.value = "";
+};
+
+/* ---------------- 时间格式 ---------------- */
+const fmt = (t: number) => {
+    const v = isFinite(t) && t > 0 ? t : 0;
+    return `${String(Math.floor(v / 60)).padStart(2, "0")}:${String(Math.floor(v % 60)).padStart(2, "0")}`;
+};
+
+/* ---------------- 联动 ---------------- */
+watch(current, async (t) => {
+    currentTime.value = 0;
+    duration.value = 0;
+    coverError.value = false;
+    downloaded.value = false;
+    lyricLines.value = [];
+    lyricIndex.value = -1;
+    if (!t) return;
+    await nextTick();
+    loadLrc(t.lrc);
+    if (resumeAfterSwitch) {
+        resumeAfterSwitch = false;
+        tryPlay();
+    }
+});
+
+// 曲目从无到有时默认展开播放列表（对齐原 APlayer showList 的行为）
+watch(
+    () => tracks.value.length,
+    (n, o) => {
+        if (n > 0 && !o) showList.value = true;
+        if (index.value >= n) index.value = 0;
+    }
+);
+
+watch([volume, muted], () => {
+    const a = audioRef.value;
+    if (!a) return;
+    a.volume = volume.value;
+    a.muted = muted.value || volume.value === 0;
+});
+watch(rate, () => {
+    if (audioRef.value) audioRef.value.playbackRate = rate.value;
+});
+
+let timerId = 0;
+onMounted(() => {
+    document.addEventListener("click", onDocClick);
+    timerId = window.setInterval(() => {
+        nowTick.value = Date.now();
+        if (sleepAt.value && nowTick.value >= sleepAt.value) {
+            sleepAt.value = 0;
+            sleepMinutes.value = 0;
+            audioRef.value?.pause();
+        }
+    }, 1000);
+});
+onBeforeUnmount(() => {
+    document.removeEventListener("click", onDocClick);
+    if (timerId) clearInterval(timerId);
+    audioRef.value?.pause();
+});
+</script>
+
+<style scoped>
+.vap {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    color: #fff;
+    border-radius: 14px;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    background:
+        radial-gradient(130% 55% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 60%),
+        linear-gradient(178deg, #9aa8a3 0%, #7f9d9a 28%, #4d9093 54%, #12818f 78%, #0b7280 100%);
+}
+
+.vap button {
+    font-family: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    cursor: pointer;
+}
+
+/* ---------- 空状态 ---------- */
+.vap-empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    font-size: 46px;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.vap-empty p {
+    margin: 0;
+    font-size: 14px;
+}
+
+/* ---------- 主体布局 ---------- */
+.vap-body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 6px 24px 26px;
+}
+
+.vap-collapse {
+    position: absolute;
+    top: 10px;
+    right: 14px;
+    z-index: 5;
+    font-size: 20px;
+    color: rgba(255, 255, 255, 0.9);
+    padding: 6px;
+}
+
+/* ---------- 唱片区 ---------- */
+.vap-stage {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 唱盘方框：唱片与唱臂共用同一坐标系（尺寸即唱片直径） */
+.vap-turntable {
+    position: relative;
+    width: min(72%, 340px, 38vh);
+    aspect-ratio: 1/1;
+}
+
+.vap-disc {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background:
+        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 46%),
+        repeating-radial-gradient(circle, #0b0d0e 0 2px, #16191b 2px 5px, #0b0d0e 5px 9px);
+    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.vap--glow .vap-disc {
+    box-shadow: 0 0 70px rgba(110, 240, 228, 0.35), 0 20px 44px rgba(0, 0, 0, 0.38);
+}
+
+.vap-disc.is-spinning {
+    animation: vap-spin 22s linear infinite;
+}
+
+@keyframes vap-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.vap-disc-cover,
+.vap-disc-holder {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    /* img 是替换元素，width/height 不能用 auto + inset，否则按图片原始尺寸撑开 */
+    width: 38%;
+    height: 38%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
+}
+
+.vap-disc-cover {
+    object-fit: cover;
+}
+
+.vap-disc-holder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 44px;
+    color: rgba(255, 255, 255, 0.85);
+    background: linear-gradient(140deg, #1e6f78, #0d5560);
+}
+
+.vap-disc-hole {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: #0b0d0e;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
+}
+
+/* ---------- 唱臂（装饰） ---------- */
+.vap-arm {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    transform-origin: 94% 17%;
+    transform: rotate(-11deg);
+    transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1);
+}
+
+.vap-arm.is-on {
+    transform: rotate(10deg);
+}
+
+.vap-arm-cap {
+    position: absolute;
+    left: 90%;
+    top: -1%;
+    width: 12%;
+    height: 11%;
+    border-radius: 4px;
+    background: linear-gradient(180deg, #9aa1a4, #5c6366 45%, #3a4043);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+
+.vap-arm-rod {
+    position: absolute;
+    left: calc(96% - 1.5px);
+    top: 8%;
+    width: 3px;
+    height: 74%;
+    border-radius: 2px;
+    transform: rotate(2.5deg);
+    transform-origin: top center;
+    background: linear-gradient(90deg, #f4f8fa, #b9c4c9 40%, #6f7c82);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.vap-arm-joint {
+    position: absolute;
+    left: 94%;
+    top: 17%;
+    width: 7%;
+    height: 7%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: radial-gradient(circle at 34% 28%, #fbfdfe, #a7b2b7 68%);
+    box-shadow: 0 0 0 2px rgba(52, 60, 64, 0.85), 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.vap-arm-head {
+    position: absolute;
+    left: 90%;
+    top: 83%;
+    width: 7.5%;
+    height: 11%;
+    border-radius: 30% 30% 38% 38%;
+    transform: translate(-50%, -50%) rotate(18deg);
+    background: linear-gradient(160deg, #7d8488, #40474a 58%, #2c3134);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
+}
+
+.vap-arm-head::after {
+    content: "";
+    position: absolute;
+    left: 30%;
+    bottom: -12%;
+    width: 3px;
+    height: 22%;
+    border-radius: 2px;
+    background: linear-gradient(180deg, #e6ecef, #8d999f);
+}
+
+/* ---------- 歌词 ---------- */
+.vap-lyric {
+    height: 78px;
+    margin-top: 10px;
+    overflow: hidden;
+    text-align: center;
+}
+
+.vap-lyric-empty {
+    margin: 0;
+    line-height: 78px;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.vap-lyric-inner {
+    transition: transform 0.4s ease;
+}
+
+.vap-lyric-line {
+    margin: 0;
+    height: 26px;
+    line-height: 26px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.vap-lyric-line.is-active {
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+}
+
+/* ---------- 标题 ---------- */
+.vap-meta {
+    text-align: center;
+    margin-top: 8px;
+}
+
+.vap-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.vap-title-text {
+    max-width: 78%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vap-info {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vap-artist {
+    margin: 6px 0 0;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* ---------- 功能图标行 ---------- */
+.vap-actions {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 18px;
+    padding: 0 6px;
+}
+
+.vap-act {
+    position: relative;
+    font-size: 22px;
+    color: rgba(255, 255, 255, 0.88);
+    padding: 6px;
+}
+
+.vap-act.is-on {
+    color: #7ff3e8;
+}
+
+.vap-act.is-fav {
+    color: #ff5b7f;
+}
+
+.vap-act.is-muted {
+    opacity: 0.55;
+}
+
+.vap-rot90 {
+    transform: rotate(90deg);
+}
+
+.vap-badge {
+    position: absolute;
+    top: -4px;
+    right: -16px;
+    font-size: 9px;
+    line-height: 1;
+    padding: 2px 3px;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.75);
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.vap-badge.is-on {
+    color: #0b7280;
+    background: #7ff3e8;
+}
+
+/* 均衡器小图标 */
+.vap-eq {
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 18px;
+}
+
+.vap-eq i {
+    width: 3px;
+    height: 6px;
+    border-radius: 1px;
+    background: currentColor;
+}
+
+.vap-eq i:nth-child(2) {
+    height: 14px;
+}
+
+.vap-eq i:nth-child(3) {
+    height: 9px;
+}
+
+.vap-eq.is-on i {
+    animation: vap-eq 0.9s ease-in-out infinite;
+    transform-origin: bottom;
+}
+
+.vap-eq.is-on i:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.vap-eq.is-on i:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes vap-eq {
+
+    0%,
+    100% {
+        transform: scaleY(0.5);
+    }
+
+    50% {
+        transform: scaleY(1.4);
+    }
+}
+
+/* ---------- 弹层 ---------- */
+.vap-pop {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 6;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 122px;
+    padding: 6px;
+    border-radius: 12px;
+    background: rgba(6, 40, 44, 0.92);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+}
+
+.vap-pop button {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 13px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.vap-pop button:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.vap-pop button.is-on {
+    color: #7ff3e8;
+}
+
+.vap-pop-vol {
+    align-items: center;
+    padding: 12px 14px;
+    gap: 8px;
+}
+
+.vap-vol-num {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.vap-vol-track {
+    position: relative;
+    width: 6px;
+    height: 96px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.25);
+    cursor: pointer;
+    touch-action: none;
+}
+
+.vap-vol-fill {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 3px;
+    background: #7ff3e8;
+}
+
+/* ---------- 进度 ---------- */
+.vap-progress {
+    margin-top: 16px;
+    padding: 10px 2px 0;
+    cursor: pointer;
+    touch-action: none;
+}
+
+.vap-bar {
+    position: relative;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.32);
+}
+
+.vap-bar-fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 2px;
+    background: #fff;
+}
+
+.vap-bar-thumb {
+    position: absolute;
+    top: 50%;
+    width: 26px;
+    height: 10px;
+    border-radius: 5px;
+    background: #fff;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.vap-times {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.78);
+}
+
+/* ---------- 主控制 ---------- */
+.vap-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding: 0 14px;
+}
+
+.vap-ctl {
+    position: relative;
+    font-size: 24px;
+    color: #fff;
+    padding: 8px;
+}
+
+.vap-mode-one {
+    position: absolute;
+    right: 2px;
+    bottom: 4px;
+    font-size: 10px;
+    font-weight: 700;
+    color: #7ff3e8;
+}
+
+.vap-play {
+    width: 68px;
+    height: 68px;
+    border-radius: 50%;
+    background: #fff;
+    color: #0e6d7a;
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
+    transition: transform 0.15s ease;
+}
+
+.vap-play:active {
+    transform: scale(0.94);
+}
+
+/* ---------- 播放列表 ---------- */
+.vap-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 8;
+    max-height: 72%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px 16px 0 0;
+    background: rgba(7, 38, 42, 0.94);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
+}
+
+.vap-list-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    font-size: 14px;
+    font-weight: 600;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.vap-list-head button {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 16px;
+    padding: 2px;
+}
+
+.vap-list-body {
+    margin: 0;
+    padding: 6px 0 14px;
+    list-style: none;
+    overflow: auto;
+}
+
+.vap-list-body li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 18px;
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.vap-list-body li:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.vap-list-body li.is-active {
+    color: #7ff3e8;
+}
+
+.vap-list-idx {
+    flex: none;
+    width: 22px;
+    font-size: 12px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.45);
+}
+
+.vap-list-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vap-list-author {
+    flex: none;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.45);
+}
+
+.vap-sheet-enter-active,
+.vap-sheet-leave-active {
+    transition: transform 0.3s ease;
+}
+
+.vap-sheet-enter-from,
+.vap-sheet-leave-to {
+    transform: translateY(100%);
+}
+
+/* ---------- 窄屏微调 ---------- */
+@media (max-width: 480px) {
+    .vap-body {
+        padding: 6px 18px 22px;
+    }
+
+    .vap-turntable {
+        width: min(76%, 34vh, 300px);
+    }
+
+    .vap-play {
+        width: 60px;
+        height: 60px;
+        font-size: 26px;
+    }
+}
+</style>
diff --git a/WebVue/src/views/master/PreviewAudio.vue b/WebVue/src/views/master/PreviewAudio.vue
index 5639026..d88fdac 100644
--- a/WebVue/src/views/master/PreviewAudio.vue
+++ b/WebVue/src/views/master/PreviewAudio.vue
@@ -1,14 +1,15 @@
 <template>
-    <div class="page" :style="{
+    <div class="pa-page" :style="{
         height: bsInfo.height - 120 + 'px',
     }">
-        <APlayer :audio="audio" ref="aplayer" />
+        <VinylAudioPlayer :tracks="audios" @close="onClose" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import APlayer from "@worstone/vue-aplayer";
+import VinylAudioPlayer from "@/components/basic/VinylAudioPlayer.vue";
+import type { VinylTrack } from "@/components/basic/VinylAudioPlayer.vue";
 import publishAudioService from "@/service/master/publishAudioService";
 import { PublishAudioData } from "@/data/auto/publishAudioData";
 import { useRoute, useRouter } from 'vue-router';
@@ -20,6 +21,7 @@ import { SearchFilter } from "@/data/auto/searchFilter";
 import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
 import { bsInfo } from "@/utils/browser"
 
+
 const route = useRoute();
 const router = useRouter();
 
@@ -27,20 +29,17 @@ const publishName = ref<string>(route.params.id as string)
 
 const mode = ref<string>(route.params.mode as string)
 
-const aplayer = ref(APlayer);
-// 设置 2 个或 2 个以上的歌曲信息
-const audio = ref([]);
+// 播放器曲目（VinylAudioPlayer 负责界面与播放）
+const audios = ref<VinylTrack[]>([]);
 
 onMounted(async () => {
     // 加载歌曲信息
     loadAudios()
 });
 
-
 const loadAudios = async () => {
 
     let data: PublishAudioData = new PublishAudioData();
-    let audios: any = [];
     try {
         //从网盘中心加载歌曲信息
         if (mode.value == "list") {
@@ -65,12 +64,10 @@ const loadAudios = async () => {
 
             if (dr && dr.Datas && dr.Datas.length > 0) {
                 dr.Datas.forEach((item: DmsFileUploadViewDisplayData) => {
-                    audios.push({
+                    audios.value.push({
                         name: item.OrgFileName.indexOf(".") > 0 ? item.OrgFileName.substring(0, item.OrgFileName.indexOf(".")) : item.OrgFileName,
                         author: '有家相册',
                         url: item.Url,
-                        type: "normal",
-                        // lrc: item.FormattedLrc,
                         cover: '/public/images/logo.png',
                     });
                 });
@@ -85,11 +82,10 @@ const loadAudios = async () => {
 
         if (data && data.Details) {
             data.Details.forEach((item: any) => {
-                audios.push({
+                audios.value.push({
                     name: item.Title,
                     author: item.Author,
                     url: item.FormattedUrl,
-                    type: "normal",
                     lrc: item.FormattedLrc,
                     cover: item.FormattedPic,
                 });
@@ -99,50 +95,20 @@ const loadAudios = async () => {
     } catch (error) {
         console.log(error); // for debug
     }
+};
 
-    aplayer.value.addList(audios);
-    aplayer.value.showList();
-}
+// 收起播放器：返回来源页；没有历史时回首页
+const onClose = (() => {
+    if (window.history.length > 1) {
+        router.back();
+    }
+    else {
+        router.push('/');
+    }
+});
 </script>
-<style>
-.page {
-    overflow: auto;
-    background-color: bisque;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    margin-right: 8px;
-    background-image: url('/images/main/p3.png');
-    background-size: cover;
+<style scoped>
+.pa-page {
     width: 100%;
 }
-
-.aplayer {
-    margin-left: -5px !important;
-    margin-top: 0px !important;
-}
-
-.aplayer .aplayer-notice {
-    z-index: -999 !important;
-    ;
-    display: none !important;
-}
-
-.aplayer .aplayer-lrc p.aplayer-lrc-current {
-    font-size: 24px !important;
-    padding-top: 4px !important;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    line-height: 24px !important;
-}
-
-.aplayer-list {
-    max-height: 560px !important;
-}
-
-.aplayer-list ol {
-    max-height: 560px !important;
-}
 </style>