下载页面支持通过 github api 实时获取最新版本号 (#271)

(若获取失败则回退为当前硬编码的数据)

Author: rinnein

en/guide/download.md

@@ -3,8 +3,11 @@ home: hello
 ---
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { data } from '../../metadata.data.js'
+import { useLatestVersion } from '../../useLatestVersion.ts'
+
+const { latestVersion, prereleaseVersion, loading, error } = useLatestVersion()
 
 interface Package {
     os: string
@@ -132,8 +135,15 @@ const filter_os = ref('')
 const filter_arch = ref('')
 const accel_proxy = ref('')
 
+const vers = computed(() => ({
+    easytier_latest_version: (!loading.value && !error.value && latestVersion.value) ? latestVersion.value : data.easytier_latest_version,
+    easytier_pre_release_version: (!loading.value && !error.value && prereleaseVersion.value) ? prereleaseVersion.value : data.easytier_pre_release_version,
+}))
+
+const currentVersion = computed(() => vers.value[channel.value as keyof typeof vers.value])
+
 function renderUrlTmpl(url_tmpl: string): string {
-    return accel_proxy.value + url_tmpl.replace(/\{\}/g, data[channel.value])
+    return accel_proxy.value + url_tmpl.replace(/\{\}/g, currentVersion.value)
 }
 
 </script>
@@ -153,12 +163,12 @@ The command line program package includes four executables:
 
 <div>
     <select name="channel-select" id="channel-select" v-model="channel" class="filter-select">
-        <option value="easytier_latest_version"> Stable Version(v{{ data.easytier_latest_version }}) </option>
-        <option value="easytier_pre_release_version"> Pre-release Version(v{{ data.easytier_pre_release_version }}) </option>
+        <option value="easytier_latest_version"> Stable Version(v{{ vers.easytier_latest_version }}) </option>
+        <option value="easytier_pre_release_version"> Pre-release Version(v{{ vers.easytier_pre_release_version }}) </option>
     </select>
 </div>
 
-## <a :href="url + data[channel]">EasyTier v{{ data[channel] }}</a> { #latest }
+## <a :href="url + currentVersion">EasyTier v{{ currentVersion }}</a> { #latest }
 
 - GitHub Acceleration
     <div>

guide/download.md

@@ -3,8 +3,11 @@ home: hello
 ---
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { data } from '../metadata.data.js'
+import { useLatestVersion } from '../useLatestVersion.ts'
+
+const { latestVersion, prereleaseVersion, loading, error } = useLatestVersion()
 
 interface Package {
     os: string
@@ -132,8 +135,15 @@ const filter_os = ref('')
 const filter_arch = ref('')
 const accel_proxy = ref('')
 
+const vers = computed(() => ({
+    easytier_latest_version: (!loading.value && !error.value && latestVersion.value) ? latestVersion.value : data.easytier_latest_version,
+    easytier_pre_release_version: (!loading.value && !error.value && prereleaseVersion.value) ? prereleaseVersion.value : data.easytier_pre_release_version,
+}))
+
+const currentVersion = computed(() => vers.value[channel.value as keyof typeof vers.value])
+
 function renderUrlTmpl(url_tmpl: string): string {
-    return accel_proxy.value + url_tmpl.replace(/\{\}/g, data[channel.value])
+    return accel_proxy.value + url_tmpl.replace(/\{\}/g, currentVersion.value)
 }
 
 </script>
@@ -153,12 +163,12 @@ function renderUrlTmpl(url_tmpl: string): string {
 
 <div>
     <select name="channel-select" id="channel-select" v-model="channel" class="filter-select">
-        <option value="easytier_latest_version"> 稳定版(v{{ data.easytier_latest_version }}) </option>
-        <option value="easytier_pre_release_version"> 预发布版(v{{ data.easytier_pre_release_version }}) </option>
+        <option value="easytier_latest_version"> 稳定版(v{{ vers.easytier_latest_version }}) </option>
+        <option value="easytier_pre_release_version"> 预发布版(v{{ vers.easytier_pre_release_version }}) </option>
     </select>
 </div>
 
-## <a :href="url + data[channel]">EasyTier v{{ data[channel] }}</a> { #latest }
+## <a :href="url + currentVersion">EasyTier v{{ currentVersion }}</a> { #latest }
 
 - Github 加速
     <div>

useLatestVersion.ts

@@ -0,0 +1,36 @@
+import { ref, onMounted } from 'vue'
+
+export function useLatestVersion() {
+  const latestVersion = ref<string | null>(null)
+  const prereleaseVersion = ref<string | null>(null)
+  const loading = ref(true)
+  const error = ref<string | null>(null)
+
+  onMounted(async () => {
+    try {
+      const [latestRes, releasesRes] = await Promise.all([
+        fetch('https://api.github.com/repos/EasyTier/EasyTier/releases/latest'),
+        fetch('https://api.github.com/repos/EasyTier/EasyTier/releases?per_page=5')
+      ])
+
+      if (!latestRes.ok || !releasesRes.ok) {
+        throw new Error('Failed to fetch releases from GitHub API')
+      }
+
+      const latestData = await latestRes.json() as { tag_name?: string }
+      const releases = await releasesRes.json() as Array<{ tag_name?: string; prerelease?: boolean }>
+
+      latestVersion.value = latestData.tag_name ?? null
+      prereleaseVersion.value = releases.find((item) => item.prerelease)?.tag_name ?? null
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Unknown error'
+    } finally {
+      loading.value = false
+    }
+
+    if (latestVersion.value?.startsWith('v')) latestVersion.value = latestVersion.value.slice(1)
+    if (prereleaseVersion.value?.startsWith('v')) prereleaseVersion.value = prereleaseVersion.value.slice(1)
+  })
+
+  return { latestVersion, prereleaseVersion, loading, error }
+}