diff --git a/package-lock.json b/package-lock.json
index f7f0f39..3c74b43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,8 +47,9 @@
         "unocss": "0.62.2",
         "unplugin-auto-import": "0.18.2",
         "unplugin-vue-components": "0.27.4",
+        "unplugin-vue-router": "0.10.8",
         "vite": "5.4.2",
-        "vite-plugin-pages": "0.32.3",
+        "vite-plugin-vue-layouts": "0.11.0",
         "vue-tsc": "2.0.29"
       },
       "engines": {
@@ -460,17 +461,17 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -563,11 +564,11 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.25.6.tgz",
-      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.25.9.tgz",
+      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
       "dependencies": {
-        "@babel/types": "^7.25.6"
+        "@babel/types": "^7.25.9"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -703,13 +704,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.25.6.tgz",
-      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.25.9.tgz",
+      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -742,7 +742,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1836,9 +1835,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
+      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -2090,15 +2089,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmmirror.com/@types/debug/-/debug-4.1.12.tgz",
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/ms": "*"
-      }
-    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-9.6.1.tgz",
@@ -2148,12 +2138,6 @@
       "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
       "dev": true
     },
-    "node_modules/@types/ms": {
-      "version": "0.7.34",
-      "resolved": "https://registry.npmmirror.com/@types/ms/-/ms-0.7.34.tgz",
-      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==",
-      "dev": true
-    },
     "node_modules/@types/node": {
       "version": "22.5.4",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.5.4.tgz",
@@ -2924,50 +2908,75 @@
         "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@vue-macros/common": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/@vue-macros/common/-/common-1.15.0.tgz",
+      "integrity": "sha512-yg5VqW7+HRfJGimdKvFYzx8zorHUYo0hzPwuraoC1DWa7HHazbTMoVsHDvk3JHa1SGfSL87fRnzmlvgjEHhszA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.8",
+        "@rollup/pluginutils": "^5.1.2",
+        "@vue/compiler-sfc": "^3.5.12",
+        "ast-kit": "^1.3.0",
+        "local-pkg": "^0.5.0",
+        "magic-string-ast": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.3.tgz",
-      "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.3",
+        "@vue/shared": "3.5.12",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz",
-      "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
       "dependencies": {
-        "@vue/compiler-core": "3.5.3",
-        "@vue/shared": "3.5.3"
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.3.tgz",
-      "integrity": "sha512-P3uATLny2tfyvMB04OQFe7Sczteno7SLFxwrOA/dw01pBWQHB5HL15a8PosoNX2aG/EAMGqnXTu+1LnmzFhpTQ==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.3",
-        "@vue/compiler-dom": "3.5.3",
-        "@vue/compiler-ssr": "3.5.3",
-        "@vue/shared": "3.5.3",
+        "@vue/compiler-core": "3.5.12",
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.11",
-        "postcss": "^8.4.44",
+        "postcss": "^8.4.47",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.3.tgz",
-      "integrity": "sha512-F/5f+r2WzL/2YAPl7UlKcJWHrvoZN8XwEBLnT7S4BXwncH25iDOabhO2M2DWioyTguJAGavDOawejkFXj8EM1w==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.3",
-        "@vue/shared": "3.5.3"
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -3100,9 +3109,9 @@
       "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.3.tgz",
-      "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA=="
+      "version": "3.5.12",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg=="
     },
     "node_modules/@vueuse/core": {
       "version": "9.13.0",
@@ -3327,6 +3336,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ast-kit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/ast-kit/-/ast-kit-1.3.0.tgz",
+      "integrity": "sha512-ORycPY6qYSrAGMnSk1tlqy/Y0rFGk/WIYP/H6io0A+jXK2Jp3Il7h8vjfwaLvZUwanjiLwBeE5h3A9M+eQqeNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.8",
+        "pathe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/ast-walker-scope/-/ast-walker-scope-0.6.2.tgz",
+      "integrity": "sha512-1UWOyC50xI3QZkRuDj6PqDtpm1oHWtYs+NQGwqL/2R11eN3Q81PHAHPM0SWW3BNQm53UDwS//Jv8L4CCVLM1bQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "ast-kit": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
     "node_modules/astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -4516,15 +4551,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/destr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/destr/-/destr-2.0.3.tgz",
@@ -5788,31 +5814,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/esprima-extract-comments": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/esprima-extract-comments/-/esprima-extract-comments-1.1.0.tgz",
-      "integrity": "sha512-sBQUnvJwpeE9QnPrxh7dpI/dp67erYG4WXEAreAMoelPRpMR7NWb4YtwRPn9b+H1uLQKl/qS8WYmyaljTpjIsw==",
-      "dev": true,
-      "dependencies": {
-        "esprima": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmmirror.com/esquery/-/esquery-1.6.0.tgz",
@@ -5921,19 +5922,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/extract-comments": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/extract-comments/-/extract-comments-1.1.0.tgz",
-      "integrity": "sha512-dzbZV2AdSSVW/4E7Ti5hZdHWbA+Z80RJsJhr5uiL10oyjl/gy7/o+HI1HwK4/WSZhlq4SNKU3oUzXlM13Qx02Q==",
-      "dev": true,
-      "dependencies": {
-        "esprima-extract-comments": "^1.1.0",
-        "parse-code-context": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7521,6 +7509,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/magic-string-ast": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/magic-string-ast/-/magic-string-ast-0.6.2.tgz",
+      "integrity": "sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.10"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz",
@@ -8101,15 +8101,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-code-context": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/parse-code-context/-/parse-code-context-1.0.0.tgz",
-      "integrity": "sha512-OZQaqKaQnR21iqhlnPfVisFjBWjhnMl5J9MgbP8xC+EwoVqbXrq78lp+9Zb3ahmLzrIX5Us/qbvBnaS3hkH6OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/parse-entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/parse-entities/-/parse-entities-2.0.0.tgz",
@@ -8376,9 +8367,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.45",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -8395,8 +8386,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -9152,9 +9143,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9789,14 +9780,6 @@
         "node": ">=0.6.0"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -10213,6 +10196,72 @@
         "node": ">= 6"
       }
     },
+    "node_modules/unplugin-vue-router": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-router/-/unplugin-vue-router-0.10.8.tgz",
+      "integrity": "sha512-xi+eLweYAqolIoTRSmumbi6Yx0z5M0PLvl+NFNVWHJgmE2ByJG1SZbrn+TqyuDtIyln20KKgq8tqmL7aLoiFjw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.4",
+        "@rollup/pluginutils": "^5.1.0",
+        "@vue-macros/common": "^1.12.2",
+        "ast-walker-scope": "^0.6.2",
+        "chokidar": "^3.6.0",
+        "fast-glob": "^3.3.2",
+        "json5": "^2.2.3",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.11",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2",
+        "scule": "^1.3.0",
+        "unplugin": "^1.12.2",
+        "yaml": "^2.5.0"
+      },
+      "peerDependencies": {
+        "vue-router": "^4.4.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-router/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/unplugin-vue-router/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@@ -10354,39 +10403,19 @@
         }
       }
     },
