mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-07-12 05:07:31 +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>
|
||||
Reference in New Issue
Block a user