From 953a638f2f1a4b3b13286456c78393ed5a14e62b Mon Sep 17 00:00:00 2001
From: jiwangyihao <jwyh@jwyihao.top>
Date: Fri, 19 Sep 2025 16:58:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8B=E8=BD=BD=E9=A1=B5=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/download.vue | 361 +++++++++++++++++++++++++--------------------
 1 file changed, 200 insertions(+), 161 deletions(-)

diff --git a/pages/download.vue b/pages/download.vue
index d118029..b0f59ba 100644
--- a/pages/download.vue
+++ b/pages/download.vue
@@ -98,156 +98,189 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
 </script>
 
 <template>
-  <div class="page flex flex-col items-center relative justify-between">
-    <div
-      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>
+    <section class="flex flex-col items-center relative justify-between">
       <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"
-      ></div>
+        class="pt-27 px-8 flex flex-col justify-center flex-grow relative w-full overflow-hidden gap-4 md:gap-10"
+      >
+        <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
-        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"
-        :style="{
-          height: 'auto',
-        }"
-      />
-    </div>
-    <div class="flex gap-36 py-8">
-      <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
+          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"
+        ></div>
+
+        <Icon
+          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"
+          :style="{
+            height: 'auto',
+          }"
+        />
       </div>
-      <Icon
-        name="s:download-deco"
-        class="s-deco-secondary-900 s-bg-primary-200 scale-120 dark:s-deco-secondary-100 dark:s-bg-primary-500"
-        mode="svg"
-        :style="{
-          height: '100%',
-          width: 'auto',
-        }"
-      />
+      <div class="flex gap-16 md:gap-36 p-8 flex-row-reverse md:flex-row">
+        <div class="flex flex-col gap-4">
+          <h1 class="text-3xl font-bold">
+            使用时<br class="sm:hidden" />遇到问题？<br />
+          </h1>
+          <p class="hidden md:block text-lg leading-[2] max-w-[40.8em]">
+            敬请参阅<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>
     <Dialog
       v-model:visible="dialog"
       modal
       :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="{
         '--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="{
         mask: {
           class:
@@ -260,24 +293,28 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
       }"
     >
       <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
           name="sp:spark"
-          class="s-color-primary-50 w-20"
+          class="s-color-primary-50 w-16 sm:w-20"
           mode="svg"
           :style="{
             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
         </p>
       </div>
       <div v-if="!downloadStarted" class="flex flex-col flex-grow gap-4">
         <div class="flex flex-col gap-1">
-          <h2 class="text-3xl font-bold">下载开始前，让我们做好准备</h2>
-          <p class="text-lg">
+          <h2 class="text-xl sm:text-2xl md:text-3xl font-bold">
+            下载开始前，让我们做好准备
+          </h2>
+          <p class="text-sm sm:text-base md:text-lg">
             阅读以下安装须知，了解星火应用商店在不同发行版的安装方式。
           </p>
         </div>
@@ -320,7 +357,7 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
         </div>
         <div class="flex justify-between gap-4">
           <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"
           >
             <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
-            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"
           >
             下一步
           </button>
         </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 gap-4">
+          <div
+            class="flex gap-4 flex-col md:flex-row items-center md:items-start"
+          >
             <Icon
               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"
-              :style="{
-                width: 'auto',
-                height: '100%',
-              }"
             />
-            <h2 class="text-3xl font-bold leading-[1.5]">
-              感谢您下载<br />星火应用商店！
+            <h2
+              class="text-2xl md:text-3xl font-bold leading-[1.5] text-center md:text-start"
+            >
+              感谢您下载<br />&nbsp;&nbsp;星火应用商店！
             </h2>
           </div>
-          <p class="text-lg leading-[2]">
-            应用商店安装包下载已开始，<br />如果创建下载任务失败，请<a
-              :href="downloadUrl"
-              class="text-primary-color underline"
+          <p
+            class="text-base md:text-lg leading-loose text-center md:text-start"
+          >
+            应用商店安装包下载已开始，<br />如果创建下载任务失败，<br
+              class="md:hidden"
+            />请<a :href="downloadUrl" class="text-primary-color underline"
               >点击此处重试</a
             >。
           </p>
         </div>
         <div class="flex justify-end gap-4">
           <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"
           >
             关闭
@@ -375,7 +414,7 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {
 </template>
 
 <style scoped>
-.page {
+section {
   width: 100%;
   height: 100vh;
   scroll-snap-align: start;