mirror of
https://github.com/atdunbg/Nekosonic-Music.git
synced 2026-06-22 00:58:51 +08:00
Atdunbg
c275461015
新功能: - 亮色主题：新增浅色外观模式，7种主题色各有对应亮色变体 - 封面主色背景：漫游抽屉自动提取封面主色，PlayerBar跟随继承 - 发现页重做：多类型搜索(歌曲/歌手/专辑)+搜索建议+搜索历史 - 漫游页重做：进入即播放，布局改为封面+歌名+播放/下一首/减少推荐 - 减少推荐：FM模式下可标记不推荐歌曲或歌手 - 列表风格统一：播放指示器跳动动画+hover播放图标+图标统一使用Lucide 修复: - 专辑页艺术家过多时窗口缩小竖排，改为自动换行 - FM播放时退出登录后首页仍可点击下一首 - 本地音乐播放时缓冲进度条未重置 - 亮色主题下多处文字不可见 - 退出FM模式时状态未正确清理 - 暗色模式下关闭抽屉时PlayerBar闪烁亮色(改用opacity过渡) - player.ts tickInterval双变量状态不同步，统一为clearTick/setTick 变更: - 移除播放列表按钮数字角标 - 主页卡片标题固定白色不随主题变化 - 全项目空catch块格式统一 - 清理冗余注释和代码
89 lines
3.1 KiB
Vue
89 lines
3.1 KiB
Vue
<template>
|
|
<Transition name="fade">
|
|
<div v-if="visible" class="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="!downloading && handleIgnore()">
|
|
<div class="bg-surface border border-line rounded-2xl shadow-2xl w-[440px] max-h-[80vh] flex flex-col select-auto">
|
|
<div class="p-6 pb-4">
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<div class="w-10 h-10 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0">
|
|
<IconDownload class="w-5 h-5 text-accent-text" />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-content">发现新版本</h2>
|
|
<p class="text-xs text-content-3 mt-0.5">
|
|
v{{ info.currentVersion }} → <span class="text-accent-text font-medium">v{{ info.version }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p v-if="info.date" class="text-xs text-content-3 mt-2 ml-[52px]">{{ formatDate(info.date) }}</p>
|
|
</div>
|
|
|
|
<div v-if="info.body" class="px-6 pb-4 flex-1 overflow-y-auto max-h-60 ml-[52px]">
|
|
<div class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ info.body }}</div>
|
|
</div>
|
|
<div v-else class="px-6 pb-4 ml-[52px]">
|
|
<p class="text-sm text-content-3">暂无更新日志</p>
|
|
</div>
|
|
|
|
<div v-if="downloading" class="px-6 pb-2">
|
|
<div class="w-full bg-subtle rounded-full h-2 overflow-hidden">
|
|
<div class="h-full bg-accent rounded-full transition-all duration-300" :style="{ width: downloadProgress + '%' }"></div>
|
|
</div>
|
|
<p class="text-xs text-content-3 mt-1 text-center">正在下载更新 {{ downloadProgress }}%</p>
|
|
</div>
|
|
|
|
<div class="p-4 border-t border-line flex gap-3">
|
|
<button
|
|
@click="handleIgnore"
|
|
:disabled="downloading"
|
|
class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition disabled:opacity-50"
|
|
>
|
|
忽略此版本
|
|
</button>
|
|
<button
|
|
@click="handleUpdate"
|
|
:disabled="downloading"
|
|
class="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition disabled:opacity-50"
|
|
>
|
|
{{ downloading ? `下载中 ${downloadProgress}%` : '立即更新' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UpdateInfo } from '../composables/useUpdater'
|
|
import IconDownload from '~icons/lucide/download'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
info: UpdateInfo & { currentVersion: string }
|
|
downloading: boolean
|
|
downloadProgress: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
update: []
|
|
ignore: []
|
|
}>()
|
|
|
|
function handleUpdate() {
|
|
emit('update')
|
|
}
|
|
|
|
function handleIgnore() {
|
|
if (props.downloading) return
|
|
emit('ignore')
|
|
}
|
|
|
|
function formatDate(dateStr: string) {
|
|
try {
|
|
const d = new Date(dateStr)
|
|
return d.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
|
|
} catch {
|
|
return dateStr
|
|
}
|
|
}
|
|
</script>
|