mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 02:07:29 +08:00
feat：针对移动端优化
This commit is contained in:
alger
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="disclaimer-modal">
|
||||
<!-- 免责声明页面 -->
|
||||
<div
|
||||
v-if="showDisclaimer"
|
||||
class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/60 backdrop-blur-md"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<!-- 顶部渐变装饰 -->
|
||||
<div class="h-2 bg-gradient-to-r from-amber-400 via-orange-500 to-red-500"></div>
|
||||
<!-- 标题 -->
|
||||
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6 mt-10">
|
||||
{{ t('comp.disclaimer.title') }}
|
||||
</h2>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="px-6 py-6">
|
||||
<div class="space-y-4 text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
<!-- 警告框 -->
|
||||
<div
|
||||
class="p-4 rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<i class="ri-alert-line text-amber-500 text-xl flex-shrink-0 mt-0.5"></i>
|
||||
<p class="text-amber-700 dark:text-amber-300">
|
||||
{{ t('comp.disclaimer.warning') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 免责条款列表 -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="ri-book-2-line text-blue-500 text-sm"></i>
|
||||
</div>
|
||||
<p>{{ t('comp.disclaimer.item1') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="ri-time-line text-green-500 text-sm"></i>
|
||||
</div>
|
||||
<p>{{ t('comp.disclaimer.item2') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="ri-shield-check-line text-purple-500 text-sm"></i>
|
||||
</div>
|
||||
<p>{{ t('comp.disclaimer.item3') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="px-6 pb-8 space-y-3">
|
||||
<button
|
||||
@click="handleAgree"
|
||||
class="w-full py-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-[0.98] transition-all duration-200 shadow-lg shadow-green-500/25"
|
||||
>
|
||||
<span class="flex items-center justify-center gap-2">
|
||||
<i class="ri-check-line text-lg"></i>
|
||||
{{ t('comp.disclaimer.agree') }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="handleDisagree"
|
||||
class="w-full py-3 rounded-2xl text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
{{ t('comp.disclaimer.disagree') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 捐赠页面 -->
|
||||
<Transition name="donate-modal">
|
||||
<div
|
||||
v-if="showDonate"
|
||||
class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/60 backdrop-blur-md"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<!-- 顶部渐变装饰 -->
|
||||
<div class="h-2 bg-gradient-to-r from-pink-400 via-rose-500 to-red-500"></div>
|
||||
|
||||
<!-- 图标区域 -->
|
||||
<div class="flex justify-center pt-8 pb-4">
|
||||
<div
|
||||
class="w-20 h-20 rounded-2xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<i class="ri-heart-3-fill text-4xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6">
|
||||
{{ t('comp.donate.title') }}
|
||||
</h2>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 text-center mt-2 px-6">
|
||||
{{ t('comp.donate.subtitle') }}
|
||||
</p>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="px-6 py-6">
|
||||
<!-- 提示信息 -->
|
||||
<div
|
||||
class="p-4 rounded-2xl bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 mb-6"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<i class="ri-gift-line text-rose-500 text-xl flex-shrink-0 mt-0.5"></i>
|
||||
<p class="text-rose-700 dark:text-rose-300 text-sm">
|
||||
{{ t('comp.donate.tip') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 捐赠方式 -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button
|
||||
@click="openDonateLink('wechat')"
|
||||
class="flex flex-col items-center gap-2 p-4 rounded-2xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-green-500 flex items-center justify-center">
|
||||
<i class="ri-wechat-fill text-2xl text-white"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-green-700 dark:text-green-300">{{
|
||||
t('comp.donate.wechat')
|
||||
}}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDonateLink('alipay')"
|
||||
class="flex flex-col items-center gap-2 p-4 rounded-2xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-500 flex items-center justify-center">
|
||||
<i class="ri-alipay-fill text-2xl text-white"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-blue-700 dark:text-blue-300">{{
|
||||
t('comp.donate.alipay')
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进入应用按钮 -->
|
||||
<div class="px-6 pb-8">
|
||||
<button
|
||||
@click="handleEnterApp"
|
||||
class="w-full py-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 dark:from-gray-600 dark:to-gray-800 hover:from-gray-800 hover:to-gray-950 active:scale-[0.98] transition-all duration-200 shadow-lg"
|
||||
>
|
||||
<span class="flex items-center justify-center gap-2">
|
||||
<i class="ri-arrow-right-line text-lg"></i>
|
||||
{{ t('comp.donate.enterApp') }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 text-center mt-3">
|
||||
{{ t('comp.donate.noForce') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 收款码弹窗 -->
|
||||
<Transition name="qrcode-modal">
|
||||
<div
|
||||
v-if="showQRCode"
|
||||
class="fixed inset-0 z-[9999999] flex items-center justify-center bg-black/70 backdrop-blur-md"
|
||||
@click.self="closeQRCode"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-sm mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<!-- 顶部渐变装饰 -->
|
||||
<div
|
||||
class="h-2"
|
||||
:class="
|
||||
qrcodeType === 'wechat'
|
||||
? 'bg-gradient-to-r from-green-400 to-green-600'
|
||||
: 'bg-gradient-to-r from-blue-400 to-blue-600'
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="flex items-center justify-between px-6 py-4">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{{ qrcodeType === 'wechat' ? t('comp.donate.wechatQR') : t('comp.donate.alipayQR') }}
|
||||
</h3>
|
||||
<button
|
||||
@click="closeQRCode"
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<i class="ri-close-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 二维码图片 -->
|
||||
<div class="px-6 pb-6">
|
||||
<div class="bg-white p-4 rounded-2xl">
|
||||
<img
|
||||
:src="qrcodeType === 'wechat' ? wechatQRCode : alipayQRCode"
|
||||
:alt="qrcodeType === 'wechat' ? 'WeChat QR Code' : 'Alipay QR Code'"
|
||||
class="w-full rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 text-center mt-4">
|
||||
{{ t('comp.donate.scanTip') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// 导入收款码图片
|
||||
import alipayQRCode from '@/assets/alipay.png';
|
||||
import wechatQRCode from '@/assets/wechat.png';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 缓存键
|
||||
const DISCLAIMER_AGREED_KEY = 'disclaimer_agreed_timestamp';
|
||||
|
||||
const showDisclaimer = ref(false);
|
||||
const showDonate = ref(false);
|
||||
const showQRCode = ref(false);
|
||||
const qrcodeType = ref<'wechat' | 'alipay'>('wechat');
|
||||
const isTransitioning = ref(false); // 防止用户点击过快
|
||||
|
||||
// 检查是否需要显示免责声明
|
||||
const shouldShowDisclaimer = (): boolean => {
|
||||
const agreedTime = localStorage.getItem(DISCLAIMER_AGREED_KEY);
|
||||
|
||||
// 从未同意过
|
||||
if (!agreedTime) return true;
|
||||
|
||||
const savedTime = parseInt(agreedTime, 10);
|
||||
const now = Date.now();
|
||||
|
||||
// 随机 3-10 天后再次显示
|
||||
const randomDays = Math.floor(Math.random() * 8) + 3; // 3-10 天
|
||||
const intervalMs = randomDays * 24 * 60 * 60 * 1000;
|
||||
|
||||
return now - savedTime >= intervalMs;
|
||||
};
|
||||
|
||||
// 处理同意
|
||||
const handleAgree = () => {
|
||||
if (isTransitioning.value) return;
|
||||
isTransitioning.value = true;
|
||||
|
||||
showDisclaimer.value = false;
|
||||
setTimeout(() => {
|
||||
showDonate.value = true;
|
||||
isTransitioning.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 处理不同意 - 关闭窗口
|
||||
const handleDisagree = () => {
|
||||
if (isTransitioning.value) return;
|
||||
isTransitioning.value = true;
|
||||
|
||||
// Web 环境下尝试关闭窗口
|
||||
window.close();
|
||||
isTransitioning.value = false;
|
||||
};
|
||||
|
||||
// 打开捐赠链接
|
||||
const openDonateLink = (type: 'wechat' | 'alipay') => {
|
||||
if (isTransitioning.value) return;
|
||||
|
||||
qrcodeType.value = type;
|
||||
showQRCode.value = true;
|
||||
};
|
||||
|
||||
// 关闭二维码弹窗
|
||||
const closeQRCode = () => {
|
||||
showQRCode.value = false;
|
||||
};
|
||||
|
||||
// 进入应用
|
||||
const handleEnterApp = () => {
|
||||
if (isTransitioning.value) return;
|
||||
isTransitioning.value = true;
|
||||
|
||||
// 记录同意时间
|
||||
localStorage.setItem(DISCLAIMER_AGREED_KEY, Date.now().toString());
|
||||
showDonate.value = false;
|
||||
|
||||
setTimeout(() => {
|
||||
isTransitioning.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 检查是否需要显示免责声明
|
||||
if (shouldShowDisclaimer()) {
|
||||
showDisclaimer.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 免责声明弹窗动画 */
|
||||
.disclaimer-modal-enter-active,
|
||||
.disclaimer-modal-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.disclaimer-modal-enter-from,
|
||||
.disclaimer-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 捐赠弹窗动画 */
|
||||
.donate-modal-enter-active,
|
||||
.donate-modal-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.donate-modal-enter-from,
|
||||
.donate-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 二维码弹窗动画 */
|
||||
.qrcode-modal-enter-active,
|
||||
.qrcode-modal-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.qrcode-modal-enter-from,
|
||||
.qrcode-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="update-modal">
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 z-[999999] flex items-end justify-center bg-black/50 backdrop-blur-sm"
|
||||
>
|
||||
<!-- 弹窗内容 -->
|
||||
<div
|
||||
class="w-full max-w-lg bg-white dark:bg-gray-900 rounded-t-3xl overflow-hidden animate-slide-up"
|
||||
>
|
||||
<!-- 顶部装饰条 -->
|
||||
<div class="h-1 bg-gradient-to-r from-green-400 via-green-500 to-emerald-600"></div>
|
||||
|
||||
<!-- 关闭条 -->
|
||||
<div class="flex justify-center pt-3 pb-2">
|
||||
<div class="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
|
||||
<!-- 头部信息 -->
|
||||
<div class="px-6 pb-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 应用图标 -->
|
||||
<div
|
||||
class="w-20 h-20 rounded-2xl overflow-hidden shadow-lg flex-shrink-0 ring-2 ring-green-500/20"
|
||||
>
|
||||
<img src="@/assets/logo.png" alt="App Icon" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
|
||||
<!-- 版本信息 -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span
|
||||
class="px-3 py-1 text-xs font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 rounded-full"
|
||||
>
|
||||
{{ t('comp.update.newVersion') }}
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white truncate">
|
||||
v{{ updateInfo.latestVersion }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{{ t('comp.update.currentVersion') }}: v{{ updateInfo.currentVersion }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更新内容 -->
|
||||
<div
|
||||
class="mx-6 mb-6 max-h-80 overflow-y-auto rounded-2xl bg-gray-50 dark:bg-gray-800/50"
|
||||
>
|
||||
<div
|
||||
class="p-5 text-sm text-gray-600 dark:text-gray-300 leading-relaxed"
|
||||
v-html="parsedReleaseNotes"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div
|
||||
class="px-6 pb-8 flex gap-3"
|
||||
:style="{ paddingBottom: `calc(32px + var(--safe-area-inset-bottom, 0px))` }"
|
||||
>
|
||||
<button
|
||||
@click="handleLater"
|
||||
class="flex-1 py-4 px-4 rounded-2xl text-base font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 active:scale-[0.98] transition-all duration-200"
|
||||
>
|
||||
{{ t('comp.update.later') }}
|
||||
</button>
|
||||
<button
|
||||
@click="handleUpdate"
|
||||
class="flex-1 py-4 px-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-[0.98] transition-all duration-200 shadow-lg shadow-green-500/25"
|
||||
>
|
||||
<span class="flex items-center justify-center gap-2">
|
||||
<i class="ri-download-2-line text-lg"></i>
|
||||
{{ t('comp.update.updateNow') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { marked } from 'marked';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
|
||||
|
||||
import config from '../../../../package.json';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 缓存键：记录用户点击"稍后提醒"的时间
|
||||
const REMIND_LATER_KEY = 'update_remind_later_timestamp';
|
||||
|
||||
// 配置 marked
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true
|
||||
});
|
||||
|
||||
const showModal = ref(false);
|
||||
|
||||
const updateInfo = ref<UpdateResult>({
|
||||
hasUpdate: false,
|
||||
latestVersion: '',
|
||||
currentVersion: config.version,
|
||||
releaseInfo: null
|
||||
});
|
||||
|
||||
// 解析 Markdown
|
||||
const parsedReleaseNotes = computed(() => {
|
||||
if (!updateInfo.value.releaseInfo?.body) return '';
|
||||
try {
|
||||
return marked.parse(updateInfo.value.releaseInfo.body);
|
||||
} catch (error) {
|
||||
console.error('Error parsing markdown:', error);
|
||||
return updateInfo.value.releaseInfo.body;
|
||||
}
|
||||
});
|
||||
|
||||
// 检查是否应该显示更新提醒
|
||||
const shouldShowReminder = (): boolean => {
|
||||
const remindLaterTime = localStorage.getItem(REMIND_LATER_KEY);
|
||||
if (!remindLaterTime) return true;
|
||||
|
||||
const savedTime = parseInt(remindLaterTime, 10);
|
||||
const now = Date.now();
|
||||
const oneDayInMs = 24 * 60 * 60 * 1000; // 24小时
|
||||
|
||||
// 如果距离上次点击"稍后提醒"超过24小时，则显示
|
||||
return now - savedTime >= oneDayInMs;
|
||||
};
|
||||
|
||||
// 处理"稍后提醒"
|
||||
const handleLater = () => {
|
||||
// 记录当前时间
|
||||
localStorage.setItem(REMIND_LATER_KEY, Date.now().toString());
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
const checkForUpdates = async () => {
|
||||
// 检查是否应该显示提醒
|
||||
if (!shouldShowReminder()) {
|
||||
console.log('更新提醒被延迟，等待24小时后再提醒');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await checkUpdate(config.version);
|
||||
if (result && result.hasUpdate) {
|
||||
updateInfo.value = result;
|
||||
showModal.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查更新失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
const version = updateInfo.value.latestVersion;
|
||||
|
||||
// Android APK 下载地址
|
||||
const downloadUrl = `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}.apk`;
|
||||
|
||||
try {
|
||||
// 获取代理节点
|
||||
const proxyHosts = await getProxyNodes();
|
||||
const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
|
||||
|
||||
// 清除"稍后提醒"记录（用户选择更新后，下次应该正常提醒）
|
||||
localStorage.removeItem(REMIND_LATER_KEY);
|
||||
|
||||
// 使用系统浏览器打开下载链接
|
||||
window.open(proxyDownloadUrl, '_blank');
|
||||
|
||||
// 关闭弹窗
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
console.error('打开下载链接失败:', error);
|
||||
// 回退到直接打开 GitHub Releases
|
||||
const releaseUrl =
|
||||
updateInfo.value.releaseInfo?.html_url ||
|
||||
'https://github.com/algerkong/AlgerMusicPlayer/releases/latest';
|
||||
window.open(releaseUrl, '_blank');
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 延迟检查更新，确保应用完全加载
|
||||
setTimeout(() => {
|
||||
checkForUpdates();
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 动画 */
|
||||
.update-modal-enter-active,
|
||||
.update-modal-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.update-modal-enter-from,
|
||||
.update-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.update-modal-enter-active .animate-slide-up,
|
||||
.update-modal-leave-active .animate-slide-up {
|
||||
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.update-modal-enter-from .animate-slide-up {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.update-modal-leave-to .animate-slide-up {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
/* 更新内容样式 */
|
||||
:deep(h1) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
:deep(h2) {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
:deep(h3) {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
:deep(ul) {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
:deep(ol) {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
:deep(code) {
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
:deep(a) {
|
||||
color: #22c55e;
|
||||
}
|
||||
</style>
|
||||
@@ -21,13 +21,38 @@
|
||||
<i class="ri-loader-4-line loading-icon"></i>
|
||||
</div>
|
||||
<div
|
||||
class="control-btn absolute top-5 left-5"
|
||||
class="control-btn absolute left-5"
|
||||
:class="{ 'pure-mode': config.pureModeEnabled }"
|
||||
@click="closeMusicFull"
|
||||
>
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
<!-- 右上角设置按钮 -->
|
||||
<div
|
||||
class="control-btn absolute right-5 flex items-center gap-2"
|
||||
:class="[
|
||||
{ 'pure-mode': config.pureModeEnabled },
|
||||
hasSleepTimerActive ? '!w-auto !px-2' : ''
|
||||
]"
|
||||
>
|
||||
<!-- 定时器倒计时显示 -->
|
||||
<div
|
||||
v-if="hasSleepTimerActive"
|
||||
class="flex items-center gap-1 px-2 py-1 rounded-full bg-black/30 backdrop-blur-sm text-xs text-white/90"
|
||||
@click="showPlayerSettings = true"
|
||||
>
|
||||
<i class="ri-timer-line text-green-400"></i>
|
||||
<span class="font-medium tabular-nums">{{ sleepTimerDisplayText }}</span>
|
||||
</div>
|
||||
<div @click="showPlayerSettings = true">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放设置弹窗 -->
|
||||
<mobile-player-settings v-model:visible="showPlayerSettings" />
|
||||
|
||||
<!-- 全屏歌词页面 - 竖屏模式下 -->
|
||||
<transition name="fade">
|
||||
<div v-if="showFullLyrics && !isLandscape" class="fullscreen-lyrics" :class="config.theme">
|
||||
@@ -368,6 +393,7 @@ import { useWindowSize } from '@vueuse/core';
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import MobilePlayerSettings from '@/components/player/MobilePlayerSettings.vue';
|
||||
import {
|
||||
allTime,
|
||||
artistList,
|
||||
@@ -396,6 +422,55 @@ const playerStore = usePlayerStore();
|
||||
const play = computed(() => playerStore.isPlay);
|
||||
const playIcon = computed(() => (play.value ? 'ri-pause-fill' : 'ri-play-fill'));
|
||||
|
||||
// 播放设置弹窗
|
||||
const showPlayerSettings = ref(false);
|
||||
|
||||
// 定时器相关
|
||||
const sleepTimerRefresh = ref(0);
|
||||
let sleepTimerInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const hasSleepTimerActive = computed(() => playerStore.hasSleepTimerActive);
|
||||
|
||||
const sleepTimerDisplayText = computed(() => {
|
||||
void sleepTimerRefresh.value; // 触发响应式更新
|
||||
|
||||
const timer = playerStore.sleepTimer;
|
||||
if (timer.type === 'time' && timer.endTime) {
|
||||
const remaining = Math.max(0, timer.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
if (timer.type === 'songs' && timer.remainingSongs) {
|
||||
return `${timer.remainingSongs}首`;
|
||||
}
|
||||
if (timer.type === 'end') {
|
||||
return '列表结束';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 启动/停止定时器刷新
|
||||
watch(
|
||||
hasSleepTimerActive,
|
||||
(active) => {
|
||||
if (active && playerStore.sleepTimer.type === 'time') {
|
||||
if (!sleepTimerInterval) {
|
||||
sleepTimerInterval = setInterval(() => {
|
||||
sleepTimerRefresh.value = Date.now();
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
if (sleepTimerInterval) {
|
||||
clearInterval(sleepTimerInterval);
|
||||
sleepTimerInterval = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 播放模式
|
||||
const { playMode, playModeIcon, playModeText, togglePlayMode: togglePlayModeBase } = usePlayMode();
|
||||
// 打开播放列表
|
||||
@@ -443,9 +518,11 @@ watch(isLandscape, (newVal) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 显示全屏歌词
|
||||
// 显示全屏歌词
|
||||
const showFullLyricScreen = () => {
|
||||
showFullLyrics.value = true;
|
||||
|
||||
// 使用多次延迟尝试滚动，确保能够滚动到当前歌词
|
||||
nextTick(() => {
|
||||
scrollToCurrentLyric(true);
|
||||
@@ -1754,9 +1831,8 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
|
||||
}
|
||||
|
||||
.fullscreen-header {
|
||||
@apply pt-8 pb-4 px-6 flex flex-col items-center fixed top-0 left-0 w-full z-10;
|
||||
@apply pt-16 pb-4 px-6 flex flex-col items-center fixed top-0 left-0 w-full z-10;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
height: 100px;
|
||||
pointer-events: auto;
|
||||
|
||||
.song-title {
|
||||
@@ -1817,6 +1893,7 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
|
||||
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
|
||||
background: rgba(142, 142, 142, 0.192);
|
||||
backdrop-filter: blur(12px);
|
||||
top: calc(var(--safe-area-inset-top, 0) + 20px);
|
||||
|
||||
i {
|
||||
@apply text-xl;
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
ref="playBarRef"
|
||||
class="mobile-play-bar"
|
||||
:class="[
|
||||
setAnimationClass('animate__fadeInUp'),
|
||||
musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini',
|
||||
!shouldShowMobileMenu ? 'mobile-play-bar-no-menu' : ''
|
||||
playerStore.musicFull ? 'play-bar-expanded' : 'play-bar-mini',
|
||||
shouldShowMobileMenu ? 'is-menu-show' : 'is-menu-hide'
|
||||
]"
|
||||
:style="{
|
||||
color: musicFullVisible
|
||||
color: playerStore.musicFull
|
||||
? textColors.theme === 'dark'
|
||||
? '#ffffff'
|
||||
: '#ffffff'
|
||||
@@ -16,63 +17,8 @@
|
||||
: '#000000'
|
||||
}"
|
||||
>
|
||||
<!-- 完整模式 - 在musicFullVisible为true时显示 -->
|
||||
<template v-if="false">
|
||||
<!-- 顶部信息区域 -->
|
||||
<div class="music-info-header">
|
||||
<div class="music-info-main">
|
||||
<h1 class="music-title">{{ playMusic.name }}</h1>
|
||||
<div class="artist-info">
|
||||
<span class="artist-name">
|
||||
<span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="music-progress-bar">
|
||||
<span class="current-time">{{ secondToMinute(nowTime) }}</span>
|
||||
<div class="progress-wrapper">
|
||||
<n-slider
|
||||
v-model:value="timeSlider"
|
||||
:step="1"
|
||||
:max="allTime"
|
||||
:min="0"
|
||||
:tooltip="false"
|
||||
class="progress-slider"
|
||||
></n-slider>
|
||||
</div>
|
||||
<span class="total-time">{{ secondToMinute(allTime) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 主控制区 -->
|
||||
<div class="player-controls">
|
||||
<div class="control-btn like" @click="toggleFavorite">
|
||||
<i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
|
||||
</div>
|
||||
<div class="control-btn prev" @click="handlePrev">
|
||||
<i class="iconfont ri-skip-back-fill"></i>
|
||||
</div>
|
||||
<div class="control-btn play-pause" @click="playMusicEvent">
|
||||
<i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
|
||||
</div>
|
||||
<div class="control-btn next" @click="handleNext">
|
||||
<i class="iconfont ri-skip-forward-fill"></i>
|
||||
</div>
|
||||
<div class="control-btn list" @click="openPlayListDrawer">
|
||||
<i class="iconfont ri-menu-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 定时关闭按钮 -->
|
||||
<!-- <SleepTimerPopover mode="mobile" /> -->
|
||||
</template>
|
||||
|
||||
<!-- Mini模式 - 在musicFullVisible为false时显示 -->
|
||||
<div v-if="!musicFullVisible" class="mobile-mini-controls">
|
||||
<div v-if="!playerStore.musicFull" class="mobile-mini-controls">
|
||||
<!-- 歌曲信息 -->
|
||||
<div class="mini-song-info" @click="setMusicFull">
|
||||
<n-image
|
||||
@@ -85,16 +31,17 @@
|
||||
<n-ellipsis line-clamp="1">
|
||||
<span class="mini-song-title">{{ playMusic.name }}</span>
|
||||
<span class="mx-2 text-gray-500 dark:text-gray-400">-</span>
|
||||
<span class="mini-song-artist">
|
||||
<span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
<span
|
||||
class="mini-song-artist"
|
||||
v-for="(artists, artistsindex) in artistList"
|
||||
:key="artistsindex"
|
||||
>
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放按钮 -->
|
||||
<div class="mini-playback-controls">
|
||||
<div class="mini-control-btn play" @click="playMusicEvent">
|
||||
<i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
|
||||
@@ -104,21 +51,26 @@
|
||||
</div>
|
||||
|
||||
<!-- 全屏播放器 -->
|
||||
<music-full-wrapper ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
|
||||
<music-full-wrapper
|
||||
ref="MusicFullRef"
|
||||
v-model="playerStore.musicFull"
|
||||
:background="background"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useSwipe } from '@vueuse/core';
|
||||
import type { Ref } from 'vue';
|
||||
import { computed, inject, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import { artistList, playMusic, textColors } from '@/hooks/MusicHook';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
|
||||
import { getImgUrl, setAnimationClass } from '@/utils';
|
||||
|
||||
const shouldShowMobileMenu = inject('shouldShowMobileMenu');
|
||||
const shouldShowMobileMenu = inject('shouldShowMobileMenu') as Ref<boolean>;
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -128,18 +80,6 @@ const play = computed(() => playerStore.isPlay);
|
||||
// 背景颜色
|
||||
const background = ref('#000');
|
||||
|
||||
// 播放进度条
|
||||
const throttledSeek = useThrottleFn((value: number) => {
|
||||
if (!sound.value) return;
|
||||
sound.value.seek(value);
|
||||
nowTime.value = value;
|
||||
}, 50);
|
||||
|
||||
const timeSlider = computed({
|
||||
get: () => nowTime.value,
|
||||
set: throttledSeek
|
||||
});
|
||||
|
||||
// 播放控制
|
||||
function handleNext() {
|
||||
playerStore.nextPlay();
|
||||
@@ -151,36 +91,27 @@ function handlePrev() {
|
||||
|
||||
// 全屏播放器
|
||||
const MusicFullRef = ref<any>(null);
|
||||
const musicFullVisible = ref(false);
|
||||
|
||||
// 设置musicFull
|
||||
const setMusicFull = () => {
|
||||
musicFullVisible.value = !musicFullVisible.value;
|
||||
playerStore.setMusicFull(musicFullVisible.value);
|
||||
if (musicFullVisible.value) {
|
||||
playerStore.setMusicFull(!playerStore.musicFull);
|
||||
if (playerStore.musicFull) {
|
||||
settingsStore.showArtistDrawer = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => playerStore.musicFull,
|
||||
(_newVal) => {
|
||||
// 状态栏样式更新已在 Web 环境下禁用
|
||||
}
|
||||
);
|
||||
|
||||
// 打开播放列表抽屉
|
||||
const openPlayListDrawer = () => {
|
||||
playerStore.setPlayListDrawerVisible(true);
|
||||
};
|
||||
|
||||
// 收藏功能
|
||||
const isFavorite = computed(() => {
|
||||
return playerStore.favoriteList.includes(playMusic.value.id as number);
|
||||
});
|
||||
|
||||
const toggleFavorite = () => {
|
||||
console.log('isFavorite.value', isFavorite.value);
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(playMusic.value.id as number);
|
||||
} else {
|
||||
playerStore.addToFavorite(playMusic.value.id as number);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放暂停按钮事件
|
||||
const playMusicEvent = async () => {
|
||||
try {
|
||||
@@ -191,6 +122,20 @@ const playMusicEvent = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 滑动切歌
|
||||
const playBarRef = ref<HTMLElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (playBarRef.value) {
|
||||
const { direction } = useSwipe(playBarRef, {
|
||||
onSwipeEnd: () => {
|
||||
if (direction.value === 'left') handleNext();
|
||||
if (direction.value === 'right') handlePrev();
|
||||
},
|
||||
threshold: 30
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => playerStore.playMusic,
|
||||
async () => {
|
||||
@@ -207,8 +152,11 @@ watch(
|
||||
animation-duration: 0.3s !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.mobile-play-bar-no-menu {
|
||||
@apply bottom-[10px];
|
||||
&.is-menu-show {
|
||||
bottom: calc(var(--safe-area-inset-bottom, 0) + 66px);
|
||||
}
|
||||
&.is-menu-hide {
|
||||
bottom: calc(var(--safe-area-inset-bottom, 0) + 10px);
|
||||
}
|
||||
|
||||
&.play-bar-expanded {
|
||||
@@ -222,66 +170,12 @@ watch(
|
||||
rgba(0, 0, 0, 0.8) 80%,
|
||||
rgba(0, 0, 0, 0.9) 100%
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; /* 延伸到上方 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(20px);
|
||||
opacity: 0.2;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&.play-bar-mini {
|
||||
@apply h-14 py-0;
|
||||
}
|
||||
|
||||
// 顶部信息区域
|
||||
.music-info-header {
|
||||
@apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;
|
||||
|
||||
.music-info-main {
|
||||
@apply flex flex-col;
|
||||
|
||||
.music-title {
|
||||
@apply text-xl font-bold text-white mb-1;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
@apply flex items-center;
|
||||
|
||||
.artist-name {
|
||||
@apply text-sm text-white opacity-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-stats {
|
||||
@apply flex items-center gap-4;
|
||||
|
||||
.like-count,
|
||||
.comment-count {
|
||||
@apply flex items-center text-white;
|
||||
|
||||
i {
|
||||
@apply text-base mr-1;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-xs font-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条
|
||||
.music-progress-bar {
|
||||
@apply flex items-center justify-between px-4 py-2 relative z-10;
|
||||
@@ -388,7 +282,7 @@ watch(
|
||||
}
|
||||
|
||||
.mini-song-text {
|
||||
@apply ml-3 min-w-0 flex-1;
|
||||
@apply ml-3 min-w-0 flex-1 flex items-center;
|
||||
|
||||
.mini-song-title {
|
||||
@apply text-sm font-medium;
|
||||
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="settings-drawer">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="fixed inset-0 z-[99999] flex items-end justify-center"
|
||||
@click.self="close"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div class="absolute inset-0 bg-black/50" @click="close"></div>
|
||||
|
||||
<!-- 弹窗内容 - 磨砂玻璃效果 -->
|
||||
<div
|
||||
class="relative w-full max-w-lg bg-gray-900/70 backdrop-blur-2xl rounded-t-3xl overflow-hidden max-h-[85vh] flex flex-col border-t border-white/10 shadow-2xl"
|
||||
>
|
||||
<!-- 顶部拖拽条 -->
|
||||
<div class="flex justify-center pt-3 pb-2 flex-shrink-0">
|
||||
<div class="w-10 h-1 rounded-full bg-white/30"></div>
|
||||
</div>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<div class="flex items-center justify-between px-5 pb-4 flex-shrink-0">
|
||||
<h2 class="text-lg font-semibold text-white">
|
||||
{{ t('player.settings.title') }}
|
||||
</h2>
|
||||
<button
|
||||
@click="close"
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-white/60 hover:bg-white/10"
|
||||
>
|
||||
<i class="ri-close-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div
|
||||
class="flex-1 overflow-y-auto px-5 pb-6"
|
||||
:style="{ paddingBottom: `calc(24px + var(--safe-area-inset-bottom, 0px))` }"
|
||||
>
|
||||
<!-- 播放速度 -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-sm font-medium text-white/80">
|
||||
{{ t('player.settings.playbackSpeed') }}
|
||||
</span>
|
||||
<span class="text-sm text-green-400 font-medium">{{ playbackRate }}x</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="option in speedOptions"
|
||||
:key="option"
|
||||
@click="setSpeed(option)"
|
||||
class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
|
||||
:class="
|
||||
playbackRate === option
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-white/10 text-white/70 hover:bg-white/15'
|
||||
"
|
||||
>
|
||||
{{ option }}x
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-px bg-white/10 my-5"></div>
|
||||
|
||||
<!-- 定时关闭 -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-sm font-medium text-white/80">
|
||||
{{ t('player.sleepTimer.title') }}
|
||||
</span>
|
||||
<span v-if="hasTimerActive" class="text-sm text-green-400 font-medium">
|
||||
{{ timerStatusText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 已激活状态 -->
|
||||
<div v-if="hasTimerActive" class="space-y-3">
|
||||
<div class="p-4 rounded-2xl bg-green-500/15 border border-green-500/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="ri-timer-line text-green-400 text-xl"></i>
|
||||
<span class="text-green-400">
|
||||
{{ timerDisplayText }}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@click="cancelTimer"
|
||||
class="px-3 py-1 rounded-full text-sm bg-red-500/20 text-red-400 hover:bg-red-500/30"
|
||||
>
|
||||
{{ t('player.sleepTimer.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未激活状态 - 设置选项 -->
|
||||
<div v-else class="space-y-4">
|
||||
<!-- 按时间 -->
|
||||
<div>
|
||||
<p class="text-xs text-white/50 mb-2">
|
||||
{{ t('player.sleepTimer.timeMode') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="minutes in [15, 30, 60, 90]"
|
||||
:key="minutes"
|
||||
@click="setTimeTimer(minutes)"
|
||||
class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
|
||||
>
|
||||
{{ minutes }}{{ t('player.sleepTimer.minutes') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 自定义时间 -->
|
||||
<div class="flex items-center gap-2 mt-3">
|
||||
<div class="flex items-center flex-1 bg-white/10 rounded-full overflow-hidden">
|
||||
<button
|
||||
@click="decreaseMinutes"
|
||||
class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
|
||||
>
|
||||
<i class="ri-subtract-line text-lg"></i>
|
||||
</button>
|
||||
<input
|
||||
v-model="customMinutes"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
placeholder="分钟"
|
||||
class="flex-1 px-2 py-2 text-sm text-center bg-transparent text-white/80 border-0 outline-none placeholder-white/40"
|
||||
@input="handleMinutesInput"
|
||||
/>
|
||||
<button
|
||||
@click="increaseMinutes"
|
||||
class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
|
||||
>
|
||||
<i class="ri-add-line text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@click="setCustomTimeTimer"
|
||||
:disabled="!customMinutes || Number(customMinutes) < 1"
|
||||
class="px-4 py-2 rounded-full text-sm font-medium bg-green-500 text-white disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按歌曲数 -->
|
||||
<div>
|
||||
<p class="text-xs text-white/50 mb-2">
|
||||
{{ t('player.sleepTimer.songsMode') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="songs in [1, 3, 5, 10]"
|
||||
:key="songs"
|
||||
@click="setSongsTimer(songs)"
|
||||
class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
|
||||
>
|
||||
{{ songs }}{{ t('player.sleepTimer.songs') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放列表结束 -->
|
||||
<button
|
||||
@click="setPlaylistEndTimer"
|
||||
class="w-full py-3 rounded-2xl text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
|
||||
>
|
||||
{{ t('player.sleepTimer.playlistEnd') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
const { sleepTimer, playbackRate } = storeToRefs(playerStore);
|
||||
|
||||
// Props & Emits
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
}>();
|
||||
|
||||
// 播放速度选项
|
||||
const speedOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
|
||||
|
||||
// 自定义时间
|
||||
const customMinutes = ref<number | string>(30);
|
||||
|
||||
// 定时器相关
|
||||
const refreshTrigger = ref(0);
|
||||
let timerInterval: number | null = null;
|
||||
|
||||
const hasTimerActive = computed(() => playerStore.hasSleepTimerActive);
|
||||
|
||||
const timerStatusText = computed(() => {
|
||||
if (sleepTimer.value.type === 'time') return t('player.sleepTimer.activeTime');
|
||||
if (sleepTimer.value.type === 'songs') return t('player.sleepTimer.activeSongs');
|
||||
if (sleepTimer.value.type === 'end') return t('player.sleepTimer.activeEnd');
|
||||
return '';
|
||||
});
|
||||
|
||||
const timerDisplayText = computed(() => {
|
||||
void refreshTrigger.value;
|
||||
|
||||
if (sleepTimer.value.type === 'time' && sleepTimer.value.endTime) {
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
if (sleepTimer.value.type === 'songs') {
|
||||
return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs || 0 });
|
||||
}
|
||||
|
||||
if (sleepTimer.value.type === 'end') {
|
||||
return t('player.sleepTimer.afterPlaylist');
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
// 方法
|
||||
const close = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const setSpeed = (speed: number) => {
|
||||
playerStore.setPlaybackRate(speed);
|
||||
};
|
||||
|
||||
const setTimeTimer = (minutes: number) => {
|
||||
playerStore.setSleepTimerByTime(minutes);
|
||||
};
|
||||
|
||||
const setCustomTimeTimer = () => {
|
||||
const minutes =
|
||||
typeof customMinutes.value === 'number'
|
||||
? customMinutes.value
|
||||
: parseInt(String(customMinutes.value) || '0', 10);
|
||||
if (minutes >= 1) {
|
||||
playerStore.setSleepTimerByTime(minutes);
|
||||
customMinutes.value = 30;
|
||||
}
|
||||
};
|
||||
|
||||
const increaseMinutes = () => {
|
||||
const current = Number(customMinutes.value) || 0;
|
||||
customMinutes.value = Math.min(300, current + 1);
|
||||
};
|
||||
|
||||
const decreaseMinutes = () => {
|
||||
const current = Number(customMinutes.value) || 0;
|
||||
customMinutes.value = Math.max(1, current - 1);
|
||||
};
|
||||
|
||||
const handleMinutesInput = (e: Event) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const value = input.value.replace(/[^0-9]/g, '');
|
||||
if (value) {
|
||||
customMinutes.value = Math.min(300, Math.max(1, parseInt(value, 10)));
|
||||
} else {
|
||||
customMinutes.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const setSongsTimer = (songs: number) => {
|
||||
playerStore.setSleepTimerBySongs(songs);
|
||||
};
|
||||
|
||||
const setPlaylistEndTimer = () => {
|
||||
playerStore.setSleepTimerAtPlaylistEnd();
|
||||
};
|
||||
|
||||
const cancelTimer = () => {
|
||||
playerStore.clearSleepTimer();
|
||||
};
|
||||
|
||||
// 定时刷新倒计时
|
||||
const startTimerUpdate = () => {
|
||||
if (timerInterval) return;
|
||||
timerInterval = window.setInterval(() => {
|
||||
refreshTrigger.value = Date.now();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const stopTimerUpdate = () => {
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [hasTimerActive.value, sleepTimer.value.type],
|
||||
([active, type]) => {
|
||||
if (active && type === 'time') {
|
||||
startTimerUpdate();
|
||||
} else {
|
||||
stopTimerUpdate();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (hasTimerActive.value && sleepTimer.value.type === 'time') {
|
||||
startTimerUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimerUpdate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 弹窗动画 */
|
||||
.settings-drawer-enter-active,
|
||||
.settings-drawer-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-drawer-enter-active > div:last-child,
|
||||
.settings-drawer-leave-active > div:last-child {
|
||||
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.settings-drawer-enter-from,
|
||||
.settings-drawer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.settings-drawer-enter-from > div:last-child,
|
||||
.settings-drawer-leave-to > div:last-child {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user