fix: Solve the download button SSR hydration mismatch issue

ATRIOR-LCL · ATRIOR-LCL · commit c4a0e557b58b · 2025-10-01T00:14:55.000+08:00
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <link rel="icon" href="/favicon_mac.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="为编程初学者而生">
     <title>Algo Bootstrap</title>
   </head>
   <body>
diff --git a/src/client/components/download-button.vue b/src/client/components/download-button.vue
@@ -13,10 +13,10 @@ import { ElMessage } from 'element-plus';
   },
 })
 export default class DownloadButton extends Vue {
-  @Prop({ type: String, default: 'windows' }) platform!: string;
-  @Prop({ type: String, default: 'x64' }) arch!: string;
+  @Prop({ type: String, required: true }) platform!: string;
+  @Prop({ type: String, required: true }) arch!: string;
   @Prop({ type: Boolean, default: false }) isHome: Boolean;
-  @Prop({ type: String, default: '1.0.0-beta.1' }) version!: string;
+  @Prop({ type: String, required: true }) version!: string;
 
   get isSupportedPlatform(): boolean {
     return this.platform === 'windows' || this.platform === 'mac';
diff --git a/src/client/components/release-item.vue b/src/client/components/release-item.vue
@@ -15,7 +15,7 @@ import { ElMessage } from 'element-plus';
 })
 export default class ReleaseItem extends Vue {
   @Prop({ type: String, required: true }) platform!: string;
-  @Prop({ type: String, default: '1.0.0-beta.1' }) version!: string;
+  @Prop({ type: String, required: true }) version!: string;
 
   get platformImage(): string {
     switch (this.platform) {
@@ -34,38 +34,39 @@ export default class ReleaseItem extends Vue {
   }
 
   get downloadLink(): string {
-    const version = this.version || '1.0.0-beta.1';
-    const downloadLink = new ReleasesConfig(version).downloadSingleSystemLink(this.platform, this.defaultArch);
+    const downloadLink = new ReleasesConfig(this.version).downloadSingleSystemLink(
+      this.platform,
+      this.defaultArch,
+    );
     return downloadLink;
   }
 
   get otherLinks(): Array<{ arch: string; name?: string; link: string }> {
-    const version = this.version || '1.0.0-beta.1';
     switch (this.platform) {
       case 'windows':
         return [
           {
             arch: 'x64',
             name: 'Windows (x64)',
-            link: new ReleasesConfig(version).downloadSingleSystemLink('windows', 'x64'),
+            link: new ReleasesConfig(this.version).downloadSingleSystemLink('windows', 'x64'),
           },
           {
             arch: 'Arm64',
             name: 'Windows (Arm64)',
-            link: new ReleasesConfig(version).downloadSingleSystemLink('windows', 'arm64'),
+            link: new ReleasesConfig(this.version).downloadSingleSystemLink('windows', 'arm64'),
           },
         ];
       case 'mac':
         return [
           {
             arch: 'Intel Chip',
             name: 'macOS (Intel Chip)',
-            link: new ReleasesConfig(version).downloadSingleSystemLink('mac', 'x64'),
+            link: new ReleasesConfig(this.version).downloadSingleSystemLink('mac', 'x64'),
           },
           {
             arch: 'Apple Silicon',
             name: 'macOS (Apple Silicon)',
-            link: new ReleasesConfig(version).downloadSingleSystemLink('mac', 'arm64'),
+            link: new ReleasesConfig(this.version).downloadSingleSystemLink('mac', 'arm64'),
           },
         ];
       default:
@@ -75,12 +76,11 @@ export default class ReleaseItem extends Vue {
 
   // SSR 安全的描述文本
   get staticAsideDesc(): string | null {
-    const version = this.version || '1.0.0-beta.1';
     switch (this.platform) {
       case 'windows':
-        return `version ${version} for x64`;
+        return `version ${this.version} for x64`;
       case 'mac':
-        return `version ${version} for Intel Chip`;
+        return `version ${this.version} for Intel Chip`;
       default:
         return null;
     }
@@ -98,15 +98,14 @@ export default class ReleaseItem extends Vue {
 
   get dynamicAsideDesc(): string | null {
     const arch = this.clientArch;
-    const version = this.version || '1.0.0-beta.1';
     switch (this.platform) {
       case 'windows':
-        return `version ${version} for ${arch == 'arm64' ? 'Arm64' : arch}`;
+        return `version ${this.version} for ${arch == 'arm64' ? 'Arm64' : arch}`;
       case 'mac':
         if (arch == 'arm64') {
-          return `version ${version} for Apple Silicon`;
+          return `version ${this.version} for Apple Silicon`;
         } else {
-          return `version ${version} for Intel Chip`;
+          return `version ${this.version} for Intel Chip`;
         }
       default:
         return null;
@@ -134,9 +133,9 @@ export default class ReleaseItem extends Vue {
     </client-only>
     <main>
       <ClientOnly>
-        <DownloadButton :platform="this.platform" :arch="this.arch" />
+        <DownloadButton :platform="this.platform" :arch="this.arch" :version="this.version" />
         <template #fallback>
-          <DownloadButton :platform="this.platform" :arch="defaultArch" />
+          <DownloadButton :platform="this.platform" :arch="defaultArch" :version="this.version" />
         </template>
       </ClientOnly>
     </main>
diff --git a/src/client/modules/home/home-display.vue b/src/client/modules/home/home-display.vue
@@ -12,11 +12,11 @@ import { DataConfig } from '@client/utils/data.config';
 })
 export default class HomeDisplay extends Vue {
   @Prop({ type: String, required: true }) readonly platform!: string;
-  @Prop({ type: String, default: 'arm64' }) readonly arch!: string;
+  @Prop({ type: String, required: true }) readonly arch!: string;
   @Prop({ type: Boolean, default: false }) readonly isMobile!: boolean;
   @Prop({ type: Boolean, default: false }) readonly isClientMounted!: boolean;
-  @Prop({ type: String, default: '' }) readonly version!: string;
-  @Prop({ type: String, default: '' }) readonly releasesTime!: string;
+  @Prop({ type: String, required: true }) readonly version!: string;
+  @Prop({ type: String, required: true }) readonly releasesTime!: string;
   isSupportedPlatform = false;
   isStartOpen = false;
 
@@ -145,7 +145,7 @@ export default class HomeDisplay extends Vue {
         <h2>一键配置现代的 C++、Python 和 VS Code 编程环境</h2>
       </header>
       <div class="content-main-subtitle">
-        <DownloadButton :platform="platform" :is-home="true" :arch="arch" />
+        <DownloadButton :platform="platform" :is-home="true" :arch="arch" :version="version" />
         <div class="start-dropdown" @mouseenter="handleStartMouseEnter" @mouseleave="handleStartMouseLeave">
           <div class="start" :href="getLinks().docs" target="_blank" @click="handleStartClick">
             <!-- <svg
diff --git a/src/client/modules/home/home.view.vue b/src/client/modules/home/home.view.vue
@@ -28,7 +28,7 @@ import { GetReleasesDTO } from '@common/modules/releases/releases.dto';
 @RenderMethod(RenderMethodKind.SSR)
 export default class Home extends Vue {
   homeState: GetReleasesDTO = {
-    version: '',
+    version: '1.0.0-beta.1', // 默认版本，避免空字符串
     releaseDate: '',
     url: '',
     releasesInfo: {} as any,
@@ -71,11 +71,14 @@ export default class Home extends Vue {
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
   }
-  created() {
+  async created() {
+    this.loadVersionData();
+  }
+
+  async loadVersionData() {
     try {
-      axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json').then((response) => {
-        this.homeState = response.data;
-      });
+      const response = await axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json?t=' + Date.now());
+      this.homeState = response.data;
     } catch (error) {
       console.error('Failed to load home view data:', error);
       this.homeState = this.homeState; // 使用默认值
diff --git a/src/client/modules/releases/releases.view.vue b/src/client/modules/releases/releases.view.vue
@@ -17,7 +17,7 @@ import { GetReleasesDTO } from '@common/modules/releases/releases.dto';
 @RenderMethod(RenderMethodKind.SSR)
 export default class Releases extends Vue {
   releasesState: GetReleasesDTO = {
-    version: '',
+    version: '1.0.0-beta.1', // 默认版本，避免空字符串
     url: '',
     releaseDate: '',
     releasesInfo: {} as any,
@@ -27,12 +27,27 @@ export default class Releases extends Vue {
     return DataConfig.GITHUB_RELEASES;
   }
 
-  async created() {
+  async asyncData() {
     try {
-      const response = await axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json');
+      const response = await axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json?t=' + Date.now());
+      return {
+        releasesState: response.data,
+      }
+    } catch (error) {
+      console.error('Failed to load release data in asyncData:', error);
+      return {
+        releasesState: this.releasesState, // 使用默认值
+      }
+    }
+  }
+
+  async mounted() {
+    // 客户端也加载数据，确保数据同步
+    try {
+      const response = await axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json?t=' + Date.now());
       this.releasesState = response.data;
     } catch (error) {
-      console.error('Failed to fetch latest release info:', error);
+      console.error('Failed to load release data in mounted:', error);
     }
   }
 }
