feat: redesign download section with card layout and platform icons

Author: w568w

.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import Icons from 'unplugin-icons/vite'
 import nav from './nav'
 // import sidebar from './sidebar'
 // import socialLinks from './social-links'
@@ -27,6 +28,9 @@ export default defineConfig({
         }
     },
     vite: {
+        plugins: [
+            Icons({ compiler: 'vue3' })
+        ],
         server: {
             proxy: {
                 "/api": {

package.json

@@ -12,9 +12,11 @@
         "r": "vitepress serve"
     },
     "devDependencies": {
+        "@iconify-json/simple-icons": "^1.2.70",
         "autoprefixer": "^10.4.21",
         "postcss": "^8.5.3",
         "tailwindcss": "^3.4.17",
+        "unplugin-icons": "^23.0.1",
         "vitepress": "^1.6.3",
         "vue": "^3.5.13"
     },

src/views/ProjectAppView.vue

@@ -1,30 +1,38 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, type Component } from 'vue'
 import PageContainer from '../components/PageContainer.vue'
 import ProductCard from '../components/ProductCard.vue'
 import Saying from '../components/Saying.vue'
+import IconApple from '~icons/simple-icons/apple'
+import IconAndroid from '~icons/simple-icons/android'
+import IconWindows from '~icons/simple-icons/windows'
+import IconOSI from '~icons/simple-icons/opensourceinitiative'
 
 let showDownload = ref(false)
 
 const latestVersion = '1.5.0'
 const oldestVersion = '1.5.0'
 
-const downloadList = [
+const downloadList: { icons: Component[], platform: string, subtitle: string, link: string }[] = [
     {
-        platform: 'iOS / iPadOS / macOS (Apple Silicon)',
-        channel: 'AppStore',
+        icons: [IconApple],
+        platform: 'iOS / iPadOS / macOS',
+        subtitle: 'Download from App Store',
         link: 'https://apps.apple.com/cn/app/%E6%97%A6%E5%A4%95/id1568629997'
     }, {
+        icons: [IconAndroid],
         platform: 'Android',
-        channel: 'Download',
+        subtitle: 'Download from CDN',
         link: 'https://static.fduhole.com/danxi-latest.apk'
     }, {
+        icons: [IconWindows],
         platform: 'Windows',
-        channel: 'GitHub Release',
+        subtitle: 'Download from GitHub Release',
         link: 'https://github.com/DanXi-Dev/DanXi/releases/latest'
     }, {
+        icons: [IconAndroid, IconOSI],
         platform: 'Android FOSS',
-        channel: 'F-Droid',
+        subtitle: 'Download from F-Droid',
         link: 'https://f-droid.org/packages/io.github.danxi_dev.dan_xi/'
     }
 ]
@@ -76,16 +84,17 @@ const userComment = [
                         class="mx-2 mt-5 rounded-2xl bg-gray-800 text-gray-50 px-5 py-2 hover:bg-gray-500 text-lg">GitHub</button></a>
             </div>
         </div>
-        <div class="p-5" v-show="showDownload">
-            <table class="m-auto">
-                <tr>
-                    <td class="px-5 font-bold">Danta</td>
-                </tr>
-                <tr v-for="d in downloadList">
-                    <td class="px-5">{{ d.platform }}</td>
-                    <td class="px-5"><a class="font-semibold" :href="d.link">{{ d.channel }}</a></td>
-                </tr>
-            </table>
+        <div class="mt-6 flex flex-col items-center gap-3 max-w-md mx-auto" v-show="showDownload">
+            <a v-for="d in downloadList" :key="d.platform" :href="d.link"
+                class="w-full flex items-center gap-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-3.5 transition hover:shadow-md hover:border-gray-400 dark:hover:border-gray-500 no-underline group">
+                <span class="flex items-center justify-center gap-1.5 shrink-0 w-10 text-gray-600 dark:text-gray-300">
+                    <component v-for="(icon, i) in d.icons" :key="i" :is="icon" class="w-5 h-5" />
+                </span>
+                <span class="flex flex-col">
+                    <span class="text-sm font-medium text-gray-800 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition">{{ d.platform }}</span>
+                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ d.subtitle }}</span>
+                </span>
+            </a>
         </div>
     </PageContainer>