From 5489b2757bc5ccdc9268c758bf46463616c2863b Mon Sep 17 00:00:00 2001
From: Tigercrl <tigercrl@icloud.com>
Date: Sat, 19 Oct 2024 22:01:08 +0800
Subject: [PATCH] feat: dark mode, version sort

---
 package.json              |   3 +-
 pnpm-lock.yaml            |  51 +++++++++++
 src/App.vue               |  47 ++++++++++-
 src/components/Back.vue   |   6 +-
 src/style.css             |  43 +++++++---
 src/utils/darkmode.ts     | 173 ++++++++++++++++++++++++++++++++++++++
 src/utils/util.ts         | 111 +++++++++++++++++++++++-
 src/views/Cores.vue       |  31 +++++--
 src/views/NodeList.vue    |  25 ++++--
 src/views/VersionInfo.vue |  57 +++++++++----
 src/views/VersionList.vue |  33 +++++---
 11 files changed, 511 insertions(+), 69 deletions(-)
 create mode 100644 src/utils/darkmode.ts

diff --git a/package.json b/package.json
index b639d78..3b9f577 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "license": "GPL-3.0-only",
   "author": "MCSLTeam",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.6.8",
     "js-cookie": "^3.0.5",
     "pinyin": "4.0.0-alpha.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1939449..6ca5fbd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vueuse/core':
+        specifier: ^11.1.0
+        version: 11.1.0(vue@3.4.27(typescript@5.4.5))
       axios:
         specifier: ^1.6.8
         version: 1.6.8
