Skip to content

Commit

Permalink
Add | 核心信息页面
Browse files Browse the repository at this point in the history
  • Loading branch information
Tigercrl committed May 25, 2024
1 parent 9b4b922 commit b734fa0
Show file tree
Hide file tree
Showing 9 changed files with 315 additions and 112 deletions.
1 change: 0 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="/assets/img/favicon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/assets/css/animate.min.css"/>
<link rel="stylesheet" href="/assets/css/fontawesome.min.css"/>
<link rel="stylesheet" type="text/css"
Expand Down
53 changes: 10 additions & 43 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ onUnmounted(() => {
<h2 ref="title">MCSL Sync</h2>
<h4>一个MC服务器核心镜像同步工具</h4>
<p>请在右侧选择一个服务端以下载</p>
<p>或者 <a href="https://apidoc.sync.mcsl.com.cn/">访问Api文档</a> | <a @click="router.push('/nodes')" href="javascript:void(0)">节点列表</a></p>
<p>或者 <a href="https://apidoc.sync.mcsl.com.cn/">访问Api文档</a> | <a @click="router.push('/nodes')"
href="javascript:void(0)">节点列表</a></p>
<h6>MCSL-Sync-Frontend v{{ frontendVersion }}<br>MCSL-Sync-Backend&ensp;{{ statistics.version }}</h6>
<h5>© 2022 - {{ new Date().getFullYear() }} <a href="https://mcsl.com.cn/">MCSL</a>开发组 保留所有权利。</h5>
</div>
Expand Down Expand Up @@ -152,50 +153,16 @@ onUnmounted(() => {
transition: width 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
width: 100%;
height: calc(100% - 4rem);
padding: 2rem;
}
.title h1, .title h4 {
display: none;
}
.title h2 {
font-size: 2.5rem;
}
.title p {
font-size: 1rem;
text-align: center;
}
.title h5, .title h5 a {
font-size: 0.7rem;
}
.router-container {
width: 65%;
height: calc(100% - 13.5rem);
padding: 1rem;
}
.container-big .title {
width: 0;
opacity: 0;
}
@media screen and (min-width: 768px) {
.container-big .title {
width: 0;
opacity: 0;
}
.container-big .title * {
text-wrap: nowrap;
}
.container-big .title * {
text-wrap: nowrap;
}
.container-big .router-container {
width: 100%;
}
.container-big .router-container {
width: 100%;
}
</style>
38 changes: 38 additions & 0 deletions src/components/Back.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script setup lang="ts">
import router from "../router";
defineProps({
to: {
type: String,
required: false,
default: "/"
}
});
</script>

<template>
<button @click="router.push(to)" class="back-btn"><i class="fa fa-angle-left fa-lg"/></button>
</template>

<style scoped>
.back-btn {
position: absolute;
top: 1rem;
left: 1rem;
margin: 1rem;
width: 2rem;
height: 2rem;
border-radius: 114rem;
border: 1px solid #dddddd99;
background: #ffffff00;
color: var(--text-color-regular);
transition: ease-in-out 0.3s;
cursor: pointer;
}
.back-btn:hover {
background: #ffffff77;
border-color: var(--color-primary);
color: var(--color-primary);
}
</style>
2 changes: 1 addition & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import router from './router'
import LoadingStatus from "./utils/enums/LoadingStatus.ts";
import axios from 'axios';

export const BASE_URL = "https://example.com/";
export const BASE_URL = "http://38.46.30.116:7002/";

export let mainLoadingStatus = ref(LoadingStatus.LOADING);

Expand Down
13 changes: 9 additions & 4 deletions src/router/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {createRouter, createWebHistory} from "vue-router";
import Cores from "../views/Cores.vue";
import PageNotFound from "../components/PageNotFound.vue";
import PageNotFound from "../views/PageNotFound.vue";
import VersionList from "../views/VersionList.vue";
import VersionInfo from "../views/VersionInfo.vue";

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
Expand All @@ -19,9 +20,13 @@ const router = createRouter({
component: VersionList,
},
{
path: "/core/:core/:version",
path: "/core/:core",
component: VersionList,
},
{
path: "/core/:core/:supportedVersion/:version",
component: VersionInfo,
},
{
path: "/:pathMatch(.*)*",
name: "404",
Expand All @@ -33,10 +38,10 @@ const router = createRouter({
],
});

router.beforeEach(async (to, from, next) => {
router.beforeEach(async (to, _from, next) => {
// 页面标题
if (to.meta.title !== undefined) {
document.title = to.meta.title
document.title = <string>to.meta.title;
}
next();
})
Expand Down
7 changes: 6 additions & 1 deletion src/utils/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export function getCoreIcon(name: string) {
return '/assets/img/cores/' + (() => {
switch (name) {
case 'Arclight':
case 'Lightfall':
case 'LightfallClient':
return 'arclight.png';
case 'Banner':
return 'banner.png';
Expand All @@ -30,12 +32,14 @@ export function getCoreIcon(name: string) {
case 'Mohist':
return 'mohist.png'
case 'Paper':
case 'Travertine':
return 'paper.png'
case 'Pufferfish':
case 'Pufferfish+':
case 'Pufferfish+Purpur':
return 'pufferfish.png';
case 'Purpur':
case 'Purformance':
return 'purpur.png';
case 'Spigot':
return 'spigot.png';
Expand All @@ -59,7 +63,7 @@ export function getCoreType(name: string) {
case 'Arclight':
case 'Banner':
case 'Mohist':
case 'PurformanceCatServer':
case 'CatServer':
return '混合端';
case 'BungeeCord':
case 'Lightfall':
Expand All @@ -75,6 +79,7 @@ export function getCoreType(name: string) {
case "Pufferfish":
case "Pufferfish+":
case "Pufferfish+Purpur":
case "Purformance":
case "Purpur":
case "Spigot":
return '插件端';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import {onMounted, ref} from "vue";
import router from "../router";
import {randomNum} from "../utils/util.ts";
import Back from "../components/Back.vue";
const countdown = ref('?');
Expand Down Expand Up @@ -42,6 +43,7 @@ onMounted(async () => {
</script>

<template>
<Back/>
<div class="pagenotfound-container">
<h2>404 - 页面未找到</h2>
<h3>将在 <span>{{ countdown }}</span> 秒后自动跳转到主页</h3>
Expand Down
139 changes: 139 additions & 0 deletions src/views/VersionInfo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<script setup lang="ts">
import Loading from '../components/Loading.vue'
import {ref} from "vue";
import LoadingStatus from "../utils/enums/LoadingStatus.ts";
import {BASE_URL} from "../main.ts";
import Error from "../components/Error.vue";
import axios from "axios";
import router from "../router";
import Back from "../components/Back.vue";
import {getCoreIcon} from "../utils/util.ts";
const core = router.currentRoute.value.params.core;
let supportedVersion = router.currentRoute.value.params.supportedVersion;
let version = router.currentRoute.value.params.version;
const loadStatus = ref(LoadingStatus.LOADING);
let versionInfo: {
"type": string,
"build": {
"sync_time": string,
"download_url": string,
"core_type": string,
"mc_version": string,
"core_version": string
}
};
// 获取支持的版本列表
axios.get(BASE_URL + 'core/' + core + '/' + supportedVersion + '/' + version).then(res => {
versionInfo = res.data.data;
loadStatus.value = LoadingStatus.SUCCESS;
}).catch(e => {
console.error(e);
if (e.response) {
if (e.response.data.msg === 'Error: No data were found.') {
// 版本不存在 重定向404
router.push('/404')
} else {
loadStatus.value = LoadingStatus.FAIL_CODE;
}
} else {
loadStatus.value = LoadingStatus.FAIL_CONNECT;
}
});
function download() {
window.open(versionInfo.build.download_url, '_blank');
}
</script>

<template>
<Back :to="'/core/' + core"/>
<Loading v-if="loadStatus === LoadingStatus.LOADING" message="加载服务端核心信息中..."/>
<div class="version-info" v-else-if="loadStatus === LoadingStatus.SUCCESS">
<img :src="getCoreIcon(<string>core)" alt=""/>
<div>
<h2>{{ version }}</h2>
<h3>核心类型:{{ core }}</h3>
<h3>支持版本:{{ supportedVersion }}</h3>
<h3>同步时间:{{ versionInfo.build.sync_time === '1970-01-01T00:00:00Z' ? '未同步' : versionInfo.build.sync_time }}</h3>
<button @click="download" :disabled="versionInfo.build.download_url.startsWith('errorcore')">
{{ versionInfo.build.download_url.startsWith('errorcore') ? '无法获取下载链接' : '立即下载' }}
</button>
</div>
</div>
<Error v-else
:message="'加载核心版本列表失败!<br/>' + loadStatus"/>
</template>

<style scoped>
.version-info {
margin: 0.5rem auto;
display: flex;
justify-content: start;
align-items: center;
border-radius: 2rem;
background: #ffffffdd;
backdrop-filter: blur(5px);
width: 80%;
height: fit-content;
gap: 2rem;
padding: 1rem;
border: 1.5px solid #dddddd55;
transition: ease-in-out 0.3s;
cursor: pointer;
}
.version-info img {
height: 100%;
border-radius: 1rem;
}
.version-info h2 {
font-size: 1.5rem;
font-weight: 500;
margin: 0.7rem 0;
color: var(--text-color-primary);
}
.version-info h3 {
font-size: 1.25rem;
font-weight: 450;
margin: 0.2rem 0;
color: var(--text-color-regular);
}
.version-info button {
margin: 1rem 0;
width: 10rem;
height: 2rem;
border-radius: 0.5rem;
padding: 0.25rem;
border: 1px solid #dddddd99;
background: #ffffff00;
color: var(--text-color-regular);
transition: ease-in-out 0.3s;
cursor: pointer;
}
.version-info button:hover {
background: #ffffff77;
border-color: var(--color-primary);
scale: 1.01;
}
.version-info button:active {
background: #ffffffaa;
scale: 0.9;
transition-duration: 0.1s;
}
.version-info button:disabled {
background: #cccccc77;
border: 1px solid #aaaaaa99;
scale: 1;
cursor: not-allowed;
}
</style>
Loading

0 comments on commit b734fa0

Please sign in to comment.