-    "node_modules/vite-plugin-pages": {
-      "version": "0.32.3",
-      "resolved": "https://registry.npmmirror.com/vite-plugin-pages/-/vite-plugin-pages-0.32.3.tgz",
-      "integrity": "sha512-1vmKwc9e+lRBLkpTAMUNSVV3BglyE+DRa0iivpe6q3pbOCGkAHHSUp8f6yceXC8+lu/kFgH60vm5vK6IHyvdVw==",
+    "node_modules/vite-plugin-vue-layouts": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-layouts/-/vite-plugin-vue-layouts-0.11.0.tgz",
+      "integrity": "sha512-uh6NW7lt+aOXujK4eHfiNbeo55K9OTuB7fnv+5RVc4OBn/cZull6ThXdYH03JzKanUfgt6QZ37NbbtJ0og59qw==",
       "dev": true,
       "dependencies": {
-        "@types/debug": "^4.1.12",
-        "debug": "^4.3.5",
-        "dequal": "^2.0.3",
-        "extract-comments": "^1.1.0",
-        "fast-glob": "^3.3.2",
-        "json5": "^2.2.3",
-        "local-pkg": "^0.5.0",
-        "picocolors": "^1.0.1",
-        "yaml": "^2.4.5"
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2"
       },
       "peerDependencies": {
-        "@vue/compiler-sfc": "^2.7.0 || ^3.0.0",
-        "vite": "^2.0.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@solidjs/router": {
-          "optional": true
-        },
-        "@vue/compiler-sfc": {
-          "optional": true
-        },
-        "react-router": {
-          "optional": true
-        },
-        "vue-router": {
-          "optional": true
-        }
+        "vite": "^4.0.0 || ^5.0.0",
+        "vue": "^3.2.4",
+        "vue-router": "^4.0.11"
       }
     },
     "node_modules/vite-plugin-vue-setup-extend": {
diff --git a/package.json b/package.json
index 7fab7f0..a43ab3d 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,9 @@
     "unocss": "0.62.2",
     "unplugin-auto-import": "0.18.2",
     "unplugin-vue-components": "0.27.4",
+    "unplugin-vue-router": "0.10.8",
     "vite": "5.4.2",
-    "vite-plugin-pages": "0.32.3",
+    "vite-plugin-vue-layouts": "0.11.0",
     "vue-tsc": "2.0.29"
   },
   "resolutions": {
diff --git a/src/components/layout/Aside.vue b/src/components/layout/Aside.vue
index 3c8f905..0e0e8d8 100644
--- a/src/components/layout/Aside.vue
+++ b/src/components/layout/Aside.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { routes } from 'vue-router/auto-routes'
 import { APP_NAME } from '@/config/app'
-import router from '~pages'
 
 const route = useRoute()
 const { isCollapse } = useStore('app')
-const menus = getMenus(router, '')
+const menus = getMenus(routes, '')
 
 function getMenus(route: any, path: string) {
   return route
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index ed8e218..8060aca 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import type { RouteRecordNameGeneric } from 'vue-router'
-import { onBeforeRouteUpdate } from 'vue-router'
-
 const { logout } = useStore('user')
 
 const {
   isCollapse,
   tabs,
   updateCollapse,
-  addTab,
   removeTab,
   removeOtherTab,
   removeRightTab,
@@ -20,21 +16,12 @@ const router = useRouter()
 
 // 面包屑
 const breadcrumbArr = computed(() => {
-  return route.matched.filter((item) => !['/', '/dashboard'].includes(item.path))
-})
-
-// 更新头部tabs
-onBeforeRouteUpdate((to, _from, next) => {
-  if (to.meta.title) {
-    const tab = { title: to.meta.title, name: to.name } as App.Tab
-    addTab(tab)
-  }
-  next()
+  return route.matched.filter((item) => !['/'].includes(item.path) && item.meta.title)
 })
 
 // 切换tabs
 function tabClick(val: number | string = 0, delay = true) {
-  let name: RouteRecordNameGeneric
+  let name: any
   if (typeof val === 'number') {
     name = tabs.value[val].name
   } else {
diff --git a/src/env.d.ts b/src/env.d.ts
index 2678b41..4d11849 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-pages/client" />
+/// <reference types="unplugin-vue-router/client" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
new file mode 100644
index 0000000..6b2e74c
--- /dev/null
+++ b/src/layouts/default.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const { tabs } = useStore('app')
+
+const router = useRouter()
+const routes = router.getRoutes()
+const needCacheRouteNames = routes
+  .filter((item) => item.meta && !item.meta.notCache)
+  .map((item) => item.name)
+
+const cacheList = computed(() => {
+  const arr = tabs.value
+    .map((item) => item.name)
+    .filter((item) => needCacheRouteNames.includes(item))
+  return arr
+})
+</script>
+
+<template>
+  <el-container>
+    <el-aside>
+      <Aside />
+    </el-aside>
+    <el-container>
+      <el-header>
+        <Header />
+      </el-header>
+      <el-main>
+        <router-view v-slot="{ Component, route }">
+          <transition name="fade-transform" mode="out-in">
+            <keep-alive :include="cacheList">
+              <component :is="Component" :key="route.name" />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+  <el-backtop target=".el-main" />
+</template>
diff --git a/src/pages/404.vue b/src/pages/[...path].vue
similarity index 100%
rename from src/pages/404.vue
rename to src/pages/[...path].vue
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 6b2e74c..0841689 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,39 +1,59 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "dashboard",
+    "icon": "clarity:dashboard-solid",
+    "sort": 1
+  }
+}
+</route>
+
 <script lang="ts" setup>
-const { tabs } = useStore('app')
+import apiTest from '@/api/apiTest'
 
 const router = useRouter()
-const routes = router.getRoutes()
-const needCacheRouteNames = routes
-  .filter((item) => item.meta && !item.meta.notCache)
-  .map((item) => item.name)
-
-const cacheList = computed(() => {
-  const arr = tabs.value
-    .map((item) => item.name)
-    .filter((item) => needCacheRouteNames.includes(item))
-  return arr
-})
+function pushRouter(path: string) {
+  router.push(path)
+}
+
+const { name, fullName, updateName } = useStore('test')
+const { userInfo, setUserInfo } = useStore('user')
+
+const dateVal = ref(new Date())
+
+const icons = ['foundation-indent-more', 'foundation-indent-less']
+
+async function getTest() {
+  const res = await apiTest.getTest({ a: 1, isLoading: true })
+  if (!res) return
+  console.log(res, 111)
+  // res.data.age
+  // res.data.name
+}
+async function postTest() {
+  const res = await apiTest.postTest({ a: 2 })
+  if (!res) return
+  // res.data.val
+}
 </script>
 
 <template>
-  <el-container>
-    <el-aside>
-      <Aside />
-    </el-aside>
-    <el-container>
-      <el-header>
-        <Header />
-      </el-header>
-      <el-main>
-        <router-view v-slot="{ Component, route }">
-          <transition name="fade-transform" mode="out-in">
-            <keep-alive :include="cacheList">
-              <component :is="Component" :key="route.name" />
-            </keep-alive>
-          </transition>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
-  <el-backtop target=".el-main" />
+  <div class="page-index">
+    <div>控制台</div>
+    <div @click="pushRouter('test1_1')">test1_1</div>
+    <div @click="pushRouter('test2')">test2</div>
+    <div>name:{{ name }}</div>
+    <div>fullName:{{ fullName }}</div>
+    <div @click="updateName('333')">updateName</div>
+    <el-button class="br-10 m-10 w-200 c-#387"> I am ElButton </el-button>
+    <el-date-picker v-model="dateVal" type="date" placeholder="Pick a day" />
+    <div v-for="icon in icons" :key="icon" :class="icon" />
+    <div @click="getTest">getTest</div>
+    <div @click="postTest">postTest</div>
+    <div @click="setUserInfo({ name: 'allen', token: String(Math.random()) })">setUserInfo</div>
+    <div>userInfo:{{ JSON.stringify(userInfo) }}</div>
+    <div v-for="i in 50" :key="i">test</div>
+  </div>
 </template>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index b30bca0..e442dd7 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,3 +1,11 @@
+<route lang="json">
+{
+  "meta": {
+    "layout": false
+  }
+}
+</route>
+
 <script lang="ts" setup>
 const { setUserInfo } = useStore('user')
 const router = useRouter()
@@ -11,7 +19,5 @@ function login() {
 </script>
 
 <template>
-  <div @click="login">
-    login
-  </div>
+  <div @click="login">login</div>
 </template>
diff --git a/src/views/test1.vue b/src/pages/test1.vue
similarity index 100%
rename from src/views/test1.vue
rename to src/pages/test1.vue
diff --git a/src/views/test1/test1_1.vue b/src/pages/test1/test1_1.vue
similarity index 100%
rename from src/views/test1/test1_1.vue
rename to src/pages/test1/test1_1.vue
diff --git a/src/views/test1/test1_1/test1_1_1.vue b/src/pages/test1/test1_1/test1_1_1.vue
similarity index 100%
rename from src/views/test1/test1_1/test1_1_1.vue
rename to src/pages/test1/test1_1/test1_1_1.vue
diff --git a/src/views/test1/test1_2.vue b/src/pages/test1/test1_2.vue
similarity index 100%
rename from src/views/test1/test1_2.vue
rename to src/pages/test1/test1_2.vue
diff --git a/src/views/test1/test1_3.vue b/src/pages/test1/test1_3.vue
similarity index 100%
rename from src/views/test1/test1_3.vue
rename to src/pages/test1/test1_3.vue
diff --git a/src/views/test2.vue b/src/pages/test2.vue
similarity index 100%
rename from src/views/test2.vue
rename to src/pages/test2.vue
diff --git a/src/views/test3.vue b/src/pages/test3.vue
similarity index 100%
rename from src/views/test3.vue
rename to src/pages/test3.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index ff6102f..f17f634 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,29 +2,13 @@ import 'nprogress/nprogress.css'
 
 import NProgress from 'nprogress'
 import { createRouter, createWebHistory } from 'vue-router'
+import { setupLayouts } from 'virtual:generated-layouts'
 
-import routes from '~pages'
+import { routes } from 'vue-router/auto-routes'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      component: () => import('../pages/login.vue'),
-    },
-    {
-      path: '/',
-      name: 'index',
-      redirect: '/dashboard',
-      component: () => import('../pages/index.vue'),
-      children: [
-        ...routes,
-        { path: '/404', name: '404', component: () => import('../pages/404.vue') },
-        { path: '/:catchAll(.*)', redirect: '/404' },
-      ],
-    },
-  ],
+  routes: setupLayouts(routes),
 })
 
 router.beforeEach((to, _from, next) => {
@@ -32,6 +16,11 @@ router.beforeEach((to, _from, next) => {
   if (to.path === '/login') return next()
   const { logged } = useStore('user')
   if (!logged.value) return next('/login')
+  const { addTab } = useStore('app')
+  if (to.meta.title) {
+    const tab = { title: to.meta.title, name: to.name } as App.Tab
+    addTab(tab)
+  }
   next()
 })
 
diff --git a/src/store/app.ts b/src/store/app.ts
index d4819fe..13a8506 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -1,4 +1,4 @@
-const defaultTab: App.Tab = { title: 'dashboard', name: 'dashboard' }
+const defaultTab: App.Tab = { title: 'dashboard', name: '/' }
 
 export default defineStore({
   id: 'app',
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
new file mode 100644
index 0000000..6d7db40
--- /dev/null
+++ b/src/typed-router.d.ts
@@ -0,0 +1,32 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...path]': RouteRecordInfo<'/[...path]', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/test1': RouteRecordInfo<'/test1', '/test1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_1': RouteRecordInfo<'/test1/test1_1', '/test1/test1_1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_1/test1_1_1': RouteRecordInfo<'/test1/test1_1/test1_1_1', '/test1/test1_1/test1_1_1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_2': RouteRecordInfo<'/test1/test1_2', '/test1/test1_2', Record<never, never>, Record<never, never>>,
+    '/test1/test1_3': RouteRecordInfo<'/test1/test1_3', '/test1/test1_3', Record<never, never>, Record<never, never>>,
+    '/test2': RouteRecordInfo<'/test2', '/test2', Record<never, never>, Record<never, never>>,
+    '/test3': RouteRecordInfo<'/test3', '/test3', Record<never, never>, Record<never, never>>,
+  }
+}
diff --git a/src/views/dashboard.vue b/src/views/dashboard.vue
deleted file mode 100644
index 27cd677..0000000
--- a/src/views/dashboard.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<route lang="json">
-{
-  "meta": {
-    "title": "dashboard",
-    "icon": "clarity:dashboard-solid",
-    "sort": 1
-  }
-}
-</route>
-
-<script lang="ts" setup>
-import apiTest from '@/api/apiTest'
-
-const router = useRouter()
-function pushRouter(path: string) {
-  router.push(path)
-}
-
-const { name, fullName, updateName } = useStore('test')
-const { userInfo, setUserInfo } = useStore('user')
-
-const dateVal = ref(new Date())
-
-const icons = ['foundation-indent-more', 'foundation-indent-less']
-
-async function getTest() {
-  const res = await apiTest.getTest({ a: 1, isLoading: true })
-  if (!res) return
-  console.log(res, 111)
-  // res.data.age
-  // res.data.name
-}
-async function postTest() {
-  const res = await apiTest.postTest({ a: 2 })
-  if (!res) return
-  // res.data.val
-}
-</script>
-
-<template>
-  <div class="page-dashboard">
-    <div>控制台</div>
-    <div @click="pushRouter('test1_1')">test1_1</div>
-    <div @click="pushRouter('test2')">test2</div>
-    <div>name:{{ name }}</div>
-    <div>fullName:{{ fullName }}</div>
-    <div @click="updateName('333')">updateName</div>
-    <el-button class="br-10 m-10 w-200 c-#387"> I am ElButton </el-button>
-    <el-date-picker v-model="dateVal" type="date" placeholder="Pick a day" />
-    <div v-for="icon in icons" :key="icon" :class="icon" />
-    <div @click="getTest">getTest</div>
-    <div @click="postTest">postTest</div>
-    <div @click="setUserInfo({ name: 'allen', token: String(Math.random()) })">setUserInfo</div>
-    <div>userInfo:{{ JSON.stringify(userInfo) }}</div>
-    <div v-for="i in 50" :key="i">test</div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/tsconfig.json b/tsconfig.json
index df7bf7b..2e5a85b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
       "@/*": ["src/*"]
     },
     "resolveJsonModule": true,
-    "types": ["element-plus/global"],
+    "types": ["element-plus/global", "unplugin-vue-router/client", "vite-plugin-vue-layouts/client"],
     "strict": true,
     "sourceMap": true,
     "esModuleInterop": true,
@@ -19,5 +19,5 @@
     "skipLibCheck": true
   },
   "references": [{ "path": "./tsconfig.node.json" }],
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "./typed-router.d.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5fcd8d0..674d046 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,8 @@ import AutoImport from 'unplugin-auto-import/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig, loadEnv } from 'vite'
-import Pages from 'vite-plugin-pages'
+import VueRouter from 'unplugin-vue-router/vite'
+import Layouts from 'vite-plugin-vue-layouts'
 
 // eslint-disable-next-line node/prefer-global/process
 const env = process.argv[process.argv.length - 1]
@@ -50,8 +51,11 @@ export default defineConfig({
     }),
     vue(),
     Unocss(),
-    Pages({
-      dirs: ['src/views'],
+    VueRouter({
+      dts: 'src/typed-router.d.ts',
+    }),
+    Layouts({
+      defaultLayout: 'default',
     }),
   ],
   server: {