✨ feat: support hyp for launcher url

src/router/index.ts

@@ -47,6 +47,11 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '',
                 name: 'installer.index',
+                component: () => import('@/views/Installer/HYP.vue'),
+            },
+            {
+                path: '',
+                name: 'installer.legacy',
                 component: () => import('@/views/Installer/Index.vue'),
             },
         ],

src/typings/hyp.ts

@@ -0,0 +1,138 @@
+export interface HYPGame {
+    biz: string
+    biz_extra: string
+    display: {
+        background: {
+            link: string
+            url: string
+        }
+        icon: {
+            hover_url: string
+            link: string
+            url: string
+        }
+        language: string
+        logo: {
+            link: string
+            url: string
+        }
+        name: string
+        subtitle: string
+        thumbnail: {
+            link: string
+            url: string
+        }
+        title: string
+    }
+    display_status: string
+    id: string
+    reservation?: {
+        link: string
+    }
+}
+
+export interface HYPType {
+    game_channel_sdks: Array<{
+        channel_sdk_pkg: {
+            decompressed_size: string
+            md5: string
+            size: string
+            url: string
+        }
+        game: {
+            biz: string
+            biz_extra: string
+            id: string
+        }
+        pkg_version_file_name: string
+        version: string
+    }>
+    game_packages: Array<{
+        game: {
+            biz: string
+            biz_extra: string
+            id: string
+        }
+        main: {
+            major: {
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }
+            patches: Array<{
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }>
+        }
+        pre_download: {
+            major?: {
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }
+            patches: Array<{
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }>
+        }
+    }>
+    games: HYPGame[]
+    last_modified: string
+}
+
+export interface HYPGameItem extends HYPGame {
+    game_channel_sdks: HYPType['game_channel_sdks']
+    game_packages: HYPType['game_packages']
+    biz_short: string
+    biz_region: string
+}

src/views/Installer/HYP.vue

@@ -0,0 +1,189 @@
+el-message
+<template>
+    <Layout full-height>
+        <template #title>
+            <div class="teleport-title">PC 端更新包列表</div>
+        </template>
+        <template #actions>
+            <router-link :to="{ name: 'installer.legacy' }">
+                <el-button type="info" plain>返回旧版启动器</el-button>
+            </router-link>
+        </template>
+        <div v-elloading="loading" :class="$style.page">
+            <el-scrollbar>
+                <el-tabs
+                    :model-value="($route.query.type || 'hk4e_cn').toString()"
+                    @update:model-value="
+                        $router.replace({ query: { type: $event === 'hk4e_cn' ? undefined : $event } })
+                    "
+                >
+                    <el-tab-pane v-for="i in computedData" :key="i.biz_extra" :name="i.biz_extra">
+                        <template #label>
+                            <span :class="$style.bizName">
+                                {{ i.display.name }}
+                                <el-tag v-if="i.biz_region === 'global'" size="small" type="primary">国际</el-tag>
+                                <el-tag v-else-if="i.biz_region === 'bili'" size="small" class="el-tag--pink">
+                                    BiliBili
+                                </el-tag>
+                            </span>
+                        </template>
+                        <div style="margin: 0 20px">
+                            <el-alert v-if="hypResult?.last_modified" type="info" :show-icon="false" :closable="false">
+                                数据更新于 {{ dayjs(hypResult.last_modified).format('YYYY-MM-DD HH:mm:ss') }}
+                            </el-alert>
+                        </div>
+                        <HYPCard v-if="i.game_packages?.length > 0" :item="i" />
+                        <el-empty v-else description="暂无更新包" />
+                    </el-tab-pane>
+                </el-tabs>
+                <div v-if="!loading"></div>
+            </el-scrollbar>
+        </div>
+    </Layout>
+</template>
+
+<script lang="ts">
+import '@/styles/actions.scss'
+import { ref, onMounted, defineComponent, watch, computed } from 'vue'
+import {
+    faBoxOpen,
+    faFileAudio,
+    faAngleRight,
+    faHashtag,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+    faCodeMerge,
+} from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { ElNotification } from 'element-plus'
+import dayjs from 'dayjs'
+library.add(
+    faBoxOpen,
+    faAngleRight,
+    faFileAudio,
+    faHashtag,
+    faCodeMerge,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+)
+import { vLoading } from 'element-plus/es/components/loading/src/directive'
+import 'element-plus/theme-chalk/el-loading.css'
+import 'element-plus/theme-chalk/el-notification.css'
+import { urls } from './urls'
+import { useRoute } from 'vue-router'
+import { apibase } from '@/utils/apibase'
+import { HYPGameItem, HYPType } from '@/typings/hyp'
+import HYPCard from './HYPCard.vue'
+export default defineComponent({
+    name: 'InstallerHyp',
+    directives: {
+        elloading: vLoading,
+    },
+    components: {
+        HYPCard,
+    },
+    setup() {
+        const loading = ref(true)
+        const route = useRoute()
+        const hypResult = ref<HYPType | null>(null)
+        const load = async () => {
+            loading.value = true
+            return fetch(await apibase('/v2/hyp/packages'))
+                .then((res) => {
+                    return res.json()
+                })
+                .then((res) => {
+                    loading.value = false
+                    hypResult.value = res
+                })
+                .catch((err) => {
+                    ElNotification.error({
+                        title: '出错了',
+                        message: err.message,
+                    })
+                })
+        }
+        onMounted(load)
+        const basename = (path: string) => {
+            const pathArr = path.split('/')
+            return pathArr[pathArr.length - 1]
+        }
+        const formatSize = (size: number) => {
+            if (size < 1024) {
+                return `${size}B`
+            } else if (size < 1024 * 1024) {
+                return `${(size / 1024).toFixed(2)}KB`
+            } else if (size < 1024 * 1024 * 1024) {
+                return `${(size / 1024 / 1024).toFixed(2)}MB`
+            } else {
+                return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`
+            }
+        }
+        const sortBy = ['hk4e', 'hkrpg', 'bh3', 'nap']
+        const computedData = computed(() => {
+            return hypResult.value?.games
+                .map((i) => {
+                    return {
+                        ...i,
+                        game_packages: hypResult.value?.game_packages.filter((j) => j.game.id === i.id),
+                        game_channel_sdks: hypResult.value?.game_channel_sdks.filter((j) => j.game.id === i.id),
+                        biz_short: i.biz_extra.split('_')[0],
+                        biz_region: i.biz_extra.split('_')[1],
+                    } as HYPGameItem
+                })
+                .sort((a, b) => {
+                    const biz_first_a = a.biz_extra.split('_')[0]
+                    const biz_first_b = b.biz_extra.split('_')[0]
+                    return sortBy.indexOf(biz_first_a) - sortBy.indexOf(biz_first_b)
+                })
+        })
+        return {
+            loading,
+            basename,
+            formatSize,
+            urls,
+            hypResult,
+            computedData,
+            dayjs,
+        }
+    },
+})
+</script>
+<style lang="scss" module>
+.page {
+    height: 100%;
+    background: var(--c-background);
+    :global {
+        .el-tabs__nav-scroll {
+            padding: 0 20px;
+        }
+    }
+}
+.bizName {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    :global {
+        .el-tag--small {
+            height: 16px;
+            padding: 0 3px;
+        }
+        .el-tag--pink {
+            --el-tag-border-color: #fb7299;
+            --el-tag-text-color: #fb7299;
+        }
+    }
+
+    :global(.dark) & {
+        :global {
+            .el-tag--pink {
+                opacity: 0.7;
+            }
+        }
+    }
+}
+</style>