diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..90f9de1
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:3000/api
+VUE_APP_ENV=development
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..e72f72b
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:3000/api # 替换为自己的生产环境域名
+VUE_APP_ENV=production
\ No newline at end of file
diff --git a/package.json b/package.json
index 882ec1f..140e4c5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "echarts": "^6.0.0",
     "neoeasytierweb": "link:",
     "tailwindcss": "^4.1.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfcc848..184d080 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      axios:
+        specifier: ^1.13.2
+        version: 1.13.2
       echarts:
         specifier: ^6.0.0
         version: 6.0.0
@@ -415,67 +418,56 @@ packages:
     resolution: {integrity: sha512-JzWRR41o2U3/KMNKRuZNsDUAcAVUYhsPuMlx5RUldw0E4lvSIXFUwejtYz1HJXohUmqs/M6BBJAUBzKXZVddbg==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.1':
     resolution: {integrity: sha512-L8kRIrnfMrEoHLHtHn+4uYA52fiLDEDyezgxZtGUTiII/yb04Krq+vk3P2Try+Vya9LeCE9ZHU8CXD6J9EhzHQ==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.1':
     resolution: {integrity: sha512-ysAc0MFRV+WtQ8li8hi3EoFi7us6d1UzaS/+Dp7FYZfg3NdDljGMoVyiIp6Ucz7uhlYDBZ/zt6XI0YEZbUO11Q==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.1':
     resolution: {integrity: sha512-UV6l9MJpDbDZZ/fJvqNcvO1PcivGEf1AvKuTcHoLjVZVFeAMygnamCTDikCVMRnA+qJe+B3pSbgX2+lBMqgBhA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.1':
     resolution: {integrity: sha512-UDUtelEprkA85g95Q+nj3Xf0M4hHa4DiJ+3P3h4BuGliY4NReYYqwlc0Y8ICLjN4+uIgCEvaygYlpf0hUj90Yg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.1':
     resolution: {integrity: sha512-vrRn+BYhEtNOte/zbc2wAUQReJXxEx2URfTol6OEfY2zFEUK92pkFBSXRylDM7aHi+YqEPJt9/ABYzmcrS4SgQ==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.1':
     resolution: {integrity: sha512-gto/1CxHyi4A7YqZZNznQYrVlPSaodOBPKM+6xcDSCMVZN/Fzb4K+AIkNz/1yAYz9h3Ng+e2fY9H6bgawVq17w==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.1':
     resolution: {integrity: sha512-KZ6Vx7jAw3aLNjFR8eYVcQVdFa/cvBzDNRFM3z7XhNNunWjA03eUrEwJYPk0G8V7Gs08IThFKcAPS4WY/ybIrQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.1':
     resolution: {integrity: sha512-HvEixy2s/rWNgpwyKpXJcHmE7om1M89hxBTBi9Fs6zVuLU4gOrEMQNbNsN/tBVIMbLyysz/iwNiGtMOpLAOlvA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.1':
     resolution: {integrity: sha512-E/n8x2MSjAQgjj9IixO4UeEUeqXLtiA7pyoXCFYLuXpBA/t2hnbIdxHfA7kK9BFsYAoNU4st1rHYdldl8dTqGA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.1':
     resolution: {integrity: sha512-IhJ087PbLOQXCN6Ui/3FUkI9pWNZe/Z7rEIVOzMsOs1/HSAECCvSZ7PkIbkNqL/AZn6WbZvnoVZw/qwqYMo4/w==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.1':
     resolution: {integrity: sha512-0++oPNgLJHBblreu0SFM7b3mAsBJBTY0Ksrmu9N6ZVrPiTkRgda52mWR7TKhHAsUb9noCjFvAw9l6ZO1yzaVbA==}
@@ -540,28 +532,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
     resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
     resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.17':
     resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.17':
     resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
@@ -710,6 +698,12 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
   baseline-browser-mapping@2.8.25:
     resolution: {integrity: sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==}
     hasBin: true
@@ -726,9 +720,17 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
   caniuse-lite@1.0.30001754:
     resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -767,10 +769,18 @@ packages:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   echarts@6.0.0:
     resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
 
@@ -788,6 +798,22 @@ packages:
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.25.12:
     resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
     engines: {node: '>=18'}
@@ -809,18 +835,58 @@ packages:
       picomatch:
         optional: true
 
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+    engines: {node: '>= 6'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -908,28 +974,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -953,10 +1015,22 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -1028,6 +1102,9 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   read-package-json-fast@4.0.0:
     resolution: {integrity: sha512-qpt8EwugBWDw2cgE2W+/3oxC+KTez2uSVR8JU9Q36TXPAGCaozfQUs59v4j4GFpWTaw0i6hAZSvOmu1J0uOEUg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -1819,6 +1896,16 @@ snapshots:
 
   ansis@4.2.0: {}
 
+  asynckit@0.4.0: {}
+
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.4
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   baseline-browser-mapping@2.8.25: {}
 
   birpc@2.8.0: {}
@@ -1835,8 +1922,17 @@ snapshots:
     dependencies:
       run-applescript: 7.1.0
 
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
   caniuse-lite@1.0.30001754: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   convert-source-map@2.0.0: {}
 
   copy-anything@4.0.5:
@@ -1866,8 +1962,16 @@ snapshots:
 
   define-lazy-prop@3.0.0: {}
 
+  delayed-stream@1.0.0: {}
+
   detect-libc@2.1.2: {}
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   echarts@6.0.0:
     dependencies:
       tslib: 2.3.0
@@ -1884,6 +1988,21 @@ snapshots:
 
   error-stack-parser-es@1.0.5: {}
 
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   esbuild@0.25.12:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.12
@@ -1921,13 +2040,55 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.4:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
   fsevents@2.3.3:
     optional: true
 
+  function-bind@1.1.2: {}
+
   gensync@1.0.0-beta.2: {}
 
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  gopd@1.2.0: {}
+
   graceful-fs@4.2.11: {}
 
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
   hookable@5.5.3: {}
 
   is-docker@3.0.0: {}
@@ -2015,8 +2176,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  math-intrinsics@1.1.0: {}
+
   memorystream@0.3.1: {}
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mitt@3.0.1: {}
 
   mrmime@2.0.1: {}
@@ -2073,6 +2242,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  proxy-from-env@1.1.0: {}
+
   read-package-json-fast@4.0.0:
     dependencies:
       json-parse-even-better-errors: 4.0.0
diff --git a/src/App.vue b/src/App.vue
index a1b64b2..6840c91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,36 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { isAuthenticated } from '@/utils/request/api'
+
 const year = new Date().getFullYear()
+const isLoggedIn = ref(false)
+
+onMounted(() => {
+  isLoggedIn.value = isAuthenticated()
+  
+  // Re-check auth status on storage changes
+  window.addEventListener('storage', () => {
+    isLoggedIn.value = isAuthenticated()
+  })
+})
 </script>
 
 <template>
   <div class="layout">
     <header class="navbar bg-base-100 shadow-md">
       <div class="navbar-start">
-        <div class="dropdown">
-          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
-            </svg>
-          </div>
-          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
-            <li><RouterLink to="/">主页</RouterLink></li>
-            <li><RouterLink to="/monitor">节点监控</RouterLink></li>
-            <li><RouterLink to="/submit">提交节点</RouterLink></li>
-          </ul>
-        </div>
         <div class="flex-1">
           <h1 class="btn btn-ghost normal-case text-2xl font-bold">EasyTierMC Uptime</h1>
         </div>
       </div>
-      <div class="navbar-end hidden lg:flex">
+      <div class="navbar-end lg:flex">
         <ul class="menu menu-horizontal px-1 gap-2">
           <li><RouterLink to="/" class="btn btn-ghost">主页</RouterLink></li>
           <li><RouterLink to="/monitor" class="btn btn-ghost">节点监控</RouterLink></li>
           <li><RouterLink to="/submit" class="btn btn-ghost">提交节点</RouterLink></li>
+          <li v-if="isLoggedIn"><RouterLink to="/dashboard" class="btn btn-ghost">管理控制台</RouterLink></li>
+          <li v-else><RouterLink to="/login" class="btn btn-ghost">登录</RouterLink></li>
         </ul>
       </div>
     </header>
diff --git a/src/router/index.ts b/src/router/index.ts
index 2efc3c1..e8738af 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,16 @@ const router = createRouter({
       name: 'submit',
       component: () => import('../views/SubmitView.vue'),
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginView.vue'),
+    },
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: () => import('../views/DashboardView.vue'),
+    },
   ],
 })
 
diff --git a/src/utils/request/api.ts b/src/utils/request/api.ts
new file mode 100644
index 0000000..e26a758
--- /dev/null
+++ b/src/utils/request/api.ts
@@ -0,0 +1,88 @@
+import Api from './index'
+
+export interface HealthResponse {
+  status?: string
+  uptime?: number
+  [key: string]: any
+}
+
+export function getHealth() {
+  const path = import.meta.env.VITE_HEALTH_PATH || '/health'
+  return Api.get<HealthResponse>(path)
+}
+
+export function getApiDocsUrl() {
+  return import.meta.env.VITE_API_DOCS_URL || `${import.meta.env.VITE_API_BASE_URL}/api`
+}
+
+export interface LoginResponse {
+  token: string
+  [key: string]: any
+}
+
+export async function login(username: string, password: string) {
+  const res = (await Api.post<LoginResponse>('/auth/login', { username, password })) as unknown as LoginResponse
+  const token = (res as any)?.data.token
+  if (token) {
+    localStorage.setItem('auth_token', token)
+  }
+  return res
+}
+
+export function logout() {
+  localStorage.removeItem('auth_token')
+}
+
+export function isAuthenticated() {
+  return !!localStorage.getItem('auth_token')
+}
+
+export function getMe() {
+  return (Api.get('/auth/me') as Promise<any>)
+}
+
+// Admin list (requires admin role)
+export function listAdmins() {
+  return Api.get('/admins') as Promise<any[]>
+}
+
+export function deleteAdmin(id: string | number) {
+  return Api.delete(`/admins/${id}`)
+}
+
+export function createApiKey(data: any) {
+  return Api.post('/api-keys', data)
+}
+
+export function listApiKeys() {
+  return Api.get('/api-keys') as Promise<any[]>
+}
+
+export function toggleApiKeyStatus(id: string | number, status: string) {
+  return Api.patch(`/api-keys/${id}/status`, { status })
+}
+
+export function deleteApiKey(id: string | number) {
+  return Api.delete(`/api-keys/${id}`)
+}
+
+export function createNode(data: any) {
+  return Api.post('/nodes', data)
+}
+
+export function listNodes() {
+  return Api.get('/nodes') as Promise<any[]>
+}
+
+export function deleteNode(id: string | number) {
+  return Api.delete(`/nodes/${id}`)
+}
+
+export function updateNodeStatus(id: string | number, status: string) {
+  return Api.put(`/nodes/${id}/status`, { status })
+}
+
+// Public peers (optional API key)
+export function getPeers() {
+  return Api.get('/peers') as Promise<any[]>
+}
\ No newline at end of file
diff --git a/src/utils/request/index.ts b/src/utils/request/index.ts
new file mode 100644
index 0000000..be852f9
--- /dev/null
+++ b/src/utils/request/index.ts
@@ -0,0 +1,39 @@
+import axios from 'axios'
+
+const Api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  },
+  withCredentials: false,
+  timeout: 30000
+})
+
+Api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('auth_token')
+    if (token) {
+      config.headers = config.headers || {}
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+
+Api.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response) {
+      const { status, data } = error.response
+      const message = data?.message || `Request failed with status ${status}`
+      return Promise.reject(new Error(message))
+    }
+    if (error.request) {
+      return Promise.reject(new Error('Network error or no response from server'))
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default Api
\ No newline at end of file
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
new file mode 100644
index 0000000..be9c086
--- /dev/null
+++ b/src/views/DashboardView.vue
@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  getMe,
+  listAdmins,
+  deleteAdmin,
+  listApiKeys,
+  createApiKey,
+  toggleApiKeyStatus,
+  deleteApiKey,
+  listNodes,
+  deleteNode,
+  updateNodeStatus,
+  logout
+} from '@/utils/request/api'
+
+const router = useRouter()
+
+// User info
+const currentUser = ref<any>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+// Active tab
+const activeTab = ref<'nodes' | 'apiKeys' | 'users'>('nodes')
+
+// Nodes
+const nodeList = ref<any[]>([])
+const loadingNodes = ref(false)
+
+// API Keys
+const apiKeys = ref<any[]>([])
+const loadingApiKeys = ref(false)
+const showApiKeyForm = ref(false)
+const apiKeyForm = ref({ name: '', rateLimit: 100 })
+
+// Admins
+const userList = ref<any[]>([])
+const loadingAdmins = ref(false)
+
+const isAdmin = computed(() => currentUser.value?.username === 'admin')
+
+async function fetchUserInfo() {
+  try {
+    const { data } = await getMe()
+    currentUser.value = data
+  } catch (e: any) {
+    console.error(e);
+    
+    error.value = '未授权，请先登录'
+    logout()
+    setTimeout(() => router.push('/login'), 1500)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Nodes management
+async function fetchNodes() {
+  loadingNodes.value = true
+  try {
+    const {data} = await listNodes()
+    nodeList.value = data
+  } catch (e: any) {
+    console.error('获取节点失败:', e)
+  } finally {
+    loadingNodes.value = false
+  }
+}
+
+async function handleDeleteNode(id: string | number) {
+  if (!confirm('确定删除此节点？')) return
+  try {
+    await deleteNode(id)
+    await fetchNodes()
+  } catch (e: any) {
+    alert('删除失败: ' + (e.message || e))
+  }
+}
+
+async function handleToggleNodeStatus(node: any) {
+  try {
+    const newStatus = node.status === 'active' ? 'inactive' : 'active'
+    await updateNodeStatus(node.id, newStatus)
+    await fetchNodes()
+  } catch (e: any) {
+    alert('更新状态失败: ' + (e.message || e))
+  }
+}
+
+// API Keys management
+async function fetchApiKeys() {
+  loadingApiKeys.value = true
+  try {
+    const {data} = await listApiKeys()
+    
+    apiKeys.value = data
+  } catch (e: any) {
+    console.error('获取 API Keys 失败:', e)
+  } finally {
+    loadingApiKeys.value = false
+  }
+}
+
+async function handleCreateApiKey() {
+  if (!apiKeyForm.value.name) return
+  try {
+    await createApiKey(apiKeyForm.value)
+    apiKeyForm.value = { name: '', rateLimit: 100 }
+    showApiKeyForm.value = false
+    await fetchApiKeys()
+  } catch (e: any) {
+    alert('创建 API Key 失败: ' + (e.message || e))
+  }
+}
+
+async function handleToggleApiKeyStatus(key: any) {
+  try {
+    const newStatus = key.is_active === 'active' ? 'inactive' : 'active'
+    await toggleApiKeyStatus(key.id, newStatus)
+    await fetchApiKeys()
+  } catch (e: any) {
+    alert('更新状态失败: ' + (e.message || e))
+  }
+}
+
+async function handleDeleteApiKey(id: string | number) {
+  if (!confirm('确定删除此 API Key')) return
+  try {
+    await deleteApiKey(id)
+    await fetchApiKeys()
+  } catch (e: any) {
+    alert('删除失败: ' + (e.message || e))
+  }
+}
+
+// Admins management
+async function fetchAdmins() {
+  if (!isAdmin.value) return
+  loadingAdmins.value = true
+  try {
+    const { data } = await listAdmins()
+    
+    userList.value = data
+  } catch (e: any) {
+    console.error('获取管理员列表失败:', e)
+  } finally {
+    loadingAdmins.value = false
+  }
+}
+
+async function handleDeleteAdmin(id: string | number) {
+  if (!confirm('确定删除此管理员？')) return
+  try {
+    await deleteAdmin(id)
+    await fetchAdmins()
+  } catch (e: any) {
+    alert('删除失败: ' + (e.message || e))
+  }
+}
+
+function handleLogout() {
+  logout()
+  router.push('/login')
+}
+
+// Tab switching
+function switchTab(tab: 'nodes' | 'apiKeys' | 'users') {
+  activeTab.value = tab
+  if (tab === 'nodes' && nodeList.value.length === 0) fetchNodes()
+  if (tab === 'apiKeys' && apiKeys.value.length === 0) fetchApiKeys()
+  if (tab === 'users' && userList.value.length === 0) fetchAdmins()
+}
+
+onMounted(async () => {
+  await fetchUserInfo()
+  
+  if (!error.value) await fetchNodes()
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto">
+    <div v-if="loading" class="text-center py-8">加载中...</div>
+    <div v-else-if="error" class="alert alert-error">{{ error }}</div>
+    <div v-else>
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-6">
+        <div>
+          <h1 class="text-3xl font-bold">管理控制台</h1>
+          <p class="text-base-content/70 mt-1">
+            欢迎，{{ currentUser?.username }}
+            <span v-if="currentUser?.role" class="badge badge-sm ml-2">{{ currentUser.role }}</span>
+          </p>
+        </div>
+        <button class="btn btn-ghost btn-sm" @click="handleLogout">退出登录</button>
+      </div>
+
+      <!-- Tabs -->
+      <div role="tablist" class="tabs tabs-bordered mb-4">
+        <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'nodes' }"
+          @click="switchTab('nodes')">
+          节点管理
+        </a>
+        <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'apiKeys' }"
+          @click="switchTab('apiKeys')">
+          API Keys
+        </a>
+        <a v-if="isAdmin" role="tab" class="tab" :class="{ 'tab-active': activeTab === 'users' }"
+          @click="switchTab('users')">
+          管理员
+        </a>
+      </div>
+
+      <!-- Nodes Tab -->
+      <div v-show="activeTab === 'nodes'" class="space-y-4">
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-semibold">节点列表</h2>
+        </div>
+
+        <!-- Nodes Table -->
+        <div class="overflow-x-auto">
+          <table class="table table-zebra w-full">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>名称</th>
+                <th>地址</th>
+                <th>协议</th>
+                <th>最大连接</th>
+                <th>中继</th>
+                <th>区域</th>
+                <th>运营商</th>
+                <th>状态</th>
+                <th>响应时间</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="loadingNodes">
+                <td colspan="11" class="text-center">加载中...</td>
+              </tr>
+              <tr v-else-if="nodeList.length === 0">
+                <td colspan="11" class="text-center text-base-content/60">暂无节点</td>
+              </tr>
+              <tr v-else v-for="node in nodeList" :key="node.id">
+                <td>{{ node.id }}</td>
+                <td>
+                  <div class="font-medium">{{ node.name }}</div>
+                  <div v-if="node.description" class="text-xs text-base-content/60">{{ node.description }}</div>
+                </td>
+                <td>
+                  <div class="font-mono text-sm">{{ node.host }}:{{ node.port }}</div>
+                  <div v-if="node.network_name" class="text-xs text-base-content/60">网络: {{ node.network_name }}</div>
+                </td>
+                <td>
+                  <span class="badge badge-sm">{{ node.protocol?.toUpperCase() }}</span>
+                </td>
+                <td>{{ node.max_connections }}</td>
+                <td>
+                  <span v-if="node.allow_relay" class="badge badge-success badge-sm">允许</span>
+                  <span v-else class="badge badge-ghost badge-sm">禁止</span>
+                </td>
+                <td>{{ node.region || '-' }}</td>
+                <td>{{ node.ISP || '-' }}</td>
+                <td>
+                  <span
+                    class="badge badge-sm"
+                    :class="{
+                      'badge-success': node.status === 'Online',
+                      'badge-error': node.status === 'Offline',
+                      'badge-warning': node.status === 'Checking',
+                      'badge-ghost': !node.status
+                    }"
+                  >
+                    {{ node.status || 'Unknown' }}
+                  </span>
+                  <div v-if="node.last_status_update" class="text-xs text-base-content/60 mt-1">
+                    {{ new Date(node.last_status_update).toLocaleString() }}
+                  </div>
+                </td>
+                <td>
+                  <span v-if="node.response_time">{{ node.response_time }}ms</span>
+                  <span v-else class="text-base-content/60">-</span>
+                </td>
+                <td>
+                  <div class="flex gap-1">
+                    <button
+                      class="btn btn-xs btn-ghost"
+                      @click="handleToggleNodeStatus(node)"
+                      :title="node.status === 'Online' ? '设为离线' : '设为在线'"
+                    >
+                      切换
+                    </button>
+                    <button
+                      class="btn btn-xs btn-error"
+                      @click="handleDeleteNode(node.id)"
+                    >
+                      删除
+                    </button>
+                  </div>
+                  <div v-if="node.qq_number || node.mail" class="text-xs text-base-content/60 mt-1">
+                    <div v-if="node.qq_number">QQ: {{ node.qq_number }}</div>
+                    <div v-if="node.mail">{{ node.mail }}</div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- API Keys Tab -->
+      <div v-show="activeTab === 'apiKeys'" class="space-y-4">
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-semibold">API Key 列表</h2>
+          <button class="btn btn-primary btn-sm" @click="showApiKeyForm = !showApiKeyForm">
+            {{ showApiKeyForm ? '取消' : '+ 创建 API Key' }}
+          </button>
+        </div>
+
+        <!-- API Key Form -->
+        <div v-if="showApiKeyForm" class="card bg-base-200 shadow">
+          <div class="card-body">
+            <h3 class="card-title text-lg">创建新 API Key</h3>
+            <form @submit.prevent="handleCreateApiKey" class="grid gap-3">
+              <input v-model="apiKeyForm.name" type="text" placeholder="API Key 名称"
+                class="input input-bordered" required />
+              <input v-model.number="apiKeyForm.rateLimit" type="number" placeholder="速率限制（次/分钟）"
+                class="input input-bordered" min="1" />
+              <button type="submit" class="btn btn-primary">创建</button>
+            </form>
+          </div>
+        </div>
+
+        <!-- API Keys Table -->
+        <div class="overflow-x-auto">
+          <table class="table table-zebra w-full">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Key</th>
+                <th>描述</th>
+                <th>速率限制</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="loadingApiKeys">
+                <td colspan="6" class="text-center">加载中...</td>
+              </tr>
+              <tr v-else-if="apiKeys.length === 0">
+                <td colspan="6" class="text-center text-base-content/60">暂无 API Key</td>
+              </tr>
+              <tr v-else v-for="key in apiKeys" :key="key.id">
+                <td>{{ key.id }}</td>
+                <td class="font-mono text-xs">{{ key.key }}</td>
+                <td>{{ key.description }}</td>
+                <td>{{ key.rate_limit}}</td>
+                <td>
+                  <span class="badge" :class="key.status === 'active' ? 'badge-success' : 'badge-ghost'">
+                    {{ key.is_active }}
+                  </span>
+                </td>
+                <td>
+                  <button class="btn btn-xs btn-ghost" @click="handleToggleApiKeyStatus(key)" >
+                    切换状态
+                  </button>
+                  <button class="btn btn-xs btn-error ml-1" @click="handleDeleteApiKey(key.id)"> 
+                    删除
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Admins Tab -->
+      <div v-if="isAdmin" v-show="activeTab === 'users'" class="space-y-4">
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-semibold">管理员列表</h2>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="table table-zebra w-full">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>用户名</th>
+                <th>Email</th>
+                <th>创建时间</th>
+                <th>更新时间</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="loadingAdmins">
+                <td colspan="6" class="text-center">加载中...</td>
+              </tr>
+              <tr v-else-if="userList.length === 0">
+                <td colspan="6" class="text-center text-base-content/60">暂无管理员</td>
+              </tr>
+              <tr v-else v-for="user in userList" :key="user.id">
+                <td>{{ user.id }}</td>
+                <td>{{ user.username }}</td>
+                <td>{{ user.email }}</td>
+                <td>{{ new Date(user.created_at).toLocaleDateString()}}</td>
+                <td>{{ new Date(user.updated_at).toLocaleDateString()}}</td>
+                <td>
+                  <button v-if="user.id !== currentUser?.id" class="btn btn-xs btn-error" @click="handleDeleteAdmin(user.id)">
+                    删除
+                  </button>
+                  <span v-else class="text-xs text-base-content/60">当前用户</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tabs {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..a11153f
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { login } from '@/utils/request/api'
+
+const router = useRouter()
+
+const username = ref('admin')
+const password = ref('admin123')
+const loading = ref(false)
+const error = ref<string | null>(null)
+const success = ref(false)
+
+async function onSubmit() {
+  if (!username.value || !password.value) {
+    error.value = '请输入用户名和密码'
+    return
+  }
+  loading.value = true
+  error.value = null
+  success.value = false
+  try {
+    await login(username.value, password.value)
+    success.value = true
+    // 登录成功后跳转到管理控制台
+    setTimeout(() => router.push('/dashboard'), 600)
+  } catch (e: any) {
+    error.value = e?.message || '登录失败，请重试'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-[calc(100vh-200px)] flex items-center justify-center">
+    <div class="max-w-md w-full mx-auto px-4">
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <h2 class="card-title text-2xl justify-center mb-4">登录</h2>
+
+          <form @submit.prevent="onSubmit" class="flex flex-col gap-4">
+            <label class="form-control w-full">
+              <div class="label">
+                <span class="label-text font-medium">用户账户</span>
+              </div>
+              <input v-model="username" type="text" class="input input-bordered w-full" autocomplete="username" />
+            </label>
+            <label class="form-control w-full">
+              <div class="label">
+                <span class="label-text font-medium">登陆密码</span>
+              </div>
+              <input v-model="password" type="password" class="input input-bordered w-full" autocomplete="current-password" />
+            </label>
+            
+            <div v-if="error" class="alert alert-error">
+              <span>{{ error }}</span>
+            </div>
+            <button class="btn btn-primary mt-2 w-full" type="submit" :disabled="loading">
+              <span>{{loading ? '登录中...' : '登录' }}</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/views/SubmitView.vue b/src/views/SubmitView.vue
index 1ae18b2..276304f 100644
--- a/src/views/SubmitView.vue
+++ b/src/views/SubmitView.vue
@@ -1,10 +1,211 @@
 <template>
-  <div>
-    <h2>提交节点</h2>
-    <p>这里是提交节点页面。</p>
+  <div class="flex justify-center px-4">
+    <div class="w-full max-w-3xl">
+      <h2 class="text-3xl font-bold mb-2">提交节点</h2>
+      <p class="text-base-content/70 mb-6">填写以下信息提交新的 EasyTier 节点</p>
+      
+      <div class="card bg-base-100 shadow-lg">
+      <div class="card-body">
+        <h3 class="card-title text-xl mb-4">节点信息</h3>
+        <form @submit.prevent="handleCreateNode" class="grid gap-4">
+          
+          <!-- 基础信息 -->
+          <div class="grid md:grid-cols-2 gap-4">
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">节点名称 <span class="text-error">*</span></span>
+              </div>
+              <input v-model="nodeForm.name" type="text" placeholder="例如：北京联通节点" class="input input-bordered" required />
+            </label>
+
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">主机地址 <span class="text-error">*</span></span>
+              </div>
+              <input v-model="nodeForm.host" type="text" placeholder="例如：example.com 或 192.168.1.1" class="input input-bordered" required />
+            </label>
+          </div>
+
+          <div class="grid md:grid-cols-2 gap-4">
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">端口 <span class="text-error">*</span></span>
+              </div>
+              <input v-model.number="nodeForm.port" type="number" placeholder="例如：11010" class="input input-bordered" min="1" max="65535" required />
+            </label>
+
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">最大连接数 <span class="text-error">*</span></span>
+              </div>
+              <input v-model.number="nodeForm.max_connections" type="number" placeholder="例如：10" class="input input-bordered" min="1" required />
+            </label>
+          </div>
+
+          <!-- 协议选择 -->
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">协议 <span class="text-error">*</span></span>
+            </label>
+            <div class="flex gap-4 flex-wrap">
+              <label class="label cursor-pointer gap-2">
+                <input v-model="nodeForm.protocol" type="radio" value="http" class="radio radio-primary" required />
+                <span>HTTP</span>
+              </label>
+              <label class="label cursor-pointer gap-2">
+                <input v-model="nodeForm.protocol" type="radio" value="https" class="radio radio-primary" />
+                <span>HTTPS</span>
+              </label>
+              <label class="label cursor-pointer gap-2">
+                <input v-model="nodeForm.protocol" type="radio" value="ws" class="radio radio-primary" />
+                <span>WS</span>
+              </label>
+              <label class="label cursor-pointer gap-2">
+                <input v-model="nodeForm.protocol" type="radio" value="wss" class="radio radio-primary" />
+                <span>WSS</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- 允许中继 -->
+          <div class="form-control">
+            <label class="label cursor-pointer justify-start gap-3">
+              <input v-model="nodeForm.allow_relay" type="checkbox" class="checkbox checkbox-primary" />
+              <span class="label-text">允许中继连接</span>
+            </label>
+          </div>
+
+          <!-- 网络配置 -->
+          <div class="divider">网络配置</div>
+          
+          <div class="grid md:grid-cols-2 gap-4">
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">网络名称</span>
+              </div>
+              <input v-model="nodeForm.network_name" type="text" placeholder="默认网络" class="input input-bordered" />
+            </label>
+
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">网络密钥</span>
+              </div>
+              <input v-model="nodeForm.network_secret" type="password" placeholder="留空表示无密钥" class="input input-bordered" />
+            </label>
+          </div>
+
+          <!-- 地理位置 -->
+          <div class="divider">地理位置</div>
+          
+          <div class="grid md:grid-cols-2 gap-4">
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">区域位置</span>
+              </div>
+              <input v-model="nodeForm.region" type="text" placeholder="例如：华北、华东" class="input input-bordered" />
+            </label>
+
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">运营商</span>
+              </div>
+              <input v-model="nodeForm.ISP" type="text" placeholder="例如：电信、联通、移动" class="input input-bordered" />
+            </label>
+          </div>
+
+          <!-- 联系方式 -->
+          <div class="divider">联系方式</div>
+          
+          <div class="grid md:grid-cols-2 gap-4">
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">QQ 号码</span>
+              </div>
+              <input v-model="nodeForm.qq_number" type="text" placeholder="例如：123456789" class="input input-bordered" />
+            </label>
+
+            <label class="form-control">
+              <div class="label">
+                <span class="label-text">邮箱地址</span>
+              </div>
+              <input v-model="nodeForm.mail" type="email" placeholder="例如：admin@example.com" class="input input-bordered" />
+            </label>
+          </div>
+
+          <!-- 描述 -->
+          <label class="form-control">
+            <div class="label">
+              <span class="label-text">节点描述</span>
+            </div>
+            <textarea v-model="nodeForm.description" placeholder="介绍一下这个节点..." class="textarea textarea-bordered h-24"></textarea>
+          </label>
+
+          <!-- 提交按钮 -->
+          <div class="card-actions justify-end mt-4">
+            <button type="button" class="btn btn-ghost" @click="resetForm">重置</button>
+            <button type="submit" class="btn btn-primary" :disabled="submitting">
+              <span v-if="submitting" class="loading loading-spinner loading-sm"></span>
+              <span>{{ submitting ? '提交中...' : '提交节点' }}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// 可根据需要添加逻辑
+import { createNode } from '@/utils/request/api'
+import { ref } from 'vue'
+
+const nodeForm = ref({
+  name: '',
+  host: '',
+  port: 11010,
+  protocol: 'http',
+  allow_relay: true,
+  network_name: null as string | null,
+  network_secret: null as string | null,
+  max_connections: 10,
+  region: null as string | null,
+  ISP: null as string | null,
+  qq_number: null as string | null,
+  mail: null as string | null,
+  description: ''
+})
+
+const submitting = ref(false)
+
+function resetForm() {
+  nodeForm.value = {
+    name: '',
+    host: '',
+    port: 11010,
+    protocol: 'http',
+    allow_relay: true,
+    network_name: null,
+    network_secret: null,
+    max_connections: 10,
+    region: null,
+    ISP: null,
+    qq_number: null,
+    mail: null,
+    description: ''
+  }
+}
+
+async function handleCreateNode() {
+  if (!nodeForm.value.name || !nodeForm.value.host) return
+  submitting.value = true
+  try {
+    await createNode(nodeForm.value)
+    alert('节点创建成功！')
+    resetForm()
+  } catch (e: any) {
+    alert('创建节点失败: ' + (e.message || e))
+  } finally {
+    submitting.value = false
+  }
+}
 </script>