feat: 完善网页版 安装应用功能

This commit is contained in:
alger
2025-01-01 22:42:25 +08:00
parent 8dab799939
commit 38a9d6ed31
4 changed files with 71 additions and 31 deletions

View File

@@ -49,7 +49,8 @@
<script setup> <script setup>
import { NButton, NImage, NPopover } from 'naive-ui'; import { NButton, NImage, NPopover } from 'naive-ui';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
const message = useMessage(); const message = useMessage();
const copyQQ = () => { const copyQQ = () => {
navigator.clipboard.writeText('789288579'); navigator.clipboard.writeText('789288579');
@@ -59,11 +60,13 @@ const copyQQ = () => {
defineProps({ defineProps({
alipayQR: { alipayQR: {
type: String, type: String,
required: true required: true,
default: alipay
}, },
wechatQR: { wechatQR: {
type: String, type: String,
required: true required: true,
default: wechat
} }
}); });
</script> </script>

View File

@@ -39,13 +39,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { isElectron, isMobile } from '@/utils'; import { isElectron, isMobile } from '@/utils';
import config from '../../../../package.json'; import config from '../../../../package.json';
import { getLatestReleaseInfo } from '@/utils/update';
const showModal = ref(false); const showModal = ref(false);
const noPrompt = ref(false); const noPrompt = ref(false);
const releaseInfo = ref<any>(null);
const closeModal = () => { const closeModal = () => {
showModal.value = false; showModal.value = false;
@@ -54,7 +54,7 @@ const closeModal = () => {
} }
}; };
onMounted(() => { onMounted(async () => {
// 如果是 electron 环境,不显示安装提示 // 如果是 electron 环境,不显示安装提示
if (isElectron || isMobile.value) { if (isElectron || isMobile.value) {
return; return;
@@ -65,33 +65,59 @@ onMounted(() => {
if (isDismissed) { if (isDismissed) {
return; return;
} }
// 获取最新版本信息
releaseInfo.value = await getLatestReleaseInfo();
showModal.value = true; showModal.value = true;
}); });
const handleInstall = async (): Promise<void> => { const handleInstall = async (): Promise<void> => {
const assets = releaseInfo.value?.assets || [];
const { userAgent } = navigator; const { userAgent } = navigator;
console.log('userAgent', userAgent); const isMac = userAgent.toLowerCase().includes('mac');
const isMac: boolean = userAgent.includes('Mac'); const isWindows = userAgent.toLowerCase().includes('win');
const isWindows: boolean = userAgent.includes('Win'); const isLinux = userAgent.toLowerCase().includes('linux');
const isARM: boolean = const isX64 = userAgent.includes('x86_64') ||
userAgent.includes('ARM') || userAgent.includes('arm') || userAgent.includes('OS X'); userAgent.includes('Win64') ||
const isX64: boolean = userAgent.includes('WOW64');
userAgent.includes('x86_64') || userAgent.includes('Win64') || userAgent.includes('WOW64');
const isX86: boolean =
!isX64 &&
(userAgent.includes('i686') || userAgent.includes('i386') || userAgent.includes('Win32'));
const getDownloadUrl = (os: string, arch: string): string => { let downloadUrl = '';
const version = config.version as string;
const setup = os !== 'mac' ? 'Setup_' : '';
return `https://gh.llkk.cc/https://github.com/algerkong/AlgerMusicPlayer/releases/download/${version}/AlgerMusic_${version}_${setup}${arch}.${os === 'mac' ? 'dmg' : 'exe'}`;
};
const osType: string | null = isMac ? 'mac' : isWindows ? 'windows' : null;
const archType: string | null = isARM ? 'arm64' : isX64 ? 'x64' : isX86 ? 'x86' : null;
const downloadUrl: string | null = osType && archType ? getDownloadUrl(osType, archType) : null; // 根据平台和架构选择对应的安装包
if (isMac) {
// macOS
const macAsset = assets.find(asset =>
asset.name.includes('mac')
);
downloadUrl = macAsset?.browser_download_url || '';
} else if (isWindows) {
// Windows
let winAsset = assets.find(asset =>
asset.name.includes('win') &&
(isX64 ? asset.name.includes('x64') : asset.name.includes('ia32'))
);
if(!winAsset){
winAsset = assets.find(asset =>
asset.name.includes('win.exe')
);
}
downloadUrl = winAsset?.browser_download_url || '';
} else if (isLinux) {
// Linux
const linuxAsset = assets.find(asset =>
(asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
asset.name.includes('x64')
);
downloadUrl = linuxAsset?.browser_download_url || '';
}
window.open(downloadUrl || 'https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank'); if (downloadUrl) {
window.open(`https://ghproxy.cn/${downloadUrl}`, '_blank');
} else {
// 如果没有找到对应的安装包,跳转到 release 页面
window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
}
closeModal();
}; };
</script> </script>

View File

@@ -1,13 +1,17 @@
import axios, { InternalAxiosRequestConfig } from 'axios'; import axios, { InternalAxiosRequestConfig } from 'axios';
const setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set') let setData: any = null;
if (window.electron) {
setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
}
// 扩展请求配置接口 // 扩展请求配置接口
interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig { interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
retryCount?: number; retryCount?: number;
} }
const baseURL = window.electron ? `http://127.0.0.1:${setData.musicApiPort}` : import.meta.env.VITE_API; const baseURL = window.electron ? `http://127.0.0.1:${setData?.musicApiPort}` : import.meta.env.VITE_API;
const request = axios.create({ const request = axios.create({
baseURL, baseURL,

View File

@@ -89,12 +89,18 @@
@click="openAuthor" @click="openAuthor"
> >
<div> <div>
<div class="set-item-title">作者</div> <Coffee>
<div class="set-item-content">algerkong github</div> <div>
<div class="set-item-title">作者</div>
<div class="set-item-content">algerkong 点个star🌟</div>
</div>
</Coffee>
</div>
<div>
<n-button type="primary" @click="openAuthor">前往github</n-button>
</div> </div>
<div>{{ setData.author }}</div>
</div> </div>
<div class="set-item"> <div class="set-item" v-if="isElectron">
<div> <div>
<div class="set-item-title">重启</div> <div class="set-item-title">重启</div>
<div class="set-item-content">重启应用</div> <div class="set-item-content">重启应用</div>
@@ -114,6 +120,7 @@ import { isElectron } from '@/utils';
import { checkUpdate, UpdateResult } from '@/utils/update'; import { checkUpdate, UpdateResult } from '@/utils/update';
import config from '../../../../package.json'; import config from '../../../../package.json';
import PlayBottom from '@/components/common/PlayBottom.vue'; import PlayBottom from '@/components/common/PlayBottom.vue';
import Coffee from '@/components/Coffee.vue';
const store = useStore(); const store = useStore();
const checking = ref(false); const checking = ref(false);