|
|
@@ -52,7 +52,7 @@
|
|
|
type="button"
|
|
|
class="platform-icon-btn"
|
|
|
:class="{ active: activeTab === tab.key }"
|
|
|
- @click="activeTab = tab.key"
|
|
|
+ @click="selectPlatformTab(tab.key)"
|
|
|
>
|
|
|
<span class="platform-icon-circle">
|
|
|
<el-icon :size="28"><component :is="platformIcon(tab.key)" /></el-icon>
|
|
|
@@ -85,12 +85,13 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, computed, watch } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
import { Download, Iphone, Monitor, Cellphone } from '@element-plus/icons-vue'
|
|
|
import type { Component } from 'vue'
|
|
|
import { getDistributionPublic, DistributionPublicResponse, type LatestVersionInfoPublic } from '../../api/clientDistributions'
|
|
|
|
|
|
const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
const shareId = computed(() => String(route.params.id ?? ''))
|
|
|
const isWeChat = /MicroMessenger/i.test(navigator.userAgent)
|
|
|
const data = ref<DistributionPublicResponse | null>(null)
|
|
|
@@ -107,6 +108,12 @@ function pickDefaultPlatformTab(tabs: { key: string }[]): string {
|
|
|
return keys[0] ?? ''
|
|
|
}
|
|
|
|
|
|
+/** URL ?platform= 与接口 key 对齐 */
|
|
|
+function normalizePlatformQuery(raw: unknown): string {
|
|
|
+ const v = Array.isArray(raw) ? raw[0] : raw
|
|
|
+ return typeof v === 'string' ? v.trim() : ''
|
|
|
+}
|
|
|
+
|
|
|
const PLATFORM_LABELS: Record<string, string> = {
|
|
|
android: 'Android',
|
|
|
android_phone: '安卓',
|
|
|
@@ -152,6 +159,17 @@ const platformTabs = computed<{ key: string; label: string }[]>(() => {
|
|
|
|
|
|
const activeTab = ref('')
|
|
|
|
|
|
+/** 点击底部平台 tab:同步地址栏 ?platform=,保留其它查询参数 */
|
|
|
+function selectPlatformTab(key: string) {
|
|
|
+ const q = normalizePlatformQuery(route.query.platform)
|
|
|
+ if (activeTab.value === key && q === key) return
|
|
|
+ activeTab.value = key
|
|
|
+ router.replace({
|
|
|
+ path: route.path,
|
|
|
+ query: { ...route.query, platform: key }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
/** 当前选中的版本:有 Tab 时用选中平台,否则用全局 latest_version */
|
|
|
const selectedVersion = computed<LatestVersionInfoPublic | undefined>(() => {
|
|
|
const d = data.value
|
|
|
@@ -164,10 +182,30 @@ const selectedVersion = computed<LatestVersionInfoPublic | undefined>(() => {
|
|
|
})
|
|
|
|
|
|
watch(
|
|
|
- () => [data.value, platformTabs.value] as const,
|
|
|
- () => {
|
|
|
- const tabs = platformTabs.value
|
|
|
- if (tabs.length > 0 && !activeTab.value) {
|
|
|
+ () => [data.value, platformTabs.value, route.query.platform] as const,
|
|
|
+ (newVal, oldVal) => {
|
|
|
+ const d = newVal[0]
|
|
|
+ const tabs = newVal[1]
|
|
|
+ const qPlatform = newVal[2]
|
|
|
+ if (tabs.length === 0) return
|
|
|
+
|
|
|
+ const byPlatform = d?.latest_versions_by_platform
|
|
|
+ const requested = normalizePlatformQuery(qPlatform)
|
|
|
+ const valid = requested && byPlatform?.[requested] ? requested : ''
|
|
|
+
|
|
|
+ if (!activeTab.value) {
|
|
|
+ activeTab.value = valid || pickDefaultPlatformTab(tabs)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (oldVal === undefined) return
|
|
|
+
|
|
|
+ const oldQ = normalizePlatformQuery(oldVal[2])
|
|
|
+ if (oldQ === requested) return
|
|
|
+
|
|
|
+ if (valid) {
|
|
|
+ activeTab.value = valid
|
|
|
+ } else if (!requested && oldQ !== '') {
|
|
|
activeTab.value = pickDefaultPlatformTab(tabs)
|
|
|
}
|
|
|
},
|
|
|
@@ -198,7 +236,7 @@ onMounted(async () => {
|
|
|
}
|
|
|
try {
|
|
|
const res = await getDistributionPublic(shareId.value)
|
|
|
- data.value = res.data
|
|
|
+ data.value = res.data as DistributionPublicResponse
|
|
|
} catch {
|
|
|
data.value = null
|
|
|
error.value = true
|