diff --git a/README.md b/README.md
index 33895ab..bf95ff6 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-# Vue 3 + TypeScript + Vite
+# 服务器监控面板前端源码
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+![]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..247464b
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,727 @@
+{
+  "name": "server-status",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "server-status",
+      "version": "0.0.0",
+      "dependencies": {
+        "echarts": "^5.5.1",
+        "html2canvas": "^1.4.1",
+        "pnpm": "^9.12.0",
+        "vue": "^3.4.37",
+        "vue-router": "^4.4.5"
+      },
+      "devDependencies": {
+        "@types/node": "^22.7.4",
+        "@vitejs/plugin-vue": "^5.1.2",
+        "sax": "^1.4.1",
+        "typescript": "^5.5.3",
+        "vite": "^5.4.1",
+        "vue-tsc": "^2.0.29"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.7",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.7",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.0",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.7.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
+      "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
+      "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.5"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.5",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.11",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.11",
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-ssr": "3.5.11",
+        "@vue/shared": "3.5.11",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "license": "MIT"
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "~2.4.1",
+        "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.4.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.11",
+        "@vue/shared": "3.5.11"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.11",
+        "@vue/runtime-core": "3.5.11",
+        "@vue/shared": "3.5.11",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.11",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.11",
+        "@vue/shared": "3.5.11"
+      },
+      "peerDependencies": {
+        "vue": "3.5.11"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.11",
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "license": "MIT"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.0",
+      "license": "ISC"
+    },
+    "node_modules/pnpm": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/pnpm/-/pnpm-9.12.0.tgz",
+      "integrity": "sha512-Sr9yUITXvLr71yi/x77mHy95H5d/2HVCs1edyyNQTRcNRjN5ReTGZIXNEtWIoMDlcO2cR358zdhQfPBfP5Lqyg==",
+      "license": "MIT",
+      "bin": {
+        "pnpm": "bin/pnpm.cjs",
+        "pnpx": "bin/pnpx.cjs"
+      },
+      "engines": {
+        "node": ">=18.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.47",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.24.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.24.0",
+        "@rollup/rollup-android-arm64": "4.24.0",
+        "@rollup/rollup-darwin-arm64": "4.24.0",
+        "@rollup/rollup-darwin-x64": "4.24.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.0",
+        "@rollup/rollup-linux-arm64-musl": "4.24.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-musl": "4.24.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.0",
+        "@rollup/rollup-win32-x64-msvc": "4.24.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
+      "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-sfc": "3.5.11",
+        "@vue/runtime-dom": "3.5.11",
+        "@vue/server-renderer": "3.5.11",
+        "@vue/shared": "3.5.11"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
+      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.6.tgz",
+      "integrity": "sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~2.4.1",
+        "@vue/language-core": "2.1.6",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 59a40ce..674521d 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --mode dev",
-    "build": "vue-tsc -b && vite build --mode prod",
+    "dev": "vite --mode dev --host",
+    "build": "vue-tsc -b && vite build --mode prod && cp dist ../server-status-server/api/frontend/web",
     "preview": "vite preview"
   },
   "dependencies": {
     "echarts": "^5.5.1",
     "html2canvas": "^1.4.1",
+    "pnpm": "^9.12.0",
     "vue": "^3.4.37",
     "vue-router": "^4.4.5"
   },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 71ebe2b..4333e24 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,52 +1,136 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, Ref, ref} from "vue";
-import {getStatuses, Status} from "../api";
+import { computed, onMounted, onUnmounted, Ref, ref } from "vue";
+import { getStatuses, Status } from "../api";
 import Host from "../components/Host.vue";
-import {onlineTimeout} from "../api/utils.ts";
+import { onlineTimeout } from "../api/utils.ts";
 
-const statuses: Ref<Record<string, Status>> = ref({})
+const statuses: Ref<Record<string, Status>> = ref({});
+const offline = ref(0);
+const showOptions = ref(false);
+const selectedOption = ref('');
+const sortedKey = ref('name');
+const reverse = ref(false);
 
-const offline = ref(0)
+const toggleOptions = () => {
+  showOptions.value = !showOptions.value;
+};
 
