mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-16 07:50:50 +08:00
✨ feat: 优化标题栏交互和下载按钮
- 为非 Electron 环境添加下载桌面版按钮 - 调整标题栏按钮显示逻辑,支持 Web 和桌面端不同交互 - 新增打开下载页面的方法,增强用户引导体验
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="layout-page">
|
||||
<div id="layout-main" class="layout-main">
|
||||
<title-bar v-if="isElectron" />
|
||||
<div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
|
||||
<title-bar />
|
||||
<div class="layout-main-page">
|
||||
<!-- 侧边菜单栏 -->
|
||||
<app-menu v-if="!isMobile" class="menu" :menus="menus" />
|
||||
<div class="main">
|
||||
|
||||
@@ -2,12 +2,25 @@
|
||||
<div id="title-bar" @mousedown="drag">
|
||||
<div id="title">Alger Music</div>
|
||||
<div id="buttons">
|
||||
<div class="button" @click="minimize">
|
||||
<i class="iconfont icon-minisize"></i>
|
||||
</div>
|
||||
<div class="button" @click="close">
|
||||
<i class="iconfont icon-close"></i>
|
||||
</div>
|
||||
<n-button
|
||||
v-if="!isElectron"
|
||||
type="primary"
|
||||
size="small"
|
||||
text
|
||||
title="下载应用"
|
||||
@click="openDownloadPage"
|
||||
>
|
||||
<i class="ri-download-line"></i>
|
||||
下载桌面版
|
||||
</n-button>
|
||||
<template v-if="isElectron">
|
||||
<div class="button" @click="minimize">
|
||||
<i class="iconfont icon-minisize"></i>
|
||||
</div>
|
||||
<div class="button" @click="close">
|
||||
<i class="iconfont icon-close"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,6 +65,12 @@ const store = useStore();
|
||||
const showCloseModal = ref(false);
|
||||
const rememberChoice = ref(false);
|
||||
|
||||
const openDownloadPage = () => {
|
||||
if (!isElectron) {
|
||||
window.open('http://donate.alger.fun/download', '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
const minimize = () => {
|
||||
if (!isElectron) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user