mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
feat：针对移动端优化
This commit is contained in:
alger
359
src/renderer/components/common/DisclaimerModal.vue
Normal file
359
src/renderer/components/common/DisclaimerModal.vue
Normal file
@@ -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>
|
||||
280
src/renderer/components/common/MobileUpdateModal.vue
Normal file
280
src/renderer/components/common/MobileUpdateModal.vue
Normal file
@@ -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;
|
||||
|
||||
363
src/renderer/components/player/MobilePlayerSettings.vue
Normal file
363
src/renderer/components/player/MobilePlayerSettings.vue
Normal file
@@ -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>
|
||||
@@ -64,6 +64,10 @@
|
||||
|
||||
:root {
|
||||
--text-color: #000000dd;
|
||||
--safe-area-inset-top: 0px;
|
||||
--safe-area-inset-right: 0px;
|
||||
--safe-area-inset-bottom: 10px;
|
||||
--safe-area-inset-left: 0px;
|
||||
}
|
||||
|
||||
:root[class='dark'] {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div class="layout-page">
|
||||
<!-- 移动端使用专用布局（平板模式下使用 PC 布局） -->
|
||||
<mobile-layout v-if="isPhone && !settingsStore.setData?.tabletMode" :is-phone="isPhone" />
|
||||
|
||||
<!-- PC 端 / 浏览器移动端 / 平板模式 保持原有布局 -->
|
||||
<div v-else class="layout-page" :class="{ mobile: settingsStore.isMobile }">
|
||||
<div id="layout-main" class="layout-main">
|
||||
<title-bar />
|
||||
<div class="layout-main-page">
|
||||
@@ -7,7 +11,7 @@
|
||||
<app-menu v-if="!settingsStore.isMobile" class="menu" :menus="menuStore.menus" />
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<search-bar />
|
||||
<search-bar class="search-bar" />
|
||||
<!-- 主页面路由 -->
|
||||
<div
|
||||
class="main-content"
|
||||
@@ -25,7 +29,8 @@
|
||||
</router-view>
|
||||
</div>
|
||||
<play-bottom />
|
||||
<app-menu v-if="shouldShowMobileMenu" class="menu" :menus="menuStore.menus" />
|
||||
<!-- 移动端底部菜单（浏览器模拟移动端时使用） -->
|
||||
<app-menu v-if="shouldShowMobileMenu" class="menu mobile-menu" :menus="menuStore.menus" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部音乐播放 -->
|
||||
@@ -42,7 +47,6 @@
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<install-app-modal v-if="!isElectron"></install-app-modal>
|
||||
<update-modal v-if="isElectron" />
|
||||
<playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
|
||||
<sleep-timer-top v-if="!settingsStore.isMobile" />
|
||||
@@ -65,7 +69,6 @@ import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
|
||||
import InstallAppModal from '@/components/common/InstallAppModal.vue';
|
||||
import PlayBottom from '@/components/common/PlayBottom.vue';
|
||||
import UpdateModal from '@/components/common/UpdateModal.vue';
|
||||
import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
|
||||
@@ -76,6 +79,9 @@ import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { isElectron } from '@/utils';
|
||||
|
||||
// 移动端专用布局
|
||||
import MobileLayout from './MobileLayout.vue';
|
||||
|
||||
const keepAliveInclude = computed(() => {
|
||||
const allRoutes = [...homeRouter, ...otherRouter];
|
||||
|
||||
@@ -118,6 +124,9 @@ const shouldShowMobileMenu = computed(() => {
|
||||
|
||||
provide('shouldShowMobileMenu', shouldShowMobileMenu);
|
||||
|
||||
// 使用 settingsStore.isMobile 进行移动端检测而不是 Capacitor 设备检测
|
||||
const isPhone = computed(() => settingsStore.isMobile);
|
||||
|
||||
onMounted(() => {
|
||||
settingsStore.initializeSettings();
|
||||
settingsStore.initializeTheme();
|
||||
@@ -144,7 +153,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
@apply w-full h-full relative text-gray-900 dark:text-white;
|
||||
@apply w-full h-full relative text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
.layout-main-page {
|
||||
@@ -173,10 +182,12 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
flex: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
height: calc(100vh - 75px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
133
src/renderer/layout/MobileLayout.vue
Normal file
133
src/renderer/layout/MobileLayout.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div id="layout-main" class="mobile-layout mobile" :class="{ 'has-safe-area': isPhone }">
|
||||
<!-- 顶部头部 -->
|
||||
<mobile-header />
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div
|
||||
class="mobile-content"
|
||||
:class="{ 'has-bottom-menu': shouldShowBottomMenu, 'has-player': isPlay }"
|
||||
>
|
||||
<router-view v-slot="{ Component }" class="mobile-page">
|
||||
<keep-alive :include="keepAliveInclude">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
|
||||
<!-- 底部播放条 -->
|
||||
<mobile-play-bar v-if="isPlay" />
|
||||
|
||||
<!-- 底部导航菜单 -->
|
||||
<div v-if="shouldShowBottomMenu" class="mobile-bottom-menu">
|
||||
<app-menu class="mobile-menu" :menus="menuStore.menus" />
|
||||
</div>
|
||||
<!-- 其他弹窗/抽屉 -->
|
||||
<playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
|
||||
<playing-list-drawer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent, provide, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import homeRouter from '@/router/home';
|
||||
import otherRouter from '@/router/other';
|
||||
import { useMenuStore } from '@/store/modules/menu';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
import MobileHeader from './components/MobileHeader.vue';
|
||||
|
||||
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
|
||||
const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
|
||||
const PlayingListDrawer = defineAsyncComponent(
|
||||
() => import('@/components/player/PlayingListDrawer.vue')
|
||||
);
|
||||
const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
|
||||
|
||||
const props = defineProps<{
|
||||
isPhone: boolean;
|
||||
}>();
|
||||
|
||||
const route = useRoute();
|
||||
const playerStore = usePlayerStore();
|
||||
const menuStore = useMenuStore();
|
||||
|
||||
// 提供是否有安全区域
|
||||
provide('hasSafeArea', props.isPhone);
|
||||
|
||||
// 是否有播放的歌曲
|
||||
const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
|
||||
|
||||
// 是否显示底部菜单
|
||||
const shouldShowBottomMenu = computed(() => {
|
||||
const menuPaths = menuStore.menus.map((item: any) => item.path);
|
||||
return menuPaths.includes(route.path) && !playerStore.musicFull;
|
||||
});
|
||||
|
||||
// 提供给 MobilePlayBar 使用，用于调整播放栏位置
|
||||
provide('shouldShowMobileMenu', shouldShowBottomMenu);
|
||||
|
||||
// Keep-alive 配置
|
||||
const keepAliveInclude = computed(() => {
|
||||
const allRoutes = [...homeRouter, ...otherRouter];
|
||||
return allRoutes
|
||||
.filter((item) => item.meta?.keepAlive)
|
||||
.map((item) =>
|
||||
typeof item.name === 'string' ? item.name.charAt(0).toUpperCase() + item.name.slice(1) : ''
|
||||
)
|
||||
.filter(Boolean);
|
||||
});
|
||||
|
||||
// 歌单抽屉
|
||||
const showPlaylistDrawer = ref(false);
|
||||
const currentSongId = ref<number | undefined>();
|
||||
|
||||
// 提供打开歌单抽屉的方法
|
||||
const openPlaylistDrawer = (songId: number, isOpen: boolean = true) => {
|
||||
currentSongId.value = songId;
|
||||
showPlaylistDrawer.value = isOpen;
|
||||
playerStore.setMusicFull(false);
|
||||
playerStore.setPlayListDrawerVisible(!isOpen);
|
||||
};
|
||||
|
||||
provide('openPlaylistDrawer', openPlaylistDrawer);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-layout {
|
||||
@apply w-screen h-screen flex flex-col;
|
||||
@apply bg-light dark:bg-black;
|
||||
@apply overflow-hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
@apply flex-1 overflow-auto;
|
||||
|
||||
// // 只有底部菜单
|
||||
// &.has-bottom-menu:not(.has-player) {
|
||||
// padding-bottom: calc(60px + var(--safe-area-inset-bottom, 0px));
|
||||
// }
|
||||
|
||||
// // 只有播放栏
|
||||
// &.has-player:not(.has-bottom-menu) {
|
||||
// padding-bottom: calc(70px + var(--safe-area-inset-bottom, 0px));
|
||||
// }
|
||||
}
|
||||
|
||||
.mobile-page {
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
// 底部菜单固定在底部
|
||||
.mobile-bottom-menu {
|
||||
@apply bg-light dark:bg-black;
|
||||
@apply border-t border-gray-200 dark:border-gray-800;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
@apply w-full;
|
||||
}
|
||||
</style>
|
||||
@@ -172,9 +172,11 @@ const toggleMenu = () => {
|
||||
.app-menu {
|
||||
max-width: 100%;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
@apply bg-light dark:bg-black border-t border-gray-200 dark:border-gray-700;
|
||||
z-index: 99999;
|
||||
@apply bg-light dark:bg-black border-none border-gray-200 dark:border-gray-700;
|
||||
|
||||
|
||||
113
src/renderer/layout/components/MobileHeader.vue
Normal file
113
src/renderer/layout/components/MobileHeader.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="mobile-header" :class="{ 'safe-area-top': hasSafeArea }">
|
||||
<!-- 左侧区域 -->
|
||||
<div class="header-left">
|
||||
<div v-if="showBack" class="header-btn" @click="goBack">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div v-else class="header-logo">
|
||||
<span class="logo-text">Alger</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间标题 -->
|
||||
<div class="header-title">
|
||||
<span v-if="title">{{ t(title) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="header-right">
|
||||
<div class="header-btn" @click="openSearch">
|
||||
<i class="ri-search-line"></i>
|
||||
</div>
|
||||
<div class="header-btn" @click="openSettings">
|
||||
<i class="ri-settings-3-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 注入是否有安全区域
|
||||
const hasSafeArea = inject('hasSafeArea', false);
|
||||
|
||||
// 是否显示返回按钮
|
||||
const showBack = computed(() => {
|
||||
return route.meta.back === true;
|
||||
});
|
||||
|
||||
// 页面标题
|
||||
const title = computed(() => {
|
||||
return (route.meta.title as string) || '';
|
||||
});
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 打开搜索
|
||||
const openSearch = () => {
|
||||
router.push('/mobile-search');
|
||||
};
|
||||
|
||||
const openSettings = () => {
|
||||
router.push('/set');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-header {
|
||||
@apply flex items-center justify-between px-4 py-3;
|
||||
@apply bg-light dark:bg-black;
|
||||
@apply border-b border-gray-100 dark:border-gray-800;
|
||||
min-height: 56px;
|
||||
|
||||
&.safe-area-top {
|
||||
padding-top: calc(var(--safe-area-inset-top, 0px) + 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@apply flex items-center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
@apply flex items-center;
|
||||
|
||||
.logo-text {
|
||||
@apply text-lg font-bold text-green-500;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@apply flex-1 text-center;
|
||||
|
||||
span {
|
||||
@apply text-base font-medium text-gray-900 dark:text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
@apply flex items-center gap-2;
|
||||
min-width: 80px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
@apply flex items-center justify-center;
|
||||
@apply w-10 h-10 rounded-full;
|
||||
@apply text-xl text-gray-600 dark:text-gray-300;
|
||||
@apply active:bg-gray-100 dark:active:bg-gray-800;
|
||||
@apply transition-colors duration-150;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="search-box flex">
|
||||
<div class="search-box flex search-bar">
|
||||
<div v-if="showBackButton" class="back-button" @click="goBack">
|
||||
<i class="ri-arrow-left-line"></i>
|
||||
</div>
|
||||
@@ -364,14 +364,9 @@ const checkForUpdates = async () => {
|
||||
};
|
||||
|
||||
const toGithubRelease = () => {
|
||||
if (updateInfo.value.hasUpdate) {
|
||||
settingsStore.showUpdateModal = true;
|
||||
} else {
|
||||
window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
|
||||
}
|
||||
window.location.href = 'https://donate.alger.fun/download';
|
||||
};
|
||||
|
||||
// ==================== 搜索建议相关的状态和方法 ====================
|
||||
const suggestions = ref<string[]>([]);
|
||||
const showSuggestions = ref(false);
|
||||
const suggestionsLoading = ref(false);
|
||||
@@ -446,8 +441,6 @@ const handleKeydown = (event: KeyboardEvent) => {
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// ================================================================
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -17,8 +17,7 @@ const layoutRouter = [
|
||||
title: 'comp.search',
|
||||
noScroll: true,
|
||||
icon: 'icon-Search',
|
||||
keepAlive: true,
|
||||
isMobile: true
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/search/index.vue')
|
||||
},
|
||||
@@ -62,7 +61,8 @@ const layoutRouter = [
|
||||
meta: {
|
||||
title: 'comp.history',
|
||||
icon: 'icon-a-TicketStar',
|
||||
keepAlive: true
|
||||
keepAlive: true,
|
||||
isMobile: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -108,6 +108,28 @@ const otherRouter = [
|
||||
back: true
|
||||
},
|
||||
component: () => import('@/views/music/HistoryRecommend.vue')
|
||||
},
|
||||
{
|
||||
path: '/mobile-search',
|
||||
name: 'mobileSearch',
|
||||
meta: {
|
||||
title: '搜索',
|
||||
keepAlive: false,
|
||||
showInMenu: false,
|
||||
back: true
|
||||
},
|
||||
component: () => import('@/views/mobile-search/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/mobile-search-result',
|
||||
name: 'mobileSearchResult',
|
||||
meta: {
|
||||
title: '搜索结果',
|
||||
keepAlive: false,
|
||||
showInMenu: false,
|
||||
back: true
|
||||
},
|
||||
component: () => import('@/views/mobile-search-result/index.vue')
|
||||
}
|
||||
];
|
||||
export default otherRouter;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="history-page">
|
||||
<div class="title-wrapper" :class="setAnimationClass('animate__fadeInRight')">
|
||||
<div class="title-wrapper" :class="setAnimationClass('animate__fadeInRight')" v-if="!isMobile">
|
||||
<div class="title">{{ t('history.title') }}</div>
|
||||
<n-button
|
||||
secondary
|
||||
@@ -54,12 +54,14 @@
|
||||
:style="setAnimationDelay(index, 30)"
|
||||
>
|
||||
<song-item class="history-item-content" :item="item" @play="handlePlay" />
|
||||
<div class="history-item-count min-w-[60px]" v-show="currentTab === 'local'">
|
||||
{{ t('history.playCount', { count: item.count }) }}
|
||||
</div>
|
||||
<div class="history-item-delete" v-show="currentTab === 'local'">
|
||||
<i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
|
||||
</div>
|
||||
<template v-if="!isMobile">
|
||||
<div class="history-item-count min-w-[60px]" v-show="currentTab === 'local'">
|
||||
{{ t('history.playCount', { count: item.count }) }}
|
||||
</div>
|
||||
<div class="history-item-delete" v-show="currentTab === 'local'">
|
||||
<i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -130,7 +132,7 @@ import { usePlaylistHistory } from '@/hooks/PlaylistHistoryHook';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import type { SongResult } from '@/types/music';
|
||||
import { setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
|
||||
// 扩展历史记录类型以包含 playTime
|
||||
interface HistoryRecord extends Partial<SongResult> {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex gap-4 h-full pb-4">
|
||||
<favorite class="flex-item" />
|
||||
<favorite class="flex-item" v-if="!isMobile" />
|
||||
<history-list class="flex-item" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,6 +10,7 @@ defineOptions({
|
||||
name: 'History'
|
||||
});
|
||||
|
||||
import { isMobile } from '@/utils';
|
||||
import Favorite from '@/views/favorite/index.vue';
|
||||
import HistoryList from '@/views/history/index.vue';
|
||||
</script>
|
||||
|
||||
@@ -41,7 +41,7 @@ defineOptions({
|
||||
|
||||
.mobile {
|
||||
.main-content {
|
||||
@apply flex-col mx-4;
|
||||
@apply flex-col mx-4 mb-40;
|
||||
}
|
||||
:deep(.favorite-page) {
|
||||
@apply p-0 mx-4 h-full;
|
||||
|
||||
464
src/renderer/views/mobile-search-result/index.vue
Normal file
464
src/renderer/views/mobile-search-result/index.vue
Normal file
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<div class="mobile-search-result">
|
||||
<!-- 搜索结果头部 -->
|
||||
<div class="result-header" :class="{ 'safe-area-top': hasSafeArea }">
|
||||
<div class="header-back" @click="goBack">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="header-keyword">{{ keyword }}</div>
|
||||
<div class="header-actions">
|
||||
<div class="action-btn" @click="openSearch">
|
||||
<i class="ri-search-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索类型标签 -->
|
||||
<div class="search-types">
|
||||
<div
|
||||
v-for="type in searchTypes"
|
||||
:key="type.key"
|
||||
class="type-tag"
|
||||
:class="{ active: searchType === type.key }"
|
||||
@click="selectType(type.key)"
|
||||
>
|
||||
{{ type.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<div class="result-content" @scroll="handleScroll">
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading && !results.length" class="loading-state">
|
||||
<n-spin size="medium" />
|
||||
<span class="ml-2">{{ t('search.loading.searching') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<div v-else-if="results.length" class="result-list">
|
||||
<!-- B站视频 -->
|
||||
<template v-if="searchType === SEARCH_TYPE.BILIBILI">
|
||||
<bilibili-item
|
||||
v-for="item in results"
|
||||
:key="item.bvid"
|
||||
:item="item"
|
||||
@play="handlePlayBilibili"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 歌曲搜索 -->
|
||||
<template v-else-if="searchType === SEARCH_TYPE.MUSIC">
|
||||
<song-item
|
||||
v-for="item in results"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:is-next="true"
|
||||
@play="handlePlay"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 专辑/歌单/MV 搜索 -->
|
||||
<template v-else>
|
||||
<search-item v-for="item in results" :key="item.id" :item="item" class="mb-3" />
|
||||
</template>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div v-if="isLoadingMore" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
<span class="ml-2">{{ t('search.loading.more') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 没有更多 -->
|
||||
<div v-if="!hasMore && results.length" class="no-more">
|
||||
{{ t('search.noMore') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无结果 -->
|
||||
<div v-else-if="!loading" class="empty-state">
|
||||
<i class="ri-search-line"></i>
|
||||
<span>{{ t('search.noResult') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import {
|
||||
createSimpleBilibiliSong,
|
||||
getBilibiliAudioUrl,
|
||||
getBilibiliProxyUrl,
|
||||
getBilibiliVideoDetail,
|
||||
searchBilibili
|
||||
} from '@/api/bilibili';
|
||||
import { getSearch } from '@/api/search';
|
||||
import BilibiliItem from '@/components/common/BilibiliItem.vue';
|
||||
import SearchItem from '@/components/common/SearchItem.vue';
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { SEARCH_TYPE, SEARCH_TYPES } from '@/const/bar-const';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSearchStore } from '@/store/modules/search';
|
||||
import type { IBilibiliSearchResult } from '@/types/bilibili';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const playerStore = usePlayerStore();
|
||||
const searchStore = useSearchStore();
|
||||
|
||||
// 注入是否有安全区域
|
||||
const hasSafeArea = inject('hasSafeArea', false);
|
||||
|
||||
// 搜索关键词
|
||||
const keyword = ref((route.query.keyword as string) || '');
|
||||
|
||||
// 搜索类型
|
||||
const searchType = ref(Number(route.query.type) || searchStore.searchType || 1);
|
||||
const searchTypes = computed(() => {
|
||||
locale.value;
|
||||
return SEARCH_TYPES.map((type) => ({
|
||||
label: t(type.label),
|
||||
key: type.key
|
||||
}));
|
||||
});
|
||||
|
||||
// 搜索结果
|
||||
const results = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页
|
||||
const ITEMS_PER_PAGE = 30;
|
||||
const page = ref(1);
|
||||
const hasMore = ref(true);
|
||||
const isLoadingMore = ref(false);
|
||||
|
||||
// 执行搜索
|
||||
const performSearch = async (isLoadMore = false) => {
|
||||
if (!keyword.value) return;
|
||||
|
||||
if (isLoadMore) {
|
||||
if (!hasMore.value || isLoadingMore.value) return;
|
||||
isLoadingMore.value = true;
|
||||
} else {
|
||||
loading.value = true;
|
||||
results.value = [];
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
|
||||
try {
|
||||
// B站搜索
|
||||
if (searchType.value === SEARCH_TYPE.BILIBILI) {
|
||||
const response = await searchBilibili({
|
||||
keyword: keyword.value,
|
||||
page: page.value,
|
||||
pagesize: ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
const bilibiliVideos = response.data.data.result.map((item: any) => ({
|
||||
id: item.aid,
|
||||
bvid: item.bvid,
|
||||
title: item.title,
|
||||
author: item.author,
|
||||
pic: getBilibiliProxyUrl(item.pic),
|
||||
duration: item.duration,
|
||||
pubdate: item.pubdate,
|
||||
description: item.description,
|
||||
view: item.play,
|
||||
danmaku: item.video_review
|
||||
}));
|
||||
|
||||
if (isLoadMore) {
|
||||
results.value = [...results.value, ...bilibiliVideos];
|
||||
} else {
|
||||
results.value = bilibiliVideos;
|
||||
}
|
||||
|
||||
hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
// 歌曲搜索
|
||||
else if (searchType.value === SEARCH_TYPE.MUSIC) {
|
||||
const { data } = await getSearch({
|
||||
keywords: keyword.value,
|
||||
type: searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: (page.value - 1) * ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
const songs = (data.result.songs || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.al?.picUrl,
|
||||
artists: item.ar
|
||||
}));
|
||||
|
||||
if (isLoadMore) {
|
||||
results.value = [...results.value, ...songs];
|
||||
} else {
|
||||
results.value = songs;
|
||||
}
|
||||
|
||||
hasMore.value = songs.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
// 专辑搜索
|
||||
else if (searchType.value === SEARCH_TYPE.ALBUM) {
|
||||
const { data } = await getSearch({
|
||||
keywords: keyword.value,
|
||||
type: searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: (page.value - 1) * ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
const albums = (data.result.albums || []).map((item: any) => ({
|
||||
...item,
|
||||
desc: `${item.artist?.name || ''} ${item.company || ''}`,
|
||||
type: 'album'
|
||||
}));
|
||||
|
||||
if (isLoadMore) {
|
||||
results.value = [...results.value, ...albums];
|
||||
} else {
|
||||
results.value = albums;
|
||||
}
|
||||
|
||||
hasMore.value = albums.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
// 歌单搜索
|
||||
else if (searchType.value === SEARCH_TYPE.PLAYLIST) {
|
||||
const { data } = await getSearch({
|
||||
keywords: keyword.value,
|
||||
type: searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: (page.value - 1) * ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
const playlists = (data.result.playlists || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.coverImgUrl,
|
||||
playCount: item.playCount,
|
||||
desc: item.creator?.nickname || '',
|
||||
type: 'playlist'
|
||||
}));
|
||||
|
||||
if (isLoadMore) {
|
||||
results.value = [...results.value, ...playlists];
|
||||
} else {
|
||||
results.value = playlists;
|
||||
}
|
||||
|
||||
hasMore.value = playlists.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
// MV 搜索
|
||||
else if (searchType.value === SEARCH_TYPE.MV) {
|
||||
const { data } = await getSearch({
|
||||
keywords: keyword.value,
|
||||
type: searchType.value,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: (page.value - 1) * ITEMS_PER_PAGE
|
||||
});
|
||||
|
||||
const mvs = (data.result.mvs || []).map((item: any) => ({
|
||||
...item,
|
||||
picUrl: item.cover,
|
||||
playCount: item.playCount,
|
||||
desc: item.artists?.map((artist: any) => artist.name).join('/') || '',
|
||||
type: 'mv'
|
||||
}));
|
||||
|
||||
if (isLoadMore) {
|
||||
results.value = [...results.value, ...mvs];
|
||||
} else {
|
||||
results.value = mvs;
|
||||
}
|
||||
|
||||
hasMore.value = mvs.length === ITEMS_PER_PAGE;
|
||||
}
|
||||
|
||||
page.value++;
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isLoadingMore.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 选择搜索类型
|
||||
const selectType = (type: number) => {
|
||||
if (searchType.value === type) return;
|
||||
|
||||
searchType.value = type;
|
||||
searchStore.searchType = type;
|
||||
|
||||
// 更新路由查询参数
|
||||
router.replace({
|
||||
query: {
|
||||
...route.query,
|
||||
type: type.toString()
|
||||
}
|
||||
});
|
||||
|
||||
performSearch();
|
||||
};
|
||||
|
||||
// 滚动加载更多
|
||||
const handleScroll = (e: Event) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const { scrollTop, scrollHeight, clientHeight } = target;
|
||||
|
||||
if (scrollTop + clientHeight >= scrollHeight - 100) {
|
||||
performSearch(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放音乐
|
||||
const handlePlay = (item: any) => {
|
||||
playerStore.addToNextPlay(item);
|
||||
};
|
||||
|
||||
// 播放B站视频
|
||||
const handlePlayBilibili = async (item: IBilibiliSearchResult) => {
|
||||
try {
|
||||
const videoDetail = await getBilibiliVideoDetail(item.bvid);
|
||||
const pages = videoDetail.data.pages;
|
||||
|
||||
if (pages && pages.length === 1) {
|
||||
const audioUrl = await getBilibiliAudioUrl(item.bvid, pages[0].cid);
|
||||
const playItem = createSimpleBilibiliSong(item, audioUrl);
|
||||
playItem.bilibiliData = {
|
||||
bvid: item.bvid,
|
||||
cid: pages[0].cid
|
||||
};
|
||||
playerStore.setPlay(playItem);
|
||||
} else {
|
||||
router.push(`/bilibili/${item.bvid}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('播放B站视频失败:', error);
|
||||
router.push(`/bilibili/${item.bvid}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 打开搜索
|
||||
const openSearch = () => {
|
||||
router.push('/mobile-search');
|
||||
};
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.query,
|
||||
(query) => {
|
||||
if (route.path === '/mobile-search-result' && query.keyword) {
|
||||
keyword.value = query.keyword as string;
|
||||
searchType.value = Number(query.type) || searchStore.searchType || 1;
|
||||
performSearch();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (keyword.value) {
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-search-result {
|
||||
@apply fixed inset-0;
|
||||
@apply bg-light dark:bg-black;
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
@apply flex items-center gap-3 px-4 py-3;
|
||||
@apply border-b border-gray-100 dark:border-gray-800;
|
||||
|
||||
&.safe-area-top {
|
||||
padding-top: calc(var(--safe-area-inset-top, 0px) + 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.header-back {
|
||||
@apply flex items-center justify-center;
|
||||
@apply w-10 h-10 rounded-full text-xl;
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
@apply active:bg-gray-100 dark:active:bg-gray-800;
|
||||
}
|
||||
|
||||
.header-keyword {
|
||||
@apply flex-1 text-base font-medium;
|
||||
@apply text-gray-900 dark:text-white;
|
||||
@apply truncate;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@apply flex items-center justify-center;
|
||||
@apply w-10 h-10 rounded-full text-xl;
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
@apply active:bg-gray-100 dark:active:bg-gray-800;
|
||||
}
|
||||
|
||||
.search-types {
|
||||
@apply flex gap-2 px-4 py-3 overflow-x-auto;
|
||||
@apply border-b border-gray-100 dark:border-gray-800;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
@apply px-4 py-1.5 rounded-full text-sm whitespace-nowrap;
|
||||
@apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
|
||||
@apply transition-colors duration-200;
|
||||
|
||||
&.active {
|
||||
@apply bg-green-500 text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.result-content {
|
||||
@apply flex-1 overflow-y-auto;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
@apply flex flex-col items-center justify-center py-20;
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
@apply pb-20;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
@apply flex justify-center items-center py-4;
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
@apply text-center py-4;
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@apply flex flex-col items-center justify-center py-20;
|
||||
@apply text-gray-400 dark:text-gray-500;
|
||||
|
||||
i {
|
||||
@apply text-6xl mb-4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
392
src/renderer/views/mobile-search/index.vue
Normal file
392
src/renderer/views/mobile-search/index.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div class="mobile-search-page">
|
||||
<!-- 搜索头部 -->
|
||||
<div class="search-header" :class="{ 'safe-area-top': hasSafeArea }">
|
||||
<div class="header-back" @click="goBack">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="search-input-wrapper">
|
||||
<i class="ri-search-line search-icon"></i>
|
||||
<input
|
||||
ref="searchInputRef"
|
||||
v-model="searchValue"
|
||||
type="text"
|
||||
class="search-input"
|
||||
:placeholder="hotSearchKeyword"
|
||||
@input="handleInput"
|
||||
@keydown.enter="handleSearch"
|
||||
/>
|
||||
<i v-if="searchValue" class="ri-close-circle-fill clear-icon" @click="clearSearch"></i>
|
||||
</div>
|
||||
<div class="search-button" @click="handleSearch">
|
||||
{{ t('common.search') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索类型标签 -->
|
||||
<div class="search-types">
|
||||
<div
|
||||
v-for="type in searchTypes"
|
||||
:key="type.key"
|
||||
class="type-tag"
|
||||
:class="{ active: searchType === type.key }"
|
||||
@click="selectType(type.key)"
|
||||
>
|
||||
{{ type.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索内容区域 -->
|
||||
<div class="search-content">
|
||||
<!-- 搜索建议 -->
|
||||
<div v-if="suggestions.length > 0" class="search-section">
|
||||
<div class="section-title">{{ t('search.suggestions') }}</div>
|
||||
<div class="suggestion-list">
|
||||
<div
|
||||
v-for="(item, index) in suggestions"
|
||||
:key="index"
|
||||
class="suggestion-item"
|
||||
@click="selectSuggestion(item)"
|
||||
>
|
||||
<i class="ri-search-line"></i>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<div v-else-if="searchHistory.length > 0" class="search-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">{{ t('search.history') }}</span>
|
||||
<span class="clear-history" @click="clearHistory">{{ t('common.clear') }}</span>
|
||||
</div>
|
||||
<div class="history-tags">
|
||||
<div
|
||||
v-for="(item, index) in searchHistory"
|
||||
:key="index"
|
||||
class="history-tag"
|
||||
@click="selectSuggestion(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门搜索 -->
|
||||
<div v-if="hotSearchList.length > 0 && !searchValue" class="search-section">
|
||||
<div class="section-title">{{ t('search.hot') }}</div>
|
||||
<div class="hot-list">
|
||||
<div
|
||||
v-for="(item, index) in hotSearchList"
|
||||
:key="index"
|
||||
class="hot-item"
|
||||
@click="selectSuggestion(item.searchWord)"
|
||||
>
|
||||
<span class="hot-rank" :class="{ top: index < 3 }">{{ index + 1 }}</span>
|
||||
<span class="hot-word">{{ item.searchWord }}</span>
|
||||
<span v-if="item.iconUrl" class="hot-icon">
|
||||
<img :src="item.iconUrl" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { computed, inject, nextTick, onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { getHotSearch, getSearchKeyword } from '@/api/home';
|
||||
import { getSearchSuggestions } from '@/api/search';
|
||||
import { SEARCH_TYPES } from '@/const/bar-const';
|
||||
import { useSearchStore } from '@/store/modules/search';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const searchStore = useSearchStore();
|
||||
|
||||
// 注入是否有安全区域
|
||||
const hasSafeArea = inject('hasSafeArea', false);
|
||||
|
||||
// 搜索值
|
||||
const searchValue = ref('');
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// 热门搜索关键词占位符
|
||||
const hotSearchKeyword = ref('搜索音乐、歌手、歌单');
|
||||
|
||||
// 搜索类型
|
||||
const searchType = ref(searchStore.searchType || 1);
|
||||
const searchTypes = computed(() => {
|
||||
locale.value;
|
||||
return SEARCH_TYPES.map((type) => ({
|
||||
label: t(type.label),
|
||||
key: type.key
|
||||
}));
|
||||
});
|
||||
|
||||
// 搜索建议
|
||||
const suggestions = ref<string[]>([]);
|
||||
|
||||
// 搜索历史
|
||||
const HISTORY_KEY = 'mobile_search_history';
|
||||
const searchHistory = ref<string[]>([]);
|
||||
|
||||
// 热门搜索
|
||||
const hotSearchList = ref<any[]>([]);
|
||||
|
||||
// 加载热门搜索关键词
|
||||
const loadHotSearchKeyword = async () => {
|
||||
try {
|
||||
const { data } = await getSearchKeyword();
|
||||
hotSearchKeyword.value = data.data.showKeyword;
|
||||
} catch (e) {
|
||||
console.error('加载热门搜索关键词失败:', e);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载热门搜索列表
|
||||
const loadHotSearchList = async () => {
|
||||
try {
|
||||
const { data } = await getHotSearch();
|
||||
hotSearchList.value = data.data || [];
|
||||
} catch (e) {
|
||||
console.error('加载热门搜索失败:', e);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载搜索历史
|
||||
const loadSearchHistory = () => {
|
||||
try {
|
||||
const history = localStorage.getItem(HISTORY_KEY);
|
||||
searchHistory.value = history ? JSON.parse(history) : [];
|
||||
} catch (e) {
|
||||
console.error('加载搜索历史失败:', e);
|
||||
searchHistory.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 保存搜索历史
|
||||
const saveSearchHistory = (keyword: string) => {
|
||||
if (!keyword.trim()) return;
|
||||
|
||||
// 移除重复项并添加到开头
|
||||
const history = searchHistory.value.filter((item) => item !== keyword);
|
||||
history.unshift(keyword);
|
||||
|
||||
// 最多保存20条
|
||||
searchHistory.value = history.slice(0, 20);
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value));
|
||||
};
|
||||
|
||||
// 清除搜索历史
|
||||
const clearHistory = () => {
|
||||
searchHistory.value = [];
|
||||
localStorage.removeItem(HISTORY_KEY);
|
||||
};
|
||||
|
||||
// 获取搜索建议（防抖）
|
||||
const debouncedGetSuggestions = useDebounceFn(async (keyword: string) => {
|
||||
if (!keyword.trim()) {
|
||||
suggestions.value = [];
|
||||
return;
|
||||
}
|
||||
suggestions.value = await getSearchSuggestions(keyword);
|
||||
}, 300);
|
||||
|
||||
// 处理输入
|
||||
const handleInput = () => {
|
||||
debouncedGetSuggestions(searchValue.value);
|
||||
};
|
||||
|
||||
// 清除搜索
|
||||
const clearSearch = () => {
|
||||
searchValue.value = '';
|
||||
suggestions.value = [];
|
||||
};
|
||||
|
||||
// 选择搜索类型
|
||||
const selectType = (type: number) => {
|
||||
searchType.value = type;
|
||||
searchStore.searchType = type;
|
||||
};
|
||||
|
||||
// 选择建议
|
||||
const selectSuggestion = (keyword: string) => {
|
||||
searchValue.value = keyword;
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
// 执行搜索
|
||||
const handleSearch = () => {
|
||||
const keyword = searchValue.value.trim();
|
||||
if (!keyword) return;
|
||||
|
||||
// 保存搜索历史
|
||||
saveSearchHistory(keyword);
|
||||
|
||||
// 跳转到搜索结果页
|
||||
router.push({
|
||||
path: '/mobile-search-result',
|
||||
query: {
|
||||
keyword,
|
||||
type: searchType.value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadHotSearchKeyword();
|
||||
loadHotSearchList();
|
||||
loadSearchHistory();
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-search-page {
|
||||
@apply fixed inset-0 z-50;
|
||||
@apply bg-light dark:bg-black;
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
@apply flex items-center gap-3 pl-1 pr-3 py-3;
|
||||
@apply border-b border-gray-100 dark:border-gray-800;
|
||||
|
||||
&.safe-area-top {
|
||||
padding-top: calc(var(--safe-area-inset-top, 0px) + 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.header-back {
|
||||
@apply flex items-center justify-center;
|
||||
@apply w-8 h-8 rounded-full text-2xl;
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
@apply active:bg-gray-100 dark:active:bg-gray-800;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
@apply flex-1 flex items-center gap-2;
|
||||
@apply bg-gray-100 dark:bg-gray-800 rounded-full;
|
||||
@apply px-4 py-1;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@apply text-gray-400 text-lg;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@apply flex-1 bg-transparent border-none outline-none;
|
||||
@apply text-gray-900 dark:text-white text-base;
|
||||
|
||||
&::placeholder {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
@apply text-gray-400 text-lg cursor-pointer;
|
||||
}
|
||||
|
||||
.search-types {
|
||||
@apply flex gap-2 px-4 py-3 overflow-x-auto;
|
||||
@apply border-b border-gray-100 dark:border-gray-800;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
@apply px-4 py-1.5 rounded-full text-sm whitespace-nowrap;
|
||||
@apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
|
||||
@apply transition-colors duration-200;
|
||||
|
||||
&.active {
|
||||
@apply bg-green-500 text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
@apply flex-1 overflow-y-auto px-4 py-3;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@apply flex items-center justify-between mb-3;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-sm font-medium text-gray-500 dark:text-gray-400 mb-3;
|
||||
}
|
||||
|
||||
.clear-history {
|
||||
@apply text-sm text-gray-400 dark:text-gray-500;
|
||||
}
|
||||
|
||||
.suggestion-list {
|
||||
@apply space-y-1;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
@apply flex items-center gap-3 py-3;
|
||||
@apply text-gray-700 dark:text-gray-200;
|
||||
@apply active:bg-gray-50 dark:active:bg-gray-800;
|
||||
|
||||
i {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.history-tags {
|
||||
@apply flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.history-tag {
|
||||
@apply px-3 py-1.5 rounded-full text-sm;
|
||||
@apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
|
||||
@apply active:bg-gray-200 dark:active:bg-gray-700;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
@apply space-y-1;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
@apply flex items-center gap-3 py-2.5;
|
||||
@apply active:bg-gray-50 dark:active:bg-gray-800;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
@apply w-5 text-center text-sm font-medium text-gray-400;
|
||||
|
||||
&.top {
|
||||
@apply text-red-500;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-word {
|
||||
@apply flex-1 text-gray-700 dark:text-gray-200;
|
||||
}
|
||||
|
||||
.hot-icon {
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user