@@ -332,6 +335,9 @@ packages:
   '@types/pinyin@2.10.2':
     resolution: {integrity: sha512-jLzlRkaLRLg+lgYPjOuP3HX2cozUkhXls5GTXopsKuKJ9lDGlIAb88OoIztH6TbNUsoJnl/7e/kjaumA5IKKJg==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@vitejs/plugin-vue@5.0.4':
     resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -388,6 +394,15 @@ packages:
   '@vue/shared@3.4.27':
     resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
 
+  '@vueuse/core@11.1.0':
+    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
+
+  '@vueuse/metadata@11.1.0':
+    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
+
+  '@vueuse/shared@11.1.0':
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
+
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -681,6 +696,17 @@ packages:
       terser:
         optional: true
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-i18n@9.13.1:
     resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
     engines: {node: '>= 16'}
@@ -889,6 +915,8 @@ snapshots:
 
   '@types/pinyin@2.10.2': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       vite: 5.2.11
@@ -974,6 +1002,25 @@ snapshots:
 
   '@vue/shared@3.4.27': {}
 
+  '@vueuse/core@11.1.0(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.1.0
+      '@vueuse/shared': 11.1.0(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.4.27(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@11.1.0': {}
+
+  '@vueuse/shared@11.1.0(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.27(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
@@ -1272,6 +1319,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  vue-demi@0.14.10(vue@3.4.27(typescript@5.4.5)):
+    dependencies:
+      vue: 3.4.27(typescript@5.4.5)
+
   vue-i18n@9.13.1(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       '@intlify/core-base': 9.13.1
diff --git a/src/App.vue b/src/App.vue
index 30c38a0..b616479 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,30 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref} from "vue";
+import {computed, 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";
 import router from "./router";
+import {useDarkMode} from "./utils/darkmode.ts";
+
+useDarkMode().loadTheme();
 
 const title = ref();
 const frontendVersion = import.meta.env.PACKAGE_VERSION;
 let interval: number = -1;
 
+const theme = computed(() => {
+  const theme = useDarkMode().value
+  switch (theme) {
+    case 'auto':
+      return '系统';
+    case 'dark':
+      return '深色';
+    default:
+      return '浅色';
+  }
+})
+
 onMounted(() => {
   let titleColor1 = [0x19, 0xE8, 0xA2, 0, 0, 0];
   let titleColor2 = [0x41, 0x99, 0xb7, 0, 0, 0];
@@ -40,6 +55,23 @@ function h2ColorChange(color: number[]) {
   }
 }
 
+function changeTheme(event) {
+  let target
+  switch (useDarkMode().value) {
+    case 'auto':
+      target = 'light';
+      break;
+    case "light":
+      target = 'dark';
+      break;
+    case 'dark':
+    default:
+      target = 'auto';
+      break;
+  }
+  useDarkMode().changeTheme(target, event)
+}
+
 onUnmounted(() => {
   if (interval !== -1)
     clearInterval(interval);
@@ -60,8 +92,11 @@ onUnmounted(() => {
       <a href="https://apidoc.sync.mcsl.com.cn/" target="_blank">访问 API 文档</a>
       <span>&nbsp;|&nbsp;</span>
       <router-link to="/nodes">节点列表</router-link>
+      <span>&nbsp;|&nbsp;</span>
+      <a href="javascript:void(0)" @click="changeTheme">主题：{{ theme }}</a>
       <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> | <a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2023001164号-2</a></h5>
+      <h5>©2022 - {{ new Date().getFullYear() }} <a href="https://mcsl.com.cn/">MCSL开发组</a> | <a
+          href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2023001164号-2</a></h5>
     </div>
     <div class="router-container">
       <router-view/>
@@ -174,11 +209,11 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   height: calc(100% - 5rem);
-  max-height: 32.5rem;
+  max-height: 33rem;
   width: calc(100% - 30rem);
   min-width: 20rem;
   padding: 2rem;
-  background: #ffffff55;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
   border-radius: 1.5rem;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
@@ -192,6 +227,10 @@ onUnmounted(() => {
   }
 }
 
+[dark] .router-container {
+  box-shadow: inset 0.1rem 0.1rem 0.2rem rgba(255, 255, 255, 0.05), 0.2rem 0.2rem 0.2rem rgba(255, 255, 255, 0.1);
+}
+
 @media (min-width: 768px) {
   .container-big .title {
     width: 0;
diff --git a/src/components/Back.vue b/src/components/Back.vue
index 6b535fa..bc40b1c 100644
--- a/src/components/Back.vue
+++ b/src/components/Back.vue
@@ -23,7 +23,7 @@ defineProps({
   width: 2rem;
   height: 2rem;
   border-radius: 114rem;
-  border: 1px solid #dddddd99;
+  border: 1.5px solid var(--text-color-secondary);
   background: #ffffff00;
   color: var(--text-color-regular);
   transition: ease-in-out 0.3s;
@@ -35,4 +35,8 @@ defineProps({
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
+
+[dark] .back-btn:hover {
+  background: #31323377;
+}
 </style>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 2216473..a56f58d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,6 +5,16 @@
     --text-color-regular: #606266;
     --text-color-secondary: #909399;
     --color-primary: #409eff;
+    --bg-color-transparent: #ffffff55;
+    color-scheme: light;
+}
+
+[dark] {
+    --text-color-primary: #e5eaf3;
+    --text-color-regular: #cfd3dc;
+    --text-color-secondary: #a3a6ad;
+    --bg-color-transparent: #5a5b5c55;
+    color-scheme: dark;
 }
 
 * {
@@ -31,25 +41,32 @@ body {
     justify-content: center;
     align-items: center;
     border: none;
-    background: linear-gradient(135deg, #d9ebff, 5%, #fdfeff);
+    background: linear-gradient(135deg, #d9ebff 5%, #fdfeff);
 }
 
-.el-link {
-    transition: ease-in-out 0.3s;
+[dark] #app {
+    background: linear-gradient(135deg, #08254c, #0a0a0a);
 }
 
-.el-overlay-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: auto;
+/* 主题切换过渡动画 */
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+
+html[dark]::view-transition-old(root) {
+    z-index: 1;
+}
+
+html[dark]::view-transition-new(root) {
+    z-index: 999;
 }
 
-.el-dialog {
-    margin: 0 !important;
-    border-radius: 10px !important;
+::view-transition-old(root) {
+    z-index: 999;
 }
 
-.el-form-item__content {
-    gap: 5px;
+::view-transition-new(root) {
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/src/utils/darkmode.ts b/src/utils/darkmode.ts
new file mode 100644
index 0000000..2af750e
--- /dev/null
+++ b/src/utils/darkmode.ts
@@ -0,0 +1,173 @@
+/* 主题 */
+import {useLocalStorage} from "@vueuse/core";
+
+const darkModeStorage = useLocalStorage('darkMode', 'auto');
+/**
+ * 主题类型
+ *
+ * auto - 跟随系统
+ *
+ * dark - 深色模式
+ *
+ * light - 浅色模式
+ */
+export type DarkMode = 'auto' | 'dark' | 'light';
+/**
+ * 主题过渡类型
+ *
+ * viewTransition - 扩散过渡
+ *
+ * fade - 渐变过渡
+ *
+ * none - 无过渡
+ */
+export type DarkModeTransition = 'viewTransition' | 'fade' | 'none';
+
+/**
+ * 获取主题信息
+ */
+export function useDarkMode() {
+    return {
+        value: <DarkMode>darkModeStorage.value,
+        loadTheme: () =>
+            changeTheme(
+                <DarkMode>darkModeStorage.value,
+                undefined,
+                'none',
+                true,
+            ),
+        changeTheme: changeTheme,
+    };
+}
+
+/**
+ * 判断主题类型在当前是否是深色模式
+ * @param darkMode - 主题类型
+ * @returns 是否是深色模式
+ */
+function isDark(darkMode: DarkMode): boolean {
+    switch (darkMode) {
+        case 'auto':
+            return window.matchMedia('(prefers-color-scheme:dark)').matches;
+        case 'dark':
+            return true;
+        case 'light':
+            return false;
+    }
+}
+
+/**
+ * 切换主题
+ * @param darkMode - 主题类型
+ * @param event - 点击事件
+ * @param transition - 过渡类型
+ * @param force - 是否强制切换（如果没有区别不切换，默认false）
+ */
+function changeTheme(
+    darkMode: DarkMode,
+    event?: MouseEvent,
+    transition: DarkModeTransition = 'viewTransition',
+    force: boolean = false,
+): void {
+    const darken = isDark(darkMode);
+    if (!force && darken == isDark(<DarkMode>darkModeStorage.value)) {
+        darkModeStorage.value = darkMode;
+        return;
+    }
+
+    const toggleDark = () => {
+        darkModeStorage.value = darkMode;
+        if (darken) {
+            document.documentElement.setAttribute('dark', '');
+        } else {
+            document.documentElement.removeAttribute('dark');
+        }
+    };
+
+    // 添加过渡样式
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+
+    switch (transition) {
+        case 'none':
+            // 禁用动画
+            style.innerHTML = `
+                * {
+                    transition: none !important;
+                }
+                `;
+            toggleDark();
+            break;
+        case 'fade':
+            // 渐变动画
+            style.innerHTML = `
+                * {
+                    transition: ease-in-out 0.5s !important;
+                }
+                `;
+            toggleDark();
+            break;
+        case 'viewTransition':
+            // 扩散动画
+            (() => {
+                if (!document.startViewTransition) {
+                    // 浏览器不支持ViewTransition就使用渐变
+                    changeTheme(darkMode, event, 'fade', force);
+                    return;
+                }
+
+                style.innerHTML = `
+                * {
+                    transition: none !important;
+                }
+                `;
+
+                // 加载过渡动画
+                const viewTransition = document.startViewTransition(() => {
+                    toggleDark();
+                });
+
+                // 从点击处(为null就屏幕中心)开始扩散
+                const x = event?.clientX ?? window.innerWidth / 2;
+                const y = event?.clientY ?? window.innerHeight / 2;
+
+                const endRadius = Math.hypot(
+                    Math.max(x, innerWidth - x),
+                    Math.max(y, innerHeight - y),
+                );
+                viewTransition.ready.then(() => {
+                    const clipPath = [
+                        `circle(0px at ${x}px ${y}px)`,
+                        `circle(${endRadius}px at ${x}px ${y}px)`,
+                    ];
+                    document.documentElement.animate(
+                        {
+                            clipPath: darken
+                                ? clipPath
+                                : [...clipPath].reverse(),
+                        },
+                        {
+                            duration: 500,
+                            easing: 'ease-in-out',
+                            pseudoElement: darken
+                                ? '::view-transition-new(root)'
+                                : '::view-transition-old(root)',
+                        },
+                    );
+                });
+            })();
+            break;
+    }
+
+    // 移除过渡样式
+    setTimeout(() => style.remove(), 500);
+}
+
+// 监听系统主题变更
+window
+    .matchMedia('(prefers-color-scheme:dark)')
+    .addEventListener('change', () => {
+        if (darkModeStorage.value == 'auto') {
+            changeTheme(darkModeStorage.value, undefined, 'fade');
+        }
+    });
\ No newline at end of file
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 9c80b03..8dafdad 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -131,16 +131,119 @@ export function getCoreType(name: string) {
 }
 
 export function formatNodeClientType(type: string) {
-    switch (type) {
+    switch (type.toLowerCase()) {
         case 'nodeside':
-        case 'Nodeside':
         case 'nodeclient':
-        case 'Nodeclient':
             return 'NodeClient';
         case 'alist':
-        case 'Alist':
             return 'AList';
         default:
             return '未知';
     }
+}
+
+export function sortSupportedVersions(core: String, versions: string[]) {
+    switch (core) {
+        case 'Arclight':
+            const getArclightVersion = (version: String) => {
+                switch (version.toLowerCase()) {
+                    case 'feudalkings':
+                        return '1.21'
+                    case 'whisper':
+                        return '1.20.4'
+                    case 'net':
+                        return '1.20.2'
+                    case 'trials':
+                        return '1.20'
+                    case 'executions':
+                        return '1.19.4'
+                    case 'greathorn':
+                        return '1.19.3'
+                    case 'horn':
+                        return '1.19'
+                    default:
+                        return version
+                }
+            }
+            return versions.sort((a, b) => {
+                return compareSemver(getArclightVersion(a), getArclightVersion(b))
+            });
+        case 'BungeeCord':
+            const getBungeeCordVersion = (version: String) => {
+                switch (version.toLowerCase()) {
+                    case 'latest':
+                        return '2.114.514'
+                    default:
+                        return version
+                }
+            }
+            return versions.sort((a, b) => {
+                return compareSemver(getBungeeCordVersion(a), getBungeeCordVersion(b))
+            });
+        case 'NukkitX':
+            return versions.sort()
+        default:
+            return versions.sort(compareSemver);
+    }
+}
+
+export function sortCoreVersions(core: String, versions: string[]) {
+    switch (core) {
+        case 'BungeeCord':
+        case 'CraftBukkit':
+        case 'Spigot':
+            return versions.sort()
+        case 'SpongeForge':
+        case 'SpongeVanilla':
+        case 'Vanilla':
+            const removeLetters = (version: String) => {
+                return version.replace(/[^\d.]+/, '')
+            }
+            return versions.sort((a, b) => {
+                const aParts = removeLetters(a).split(/[-.]/);
+                const bParts = removeLetters(b).split(/[-.]/);
+                for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+                    const aPart = parseInt(aParts[i] ?? '0');
+                    const bPart = parseInt(bParts[i] ?? '0');
+                    if (aPart < bPart) return 1;
+                    if (aPart > bPart) return -1;
+                }
+                return 0
+            })
+        default:
+            const removeLettersBefore = (version: String) => {
+                return version.replace(/[^\d.]+/, '')
+            }
+            return versions.sort((a, b) => {
+                return compareSemver(removeLettersBefore(a), removeLettersBefore(b))
+            });
+    }
+}
+
+function compareSemver(a: string, b: string) {
+    const aPartsA = a.split('-')[0].split('.');
+    const bPartsA = b.split('-')[0].split('.');
+    const aPartB = a.split('-')[1] ?? '';
+    const bPartB = b.split('-')[1] ?? '';
+    for (let i = 0; i < Math.max(aPartsA.length, bPartsA.length); i++) {
+        const aPartA = parseInt(aPartsA[i] ?? '0');
+        const bPartA = parseInt(bPartsA[i] ?? '0');
+        if (aPartA < bPartA) return 1;
+        if (aPartA > bPartA) return -1;
+    }
+    return comparePartB(aPartB, bPartB)
+}
+
+function comparePartB(a: string, b: string) {
+    if (a.startsWith('rc') && b.startsWith('rc') || a.startsWith('pre') && b.startsWith('pre')) {
+        const aNum = parseInt(a.slice(2)) || 0;
+        const bNum = parseInt(b.slice(2)) || 0;
+        if (aNum < bNum) return 1;
+        else if (aNum > bNum) return -1;
+        else return 0
+    } else if (a.startsWith('rc') && b.startsWith('pre'))
+        return -1;
+    else if (a.startsWith('pre') && b.startsWith('rc'))
+        return 1;
+    else return a.localeCompare(b)
 }
\ No newline at end of file
diff --git a/src/views/Cores.vue b/src/views/Cores.vue
index 3fb4d13..50775f1 100644
--- a/src/views/Cores.vue
+++ b/src/views/Cores.vue
@@ -98,14 +98,23 @@ function search(text?: string) {
   border-radius: 0.5rem;
   padding: 0 8px;
   transition: 0.3s ease-in-out;
+  background: var(--bg-color-transparent);
+}
+
+[dark] .search {
+  border-color: var(--bg-color-transparent);
 }
 
 .search:hover {
   border-color: var(--text-color-primary);
 }
 
+[dark] .search:hover {
+  border-color: var(--text-color-secondary);
+}
+
 .search:focus {
-  border-color: var(--color-primary);
+  border-color: var(--color-primary) !important;
 }
 
 .core {
@@ -113,21 +122,25 @@ function search(text?: string) {
   justify-content: center;
   align-items: center;
   border-radius: 1rem;
-  background: #ffffffdd;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
   width: 100%;
   height: 4rem;
-  max-width: 14rem;
+  max-width: 12rem;
   margin: 0.5rem;
   gap: 1rem;
   padding: 0.5rem;
-  border: 1.5px solid #dddddd55;
+  border: 1.5px solid var(--bg-color-transparent);
   transition: ease-in-out 0.3s;
   cursor: pointer;
 }
 
 .core:hover {
-  border: 1.5px solid #dddddddd;
+  border-color: #dddddddd;
+}
+
+[dark] .core:hover {
+  border-color: var(--text-color-secondary);
 }
 
 .core div {
@@ -136,13 +149,13 @@ function search(text?: string) {
   align-items: start;
   flex-direction: column;
   border-radius: 0.5rem;
-  width: 9rem;
+  width: 7rem;
 }
 
 .core h3 {
   margin: 0;
-  font-size: 1.25rem;
-  width: 9rem;
+  font-size: 1.1rem;
+  width: 7rem;
   word-break: break-all;
   font-weight: 500;
   color: var(--text-color-primary);
@@ -153,7 +166,7 @@ function search(text?: string) {
 
 .core h4 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 400;
   color: var(--text-color-secondary);
   @media (max-width: 768px) {
diff --git a/src/views/NodeList.vue b/src/views/NodeList.vue
index 6f907eb..dd82f3e 100644
--- a/src/views/NodeList.vue
+++ b/src/views/NodeList.vue
@@ -9,9 +9,9 @@ import { statistics } from "../main.ts";
   <div class="node-container">
     <div class="nodes">
       <div class="node" v-for="node in statistics.config.node_list" :key="node.name">
-        <p><strong style="font-size: 1.1rem;">{{ node.name }}</strong></p>
-        <p>地址：{{ node.endpoint }}</p>
-        <p>类型：{{ formatNodeClientType(node.type) }}</p>
+        <h3>{{ node.name }}</h3>
+        <p>地址：<span>{{ node.endpoint }}</span></p>
+        <p>类型：<span>{{ formatNodeClientType(node.type) }}</span></p>
       </div>
     </div>
   </div>
@@ -34,23 +34,34 @@ import { statistics } from "../main.ts";
   justify-content: start;
   align-items: start;
   border-radius: 1rem;
-  background: #ffffffdd;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
   width: calc(100% - 2rem - 3px);
   height: fit-content;
   gap: 1rem;
   padding: 1rem;
-  border: 1.5px solid #dddddd55;
+  border: 1.5px solid var(--text-color-secondary);
   transition: ease-in-out 0.3s;
 }
 
+.node h3 {
+  font-size: 1.25rem;
+  font-weight: 550;
+  color: var(--text-color-primary);
+  margin: 0;
+  width: 100%;
+}
+
 .node p {
   font-size: 1rem;
   font-weight: 500;
-  color: var(--text-color-primary);
+  color: var(--text-color-regular);
   margin: 0;
   width: 100%;
-  word-break: break-all;
+}
+
+.node span {
+  font-weight: 450;
 }
 
 .node-container {
diff --git a/src/views/VersionInfo.vue b/src/views/VersionInfo.vue
index 3fe044c..6970440 100644
--- a/src/views/VersionInfo.vue
+++ b/src/views/VersionInfo.vue
@@ -52,38 +52,49 @@ function download() {
 <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 class="scrollbar" v-else-if="loadStatus === LoadingStatus.SUCCESS">
+    <div class="version-info">
+      <img :src="getCoreIcon(<string>core)" alt=""/>
+      <div>
+        <h2>{{ version }}</h2>
+        <div>
+          <h3>核心类型：{{ core }}</h3>
+          <h3>支持版本：{{ supportedVersion }}</h3>
+          <h3>同步时间：{{
+              new Date(versionInfo.build.sync_time === '1970-01-01T00:00:00Z' ? '未同步' : versionInfo.build.sync_time).toLocaleString()
+            }}</h3>
+        </div>
+        <button @click="download" :disabled="versionInfo.build.download_url.startsWith('errorcore')">
+          {{ versionInfo.build.download_url.startsWith('errorcore') ? '无法获取下载链接' : '立即下载' }}
+        </button>
+      </div>
     </div>
   </div>
   <Error v-else :message="'加载核心版本列表失败！<br/>' + loadStatus"/>
 </template>
 
 <style scoped>
+.scrollbar {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  overflow: auto;
+  height: 100%;
+}
+
 .version-info {
   margin: 0.5rem auto;
   display: flex;
   justify-content: start;
   align-items: center;
   border-radius: 2rem;
-  background: #ffffffdd;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
-  width: 80%;
+  width: fit-content;
   height: fit-content;
-  max-height: calc(100% - 7rem);
   gap: 2rem;
   padding: 1rem;
-  border: 1.5px solid #dddddd55;
+  border: 1.5px solid var(--bg-color-transparent);
   transition: ease-in-out 0.3s;
   @media (max-width: 768px) {
     flex-direction: column;
@@ -91,8 +102,18 @@ function download() {
   }
 }
 
+@media (max-width: 768px) {
+  .version-info > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .version-info img {
   height: 100%;
+  max-width: 15rem;
   border-radius: 1rem;
   flex-shrink: 0;
   @media (max-width: 768px) {
@@ -102,7 +123,7 @@ function download() {
 }
 
 .version-info h2 {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   font-weight: 500;
   margin: 0.7rem 0;
   color: var(--text-color-primary);
@@ -112,7 +133,7 @@ function download() {
 }
 
 .version-info h3 {
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 450;
   margin: 0.2rem 0;
   color: var(--text-color-regular);
diff --git a/src/views/VersionList.vue b/src/views/VersionList.vue
index 7c69f09..9616c0f 100644
--- a/src/views/VersionList.vue
+++ b/src/views/VersionList.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import Loading from '../components/Loading.vue'
-import { Ref, ref } from "vue";
+import {Ref, ref} from "vue";
 import LoadingStatus from "../utils/enums/LoadingStatus.ts";
-import { BASE_URL } from "../main.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";
+import {getCoreIcon, sortCoreVersions, sortSupportedVersions} from "../utils/util.ts";
 
 const core = router.currentRoute.value.params.core;
 let version: Ref<String | undefined> = ref(undefined);
@@ -19,7 +19,7 @@ const versionList = ref([]);
 
 // 获取支持的版本列表
 axios.get(BASE_URL + 'core/' + core).then(res => {
-  supportedVersions.value = res.data.data.versions;
+  supportedVersions.value = sortSupportedVersions(core, res.data.data.versions);
   if (supportedVersions.value.length !== 0) {
     if (version.value === undefined) {
       // 路径里没有版本就重定向到一个版本
@@ -47,7 +47,7 @@ axios.get(BASE_URL + 'core/' + core).then(res => {
 function getVersions() {
   loadStatus.value = LoadingStatus.LOADING;
   axios.get(BASE_URL + 'core/' + core + '/' + version.value).then(res => {
-    versionList.value = res.data.data.builds;
+    versionList.value = sortCoreVersions(core, res.data.data.builds);
     loadStatus.value = LoadingStatus.SUCCESS;
   }).catch(e => {
     console.error(e);
@@ -67,15 +67,15 @@ function changeVersion(e: Event) {
 </script>
 
 <template>
-  <Back />
-  <Loading v-if="loadStatus === LoadingStatus.LOADING" message="加载服务端核心版本列表中..." />
+  <Back/>
+  <Loading v-if="loadStatus === LoadingStatus.LOADING" message="加载服务端核心版本列表中..."/>
   <div class="version-container" v-else-if="loadStatus === LoadingStatus.SUCCESS">
     <select :value="version" @change="changeVersion">
       <option v-for="version in supportedVersions" :value="version"> {{ version }}</option>
     </select>
     <div class="versions">
       <div class="version" v-for="ver in versionList" @click="router.push('/core/' + core + '/' + version + '/' + ver)">
-        <img :src="getCoreIcon(<string>core)" alt="" />
+        <img :src="getCoreIcon(<string>core)" alt=""/>
         <div>
           <h2>{{ ver }}</h2>
           <h3>支持版本：{{ version }}</h3>
@@ -83,7 +83,7 @@ function changeVersion(e: Event) {
       </div>
     </div>
   </div>
-  <Error v-else :message="'加载核心版本列表失败！<br/>' + loadStatus" />
+  <Error v-else :message="'加载核心版本列表失败！<br/>' + loadStatus"/>
 </template>
 
 <style scoped>
@@ -100,19 +100,23 @@ function changeVersion(e: Event) {
   justify-content: start;
   align-items: center;
   border-radius: 1.5rem;
-  background: #ffffffdd;
+  background: var(--bg-color-transparent);
   backdrop-filter: blur(5px);
   width: calc(100% - 2rem - 3px);
   height: 4rem;
   gap: 1rem;
   padding: 1rem;
-  border: 1.5px solid #dddddd55;
+  border: 1.5px solid var(--bg-color-transparent);
   transition: ease-in-out 0.3s;
   cursor: pointer;
 }
 
 .version:hover {
-  border: 1.5px solid #dddddddd;
+  border-color: #dddddddd;
+}
+
+[dark] .version:hover {
+  border-color: var(--text-color-secondary);
 }
 
 .version img {
@@ -173,6 +177,11 @@ function changeVersion(e: Event) {
 
 .version-container select:hover {
   background: #ffffff77;
+  color: var(--color-primary);
   border-color: var(--color-primary);
 }
+
+[dark] .version-container select:hover {
+  background: #31323377;
+}
 </style>
\ No newline at end of file