fix: fix mobile devices bugs

ATRIOR-LCL · ATRIOR-LCL · commit c94f6fa0fd3e · 2025-10-01T01:21:37.000+08:00
diff --git a/src/client/components/download-button.vue b/src/client/components/download-button.vue
@@ -8,25 +8,42 @@ import { ReleasesConfig } from '@client/utils/data.config';
 import { ElMessage } from 'element-plus';
 
 @Options({
-  components: {
-
-  },
+  components: {},
 })
 export default class DownloadButton extends Vue {
   @Prop({ type: String, required: true }) platform!: string;
   @Prop({ type: String, required: true }) arch!: string;
   @Prop({ type: Boolean, default: false }) isHome: Boolean;
   @Prop({ type: String, required: true }) version!: string;
 
+  // 检测是否为移动设备
+  get isMobileDevice(): boolean {
+    if (typeof navigator === 'undefined') return false;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
+
   get isSupportedPlatform(): boolean {
+    // 只有在主页时才考虑移动设备检测
+    if (this.isHome && this.isMobileDevice) {
+      return false;
+    }
     return this.platform === 'windows' || this.platform === 'mac';
   }
 
   get isUnsupportedPlatform(): boolean {
+    // 只有在主页时才考虑移动设备，releases页面按正常平台逻辑
+    if (this.isHome && this.isMobileDevice) {
+      return true;
+    }
     return this.platform !== 'windows' && this.platform !== 'mac';
   }
 
   get platformName(): string {
+    // 只有在主页时才显示移动设备名称
+    if (this.isHome && this.isMobileDevice) {
+      return '移动设备';
+    }
+
     // 确保服务端和客户端返回一致的平台名称
     switch (this.platform) {
       case 'mac':
@@ -39,6 +56,11 @@ export default class DownloadButton extends Vue {
   }
 
   get platformImage(): string {
+    // 只有在主页时，移动设备才显示通用下载图标
+    if (this.isHome && this.isMobileDevice) {
+      return download;
+    }
+
     switch (this.platform) {
       case 'windows':
         return windows;
@@ -50,9 +72,13 @@ export default class DownloadButton extends Vue {
   }
 
   private handleDownload() {
+    if (this.isMobileDevice) {
+      this.$router.push({ name: 'Releases' });
+      return;
+    }
     const releasesConfig = new ReleasesConfig(this.version);
     let downloadLink = releasesConfig.downloadSingleSystemLink(this.platform, this.arch);
-    ElMessage('下载开始，请稍后...');
+    ElMessage('下载开始，请稍候...');
     window.open(downloadLink, '_parent');
   }
 }
diff --git a/src/client/components/guide.vue b/src/client/components/guide.vue
@@ -44,7 +44,7 @@ export default class Guide extends Vue {
         });
       },
       {
-        threshold: 0.5,
+        threshold: 0.2,
       },
     );
 
diff --git a/src/client/components/release-item.vue b/src/client/components/release-item.vue
@@ -28,9 +28,21 @@ export default class ReleaseItem extends Vue {
     }
   }
 
+  // 移动端主流架构配置
+  get mobileMainstreamArch(): string {
+    switch (this.platform) {
+      case 'windows':
+        return 'x64';
+      case 'mac':
+        return 'arm64';
+      default:
+        return 'x64';
+    }
+  }
+
   // 使用默认架构避免SSR不匹配
   get defaultArch(): string {
-    return 'x64'; // 默认使用 x64，在客户端会动态更新
+    return this.mobileMainstreamArch;
   }
 
   get downloadLink(): string {
@@ -74,13 +86,13 @@ export default class ReleaseItem extends Vue {
     }
   }
 
-  // SSR 安全的描述文本
+  // SSR 安全的描述文本 - 移动端显示主流架构
   get staticAsideDesc(): string | null {
     switch (this.platform) {
       case 'windows':
         return `version ${this.version} for x64`;
       case 'mac':
-        return `version ${this.version} for Intel Chip`;
+        return `version ${this.version} for Apple Silicon`;
       default:
         return null;
     }
@@ -92,15 +104,23 @@ export default class ReleaseItem extends Vue {
 
   mounted() {
     // 在客户端更新架构信息
-    this.clientArch = platformUtil.getArchitecture();
+    const detectedArch = platformUtil.getArchitecture();
+    // 如果是移动端访问，使用主流架构而不是检测到的架构
+    this.clientArch = this.isMobileDevice() ? this.mobileMainstreamArch : detectedArch;
     this.isClientMounted = true;
   }
 
+  // 检测是否为移动设备
+  private isMobileDevice(): boolean {
+    if (typeof navigator === 'undefined') return false;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
+
   get dynamicAsideDesc(): string | null {
     const arch = this.clientArch;
     switch (this.platform) {
       case 'windows':
-        return `version ${this.version} for ${arch == 'arm64' ? 'Arm64' : arch}`;
+        return `version ${this.version} for ${arch == 'arm64' ? 'Arm64' : 'x64'}`;
       case 'mac':
         if (arch == 'arm64') {
           return `version ${this.version} for Apple Silicon`;
@@ -118,7 +138,7 @@ export default class ReleaseItem extends Vue {
 
   private handleDownload(link: string) {
     console.log('Download link:', link);
-    ElMessage('下载开始，请稍后...');
+    ElMessage('下载开始，请稍候...');
     window.open(link, '_parent');
   }
 }
diff --git a/src/client/main.ts b/src/client/main.ts
@@ -45,28 +45,7 @@ export function mainEntry({
     }
   });
 
-  // 添加路由守卫：检测平台并重定向
-  router.beforeEach((to, from, next) => {
-    if (isClient) {
-      if (to.path === '/' && (!from.name || from.path === '/')) {
-        try {
-          const os = getOperatingSystem();
-          const isSupportedPlatform = isMac() || isWindows();
-
-          // 如果不是 Windows 或 macOS，重定向到 releases 页面
-          if (!isSupportedPlatform) {
-            console.log(`检测到平台: ${os}，重定向到 releases 页面`);
-            return next('/releases');
-          }
-        } catch (error) {
-          console.error('平台检测失败:', error);
-        }
-      }
-    }
-
-    // 继续正常的路由导航
-    next();
-  });
+  // 路由守卫已移至服务端中间件处理
 
   router.beforeResolve(async (to, from, next) => {
     const component = to.matched[0].components.default;
diff --git a/src/client/modules/home/home-display.vue b/src/client/modules/home/home-display.vue
@@ -200,7 +200,7 @@ export default class HomeDisplay extends Vue {
       <div class="content-main-tools" v-if="!isMobile">
         <p v-if="isSupportedPlatform">版本 {{ version }}，发布于 {{ releasesTime }}</p>
         <p>访问 <a :href="getLinks().algoUX" target="_blank">algoUX</a>，探索更多编程与算竞工具链产品</p>
-        <p>访问<a :href="getLinks().oldWebsite" class="old-web" target="_blank">旧版网站</a></p>
+        <p>访问 <a :href="getLinks().oldWebsite" class="old-web" target="_blank">旧版网站</a></p>
       </div>
     </main>
     <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: '1.0.0-beta.1', // 默认版本，避免空字符串
+    version: '',
     releaseDate: '',
     url: '',
     releasesInfo: {} as any,
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: '1.0.0-beta.1', // 默认版本，避免空字符串
+    version: '', // 默认版本，避免空字符串
     url: '',
     releaseDate: '',
     releasesInfo: {} as any,
diff --git a/src/server/index.ts b/src/server/index.ts
@@ -33,7 +33,7 @@ export default class OurApp extends App {
     '!./common/api/**',
   ];
 
-  protected hostname = process.env.HOST || '127.0.0.1';
+  protected hostname = process.env.HOST || '0.0.0.0';
 
   protected port = parseInt(process.env.PORT) || 3000;
 

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export default class Guide extends Vue {`
`44`	`44`	`});`
`45`	`45`	`},`
`46`	`46`	`{`
`47`		`- threshold: 0.5,`
	`47`	`+ threshold: 0.2,`
`48`	`48`	`},`
`49`	`49`	`);`
`50`	`50`