feat: 添加最新版本信息和下载链接逻辑

This commit is contained in:
2025-06-06 00:28:27 +08:00
parent cfb95eca4e
commit 134e993274
3 changed files with 116 additions and 11 deletions

17
app.vue
View File

@@ -162,6 +162,23 @@ onMounted(() => {
{ immediate: true }
);
});
// 数据获取
export interface Release {
assets: {
name: string;
browser_download_url: string;
}[];
tag_name: string;
created_at: string;
body: string;
}
const { data: latestRelease }: { data: Ref<Release> } = await useFetch(
"https://gitee.com/api/v5/repos/spark-store-project/spark-store/releases/latest"
);
provide("latestRelease", latestRelease);
</script>
<template>

View File

@@ -1,6 +1,10 @@
<script setup lang="ts">
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import type { Release } from "~/app.vue";
import { useToast } from "primevue/usetoast";
const toast = useToast();
const selectedArch = ref("amd64");
const archList = [
@@ -37,12 +41,45 @@ const faqContent = ref(
const startDownload = () => {
downloadStarted.value = true;
// 模拟下载过程
// setTimeout(() => {
// dialog.value = false;
// // 在这里可以添加实际的下载逻辑
// // 比如调用 API 创建下载任务等
// }, 2000);
if (selectedArch.value === "loong64") {
toast.add({
severity: "error",
summary: "请前往 Gitee 手动下载",
detail:
"loong64 架构的安装包不同发行版有所不同,请前往 Gitee 手动下载。\n5s 后自动跳转。",
life: 5000,
});
setTimeout(() => {
window.open(
"https://gitee.com/spark-store-project/spark-store/releases/latest",
"_blank"
);
}, 5000);
} else {
// 创建下载任务
const downloadLink = downloadUrl.value;
if (downloadLink) {
const a = document.createElement("a");
a.href = downloadLink;
a.download = `spark-store-${selectedArch.value}.deb`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
toast.add({
severity: "success",
summary: "下载任务已创建",
detail: `正在下载适用于 ${selectedArch.value} 架构的星火应用商店安装包,请在浏览器下载管理器中查看进度。`,
life: 5000,
});
} else {
toast.add({
severity: "error",
summary: "下载链接错误",
detail: "无法找到适合您架构的下载链接,请稍后再试。",
life: 5000,
});
}
}
};
watchEffect(() => {
@@ -51,6 +88,29 @@ watchEffect(() => {
downloadStarted.value = false;
}
});
const latestRelease = inject<Ref<Release>>("latestRelease");
const downloadUrl = computed(() => {
if (selectedArch.value === "loong64") {
return "https://gitee.com/spark-store-project/spark-store/releases/latest";
}
for (const asset of latestRelease?.value.assets || []) {
if (asset.name.includes(selectedArch.value)) {
return asset.browser_download_url;
}
}
return "";
});
const consoleDownloadUrl = computed(() => {
for (const asset of latestRelease?.value.assets || []) {
if (asset.name.includes("all")) {
return asset.browser_download_url;
}
}
return "";
});
</script>
<template>
@@ -105,7 +165,14 @@ watchEffect(() => {
@click="dialog = true"
>
<p class="translate-y-0.5">下载最新版本</p>
<p class="text-lg opacity-75">V4.5.2 | 2025-03-15</p>
<p class="text-lg opacity-75">
V{{ latestRelease?.tag_name }} |
{{
new Date(latestRelease!.created_at)
.toLocaleDateString()
.replace(/\//g, "-")
}}
</p>
<Icon
name="sp:spark"
class="absolute top-0 right-0 s-color-primary-200 w-20 translate-x-1/6 -translate-y-2/9 opacity-60"
@@ -115,7 +182,8 @@ watchEffect(() => {
}"
/>
</button>
<button
<a
:href="consoleDownloadUrl"
class="relative items-center gap-2 flex py-2 px-4 font-bold rounded-2xl overflow-hidden from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600 before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border-5 before:border-[transparent] before:rounded-2xl before:bg-white before:bg-clip-content before:opacity-50 dark:before:bg-secondary-950 dark:before:opacity-80"
>
<Icon name="proicons:terminal" class="text-primary-500 text-6xl" />
@@ -125,7 +193,7 @@ watchEffect(() => {
全平台支持 仅包含基本功能
</p>
</div>
</button>
</a>
</div>
<div class="flex flex-col items-center justify-center gap-2">
<div class="flex gap-8 font-bold text-lg">
@@ -229,6 +297,9 @@ watchEffect(() => {
阅读以下安装须知了解星火应用商店在不同发行版的安装方式
</p>
</div>
<Message v-if="selectedArch === 'loong64'" severity="error">
loong64 架构的安装包不同发行版有所不同请前往 Gitee 手动下载
</Message>
<div class="flex-grow bg-surface-100 rounded-xl h-[0] dark:bg-black">
<ScrollPanel
ref="scrollPanel"
@@ -249,6 +320,18 @@ watchEffect(() => {
:theme="sDark ? 'dark' : 'light'"
preview-theme="github"
/>
<a
href="https://gitee.com/spark-store-project/spark-store/releases/latest"
class="font-bold text-xl text-primary-color hover:underline pl-4"
target="_blank"
>
V{{ latestRelease?.tag_name }}
</a>
<MdPreview
:model-value="latestRelease?.body || ''"
:theme="sDark ? 'dark' : 'light'"
preview-theme="github"
/>
</ScrollPanel>
</div>
<div class="flex justify-between gap-4">
@@ -287,7 +370,7 @@ watchEffect(() => {
</div>
<p class="text-lg leading-[2]">
应用商店安装包下载已开始<br />如果创建下载任务失败<a
href="#"
:href="downloadUrl"
class="text-primary-color underline"
>点击此处重试</a
>
@@ -303,6 +386,7 @@ watchEffect(() => {
</div>
</div>
</Dialog>
<Toast />
</div>
</template>

View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { Release } from "~/app.vue";
const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel");
const sProgress = ref(0);
@@ -62,6 +64,8 @@ onMounted(() => {
sProgress.value = scrollTop / clientHeight;
});
});
const latestRelease = inject<Ref<Release>>("latestRelease");
</script>
<template>
@@ -123,7 +127,7 @@ onMounted(() => {
<div class="flex flex-col items-start justify-between">
<span
class="font-(family-name:--s-title-font) px-4 py-0.5 text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
>V4.5.2</span
>V{{ latestRelease?.tag_name }}</span
>
<h2
class="text-lg font-(family-name:--s-title-font) text-primary-500"