feat: 优化标题栏交互和下载按钮

- 为非 Electron 环境添加下载桌面版按钮
- 调整标题栏按钮显示逻辑,支持 Web 和桌面端不同交互
- 新增打开下载页面的方法,增强用户引导体验
This commit is contained in:
alger
2025-03-09 19:34:05 +08:00
parent 4a66796747
commit e5e45148c3
2 changed files with 27 additions and 8 deletions

View File

@@ -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">

View File

@@ -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;