-const onlineNum = computed(
-  () => {
-    const nowTimestamp = Date.now() / 1000
-    let online = 0
-    for (const status of Object.values(statuses.value)) {
-      if (nowTimestamp - status.meta.observed_at < onlineTimeout) {
-        online++
-      }
+const selectOption = (option: string) => {
+  selectedOption.value = option;
+  sortedKey.value = option;
+};
+
+const onlineNum = computed(() => {
+  const nowTimestamp = Date.now() / 1000;
+  let online = 0;
+  for (const status of Object.values(statuses.value)) {
+    if (nowTimestamp - status.meta.observed_at < onlineTimeout) {
+      online++;
     }
-    offline.value = Object.values(statuses.value).length - online
-    return online
   }
-)
+  offline.value = Object.values(statuses.value).length - online;
+  return online;
+});
+
+function sortByName(statusMap: Record<string, Status>) {
+  return Object.fromEntries(
+      Object.entries(statusMap).sort((a, b) => a[1].meta.name.localeCompare(b[1].meta.name))
+  );
+}
+
+function sortByUpTime(statusMap: Record<string, Status>) {
+  return Object.fromEntries(
+      Object.entries(statusMap).sort((a, b) => a[1].meta.uptime - b[1].meta.uptime)
+  );
+}
+
+function updateSort(statusMap: Record<string, Status>) {
+  let sortedMap = statusMap;
+  if (sortedKey.value === 'name') {
+    sortedMap = sortByName(statusMap);
+  } else if (sortedKey.value === 'uptime') {
+    sortedMap = sortByUpTime(statusMap);
+  } else if (sortedKey.value === 'memory') {
+    sortedMap = Object.fromEntries(
+        Object.entries(statusMap).sort((a, b) => a[1].hardware.mem.total - b[1].hardware.mem.total)
+    );
+  } else if (sortedKey.value === 'network') {
+    sortedMap = Object.fromEntries(
+        Object.entries(statusMap).sort((a, b) => a[1].hardware.net.down + a[1].hardware.net.up - b[1].hardware.net.down - b[1].hardware.net.up)
+    );
+  }
+
+
+  if (reverse.value) {
+    sortedMap = Object.fromEntries(Object.entries(sortedMap).reverse());
+  }
+  return sortedMap;
+}
 
 const timer = setInterval(async () => {
-  statuses.value = await getStatuses()
-}, 1000)
+  statuses.value = updateSort(await getStatuses());
+}, 1000);
 
 onMounted(async () => {
-  statuses.value = await getStatuses()
-})
+  statuses.value = updateSort(await getStatuses());
+});
 
 onUnmounted(() => {
-  clearInterval(timer)
-})
-
-
+  clearInterval(timer);
+});
 </script>
 
 <template>
-  <div class="overview" style="">
-    <h2>Overview: {{onlineNum}} Online {{offline}} Offline</h2>
+  <div class="overview">
+    <h2>Overview: {{ onlineNum }} Online {{ offline }} Offline</h2>
+  </div>
+  <div class="tabs" style="display: flex">
+    <button class="button-a" @click="toggleOptions">Sort by</button>
+    <transition name="slide-fade">
+      <div v-if="showOptions" class="options">
+        <button :class="{ selected: selectedOption === 'name' }" @click="() => selectOption('name')">Name</button>
+        <button :class="{ selected: selectedOption === 'uptime' }" @click="() => selectOption('uptime')">Uptime</button>
+        <button :class="{ selected: selectedOption === 'memory' }" @click="() => selectOption('memory')">Memory</button>
+        <button :class="{ selected: selectedOption === 'network' }" @click="() => selectOption('network')">Network</button>
+<!--        <button :class="{ selected: selectedOption === 'cpu' }" @click="() => selectOption('cpu')">CPU Percent</button>-->
+        <button :class="{ selected: reverse }" @click="() => reverse= !reverse" id="reverse-button">Reverse</button>
+      </div>
+    </transition>
   </div>
   <div class="grid-container">
-    <Host class="grid-item" v-for="(status, id) in statuses" :key="id" :status="status"/>
+    <Host class="grid-item" v-for="(status, id) in statuses" :key="id" :status="status" />
   </div>
 </template>
 
 <style scoped>
+
+.tabs{
+  margin-bottom: 1rem;
+}
+
+.button-a{
+  margin-left: 10px;
+}
+
+button {
+  margin: 10px 10px 0 0;
+  padding: 0.5rem 0.5rem;
+  border-radius: 50px;
+  border: none;
+  background: #36a7ec;
+
+}
+#reverse-button {
+  background: #05c860;
+}
+#reverse-button.selected {
+  background: #ff6347;
+}
+
+button.selected {
+  background: #ff6347; /* Selected button background color */
+}
+
 .overview {
   display: flex;
   justify-content: center;
@@ -59,4 +143,18 @@ onUnmounted(() => {
   gap: 20px;
   padding: 10px;
 }
+
+.options {
+  display: flex;
+  gap: 10px;
+}
+
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.slide-fade-enter-from, .slide-fade-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
 </style>
\ No newline at end of file
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index a9bfd91..86a02f8 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/index.ts","./src/api/node.ts","./src/api/utils.ts","./src/router/index.ts","./src/app.vue","./src/components/disk.vue","./src/components/helloworld.vue","./src/components/host.vue","./src/components/nav.vue","./src/components/outlineanime.vue","./src/views/home.vue","./src/views/test.vue"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/index.ts","./src/api/node.ts","./src/api/utils.ts","./src/router/index.ts","./src/App.vue","./src/components/Disk.vue","./src/components/HelloWorld.vue","./src/components/Host.vue","./src/components/Nav.vue","./src/components/OutlineAnime.vue","./src/views/Home.vue","./src/views/Test.vue"],"version":"5.6.2"}
\ No newline at end of file