根据ua处理下载按钮
This commit is contained in:
parent
45ce4d434c
commit
b3f39eadf5
@ -1,28 +1,54 @@
|
||||
<template>
|
||||
<div class="mx-auto grid grid-cols-2 gap-[10px] md:flex md:flex-wrap">
|
||||
<template v-for="(item, index) in downloadLinks" :key="index">
|
||||
<div class="flex flex-col justify-center items-center w-full md:justify-start">
|
||||
<!-- 主下载按钮 -->
|
||||
<div class="mx-auto border-4 border-white rounded-full bg-white/20 md:-ml-2 h-[60px] w-[210px] md:h-[100px] md:w-[360px] box-content">
|
||||
<a
|
||||
v-if="item.link"
|
||||
:href="item.link"
|
||||
target="_blank"
|
||||
:aria-label="item.label"
|
||||
class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
|
||||
v-if="mainButton?.link"
|
||||
:href="mainButton.link"
|
||||
target="_blank"
|
||||
:aria-label="mainButton.label"
|
||||
class="block transition-transform hover:brightness-110 active:scale-95"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
|
||||
</div>
|
||||
<component :is="mainButton.mainIcon" class="h-full" />
|
||||
</a>
|
||||
<div
|
||||
v-else
|
||||
:id="item.id"
|
||||
:aria-label="item.label"
|
||||
class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
|
||||
:id="mainButton?.id"
|
||||
:aria-label="mainButton?.label"
|
||||
class="cursor-pointer transition-transform hover:brightness-110 active:scale-95"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
|
||||
</div>
|
||||
<component :is="mainButton?.mainIcon" class="h-full" />
|
||||
</div>
|
||||
</template>
|
||||
</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]" />
|
||||
</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]" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -31,36 +57,58 @@ 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 request from '@/utils/request'
|
||||
import {computed, ref} from "vue";
|
||||
import {getAllQueryString} from "@/utils/url-utils.ts";
|
||||
console.log(getAllQueryString('ic'));
|
||||
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;
|
||||
if (/Macintosh|Mac OS X/i.test(ua)) {
|
||||
currentPlatform.value = 'mac'
|
||||
} else if (/iPhone|iPad|iPod/i.test(ua)) {
|
||||
currentPlatform.value = 'ios'
|
||||
} else if (/Android/i.test(ua)) {
|
||||
currentPlatform.value = 'android'
|
||||
} else {
|
||||
currentPlatform.value = 'win'
|
||||
}
|
||||
})
|
||||
|
||||
const downLoadWin = ref('')
|
||||
const downLoadMac = ref('')
|
||||
request.get('/api/v1/common/client/download', {
|
||||
invite_code: getAllQueryString('ic'),
|
||||
platform: 'mac',
|
||||
}).then((res) => {
|
||||
}).then((res: any) => {
|
||||
downLoadMac.value = res.url
|
||||
})
|
||||
|
||||
request.get('/api/v1/common/client/download', {
|
||||
invite_code: getAllQueryString('ic'),
|
||||
platform: 'windows',
|
||||
}).then((res) => {
|
||||
}).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, link: downLoadMac.value, label: 'macOS', id: 'downloadButton_mac' },
|
||||
{ key: 'ios', mainIcon: Icon2, secondaryIcon: AppleIcon, label: 'iOS', id: 'downloadButton_apple' },
|
||||
{ key: 'android', mainIcon: Icon4, secondaryIcon: AndroidIcon, label: 'Android', id: 'downloadButton_android' },
|
||||
])
|
||||
|
||||
// 定义下载链接数据
|
||||
const downLoadIos = ''
|
||||
const downloadLinks = computed(() => {
|
||||
return [
|
||||
{ icon: Icon2, id: 'downloadButton_apple', label: '下载 ios 版客户端' },
|
||||
{ icon: Icon1, link: downLoadWin.value, label: '下载 Windows 版客户端' },
|
||||
{ icon: Icon4, id: 'downloadButton_android', label: '下载 Android 版客户端' },
|
||||
{ icon: Icon3, link: downLoadMac.value, label: '下载 macOS 版客户端' },
|
||||
]
|
||||
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>
|
||||
|
||||
@ -22,13 +22,6 @@ export default defineConfig({
|
||||
changeOrigin: true,
|
||||
// rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
autoRewrite: true,
|
||||
// 3. 关键：将路径重写，在前面补上 /api/v1
|
||||
// 验证请求是否进入代理，可以在终端看到打印
|
||||
configure: (proxy, _options) => {
|
||||
proxy.on('proxyReq', (proxyReq, req, _res) => {
|
||||
console.log('代理请求:', req.method, req.url, ' -> ', proxyReq.path)
|
||||
})
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user