From dc6a7517298ac49c8494c71bec4c5bd1aad67d56 Mon Sep 17 00:00:00 2001
From: Tigercrl <tigercrl@icloud.com>
Date: Sat, 20 Jul 2024 18:26:24 +0800
Subject: [PATCH] feat: node list

---
 src/App.vue               | 20 ++++++++------
 src/main.ts               |  2 +-
 src/router/index.ts       | 13 ++++++---
 src/style.css             |  2 +-
 src/views/NodeList.vue    | 57 +++++++++++++++++++++++++++++++++++++++
 src/views/VersionList.vue |  2 +-
 6 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 src/views/NodeList.vue

diff --git a/src/App.vue b/src/App.vue
index e8582c9..219d709 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-import { mainLoadingStatus, statistics } from "./main.ts";
+import {onMounted, onUnmounted, ref} from "vue";
+import {mainLoadingStatus, statistics} from "./main.ts";
 import Loading from './components/Loading.vue'
 import LoadingStatus from "./utils/enums/LoadingStatus.ts";
 import Error from "./components/Error.vue";
@@ -47,24 +47,28 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Loading v-if="mainLoadingStatus === LoadingStatus.LOADING" />
+  <Loading v-if="mainLoadingStatus === LoadingStatus.LOADING"/>
   <div class="container" :class="{ 'container-big': router.currentRoute.value.fullPath !== '/' }"
-    v-else-if="mainLoadingStatus === LoadingStatus.SUCCESS">
+       v-else-if="mainLoadingStatus === LoadingStatus.SUCCESS">
     <div class="title">
       <h1>欢迎使用</h1>
       <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/" target="_blank">访问 API 文档</a>
+        |
+        <router-link to="/nodes">节点列表</router-link>
+      </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>
     <div class="router-container">
-      <router-view />
+      <router-view/>
     </div>
   </div>
-  <Error v-else :message="'无法加载 MCSL Sync！<br/>' + mainLoadingStatus" />
+  <Error v-else :message="'无法加载 MCSL Sync！<br/>' + mainLoadingStatus"/>
 </template>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index 1216605..12679b5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@ import router from './router'
 import LoadingStatus from "./utils/enums/LoadingStatus.ts";
 import axios from 'axios';
 
-export const BASE_URL = "https://sync.mcsl.com.cn/api/";
+export const BASE_URL = "http://localhost:4523/";
 
 export let mainLoadingStatus = ref(LoadingStatus.LOADING);
 
diff --git a/src/router/index.ts b/src/router/index.ts
index b618500..6419208 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import Cores from "../views/Cores.vue";
 import PageNotFound from "../views/PageNotFound.vue";
 import VersionList from "../views/VersionList.vue";
 import VersionInfo from "../views/VersionInfo.vue";
+import NodeList from "../views/NodeList.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -16,23 +17,29 @@ const router = createRouter({
             }
         },
         {
-            path: "/core/:core",
-            component: VersionList,
+            path: "/nodes",
+            component: NodeList,
         },
         {
             path: "/core/:core",
             component: VersionList,
+            meta: {
+                title: "版本列表 | MCSL-Sync 服务端镜像站"
+            }
         },
         {
             path: "/core/:core/:supportedVersion/:version",
             component: VersionInfo,
+            meta: {
+                title: "版本信息 | MCSL-Sync 服务端镜像站"
+            }
         },
         {
             path: "/:pathMatch(.*)*",
             name: "404",
             component: PageNotFound,
             meta: {
-                title: "404 | MCSL Sync"
+                title: "404 | MCSL-Sync 服务端镜像站"
             }
         },
     ],
diff --git a/src/style.css b/src/style.css
index 6b18bc7..2216473 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,7 +31,7 @@ body {
     justify-content: center;
     align-items: center;
     border: none;
-    background: linear-gradient(45deg, #fdfeff, #f6f7f8);
+    background: linear-gradient(135deg, #d9ebff, 5%, #fdfeff);
 }
 
 .el-link {
diff --git a/src/views/NodeList.vue b/src/views/NodeList.vue
new file mode 100644
index 0000000..0c80945
--- /dev/null
+++ b/src/views/NodeList.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import Back from "../components/Back.vue";
+import {statistics} from "../main.ts";
+</script>
+
+<template>
+  <Back/>
+  <div class="node-container">
+    <div class="nodes">
+      <div class="node" v-for="node in statistics.config.node_list">
+        <h2>{{ node }}</h2>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nodes {
+  width: calc(100% - 2rem);
+  height: calc(100% - 5rem);
+  padding: 1rem;
+  overflow: auto;
+}
+
+.node {
+  margin: 0.5rem auto;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  border-radius: 1rem;
+  background: #ffffffdd;
+  backdrop-filter: blur(5px);
+  width: calc(100% - 2rem - 3px);
+  height: 2rem;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1.5px solid #dddddd55;
+  transition: ease-in-out 0.3s;
+}
+
+.node h2 {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-color-primary);
+  margin: 0;
+}
+
+.node-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  justify-content: center;
+  align-items: start;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/VersionList.vue b/src/views/VersionList.vue
index afa8b52..b092db7 100644
--- a/src/views/VersionList.vue
+++ b/src/views/VersionList.vue
@@ -88,7 +88,7 @@ function changeVersion(e: Event) {
 
 <style scoped>
 .versions {
-  width: 100%;
+  width: calc(100% - 2rem);
   height: calc(100% - 5rem);
   padding: 1rem;
   overflow: auto;