hi-download/src/pages/Home/components/DownloadButton.vue

<template>
  <div class=" w-full">
    <!-- 主下载按钮 -->
    <div class="relative mx-auto md:ml-0 flex h-[60px] w-[210px] items-center justify-center overflow-hidden rounded-full bg-[#ADFF5B] px-[16px] md:h-[83px] md:w-[300px] md:px-[24px]">
      <a
          v-if="mainButton?.link"
          :href="mainButton.link"
          target="_blank"
          :aria-label="mainButton.label"
          class="flex h-full w-full items-center justify-center transition-transform hover:brightness-110 active:scale-95"
      >
        <component :is="mainButton.mainIcon" class="h-auto w-full text-black transition-transform" />
      </a>
      <div
          v-else
          :id="mainButton?.id"
          :aria-label="mainButton?.label"
          class="flex h-full w-full cursor-pointer items-center justify-center transition-transform hover:brightness-110 active:scale-95"
      >
        <component :is="mainButton?.mainIcon" class="h-auto w-full text-black transition-transform" />
      </div>
    </div>

    <!-- 其他版本下载 -->
    <div class="w-full mt-2 md:mt-[35px]">
      <div class="mb-3 text-center md:text-left">
        <span class="text-xs md:text-sm whitespace-nowrap">其他版本下载</span>
      </div>

      <div class="flex gap-4 items-center justify-center md:justify-start">
        <template v-for="(item, index) in otherButtons" :key="index">
          <a
              v-if="item.link"
              :href="item.link"
              target="_blank"
              :aria-label="item.label"
              class="transition-transform hover:brightness-110 active:scale-95"
          >
            <component :is="item.secondaryIcon" class="h-[24px] md:h-[34px] text-white" />
          </a>
          <div
              v-else
              :id="item.id"
              :aria-label="item.label"
              class="cursor-pointer transition-transform hover:brightness-110 active:scale-95"
          >
            <component :is="item.secondaryIcon" class="h-[24px] md:h-[34px] text-white" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon1 from './Group 105.svg?component'
import Icon2 from './Group 106.svg?component'
import Icon3 from './Group 107.svg?component'
import Icon4 from './Group 108.svg?component'
import WinIcon from './WinIcon.svg?component'
import MacIcon from './MacIcon.svg?component'
import AppleIcon from './AppleIcon.svg?component'
import AndroidIcon from './AndroidIcon.svg?component'

import request from '@/utils/request'
import {computed, ref, onMounted} from "vue";
import {getAllQueryString} from "@/utils/url-utils.ts";

const downLoadWin = ref('')
const downLoadMac = ref('')
const currentPlatform = ref('win')

onMounted(() => {
  const ua = navigator.userAgent;
  const platform = navigator.platform || ''; // 辅助判断

  // 1. 先判断 Android (通常比较稳定)
  if (/Android/i.test(ua)) {
    currentPlatform.value = 'android';
  }
  // 2. 判断 iOS 设备 (iPhone, iPod)
  else if (/iPhone|iPod/i.test(ua)) {
    currentPlatform.value = 'ios';
  }
  // 3. 核心改进：区分 Mac 和 iPad
  else if (/Macintosh|Mac OS X/i.test(ua)) {
    // iPadOS 桌面模式下，支持多点触控（通常 > 1）
    // 而真正的 Mac 电脑通常 maxTouchPoints 为 0 或 undefined
    if (navigator.maxTouchPoints > 1) {
      currentPlatform.value = 'ios'; // 归类为 iOS 端（iPad）
    } else {
      currentPlatform.value = 'mac';
    }
  }
  // 4. 其他情况默认为 Windows
  else {
    currentPlatform.value = 'win';
  }

  console.log('Detected Platform:', currentPlatform.value);
});

// request.get('/api/v1/common/client/download', {
//   invite_code: getAllQueryString('ic'),
//   platform: 'mac',
// }).then((res: any) => {
//   downLoadMac.value = res.url
// })

request.get('/api/v1/common/client/download', {
  invite_code: getAllQueryString('ic'),
  platform: 'windows',
}).then((res: any) => {
  downLoadWin.value = res.url
})

const allDownloadOptions = computed(() => [
  { key: 'win', mainIcon: Icon1, secondaryIcon: WinIcon, link: downLoadWin.value, label: 'Windows', id: 'downloadButton_win' },
  { key: 'mac', mainIcon: Icon3, secondaryIcon: MacIcon,  label: 'macOS', link: `https://hifastvpn.go.link?adj_t=1xf6e7ru&inviteCode=${getAllQueryString('ic')}` },
  { key: 'ios', mainIcon: Icon2, secondaryIcon: AppleIcon, label: 'iOS', link: `https://hifastvpn.go.link?adj_t=1xf6e7ru&inviteCode=${getAllQueryString('ic')}` },
  { key: 'android', mainIcon: Icon4, secondaryIcon: AndroidIcon, label: 'Android', link: `https://hifastvpn.go.link?adj_t=1xf6e7ru&inviteCode=${getAllQueryString('ic')}`, },
])

const mainButton = computed(() => {
  return allDownloadOptions.value.find(opt => opt.key === currentPlatform.value) || allDownloadOptions.value[0]
})

const otherButtons = computed(() => {
  return allDownloadOptions.value.filter(opt => opt.key !== currentPlatform.value)
})
</script>