spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2025-12-18 13:21:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 下载页响应式设计

Browse Source
This commit is contained in:
jiwangyihao
2025-09-19 16:58:26 +08:00
parent 0066297c52
commit 953a638f2f
1 changed files with 200 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
pages/download.vue
View File

@@ -98,156 +98,189 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
</script> </script>
<template> <template>
<div class="page flex flex-col items-center relative justify-between"> <div>
<div <section class="flex flex-col items-center relative justify-between">
class="pt-27 flex flex-col justify-center flex-grow relative w-full overflow-hidden gap-10"
>
<div class="flex flex-col">
<h1 class="text-center text-5xl font-bold text-primary-color">
下载星火应用商店
</h1>
<p class="text-center text-lg leading-[2]">
基于 DTK 框架构建星火应用商店客户端，极小安装包体积，让 Linux
生态触手可及。
</p>
</div>
<div class="flex justify-center gap-6">
<div class="flex flex-col gap-2">
<p class="text-1.8xl font-bold">
在这里选择计算机架构 <i class="pi pi-question-circle"></i>
</p>
<Select
v-model="selectedArch"
:options="archList"
option-label="name"
option-value="value"
class="min-w-72 border-2! s-deco-primary-color s-bg-primary-200 s-bg-2-primary-400 s-bg-3-secondary-600 dark:s-bg-primary-900 dark:s-bg-2-secondary-700 dark:s-bg-3-secondary-500"
:style="{
'--p-select-border-radius': 'calc(3 * var(--spacing))',
'--p-select-border-color': 'var(--s-bg-2)',
'--p-select-hover-border-color': 'var(--s-bg-3)',
'--p-select-background': 'var(--s-bg)',
'--p-select-color': 'var(--s-deco)',
'--p-select-dropdown-color': 'var(--s-deco)',
}"
:pt="{
overlay: {
style: {
transform: 'translateY(calc(2 * var(--spacing)))',
'--p-select-overlay-border-radius':
'calc(3 * var(--spacing))',
'--p-select-overlay-border-color': 'transparent',
'--p-select-option-border-radius': 'calc(2 * var(--spacing))',
'--p-select-option-selected-background': 'transparent',
},
},
}"
/>
</div>
<button
class="relative items-start flex flex-col py-2 pl-4 pr-26 text-2xl font-bold text-white rounded-2xl overflow-hidden from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600"
@click="dialog = true"
>
<p class="translate-y-0.5">下载最新版本</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"
mode="svg"
:style="{
height: 'auto',
}"
/>
</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" />
<div class="flex flex-col items-start">
<p class="text-xl text-primary-color z-[0]">下载终端版</p>
<p class="text-sm text-primary-color opacity-50">
全平台支持 仅包含基本功能
</p>
</div>
</a>
</div>
<div class="flex flex-col items-center justify-center gap-2">
<div class="flex gap-8 font-bold text-lg">
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://gitee.com/spark-store-project/spark-store/releases"
>查看更新日志</a
>
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://gitee.com/spark-store-project/spark-store"
>访问 Gitee 源码仓库</a
>
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://github.com/spark-store-project/spark-store"
>访问 GitHub 源码仓库</a
>
</div>
<p class="opacity-60">
星火应用商店遵循 GNU GPLv3 协议开放源代码，<a
href="https://gitee.com/spark-store-project/spark-store/blob/dev/LICENSE"
class="text-primary-color underline"
>点此阅读版权声明</a
>
</p>
</div>
<div <div
class="absolute w-[500vw] h-[500vw] rounded-full bottom-0 left-1/2 transform -translate-x-1/2 z-[-2] bg-primary-100 dark:opacity-10 dark:bg-primary-500" class="pt-27 px-8 flex flex-col justify-center flex-grow relative w-full overflow-hidden gap-4 md:gap-10"
></div> >
<div class="flex flex-col gap-4 md:gap-0">
<h1
class="md:text-center text-4xl md:text-5xl font-bold text-primary-color"
>
下载<br class="sm:hidden" />星火应用商店
</h1>
<p class="md:text-center md:text-lg md:leading-loose">
基于 DTK 框架构建星火应用商店客户端，极小安装包体积，让 Linux
生态触手可及。
<span class="md:hidden">
<br />我们推荐您在 Linux 计算机上访问此页面，下载安装更便捷。
</span>
</p>
</div>
<div class="flex justify-center gap-6 flex-col md:flex-row">
<div class="flex flex-col gap-2">
<p class="font-bold">
在这里选择计算机架构 <i class="pi pi-question-circle"></i>
</p>
<Select
v-model="selectedArch"
:options="archList"
option-label="name"
option-value="value"
class="lg:min-w-72 border-2! s-deco-primary-color s-bg-primary-200 s-bg-2-primary-400 s-bg-3-secondary-600 dark:s-bg-primary-900 dark:s-bg-2-secondary-700 dark:s-bg-3-secondary-500"
:style="{
'--p-select-border-radius': 'calc(3 * var(--spacing))',
'--p-select-border-color': 'var(--s-bg-2)',
'--p-select-hover-border-color': 'var(--s-bg-3)',
'--p-select-background': 'var(--s-bg)',
'--p-select-color': 'var(--s-deco)',
'--p-select-dropdown-color': 'var(--s-deco)',
}"
:pt="{
overlay: {
style: {
transform: 'translateY(calc(2 * var(--spacing)))',
'--p-select-overlay-border-radius':
'calc(3 * var(--spacing))',
'--p-select-overlay-border-color': 'transparent',
'--p-select-option-border-radius':
'calc(2 * var(--spacing))',
'--p-select-option-selected-background': 'transparent',
},
},
}"
/>
</div>
<div class="flex gap-6 grow-1 lg:grow-0">
<button
class="relative items-start flex flex-col justify-center py-2 pl-4 pr-4 lg:pr-26 grow-1 lg:grow-0 text-xl lg:text-2xl font-bold text-white rounded-2xl overflow-hidden from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600"
@click="dialog = true"
>
<p class="translate-y-0.5">下载最新版本</p>
<p class="text-base lg: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"
mode="svg"
:style="{
height: 'auto',
}"
/>
</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-5xl lg:text-6xl"
/>
<div class="flex flex-col items-start">
<p
class="text-sm sm:text-lg lg:text-xl writing-mode-vertical-rl sm:writing-mode-horizontal-tb text-primary-color z-[0]"
>
<span class="hidden sm:inline">下载</span>终端版
</p>
<p
class="hidden sm:block text-xs lg:text-sm text-primary-color opacity-50"
>
全平台支持 仅包含基本功能
</p>
</div>
</a>
</div>
</div>
<div class="flex flex-col items-center justify-center gap-2">
<div
class="flex gap-4 sm:gap-8 font-bold text-sm sm:text-base md:text-lg"
>
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://gitee.com/spark-store-project/spark-store/releases"
><span class="hidden sm:inline">查看</span>更新日志</a
>
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://gitee.com/spark-store-project/spark-store"
><span class="hidden sm:inline">访问 </span>Gitee 源码仓库</a
>
<a
class="border-b-2 border-primary-500 hover:border-primary-color"
href="https://github.com/spark-store-project/spark-store"
><span class="hidden sm:inline">访问 </span>GitHub 源码仓库</a
>
</div>
<p class="opacity-60 text-sm md:text-base text-center">
星火应用商店遵循 GNU GPLv3 协议开放<br
class="sm:hidden"
/>源代码，<a
href="https://gitee.com/spark-store-project/spark-store/blob/dev/LICENSE"
class="text-primary-color underline"
>点此阅读版权声明</a
>
</p>
</div>
<Icon <div
name="sp:spark" class="absolute w-[500vw] h-[500vw] rounded-full bottom-0 left-1/2 transform -translate-x-1/2 z-[-2] bg-primary-100 dark:opacity-10 dark:bg-primary-500"
class="absolute top-0 left-0 z-[-1] s-color-primary-200 w-120 -translate-x-2/7 -translate-y-1/4 dark:opacity-10 dark:s-color-primary-500" ></div>
mode="svg"
:style="{ <Icon
height: 'auto', name="sp:spark"
}" class="absolute top-0 left-0 z-[-1] s-color-primary-200 w-120 -translate-x-2/7 -translate-y-1/4 dark:opacity-10 dark:s-color-primary-500"
/> mode="svg"
</div> :style="{
<div class="flex gap-36 py-8"> height: 'auto',
<div class="flex flex-col gap-4"> }"
<h1 class="text-3xl font-bold">使⽤时遇到问题？<br /></h1> />
<p class="text-lg leading-[2] max-w-[40.8em]">
敬请参阅<NuxtLink to="/faq" class="text-primary-color underline"
>星火应用商店 FAQ 与支持指南</NuxtLink
>。如果您有其他问题或建议，可以通过论坛、交流群或电子邮件等方式与我们取得联系；此外，也可以在源码仓库
Issue 页面上提交反馈。
</p>
</div> </div>
<Icon <div class="flex gap-16 md:gap-36 p-8 flex-row-reverse md:flex-row">
name="s:download-deco" <div class="flex flex-col gap-4">
class="s-deco-secondary-900 s-bg-primary-200 scale-120 dark:s-deco-secondary-100 dark:s-bg-primary-500" <h1 class="text-3xl font-bold">
mode="svg" 使用时<br class="sm:hidden" />遇到问题？<br />
:style="{ </h1>
height: '100%', <p class="hidden md:block text-lg leading-[2] max-w-[40.8em]">
width: 'auto', 敬请参阅<NuxtLink to="/faq" class="text-primary-color underline"
}" >星火应用商店 FAQ 与支持指南</NuxtLink
/> >。如果您有其他问题或建议，可以通过论坛、交流群或电子邮件等方式与我们取得联系；此外，也可以在源码仓库
Issue 页面上提交反馈。
</p>
</div>
<Icon
name="s:download-deco"
class="scale-120 sm:scale-200 md:scale-120 s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
mode="svg"
:style="{
height: '100%',
width: 'auto',
}"
/>
</div>
</section>
<div class="md:hidden px-8 pb-8">
<p class="text-base sm:text-lg leading-[2] max-w-[40.8em]">
敬请参阅<NuxtLink to="/faq" class="text-primary-color underline"
>星火应用商店 FAQ 与支持指南</NuxtLink
>。<br />如果您有其他问题或建议，可以通过论坛、交流群或电子邮件等方式与我们取得联系；此外，也可以在源码仓库
Issue 页面上提交反馈。
</p>
</div> </div>
<Dialog <Dialog
v-model:visible="dialog" v-model:visible="dialog"
modal modal
:show-header="false" :show-header="false"
class="w-210 h-128 rounded-3xl!" class="max-w-7/8 w-210 h-7/8 md:h-128 rounded-3xl!"
:style="{ :style="{
'--p-dialog-border-color': 'transparent', '--p-dialog-border-color': 'transparent',
}" }"
content-class="flex p-5! w-full h-full gap-4 overflow-hidden!" content-class="flex flex-col md:flex-row p-5! w-full h-full gap-4 overflow-hidden!"
:pt="{ :pt="{
mask: { mask: {
class: class:
@@ -260,24 +293,28 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
}" }"
> >
<div <div
class="p-4 rounded-xl flex flex-col justify-between from-primary-400 to-primary-500 bg-linear-to-b dark:from-primary-500 dark:to-primary-600" class="p-2 md:p-4 rounded-xl flex md:flex-col items-end md:items-start justify-between from-primary-400 to-primary-500 bg-linear-to-b dark:from-primary-500 dark:to-primary-600"
> >
<Icon <Icon
name="sp:spark" name="sp:spark"
class="s-color-primary-50 w-20" class="s-color-primary-50 w-16 sm:w-20"
mode="svg" mode="svg"
:style="{ :style="{
height: 'auto', height: 'auto',
}" }"
/> />
<p class="font-(family-name:--s-title-font) text-5xl text-primary-100"> <p
class="font-(family-name:--s-title-font) text-3xl sm:text-4xl md:text-5xl text-primary-100"
>
SPARK SPARK
</p> </p>
</div> </div>
<div v-if="!downloadStarted" class="flex flex-col flex-grow gap-4"> <div v-if="!downloadStarted" class="flex flex-col flex-grow gap-4">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h2 class="text-3xl font-bold">下载开始前，让我们做好准备</h2> <h2 class="text-xl sm:text-2xl md:text-3xl font-bold">
<p class="text-lg"> 下载开始前，让我们做好准备
</h2>
<p class="text-sm sm:text-base md:text-lg">
阅读以下安装须知，了解星火应用商店在不同发行版的安装方式。 阅读以下安装须知，了解星火应用商店在不同发行版的安装方式。
</p> </p>
</div> </div>
@@ -320,7 +357,7 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
</div> </div>
<div class="flex justify-between gap-4"> <div class="flex justify-between gap-4">
<button <button
class="relative py-2 px-9 text-lg font-bold text-primary-color rounded-xl 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:z-[0] before:w-full before:h-full before:border-2 before:border-[transparent] before:rounded-xl before:bg-white before:bg-clip-content before:opacity-80 dark:before:bg-secondary-950 dark:before:opacity-90" class="grow-1 md:grow-0 relative py-2 px-9 text-lg font-bold text-primary-color rounded-xl 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:z-[0] before:w-full before:h-full before:border-2 before:border-[transparent] before:rounded-xl before:bg-white before:bg-clip-content before:opacity-80 dark:before:bg-secondary-950 dark:before:opacity-90"
@click="dialog = false" @click="dialog = false"
> >
<span class="relative z-[0] text-primary-500 dark:text-primary-400" <span class="relative z-[0] text-primary-500 dark:text-primary-400"
@@ -329,40 +366,42 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
</button> </button>
<button <button
class="py-2 px-9 text-lg font-bold text-white rounded-xl from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600" class="grow-1 md:grow-0 py-2 px-9 text-lg font-bold text-white rounded-xl from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600"
@click="startDownload" @click="startDownload"
> >
下一步 下一步
</button> </button>
</div> </div>
</div> </div>
<div v-else class="flex flex-col flex-grow gap-4 pl-4"> <div v-else class="flex flex-col flex-grow gap-4 md:pl-4">
<div class="flex flex-col flex-grow justify-center gap-4"> <div class="flex flex-col flex-grow justify-center gap-4">
<div class="flex gap-4"> <div
class="flex gap-4 flex-col md:flex-row items-center md:items-start"
>
<Icon <Icon
name="line-md:download-loop" name="line-md:download-loop"
class="text-white p-4 rounded-full from-primary-500 to-primary-600 bg-linear-to-r dark:from-primary-400 dark:to-primary-500" class="w-24 h-24 md:w-auto md:h-full text-white p-4 rounded-full from-primary-500 to-primary-600 bg-linear-to-r dark:from-primary-400 dark:to-primary-500"
mode="svg" mode="svg"
:style="{
width: 'auto',
height: '100%',
}"
/> />
<h2 class="text-3xl font-bold leading-[1.5]"> <h2
感谢您下载<br />星火应用商店！ class="text-2xl md:text-3xl font-bold leading-[1.5] text-center md:text-start"
>
感谢您下载<br />&nbsp;&nbsp;星火应用商店！
</h2> </h2>
</div> </div>
<p class="text-lg leading-[2]"> <p
应用商店安装包下载已开始，<br />如果创建下载任务失败，请<a class="text-base md:text-lg leading-loose text-center md:text-start"
:href="downloadUrl" >
class="text-primary-color underline" 应用商店安装包下载已开始，<br />如果创建下载任务失败，<br
class="md:hidden"
/>请<a :href="downloadUrl" class="text-primary-color underline"
>点击此处重试</a >点击此处重试</a
>。 >。
</p> </p>
</div> </div>
<div class="flex justify-end gap-4"> <div class="flex justify-end gap-4">
<button <button
class="py-2 px-9 text-lg font-bold text-white rounded-xl from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600" class="w-full md:w-auto py-2 px-9 text-lg font-bold text-white rounded-xl from-primary-400 to-primary-500 bg-linear-to-r dark:from-primary-500 dark:to-primary-600"
@click="dialog = false" @click="dialog = false"
> >
关闭 关闭
@@ -375,7 +414,7 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
</template> </template>
<style scoped> <style scoped>
.page { section {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
scroll-snap-align: start; scroll-snap-align: start;